/* =========================================================
   ARK Liquid Glass — Design System
   ========================================================= */

:root {
  /* Colors */
  --lg-canvas:        #07110b;
  --lg-canvas-2:      #0b1b15;
  --lg-ink:           #ffffff;
  --lg-ink-dim:       #dbeafe;
  --lg-ink-mute:      #9fb6d8;

  --lg-accent:        #16a34a;   /* verde */
  --lg-accent-2:      #facc15;   /* amarelo */
  --lg-accent-3:      #2563eb;   /* azul */
  --lg-success:       #22c55e;
  --lg-warn:          #f59e0b;
  --lg-danger:        #ef4444;
  --lg-info:          #3b82f6;

  /* Glass surfaces */
  --lg-glass-bg:        rgba(255, 255, 255, 0.045);
  --lg-glass-bg-2:      rgba(255, 255, 255, 0.07);
  --lg-glass-bg-thick:  rgba(5, 22, 32, 0.64);
  --lg-glass-bg-thin:   rgba(255, 255, 255, 0.025);

  --lg-border:          rgba(255, 255, 255, 0.10);
  --lg-border-strong:   rgba(255, 255, 255, 0.18);
  --lg-border-soft:     rgba(255, 255, 255, 0.06);

  /* Glow */
  --lg-glow-accent:     0 0 24px rgba(22, 163, 74, 0.40);
  --lg-glow-accent-2:   0 0 24px rgba(250, 204, 21, 0.38);
  --lg-glow-accent-3:   0 0 24px rgba(37, 99, 235, 0.42);

  /* Radii */
  --lg-r-sm: 12px;
  --lg-r-md: 16px;
  --lg-r-lg: 22px;
  --lg-r-xl: 28px;
  --lg-r-pill: 999px;

  /* Blur depths */
  --lg-blur-sm: blur(12px) saturate(160%);
  --lg-blur-md: blur(28px) saturate(180%);
  --lg-blur-lg: blur(48px) saturate(200%);
  --lg-blur-xl: blur(64px) saturate(200%);

  /* Typography */
  --lg-font-display: "Geist", "SF Pro Display", "Inter", system-ui, -apple-system, sans-serif;
  --lg-font-text:    "Geist", "SF Pro Text", "Inter", system-ui, -apple-system, sans-serif;
  --lg-font-mono:    "JetBrains Mono", "SF Mono", "Geist Mono", ui-monospace, monospace;

  /* Easing */
  --lg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   Base
   ========================================================= */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.lg-canvas {
  min-height: 100vh;
  font-family: var(--lg-font-text);
  color: var(--lg-ink);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  background: #020705;
  position: relative;
  overflow-x: hidden;
}

/* ============================
   Galaxy background layers
   ============================ */
.lg-galaxy {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Deep base + ambient color */
.lg-galaxy .gx-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 820px at 10% -8%,   rgba(22, 163, 74, 0.56), rgba(22, 163, 74, 0.26) 34%, transparent 70%),
    radial-gradient(1050px 760px at 96% 6%,    rgba(250, 204, 21, 0.40), rgba(250, 204, 21, 0.20) 36%, transparent 70%),
    radial-gradient(1200px 920px at 54% 112%,  rgba(37, 99, 235, 0.52), rgba(37, 99, 235, 0.26) 38%, transparent 72%),
    radial-gradient(850px 680px  at 86% 72%,   rgba(255, 255, 255, 0.08), transparent 62%),
    linear-gradient(180deg, #06140b 0%, #020705 100%);
}

/* Nebula clouds drifting */
.lg-galaxy .gx-nebula {
  position: absolute;
  width: 1400px; height: 1400px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  mix-blend-mode: screen;
  will-change: transform;
}
.lg-galaxy .gx-nebula.n1 {
  left: -10%; top: -20%;
  background: radial-gradient(circle at 40% 40%, rgba(22,163,74,.58), transparent 55%);
  animation: gxDrift1 38s ease-in-out infinite alternate;
}
.lg-galaxy .gx-nebula.n2 {
  right: -15%; top: 10%;
  background: radial-gradient(circle at 60% 50%, rgba(250,204,21,.46), transparent 55%);
  animation: gxDrift2 46s ease-in-out infinite alternate;
}
.lg-galaxy .gx-nebula.n3 {
  left: 30%; bottom: -25%;
  background: radial-gradient(circle at 50% 50%, rgba(37,99,235,.44), transparent 55%);
  animation: gxDrift3 52s ease-in-out infinite alternate;
}
.lg-galaxy .gx-nebula.n4 {
  right: 10%; bottom: -10%;
  width: 900px; height: 900px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.26), transparent 55%);
  animation: gxDrift4 60s ease-in-out infinite alternate;
}

