:root {
  --primary: 211 90% 40%;
  --primary-foreground: 0 0% 100%;
  --secondary: 216 94% 31%;
  --secondary-foreground: 210 100% 96%;
  --accent: 197 100% 44%;
  --accent-foreground: 0 0% 100%;
  --ring: 197 100% 44%;
  --input: 211 38% 29%;
  --radius: 0.75rem;
  --ruida-viewer-bg: #07111f;
  --ruida-viewer-panel: #0d1b2b;
  --ruida-viewer-control: #14263a;
  --ruida-viewer-border: #29435d;
  --ruida-viewer-text: #e6eef7;
  --ruida-viewer-muted: #8fa3b8;
}

html,
body,
#root {
  color-scheme: dark;
  font-family: "Inter", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--ruida-viewer-bg);
}

.ruida-viewer-brand {
  display: flex;
  min-width: 160px;
  align-items: center;
  gap: 12px;
  color: var(--ruida-viewer-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ruida-viewer-brand img {
  width: 100px;
  height: 34px;
  object-fit: contain;
}

.ruida-viewer-brand + * {
  font-family: inherit;
}

button,
[role="button"] {
  border-radius: 12px;
}

button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgb(0 163 224 / 38%);
  outline-offset: 2px;
}

button,
[role="button"],
input,
select {
  transition: color 150ms ease, background-color 150ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media (max-width: 720px) {
  .ruida-viewer-brand {
    min-width: 30px;
  }

  .ruida-viewer-brand img {
    width: 30px;
    height: 30px;
    content: url("/ruida-favicon.png");
    object-fit: contain;
  }

  .ruida-viewer-brand span {
    display: none;
  }

  /* OHIF's default desktop side panels leave only a sliver of the image at
     phone widths. Mobile viewing is intentionally canvas-first; panel actions
     remain available from the compact toolbar. */
  .relative.flex.w-full.flex-row.flex-nowrap.items-stretch.overflow-hidden.bg-background
    > .flex.h-full.w-full
    > :is(div:nth-child(1), div:nth-child(2), div:nth-child(4), div:nth-child(5)) {
    display: none !important;
  }

  .relative.flex.w-full.flex-row.flex-nowrap.items-stretch.overflow-hidden.bg-background
    > .flex.h-full.w-full
    > div:nth-child(3) {
    width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 100% !important;
  }
}