/* /var/www/e3/website/css/components.css — Buttons, cards, ribbons, pills, nav, stats */

/* Icons */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}
h1 .icon, h2 .icon, h3 .icon { color: var(--green-400); filter: drop-shadow(0 0 10px rgba(52,196,111,.6)); }
.icon--xl { width: 280px; height: 280px; }
.icon--lg { width: 42px; height: 42px; }
.icon--md { width: 22px; height: 22px; }

/* Buttons — 3D gradient, glow, mandatory icon */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .95em 1.6em;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .01em;
  color: #001a0a;
  background: var(--g-btn);
  border: 1px solid var(--green-300);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-3d), 0 0 0 0 rgba(52,196,111,0);
  transition: transform var(--fast) var(--ease),
              box-shadow var(--medium) var(--ease),
              background var(--medium) var(--ease),
              filter var(--fast) var(--ease);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 45%);
  pointer-events: none;
  border-radius: inherit;
}
.btn:hover {
  transform: translateY(-2px) scale(1.015);
  background: var(--g-btn-hover);
  box-shadow: var(--shadow-3d), var(--glow-strong);
  filter: saturate(1.15);
}
.btn:active { transform: translateY(0) scale(.99); }

.btn--ghost {
  background: transparent;
  color: var(--green-200);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 0 0 1px rgba(110,240,160,.08), 0 0 0 0 transparent;
}
.btn--ghost:hover {
  background: var(--surface-2);
  color: var(--green-50);
  box-shadow: var(--glow-soft);
  border-color: var(--green-400);
}

.btn--sm { padding: .55em 1em; font-size: .85rem; }
.btn--lg { padding: 1.1em 2em; font-size: 1.1rem; }

/* Cards — layered 3D: watermark + glass (blur) + content */
.card {
  position: relative;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--medium) var(--ease),
              border-color var(--medium) var(--ease),
              box-shadow var(--medium) var(--ease);
  box-shadow: var(--shadow-card);
}
.card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(110,240,160,.08), transparent 40%);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--green-500);
  box-shadow: var(--shadow-card), var(--glow);
}

.card__watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--green-500);
  opacity: .06;
  pointer-events: none;
  z-index: var(--z-card);
}
.card__watermark svg { width: 68%; height: 68%; max-width: 320px; }

.card__particles {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  opacity: .55;
}

.card__glass {
  position: relative;
  z-index: var(--z-glass);
  padding: 2em 1.8em;
  border-radius: calc(var(--radius-lg) - 1px);
  backdrop-filter: blur(var(--blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--green-500) 4%, rgba(0,0,0,.4)),
    color-mix(in oklab, var(--green-500) 2%, rgba(0,0,0,.55)));
  border: 1px solid color-mix(in oklab, var(--green-500) 18%, transparent);
  box-shadow: inset 0 1px 0 rgba(110,240,160,.18);
}
.card__glass > *:first-child { margin-top: 0; }
.card__glass > *:last-child { margin-bottom: 0; }

/* Corner ribbon */
.ribbon {
  position: absolute;
  top: 16px; right: -42px;
  transform: rotate(38deg);
  background: var(--g-ribbon);
  color: #001a0a;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35em 3.2em;
  box-shadow: var(--glow), 0 4px 8px rgba(0,0,0,.6);
  z-index: var(--z-ribbon);
  border-top: 1px solid rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(0,0,0,.5);
}

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .35em .85em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--green-200);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pill--hot   { background: linear-gradient(135deg, var(--green-500), var(--green-700)); color: #001a0a; border-color: var(--green-300); box-shadow: var(--glow-soft); }
.pill--idea  { color: var(--green-300); border-color: var(--green-700); }
.pill--done  { background: var(--green-900); color: var(--green-200); }

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  padding: .9em 1.4em;
  display: flex;
  align-items: center;
  gap: 1.4em;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  background: color-mix(in oklab, var(--green-500) 4%, rgba(0,0,0,.6));
  border-bottom: 1px solid var(--border);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-weight: 800;
  color: var(--green-100);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.nav__brand img { width: 28px; height: 28px; filter: drop-shadow(0 0 8px rgba(52,196,111,.6)); }
.nav__links { margin-left: auto; display: flex; gap: 1.1em; }
.nav__links a { display: inline-flex; align-items: center; gap: .35em; font-size: .9rem; font-weight: 600; }

/* Stat card */
.stat {
  position: relative;
  padding: 1.8em 1.4em 1.5em;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-0));
  border: 1px solid var(--border);
  overflow: hidden;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--medium) var(--ease), box-shadow var(--medium) var(--ease), border-color var(--medium) var(--ease);
}
.stat:hover { transform: translateY(-3px); border-color: var(--green-400); box-shadow: var(--shadow-card), var(--glow); }
.stat__wm {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: .07; color: var(--green-400); pointer-events: none;
}
.stat__wm svg { width: 150px; height: 150px; }
.stat__value {
  position: relative;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  color: var(--green-50);
  text-shadow: 0 0 24px rgba(110,240,160,.45);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  position: relative;
  margin-top: .6em;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--green-300);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.stat__value.loading { color: var(--green-700); }