:root {
  /* AnyMediaPlayer Steel theme: shared by the Control Centre and all public
     companion pages. Keep visual tokens here so pages cannot invent palettes. */
  --bg: #020406;
  --grad-top: rgba(8, 10, 18, 0.78);
  --grad-bottom: rgba(2, 4, 10, 0.88);
  --surface: rgba(22, 28, 36, 0.42);
  --surface-2: rgba(22, 28, 36, 0.34);
  --surface-3: rgba(8, 11, 15, 0.46);
  --glass: saturate(1.2) blur(18px);
  --line: rgba(180, 200, 220, 0.14);
  --line-soft: rgba(255, 255, 255, 0.10);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --accent: #8e8e93;
  --accent-strong: #ffffff;
  --accent-glow: #ffffff;
  --accent-dim: rgba(142, 142, 147, 0.20);
  --accent-line: rgba(180, 200, 220, 0.22);
  --selector: #008000;
  --selector-strong: #0aa33f;
  --selector-line: rgba(0, 128, 0, 0.85);
  --tint-green: rgba(0, 128, 0, 0.20);
  --tint-neutral: rgba(255, 255, 255, 0.08);
  --btn-frame: rgba(180, 200, 220, 0.18);
  --tint-danger: rgba(180, 52, 64, 0.36);
  --success: #39d46a;
  --warning: #f4c65d;
  --error: #ff7c86;
  --danger-grad: linear-gradient(180deg, rgba(150, 52, 52, 0.95) 0%, rgba(92, 32, 40, 0.96) 100%);
  --gold-dimmed-gradient: linear-gradient(180deg, #9aa0a6 0%, #6b7077 100%);
  --gold-dimmed-gradient-soft: linear-gradient(180deg, rgba(150, 155, 160, 0.92) 0%, rgba(110, 115, 122, 0.95) 100%);
  --green-gradient: linear-gradient(180deg, #0e8a37 0%, #07672a 100%);
  /* Shared web-control geometry. Public companion pages use these instead of
     inventing page-local button, selector and icon-button dimensions. */
  --control-height: 32px;
  --control-height-mobile: 38px;
  --control-radius: 9px;
  --control-padding-x: 10px;
  --control-font-size: 12px;
  --icon-control-size: 28px;
  --icon-control-size-mobile: 34px;
}