/* Shared palette for RS3 streamer tools */
:root {
  --accent: #7bc4ff;
  --accent-bright: #bde6ff;
  --border: #6ca0c2;
  --text: #d8e8f4;
  --muted: #9eb6c6;

  /* Console palette */
  --bg: #0b1621;
  --panel: #0d2232;
  --panel-2: #0a1826;
  /* Shell / control backdrop */
  --shell-bg: linear-gradient(180deg, #0e2335 0%, #091521 100%);

  /* Overlay palette */
  --panel-overlay: #0f2232;
  --panel-overlay-2: #0a1724;

  --shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
  --glass: rgba(12, 35, 46, 0.7);
  --glow-outer: rgba(123, 196, 255, 0.24);
  --glow-inner: rgba(123, 196, 255, 0.18);

  /* Subtle speckled texture */
  --texture: radial-gradient(rgba(255, 255, 255, 0.035) 2px, transparent 2px),
    radial-gradient(rgba(0, 0, 0, 0.16) 2px, transparent 2px),
    radial-gradient(rgba(255, 255, 255, 0.025) 2px, transparent 2px);
  --texture-size: 110px 110px, 140px 140px, 120px 120px;
  --texture-position: 0 0, 28px 40px, 60px 20px;
  --texture-opacity: 0.6;

  /* Fallbacks for environments where CSS vars may not load (e.g. file://) */
  --texture-fallback: radial-gradient(rgba(255, 255, 255, 0.035) 2px, transparent 2px),
    radial-gradient(rgba(0, 0, 0, 0.16) 2px, transparent 2px),
    radial-gradient(rgba(255, 255, 255, 0.025) 2px, transparent 2px);
  --texture-size-fallback: 110px 110px, 140px 140px, 120px 120px;
  --texture-position-fallback: 0 0, 28px 40px, 60px 20px;

  /* Grain overlay (ibelick-style) */
  --noise: radial-gradient(1.4px 1.4px at 12% 18%, rgba(255, 255, 255, 0.3), transparent 55%),
    radial-gradient(1.6px 1.6px at 74% 8%, rgba(255, 255, 255, 0.22), transparent 50%),
    radial-gradient(1.6px 1.6px at 38% 76%, rgba(255, 255, 255, 0.26), transparent 52%),
    radial-gradient(1.4px 1.4px at 62% 46%, rgba(0, 0, 0, 0.35), transparent 58%),
    radial-gradient(1.2px 1.2px at 18% 82%, rgba(0, 0, 0, 0.28), transparent 52%),
    radial-gradient(1px 1px at 46% 36%, rgba(255, 255, 255, 0.22), transparent 45%);
  --noise-size: 120px 120px, 160px 160px, 140px 140px, 180px 180px, 160px 160px, 130px 130px;
  --noise-position: 0 0, 78px 22px, 32px 112px, 118px 84px, 142px 48px, 66px 72px;
  --noise-opacity: 0.55;
  --noise-filter: contrast(160%) saturate(140%) blur(0.25px);
}

/* Force a visible grain layer on shell/panels */
.shell,
.panel {
  position: relative;
  isolation: isolate;
}
.shell::before,
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--noise);
  background-size: var(--noise-size);
  background-position: var(--noise-position);
  mix-blend-mode: soft-light;
  opacity: var(--noise-opacity, 0.55);
  filter: var(--noise-filter, contrast(160%) saturate(140%) blur(0.25px));
  z-index: 0;
}
.shell > *,
.panel > * {
  position: relative;
  z-index: 1;
}