/* Prime Creation // existing skin system extension for the Prime Command Deck pill bar */
html[data-prime-skin]{
  --prime-shell-skin-panel:color-mix(in srgb,var(--prime-skin-panel) calc(var(--prime-skin-opacity) * 100%),transparent);
  --prime-shell-skin-panel-strong:color-mix(in srgb,var(--prime-skin-panel-strong) 92%,transparent);
  --prime-shell-skin-control:color-mix(in srgb,var(--prime-skin-panel-strong) 72%,var(--prime-skin-bg) 28%);
  --prime-shell-skin-line:color-mix(in srgb,var(--prime-skin-edge) 34%,transparent);
  --prime-shell-skin-glow:color-mix(in srgb,var(--prime-skin-accent) 24%,transparent);

  --prime-pill-shell:linear-gradient(180deg,color-mix(in srgb,var(--prime-skin-panel-strong) 84%,white 4%),color-mix(in srgb,var(--prime-skin-bg) 92%,black)),var(--prime-skin-surface);
  --prime-pill-control:linear-gradient(180deg,color-mix(in srgb,var(--prime-skin-panel-strong) 70%,var(--prime-skin-text) 3%),color-mix(in srgb,var(--prime-skin-bg) 86%,black));
  --prime-pill-control-hover:linear-gradient(180deg,color-mix(in srgb,var(--prime-skin-panel-strong) 76%,var(--prime-skin-accent) 8%),color-mix(in srgb,var(--prime-skin-bg) 84%,var(--prime-skin-accent-2) 4%));
  --prime-pill-control-active:linear-gradient(180deg,color-mix(in srgb,var(--prime-skin-accent) 20%,var(--prime-skin-panel-strong)),color-mix(in srgb,var(--prime-skin-accent-2) 9%,var(--prime-skin-bg)));
  --prime-pill-edge:color-mix(in srgb,var(--prime-skin-edge) 46%,transparent);
  --prime-pill-edge-soft:color-mix(in srgb,var(--prime-skin-edge) 22%,transparent);
  --prime-pill-highlight:color-mix(in srgb,var(--prime-skin-text) 24%,transparent);
  --prime-pill-glow:color-mix(in srgb,var(--prime-skin-accent) 26%,transparent);
  --prime-pill-glow-2:color-mix(in srgb,var(--prime-skin-accent-2) 20%,transparent);
  --prime-pill-prism-opacity:.58;
  --prime-pill-prism-saturation:1.18;
  --prime-pill-bubble-opacity:.72;
  --prime-pill-control-radius:999px;
}

