/* Material, light and color are view preferences; the stage data stays shared. */
.v6[data-style="studio"] {
  --v6-bg: #777d7d;
  --v6-ink: #f9faf7;
  --v6-muted: #e0e3df;
  --v6-accent: #efe0b9;
  --v6-led: #fff1cc;
  --v6-line: rgba(229, 238, 233, .34);
  --v6-card: rgba(220, 224, 222, .98);
  --v6-card-ink: #26302e;
  --v6-card-line: rgba(58, 73, 68, .31);
  --v6-radius: 16px;
}

.v6[data-style="hyrox"] {
  --v6-bg: #3e4240;
  --v6-ink: #f3f3ec;
  --v6-muted: #c5c5ba;
  --v6-accent: #e7cd79;
  --v6-led: #fff0a6;
  --v6-line: rgba(240, 224, 157, .31);
  --v6-card: linear-gradient(140deg, #383a36, #282b29);
  --v6-card-ink: #f5f0db;
  --v6-card-line: rgba(226, 211, 156, .36);
  --v6-radius: 3px;
}

.v6[data-style="physio"] {
  --v6-bg: #edf6f1;
  --v6-ink: #20443c;
  --v6-muted: #67857b;
  --v6-accent: #61a992;
  --v6-led: #9ee6ce;
  --v6-line: rgba(86, 148, 127, .3);
  --v6-card: rgba(255, 255, 253, .96);
  --v6-card-ink: #20443c;
  --v6-card-line: rgba(101, 164, 145, .3);
  --v6-radius: 28px;
}

.v6[data-style="nocturne"] {
  --v6-bg: #141b23;
  --v6-ink: #edf1f3;
  --v6-muted: #aab9c5;
  --v6-accent: #a9c5dc;
  --v6-led: #daeafa;
  --v6-line: rgba(177, 205, 224, .27);
  --v6-card: linear-gradient(145deg, #2a3540, #1d2732);
  --v6-card-ink: #eff4f6;
  --v6-card-line: rgba(177, 205, 224, .32);
  --v6-radius: 7px;
}

.v6[data-style="slate"] {
  --v6-bg: #41484c;
  --v6-ink: #f1f3f2;
  --v6-muted: #c3cbcb;
  --v6-accent: #d3dedf;
  --v6-led: #edf4f5;
  --v6-line: rgba(222, 231, 230, .29);
  --v6-card: linear-gradient(145deg, #5b6468, #454e53);
  --v6-card-ink: #f5f7f5;
  --v6-card-line: rgba(229, 235, 233, .28);
  --v6-radius: 4px;
}

.v6::before,
.v6::after { position: absolute; inset: 0; content: ""; pointer-events: none; }
.v6::before { z-index: -2; }
.v6::after { z-index: -1; }

/* A calm, mid-gray node-graph surface: Nuke-inspired, not a replica. */
.v6[data-style="studio"]::before {
  background: radial-gradient(ellipse at 52% 41%, #9ca1a0, transparent 58%),
    linear-gradient(145deg, #818686, #737979 62%, #666d6d);
}
.v6[data-style="studio"]::after {
  opacity: .56;
  background: repeating-linear-gradient(0deg, transparent 0 35px, rgba(247, 251, 248, .045) 36px 37px),
    repeating-linear-gradient(90deg, transparent 0 35px, rgba(247, 251, 248, .045) 36px 37px);
}
.v6[data-style="studio"] .v6-map-depth {
  background: radial-gradient(ellipse 37% 14% at 69% 30%, rgba(30, 39, 38, .12), transparent 78%);
}
.v6[data-style="studio"] .v6-tile-top small { color: #736546; }
.v6[data-style="studio"] .v6-detail-sheet { background: rgba(48, 55, 53, .96); }

.v6[data-style="hyrox"]::before {
  background: radial-gradient(ellipse at 59% 35%, #555a56, transparent 59%),
    linear-gradient(125deg, #464b48, #383e3b 62%, #3e4240);
}
.v6[data-style="hyrox"]::after {
  opacity: .26;
  background: repeating-linear-gradient(90deg, transparent 0 64px, rgba(226, 219, 182, .06) 65px 66px);
}
.v6[data-style="hyrox"] .v6-tile {
  box-shadow: 0 2px 2px rgba(10, 11, 10, .28), 0 9px 11px rgba(10, 11, 10, .3);
}
.v6[data-style="hyrox"] .v6-tile[data-selected="true"] {
  border-left: 4px solid var(--v6-accent);
  box-shadow: 0 3px 3px rgba(10, 11, 10, .3), 0 13px 16px rgba(10, 11, 10, .34);
}
.v6[data-style="hyrox"] .v6-style-switch button[aria-pressed="true"] { border-radius: 2px; }
.v6[data-style="hyrox"] .v6-detail-sheet { border-radius: 3px; background: rgba(32, 34, 32, .96); }

.v6[data-style="physio"]::before {
  background: radial-gradient(ellipse at 50% 38%, #fff, transparent 48%),
    radial-gradient(ellipse at 96% 71%, rgba(118, 186, 161, .24), transparent 44%),
    linear-gradient(120deg, #f5f9f6, #e6f1eb);
}
.v6[data-style="physio"]::after {
  opacity: .42;
  background: repeating-linear-gradient(18deg, transparent 0 4px, rgba(59, 108, 91, .014) 5px 6px);
}
.v6[data-style="physio"] .v6-brand img { filter: brightness(0); }
.v6[data-style="physio"] .v6-tile {
  box-shadow: 0 2px 2px rgba(48, 96, 81, .11), 0 9px 11px rgba(48, 96, 81, .13);
}
.v6[data-style="physio"] .v6-tile[data-selected="true"] {
  box-shadow: 0 3px 3px rgba(48, 96, 81, .13), 0 13px 16px rgba(48, 96, 81, .17);
}
.v6[data-style="physio"] .v6-detail-sheet { border-radius: 28px; background: rgba(36, 77, 66, .94); }

.v6[data-style="nocturne"]::before {
  background: radial-gradient(ellipse 36% 38% at 66% 38%, rgba(94, 122, 148, .19), transparent 90%),
    linear-gradient(135deg, #202b36, #141b23 53%, #10151c);
}
.v6[data-style="nocturne"]::after {
  opacity: .14;
  background: repeating-linear-gradient(0deg, transparent 0 56px, rgba(203, 222, 237, .08) 57px 58px);
}
.v6[data-style="nocturne"] .v6-map-depth {
  background: radial-gradient(ellipse 48% 20% at 69% 32%, rgba(3, 8, 14, .42), transparent 85%);
}
.v6[data-style="nocturne"] .v6-tile {
  box-shadow: 0 2px 2px rgba(0, 3, 7, .46), 0 9px 12px rgba(0, 3, 7, .45);
}
.v6[data-style="nocturne"] .v6-tile[data-selected="true"] {
  box-shadow: 0 3px 3px rgba(0, 3, 7, .52), 0 13px 17px rgba(0, 3, 7, .5);
}
.v6[data-style="nocturne"] .v6-style-switch { background: rgba(12, 20, 28, .75); }
.v6[data-style="nocturne"] .v6-detail-sheet { background: rgba(20, 30, 41, .97); }

.v6[data-style="slate"]::before {
  background: radial-gradient(ellipse 42% 30% at 23% 8%, rgba(234, 239, 237, .12), transparent 90%),
    linear-gradient(155deg, #4e565a, #3e474b 56%, #333c41);
}
.v6[data-style="slate"]::after {
  opacity: .65;
  background: repeating-linear-gradient(164deg, transparent 0 12px, rgba(236, 242, 239, .022) 13px 14px),
    repeating-linear-gradient(22deg, transparent 0 78px, rgba(8, 15, 18, .045) 79px 82px);
}
.v6[data-style="slate"] .v6-map-depth {
  background: radial-gradient(ellipse 44% 18% at 72% 31%, rgba(11, 18, 21, .2), transparent 85%);
}
.v6[data-style="slate"] .v6-tile {
  background: linear-gradient(154deg, rgba(247, 249, 247, .045), transparent 42%), var(--v6-card);
  box-shadow: 0 2px 2px rgba(9, 13, 15, .29), 0 9px 11px rgba(9, 13, 15, .27);
}
.v6[data-style="slate"] .v6-tile[data-selected="true"] {
  border-left: 3px solid var(--v6-accent);
  box-shadow: 0 3px 3px rgba(9, 13, 15, .34), 0 13px 16px rgba(9, 13, 15, .32);
}
.v6[data-style="slate"] .v6-style-switch { background: rgba(41, 49, 53, .66); }
.v6[data-style="slate"] .v6-detail-sheet { border-radius: 5px; background: rgba(48, 57, 61, .97); }