:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 

--bg0: #03090e;
  --bg1: #06131a;
  --bg2: #131b23;

  --cyan1: 50, 86, 92;   /* #32565c */
  --cyan2: 34, 61, 70;   /* #223d46 */

  --mag1: 89, 36, 35;    /* #592423 */
  --mag2: 62, 31, 41;    /* #3e1f29 */
}

body { margin: 0; background: black; color: #111; display: flex; justify-content: center;  align-items: center; min-height: 100vh;
width:100%;

background:
    /* parem “valgusriba” / cyan kuma */
    radial-gradient(70rem 60rem at 86% 30%,
      rgba(var(--cyan1), .30) 0%,
      rgba(var(--cyan2), .18) 28%,
      rgba(var(--cyan2), .08) 42%,
      rgba(var(--cyan2), 0) 65%),

    /* kesk-lähedane punakas kuma */
    radial-gradient(55rem 55rem at 52% 40%,
      rgba(var(--mag1), .22) 0%,
      rgba(var(--mag2), .14) 30%,
      rgba(var(--mag2), 0) 68%),

    /* tume “vignette/udusus” ülevalt */
    radial-gradient(90rem 70rem at 50% 0%,
      rgba(0,0,0,.65) 0%,
      rgba(0,0,0,.25) 45%,
      rgba(0,0,0,0) 75%),

    /* stabiilne tume alus, et pikk leht oleks ühtlane */
    linear-gradient(180deg,
      var(--bg0) 0%,
      var(--bg1) 45%,
      var(--bg2) 100%);
}


body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(90rem 70rem at 50% 25%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.35) 60%,
      rgba(0,0,0,.55) 90%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,0) 4px
    );

  mix-blend-mode: overlay;
  opacity: .30;
}

.bg-video {
  position: absolute; /* või fixed */
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5) saturate(0.85);
}

.container { max-width: 980px; margin: 24px auto; padding: 0 16px; }
.card { background: rgba(18, 22, 32, 0.92); /* tume sinakas-hall */
  color: #eef2ff; border-radius: 12px;

  border: 1px solid rgba(120, 160, 255, 0.10);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(255, 255, 255, 0.03); margin-bottom:16px; padding:20px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
label { font-weight: 600; }
select { padding: 8px 10px; border-radius: 8px; border: 1px solid #ddd; background: #fff; }
.toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.meta { margin-top: 10px; }
.muted { color: #666; }
.hidden { display: none; }
#specialistToggle {display: none; }
.toggle {display: none; }

.item { border-top: 1px solid #eee; padding-top: 12px; margin-top: 12px; }
.item-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.title { font-weight: 650; }
.right { white-space: nowrap; }

.badge { display: inline-block; font-size: 22px; font-weight: 700; margin-right: 6px; }
.badge-ov { color: red; }
.badge-vo { color: orange; }
.badge-none { color: yellow; }

.instr { margin: 10px 0 0 18px; }
.instr-fallback { margin-top: 10px; padding: 10px; background: #f3f4f6; border-radius: 8px; color: #333; }
.spec { margin-top: 10px; padding: 10px; background: #fafafa; border-radius: 8px; border: 1px dashed #e5e5e5; }
code { background: #efefef; padding: 1px 6px; border-radius: 6px; }