/* Material-specific extensions. The skin runtime remains the sole state owner. */
html[data-prime-skin="metal"]{
  --prime-pill-shell:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.035) 1px 3px,transparent 3px 6px),linear-gradient(180deg,#313b41 0%,#171e22 42%,#080d10 100%);
  --prime-pill-control:linear-gradient(180deg,#344047 0%,#182126 48%,#0a1014 100%);
  --prime-pill-control-hover:linear-gradient(180deg,#435159 0%,#202c32 48%,#0d1519 100%);
  --prime-pill-control-active:linear-gradient(180deg,#56666e 0%,#26343b 46%,#10171b 100%);
  --prime-pill-prism-opacity:.24;
  --prime-pill-prism-saturation:.58;
  --prime-pill-bubble-opacity:.24;
}
html[data-prime-skin="glass"]{
  --prime-pill-shell:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.035) 24%,rgba(8,35,49,.58) 62%,rgba(2,13,21,.78)),linear-gradient(120deg,color-mix(in srgb,var(--prime-skin-accent) 11%,transparent),transparent 48%,color-mix(in srgb,var(--prime-skin-accent-2) 10%,transparent));
  --prime-pill-control:linear-gradient(180deg,rgba(255,255,255,.13),color-mix(in srgb,var(--prime-skin-panel-strong) 42%,transparent) 44%,color-mix(in srgb,var(--prime-skin-bg) 64%,transparent));
  --prime-pill-control-hover:linear-gradient(180deg,rgba(255,255,255,.2),color-mix(in srgb,var(--prime-skin-accent) 14%,var(--prime-skin-panel-strong)) 42%,color-mix(in srgb,var(--prime-skin-bg) 58%,transparent));
  --prime-pill-control-active:linear-gradient(180deg,color-mix(in srgb,var(--prime-skin-text) 15%,transparent),color-mix(in srgb,var(--prime-skin-accent) 20%,var(--prime-skin-panel)) 45%,color-mix(in srgb,var(--prime-skin-accent-2) 12%,var(--prime-skin-bg)));
  --prime-pill-prism-opacity:.72;
  --prime-pill-prism-saturation:1.32;
  --prime-pill-bubble-opacity:.9;
}
html[data-prime-skin="nexus"]{
  --prime-pill-shell:linear-gradient(rgba(85,240,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(160,119,255,.03) 1px,transparent 1px),linear-gradient(180deg,#142438 0%,#07111f 48%,#02050d 100%);
  --prime-pill-control:linear-gradient(180deg,rgba(35,72,96,.78),rgba(5,18,31,.9));
  --prime-pill-control-hover:linear-gradient(180deg,rgba(45,105,132,.82),rgba(7,28,44,.92));
  --prime-pill-control-active:linear-gradient(180deg,color-mix(in srgb,var(--prime-skin-accent) 25%,#173047),color-mix(in srgb,var(--prime-skin-accent-2) 12%,#07101d));
  --prime-pill-prism-opacity:.76;
  --prime-pill-prism-saturation:1.42;
  --prime-pill-bubble-opacity:.94;
}
html[data-prime-skin="steampunk"]{
  --prime-pill-shell:radial-gradient(circle at 14px 50%,rgba(255,218,142,.19) 0 1px,transparent 1.6px),radial-gradient(circle at calc(100% - 14px) 50%,rgba(255,218,142,.19) 0 1px,transparent 1.6px),linear-gradient(180deg,#5b3d20 0%,#2c1a0f 43%,#120a06 100%);
  --prime-pill-control:linear-gradient(180deg,#654523 0%,#342114 46%,#170d08 100%);
  --prime-pill-control-hover:linear-gradient(180deg,#7a572c 0%,#432919 46%,#1b100a 100%);
  --prime-pill-control-active:linear-gradient(180deg,#9b6d32 0%,#53311b 46%,#211209 100%);
  --prime-pill-prism-opacity:.34;
  --prime-pill-prism-saturation:.78;
  --prime-pill-bubble-opacity:.32;
}
html[data-prime-skin="liquid-gold"]{
  --prime-pill-shell:radial-gradient(ellipse at 18% 20%,rgba(255,248,202,.28),transparent 18%),radial-gradient(ellipse at 78% 72%,rgba(255,169,0,.24),transparent 24%),linear-gradient(112deg,#482700 0%,#a96503 19%,#ffe291 33%,#7a4200 49%,#e7a51a 66%,#4b2600 82%,#ffc94d 100%);
  --prime-pill-control:linear-gradient(180deg,#8a5709 0%,#4f2c00 48%,#211100 100%);
  --prime-pill-control-hover:linear-gradient(180deg,#af7615 0%,#653b02 48%,#2c1700 100%);
  --prime-pill-control-active:linear-gradient(180deg,#e0a934 0%,#82510a 46%,#372000 100%);
  --prime-pill-prism-opacity:.68;
  --prime-pill-prism-saturation:1.18;
  --prime-pill-bubble-opacity:.7;
}

/* New pill shell */
html[data-prime-skin] body.prime-v2 #primeCommandDeck.prime-command-deck{
  --prime-command-deck-edge:var(--prime-pill-edge);
  --prime-command-deck-bg:var(--prime-skin-bg);
  --prime-command-deck-text:var(--prime-skin-text);
  --prime-command-deck-accent:var(--prime-skin-accent);
  --prime-control-cyan:var(--prime-skin-accent);
  --prime-control-mint:var(--prime-skin-accent-2);
  border-color:var(--prime-pill-edge)!important;
  background:var(--prime-pill-shell)!important;
  color:var(--prime-skin-text)!important;
  font-family:var(--prime-skin-font)!important;
  box-shadow:0 10px 32px color-mix(in srgb,var(--prime-skin-bg) 72%,transparent),inset 0 1px 0 var(--prime-pill-highlight),inset 0 -1px 0 color-mix(in srgb,var(--prime-skin-bg) 72%,transparent),0 0 24px var(--prime-pill-glow)!important;
  backdrop-filter:blur(var(--prime-skin-blur)) saturate(1.16)!important;
  -webkit-backdrop-filter:blur(var(--prime-skin-blur)) saturate(1.16)!important;
}

/* The moving optical layer keeps the same animation and spatial pose feed, but inherits each skin. */
html[data-prime-skin] body.prime-v2 #primeCommandDeck.prime-command-deck::before{
  background:linear-gradient(102deg,transparent 0%,color-mix(in srgb,var(--prime-skin-accent) 12%,transparent) 14%,color-mix(in srgb,var(--prime-skin-accent) 30%,transparent) 28%,color-mix(in srgb,var(--prime-skin-accent-2) 28%,transparent) 44%,color-mix(in srgb,var(--prime-skin-text) 13%,transparent) 58%,color-mix(in srgb,var(--prime-skin-edge) 22%,transparent) 73%,color-mix(in srgb,var(--prime-skin-accent-2) 16%,transparent) 87%,transparent 100%),radial-gradient(ellipse at 14% 28%,color-mix(in srgb,var(--prime-skin-accent) 64%,transparent) 0%,color-mix(in srgb,var(--prime-skin-accent) 23%,transparent) 26%,transparent 59%),radial-gradient(ellipse at 84% 66%,color-mix(in srgb,var(--prime-skin-accent-2) 58%,transparent) 0%,color-mix(in srgb,var(--prime-skin-accent-2) 20%,transparent) 28%,transparent 61%),radial-gradient(ellipse at 48% 24%,color-mix(in srgb,var(--prime-skin-text) 30%,transparent) 0%,color-mix(in srgb,var(--prime-skin-accent) 12%,transparent) 29%,transparent 63%),radial-gradient(ellipse at 62% 88%,color-mix(in srgb,var(--prime-skin-edge) 34%,transparent) 0%,color-mix(in srgb,var(--prime-skin-accent-2) 12%,transparent) 31%,transparent 65%),radial-gradient(ellipse at 50% 8%,color-mix(in srgb,var(--prime-skin-text) 27%,transparent) 0%,color-mix(in srgb,var(--prime-skin-text) 8%,transparent) 27%,transparent 55%)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--prime-skin-text) 20%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--prime-skin-bg) 42%,transparent),inset 0 0 18px var(--prime-pill-glow)!important;
  opacity:var(--prime-pill-prism-opacity)!important;
  filter:saturate(var(--prime-pill-prism-saturation)) contrast(1.055)!important;
}
html[data-prime-skin] body.prime-v2 #primeCommandDeck.prime-command-deck::after{
  background:radial-gradient(ellipse 44% 160% at var(--pc-spatial-light-x,50%) var(--pc-spatial-light-y,43%),color-mix(in srgb,var(--prime-skin-text) 46%,transparent) 0%,color-mix(in srgb,var(--prime-skin-accent) 20%,transparent) 19%,color-mix(in srgb,var(--prime-skin-accent) 8%,transparent) 39%,transparent 68%),radial-gradient(ellipse 28% 118% at var(--pc-spatial-attitude-focal-x,50%) var(--pc-spatial-attitude-focal-y,50%),color-mix(in srgb,var(--prime-skin-text) 19%,transparent) 0%,color-mix(in srgb,var(--prime-skin-accent-2) 8%,transparent) 35%,transparent 71%),linear-gradient(180deg,color-mix(in srgb,var(--prime-skin-text) 20%,transparent) 0%,color-mix(in srgb,var(--prime-skin-text) 7%,transparent) 17%,transparent 54%,color-mix(in srgb,var(--prime-skin-bg) 11%,transparent) 100%)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--prime-skin-text) 46%,transparent),inset 0 2px 10px color-mix(in srgb,var(--prime-skin-accent) 10%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--prime-skin-bg) 52%,transparent)!important;
}

/* Bubble flow extension */
html[data-prime-skin] body.prime-v2 #primeCommandDeck>.prime-deck-bubble-loop{opacity:var(--prime-pill-bubble-opacity)!important}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-deck-bubble{
  border-color:color-mix(in srgb,var(--prime-skin-edge) 68%,transparent)!important;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--prime-skin-text) 94%,transparent) 0 14%,color-mix(in srgb,var(--prime-skin-accent) 62%,transparent) 18% 36%,color-mix(in srgb,var(--prime-skin-accent) 20%,transparent) 48%,color-mix(in srgb,var(--prime-skin-accent-2) 10%,transparent) 64%,transparent 72%)!important;
  box-shadow:inset 0 0 2px color-mix(in srgb,var(--prime-skin-text) 72%,transparent),0 0 4px color-mix(in srgb,var(--prime-skin-accent) 48%,transparent)!important;
}

