/* Shared shell for specialized lab tools — pairs with portal-themes.css */

html[data-lab-tool] {
  --portal-bg: #000000;
}

html[data-lab-tool="lyric"] {
  --portal-surface: #1a0d18;
  --portal-tint: rgba(255, 77, 141, 0.14);
  --portal-glow: rgba(255, 77, 141, 0.18);
  --portal-accent: #ff4d8d;
  --portal-accent-deep: #d9266d;
  --portal-border-hot: rgba(255, 120, 180, 0.38);
}

html[data-lab-tool="hook"] {
  --portal-surface: #1a100c;
  --portal-tint: rgba(255, 140, 58, 0.14);
  --portal-glow: rgba(255, 140, 58, 0.16);
  --portal-accent: #ff8c3a;
  --portal-accent-deep: #d96b1a;
  --portal-border-hot: rgba(255, 160, 80, 0.38);
}

html[data-lab-tool="tempo"] {
  --portal-surface: #0c1412;
  --portal-tint: rgba(76, 175, 122, 0.14);
  --portal-glow: rgba(76, 175, 122, 0.16);
  --portal-accent: #4caf7a;
  --portal-accent-deep: #2d8a55;
  --portal-border-hot: rgba(79, 212, 168, 0.38);
}

html[data-lab-tool="reframe"] {
  --portal-surface: #0c1420;
  --portal-tint: rgba(74, 139, 232, 0.14);
  --portal-glow: rgba(74, 139, 232, 0.18);
  --portal-accent: #4a8be8;
  --portal-accent-deep: #2563d3;
  --portal-border-hot: rgba(90, 160, 255, 0.38);
}

html[data-lab-tool="montage"] {
  --portal-surface: #0c1620;
  --portal-tint: rgba(120, 200, 255, 0.14);
  --portal-glow: rgba(120, 200, 255, 0.16);
  --portal-accent: #78c8ff;
  --portal-accent-deep: #3a8fd4;
  --portal-border-hot: rgba(120, 200, 255, 0.38);
}

html[data-lab-tool="vs"] {
  --portal-surface: #12101c;
  --portal-tint: rgba(155, 140, 255, 0.14);
  --portal-glow: rgba(155, 140, 255, 0.16);
  --portal-accent: #9b8cff;
  --portal-accent-deep: #6b5cff;
  --portal-border-hot: rgba(176, 156, 255, 0.38);
}

html[data-lab-tool] body {
  background:
    radial-gradient(ellipse 85% 55% at 50% -12%, var(--portal-glow), transparent 62%),
    radial-gradient(ellipse 45% 35% at 100% 100%, var(--portal-tint), transparent 55%),
    var(--portal-bg) !important;
}

html[data-lab-tool] .bar {
  background: rgba(0, 0, 0, 0.78) !important;
  border-bottom-color: var(--portal-border-hot, rgba(255, 255, 255, 0.06)) !important;
}

html[data-lab-tool] .card {
  background: rgba(0, 0, 0, 0.42) !important;
  border-color: var(--portal-border, rgba(255, 255, 255, 0.06)) !important;
}

html[data-lab-tool] .card h2 {
  color: var(--portal-accent) !important;
}

html[data-lab-tool] button.primary {
  background: linear-gradient(180deg, var(--portal-accent), var(--portal-accent-deep)) !important;
}

html[data-lab-tool] button.primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

html[data-lab-tool] .drop:hover,
html[data-lab-tool] .drop.over {
  border-color: var(--portal-accent) !important;
  background: color-mix(in srgb, var(--portal-accent) 10%, transparent) !important;
}

html[data-lab-tool] .modes button.active,
html[data-lab-tool] .templates button.active {
  background: color-mix(in srgb, var(--portal-accent) 22%, transparent) !important;
  border-color: var(--portal-accent) !important;
  color: #fff !important;
}

html[data-lab-tool] .hl-tip,
html[data-lab-tool] .hl-flow,
html[data-lab-tool] .tr-tip,
html[data-lab-tool] .sr-tip,
html[data-lab-tool] .pm-tip,
html[data-lab-tool] .vs-tip {
  border-color: var(--portal-border-hot) !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--portal-accent) 16%, transparent),
    color-mix(in srgb, var(--portal-accent) 6%, transparent)
  ) !important;
}

html[data-lab-tool] .brand {
  color: var(--portal-accent);
}