@keyframes gxDrift1 { from { transform: translate(0,0) rotate(0deg); } to { transform: translate(120px,80px) rotate(35deg); } }
@keyframes gxDrift2 { from { transform: translate(0,0) rotate(0deg); } to { transform: translate(-160px,120px) rotate(-30deg); } }
@keyframes gxDrift3 { from { transform: translate(0,0) rotate(0deg); } to { transform: translate(140px,-90px) rotate(25deg); } }
@keyframes gxDrift4 { from { transform: translate(0,0) rotate(0deg); } to { transform: translate(-110px,-70px) rotate(-20deg); } }

/* Spiral galaxy core (faint, decorative) */
.lg-galaxy .gx-core {
  position: absolute;
  left: 70%; top: 18%;
  width: 720px; height: 720px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.50) 0%, rgba(250,204,21,.34) 8%, rgba(22,163,74,.20) 22%, transparent 55%);
  filter: blur(2px);
  opacity: .45;
  mix-blend-mode: screen;
  animation: gxSpin 180s linear infinite;
}
.lg-galaxy .gx-core::before,
.lg-galaxy .gx-core::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(22,163,74,.20) 30deg,
      transparent 60deg,
      rgba(250,204,21,.18) 180deg,
      transparent 220deg,
      rgba(37,99,235,.16) 300deg,
      transparent 360deg);
  filter: blur(20px);
  mix-blend-mode: screen;
}
.lg-galaxy .gx-core::after {
  transform: rotate(45deg) scale(.85);
  opacity: .7;
}

@keyframes gxSpin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Static star layers (parallax via different sizes) */
.lg-galaxy .gx-stars {
  position: absolute; inset: -10%;
  background-repeat: repeat;
  opacity: .9;
}
.lg-galaxy .gx-stars.s1 {
  background-image:
    radial-gradient(1px 1px at 23px 47px,  rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 110px 200px, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 250px 80px,  rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 320px 300px, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 60px 350px,  rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 200px 420px, rgba(255,255,255,.55), transparent 60%);
  background-size: 400px 500px;
  animation: gxTwinkle 4.5s ease-in-out infinite alternate;
}
.lg-galaxy .gx-stars.s2 {
  background-image:
    radial-gradient(1.5px 1.5px at 80px 120px, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 280px 240px, rgba(199,210,254,.85), transparent 60%),
    radial-gradient(1.4px 1.4px at 420px 60px, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 520px 380px, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1.3px 1.3px at 150px 460px, rgba(244,114,182,.65), transparent 60%);
  background-size: 600px 600px;
  animation: gxTwinkle 6s ease-in-out infinite alternate;
  animation-delay: -2s;
}
.lg-galaxy .gx-stars.s3 {
  background-image:
    radial-gradient(2px 2px at 200px 100px, rgba(255,255,255,1), transparent 55%),
    radial-gradient(2px 2px at 700px 300px, rgba(199,210,254,.9), transparent 55%),
    radial-gradient(2.4px 2.4px at 400px 500px, rgba(255,255,255,1), transparent 55%),
    radial-gradient(2px 2px at 850px 700px, rgba(255,255,255,.95), transparent 55%);
  background-size: 900px 900px;
  animation: gxTwinkle 8s ease-in-out infinite alternate;
  animation-delay: -4s;
}

@keyframes gxTwinkle {
  0%   { opacity: .55; }
  50%  { opacity: 1; }
  100% { opacity: .7; }
}