/* Shared pill controls */
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-deck-tool-placeholder,
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-deck-utilities>button,
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-deck-pages>button{
  border-color:var(--prime-pill-edge-soft)!important;
  background:var(--prime-pill-control)!important;
  color:var(--prime-skin-text)!important;
  font-family:var(--prime-skin-font)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--prime-skin-text) 6%,transparent)!important;
}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-deck-tool-placeholder:is(:hover,:focus-visible),
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-deck-utilities>button:is(:hover,:focus-visible),
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-deck-pages>button:is(:hover,:focus-visible){
  border-color:color-mix(in srgb,var(--prime-skin-accent) 52%,transparent)!important;
  background:var(--prime-pill-control-hover)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--prime-skin-text) 12%,transparent),inset 0 0 16px color-mix(in srgb,var(--prime-skin-accent) 7%,transparent),0 0 12px var(--prime-pill-glow)!important;
}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-deck-pages>button[data-active],
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-deck-pages>button[aria-current="page"]{
  border-color:color-mix(in srgb,var(--prime-skin-accent) 58%,transparent)!important;
  background:var(--prime-pill-control-active)!important;
  color:var(--prime-skin-text)!important;
  box-shadow:0 5px 18px color-mix(in srgb,var(--prime-skin-bg) 42%,transparent),inset 0 1px 0 color-mix(in srgb,var(--prime-skin-text) 16%,transparent),inset 0 0 16px color-mix(in srgb,var(--prime-skin-accent) 10%,transparent),0 0 13px var(--prime-pill-glow)!important;
}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-deck-pages>button::before{background:linear-gradient(90deg,transparent,var(--prime-skin-accent),transparent)!important}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-deck-pages>button[data-active] b,
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-deck-pages>button[aria-current="page"] b{color:var(--prime-skin-text)!important;text-shadow:0 0 8px var(--prime-pill-glow)!important}

