/* PixelDeck v82 shared visual language for the main app and public subpages. */
:root {
  --pd-bg: #041108;
  --pd-surface: #071b10;
  --pd-panel: #0a2415;
  --pd-panel-strong: #0d2d1a;
  --pd-border: #275a35;
  --pd-border-soft: rgba(126, 214, 111, .2);
  --pd-text: #efffea;
  --pd-muted: #a5c1aa;
  --pd-accent: #9be64d;
  --pd-accent-2: #5df7d4;
  --pd-danger: #ff7087;
  --pd-shadow: 0 20px 60px rgba(0, 0, 0, .34);
  --pd-radius: 14px;
}

.v82-subpage {
  margin: 0;
  color: var(--pd-text);
  background:
    radial-gradient(circle at 15% 0, rgba(93, 247, 212, .08), transparent 28rem),
    radial-gradient(circle at 85% 8%, rgba(155, 230, 77, .08), transparent 25rem),
    var(--pd-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.v82-subpage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .24;
  background-image: linear-gradient(rgba(155, 230, 77, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(155, 230, 77, .05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.pd-shell-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px clamp(14px, 3vw, 42px);
  border-bottom: 1px solid var(--pd-border-soft);
  background: rgba(4, 17, 8, .88);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
  backdrop-filter: blur(18px) saturate(1.2);
}

.pd-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  color: var(--pd-text);
  text-decoration: none;
  font-weight: 950;
}

.pd-brand img { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; }
.pd-brand span { letter-spacing: -.02em; }
.pd-nav { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 5px; min-width: 0; }

.pd-nav-link,
.pd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--pd-muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.pd-nav-link:hover,
.pd-nav-link.active { color: var(--pd-text); border-color: var(--pd-border); background: rgba(155, 230, 77, .09); }
.pd-nav-link.active { color: var(--pd-accent); }
.pd-nav-link.primary,
.pd-button.primary { color: #071108; border-color: #caff82; background: linear-gradient(135deg, var(--pd-accent), #caff82); box-shadow: 3px 3px 0 #000; }

.pd-language {
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid var(--pd-border);
  border-radius: 9px;
  color: var(--pd-text);
  background: var(--pd-panel);
  font: inherit;
  font-weight: 900;
}

.pd-panel {
  border: 1px solid var(--pd-border-soft);
  border-radius: var(--pd-radius);
  background: linear-gradient(180deg, rgba(10, 36, 21, .95), rgba(5, 22, 12, .96));
  box-shadow: var(--pd-shadow), inset 0 1px 0 rgba(255, 255, 255, .03);
}

.pd-eyebrow { color: var(--pd-accent); font-size: 11px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 900px) {
  .pd-shell-topbar { position: relative; flex-wrap: wrap; padding: 10px 12px; }
  .pd-brand { flex: 1 1 auto; }
  .pd-nav { order: 3; flex: 1 0 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .pd-nav::-webkit-scrollbar { display: none; }
  .pd-nav-link { flex: 0 0 auto; min-height: 44px; }
  .pd-language { min-width: 64px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}