/* Bright twinkling pinpoint stars (with diffraction spikes) */
.lg-galaxy .gx-bright {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 4px 1px rgba(255,255,255,.9),
    0 0 12px 2px rgba(199,210,254,.5);
}
.lg-galaxy .gx-bright::before,
.lg-galaxy .gx-bright::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transform: translate(-50%,-50%);
}
.lg-galaxy .gx-bright::before { width: 18px; height: 1px; }
.lg-galaxy .gx-bright::after  { width: 1px; height: 18px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.85), transparent); }
.lg-galaxy .gx-bright {
  animation: gxBrightPulse 4s ease-in-out infinite;
}
@keyframes gxBrightPulse {
  0%, 100% { transform: scale(.7); opacity: .55; }
  50%      { transform: scale(1.1); opacity: 1; }
}

/* Shooting stars */
.lg-galaxy .gx-shoot {
  position: absolute;
  top: 0; left: 0;
  width: 140px; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95));
  border-radius: 999px;
  filter: drop-shadow(0 0 6px rgba(199,210,254,.9));
  opacity: 0;
  transform-origin: right center;
}
.lg-galaxy .gx-shoot::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  width: 4px; height: 4px;
  background: #fff;
  border-radius: 50%;
  transform: translate(50%,-50%);
  box-shadow: 0 0 10px 2px rgba(255,255,255,.9);
}
@keyframes gxShoot {
  0%   { opacity: 0; transform: translate(0,0) rotate(20deg); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translate(-700px, 260px) rotate(20deg); }
}

/* Subtle film grain on top */
.lg-galaxy .gx-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .30;
  mix-blend-mode: overlay;
}

/* Ensure shell is above galaxy */
.lg-shell { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .lg-galaxy * { animation: none !important; }
}

.lg-shell {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 32px 96px;
}

/* =========================================================
   Reusable glass primitive
   ========================================================= */
.lg-glass {
  position: relative;
  background: var(--lg-glass-bg);
  backdrop-filter: var(--lg-blur-md);
  -webkit-backdrop-filter: var(--lg-blur-md);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 20px 60px -20px rgba(0,0,0,0.55);
}

/* Top reflective highlight */
.lg-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 35%);
  mix-blend-mode: screen;
  opacity: .9;
}

/* Inner subtle vignette */
.lg-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 -40px 80px -40px rgba(0,0,0,0.55);
}

/* =========================================================
   Header
   ========================================================= */
.lg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-radius: var(--lg-r-pill);
  background: rgba(15, 19, 34, 0.45);
  backdrop-filter: var(--lg-blur-md);
  -webkit-backdrop-filter: var(--lg-blur-md);
  border: 1px solid var(--lg-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 12px 40px -12px rgba(0,0,0,0.6);
  position: sticky;
  top: 16px;
  z-index: 50;
}

.lg-logo {
  font-family: var(--lg-font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 14px;
  color: var(--lg-ink);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
  padding-left: 8px;
}
.lg-logo b {
  background: linear-gradient(90deg, var(--lg-accent-2), var(--lg-accent-3));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.lg-nav {
  display: flex; gap: 4px; align-items: center;
  font-size: 13px;
}
.lg-nav a {
  color: var(--lg-ink-dim);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--lg-r-pill);
  transition: all .25s var(--lg-ease);
  font-weight: 500;
}
.lg-nav a:hover {
  color: var(--lg-ink);
  background: rgba(255,255,255,0.06);
}

/* =========================================================
   Hero
   ========================================================= */
.lg-hero { margin: 56px 0 40px; }
.lg-hero h1 {
  font-family: var(--lg-font-display);
  font-weight: 800;
  font-size: clamp(56px, 8vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--lg-ink);
}
.lg-hero h1 .grad {
  background: linear-gradient(100deg, #ffffff 0%, var(--lg-accent-2) 45%, var(--lg-accent-3) 95%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.lg-hero p {
  margin: 18px 0 0;
  color: var(--lg-ink-dim);
  font-size: 14px;
  max-width: 720px;
}
.lg-hero p code {
  font-family: var(--lg-font-mono);
  font-size: 12px;
  color: var(--lg-accent-3);
  background: rgba(236, 72, 153, 0.10);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(236, 72, 153, 0.18);
}

/* =========================================================
   Section header
   ========================================================= */
.lg-sec-head {
  display: flex; align-items: baseline; gap: 14px;
  margin: 36px 0 14px;
}
.lg-sec-head h2 {
  font-family: var(--lg-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
  color: var(--lg-ink);
}
.lg-sec-head .meta {
  font-family: var(--lg-font-mono);
  font-size: 11px;
  color: var(--lg-ink-mute);
  letter-spacing: 0.04em;
}
.lg-sec-head::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--lg-accent), var(--lg-accent-2));
  box-shadow: 0 0 12px rgba(250,204,21,.55);
}