/* Initializer pill and START HERE marker */
html[data-prime-skin] body.prime-v2 #primeCommandDeck>.prime-deck-initialize{
  border-color:color-mix(in srgb,var(--prime-skin-edge) 60%,transparent)!important;
  background:var(--prime-pill-control-active)!important;
  color:var(--prime-skin-text)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--prime-skin-text) 30%,transparent),inset 0 -2px 4px color-mix(in srgb,var(--prime-skin-bg) 54%,transparent),0 3px 0 color-mix(in srgb,var(--prime-skin-bg) 84%,black),0 7px 14px color-mix(in srgb,var(--prime-skin-bg) 46%,transparent),0 0 16px var(--prime-pill-glow)!important;
  text-shadow:0 1px 0 color-mix(in srgb,var(--prime-skin-bg) 88%,black),0 0 7px var(--prime-pill-glow)!important;
}
html[data-prime-skin] body.prime-v2 #primeCommandDeck>.prime-deck-initialize>b{color:var(--prime-skin-accent)!important;filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--prime-skin-bg) 88%,black)) drop-shadow(0 0 5px var(--prime-pill-glow))!important}
html[data-prime-skin] body.prime-v2 #primeCommandDeck>.prime-deck-initialize::before{
  border-color:color-mix(in srgb,var(--prime-skin-edge) 72%,transparent)!important;
  background:var(--prime-pill-control-active)!important;
  color:var(--prime-skin-text)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--prime-skin-text) 34%,transparent),inset 0 -2px 3px color-mix(in srgb,var(--prime-skin-bg) 55%,transparent),0 3px 0 color-mix(in srgb,var(--prime-skin-bg) 86%,black),0 8px 18px color-mix(in srgb,var(--prime-skin-bg) 48%,transparent),0 0 16px var(--prime-pill-glow)!important;
  text-shadow:0 1px 0 color-mix(in srgb,var(--prime-skin-bg) 92%,black),0 0 6px var(--prime-pill-glow)!important;
}
html[data-prime-skin] body.prime-v2 #primeCommandDeck>.prime-deck-initialize::after{border-color:color-mix(in srgb,var(--prime-skin-edge) 52%,transparent)!important;background:color-mix(in srgb,var(--prime-skin-panel-strong) 76%,var(--prime-skin-bg))!important}