/* =========================================================
   Color tokens grid
   ========================================================= */
.lg-grid-colors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .lg-grid-colors { grid-template-columns: repeat(2, 1fr); } }

.lg-token-card {
  position: relative;
  border-radius: var(--lg-r-lg);
  padding: 18px 20px;
  min-height: 96px;
  overflow: hidden;
  border: 1px solid var(--lg-border);
  backdrop-filter: var(--lg-blur-md);
  -webkit-backdrop-filter: var(--lg-blur-md);
  background: var(--lg-glass-bg);
  isolation: isolate;
  transition: transform .3s var(--lg-ease), border-color .3s var(--lg-ease);
}
.lg-token-card:hover { transform: translateY(-3px); border-color: var(--lg-border-strong); }

.lg-token-card .tone {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 100% at 0% 0%, var(--tc, var(--lg-accent)) 0%, transparent 60%),
    linear-gradient(135deg, color-mix(in oklab, var(--tc, var(--lg-accent)) 55%, transparent), transparent 70%);
  opacity: .85;
  z-index: -1;
}
.lg-token-card .gloss {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 40%);
  pointer-events: none;
  border-radius: inherit;
}
.lg-token-card .name {
  font-family: var(--lg-font-display);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.lg-token-card .var {
  font-family: var(--lg-font-mono);
  font-size: 11.5px;
  color: rgba(255,255,255,0.75);
  margin-top: 6px;
  display: flex; gap: 10px;
}
.lg-token-card .var span { color: rgba(255,255,255,0.55); }
.lg-token-card.dark { color: var(--lg-ink); }
.lg-token-card.dark .name { color: var(--lg-ink); text-shadow: none; }

/* =========================================================
   Blur depth row
   ========================================================= */
.lg-grid-blurs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .lg-grid-blurs { grid-template-columns: repeat(2, 1fr); } }

.lg-blur-card {
  position: relative;
  border-radius: var(--lg-r-lg);
  padding: 22px;
  height: 120px;
  overflow: hidden;
  border: 1px solid var(--lg-border);
}
.lg-blur-card .label {
  font-family: var(--lg-font-mono);
  font-size: 10.5px;
  color: var(--lg-ink-mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative; z-index: 2;
}
.lg-blur-card .pill {
  position: absolute;
  left: 50%; top: 60%;
  transform: translate(-50%, -50%);
  padding: 12px 22px;
  border-radius: var(--lg-r-pill);
  border: 1px solid var(--lg-border-strong);
  background: rgba(255,255,255,0.06);
  font-family: var(--lg-font-mono);
  font-size: 13px;
  color: var(--lg-ink);
  z-index: 2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
/* color blob behind to show blur intensity */
.lg-blur-card::before {
  content: "";
  position: absolute; inset: -10%;
  background:
    radial-gradient(40% 70% at 20% 40%, var(--lg-accent-2) 0%, transparent 60%),
    radial-gradient(45% 60% at 80% 70%, var(--lg-accent-3) 0%, transparent 60%),
    radial-gradient(35% 50% at 60% 20%, var(--lg-accent) 0%, transparent 60%);
  z-index: 0;
  opacity: .9;
}
.lg-blur-card::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  backdrop-filter: var(--bf, var(--lg-blur-md));
  -webkit-backdrop-filter: var(--bf, var(--lg-blur-md));
  background: rgba(15,19,34,0.25);
}
.lg-blur-card.bf-sm { --bf: var(--lg-blur-sm); }
.lg-blur-card.bf-md { --bf: var(--lg-blur-md); }
.lg-blur-card.bf-lg { --bf: var(--lg-blur-lg); }
.lg-blur-card.bf-xl { --bf: var(--lg-blur-xl); }

/* =========================================================
   CARD components
   ========================================================= */
.lg-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 900px) { .lg-grid-cards { grid-template-columns: 1fr; } }