/* Toolbox participation */
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-tools-panel{
  border-color:var(--prime-pill-edge)!important;
  background:var(--prime-skin-pattern),linear-gradient(160deg,color-mix(in srgb,var(--prime-skin-panel-strong) 90%,var(--prime-skin-accent) 4%),color-mix(in srgb,var(--prime-skin-bg) 96%,black))!important;
  color:var(--prime-skin-text)!important;
  box-shadow:0 28px 76px color-mix(in srgb,var(--prime-skin-bg) 74%,transparent),0 0 24px var(--prime-pill-glow)!important;
  backdrop-filter:blur(var(--prime-skin-blur)) saturate(1.16)!important;
  -webkit-backdrop-filter:blur(var(--prime-skin-blur)) saturate(1.16)!important;
  font-family:var(--prime-skin-font)!important;
}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-tools-panel>header{border-bottom-color:color-mix(in srgb,var(--prime-skin-edge) 22%,transparent)!important}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-tools-panel>header small,
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-power small,
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-range{color:var(--prime-skin-muted)!important}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-tools-group{
  border-color:color-mix(in srgb,var(--prime-skin-edge) 24%,transparent)!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--prime-skin-panel-strong) 78%,transparent),color-mix(in srgb,var(--prime-skin-bg) 90%,transparent))!important;
}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-tools-group>header{color:var(--prime-skin-accent)!important}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-tools-close,
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-mode-grid button,
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-spatial-grid button,
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-power,
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-nexus{
  border-color:var(--prime-pill-edge-soft)!important;
  background:var(--prime-pill-control)!important;
  color:var(--prime-skin-text)!important;
}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-mode-grid button[data-active],
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-spatial-grid button[data-active],
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-power[aria-checked="true"]{
  border-color:color-mix(in srgb,var(--prime-skin-accent) 52%,transparent)!important;
  background:var(--prime-pill-control-active)!important;
  color:var(--prime-skin-text)!important;
  box-shadow:inset 0 0 16px color-mix(in srgb,var(--prime-skin-accent) 8%,transparent),0 0 10px var(--prime-pill-glow)!important;
}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-power>i{border-color:color-mix(in srgb,var(--prime-skin-edge) 34%,transparent)!important;background:color-mix(in srgb,var(--prime-skin-panel-strong) 72%,transparent)!important}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-power>i::after{background:var(--prime-skin-muted)!important}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-power[aria-checked="true"]>i::after{background:var(--prime-skin-accent)!important;box-shadow:0 0 .5rem var(--prime-pill-glow)!important}
html[data-prime-skin] body.prime-v2 #primeCommandDeck input[type="range"]{accent-color:var(--prime-skin-accent)!important}
html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-command-range output{color:var(--prime-skin-accent-2)!important}

/* Reduced motion keeps skin identity without forcing optical movement. */
@media(prefers-reduced-motion:reduce){
  html[data-prime-skin] body.prime-v2 #primeCommandDeck.prime-command-deck::before,
  html[data-prime-skin] body.prime-v2 #primeCommandDeck .prime-deck-bubble{animation:none!important}
}