.lg-card {
  position: relative;
  border-radius: var(--lg-r-lg);
  padding: 20px 22px;
  border: 1px solid var(--lg-border);
  background: var(--lg-glass-bg);
  backdrop-filter: var(--lg-blur-md);
  -webkit-backdrop-filter: var(--lg-blur-md);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 16px 40px -20px rgba(0,0,0,0.55);
  overflow: hidden;
  transition: transform .35s var(--lg-ease), box-shadow .35s var(--lg-ease), border-color .35s var(--lg-ease);
}
.lg-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 35%);
  pointer-events: none;
}
.lg-card .tag {
  display: inline-block;
  font-family: var(--lg-font-mono);
  font-size: 10.5px;
  color: var(--lg-ink-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--lg-r-pill);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--lg-border-soft);
  margin-bottom: 10px;
}
.lg-card h3 {
  margin: 0 0 4px;
  font-family: var(--lg-font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.lg-card p {
  margin: 0;
  color: var(--lg-ink-dim);
  font-size: 13px;
  line-height: 1.5;
}

.lg-card.thin   { background: var(--lg-glass-bg-thin); backdrop-filter: var(--lg-blur-sm); -webkit-backdrop-filter: var(--lg-blur-sm); }
.lg-card.thick  { background: var(--lg-glass-bg-thick); backdrop-filter: var(--lg-blur-lg); -webkit-backdrop-filter: var(--lg-blur-lg); }

/* Stripes */
.lg-card.stripe {
  border-left-width: 4px;
  padding-left: 22px;
}
.lg-card.stripe-accent-2 { border-left-color: var(--lg-accent-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 4px 0 18px -6px rgba(250,204,21,.55), 0 16px 40px -20px rgba(0,0,0,.55); }
.lg-card.stripe-success  { border-left-color: var(--lg-success);  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 4px 0 18px -6px rgba(34,197,94,.55), 0 16px 40px -20px rgba(0,0,0,.55); }
.lg-card.stripe-success h3::before { content: "✓ "; color: var(--lg-success); }
.lg-card.stripe-danger   { border-left-color: var(--lg-danger);   box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 4px 0 18px -6px rgba(239,68,68,.55), 0 16px 40px -20px rgba(0,0,0,.55); }
.lg-card.stripe-danger h3::before { content: "✕ "; color: var(--lg-danger); }

/* Interactive card */
.lg-card.interactive {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  grid-column: 1 / -1;
}
.lg-card.interactive .chev {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--lg-border);
  transition: all .3s var(--lg-ease);
}
.lg-card.interactive:hover {
  transform: translateY(-4px);
  border-color: rgba(250,204,21,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 0 0 1px rgba(250,204,21,0.25),
    0 30px 60px -20px rgba(0,0,0,0.6),
    0 0 60px -10px rgba(250,204,21,0.42);
}
.lg-card.interactive:hover .chev {
  background: rgba(250,204,21,0.16);
  border-color: rgba(250,204,21,0.55);
  transform: translateX(4px);
}

/* =========================================================
   STAT cards (KPI)
   ========================================================= */
.lg-grid-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 900px) { .lg-grid-stats { grid-template-columns: repeat(2,1fr); } }

.lg-stat-card {
  position: relative;
  border-radius: var(--lg-r-lg);
  padding: 18px 20px;
  border: 1px solid var(--lg-border);
  background: var(--lg-glass-bg);
  backdrop-filter: var(--lg-blur-md);
  -webkit-backdrop-filter: var(--lg-blur-md);
  overflow: hidden;
  transition: transform .35s var(--lg-ease), box-shadow .35s var(--lg-ease);
}
.lg-stat-card:hover { transform: translateY(-3px); }
.lg-stat-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.lg-stat-card .top {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--lg-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c, var(--lg-accent));
}
.lg-stat-card .top .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c, var(--lg-accent));
  box-shadow: 0 0 10px var(--c, var(--lg-accent));
}
.lg-stat-card .num {
  font-family: var(--lg-font-display);
  font-weight: 700;
  font-size: 44px;
  letter-spacing: -0.03em;
  margin: 8px 0 4px;
  color: var(--c, var(--lg-accent));
  line-height: 1;
  text-shadow: 0 0 24px color-mix(in oklab, var(--c, var(--lg-accent)) 50%, transparent);
}
.lg-stat-card .sub {
  font-size: 11.5px;
  color: var(--lg-ink-mute);
}
.lg-stat-card .icon {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--c, var(--lg-accent)) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--c, var(--lg-accent)) 45%, transparent);
  color: var(--c, var(--lg-accent));
}
.lg-stat-card .icon svg { width: 16px; height: 16px; }

.lg-stat-card.c-accent   { --c: var(--lg-accent); }
.lg-stat-card.c-accent-2 { --c: var(--lg-accent-2); }
.lg-stat-card.c-success  { --c: var(--lg-success); }
.lg-stat-card.c-warn     { --c: var(--lg-warn); }

/* =========================================================
   BUTTONS
   ========================================================= */
.lg-btn {
  --bg: rgba(255,255,255,0.06);
  --bd: var(--lg-border);
  --fg: var(--lg-ink);
  --gl: transparent;

  appearance: none;
  font-family: var(--lg-font-text);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--lg-r-pill);
  padding: 8px 16px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  backdrop-filter: var(--lg-blur-sm);
  -webkit-backdrop-filter: var(--lg-blur-sm);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -8px 20px -8px rgba(0,0,0,0.30),
    0 4px 16px -4px var(--gl);
  transition: transform .15s var(--lg-ease), box-shadow .25s var(--lg-ease), background .25s var(--lg-ease), border-color .25s var(--lg-ease);
  position: relative;
  overflow: hidden;
}
.lg-btn::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 50%);
  pointer-events: none;
  border-radius: inherit;
}
.lg-btn svg { width: 14px; height: 14px; }
.lg-btn:hover  { background: color-mix(in oklab, var(--bg) 80%, white 12%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -8px 20px -8px rgba(0,0,0,0.30), 0 8px 26px -6px var(--gl); }
.lg-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0,0,0,0.35); }

.lg-btn.primary { --bg: linear-gradient(180deg, #fde047, #eab308); --bd: rgba(250,204,21,0.58); --gl: rgba(250,204,21,0.48); --fg: #07110b; }
.lg-btn.accent  { --bg: linear-gradient(180deg, #22c55e, #15803d); --bd: rgba(22,163,74,0.58); --gl: rgba(22,163,74,0.50); }
.lg-btn.danger  { --bg: linear-gradient(180deg, #ff6a6a, #d83a3a); --bd: rgba(239,68,68,0.55); --gl: rgba(239,68,68,0.50); }
.lg-btn.ghost   { --bg: transparent; --bd: rgba(255,255,255,0.10); }
.lg-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.lg-btn.sm { padding: 6px 12px; font-size: 12px; }
.lg-btn.lg { padding: 11px 22px; font-size: 14px; }

.lg-btn.icon-only { padding: 8px; width: 34px; height: 34px; justify-content: center; }

/* =========================================================
   INPUTS
   ========================================================= */
.lg-field { display: flex; flex-direction: column; gap: 6px; }
.lg-field > label {
  font-family: var(--lg-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lg-ink-mute);
}
.lg-input, .lg-select, .lg-textarea {
  font-family: var(--lg-font-text);
  font-size: 13px;
  color: var(--lg-ink);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-r-md);
  padding: 11px 14px;
  outline: none;
  backdrop-filter: var(--lg-blur-sm);
  -webkit-backdrop-filter: var(--lg-blur-sm);
  transition: border-color .25s var(--lg-ease), box-shadow .25s var(--lg-ease), background .25s var(--lg-ease);
  width: 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.lg-input::placeholder, .lg-textarea::placeholder { color: var(--lg-ink-mute); }
.lg-input:focus, .lg-select:focus, .lg-textarea:focus {
  border-color: rgba(250,204,21,0.62);
  background: rgba(255,255,255,0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 4px rgba(250,204,21,0.15),
    0 0 20px -2px rgba(250,204,21,0.45);
}
.lg-textarea { min-height: 70px; resize: vertical; }
.lg-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aab1d0' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* =========================================================
   MODAL
   ========================================================= */
.lg-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5, 8, 20, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  display: grid; place-items: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--lg-ease);
}
.lg-modal-overlay.open { opacity: 1; pointer-events: auto; }

.lg-modal {
  width: min(440px, calc(100vw - 40px));
  border-radius: var(--lg-r-xl);
  padding: 28px;
  background: rgba(20, 24, 48, 0.65);
  backdrop-filter: var(--lg-blur-lg);
  -webkit-backdrop-filter: var(--lg-blur-lg);
  border: 1px solid var(--lg-border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 30px 80px -20px rgba(0,0,0,0.7),
    0 0 60px -10px rgba(250,204,21,0.34);
  transform: scale(0.94) translateY(8px);
  transition: transform .35s var(--lg-ease);
  position: relative;
  overflow: hidden;
}
.lg-modal::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.lg-modal-overlay.open .lg-modal { transform: scale(1) translateY(0); }
.lg-modal h3 {
  margin: 0 0 8px;
  font-family: var(--lg-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.lg-modal p {
  margin: 0 0 20px;
  color: var(--lg-ink-dim);
  font-size: 13.5px;
  line-height: 1.55;
}
.lg-modal .row { display: flex; gap: 8px; justify-content: flex-end; }

/* =========================================================
   SIDEBAR
   ========================================================= */
.lg-sidebar-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
}
@media (max-width: 760px) { .lg-sidebar-row { grid-template-columns: 1fr; } }

.lg-sidebar {
  border-radius: var(--lg-r-lg);
  border: 1px solid var(--lg-border);
  background: rgba(15, 19, 34, 0.45);
  backdrop-filter: var(--lg-blur-md);
  -webkit-backdrop-filter: var(--lg-blur-md);
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.lg-sidebar .brand {
  font-family: var(--lg-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.lg-sidebar .brand b { background: linear-gradient(90deg, var(--lg-accent-2), var(--lg-accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-sidebar .brand-sub {
  font-family: var(--lg-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--lg-ink-mute);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.lg-sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--lg-r-md);
  color: var(--lg-ink-dim);
  font-size: 13px;
  cursor: pointer;
  transition: all .25s var(--lg-ease);
  border: 1px solid transparent;
}
.lg-sidebar-item svg { width: 16px; height: 16px; opacity: .8; }
.lg-sidebar-item:hover { color: var(--lg-ink); background: rgba(255,255,255,0.04); }
.lg-sidebar-item.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(250,204,21,0.20), rgba(22,163,74,0.12));
  border-color: rgba(250,204,21,0.45);
  box-shadow: 0 0 24px -6px rgba(250,204,21,0.52), inset 0 1px 0 rgba(255,255,255,0.12);
}

.lg-sidebar-canvas {
  border-radius: var(--lg-r-lg);
  border: 1px solid var(--lg-border);
  background: var(--lg-glass-bg-thin);
  min-height: 220px;
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--lg-ink-mute);
  font-family: var(--lg-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lg-sidebar-canvas::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 80% at 80% 20%, rgba(250,204,21,.22), transparent 60%),
    radial-gradient(40% 60% at 20% 80%, rgba(22,163,74,.20), transparent 60%);
  pointer-events: none;
}

/* =========================================================
   Inputs grid
   ========================================================= */
.lg-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 720px) { .lg-grid-2 { grid-template-columns: 1fr; } }

.lg-panel {
  padding: 18px;
  border-radius: var(--lg-r-lg);
  border: 1px solid var(--lg-border);
  background: var(--lg-glass-bg);
  backdrop-filter: var(--lg-blur-md);
  -webkit-backdrop-filter: var(--lg-blur-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 40px -20px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
}
.lg-panel::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 30%);
  pointer-events: none; border-radius: inherit;
}

/* Buttons panel layout */
.lg-btn-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.lg-btn-row .group-label {
  font-family: var(--lg-font-mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lg-ink-mute);
  margin-right: 8px;
}

.lg-btn-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .lg-btn-cols { grid-template-columns: 1fr; } }

/* utility */
.row-between { display: flex; justify-content: space-between; align-items: center; }
.lg-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); margin: 8px 0; }