:root {
  color-scheme: dark;
  --bg: #070914;
  --bg2: #0b1020;
  --panel: #10172a;
  --panel2: #0c1324;
  --panel3: #151d33;
  --line: rgba(255, 255, 255, 0.085);
  --line2: rgba(121, 243, 236, 0.2);
  --text: #eef5ff;
  --muted: #8c9ab5;
  --cyan: #78f4ed;
  --cyan2: #25c8db;
  --violet: #b777ff;
  --pink: #f15dde;
  --good: #58e6a9;
  --warn: #ffc857;
  --bad: #ff6b83;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
  --radius: 12px;
  --top: 56px;
  --status: 30px;
  --code-bg: #0c1324;
  --code-gutter: #0a1020;
  --code-text: #dce7fa;
  --code-line: #111a30;
  --activity: 48px;
  --sidebar: 288px;
  --inspector: 300px;
  --problems: 320px;
  --timeline: 190px;
  --animation-sidebar: 210px;
  --model-outliner: 220px;
  --model-side: 230px;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
::selection {
  background: rgba(120, 244, 237, 0.28);
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(183, 119, 255, 0.42) rgba(0, 0, 0, 0.15);
}
*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--cyan2), var(--violet));
  border-radius: 99px;
  border: 2px solid var(--studio-line, #0c1020);
}
.hidden {
  display: none !important;
}
.muted {
  color: var(--muted);
}
.mono {
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}
.glass {
  background: linear-gradient(
    180deg,
    var(--studio-surface, rgba(18, 26, 47, 0.94)),
    var(--studio-surface, rgba(9, 15, 29, 0.94))
  );
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.btn {
  border: 1px solid var(--line);
  background: var(--studio-wash, rgba(255, 255, 255, 0.045));
  border-radius: 9px;
  padding: 7px 11px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  transition: 0.16s ease;
}
.btn:hover {
  border-color: rgba(120, 244, 237, 0.42);
  background: rgba(120, 244, 237, 0.085);
  transform: translateY(-1px);
}
.btn.primary {
  border-color: rgba(120, 244, 237, 0.36);
  background: linear-gradient(
    135deg,
    rgba(37, 200, 219, 0.22),
    rgba(183, 119, 255, 0.24)
  );
  box-shadow: 0 0 24px rgba(120, 244, 237, 0.08);
}
.btn.danger {
  border-color: rgba(255, 107, 131, 0.3);
  color: var(--studio-bad, #ffb5c1);
}
.btn.icon {
  width: 34px;
  padding: 0;
}
.btn.small {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
}
.field {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--studio-wash, rgba(1, 5, 13, 0.6));
  border-radius: 9px;
  padding: 8px 10px;
  outline: none;
}
.field:focus {
  border-color: rgba(120, 244, 237, 0.5);
  box-shadow: 0 0 0 3px rgba(120, 244, 237, 0.08);
}
.pill {
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px 8px;
  color: var(--muted);
  background: var(--studio-wash, rgba(255, 255, 255, 0.03));
}
.pill.dev {
  color: var(--studio-violet, #f2d7ff);
  border-color: rgba(183, 119, 255, 0.45);
  background: rgba(183, 119, 255, 0.12);
}
.pill.warn {
  color: var(--studio-warn, #ffe6a1);
  border-color: rgba(255, 199, 89, 0.42);
  background: rgba(255, 199, 89, 0.12);
}
.pill.bad {
  color: var(--studio-bad, #ffc5cf);
  border-color: rgba(255, 91, 116, 0.45);
  background: rgba(255, 91, 116, 0.12);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.dot.good {
  background: var(--good);
  box-shadow: 0 0 12px var(--good);
}
.dot.warn {
  background: var(--warn);
}

#loginView {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(
      900px 600px at 20% 10%,
      rgba(37, 200, 219, 0.16),
      transparent 64%
    ),
    radial-gradient(
      800px 650px at 86% 88%,
      rgba(241, 93, 222, 0.14),
      transparent 62%
    ),
    linear-gradient(160deg, var(--studio-surface, #050711), var(--studio-surface, #0a0e1d) 55%, var(--studio-surface, #080a15));
  z-index: 50;
}
#loginView:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.11;
  background-image:
    linear-gradient(rgba(120, 244, 237, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 244, 237, 0.12) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.loginCard {
  position: relative;
  width: min(470px, 96vw);
  border-radius: 24px;
  padding: 26px;
  overflow: hidden;
}
.loginCard:before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    transparent,
    var(--cyan),
    transparent,
    var(--violet),
    transparent,
    var(--pink),
    transparent
  );
  opacity: 0.14;
  animation: spin 9s linear infinite;
}
.loginCard > * {
  position: relative;
}
.loginBrand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.loginLogo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  box-shadow:
    0 0 36px rgba(120, 244, 237, 0.25),
    0 0 60px rgba(241, 93, 222, 0.12);
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.16));
}
.loginTitle {
  font-size: 25px;
  font-weight: 850;
  letter-spacing: -0.5px;
}
.loginSub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.45;
}
.loginForm {
  display: grid;
  gap: 10px;
}
.loginKey {
  font-family: "Cascadia Code", monospace;
  letter-spacing: 0.3px;
  padding: 12px;
}
.loginFoot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  font-size: 12px;
  color: var(--muted);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#app {
  height: 100%;
  display: grid;
  grid-template-rows: var(--top) 1fr var(--status);
  background: linear-gradient(180deg, var(--studio-surface, #090c18), var(--studio-surface, #070914));
}
.topbar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  background: var(--studio-surface, rgba(8, 12, 24, 0.92));
  backdrop-filter: blur(20px);
  z-index: 10;
}
.brandMini {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 224px;
}
.brandMini img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(120, 244, 237, 0.2);
}
.brandText b {
  font-size: 13px;
  display: block;
}
.brandText span {
  font-size: 10px;
  color: var(--muted);
  display: block;
}
.projectPicker {
  min-width: 210px;
  max-width: 300px;
}
.topSpacer {
  flex: 1;
}
.profileBtn {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mainGrid {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--activity) var(--sidebar) minmax(380px, 1fr) var(--inspector);
  grid-template-rows: minmax(280px, 1fr) var(--timeline);
}
.activity {
  grid-row: 1/3;
  background: var(--studio-surface, #080d1a);
  border-right: 1px solid var(--line);
  padding: 6px 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.activity button {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  color: var(--studio-muted, #7f8ca6);
  font-size: 18px;
}
.activity button:hover,
.activity button.active {
  color: var(--cyan);
  background: rgba(120, 244, 237, 0.09);
}
.activity .bottom {
  margin-top: auto;
}
.sidebar {
  grid-row: 1/3;
  background: linear-gradient(180deg, var(--studio-surface, #0c1222), var(--studio-surface, #090f1e));
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.panelHead {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.panelTools {
  display: flex;
  gap: 3px;
}
.panelTools button {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 6px;
}
.panelTools button:hover {
  background: var(--studio-wash, rgba(255, 255, 255, 0.07));
  color: var(--text);
}
.searchBox {
  padding: 8px;
  border-bottom: 1px solid var(--line);
}
.searchWrap {
  position: relative;
}
.searchWrap input {
  padding-left: 29px;
}
.searchWrap:before {
  content: "⌕";
  position: absolute;
  left: 9px;
  top: 6px;
  color: var(--muted);
  z-index: 1;
}
.tree {
  flex: 1;
  overflow: auto;
  padding: 5px;
  scroll-behavior: auto;
}
.treeInner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 100%;
  width: max-content;
}
.treeRow {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  overflow: visible;
}
.treeRow:hover {
  background: var(--studio-wash, rgba(255, 255, 255, 0.055));
}
.treeRow.active {
  background: linear-gradient(
    90deg,
    rgba(37, 200, 219, 0.16),
    rgba(183, 119, 255, 0.08)
  );
  color: var(--studio-ink, #fff);
}
.treeIcon {
  width: 17px;
  text-align: center;
  color: var(--muted);
}
.treeName {
  overflow: visible;
  text-overflow: clip;
}
.treePath {
  font-size: 10px;
  color: var(--muted);
  margin-left: auto;
}
.empty {
  padding: 22px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.sidebarFoot {
  border-top: 1px solid var(--line);
  padding: 8px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}

.editor {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 36px 1fr;
  background: var(--studio-surface, #080c16);
}
.tabs {
  display: flex;
  align-items: end;
  overflow: auto;
  border-bottom: 1px solid var(--line);
  background: var(--studio-surface, #0a1020);
}
.tab {
  height: 35px;
  min-width: 120px;
  max-width: 240px;
  padding: 0 8px 0 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-right: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.tab.active {
  color: var(--text);
  background: var(--studio-surface, #0d1425);
  border-top: 2px solid var(--cyan);
}
.tabName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.tabDirty {
  color: var(--cyan);
  font-size: 15px;
}
.tabClose {
  opacity: 0.55;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 2px;
}
.tabClose:hover {
  opacity: 1;
  background: var(--studio-wash, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
}
.editorBody {
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.welcome {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: start;
  justify-items: center;
  overflow: auto;
  padding: 24px 22px 48px;
  scroll-behavior: smooth;
  color-scheme: dark;
  background:
    radial-gradient(850px 620px at 12% 8%, rgba(37, 200, 219, 0.14), transparent 64%),
    radial-gradient(760px 620px at 94% 14%, rgba(147, 91, 255, 0.13), transparent 68%),
    linear-gradient(180deg, var(--studio-surface, #07101e) 0%, var(--studio-surface, #080d18) 42%, var(--studio-surface, #070b14) 100%);
}
.welcome::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(129, 217, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 217, 255, 0.12) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, black, transparent 68%);
}
.welcomeInner {
  position: relative;
  z-index: 1;
  width: min(1160px, 100%);
  padding: 0 0 32px;
  text-align: left;
}
.homeHero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(310px, 0.7fr);
  align-items: center;
  gap: 48px;
  min-height: 460px;
  padding: 48px;
  overflow: hidden;
  border: 1px solid rgba(120, 244, 237, 0.2);
  border-radius: 26px;
  background:
    linear-gradient(125deg, var(--studio-surface, rgba(13, 31, 53, 0.97)), var(--studio-surface, rgba(9, 15, 31, 0.96)) 58%, var(--studio-surface, rgba(22, 13, 44, 0.96))),
    var(--studio-surface, #0a1120);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.035);
}
.homeHero::before,
.homeHero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.homeHero::before {
  width: 410px;
  height: 410px;
  right: -130px;
  top: -170px;
  border: 1px solid rgba(201, 158, 255, 0.16);
  box-shadow: 0 0 90px rgba(149, 76, 255, 0.13), inset 0 0 70px rgba(149, 76, 255, 0.08);
}
.homeHero::after {
  width: 240px;
  height: 240px;
  left: -150px;
  bottom: -150px;
  background: rgba(37, 200, 219, 0.09);
  filter: blur(20px);
}
.homeHeroCopy,
.homeHeroProgram { position: relative; z-index: 1; }
.homeBrandLockup {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 24px;
}
.homeBrandMark {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid rgba(120, 244, 237, 0.35);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(54, 222, 224, 0.17), rgba(166, 99, 255, 0.2));
  box-shadow: 0 12px 35px rgba(4, 9, 21, 0.48), 0 0 28px rgba(54, 222, 224, 0.12);
}
.welcomeLogo {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 13px;
  object-fit: cover;
}
.homeBrandWords { display: grid; gap: 2px; }
.homeBrandWords b {
  color: var(--studio-accent, #f4fbff);
  font-size: 17px;
  letter-spacing: 0.015em;
}
.homeBrandWords small {
  color: var(--studio-muted, #85a9c2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.homeHeroEyebrow {
  display: inline-flex;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.homeHero h1 {
  max-width: 670px;
  margin: 13px 0 14px;
  color: var(--studio-accent, #f6fbff);
  font-size: clamp(34px, 4.1vw, 53px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.homeHero h1 span {
  color: transparent;
  background: linear-gradient(90deg, #71f4ee 0%, #85d2ff 48%, #c7a0ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.homeHeroCopy > p {
  max-width: 690px;
  margin: 0;
  color: var(--studio-muted, #a7bdd0);
  font-size: 13px;
  line-height: 1.68;
}
.homeHeroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}
.homeHeroActions .btn { min-height: 36px; }
.homeHeroActions .homeQuietAction { color: var(--studio-ink, #afc5d7); background: transparent; }
.homeHeroPromises {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 26px;
  color: var(--studio-muted, #8fa8bb);
  font-size: 9px;
}
.homeHeroPromises span { display: inline-flex; align-items: center; gap: 6px; }
.homeHeroPromises i {
  color: var(--cyan);
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-style: normal;
}
.homeHeroProgram {
  padding: 20px;
  border: 1px solid rgba(153, 201, 233, 0.17);
  border-radius: 18px;
  background: linear-gradient(155deg, var(--studio-wash, rgba(255, 255, 255, 0.07)), var(--studio-wash, rgba(255, 255, 255, 0.025)));
  box-shadow: 0 22px 55px rgba(1, 5, 16, 0.32);
  backdrop-filter: blur(12px);
}
.homeProgramHead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.homeProgramHead > div { min-width: 0; display: grid; gap: 2px; }
.homeProgramHead small { color: var(--studio-muted, #7899b0); font-size: 8px; text-transform: uppercase; letter-spacing: 0.13em; }
.homeProgramHead b { font-size: 12px; }
.homeLiveDot,
.homeDataBadge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 16px rgba(88, 230, 169, 0.72);
}
.homeProgramState {
  padding: 4px 7px;
  border: 1px solid rgba(88, 230, 169, 0.2);
  border-radius: 999px;
  color: var(--good);
  background: rgba(88, 230, 169, 0.075);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}
.homeProgramRoute {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 17px 0;
}
.homeProgramRoute span { height: 3px; border-radius: 999px; background: var(--studio-wash, rgba(255, 255, 255, 0.08)); }
.homeProgramRoute .done { background: var(--good); }
.homeProgramRoute .active { background: linear-gradient(90deg, var(--cyan), #af88ff); box-shadow: 0 0 11px rgba(81, 230, 236, 0.38); }
.homeProgramFacts { display: grid; margin: 0; }
.homeProgramFacts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 37px;
  border-top: 1px solid var(--studio-line, rgba(255, 255, 255, 0.06));
}
.homeProgramFacts dt { color: var(--studio-muted, #839db0); font-size: 9px; }
.homeProgramFacts dd { margin: 0; color: var(--studio-ink, #dceaf3); font-size: 10px; font-weight: 750; text-align: right; }
.homeProgramLink {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid var(--studio-line, rgba(255, 255, 255, 0.07));
  color: var(--cyan);
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}
.homeProgramLink:hover { color: var(--studio-ink, #fff); }
.homeJumpNav {
  position: sticky;
  top: 10px;
  z-index: 6;
  display: flex;
  justify-content: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid rgba(133, 199, 232, 0.14);
  border-radius: 12px;
  background: var(--studio-surface, rgba(7, 13, 24, 0.86));
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(14px);
}
.homeJumpNav button {
  flex: 0 0 auto;
  min-height: 29px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  color: var(--studio-muted, #91a9bc);
  background: transparent;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.homeJumpNav button:hover { color: var(--studio-ink, #fff); background: var(--studio-wash, rgba(255, 255, 255, 0.06)); }
.homeJumpNav .homeVerticalSlicesButton { color: var(--studio-violet, #c9aaff); }
.homeSurface,
.homeStudioSpotlight,
.homeRecentBuilds,
.homeVersionShowcase,
.homeCompatibilityStats {
  margin-top: 16px;
  padding: 22px;
  border: 1px solid rgba(126, 196, 226, 0.14);
  border-radius: 19px;
  background: linear-gradient(145deg, var(--studio-surface, rgba(14, 24, 42, 0.94)), var(--studio-surface, rgba(8, 14, 27, 0.94)));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.23);
}
.homeSectionHeader,
.homeStatsHeader,
.homeStudioHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.homeStatsEyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--cyan);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.homeSectionHeader h2,
.homeStatsHeader h2,
.homeStudioHeader h2 {
  margin: 0;
  color: var(--studio-accent, #edf7fc);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.homeSectionHeader p,
.homeStatsHeader p,
.homeStudioHeader p {
  max-width: 790px;
  margin: 6px 0 0;
  color: var(--studio-muted, #8fa8bb);
  font-size: 10px;
  line-height: 1.6;
}
.homeDataBadge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(88, 230, 169, 0.15);
  border-radius: 999px;
  color: var(--studio-muted, #a8c6b9);
  background: rgba(88, 230, 169, 0.055);
  font-size: 8px;
  font-weight: 750;
}
.homeOverviewGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.homeOverviewCard {
  position: relative;
  min-width: 0;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgba(153, 194, 218, 0.13);
  border-radius: 13px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
}
.homeOverviewCard::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  right: -34px;
  bottom: -40px;
  border-radius: 50%;
  background: var(--home-card-glow, rgba(70, 224, 231, 0.12));
  filter: blur(7px);
}
.homeOverviewCard.homeOverviewMappings { --home-card-glow: rgba(183, 119, 255, 0.16); }
.homeOverviewCard.homeOverviewRoadmap { --home-card-glow: rgba(108, 159, 255, 0.15); }
.homeOverviewCard.homeOverviewEvidence { --home-card-glow: rgba(88, 230, 169, 0.15); }
.homeOverviewCard > span { color: var(--studio-ink, #c3d5e2); font-size: 9px; font-weight: 800; }
.homeOverviewCard > strong {
  margin: 9px 0 7px;
  color: var(--cyan);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.045em;
}
.homeOverviewMappings > strong { color: var(--studio-violet, #c3a4ff); }
.homeOverviewRoadmap > strong { color: var(--studio-accent, #89b9ff); }
.homeOverviewEvidence > strong { color: var(--good); }
.homeOverviewCard > small { margin-top: auto; color: var(--studio-muted, #7893a8); font-size: 9px; line-height: 1.45; }
.homeOverviewFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--studio-line, rgba(255, 255, 255, 0.055));
  color: var(--studio-muted, #7893a8);
  font-size: 9px;
}
.homeOverviewFoot button {
  flex: 0 0 auto;
  border: 0;
  color: var(--cyan);
  background: transparent;
  font: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}
.homeOverviewFoot button:hover { color: var(--studio-ink, #fff); }
.homeStudioSpotlight {
  padding: 26px;
  border-color: rgba(185, 137, 255, 0.22);
  background:
    radial-gradient(520px 310px at 94% 0%, rgba(157, 87, 255, 0.15), transparent 72%),
    radial-gradient(520px 330px at 0% 100%, rgba(37, 200, 219, 0.1), transparent 72%),
    linear-gradient(145deg, var(--studio-surface, rgba(20, 23, 47, 0.98)), var(--studio-surface, rgba(9, 17, 33, 0.97)));
}
.homeStudioHeader { align-items: center; }
.homeStudioHeader p { max-width: 740px; font-size: 11px; }
.homeStudioHeader .btn { flex: 0 0 auto; }
.homeStudioComparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.homeStudioComparison article {
  padding: 18px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.1));
  border-radius: 15px;
  background: var(--studio-wash, rgba(5, 10, 21, 0.42));
}
.homeStudioComparison .homeToolchainCard { opacity: 0.78; }
.homeStudioComparison .homeStudioCard {
  border-color: rgba(106, 235, 232, 0.25);
  background: linear-gradient(145deg, rgba(38, 191, 202, 0.1), rgba(124, 82, 218, 0.11));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}
.homeComparisonLabel {
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--studio-muted, #8ba3b7);
  background: var(--studio-wash, rgba(255, 255, 255, 0.055));
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.homeStudioCard .homeComparisonLabel { color: var(--cyan); background: rgba(57, 219, 224, 0.08); }
.homeStudioComparison h3 { margin: 11px 0 10px; font-size: 15px; }
.homeStudioComparison ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.homeStudioComparison li { position: relative; padding-left: 17px; color: var(--studio-muted, #91a8bb); font-size: 10px; line-height: 1.45; }
.homeStudioComparison li::before { content: "–"; position: absolute; left: 0; color: var(--studio-muted, #61798d); }
.homeStudioCard li::before { content: "✓"; color: var(--good); font-weight: 900; }
.homeStudioBenefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 11px;
}
.homeStudioBenefits article {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.075));
  border-radius: 12px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
}
.homeStudioBenefits article > span { color: var(--cyan); font-size: 16px; line-height: 1; }
.homeStudioBenefits article > div { min-width: 0; display: grid; gap: 4px; }
.homeStudioBenefits b { font-size: 10px; }
.homeStudioBenefits small { color: var(--studio-muted, #7790a4); font-size: 8px; line-height: 1.45; }
.homeCapabilityGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.homeCapabilityGrid article {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 150px;
  padding: 16px;
  border: 1px solid rgba(149, 190, 215, 0.13);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--studio-wash, rgba(255, 255, 255, 0.035)), var(--studio-wash, rgba(255, 255, 255, 0.016)));
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.homeCapabilityGrid article:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 229, 231, 0.28);
  background: rgba(52, 193, 203, 0.05);
}
.homeCapabilityGrid article > span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(85, 225, 228, 0.18);
  border-radius: 9px;
  color: var(--cyan);
  background: rgba(85, 225, 228, 0.055);
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.homeCapabilityGrid article > div { min-width: 0; display: flex; flex-direction: column; height: 100%; }
.homeCapabilityGrid b { color: var(--studio-ink, #e6f2f8); font-size: 12px; }
.homeCapabilityGrid small { margin-top: 6px; color: var(--studio-muted, #819aad); font-size: 9px; line-height: 1.55; }
.homeCapabilityGrid em {
  width: max-content;
  margin-top: auto;
  padding-top: 12px;
  color: var(--studio-muted, #7392a8);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.homeArchitectureFlow {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr) auto minmax(120px, 1fr) auto minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: stretch;
  gap: 8px;
}
.homeArchitectureFlow > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 13px;
  border: 1px solid rgba(146, 192, 218, 0.13);
  border-radius: 12px;
  background: rgba(37, 200, 219, 0.035);
}
.homeArchitectureFlow > div > span { color: var(--cyan); font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.homeArchitectureFlow > div b { font-size: 10px; }
.homeArchitectureFlow > div small { color: var(--studio-muted, #7892a6); font-size: 8px; line-height: 1.5; }
.homeArchitectureFlow > div code { color: var(--studio-accent, #9ddfe3); font-size: 0.92em; }
.homeArchitectureFlow > span { align-self: center; color: var(--cyan); font-size: 17px; opacity: 0.6; }
.homeVersionRows,
.homeRecentBuildRows { display: grid; gap: 9px; }
.homeRecentBuildRows { margin-top: 14px; }
.homeVersionRow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(240px, 1.45fr) minmax(210px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid rgba(147, 188, 212, 0.13);
  border-radius: 12px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.024));
}
.homeVersionRow::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--warn); }
.homeVersionRow.status-working::before { background: var(--good); }
.homeVersionRow.status-acceptance-pending::before,
.homeVersionRow.status-awaiting-compile::before { background: var(--cyan); }
.homeVersionRow.status-compiler-errors::before { background: var(--bad); }
.homeVersionRow.status-paused::before { background: #9a86c8; }
.homeVersionRow.status-planned::before { background: #6f7f99; }
.homeVersionIdentity { min-width: 0; }
.homeVersionIdentity > strong { display: block; color: var(--studio-ink, #e8f2f8); font-size: 13px; }
.homeVersionBadge {
  display: inline-flex;
  margin-top: 6px;
  padding: 3px 7px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.09));
  border-radius: 999px;
  color: var(--warn);
  background: var(--studio-wash, rgba(255, 255, 255, 0.035));
  font-size: 8px;
  font-weight: 750;
}
.status-working .homeVersionBadge { color: var(--good); }
.status-acceptance-pending .homeVersionBadge,
.status-awaiting-compile .homeVersionBadge { color: var(--cyan); }
.status-compiler-errors .homeVersionBadge { color: var(--bad); }
.status-paused .homeVersionBadge { color: var(--studio-violet, #bca8e8); }
.status-planned .homeVersionBadge { color: var(--studio-muted, #9aa8bd); }
.homeVersionProgressLine { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--studio-muted, #7d96a9); font-size: 8px; }
.homeVersionProgressLine strong { color: var(--studio-ink, #dce9f1); font-size: 11px; }
.homeVersionTrack,
.homeCoverageTrack {
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.07));
  border-radius: 999px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.035));
}
.homeVersionTrack > span,
.homeCoverageTrack > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan2), var(--good));
  box-shadow: 0 0 18px rgba(88, 230, 169, 0.34);
  transition: width 0.45s ease;
}
.homeVersionFacts { display: flex; flex-wrap: wrap; gap: 5px 9px; color: var(--studio-muted, #7891a5); font-size: 8px; }
.homeVersionFacts span::before { content: "• "; color: var(--cyan); }
.homeVersionEmpty { padding: 18px; border: 1px dashed rgba(146, 188, 211, 0.17); border-radius: 12px; color: var(--studio-muted, #7891a5); text-align: center; font-size: 10px; }
.homeVersionHeader { align-items: center; }
.homeVersionHeader .btn { flex: 0 0 auto; }
.homeRecentBuildsHeader { align-items: center; }
.homeRecentBuildsHeader .btn { flex: 0 0 auto; }
.homeRecentBuildRow {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(150px, 0.8fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(147, 188, 212, 0.13);
  border-radius: 11px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.024));
}
.homeRecentBuildIdentity,
.homeRecentBuildEvidence { min-width: 0; display: grid; gap: 3px; }
.homeRecentBuildIdentity b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.homeRecentBuildIdentity small,
.homeRecentBuildEvidence small { color: var(--studio-muted, #7891a5); font-size: 8px; }
.homeRecentBuildEvidence strong { color: var(--cyan); font-size: 10px; }
.homeRecentBuildRow .btn { min-width: 64px; }
.homeStatsRefresh { flex: 0 0 auto; min-height: 29px; color: var(--cyan); }
.homeStatsRefresh.loading { pointer-events: none; opacity: 0.62; }
.homeStatsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.homeStatCard {
  position: relative;
  min-width: 0;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  padding: 13px;
  overflow: hidden;
  border: 1px solid rgba(147, 188, 212, 0.13);
  border-radius: 12px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.024));
}
.homeStatCard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--cyan2); opacity: 0.8; }
.homeStatCard.homeStatMapped::before { background: var(--good); }
.homeStatCard.homeStatRemaining::before { background: var(--warn); }
.homeStatCard.homeStatOperations::before { background: var(--cyan); }
.homeStatCard.homeStatAliases::before { background: #d7b9ff; }
.homeStatCard.homeStatCanonical::before { background: #7fb7ff; }
.homeStatCard.homeStatCompiler::before { background: var(--good); }
.homeStatCard.homeStatStrict::before { background: #ff9f68; }
.homeStatCard > span { color: var(--studio-ink, #c3d2de); font-size: 9px; font-weight: 750; }
.homeStatCard > strong { margin: 5px 0 3px; color: var(--studio-ink, #e9f2f7); font-size: 27px; line-height: 1; letter-spacing: -0.04em; }
.homeStatCard.homeStatMapped > strong { color: var(--good); }
.homeStatCard.homeStatRemaining > strong { color: var(--warn); }
.homeStatCard.homeStatOperations > strong { color: var(--cyan); }
.homeStatCard.homeStatAliases > strong { color: var(--studio-violet, #d7b9ff); }
.homeStatCard.homeStatCanonical > strong { color: var(--studio-accent, #9bc7ff); }
.homeStatCard.homeStatCompiler > strong { color: var(--good); }
.homeStatCard.homeStatStrict > strong { color: var(--studio-warn, #ffb184); }
.homeStatCard > small { margin-top: auto; color: var(--studio-muted, #7891a5); font-size: 8px; line-height: 1.4; }
.homeCoveragePanel { margin-top: 10px; padding: 12px 13px; border: 1px solid rgba(147, 188, 212, 0.13); border-radius: 11px; background: var(--studio-wash, rgba(1, 5, 13, 0.34)); }
.homeCoverageLine,
.homeCoverageLine > div,
.homeStatsMeta { display: flex; align-items: center; }
.homeCoverageLine { justify-content: space-between; gap: 12px; color: var(--studio-muted, #7891a5); font-size: 9px; }
.homeCoverageLine > div { gap: 8px; }
.homeCoverageLine strong { color: var(--cyan); font-size: 12px; }
.homeStatsMeta { flex-wrap: wrap; gap: 5px 14px; margin-top: 9px; color: var(--studio-muted, #7891a5); font-size: 8px; }
.homeStatsMeta span:nth-child(3) { margin-left: auto; }
.homeStatsMeta b { color: var(--studio-ink, #dbe7ee); }
@media (max-width: 1180px) {
  .homeHero { grid-template-columns: minmax(0, 1.1fr) minmax(290px, 0.9fr); padding: 38px; gap: 30px; }
  .homeOverviewGrid,
  .homeStudioBenefits,
  .homeStatsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .homeVersionRow { grid-template-columns: minmax(170px, 0.8fr) minmax(220px, 1.2fr); }
  .homeVersionFacts { grid-column: 1 / -1; }
}
@media (max-width: 920px) {
  .welcome { padding-inline: 12px; }
  .homeHero { grid-template-columns: 1fr; min-height: 0; padding: 32px; }
  .homeHeroProgram { max-width: 520px; }
  .homeStudioComparison { grid-template-columns: 1fr; }
  .homeStudioBenefits,
  .homeCapabilityGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .homeArchitectureFlow { grid-template-columns: 1fr; }
  .homeArchitectureFlow > span { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 680px) {
  .welcome { padding: 10px 8px 34px; }
  .homeHero { padding: 24px 20px; border-radius: 18px; }
  .homeHero h1 { font-size: 34px; }
  .homeBrandMark { width: 58px; height: 58px; }
  .homeHeroPromises { display: grid; }
  .homeJumpNav { justify-content: flex-start; margin-top: 8px; }
  .homeSurface,
  .homeStudioSpotlight,
  .homeRecentBuilds,
  .homeVersionShowcase,
  .homeCompatibilityStats { padding: 17px; border-radius: 15px; }
  .homeSectionHeader,
  .homeStatsHeader,
  .homeStudioHeader { display: grid; }
  .homeOverviewGrid,
  .homeStudioBenefits,
  .homeCapabilityGrid,
  .homeStatsGrid,
  .homeVersionRow { grid-template-columns: 1fr; }
  .homeOverviewFoot { align-items: flex-start; }
  .homeVersionFacts { grid-column: auto; }
  .homeRecentBuildRow { grid-template-columns: 1fr auto; }
  .homeRecentBuildEvidence { grid-column: 1 / -1; }
  .homeStatsMeta span:nth-child(3) { margin-left: 0; }
}
.workbench {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 39px minmax(0, 1fr);
}
.workToolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-bottom: 1px solid var(--line);
  background: var(--studio-surface, #0b1120);
  min-width: 0;
  overflow: visible;
  flex-wrap: nowrap;
}
.workToolbar .toolGroup {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}
.workToolbar .divider {
  height: 22px;
  width: 1px;
  background: var(--line);
  margin: 0 3px;
}
.toolBtn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  height: 29px;
  border-radius: 7px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  line-height: 1;
  flex: 0 0 auto;
}
.toolBtn:hover,
.toolBtn.active {
  color: var(--text);
  border-color: var(--line);
  background: var(--studio-wash, rgba(255, 255, 255, 0.06));
}
.modelArea {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--model-outliner) minmax(0, 1fr);
  overflow: hidden;
}
.outliner {
  border-right: 1px solid var(--line);
  background: var(--studio-surface, #0a1020);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.outlinerList {
  overflow: auto;
  flex: 1;
  padding: 5px;
}
.outRow {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 12px;
}
.outRow:hover {
  background: var(--studio-wash, rgba(255, 255, 255, 0.05));
}
.outRow.active {
  background: rgba(120, 244, 237, 0.12);
  color: var(--cyan);
}
.outRow .indent {
  width: var(--indent, 0px);
}
.viewportWrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--studio-surface, #18213a), var(--studio-surface, #080b13) 70%);
}
#modelViewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.viewOverlay {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  flex-wrap: wrap;
  max-width: min(720px, calc(100% - 300px));
  gap: 6px;
  pointer-events: none;
}
.viewOverlay .pill {
  background: var(--studio-surface, rgba(3, 6, 12, 0.72));
}
.viewHelp {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  background: var(--studio-wash, rgba(0, 0, 0, 0.35));
  padding: 5px 8px;
  border-radius: 6px;
  pointer-events: none;
}
.codePane,
.soundPane,
.texturePane {
  position: absolute;
  inset: 0;
  background: var(--code-bg);
}
.codePane {
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    90deg,
    var(--code-gutter) 0 52px,
    var(--code-bg) 52px
  );
}
.codeEditorSurface {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.codeFallback {
  width: 100%;
  height: 100%;
  resize: none;
  border: 0;
  outline: none;
  background: var(--code-bg);
  color: var(--code-text);
  padding: 14px 18px;
  font:
    13px/1.55 "Cascadia Code",
    Consolas,
    monospace;
  tab-size: 2;
  caret-color: var(--cyan);
}
.monacoHost {
  position: absolute;
  inset: 0;
  background: var(--code-bg);
}
.splitPane {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(320px, 45%);
}
.splitPane .modelArea {
  position: relative;
  inset: auto;
  height: 100%;
  min-width: 0;
}
.splitCode {
  border-left: 1px solid var(--line);
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ilbankEditorBanner {
  position: relative;
  z-index: 3;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border-bottom: 1px solid rgba(120, 244, 237, 0.18);
  background:
    linear-gradient(90deg, rgba(120, 244, 237, 0.12), rgba(183, 119, 255, 0.1) 58%, rgba(255, 122, 198, 0.06)),
    var(--studio-surface, #0b1221);
  box-shadow: 0 8px 24px rgba(3, 8, 18, 0.24);
}
.ilbankEditorBanner > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.ilbankEditorBanner b {
  color: var(--studio-accent, #e8fbff);
  font-size: 12px;
  letter-spacing: 0.01em;
}
.ilbankEditorBanner small {
  color: var(--studio-muted, #8194b3);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.ilbankMark {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  color: #07121b;
  background: linear-gradient(135deg, #78f4ed, #a68cff 65%, #ff7ac6);
  box-shadow: 0 0 22px rgba(120, 244, 237, 0.2);
  font: 900 10px/1 "Cascadia Code", Consolas, monospace;
}
.ilbankSpark {
  margin-left: auto;
  color: var(--studio-pink, #ff7ac6);
  text-shadow: 0 0 16px rgba(255, 122, 198, 0.65);
}
.ilbankCodePane .codeEditorSurface {
  box-shadow: inset 3px 0 0 rgba(120, 244, 237, 0.18);
}
.markdownPreviewPane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 50% -120px, rgba(120, 244, 237, 0.08), transparent 70%),
    var(--studio-surface, #0a101d);
}
.markdownPreviewPane.compact {
  position: relative;
  inset: auto;
  height: 100%;
}
.markdownPreviewHead {
  min-height: 48px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--studio-surface, rgba(9, 15, 28, 0.9));
  backdrop-filter: blur(10px);
}
.markdownPreviewHead > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.markdownPreviewHead > div > div {
  display: grid;
  gap: 1px;
}
.markdownPreviewHead b {
  font-size: 12px;
}
.markdownPreviewHead small {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.markdownPreviewIcon {
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 25px;
  border-radius: 7px;
  color: var(--studio-accent, #eaf4ff);
  background: linear-gradient(135deg, rgba(120, 244, 237, 0.22), rgba(183, 119, 255, 0.26));
  border: 1px solid rgba(120, 244, 237, 0.18);
  font: 800 9px/1 "Cascadia Code", Consolas, monospace;
}
.markdownBody {
  flex: 1;
  min-height: 0;
  overflow: auto;
  width: min(920px, calc(100% - 44px));
  margin: 0 auto;
  padding: 34px 4px 72px;
  color: var(--studio-accent, #dce7fa);
  font-size: 14px;
  line-height: 1.72;
  overflow-wrap: anywhere;
}
.markdownPreviewPane.compact .markdownBody {
  width: min(760px, calc(100% - 28px));
  padding: 26px 2px 56px;
}
.markdownBody h1,
.markdownBody h2,
.markdownBody h3,
.markdownBody h4,
.markdownBody h5,
.markdownBody h6 {
  color: var(--studio-accent, #f4f8ff);
  line-height: 1.25;
  margin: 1.5em 0 0.55em;
  scroll-margin-top: 16px;
}
.markdownBody h1:first-child,
.markdownBody h2:first-child,
.markdownBody h3:first-child {
  margin-top: 0;
}
.markdownBody h1 {
  font-size: 2em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid rgba(120, 244, 237, 0.18);
}
.markdownBody h2 {
  font-size: 1.55em;
  padding-bottom: 0.28em;
  border-bottom: 1px solid rgba(183, 119, 255, 0.14);
}
.markdownBody h3 { font-size: 1.28em; }
.markdownBody h4 { font-size: 1.08em; }
.markdownBody h5,
.markdownBody h6 { font-size: 0.96em; color: var(--studio-ink, #b9c8e2); }
.markdownBody p {
  margin: 0 0 1em;
}
.markdownBody a {
  color: var(--studio-accent, #78f4ed);
  text-decoration: none;
  border-bottom: 1px solid rgba(120, 244, 237, 0.28);
}
.markdownBody a:hover {
  color: var(--studio-accent, #b5fffa);
  border-bottom-color: currentColor;
}
.markdownBody strong { color: var(--studio-accent, #f4f8ff); }
.markdownBody del { color: var(--studio-muted, #7f8da6); }
.markdownBody ul,
.markdownBody ol {
  margin: 0.3em 0 1.1em;
  padding-left: 1.65em;
}
.markdownBody li { margin: 0.28em 0; }
.markdownBody li::marker { color: var(--studio-violet, #a98cff); }
.markdownTaskItem {
  list-style: none;
  margin: 0.42em 0 0.42em -1.35em !important;
}
.markdownTaskItem::marker {
  content: "";
}
.markdownTask {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(120, 244, 237, 0.1);
  border-radius: 9px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
}
.markdownTaskInput {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.markdownTaskControl {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid rgba(120, 244, 237, 0.35);
  border-radius: 6px;
  background: var(--studio-surface, rgba(8, 15, 27, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}
.markdownTaskControl::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--studio-line, #07121b);
  border-bottom: 2px solid var(--studio-line, #07121b);
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.7);
  transition: opacity 120ms ease, transform 120ms ease;
}
.markdownTaskInput:checked + .markdownTaskControl {
  border-color: #78f4ed;
  background: linear-gradient(135deg, #78f4ed, #a98cff);
  box-shadow: 0 0 18px rgba(120, 244, 237, 0.16);
}
.markdownTaskInput:checked + .markdownTaskControl::after {
  opacity: 1;
  transform: translateY(-1px) rotate(-45deg) scale(1);
}
.markdownTaskText {
  min-width: 0;
  padding-top: 1px;
}
.markdownTaskInput:checked ~ .markdownTaskText {
  color: var(--studio-ink, #aebed5);
}
.markdownBody blockquote {
  margin: 1.15em 0;
  padding: 0.75em 1em;
  border-left: 3px solid #a98cff;
  border-radius: 0 9px 9px 0;
  background: rgba(183, 119, 255, 0.075);
  color: var(--studio-ink, #b9c8e2);
}
.markdownBody blockquote > :last-child { margin-bottom: 0; }
.markdownBody hr {
  border: 0;
  height: 1px;
  margin: 2em 0;
  background: linear-gradient(90deg, transparent, rgba(120, 244, 237, 0.34), rgba(183, 119, 255, 0.3), transparent);
}
.markdownInlineCode {
  padding: 0.16em 0.42em;
  border-radius: 5px;
  border: 1px solid rgba(120, 244, 237, 0.12);
  background: rgba(120, 244, 237, 0.075);
  color: var(--studio-accent, #a7fff9);
  font: 0.9em/1.4 "Cascadia Code", Consolas, monospace;
}
.markdownCodeBlock {
  position: relative;
  margin: 1.25em 0;
  border: 1px solid rgba(120, 244, 237, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: var(--studio-surface, #070d18);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}
.markdownCodeLabel {
  min-height: 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 11px;
  border-bottom: 1px solid var(--studio-line, rgba(255, 255, 255, 0.055));
  background: linear-gradient(90deg, rgba(120, 244, 237, 0.08), rgba(183, 119, 255, 0.06));
  color: var(--studio-muted, #8fa1bd);
  font: 700 9px/1 "Cascadia Code", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.markdownCopyButton {
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid rgba(120, 244, 237, 0.15);
  border-radius: 6px;
  color: var(--studio-muted, #a8b8d1);
  background: rgba(120, 244, 237, 0.055);
  font: 700 9px/1 "Cascadia Code", Consolas, monospace;
  letter-spacing: 0.04em;
  text-transform: none;
}
.markdownCopyButton:hover,
.markdownCopyButton.copied {
  color: var(--studio-accent, #dffffd);
  border-color: rgba(120, 244, 237, 0.34);
  background: rgba(120, 244, 237, 0.12);
}
.markdownCodeBlock pre {
  margin: 0;
  padding: 15px 17px 17px;
  overflow: auto;
}
.markdownCodeBlock code {
  color: var(--studio-accent, #dce7fa);
  font: 12.5px/1.62 "Cascadia Code", Consolas, monospace;
  tab-size: 2;
  white-space: pre;
}
.markdownTableWrap {
  margin: 1.2em 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.markdownBody table {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
}
.markdownBody th,
.markdownBody td {
  padding: 9px 11px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.markdownBody th:last-child,
.markdownBody td:last-child { border-right: 0; }
.markdownBody tr:last-child td { border-bottom: 0; }
.markdownBody th {
  color: var(--studio-accent, #eef7ff);
  background: rgba(120, 244, 237, 0.065);
  font-size: 11px;
}
.markdownBody tbody tr:nth-child(even) {
  background: var(--studio-wash, rgba(255, 255, 255, 0.018));
}
.markdownBody tbody tr:hover {
  background: rgba(120, 244, 237, 0.035);
}
.markdownBody img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.2em auto;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.markdownEmpty {
  min-height: 260px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
  color: var(--muted);
}
.markdownEmpty b { color: var(--text); }
.markdownSplitPane {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  min-width: 0;
  min-height: 0;
}
.markdownSourcePane {
  background: var(--code-bg);
}
.soundPane {
  padding: 18px;
  overflow: auto;
  background:
    radial-gradient(
      700px 400px at 50% 30%,
      rgba(183, 119, 255, 0.09),
      transparent 65%
    ),
    var(--studio-surface, #090e1a);
}
.soundCard {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.soundHero {
  display: flex;
  align-items: center;
  gap: 15px;
}
.soundDisc {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: conic-gradient(
    var(--cyan),
    var(--violet),
    var(--pink),
    var(--cyan)
  );
  box-shadow: 0 0 30px rgba(183, 119, 255, 0.2);
}
.soundDisc:after {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--studio-surface, #101528);
  border: 3px solid var(--studio-line, rgba(255, 255, 255, 0.35));
}
.wave {
  height: 190px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--studio-surface, #070b14);
}
.soundControls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.group {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
}
.group label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.group input {
  margin-top: 6px;
}
.soundButtons {
  display: flex;
  gap: 8px;
  align-items: center;
}
.range {
  width: 100%;
}
.soundPane.soundEditor {
  padding: 0;
  overflow: auto;
  background:
    radial-gradient(circle at 15% 0%, rgba(37, 200, 219, 0.09), transparent 32rem),
    radial-gradient(circle at 90% 12%, rgba(183, 119, 255, 0.1), transparent 34rem),
    var(--studio-surface, #080d18);
}
.soundStudio {
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0 48px;
  display: grid;
  gap: 14px;
  color: var(--text);
}
.soundStudioHeader {
  min-height: 82px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 0 4px 6px;
}
.soundStudioMark {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(115, 246, 179, 0.35);
  border-radius: 16px;
  display: grid;
  place-items: center;
  position: relative;
  color: #73f6b3;
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(145deg, rgba(115, 246, 179, 0.12), rgba(37, 200, 219, 0.04));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 12px 40px rgba(0,0,0,.24);
}
.soundStudioMark span {
  position: absolute;
  right: 5px;
  bottom: 3px;
  color: #b777ff;
  font-size: 14px;
}
.soundStudioTitle { min-width: 0; }
.soundStudioTitle h2 {
  margin: 3px 0 1px;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.soundStudioTitle p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.soundEyebrow {
  color: #73f6b3;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.soundStudioHeaderActions,
.soundPanelActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.soundFormatBadge {
  padding: 6px 9px;
  border: 1px solid rgba(37, 200, 219, .28);
  border-radius: 999px;
  background: rgba(37, 200, 219, .07);
  color: #8deaf4;
  font: 800 9px/1 var(--mono, monospace);
  letter-spacing: 1px;
}
.soundNotice {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid rgba(255, 196, 99, .28);
  border-radius: 10px;
  background: rgba(255, 196, 99, .07);
  color: var(--muted);
  font-size: 11px;
}
.soundNotice b { color: #ffd18a; white-space: nowrap; }
.soundStudioGrid {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(460px, 1.28fr);
  gap: 14px;
  align-items: stretch;
}
.soundPanel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.026), transparent 46%),
    color-mix(in srgb, var(--studio-surface, #0d1425) 94%, transparent);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 10px 30px rgba(0,0,0,.1);
}
.soundPanelTitle {
  min-height: 30px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.soundPanelTitle > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.soundPanelTitle > div > span {
  color: rgba(115, 246, 179, .75);
  font: 700 9px/1 var(--mono, monospace);
}
.soundPanelTitle h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: .1px;
}
.soundPanelTitle small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
}
.soundIdentityFields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.soundIdentityFields .soundField:first-child,
.soundIdentityFields .soundField:last-child {
  grid-column: 1 / -1;
}
.soundField {
  min-width: 0;
  display: grid;
  gap: 5px;
  align-content: start;
}
.soundField > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .55px;
  text-transform: uppercase;
}
.soundField > span em {
  color: rgba(141, 234, 244, .8);
  font-style: normal;
  font-size: 8px;
}
.soundField small {
  color: color-mix(in srgb, var(--muted) 75%, transparent);
  font-size: 8px;
  line-height: 1.3;
}
.soundField .field,
.soundPanelActions .field,
.soundSource .field,
.soundSourceName {
  height: 31px;
  min-width: 0;
  border-color: color-mix(in srgb, var(--line) 80%, transparent);
  background: rgba(3, 8, 17, .42);
  font-size: 10px;
}
.soundField textarea.field {
  height: auto;
  min-height: 68px;
  padding: 8px;
  resize: vertical;
}
.soundField .range {
  accent-color: #73f6b3;
  margin: 1px 0 0;
}
.soundField output {
  justify-self: end;
  margin-top: -3px;
  color: #8deaf4;
  font: 9px/1 var(--mono, monospace);
}
.soundCheck {
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 10px;
}
.soundCheck input { accent-color: #73f6b3; }
.soundCheck small { color: var(--muted); }
.soundCheck.compact { align-self: end; }
.soundWaveWrap { position: relative; }
.soundWaveWrap .wave {
  display: block;
  height: 178px;
  cursor: crosshair;
  border-color: rgba(141, 234, 244, .16);
  background: #070b14;
}
.soundWaveLegend {
  position: absolute;
  inset: auto 9px 7px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  color: rgba(214,225,245,.42);
  font: 8px/1 var(--mono, monospace);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.soundEngineLive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #73f6b3;
  font-size: 9px;
}
.soundEngineLive i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #73f6b3;
  box-shadow: 0 0 9px rgba(115,246,179,.8);
}
.soundPreviewPanel .soundButtons {
  margin-top: 9px;
}
.soundButtons .mono { margin-left: auto; font-size: 10px; }
.soundQuickMix {
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.soundSources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.soundSource {
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 10px;
  background: rgba(1, 6, 14, .24);
}
.soundSourceHeader {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto 27px 27px;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.soundSourceEnabled input { display: none; }
.soundSourceEnabled span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(115,246,179,.3);
  border-radius: 7px;
  color: #73f6b3;
  background: rgba(115,246,179,.06);
  font: 800 9px/1 var(--mono, monospace);
}
.soundSourceEnabled input:not(:checked) + span {
  color: var(--muted);
  border-color: var(--line);
  background: transparent;
}
.soundSourceName {
  padding: 0 7px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-weight: 700;
}
.soundSourceName:focus { border-bottom-color: #73f6b3; outline: 0; }
.soundSourceState {
  color: #73f6b3;
  font: 8px/1 var(--mono, monospace);
  text-transform: uppercase;
}
.soundSourceState.bad { color: #ff7889; }
.soundSourcePath { margin-bottom: 8px; }
.soundSourceGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.soundRuntimeColumns {
  display: grid;
  grid-template-columns: 1fr .7fr 1.35fr .8fr;
  gap: 10px;
}
.soundRuntimeGroup {
  min-width: 0;
  padding: 10px;
  border-left: 1px solid rgba(141,234,244,.12);
}
.soundRuntimeGroup:first-child { border-left: 0; padding-left: 0; }
.soundRuntimeGroup h4 {
  margin: 0 0 10px;
  color: #8deaf4;
  font-size: 9px;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.soundRuntimeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.soundMusicPanel > .soundRuntimeGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 13px;
}
.soundMusicHead,
.soundMusicSection {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, .72fr) 27px 27px;
  gap: 6px;
  align-items: center;
}
.soundMusicHead {
  padding: 0 2px 5px;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}
.soundMusicSections { display: grid; gap: 6px; }
.soundMusicSection {
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(1,6,14,.2);
}
.soundMetadataGrid {
  display: grid;
  grid-template-columns: minmax(200px, .4fr) minmax(320px, 1fr);
  gap: 10px;
}
.soundDiagnostic {
  margin-top: 11px;
  padding: 10px 12px;
  border: 1px solid;
  border-radius: 9px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  font-size: 9px;
}
.soundDiagnostic b { grid-row: 1 / span 20; white-space: nowrap; }
.soundDiagnostic span { color: var(--muted); }
.soundDiagnostic.good { border-color: rgba(115,246,179,.25); background: rgba(115,246,179,.055); }
.soundDiagnostic.good b { color: #73f6b3; }
.soundDiagnostic.bad { border-color: rgba(255,95,115,.28); background: rgba(255,95,115,.055); }
.soundDiagnostic.bad b { color: #ff7889; }
.soundEmpty {
  min-height: 58px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  display: grid;
  place-content: center;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}
@media (max-width: 1160px) {
  .soundStudioGrid { grid-template-columns: 1fr; }
  .soundRuntimeColumns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soundRuntimeGroup:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 820px) {
  .soundStudio { width: min(100% - 18px, 1480px); }
  .soundStudioHeader { grid-template-columns: auto minmax(0, 1fr); }
  .soundStudioHeaderActions { grid-column: 1 / -1; justify-content: flex-start; }
  .soundSources,
  .soundRuntimeColumns { grid-template-columns: 1fr; }
  .soundRuntimeGroup { border-left: 0; border-top: 1px solid rgba(141,234,244,.12); padding-left: 0; }
  .soundSourceGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soundMusicPanel > .soundRuntimeGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soundMetadataGrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .soundIdentityFields,
  .soundQuickMix,
  .soundRuntimeGrid { grid-template-columns: 1fr; }
  .soundMusicHead { display: none; }
  .soundMusicSection { grid-template-columns: 1fr 1fr; }
  .soundMusicSection > :first-child { grid-column: 1 / -1; }
}
.texturePane {
  display: grid;
  place-items: center;
  overflow: auto;
  background-image:
    linear-gradient(45deg, #151b2a 25%, transparent 25%),
    linear-gradient(-45deg, #151b2a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #151b2a 75%),
    linear-gradient(-45deg, transparent 75%, #151b2a 75%);
  background-size: 24px 24px;
  background-position:
    0 0,
    0 12px,
    12px -12px,
    -12px 0;
}
.texturePane img {
  max-width: 92%;
  max-height: 92%;
  image-rendering: pixelated;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--line);
}

.inspector {
  grid-column: 4;
  grid-row: 1/3;
  background: linear-gradient(180deg, var(--studio-surface, #0d1425), var(--studio-surface, #090f1e));
  border-left: 1px solid var(--line);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.inspectorBody {
  overflow: auto;
  flex: 1;
}
.section {
  border-bottom: 1px solid var(--line);
}
.sectionTitle {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.018));
}
.sectionBody {
  padding: 10px;
}
.propGrid {
  display: grid;
  grid-template-columns: 48px repeat(3, 1fr);
  gap: 6px;
  align-items: center;
}
.propGrid label {
  font-size: 11px;
  color: var(--muted);
}
.axisInput {
  min-width: 0;
  padding: 6px 7px;
  font-family: "Cascadia Code", monospace;
  font-size: 11px;
}
.axisHead {
  text-align: center;
  font-size: 10px;
}
.axisHead.x {
  color: var(--studio-bad, #ff778c);
}
.axisHead.y {
  color: var(--studio-good, #7df0a9);
}
.axisHead.z {
  color: var(--studio-accent, #76b9ff);
}
.kv {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 7px;
  align-items: center;
  margin-bottom: 7px;
}
.kv label {
  font-size: 11px;
  color: var(--muted);
}
.inspectorEmpty {
  padding: 20px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.timeline {
  grid-column: 3;
  grid-row: 2;
  border-top: 1px solid var(--line);
  background: var(--studio-surface, #090f1c);
  display: grid;
  grid-template-rows: 34px 1fr;
  min-height: 0;
}
.timelineHead {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
}
.timelineBody {
  display: grid;
  grid-template-columns: var(--animation-sidebar) 1fr;
  min-height: 0;
}
.animList {
  border-right: 1px solid var(--line);
  overflow: auto;
  padding: 5px;
}
.animRow {
  height: 27px;
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
.animRow:hover,
.animRow.active {
  background: rgba(183, 119, 255, 0.1);
  color: var(--studio-violet, #e6ccff);
}
.timelineTrack {
  position: relative;
  overflow: auto;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 59px,
      var(--studio-wash, rgba(255, 255, 255, 0.045)) 60px
    ),
    linear-gradient(var(--studio-surface, #0a101d), var(--studio-surface, #080d18));
}
.timeRuler {
  height: 24px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--studio-surface, rgba(9, 15, 28, 0.94));
  z-index: 2;
}
.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--cyan);
  left: 0;
  box-shadow: 0 0 8px var(--cyan);
}
.playhead:before {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid var(--cyan);
}
.keyframe {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--violet);
  transform: rotate(45deg);
  border: 1px solid #f1e0ff;
  top: 40px;
  border-radius: 1px;
}
.timelineHint {
  position: absolute;
  inset: 45px 20px auto;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
}
.statusbar {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 9px;
  background: linear-gradient(90deg, #157c8a, #6c3e99);
  font-size: 10px;
  color: var(--studio-accent, #f5fbff);
}
.statusbar .right {
  margin-left: auto;
}
.statusItem {
  display: flex;
  align-items: center;
  gap: 5px;
}

.modalHost {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: var(--studio-surface, rgba(1, 3, 9, 0.72));
  backdrop-filter: blur(8px);
}
.modalHost.open {
  display: flex;
}
.modal {
  width: min(780px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
}
.modalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.modalHeader h2 {
  font-size: 16px;
  margin: 0;
}
.modalBody {
  padding: 15px;
  overflow: auto;
}
.modalFooter {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 15px;
  border-top: 1px solid var(--line);
}
.modalClose {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 19px;
}
.formGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.formField label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 5px;
}
.full {
  grid-column: 1/-1;
}
.listCard {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin: 8px 0;
}
.listRow {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.listRow:last-child {
  border-bottom: 0;
}
.listSub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.diffBox {
  white-space: pre-wrap;
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--studio-surface, #070b14);
  color: var(--studio-accent, #cfe0fa);
  font:
    11px/1.45 "Cascadia Code",
    monospace;
}
.toastHost {
  position: fixed;
  right: 16px;
  bottom: 38px;
  z-index: 200;
  display: grid;
  gap: 8px;
}
.toast {
  width: min(360px, 90vw);
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--studio-surface, #111a2e);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 12px;
  animation: toastIn 0.2s ease;
}
.toast.good {
  border-color: rgba(88, 230, 169, 0.35);
}
.toast.bad {
  border-color: rgba(255, 107, 131, 0.4);
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (max-width: 1100px) {
  :root {
    --sidebar: 240px;
    --inspector: 260px;
  }
  .brandText {
    display: none;
  }
  .brandMini {
    min-width: 50px;
  }
  .soundControls {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 820px) {
  .mainGrid {
    grid-template-columns: var(--activity) 220px minmax(320px, 1fr);
  }
  .inspector {
    position: fixed;
    right: 0;
    top: var(--top);
    bottom: var(--status);
    width: 290px;
    z-index: 30;
    transform: translateX(100%);
    transition: 0.2s;
  }
  .inspector.mobileOpen {
    transform: none;
  }
  .timeline {
    grid-column: 3;
  }
  .topbar .hideSmall {
    display: none;
  }
  .projectPicker {
    min-width: 150px;
  }
  .quickGrid {
    grid-template-columns: 1fr;
  }
  .modelArea {
    grid-template-columns: 160px 1fr;
  }
}

/* Interactive Studios 2026 workspace upgrades */
#app.activityExpanded {
  --activity: 190px;
}
#app.lockdownActive {
  grid-template-rows: auto var(--top) 1fr var(--status);
}
#app.lockdownActive .securityBanner {
  grid-row: 1;
}
#app.lockdownActive .topbar {
  grid-row: 2;
}
#app.lockdownActive .mainGrid {
  grid-row: 3;
}
#app.lockdownActive .statusbar {
  grid-row: 4;
}
.securityBanner {
  min-height: 44px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(
    90deg,
    rgba(255, 70, 100, 0.3),
    rgba(255, 155, 74, 0.18)
  );
  border-bottom: 1px solid rgba(255, 107, 131, 0.55);
  font-size: 12px;
  z-index: 22;
}
.securityBanner > div {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
  flex: 1;
}
.securityBanner b {
  color: var(--studio-bad, #ffd9df);
}
.securityBanner span {
  color: var(--studio-bad, #ffc6d0);
}
.securityShield {
  font-size: 22px;
  color: var(--bad) !important;
  text-shadow: 0 0 16px rgba(255, 107, 131, 0.65);
}
.securityStatusBtn {
  white-space: nowrap;
}
.securityStatusBtn .pill {
  padding: 2px 7px;
}
.securityStatusBtn.warning {
  border-color: rgba(255, 200, 87, 0.45);
}
.securityStatusBtn.locked {
  border-color: rgba(255, 107, 131, 0.65);
  background: rgba(255, 107, 131, 0.12);
}
.activity {
  transition: width 0.2s ease;
  padding-left: 5px;
  padding-right: 5px;
  overflow: hidden;
}
.activity button {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 38px;
  white-space: nowrap;
  padding: 0 10px;
  text-align: left;
}
.activityIcon {
  width: 18px;
  text-align: center;
  flex: 0 0 18px;
}
.activityLabel {
  display: none;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.1px;
}
.activityExpanded .activity button {
  width: 180px;
}
.activityExpanded .activityLabel {
  display: inline;
}
.activityToggle {
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  margin-bottom: 4px;
}
.toolGroup {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.compactSelect {
  height: 29px;
  min-width: 52px;
  border: 1px solid var(--line);
  background: var(--studio-surface, #0a1020);
  border-radius: 7px;
  color: var(--text);
  padding: 0 6px;
}
.colorButton {
  height: 29px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  border: 1px solid transparent;
  padding: 0 7px;
  border-radius: 7px;
}
.colorButton:hover {
  border-color: var(--line);
  background: var(--studio-wash, rgba(255, 255, 255, 0.05));
}
.colorButton input {
  width: 20px;
  height: 20px;
  border: 0;
  padding: 0;
  background: transparent;
}
.workToolbar {
  overflow-x: auto;
  overflow-y: hidden;
}
.workToolbar::-webkit-scrollbar {
  height: 4px;
}
.timelineHead {
  overflow-x: auto;
  white-space: nowrap;
}
.timelineField {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--muted);
}
.timelineField input {
  width: 62px;
  padding: 4px 5px;
  height: 27px;
}
.animationPicker {
  width: 190px;
  padding: 5px 8px;
  height: 28px;
}
.securityCard {
  border: 1px solid var(--line);
  background: linear-gradient(
    145deg,
    rgba(120, 244, 237, 0.045),
    rgba(183, 119, 255, 0.045)
  );
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}
.securityCard.critical {
  border-color: rgba(255, 107, 131, 0.52);
  background: rgba(255, 107, 131, 0.07);
}
.securityCard.high {
  border-color: rgba(255, 200, 87, 0.38);
}
.securityMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.securityMetric {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px;
  background: var(--studio-wash, rgba(0, 0, 0, 0.16));
}
.securityMetric b {
  font-size: 17px;
  display: block;
}
.securityMetric span {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
}
.riskBadge {
  display: inline-flex;
  border-radius: 99px;
  padding: 3px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--line);
}
.riskBadge.critical,
.riskBadge.high {
  color: var(--studio-bad, #ffc4ce);
  border-color: rgba(255, 107, 131, 0.45);
  background: rgba(255, 107, 131, 0.1);
}
.riskBadge.medium {
  color: var(--studio-warn, #ffe0a0);
  border-color: rgba(255, 200, 87, 0.42);
  background: rgba(255, 200, 87, 0.08);
}
.riskBadge.low,
.riskBadge.info {
  color: var(--studio-accent, #bffcf3);
  border-color: rgba(120, 244, 237, 0.35);
}
.securityFinding {
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
.securityFinding:last-child {
  border-bottom: 0;
}
.securityFindingHead {
  display: flex;
  gap: 8px;
  align-items: center;
}
.securityFindingPath {
  font:
    10px/1.4 "Cascadia Code",
    monospace;
  color: var(--muted);
  word-break: break-all;
  margin-top: 4px;
}
.securityFindingDetail {
  font-size: 11px;
  line-height: 1.45;
  margin-top: 6px;
}
.lockdownPanel {
  border: 1px solid rgba(255, 107, 131, 0.48);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(
    135deg,
    rgba(255, 107, 131, 0.12),
    rgba(255, 200, 87, 0.05)
  );
  margin-bottom: 12px;
}
.texturePane {
  place-items: stretch;
  padding: 0;
}
.textureWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  min-height: 100%;
  background: var(--studio-surface, #090e1a);
}
.textureStage {
  position: relative;
  overflow: auto;
  display: grid;
  place-items: center;
  background-image:
    linear-gradient(45deg, #151b2a 25%, transparent 25%),
    linear-gradient(-45deg, #151b2a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #151b2a 75%),
    linear-gradient(-45deg, transparent 75%, #151b2a 75%);
  background-size: 24px 24px;
  background-position:
    0 0,
    0 12px,
    12px -12px,
    -12px 0;
}
.textureCanvasWrap {
  position: relative;
  margin: 60px;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.58);
  line-height: 0;
}
.textureCanvas {
  image-rendering: pixelated;
  display: block;
  cursor: crosshair;
}
.textureGridOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: var(--pixel-size, 16px) var(--pixel-size, 16px);
}
.textureSidebar {
  border-left: 1px solid var(--line);
  background: var(--studio-surface, #0b1120);
  overflow: auto;
  padding: 11px;
}
.paletteGrid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.paletteSwatch {
  aspect-ratio: 1;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0;
}
.textureMeta {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}
.zoomRow {
  display: flex;
  gap: 5px;
  margin: 8px 0;
}
.zoomRow button {
  flex: 1;
}
.textureHint {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 12px;
}
.uvCanvasWrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  background-image:
    linear-gradient(45deg, #171c2a 25%, transparent 25%),
    linear-gradient(-45deg, #171c2a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #171c2a 75%),
    linear-gradient(-45deg, transparent 75%, #171c2a 75%);
  background-size: 16px 16px;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  overflow: auto;
  display: grid;
  place-items: center;
  min-height: 320px;
}
.uvCanvas {
  image-rendering: pixelated;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.12));
  max-width: 100%;
  height: auto;
}
.uvList {
  max-height: 300px;
  overflow: auto;
}
.uvRow {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 70px 70px;
  gap: 6px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 6px;
}
.uvRow input {
  padding: 5px;
}
.modelFeatureStrip {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  gap: 5px;
  pointer-events: none;
}
.viewportWrap.liveMirror:after {
  content: "LIVE MIRROR";
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 7px;
  border-radius: 99px;
  border: 1px solid rgba(120, 244, 237, 0.38);
  color: var(--cyan);
  font-size: 9px;
  background: var(--studio-wash, rgba(0, 0, 0, 0.48));
}

.viewportWrap.liveMirror[data-mirror-axis="X"] .mirrorGuide {
  display: flex;
  background-image:
    linear-gradient(90deg, rgba(120, 244, 237, 0.24) 1px, transparent 1px),
    linear-gradient(0deg, rgba(120, 244, 237, 0.14) 1px, transparent 1px);
}
.viewportWrap.liveMirror[data-mirror-axis="Y"] .mirrorGuide {
  display: flex;
  background-image:
    linear-gradient(90deg, rgba(125, 240, 169, 0.22) 1px, transparent 1px),
    linear-gradient(0deg, rgba(125, 240, 169, 0.12) 1px, transparent 1px);
  transform: perspective(700px) rotateX(68deg) scale(1.25);
}
.viewportWrap.liveMirror[data-mirror-axis="Z"] .mirrorGuide {
  display: flex;
  background-image:
    linear-gradient(90deg, rgba(118, 185, 255, 0.23) 1px, transparent 1px),
    linear-gradient(0deg, rgba(118, 185, 255, 0.13) 1px, transparent 1px);
  transform: perspective(700px) rotateY(61deg) scale(1.2);
}
.mirrorGuide {
  position: absolute;
  inset: 13% 45% 13% 45%;
  z-index: 4;
  display: none;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  border: 1px solid rgba(120, 244, 237, 0.42);
  border-radius: 12px;
  background-size: 18px 18px;
  background-color: rgba(120, 244, 237, 0.035);
  box-shadow: 0 0 22px rgba(120, 244, 237, 0.15), inset 0 0 24px rgba(120, 244, 237, 0.08);
}
.mirrorGuide:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10%;
  bottom: -10%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.92), transparent);
  box-shadow: 0 0 12px rgba(120, 244, 237, 0.85);
}
.mirrorGuide span {
  margin-top: -24px;
  padding: 4px 8px;
  border: 1px solid rgba(120, 244, 237, 0.34);
  border-radius: 999px;
  color: var(--cyan);
  background: var(--studio-surface, rgba(3, 6, 12, 0.72));
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.keyframe.step {
  background: var(--warn);
}
.keyframe.smooth {
  background: var(--cyan2);
  border-radius: 50%;
  transform: none;
}
.keyframe.sound {
  background: var(--pink);
  border-radius: 3px;
  width: 9px;
  height: 12px;
}
.timelineTrack .trackLabel {
  position: absolute;
  left: 8px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 9px;
  pointer-events: none;
}
.timelineHint.hiddenHint {
  display: none;
}
.btn[disabled],
.toolBtn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}
.readOnlySurface {
  pointer-events: none;
  filter: saturate(0.65);
}
@media (max-width: 1280px) {
  .workToolbar .toolBtn {
    padding: 0 6px;
    font-size: 11px;
  }
  .securityMetrics {
    grid-template-columns: 1fr 1fr;
  }
  .textureWorkspace {
    grid-template-columns: 1fr 190px;
  }
}
@media (max-width: 900px) {
  #app.activityExpanded {
    --activity: 150px;
  }
  .activityExpanded .activity button {
    width: 140px;
  }
  .textureWorkspace {
    grid-template-columns: 1fr;
  }
  .textureSidebar {
    display: none;
  }
  .securityMetrics {
    grid-template-columns: 1fr 1fr;
  }
}

/* Minecraft development environment: explorer, model formats, animations and administration */
.folderRow,
.treeRow {
  width: 100%;
  min-width: max-content;
  padding-left: calc(7px + (var(--tree-depth, 0) * 15px));
  user-select: none;
}
.folderRow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border-radius: 7px;
  color: var(--studio-ink, #c9d5e8);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.folderRow:hover {
  background: var(--studio-wash, rgba(255, 255, 255, 0.052));
}
.folderRow.open {
  color: var(--studio-accent, #edf5ff);
}
.folderChevron {
  width: 12px;
  color: var(--studio-muted, #75839f);
  text-align: center;
  flex: 0 0 12px;
  font-size: 13px;
}
.folderIcon {
  width: 14px;
  color: var(--studio-accent, #66dfe1);
  text-align: center;
  flex: 0 0 14px;
  font-size: 10px;
}
.folderName,
.treeName {
  white-space: nowrap;
  min-width: 0;
}
.folderName {
  font-weight: 620;
  flex: 1;
}
.folderCount,
.treeMeta {
  margin-left: auto;
  color: var(--studio-muted, #65728d);
  font-size: 9px;
  flex: 0 0 auto;
  padding-right: 4px;
}
.treeRow {
  cursor: pointer;
}
.treeRow .treeIcon {
  flex: 0 0 17px;
}
.treeRow .treeName {
  flex: 1;
}
.treeRow.active .treeMeta {
  color: var(--studio-accent, #a5f8f3);
}

.toolBtn.attention {
  border-color: rgba(255, 200, 87, 0.48);
  color: var(--studio-warn, #ffe5a9);
  background: rgba(255, 200, 87, 0.08);
  box-shadow: 0 0 16px rgba(255, 200, 87, 0.06);
}
.formatPill {
  color: var(--studio-accent, #b9fff7) !important;
  border-color: rgba(120, 244, 237, 0.28) !important;
}
.modelArea {
  grid-template-columns: var(--model-outliner) minmax(0, 1fr) var(--model-side);
}
.modelSidePanel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--studio-surface, #0b1222), var(--studio-surface, #090f1c));
  border-left: 1px solid var(--line);
}
.modelAnimationList {
  overflow: auto;
  flex: 1;
  padding: 7px;
  display: grid;
  align-content: start;
  gap: 5px;
}
.modelSourceCard {
  margin: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: linear-gradient(
    145deg,
    rgba(37, 200, 219, 0.055),
    rgba(183, 119, 255, 0.05)
  );
  display: grid;
  gap: 6px;
}
.modelSourceCard b {
  font-size: 12px;
}
.modelSourceCard span {
  font:
    9px/1.45 "Cascadia Code",
    monospace;
  color: var(--muted);
  word-break: break-all;
  max-height: 58px;
  overflow: auto;
}
.modelSourceCard .btn {
  justify-self: stretch;
}
.modelPreviewBanner {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 5;
  width: min(510px, calc(100% - 220px));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255, 200, 87, 0.34);
  border-radius: 10px;
  background: var(--studio-surface, rgba(13, 18, 31, 0.92));
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
}
.modelPreviewBanner b {
  font-size: 11px;
  color: var(--studio-warn, #ffe3a4);
}
.modelPreviewBanner span {
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
}
.modelPreviewBanner .btn {
  grid-column: 2;
  grid-row: 1/3;
}
.externalModelPreview .viewportWrap {
  box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.08);
}
.outRow {
  height: 28px;
  padding-left: calc(6px + (var(--out-depth, 0) * 15px));
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
.outChevron {
  width: 16px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--studio-muted, #76849f);
  flex: 0 0 16px;
}
.outChevron:hover {
  color: var(--text);
  background: var(--studio-wash, rgba(255, 255, 255, 0.06));
  border-radius: 5px;
}
.outName {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.outCount {
  margin-left: auto;
  font-size: 9px;
}
.outCube {
  color: var(--studio-muted, #aab7ce);
}
.animRow {
  width: 100%;
  height: auto;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 1px 7px;
  text-align: left;
  align-items: center;
}
.animRow:hover,
.animRow.active {
  border-color: rgba(183, 119, 255, 0.24);
  background: linear-gradient(
    90deg,
    rgba(183, 119, 255, 0.12),
    rgba(37, 200, 219, 0.045)
  );
  color: var(--studio-violet, #f2e7ff);
}
.animRow.active {
  box-shadow: inset 2px 0 0 var(--violet);
}
.animName {
  font-size: 11px;
  font-weight: 670;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.animStats {
  font-size: 9px;
  color: var(--muted);
  grid-column: 1;
}
.animPlay {
  grid-column: 2;
  grid-row: 1/3;
  color: var(--cyan);
  font-size: 10px;
  opacity: 0.7;
}
.animList .animRow {
  margin-bottom: 4px;
}
.modelLoading,
.editorError {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 28px;
  background:
    radial-gradient(
      500px 320px at 50% 45%,
      rgba(37, 200, 219, 0.08),
      transparent 68%
    ),
    var(--studio-surface, #080d18);
}
.modelLoading b,
.editorError b {
  font-size: 15px;
}
.modelLoading span,
.editorError span {
  max-width: 540px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--studio-line, rgba(255, 255, 255, 0.09));
  border-top-color: var(--cyan);
  border-right-color: var(--violet);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

.conversionHero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(37, 200, 219, 0.07),
    rgba(183, 119, 255, 0.07)
  );
  margin-bottom: 12px;
}
.conversionHero > div {
  display: grid;
  gap: 3px;
}
.conversionHero b {
  font-size: 13px;
}
.conversionHero span:not(.conversionIcon) {
  font-size: 10px;
  color: var(--muted);
}
.conversionIcon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(
    135deg,
    rgba(37, 200, 219, 0.2),
    rgba(183, 119, 255, 0.22)
  );
  font-size: 20px;
  color: var(--cyan);
}
.conversionChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.conversionChoice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.02));
  cursor: pointer;
  transition: 0.15s;
}
.conversionChoice:hover,
.conversionChoice:has(input:checked) {
  border-color: rgba(120, 244, 237, 0.36);
  background: rgba(120, 244, 237, 0.055);
}
.conversionChoice input {
  margin-top: 3px;
}
.conversionChoice span {
  display: grid;
  gap: 4px;
}
.conversionChoice b {
  font-size: 11px;
}
.conversionChoice small {
  font-size: 9px;
  line-height: 1.4;
  color: var(--muted);
}
.checkRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--studio-ink, #c6d2e7);
}

.adminDialog {
  width: min(1180px, 96vw);
  height: min(780px, 92vh);
  max-height: 92vh;
}
.adminDialog .modalBody {
  padding: 0;
  min-height: 0;
  flex: 1;
}
.adminDialog .modalFooter {
  background: var(--studio-surface, #0a1020);
}
.adminDialog > .modalHeader {
  background: linear-gradient(90deg, var(--studio-surface, #10192d), var(--studio-surface, #0a1121));
}
.adminShell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 100%;
  height: 100%;
}
.adminNav {
  padding: 12px;
  background: linear-gradient(180deg, var(--studio-surface, #0b1222), var(--studio-surface, #080e1b));
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: auto;
}
.adminNavTitle {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 7px 8px 12px;
}
.adminTab {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--studio-muted, #91a0bb);
  text-align: left;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 620;
}
.adminTab:hover {
  background: var(--studio-wash, rgba(255, 255, 255, 0.045));
  color: var(--text);
}
.adminTab.active {
  border-color: rgba(120, 244, 237, 0.18);
  background: linear-gradient(
    90deg,
    rgba(37, 200, 219, 0.13),
    rgba(183, 119, 255, 0.07)
  );
  color: var(--cyan);
  box-shadow: inset 2px 0 0 var(--cyan);
}
.adminContent {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--studio-surface, #0a0f1c);
}
.adminContentHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--studio-wash, rgba(255, 255, 255, 0.012));
}
.adminContentHead h3 {
  margin: 3px 0 0;
  font-size: 18px;
}
.eyebrow {
  color: var(--cyan);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.adminContentBody {
  overflow: auto;
  padding: 16px;
}
.adminIntro {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(37, 200, 219, 0.06),
    rgba(183, 119, 255, 0.055)
  );
  margin-bottom: 12px;
}
.adminIntroIcon {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(120, 244, 237, 0.1);
  color: var(--cyan);
  font-size: 20px;
}
.adminIntroIcon.security {
  background: rgba(183, 119, 255, 0.12);
  color: var(--studio-violet, #d7adff);
}
.adminIntro > div:last-child {
  display: grid;
  gap: 4px;
}
.adminIntro b {
  font-size: 13px;
}
.adminIntro span {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.55;
}
.adminCard {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.022));
  margin-bottom: 12px;
}
.adminCardTitle {
  font-size: 12px;
  font-weight: 750;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.actionRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.importLimits {
  font-size: 9px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 8px;
}
.advancedCard {
  margin-top: 10px;
}
.filePicker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px dashed rgba(120, 244, 237, 0.25);
  border-radius: 10px;
  padding: 9px;
  background: rgba(120, 244, 237, 0.025);
}
.filePicker input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.filePickerButton {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(120, 244, 237, 0.3);
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    rgba(37, 200, 219, 0.16),
    rgba(183, 119, 255, 0.15)
  );
  color: var(--studio-accent, #efffff);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.filePickerButton:hover {
  border-color: rgba(120, 244, 237, 0.52);
  box-shadow: 0 0 18px rgba(120, 244, 237, 0.08);
}
.filePickerName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
}
.projectAdminGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 9px;
}
.projectAdminCard {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px;
  background: linear-gradient(
    145deg,
    var(--studio-wash, rgba(255, 255, 255, 0.025)),
    rgba(120, 244, 237, 0.018)
  );
  display: grid;
  gap: 7px;
}
.projectAdminCard b {
  font-size: 12px;
}
.projectAdminMeta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 9px;
}
.projectAdminCard .actionRow {
  margin-top: 2px;
}
.diagnosticGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.diagnosticCard {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.022));
  display: grid;
  align-content: start;
  gap: 9px;
}
.diagnosticCard.live {
  border-color: rgba(255, 107, 131, 0.3);
  background: rgba(255, 107, 131, 0.035);
}
.diagnosticHead {
  display: grid;
  gap: 6px;
}
.diagnosticHead b {
  font-size: 12px;
}
.diagnosticCard p {
  font-size: 10px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  min-height: 45px;
}
.diagnosticCard .btn {
  justify-self: start;
}
.diagnosticResult {
  display: grid;
  gap: 4px;
  border-radius: 11px;
  padding: 11px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
}
.diagnosticResult.passed {
  border-color: rgba(88, 230, 169, 0.32);
  background: rgba(88, 230, 169, 0.055);
}
.diagnosticResult.failed {
  border-color: rgba(255, 107, 131, 0.38);
  background: rgba(255, 107, 131, 0.055);
}
.diagnosticResult b {
  font-size: 12px;
}
.diagnosticResult span {
  font-size: 10px;
}
.diagnosticResult small {
  color: var(--muted);
  font-size: 9px;
}
.testPolicyGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.testPolicyGrid > div {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px;
  background: var(--studio-wash, rgba(0, 0, 0, 0.12));
  display: grid;
  gap: 4px;
}
.testPolicyGrid b {
  font-size: 11px;
}
.testPolicyGrid span {
  font-size: 9px;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 1320px) {
  .modelArea {
    grid-template-columns: 190px minmax(0, 1fr) 205px;
  }
  .modelPreviewBanner {
    width: min(480px, calc(100% - 160px));
  }
  .adminShell {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}
@media (max-width: 1050px) {
  .modelArea {
    grid-template-columns: 180px minmax(0, 1fr);
  }
  .modelSidePanel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 220px;
    z-index: 6;
    box-shadow: -18px 0 44px rgba(0, 0, 0, 0.28);
  }
  .splitPane .modelSidePanel {
    display: none;
  }
  .conversionChoices {
    grid-template-columns: 1fr;
  }
  .adminShell {
    grid-template-columns: 160px minmax(0, 1fr);
  }
  .testPolicyGrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .adminDialog {
    width: 98vw;
    height: 94vh;
  }
  .adminShell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .adminNav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 7px;
  }
  .adminNavTitle {
    display: none;
  }
  .adminTab {
    white-space: nowrap;
    min-height: 32px;
  }
  .adminTab.active {
    box-shadow: inset 0 -2px 0 var(--cyan);
  }
  .modelArea {
    grid-template-columns: 145px minmax(0, 1fr);
  }
  .modelPreviewBanner {
    left: 8px;
    right: 8px;
    transform: none;
    width: auto;
    grid-template-columns: 1fr;
  }
  .modelPreviewBanner .btn {
    grid-column: 1;
    grid-row: auto;
  }
  .modelSidePanel {
    display: none;
  }
  .projectAdminGrid,
  .diagnosticGrid {
    grid-template-columns: 1fr;
  }
  .filePicker {
    grid-template-columns: 1fr;
  }
}

#contentHost {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.fileGlyph {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 2px;
  border-radius: 4px;
  font:
    700 8px/1 "Cascadia Code",
    Consolas,
    monospace;
  letter-spacing: -0.35px;
  color: var(--studio-ink, #aebbd2);
  background: var(--studio-wash, rgba(255, 255, 255, 0.045));
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.055));
}
.file-js {
  color: var(--studio-warn, #fff0a6);
  background: rgba(247, 223, 30, 0.13);
}
.file-ts {
  color: var(--studio-accent, #9ad1ff);
  background: rgba(49, 120, 198, 0.17);
}
.file-react {
  color: var(--studio-accent, #8feaff);
  background: rgba(97, 218, 251, 0.12);
}
.file-html {
  color: var(--studio-warn, #ff9f75);
  background: rgba(227, 76, 38, 0.15);
}
.file-css {
  color: var(--studio-accent, #84bfff);
  background: rgba(38, 77, 228, 0.15);
}
.file-sass {
  color: var(--studio-pink, #ff9ccb);
  background: rgba(204, 102, 153, 0.14);
}
.file-less {
  color: var(--studio-ink, #a8b9e6);
  background: var(--studio-wash, rgba(29, 54, 93, 0.24));
}
.file-md {
  color: var(--studio-accent, #dce8ff);
  background: rgba(87, 108, 148, 0.18);
}
.file-ilbank {
  color: var(--studio-accent, #b9fff9);
  background: linear-gradient(135deg, rgba(120, 244, 237, 0.18), rgba(183, 119, 255, 0.18));
  border-color: rgba(120, 244, 237, 0.2);
  box-shadow: inset 0 0 10px rgba(120, 244, 237, 0.08);
}
.file-txt {
  color: var(--studio-ink, #c2cada);
}
.file-log {
  color: var(--studio-warn, #d9ad76);
}
.file-json {
  color: var(--studio-warn, #ffe694);
  background: rgba(255, 207, 64, 0.1);
}
.file-minecraft {
  color: var(--studio-good, #a7e37b);
  background: rgba(83, 141, 53, 0.15);
}
.file-java {
  color: var(--studio-warn, #ffac7a);
  background: rgba(231, 111, 0, 0.13);
}
.file-kotlin {
  color: var(--studio-violet, #d0a5ff);
  background: rgba(127, 82, 255, 0.15);
}
.file-groovy,
.file-gradle {
  color: var(--studio-good, #9ee5d0);
  background: rgba(35, 145, 120, 0.14);
}
.file-python {
  color: var(--studio-accent, #acd5ff);
  background: rgba(55, 118, 171, 0.16);
}
.file-cmd,
.file-bat {
  color: var(--studio-good, #baf6c3);
  background: rgba(48, 135, 61, 0.17);
}
.file-powershell {
  color: var(--studio-accent, #8fc8ff);
  background: rgba(1, 36, 86, 0.4);
}
.file-shell {
  color: var(--studio-good, #b8f1c2);
  background: rgba(72, 142, 78, 0.15);
}
.file-xml,
.file-svg {
  color: var(--studio-warn, #ffbd80);
  background: rgba(224, 133, 47, 0.13);
}
.file-yaml {
  color: var(--studio-bad, #ff9ea7);
  background: rgba(203, 48, 65, 0.13);
}
.file-toml,
.file-ini,
.file-properties,
.file-config {
  color: var(--studio-ink, #b8c9e6);
  background: rgba(90, 112, 150, 0.13);
}
.file-c,
.file-cpp,
.file-csharp {
  color: var(--studio-violet, #aeb8ff);
  background: rgba(72, 82, 196, 0.16);
}
.file-rust {
  color: var(--studio-warn, #ffc4a2);
  background: rgba(183, 65, 14, 0.14);
}
.file-go {
  color: var(--studio-accent, #8beaff);
  background: rgba(0, 173, 216, 0.13);
}
.file-lua {
  color: var(--studio-violet, #aaaaff);
  background: rgba(0, 0, 128, 0.25);
}
.file-sql {
  color: var(--studio-accent, #a4dbff);
  background: rgba(63, 126, 163, 0.15);
}
.file-model,
.file-gecko,
.file-blockbench {
  color: var(--studio-accent, #79f0ea);
  background: rgba(37, 200, 219, 0.13);
}
.file-animation {
  color: var(--studio-violet, #d9adff);
  background: rgba(183, 119, 255, 0.14);
}
.file-sound {
  color: var(--studio-pink, #ff9fe9);
  background: rgba(241, 93, 222, 0.13);
}
.file-texture,
.file-image {
  color: var(--studio-accent, #9bd8ff);
  background: rgba(68, 161, 218, 0.13);
}
.file-docker {
  color: var(--studio-accent, #8ed0ff);
  background: rgba(36, 150, 237, 0.14);
}
.tabIcon,
.treeIcon {
  display: grid;
  place-items: center;
  flex: 0 0 19px;
}
.tabIcon .fileGlyph {
  transform: scale(0.92);
}
.modelViewControls {
  position: absolute;
  right: 11px;
  top: 11px;
  z-index: 4;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  background: var(--studio-surface, rgba(4, 8, 16, 0.72));
  backdrop-filter: blur(10px);
}
.modelViewControls button {
  height: 23px;
  border: 0;
  border-radius: 5px;
  padding: 0 7px;
  background: transparent;
  color: var(--studio-muted, #93a2bd);
  font-size: 9px;
}
.modelViewControls button:hover {
  background: rgba(120, 244, 237, 0.1);
  color: var(--studio-accent, #dffffc);
}
#modelViewport {
  touch-action: none;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #e9eef6;
  --bg2: #f4f7fb;
  --panel: #ffffff;
  --panel2: #f5f7fb;
  --panel3: #eaf0f7;
  --line: rgba(42, 62, 91, 0.14);
  --line2: rgba(8, 125, 137, 0.24);
  --text: #24324a;
  --muted: #687891;
  --cyan: #087d89;
  --cyan2: #0a9aaa;
  --violet: #7546b8;
  --pink: #b832a0;
  --good: #16845b;
  --warn: #a86700;
  --bad: #c43b55;
  --shadow: 0 24px 70px rgba(48, 64, 90, 0.2);
  --code-bg: #f7f9fd;
  --code-gutter: #eef2f8;
  --code-text: #24324a;
  --code-line: #eaf0f8;
}
.themeToggle {
  font-size: 17px;
  line-height: 1;
}
.themeToggle span {
  display: block;
  transition: transform 0.25s ease;
}
.themeToggle:hover span {
  transform: rotate(18deg) scale(1.08);
}
.codeTools {
  align-items: center;
  flex: 1 1 auto;
  overflow: hidden;
}
.codeTools .toolBtn {
  min-width: 0;
}
.codeToolDivider {
  height: 22px;
  width: 1px;
  background: var(--line);
  margin: 0 3px;
}
.codeZoomControls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
}
.codeZoomControls .toolBtn {
  height: 24px;
  min-width: 27px;
  padding: 0 6px;
}
.codeZoomValue {
  min-width: 48px !important;
  font-size: 10px !important;
  font-family: "Cascadia Code", Consolas, monospace;
  color: var(--text) !important;
}
.codeZoomButton {
  font-size: 15px !important;
}
.filePickerButton {
  min-width: 132px;
  text-align: center;
  white-space: nowrap;
}
.filePickerButton::before {
  content: "↥";
  font-size: 14px;
}
.filePickerName {
  text-align: left;
}
#loginView {
  padding: clamp(18px, 4vw, 48px);
  overflow: auto;
  background: var(--studio-surface, #07101f);
}
#loginView:before {
  opacity: 0.15;
  background-image:
    linear-gradient(rgba(120, 244, 237, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 244, 237, 0.1) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}
.loginStage {
  position: relative;
  z-index: 1;
  width: min(1040px, 96vw);
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(420px, 1.2fr) minmax(360px, 0.8fr);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.52);
  background: var(--panel2);
}
.minecraftScene {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 560px;
  background: linear-gradient(
    180deg,
    #64bff1 0%,
    #8fd4f2 48%,
    #e8be7b 72%,
    #343a65 100%
  );
  animation: mcSkyCycle 28s linear infinite;
}
.mcSkyGlow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 20% 18%,
      rgba(255, 244, 178, 0.44),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(255, 137, 93, 0.24) 72%,
      var(--studio-wash, rgba(31, 26, 70, 0.42))
    );
  animation: mcGlowCycle 28s linear infinite;
}
.mcSun,
.mcMoon {
  position: absolute;
  width: 62px;
  height: 62px;
  left: 15%;
  top: 14%;
  image-rendering: pixelated;
  box-shadow: 0 0 34px rgba(255, 236, 129, 0.62);
  animation: mcSunPath 28s linear infinite;
}
.mcSun {
  background: #ffe681;
}
.mcMoon {
  background: #e4edff;
  opacity: 0;
  box-shadow: 0 0 30px rgba(191, 211, 255, 0.6);
  animation-name: mcMoonPath;
}
.mcMoon:before,
.mcMoon:after,
.mcMoon span {
  content: "";
  position: absolute;
  background: #aab9d8;
}
.mcMoon:before {
  width: 14px;
  height: 12px;
  left: 10px;
  top: 10px;
}
.mcMoon:after {
  width: 11px;
  height: 16px;
  right: 9px;
  bottom: 10px;
}
.mcMoon span {
  width: 8px;
  height: 8px;
  left: 30px;
  top: 30px;
}
.mcStars {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: mcStarsCycle 28s linear infinite;
}
.mcStars i {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.75);
}
.mcStars i:nth-child(1) {
  left: 11%;
  top: 17%;
}
.mcStars i:nth-child(2) {
  left: 31%;
  top: 11%;
}
.mcStars i:nth-child(3) {
  left: 49%;
  top: 24%;
}
.mcStars i:nth-child(4) {
  left: 67%;
  top: 12%;
}
.mcStars i:nth-child(5) {
  left: 83%;
  top: 28%;
}
.mcStars i:nth-child(6) {
  left: 22%;
  top: 38%;
}
.mcStars i:nth-child(7) {
  left: 58%;
  top: 41%;
}
.mcStars i:nth-child(8) {
  left: 90%;
  top: 9%;
}
.mcCloud {
  position: absolute;
  display: flex;
  align-items: flex-end;
  filter: drop-shadow(0 8px 0 rgba(36, 82, 113, 0.1));
  animation: cloudDrift 24s linear infinite;
}
.mcCloud span {
  display: block;
  width: 48px;
  height: 26px;
  background: rgba(255, 255, 255, 0.88);
}
.mcCloud span:nth-child(2) {
  height: 42px;
}
.mcCloud span:nth-child(3) {
  height: 34px;
}
.cloudOne {
  top: 19%;
  left: -32%;
  animation-duration: 24s;
}
.cloudTwo {
  top: 34%;
  left: -42%;
  transform: scale(0.7);
  animation-duration: 31s;
  animation-delay: -13s;
}
.cloudThree {
  top: 9%;
  left: -58%;
  transform: scale(0.48);
  animation-duration: 38s;
  animation-delay: -25s;
}
.mcMountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 122px;
  height: 210px;
  overflow: hidden;
}
.mcMountains span {
  position: absolute;
  bottom: -38px;
  width: 240px;
  height: 240px;
  transform: rotate(45deg);
  background: #416a69;
  box-shadow: inset 18px 18px 0 rgba(255, 255, 255, 0.16);
}
.mcMountains span:nth-child(1) {
  left: -52px;
}
.mcMountains span:nth-child(2) {
  left: 30%;
  width: 300px;
  height: 300px;
  background: #315a61;
}
.mcMountains span:nth-child(3) {
  right: -100px;
  width: 260px;
  height: 260px;
  background: var(--studio-surface, #264b59);
}
.mcGround {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 142px;
  background: #72513a;
}
.grassStrip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 32px;
  background: #4f973f;
  box-shadow: inset 0 -8px 0 #3d7c35;
}
.dirtBlocks {
  position: absolute;
  inset: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.dirtBlocks i {
  border: 1px solid var(--studio-line, rgba(59, 37, 25, 0.28));
  background: linear-gradient(135deg, #805a3e 0 62%, #68462f 62%);
}
.dirtBlocks i:nth-child(3n) {
  background: linear-gradient(45deg, #6c4932 0 40%, #865f42 40%);
}
.mcTree {
  position: absolute;
  left: 72px;
  bottom: 116px;
  width: 116px;
  height: 178px;
}
.mcTree b {
  position: absolute;
  left: 48px;
  bottom: 0;
  width: 28px;
  height: 92px;
  background: #6f472b;
  box-shadow: inset -8px 0 #59351f;
}
.mcTree span {
  position: absolute;
  width: 86px;
  height: 68px;
  background: #2e7c3f;
  box-shadow: inset -11px -10px #246534;
}
.mcTree span:nth-of-type(1) {
  left: 18px;
  top: 25px;
}
.mcTree span:nth-of-type(2) {
  left: 0;
  top: 65px;
}
.mcTree span:nth-of-type(3) {
  left: 43px;
  top: 65px;
}
.mcTorch {
  position: absolute;
  right: 66px;
  bottom: 119px;
  width: 12px;
  height: 60px;
  background: #71502c;
}
.mcTorch span {
  position: absolute;
  left: -8px;
  top: -20px;
  width: 28px;
  height: 28px;
  background: #ffce4d;
  box-shadow:
    0 0 24px #ffb73b,
    0 0 54px rgba(255, 137, 48, 0.65);
  animation: torchFlicker 0.7s steps(2) infinite;
}
.mcTorch span:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  left: 8px;
  top: 8px;
  background: #fff3a5;
}
.sceneCopy {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 28px;
  z-index: 3;
  color: var(--studio-ink, #fff);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.58);
  display: grid;
  gap: 6px;
}
.sceneCopy span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.7px;
  color: var(--studio-accent, #bffdf8);
}
.sceneCopy b {
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: -1px;
}
.sceneCopy small {
  font-size: 11px;
  max-width: 370px;
  line-height: 1.45;
  color: var(--studio-ink, rgba(255, 255, 255, 0.78));
}
.loginCard {
  width: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--studio-surface, rgba(18, 26, 47, 0.98)),
    var(--studio-surface, rgba(9, 15, 29, 0.99))
  );
  box-shadow: none;
}
.loginCard:before {
  opacity: 0.08;
}
.loginBrand {
  align-items: flex-start;
  margin-bottom: 28px;
}
.loginLogo {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
}
.loginEyebrow {
  font-size: 9px;
  color: var(--cyan);
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  margin: 2px 0 7px;
}
.loginTitle {
  font-size: 25px;
  line-height: 1.05;
}
.loginSub {
  font-size: 12px;
}
.loginForm {
  gap: 11px;
}
.loginForm label {
  font-size: 11px;
  font-weight: 700;
  color: var(--studio-ink, #cbd6e9);
}
.loginInputWrap {
  position: relative;
}
.loginInputWrap > span {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: var(--cyan);
  font-size: 10px;
}
.loginKey {
  padding: 13px 13px 13px 34px;
  min-height: 46px;
}
.loginSubmit {
  min-height: 45px;
  font-weight: 760;
  justify-content: space-between;
  padding: 0 16px;
}
.loginSubmit span {
  font-size: 18px;
}
.loginMessage {
  min-height: 17px;
  font-size: 11px;
}
.loginFoot {
  padding-top: 15px;
  border-top: 1px solid var(--line);
  line-height: 1.45;
}
@keyframes cloudDrift {
  from {
    translate: 0 0;
  }
  to {
    translate: 820px 0;
  }
}
@keyframes mcSkyCycle {
  0%,
  100% {
    background-color: #64bff1;
  }
  25% {
    filter: brightness(1.05);
  }
  48% {
    filter: brightness(0.88) saturate(1.16);
  }
  58%,
  78% {
    filter: brightness(0.34) saturate(0.9);
  }
  90% {
    filter: brightness(0.76);
  }
}
@keyframes mcGlowCycle {
  0%,
  34%,
  100% {
    opacity: 1;
  }
  48% {
    opacity: 0.8;
  }
  58%,
  78% {
    opacity: 0.24;
  }
  90% {
    opacity: 0.7;
  }
}
@keyframes mcSunPath {
  0% {
    transform: translate(0, 120px);
    opacity: 0.2;
  }
  18% {
    transform: translate(120px, 0);
    opacity: 1;
  }
  44% {
    transform: translate(360px, 65px);
    opacity: 1;
  }
  55%,
  100% {
    transform: translate(500px, 180px);
    opacity: 0;
  }
}
@keyframes mcMoonPath {
  0%,
  48% {
    transform: translate(500px, 180px);
    opacity: 0;
  }
  58% {
    transform: translate(360px, 30px);
    opacity: 1;
  }
  78% {
    transform: translate(120px, -5px);
    opacity: 1;
  }
  94%,
  100% {
    transform: translate(-60px, 140px);
    opacity: 0;
  }
}
@keyframes mcStarsCycle {
  0%,
  48%,
  92%,
  100% {
    opacity: 0;
  }
  60%,
  80% {
    opacity: 0.95;
  }
}
@keyframes torchFlicker {
  50% {
    transform: translateY(2px) scale(0.92);
    filter: brightness(1.2);
  }
}
html[data-theme="light"] body,
html[data-theme="light"] #app {
  background: linear-gradient(180deg, #f4f7fb, #e9eef6);
}
html[data-theme="light"] .topbar {
  background: rgba(248, 250, 253, 0.94);
}
html[data-theme="light"] .activity {
  background: #eef2f8;
}
html[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, #f8faff, #edf2f8);
}
html[data-theme="light"] .editor {
  background: #eef2f8;
}
html[data-theme="light"] .tabs {
  background: #edf2f8;
}
html[data-theme="light"] .tab.active {
  background: #fff;
}
html[data-theme="light"] .workToolbar {
  background: #f3f6fa;
}
html[data-theme="light"] .outliner,
html[data-theme="light"] .modelSidePanel {
  background: #f2f5fa;
}
html[data-theme="light"] .viewportWrap {
  background: radial-gradient(circle at 50% 40%, #f7fbff, #dfe7f1 72%);
}
html[data-theme="light"] .viewOverlay .pill {
  background: rgba(255, 255, 255, 0.82);
}
html[data-theme="light"] .viewHelp {
  color: rgba(36, 50, 74, 0.6);
  background: rgba(255, 255, 255, 0.62);
}
html[data-theme="light"] .inspector {
  background: linear-gradient(180deg, #f8faff, #edf2f8);
}
html[data-theme="light"] .timeline {
  background: #eef2f8;
}
html[data-theme="light"] .timelineTrack {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 59px,
      rgba(42, 62, 91, 0.08) 60px
    ),
    linear-gradient(#f7f9fd, #edf2f8);
}
html[data-theme="light"] .timeRuler {
  background: rgba(247, 249, 253, 0.95);
}
html[data-theme="light"] .field {
  background: rgba(255, 255, 255, 0.88);
}
html[data-theme="light"] .glass {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(244, 247, 251, 0.98)
  );
}
html[data-theme="light"] .modalHost {
  background: rgba(48, 64, 90, 0.34);
}
html[data-theme="light"] .modalFooter,
html[data-theme="light"] .adminDialog .modalFooter {
  background: #f3f6fa;
}
html[data-theme="light"] .adminDialog > .modalHeader {
  background: linear-gradient(90deg, #f8faff, #eef3f8);
}
html[data-theme="light"] .adminNav {
  background: linear-gradient(180deg, #f2f6fb, #e9eff6);
}
html[data-theme="light"] .adminContent {
  background: #f7f9fc;
}
html[data-theme="light"] .adminContentHead {
  background: #f1f5f9;
}
html[data-theme="light"] .filePicker {
  background: rgba(8, 125, 137, 0.035);
}
html[data-theme="light"] .filePickerButton {
  color: #174450;
}
html[data-theme="light"] .modelPreviewBanner {
  background: rgba(255, 255, 255, 0.94);
}
html[data-theme="light"] .modelLoading,
html[data-theme="light"] .editorError {
  background:
    radial-gradient(
      500px 320px at 50% 45%,
      rgba(8, 125, 137, 0.08),
      transparent 68%
    ),
    #eef3f8;
}
html[data-theme="light"] .diffBox {
  background: #f4f7fb;
  color: #263750;
}

html[data-theme="light"] .buildLogBox {
  background:
    linear-gradient(180deg, rgba(8, 125, 137, 0.08), transparent 130px),
    #f4f7fb;
  color: #263750;
  border-color: rgba(8, 125, 137, 0.16);
}
html[data-theme="light"] .buildLogLine:hover {
  background: rgba(8, 125, 137, 0.055);
}
html[data-theme="light"] .buildLogStudio {
  color: #087d89;
  background: rgba(8, 125, 137, 0.065);
}
html[data-theme="light"] .buildLogStep,
html[data-theme="light"] .buildLogTask {
  color: #1f5e83;
}
html[data-theme="light"] .buildLogSuccess,
html[data-theme="light"] .buildLogArtifact {
  color: #16713a;
  background: rgba(36, 164, 87, 0.07);
}
html[data-theme="light"] .buildLogWarn {
  color: #8a5a00;
  background: rgba(217, 150, 0, 0.08);
}
html[data-theme="light"] .buildLogError {
  color: #a9273c;
  background: rgba(214, 47, 71, 0.08);
}
html[data-theme="light"] .buildLogCommand {
  color: #70449d;
}
html[data-theme="light"] .buildLogText {
  color: #52657d;
}
html[data-theme="light"] .toast {
  background: #fff;
}
html[data-theme="light"] *::-webkit-scrollbar-thumb {
  border-color: #eef2f8;
}
html[data-theme="light"] .loginCard {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(242, 246, 251, 0.99)
  );
}
html[data-theme="light"] .loginForm label {
  color: #4b5d77;
}
html[data-theme="light"] .sceneCopy {
  color: #fff;
}
@media (max-width: 860px) {
  .loginStage {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .minecraftScene {
    min-height: 230px;
  }
  .mcMountains {
    bottom: 78px;
    height: 135px;
  }
  .mcGround {
    height: 88px;
  }
  .grassStrip {
    height: 22px;
  }
  .dirtBlocks {
    top: 22px;
  }
  .mcTree {
    transform: scale(0.62);
    transform-origin: left bottom;
    bottom: 72px;
  }
  .mcTorch {
    bottom: 75px;
  }
  .sceneCopy {
    bottom: 18px;
  }
  .sceneCopy b {
    font-size: 24px;
  }
  .sceneCopy small {
    display: none;
  }
  .loginCard {
    padding: 28px;
  }
  .loginBrand {
    margin-bottom: 20px;
  }
}
@media (max-width: 760px) {
  .codeZoomControls {
    margin-left: auto;
  }
  .codeToolDivider {
    display: none;
  }
  .filePickerButton {
    width: 100%;
  }
  .filePickerName {
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .minecraftScene,
  .mcSkyGlow,
  .mcSun,
  .mcMoon,
  .mcStars,
  .mcCloud,
  .mcTorch span,
  .loginCard:before {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn,
  .toolBtn,
  .themeToggle span {
    transition: none !important;
  }
}

/* 2026 editor workspace refinements */
.topbar {
  gap: 8px;
  padding: 0 12px;
  min-width: 0;
}
.topbarBrandGroup,
.topbarProjectGroup,
.topbarToolGroup {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.topbarBrandGroup {
  padding-right: 10px;
  border-right: 1px solid var(--line);
}
.topbarProjectGroup {
  flex: 0 1 310px;
}
.topbarToolGroup {
  padding: 3px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.045));
  border-radius: 9px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.018));
}
.topbarActions {
  border-color: rgba(120, 244, 237, 0.1);
}
.topbar .btn {
  white-space: nowrap;
}
.topbar > .topbarBrandGroup,
.topbar > .topbarToolGroup,
.topbar > .btn,
.topbar > .toolMenu {
  flex-shrink: 0;
}
.topbarProjectGroup .customSelectButton {
  min-width: 0;
}
.topbarProjectGroup .customSelectValue {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.homeButton {
  flex: 0 0 auto;
}
.btn:disabled,
.toolBtn:disabled,
.toolMenuPanel button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: saturate(0.35);
}
.btn.icon.active,
#focusModeBtn.active {
  color: var(--cyan);
  border-color: rgba(120, 244, 237, 0.32);
  background: rgba(120, 244, 237, 0.1);
}

/* Explorer keeps its exact scroll position while folders are expanded. */
.tree {
  overflow: auto;
  scroll-behavior: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}
.treeInner {
  width: max-content;
  min-width: 100%;
  align-items: stretch;
}
.folderRow,
.treeRow {
  width: max-content;
  min-width: 100%;
  overflow: visible;
  box-sizing: border-box;
}
.folderName,
.treeName {
  overflow: visible;
  text-overflow: clip;
  min-width: max-content;
}
.folderCount,
.treeMeta,
.treePath {
  margin-left: 18px;
}
.tree::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.tree::-webkit-scrollbar-corner {
  background: var(--studio-surface, #080d18);
}

/* Compact category toolbar with fly-out sub systems. */
.workToolbar {
  overflow: visible;
  min-width: 0;
  gap: 6px;
  padding: 4px 8px;
  z-index: 30;
}
.toolGroup,
.modelTools,
.transformTools {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.compactTool {
  min-width: 50px;
  font-size: 10px;
}
.primaryTool {
  color: var(--studio-accent, #dffeff);
  border-color: rgba(120, 244, 237, 0.25);
  background: rgba(120, 244, 237, 0.08);
}
.toolMenu {
  position: relative;
  flex: 0 0 auto;
}
.toolMenuPanel {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 200;
  display: none;
  width: 285px;
  max-height: min(520px, calc(100vh - 130px));
  overflow: auto;
  padding: 7px;
  border: 1px solid rgba(120, 244, 237, 0.2);
  border-radius: 12px;
  background: var(--studio-surface, rgba(10, 16, 31, 0.98));
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(18px);
}
.toolMenu.open > .toolMenuPanel {
  display: grid;
}
.toolMenuPanel.alignRight {
  right: 0;
  left: auto;
}
.toolMenuPanel button {
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  gap: 1px 8px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.toolMenuPanel button:hover {
  background: rgba(120, 244, 237, 0.08);
}
.toolMenuPanel button > span {
  grid-row: 1 / 3;
  font-size: 18px;
  color: var(--cyan);
  text-align: center;
}
.toolMenuPanel button > b {
  font-size: 11px;
}
.toolMenuPanel button > small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}
.toolMenuPanel .dangerMenuItem:hover {
  background: rgba(255, 82, 111, 0.1);
}
.toolMenuPanel .dangerMenuItem > span,
.toolMenuPanel .dangerMenuItem > b {
  color: var(--studio-bad, #ff8ba0);
}
.toolMenuSeparator {
  height: 1px;
  margin: 5px 4px;
  background: var(--line);
}
.toolMenuField {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  color: var(--muted);
  font-size: 10px;
}

/* Model selection and transform feedback. */
.outRow.active {
  color: var(--studio-accent, #eaffff);
  background: linear-gradient(
    90deg,
    rgba(37, 200, 219, 0.28),
    rgba(183, 119, 255, 0.1)
  );
  box-shadow: inset 2px 0 0 var(--cyan);
}
.transformHud {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 8;
  display: flex;
  gap: 1px;
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid rgba(120, 244, 237, 0.2);
  border-radius: 9px;
  background: var(--studio-surface, rgba(4, 8, 16, 0.78));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  backdrop-filter: blur(10px);
}
.transformHud span {
  min-width: 62px;
  padding: 5px 8px;
  color: var(--studio-muted, #aab8ce);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0.45px;
  text-align: center;
  text-transform: uppercase;
}
.transformHud span + span {
  border-left: 1px solid var(--studio-line, rgba(255, 255, 255, 0.07));
}
#transformModeLabel {
  color: var(--cyan);
}
.modelSidePanel .panelTools .pill {
  min-width: 22px;
  text-align: center;
}

/* Insertion and export centres. */
.insertGrid,
.exportGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.insertGrid button,
.exportCard {
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 9px;
  align-items: center;
  min-height: 74px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
  text-align: left;
  text-decoration: none;
}
.insertGrid button:hover,
.exportCard:not(.disabled):hover {
  border-color: rgba(120, 244, 237, 0.36);
  background: rgba(120, 244, 237, 0.065);
  transform: translateY(-1px);
}
.insertGrid span,
.exportCard > span {
  grid-row: 1 / 3;
  color: var(--cyan);
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}
.insertGrid b,
.exportCard b {
  font-size: 12px;
}
.insertGrid small,
.exportCard small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
  text-overflow: ellipsis;
}
.exportCard.disabled {
  opacity: 0.45;
  cursor: default;
}
.projectSourceExport {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
}
.projectSourceExportHeading,
.projectExportActions,
.projectExportToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.projectSourceExportHeading h3,
.projectSourceExportHeading p,
.projectSourceExport > p {
  margin: 0;
}
.projectSourceExportHeading p,
.projectExportHelp,
.projectExportToggle small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.projectExportPresets,
.projectExportActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.projectExportPresets button[aria-pressed="true"] {
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 1px var(--cyan);
}
.projectExportActions a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  color: var(--text);
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}
.projectExportToggles {
  display: grid;
  gap: 8px;
}
.projectExportToggle {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.projectExportToggle > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.projectExportToggle b {
  font-size: 13px;
}
.projectExportToggle input[type="checkbox"] {
  appearance: none;
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg2);
  cursor: pointer;
}
.projectExportToggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
}
.projectExportToggle input[type="checkbox"]:checked {
  border-color: var(--cyan);
}
.projectExportToggle input[type="checkbox"]:checked::after {
  transform: translateX(16px);
  background: var(--cyan);
}
.projectExportToggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.projectExportWarning,
.projectExportEstimate {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.projectExportWarning.filtered {
  border-color: var(--cyan);
}
.templatePreview {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: var(--studio-wash, rgba(0, 0, 0, 0.14));
  font-size: 10px;
  line-height: 1.5;
}

/* Blockbench-inspired animation timeline. */
.timeline {
  grid-template-rows: 45px minmax(0, 1fr);
  background: var(--studio-surface, #080d18);
}
.timelineHead {
  min-width: 0;
  gap: 7px;
  padding: 5px 8px;
  overflow-x: auto;
  overflow-y: visible;
  background: linear-gradient(180deg, var(--studio-surface, #0e1525), var(--studio-surface, #0a101c));
  scrollbar-width: thin;
}
.timelineIdentity {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-right: 8px;
  border-right: 1px solid var(--line);
}
.timelineIdentity > b {
  color: var(--studio-ink, #dce8f7);
  font-size: 10px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.playbackBar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--studio-wash, rgba(0, 0, 0, 0.14));
}
.timelineIcon,
.timelinePlay {
  display: grid;
  place-items: center;
  height: 27px;
  min-width: 29px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  color: var(--studio-muted, #8e9bb0);
  background: transparent;
  font-size: 9px;
}
.timelineIcon:hover,
.timelinePlay:hover,
.timelinePlay.active {
  color: var(--studio-accent, #efffff);
  background: rgba(120, 244, 237, 0.1);
}
.timelinePlay {
  min-width: 34px;
  color: var(--cyan);
  font-size: 12px;
}
.timelineTime {
  min-width: 112px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--studio-ink, #c8d4e8);
  background: var(--studio-wash, rgba(0, 0, 0, 0.12));
  font-size: 10px;
  text-align: center;
}
.timelineField.compact input,
.timelineField.compact select {
  width: 58px;
}
.timelineField.compact select {
  width: auto;
  min-width: 70px;
  height: 28px;
  padding: 0 6px;
  font-size: 10px;
}
.timelineZoom {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 9px;
}
.timelineZoom input {
  width: 76px;
  accent-color: var(--cyan);
}
.timelineBody {
  grid-template-columns: var(--animation-sidebar) minmax(0, 1fr);
  min-width: 0;
  background: var(--studio-surface, #080d18);
}
.animationSidebar {
  display: grid;
  grid-template-rows: 30px minmax(0, 1fr);
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--studio-surface, #0a101d);
}
.animationSidebarHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  color: var(--studio-muted, #8d9ab1);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}
.animationSidebarHead button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 5px;
  color: var(--cyan);
  background: transparent;
}
.animationSidebarHead button:hover {
  background: rgba(120, 244, 237, 0.1);
}
.animationSidebar .animList {
  min-height: 0;
  border-right: 0;
}
.timelineTrackScroller {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--studio-surface, #080d18);
}
.timelineTrack {
  min-width: 100%;
  min-height: 100%;
  overflow: visible;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 21px,
      var(--studio-wash, rgba(255, 255, 255, 0.035)) 21px,
      var(--studio-wash, rgba(255, 255, 255, 0.035)) 22px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 59px,
      var(--studio-wash, rgba(255, 255, 255, 0.04)) 59px,
      var(--studio-wash, rgba(255, 255, 255, 0.04)) 60px
    ),
    linear-gradient(var(--studio-surface, #0a101d), var(--studio-surface, #080d18));
}
.timeRuler {
  height: 26px;
  overflow: visible;
  background: var(--studio-surface, rgba(10, 16, 29, 0.97));
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}
.timeTick {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  color: var(--studio-muted, #6f7c93);
  font-size: 8px;
  pointer-events: none;
}
.timeTick i {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 6px;
  background: #4d596d;
}
.timeTick b {
  position: relative;
  top: 5px;
  font-weight: 550;
}
.timelineTrack .trackLabel {
  left: 8px;
  z-index: 1;
  max-width: 165px;
  height: 19px;
  padding: 3px 7px;
  overflow: hidden;
  border-radius: 5px;
  color: var(--studio-muted, #8190a8);
  background: var(--studio-wash, rgba(4, 8, 15, 0.66));
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.keyframe {
  z-index: 5;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border-color: #ead9ff;
  background: #b777ff;
  box-shadow: 0 0 7px rgba(183, 119, 255, 0.42);
  cursor: pointer;
}
.keyframe.smooth {
  border-radius: 50%;
  transform: none;
  background: #78f4ed;
  border-color: #e5ffff;
}
.keyframe.step {
  transform: none;
  border-radius: 1px;
  background: #ffc857;
  border-color: #fff0ba;
}
.keyframe.event {
  width: 11px;
  height: 11px;
  margin-left: -5px;
  border-radius: 3px 50% 50% 50%;
  background: #f15dde;
  border-color: #ffd1f4;
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(241, 93, 222, 0.42);
}
.keyframe.event:hover {
  transform: rotate(45deg) scale(1.15);
}
.playhead {
  z-index: 7;
  pointer-events: none;
}
.timelineMenu .toolMenuPanel {
  top: auto;
  bottom: calc(100% + 7px);
}

.backupRow {
  grid-template-columns: minmax(190px, 1fr) auto auto;
}
.backupRow .btn {
  white-space: nowrap;
}
.btn.disabled,
.btn.disabled:hover {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.35);
}

/* Destructive project controls. */
.projectAdminActions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.projectAdminActions .btn {
  flex: 1;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}
.dangerNotice {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
  padding: 11px;
  border: 1px solid rgba(255, 82, 111, 0.32);
  border-radius: 10px;
  background: rgba(255, 82, 111, 0.07);
}
.dangerNotice b {
  color: var(--studio-bad, #ff9bad);
  font-size: 12px;
}
.dangerNotice span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.deleteProjectSummary {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 4px 10px;
  margin-bottom: 12px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--studio-wash, rgba(0, 0, 0, 0.12));
}
.deleteProjectSummary span {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.deleteProjectSummary b {
  font-size: 12px;
}
.deleteProjectSummary code {
  color: var(--studio-muted, #8492aa);
  font-size: 9px;
}
.deleteCodeField {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
}
.deleteCodeField input {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 15px;
  font-weight: 800;
}

/* Distraction-free full view. */
.focusExit,
.workspaceRestore {
  position: fixed;
  right: 12px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid rgba(120, 244, 237, 0.28);
  border-radius: 9px;
  color: var(--studio-accent, #dffffd);
  background: var(--studio-surface, rgba(5, 10, 18, 0.78));
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}
.focusExit {
  top: 12px;
}
.workspaceRestore {
  top: calc(var(--top) + 12px);
}
#app.focusMode #focusExitBtn {
  display: inline-flex !important;
}
#app.focusMode {
  grid-template-rows: 1fr var(--status);
}
#app.focusMode .topbar,
#app.focusMode .activity,
#app.focusMode .sidebar,
#app.focusMode .inspector,
#app.focusMode .ilProblemsPanel,
#app.focusMode .timeline,
#app.focusMode .workToolbar,
#app.focusMode .securityBanner {
  display: none !important;
}
#app.focusMode .mainGrid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
#app.focusMode .editor {
  grid-column: 1;
  grid-row: 1;
  grid-template-rows: 36px minmax(0, 1fr);
}
#app.focusMode .editorBody,
#app.focusMode .workbench,
#app.focusMode #contentHost,
#app.focusMode .modelArea,
#app.focusMode .viewportWrap {
  min-height: 0;
  height: 100%;
}
#app.focusMode .workbench {
  grid-template-rows: minmax(0, 1fr);
}
#app.focusMode .modelArea {
  grid-template-columns: minmax(0, 1fr);
}
#app.focusMode .modelArea > .outliner,
#app.focusMode .modelArea > .modelSidePanel,
#app.focusMode .viewHelp {
  display: none;
}

html[data-theme="light"] .toolMenuPanel {
  border-color: rgba(8, 125, 137, 0.2);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 55px rgba(38, 55, 78, 0.18);
}
html[data-theme="light"] .transformHud,
html[data-theme="light"] .focusExit,
html[data-theme="light"] .workspaceRestore {
  color: #26364d;
  background: rgba(248, 251, 255, 0.88);
}
html[data-theme="light"] .timeline,
html[data-theme="light"] .timelineBody,
html[data-theme="light"] .timelineTrackScroller,
html[data-theme="light"] .timelineTrack {
  background-color: #eef2f8;
}

@media (max-width: 1180px) {
  .brandText span,
  .hideMedium {
    display: none !important;
  }
  .brandMini {
    min-width: auto;
  }
  .projectPicker {
    min-width: 160px;
  }
  .timelineIdentity > b,
  .timelineZoom {
    display: none;
  }
}
@media (max-width: 900px) {
  .topbarBrandGroup .brandMini {
    display: none;
  }
  .topbarBrandGroup {
    padding-right: 6px;
  }
  .topbarProjectGroup {
    flex: 1 1 180px;
  }
  .hideSmall {
    display: none;
  }
  .insertGrid,
  .exportGrid {
    grid-template-columns: 1fr;
  }
}


.explorerContextMenu {
  position: fixed;
  z-index: 140;
  min-width: 178px;
  padding: 5px;
  border: 1px solid rgba(120, 244, 237, 0.18);
  border-radius: 10px;
  background: var(--studio-surface, rgba(8, 12, 22, 0.96));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}
.explorerContextMenu button {
  width: 100%;
  height: 30px;
  padding: 0 9px;
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 7px;
  color: var(--text);
  background: transparent;
  font-size: 11px;
  text-align: left;
}
.explorerContextMenu button:hover:not(:disabled) {
  background: rgba(120, 244, 237, 0.1);
  color: var(--studio-accent, #f7ffff);
}
.explorerContextMenu button span {
  color: var(--cyan);
  text-align: center;
}
.explorerContextMenu button b {
  font-weight: 650;
}
.explorerContextMenu button.dangerMenuItem span,
.explorerContextMenu button.dangerMenuItem:hover:not(:disabled) {
  color: var(--studio-bad, #ff9bad);
}
.explorerContextMenu button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Explorer directory insertion and upload controls. */
.folderAddBtn {
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  opacity: 0;
  transform: translateX(3px);
  transition: opacity 0.14s ease, transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.folderRow:hover .folderAddBtn,
.folderRow:focus-within .folderAddBtn,
.folderAddBtn:focus-visible {
  opacity: 1;
  transform: translateX(0);
}
.folderAddBtn:hover {
  color: var(--cyan);
  border-color: rgba(120, 244, 237, 0.34);
  background: rgba(120, 244, 237, 0.1);
}
.folderRow.dropTarget {
  outline: 1px solid rgba(120, 244, 237, 0.72);
  outline-offset: -1px;
  background: rgba(120, 244, 237, 0.12);
}
.directoryTarget {
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--cyan);
  background: var(--studio-wash, rgba(0, 0, 0, 0.18));
  overflow-wrap: anywhere;
}
.folderDropZone {
  min-height: 176px;
  padding: 24px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  border: 1px dashed rgba(120, 244, 237, 0.42);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(37, 200, 219, 0.07), rgba(183, 119, 255, 0.06));
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.folderDropZone > span {
  color: var(--muted);
  font-size: 12px;
}
.folderDropZone.dragging {
  border-color: var(--cyan);
  background: rgba(120, 244, 237, 0.14);
  transform: scale(1.006);
}
.folderDropActions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.directoryInsertGrid {
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.securityFinding.resolvedFinding {
  border-color: rgba(88, 230, 169, 0.22);
  background: rgba(88, 230, 169, 0.035);
}
@media (max-width: 700px) {
  .folderAddBtn {
    opacity: 1;
    transform: none;
  }
  .directoryInsertGrid {
    grid-template-columns: 1fr;
  }
}

/* Interactive Library documentation shortcut and clearer security findings */
.documentationShortcut {
  width: 100%;
  min-width: 100%;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: 0 0 7px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 211, 106, 0.55);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 211, 106, 0.22), rgba(255, 138, 87, 0.11));
  color: var(--studio-warn, #fff3c6);
  box-shadow: 0 8px 22px rgba(255, 176, 66, 0.08);
  text-align: left;
  cursor: pointer;
}
.documentationShortcut:hover,
.documentationShortcut.active {
  border-color: rgba(255, 224, 132, 0.86);
  background: linear-gradient(135deg, rgba(255, 211, 106, 0.34), rgba(255, 138, 87, 0.17));
  color: var(--studio-ink, #fff);
}
.documentationIcon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 211, 106, 0.24);
  color: var(--studio-warn, #ffd36a);
  font-size: 13px;
}
.documentationCopy {
  min-width: 0;
}
.documentationCopy b,
.documentationCopy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.documentationCopy b {
  font-size: 12px;
  line-height: 1.2;
}
.documentationCopy small {
  margin-top: 2px;
  color: var(--studio-warn, #ffe9ad);
  font-size: 9px;
  line-height: 1.25;
}
.documentationArrow {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--studio-wash, rgba(8, 12, 19, 0.34));
  color: var(--studio-warn, #fff4ca);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.documentationFrame {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 190px);
  border: 0;
  border-radius: 0;
  background: var(--studio-surface, #080c13);
}
.securityFinding {
  margin: 10px;
  padding: 12px;
  border: 1px solid rgba(120, 151, 190, 0.2);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--studio-surface, rgba(17, 26, 40, 0.92)), var(--studio-surface, rgba(10, 15, 24, 0.94)));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
.securityFinding:last-child {
  border-bottom: 1px solid rgba(120, 151, 190, 0.2);
}
.securityFindingHead {
  justify-content: space-between;
  gap: 12px;
}
.securityFindingTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.securityFindingTitle b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--studio-accent, #f2f7ff);
  font-size: 13px;
}
.securityFindingWhen {
  flex: 0 0 auto;
  color: var(--studio-muted, #7f8da6);
  font-size: 10px;
}
.findingMetaGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}
.findingMetaGrid div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.055));
  border-radius: 8px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.028));
}
.findingMetaGrid span,
.securityFindingDetail span {
  display: block;
  color: var(--studio-muted, #77869f);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.findingMetaGrid b {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--studio-ink, #dbe7f7);
  font-size: 11px;
}
.securityFindingPath {
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--studio-surface, rgba(7, 11, 18, 0.72));
  color: var(--studio-muted, #aebbd0);
  font-size: 10px;
}
.securityFindingDetail {
  padding: 9px 10px;
  border: 1px solid rgba(120, 244, 237, 0.11);
  border-radius: 9px;
  background: rgba(120, 244, 237, 0.035);
}
.securityFindingDetail p {
  margin: 5px 0 0;
  color: var(--studio-ink, #d1dbea);
  font-size: 12px;
  line-height: 1.55;
}
.findingPills,
.findingActions {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  flex-wrap: wrap;
}
.findingEvidence {
  margin-top: 9px;
}
.findingEvidence summary {
  cursor: pointer;
  color: var(--studio-muted, #9fb0c5);
  font-size: 11px;
}
.findingEvidence pre {
  max-height: 120px;
  margin: 7px 0 0;
  padding: 9px 10px;
  overflow: auto;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.07));
  border-radius: 9px;
  background: var(--studio-surface, #050911);
  color: var(--studio-accent, #d8e8ff);
  font: 10px/1.45 "Cascadia Code", monospace;
  white-space: pre-wrap;
}
.findingReviewNote {
  display: grid;
  gap: 3px;
  margin-top: 9px;
  padding: 8px 9px;
  border-radius: 8px;
  background: rgba(88, 230, 169, 0.06);
  color: var(--studio-good, #caebdf);
  font-size: 11px;
}
@media (max-width: 900px) {
  .findingMetaGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .securityFindingHead {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Resizable dock panels and magnetic snap frames */
.resizeHandle {
  position: absolute;
  z-index: 35;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.resizeHandle:hover,
.panelResizing .resizeHandle {
  opacity: 1;
  background: rgba(120, 244, 237, 0.2);
  box-shadow: 0 0 0 1px rgba(120, 244, 237, 0.32), 0 0 16px rgba(120, 244, 237, 0.16);
}
.sidebarResizeHandle {
  top: 0;
  bottom: var(--timeline);
  left: calc(var(--activity) + var(--sidebar) - 4px);
  width: 8px;
  cursor: col-resize;
}
.inspectorResizeHandle {
  top: 0;
  bottom: 0;
  right: calc(var(--inspector) - 4px);
  width: 8px;
  cursor: col-resize;
}
.problemsResizeHandle {
  top: 0;
  bottom: 0;
  right: calc(var(--problems) - 4px);
  width: 8px;
  cursor: col-resize;
}
.timelineResizeHandle {
  left: calc(var(--activity) + var(--sidebar));
  right: max(var(--inspector), var(--problems));
  bottom: calc(var(--timeline) - 4px);
  height: 8px;
  cursor: row-resize;
}
.timelineBody {
  position: relative;
}
.animationSidebarResizeHandle {
  top: 0;
  bottom: 0;
  left: calc(var(--animation-sidebar) - 4px);
  width: 8px;
  cursor: col-resize;
}
.modelArea {
  --local-model-outliner: var(--model-outliner);
  --local-model-side: var(--model-side);
}
.modelOutlinerResizeHandle {
  top: 0;
  bottom: 0;
  left: calc(var(--model-outliner) - 4px);
  width: 8px;
  cursor: col-resize;
}
.modelSideResizeHandle {
  top: 0;
  bottom: 0;
  right: calc(var(--model-side) - 4px);
  width: 8px;
  cursor: col-resize;
}
.panelResizing {
  cursor: col-resize;
  user-select: none;
}
.panelResizing [data-resize-panel="timeline"] {
  cursor: row-resize;
}
.snapOverlay {
  pointer-events: none;
  position: fixed;
  inset: var(--top) 0 var(--status) 0;
  z-index: 90;
}
.snapOverlay.hidden {
  display: none;
}
.snapFrame {
  position: absolute;
  border: 1px dashed rgba(255, 211, 106, 0.55);
  background: rgba(255, 211, 106, 0.06);
  color: var(--studio-warn, #ffedae);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: grid;
  place-items: center;
}
.snapFrameLeft {
  left: var(--activity);
  top: 0;
  width: var(--sidebar);
  bottom: var(--timeline);
}
.snapFrameRight {
  right: 0;
  top: 0;
  width: var(--inspector);
  bottom: 0;
}
.snapFrameBottom {
  left: calc(var(--activity) + var(--sidebar));
  right: var(--inspector);
  bottom: 0;
  height: var(--timeline);
}
.snapReadout {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  padding: 6px 10px;
  border: 1px solid rgba(255, 211, 106, 0.48);
  border-radius: 999px;
  background: var(--studio-surface, rgba(9, 12, 20, 0.9));
  color: var(--studio-warn, #ffe9ad);
  font-size: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.documentationShortcut {
  min-height: 42px;
  max-width: 100%;
}
.documentationCopy small,
.documentationArrow {
  display: none;
}
.documentationCopy b {
  font-size: 13px;
}
/* Better nested explorer/model scrolling and stable model hierarchy layout. */
.tree,
.outlinerList,
.modelAnimationList {
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}
.tree {
  overflow: auto scroll;
}
.treeInner {
  min-width: max(100%, max-content);
  padding-right: 12px;
}
.outliner {
  min-height: 0;
}
.outlinerList {
  min-height: 0;
  overflow: auto;
  overflow-y: scroll;
  padding-right: 10px;
}
.outlinerList .outRow {
  min-width: max-content;
  width: 100%;
}
.outlinerList .outName {
  max-width: none;
}
.outChildren.hidden {
  display: none;
}
.viewportWrap {
  contain: layout paint;
}
#modelViewport {
  touch-action: none;
}
/* Top-level panel visibility controls for a cleaner workspace. */
.panelToggleMenu {
  z-index: 220;
}
.panelToggleMenu .btn.active {
  color: var(--cyan);
  border-color: rgba(120, 244, 237, 0.34);
  background: rgba(120, 244, 237, 0.1);
}
.panelTogglePanel {
  width: 310px;
}
.panelTogglePanel button.inactive {
  opacity: 0.62;
}
.panelTogglePanel button.inactive:hover {
  opacity: 0.92;
}
.panelTogglePanel .panelToggleMark {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(120, 244, 237, 0.24);
  border-radius: 7px;
  color: var(--cyan);
  background: rgba(120, 244, 237, 0.08);
  font-size: 12px;
}
.panelTogglePanel button.inactive .panelToggleMark {
  border-color: var(--studio-line, rgba(255, 255, 255, 0.08));
  color: var(--muted);
  background: var(--studio-wash, rgba(255, 255, 255, 0.035));
}
#app.panelActivityHidden {
  --activity: 0px;
}
#app.panelSidebarHidden {
  --sidebar: 0px;
}
#app.panelInspectorHidden {
  --inspector: 0px;
}
#app.panelTimelineHidden {
  --timeline: 0px;
}
#app.panelModelOutlinerHidden {
  --model-outliner: 0px;
}
#app.panelModelSideHidden {
  --model-side: 0px;
}
#app.panelActivityHidden .activity,
#app.panelSidebarHidden .sidebar,
#app.panelInspectorHidden .inspector,
#app.panelTimelineHidden .timeline,
#app.panelModelOutlinerHidden .modelArea > .outliner,
#app.panelModelSideHidden .modelArea > .modelSidePanel,
#app.panelActivityHidden [data-resize-panel="activity"],
#app.panelSidebarHidden [data-resize-panel="sidebar"],
#app.panelInspectorHidden [data-resize-panel="inspector"],
#app.panelTimelineHidden [data-resize-panel="timeline"],
#app.panelTimelineHidden [data-resize-panel="animation-sidebar"],
#app.panelModelOutlinerHidden [data-resize-panel="model-outliner"],
#app.panelModelSideHidden [data-resize-panel="model-side"] {
  display: none !important;
}
#app.panelTimelineHidden .mainGrid {
  grid-template-rows: minmax(0, 1fr) 0;
}
#app.panelTimelineHidden .editor {
  grid-row: 1 / 3;
}
#app.panelModelOutlinerHidden .modelArea {
  grid-template-columns: 0 minmax(0, 1fr) var(--model-side);
}
#app.panelModelSideHidden .modelArea {
  grid-template-columns: var(--model-outliner) minmax(0, 1fr) 0;
}
#app.panelModelOutlinerHidden.panelModelSideHidden .modelArea {
  grid-template-columns: 0 minmax(0, 1fr) 0;
}
#app.panelSidebarHidden .snapFrameLeft,
#app.panelTimelineHidden .snapFrameBottom,
#app.panelInspectorHidden .snapFrameRight {
  display: none;
}

/* Panels menu now lives next to the model viewport actions, above the Minecraft view. */
.workspaceActionTools {
  margin-left: auto;
  flex: 0 0 auto !important;
  justify-content: flex-end;
  padding-left: 6px;
  border-left: 1px solid var(--studio-line, rgba(255, 255, 255, 0.055));
}
.modelViewportActions {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.modelViewportPanelMenu .toolMenuPanel {
  min-width: 310px;
}
.panelToggleButton {
  min-width: 92px;
  color: var(--studio-accent, #dffeff);
  border-color: rgba(120, 244, 237, 0.2);
  background: rgba(120, 244, 237, 0.065);
}
.panelToggleButton b,
.panelToggleButton em {
  font: inherit;
  font-style: normal;
  font-weight: 750;
}
.modelViewportPanelMenu > .toolBtn.active,
.panelToggleButton.active {
  color: var(--cyan);
  border-color: rgba(120, 244, 237, 0.34);
  background: rgba(120, 244, 237, 0.1);
}
@media (max-width: 1180px) {
  .workToolbar {
    gap: 4px;
    padding-inline: 5px;
  }
  .toolBtn {
    padding-inline: 7px;
  }
  .codeTools .toolBtn {
    padding-inline: 6px;
  }
  .workspaceActionTools {
    padding-left: 4px;
  }
  #minecraftPreviewBtn {
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 980px) {
  .modelViewportActions #securityScanBtn,
  .modelViewportActions #minecraftPreviewBtn {
    display: none;
  }
}

.buildOutputHeader {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
}
.buildOutputHeader .btn {
  font-weight: 700;
}
.buildLogBox {
  max-height: min(54vh, 520px);
  overflow: auto;
  border: 1px solid rgba(120, 244, 237, 0.16);
  border-radius: 12px;
  padding: 10px 0;
  background:
    linear-gradient(180deg, rgba(120, 244, 237, 0.045), transparent 120px),
    var(--studio-surface, #050914);
  color: var(--studio-accent, #cfe0fa);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  font:
    11px/1.5 "Cascadia Code",
    "JetBrains Mono",
    monospace;
}
.buildLogLine {
  min-height: 17px;
  padding: 1px 12px;
  border-left: 3px solid transparent;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.buildLogLine:hover {
  background: var(--studio-wash, rgba(255, 255, 255, 0.035));
}
.buildLogBlank {
  min-height: 8px;
  opacity: 0.55;
}
.buildLogStudio {
  color: var(--studio-accent, #83f4ed);
  border-left-color: rgba(120, 244, 237, 0.5);
  background: rgba(120, 244, 237, 0.045);
  font-weight: 700;
}
.buildLogStep {
  color: var(--studio-accent, #bfe8ff);
  border-left-color: rgba(93, 194, 255, 0.38);
}
.buildLogSuccess,
.buildLogArtifact {
  color: var(--studio-good, #8ef7b0);
  border-left-color: rgba(83, 255, 148, 0.5);
  background: rgba(83, 255, 148, 0.045);
}
.buildLogWarn {
  color: var(--studio-warn, #ffd56f);
  border-left-color: rgba(255, 199, 89, 0.5);
  background: rgba(255, 199, 89, 0.045);
}
.buildLogError {
  color: var(--studio-bad, #ff9aa8);
  border-left-color: rgba(255, 91, 116, 0.58);
  background: rgba(255, 91, 116, 0.07);
  font-weight: 700;
}
.buildLogCommand {
  color: var(--studio-violet, #f0d8ff);
  border-left-color: rgba(183, 119, 255, 0.42);
}
.buildLogTask {
  color: var(--studio-accent, #d7e6ff);
}
.buildLogText {
  color: var(--studio-muted, #aebbd0);
}

.buildActionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.buildConsoleHint {
  margin-top: 10px;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(120, 244, 237, 0.16);
  border-radius: 12px;
  background: rgba(120, 244, 237, 0.055);
}
.buildConsoleHint b {
  font-size: 12px;
}
.buildConsoleHint span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.rankPermissionCard {
  border: 1px solid rgba(120, 244, 237, 0.18);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(120, 244, 237, 0.055), rgba(183, 119, 255, 0.045));
}
.rankPermissionHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.rankPermissionHead b {
  display: block;
  font-size: 14px;
  margin-top: 2px;
}
.rankPermissionCard p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.rankPermissionColumns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.rankPermissionColumns > div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--studio-wash, rgba(0, 0, 0, 0.12));
}
.rankPermissionColumns b,
.rankPermissionRaw b {
  display: block;
  font-size: 11px;
  margin-bottom: 6px;
}
.rankPermissionList {
  margin: 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.rankPermissionList.can li::marker {
  color: var(--good);
}
.rankPermissionList.cannot li::marker {
  color: var(--studio-bad, #ff6b83);
}
.rankPermissionRaw {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.rankPermissionRaw span,
.keyPermissionFlags {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  word-break: break-word;
}
.keyPermissionSummary {
  color: var(--text);
  font-size: 10px;
  line-height: 1.45;
  margin-top: 5px;
}
.accessKeyRow {
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: start;
}
.readOnlyBanner {
  border: 1px solid rgba(255, 199, 89, 0.28);
  border-radius: 10px;
  margin: 10px 10px 0;
  padding: 8px 10px;
  background: rgba(255, 199, 89, 0.08);
  color: var(--studio-warn, #ffe6a1);
  font-size: 11px;
  line-height: 1.45;
}
.permissionReadOnly #saveBtn {
  border-color: rgba(255, 199, 89, 0.25);
}
@media (max-width: 760px) {
  .rankPermissionColumns {
    grid-template-columns: 1fr;
  }
  .accessKeyRow {
    grid-template-columns: 1fr;
  }
}
.viewportCompass {
  position: absolute;
  right: 14px;
  top: 54px;
  width: 132px;
  padding: 10px;
  border: 1px solid rgba(120, 244, 237, 0.28);
  border-radius: 18px;
  background: var(--studio-surface, rgba(8, 12, 22, 0.72));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
  z-index: 8;
}
.compassNeedle {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.16));
  border-radius: 999px;
  background: radial-gradient(circle, rgba(120, 244, 237, 0.18), var(--studio-wash, rgba(255, 255, 255, 0.04)));
}
.compassNeedle span {
  position: absolute;
  font-size: 10px;
  font-weight: 800;
  color: var(--studio-accent, rgba(232, 249, 255, 0.82));
}
.compassNeedle span:nth-child(1) { left: 50%; top: 5px; transform: translateX(-50%); color: var(--studio-bad, #ff7b8d); }
.compassNeedle span:nth-child(2) { right: 7px; top: 50%; transform: translateY(-50%); }
.compassNeedle span:nth-child(3) { left: 50%; bottom: 5px; transform: translateX(-50%); }
.compassNeedle span:nth-child(4) { left: 7px; top: 50%; transform: translateY(-50%); }
.compassNeedle b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 28px;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%);
  border-radius: 999px;
  background: linear-gradient(#ff7b8d, #78f4ed);
  box-shadow: 0 0 14px rgba(120, 244, 237, 0.75);
}
.compassButtons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.compassButtons button {
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.07));
  color: var(--studio-accent, rgba(235, 251, 255, 0.86));
  font-size: 10px;
  font-weight: 750;
  padding: 5px 4px;
  cursor: pointer;
}
.compassButtons button:hover {
  border-color: rgba(120, 244, 237, 0.6);
  background: rgba(120, 244, 237, 0.16);
}
.objectPaintPanel {
  position: absolute;
  left: 16px;
  top: 58px;
  width: 246px;
  padding: 12px;
  border: 1px solid rgba(183, 119, 255, 0.34);
  border-radius: 18px;
  background: var(--studio-surface, rgba(9, 12, 24, 0.78));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(16px);
  z-index: 9;
}
.objectPaintPanel.hidden { display: none; }

.geometryEditPanel {
  position: absolute;
  left: 16px;
  top: 58px;
  width: 270px;
  padding: 12px;
  border: 1px solid rgba(120, 244, 237, 0.34);
  border-radius: 18px;
  background: var(--studio-surface, rgba(7, 14, 24, 0.82));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(16px);
  z-index: 10;
}
.geometryEditPanel.hidden { display: none; }
.geometryEditHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.geometryEditHead b {
  color: var(--studio-accent, #f7fcff);
  font-size: 12px;
}
.geometryEditHead button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 8px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.08));
  color: var(--studio-ink, rgba(255, 255, 255, 0.8));
  cursor: pointer;
}
.geometryEditPanel label {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 8px;
  margin: 7px 0;
  color: var(--studio-accent, rgba(226, 241, 255, 0.72));
  font-size: 11px;
  font-weight: 750;
}
.geometryEditPanel select,
.geometryEditPanel input.field {
  min-height: 30px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.08));
  color: var(--studio-accent, #f3fbff);
}
.geometrySelectionInfo {
  display: grid;
  gap: 4px;
  min-height: 40px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid rgba(120, 244, 237, 0.2);
  border-radius: 11px;
  background: rgba(120, 244, 237, 0.08);
  color: var(--studio-accent, rgba(234, 250, 255, 0.84));
  font-size: 10px;
  line-height: 1.35;
}
.geometrySelectionInfo span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.geometryNudgeGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 8px 0;
}
.geometryNudgeGrid button {
  min-height: 28px;
  border: 1px solid rgba(120, 244, 237, 0.18);
  border-radius: 8px;
  color: var(--text);
  background: rgba(120, 244, 237, 0.08);
  cursor: pointer;
}
.geometryNudgeGrid button:hover {
  border-color: rgba(120, 244, 237, 0.48);
  background: rgba(120, 244, 237, 0.16);
}
.objectPaintActions.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.geometryEditPanel small {
  display: block;
  color: var(--studio-accent, rgba(226, 241, 255, 0.62));
  font-size: 10px;
  line-height: 1.45;
}
html[data-theme="light"] .geometryEditPanel {
  background: rgba(248, 252, 255, 0.9);
  border-color: rgba(44, 95, 130, 0.18);
  color: #122033;
}
html[data-theme="light"] .geometryEditHead b,
html[data-theme="light"] .geometryEditPanel label,
html[data-theme="light"] .geometryEditPanel small,
html[data-theme="light"] .geometrySelectionInfo {
  color: #122033;
}
html[data-theme="light"] .geometrySelectionInfo {
  background: rgba(0, 158, 178, 0.08);
}
.objectPaintHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.objectPaintHead b {
  color: var(--studio-accent, #f7fcff);
  font-size: 12px;
}
.objectPaintHead button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 8px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.08));
  color: var(--studio-ink, rgba(255, 255, 255, 0.8));
  cursor: pointer;
}
.objectPaintPanel label {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 8px;
  margin: 7px 0;
  color: var(--studio-accent, rgba(226, 241, 255, 0.7));
  font-size: 11px;
  font-weight: 750;
}
.objectPaintPanel select,
.objectPaintPanel input[type="color"] {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.08));
  color: var(--studio-accent, #f3fbff);
}
.objectPaintToggle {
  grid-template-columns: 1fr auto !important;
  padding: 6px 8px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.09));
  border-radius: 10px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.05));
}
.objectPaintToggle input {
  accent-color: #78f4ed;
}
.objectPaintPalette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin: 10px 0;
}
.objectPaintPalette button {
  aspect-ratio: 1;
  border: 2px solid var(--studio-line, rgba(255, 255, 255, 0.16));
  border-radius: 9px;
  background: var(--swatch);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.objectPaintPalette button.active {
  border-color: #78f4ed;
  box-shadow: 0 0 0 2px rgba(120, 244, 237, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}
.objectPaintPanel small {
  display: block;
  color: var(--studio-accent, rgba(226, 241, 255, 0.62));
  font-size: 10px;
  line-height: 1.45;
}
.outlinerContextMenu {
  position: fixed;
  z-index: 10050;
  min-width: 190px;
  padding: 8px;
  border: 1px solid rgba(120, 244, 237, 0.24);
  border-radius: 14px;
  background: var(--studio-surface, rgba(9, 12, 24, 0.95));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
}
.outlinerContextMenu button {
  display: grid;
  width: 100%;
  gap: 2px;
  padding: 8px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--studio-accent, rgba(238, 250, 255, 0.92));
  text-align: left;
  cursor: pointer;
}
.outlinerContextMenu button:hover:not(:disabled) {
  background: rgba(120, 244, 237, 0.12);
}
.outlinerContextMenu button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.outlinerContextMenu small {
  color: rgba(226, 241, 255, 0.55);
  font-size: 10px;
}

.objectPaintFaceInfo {
  display: grid;
  gap: 3px;
  min-height: 38px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid rgba(120, 244, 237, 0.18);
  border-radius: 11px;
  background: rgba(120, 244, 237, 0.08);
  color: var(--studio-accent, rgba(234, 250, 255, 0.82));
  font-size: 10px;
  line-height: 1.35;
}
.objectPaintFaceInfo b {
  color: var(--studio-accent, #f7fcff);
  font-size: 11px;
}
.objectPaintFaceInfo span {
  color: var(--studio-accent, rgba(226, 241, 255, 0.64));
}
.objectPaintActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0 10px;
}
.objectPaintActions.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.asepriteHandoff .templatePreview {
  overflow-wrap: anywhere;
}
.nudgeGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.nudgeGrid button {
  min-height: 30px;
  border: 1px solid rgba(120, 244, 237, 0.18);
  border-radius: 8px;
  color: var(--text);
  background: rgba(120, 244, 237, 0.08);
  cursor: pointer;
}
.nudgeGrid button:hover {
  border-color: rgba(120, 244, 237, 0.48);
  background: rgba(120, 244, 237, 0.16);
}
.uvRow.active {
  background: rgba(120, 244, 237, 0.12);
  outline: 1px solid rgba(120, 244, 237, 0.32);
  outline-offset: -1px;
}
.outRow.current {
  box-shadow: inset 3px 0 0 rgba(120, 244, 237, 0.82);
}
html[data-theme="light"] .objectPaintFaceInfo {
  background: rgba(0, 158, 178, 0.08);
  color: #122033;
}
html[data-theme="light"] .objectPaintFaceInfo b,
html[data-theme="light"] .objectPaintFaceInfo span {
  color: #122033;
}
html[data-theme="light"] .viewportCompass,
html[data-theme="light"] .objectPaintPanel,
html[data-theme="light"] .outlinerContextMenu {
  background: rgba(248, 252, 255, 0.88);
  border-color: rgba(44, 95, 130, 0.18);
  color: #122033;
}
html[data-theme="light"] .compassButtons button,
html[data-theme="light"] .objectPaintHead button {
  background: rgba(28, 71, 104, 0.08);
  color: #122033;
}
html[data-theme="light"] .objectPaintHead b,
html[data-theme="light"] .objectPaintPanel label,
html[data-theme="light"] .objectPaintPanel small,
html[data-theme="light"] .compassNeedle span,
html[data-theme="light"] .outlinerContextMenu button,
html[data-theme="light"] .outlinerContextMenu small {
  color: #122033;
}
.rulerHud {
  position: absolute;
  left: 14px;
  bottom: 44px;
  z-index: 5;
  max-width: min(560px, calc(100% - 28px));
  padding: 7px 10px;
  border: 1px solid rgba(110, 231, 255, 0.35);
  border-radius: 10px;
  background: var(--studio-surface, rgba(5, 10, 20, 0.82));
  color: var(--studio-accent, #dffbff);
  font-size: 11px;
  line-height: 1.35;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.buttonGrid.tight {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.buttonGrid.tight button,
.precisionNudge button {
  min-height: 30px;
  border: 1px solid rgba(120, 244, 237, 0.2);
  border-radius: 9px;
  background: var(--studio-surface, rgba(13, 22, 38, 0.8));
  color: var(--text, var(--studio-accent, #eafcff));
  font-size: 11px;
  cursor: pointer;
}
.buttonGrid.tight button:hover,
.precisionNudge button:hover {
  border-color: rgba(110, 231, 255, 0.55);
  background: rgba(37, 200, 219, 0.15);
}
.toolMenuPanel button.active,
.toolBtn.active#pivotMarkersBtn,
.toolBtn.active#scaleGuideBtn,
.toolBtn.active#rulerBtn {
  border-color: rgba(110, 231, 255, 0.75);
  background: linear-gradient(135deg, rgba(37, 200, 219, 0.22), rgba(184, 119, 255, 0.16));
}
.kv .mono {
  font-size: 11px;
  overflow-wrap: anywhere;
}


.unionReport { display: grid; gap: 14px; }
.unionStats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.unionStats span { border: 1px solid var(--border); background: var(--panel-soft); border-radius: 14px; padding: 10px; display: grid; gap: 3px; }
.unionStats b { font-size: 1.25rem; color: var(--accent); }
.unionStats small { color: var(--muted); font-size: .74rem; }
.keyframe.particle {
  background: #79ffb8;
  border-radius: 50%;
  width: 11px;
  height: 11px;
  box-shadow: 0 0 12px rgba(121, 255, 184, 0.45);
}
.keyframe.light {
  background: #ffd36b;
  border-radius: 999px;
  width: 12px;
  height: 12px;
  box-shadow: 0 0 16px rgba(255, 211, 107, 0.55);
}
.keyframe.camera {
  background: #94a3ff;
  border-radius: 2px;
  width: 12px;
  height: 9px;
  box-shadow: 0 0 12px rgba(148, 163, 255, 0.48);
}
.keyframe.event {
  background: #b777ff;
  border-radius: 2px 8px 2px 8px;
  width: 10px;
  height: 10px;
}
.eventPreviewList {
  display: grid;
  gap: 8px;
}
.eventPreviewRow {
  display: grid;
  grid-template-columns: 72px 110px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.09));
  border-radius: 10px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.035));
}
.eventPreviewRow code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outRow.isHidden {
  opacity: 0.48;
  font-style: italic;
}
.outRow.isLocked .outName::after {
  content: " 🔒";
  font-size: 10px;
  opacity: 0.8;
}
.outFlag {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.12));
  background: var(--studio-wash, rgba(255, 255, 255, 0.055));
  color: var(--muted, var(--studio-muted, #9fb2c8));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.keybindGrid {
  display: grid;
  gap: 10px;
}
.keybindGrid label {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(130px, 170px) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.09));
  border-radius: 12px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.035));
}
.keybindInput {
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.doctorSummary {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(255, 214, 107, 0.26);
  border-radius: 14px;
  background: rgba(255, 214, 107, 0.075);
}
.doctorSummary.good {
  border-color: rgba(121, 255, 184, 0.24);
  background: rgba(121, 255, 184, 0.065);
}
.doctorSummary span {
  color: var(--muted, var(--studio-muted, #9fb2c8));
  font-size: 12px;
}
.doctorList {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  max-height: min(52vh, 520px);
  overflow: auto;
}
.doctorIssue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.1));
  background: var(--studio-wash, rgba(255, 255, 255, 0.04));
}
.doctorIssue.bad {
  border-color: rgba(255, 110, 168, 0.28);
  background: rgba(255, 110, 168, 0.07);
}
.doctorIssue.warn {
  border-color: rgba(255, 214, 107, 0.24);
  background: rgba(255, 214, 107, 0.06);
}
.doctorIssue small {
  color: var(--muted, var(--studio-muted, #9fb2c8));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Studio tidy pass: compact toolbar, topbar Panels menu and dark native controls. */
.topbarPanelMenu {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.topbarPanelMenu .panelToggleButton {
  min-width: 96px;
}
.topbarPanelMenu .toolMenuPanel {
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  min-width: 320px;
  z-index: 10020;
}
.studioShelf {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}
.compactTransform {
  padding: 2px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.055));
  border-radius: 10px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.022));
}
.studioShelf > .toolMenu > .toolBtn,
.studioShelf > .toolBtn,
.compactTransform .toolBtn {
  min-width: 0;
  padding-inline: 9px;
}
.precisionStepPanel,
.minecraftSizePanel {
  width: 270px;
  gap: 8px;
}
.minecraftSizePanel {
  width: 310px;
}
.precisionStepPanel label,
.minecraftSizePanel label {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.035));
}
.precisionStepPanel small,
.minecraftSizePanel small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  padding: 4px 6px;
}
.minecraftSizeButtons {
  margin-top: 8px;
}
.buttonGrid.twoCol {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.workspaceActionTools,
.modelViewportActions {
  display: none !important;
}
select,
.field:is(select),
.compactSelect,
.objectPaintPanel select,
.geometryEditPanel select {
  color: var(--text) !important;
  background-color: var(--studio-surface, rgba(7, 13, 26, 0.96)) !important;
  border-color: rgba(120, 244, 237, 0.18) !important;
  border-radius: 9px;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(120,244,237,.95) 50%), linear-gradient(135deg, rgba(120,244,237,.95) 50%, transparent 50%);
  background-position: calc(100% - 13px) 52%, calc(100% - 8px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
select option,
.field option,
.compactSelect option {
  background: var(--studio-surface, #0b1120) !important;
  color: var(--studio-accent, #e8f6ff) !important;
}
html[data-theme="light"] select,
html[data-theme="light"] .field:is(select),
html[data-theme="light"] .compactSelect {
  color: #132033 !important;
  background-color: #edf6fb !important;
}
html[data-theme="light"] select option,
html[data-theme="light"] .field option,
html[data-theme="light"] .compactSelect option {
  color: #132033 !important;
  background: #edf6fb !important;
}
.outRow.dropTarget,
.outlinerList.dropTarget {
  outline: 1px solid rgba(120, 244, 237, 0.85);
  outline-offset: -2px;
  background: rgba(120, 244, 237, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(120, 244, 237, 0.18), 0 0 18px rgba(120, 244, 237, 0.1);
}
.outlinerDragging .outRow {
  cursor: grabbing;
}
.doctorStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.doctorStats span {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.035));
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.doctorStats b {
  color: var(--text);
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
}
.doctorChecks {
  display: grid;
  gap: 6px;
  margin: 10px 0 12px;
  padding: 11px;
  border: 1px solid rgba(120, 244, 237, 0.14);
  border-radius: 14px;
  background: rgba(120, 244, 237, 0.045);
}
.doctorChecks b {
  color: var(--text);
  font-size: 12px;
}
.doctorChecks span {
  color: var(--muted);
  font-size: 11px;
}
.doctorEmpty {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid rgba(121, 255, 184, 0.18);
  border-radius: 14px;
  background: rgba(121, 255, 184, 0.05);
  text-align: center;
}
.doctorEmpty span {
  color: var(--muted);
  font-size: 12px;
}
.keybindGrid label {
  grid-template-columns: minmax(120px, 1fr) minmax(110px, 150px) auto auto;
}
.precisionToolSection .kv + .kv {
  margin-top: 6px;
}
@media (max-width: 1260px) {
  .studioShelf > .toolMenu > .toolBtn,
  .studioShelf > .toolBtn,
  .compactTransform .toolBtn {
    padding-inline: 7px;
    font-size: 11px;
  }
  .topbarPanelMenu .panelToggleButton b {
    display: none;
  }
  .topbarPanelMenu .panelToggleButton {
    min-width: 42px;
  }
}


/* Custom dropdowns: avoids the white native select popup in the modelling panels. */
.customSelect {
  position: relative;
  width: 100%;
  min-width: 0;
}
.nativeSelectHidden {
  position: absolute !important;
  inset: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.customSelectButton {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(120, 244, 237, 0.18);
  border-radius: 10px;
  background: var(--studio-surface, rgba(7, 13, 26, 0.96));
  color: var(--studio-accent, #e8f6ff);
  cursor: pointer;
  text-align: left;
}
.customSelectButton b {
  color: var(--studio-accent, rgba(120, 244, 237, 0.95));
  font-size: 10px;
}
.customSelectList {
  position: absolute;
  z-index: 80;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  display: none;
  max-height: 220px;
  overflow: auto;
  padding: 5px;
  border: 1px solid rgba(120, 244, 237, 0.22);
  border-radius: 12px;
  background: var(--studio-surface, rgba(7, 13, 26, 0.98));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}
.customSelect.open .customSelectList {
  display: grid;
  gap: 4px;
}
.customSelectList button {
  width: 100%;
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--studio-accent, #e8f6ff);
  text-align: left;
  padding: 6px 8px;
  cursor: pointer;
}
.customSelectList button:hover,
.customSelectList button.active {
  background: rgba(120, 244, 237, 0.16);
  color: var(--studio-ink, #ffffff);
}
.toolMenuField .customSelect {
  max-width: 112px;
}
.toolMenuField .customSelectButton {
  min-height: 28px;
  border-radius: 8px;
}
.outRow.dropTarget::after {
  content: "Drop here";
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid rgba(120, 244, 237, 0.28);
  border-radius: 999px;
  color: var(--studio-accent, #98fff8);
  background: rgba(120, 244, 237, 0.12);
  font-size: 9px;
  font-weight: 800;
}
html[data-theme="light"] .customSelectButton,
html[data-theme="light"] .customSelectList {
  background: rgba(237, 246, 251, 0.98);
  color: #132033;
}
html[data-theme="light"] .customSelectList button {
  color: #132033;
}

/* Default modelling workflow fixes: keep menus above viewport overlays and make object tools compact. */
.topbar {
  position: relative;
  z-index: 11000;
}
.topbarPanelMenu {
  z-index: 12000;
}
.topbarPanelMenu .toolMenuPanel,
.panelTogglePanel {
  z-index: 12020;
}
.outlinerContextMenu {
  min-width: 160px;
  max-width: min(220px, calc(100vw - 16px));
  max-height: min(360px, calc(100vh - 16px));
  overflow-y: auto;
  padding: 5px;
  border-radius: 10px;
}
.outlinerContextMenu button {
  gap: 1px;
  padding: 6px 7px;
  border-radius: 7px;
}
.outlinerContextMenu button b {
  font-size: 11px;
  line-height: 1.15;
}
.outlinerContextMenu small {
  font-size: 9px;
  line-height: 1.25;
}
.timelineHead {
  position: relative;
}
#addKeyBtn {
  position: sticky;
  right: 6px;
  z-index: 20;
  flex: 0 0 auto;
}
#modelViewport:focus {
  outline: 1px solid rgba(120, 244, 237, 0.35);
  outline-offset: -2px;
}

.timelineContextMenu {
  min-width: 215px;
}
.timelineContextMenu button b::before {
  content: "◆";
  margin-right: 6px;
  color: var(--cyan);
}
.keyframe:hover {
  outline: 1px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}.gapFillerToolPanel {
  position: absolute;
  left: 16px;
  top: 58px;
  width: 260px;
  padding: 12px;
  border: 1px solid rgba(255, 221, 110, 0.36);
  border-radius: 18px;
  background: var(--studio-surface, rgba(14, 12, 7, 0.82));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(16px);
  z-index: 11;
}
.gapFillerToolPanel.hidden { display: none; }
.gapFillerToolHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.gapFillerToolHead b {
  color: var(--studio-warn, #fff8df);
  font-size: 12px;
}
.gapFillerToolHead button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 8px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.08));
  color: var(--studio-ink, rgba(255, 255, 255, 0.82));
  cursor: pointer;
}
.gapFillerToolInfo {
  min-height: 44px;
  margin: 8px 0;
  padding: 9px;
  border: 1px solid rgba(255, 221, 110, 0.24);
  border-radius: 11px;
  background: rgba(255, 221, 110, 0.08);
  color: var(--studio-warn, rgba(255, 249, 229, 0.9));
  font-size: 10px;
  line-height: 1.45;
}
.gapFillerToolPanel small {
  display: block;
  color: var(--studio-warn, rgba(255, 249, 229, 0.66));
  font-size: 10px;
  line-height: 1.45;
}
.outRow.outFolder .outName {
  color: var(--studio-warn, #ffdd6e);
  font-weight: 800;
}
.outRow.outFolder .outCount::after {
  content: " items";
  opacity: 0.7;
}
html[data-theme="light"] .gapFillerToolPanel {
  background: rgba(255, 252, 242, 0.92);
  border-color: rgba(151, 109, 24, 0.25);
  color: #2a210e;
}
html[data-theme="light"] .gapFillerToolHead b,
html[data-theme="light"] .gapFillerToolInfo,
html[data-theme="light"] .gapFillerToolPanel small {
  color: #2a210e;
}
html[data-theme="light"] .gapFillerToolInfo {
  background: rgba(222, 166, 38, 0.1);
}
/* Model command bar: grouped, expandable and allowed to wrap cleanly as more tools are added. */
.workbench {
  grid-template-rows: auto minmax(0, 1fr);
}
.workToolbar {
  min-height: 43px;
  height: auto;
  align-content: center;
  flex-wrap: wrap;
  row-gap: 5px;
  padding: 5px 8px;
  background:
    linear-gradient(180deg, var(--studio-surface, rgba(15, 24, 43, 0.98)), var(--studio-surface, rgba(8, 14, 27, 0.98)));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.modelTools.studioShelf {
  display: flex;
  flex: 1 1 760px;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  overflow: visible;
}
.modelMenuStrip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
  padding: 2px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.055));
  border-radius: 10px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
}
.modelMenuStrip > .toolMenu > .toolBtn,
.modelMenuStrip > .modelConvertTool {
  min-width: 62px;
  padding-inline: 9px;
  font-size: 11px;
}
.modelMenuStrip > .modelConvertTool {
  margin-left: 2px;
  border-color: rgba(183, 119, 255, 0.25);
  background: rgba(183, 119, 255, 0.08);
  color: var(--studio-violet, #eee5ff);
}
.modelTools .divider {
  align-self: stretch;
  min-height: 24px;
  height: auto;
}
@media (max-width: 1120px) {
  .workToolbar {
    align-items: flex-start;
  }
  .modelTools.studioShelf {
    flex-basis: 100%;
  }
  .modelMenuStrip {
    flex: 1 1 auto;
  }
}
@media (max-width: 720px) {
  .modelMenuStrip > .toolMenu > .toolBtn,
  .modelMenuStrip > .modelConvertTool {
    min-width: 50px;
    padding-inline: 7px;
    font-size: 10px;
  }
}

.minecraftSizeGuideHud {
  position: absolute;
  left: 10px;
  top: 46px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(430px, calc(100% - 190px));
  padding: 8px 9px 8px 11px;
  border: 1px solid rgba(255, 221, 110, 0.42);
  border-radius: 11px;
  color: var(--studio-accent, #f7fbff);
  background: var(--studio-surface, rgba(4, 8, 16, 0.82));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
}
.minecraftSizeGuideHud.hidden {
  display: none;
}
.minecraftSizeGuideHud > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.minecraftSizeGuideHud b {
  font-size: 11px;
  color: var(--studio-warn, #ffdd6e);
}
.minecraftSizeGuideHud span {
  color: var(--studio-accent, rgba(232, 249, 255, 0.76));
  font-size: 10px;
  white-space: normal;
}
.minecraftSizeGuideHud button {
  flex: 0 0 auto;
  height: 25px;
  padding: 0 8px;
  border: 1px solid rgba(120, 244, 237, 0.22);
  border-radius: 7px;
  color: var(--studio-accent, #dffeff);
  background: rgba(120, 244, 237, 0.08);
  cursor: pointer;
}
.modelSourceActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.modelSourceActions .btn:last-child {
  grid-column: 1 / -1;
}

/* Advanced WYSIWYG main-menu authoring panel. */
.activityLabel small {
  display: block;
  margin-top: 1px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.45px;
  color: var(--purple);
  text-transform: uppercase;
}
.experimentalPill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border: 1px solid rgba(183, 119, 255, 0.42);
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--studio-violet, #d5b8ff);
  background: rgba(183, 119, 255, 0.1);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}
.mainMenuDesignerSidebar {
  width: 100%;
  min-width: 0;
  padding: 4px 4px 12px;
}
.menuLabSidebarIntro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(37, 200, 219, 0.08), rgba(183, 119, 255, 0.07));
}
.menuLabSidebarIntro b { font-size: 12px; }
.menuLabSidebarIntro small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.mainMenuSidebarTabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 7px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--studio-wash, rgba(5, 9, 18, 0.55));
}
.mainMenuSidebarTabs button {
  min-width: 0;
  padding: 6px 3px;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  font-size: 8px;
  font-weight: 760;
  cursor: pointer;
}
.mainMenuSidebarTabs button.active {
  color: var(--studio-accent, #e9ffff);
  background: rgba(120, 244, 237, 0.12);
  box-shadow: inset 0 0 0 1px rgba(120, 244, 237, 0.2);
}
.mainMenuSidebarBody {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.mainMenuSidebarToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.btn.tiny {
  min-height: 26px;
  padding: 4px 7px;
  font-size: 9px;
}
.mainMenuLayerList {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mainMenuLayerRow {
  display: grid;
  grid-template-columns: 24px 24px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 4px 3px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text);
  background: transparent;
  cursor: default;
}
.mainMenuLayerRow:hover {
  border-color: rgba(120, 244, 237, 0.16);
  background: rgba(120, 244, 237, 0.045);
}
.mainMenuLayerRow.selected {
  border-color: rgba(120, 244, 237, 0.35);
  background: rgba(120, 244, 237, 0.1);
  box-shadow: inset 2px 0 0 var(--cyan);
}
.mainMenuLayerRow.hiddenLayer { opacity: 0.58; }
.mainMenuLayerRow button {
  width: 23px;
  height: 23px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.mainMenuLayerRow button:hover { background: var(--studio-wash, rgba(255,255,255,0.07)); color: var(--text); }
.layerType {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  color: var(--studio-accent, #a8fbff);
  background: rgba(120, 244, 237, 0.08);
  font-size: 10px;
}
.layerName {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.layerName b,
.layerName small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layerName b { font-size: 10px; }
.layerName small { color: var(--muted); font-size: 8px; text-transform: capitalize; }
.mainMenuAssetGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.mainMenuAssetCard {
  min-width: 0;
  display: grid;
  grid-template-rows: 62px auto;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: var(--studio-surface, rgba(10, 15, 27, 0.72));
  cursor: grab;
}
.mainMenuAssetCard:hover {
  border-color: rgba(120, 244, 237, 0.35);
  background: rgba(120, 244, 237, 0.07);
}
.mainMenuAssetCard img,
.mediaAssetGlyph {
  width: 100%;
  height: 62px;
  object-fit: cover;
  border-radius: 5px;
  background: var(--studio-surface, #050811);
}
.mediaAssetGlyph {
  display: grid;
  place-items: center;
  color: var(--studio-accent, #b8c6ff);
  font-size: 20px;
}
.mainMenuAssetCard span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mainMenuSidebarHint {
  padding: 8px;
  border: 1px dashed rgba(120, 244, 237, 0.2);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(120, 244, 237, 0.035);
  font-size: 8px;
  line-height: 1.45;
}
.mainMenuPanoramaCard {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--studio-surface, rgba(8, 13, 24, 0.72));
}
.mainMenuPanoramaCard.active {
  border-color: rgba(183, 119, 255, 0.5);
  box-shadow: inset 2px 0 0 var(--purple);
}
.panoramaCardHead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  border-bottom: 1px solid var(--line);
}
.panoramaSceneSelect {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.panoramaSceneSelect b,
.panoramaSceneSelect small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panoramaSceneSelect b { font-size: 10px; }
.panoramaSceneSelect small { color: var(--muted); font-size: 8px; }
.panoramaDelete {
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 15px;
}
.panoramaDelete:hover { color: var(--studio-bad, #ff9ca9); background: rgba(255, 80, 100, 0.08); }
.panoramaFaceGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
}
.panoramaFaceSlot {
  position: relative;
  min-width: 0;
  height: 52px;
  overflow: hidden;
  padding: 0;
  border: 1px dashed var(--studio-line, rgba(255,255,255,0.18));
  border-radius: 5px;
  color: var(--muted);
  background: var(--studio-surface, #050811);
}
.panoramaFaceSlot img { width: 100%; height: 100%; object-fit: cover; }
.panoramaFaceSlot span {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  overflow: hidden;
  padding: 2px;
  border-radius: 3px;
  color: var(--studio-ink, #fff);
  background: var(--studio-wash, rgba(0,0,0,0.64));
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panoramaFaceSlot b { font-size: 18px; }
.panoramaFaceSlot:hover { border-color: rgba(120, 244, 237, 0.52); }
.mainMenuWidgetGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.mainMenuWidgetGrid button {
  min-height: 58px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 8px 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--studio-surface, rgba(10, 15, 27, 0.78));
}
.mainMenuWidgetGrid button:hover {
  border-color: rgba(120, 244, 237, 0.35);
  background: rgba(120, 244, 237, 0.07);
}
.mainMenuWidgetGrid span { color: var(--studio-accent, #9cefff); font-size: 17px; }
.mainMenuWidgetGrid b { font-size: 9px; }
.mainMenuThemeSection,
.mainMenuSavedThemes {
  display: grid;
  gap: 7px;
  padding-top: 4px;
}
.mainMenuSectionTitle { display: grid; gap: 2px; }
.mainMenuSectionTitle b { font-size: 10px; }
.mainMenuSectionTitle span { color: var(--muted); font-size: 8px; }
.mainMenuThemeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.mainMenuThemeGrid button,
.mainMenuSavedThemes > button {
  min-height: 29px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: var(--studio-wash, rgba(255,255,255,0.03));
  font-size: 9px;
}
.mainMenuThemeGrid button:hover,
.mainMenuSavedThemes > button:hover { border-color: rgba(183, 119, 255, 0.4); background: rgba(183, 119, 255, 0.08); }

.mainMenuAdvancedLab {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 0%, rgba(37, 200, 219, 0.07), transparent 28%),
    radial-gradient(circle at 92% 0%, rgba(183, 119, 255, 0.09), transparent 30%),
    var(--studio-surface, #070c16);
}
.mainMenuAdvancedToolbar {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--studio-surface, rgba(7, 12, 22, 0.95));
  overflow-x: auto;
  overflow-y: hidden;
}
.mainMenuToolbarBrand {
  min-width: 190px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 8px;
  border-right: 1px solid var(--line);
}
.mainMenuToolbarBrand > div { display: grid; gap: 1px; }
.mainMenuToolbarBrand b { font-size: 11px; white-space: nowrap; }
.mainMenuToolbarBrand small { color: var(--muted); font-size: 8px; white-space: nowrap; }
.mainMenuToolbarGroup {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
}
.mainMenuToolbarGroup.end { margin-left: auto; }
.mainMenuToolbarGroup > span {
  width: 1px;
  height: 22px;
  margin: 0 2px;
  background: var(--line);
}
.mainMenuToolbarGroup button {
  min-height: 29px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: var(--studio-wash, rgba(255,255,255,0.035));
  font-size: 9px;
  white-space: nowrap;
}
.mainMenuToolbarGroup.compact button { width: 29px; padding: 0; font-size: 13px; }
.mainMenuToolbarGroup button:hover:not(:disabled) { border-color: rgba(120, 244, 237, 0.34); background: rgba(120, 244, 237, 0.075); }
.mainMenuToolbarGroup button.primary { border-color: rgba(120, 244, 237, 0.44); background: rgba(37, 200, 219, 0.18); }
.mainMenuToolbarGroup button:disabled { opacity: 0.38; cursor: not-allowed; }
.mainMenuToolbarGroup select { min-width: 150px; height: 29px; font-size: 9px; }
.mainMenuAdvancedWorkspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(430px, 1fr) minmax(280px, 330px);
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}
.mainMenuCanvasPanel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.mainMenuCanvasViewport {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 18px;
  background:
    linear-gradient(45deg, var(--studio-wash, rgba(255,255,255,0.025)) 25%, transparent 25%, transparent 75%, var(--studio-wash, rgba(255,255,255,0.025)) 75%),
    linear-gradient(45deg, var(--studio-wash, rgba(255,255,255,0.025)) 25%, transparent 25%, transparent 75%, var(--studio-wash, rgba(255,255,255,0.025)) 75%),
    var(--studio-surface, #050913);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}
.mainMenuPreviewFrame.advanced {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  max-height: calc(100vh - 245px);
  overflow: hidden;
  border: 1px solid rgba(120, 244, 237, 0.26);
  border-radius: 8px;
  background: var(--studio-surface, #02050a);
  box-shadow: 0 24px 70px rgba(0,0,0,0.48);
  isolation: isolate;
  user-select: none;
  touch-action: none;
}
.mainMenuPanoramaCanvas,
.mainMenuPreviewBackdrop,
.mainMenuPreviewOverlay,
.mainMenuPreviewFog,
.mainMenuGridOverlay,
.mainMenuItemLayer {
  position: absolute;
  inset: 0;
}
.mainMenuPanoramaCanvas { z-index: -6; width: 100%; height: 100%; }
.mainMenuPreviewBackdrop {
  --menu-animation-duration: 18s;
  --menu-animation-easing: ease-in-out;
  --menu-scale: 1.08;
  --menu-from-x: -4%;
  --menu-to-x: 4%;
  --menu-from-y: -2%;
  --menu-to-y: 2%;
  inset: -9%;
  z-index: -7;
  background-repeat: no-repeat;
  transform: scale(var(--menu-scale));
  will-change: transform;
  animation-duration: var(--menu-animation-duration);
  animation-timing-function: var(--menu-animation-easing);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.menuAnimation-none { animation-name: none; }
.menuAnimation-slow-pan { animation-name: mainMenuSlowPan; }
.menuAnimation-drift { animation-name: mainMenuDiagonalDrift; }
.menuAnimation-zoom { animation-name: mainMenuSlowZoom; }
.menuAnimation-pulse { animation-name: mainMenuSoftPulse; }
@keyframes mainMenuSlowPan {
  from { transform: translate3d(var(--menu-from-x), 0, 0) scale(var(--menu-scale)); }
  to { transform: translate3d(var(--menu-to-x), 0, 0) scale(var(--menu-scale)); }
}
@keyframes mainMenuDiagonalDrift {
  from { transform: translate3d(var(--menu-from-x), var(--menu-from-y), 0) scale(var(--menu-scale)); }
  to { transform: translate3d(var(--menu-to-x), var(--menu-to-y), 0) scale(var(--menu-scale)); }
}
@keyframes mainMenuSlowZoom {
  from { transform: translate3d(var(--menu-from-x), var(--menu-from-y), 0) scale(1); }
  to { transform: translate3d(var(--menu-to-x), var(--menu-to-y), 0) scale(var(--menu-scale)); }
}
@keyframes mainMenuSoftPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(var(--menu-scale)); }
}
.mainMenuPreviewOverlay { z-index: -5; background: var(--studio-surface, #000); pointer-events: none; }
.mainMenuPreviewFog {
  z-index: -4;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 15%, rgba(195,215,235,0.45) 100%);
  mix-blend-mode: screen;
}
.mainMenuGridOverlay {
  z-index: 0;
  display: none;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,244,237,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,244,237,0.12) 1px, transparent 1px);
  background-size: 5% 5%;
}
.mainMenuPreviewFrame.showGrid .mainMenuGridOverlay { display: block; }
.mainMenuGuide {
  position: absolute;
  z-index: 97;
  display: none;
  pointer-events: none;
  background: rgba(255, 88, 210, 0.76);
  box-shadow: 0 0 4px rgba(255, 88, 210, 0.35);
}
.mainMenuGuide.guide-x { top: 0; bottom: 0; left: 50%; width: 1px; }
.mainMenuGuide.guide-y { left: 0; right: 0; top: 50%; height: 1px; }
.mainMenuPreviewFrame.showGuides .mainMenuGuide,
.mainMenuPreviewFrame.snapCenterX .guide-x,
.mainMenuPreviewFrame.snapCenterY .guide-y { display: block; }
.mainMenuSafeArea {
  position: absolute;
  z-index: 96;
  inset: 5%;
  display: none;
  border: 1px dashed rgba(255, 221, 110, 0.64);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.28);
  pointer-events: none;
}
.mainMenuPreviewFrame.showSafeArea .mainMenuSafeArea { display: block; }
.mainMenuItemLayer { z-index: 1; overflow: hidden; }
.mainMenuCanvasItem {
  position: absolute;
  box-sizing: border-box;
  transform-origin: center;
  cursor: move;
  animation-duration: var(--element-animation-duration);
  animation-delay: var(--element-animation-delay);
  animation-timing-function: var(--element-animation-easing);
  animation-fill-mode: both;
}
.mainMenuCanvasItem.locked { cursor: not-allowed; }
.mainMenuCanvasItem.selected::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid #5bf6f0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.65), 0 0 8px rgba(91,246,240,0.32);
  pointer-events: none;
}
.mainMenuCanvasItemInner {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: visible;
}
.mainMenuLayerTag {
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  display: none;
  max-width: 160px;
  overflow: hidden;
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--studio-accent, #e7ffff);
  background: var(--studio-surface, rgba(0, 20, 28, 0.88));
  font-size: 7px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.mainMenuCanvasItem.selected .mainMenuLayerTag { display: block; }
.menuResizeHandle {
  position: absolute;
  z-index: 3;
  width: 8px;
  height: 8px;
  border: 1px solid var(--studio-line, #04282b);
  border-radius: 2px;
  background: #7bfff8;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
}
.menuResizeHandle.nw { left: -5px; top: -5px; cursor: nwse-resize; }
.menuResizeHandle.n { left: 50%; top: -5px; transform: translateX(-50%); cursor: ns-resize; }
.menuResizeHandle.ne { right: -5px; top: -5px; cursor: nesw-resize; }
.menuResizeHandle.e { right: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.menuResizeHandle.se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.menuResizeHandle.s { left: 50%; bottom: -5px; transform: translateX(-50%); cursor: ns-resize; }
.menuResizeHandle.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.menuResizeHandle.w { left: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.menuRotateHandle {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 18px);
  z-index: 4;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border: 1px solid #5bf6f0;
  border-radius: 50%;
  color: var(--studio-accent, #e9ffff);
  background: var(--studio-surface, rgba(5, 25, 32, 0.94));
  font-size: 10px;
  cursor: grab;
}
.menuRotateHandle::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 1px;
  height: 12px;
  background: #5bf6f0;
}
.mainMenuDesignedText {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: inherit;
  overflow: visible;
  line-height: 1.05;
  white-space: pre-wrap;
  word-break: break-word;
}
.mainMenuDesignedButton {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: var(--button-border-width) solid var(--button-border);
  border-radius: var(--button-radius);
  color: inherit;
  background-image: var(--button-texture), linear-gradient(rgba(255,255,255,0.16), rgba(0,0,0,0.22));
  background-color: var(--button-bg);
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), 0 2px 5px rgba(0,0,0,0.36);
  cursor: pointer;
}
.mainMenuDesignedButton:hover { background-color: var(--button-hover); }
.mainMenuDesignedButton:active { background-color: var(--button-pressed); transform: translateY(1px); }
.mainMenuDesignedImage,
.mainMenuDesignedVideo {
  width: 100%;
  height: 100%;
  display: block;
}
.mainMenuMediaPlaceholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px dashed var(--studio-line, rgba(255,255,255,0.3));
  border-radius: 5px;
  color: var(--studio-ink, rgba(255,255,255,0.68));
  background: var(--studio-wash, rgba(0,0,0,0.35));
  font-size: 9px;
}
.mainMenuMediaPlaceholder b { font-size: 18px; }
.mainMenuProgressWidget {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--progress-border);
  border-radius: 3px;
  background: var(--progress-bg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45);
}
.mainMenuProgressWidget > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--progress-fill);
  box-shadow: 0 0 8px var(--progress-fill);
}
.mainMenuProgressWidget > b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9px !important;
}
.mainMenuPanelWidget {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 10px;
  border: 1px solid;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.mainMenuPanelWidget > div { width: 100%; line-height: 1.35; white-space: pre-wrap; }
.mainMenuStatusWidget {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid;
  border-radius: 6px;
}
.mainMenuStatusWidget i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #55ef8a;
  box-shadow: 0 0 8px #55ef8a;
}
.mainMenuStatusWidget.status-offline i { background: #ff6d7e; box-shadow: 0 0 8px #ff6d7e; }
.mainMenuStatusWidget.status-maintenance i { background: #ffd166; box-shadow: 0 0 8px #ffd166; }
.mainMenuStatusWidget span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mainMenuParticleSystem {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.mainMenuParticleSystem i {
  position: absolute;
  left: var(--particle-left);
  top: var(--particle-top);
  width: var(--particle-size);
  height: var(--particle-size);
  background: var(--particle-color);
  opacity: calc(var(--particle-opacity) * (0.45 + var(--particle-depth) * 0.55));
  animation-duration: var(--particle-duration);
  animation-delay: var(--particle-delay);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  will-change: transform, opacity;
}
.particle-stars i {
  border-radius: 50%;
  animation-name: mainMenuStarTwinkle;
  animation-timing-function: ease-in-out;
}
.particle-stars i::before,
.particle-stars i::after {
  content: "";
  position: absolute;
  display: block;
  background: currentColor;
  color: var(--particle-color);
  opacity: var(--particle-glint);
}
.particle-stars i::before { left: -2px; top: 50%; width: calc(100% + 4px); height: 1px; }
.particle-stars i::after { left: 50%; top: -2px; width: 1px; height: calc(100% + 4px); }
.particle-rain i {
  top: -14%;
  width: max(1px, calc(var(--particle-size) * 0.28));
  height: calc(var(--particle-size) * 5.8);
  border-radius: 999px;
  transform: rotate(10deg);
  animation-name: mainMenuRainFall;
}
.particle-snow i {
  border-radius: 50%;
  animation-name: mainMenuSnowFall;
}
.particle-snow i::before,
.particle-snow i::after {
  content: "";
  position: absolute;
  background: var(--particle-color);
}
.particle-snow i::before { left: -35%; top: 45%; width: 170%; height: 1px; }
.particle-snow i::after { left: 45%; top: -35%; width: 1px; height: 170%; }
.particle-space-dust i {
  border-radius: 50%;
  animation-name: mainMenuDustFloat;
  animation-timing-function: ease-in-out;
}
.particle-embers i {
  top: 108%;
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--particle-size) * 2) var(--particle-color);
  animation-name: mainMenuEmberRise;
}
.particle-leaves i,
.particle-sakura i {
  top: -10%;
  border-radius: 75% 0 75% 0;
  animation-name: mainMenuLeafFall;
}
.particle-ash i {
  top: -8%;
  border-radius: 40%;
  filter: blur(0.35px);
  animation-name: mainMenuAshFall;
}
@keyframes mainMenuStarTwinkle {
  0%,100% { opacity: calc(var(--particle-opacity) * 0.22); transform: scale(0.72); }
  50% { opacity: var(--particle-opacity); transform: scale(1.18); }
}
@keyframes mainMenuRainFall {
  from { transform: translate3d(0,-12%,0) rotate(10deg); }
  to { transform: translate3d(var(--particle-drift),125vh,0) rotate(10deg); }
}
@keyframes mainMenuSnowFall {
  from { transform: translate3d(0,-14vh,0) rotate(0deg); }
  50% { transform: translate3d(var(--particle-drift),55vh,0) rotate(180deg); }
  to { transform: translate3d(var(--particle-drift-back),125vh,0) rotate(360deg); }
}
@keyframes mainMenuDustFloat {
  0%,100% { transform: translate3d(var(--particle-drift-quarter-back),-4px,0) scale(0.82); }
  50% { transform: translate3d(var(--particle-drift-third),11px,0) scale(1.12); }
}
@keyframes mainMenuEmberRise {
  from { transform: translate3d(0,0,0) scale(1); opacity: var(--particle-opacity); }
  to { transform: translate3d(var(--particle-drift),-125vh,0) scale(0.18); opacity: 0; }
}
@keyframes mainMenuLeafFall {
  from { transform: translate3d(0,-12vh,0) rotate(0deg); }
  50% { transform: translate3d(var(--particle-drift),55vh,0) rotate(220deg); }
  to { transform: translate3d(var(--particle-drift-half-back),125vh,0) rotate(520deg); }
}
@keyframes mainMenuAshFall {
  from { transform: translate3d(0,-10vh,0) rotate(0deg); opacity: 0; }
  12% { opacity: var(--particle-opacity); }
  to { transform: translate3d(var(--particle-drift),125vh,0) rotate(250deg); opacity: 0.1; }
}
.menuAnim-none { animation-name: none; }
.menuAnim-fade { animation-name: menuElementFade; }
.menuAnim-slide-up { animation-name: menuElementSlideUp; }
.menuAnim-slide-left { animation-name: menuElementSlideLeft; }
.menuAnim-pulse { animation-name: menuElementPulse; }
.menuAnim-float { animation-name: menuElementFloat; }
.menuAnim-spin { animation-name: menuElementSpin; }
.menuAnim-bounce { animation-name: menuElementBounce; }
@keyframes menuElementFade { 0%,100% { filter: opacity(1); } 50% { filter: opacity(0.45); } }
@keyframes menuElementSlideUp { 0%,100% { margin-top: 0; } 50% { margin-top: -12px; } }
@keyframes menuElementSlideLeft { 0%,100% { margin-left: 0; } 50% { margin-left: -14px; } }
@keyframes menuElementPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes menuElementFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes menuElementSpin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes menuElementBounce { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.mainMenuSelectionBox {
  position: absolute;
  z-index: 110;
  border: 1px solid #78f4ed;
  background: rgba(120, 244, 237, 0.1);
  pointer-events: none;
}
.mainMenuPreviewBadge {
  position: absolute;
  top: 7px;
  left: 8px;
  z-index: 102;
  display: grid;
  gap: 1px;
  padding: 4px 6px;
  border: 1px solid var(--studio-line, rgba(255,255,255,0.16));
  border-radius: 5px;
  color: var(--studio-ink, rgba(255,255,255,0.82));
  background: var(--studio-wash, rgba(0,0,0,0.42));
  pointer-events: none;
}
.mainMenuPreviewBadge span { font-size: 8px; font-weight: 760; }
.mainMenuPreviewBadge small { font-size: 7px; opacity: 0.72; }
.mainMenuCanvasFooter {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 7px 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--studio-surface, rgba(7,12,22,0.92));
  font-size: 8px;
}
.mainMenuCanvasFooter code {
  max-width: 340px;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mainMenuAdvancedInspector {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 8px;
  background: var(--studio-surface, rgba(7,12,22,0.94));
}
.mainMenuInspectorTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 5px 3px 9px;
}
.mainMenuInspectorTitle > div:first-child { min-width: 0; display: grid; gap: 2px; }
.mainMenuInspectorTitle b,
.mainMenuInspectorTitle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mainMenuInspectorTitle b { font-size: 12px; }
.mainMenuInspectorTitle span { color: var(--muted); font-size: 8px; text-transform: capitalize; }
.inspectorTitleActions { display: flex; gap: 4px; }
.inspectorTitleActions button {
  width: 27px;
  height: 27px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  background: var(--studio-wash, rgba(255,255,255,0.035));
}
.mainMenuAdvancedInspector details {
  margin-bottom: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--studio-surface, rgba(12,18,32,0.78));
}
.mainMenuAdvancedInspector summary {
  padding: 8px 9px;
  color: var(--text);
  font-size: 9px;
  font-weight: 760;
  cursor: pointer;
  user-select: none;
}
.mainMenuAdvancedInspector details[open] summary { border-bottom: 1px solid var(--line); }
.mainMenuInspectorGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
}
.mainMenuInspectorGrid label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mainMenuInspectorGrid label > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 650;
}
.mainMenuInspectorGrid .full { grid-column: 1 / -1; }
.mainMenuInspectorGrid input[type="color"] {
  width: 100%;
  height: 29px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--studio-surface, #07101b);
}
.mainMenuInspectorGrid textarea { resize: vertical; min-height: 60px; }
.mainMenuCheck {
  min-height: 28px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px !important;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--studio-wash, rgba(255,255,255,0.025));
}
.mainMenuCheck > span { color: var(--text) !important; }
.mainMenuAlignGrid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
}
.mainMenuAlignGrid button {
  min-width: 0;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  background: var(--studio-wash, rgba(255,255,255,0.035));
}
.mainMenuAlignGrid button:hover { border-color: rgba(120,244,237,0.35); background: rgba(120,244,237,0.07); }
.mainMenuKeyframeActions { display: flex; gap: 5px; }
.mainMenuRuntimeNote {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px dashed rgba(120,244,237,0.22);
  border-radius: 6px;
  color: var(--muted);
  background: rgba(120,244,237,0.035);
  font-size: 8px;
  line-height: 1.45;
}
.mainMenuRuntimeNote b { color: var(--text); font-size: 9px; }
.mainMenuJsonPreview {
  grid-column: 1 / -1;
  max-height: 230px;
  margin: 0;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--studio-accent, #a9d6ff);
  background: var(--studio-surface, #050811);
  font-size: 8px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.mainMenuAdvancedTimeline {
  position: relative;
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 126px;
  max-height: 210px;
  overflow: auto;
  border-top: 1px solid var(--line);
  background: var(--studio-surface, rgba(6,10,18,0.97));
}
.mainMenuTimelineHead {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--studio-surface, rgba(6,10,18,0.98));
}
.timelinePlayback,
.timelineOptions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.timelinePlayback button {
  width: 27px;
  height: 25px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  background: var(--studio-wash, rgba(255,255,255,0.035));
}
.timelinePlayback span { color: var(--muted); font-size: 8px; font-variant-numeric: tabular-nums; }
.timelineOptions .mainMenuCheck { min-height: 25px; padding: 3px 5px; }
.timelineSpeed {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 8px;
}
.timelineSpeed select {
  width: 62px;
  min-height: 25px;
  padding: 2px 4px;
  font-size: 8px;
}
.mainMenuTimelineRuler { padding: 4px 8px 3px 92px; }
.mainMenuTimelineRuler input { width: 100%; }
.mainMenuTimelineTracks {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  row-gap: 4px;
  align-items: stretch;
  padding: 0 8px 8px;
}
.timelineTrackLabel {
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 5px 0 0 5px;
  background: var(--studio-wash, rgba(255,255,255,0.025));
}
.timelineTrackLabel b { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.timelineTrackLabel small { color: var(--muted); font-size: 7px; }
.timelineSceneTrack,
.timelineKeyframeTrack {
  position: relative;
  min-height: 42px;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background:
    repeating-linear-gradient(90deg, var(--studio-wash, rgba(255,255,255,0.04)) 0 1px, transparent 1px 5%),
    var(--studio-surface, #080d17);
}
.timelineSceneBlock {
  position: relative;
  min-width: 38px;
  display: grid;
  align-content: center;
  gap: 1px;
  overflow: hidden;
  padding: 4px 6px;
  border: 0;
  border-right: 1px solid var(--studio-line, rgba(255,255,255,0.14));
  color: var(--text);
  background: rgba(76,89,148,0.22);
  text-align: left;
}
.timelineSceneBlock.active { background: rgba(183,119,255,0.25); box-shadow: inset 0 0 0 1px rgba(183,119,255,0.55); }
.timelineSceneBlock b,
.timelineSceneBlock small { position: relative; z-index: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timelineSceneBlock b { font-size: 8px; }
.timelineSceneBlock small { color: var(--muted); font-size: 7px; }
.timelineSceneBlock i {
  position: absolute;
  inset: 0 0 0 auto;
  background: linear-gradient(90deg, transparent, rgba(120,244,237,0.28));
  pointer-events: none;
}
.timelineKeyframeTrack { min-height: 28px; display: block; }
.timelineKeyframe {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  padding: 0;
  transform: translate(-50%,-50%);
  border: 0;
  color: var(--studio-warn, #ffd66b);
  background: transparent;
  font-size: 12px;
}
.mainMenuTimelinePlayhead {
  position: absolute;
  top: 0;
  bottom: 8px;
  left: 0;
  z-index: 4;
  width: 1px;
  margin-left: 88px;
  background: #ff5a82;
  pointer-events: none;
}
.mainMenuTimelinePlayhead::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -4px;
  width: 9px;
  height: 7px;
  clip-path: polygon(0 0,100% 0,50% 100%);
  background: #ff5a82;
}
html[data-theme="light"] .mainMenuAdvancedLab,
html[data-theme="light"] .mainMenuAdvancedToolbar,
html[data-theme="light"] .mainMenuAdvancedInspector,
html[data-theme="light"] .mainMenuAdvancedTimeline { background: #edf2f8; }
html[data-theme="light"] .mainMenuCanvasViewport { background-color: #dce4ee; }
html[data-theme="light"] .mainMenuAdvancedInspector details,
html[data-theme="light"] .mainMenuLayerRow,
html[data-theme="light"] .mainMenuAssetCard { background: rgba(255,255,255,0.74); }
@media (max-width: 1280px) {
  .mainMenuToolbarBrand small { display: none; }
  .mainMenuToolbarBrand { min-width: 150px; }
  .mainMenuToolbarGroup.compact { display: none; }
  .mainMenuAdvancedWorkspace { grid-template-columns: minmax(390px, 1fr) 290px; }
}
@media (max-width: 980px) {
  .mainMenuAdvancedWorkspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(430px, 1fr) minmax(280px, auto) auto;
    overflow: auto;
  }
  .mainMenuCanvasPanel { border-right: 0; }
  .mainMenuAdvancedInspector { max-height: 520px; border-top: 1px solid var(--line); }
  .mainMenuAdvancedTimeline { grid-column: 1; }
  .mainMenuPreviewFrame.advanced { max-height: none; }
}

.buildArtifactHeading {
  margin-top: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
}
.buildArtifactHeadingHint {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}
.buildArtifactGroup {
  margin-top: 12px;
}
.buildArtifactGroupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(120, 244, 237, 0.2);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(90deg, rgba(120, 244, 237, 0.1), transparent 62%),
    var(--studio-wash, rgba(255, 255, 255, 0.018));
}
.buildArtifactGroupTitle {
  font-size: 13px;
  font-weight: 800;
}
.buildArtifactGroupHint {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}
.buildArtifactGroupMeta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.buildArtifactVersionPill {
  border-color: rgba(120, 244, 237, 0.24);
  color: var(--accent);
}
.buildArtifactCount {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.buildArtifactGroupList {
  margin: 0;
  border-radius: 0 0 12px 12px;
}
.buildArtifactRow > div:first-child {
  min-width: 0;
}
.buildArtifactRow b,
.buildArtifactRow .listSub {
  overflow-wrap: anywhere;
}
@media (max-width: 620px) {
  .buildArtifactGroupHeader {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Markdown preview and Interactive Library bank light-mode polish */
html[data-theme="light"] .markdownPreviewPane {
  background:
    radial-gradient(900px 500px at 50% -120px, rgba(8, 125, 137, 0.08), transparent 70%),
    #f5f8fc;
}
html[data-theme="light"] .markdownPreviewHead {
  background: rgba(245, 248, 252, 0.92);
}
html[data-theme="light"] .markdownBody {
  color: #33435e;
}
html[data-theme="light"] .markdownBody h1,
html[data-theme="light"] .markdownBody h2,
html[data-theme="light"] .markdownBody h3,
html[data-theme="light"] .markdownBody h4 {
  color: #1d2d46;
}
html[data-theme="light"] .markdownBody h5,
html[data-theme="light"] .markdownBody h6 {
  color: #53657f;
}
html[data-theme="light"] .markdownBody strong {
  color: #1d2d46;
}
html[data-theme="light"] .markdownBody a {
  color: #087d89;
  border-bottom-color: rgba(8, 125, 137, 0.28);
}
html[data-theme="light"] .markdownBody blockquote {
  color: #53657f;
  background: rgba(117, 70, 184, 0.06);
}
html[data-theme="light"] .markdownTask {
  border-color: rgba(8, 125, 137, 0.12);
  background: rgba(255, 255, 255, 0.64);
}
html[data-theme="light"] .markdownTaskControl {
  border-color: rgba(8, 125, 137, 0.32);
  background: #f8fbff;
  box-shadow: inset 0 0 0 1px rgba(25, 42, 67, 0.025);
}
html[data-theme="light"] .markdownTaskInput:checked ~ .markdownTaskText {
  color: #60728c;
}
html[data-theme="light"] .markdownInlineCode {
  color: #087d89;
  background: rgba(8, 125, 137, 0.07);
  border-color: rgba(8, 125, 137, 0.12);
}
html[data-theme="light"] .markdownCodeBlock {
  background: #eef3f8;
  border-color: rgba(8, 125, 137, 0.14);
  box-shadow: 0 12px 30px rgba(44, 63, 90, 0.1);
}
html[data-theme="light"] .markdownCodeLabel {
  color: #61728b;
  border-bottom-color: rgba(36, 50, 74, 0.08);
  background: linear-gradient(90deg, rgba(8, 125, 137, 0.08), rgba(117, 70, 184, 0.05));
}
html[data-theme="light"] .markdownCopyButton {
  color: #53657f;
  border-color: rgba(8, 125, 137, 0.16);
  background: rgba(8, 125, 137, 0.055);
}
html[data-theme="light"] .markdownCopyButton:hover,
html[data-theme="light"] .markdownCopyButton.copied {
  color: #075f69;
  border-color: rgba(8, 125, 137, 0.32);
  background: rgba(8, 125, 137, 0.1);
}
html[data-theme="light"] .markdownCodeBlock code {
  color: #24324a;
}
html[data-theme="light"] .markdownBody th {
  color: #24324a;
  background: rgba(8, 125, 137, 0.06);
}
html[data-theme="light"] .markdownBody tbody tr:nth-child(even) {
  background: rgba(36, 50, 74, 0.025);
}
html[data-theme="light"] .markdownBody tbody tr:hover {
  background: rgba(8, 125, 137, 0.045);
}
html[data-theme="light"] .ilbankEditorBanner {
  border-bottom-color: rgba(8, 125, 137, 0.18);
  background:
    linear-gradient(90deg, rgba(8, 125, 137, 0.11), rgba(117, 70, 184, 0.08) 58%, rgba(184, 50, 128, 0.05)),
    #eef3f8;
  box-shadow: 0 8px 24px rgba(44, 63, 90, 0.1);
}
html[data-theme="light"] .ilbankEditorBanner b {
  color: #1d2d46;
}
html[data-theme="light"] .ilbankEditorBanner small {
  color: #687a94;
}
html[data-theme="light"] .ilbankMark {
  color: #ffffff;
  background: linear-gradient(135deg, #087d89, #7546b8 65%, #b83280);
}
html[data-theme="light"] .ilbankSpark {
  color: #b83280;
}
html[data-theme="light"] .ilbankCodePane .codeEditorSurface {
  box-shadow: inset 3px 0 0 rgba(8, 125, 137, 0.16);
}
@media (max-width: 900px) {
  .markdownSplitPane {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(280px, 1fr) minmax(280px, 1fr);
    overflow: auto;
  }
  .markdownSplitPane .markdownPreviewPane.compact {
    min-height: 360px;
  }
  .markdownSourcePane {
    min-height: 360px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ========================================================================== */
/* Interactive Library UI Studio                                              */
/* ========================================================================== */

.uiStudioWorkbench {
  grid-template-rows: minmax(0, 1fr);
  background:
    radial-gradient(circle at 82% 12%, rgba(84, 121, 255, 0.10), transparent 28%),
    radial-gradient(circle at 12% 88%, rgba(75, 226, 204, 0.07), transparent 30%),
    var(--bg);
}
.uiStudioWorkbench > .workToolbar { display: none; }
.uiStudioWorkbench > #contentHost,
.uiStudioWorkbench > .contentHost { min-height: 0; }

.ilUiStudio {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--text);
  background: linear-gradient(180deg, var(--studio-surface, rgba(10, 15, 28, .985)), var(--studio-surface, rgba(7, 10, 20, .995)));
}
.ilUiToolbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--studio-surface, rgba(22, 30, 49, .98)), var(--studio-surface, rgba(13, 20, 35, .96)));
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.ilUiBrand {
  min-width: 178px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 10px;
  border-right: 1px solid var(--line);
}
.ilUiBrand > span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(94, 231, 217, .28);
  border-radius: 9px;
  color: var(--cyan);
  background: rgba(75, 212, 198, .08);
  box-shadow: inset 0 0 14px rgba(78, 229, 211, .07);
}
.ilUiBrand div { min-width: 0; display: grid; gap: 2px; }
.ilUiBrand b { font-size: 11px; }
.ilUiBrand small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ilUiToolbarGroup {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.ilUiToolbarGroup.end { margin-left: auto; }
.ilUiToolbarGroup > i {
  width: 1px;
  height: 22px;
  margin: 0 3px;
  background: var(--line);
}
.ilUiToolbar button,
.ilUiToolbar select,
.ilUiLayers button,
.ilUiInspector button {
  min-height: 29px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: var(--studio-wash, rgba(255,255,255,.025));
  font-size: 8px;
  white-space: nowrap;
}
.ilUiToolbar button:hover,
.ilUiLayers button:hover,
.ilUiInspector button:hover { border-color: rgba(102,232,219,.3); background: rgba(94,221,207,.06); }
.ilUiToolbar button.active { color: var(--cyan); border-color: rgba(102,232,219,.28); background: rgba(94,221,207,.08); }
.ilUiToolbar button.primary { color: #071816; border-color: rgba(89,239,218,.62); background: linear-gradient(180deg, #79f0df, #42cdbb); font-weight: 800; }
.ilUiToolbar button:disabled { opacity: .35; cursor: default; }
.ilUiToolbar select { max-width: 170px; }
.ilUiDirty { min-width: 58px; color: var(--muted); font-size: 8px; text-align: right; }
.ilUiDirty.active { color: var(--warn); }

.ilUiWorkspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 204px minmax(420px, 1fr) 286px;
  overflow: hidden;
}
.ilUiLayers,
.ilUiInspector {
  min-width: 0;
  min-height: 0;
  display: grid;
  background: linear-gradient(180deg, var(--studio-surface, rgba(16,23,39,.98)), var(--studio-surface, rgba(10,15,27,.99)));
}
.ilUiLayers {
  grid-template-rows: 42px minmax(0, 1fr) 42px;
  border-right: 1px solid var(--line);
}
.ilUiLayers > header,
.ilUiInspector > header {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}
.ilUiLayers > header b,
.ilUiInspector > header b { font-size: 10px; }
.ilUiLayers > header span,
.ilUiInspector > header span { color: var(--muted); font-size: 8px; }
.ilUiLayers > footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 6px;
  border-top: 1px solid var(--line);
}
.ilUiLayers button.danger { color: var(--studio-bad, #ff9ea7); }
.ilUiLayerRows { min-height: 0; overflow: auto; padding: 5px; scrollbar-width: thin; }
.ilUiLayerRow {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
  padding: 5px 7px !important;
  border-color: transparent !important;
  background: transparent !important;
  text-align: left;
}
.ilUiLayerRow:hover { background: var(--studio-wash, rgba(255,255,255,.035)) !important; }
.ilUiLayerRow.active {
  border-color: rgba(81,228,210,.22) !important;
  background: linear-gradient(90deg, rgba(75,217,201,.11), rgba(102,80,230,.04)) !important;
}
.ilUiLayerRow > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--cyan);
  background: rgba(84,222,205,.07);
}
.ilUiLayerRow > div { min-width: 0; }
.ilUiLayerRow b,
.ilUiLayerRow small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilUiLayerRow b { font-size: 9px; }
.ilUiLayerRow small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.ilUiLayerRow i { color: var(--muted); font-size: 7px; font-style: normal; text-align: center; }

.ilUiCanvasPanel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 34px;
  background:
    radial-gradient(circle at center, rgba(76, 90, 125, .14), transparent 55%),
    var(--studio-surface, #080b13);
}
.ilUiViewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 24px;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.018) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.018) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.018) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.ilUiCanvas {
  position: relative;
  width: min(960px, calc(100% - 30px));
  height: auto;
  flex: 0 0 auto;
  overflow: hidden;
  outline: none;
  border: 1px solid rgba(165,184,220,.25);
  box-shadow: 0 22px 65px rgba(0,0,0,.47), 0 0 0 7px rgba(255,255,255,.018);
  user-select: none;
  touch-action: none;
}
.ilUiCanvas::after {
  content: "UI PREVIEW";
  position: absolute;
  right: 5px;
  bottom: 4px;
  z-index: 100000;
  color: rgba(255,255,255,.24);
  font: 700 6px/1 monospace;
  letter-spacing: .12em;
  pointer-events: none;
}
.ilUiSafeArea {
  position: absolute;
  inset: 5%;
  z-index: 99998;
  border: 1px dashed rgba(255,220,118,.22);
  pointer-events: none;
}
.ilUiCanvasPanel > footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--studio-surface, rgba(10,15,27,.98));
  font-size: 8px;
}
.ilUiCanvasPanel > footer code { overflow: hidden; color: var(--cyan); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.ilUiElement {
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: var(--ilui-align);
  overflow: visible;
  border: var(--ilui-border-width) solid var(--ilui-border);
  border-radius: var(--ilui-radius);
  color: var(--ilui-fg);
  background: var(--ilui-bg);
  opacity: var(--ilui-opacity);
  font-size: var(--ilui-font-size);
  font-weight: var(--ilui-font-weight);
  line-height: 1.1;
  text-align: var(--ilui-align);
  cursor: move;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
  touch-action: none;
}
.ilUiElement > span:not(.ilUiProgressFill):not(.ilUiCheckBox):not(.ilUiSlotIcon),
.ilUiElement > b { width: 100%; padding: 1px 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilUiElement.selected { outline: 1px solid #75f3e2; outline-offset: 1px; box-shadow: 0 0 0 2px rgba(78,230,211,.14), 0 4px 12px rgba(0,0,0,.35); }
.ilUiElement.locked { cursor: not-allowed; }
.ilUiElement-text { border-color: transparent; background: transparent; box-shadow: none; }
.ilUiElement-text[style*="--ilui-shadow:true"] { text-shadow: 1px 1px rgba(0,0,0,.8); }
.ilUiElement-button { background: linear-gradient(180deg, color-mix(in srgb, var(--ilui-bg) 82%, white), var(--ilui-bg)); }
.ilUiElement-button:hover { filter: brightness(1.12); }
.ilUiElement-image img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; }
.ilUiImagePlaceholder { height: 100%; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--studio-muted, #a9b7ce); background: repeating-linear-gradient(45deg, var(--studio-wash, rgba(255,255,255,.025)), var(--studio-wash, rgba(255,255,255,.025)) 4px, transparent 4px, transparent 8px); }
.ilUiImagePlaceholder small { max-width: 90%; overflow: hidden; color: var(--studio-muted, #718096); font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }
.ilUiElement-item_slot { flex-direction: column; justify-content: center; gap: 1px; }
.ilUiSlotIcon { font-size: 10px; }
.ilUiElement-item_slot small { max-width: 100%; overflow: hidden; font-size: 4px; text-overflow: ellipsis; white-space: nowrap; }
.ilUiElement-progress { position: absolute; justify-content: center; overflow: hidden; }
.ilUiProgressFill { position: absolute; inset: 0 auto 0 0; opacity: .72; pointer-events: none; }
.ilUiElement-progress b { position: relative; z-index: 1; padding: 0 3px; font-size: 6px; text-align: center; }
.ilUiElement-checkbox { justify-content: flex-start; gap: 3px; padding: 1px 3px; }
.ilUiCheckBox { width: min(12px, 25%); aspect-ratio: 1; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--ilui-border); background: var(--studio-wash, rgba(0,0,0,.24)); font-size: 7px; }
.ilUiElement-checkbox b { min-width: 0; padding: 0; text-align: left; }
.ilUiResizeHandle {
  position: absolute;
  z-index: 100001;
  width: 7px;
  height: 7px;
  border: 1px solid var(--studio-line, #081513);
  border-radius: 1px;
  background: #7cf3e3;
  box-shadow: 0 0 4px rgba(87,236,219,.45);
}
.ilUiResizeHandle.nw { left: -4px; top: -4px; cursor: nwse-resize; }
.ilUiResizeHandle.n { left: calc(50% - 3px); top: -4px; cursor: ns-resize; }
.ilUiResizeHandle.ne { right: -4px; top: -4px; cursor: nesw-resize; }
.ilUiResizeHandle.e { right: -4px; top: calc(50% - 3px); cursor: ew-resize; }
.ilUiResizeHandle.se { right: -4px; bottom: -4px; cursor: nwse-resize; }
.ilUiResizeHandle.s { left: calc(50% - 3px); bottom: -4px; cursor: ns-resize; }
.ilUiResizeHandle.sw { left: -4px; bottom: -4px; cursor: nesw-resize; }
.ilUiResizeHandle.w { left: -4px; top: calc(50% - 3px); cursor: ew-resize; }

.ilUiInspector {
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--line);
  overflow: auto;
  scrollbar-width: thin;
}
.ilUiInspector > header > div:first-child { min-width: 0; display: grid; gap: 2px; }
.ilUiInspector > header b,
.ilUiInspector > header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilUiInspectorHeaderActions { display: flex; gap: 4px; }
.ilUiInspectorHeaderActions button { min-width: 28px; padding: 4px; }
.ilUiInspectorGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  padding: 10px;
}
.ilUiInspectorGrid label { min-width: 0; display: grid; gap: 4px; }
.ilUiInspectorGrid label.full { grid-column: 1 / -1; }
.ilUiInspectorGrid label > span { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ilUiInspectorGrid input,
.ilUiInspectorGrid select { min-width: 0; height: 27px; font-size: 8px; }
.ilUiInspectorGrid input[type="color"] { width: 100%; padding: 2px 4px; }
.ilUiCheckField {
  min-height: 30px;
  display: flex !important;
  grid-column: auto !important;
  flex-direction: row !important;
  align-items: center;
  gap: 7px !important;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--studio-wash, rgba(255,255,255,.02));
}
.ilUiCheckField input { width: 13px; height: 13px; }
.ilUiCheckField span { color: var(--text) !important; text-transform: none !important; }
.ilUiRuntimeHint {
  display: grid;
  gap: 5px;
  margin: 0 10px 10px;
  padding: 9px;
  border: 1px solid rgba(96,225,210,.16);
  border-radius: 8px;
  background: rgba(75,213,198,.04);
}
.ilUiRuntimeHint b { color: var(--cyan); font-size: 8px; }
.ilUiRuntimeHint code { overflow-wrap: anywhere; color: var(--text); font-size: 7px; }
.ilUiRuntimeHint small { color: var(--muted); font-size: 7px; line-height: 1.45; }
.ilUiMultiActions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }

.ilUiSidebarIntro {
  display: grid;
  gap: 5px;
  padding: 11px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(83,221,204,.08), rgba(104,83,232,.055));
}
.ilUiSidebarIntro b { color: var(--cyan); font-size: 10px; }
.ilUiSidebarIntro span { color: var(--muted); font-size: 8px; line-height: 1.45; }
.ilUiSidebarIntro button { justify-self: start; margin-top: 3px; }
.ilUiSidebarRows { padding: 5px; }
.ilUiSidebarRows > button {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
  padding: 6px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.ilUiSidebarRows > button:hover { background: var(--studio-wash, rgba(255,255,255,.035)); }
.ilUiSidebarRows > button.active { border-color: rgba(83,225,207,.2); background: rgba(75,214,198,.075); }
.ilUiSidebarRows > button > span { color: var(--cyan); text-align: center; }
.ilUiSidebarRows b,
.ilUiSidebarRows small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilUiSidebarRows b { font-size: 9px; }
.ilUiSidebarRows small { margin-top: 3px; color: var(--muted); font-size: 7px; }

#app.uiStudioActive .timeline,
#app.uiStudioActive [data-resize-panel="timeline"] { display: none !important; }
#app.uiStudioActive .mainGrid { grid-template-rows: minmax(0, 1fr) 0; }
#app.uiStudioActive .editor { grid-row: 1 / 3; }

html[data-theme="light"] .ilUiStudio,
body.lightTheme .ilUiStudio { background: linear-gradient(180deg, #f3f7fb, #e8eef5); }
html[data-theme="light"] .ilUiToolbar,
html[data-theme="light"] .ilUiLayers,
html[data-theme="light"] .ilUiInspector,
body.lightTheme .ilUiToolbar,
body.lightTheme .ilUiLayers,
body.lightTheme .ilUiInspector { background: rgba(247,250,253,.97); }
html[data-theme="light"] .ilUiCanvasPanel,
body.lightTheme .ilUiCanvasPanel { background-color: #cfd8e4; }
html[data-theme="light"] .ilUiCanvasPanel > footer,
body.lightTheme .ilUiCanvasPanel > footer { background: #eef3f8; }

@media (max-width: 1280px) {
  .ilUiAlignTools { display: none; }
  .ilUiWorkspace { grid-template-columns: 180px minmax(380px, 1fr) 260px; }
  .ilUiBrand { min-width: 150px; }
  .ilUiBrand small { display: none; }
}
@media (max-width: 980px) {
  .ilUiToolbar { overflow-x: auto; }
  .ilUiWorkspace { grid-template-columns: 168px minmax(360px, 1fr); }
  .ilUiInspector { position: absolute; top: 54px; right: 0; bottom: 0; z-index: 20; width: 286px; box-shadow: -16px 0 35px rgba(0,0,0,.28); }
}
@media (max-width: 720px) {
  .ilUiWorkspace { grid-template-columns: 1fr; }
  .ilUiLayers { display: none; }
  .ilUiBrand { min-width: 120px; }
  .ilUiToolbarGroup button { padding-inline: 6px; }
  .ilUiCanvasPanel > footer span { display: none; }
}

/* Security Centre: measured disposable-data cleanup */
.securityCleanupLauncher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--danger, #ff6d7a) 35%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger, #ff6d7a) 7%, var(--panel, var(--studio-surface, #111a2a)));
}
.securityCleanupLauncher > div { min-width: 0; }
.securityCleanupLauncher b { display: block; font-size: 12px; margin-bottom: 4px; }
.securityCleanupLauncher span { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; }
.securityCleanupLauncher .btn { flex: 0 0 auto; }
.securityAdminSection { margin-top: 12px; }
.securityAdminSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.securityAdminSectionHead > div { min-width: 0; }
.securityAdminSectionHead b { display: block; font-size: 12px; }
.securityAdminSectionHead span:not(.pill) { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.securityAdminSection .securityFindingGroups { margin-top: 0; }
.cleanupLoading {
  min-height: 180px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.cleanupLoading small { color: var(--muted); }
.cleanupIntro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 14px;
}
.cleanupIntro > div { min-width: 0; }
.cleanupIntro b, .cleanupIntro span { display: block; }
.cleanupIntro span { color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 4px; }
.cleanupIntro > strong { white-space: nowrap; font-size: 20px; }
.cleanupPathListPanel {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel, var(--studio-surface, #111a2a)));
}
.cleanupPathListHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.cleanupPathListHead > div { min-width: 0; }
.cleanupPathListHead b, .cleanupPathListHead span { display: block; }
.cleanupPathListHead b { font-size: 12px; }
.cleanupPathListHead span { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.cleanupPathListHead > .pill { flex: 0 0 auto; margin: 0; }
.cleanupPathListControls {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr);
  gap: 10px;
  margin-top: 10px;
}
.cleanupPathListControls > label { display: grid; gap: 5px; min-width: 0; font-size: 10px; font-weight: 700; }
.cleanupPathListNote { display: block; margin-top: 9px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.cleanupGrid { display: grid; gap: 9px; }
.cleanupOption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel, var(--studio-surface, #111a2a)) 92%, transparent);
  cursor: pointer;
}
.cleanupOption:hover:not(.disabled) { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); }
.cleanupOption.disabled { opacity: .6; cursor: not-allowed; }
.cleanupOption > input { margin-top: 3px; }
.cleanupOptionBody { display: block; min-width: 0; }
.cleanupOptionTitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.cleanupOptionTitle b { font-size: 12px; }
.cleanupOptionTitle strong { white-space: nowrap; font-size: 12px; }
.cleanupOptionBody > small { display: block; color: var(--muted); line-height: 1.45; margin-top: 4px; }
.cleanupOptionMeta, .cleanupOptionDetails {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
}
.cleanupOptionDetails { padding-top: 7px; border-top: 1px solid var(--border); }
.cleanupPathReview {
  margin-top: 9px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.cleanupPathReview summary { cursor: pointer; font-size: 10px; font-weight: 700; }
.cleanupPathReview ul { display: grid; gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; }
.cleanupPathReview li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-2, var(--panel, var(--studio-surface, #111a2a))) 88%, transparent);
}
.cleanupPathReview li > span { min-width: 0; }
.cleanupPathReview li b, .cleanupPathReview li code, .cleanupPathReview li small { display: block; }
.cleanupPathReview li b { font-size: 10px; }
.cleanupPathReview li code { margin-top: 2px; overflow-wrap: anywhere; color: var(--text); font-size: 9px; }
.cleanupPathReview li small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; line-height: 1.4; }
.cleanupPathReview li strong { font-size: 10px; white-space: nowrap; }
.cleanupWarning {
  display: block;
  margin-top: 8px;
  color: var(--warning, var(--studio-warn, #e7b65b));
  font-size: 10px;
  line-height: 1.4;
}
.cleanupTotal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2, var(--panel, var(--studio-surface, #111a2a)));
}
.cleanupTotal span { color: var(--muted); font-size: 11px; }
.cleanupTotal b { font-size: 11px; }
.cleanupTotal strong { font-size: 14px; white-space: nowrap; }
.cleanupProtected { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.cleanupProtected summary { cursor: pointer; font-size: 11px; font-weight: 700; }
.cleanupProtected ul { margin: 10px 0 0 18px; padding: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.cleanupConfirmList { display: grid; gap: 7px; margin-top: 12px; }
.cleanupConfirmRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
}
.cleanupConfirmRow span, .cleanupConfirmRow b, .cleanupConfirmRow small { display: block; }
.cleanupConfirmRow small { color: var(--muted); margin-top: 2px; }
.cleanupConfirmRow strong { white-space: nowrap; }
@media (max-width: 720px) {
  .securityCleanupLauncher, .cleanupIntro { align-items: stretch; flex-direction: column; }
  .securityCleanupLauncher .btn { width: 100%; }
  .cleanupPathListHead { align-items: stretch; flex-direction: column; }
  .cleanupPathListControls { grid-template-columns: 1fr; }
  .cleanupTotal { grid-template-columns: 1fr auto; }
  .cleanupTotal > span { grid-column: 1 / -1; }
}

/* Recovery and permanent project separation. */
.projectRecoveryNotice {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(120, 244, 237, 0.28);
  border-radius: 9px;
  background: rgba(120, 244, 237, 0.055);
}
.projectRecoveryNotice b {
  color: var(--studio-accent, #b9fffb);
  font-size: 11px;
}
.projectRecoveryNotice span {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}
.projectRecoveryNotice .btn {
  justify-self: start;
}
.projectDangerZone {
  margin-top: 3px;
  border: 1px solid rgba(255, 82, 111, 0.2);
  border-radius: 9px;
  background: rgba(255, 82, 111, 0.025);
  overflow: hidden;
}
.projectDangerZone > summary {
  cursor: pointer;
  padding: 9px 10px;
  color: var(--studio-bad, #d48b99);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  user-select: none;
}
.projectDangerZone[open] > summary {
  border-bottom: 1px solid rgba(255, 82, 111, 0.18);
  background: rgba(255, 82, 111, 0.04);
}
.projectDangerZoneBody {
  display: grid;
  gap: 6px;
  padding: 10px;
}
.projectDangerZoneBody b {
  color: var(--studio-bad, #ff9bad);
  font-size: 11px;
}
.projectDangerZoneBody span {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}
.projectDangerZoneBody .btn {
  justify-self: start;
}
.safeMaintenanceNotice {
  border-color: rgba(120, 244, 237, 0.28);
  background: rgba(120, 244, 237, 0.05);
}
.safeMaintenanceNotice b {
  color: var(--studio-accent, #b9fffb);
}
.recoveryInspectionGrid {
  display: grid;
  grid-template-columns: minmax(130px, auto) minmax(0, 1fr);
  gap: 7px 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--studio-wash, rgba(0, 0, 0, 0.12));
}
.recoveryInspectionGrid > span {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}
.recoveryInspectionGrid > b,
.recoveryInspectionGrid > code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--studio-accent, #dce8fa);
  font-size: 10px;
}
.recoveryInspectionGrid .warningText {
  color: var(--studio-warn, #f2bf61);
}
.recoveryAuditNote {
  margin-top: 10px;
  padding: 9px 10px;
  border-left: 3px solid rgba(242, 191, 97, 0.65);
  background: rgba(242, 191, 97, 0.055);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

/* Canonical docked workspace. focusMode is the only layout allowed to hide
   the application chrome. Explicit columns and stacking prevent an editor pane
   from covering the directory while the panel state still says it is visible. */
#app:not(.focusMode) .mainGrid {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  grid-template-columns: var(--activity) var(--sidebar) minmax(0, 1fr) var(--inspector);
}
#app:not(.focusMode):not(.panelActivityHidden) .activity {
  display: flex !important;
}
#app:not(.focusMode):not(.panelSidebarHidden) .sidebar {
  display: flex !important;
}
#app:not(.focusMode):not(.panelInspectorHidden) .inspector {
  display: flex !important;
}
#app:not(.focusMode):not(.panelTimelineHidden):not(.uiStudioActive) .timeline {
  display: grid !important;
}
@media (min-width: 821px) {
  #app:not(.focusMode) .activity,
  #app:not(.focusMode) .sidebar,
  #app:not(.focusMode) .editor,
  #app:not(.focusMode) .inspector,
  #app:not(.focusMode) .timeline {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    margin: 0 !important;
    place-self: stretch !important;
  }
  #app:not(.focusMode) .activity {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    z-index: 4;
  }
  #app:not(.focusMode) .sidebar {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    z-index: 4;
  }
  #app:not(.focusMode) .editor {
    grid-column: 3 !important;
    grid-row: 1 !important;
    z-index: 1;
  }
  #app:not(.focusMode) .inspector {
    grid-column: 4 !important;
    grid-row: 1 / 3 !important;
    z-index: 4;
  }
  #app:not(.focusMode):not(.uiStudioActive) .timeline {
    grid-column: 3 !important;
    grid-row: 2 !important;
    z-index: 3;
  }
  #app:not(.focusMode).panelTimelineHidden .editor,
  #app:not(.focusMode).uiStudioActive .editor {
    grid-row: 1 / 3 !important;
  }
}

/* Indexed search keeps the same expandable directory hierarchy as Explorer. */
.directorySearchNotice {
  margin: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
}

.tabs {
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.tab {
  flex: 0 0 auto;
  position: relative;
}
.tab[draggable="true"] {
  user-select: none;
}
.tab.dragging {
  opacity: 0.45;
}
.tab.dropBefore::before,
.tab.dropAfter::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--cyan);
}
.tab.dropBefore::before { left: 0; }
.tab.dropAfter::after { right: 0; }

.statusbar {
  min-width: 0;
  gap: 4px;
  padding: 0 6px;
  background: linear-gradient(90deg, var(--studio-surface, #0d5362) 0%, #3a306e 52%, #632f68 100%);
  overflow: hidden;
}
.statusProcess {
  height: 24px;
  max-width: 190px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid var(--studio-line, rgba(255,255,255,0.14));
  border-radius: 5px;
  color: var(--studio-accent, #f7fbff);
  background: var(--studio-wash, rgba(4,10,22,0.28));
  font: inherit;
  cursor: pointer;
}
.statusProcess:hover,
.statusProcess:focus-visible {
  background: var(--studio-wash, rgba(255,255,255,0.14));
}
.statusProcess b {
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.statusProcess > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.statusProcessIcon {
  width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  background: var(--studio-wash, rgba(255,255,255,.14));
  font-size: 8px;
  font-weight: 800;
}
.statusProcess.state-good { border-color: rgba(88,255,188,.48); }
.statusProcess.state-warn { border-color: rgba(255,205,93,.58); background: rgba(95,67,8,.34); }
.statusProcess.state-bad { border-color: rgba(255,104,126,.65); background: var(--studio-wash, rgba(100,18,34,.38)); }
.statusProcess.state-running { border-color: rgba(117,221,255,.66); background: rgba(10,71,98,.4); }
.statusProcess.state-muted { opacity: .8; }
.statusCurrent {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
}
.statusCurrent #statusText,
#assetStatus {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.processDetailPanel {
  position: fixed;
  left: 8px;
  bottom: calc(var(--status) + 8px);
  z-index: 120;
  width: min(460px, calc(100vw - 16px));
  max-height: min(520px, calc(100vh - 80px));
  overflow: auto;
  border: 1px solid var(--lineStrong);
  border-radius: 12px;
  background: var(--studio-surface, #0b1221);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.processDetailHead {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--studio-surface, #0d1628);
}
.processDetailHead span,
.processDetailBody small { color: var(--muted); }
.processDetailHead b { display: block; margin-top: 2px; }
.processDetailHead button {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 18px;
}
.processDetailBody { padding: 12px; }
.processDetailGrid { display: grid; gap: 9px; }
.processDetailRow {
  display: grid;
  grid-template-columns: 86px minmax(0,1fr);
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--studio-wash, rgba(255,255,255,.025));
}
.processDetailActions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }

.editorContextMenu {
  position: fixed;
  z-index: 180;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--lineStrong);
  border-radius: 9px;
  background: var(--studio-surface, #0d1628);
  box-shadow: 0 16px 46px rgba(0,0,0,.45);
}
.editorContextMenu button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.editorContextMenu button:hover:not(:disabled) { background: rgba(120,244,237,.1); }
.editorContextMenu button:disabled { opacity: .42; }
.editorContextMenu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 2px; }
.editorContextMenu kbd { color: var(--muted); font: 9px Cascadia Code, monospace; }

.ilGuidancePanel {
  display: grid;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(38,70,112,.35), rgba(82,38,104,.28));
}
.ilGuidanceSummary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ilGuidanceSummary b { margin-right: auto; }
.ilGuidanceBadge {
  padding: 2px 7px;
  border: 1px solid var(--lineStrong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 9px;
}
.ilGuidanceList { display: grid; gap: 7px; }
.ilGuidanceCard {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--studio-wash, rgba(4,10,20,.42));
}
.ilGuidanceCard pre {
  margin: 4px 0 0;
  max-height: 92px;
  overflow: auto;
  white-space: pre-wrap;
  font: 10px Cascadia Code, monospace;
  color: var(--text);
}
.ilGuidanceCard small { color: var(--muted); }
.ilGuidanceCard .nativeLabel { color: var(--studio-bad, #ffb3c2); }
.ilGuidanceCard .ilLabel { color: var(--studio-good, #87f1d0); }
.ilGuidanceCardActions { display: grid; gap: 5px; }
.ilGuidanceCardActions button { white-space: nowrap; }

.ilPreview {
  height: 100%;
  overflow: auto;
  padding: 18px;
  background: var(--studio-surface, #0a1020);
}
.ilPreviewHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.ilPreviewStats { display: flex; gap: 6px; flex-wrap: wrap; }
.ilPreviewGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ilPreviewField {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--studio-wash, rgba(255,255,255,.025));
}
.ilPreviewField b { display: block; margin-bottom: 4px; }
.ilPreviewProblems { margin-top: 14px; display: grid; gap: 7px; }
.ilPreviewProblem { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 10px; border-left: 3px solid var(--lineStrong); background: var(--studio-wash, rgba(255,255,255,.025)); }
.ilPreviewProblem > div { display: grid; gap: 3px; min-width: 0; }
.ilPreviewProblem > button { flex: 0 0 auto; }
.ilPreviewProblem.error { border-color: var(--bad); }
.ilPreviewProblem.warning { border-color: var(--warn); }
.ilPreviewProblem.info { border-color: var(--cyan); }
.ilTemplateShell { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 12px; min-height: 420px; }
.ilTemplateCategories { display: grid; align-content: start; gap: 5px; }
.ilTemplateCategories button { text-align: left; }
.ilTemplateList { display: grid; gap: 8px; max-height: 58vh; overflow: auto; }
.ilTemplateCard { padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--studio-wash, rgba(255,255,255,.025)); }
.ilTemplateCard pre { white-space: pre-wrap; max-height: 180px; overflow: auto; font: 10px Cascadia Code, monospace; }

html[data-theme="light"] .processDetailPanel,
html[data-theme="light"] .editorContextMenu { background: #f7f9fd; }
html[data-theme="light"] .processDetailHead { background: #edf2f8; }
html[data-theme="light"] .ilPreview { background: #f7f9fd; }

@media (max-width: 980px) {
  .statusProcess b { display: none; }
  .statusProcess { max-width: 96px; }
  .ilGuidanceCard { grid-template-columns: 1fr; }
  .ilTemplateShell { grid-template-columns: 1fr; }
}

/* Slice 39 advanced editor surfaces */
#app > .statusbar {
  grid-column: 1;
  grid-row: 3;
  min-height: var(--status);
  position: relative;
  z-index: 40;
  visibility: visible;
}
.editor > .tabs {
  min-height: 36px;
  position: relative;
  z-index: 12;
  visibility: visible;
}
.wideDialog {
  width: min(1180px, 97vw);
}
.ilTemplateStudio,
.newFileTemplateShell,
.globalSearchShell {
  display: grid;
  gap: 14px;
}
.ilTemplateHero,
.newFileTemplateHero,
.globalSearchHero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 15px;
  border: 1px solid var(--line2);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37, 200, 219, 0.09), rgba(183, 119, 255, 0.1));
}
.ilTemplateHero h3,
.newFileTemplateHero h3,
.globalSearchHero h3 {
  margin: 4px 0 5px;
  font-size: 17px;
}
.ilTemplateHero p,
.newFileTemplateHero p,
.globalSearchHero p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.ilTemplateHeroStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(84px, 1fr));
  gap: 6px;
  flex: 0 0 auto;
}
.ilTemplateHeroStats span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--studio-wash, rgba(2, 8, 20, 0.32));
  color: var(--muted);
  font-size: 9px;
}
.ilTemplateHeroStats b {
  color: var(--cyan);
  font-size: 15px;
}
.ilTemplateToolbar,
.newFileTemplateToolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 340px);
  gap: 10px;
}
.ilTemplateToolbar label,
.globalSearchControls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}
.ilTemplateWorkspace {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  min-height: 480px;
}
.ilTemplateWorkspace > aside {
  border-right: 1px solid var(--line);
  padding-right: 10px;
}
.ilTemplateCategory {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  text-align: left;
}
.ilTemplateCategory:hover,
.ilTemplateCategory.active {
  color: var(--text);
  border-color: var(--line2);
  background: rgba(120, 244, 237, 0.08);
}
.ilTemplateCategory b {
  min-width: 25px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.06));
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}
.ilTemplateList {
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-content: start;
  padding-right: 4px;
}
.ilTemplateCard.advanced {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 270px;
  padding: 12px;
  background: linear-gradient(180deg, var(--studio-surface, rgba(19, 29, 51, 0.74)), var(--studio-wash, rgba(8, 15, 30, 0.66)));
}
.ilTemplateCard.advanced > header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}
.ilTemplateCard.advanced h3 {
  margin: 2px 0 0;
  font-size: 13px;
}
.ilTemplateIcon,
.newFileTemplateIcon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(120, 244, 237, 0.28);
  border-radius: 9px;
  background: rgba(120, 244, 237, 0.08);
  color: var(--cyan);
  font: 700 12px Cascadia Code, monospace;
}
.ilTemplateSupport {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 8px;
  white-space: nowrap;
}
.ilTemplateSupport.supported { color: var(--good); border-color: rgba(88, 230, 169, 0.34); }
.ilTemplateSupport.warning { color: var(--warn); border-color: rgba(255, 200, 87, 0.34); }
.ilTemplateSupport.portable { color: var(--cyan); border-color: rgba(120, 244, 237, 0.34); }
.ilTemplateDescription {
  min-height: 31px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.ilTemplateCard details {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--studio-wash, rgba(0, 0, 0, 0.16));
}
.ilTemplateCard details summary {
  padding: 7px 9px;
  color: var(--muted);
  font-size: 9px;
  cursor: pointer;
}
.ilTemplateCard details pre {
  margin: 0;
  padding: 9px;
  border-top: 1px solid var(--line);
}
.ilTemplateMetadata,
.ilTemplateTargetEvidence {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ilTemplateMetadata span,
.ilTemplateTargetEvidence span {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font: 8px Cascadia Code, monospace;
}
.ilTemplateMetadata span.operation { color: var(--studio-violet, #d6b8ff); }
.ilTemplateTargetEvidence span.native,
.ilTemplateTargetEvidence span.generated { color: var(--good); }
.ilTemplateTargetEvidence span.blocked,
.ilTemplateTargetEvidence span.strict,
.ilTemplateTargetEvidence span.undeclared { color: var(--warn); }
.ilTemplateCard.advanced > footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: auto;
}
.newFileTemplateToolbar {
  grid-template-columns: minmax(260px, 1fr);
}
.newFileTemplateCategories {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.newFileTemplateGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 8px;
  max-height: 58vh;
  overflow: auto;
  padding-right: 4px;
}
.newFileTemplateCard {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
  color: var(--text);
  text-align: left;
}
.newFileTemplateCard:hover {
  border-color: rgba(120, 244, 237, 0.34);
  background: rgba(120, 244, 237, 0.07);
}
.newFileTemplateCard div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.newFileTemplateCard small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}
.newFileTemplateCard code {
  color: var(--cyan);
  font-size: 9px;
}
.newFileTemplateDetails {
  display: grid;
  gap: 14px;
}
.newFileTemplateIdentity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: rgba(120, 244, 237, 0.05);
}
.newFileTemplateIdentity > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(120, 244, 237, 0.1);
  color: var(--cyan);
  font: 700 12px Cascadia Code, monospace;
}
.newFileTemplateIdentity div { display: grid; gap: 3px; }
.newFileTemplateIdentity small { color: var(--muted); }
.templateNameInput {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}
.templateNameInput input {
  border-radius: 8px 0 0 8px;
}
.templateNameInput span {
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  color: var(--cyan);
  background: var(--studio-wash, rgba(255, 255, 255, 0.035));
  font: 10px Cascadia Code, monospace;
}
.templatePathPreview,
.templateContentPreview {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--studio-wash, rgba(0, 0, 0, 0.18));
}
.templatePathPreview { color: var(--cyan); }
.templateContentPreview {
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--code-text);
  font: 10px Cascadia Code, monospace;
}
.globalSearchControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr) minmax(220px, 0.45fr);
  gap: 9px;
}
.globalSearchControls .wide { grid-column: 1 / -1; }
.globalSearchOptions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.globalSearchStatus {
  padding: 7px 9px;
  border-left: 3px solid var(--cyan);
  background: rgba(120, 244, 237, 0.05);
  color: var(--muted);
  font-size: 10px;
}
.globalSearchResults {
  display: grid;
  gap: 8px;
  max-height: 55vh;
  overflow: auto;
  padding-right: 4px;
}
.globalSearchFile {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--studio-wash, rgba(255, 255, 255, 0.02));
}
.globalSearchFile > header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
}
.globalSearchFile > header div { display: grid; gap: 2px; min-width: 0; }
.globalSearchFile > header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; }
.globalSearchFile > header > span:last-child { color: var(--cyan); font-size: 10px; }
.globalSearchMatch {
  width: 100%;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
}
.globalSearchMatch:last-child { border-bottom: 0; }
.globalSearchMatch:hover { background: rgba(120, 244, 237, 0.06); }
.globalSearchMatch b { color: var(--muted); font: 9px Cascadia Code, monospace; }
.globalSearchMatch code { overflow: hidden; text-overflow: ellipsis; white-space: pre; color: var(--code-text); font: 10px Cascadia Code, monospace; }
.globalSearchMatch mark { padding: 1px 2px; border-radius: 2px; background: rgba(255, 200, 87, 0.24); color: var(--studio-warn, #fff3bf); }
.configManager {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  background: var(--code-bg);
}
.configManagerSidebar {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 9px;
  padding: 12px;
  border-right: 1px solid var(--line);
  background: var(--studio-surface, #0a1020);
}
.configManagerSidebar > header,
.configEditorHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.configManagerSidebar h2,
.configEditorHeader h3 { margin: 3px 0 0; }
.configScopeTabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.configScopeTabs button {
  display: grid;
  gap: 2px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
  color: var(--muted);
  font-size: 9px;
}
.configScopeTabs button.active {
  border-color: rgba(120, 244, 237, 0.34);
  color: var(--text);
  background: rgba(120, 244, 237, 0.08);
}
.configScopeTabs b { color: var(--cyan); }
.configManagerCount { color: var(--muted); font-size: 9px; }
.configManagerList { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 5px; }
.configRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.configRow:hover,
.configRow.active { border-color: var(--line2); background: rgba(120, 244, 237, 0.06); }
.configRow div { display: grid; gap: 2px; min-width: 0; }
.configRow small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 8px; }
.configRow code { color: var(--muted); font-size: 8px; }
.configScopeBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 8px;
}
.configScopeBadge.client { color: var(--cyan); border-color: rgba(120, 244, 237, 0.3); }
.configScopeBadge.server { color: var(--studio-violet, #d6b8ff); border-color: rgba(183, 119, 255, 0.3); }
.configScopeBadge.common { color: var(--good); border-color: rgba(88, 230, 169, 0.3); }
.configManagerEditor {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 9px;
  padding: 14px;
}
.configEditorHeader > div:first-child { min-width: 0; }
.configEditorHeader small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.configEditorActions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.configEditorMeta { display: flex; flex-wrap: wrap; gap: 6px; }
.configEditorMeta span { padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 9px; }
.configEditorMeta b { color: var(--text); }
.configEditorText {
  width: 100%;
  min-height: 0;
  resize: none;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  background: var(--studio-surface, #080e1c);
  color: var(--code-text);
  font-size: 11px;
  line-height: 1.55;
  tab-size: 2;
}
.configEditorText:focus { border-color: rgba(120, 244, 237, 0.45); }
.configManagerEditor > footer { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 9px; }
.configManagerWelcome {
  grid-row: 1 / -1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
}
.configManagerWelcome > span { font-size: 38px; color: var(--cyan); }
.configManagerWelcome h3 { margin: 0; color: var(--text); }
.configManagerWelcome p { max-width: 440px; margin: 0; line-height: 1.5; }
.configPathPanel { display: grid; gap: 10px; }
.configPathPanel section { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; }
.configPathPanel section > span { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.configPathPanel code { overflow-wrap: anywhere; color: var(--cyan); }
.configPathPanel p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

@media (max-width: 900px) {
  .ilTemplateHero,
  .newFileTemplateHero,
  .globalSearchHero { display: grid; }
  .ilTemplateHeroStats { width: 100%; }
  .ilTemplateWorkspace { grid-template-columns: 1fr; }
  .ilTemplateWorkspace > aside { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 9px; }
  .ilTemplateCategories { display: flex; flex-wrap: wrap; }
  .ilTemplateCategory { width: auto; }
  .globalSearchControls { grid-template-columns: 1fr; }
  .globalSearchControls .wide { grid-column: auto; }
  .configManager { grid-template-columns: 1fr; }
  .configManagerSidebar { max-height: 40%; border-right: 0; border-bottom: 1px solid var(--line); }
}
#app.focusMode > .statusbar,
#app.lockdownActive.focusMode > .statusbar {
  grid-row: 2;
}


/* Advanced code workspace */
#app.codeWorkspaceActive .workToolbar {
  min-height: 42px;
  padding: 5px 8px;
  border-bottom-color: rgba(120, 244, 237, 0.13);
  background: linear-gradient(180deg, var(--studio-surface, rgba(14, 21, 38, 0.98)), var(--studio-surface, rgba(8, 13, 25, 0.98)));
}
#app.codeWorkspaceActive .codeTools {
  width: 100%;
  gap: 5px;
}
#app.codeWorkspaceActive .codeTools .toolBtn {
  min-height: 29px;
  border-color: transparent;
  background: transparent;
  color: var(--studio-muted, #aab7cc);
}
#app.codeWorkspaceActive .codeTools .toolBtn:hover,
#app.codeWorkspaceActive .codeTools .toolBtn.active {
  border-color: rgba(120, 244, 237, 0.22);
  background: rgba(120, 244, 237, 0.075);
  color: var(--studio-accent, #ebffff);
}
#app.codeWorkspaceActive #ilProblemsBtn.active {
  color: var(--studio-warn, #fff1bf);
  border-color: rgba(255, 200, 87, 0.28);
  background: rgba(255, 200, 87, 0.08);
}
.codeBreadcrumbBar {
  position: relative;
  z-index: 4;
  min-height: 35px;
  padding: 0 10px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--studio-surface, rgba(7, 12, 23, 0.96));
}
.codeBreadcrumb {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: var(--studio-muted, #74829a);
  font: 10px/1.2 "Cascadia Code", Consolas, monospace;
  white-space: nowrap;
}
.codeBreadcrumb span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.codeBreadcrumb span.current {
  color: var(--studio-accent, #d8e6fb);
}
.codeBreadcrumb i {
  color: #4f5d75;
  font-style: normal;
}
.codeIntelligenceState {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--studio-muted, #8d9bb2);
  font-size: 9px;
}
.codeIntelligenceState > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 10px rgba(88, 230, 169, 0.5);
}
.codeIntelligenceState b {
  color: var(--studio-ink, #c8d4e7);
  font-weight: 650;
}
.codeIntelligenceState small {
  color: var(--studio-muted, #6f7d94);
}
.codePane .monaco-editor,
.codePane .monaco-editor-background,
.codePane .margin {
  background-color: var(--studio-surface, #09101e) !important;
}
.codePane .codeFallback {
  background: var(--studio-surface, #09101e);
}
.codeWorkspaceSurface {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 300px);
  overflow: hidden;
}
.codeWorkspaceSurface.coachClosed { grid-template-columns: minmax(0, 1fr); }
.codeCoachPanel {
  position: relative;
  z-index: 5;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  border-left: 1px solid rgba(120, 244, 237, .14);
  background:
    radial-gradient(circle at 100% 0, rgba(111, 92, 255, .09), transparent 34%),
    linear-gradient(180deg, var(--studio-surface, #0c1524), var(--studio-surface, #080e1a));
  box-shadow: -12px 0 28px rgba(0, 0, 0, .13);
}
.codeCoachPanel[hidden] { display: none; }
.codeCoachPanel > header {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(120, 244, 237, .025);
}
.codeCoachPanel > header > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.codeCoachPanel > header > div > div { display: grid; gap: 2px; min-width: 0; }
.codeCoachPanel > header b { color: var(--studio-accent, #e7ffff); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.codeCoachPanel > header small { color: var(--muted); font-size: 8px; }
.codeCoachPanel > header button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
}
.codeCoachPanel > header button:hover { color: var(--text); background: rgba(255,255,255,.055); }
.codeCoachLogo {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(120, 244, 237, .3);
  border-radius: 8px;
  color: #8efff7;
  background: linear-gradient(135deg, rgba(48, 203, 217, .16), rgba(146, 102, 255, .14));
  font: 850 9px "Cascadia Code", Consolas, monospace;
}
.codeWordHelper {
  margin: 10px 10px 0;
  padding: 10px;
  border: 1px solid rgba(120, 244, 237, .17);
  border-radius: 10px;
  background: rgba(120, 244, 237, .035);
  box-shadow: inset 2px 0 rgba(120, 244, 237, .5);
}
.codeWordHelper > span,
.codeCoachChoose label,
.codeCoachOutcome > span,
.codeCoachPanel > footer > span {
  display: block;
  color: var(--studio-accent, #86f6ef);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.codeWordHelper b { display: block; margin-top: 6px; color: var(--text); font: 700 10px/1.35 "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }
.codeWordHelper p { margin: 5px 0 7px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.codeWordHelper small { color: #667991; font-size: 8px; }
.codeCoachChoose { padding: 12px 10px 8px; }
.codeCoachChoose .field { width: 100%; height: 32px; margin-top: 6px; font-size: 10px; }
.codeCoachLesson { margin: 0 10px 10px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.codeCoachLesson > header { display: flex; align-items: center; gap: 9px; }
.codeCoachLesson > header > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--studio-accent, #89fff6); background: rgba(120,244,237,.07); font-weight: 800; }
.codeCoachLesson > header > div { display: grid; gap: 2px; min-width: 0; }
.codeCoachLesson > header small { color: var(--muted); font-size: 7px; letter-spacing: .1em; }
.codeCoachLesson > header b { color: var(--text); font-size: 11px; line-height: 1.3; }
.codeCoachLesson > p { margin: 9px 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.codeCoachOutcome { padding: 8px; border-radius: 8px; background: rgba(112, 93, 255, .07); }
.codeCoachOutcome p { margin: 5px 0 0; color: var(--studio-ink, #c8d6e9); font-size: 9px; line-height: 1.45; }
.codeCoachLessonMeta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.codeCoachLessonMeta span { padding: 3px 6px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.04); font-size: 7px; }
.codeCoachLessonActions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.codeCoachLessonActions .primary { grid-column: 1 / -1; }
.codeCoachLessonActions .btn { min-width: 0; white-space: normal; font-size: 8px; }
.codeCoachPanel > footer {
  margin-top: auto;
  padding: 9px 10px 11px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.08);
}
.codeCoachPanel > footer > span { width: 100%; margin-bottom: 2px; color: var(--muted); }
.codeCoachPanel > footer > div { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 8px; }
.codeCoachPanel > footer b { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; color: #061315; background: #75ddd5; font-size: 7px; }
.codeCoachPanel > footer i { color: #52647c; font-size: 8px; font-style: normal; }

@media (max-width: 1180px) {
  .codeWorkspaceSurface { grid-template-columns: minmax(0, 1fr); }
  .codeCoachPanel {
    position: absolute;
    inset: 8px 8px 8px auto;
    width: min(310px, calc(100% - 16px));
    border: 1px solid rgba(120, 244, 237, .18);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  }
}
html[data-theme="light"] .codeCoachPanel { background: linear-gradient(180deg, #f7fbfd, #edf3f7); }
html[data-theme="light"] .codeWordHelper { background: rgba(20, 145, 155, .05); }

/* Dedicated right-side IL Problems panel. */
.ilProblemsPanel {
  grid-column: 4;
  grid-row: 1 / 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--studio-line, rgba(255, 255, 255, 0.08));
  background: linear-gradient(180deg, var(--studio-surface, #0c1323), var(--studio-surface, #080e1a));
}
.ilProblemsPanelHead {
  min-height: 48px;
  padding: 8px 9px 8px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: var(--studio-surface, rgba(13, 20, 36, 0.92));
}
.ilProblemsIdentity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.ilProblemsIdentity > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.ilProblemsIdentity b {
  font-size: 11px;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}
.ilProblemsIdentity small {
  color: var(--muted);
  font-size: 9px;
}
.ilPanelLogo {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(120, 244, 237, 0.27);
  border-radius: 7px;
  color: var(--cyan);
  background: linear-gradient(135deg, rgba(37, 200, 219, 0.12), rgba(183, 119, 255, 0.12));
  font: 800 9px "Cascadia Code", monospace;
}
.ilProblemsPanelTools {
  display: flex;
  gap: 3px;
}
.ilProblemsPanelTools button {
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
}
.ilProblemsPanelTools button:hover {
  color: var(--text);
  background: var(--studio-wash, rgba(255, 255, 255, 0.06));
}
.ilProblemCounters {
  min-height: 35px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--studio-wash, rgba(5, 10, 19, 0.35));
}
.ilProblemCounters > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}
.ilProblemCounters i {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  font-weight: 800;
}
.ilProblemCounters .error i { color: var(--studio-bad, #ffd6de); background: rgba(255, 107, 131, 0.9); }
.ilProblemCounters .warning i { color: #251c00; background: rgba(255, 200, 87, 0.95); }
.ilProblemCounters .info i { color: #041b22; background: rgba(120, 244, 237, 0.95); }
.convertWholeScriptBtn {
  min-height: 58px;
  margin: 10px 10px 6px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(183, 119, 255, 0.3);
  border-radius: 9px;
  color: var(--text);
  background: linear-gradient(135deg, rgba(37, 200, 219, 0.09), rgba(183, 119, 255, 0.13));
  text-align: left;
}
.convertWholeScriptBtn > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--studio-violet, #e8ccff);
  background: rgba(183, 119, 255, 0.14);
  font-size: 16px;
}
.convertWholeScriptBtn > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.convertWholeScriptBtn b { font-size: 11px; }
.convertWholeScriptBtn small { color: var(--muted); font-size: 9px; }
.convertWholeScriptBtn:hover:not(:disabled) {
  border-color: rgba(120, 244, 237, 0.45);
  background: linear-gradient(135deg, rgba(37, 200, 219, 0.16), rgba(183, 119, 255, 0.19));
}
.convertWholeScriptBtn:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}
.ilProblemsConversionSummary {
  margin: 2px 10px 7px;
  padding: 8px 9px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(88, 230, 169, 0.18);
  border-radius: 8px;
  background: rgba(88, 230, 169, 0.055);
}
.ilProblemsConversionSummary b { color: var(--studio-good, #baf5dc); font-size: 10px; }
.ilProblemsConversionSummary span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.ilProblemsPanelBody {
  min-height: 0;
  flex: 1;
  padding: 3px 8px 12px;
  overflow: auto;
}
.ilProblemsGroup {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}
.ilProblemsGroup h3 {
  margin: 0;
  padding: 0 4px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--studio-muted, #a9b5c9);
  font-size: 9px;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}
.ilProblemsGroup h3 span {
  min-width: 17px;
  padding: 1px 5px;
  border-radius: 999px;
  color: var(--studio-muted, #7f8da4);
  background: var(--studio-wash, rgba(255, 255, 255, 0.045));
  text-align: center;
}
.ilProblemCard {
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.018));
}
.ilProblemCard:hover {
  border-color: var(--studio-line, rgba(255, 255, 255, 0.085));
  background: var(--studio-wash, rgba(255, 255, 255, 0.028));
}
.ilProblemCardMain {
  width: 100%;
  padding: 9px 8px 7px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.ilProblemCardMain > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
}
.ilProblemCardMain b {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  white-space: nowrap;
}
.ilProblemCardMain small {
  color: var(--studio-muted, #708099);
  font: 8px "Cascadia Code", monospace;
}
.ilProblemCardMain p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--studio-muted, #98a5ba);
  font-size: 9px;
  line-height: 1.45;
}
.ilProblemCardActions {
  min-height: 30px;
  padding: 4px 7px 6px 23px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.ilProblemCardActions button {
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--studio-ink, #b5c2d6);
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
  font-size: 8px;
}
.ilProblemCardActions button:hover {
  color: var(--studio-accent, #efffff);
  border-color: rgba(120, 244, 237, 0.3);
  background: rgba(120, 244, 237, 0.07);
}
.ilProblemCardActions span {
  color: var(--studio-muted, #7c899f);
  font-size: 8px;
}
.ilProblemCardActions em {
  margin-left: auto;
  color: var(--good);
  font-size: 7px;
  font-style: normal;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}
.ilProblemsEmpty {
  min-height: 220px;
  padding: 34px 18px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
}
.ilProblemsEmpty > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(120, 244, 237, 0.22);
  border-radius: 11px;
  color: var(--cyan);
  background: rgba(120, 244, 237, 0.06);
  font-weight: 800;
}
.ilProblemsEmpty.clean > span {
  color: var(--good);
  border-color: rgba(88, 230, 169, 0.25);
  background: rgba(88, 230, 169, 0.065);
}
.ilProblemsEmpty b { color: var(--studio-accent, #d8e5f7); font-size: 11px; }
.ilProblemsEmpty p { max-width: 240px; margin: 0; font-size: 9px; line-height: 1.5; }

@media (max-width: 1050px) {
  .codeIntelligenceState small { display: none; }
  .ilProblemsPanel { min-width: 260px; }
}

/* Slice 39 contextual code intelligence */
.ilDiagnosticPopover {
  position: fixed;
  z-index: 190;
  width: min(430px, calc(100vw - 16px));
  max-height: min(420px, calc(100vh - 24px));
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--lineStrong);
  border-radius: 11px;
  background: var(--studio-surface, #0d1628);
  box-shadow: 0 18px 56px rgba(0,0,0,.5);
}
.ilQuickFixHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ilQuickFixHead > div { display: grid; gap: 5px; min-width: 0; }
.ilQuickFixHead > div > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilQuickFixHead > button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
}
.ilQuickSeverity {
  width: max-content;
  padding: 2px 7px;
  border: 1px solid var(--lineStrong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ilQuickSeverity.error { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.ilQuickSeverity.warning { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.ilQuickSeverity.info { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 55%, transparent); }
.ilQuickSeverity.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 55%, transparent); }
.ilQuickMessage { margin: 9px 0; color: var(--muted); }
.ilQuickCompare {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--studio-wash, rgba(255,255,255,.025));
}
.ilQuickCompare.native { border-left: 3px solid var(--warn); }
.ilQuickCompare.portable { border-left: 3px solid var(--cyan); }
.ilQuickCompare small,
.ilQuickImports summary { color: var(--muted); }
.ilQuickCompare pre,
.ilQuickImports pre {
  margin: 0;
  max-height: 120px;
  overflow: auto;
  white-space: pre-wrap;
  font: 10px Cascadia Code, Consolas, monospace;
  color: var(--text);
}
.ilQuickImports {
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.ilQuickImports pre { margin-top: 7px; }
.ilQuickActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.ilQuickProblemList {
  display: grid;
  gap: 4px;
  margin-top: 9px;
}
.ilQuickProblemList > button {
  display: grid;
  grid-template-columns: 9px minmax(0,1fr);
  gap: 9px;
  align-items: start;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.ilQuickProblemList > button:hover { border-color: var(--line); background: rgba(120,244,237,.06); }
.ilQuickProblemList > button > div { display: grid; gap: 3px; min-width: 0; }
.ilQuickProblemList small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ilProblemDot {
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--cyan);
}
.ilProblemDot.error { background: var(--bad); }
.ilProblemDot.warning { background: var(--warn); }
.ilProblemDot.info { background: var(--cyan); }
.editorContextDiagnostic {
  display: grid;
  grid-template-columns: 9px minmax(0,1fr);
  gap: 9px;
  align-items: start;
  padding: 7px 8px 9px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.editorContextDiagnostic > div { display: grid; gap: 3px; min-width: 0; }
.editorContextDiagnostic small {
  color: var(--muted);
  max-width: 270px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme="light"] .ilDiagnosticPopover { background: #f7f9fd; }

/* Compact Interactive Library suggestions. The idle gate in studio-client.js controls when this opens. */
.codePane .monaco-editor .suggest-widget {
  min-width: 340px !important;
  max-width: min(480px, calc(100vw - 36px)) !important;
  overflow: hidden !important;
  border: 1px solid rgba(120, 244, 237, 0.16) !important;
  border-radius: 8px !important;
  background: var(--studio-surface, #0d1627) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.46) !important;
}
.codePane .monaco-editor .suggest-widget .monaco-list,
.codePane .monaco-editor .suggest-widget .monaco-list-rows {
  background: transparent !important;
}
.codePane .monaco-editor .suggest-widget .monaco-list {
  padding: 4px !important;
}
.codePane .monaco-editor .suggest-widget .monaco-list-row {
  min-height: 30px !important;
  padding: 3px 6px !important;
  border-radius: 5px;
  color: var(--studio-ink, #c8d4e7) !important;
}
.codePane .monaco-editor .suggest-widget .monaco-list-row:hover {
  background: rgba(120, 244, 237, 0.045) !important;
}
.codePane .monaco-editor .suggest-widget .monaco-list-row.focused,
.codePane .monaco-editor .suggest-widget .monaco-list-row.selected {
  color: var(--studio-accent, #f1ffff) !important;
  background: rgba(37, 200, 219, 0.13) !important;
  box-shadow: inset 2px 0 #78f4ed;
}
.codePane .monaco-editor .suggest-widget .monaco-list-row .icon {
  width: 18px !important;
  height: 18px !important;
  margin: 2px 7px 0 0 !important;
  color: var(--studio-accent, #78f4ed) !important;
}
.codePane .monaco-editor .suggest-widget .monaco-icon-label-container,
.codePane .monaco-editor .suggest-widget .contents,
.codePane .monaco-editor .suggest-widget .main {
  min-width: 0 !important;
}
.codePane .monaco-editor .suggest-widget .label-name,
.codePane .monaco-editor .suggest-widget .monaco-highlighted-label {
  color: var(--studio-ink, #e0e9f7) !important;
  font-weight: 600 !important;
}
.codePane .monaco-editor .suggest-widget .monaco-highlighted-label .highlight {
  color: var(--studio-accent, #78f4ed) !important;
  font-weight: 750 !important;
}
.codePane .monaco-editor .suggest-widget .label-description,
.codePane .monaco-editor .suggest-widget .details-label,
.codePane .monaco-editor .suggest-widget .type-label,
.codePane .monaco-editor .suggest-widget .label-detail {
  color: var(--studio-muted, #7f8da4) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
}
.codePane .monaco-editor .suggest-widget .readMore {
  color: var(--studio-violet, #bfa1e8) !important;
}
.codePane .monaco-editor .suggest-widget .suggest-status-bar {
  display: none !important;
}
.codePane .monaco-editor .suggest-details {
  overflow: hidden !important;
  border: 1px solid rgba(120, 244, 237, 0.14) !important;
  border-radius: 8px !important;
  color: var(--studio-muted, #aebbd0) !important;
  background: var(--studio-surface, #0d1627) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.44) !important;
}
.codePane .monaco-editor .suggest-details .header {
  min-height: 28px !important;
  border-bottom: 1px solid var(--studio-line, rgba(255, 255, 255, 0.055)) !important;
  color: var(--studio-accent, #d9e6f7) !important;
  background: var(--studio-wash, rgba(255, 255, 255, 0.018)) !important;
}
.codePane .monaco-editor .suggest-details .body {
  padding: 9px 10px !important;
  color: var(--studio-muted, #98a7bd) !important;
  line-height: 1.45 !important;
}
.codePane .monaco-editor .suggest-details code {
  color: var(--studio-accent, #8ef7f1) !important;
  background: rgba(120, 244, 237, 0.05) !important;
}
.codePane .monaco-editor .suggest-widget .monaco-scrollable-element > .scrollbar > .slider,
.codePane .monaco-editor .suggest-details .monaco-scrollable-element > .scrollbar > .slider {
  border-radius: 999px;
  background: rgba(120, 244, 237, 0.2) !important;
}

.ilProblemInlineRewrite {
  grid-column: 1 / -1;
  display: block;
  margin-top: 5px;
  padding: 5px 6px;
  overflow: hidden;
  border: 1px solid rgba(120, 244, 237, 0.09);
  border-radius: 6px;
  color: var(--studio-accent, #83d8dc);
  background: rgba(120, 244, 237, 0.035);
  font: 8px/1.35 "Cascadia Code", Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ilQuickArguments {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(120, 244, 237, 0.13);
  border-radius: 8px;
  background: rgba(120, 244, 237, 0.025);
}
.ilQuickArguments summary {
  color: var(--studio-muted, #a9cbd2);
  cursor: pointer;
  font-size: 9px;
}
.ilQuickArguments ol {
  display: grid;
  gap: 4px;
  margin: 7px 0 0;
  padding-left: 22px;
}
.ilQuickArguments li { color: var(--studio-muted, #74839b); font-size: 9px; }
.ilQuickArguments code {
  display: block;
  max-height: 60px;
  overflow: auto;
  color: var(--studio-accent, #d9e7f7);
  font: 9px/1.4 "Cascadia Code", Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ilQuickArguments p {
  margin: 7px 0 0;
  color: var(--studio-muted, #738199);
  font-size: 8px;
  line-height: 1.45;
}
.ilQuickFollowUp {
  margin-top: 8px;
  padding: 8px 9px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255, 200, 87, 0.16);
  border-radius: 8px;
  background: rgba(255, 200, 87, 0.035);
}
.ilQuickFollowUp b { color: var(--studio-warn, #efd899); font-size: 9px; }
.ilQuickFollowUp span { color: var(--studio-muted, #9a927c); font-size: 8px; line-height: 1.45; }

html[data-theme="light"] .codePane .monaco-editor .suggest-widget,
html[data-theme="light"] .codePane .monaco-editor .suggest-details {
  border-color: rgba(24, 105, 127, 0.2) !important;
  background: rgba(247, 250, 255, 0.99) !important;
  box-shadow: 0 20px 50px rgba(32, 48, 76, 0.2) !important;
}
html[data-theme="light"] .codePane .monaco-editor .suggest-widget .monaco-list-row.focused,
html[data-theme="light"] .codePane .monaco-editor .suggest-widget .monaco-list-row.selected {
  color: #102239 !important;
  background: linear-gradient(90deg, rgba(37, 200, 219, 0.13), rgba(183, 119, 255, 0.08)) !important;
}

/* Reviewed Python script organisation */
.scriptOrganisationIntro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel, var(--studio-surface, #111a2a)) 92%, var(--accent) 8%);
}
.scriptOrganisationIntro > div { min-width: 0; }
.scriptOrganisationIntro b, .scriptOrganisationIntro span { display: block; }
.scriptOrganisationIntro span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.scriptOrganisationIntro > .pill { flex: 0 0 auto; margin: 0; color: inherit; }
.scriptOrganisationSummary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.scriptOrganisationSummary > div {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel, var(--studio-surface, #111a2a));
}
.scriptOrganisationSummary b { display: block; font-size: 18px; }
.scriptOrganisationSummary span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.scriptOrganisationCoverage {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  margin: 10px 0;
  border: 1px solid color-mix(in srgb, var(--good) 42%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--good) 8%, var(--panel, var(--studio-surface, #111a2a)));
}
.scriptOrganisationCoverage span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.scriptOrganisationSection {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel, var(--studio-surface, #111a2a));
}
.scriptOrganisationSection > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  list-style: none;
}
.scriptOrganisationSection > summary::-webkit-details-marker { display: none; }
.scriptOrganisationSection > summary span { color: var(--muted); font-variant-numeric: tabular-nums; }
.scriptOrganisationSection > div { border-top: 1px solid var(--border); }
.scriptOrganisationRow,
.scriptReferenceRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.scriptOrganisationRow:last-child,
.scriptReferenceRow:last-child { border-bottom: 0; }
.scriptOrganisationRow > div { min-width: 0; }
.scriptOrganisationRow b,
.scriptOrganisationRow code,
.scriptOrganisationRow small,
.scriptReferenceRow code,
.scriptReferenceRow small { display: block; }
.scriptOrganisationRow code,
.scriptReferenceRow code {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--accent);
  font-size: 10px;
}
.scriptOrganisationRow small,
.scriptReferenceRow small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.scriptOrganisationRow > .pill { flex: 0 0 auto; margin: 0; }
.scriptReferenceRow { display: block; }
@media (max-width: 760px) {
  .scriptOrganisationSummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scriptOrganisationIntro { display: grid; }
}

/* Slice 71 — Vertical Slices visual roadmap */

.verticalSliceOverview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 18px 20px 0;
}
.verticalSliceOverviewCard {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(125, 160, 190, 0.15);
  background: linear-gradient(145deg, color-mix(in srgb, var(--slice-project-accent) 8%, var(--studio-surface, #08121f)), var(--studio-surface, #07101b));
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.verticalSliceOverviewCard:hover,
.verticalSliceOverviewCard:focus-visible,
.verticalSliceOverviewCard.active {
  border-color: color-mix(in srgb, var(--slice-project-accent) 55%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--slice-project-accent) 14%, var(--studio-surface, #08121f)), var(--studio-surface, #07101b));
  transform: translateY(-1px);
  outline: none;
}
.verticalSliceOverviewMark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--slice-project-accent) 50%, transparent);
  color: color-mix(in srgb, var(--slice-project-accent) 88%, white 12%);
  background: var(--studio-wash, rgba(4, 12, 22, 0.62));
  font: 850 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
}
.verticalSliceOverviewCard div { min-width: 0; }
.verticalSliceOverviewCard small,
.verticalSliceOverviewCard b,
.verticalSliceOverviewCard p { display: block; }
.verticalSliceOverviewCard small {
  overflow: hidden;
  color: var(--studio-muted, #6f879e);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.verticalSliceOverviewCard b { margin-top: 4px; color: var(--studio-accent, #e7f1fb); font-size: 13px; }
.verticalSliceOverviewCard p { margin: 5px 0 0; color: var(--studio-muted, #8196aa); font-size: 9px; line-height: 1.4; }
.verticalSlicesPanel {
  position: absolute;
  inset: 0;
  z-index: 35;
  min-width: 1120px;
  overflow: auto;
  background:
    radial-gradient(1000px 540px at 76% -12%, rgba(71, 128, 222, 0.12), transparent 68%),
    linear-gradient(180deg, var(--studio-surface, #050913) 0%, var(--studio-surface, #060b14) 54%, var(--studio-surface, #04070d) 100%);
}
.verticalSlicesShell {
  width: min(1480px, calc(100% - 48px));
  min-height: 100%;
  margin: 0 auto;
  padding: 22px 0 48px;
  color: var(--text);
}
.verticalSlicesHeader {
  position: relative;
  min-height: 148px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 27px 30px;
  border: 1px solid rgba(120, 165, 207, 0.19);
  background:
    linear-gradient(90deg, rgba(5, 12, 22, 0.97), rgba(7, 17, 31, 0.84) 62%, rgba(8, 18, 32, 0.58)),
    url("vertical-slices-background.webp") center 45% / cover;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.27);
}
.verticalSlicesHeader::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, #58d7ef, rgba(107, 144, 255, 0.52) 42%, transparent 86%);
  box-shadow: 0 0 14px rgba(82, 215, 240, 0.32);
}
.verticalSlicesHeaderCopy,
.verticalSlicesHeaderActions { position: relative; z-index: 1; }
.verticalSlicesHeaderCopy { max-width: 760px; }
.verticalSlicesEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--studio-accent, #79dff4);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.verticalSlicesEyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}
.verticalSlicesHeader h1 {
  margin: 7px 0 7px;
  color: var(--studio-accent, #f1f7ff);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.035em;
}
.verticalSlicesHeader p {
  max-width: 700px;
  margin: 0;
  color: var(--studio-muted, #91a6bb);
  font-size: 11px;
  line-height: 1.5;
}
.verticalSlicesHeaderActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.verticalSlicesRoadmapBar {
  min-height: 86px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) auto;
  align-items: center;
  gap: 25px;
  margin: 14px 0 18px;
  padding: 13px 16px;
  border: 1px solid rgba(103, 139, 176, 0.15);
  background: var(--studio-surface, rgba(7, 14, 25, 0.72));
}
.verticalSliceProjectPicker {
  display: grid;
  gap: 6px;
}
.verticalSliceProjectPicker > span {
  color: var(--studio-muted, #6f879f);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.verticalSliceProjectPicker .field {
  width: 100%;
  height: 36px;
  padding: 0 34px 0 11px;
  border-color: rgba(106, 153, 194, 0.23);
  background-color: var(--studio-surface, #08111e);
  color: var(--studio-ink, #dce9f5);
  font-size: 10px;
  font-weight: 700;
}
.verticalSlicesProjectIdentity { min-width: 0; }
.verticalSlicesProjectTitleLine {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-top: 4px;
}
.verticalSlicesProjectTitleLine h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--studio-accent, #edf5fe);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.verticalSliceGroupScope {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 8px;
  border: 1px solid rgba(238, 131, 185, 0.28);
  background: rgba(238, 131, 185, 0.08);
  color: var(--studio-pink, #f1a5cb);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.verticalSliceGroupScope[data-status="reference-only"] {
  border-color: rgba(238, 131, 185, 0.3);
  background: rgba(238, 131, 185, 0.08);
  color: var(--studio-pink, #f3a2cc);
}
.verticalSlicesProjectActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
}
.verticalSliceResultCount {
  color: var(--studio-muted, #71879d);
  font-size: 9px;
  white-space: nowrap;
}
.verticalSliceCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
}
.verticalSliceCard {
  --slice-project-accent: #55d7ea;
  --slice-status-accent: #55d7ea;
  position: relative;
  min-width: 0;
  min-height: 430px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(112, 145, 177, 0.18);
  outline: none;
  background: linear-gradient(180deg, var(--studio-surface, rgba(9, 18, 31, 0.98)), var(--studio-surface, rgba(5, 11, 20, 0.995)));
  color: var(--text);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  transition: transform 165ms ease, border-color 165ms ease, box-shadow 165ms ease;
}
.verticalSliceCard::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34%;
  height: 2px;
  background: linear-gradient(90deg, var(--slice-status-accent), transparent);
  opacity: 0.68;
}
.verticalSliceCard:hover,
.verticalSliceCard:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--slice-status-accent) 44%, rgba(112, 145, 177, 0.18));
  box-shadow: 0 21px 45px rgba(0, 0, 0, 0.31), 0 0 0 1px color-mix(in srgb, var(--slice-status-accent) 11%, transparent);
}
.verticalSliceCard.status-complete { --slice-status-accent: #65dca1; }
.verticalSliceCard.status-implementation-complete { --slice-status-accent: #69cfe9; }
.verticalSliceCard.status-in-development { --slice-status-accent: #55d7ea; }
.verticalSliceCard.status-native-validation { --slice-status-accent: #77aaff; }
.verticalSliceCard.status-planned { --slice-status-accent: #e7b454; }
.verticalSliceCard.status-future { --slice-status-accent: #ad8df0; }
.verticalSliceCard.status-blocked { --slice-status-accent: #e6757b; }
.verticalSliceCard.status-reference-only { --slice-status-accent: #ee83b9; }
.verticalSliceCard.status-separate-mod { --slice-status-accent: #c69af4; }
.verticalSliceCardImage {
  position: relative;
  width: 100%;
  height: 252px;
  flex: 0 0 252px;
  overflow: hidden;
  border-bottom: 1px solid rgba(116, 150, 183, 0.16);
  background: var(--studio-surface, #050b14);
}
.verticalSliceVisual {
  --visual-x: 76%;
  --visual-y: 32%;
  isolation: isolate;
}
.verticalSliceThumbnail {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.012);
  transition: opacity 220ms ease, transform 260ms ease;
}
.verticalSliceVisual.has-thumbnail .verticalSliceThumbnail { opacity: 1; }
.verticalSliceThumbnail.diagram-thumbnail { object-fit: contain; padding: 10px; background: var(--studio-surface, #050b14); transform: none; }
.verticalSliceCard:hover .verticalSliceThumbnail.diagram-thumbnail,
.verticalSliceCard:focus-visible .verticalSliceThumbnail.diagram-thumbnail { transform: none; }
.verticalSliceCard:hover .verticalSliceThumbnail,
.verticalSliceCard:focus-visible .verticalSliceThumbnail { transform: scale(1.025); }
.verticalSliceFallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--visual-x) var(--visual-y), color-mix(in srgb, var(--slice-project-accent) 22%, transparent) 0 8%, transparent 35%),
    linear-gradient(145deg, color-mix(in srgb, var(--slice-project-accent) 10%, var(--studio-surface, #06101d)), var(--studio-surface, #071322) 48%, var(--studio-surface, #040a13) 100%);
  transition: opacity 180ms ease;
}
.verticalSliceFallback::before {
  content: "";
  position: absolute;
  inset: -28px;
  background: url("vertical-slices-background.webp") center 46% / cover;
  opacity: 0.14;
  filter: saturate(0.72) contrast(1.12);
  transform: scale(1.08);
}
.verticalSliceFallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(148, 220, 255, 0.025) 6px 7px),
    linear-gradient(180deg, transparent 46%, var(--studio-surface, rgba(4, 10, 18, 0.72)) 100%);
}
.verticalSliceVisual.has-thumbnail .verticalSliceFallback { opacity: 0; }
.verticalSliceFallbackMark {
  position: absolute;
  z-index: 4;
  left: 24px;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid color-mix(in srgb, var(--slice-project-accent) 48%, transparent);
  background: var(--studio-surface, rgba(4, 12, 22, 0.76));
  color: color-mix(in srgb, var(--slice-project-accent) 86%, white 14%);
  font: 850 16px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--slice-project-accent) 9%, transparent), 0 0 26px rgba(0, 0, 0, 0.22);
}
.verticalSliceFallbackOrb {
  position: absolute;
  z-index: 2;
  width: 130px;
  height: 130px;
  left: calc(var(--visual-x) - 65px);
  top: calc(var(--visual-y) - 65px);
  border: 1px solid color-mix(in srgb, var(--slice-project-accent) 40%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, var(--studio-wash, rgba(255, 255, 255, 0.11)), transparent 17%),
    radial-gradient(circle at 52% 54%, color-mix(in srgb, var(--slice-project-accent) 24%, transparent), transparent 64%);
  box-shadow: inset -25px -24px 45px rgba(0, 0, 0, 0.55), 0 0 45px color-mix(in srgb, var(--slice-project-accent) 10%, transparent);
}
.verticalSliceFallbackLine {
  position: absolute;
  z-index: 3;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--slice-project-accent) 68%, transparent), transparent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--slice-project-accent) 20%, transparent);
}
.verticalSliceFallbackLine.line-a { width: 230px; left: 27%; top: 69%; transform: rotate(-17deg); }
.verticalSliceFallbackLine.line-b { width: 165px; left: 44%; top: 22%; transform: rotate(23deg); opacity: 0.58; }
.verticalSliceFallbackLine.line-c { width: 118px; left: 64%; top: 78%; transform: rotate(-51deg); opacity: 0.42; }
.verticalSliceFallbackGlow {
  position: absolute;
  z-index: 2;
  width: 42%;
  height: 2px;
  right: 7%;
  bottom: 24px;
  background: linear-gradient(90deg, transparent, var(--slice-project-accent), transparent);
  opacity: 0.46;
  box-shadow: 0 0 17px var(--slice-project-accent);
}
.verticalSliceVisual[data-variant="1"] { --visual-x: 66%; --visual-y: 43%; }
.verticalSliceVisual[data-variant="2"] { --visual-x: 81%; --visual-y: 57%; }
.verticalSliceVisual[data-variant="3"] { --visual-x: 58%; --visual-y: 27%; }
.verticalSliceVisual[data-variant="4"] { --visual-x: 72%; --visual-y: 68%; }
.verticalSliceVisual[data-variant="5"] { --visual-x: 88%; --visual-y: 35%; }
.verticalSliceCardBody {
  min-height: 176px;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 19px 22px 22px;
}
.verticalSliceNumber {
  color: var(--slice-project-accent);
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.14em;
}
.verticalSliceCard h3 {
  display: -webkit-box;
  min-height: 43px;
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--studio-accent, #edf5fe);
  font-size: 19px;
  line-height: 1.14;
  letter-spacing: -0.018em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.verticalSliceCardState {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  overflow: hidden;
}
.verticalSliceStatus {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--slice-status-accent);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.verticalSliceStatus::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px color-mix(in srgb, currentColor 70%, transparent);
}
.verticalSliceSecondaryLabel {
  min-width: 0;
  overflow: hidden;
  color: var(--studio-muted, #70869c);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.verticalSliceSecondaryLabel::before {
  content: "·";
  margin-right: 8px;
  color: #465b70;
}
.verticalSliceCard p {
  display: -webkit-box;
  margin: 9px 0 0;
  overflow: hidden;
  color: var(--studio-muted, #8396aa);
  font-size: 10px;
  line-height: 1.52;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.verticalSliceEmpty {
  min-height: 280px;
  display: grid;
  place-content: center;
  justify-items: center;
  grid-column: 1 / -1;
  padding: 32px;
  border: 1px dashed rgba(119, 148, 174, 0.24);
  color: var(--studio-muted, #72879b);
  text-align: center;
}
.verticalSliceEmpty b { margin-bottom: 5px; color: var(--studio-ink, #c8d5e2); }
.homeVerticalSlicesTeaser {
  position: relative;
  min-height: 225px;
  overflow: hidden;
  display: grid;
  align-items: end;
  margin-top: 18px;
  padding: 27px 29px;
  border: 1px solid rgba(96, 197, 235, 0.2);
  background-image: url("vertical-slices-background.webp");
  background-size: cover;
  background-position: center 42%;
  text-align: left;
}
.homeVerticalSlicesTeaser::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--studio-surface, rgba(5, 12, 23, 0.96)), var(--studio-wash, rgba(5, 12, 23, 0.56)) 49%, var(--studio-wash, rgba(5, 12, 23, 0.08))), linear-gradient(180deg, var(--studio-wash, rgba(4, 10, 19, 0.05)), var(--studio-surface, rgba(4, 10, 19, 0.84)));
}
.homeVerticalSlicesTeaserShade { position: absolute; inset: auto 0 0; height: 70px; background: linear-gradient(180deg, transparent, var(--studio-surface, rgba(4, 10, 19, 0.82))); }
.homeVerticalSlicesTeaserContent { position: relative; z-index: 2; max-width: 560px; }
.homeVerticalSlicesTeaser h2 { margin: 6px 0 6px; font-size: 25px; }
.homeVerticalSlicesTeaser p { margin: 0 0 15px; color: var(--studio-muted, #a9bfd1); font-size: 11px; line-height: 1.55; }

/* Slice 64 — Security Center 2.0 */
.securityFindingGroups{display:grid;gap:12px;margin-top:8px}
.securityFindingGroup{border:1px solid var(--line,var(--studio-line, #243243));border-radius:14px;background:color-mix(in srgb,var(--panel,var(--studio-surface, #0d1420)) 92%,transparent);overflow:hidden}
.securityFindingGroupHead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line,var(--studio-line, #243243))}
.securityFindingGroupHead>div{display:flex;align-items:center;gap:8px;min-width:0}
.securityFindingGroupHead>div:first-child{flex-direction:column;align-items:flex-start}
.securityFindingGroupHead b{font-size:12px;word-break:break-all}
.securityFindingGroupHead span,.securityFindingGroupHead small{font-size:10px;color:var(--muted,var(--studio-muted, #8ca0b5))}
.securityFindingGroupRules{display:grid;gap:8px;padding:10px}
.securityFindingGroupRules .securityFinding{margin:0}
.findingOccurrenceList{display:grid;gap:6px;padding-top:8px}
.findingOccurrenceList>div{display:flex;justify-content:space-between;gap:12px;padding:7px 9px;border:1px solid var(--line,var(--studio-line, #243243));border-radius:8px;font-size:10px}
.findingOccurrenceList span{color:var(--muted,var(--studio-muted, #8ca0b5));text-align:right}
.adminPagination,.historyPagination{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 4px;font-size:11px;color:var(--muted,var(--studio-muted, #8ca0b5))}
.securityScanProgressRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line,var(--studio-line, #243243));border-radius:10px;background:var(--panel2,var(--studio-surface, #101a28))}
.securityScanProgressRow>div:last-child{display:flex;gap:6px;flex:0 0 auto}
.loginForm label small{font-weight:400;color:var(--muted,var(--studio-muted, #8ca0b5));margin-left:6px}
#loginCode{letter-spacing:.28em;text-align:center;font-weight:800;font-size:18px}
@media(max-width:760px){.securityFindingGroupHead,.securityScanProgressRow{align-items:flex-start;flex-direction:column}.securityFindingGroupHead>div:last-child{width:100%;justify-content:space-between}.findingOccurrenceList>div{flex-direction:column}.findingOccurrenceList span{text-align:left}}

.buildEulaConfirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 199, 89, 0.25);
  border-radius: 10px;
  background: rgba(255, 199, 89, 0.06);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.buildEulaConfirm input {
  margin-top: 1px;
}
.buildLiveSummary {
  margin-top: 14px;
}
.buildLiveGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.buildLiveCard {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(120, 244, 237, 0.13);
  border-radius: 11px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
}
.buildLiveCard span,
.buildLiveCard small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}
.buildLiveCard b {
  display: block;
  margin: 3px 0 2px;
  color: var(--text);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.buildProgressTrack {
  height: 5px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.07));
}
.buildProgressFill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(120, 244, 237, 0.9), rgba(133, 154, 255, 0.9));
  transition: width 180ms ease;
}
.buildProgressMeta {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.buildIssuesHeader {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}
.buildIssuesHeader span {
  display: block;
  font-size: 12px;
  font-weight: 750;
}
.buildIssuesHeader small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}
.buildIssuePanel {
  max-height: 250px;
  margin-top: 7px;
  overflow: auto;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.07));
  border-radius: 11px;
  background: var(--studio-wash, rgba(3, 7, 16, 0.38));
}
.buildIssueEmpty,
.buildIssueMore {
  padding: 11px 12px;
  color: var(--muted);
  font-size: 10px;
}
.buildIssueRow {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 9px 10px;
  border-bottom: 1px solid var(--studio-line, rgba(255, 255, 255, 0.055));
}
.buildIssueRow:last-child {
  border-bottom: 0;
}
.buildIssueRow.bad {
  background: rgba(255, 91, 116, 0.035);
}
.buildIssueRow.warn {
  background: rgba(255, 199, 89, 0.025);
}
.buildIssueIcon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 91, 116, 0.12);
  color: var(--studio-bad, #ff9aa8);
  font-weight: 800;
}
.buildIssueRow.warn .buildIssueIcon {
  background: rgba(255, 199, 89, 0.1);
  color: var(--studio-warn, #ffd56f);
}
.buildIssueRow b,
.buildIssueRow small {
  display: block;
  overflow-wrap: anywhere;
}
.buildIssueRow b {
  font-size: 10px;
  line-height: 1.4;
}
.buildIssueRow small {
  margin-top: 2px;
  color: var(--muted);
  font: 9px/1.4 "Cascadia Code", "JetBrains Mono", monospace;
}
@media (max-width: 980px) {
  .buildLiveGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .buildLiveGrid {
    grid-template-columns: 1fr;
  }
  .buildIssueRow {
    grid-template-columns: 22px minmax(0, 1fr);
  }
  .buildIssueRow .pill {
    grid-column: 2;
    justify-self: start;
  }
}

/* Minecraft Server — Build Centre */
.minecraftServerDialog {
  width: min(1180px, calc(100vw - 32px));
}
.minecraftServerHero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--panel, var(--studio-surface, #111a2a))), var(--panel, var(--studio-surface, #111a2a)));
}
.minecraftServerHero h3 {
  margin: 4px 0 6px;
  font-size: 22px;
}
.minecraftServerHero p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.5;
}
.minecraftServerHeroState {
  display: grid;
  justify-items: end;
  gap: 7px;
  white-space: nowrap;
}
.minecraftServerHeroState small {
  color: var(--muted);
}
.minecraftServerStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.minecraftServerStats > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel, var(--studio-surface, #111a2a));
}
.minecraftServerStats span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.minecraftServerStats b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.minecraftServerStats small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
}
.minecraftServerDns .pill {
  width: fit-content;
  margin-top: 2px;
}
.minecraftServerConfig {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel, var(--studio-surface, #111a2a));
}
.minecraftServerNetworkDiagnostics {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel, var(--studio-surface, #111a2a));
}
.minecraftServerNetworkHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.minecraftServerNetworkHeader > div {
  display: grid;
  gap: 3px;
}
.minecraftServerNetworkHeader small {
  color: var(--muted);
}
.minecraftServerNetworkGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.minecraftServerNetworkGrid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel, var(--studio-surface, #111a2a)) 86%, var(--canvas));
}
.minecraftServerNetworkGrid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.minecraftServerNetworkGrid b,
.minecraftServerNetworkGrid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.minecraftServerNetworkGrid small {
  color: var(--muted);
}
.minecraftServerNetworkGrid b.pill {
  width: fit-content;
  max-width: 100%;
}
.minecraftServerNetworkIssues {
  display: grid;
  gap: 6px;
}
.minecraftServerNetworkIssue,
.minecraftServerNetworkSuccess {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.45;
}
.minecraftServerNetworkIssue {
  border-color: color-mix(in srgb, var(--warn) 42%, var(--line));
  background: color-mix(in srgb, var(--warn) 7%, transparent);
  color: var(--muted);
}
.minecraftServerNetworkSuccess {
  border-color: color-mix(in srgb, var(--good) 42%, var(--line));
  background: color-mix(in srgb, var(--good) 7%, transparent);
  color: var(--text);
}
.minecraftServerCheck {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: var(--muted);
  font-size: 12px;
}
.minecraftServerCheck input {
  accent-color: var(--accent);
}
.minecraftServerControls,
.minecraftServerQuickCommands {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.minecraftServerControls {
  margin-top: 12px;
}
.minecraftServerQuickCommands {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel, var(--studio-surface, #111a2a)) 88%, transparent);
}
.minecraftServerCommand {
  display: flex;
  flex: 1 1 360px;
  gap: 8px;
}
.minecraftServerCommand .field {
  min-width: 180px;
}
.minecraftServerLog {
  min-height: 300px;
  max-height: 460px;
}
.minecraftServerNetworkNote {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.minecraftServerNetworkNote b {
  color: var(--text);
}
.minecraftServerNetworkNote code {
  color: var(--text);
}
@media (max-width: 900px) {
  .minecraftServerStats,
  .minecraftServerNetworkGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .minecraftServerHero {
    flex-direction: column;
  }
  .minecraftServerHeroState {
    justify-items: start;
  }
  .minecraftServerStats,
  .minecraftServerNetworkGrid {
    grid-template-columns: 1fr;
  }
  .minecraftServerControls .btn,
  .minecraftServerQuickCommands > .btn {
    flex: 1 1 auto;
  }
  .minecraftServerCommand {
    flex-basis: 100%;
  }
}

/* Main Menu Creator — runtime-honest simplified workspace */
.mainMenuCreator {
  background: var(--studio-surface, #080d15);
}
.mainMenuCreator .mainMenuAdvancedToolbar {
  min-height: 54px;
  gap: 10px;
  padding: 8px 10px;
  background: var(--studio-surface, #0b111b);
}
.mainMenuCreator .mainMenuToolbarBrand {
  min-width: 178px;
  padding-right: 12px;
}
.mainMenuCreator .mainMenuToolbarBrand b {
  font-size: 13px;
  letter-spacing: 0.1px;
}
.mainMenuCreator .mainMenuToolbarBrand small {
  margin-top: 2px;
  font-size: 9px;
}
.mainMenuCreator .mainMenuToolbarGroup button {
  min-height: 31px;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 9px;
}
.mainMenuCreator .mainMenuToolbarGroup.compact button {
  width: auto;
  min-width: 42px;
  padding: 5px 7px;
  font-size: 8px;
}
.mainMenuCreator .mainMenuAdvancedWorkspace {
  grid-template-columns: minmax(480px, 1fr) minmax(300px, 340px);
  grid-template-rows: minmax(0, 1fr) auto;
}
.mainMenuCreator .mainMenuCanvasViewport {
  padding: 24px;
  background: var(--studio-surface, #050911);
}
.mainMenuCreator .mainMenuCanvasFooter {
  min-height: 34px;
  align-items: center;
  padding: 8px 12px;
  background: var(--studio-surface, #0b111b);
  font-size: 9px;
}
.mainMenuCreator .mainMenuAdvancedInspector {
  padding: 10px;
  background: var(--studio-surface, #0b111b);
}
.mainMenuCreator .mainMenuAdvancedInspector details {
  margin-bottom: 9px;
  border-radius: 9px;
  background: var(--studio-surface, #101824);
}
.mainMenuCreator .mainMenuAdvancedInspector summary {
  padding: 9px 10px;
  font-size: 10px;
}
.mainMenuCreator .mainMenuInspectorGrid {
  gap: 8px;
  padding: 9px;
}
.mainMenuCreator .mainMenuAdvancedTimeline {
  min-height: 110px;
  max-height: 170px;
  background: var(--studio-surface, #080d15);
}
.mainMenuCreator .mainMenuTimelineHead {
  padding: 7px 10px;
  background: var(--studio-surface, #0b111b);
}
.mainMenuCreator .timelinePlayback button {
  width: auto;
  min-width: 48px;
  padding: 0 8px;
  font-size: 8px;
}
.mainMenuCreator .timelineSceneTrack {
  min-height: 38px;
}
.mainMenuCreator .mainMenuPreviewBadge {
  top: 10px;
  left: 10px;
  padding: 5px 7px;
  border-radius: 6px;
}
.mainMenuCreator .runtimeButtonPreview {
  width: 100%;
  height: 100%;
  border: 1px solid #8a8a8a;
  border-radius: 1px;
  color: var(--studio-ink, #ffffff);
  background: linear-gradient(#666666, #4b4b4b);
  box-shadow: inset 0 1px rgba(255,255,255,0.18), inset 0 -1px rgba(0,0,0,0.45);
  font-family: Minecraft, monospace;
  font-size: 16px;
  text-shadow: 1px 1px #202020;
}
.mainMenuCreator .runtimeButtonPreview:hover {
  border-color: #ffffff;
  background: linear-gradient(#7d84bf, #5e66a2);
}
.mainMenuCreator .mainMenuAlignGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mainMenuCreator .mainMenuAlignGrid button {
  min-height: 30px;
  height: auto;
  padding: 4px 3px;
  font-size: 8px;
}
.mainMenuCreator .inspectorTitleActions button {
  width: auto;
  min-width: 44px;
  padding: 0 7px;
  font-size: 8px;
}
.mainMenuThemeGrid button {
  min-height: 54px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px;
  text-align: left;
}
.mainMenuThemeGrid button b {
  font-size: 9px;
}
.mainMenuThemeGrid button small {
  color: var(--muted);
  font-size: 7px;
  line-height: 1.3;
}
.mainMenuDesignerSidebar .menuLabSidebarIntro {
  gap: 4px;
  padding: 10px;
  background: rgba(120, 244, 237, 0.04);
}
.mainMenuDesignerSidebar .menuLabSidebarIntro b {
  font-size: 12px;
}
.mainMenuDesignerSidebar .mainMenuSidebarTabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
}
.mainMenuDesignerSidebar .mainMenuSidebarTabs button {
  min-height: 29px;
  font-size: 9px;
}
.panoramaCardHead {
  grid-template-columns: minmax(0, 1fr) auto;
}
.panoramaDelete {
  min-width: 48px;
  padding: 0 7px;
  font-size: 8px;
}
.mainMenuPanoramaCanvas {
  image-rendering: auto;
}
html[data-theme="light"] .mainMenuCreator,
html[data-theme="light"] .mainMenuCreator .mainMenuAdvancedToolbar,
html[data-theme="light"] .mainMenuCreator .mainMenuAdvancedInspector,
html[data-theme="light"] .mainMenuCreator .mainMenuAdvancedTimeline,
html[data-theme="light"] .mainMenuCreator .mainMenuTimelineHead,
html[data-theme="light"] .mainMenuCreator .mainMenuCanvasFooter {
  background: #edf2f8;
}
@media (max-width: 1280px) {
  .mainMenuCreator .mainMenuAdvancedWorkspace { grid-template-columns: minmax(420px, 1fr) 300px; }
  .mainMenuCreator .mainMenuToolbarGroup.compact { display: none; }
}
@media (max-width: 980px) {
  .mainMenuCreator .mainMenuAdvancedWorkspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(420px, 1fr) minmax(280px, auto) auto;
  }
}

/* Main Menu Creator — restrained cinematic energy streaks for space themes. */
.particle-energy-streaks i {
  width: calc(var(--particle-size) * 9);
  height: max(1px, calc(var(--particle-size) * 0.7));
  border-radius: 999px;
  box-shadow: 0 0 calc(var(--particle-size) * 4) var(--particle-color);
  animation-name: mainMenuEnergyStreak;
  animation-timing-function: ease-in-out;
}
@keyframes mainMenuEnergyStreak {
  0%, 68% { transform: translate3d(-24px, 0, 0) scaleX(.3); opacity: 0; }
  74% { opacity: calc(var(--particle-opacity) * .85); }
  88% { transform: translate3d(72px, 0, 0) scaleX(1); opacity: var(--particle-opacity); }
  100% { transform: translate3d(130px, 0, 0) scaleX(.5); opacity: 0; }
}

/* Project Search — compact Ctrl + Shift + F redesign. */
.projectSearchDialog .modalBody { padding-top: 12px; }
.projectSearchShell {
  display: grid;
  gap: 10px;
  min-height: 360px;
}
.projectSearchBar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: var(--code-bg);
}
.projectSearchIcon {
  padding: 0 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.projectSearchBar .textInput {
  min-height: 36px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
}
.projectSearchBar .textInput:focus { outline: none; }
.projectSearchToolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--muted);
  font-size: 9px;
}
.projectSearchToolbar > span:first-child {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: Cascadia Code, Consolas, monospace;
}
.projectSearchToolbar #globalSearchStatus { margin-left: auto; }
.projectSearchFilters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--studio-wash, rgba(255,255,255,.025));
}
.projectSearchFilters.hidden { display: none; }
.projectSearchFilters > label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 9px;
}
.projectSearchFilters > div {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.projectSearchResults {
  display: grid;
  align-content: start;
  gap: 0;
  max-height: 62vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--code-bg);
}
.projectSearchGroup { border-bottom: 1px solid var(--line); }
.projectSearchGroup:last-child { border-bottom: 0; }
.projectSearchGroup > header {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--studio-wash, rgba(255,255,255,.025));
}
.projectSearchGroup > header > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.projectSearchGroup > header b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.projectSearchGroup > header small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 8px;
}
.projectSearchGroup > header > span {
  color: var(--muted);
  font-size: 9px;
}
.projectSearchFileIcon { display: grid; place-items: center; }
.projectSearchMatches { display: grid; }
.projectSearchMatch {
  width: 100%;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 42px;
  border: 0;
  border-top: 1px solid var(--studio-line, rgba(255,255,255,.035));
  background: transparent;
  color: var(--text);
  text-align: left;
}
.projectSearchMatch:hover { background: rgba(120,244,237,.055); }
.projectSearchMatch > span {
  color: var(--muted);
  font: 8px Cascadia Code, Consolas, monospace;
}
.projectSearchMatch code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  color: var(--code-text);
  font: 10px Cascadia Code, Consolas, monospace;
}
.projectSearchMatch mark {
  padding: 1px 2px;
  border-radius: 3px;
  background: rgba(255,200,87,.24);
  color: inherit;
}
.projectSearchEmpty {
  min-height: 250px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}
.projectSearchEmpty b { color: var(--text); }
.projectSearchEmpty span { max-width: 420px; font-size: 10px; line-height: 1.5; }

/* Mod Configs — main settings + concise raw config editor. */
.configManager {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  background: var(--code-bg);
}
.configManagerSidebar {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 12px;
  border-right: 1px solid var(--line);
  background: var(--studio-wash, rgba(6, 11, 22, .66));
}
.configManagerSidebar > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.configManagerSidebar > header > div { min-width: 0; display: grid; gap: 2px; }
.configManagerSidebar h2 { margin: 0; font-size: 15px; }
.configManagerSidebar header small { color: var(--muted); font-size: 8px; }
.configManagerSearch { display: block; }
.configManagerSearch .textInput { width: 100%; }
.configScopeTabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.configScopeTabs button {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 8px;
}
.configScopeTabs button b { color: inherit; font-size: 8px; }
.configScopeTabs button.active {
  border-color: rgba(120,244,237,.34);
  background: rgba(120,244,237,.07);
  color: var(--text);
}
.configManagerCount { color: var(--muted); font-size: 8px; }
.configManagerList {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 4px;
  padding-right: 2px;
}
.configMainRow,
.configRow {
  width: 100%;
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.configMainRow {
  grid-template-columns: 40px minmax(0, 1fr);
  border-color: var(--line);
  background: rgba(120,244,237,.035);
}
.configRow { grid-template-columns: minmax(0, 1fr) auto; min-height: 42px; }
.configMainRow:hover,
.configMainRow.active,
.configRow:hover,
.configRow.active {
  border-color: rgba(120,244,237,.28);
  background: rgba(120,244,237,.07);
}
.configMainRowIcon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 30px;
  border-radius: 6px;
  background: rgba(120,244,237,.09);
  color: var(--cyan);
  font: 700 8px Cascadia Code, Consolas, monospace;
}
.configMainRow > div,
.configRowText {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.configMainRow b,
.configRow b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}
.configMainRow small,
.configRow small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 8px;
}
.configRow code {
  color: var(--muted);
  font-size: 8px;
}
.configListHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 2px;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.configListHeading b { color: var(--muted); }
.configListEmpty { padding: 12px 6px; color: var(--muted); font-size: 9px; text-align: center; }
.configManagerEditor {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 9px;
  padding: 14px;
  background: var(--code-bg);
}
.configEditorHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.configEditorHeader > div:first-child { min-width: 0; }
.configEditorTitleLine { display: flex; align-items: center; gap: 8px; min-width: 0; }
.configEditorTitleLine h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.configEditorHeader small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.configEditorActions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.configEditorMeta { display: flex; flex-wrap: wrap; gap: 5px; }
.configEditorMeta span {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-size: 8px;
}
.configEditorCode {
  min-width: 0;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--studio-surface, #080e1c);
}
.configEditorText {
  width: 100%;
  height: 100%;
  min-height: 260px;
  resize: none;
  padding: 12px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--code-text);
  font-size: 11px;
  line-height: 1.55;
}
.configManagerEditor > footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 8px;
}
.configManagerWelcome > span {
  font: 700 12px Cascadia Code, Consolas, monospace;
  color: var(--cyan);
}

.mainModConfig {
  grid-row: 1 / -1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding-right: 4px;
}
.mainModConfigHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.mainModConfigHeader > div:first-child { min-width: 0; }
.mainModConfigHeader h2 { margin: 3px 0 4px; font-size: 18px; }
.mainModConfigHeader p { max-width: 720px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.mainModConfigHeader > div:last-child { display: flex; align-items: center; gap: 8px; }
.configSaveState { color: var(--muted); font-size: 8px; }
.mainModConfigSection {
  display: grid;
  grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--studio-wash, rgba(255,255,255,.018));
}
.mainModConfigIdentity {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.mainModConfigMark {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid rgba(120,244,237,.2);
  border-radius: 7px;
  background: rgba(120,244,237,.07);
  color: var(--cyan);
  font: 700 8px Cascadia Code, Consolas, monospace;
}
.mainModConfigIdentity h3 { margin: 1px 0 2px; font-size: 12px; }
.mainModConfigIdentity small { color: var(--muted); font-size: 8px; }
.mainModConfigOptions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.mainModConfigOptions.single { grid-template-columns: minmax(0,1fr); }
.mainConfigToggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--studio-wash, rgba(0,0,0,.10));
  cursor: pointer;
}
.mainConfigToggle:hover { border-color: rgba(120,244,237,.22); }
.mainConfigToggle > span { display: grid; gap: 3px; min-width: 0; }
.mainConfigToggle b { font-size: 9px; }
.mainConfigToggle small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.mainConfigToggle input {
  width: 34px;
  height: 18px;
  appearance: none;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: var(--studio-wash, rgba(255,255,255,.08));
  position: relative;
  cursor: pointer;
  transition: .16s ease;
}
.mainConfigToggle input::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: var(--muted);
  transition: .16s ease;
}
.mainConfigToggle input:checked {
  border-color: rgba(120,244,237,.5);
  background: rgba(120,244,237,.2);
}
.mainConfigToggle input:checked::after { left: 18px; background: var(--cyan); }
.mainConfigJson {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.mainConfigJson summary {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 9px;
  cursor: pointer;
}
.configJsonCode {
  max-height: 300px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--studio-surface, #080e1c);
  color: var(--code-text);
  font: 10px/1.55 Cascadia Code, Consolas, monospace;
}
.configJsonCode .jsonKey { color: var(--studio-accent, #78f4ed); }
.configJsonCode .jsonString { color: var(--studio-good, #c3e88d); }
.configJsonCode .jsonLiteral { color: var(--studio-violet, #c792ea); }
.configJsonCode .jsonNumber { color: var(--studio-bad, #f78c6c); }
.activity button[data-view="configs"] .activityIcon { font: 700 7px Cascadia Code, Consolas, monospace; }

html[data-theme="light"] .configManagerSidebar,
html[data-theme="light"] .configEditorCode,
html[data-theme="light"] .configJsonCode,
html[data-theme="light"] .projectSearchBar,
html[data-theme="light"] .projectSearchResults { background: #f5f8fc; }
html[data-theme="light"] .mainConfigToggle { background: rgba(0,0,0,.02); }

@media (max-width: 980px) {
  .configManager { grid-template-columns: 240px minmax(0, 1fr); }
  .mainModConfigSection { grid-template-columns: 1fr; }
  .mainModConfigOptions { grid-template-columns: 1fr; }
  .projectSearchFilters { grid-template-columns: 1fr; }
  .projectSearchFilters > div { grid-column: auto; }
}

/* Build Centre — optional contents mirror Main Mod Config. */
.buildFeatureField {
  gap: 10px;
}
.buildFeatureHeading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.buildFeatureHeading > div {
  min-width: 0;
}
.buildFeatureHeading label {
  display: block;
  margin-bottom: 4px;
}
.buildFeatureHeading small {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}
.buildFeatureGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.buildFeatureToggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel, var(--studio-surface, #111a2a)) 90%, var(--accent) 10%);
  cursor: pointer;
}
.buildFeatureToggle:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}
.buildFeatureToggle input {
  flex: 0 0 auto;
}
.buildFeatureToggle span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.buildFeatureToggle b,
.buildFeatureToggle small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buildFeatureToggle small {
  color: var(--muted);
}
@media (max-width: 760px) {
  .buildFeatureHeading {
    align-items: stretch;
    flex-direction: column;
  }
  .buildFeatureGrid {
    grid-template-columns: 1fr;
  }
}

/* Mod Configs workspace polish — focused config mode, larger controls. */
#app.configManagerActive .sidebar,
#app.configManagerActive [data-resize-panel="sidebar"] {
  display: none !important;
}
#app.configManagerActive:not(.focusMode) .mainGrid {
  grid-template-columns: var(--activity) 0 minmax(0, 1fr) var(--inspector) !important;
}

.configManager {
  grid-template-columns: 330px minmax(0, 1fr);
}
.configManagerSidebar {
  gap: 11px;
  padding: 16px;
}
.configManagerSidebar > header {
  align-items: center;
  gap: 12px;
}
.configManagerSidebar > header > div {
  gap: 4px;
}
.configManagerSidebar h2 {
  font-size: 17px;
  letter-spacing: -.01em;
}
.configManagerSidebar header small {
  font-size: 10px;
  line-height: 1.35;
}
.configRefreshButton {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 10px;
}
.configManagerSearchBox {
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 11px;
  border: 1px solid rgba(120, 244, 237, .18);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--studio-surface, rgba(15, 25, 43, .94)), var(--studio-surface, rgba(8, 15, 29, .94)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 8px 22px rgba(0, 0, 0, .12);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.configManagerSearchBox:focus-within {
  border-color: rgba(120, 244, 237, .48);
  background: linear-gradient(180deg, var(--studio-surface, rgba(18, 31, 50, .98)), var(--studio-surface, rgba(9, 17, 32, .98)));
  box-shadow: 0 0 0 3px rgba(120, 244, 237, .07), inset 0 1px 0 rgba(255, 255, 255, .03);
}
.configManagerSearchIcon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}
.configManagerSearchBox:focus-within .configManagerSearchIcon {
  stroke: var(--cyan);
}
.configManagerSearchBox input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: 500 11px/1.2 Inter, system-ui, sans-serif;
}
.configManagerSearchBox input::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}
.configManagerSearchClear {
  display: none;
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--studio-wash, rgba(255, 255, 255, .035));
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}
.configManagerSearchClear.visible {
  display: inline-flex;
  align-items: center;
}
.configManagerSearchClear:hover {
  border-color: rgba(120, 244, 237, .25);
  color: var(--text);
  background: rgba(120, 244, 237, .06);
}
.configScopeTabs {
  gap: 6px;
}
.configScopeTabs button {
  min-height: 34px;
  padding: 5px 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 650;
}
.configScopeTabs button b {
  font-size: 9px;
}
.configManagerCount {
  font-size: 9px;
}
.configManagerList {
  gap: 6px;
}
.configMainRow,
.configRow {
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
}
.configMainRow {
  min-height: 60px;
  grid-template-columns: 44px minmax(0, 1fr);
}
.configRow {
  min-height: 50px;
}
.configMainRowIcon {
  width: 40px;
  height: 34px;
  border-radius: 8px;
  font-size: 9px;
}
.configMainRow b,
.configRow b {
  font-size: 10px;
}
.configMainRow small,
.configRow small {
  font-size: 9px;
}
.configRow code {
  font-size: 9px;
}
.configListHeading {
  padding: 10px 5px 3px;
  font-size: 9px;
}
.configListEmpty {
  padding: 15px 7px;
  font-size: 10px;
}
.configManagerEditor {
  gap: 12px;
  padding: 18px 20px;
}
.configEditorTitleLine h3 {
  font-size: 17px;
}
.configEditorHeader small {
  margin-top: 5px;
  font-size: 10px;
}
.configEditorMeta span {
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 9px;
}
.configEditorCode,
.configEditorText {
  min-height: 300px;
}
.configEditorText {
  padding: 14px;
  font-size: 12px;
}
.configManagerEditor > footer {
  font-size: 9px;
}
.mainModConfig {
  gap: 13px;
}
.mainModConfigHeader {
  gap: 18px;
  padding-bottom: 14px;
}
.mainModConfigHeader h2 {
  margin: 4px 0 6px;
  font-size: 22px;
  letter-spacing: -.015em;
}
.mainModConfigHeader p {
  max-width: 820px;
  font-size: 11px;
  line-height: 1.55;
}
.configSaveState {
  font-size: 9px;
}
.mainModConfigSection {
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  gap: 18px;
  padding: 16px;
  border-radius: 12px;
}
.mainModConfigIdentity {
  gap: 11px;
}
.mainModConfigMark {
  min-width: 44px;
  height: 36px;
  border-radius: 8px;
  font-size: 9px;
}
.mainModConfigIdentity h3 {
  margin: 1px 0 3px;
  font-size: 14px;
}
.mainModConfigIdentity small {
  font-size: 9px;
  line-height: 1.35;
}
.mainModConfigOptions {
  gap: 9px;
}
.mainConfigToggle {
  min-height: 66px;
  gap: 13px;
  padding: 12px 13px;
  border-radius: 10px;
}
.mainConfigToggle > span {
  gap: 4px;
}
.mainConfigToggle b {
  font-size: 11px;
}
.mainConfigToggle small {
  font-size: 9px;
  line-height: 1.45;
}
.mainConfigToggle input {
  width: 38px;
  height: 20px;
}
.mainConfigToggle input::after {
  width: 14px;
  height: 14px;
}
.mainConfigToggle input:checked::after {
  left: 20px;
}
.mainConfigJson {
  border-radius: 11px;
}
.mainConfigJson summary {
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 650;
}
.configJsonCode {
  padding: 14px;
  font-size: 11px;
}

html[data-theme="light"] .configManagerSearchBox {
  background: linear-gradient(180deg, #ffffff, #f4f8fc);
}
html[data-theme="light"] .configManagerSearchBox:focus-within {
  background: #ffffff;
}

@media (max-width: 1100px) {
  .configManager { grid-template-columns: 300px minmax(0, 1fr); }
  .mainModConfigSection { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .configManager { grid-template-columns: 1fr; grid-template-rows: minmax(210px, 38%) minmax(0, 1fr); }
  .configManagerSidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .mainModConfigOptions { grid-template-columns: 1fr; }
}

/* ========================================================================== */
/* UI Studio 2 — source-linked visual reconstruction                          */
/* ========================================================================== */

.ilUiStudio {
  grid-template-rows: 60px minmax(0, 1fr);
}
.ilUiToolbar {
  gap: 10px;
  padding: 9px 12px;
  background:
    linear-gradient(180deg, var(--studio-surface, rgba(20, 29, 47, .99)), var(--studio-surface, rgba(12, 18, 31, .985)));
}
.ilUiBrand {
  min-width: 210px;
  gap: 10px;
  padding-right: 14px;
}
.ilUiBrand > span {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}
.ilUiBrand b { font-size: 12px; }
.ilUiBrand small { font-size: 9px; }
.ilUiToolbarGroup { gap: 5px; }
.ilUiToolbar button,
.ilUiToolbar select,
.ilUiLayers button,
.ilUiInspector button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 9px;
}
.ilUiToolbarGroup.end { gap: 8px; }
.ilUiHistoryTools button { min-width: 52px; }
.ilUiAddTools { max-width: min(650px, 44vw); overflow-x: auto; scrollbar-width: none; }
.ilUiAddTools::-webkit-scrollbar { display: none; }
.ilUiSourceSummary {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}
.ilUiSourceSummary > b { color: var(--text); font-size: 12px; }
.ilUiSourceSummary > span:last-child {
  min-width: 0;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ilUiModePill,
.ilUiReadOnlyBadge,
.ilUiFidelity {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(90, 226, 211, .22);
  border-radius: 999px;
  color: var(--studio-accent, #aef7ed);
  background: rgba(73, 214, 198, .07);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .035em;
  white-space: nowrap;
}
.ilUiReadOnlyBadge {
  border-color: rgba(144, 164, 199, .2);
  color: var(--studio-muted, #aab7cb);
  background: rgba(137, 154, 184, .06);
}
.ilUiDirty { font-size: 9px; }

.ilUiWorkspace {
  grid-template-columns: 216px minmax(500px, 1fr) 310px;
}
.ilUiStudio.sourceMode .ilUiWorkspace {
  grid-template-columns: 190px minmax(500px, 1fr) 320px;
}
.ilUiLayers > header,
.ilUiInspector > header {
  min-height: 48px;
  padding: 10px 12px;
}
.ilUiLayers > header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.ilUiLayers > header b,
.ilUiInspector > header b { font-size: 11px; }
.ilUiLayers > header small,
.ilUiInspector > header span {
  color: var(--muted);
  font-size: 8px;
}
.ilUiLayers > header > span { font-size: 9px; }
.ilUiLayerRows { padding: 7px; }
.ilUiLayerRow {
  min-height: 48px;
  grid-template-columns: 30px minmax(0, 1fr) 24px;
  gap: 8px;
  margin-bottom: 4px;
  padding: 7px 8px !important;
  border-radius: 8px !important;
}
.ilUiLayerRow > span {
  width: 27px;
  height: 27px;
  font-size: 8px;
  font-weight: 800;
}
.ilUiLayerRow b { font-size: 10px; }
.ilUiLayerRow small { margin-top: 3px; font-size: 8px; }
.ilUiLayerRow i { font-size: 7px; }
.ilUiSourceMethodRow > span {
  color: var(--studio-accent, #aef7ed);
  background: rgba(76, 220, 204, .08);
  font-family: Cascadia Code, Consolas, monospace;
}
.ilUiSourceFoot {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px !important;
  color: var(--muted);
  font-size: 8px;
}
.ilUiSourceFoot span:last-child { color: var(--studio-warn, #e7b660); }

.ilUiCanvasPanel {
  grid-template-rows: 42px minmax(0, 1fr) 38px;
}
.ilUiPreviewHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--studio-surface, rgba(12, 18, 31, .93));
}
.ilUiPreviewHeader > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ilUiPreviewHeader span { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.ilUiPreviewHeader b { color: var(--text); font-size: 10px; }
.ilUiFidelity.partial {
  border-color: rgba(231, 182, 96, .28);
  color: var(--studio-warn, #f0c778);
  background: rgba(231, 182, 96, .07);
}
.ilUiFidelity.complete { color: var(--studio-good, #8ff0bd); border-color: rgba(92, 225, 151, .28); background: rgba(92, 225, 151, .07); }
.ilUiViewport {
  padding: 30px;
  background-color: var(--studio-surface, #070a11);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.016) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.016) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.016) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.016) 75%);
}
.ilUiCanvas {
  border-color: rgba(150, 175, 214, .3);
  border-radius: 3px;
  box-shadow:
    0 24px 75px rgba(0,0,0,.55),
    0 0 0 8px rgba(255,255,255,.018),
    0 0 0 9px rgba(95, 117, 154, .07);
}
.ilUiStudio.sourceMode .ilUiCanvas::after { content: "JAVA UI PREVIEW"; }
.ilUiStudio.sourceMode .ilUiCanvas {
  cursor: default;
  background: #050913;
}
.ilUiSourceBackdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 45%, rgba(55, 89, 135, .08), transparent 58%),
    var(--studio-surface, #050913);
}
.ilUiSourcePrimitive {
  position: absolute;
  box-sizing: border-box;
  transition: opacity .12s ease, filter .12s ease, outline-color .12s ease;
}
.ilUiSourcePrimitive.rect,
.ilUiSourcePrimitive.background { cursor: pointer; }
.ilUiSourcePrimitive.text {
  z-index: 20;
  display: flex;
  align-items: flex-start;
  overflow: visible;
  cursor: pointer;
  background: transparent !important;
  font: 500 8px/1.08 "Cascadia Mono", Consolas, monospace;
  text-shadow: 1px 1px 0 rgba(0,0,0,.9);
  white-space: nowrap;
}
.ilUiSourcePrimitive.text > span {
  display: block;
  min-width: max-content;
  pointer-events: none;
}
.ilUiSourcePrimitive:hover {
  outline: 1px solid rgba(118, 242, 227, .75);
  outline-offset: 1px;
  filter: brightness(1.12);
  z-index: 1000 !important;
}
.ilUiSourcePrimitive.dimmed { opacity: .14; filter: saturate(.5); }
.ilUiSourcePrimitive.dimmed:hover { opacity: .55; }
.ilUiSourceEmpty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}
.ilUiSourceEmpty b { color: var(--text); font-size: 11px; }
.ilUiSourceEmpty span { max-width: 360px; font-size: 9px; line-height: 1.5; }
.ilUiCanvasPanel > footer {
  min-height: 38px;
  padding: 7px 12px;
  font-size: 9px;
}
.ilUiCanvasPanel > footer code { max-width: 44%; font-size: 8px; }

.ilUiInspector { background: linear-gradient(180deg, var(--studio-surface, rgba(15,22,37,.99)), var(--studio-surface, rgba(9,14,25,.995))); }
.ilUiInspectorGrid { gap: 9px; padding: 12px; }
.ilUiInspectorGrid label > span { font-size: 8px; }
.ilUiInspectorGrid input,
.ilUiInspectorGrid select { height: 30px; font-size: 9px; }
.ilUiSourceInspector {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
}
.ilUiSourceMetricGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.ilUiSourceMetricGrid article {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--studio-wash, rgba(255,255,255,.018));
}
.ilUiSourceMetricGrid span {
  color: var(--muted);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.ilUiSourceMetricGrid b { font-size: 13px; }
.ilUiSourceMetricGrid article.warn b { color: var(--studio-warn, #eabf6f); }
.ilUiSourceMetricGrid article.good b { color: var(--studio-good, #85eab0); }
.ilUiSourceCard,
.ilUiSourceNotice {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--studio-wash, rgba(255,255,255,.018));
}
.ilUiSourceCard > span {
  color: var(--muted);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.ilUiSourceCard b { overflow-wrap: anywhere; font-size: 10px; }
.ilUiSourceCard small,
.ilUiSourceNotice span {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.5;
}
.ilUiSourceCard code {
  overflow-wrap: anywhere;
  color: var(--studio-ink, #9cc5e8);
  font-size: 7px;
  line-height: 1.45;
}
.ilUiSourceCard button { justify-self: start; margin-top: 3px; }
.ilUiSourceNotice {
  border-color: rgba(81, 221, 205, .18);
  background: rgba(75, 213, 198, .04);
}
.ilUiSourceNotice b { color: var(--studio-accent, #a8f5ec); font-size: 9px; }

.ilUiSidebarIntro {
  gap: 6px;
  padding: 12px;
}
.ilUiSidebarIntro b { font-size: 11px; }
.ilUiSidebarIntro span { font-size: 9px; }
.ilUiSidebarRows { padding: 7px; }
.ilUiSidebarRows > button {
  min-height: 50px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
}
.ilUiSidebarRows b { font-size: 10px; }
.ilUiSidebarRows small { font-size: 8px; }
.ilUiFileType {
  width: 31px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(90, 226, 211, .18);
  border-radius: 6px;
  color: var(--studio-accent, #9af0e6) !important;
  background: rgba(75, 213, 198, .06);
  font: 800 7px/1 Cascadia Code, Consolas, monospace;
  letter-spacing: .04em;
}

html[data-theme="light"] .ilUiSourceInspector,
body.lightTheme .ilUiSourceInspector { background: transparent; }
html[data-theme="light"] .ilUiPreviewHeader,
body.lightTheme .ilUiPreviewHeader { background: #eef3f8; }
html[data-theme="light"] .ilUiSourceCard,
html[data-theme="light"] .ilUiSourceMetricGrid article,
body.lightTheme .ilUiSourceCard,
body.lightTheme .ilUiSourceMetricGrid article { background: rgba(255,255,255,.62); }

@media (max-width: 1380px) {
  .ilUiStudio.sourceMode .ilUiWorkspace { grid-template-columns: 168px minmax(420px, 1fr) 286px; }
  .ilUiSourceSummary > span:last-child { max-width: 260px; }
}
@media (max-width: 1100px) {
  .ilUiStudio.sourceMode .ilUiWorkspace { grid-template-columns: 150px minmax(380px, 1fr); }
  .ilUiStudio.sourceMode .ilUiInspector { position: absolute; top: 60px; right: 0; bottom: 0; z-index: 20; width: 300px; box-shadow: -16px 0 35px rgba(0,0,0,.3); }
  .ilUiSourceSummary > span:last-child { display: none; }
}

/* Top-right Interactive Studios account */
.studioAccount {
  position: relative;
  flex: 0 0 auto;
}
.studioAccountButton {
  min-height: 40px;
  padding: 4px 7px 4px 5px;
  border-color: rgba(120, 244, 237, 0.14);
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
}
.studioAccountButton:hover,
.studioAccount.open .studioAccountButton {
  border-color: rgba(120, 244, 237, 0.34);
  background: rgba(120, 244, 237, 0.075);
}
.studioAccountAvatar {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #071318;
  background: linear-gradient(145deg, var(--cyan), #83a8ff 58%, var(--violet));
  font-size: 10px;
  font-weight: 950;
  letter-spacing: -0.03em;
  box-shadow: 0 7px 18px rgba(64, 218, 226, 0.16);
}
.studioAccountAvatar.large {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 12px;
}
.studioAccountIdentity {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
  line-height: 1.05;
}
.studioAccountIdentity b {
  max-width: 118px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studioAccountIdentity small {
  max-width: 126px;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studioAccountChevron {
  margin: 0 2px 0 -1px;
  color: var(--muted);
  font-size: 10px;
  transition: transform 0.16s ease;
}
.studioAccount.open .studioAccountChevron { transform: rotate(180deg); }
.studioAccountPanel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(350px, calc(100vw - 22px));
  padding: 14px;
  border: 1px solid rgba(120, 244, 237, 0.18);
  border-radius: 15px;
  background: linear-gradient(160deg, var(--studio-surface, rgba(17, 26, 46, 0.99)), var(--studio-surface, rgba(8, 13, 26, 0.995)));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(24px);
  z-index: 90;
}
.studioAccountHead {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.studioAccountHead > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.studioAccountHead b {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studioAccountHead span:not(.studioAccountAvatar) {
  color: var(--muted);
  font-size: 9px;
}
.studioAccountStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}
.studioAccountStats > div,
.studioAccountSession {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--studio-wash, rgba(255, 255, 255, 0.025));
}
.studioAccountStats span,
.studioAccountSession span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.studioAccountStats b,
.studioAccountSession b {
  display: block;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
}
.studioAccountSession { margin-top: 7px; }
.studioAccountLogout {
  width: 100%;
  margin-top: 10px;
  min-height: 38px;
  border-color: rgba(255, 107, 131, 0.25);
  color: var(--studio-bad, #ffc4ce);
  background: rgba(255, 107, 131, 0.065);
  font-weight: 800;
}
.studioAccountLogout:hover {
  border-color: rgba(255, 107, 131, 0.42);
  background: rgba(255, 107, 131, 0.12);
}
.studioAccount.busy { pointer-events: none; opacity: 0.65; }

@media (max-width: 1180px) {
  .studioAccountIdentity { display: none; }
  .studioAccountButton .pill { display: none; }
  .studioAccountButton { padding-right: 6px; }
}

/* Build Centre — compact loader-aware builder */
.buildCenterDialog {
  width: min(900px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
}
.buildCenterDialog .modalBody { padding: 0; }
.buildCenterShell {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.buildCenterCompactHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px 4px;
}
.buildCenterCompactHeader h3 {
  margin: 2px 0 3px;
  font-size: 20px;
  letter-spacing: -.025em;
}
.buildCenterCompactHeader p,
.buildCenterCompactTitle small,
.buildCenterHeroMeta small {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}
.buildCenterHeroMeta {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 0;
}
.buildCenterHeroMeta small {
  max-width: 260px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buildCenterReadyCount {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(120,244,237,.2);
  border-radius: 8px;
  background: rgba(120,244,237,.055);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}
.buildCenterReadyCount b { color: var(--cyan); font-size: 14px; }
.buildCenterUnavailable {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--bad) 38%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--bad) 7%, var(--panel, var(--studio-surface, #111a2a)));
}
.buildCenterUnavailable > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--bad) 18%, transparent);
  color: var(--bad);
  font-weight: 900;
}
.buildCenterUnavailable p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.buildCenterCard {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel, var(--studio-surface, #111a2a)) 96%, var(--canvas));
}
.buildCenterCompactTitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.buildCenterCompactTitle > b,
.buildCenterCompactTitle > div > b { font-size: 11px; }
.buildCenterCompactTitleActions { align-items: center; }
.buildCenterCompactTitleActions > div { display: grid; gap: 2px; }
.buildTargetGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.buildPickerCard {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.buildPickerCard > span,
.buildCenterRuntimeCompact > label > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}
.buildPickerCard > .field,
.buildCenterRuntimeCompact .field { min-height: 34px; }
.buildTargetSummary {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 4%, var(--canvas));
}
.buildTargetIdentity { display: flex; align-items: center; gap: 8px; min-width: 0; }
.buildTargetIdentity > div,
.buildTargetState { display: grid; gap: 2px; min-width: 0; }
.buildTargetIdentity b { font-size: 10px; }
.buildTargetIdentity small,
.buildTargetState small,
.buildTargetNotice { color: var(--muted); font-size: 8px; line-height: 1.3; }
.buildTargetState { justify-items: end; text-align: right; }
.buildLoaderBadge {
  display: inline-grid;
  place-items: center;
  min-width: 64px;
  height: 27px;
  padding: 0 8px;
  border: 1px solid rgba(120,244,237,.24);
  border-radius: 7px;
  background: rgba(120,244,237,.07);
  color: var(--cyan);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.buildLoaderBadge.neoforge { border-color: rgba(164,118,255,.3); background: rgba(164,118,255,.08); color: var(--studio-violet, #bda4ff); }
.buildLoaderBadge.fabric,
.buildLoaderBadge.quilt { border-color: color-mix(in srgb, var(--warn) 32%, var(--line)); color: var(--warn); }
.buildTargetNotice { width: 100%; padding-top: 5px; border-top: 1px solid var(--line); }
.buildFeaturePresets {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}
.buildFeaturePresets button {
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: 700 9px Inter, system-ui, sans-serif;
  cursor: pointer;
}
.buildFeaturePresets button:hover,
.buildFeaturePresets button.active { border-color: rgba(120,244,237,.3); background: rgba(120,244,237,.06); color: var(--text); }
.buildModCompactGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.buildModToggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 50px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--canvas) 68%, transparent);
  cursor: pointer;
}
.buildModToggle:has(input:checked) { border-color: rgba(120,244,237,.3); background: rgba(120,244,237,.06); }
.buildModToggle > input { flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--accent); }
.buildModToggle > span { min-width: 0; }
.buildModToggle b { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.buildModToggle i { display: block; margin-top: 3px; color: var(--muted); font-size: 7px; font-style: normal; line-height: 1.25; }
.buildModToggle.required { cursor: default; }
.buildModToggle.unavailable { opacity: .48; cursor: not-allowed; filter: saturate(.5); }
.buildFeatureCompactGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.buildFeatureToggle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--canvas) 68%, transparent);
  cursor: pointer;
}
.buildFeatureToggle > input { flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.buildFeatureToggle > span { min-width: 0; }
.buildFeatureTitle { display: flex !important; align-items: center; gap: 5px; min-width: 0; }
.buildFeatureTitle b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.buildFeatureTitle em {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font: normal 700 6px Cascadia Code, Consolas, monospace;
  white-space: nowrap;
}
.buildFeatureToggle i { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; font-style: normal; line-height: 1.25; }
.buildFeatureToggle.unavailable { opacity: .48; cursor: not-allowed; filter: saturate(.5); }
.buildCenterRuntimeCompact {
  display: grid;
  grid-template-columns: minmax(210px, 290px) minmax(0, 1fr);
  gap: 7px 12px;
  align-items: end;
}
.buildCenterRuntimeCompact > label:first-child { display: grid; gap: 5px; }
.buildCenterRuntimeCompact > small { align-self: center; color: var(--muted); font-size: 8px; line-height: 1.35; }
.buildEulaConfirm { grid-column: 1 / -1; color: var(--muted); font-size: 8px; }
.buildCenterActionsCompact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1px 0;
}
.buildCenterActionsCompact > small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.buildPrimaryAction { min-width: 170px; }
.buildQuickDebugAction {
  min-width: 112px;
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  background: color-mix(in srgb, var(--warn) 9%, var(--panel, var(--studio-surface, #111a2a)));
}
.buildQuickDebugAction:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--warn) 72%, var(--line));
  background: color-mix(in srgb, var(--warn) 15%, var(--panel, var(--studio-surface, #111a2a)));
}
.buildCenterExtras {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel, var(--studio-surface, #111a2a)) 94%, var(--canvas));
  overflow: hidden;
}
.buildCenterExtras summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.buildCenterExtras summary span { font-size: 8px; }
.buildCenterExtrasBody {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px 10px;
}
.buildCenterHistory .listCard { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.buildCenterRecentRow { min-height: 42px; padding: 7px 9px; }
@media (max-width: 760px) {
  .buildCenterDialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
  .buildCenterCompactHeader { padding-inline: 4px; }
  .buildCenterHeroMeta { display: none; }
  .buildModCompactGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buildFeatureCompactGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buildCenterRuntimeCompact { grid-template-columns: 1fr; }
  .buildCenterRuntimeCompact > small,
  .buildEulaConfirm { grid-column: 1; }
}
@media (max-width: 520px) {
  .buildCenterShell { padding: 9px; }
  .buildTargetGrid,
  .buildFeatureCompactGrid { grid-template-columns: 1fr; }
  .buildTargetSummary { align-items: flex-start; flex-direction: column; }
  .buildTargetState { justify-items: start; text-align: left; }
  .buildCenterActionsCompact { align-items: stretch; flex-direction: column; }
  .buildPrimaryAction,
  .buildQuickDebugAction { width: 100%; }
}

/* Minecraft Server — dedicated infrastructure workspace */
/* Keep Explorer out of the server workspace even though the canonical docked
   layout normally forces visible sidebars back to display:flex. */
#app.minecraftServerActive:not(.focusMode) .sidebar,
#app.minecraftServerActive:not(.focusMode) [data-resize-panel="sidebar"] {
  display: none !important;
}
#app.minecraftServerActive:not(.focusMode) .mainGrid {
  grid-template-columns: var(--activity) 0 minmax(0, 1fr) var(--inspector) !important;
  grid-template-rows: minmax(0, 1fr) 0 !important;
}
#app.minecraftServerActive:not(.focusMode) .editor {
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  min-height: 0 !important;
}
#app.minecraftServerActive .timeline,
#app.minecraftServerActive [data-resize-panel="timeline"],
#app.minecraftServerActive .workToolbar {
  display: none !important;
}
#app.minecraftServerActive .editorBody,
#app.minecraftServerActive .workbench,
#app.minecraftServerActive #contentHost {
  min-height: 0 !important;
}
#app.minecraftServerActive .workbench {
  height: 100%;
  grid-template-rows: minmax(0, 1fr) !important;
}
#app.minecraftServerActive #contentHost {
  height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: color-mix(in srgb, var(--canvas) 96%, var(--panel, var(--studio-surface, #111a2a)));
}
.minecraftServerPage {
  min-height: 100%;
  padding: 24px clamp(18px, 3vw, 38px) 44px;
}
.minecraftServerPageHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  max-width: 1500px;
  margin: 0 auto 18px;
}
.minecraftServerPageHeader h2 {
  margin: 4px 0 6px;
  font-size: clamp(27px, 3vw, 38px);
  letter-spacing: -.035em;
}
.minecraftServerPageHeader p {
  max-width: 900px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.minecraftServerPageState {
  display: grid;
  justify-items: end;
  gap: 7px;
  padding-top: 6px;
  white-space: nowrap;
}
.minecraftServerPageState small { color: var(--muted); }
.minecraftServerTabs {
  display: flex;
  gap: 5px;
  max-width: 1500px;
  margin: 0 auto 14px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel, var(--studio-surface, #111a2a)) 88%, transparent);
}
.minecraftServerTabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.minecraftServerTabs button:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.minecraftServerTabs button.active { color: var(--text); background: color-mix(in srgb, var(--accent) 15%, var(--panel, var(--studio-surface, #111a2a))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, var(--line)); }
.minecraftServerPageBody {
  display: grid;
  gap: 14px;
  max-width: 1500px;
  margin: 0 auto;
}
.minecraftServerResourceSection,
.minecraftServerSettingsCard,
.minecraftServerManagementCard {
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel, var(--studio-surface, #111a2a)) 95%, var(--canvas));
  box-shadow: 0 16px 42px rgba(0,0,0,.08);
}
.minecraftServerSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.minecraftServerSectionHead h3 {
  margin: 3px 0 4px;
  font-size: 20px;
  letter-spacing: -.02em;
}
.minecraftServerSectionHead p {
  max-width: 880px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.minecraftServerResourceGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.minecraftServerResourceGrid article,
.minecraftServerStatusStrip > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--canvas) 32%, var(--panel, var(--studio-surface, #111a2a)));
}
.minecraftServerResourceGrid article.resourceAccent {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel, var(--studio-surface, #111a2a)));
}
.minecraftServerResourceGrid span,
.minecraftServerStatusStrip span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.minecraftServerResourceGrid b,
.minecraftServerStatusStrip b {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.minecraftServerResourceGrid small,
.minecraftServerStatusStrip small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.minecraftServerStatusStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}
.minecraftServerStatusStrip .pill { width: fit-content; }
.minecraftServerSettingsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}
.minecraftServerSettingsGrid > label {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}
.minecraftServerSettingsGrid > label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.minecraftServerSettingsGrid > label > small { color: var(--muted); font-size: 10px; }
.minecraftServerMemoryInput {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 108px;
  align-items: center;
  gap: 8px;
}
.minecraftServerMemoryInput input[type="range"] { width: 100%; accent-color: var(--accent); }
.minecraftServerEula { margin-top: 10px; }
.minecraftServerDropZone {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 170px;
  padding: 24px;
  border: 1px dashed color-mix(in srgb, var(--accent) 46%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  text-align: center;
  cursor: pointer;
  transition: .16s ease;
}
.minecraftServerDropZone:hover,
.minecraftServerDropZone.dragging {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transform: translateY(-1px);
}
.minecraftServerDropZone input { display: none; }
.minecraftServerDropZone > span { font-size: 29px; color: var(--accent); }
.minecraftServerDropZone > b { font-size: 15px; }
.minecraftServerDropZone > small { max-width: 660px; color: var(--muted); line-height: 1.45; }
.minecraftServerFileList,
.minecraftServerBackupList,
.minecraftServerRoleRows,
.minecraftServerMemberRows {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}
.minecraftServerFileList article,
.minecraftServerBackupList article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--canvas) 22%, var(--panel, var(--studio-surface, #111a2a)));
}
.minecraftServerFileList article > div,
.minecraftServerBackupList article > div { display: grid; gap: 3px; min-width: 0; }
.minecraftServerFileList article b,
.minecraftServerBackupList article b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minecraftServerFileList article small,
.minecraftServerBackupList article small { color: var(--muted); }
.minecraftServerInlineToggle {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.minecraftServerInlineToggle input { accent-color: var(--accent); }
.minecraftServerWorldActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.minecraftServerWorldActions label.btn { cursor: pointer; }
.minecraftServerWorldActions label.btn input { display: none; }
.minecraftServerWorldActions .disabled { opacity: .45; pointer-events: none; }
.minecraftServerStaffNotice {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--warn) 6%, transparent);
}
.minecraftServerStaffNotice span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.minecraftServerStaffColumns {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 14px;
}
.minecraftServerSubhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.minecraftServerSubhead h4 { margin: 0; }
.minecraftServerRoleRows article {
  display: grid;
  grid-template-columns: minmax(100px, .7fr) minmax(120px, .8fr) 72px minmax(180px, 1.7fr) auto;
  gap: 6px;
  align-items: center;
}
.minecraftServerMemberRows article {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, .9fr) auto auto;
  gap: 6px;
  align-items: center;
}
.minecraftServerConsoleCard .minecraftServerLog {
  min-height: min(58vh, 620px);
  max-height: 70vh;
}
@media (max-width: 1180px) {
  .minecraftServerResourceGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .minecraftServerSettingsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .minecraftServerStatusStrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .minecraftServerStaffColumns { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .minecraftServerPage { padding: 16px 12px 30px; }
  .minecraftServerPageHeader,
  .minecraftServerSectionHead { flex-direction: column; }
  .minecraftServerPageState { justify-items: start; }
  .minecraftServerResourceGrid,
  .minecraftServerSettingsGrid,
  .minecraftServerStatusStrip { grid-template-columns: 1fr; }
  .minecraftServerFileList article,
  .minecraftServerBackupList article { grid-template-columns: minmax(0, 1fr); }
  .minecraftServerRoleRows article,
  .minecraftServerMemberRows article { grid-template-columns: 1fr; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
  .minecraftServerMemoryInput { grid-template-columns: 1fr; }
}

/* Character Animator */
.characterAnimatorActive .workToolbar .codeTools,
.characterAnimatorActive .workToolbar .modelTools,
.characterAnimatorActive .workToolbar .textureTools,
.characterAnimatorActive > .mainGrid > .timeline { display:none !important; }
.characterAnimatorActive .editorBody { overflow:hidden; }
.characterAnimatorShell { height:100%; min-height:0; display:flex; flex-direction:column; background:var(--editor-bg,var(--studio-surface, #0b0e13)); color:var(--text,var(--studio-ink, #e6eaf0)); }
.characterAnimatorHeader { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 18px; border-bottom:1px solid var(--border,var(--studio-line, #2a313b)); background:linear-gradient(180deg,var(--studio-surface, rgba(28,34,42,.98)),var(--studio-surface, rgba(18,22,28,.98))); }
.characterAnimatorHeader h2 { margin:2px 0 3px; font-size:18px; }
.characterAnimatorHeader p { margin:0; max-width:760px; color:var(--muted,var(--studio-muted, #9aa6b5)); font-size:12px; }
.characterAnimatorHeaderActions { display:flex; align-items:end; gap:8px; flex-wrap:wrap; }
.characterAnimatorHeaderActions label { display:grid; gap:4px; font-size:10px; color:var(--muted,var(--studio-muted, #9aa6b5)); }
.characterAnimatorGrid { flex:1; min-height:0; display:grid; grid-template-columns:178px minmax(360px,1fr) 250px; gap:0; }
.characterAnimatorParts,.characterAnimatorTruth { min-height:0; overflow:auto; background:var(--studio-surface, rgba(13,17,22,.96)); padding:12px; border-right:1px solid var(--border,var(--studio-line, #2a313b)); }
.characterAnimatorTruth { border-right:0; border-left:1px solid var(--border,var(--studio-line, #2a313b)); }
.caPanelTitle { display:grid; gap:2px; margin-bottom:10px; }.caPanelTitle b { font-size:12px; text-transform:uppercase; letter-spacing:.06em; }.caPanelTitle small { color:var(--muted,var(--studio-muted, #8f9baa)); font-size:10px; }
.caPartGroup { display:grid; gap:4px; margin:12px 0; }.caPartGroup>span { color:var(--muted,var(--studio-muted, #8f9baa)); font-size:9px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px; }
.caPartGroup button,.caViewportToolbar button { appearance:none; border:1px solid var(--studio-line, #303a45); background:var(--studio-surface, #171d24); color:var(--studio-ink, #dbe3ec); border-radius:4px; min-height:28px; text-align:left; padding:5px 8px; cursor:pointer; }
.caPartGroup button:hover,.caViewportToolbar button:hover,.caPartGroup button.active,.caViewportToolbar button.active { border-color:#5e93ad; background:var(--studio-surface, #202a34); }
.characterAnimatorViewportWrap { min-width:0; min-height:0; position:relative; display:flex; flex-direction:column; background:var(--studio-surface, #090c10); }
.caViewportToolbar { display:flex; gap:4px; align-items:center; padding:7px 9px; border-bottom:1px solid var(--studio-line, #252d36); background:var(--studio-surface, #11161c); }.caViewportToolbar button { min-height:25px; text-align:center; font-size:10px; }
.caReachState { margin-left:auto; font-size:10px; border:1px solid var(--studio-line, #38434f); border-radius:10px; padding:3px 7px; color:var(--studio-ink, #c9d2dc); }.caReachState.good{border-color:var(--studio-line, #3b7859);color:var(--studio-good, #8fe2ae)}.caReachState.bad{border-color:#8e4949;color:var(--studio-bad, #ffaaaa)}
.characterAnimatorViewport { flex:1; min-height:320px; position:relative; }.characterAnimatorViewport canvas { display:block; width:100%; height:100%; }
.caViewportLegend { display:flex; gap:16px; flex-wrap:wrap; padding:6px 10px; border-top:1px solid var(--studio-line, #252d36); background:var(--studio-surface, #11161c); color:var(--studio-muted, #8593a1); font-size:9px; }
.caTruthToggle { display:flex; align-items:center; gap:7px; min-height:28px; border-bottom:1px solid var(--studio-line, #242b33); font-size:10px; }.caTruthToggle input{accent-color:#69d7ff}
.caTruthStatus { display:grid; gap:5px; margin:10px 0; }.caTruthEmpty { display:grid; gap:4px; padding:9px; background:var(--studio-surface, #151a20); border:1px solid var(--studio-line, #2d3741); font-size:10px; }.caTruthEmpty span{color:var(--studio-muted, #8996a4);line-height:1.45}
.caTruthRow { display:grid; grid-template-columns:1fr auto auto; gap:3px 7px; align-items:center; padding:6px 7px; border:1px solid var(--studio-line, #323b46); background:var(--studio-surface, #151a20); font-size:9px; }.caTruthRow b{grid-column:1}.caTruthRow strong{grid-column:1/-1;font-size:9px}.caTruthRow.good{border-color:var(--studio-line, #346b4d)}.caTruthRow.good strong{color:var(--studio-good, #86d9a5)}.caTruthRow.bad{border-color:var(--studio-line, #874343)}.caTruthRow.bad strong{color:var(--studio-bad, #ff9c9c)}
.caTruthSockets{display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:9px;color:var(--studio-muted, #94a1ae);padding:6px}.caTruthContract{margin-top:9px;font-size:9px;color:var(--studio-muted, #8d9aa7)}.caTruthContract pre{white-space:pre-wrap;overflow:auto;background:var(--studio-surface, #0c1015);padding:7px;border:1px solid var(--studio-line, #2c343d)}
.characterAnimatorTruth .btn { width:100%; margin-top:6px; }
.characterAnimatorTimeline { min-height:84px; border-top:1px solid var(--studio-line, #2b333d); background:var(--studio-surface, #11161c); padding:8px 12px; }.caTimelineControls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10px}.caTimelineControls>button{width:28px;height:27px;border:1px solid var(--studio-line, #303a45);background:var(--studio-surface, #181f27);color:var(--studio-ink, #e0e7ef);border-radius:4px}.caTimelineControls label{display:flex;align-items:center;gap:5px;color:var(--studio-muted, #8f9baa)}.caTimelineControls input.field{width:62px;padding:4px 6px}.caTimelineControls input[type=range]{width:190px}
.caKeyTrack { position:relative; height:28px; margin-top:8px; border:1px solid var(--studio-line, #29323b); background:var(--studio-surface, #0b0f14); overflow:hidden; }.caTrackLine{position:absolute;left:0;right:0;top:13px;border-top:1px solid var(--studio-line, #33404c)}.caKey{position:absolute;top:5px;transform:translateX(-50%);background:transparent;border:0;color:var(--studio-warn, #e7c66b);cursor:pointer}.caTrackPlayhead{position:absolute;top:0;bottom:0;width:1px;background:#67d8ff;pointer-events:none}
.caInspector { display:grid; gap:9px; }.caInspectorLabel{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--studio-muted, #8693a1)}.caVectorFields{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.caVectorFields label{display:grid;gap:3px;font-size:8px;color:var(--studio-muted, #8795a2)}.caVectorFields input{width:100%;min-width:0}.caInspectorReadout,.caInspectorLimits{display:grid;gap:5px;padding:8px;background:var(--studio-surface, #12171d);border:1px solid var(--studio-line, #2a333c);font-size:9px}.caInspectorReadout code{color:var(--studio-ink, #b8d8e8);white-space:normal}.caInspectorLimits span{color:var(--studio-muted, #8c99a6)}
@media (max-width:1100px){.characterAnimatorGrid{grid-template-columns:150px minmax(300px,1fr)}.characterAnimatorTruth{grid-column:1/-1;border-left:0;border-top:1px solid var(--studio-line, #2a313b);max-height:190px}.characterAnimatorHeader{align-items:flex-start;flex-direction:column}}
.caTruthImportPanel{display:grid;gap:6px;margin-top:8px;padding:8px;border:1px solid var(--studio-line, #394552);background:var(--studio-surface, #0d1218)}.caTruthImportPanel.hidden{display:none}.caTruthImportPanel label{font-size:9px;color:var(--studio-muted, #a5b1bd);text-transform:uppercase;letter-spacing:.06em}.caTruthImportPanel textarea{min-height:150px;resize:vertical;background:var(--studio-surface, #080c11);color:var(--studio-ink, #cbd8e5);border:1px solid var(--studio-line, #2e3944);border-radius:3px;padding:7px;font:9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}.caTruthImportPanel>div{display:flex;gap:6px}.caTruthImportPanel>div .btn{margin-top:0}
.caTruthSequence{display:grid;gap:4px;margin:8px 0;padding:7px;border:1px solid var(--studio-line, #2e3944);background:var(--studio-surface, #10151b);font-size:9px}.caTruthSequence label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px;color:var(--studio-muted, #96a4b1)}.caTruthSequence input{width:100%}.caTruthSequence span{color:var(--studio-ink, #c9d4df)}.caTruthDuplicate{display:grid;gap:3px;padding:7px;border:1px solid var(--studio-line, #36424e);background:var(--studio-surface, #12181e);font-size:9px}.caTruthDuplicate.good{border-color:var(--studio-line, #346b4d)}.caTruthDuplicate.bad{border-color:var(--studio-line, #874343)}.caTruthDuplicate.good span{color:var(--studio-good, #86d9a5)}.caTruthDuplicate.bad span{color:var(--studio-bad, #ff9c9c)}.caTruthDuplicate small{color:var(--studio-muted, #8996a4);line-height:1.35}
.caAssignmentPanel { margin-top:14px; padding-top:12px; border-top:1px solid var(--studio-line, #2b333d); display:grid; gap:8px; }
.caAssignmentPanel>small { color:var(--muted,var(--studio-muted, #8f9baa)); line-height:1.35; }
.caAssignmentHeader { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.caAssignmentHeader>span { color:var(--studio-ink, #e8eef5); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.caAssignmentHeader button { min-width:28px; min-height:24px; border:1px solid var(--studio-line, #3a4855); border-radius:4px; background:var(--studio-surface, #1a232c); color:var(--studio-ink, #dbe3ec); cursor:pointer; }
.caAssignmentRule { display:grid; gap:6px; padding:8px; border:1px solid var(--studio-line, #303a45); border-radius:5px; background:var(--studio-surface, #121820); }
.caAssignmentRule>label { display:grid; gap:3px; color:var(--studio-muted, #aeb9c5); font-size:10px; }
.caAssignmentRule .field { min-width:0; width:100%; }
.caAssignmentEnabled,.caAssignmentOverride { grid-template-columns:auto 1fr auto !important; align-items:center; }
.caAssignmentEnabled>span { color:var(--studio-accent, #7fc4e8); font-size:9px; justify-self:end; }
.caAssignmentOverride { grid-template-columns:auto 1fr !important; }
.caRemoveAssignment { border:1px solid var(--studio-line, #49333a); background:var(--studio-surface, #21171b); color:var(--studio-muted, #d8a6b2); border-radius:4px; min-height:26px; cursor:pointer; }
.caRemoveAssignment:disabled { opacity:.35; cursor:default; }
.caAssignmentResolver { color:var(--studio-muted, #8493a2); font-size:9px; line-height:1.35; }
.caAssignmentResolver b { color:var(--studio-ink, #b9c8d6); font-weight:600; }
.caTruthDiagnosis{display:grid;gap:3px;padding:7px;border:1px solid var(--studio-line, #36424e);background:var(--studio-surface, #12181e);font-size:9px}.caTruthDiagnosis.good{border-color:var(--studio-line, #346b4d)}.caTruthDiagnosis.bad{border-color:var(--studio-line, #874343)}.caTruthDiagnosis.good span{color:var(--studio-good, #86d9a5)}.caTruthDiagnosis.bad span{color:var(--studio-bad, #ff9c9c)}.caTruthDiagnosis small{color:var(--studio-muted, #8996a4);line-height:1.35}
.caAssignmentTargetRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px}.caAssignmentTargetRow button{min-width:58px;border:1px solid var(--studio-line, #3a4855);border-radius:4px;background:var(--studio-surface, #1a232c);color:var(--studio-ink, #dbe3ec);font-size:9px;cursor:pointer}.caAssignmentTargetRow button:hover{border-color:#5e93ad;background:var(--studio-surface, #202a34)}

/* Character Animator 3.2 Stage 5 transform authoring */
.caViewportToolbar { flex-wrap:wrap; }
.caViewTools,.caTransformTools,.caAxisTools { display:flex; align-items:center; gap:4px; }
.caTransformTools { padding-left:7px; margin-left:3px; border-left:1px solid var(--studio-line, #2d3640); flex-wrap:wrap; }
.caTransformTools button.active,.caAxisTools button.active { border-color:#67c7e7; background:var(--studio-surface, #17303b); color:var(--studio-accent, #dff8ff); box-shadow:inset 0 0 0 1px rgba(103,199,231,.18); }
.caTransformTools button:disabled { opacity:.42; cursor:not-allowed; }
.caSnapToggle,.caSnapStep { display:flex; align-items:center; gap:4px; min-height:25px; padding:0 5px; border:1px solid var(--studio-line, #2d3742); border-radius:4px; background:var(--studio-surface, #141a21); color:var(--studio-muted, #9eabb8); font-size:9px; }
.caSnapToggle input { margin:0; }
.caSnapStep input.field { width:54px; min-height:21px; padding:2px 4px; font-size:9px; }
.caAxisTools { padding-left:4px; }
.caAxisTools button { min-width:25px; padding:4px 5px; }
#caReachState { margin-left:auto; }
#caClearanceState { margin-left:0; }
.caViewportLegend b { color:var(--studio-accent, #cbefff); font-weight:700; }
.caInspectorCheck { display:flex; align-items:center; gap:6px; padding:7px 8px; border:1px solid var(--studio-line, #2a333c); background:var(--studio-surface, #12171d); color:var(--studio-muted, #aab6c2); font-size:9px; }
.caInspectorHint { display:block; line-height:1.45; color:var(--studio-muted, #7f8d9b); padding:1px 2px; }
.caInspector > .caInspectorLabel > input.field { display:block; width:100%; margin-top:5px; }
@media (max-width:1350px){.caTransformTools{order:3;width:100%;padding-left:0;margin-left:0;border-left:0;border-top:1px solid var(--studio-line, #252d36);padding-top:5px}.caViewportToolbar #caReachState{margin-left:auto}}

.caTruthAcceptance{display:grid;gap:6px;padding:7px;border:1px solid var(--studio-line, #36424e);background:var(--studio-surface, #10161c);font-size:9px}.caTruthAcceptance.pass{border-color:var(--studio-line, #346b4d)}.caTruthAcceptance.blocked{border-color:var(--studio-line, #874343)}.caTruthAcceptance.legacy{color:var(--studio-muted, #8996a4)}.caTruthAcceptanceHead{display:grid;gap:2px}.caTruthAcceptanceHead strong{font-size:9px}.caTruthAcceptance.pass .caTruthAcceptanceHead strong{color:var(--studio-good, #86d9a5)}.caTruthAcceptance.blocked .caTruthAcceptanceHead strong{color:var(--studio-bad, #ff9c9c)}.caTruthAcceptanceHead span{color:var(--studio-muted, #8996a4);line-height:1.35}.caTruthAcceptanceGrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.caTruthAcceptanceState{display:grid;gap:2px;padding:5px;border:1px solid var(--studio-line, #303a44);background:var(--studio-surface, #0d1217)}.caTruthAcceptanceState[role="button"]{cursor:pointer;outline:none}.caTruthAcceptanceState[role="button"]:hover,.caTruthAcceptanceState[role="button"]:focus{border-color:#5d7f96;background:var(--studio-surface, #111a22)}.caTruthAcceptanceState.pass{border-color:var(--studio-line, #315d45)}.caTruthAcceptanceState.blocked{border-color:var(--studio-line, #713b3b)}.caTruthAcceptanceState.incomplete{border-color:var(--studio-line, #65562d)}.caTruthAcceptanceState strong{font-size:8px;color:var(--studio-warn, #d9b96a)}.caTruthAcceptanceState.pass strong{color:var(--studio-good, #86d9a5)}.caTruthAcceptanceState.blocked strong{color:var(--studio-bad, #ff9c9c)}.caTruthAcceptanceState span,.caTruthAcceptanceState small{color:var(--studio-muted, #8996a4)}

/* Character Animator 3.3 Stage 1 channel timeline authoring */
.characterAnimatorTimeline { min-height:170px; max-height:310px; display:flex; flex-direction:column; padding:8px 10px 10px; overflow:hidden; }
.caTimelineControls { flex:0 0 auto; }
.caTimelineControls>button.caTimelineTextButton { width:auto; min-width:70px; padding:0 8px; font-size:9px; }
.caTimelineControls>button.danger { border-color:var(--studio-line, #5a3439); color:var(--studio-bad, #e6a4ad); background:var(--studio-surface, #23171a); }
.caTimelineControls>button:disabled { opacity:.38; cursor:default; }
.caTimelineControls select.field { width:94px; min-height:25px; padding:3px 5px; font-size:9px; }
.caTimelineToggle { min-height:25px; padding:0 6px; border:1px solid var(--studio-line, #2d3742); border-radius:4px; background:var(--studio-surface, #141a21); }
.caTimelineToggle input { margin:0; }
.caTimelineTrackHeader { display:grid; grid-template-columns:132px minmax(0,1fr); margin-top:8px; border:1px solid var(--studio-line, #2b343e); border-bottom:0; background:var(--studio-surface, #151b22); color:var(--studio-muted, #758391); font-size:8px; text-transform:uppercase; letter-spacing:.06em; }
.caTimelineTrackHeader span { padding:4px 7px; }
.caTimelineTrackHeader span:first-child { border-right:1px solid var(--studio-line, #2b343e); }
.caTimelineTracks { flex:1 1 auto; min-height:0; overflow:auto; border:1px solid var(--studio-line, #2b343e); background:var(--studio-surface, #0b0f14); }
.caTrackRow { display:grid; grid-template-columns:132px minmax(260px,1fr); min-height:27px; border-bottom:1px solid var(--studio-line, #202831); }
.caTrackRow:last-child { border-bottom:0; }
.caTrackRow.active { background:rgba(70,136,171,.08); }
.caTrackLabel { appearance:none; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:5px; width:100%; padding:3px 7px; border:0; border-right:1px solid var(--studio-line, #29323b); background:var(--studio-surface, #11171d); color:var(--studio-ink, #bac5d0); font-size:9px; text-align:left; cursor:pointer; }
.caTrackLabel:hover,.caTrackRow.active .caTrackLabel { background:var(--studio-surface, #17222b); color:var(--studio-accent, #e5f5ff); }
.caTrackLabel small { color:var(--studio-muted, #667583); font-size:7px; text-transform:uppercase; letter-spacing:.05em; }
.caTrackLane { position:relative; min-width:260px; overflow:hidden; background-image:linear-gradient(to right,rgba(72,89,104,.12) 1px,transparent 1px); background-size:5% 100%; }
.caTrackLane .caTrackLine { top:13px; border-color:var(--studio-line, #2d3944); }
.caTrackLane .caKey { top:4px; width:18px; height:18px; padding:0; z-index:3; color:var(--studio-warn, #d9b85f); font-size:11px; line-height:18px; }
.caTrackLane .caKey:hover { color:var(--studio-warn, #fff0a8); transform:translateX(-50%) scale(1.16); }
.caTrackLane .caKey.selected { color:var(--studio-accent, #82ddff); text-shadow:0 0 7px rgba(91,207,255,.8); }
.caTrackLane .caTrackPlayhead { z-index:2; background:#67d8ff; opacity:.75; }
@media (max-width:1100px){.characterAnimatorTimeline{max-height:270px}.caTimelineTrackHeader,.caTrackRow{grid-template-columns:110px minmax(240px,1fr)}}

/* Character Animator 3.3 Stage 2 — multi-key/range/pose/event authoring */
.caTimelineToolRow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:7px;padding:6px 7px;border:1px solid var(--studio-line, #28323c);background:var(--studio-surface, #0f141a);border-radius:5px}
.caPoseTools,.caRangeTools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.caPoseTools>span,.caRangeTools>span,.caEventToolbar>span{color:var(--studio-muted, #7f8d9b);font-size:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.caPoseTools button,.caRangeTools button,.caEventToolbar button{min-height:24px;border:1px solid var(--studio-line, #303b46);background:var(--studio-surface, #171e26);color:var(--studio-ink, #cbd5df);border-radius:4px;padding:0 8px;font-size:9px}.caPoseTools button:hover,.caRangeTools button:hover,.caEventToolbar button:hover{background:var(--studio-surface, #202a34);color:var(--studio-ink, #fff)}.caPoseTools button:disabled,.caRangeTools button:disabled,.caEventToolbar button:disabled{opacity:.38;cursor:default}
.caRangeTools b{min-width:92px;color:var(--studio-muted, #91a4b5);font:600 9px ui-monospace,SFMono-Regular,Consolas,monospace;text-align:center}
.caEventToolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px;padding:5px 7px;border:1px solid var(--studio-line, #302f3f);background:var(--studio-surface, #12131b);border-radius:5px}.caEventToolbar label{display:flex;align-items:center;gap:5px;color:var(--studio-muted, #8f9baa);font-size:9px}.caEventToolbar select.field{width:132px}.caEventToolbar input.field{width:210px}.caEventToolbar button.danger{border-color:var(--studio-line, #5a3439);color:var(--studio-bad, #e6a4ad);background:var(--studio-surface, #23171a)}
.caEventLane{display:grid;grid-template-columns:132px minmax(260px,1fr);min-height:27px;border:1px solid var(--studio-line, #2b343e);border-bottom:0;background:var(--studio-surface, #11111a);margin-top:7px}.caEventLabel{cursor:default;color:var(--studio-violet, #c6b6ef)!important;background:var(--studio-surface, #171522)!important}.caEventLane .caTrackLane{min-height:27px;background:linear-gradient(90deg,rgba(133,98,199,.035),transparent)}
.caEventMarker{position:absolute;top:3px;transform:translateX(-50%);z-index:4;width:20px;height:20px;border:0;background:transparent;color:var(--studio-violet, #b99cf0);font-size:13px;line-height:20px;cursor:ew-resize;text-shadow:0 0 5px rgba(169,124,237,.35)}.caEventMarker:hover{color:var(--studio-violet, #eadcff);transform:translateX(-50%) scale(1.15)}.caEventMarker.selected{color:var(--studio-ink, #fff);text-shadow:0 0 8px rgba(182,135,255,.95)}
.caTrackLane .caKey.selected{filter:drop-shadow(0 0 3px rgba(98,207,255,.9))}.caTrackLane .caKey.selected::after{content:"";position:absolute;inset:2px;border:1px solid rgba(143,226,255,.8);border-radius:3px}
@media (max-width:1100px){.caEventLane{grid-template-columns:110px minmax(240px,1fr)}.caEventToolbar input.field{width:150px}}

/* Character Animator 3.3 Stage 3 — deeper no-code rig controls */
.caMiniSelect { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px; color:var(--studio-muted, #9eabb8); font-size:9px; }
.caMiniSelect .field { min-width:0; width:100%; padding:4px 5px; font-size:9px; }
.caMiniCheck { display:flex!important; align-items:center; gap:5px; color:var(--studio-muted, #9eabb8); font-size:9px; line-height:1.25; }
.caMiniCheck input { margin:0; }
.caPartGroup button:disabled { opacity:.34; cursor:not-allowed; border-style:dashed; }
.caPoseTools select.field { min-width:118px; max-width:170px; min-height:24px; padding:3px 5px; font-size:9px; }
.caEditableLimits { display:grid!important; gap:6px!important; }
.caEditableLimits>label { display:grid; grid-template-columns:minmax(84px,1fr) 76px; align-items:center; gap:6px; color:var(--studio-muted, #9ba8b5); font-size:9px; }
.caEditableLimits .field { min-width:0; width:100%; padding:4px 5px; font-size:9px; }
.caEditableLimits>small { color:var(--studio-muted, #74818e); font-size:8px; line-height:1.35; }
.caEventToolbar .caEventStrength { width:60px!important; }
.caEventToolbar .caMiniCheck { display:flex!important; min-height:24px; padding:0 6px; border:1px solid var(--studio-line, #2d3742); border-radius:4px; background:var(--studio-surface, #141a21); }

/* Character Animator 3.3 combined authoring pass: layers, clips, curves, transitions. */
.caLayerToolbar,.caClipToolbar,.caTransitionToolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px;padding:6px 7px;border:1px solid var(--studio-line, #28323c);background:var(--studio-surface, #0f141a);border-radius:5px;font-size:9px;color:var(--studio-muted, #8f9baa)}
.caLayerToolbar>span,.caClipToolbar>span,.caTransitionToolbar>span{font-weight:800;color:var(--studio-ink, #d8e0e8);text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
.caLayerToolbar button,.caClipToolbar button,.caTransitionToolbar button{min-height:25px;border:1px solid var(--studio-line, #303a45);background:var(--studio-surface, #181f27);color:var(--studio-ink, #dbe5ee);border-radius:4px;padding:0 8px;font-size:9px}
.caLayerToolbar button.danger,.caClipToolbar button.danger{border-color:var(--studio-line, #5a3439);color:var(--studio-bad, #e6a4ad);background:var(--studio-surface, #23171a)}
.caLayerToolbar button:disabled,.caClipToolbar button:disabled{opacity:.38;cursor:default}
.caLayerToolbar .field,.caClipToolbar .field,.caTransitionToolbar .field{min-height:25px;padding:3px 5px;font-size:9px;width:auto;max-width:180px}
.caClipToolbar #caClipSelect{min-width:180px}
.caTransitionToolbar #caTransitionInterrupt{min-width:160px}
.caCurveEditor{margin-top:7px;border:1px solid var(--studio-line, #2b3540);border-radius:5px;background:var(--studio-surface, #0c1117);overflow:hidden}
.caCurveEditor.disabled{opacity:.55}
.caCurveHeader{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:5px 7px;border-bottom:1px solid var(--studio-line, #28323c);background:var(--studio-surface, #121820);font-size:9px}
.caCurveHeader>span{font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--studio-ink, #dbe5ee)}.caCurveHeader>small{color:var(--studio-muted, #778493);margin-right:auto}
.caCurveHeader button{min-height:23px;border:1px solid var(--studio-line, #303a45);background:var(--studio-surface, #181f27);color:var(--studio-ink, #ccd7e2);border-radius:4px;padding:0 7px;font-size:8px}
.caCurveBody{display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:10px;align-items:center;padding:7px}
#caCurveGraph{width:100%;height:104px;min-width:280px;background:var(--studio-surface, #080c11);border:1px solid var(--studio-line, #222b35);border-radius:4px;touch-action:none}
.caCurveGrid{fill:none;stroke:#1f2933;stroke-width:1}.caCurvePath{fill:none;stroke:#72c6ff;stroke-width:2.4}.caCurveHandleLines{fill:none;stroke:#556473;stroke-width:1;stroke-dasharray:3 3}.caCurveHandle{fill:#d9f1ff;stroke:#5ba9da;stroke-width:2;cursor:grab}.caCurveHandle:active{cursor:grabbing}
.caCurveFields{display:grid;grid-template-columns:auto auto;gap:5px 7px;font-size:8px;color:var(--studio-muted, #8492a0)}.caCurveFields label{display:flex;align-items:center;gap:4px}.caCurveFields .field{width:58px;padding:3px 5px;font-size:8px}
.caTrackRow.active .caTrackLabel small:after{content:" · active layer";color:var(--studio-accent, #6fbce9);text-transform:none;letter-spacing:0}
@media(max-width:1100px){.caCurveBody{grid-template-columns:1fr}.caCurveFields{grid-template-columns:repeat(4,minmax(0,1fr))}.caCurveFields label{flex-direction:column;align-items:flex-start}.caClipToolbar #caClipSelect{min-width:130px}}

/* Character Animator 3.3 combined routing/library/mask/event-window pass. */
.caLayerMaskWeights{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:5px;padding:5px 7px;border:1px solid var(--studio-line, #27313a);border-radius:5px;background:var(--studio-surface, #0c1116)}.caLayerMaskWeights.hidden{display:none}.caLayerMaskWeights label{display:flex;align-items:center;gap:4px;color:var(--studio-muted, #8492a0);font-size:8px;text-transform:capitalize}.caLayerMaskWeights .field{width:58px;min-height:23px;padding:3px 5px;font-size:8px}
.caAnimationLibrary,.caRuntimeGraph{margin-top:7px;padding:7px;border:1px solid var(--studio-line, #2a3540);border-radius:5px;background:var(--studio-surface, #0d1218);display:grid;gap:7px}.caLibraryHeader,.caRuntimeGraphHeader{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.caLibraryHeader>span,.caRuntimeGraphHeader>span{font-weight:800;color:var(--studio-ink, #d9e3ed);text-transform:uppercase;letter-spacing:.06em;font-size:9px}.caLibraryHeader>small,.caRuntimeGraph>small{color:var(--studio-muted, #778493);font-size:8px;line-height:1.35}.caLibraryHeader>small{margin-right:auto}.caAnimationLibrary button,.caRuntimeGraph button,.caResolverPreview button{min-height:24px;border:1px solid var(--studio-line, #303a45);background:var(--studio-surface, #171e26);color:var(--studio-ink, #d7e1ea);border-radius:4px;padding:0 8px;font-size:9px}.caAnimationLibrary button.danger,.caRuntimeGraph button.danger{border-color:var(--studio-line, #5a3439);color:var(--studio-bad, #e6a4ad);background:var(--studio-surface, #23171a)}.caLibraryGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.caLibraryGrid>div{display:grid;align-content:start;gap:5px;padding:6px;border:1px solid var(--studio-line, #222c35);border-radius:4px;background:var(--studio-surface, #0a0f14)}.caLibraryGrid>div>b{font-size:8px;text-transform:uppercase;letter-spacing:.05em;color:var(--studio-muted, #8ea0b1)}.caLibraryGrid>div>small{color:var(--studio-muted, #667684);font-size:8px}.caLibraryRow{display:grid;grid-template-columns:minmax(100px,1fr) minmax(130px,1.2fr) minmax(100px,1fr) 28px;gap:5px;align-items:center}.caLibraryRow .field{min-width:0;width:100%;padding:4px 5px;font-size:8px}
.caRuntimeStateRows,.caRuntimeTransitionRows{display:grid;gap:5px}.caRuntimeStateRow{display:grid;grid-template-columns:minmax(110px,1fr) minmax(150px,1.3fr) auto 28px;gap:5px;align-items:center}.caRuntimeTransitionRow{display:grid;grid-template-columns:minmax(90px,1fr) auto minmax(90px,1fr) minmax(120px,1fr) minmax(130px,1.2fr) auto 28px;gap:5px;align-items:center}.caRuntimeStateRow .field,.caRuntimeTransitionRow .field,.caRuntimePreview .field,.caRuntimeGraphHeader .field{min-width:0;width:100%;padding:4px 5px;font-size:8px}.caRuntimeTransitionRow label{display:flex;align-items:center;gap:4px;color:var(--studio-muted, #82909d);font-size:8px}.caRuntimeTransitionRow label .field{width:62px}.caRuntimePreview{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:5px;border-top:1px solid var(--studio-line, #24303a)}.caRuntimePreview label{display:flex;align-items:center;gap:4px;color:var(--studio-muted, #8997a4);font-size:8px}.caRuntimePreview b{color:var(--studio-accent, #89c9ea);font-size:8px}
.caAssignmentConditions{border:1px solid var(--studio-line, #28333d);border-radius:4px;background:var(--studio-surface, #10161c);padding:4px 6px}.caAssignmentConditions summary{cursor:pointer;color:var(--studio-muted, #8fa2b2);font-size:8px;text-transform:uppercase;letter-spacing:.05em}.caAssignmentConditions>div{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:6px}.caAssignmentConditions label{display:grid;gap:3px;color:var(--studio-muted, #83919f);font-size:8px}.caAssignmentConditions .field{min-width:0;width:100%;padding:4px 5px;font-size:8px}
.caResolverPreview{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:5px;padding:7px;border:1px solid var(--studio-line, #2b3742);border-radius:5px;background:var(--studio-surface, #0b1117)}.caResolverPreview>b,.caResolverPreview>strong{grid-column:1/-1}.caResolverPreview>b{font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:var(--studio-ink, #dbe5ee)}.caResolverPreview>strong{font-size:9px;color:var(--studio-accent, #83d0ef)}.caResolverPreview label{display:grid;gap:3px;color:var(--studio-muted, #83919f);font-size:8px}.caResolverPreview .field{min-width:0;width:100%;padding:4px 5px;font-size:8px}
.caEventWindow{position:absolute;top:5px;height:17px;z-index:1;border:1px solid var(--studio-line, #4f5368);border-radius:3px;background:rgba(109,98,155,.2);pointer-events:none;overflow:hidden}.caEventWindow b{display:block;padding:2px 4px;font-size:7px;line-height:11px;color:var(--studio-violet, #cfc7ec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caEventWindow-damage{border-color:var(--studio-line, #6a4549);background:rgba(143,69,77,.22)}.caEventWindow-block{border-color:var(--studio-line, #4c5d72);background:rgba(66,92,126,.22)}.caEventWindow-parry{border-color:var(--studio-line, #5c4f76);background:rgba(105,82,145,.22)}.caEventWindow.incomplete{border-style:dashed;opacity:.7}.caEventLane .caEventMarker{z-index:5}
@media(max-width:1100px){.caLibraryGrid{grid-template-columns:1fr}.caLibraryRow{grid-template-columns:1fr 1fr}.caRuntimeTransitionRow{grid-template-columns:1fr 18px 1fr}.caRuntimeTransitionRow>*:nth-child(n+4){grid-column:span 1}.caResolverPreview{grid-template-columns:1fr 1fr}}

/* Character Animator 3.3 runtime-authoring extensions */
.caAnimationId{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--studio-muted, #7f8d99);font-size:8px}.caAnimationId .field{width:230px;max-width:45vw;padding:4px 6px;font-size:8px}
.caRuntimeResource{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--studio-muted, #71808d);font-size:8px}.caRuntimeResource code{max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--studio-muted, #9fb2c2)}
.caAuthoringTemplates{margin-top:7px;padding:7px;border:1px solid var(--studio-line, #2a3540);border-radius:5px;background:var(--studio-surface, #0d1218);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}.caAuthoringTemplates>div{display:grid;gap:2px}.caAuthoringTemplates b{font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:var(--studio-ink, #d9e3ed)}.caAuthoringTemplates small{font-size:8px;color:var(--studio-muted, #748493);line-height:1.35}.caAuthoringTemplates>.field{min-width:0;padding:4px 5px;font-size:8px}.caAuthoringTemplates>button{min-height:24px;border:1px solid var(--studio-line, #303a45);background:var(--studio-surface, #171e26);color:var(--studio-ink, #d7e1ea);border-radius:4px;padding:0 8px;font-size:8px}.caAuthoringTemplates>#caAuthoringTemplateHint{grid-column:1/-1}
.caRuntimeGraphCanvas{position:relative;height:310px;overflow:auto;border:1px solid var(--studio-line, #202b35);border-radius:5px;background:linear-gradient(var(--studio-surface, #10171d) 1px,transparent 1px),linear-gradient(90deg,var(--studio-surface, #10171d) 1px,transparent 1px),var(--studio-surface, #090e13);background-size:24px 24px}.caRuntimeGraphEdges{position:absolute;inset:0;width:820px;height:470px;pointer-events:none;overflow:visible}.caRuntimeGraphEdges path{fill:none;stroke:#506b7c;stroke-width:2;vector-effect:non-scaling-stroke;opacity:.8}.caRuntimeNode{position:absolute;width:144px;height:58px;display:grid;align-content:center;text-align:left;gap:2px;padding:7px 9px;border:1px solid var(--studio-line, #334452);border-radius:6px;background:var(--studio-surface, #121a21);color:var(--studio-ink, #d9e4ec);cursor:grab;box-shadow:0 4px 12px #0008;user-select:none}.caRuntimeNode:active{cursor:grabbing}.caRuntimeNode small{font-size:7px;color:var(--studio-muted, #6f8190);letter-spacing:.08em}.caRuntimeNode b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caRuntimeNode span{font-size:7px;color:var(--studio-muted, #8494a1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caRuntimeNode.entry{border-color:#6b9bb8}.caRuntimeNode.entry small{color:var(--studio-accent, #8fd3f2)}.caRuntimeNode.active{outline:1px solid #78c8ec;box-shadow:0 0 0 2px #78c8ec22,0 4px 12px #0008}
.caRuntimeEventStatus{margin-top:7px;padding:6px 8px;border:1px solid var(--studio-line, #26333d);border-radius:4px;background:var(--studio-surface, #0b1116);color:var(--studio-accent, #8dcce7);font-size:8px;font-weight:700;letter-spacing:.02em}

/* Character Animator 3.3 Stages 28–30 asset diagnostics and workflow closure. */
.caDependencyViewer{margin-top:7px;border:1px solid var(--studio-line, #2a3540);border-radius:5px;background:var(--studio-surface, #0c1218);overflow:hidden}.caDependencyViewer>summary{display:flex;align-items:center;gap:8px;padding:7px 9px;cursor:pointer;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--studio-ink, #d9e3ed);background:var(--studio-surface, #111821)}.caDependencyViewer>summary span{margin-left:auto;font-size:8px;text-transform:none;letter-spacing:0}.caDependencyViewer>summary span.good{color:var(--studio-good, #8ddfb0)}.caDependencyViewer>summary span.warn{color:var(--studio-warn, #efca79)}.caDependencyViewer>summary span.bad{color:var(--studio-bad, #ff9e9e)}.caDependencyActions{display:flex;align-items:center;gap:8px;padding:7px 9px;border-top:1px solid var(--studio-line, #202b35);border-bottom:1px solid var(--studio-line, #202b35)}.caDependencyActions button{min-height:24px;border:1px solid var(--studio-line, #303a45);background:var(--studio-surface, #171e26);color:var(--studio-ink, #d7e1ea);border-radius:4px;padding:0 8px;font-size:8px}.caDependencyColumns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:7px}.caDependencyColumns>div{min-width:0;padding:6px;border:1px solid var(--studio-line, #222d37);border-radius:4px;background:var(--studio-surface, #090f14)}.caDependencyColumns>div>b{display:block;margin-bottom:4px;color:var(--studio-muted, #8999a8);font-size:8px;text-transform:uppercase;letter-spacing:.05em}.caDependencyColumns ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}.caDependencyColumns li{display:grid;gap:2px;padding:5px;border-left:2px solid var(--studio-line, #485765);background:var(--studio-surface, #111820)}.caDependencyColumns li.good{border-left-color:#3f805d}.caDependencyColumns li.warning{border-left-color:#9b7f3f}.caDependencyColumns li.error{border-left-color:#9c4d4d}.caDependencyColumns li b{font-size:8px;color:var(--studio-ink, #d7e0e8)}.caDependencyColumns li span{font-size:8px;color:var(--studio-muted, #82919f);line-height:1.35;overflow-wrap:anywhere}
.caTrackGroup{min-width:var(--ca-timeline-min-width,760px);border-bottom:1px solid var(--studio-line, #202831)}.caTrackGroupHeader{position:sticky;left:0;z-index:3;display:flex;align-items:center;gap:6px;width:100%;min-width:var(--ca-timeline-min-width,760px);min-height:24px;padding:3px 7px;border:0;border-bottom:1px solid var(--studio-line, #27313b);background:var(--studio-surface, #121920);color:var(--studio-muted, #9aabba);text-align:left;font-size:8px;cursor:pointer}.caTrackGroupHeader b{text-transform:uppercase;letter-spacing:.05em}.caTrackGroupHeader small{color:var(--studio-muted, #657583)}.caTrackGroup.collapsed .caTrackGroupHeader{border-bottom:0}.caTimelineTracks .caTrackRow{min-width:var(--ca-timeline-min-width,760px)}.caTimelineTracks .caTrackLabel{position:sticky;left:0;z-index:2}.caBoxSelection{position:absolute;top:1px;bottom:1px;border:1px solid #72c8f2;background:rgba(114,200,242,.14);pointer-events:none;z-index:8}.caTimelineControls #caTrackFilter{width:150px}.caTimelineControls #caTimelineZoom{width:110px}.caTimelineControls #caPlaybackSpeed{min-width:70px}.caRangeTools label{display:flex;align-items:center;gap:4px;color:var(--studio-muted, #83919f);font-size:8px}.caRangeTools #caRangeOffsetFrames,.caRangeTools #caRangeScale{width:58px;min-height:24px;padding:3px 5px;font-size:8px}
.caNoCodeAcceptance{margin-top:8px;padding:8px;border:1px solid var(--studio-line, #2b3641);border-radius:5px;background:var(--studio-surface, #0c1218)}.caAcceptanceHeader{display:flex;align-items:center;justify-content:space-between;gap:8px}.caAcceptanceHeader>div{display:grid;gap:2px}.caAcceptanceHeader b{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--studio-ink, #dbe5ee)}.caAcceptanceHeader small{font-size:8px;color:var(--studio-muted, #748493)}.caAcceptanceHeader button{min-height:25px;border:1px solid var(--studio-line, #303a45);background:var(--studio-surface, #171e26);color:var(--studio-ink, #d7e1ea);border-radius:4px;padding:0 8px;font-size:8px}.caAcceptanceGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:7px}.caAcceptanceRow{display:grid;grid-template-columns:auto 1fr;gap:2px 6px;align-items:start;padding:7px;border:1px solid var(--studio-line, #2b3540);border-radius:4px;background:var(--studio-surface, #10171e)}.caAcceptanceRow>span{grid-row:1/3;align-self:center;padding:2px 5px;border-radius:8px;font-size:7px;font-weight:900}.caAcceptanceRow>b{font-size:8px;color:var(--studio-ink, #d6e0e8)}.caAcceptanceRow>small{font-size:8px;color:var(--studio-muted, #7f8f9d);line-height:1.3}.caAcceptanceRow.good{border-color:var(--studio-line, #315f49)}.caAcceptanceRow.good>span{background:var(--studio-surface, #173f2b);color:var(--studio-good, #8ae0ad)}.caAcceptanceRow.pending{border-color:var(--studio-line, #625633)}.caAcceptanceRow.pending>span{background:var(--studio-surface, #3c3218);color:var(--studio-warn, #e8cb78)}.caAcceptanceRow.blocked{border-color:var(--studio-line, #6d3e43)}.caAcceptanceRow.blocked>span{background:var(--studio-surface, #461f24);color:var(--studio-bad, #ff9d9d)}
@media(max-width:1100px){.caDependencyColumns{grid-template-columns:1fr}.caAcceptanceGrid{grid-template-columns:1fr 1fr}.caTimelineControls #caTrackFilter{width:120px}}

/* Character Animator 3.3 workspace-first layout */
.characterAnimatorShellV2{overflow:hidden}
.characterAnimatorHeaderV2{padding:9px 14px;gap:14px;flex:0 0 auto}
.characterAnimatorHeaderV2 h2{margin:1px 0 2px;font-size:18px}
.characterAnimatorHeaderV2 p{margin:0;color:var(--studio-muted, #8f9baa);font-size:11px}
.characterAnimatorGridV2{grid-template-columns:minmax(0,1fr) 360px!important;min-height:0;overflow:hidden}
.characterAnimatorWorkspace{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(350px,1fr) minmax(210px,34%);background:var(--studio-surface, #090c10);overflow:hidden}
.characterAnimatorSidebar{min-width:0;min-height:0;overflow:auto;background:var(--studio-surface, rgba(13,17,22,.98));border-left:1px solid var(--border,var(--studio-line, #2a313b));padding:10px;display:flex;flex-direction:column;gap:9px}
.characterAnimatorViewportWrap{border-right:0!important}
.characterAnimatorTimelineV2{min-height:0!important;max-height:none!important;height:auto!important;border-top:1px solid var(--studio-line, #2b333d);padding:7px 9px 9px;overflow:hidden}
.characterAnimatorTimelineV2 .caTimelineControls{flex:0 0 auto;padding-bottom:6px;border-bottom:1px solid var(--studio-line, rgba(255,255,255,.055))}
.characterAnimatorTimelineV2 .caTimelineTracks{min-height:0;overflow:auto}
.characterAnimatorTimelineV2 .caEventLane{flex:0 0 auto}
.characterAnimatorSidebar .characterAnimatorTruth{padding:0;border:0;background:transparent;overflow:visible}
.caSidebarCard,.caSidebarSection{border:1px solid var(--studio-line, #2a333e);border-radius:7px;background:var(--studio-surface, #11171e);box-shadow:0 1px 0 rgba(255,255,255,.025) inset}
.caSidebarCard{padding:10px;display:grid;gap:8px}
.caSidebarHeading{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.caSidebarHeading>div{display:grid;gap:2px}
.caSidebarHeading b,.caSidebarSection>summary{font-size:12px;color:var(--studio-ink, #edf3f9);font-weight:650}
.caSidebarHeading small,.caSidebarSection small{color:var(--studio-muted, #8795a5);line-height:1.35}
.caSidebarCard>label{display:grid;gap:4px;font-size:10px;color:var(--studio-muted, #94a2b1)}
.caSidebarCard>button{justify-content:center}
.caSidebarSection{overflow:hidden}
.caSidebarSection>summary{cursor:pointer;list-style:none;padding:10px 11px;display:flex;align-items:center;gap:7px;user-select:none}
.caSidebarSection>summary::-webkit-details-marker{display:none}
.caSidebarSection>summary:before{content:'›';font-size:16px;color:var(--studio-muted, #7f91a4);transform:rotate(0deg);transition:transform .12s ease}
.caSidebarSection[open]>summary:before{transform:rotate(90deg)}
.caSidebarSection[open]>summary{border-bottom:1px solid var(--studio-line, #29323c)}
.caSidebarSectionBody{padding:9px;display:grid;gap:9px;min-width:0}
.caSidebarSectionBody .caLayerToolbar,.caSidebarSectionBody .caClipToolbar,.caSidebarSectionBody .caTransitionToolbar,.caSidebarSectionBody .caPoseTools,.caSidebarSectionBody .caRangeTools,.caSidebarSectionBody .caEventToolbar{display:grid;grid-template-columns:1fr;align-items:stretch;gap:6px;padding:8px;border:1px solid var(--studio-line, #29323c);border-radius:5px;background:var(--studio-surface, #0d1218)}
.caSidebarSectionBody .caLayerToolbar>span,.caSidebarSectionBody .caClipToolbar>span,.caSidebarSectionBody .caTransitionToolbar>span,.caSidebarSectionBody .caPoseTools>span,.caSidebarSectionBody .caRangeTools>span,.caSidebarSectionBody .caEventToolbar>span{font-weight:650;color:var(--studio-ink, #dce5ed)}
.caSidebarSectionBody .caLayerToolbar label,.caSidebarSectionBody .caClipToolbar label,.caSidebarSectionBody .caTransitionToolbar label,.caSidebarSectionBody .caRangeTools label,.caSidebarSectionBody .caEventToolbar label{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:6px}
.caSidebarSectionBody .caAssignmentPanel,.caSidebarSectionBody .caAnimationLibrary,.caSidebarSectionBody .caRuntimeGraph,.caSidebarSectionBody .caDependencyDiagnostics,.caSidebarSectionBody .caCurveEditor{margin:0;max-width:100%;min-width:0}
.caAnimationManager .caRuntimeResource{display:grid;gap:4px;color:var(--studio-muted, #7f8c9b);line-height:1.35}
.caAnimationManager code{display:block;white-space:normal;overflow-wrap:anywhere;background:var(--studio-surface, #0a0f14);border:1px solid var(--studio-line, #26313b);padding:6px;border-radius:4px;color:var(--studio-ink, #a9c8e5)}
.caRuntimePublishStatus{display:grid;gap:2px;border-radius:5px;padding:7px 8px;border:1px solid}
.caRuntimePublishStatus.ready{border-color:rgba(84,187,121,.38);background:rgba(48,128,78,.12)}
.caRuntimePublishStatus.ready b{color:var(--studio-good, #88d6a3)}
.caRuntimePublishStatus.blocked{border-color:rgba(225,166,73,.38);background:rgba(157,104,23,.12)}
.caRuntimePublishStatus.blocked b{color:var(--studio-warn, #e6b66b)}
.caRuntimePublishStatus small{font-size:10px}
.caQuickAssignment .caAssignmentTargetRow{grid-template-columns:minmax(0,1fr)}
.caQuickAssignmentHint{display:grid;gap:2px;padding:7px 8px;border-radius:5px;background:var(--studio-surface, #0b1117);border:1px solid var(--studio-line, #27313b)}
.caQuickAssignmentHint b{font-size:10px;color:var(--studio-ink, #b9cee1)}
.caQuickAssignmentHint small{font-size:10px}
.characterAnimatorSidebar .caPartGroup{padding:8px;border:1px solid var(--studio-line, #27313a);border-radius:5px;background:var(--studio-surface, #0d1218)}
.characterAnimatorSidebar .caPartGroup>span{margin-bottom:5px}
.characterAnimatorSidebar .caNoCodeAcceptance{margin:0}
.characterAnimatorSidebar .caRuntimeGraphCanvas{min-height:300px}
.characterAnimatorSidebar .caRuntimeGraphHeader,.characterAnimatorSidebar .caLibraryHeader,.characterAnimatorSidebar .caDependencyHeader{flex-wrap:wrap}
.characterAnimatorSidebar .caRuntimeStateRow,.characterAnimatorSidebar .caRuntimeTransitionRow,.characterAnimatorSidebar .caLibraryRow{grid-template-columns:1fr!important}
.characterAnimatorSidebar .caResolverPreview{grid-template-columns:1fr 1fr}
.characterAnimatorSidebar .caAssignmentRule{grid-template-columns:1fr!important}
.characterAnimatorSidebar .caAssignmentConditions>div{grid-template-columns:1fr 1fr}
.characterAnimatorSidebar .caCurveBody{grid-template-columns:1fr}
.characterAnimatorSidebar .caCurveFields{grid-template-columns:1fr 1fr}
.characterAnimationCreateDialog p{margin:0 0 10px;color:var(--studio-muted, #9aa8b7);line-height:1.45}
.characterAnimationCreateDialog code{color:var(--studio-ink, #a9c8e5)}
@media (max-width:1150px){
  .characterAnimatorGridV2{grid-template-columns:minmax(0,1fr) 320px!important}
  .characterAnimatorWorkspace{grid-template-rows:minmax(320px,1fr) minmax(210px,38%)}
}
@media (max-width:900px){
  .characterAnimatorGridV2{grid-template-columns:1fr!important;overflow:auto}
  .characterAnimatorWorkspace{min-height:720px;grid-template-rows:430px 290px}
  .characterAnimatorSidebar{border-left:0;border-top:1px solid var(--border,var(--studio-line, #2a313b));overflow:visible}
}

/* Character Animator usability pass: node picker, custom controls, viewport keyboard navigation. */
.characterAnimatorShellV2 button:not(.caTrackKey):not(.caEventMarker):not(.caRuntimeNode):not(.caTrackLabel):not(.caTrackGroupHeader){
  appearance:none!important;
  -webkit-appearance:none!important;
  border:1px solid var(--studio-line, #344555)!important;
  background:linear-gradient(180deg,var(--studio-surface, #1b2530),var(--studio-surface, #131b24))!important;
  color:var(--studio-ink, #dce8f2)!important;
  border-radius:6px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 1px 2px rgba(0,0,0,.28)!important;
  font:inherit;
  font-weight:650;
  cursor:pointer;
  transition:border-color .12s ease,background .12s ease,transform .08s ease,box-shadow .12s ease;
}
.characterAnimatorShellV2 button:not(.caTrackKey):not(.caEventMarker):not(.caRuntimeNode):not(.caTrackLabel):not(.caTrackGroupHeader):hover:not(:disabled){
  border-color:#5793b1!important;
  background:linear-gradient(180deg,var(--studio-surface, #223342),var(--studio-surface, #18242f))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(98,174,214,.08)!important;
}
.characterAnimatorShellV2 button:not(.caTrackKey):not(.caEventMarker):not(.caRuntimeNode):not(.caTrackLabel):not(.caTrackGroupHeader):active:not(:disabled){transform:translateY(1px)}
.characterAnimatorShellV2 button.active:not(.caTrackKey):not(.caRuntimeNode),
.characterAnimatorShellV2 button.primary{
  border-color:#55a8c8!important;
  background:linear-gradient(180deg,var(--studio-surface, #174f64),var(--studio-surface, #11394b))!important;
  color:var(--studio-accent, #ecfbff)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(80,187,228,.12)!important;
}
.characterAnimatorShellV2 button.danger{
  border-color:var(--studio-line, #704149)!important;
  background:linear-gradient(180deg,var(--studio-surface, #41252b),var(--studio-surface, #2c1b20))!important;
  color:var(--studio-bad, #ffbdc2)!important;
}
.characterAnimatorShellV2 button:disabled{opacity:.42!important;cursor:not-allowed!important;filter:saturate(.45)}
.characterAnimatorShellV2 .field,
.characterAnimatorShellV2 select,
.characterAnimatorShellV2 input:not([type="checkbox"]):not([type="range"]){
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--studio-line, #314151);
  background:var(--studio-surface, #0c131a);
  color:var(--studio-ink, #dce7f0);
  border-radius:5px;
  outline:none;
}
.characterAnimatorShellV2 .field:focus,
.characterAnimatorShellV2 select:focus,
.characterAnimatorShellV2 input:not([type="checkbox"]):not([type="range"]):focus{
  border-color:#59a9c8;
  box-shadow:0 0 0 2px rgba(73,164,204,.13);
}
.caNodePicker{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:205px;
  padding-right:8px;
  margin-right:3px;
  border-right:1px solid var(--studio-line, #29343e);
  color:var(--studio-muted, #8fa0af);
  font-size:9px;
  font-weight:750;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.caNodePicker select{
  width:154px;
  min-height:27px;
  padding:4px 26px 4px 8px;
  background-color:var(--studio-surface, #101922)!important;
  background-image:linear-gradient(45deg,transparent 50%,#7fa6bd 50%),linear-gradient(135deg,#7fa6bd 50%,transparent 50%)!important;
  background-position:calc(100% - 12px) 11px,calc(100% - 8px) 11px!important;
  background-size:4px 4px,4px 4px!important;
  background-repeat:no-repeat!important;
  font-size:9px;
  text-transform:none;
  letter-spacing:0;
}
.caNodePicker select:hover{border-color:#4f7f98}
.caNodePicker optgroup{background:var(--studio-surface, #0f161e);color:var(--studio-muted, #90a9ba);font-weight:800}
.caNodePicker option{background:var(--studio-surface, #111a23);color:var(--studio-ink, #dbe6ef);font-weight:500}
.characterAnimatorViewport canvas:focus{outline:1px solid rgba(94,182,222,.55);outline-offset:-1px}
.caViewportLegend{flex-wrap:wrap;gap:7px 14px!important}
.caViewportLegend span:first-child{color:var(--studio-accent, #9fd8ef)}
.caViewportLegend b{color:var(--studio-accent, #e5f7ff)}
@media(max-width:1450px){.caNodePicker{width:100%;border-right:0;border-bottom:1px solid var(--studio-line, #29343e);padding:0 0 6px;margin:0 0 2px}.caNodePicker select{width:min(260px,100%)}}

/* Version Farm — dedicated administration workspace */
.versionAdminIntro {
  border-color: rgba(120, 244, 237, .2);
  background:
    radial-gradient(circle at 92% 0%, rgba(183, 119, 255, .13), transparent 34%),
    linear-gradient(135deg, rgba(37, 200, 219, .075), var(--studio-wash, rgba(9, 15, 29, .3)));
}
.versionProcessRail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--line);
}
.versionProcessRail > div {
  position: relative;
  min-height: 82px;
  padding: 12px 11px 10px 42px;
  background: var(--studio-surface, rgba(7, 12, 23, .82));
}
.versionProcessRail > div > span {
  position: absolute;
  top: 12px;
  left: 11px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(120, 244, 237, .25);
  border-radius: 7px;
  background: rgba(120, 244, 237, .08);
  color: var(--cyan);
  font-size: 9px;
  font-weight: 850;
}
.versionProcessRail b { display: block; font-size: 10px; }
.versionProcessRail small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.versionProcessRail .deferred { opacity: .66; }
.versionProcessRail .deferred > span { border-color: rgba(247, 198, 106, .24); background: rgba(247, 198, 106, .07); color: var(--warn); }
.versionProcessRail .optional { background: linear-gradient(145deg, rgba(183, 119, 255, .055), var(--studio-surface, rgba(7, 12, 23, .82))); }
.versionProcessRail .optional > span { border-color: rgba(183, 119, 255, .28); background: rgba(183, 119, 255, .08); color: var(--studio-violet, #cdb0ff); }
.versionFarmProjectSection { margin-top: 13px; }
.versionFarmProvider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(120, 244, 237, .2);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(120, 244, 237, .075), rgba(81, 170, 255, .045));
}
.versionFarmProvider b { display: block; margin-top: 3px; font-size: 13px; }
.versionFarmProvider p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.versionFarmProvider > div:last-child { display: grid; justify-items: end; gap: 5px; min-width: 0; }
.versionFarmProvider strong { font-size: 9px; letter-spacing: .055em; }
.versionFarmProvider code { max-width: 100%; overflow-wrap: anywhere; color: var(--muted); font-size: 8px; text-align: right; }
.versionFarmProjectHead { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 12px 2px 7px; }
.versionFarmProjectHead b { display: block; font-size: 11px; }
.versionFarmProjectHead span, .versionFarmProjectHead small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.versionFarmProjectGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.versionFarmProjectCard {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  min-height: 142px;
  padding: 11px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.075));
  border-radius: 11px;
  background: var(--studio-wash, rgba(3, 8, 17, .38));
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.versionFarmProjectCard:hover { border-color: rgba(120, 244, 237, .27); transform: translateY(-1px); }
.versionFarmProjectCard.selected { border-color: rgba(120, 244, 237, .52); background: linear-gradient(145deg, rgba(120, 244, 237, .1), rgba(81, 170, 255, .045)); box-shadow: inset 0 0 0 1px rgba(120, 244, 237, .065); }
.versionFarmProjectCard.pending { border-color: rgba(247, 198, 106, .19); }
.versionFarmProjectCard.paused { border-color: rgba(154, 163, 177, .14); opacity: .78; }
.versionFarmProjectCardHead { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.versionFarmProjectCardHead b { font-size: 11px; }
.versionFarmProjectCardHead strong { color: var(--muted); font-size: 8px; letter-spacing: .05em; text-align: right; }
.versionFarmProjectCard.active .versionFarmProjectCardHead strong { color: var(--good); }
.versionFarmProjectCard.pending .versionFarmProjectCardHead strong { color: var(--warn); }
.versionFarmProjectRole { color: var(--muted); font-size: 8px; line-height: 1.4; }
.versionFarmProjectCard > code { overflow-wrap: anywhere; color: var(--studio-accent, #dffcff); font-size: 8px; }
.versionFarmProjectMeta { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; }
.versionFarmProjectMeta small, .versionFarmProjectCard > small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.versionFarmScopeNotice {
  display: grid;
  grid-template-columns: minmax(180px, .55fr) minmax(0, 1.3fr);
  gap: 5px 14px;
  align-items: center;
  margin-top: 8px;
  padding: 10px 11px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.07));
  border-radius: 10px;
  background: var(--studio-wash, rgba(3, 8, 17, .34));
}
.versionFarmScopeNotice.ready { border-color: rgba(120, 244, 173, .19); }
.versionFarmScopeNotice.blocked { border-color: rgba(247, 198, 106, .19); }
.versionFarmScopeNotice b { font-size: 10px; }
.versionFarmScopeNotice span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.versionFarmScopeNotice > code { grid-column: 2; overflow-wrap: anywhere; color: var(--warn); font-size: 8px; }
.ilbankFarmJobScope {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 12px 0 8px;
  padding: 9px 11px;
  border: 1px solid rgba(120, 244, 237, .14);
  border-radius: 10px;
  background: rgba(120, 244, 237, .035);
}
.ilbankFarmJobScope span, .ilbankFarmJobScope small { display: block; color: var(--muted); font-size: 8px; }
.ilbankFarmJobScope b { display: block; margin: 2px 0; font-size: 10px; }
.ilbankFarmJobScope > code { overflow-wrap: anywhere; color: var(--studio-accent, #dffcff); font-size: 8px; text-align: right; }
.versionFarmRoadmap { margin-top: 13px; }
.versionFarmOverview {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .8fr);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid rgba(120, 244, 237, .13);
  border-radius: 13px;
  background:
    radial-gradient(circle at 100% 0%, rgba(81, 170, 255, .1), transparent 42%),
    var(--studio-wash, rgba(2, 8, 18, .32));
}
.versionFarmOverview > div:first-child > b { display: block; margin-top: 3px; font-size: 14px; }
.versionFarmOverview p { margin: 6px 0 0; max-width: 760px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.versionFarmOverviewStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.versionFarmOverviewStats > div {
  display: grid;
  place-content: center;
  min-height: 72px;
  padding: 8px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, .065));
  border-radius: 10px;
  background: var(--studio-wash, rgba(1, 5, 13, .35));
  text-align: center;
}
.versionFarmOverviewStats b { font-size: 18px; color: var(--studio-accent, #eaffff); }
.versionFarmOverviewStats span { margin-top: 3px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.versionAnchorRow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.versionAnchor {
  display: grid;
  grid-template-columns: minmax(110px, .7fr) minmax(120px, .5fr) minmax(200px, 1.2fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.07));
  border-radius: 10px;
  background: var(--studio-wash, rgba(4, 9, 19, .34));
}
.versionAnchor > span { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.versionAnchor > b { font-size: 11px; }
.versionAnchor > small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.versionAnchor.canonical { border-color: rgba(120, 244, 173, .16); }
.versionAnchor.paused { border-color: rgba(247, 198, 106, .14); }
.versionSelectionBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid rgba(120, 244, 237, .13);
  border-radius: 10px;
  background: rgba(120, 244, 237, .035);
}
.versionSelectionBar > div:first-child b { display: block; font-size: 11px; }
.versionSelectionBar > div:first-child span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.versionSelectionBar > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.versionFamily { margin-top: 12px; }
.versionFamilyHead { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding: 0 2px; }
.versionFamilyHead b { display: block; font-size: 10px; }
.versionFamilyHead span { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.versionFamilyHead small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.versionTargetGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.versionTargetCard {
  appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 68px;
  padding: 9px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.07));
  border-radius: 10px;
  background: var(--studio-wash, rgba(2, 7, 16, .36));
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.versionTargetCard:hover { border-color: rgba(120, 244, 237, .24); background: rgba(120, 244, 237, .04); transform: translateY(-1px); }
.versionTargetCard.selected { border-color: rgba(120, 244, 237, .48); background: linear-gradient(135deg, rgba(120, 244, 237, .09), rgba(96, 132, 255, .06)); box-shadow: inset 0 0 0 1px rgba(120, 244, 237, .07); }
.versionTargetCard.unsupported,
.versionTargetCard:disabled {
  border-style: dashed;
  opacity: .48;
  cursor: not-allowed;
  filter: saturate(.6);
  transform: none;
}
.versionTargetCard.unsupported:hover,
.versionTargetCard:disabled:hover { border-color: var(--studio-line, rgba(255,255,255,.07)); background: var(--studio-wash, rgba(2, 7, 16, .36)); transform: none; }
.versionTargetCard.unavailable .versionTargetMeta strong { color: var(--muted); }
.versionTargetCheck { width: 14px; height: 14px; border: 1px solid var(--studio-line, rgba(255,255,255,.18)); border-radius: 4px; background: var(--studio-wash, rgba(0,0,0,.18)); }
.versionTargetCard.selected .versionTargetCheck { border-color: var(--cyan); background: var(--cyan); box-shadow: inset 0 0 0 3px rgba(4, 12, 21, .85); }
.versionTargetMain { min-width: 0; }
.versionTargetMain b { display: block; font-size: 10px; }
.versionTargetMain small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.versionTargetMeta { display: grid; justify-items: end; gap: 3px; }
.versionTargetMeta strong { color: var(--muted); font-size: 7px; letter-spacing: .05em; }
.versionTargetMeta small { color: var(--muted); font-size: 8px; }
.versionTargetCard.exact .versionTargetMeta strong { color: var(--good); }
.versionTargetCard.strict .versionTargetMeta strong { color: var(--warn); }
.versionTargetCard.active .versionTargetMeta strong { color: var(--cyan); }
.versionTargetEvidence { grid-column: 2 / -1; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.versionActionDeck { display: grid; gap: 6px; margin-top: 12px; }
.versionActionDeck > section {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(300px, 1.5fr);
  gap: 12px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.065));
  border-radius: 10px;
  background: var(--studio-wash, rgba(3, 8, 17, .28));
}
.versionActionDeck > section > div:first-child span { display: block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.versionActionDeck > section > div:first-child small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.versionActionDeck > section > div:last-child { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.versionActionDeck > .versionEvidenceAction { align-items: start; }
.ilbankFarmServerToggle {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  gap: 8px;
  align-items: start;
  flex: 1 1 100%;
  padding: 9px 10px;
  border: 1px solid rgba(183, 119, 255, .2);
  border-radius: 9px;
  background: rgba(183, 119, 255, .045);
  cursor: pointer;
}
.ilbankFarmServerToggle input { margin: 2px 0 0; accent-color: #b777ff; }
.ilbankFarmServerToggle > span { min-width: 0; }
.ilbankFarmServerToggle b { display: block; font-size: 9px; }
.ilbankFarmServerToggle small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.ilbankFarmServerToggle:has(input:disabled) { opacity: .55; cursor: default; }
.versionShadowResult {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(320px, auto);
  gap: 14px;
  align-items: center;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(120, 244, 237, .17);
  border-radius: 10px;
  background: rgba(120, 244, 237, .045);
}
.versionShadowResult.blocked { border-color: rgba(247, 198, 106, .22); background: rgba(247, 198, 106, .045); }
.versionShadowResult.limited { border-color: rgba(183, 119, 255, .22); background: rgba(183, 119, 255, .045); }
.versionShadowResult > div:first-child span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.versionShadowResult > div:first-child b { display: block; margin-top: 3px; font-size: 11px; }
.versionShadowResult > div:first-child small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.versionShadowResult > div:nth-child(2) { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px 12px; font-size: 8px; }
.versionShadowResult > div:nth-child(2) span { color: var(--muted); }
.versionShadowResult > div:nth-child(2) span b { color: inherit; font-size: 10px; }
.versionShadowResult > div:nth-child(2) strong { color: var(--good); }
.versionShadowResult.blocked > div:nth-child(2) strong { color: var(--warn); }
.versionShadowResult.limited > div:nth-child(2) strong { color: var(--studio-violet, #cdb0ff); }
.versionShadowResult > p { grid-column: 1 / -1; margin: 0; color: var(--warn); font-size: 9px; }
.versionShadowResult > .versionShadowGlobalNote { grid-column: 1 / -1; color: var(--muted); font-size: 8px; line-height: 1.4; }
.versionFactoryPanel {
  margin-top: 12px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(183, 119, 255, .22);
  border-radius: 13px;
  background:
    radial-gradient(circle at 100% 0%, rgba(183, 119, 255, .12), transparent 36%),
    linear-gradient(145deg, rgba(120, 244, 237, .045), var(--studio-wash, rgba(4, 8, 18, .4)));
}
.versionFactoryPanel.pending { border-style: dashed; }
.versionFactoryPanelHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.versionFactoryPanelHead > div { min-width: 0; }
.versionFactoryPanelHead > div > b { display: block; margin-top: 3px; font-size: 14px; }
.versionFactoryPanelHead p { max-width: 800px; margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.versionFactoryMetrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.versionFactoryMetrics > div {
  min-height: 58px;
  display: grid;
  align-content: center;
  padding: 9px 10px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.065));
  border-radius: 9px;
  background: var(--studio-wash, rgba(1, 5, 13, .34));
}
.versionFactoryMetrics span { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }
.versionFactoryMetrics b { margin-top: 4px; color: var(--studio-accent, #eaffff); font-size: 14px; }
.versionFactoryAnchor {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, auto);
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  padding: 11px;
  border: 1px solid rgba(120, 244, 237, .15);
  border-radius: 10px;
  background: rgba(120, 244, 237, .035);
}
.versionFactoryAnchor > div:first-child > span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.versionFactoryAnchor > div:first-child > b { display: block; margin-top: 3px; font-size: 11px; }
.versionFactoryAnchor > div:first-child > small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.versionFactoryAnchorStats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; }
.versionFactoryAnchorStats span { color: var(--muted); font-size: 8px; }
.versionFactoryAnchorStats b { color: var(--cyan); font-size: 10px; }
.versionFactoryStageChips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.versionFactoryStageChips span { padding: 5px 7px; border: 1px solid var(--studio-line, rgba(255,255,255,.06)); border-radius: 99px; background: var(--studio-wash, rgba(3,8,17,.36)); color: var(--muted); font-size: 8px; }
.versionFactoryStageChips b { color: var(--studio-accent, #eaffff); }
.versionFactoryTargets { display: grid; gap: 4px; max-height: 340px; margin-top: 8px; overflow: auto; }
.versionFactoryTargetRow {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.055));
  border-radius: 8px;
  background: var(--studio-wash, rgba(1,5,13,.3));
}
.versionFactoryTargetRow.good { border-color: rgba(120,244,173,.12); }
.versionFactoryTargetRow.blocked { border-color: rgba(247,198,106,.12); }
.versionFactoryTargetRow > div { min-width: 0; }
.versionFactoryTargetRow > div b { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.versionFactoryTargetRow > div span { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.versionFactoryTargetRow > strong { color: var(--warn); font-size: 8px; }
.versionFactoryTargetRow.good > strong { color: var(--good); }
.versionFactoryTargetRow.paused > strong { color: var(--muted); }
.versionFactorySafety { display: flex; gap: 8px; margin-top: 9px; padding: 8px 10px; border-radius: 8px; background: rgba(183,119,255,.055); font-size: 9px; line-height: 1.45; }
.versionFactorySafety b { flex: 0 0 auto; color: var(--studio-violet, #d9c1ff); }
.versionFactorySafety span { color: var(--muted); }
.versionFactoryRunResult {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(330px, auto);
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(183,119,255,.22);
  border-radius: 10px;
  background: rgba(183,119,255,.045);
}
.versionFactoryRunResult.blocked { border-color: rgba(247,198,106,.2); background: rgba(247,198,106,.04); }
.versionFactoryRunResult > div:first-child span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.versionFactoryRunResult > div:first-child b { display: block; margin-top: 3px; font-size: 11px; }
.versionFactoryRunResult > div:first-child small,
.versionFactoryRunResult > small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.versionFactoryRunResult > small { grid-column: 1 / -1; }
.versionFactoryRunMetrics { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; }
.versionFactoryRunMetrics span { color: var(--muted); font-size: 8px; }
.versionFactoryRunMetrics b { color: var(--cyan); font-size: 10px; }
.versionFactoryRunMetrics strong { color: var(--good); font-size: 8px; }
.versionFactoryRunResult.blocked .versionFactoryRunMetrics strong { color: var(--warn); }
.versionFarmGateLedger {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(120, 244, 237, .2);
  border-radius: 13px;
  background:
    radial-gradient(circle at 100% 0%, rgba(120, 244, 237, .1), transparent 35%),
    var(--studio-wash, rgba(3, 8, 17, .38));
}
.versionFarmGateLedger.pending { border-style: dashed; }
.versionFarmGateLedgerHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.versionFarmGateLedgerHead > div { min-width: 0; }
.versionFarmGateLedgerHead > div > b { display: block; margin-top: 3px; font-size: 14px; }
.versionFarmGateLedgerHead p { max-width: 820px; margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.versionFarmGateTarget {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(120, 244, 237, .14);
  border-radius: 10px;
  background: var(--studio-wash, rgba(1, 5, 13, .34));
}
.versionFarmGateTarget.blocked { border-color: rgba(247, 198, 106, .22); background: rgba(247, 198, 106, .035); }
.versionFarmGateTargetHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.versionFarmGateTargetHead code { display: block; color: var(--cyan); font-size: 9px; }
.versionFarmGateTargetHead b { display: block; margin-top: 4px; font-size: 11px; }
.versionFarmGateTargetHead small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.versionFarmGateTargetHead > strong { color: var(--warn); font-size: 8px; letter-spacing: .05em; }
.versionFarmGateMetrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.versionFarmGateMetrics span {
  min-height: 45px;
  display: grid;
  place-content: center;
  padding: 6px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.06));
  border-radius: 8px;
  background: var(--studio-wash, rgba(0,0,0,.16));
  color: var(--muted);
  font-size: 8px;
  text-align: center;
}
.versionFarmGateMetrics b { color: var(--studio-accent, #eaffff); font-size: 12px; }
.versionFarmGateFacts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; color: var(--muted); font-size: 8px; }
.versionFarmGateFacts b { color: var(--studio-accent, #eaffff); }
.versionFarmGateOutput { display: block; margin-top: 8px; overflow-wrap: anywhere; color: var(--muted); font-size: 8px; }
.versionFarmGateBlockers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.versionFarmGateBlockers span { padding: 4px 6px; border: 1px solid rgba(247,198,106,.18); border-radius: 99px; background: rgba(247,198,106,.045); color: var(--warn); font-size: 7px; }
.versionFarmGateChips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 9px; }
.versionFarmGateChips span { display: grid; gap: 2px; min-height: 42px; padding: 6px 7px; border: 1px solid var(--studio-line, rgba(255,255,255,.055)); border-radius: 7px; color: var(--muted); font-size: 7px; }
.versionFarmGateChips span b { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.versionFarmGateChips span.pass { border-color: rgba(120,244,173,.15); color: var(--good); }
.versionFarmGateChips span.blocked { border-color: rgba(247,198,106,.18); color: var(--warn); }

@media (max-width: 1120px) {
  .versionProcessRail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .versionFarmProvider { grid-template-columns: 1fr; }
  .versionFarmProvider > div:last-child { justify-items: start; }
  .versionFarmProvider code { text-align: left; }
  .versionFarmProjectGrid { grid-template-columns: 1fr; }
  .versionFarmOverview { grid-template-columns: 1fr; }
  .versionTargetGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .versionAnchorRow { grid-template-columns: 1fr; }
  .versionFactoryAnchor { grid-template-columns: 1fr; }
  .versionFactoryAnchorStats { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .versionProcessRail, .versionTargetGrid { grid-template-columns: 1fr; }
  .versionFarmProjectHead { align-items: stretch; flex-direction: column; }
  .versionFarmScopeNotice, .ilbankFarmJobScope { grid-template-columns: 1fr; }
  .versionFarmScopeNotice > code { grid-column: 1; }
  .ilbankFarmJobScope > code { text-align: left; }
  .versionFarmOverviewStats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .versionSelectionBar, .versionShadowResult, .versionFactoryPanelHead { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
  .versionSelectionBar > div:last-child, .versionShadowResult > div:nth-child(2) { justify-content: flex-start; }
  .versionActionDeck > section { grid-template-columns: 1fr; }
  .versionActionDeck > section > div:last-child { justify-content: flex-start; }
  .versionAnchor { grid-template-columns: 1fr; }
  .versionFactoryMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .versionFactoryTargetRow { grid-template-columns: 1fr auto; }
  .versionFactoryTargetRow > div { grid-column: 1 / -1; grid-row: 2; }
  .versionFactorySafety { flex-direction: column; }
  .versionFactoryRunResult { grid-template-columns: 1fr; }
  .versionFactoryRunMetrics { justify-content: flex-start; }
  .versionFarmGateLedgerHead { align-items: stretch; flex-direction: column; }
  .versionFarmGateMetrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .versionFarmGateChips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cross-version Compatibility Farm */
.ilbankFarmCard {
  margin-bottom: 14px;
  border: 1px solid rgba(120, 244, 237, 0.18);
  border-radius: 16px;
  padding: 14px;
  background:
    radial-gradient(circle at 90% 0%, rgba(97, 184, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(120, 244, 237, 0.055), var(--studio-wash, rgba(7, 12, 24, 0.34)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.ilbankFarmHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.ilbankFarmHeader b {
  display: block;
  margin-top: 3px;
  font-size: 15px;
}
.ilbankFarmHeader p {
  margin: 5px 0 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.ilbankFarmHeaderState {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 110px;
}
.ilbankFarmHeaderState small { color: var(--muted); font-size: 10px; }
.ilbankFarmControls {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ilbankFarmTargetField {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ilbankFarmTargetField .field { text-transform: none; letter-spacing: normal; }
.ilbankFarmMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}
.ilbankFarmMetrics > div {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--studio-line, rgba(255, 255, 255, 0.07));
  border-radius: 10px;
  background: var(--studio-wash, rgba(4, 9, 19, 0.32));
}
.ilbankFarmMetrics span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ilbankFarmMetrics b { display: block; margin-top: 5px; font-size: 15px; }
.ilbankFarmDetailGrid {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 5px 10px;
  margin-top: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--studio-wash, rgba(4, 9, 19, 0.24));
  font-size: 10px;
}
.ilbankFarmDetailGrid span { color: var(--muted); }
.ilbankFarmDetailGrid code { word-break: break-word; }
.ilbankFarmNetworkRows,
.ilbankFarmTargetRows {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.ilbankFarmNetworkRows > div,
.ilbankFarmTargetRows > div {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(100px, .6fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--studio-wash, rgba(255,255,255,.025));
  font-size: 10px;
}
.ilbankFarmNetworkRows > div { grid-template-columns: minmax(180px, 1fr) auto; }
.ilbankFarmTargetRows span { color: var(--muted); }
.ilbankFarmTargetRows b,
.ilbankFarmNetworkRows b { text-align: right; font-size: 9px; }
.ilbankFarmLogHeader > div { display: flex; gap: 5px; }
.ilbankFarmLog { min-height: 190px; max-height: min(42vh, 440px); }
.ilbankFarmHistory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.ilbankFarmHistory > span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ilbankFarmHistoryJob {
  appearance: none;
  border: 1px solid var(--studio-line, rgba(255,255,255,.07));
  border-radius: 9px;
  padding: 7px 9px;
  background: var(--studio-wash, rgba(4, 9, 19, .26));
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ilbankFarmHistoryJob:hover { border-color: rgba(120, 244, 237, .24); background: rgba(120, 244, 237, .045); }
.ilbankFarmHistoryJob b { display: block; font-size: 10px; }
.ilbankFarmHistoryJob small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.ilbankFarmEmpty { margin-top: 10px; padding: 12px; border-radius: 9px; background: var(--studio-wash, rgba(4,9,19,.26)); color: var(--muted); font-size: 10px; }
.goodText { color: var(--good) !important; }
.warningText { color: var(--warn) !important; }
@media (max-width: 900px) {
  .ilbankFarmMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ilbankFarmHistory { grid-template-columns: 1fr; }
}
.ilbankFarmInfoNotice {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(93, 224, 255, .18);
  border-radius: 9px;
  background: rgba(45, 143, 178, .07);
  font-size: 10px;
}
.ilbankFarmInfoNotice span { color: var(--muted); line-height: 1.45; }
.ilbankFarmServerGate {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(183, 119, 255, .2);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(183, 119, 255, .055), var(--studio-wash, rgba(4, 9, 19, .3)));
}
.ilbankFarmServerGateHead { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.ilbankFarmServerGateHead > div:first-child span { display: block; color: var(--studio-violet, #cdb0ff); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ilbankFarmServerGateHead > div:first-child b { display: block; margin-top: 3px; font-size: 11px; }
.ilbankFarmServerGateHead > div:first-child small { display: block; margin-top: 4px; max-width: 760px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.ilbankFarmServerGateHead > div:last-child { display: flex; flex: 0 0 auto; gap: 8px; font-size: 9px; }
.ilbankFarmServerResults { display: grid; gap: 5px; margin-top: 9px; }
.ilbankFarmServerResult {
  display: grid;
  grid-template-columns: minmax(210px, .75fr) minmax(260px, 1.5fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.06));
  border-radius: 8px;
  background: var(--studio-wash, rgba(2, 7, 16, .34));
}
.ilbankFarmServerResult.passed { border-color: rgba(120, 244, 173, .15); }
.ilbankFarmServerResult > div code { display: block; }
.ilbankFarmServerResult > div span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.ilbankFarmServerResult p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.ilbankFarmServerResult > b { text-align: right; font-size: 9px; }
.ilbankFarmReadinessCard {
  margin-top: 9px;
  padding: 11px;
  border: 1px solid rgba(247, 198, 106, .18);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(247, 198, 106, .045), var(--studio-wash, rgba(2, 7, 16, .36)));
}
.ilbankFarmReadinessHead { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.ilbankFarmReadinessHead span,
.ilbankFarmCapabilityQueue > span,
.ilbankFarmStrictAreas > span { display: block; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ilbankFarmReadinessHead b { display: block; margin-top: 3px; font-size: 11px; }
.ilbankFarmReadinessHead small { display: block; margin-top: 4px; max-width: 760px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.ilbankFarmReadinessHead > strong { flex: 0 0 auto; color: var(--warn); font-size: 10px; }
.ilbankFarmReadinessMetrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 9px; }
.ilbankFarmReadinessMetrics span { padding: 7px 8px; border-radius: 7px; background: var(--studio-wash, rgba(2, 7, 16, .36)); color: var(--muted); font-size: 8px; }
.ilbankFarmReadinessMetrics b { display: block; margin-bottom: 2px; color: inherit; font-size: 12px; }
.ilbankFarmCapabilityQueue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.ilbankFarmCapabilityQueue > span { grid-column: 1 / -1; }
.ilbankFarmCapabilityQueue > div { min-width: 0; padding: 7px 8px; border-radius: 7px; background: var(--studio-wash, rgba(2, 7, 16, .32)); }
.ilbankFarmCapabilityQueue code { display: block; overflow: hidden; color: var(--studio-violet, #cdb0ff); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ilbankFarmCapabilityQueue b { display: block; margin-top: 3px; font-size: 8px; line-height: 1.35; }
.ilbankFarmStrictAreas { margin-top: 10px; }
.ilbankFarmStrictAreas > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.ilbankFarmStrictAreas code { padding: 5px 7px; border: 1px solid var(--studio-line, rgba(255,255,255,.055)); border-radius: 999px; color: var(--muted); font-size: 8px; }
.ilbankFarmStrictAreas code b { color: var(--warn); }
.ilbankFarmReadinessNext { display: block; margin-top: 9px; color: var(--muted); font-size: 8px; line-height: 1.4; }
@media (max-width: 760px) {
  .ilbankFarmServerGateHead { display: grid; }
  .ilbankFarmServerResult { grid-template-columns: 1fr auto; }
  .ilbankFarmServerResult p { grid-column: 1 / -1; }
  .ilbankFarmReadinessHead { display: grid; }
  .ilbankFarmReadinessMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ilbankFarmCapabilityQueue { grid-template-columns: 1fr; }
}
.ilbankFarmBindingTitle { margin-top: 12px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ilbankFarmJavaRows { display: grid; gap: 4px; margin-top: 6px; }
.ilbankFarmJavaRows > div {
  display: grid;
  grid-template-columns: minmax(130px, .9fr) minmax(130px, .8fr) minmax(220px, 1.8fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--studio-wash, rgba(4,9,19,.28));
  font-size: 9px;
}
.ilbankFarmJavaRows > div > span { color: var(--muted); }
.ilbankFarmJavaRows > div > code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilbankFarmJavaRows > div > b { text-align: right; font-size: 9px; }
@media (max-width: 900px) {
  .ilbankFarmJavaRows > div { grid-template-columns: 1fr 1fr; }
  .ilbankFarmJavaRows > div > b { text-align: left; }
}
.ilbankFarmProgressCard {
  margin: 10px 0 12px;
  padding: 12px;
  border: 1px solid rgba(120, 244, 237, .16);
  border-radius: 11px;
  background: var(--studio-wash, rgba(5, 12, 24, .46));
}
.ilbankFarmProgressCard.starting { min-height: 54px; display: flex; align-items: center; }
.ilbankFarmProgressHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ilbankFarmProgressHeader > div { min-width: 0; }
.ilbankFarmProgressHeader span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ilbankFarmProgressHeader b { display: block; margin-top: 3px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilbankFarmProgressHeader strong { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.ilbankFarmProgressTrack { height: 4px; margin: 10px 0; overflow: hidden; border-radius: 99px; background: var(--studio-wash, rgba(255,255,255,.055)); }
.ilbankFarmProgressTrack i { display: block; height: 100%; border-radius: inherit; background: currentColor; color: var(--accent, var(--studio-accent, #78f4ed)); transition: width .22s ease; }
.ilbankFarmProgressRows { display: grid; gap: 4px; max-height: 300px; overflow: auto; padding-right: 2px; }
.ilbankFarmProgressRow { display: grid; grid-template-columns: 10px minmax(120px, 180px) minmax(120px, 1fr) auto; align-items: center; gap: 8px; min-height: 30px; padding: 5px 8px; border-radius: 7px; background: var(--studio-wash, rgba(1, 5, 13, .34)); }
.ilbankFarmProgressRow code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilbankFarmProgressRow b { text-align: right; font-size: 9px; letter-spacing: .03em; }
.ilbankFarmProgressDetail { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilbankFarmProgressDot { width: 7px; height: 7px; border-radius: 50%; background: var(--studio-wash, rgba(255,255,255,.18)); box-shadow: 0 0 0 2px rgba(255,255,255,.03); }
.ilbankFarmProgressRow.active .ilbankFarmProgressDot { background: #f7c66a; box-shadow: 0 0 0 3px rgba(247,198,106,.09); animation: ilbankFarmPulse 1.15s ease-in-out infinite; }
.ilbankFarmProgressRow.good .ilbankFarmProgressDot { background: #78f4ad; }
.ilbankFarmProgressRow.good b { color: var(--studio-good, #78f4ad); }
.ilbankFarmProgressRow.bad .ilbankFarmProgressDot { background: #ff7a91; }
.ilbankFarmProgressRow.bad b { color: var(--studio-bad, #ff8da0); }
.ilbankFarmProgressRow.blocked .ilbankFarmProgressDot { background: #f7c66a; }
.ilbankFarmProgressRow.blocked b { color: var(--studio-warn, #f7c66a); }
.ilbankFarmProgressPreparing { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; }
.ilbankFarmProgressSpinner { width: 12px; height: 12px; border: 2px solid rgba(120,244,237,.18); border-top-color: #78f4ed; border-radius: 50%; animation: ilbankFarmSpin .8s linear infinite; }
@keyframes ilbankFarmSpin { to { transform: rotate(360deg); } }
@keyframes ilbankFarmPulse { 50% { opacity: .45; transform: scale(.82); } }
@media (max-width: 760px) {
  .ilbankFarmProgressRow { grid-template-columns: 10px minmax(100px, 1fr) auto; }
  .ilbankFarmProgressDetail { grid-column: 2 / -1; }
}
.ilbankFarmProposalRows { display: grid; gap: 6px; margin-top: 10px; }
.ilbankFarmProposalRow {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(260px, 1fr) minmax(220px, auto);
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.055));
  border-radius: 9px;
  background: var(--studio-wash, rgba(2,7,16,.34));
}
.ilbankFarmProposalRow.good { border-color: rgba(120,244,173,.16); background: rgba(120,244,173,.035); }
.ilbankFarmProposalRow.warn { border-color: rgba(247,198,106,.16); background: rgba(247,198,106,.035); }
.ilbankFarmProposalRow > div:first-child { min-width: 0; }
.ilbankFarmProposalRow > div:first-child code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilbankFarmProposalRow > div:first-child span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.ilbankFarmProposalImpact,
.ilbankFarmProposalStates { display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center; }
.ilbankFarmProposalImpact span { color: var(--muted); font-size: 9px; }
.ilbankFarmProposalStates { justify-content: flex-end; }
.ilbankFarmProposalStates b { font-size: 9px; font-weight: 800; }
@media (max-width: 980px) {
  .ilbankFarmProposalRow { grid-template-columns: 1fr; }
  .ilbankFarmProposalStates { justify-content: flex-start; }
}
.ilbankFarmReviewLaunch {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(120, 244, 237, .18);
  border-radius: 9px;
  background: rgba(120, 244, 237, .045);
}
.ilbankFarmReviewLaunch span { color: var(--muted); font-size: 10px; line-height: 1.4; }
.ilbankBankReview { display: grid; gap: 10px; min-width: 0; }
.ilbankBankReviewNotice {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid rgba(247, 198, 106, .26);
  border-radius: 10px;
  background: rgba(247, 198, 106, .065);
}
.ilbankBankReviewNotice span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.ilbankBankReviewMetrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.ilbankBankReviewMetrics > div { padding: 9px 10px; border: 1px solid var(--studio-line, rgba(255,255,255,.07)); border-radius: 9px; background: var(--studio-wash, rgba(4,9,19,.28)); }
.ilbankBankReviewMetrics span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.ilbankBankReviewMetrics b { display: block; margin-top: 4px; font-size: 14px; }
.ilbankBankReviewBackup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(120,244,237,.14);
  border-radius: 9px;
  background: var(--studio-wash, rgba(4,9,19,.3));
}
.ilbankBankReviewBackup > div { min-width: 0; }
.ilbankBankReviewBackup span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.ilbankBankReviewBackup b { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.ilbankBankReviewBackup small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.ilbankBankReviewHeader { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.ilbankBankReviewHeader b { display: block; font-size: 11px; }
.ilbankBankReviewHeader span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.ilbankBankReviewRows { display: grid; gap: 5px; max-height: min(46vh, 520px); overflow: auto; padding-right: 3px; }
.ilbankBankReviewRow {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(300px, 1.4fr);
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.055));
  border-radius: 8px;
  background: var(--studio-wash, rgba(2,7,15,.34));
}
.ilbankBankReviewRow > div { min-width: 0; }
.ilbankBankReviewRow span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilbankBankReviewRow b { display: block; font-size: 10px; }
.ilbankBankReviewRow code { display: block; margin-top: 3px; font-size: 9px; overflow-wrap: anywhere; }
.ilbankBankReviewActions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; }
.ilbankBankReviewActions span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.ilbankBankReviewActions .btn { flex: 0 0 auto; }
@media (max-width: 760px) {
  .ilbankFarmReviewLaunch, .ilbankBankReviewBackup, .ilbankBankReviewHeader, .ilbankBankReviewActions { align-items: stretch; flex-direction: column; }
  .ilbankBankReviewMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ilbankBankReviewRow { grid-template-columns: 1fr; }
}

/* UI Studio workspace: scoped layout, accessible controls and source inspection. */
#app.uiStudioActive:not(.focusMode):not(.panelSidebarHidden) { --sidebar: 240px !important; }
.ilUiStudio { container-type: inline-size; position: relative; font-size: 13px; }
.ilUiStudio .ilUiIcon { flex: 0 0 auto; vertical-align: middle; }
.ilUiStudio button:focus-visible, .ilUiStudio summary:focus-visible, .ilUiSidebarRows button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ilUiStudio .ilUiToolbar { padding: 12px 16px; gap: 12px; flex-wrap: wrap; min-height: 72px; background: var(--panel, var(--studio-surface, #111a2a)); }
.ilUiStudio .ilUiBrand { min-width: 180px; flex: 1 1 220px; border: 0; }
.ilUiStudio .ilUiBrand b { font-size: 15px; line-height: 1.3; }
.ilUiStudio .ilUiBrand small { font-size: 11px; margin-top: 3px; }
.ilUiStudio .ilUiToolbar button, .ilUiStudio .ilUiToolbar select, .ilUiStudio .ilUiInspector button, .ilUiStudio .ilUiLayers button { min-height: 36px; font-size: 12px; padding: 8px 10px; }
.ilUiStudio .ilUiToolbarGroup { gap: 8px; flex-wrap: wrap; }
.ilUiStudio .ilUiToolbarGroup.end { margin-left: auto; }
.ilUiStudio .ilUiToolbar button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ilUiStudio .ilUiToolbar .ilUiIcon { width: 16px; height: 16px; }
.ilUiStudio .ilUiModePill, .ilUiStudio .ilUiFidelity, .ilUiStudio .ilUiDirty, .ilUiStudio .ilUiSourceSummary { font-size: 11px; }
.ilUiStudio .ilUiWorkspace, .ilUiStudio.sourceMode .ilUiWorkspace { grid-template-columns: 220px minmax(0, 1fr) 272px; position: relative; }
.ilUiStudio .ilUiLayers { display: grid; grid-template-rows: 60px minmax(0, 1fr) 44px; background: var(--panel, var(--studio-surface, #111a2a)); }
.ilUiStudio .ilUiLayers > header, .ilUiStudio .ilUiInspector > header { padding: 14px; }
.ilUiStudio .ilUiLayers > header b, .ilUiStudio .ilUiInspector > header b { font-size: 13px; }
.ilUiStudio .ilUiLayers > header small, .ilUiStudio .ilUiInspector > header span { font-size: 11px; line-height: 1.5; }
.ilUiStudio .ilUiOutline { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ilUiStudio .ilUiOutline > input { margin: 10px; width: calc(100% - 20px); min-height: 36px; font-size: 12px; }
.ilUiStudio .ilUiLayerRows { flex: 1; padding: 6px; overflow: auto; }
.ilUiStudio .ilUiLayerRow { min-height: 60px; grid-template-columns: 30px minmax(0, 1fr) 12px; gap: 8px; text-align: left; border-color: transparent; }
.ilUiStudio .ilUiLayerRow > span { width: 30px; height: 30px; border-radius: 8px; color: var(--studio-muted, #94c8e8); }
.ilUiStudio .ilUiLayerRow .type-button { color: var(--studio-violet, #b3a0ff); background: #a58af014; }
.ilUiStudio .ilUiLayerRow .type-text { color: var(--studio-good, #8ae1c7); background: #8ae1c714; }
.ilUiStudio .ilUiLayerRow .type-image { color: var(--studio-warn, #e1b788); background: #e1b78814; }
.ilUiStudio .ilUiLayerRow b { font-size: 12px; line-height: 1.4; }
.ilUiStudio .ilUiLayerRow small { font-size: 10px; margin-top: 4px; }
.ilUiStudio .ilUiLayerRow i { font-size: 13px; color: var(--studio-warn, #e1b788); }
.ilUiStudio .ilUiLayerRow.active { border-color: #69d8c955; background: #69d8c911; }
.ilUiStudio .ilUiOutlineEmpty { color: var(--muted); padding: 12px; }
.ilUiStudio .ilUiSourceFoot { font-size: 10px; }
.ilUiStudio .ilUiCanvasPanel { position: relative; grid-template-rows: 50px minmax(0, 1fr) 38px; min-width: 0; }
.ilUiStudio .ilUiPreviewHeader { gap: 8px; padding: 8px 14px; flex-wrap: wrap; }
.ilUiStudio .ilUiPreviewHeader span, .ilUiStudio .ilUiPreviewHeader b { font-size: 11px; }
.ilUiStudio .ilUiViewTools { display: flex; gap: 3px; margin-left: auto; }
.ilUiStudio .ilUiViewTools button { color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 6px; min-height: 30px; min-width: 30px; cursor: pointer; }
.ilUiStudio .ilUiViewport { overflow: auto; display: grid; place-items: center; padding: 24px; background-color: var(--studio-surface, #090e18); background-image: radial-gradient(#8394b01c 1px, transparent 1px); background-size: 16px 16px; }
.ilUiStudio .ilUiCanvas { flex-shrink: 0; max-width: none; max-height: none; }
.ilUiStudio .ilUiSourcePrimitive.selected { outline: 2px solid #75eedb; outline-offset: 2px; }
.ilUiStudio .ilUiSourcePrimitive.dimmed { opacity: .4; }
.ilUiStudio .ilUiSourcePrimitive.button { z-index: 30; padding: 1px 4px; border: 1px solid #aab5c7; background: #424953; color: #fff; border-radius: 1px; font: 10px Consolas, monospace; overflow: hidden; cursor: pointer; }
.ilUiStudio .ilUiCanvasPanel > footer { font-size: 10px; gap: 10px; }
.ilUiStudio .ilUiCanvasPanel > footer code { font-size: 9px; max-width: 35%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ilUiStudio .ilUiInspector, .ilUiStudio.sourceMode .ilUiInspector { display: grid; position: static; width: auto; box-shadow: none; background: var(--panel, var(--studio-surface, #111a2a)); overflow: auto; }
.ilUiStudio .ilUiInspectorGrid { gap: 14px 10px; padding: 16px; }
.ilUiStudio .ilUiInspectorGrid label > span { font-size: 11px; }
.ilUiStudio .ilUiInspectorGrid input, .ilUiStudio .ilUiInspectorGrid select { min-height: 36px; font-size: 12px; }
.ilUiStudio .ilUiSourceInspector { padding: 14px; gap: 14px; }
.ilUiStudio .ilUiSourceCard { padding: 14px; gap: 9px; }
.ilUiStudio .ilUiSourceCard > span { font-size: 10px; }
.ilUiStudio .ilUiSourceCard b { font-size: 13px; }
.ilUiStudio .ilUiSourceCard small, .ilUiStudio .ilUiSourceNotice span { font-size: 12px; line-height: 1.65; }
.ilUiStudio .ilUiSourceCard code { font-size: 10px; }
.ilUiStudio .ilUiSourceCard pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.6 Consolas, monospace; color: var(--text); }
.ilUiStudio .ilUiSourceNotice { padding: 14px; gap: 8px; }
.ilUiStudio .ilUiSourceNotice b { font-size: 12px; }
.ilUiStudio .ilUiDiagnostics summary { padding: 10px 0; cursor: pointer; font-size: 12px; color: var(--muted); }
.ilUiStudio .ilUiSourceEmpty { gap: 12px; }
.ilUiStudio .ilUiSourceEmpty b { font-size: 17px; }
.ilUiStudio .ilUiSourceEmpty span { font-size: 12px; line-height: 1.7; max-width: 420px; }
.ilUiStudio .ilUiEmptyIcon .ilUiIcon { width: 36px; height: 36px; color: var(--studio-muted, #7f9ab8); }
.ilUiStudio .ilUiSourceEmpty button { border: 1px solid #79dacc60; border-radius: 7px; background: #79dacc15; color: var(--studio-accent, #b5f2e9); padding: 10px 16px; cursor: pointer; }
.ilUiStudio .ilUiMenu { position: relative; }
.ilUiStudio .ilUiMenu summary { cursor: pointer; border: 1px solid var(--line); border-radius: 7px; padding: 9px; }
.ilUiStudio .ilUiMenu > div { position: absolute; z-index: 100; top: 42px; left: 0; display: grid; padding: 8px; background: var(--panel, var(--studio-surface, #111a2a)); border: 1px solid var(--line); border-radius: 8px; width: 160px; box-shadow: 0 12px 30px #0006; }
.ilUiStudio .ilUiPalette { display: none; position: absolute; left: 14px; top: 60px; z-index: 2000; width: min(350px, calc(100% - 28px)); max-height: calc(100% - 78px); overflow: auto; padding: 16px; background: var(--panel, var(--studio-surface, #111a2a)); border: 1px solid #79dacc55; border-radius: 12px; box-shadow: 0 20px 55px #0009; }
.ilUiStudio .ilUiPalette.open { display: block; }
.ilUiStudio .ilUiPalette header { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.ilUiStudio .ilUiPalette p { color: var(--muted); font-size: 12px; }
.ilUiStudio .ilUiPalette > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ilUiStudio .ilUiPalette button { cursor: pointer; color: var(--text); border: 1px solid var(--line); border-radius: 8px; background: #8da9c409; }
.ilUiStudio .ilUiPalette > div > button { display: grid; text-align: left; gap: 8px; padding: 14px; }
.ilUiStudio .ilUiPalette > div > button:hover { border-color: var(--cyan); background: #79dacc13; }
.ilUiStudio .ilUiPalette button b { font-size: 12px; }
.ilUiStudio .ilUiPalette button small { font-size: 10px; line-height: 1.5; color: var(--muted); }
.ilUiStudio .ilUiPalette header button { width: 30px; height: 30px; }
#app.uiStudioActive .ilUiSidebarIntro { padding: 16px; background: transparent; gap: 10px; }
#app.uiStudioActive .ilUiSidebarIntro b { font-size: 14px; }
#app.uiStudioActive .ilUiSidebarIntro span { font-size: 12px; line-height: 1.6; }
#app.uiStudioActive .ilUiSidebarRows > button { padding: 10px; min-height: 66px; }
#app.uiStudioActive .ilUiSidebarRows b { font-size: 12px; line-height: 1.4; white-space: normal; }
#app.uiStudioActive .ilUiSidebarRows small { font-size: 10px; margin-top: 5px; }
#app.uiStudioActive .ilUiFileType { border: 0; height: 32px; color: var(--studio-muted, #9ccbd9) !important; }
#uiStudioToggleOutline, #uiStudioToggleInspector { display: none; }
@container (max-width: 1050px) {
  .ilUiStudio .ilUiWorkspace, .ilUiStudio.sourceMode .ilUiWorkspace { grid-template-columns: 210px minmax(0,1fr); }
  .ilUiStudio .ilUiInspector, .ilUiStudio.sourceMode .ilUiInspector { display: none; }
  .ilUiStudio.show-inspector .ilUiInspector { display: grid; position: absolute; z-index: 1500; top: 0; right: 0; bottom: 0; width: min(300px, 100%); box-shadow: -12px 0 32px #0006; }
  .ilUiStudio #uiStudioToggleInspector { display: inline-flex; }
  .ilUiStudio .ilUiSourceSummary { display: none; }
}
@container (max-width: 650px) {
  .ilUiStudio .ilUiWorkspace, .ilUiStudio.sourceMode .ilUiWorkspace { grid-template-columns: minmax(0,1fr); }
  .ilUiStudio .ilUiLayers { display: none; }
  .ilUiStudio #uiStudioToggleOutline { display: inline-flex; }
  .ilUiStudio.show-outline .ilUiLayers { display: grid; position: absolute; top: 0; left: 0; bottom: 0; width: min(280px, 100%); z-index: 1500; box-shadow: 12px 0 32px #0006; }
  .ilUiStudio .ilUiToolbar { gap: 8px; padding: 10px; }
  .ilUiStudio #uiStudioCopy { display: none; }
  .ilUiStudio .ilUiFidelity { display: none; }
  .ilUiStudio .ilUiCanvasPanel > footer code { display: none; }
}

.ilUiStudio { position: absolute; inset: 0; grid-template-rows: auto minmax(0,1fr); }
.ilUiStudio .ilUiToolbar { overflow: visible; }
#app.uiStudioActive:not(.focusMode):not(.panelSidebarHidden) .mainGrid { grid-template-columns: var(--activity) 240px minmax(0,1fr) 0; }
.ilUiStudio .ilUiCanvas:has(.ilUiSourceEmpty) { min-height: 280px; box-shadow: none; border-color: transparent; }
.ilUiStudio .ilUiSourceEmpty { overflow: auto; }

.ilUiDialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 24px; border: 1px solid #6aa99f66; border-radius: 14px; background: var(--panel, var(--studio-surface, #121b2b)); color: var(--text, var(--studio-ink, #e4eef9)); box-shadow: 0 24px 100px #0009; }
.ilUiDialog::backdrop { background: var(--studio-surface, #030712b8); backdrop-filter: blur(4px); }
.ilUiDialog h2 { margin: 0 0 18px; font-size: 20px; }
.ilUiDialog p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.ilUiDialog form > label { display: grid; gap: 10px; font-size: 13px; }
.ilUiDialog input.field { min-height: 40px; width: 100%; font-size: 13px; }
.ilUiDialog fieldset { margin: 20px 0; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.ilUiDialog legend { padding: 0 6px; color: var(--muted); font-size: 12px; }
.ilUiDialog fieldset label { display: grid; grid-template-columns: 20px 1fr; align-items: center; padding: 8px; font-size: 13px; gap: 3px 6px; cursor: pointer; }
.ilUiDialog fieldset small { grid-column: 2; color: var(--muted); font-size: 11px; }
.ilUiDialog footer { margin-top: 24px; display: flex; justify-content: flex-end; gap: 10px; }
.ilUiDialog button { min-height: 38px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--text); cursor: pointer; }
.ilUiDialog button.primary { color: #0a2420; background: #78ddc9; font-weight: 700; }
#app.uiStudioActive:not(.focusMode):not(.panelSidebarHidden) .mainGrid { grid-template-columns: var(--activity) 240px minmax(0,1fr) 0 !important; }
@media (max-width: 800px) { #app.uiStudioActive:not(.focusMode):not(.panelSidebarHidden) .mainGrid { grid-template-columns: var(--activity) 200px minmax(0,1fr) 0 !important; } }

/* Responsive workspace actions. The ResizeObserver adds these classes as soon as
   browser width or zoom makes the full header uncomfortable. */
.topbarOverflowMenu {
  display: none;
  position: relative;
  flex: 0 0 auto;
  z-index: 12040;
}
.topbar.topbarOverflowActive .topbarOverflowMenu { display: inline-flex; }
.topbar.topbarOverflowActive > .topbarActions,
.topbar.topbarOverflowActive > #studioTutorialBtn,
.topbar.topbarOverflowActive > #securityBtn,
.topbar.topbarOverflowActive > #focusModeBtn,
.topbar.topbarOverflowActive > #themeBtn { display: none !important; }
.topbar.topbarOverflowTight > .topbarToolGroup[aria-label="Editing history"] { display: none !important; }
.topbar.topbarOverflowTight .brandMini,
.topbar.topbarOverflowTight .studioAccountIdentity,
.topbar.topbarOverflowTight #profileRank,
.topbar.topbarOverflowTight .studioAccountChevron { display: none !important; }
.topbar.topbarOverflowTight .topbarBrandGroup { padding-right: 5px; }
.topbar.topbarOverflowTight .topbarProjectGroup { flex: 1 1 150px; }
.topbarOverflowButton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: rgba(120,244,237,.24);
  color: var(--studio-accent, #9bfff6);
  background: rgba(120,244,237,.08);
}
.topbarOverflowButton em { color: var(--muted); font-size: 9px; font-style: normal; }
.topbarOverflowPanel {
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  width: min(390px, calc(100vw - 18px));
  min-width: min(330px, calc(100vw - 18px));
  max-height: min(680px, calc(100vh - var(--top) - var(--status) - 18px));
  padding: 8px;
  overflow: auto;
  overscroll-behavior: contain;
  z-index: 12060;
}
#topbarOverflowItems { display: grid; gap: 3px; }
.topbarOverflowHeading {
  display: block;
  padding: 9px 8px 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.topbarOverflowItem {
  grid-template-columns: 31px minmax(0,1fr) auto !important;
  align-items: center;
  min-height: 48px;
}
.topbarOverflowItem > span:nth-child(2) {
  display: grid;
  grid-row: auto !important;
  min-width: 0;
  font-size: inherit !important;
  text-align: left !important;
}
.topbarOverflowItem > span:nth-child(2) b { font-size: 11px; }
.topbarOverflowItem > span:nth-child(2) small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.topbarOverflowItem > em { color: var(--studio-good, #8ef0bd); font-size: 9px; font-style: normal; }
.topbarOverflowItem.off > em { color: var(--muted); }
.topbarOverflowIcon { grid-row: auto !important; font-size: 15px !important; }

/* Code calculation inspector. */
.calculationToolBtn {
  border-color: rgba(123,231,255,.25);
  color: var(--studio-accent, #9efff5);
  background: rgba(60,189,216,.08);
}
.calculationDialog { width: min(900px, 96vw); }
.calculationInspector { display: grid; gap: 13px; }
.calculationHero {
  display: grid;
  grid-template-columns: 50px minmax(0,1fr);
  gap: 13px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(120,244,237,.18);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(32,183,210,.1), rgba(139,92,246,.1));
}
.calculationMark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(120,244,237,.28);
  border-radius: 12px;
  color: var(--studio-accent, #9efff5);
  background: rgba(120,244,237,.1);
  font: 800 23px/1 Georgia, serif;
}
.calculationHero div > span,
.calculationSource > span,
.calculationEquation span,
.calculationInputs header span,
.calculationResult > span,
.calculationSuggestions > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.calculationHero h3 { margin: 3px 0 4px; font-size: 17px; }
.calculationHero p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.calculationSource,
.calculationEquation,
.calculationInputs,
.calculationResult,
.calculationSuggestions {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--studio-wash, rgba(255,255,255,.025));
}
.calculationSource { display: grid; gap: 7px; }
.calculationSource pre {
  max-height: 190px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 8px;
  background: rgba(0,0,0,.15);
  white-space: pre;
}
.calculationSource code,
.calculationEquation code {
  overflow-wrap: anywhere;
  color: var(--studio-accent, #a9fff6);
  font: 11px/1.55 "Cascadia Code", Consolas, monospace;
}
.calculationEquation {
  display: grid;
  grid-template-columns: minmax(150px, .35fr) minmax(0,1fr);
  gap: 14px;
  align-items: center;
}
.calculationEquation > div { display: grid; gap: 4px; }
.calculationEquation b { font-size: 14px; }
.calculationInputs { display: grid; gap: 8px; }
.calculationInputs header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.calculationInputs header small { color: var(--muted); font-size: 9px; }
.calculationInput {
  display: grid;
  grid-template-columns: minmax(180px,1fr) minmax(150px,.65fr);
  gap: 12px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 8px;
}
.calculationInput > span { display: grid; gap: 3px; }
.calculationInput b { font-size: 11px; }
.calculationInput small,
.calculationNoInputs span { color: var(--muted); font-size: 9px; }
.calculationNoInputs { display: grid; gap: 3px; padding: 9px; }
.calculationResult {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 5px 12px;
  align-items: center;
  border-color: rgba(91,222,163,.24);
  background: rgba(91,222,163,.06);
}
.calculationResult > span,
.calculationResult > strong,
.calculationResult > small { grid-column: 1; }
.calculationResult strong { margin-top: 2px; color: var(--studio-good, #89efbb); font: 800 18px/1.3 "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }
.calculationResult small { color: var(--muted); font-size: 9px; }
.calculationResult button { grid-column: 2; grid-row: 1 / 4; }
.calculationResult.warning { border-color: rgba(255,199,84,.3); background: rgba(255,199,84,.07); }
.calculationResult.warning strong { color: var(--studio-warn, #ffd36b); }
.calculationResult.error { border-color: rgba(255,100,130,.3); background: rgba(255,100,130,.07); }
.calculationResult.error strong { color: var(--studio-bad, #ff8ba0); }
.calculationSuggestions { display: grid; gap: 7px; }
.calculationSuggestions p { margin: 0; color: var(--text); font-size: 10px; line-height: 1.5; }
.calculationSuggestions p::before { content: "◇"; margin-right: 7px; color: var(--studio-accent, #9efff5); }
.calculationSuggestions.quiet p { color: var(--muted); }
.calculationTrace {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--studio-wash, rgba(255,255,255,.025));
}
.calculationTrace > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.calculationTrace > header span,
.calculationFinalValues > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.calculationTrace > header small { color: var(--muted); font-size: 9px; }
.calculationTraceRows { display: grid; gap: 5px; }
.calculationTraceRow {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto minmax(90px,.35fr);
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 8px;
  background: rgba(0,0,0,.08);
}
.calculationTraceLine {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255,255,255,.045);
  font: 9px/1 "Cascadia Code", Consolas, monospace;
}
.calculationTraceRow > div { display: grid; gap: 3px; min-width: 0; }
.calculationTraceRow b { font-size: 10px; }
.calculationTraceRow code { overflow: hidden; color: var(--muted); font: 9px/1.35 "Cascadia Code", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.calculationTraceRow em { padding: 3px 6px; border-radius: 999px; color: var(--studio-good,#8ef0bd); background: rgba(91,222,163,.08); font-size: 8px; font-style: normal; font-weight: 850; }
.calculationTraceRow > strong { overflow-wrap: anywhere; color: var(--text); font: 800 10px/1.3 "Cascadia Code", Consolas, monospace; text-align: right; }
.calculationTraceRow.skipped { opacity: .62; }
.calculationTraceRow.skipped em { color: var(--muted); background: rgba(255,255,255,.045); }
.calculationTraceRow.error { border-color: rgba(255,100,130,.2); }
.calculationTraceRow.error em { color: var(--studio-bad,#ff8ba0); background: rgba(255,100,130,.08); }
.calculationFinalValues { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding-top: 4px; }
.calculationFinalValues code { padding: 5px 7px; border: 1px solid rgba(120,244,237,.12); border-radius: 7px; color: var(--studio-accent,#9efff5); background: rgba(120,244,237,.05); font-size: 9px; }
.calculationUnsupported {
  padding: 10px 12px;
  border: 1px solid rgba(255,199,84,.18);
  border-radius: 10px;
  background: rgba(255,199,84,.04);
}
.calculationUnsupported summary { color: var(--studio-warn,#ffd36b); cursor: pointer; font-size: 10px; font-weight: 750; }
.calculationUnsupported > div { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 4px 9px; padding: 8px 0; border-top: 1px solid var(--line); }
.calculationUnsupported > div:first-of-type { margin-top: 8px; }
.calculationUnsupported span { color: var(--muted); font-size: 9px; }
.calculationUnsupported code { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.calculationUnsupported small { grid-column: 2; color: var(--muted); font-size: 9px; }
.calculationEmpty { place-items: center; min-height: 260px; text-align: center; }
.calculationEmpty h3 { margin: 0; }
.calculationEmpty p { margin: 0; color: var(--studio-bad, #ff8ba0); }
.calculationEmpty small { max-width: 560px; color: var(--muted); line-height: 1.5; }
html[data-theme="light"] .topbarOverflowButton,
html[data-theme="light"] .calculationToolBtn { color: #087783; background: rgba(8,125,137,.08); }
html[data-theme="light"] .calculationSource code,
html[data-theme="light"] .calculationEquation code { color: #087783; }
html[data-theme="light"] .calculationInput { border-color: rgba(24,45,75,.1); }
html[data-theme="light"] .calculationSource pre,
html[data-theme="light"] .calculationTraceRow { border-color: rgba(24,45,75,.1); background: rgba(235,242,249,.68); }

@media (max-width: 620px) {
  .topbarOverflowButton b { display: none; }
  .topbarOverflowButton { padding-inline: 9px; }
  .calculationEquation,
  .calculationInput,
  .calculationTraceRow { grid-template-columns: 1fr; }
  .calculationTraceLine { display: none; }
  .calculationTraceRow > strong { text-align: left; }
}

html[data-theme="light"] .ilUiStudio { --panel: #f2f6fb; }
html[data-theme="light"] .ilUiDialog { background: #f2f6fb; }

/* The small specimen pilot precedes the full Builders Workbench. */
.creaturePilot{height:100%;overflow:auto;padding:28px clamp(16px,3vw,48px);color:var(--text,var(--studio-ink, #dfe7f3));background:var(--panel,var(--studio-surface, #0c1320))}
.creaturePilotHead{display:flex;justify-content:space-between;gap:20px;align-items:start}.creaturePilot h1{font-size:30px;margin:8px 0}.creaturePilot h2{font-size:18px;margin:0 0 10px}.creaturePilot p,.creaturePilot small{color:var(--muted,var(--studio-muted, #9bacbf));line-height:1.6}.creatureEyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--studio-accent, #61d6cc)}.creatureBadge{border:1px solid var(--studio-line, #367c78);color:var(--studio-accent, #77ded1);border-radius:20px;padding:8px 12px;white-space:nowrap;font-size:11px}.creatureSpecimens{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.creatureSpecimens button{display:grid;grid-template-columns:32px 1fr;text-align:left;padding:16px;background:var(--bg,var(--studio-surface, #0b101a));border:1px solid var(--studio-line, #334052);border-radius:10px;color:inherit;cursor:pointer}.creatureSpecimens button.active{border-color:#4bcabf;background:var(--studio-surface, #153333)}.creatureSpecimens button span{grid-row:span 2;font-size:22px;color:var(--studio-accent, #66d8cb)}.creatureSpecimens button small{font-size:11px}.creaturePilotGrid{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(340px,1.4fr);gap:22px}.creaturePreviewCard,.creatureForm,.creatureInstructions{border:1px solid var(--studio-line, #2a3546);border-radius:12px;padding:24px;background:var(--bg,var(--studio-surface, #101925))}.creaturePreviewCard{text-align:center}.creaturePreviewCard h2{font-size:26px;margin-top:16px}.creatureFine{font-size:11px}.creatureNote{padding:16px;background:var(--studio-surface, #172838);border-radius:8px;margin-top:24px;font-size:12px}.creatureNote p{margin-bottom:0}.creatureForm section+section{border-top:1px solid var(--studio-line, #29374a);margin-top:24px;padding-top:24px}.creatureForm section>p{font-size:12px}.creatureFields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.creatureFields label{display:flex;flex-direction:column;gap:8px;font-size:12px}.creatureFields .wide{grid-column:1/-1}.creatureFields input,.creatureFields select{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--studio-line, #3a4960);border-radius:6px;background:var(--bg,var(--studio-surface, #080e18));color:inherit;padding:10px;font:inherit}.creatureFields input:invalid{border-color:#dc8d62}.creatureFields input[data-creature-field="dna.Genetics"]{font-family:monospace;letter-spacing:1px}.creatureForm footer{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.creatureForm footer span{font-size:11px;color:var(--studio-good, #8bd6bd)}.creatureForm small{font-size:11px}.creatureForm [role="alert"]{color:var(--studio-bad, #ffa08a);font-size:12px}.creatureInstructions{margin-top:22px;font-size:12px}.creatureInstructions li{margin:10px 0}.creatureInstructions code{color:var(--studio-accent, #7fddd2)}.creatureHelix{height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:5px 0 20px}.creatureHelix i{position:relative;width:110px;height:10px;transform:rotateY(calc(var(--i)*28deg));animation:creatureTwist 5s linear infinite;animation-delay:calc(var(--i)*-.16s);border-top:1px solid #379397}.creatureHelix b{position:absolute;width:8px;height:8px;border-radius:50%;background:#6fffe0;top:-4px;left:0;box-shadow:0 0 10px #54cbb6}.creatureHelix b+b{left:auto;right:0;background:#b79aff;box-shadow:0 0 10px #987add}@keyframes creatureTwist{to{transform:rotateY(calc(var(--i)*28deg + 360deg))}}@media(prefers-reduced-motion:reduce){.creatureHelix i{animation:none}}@media(max-width:1100px){.creaturePilotGrid{grid-template-columns:1fr}.creaturePreviewCard{padding:18px}.creaturePreviewCard .creatureHelix{display:none}}@media(max-width:650px){.creaturePilotHead{display:block}.creatureBadge{display:inline-block;margin-top:8px}.creatureSpecimens{grid-template-columns:1fr}.creatureFields{grid-template-columns:1fr}.creaturePilot{padding:18px}.creatureForm{padding:18px}}

/* Hidden hierarchy columns must not receive the automatically placed canvas. */
#app.panelModelOutlinerHidden:not(.focusMode) .modelArea > .viewportWrap { grid-column: 2; grid-row: 1; }
#app.panelModelOutlinerHidden:not(.focusMode) .modelArea > .modelSidePanel { grid-column: 3; grid-row: 1; }
#app.creaturePilotActive .workToolbar { display: none !important; }

/* Builders Workbench: shared authoring surface, scoped away from existing editors. */
#app.builderWorkbenchActive .workToolbar {display:none!important}
.builderWorkspace {--wb-mint:#74e5ce;--wb-muted:#98acc2;--wb-line:rgba(157,190,221,.16);box-sizing:border-box;height:100%;overflow:auto;padding:30px 34px 24px;color:var(--studio-ink, #e8eff9);background:radial-gradient(ellipse at 85% 0%,var(--studio-wash, rgba(35,98,97,.15)),transparent 45%),var(--studio-surface, #0c1421);container-type:inline-size;font-family:inherit;isolation:isolate}
.builderWorkspace * {box-sizing:border-box}
.builderWorkspace h1,.builderWorkspace h2,.builderWorkspace h3,.builderWorkspace p {margin:0}
.builderWorkspace h1 {font-size:clamp(25px,3cqw,38px);letter-spacing:-1.3px;line-height:1.2}
.builderWorkspace h2 {font-size:21px;letter-spacing:-.5px}
.builderWorkspace h3 {font-size:16px}
.builderWorkspace p {font-size:13px;line-height:1.75;color:var(--wb-muted)}
.builderWorkspace button,.builderWorkspace input,.builderWorkspace select,.builderWorkspace textarea {font:inherit}
.builderWorkspace button {cursor:pointer}
.builderWorkspace button:disabled {cursor:not-allowed;opacity:.48}
.builderWorkspace button:focus-visible,.builderWorkspace input:focus-visible,.builderWorkspace select:focus-visible,.builderWorkspace textarea:focus-visible {outline:2px solid var(--wb-mint);outline-offset:3px}
.builderWorkspace [hidden] {display:none!important}
.builderWorkspace .btn {min-height:35px;padding:8px 13px;border:1px solid var(--wb-line);border-radius:8px;background:var(--studio-surface, #192537);color:var(--studio-ink, #e5eef8);font-size:12px;line-height:1.4;white-space:normal}
.builderWorkspace .btn:hover {background:var(--studio-surface, #213448);border-color:#508c92}
.builderWorkspace .btn.primary {background:#75e2cc;color:#09251f;border-color:#75e2cc;font-weight:700;box-shadow:none}
.builderWorkspace .btn.small {font-size:11px;min-height:30px;padding:6px 9px}
.wbTop {display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}
.wbTop p {margin-top:8px}
.wbKicker {display:block;font-size:10px;font-weight:750;letter-spacing:1.6px;color:var(--wb-mint);margin-bottom:10px}
.wbPill {display:inline-flex;align-items:center;width:fit-content;padding:5px 9px;border:1px solid var(--wb-line);border-radius:20px;font-size:10px;font-weight:650;white-space:nowrap;color:var(--studio-ink, #b6c9dc);background:rgba(157,190,221,.04)}
.wbNav {display:flex;gap:4px;border-bottom:1px solid var(--wb-line);margin-bottom:26px;overflow-x:auto}
.wbNav button {display:flex;align-items:center;gap:9px;flex-shrink:0;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--wb-muted);padding:13px 15px;font-size:12px;font-weight:650}
.wbNav button[aria-current=page] {color:var(--wb-mint);border-bottom-color:var(--wb-mint)}
.wbNav svg,.wbAssetRow>svg {width:20px;height:20px;flex-shrink:0}
.wbHero {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(200px,1fr);align-items:center;gap:30px;padding:30px 34px;border:1px solid var(--wb-line);border-radius:14px;background:linear-gradient(130deg,var(--studio-wash, rgba(30,63,69,.45)),var(--studio-wash, rgba(24,30,55,.6)));overflow:hidden}
.wbHero h2 {font-size:clamp(28px,4.2cqw,48px);line-height:1.1;letter-spacing:-1.8px;margin-bottom:18px}
.wbHero h2 em {color:var(--wb-mint);font-style:normal}
.wbHero p {max-width:520px}
.wbHero .wbHint {font-size:11px;margin-top:16px;line-height:1.6}
.wbActions {display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.wbHero .wbActions {margin-top:22px}
.wbBlueprint {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;min-height:235px;background-image:linear-gradient(rgba(104,203,191,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(104,203,191,.05) 1px,transparent 1px);background-size:22px 22px;border-radius:50%;color:var(--studio-accent, #69c8b9)}
.wbBlueprintCube {border:1px solid rgba(101,222,204,.3);padding:26px;border-radius:24px;transform:rotate(-8deg);background:var(--studio-wash, rgba(30,88,88,.25));box-shadow:0 0 70px rgba(70,188,163,.07)}
.wbBlueprintCube svg {height:85px;width:85px}
.wbBlueprint span {font-size:10px;letter-spacing:2px}
.wbBlueprint small {font-size:10px;color:var(--wb-muted)}
.wbSectionTitle {display:flex;align-items:center;justify-content:space-between;gap:15px;margin:28px 0 15px}
.wbSectionTitle>span {font-size:11px;color:var(--wb-muted)}
.wbSectionTitle svg {width:24px;height:24px;color:var(--wb-mint)}
.wbLabGrid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wbLabCard {position:relative;padding:23px;border-radius:12px;border:1px solid var(--wb-line);background:var(--studio-surface, #111e2c);display:flex;flex-direction:column;align-items:flex-start}
.wbLabCard>svg {height:30px;width:30px;color:var(--wb-mint);margin-bottom:23px}
.wbLabCard>.wbPill {position:absolute;top:25px;right:20px}
.wbLabCard p {margin:10px 0 20px;flex:1}
.wbLabCard:has([data-page=hybrid])>svg {color:var(--studio-violet, #b7a2ef)}
.wbCount {font-size:13px;color:var(--wb-muted);margin-left:6px}
.wbSearch {display:flex;align-items:center;gap:16px;font-size:12px;color:var(--wb-muted);margin-bottom:12px}
.builderWorkspace input:not([type=checkbox]):not([type=color]),.builderWorkspace select,.builderWorkspace textarea {display:block;width:100%;min-width:0;background:var(--studio-surface, #0a1420);border:1px solid var(--studio-line, #2b3f54);border-radius:7px;color:var(--studio-ink, #e1ecf8);padding:10px 11px;font-size:12px}
.builderWorkspace input[type=color] {display:block;width:65px;height:38px;background:none;border:1px solid var(--studio-line, #32475c);border-radius:7px;padding:4px}
.builderWorkspace label {font-size:12px;color:var(--studio-ink, #bccde0);line-height:1.5}
.builderWorkspace label>input,.builderWorkspace label>select,.builderWorkspace label>textarea {margin-top:7px}
.wbSearch input {max-width:400px}
.wbAssetRow {display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:14px;border:1px solid var(--wb-line);border-radius:9px;background:var(--studio-surface, #101c2b);color:var(--studio-ink, #dbe7f5);margin-bottom:7px}
.wbAssetRow>svg {color:var(--wb-mint)}
.wbAssetRow>span:first-of-type {flex:1;min-width:0}
.wbAssetRow b {display:block;font-size:13px}
.wbAssetRow small {display:block;font-size:10px;color:var(--studio-muted, #90a6bd);overflow-wrap:anywhere;margin-top:5px}
.wbAssetRow:hover {border-color:#509b98;background:var(--studio-surface, #142839)}
.wbDraftRow {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch;margin-bottom:8px}
.wbDraftRow .wbAssetRow {height:100%;margin:0}
.wbDraftActions {display:flex;gap:7px;align-items:center;padding:0 4px}
.wbPackCard {margin:10px 0;border:1px solid var(--wb-line);border-radius:11px;background:var(--studio-surface,#101c2b);overflow:hidden}
.wbPackRow {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px}
.wbPackRow>div:first-child {display:grid;gap:4px;min-width:0}
.wbPackRow>div:first-child span {color:var(--wb-muted);font-size:10px}
.wbPackContents {padding:14px 15px 16px;border-top:1px solid var(--wb-line);background:color-mix(in srgb,var(--studio-surface,#101c2b) 76%,#050a12)}
.wbPackContentsHead>div {display:grid;gap:4px;margin-bottom:10px}.wbPackContentsHead span {font-size:11px;color:var(--wb-muted)}
.wbPackDraft {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:12px;margin-top:8px;border:1px solid var(--wb-line);border-left:3px solid var(--wb-muted);border-radius:8px;background:var(--studio-panel,#0b1624)}
.wbPackDraft.ready {border-left-color:#50e3bd}.wbPackDraft.blocked {border-left-color:#ff9c62}.wbPackDraft.excluded {opacity:.72}
.wbPackDraft>div:first-child {display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}.wbPackDraft small {width:100%;color:var(--wb-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbPackDraft ul {grid-column:1/-1;margin:2px 0 0;padding-left:20px;color:#ffbd91;font-size:11px}.wbPackDraft li+li {margin-top:4px}
.wbPackMessage {margin-bottom:10px;padding:9px 11px;border:1px solid color-mix(in srgb,#50e3bd 45%,var(--wb-line));border-radius:7px;color:#9ef2dc;background:color-mix(in srgb,#50e3bd 8%,transparent)}
.wbPackMessage.bad {border-color:#a95c48;color:#ffbd91;background:#361b18}
.wbSetupWizard {width:min(760px,calc(100vw - 64px));max-width:calc(100vw - 64px);max-height:min(820px,calc(100vh - 50px));margin-inline:auto;overflow:auto}
.wbSetupWizard>section {margin-top:18px;padding:17px;border:1px solid var(--wb-line);border-radius:10px;background:var(--studio-wash,rgba(18,31,47,.55))}
.wbSetupWizard>section>h3 {margin-bottom:9px}
.wbSetupSteps {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0 0;padding:0;list-style:none}
.wbSetupSteps li {display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--wb-line);border-radius:8px;color:var(--wb-muted);font-size:11px}
.wbSetupSteps b {display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--wb-mint);color:#09251f}
.wbSetupAsset {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end;margin-top:12px}
.wbSetupAsset>span {grid-column:1/-1;color:var(--wb-muted);font-size:10px;overflow-wrap:anywhere}
.wbInlineCreate {display:flex;gap:7px;align-items:center;margin-top:7px}
.wbInlineCreate input {margin:0!important}
.wbSetupSummary {display:flex;justify-content:space-between;gap:15px;margin-top:18px;padding:13px 15px;border-left:3px solid var(--wb-mint);background:var(--studio-wash,rgba(33,67,75,.32));font-size:11px}
.wbEmpty {padding:30px;border:1px dashed var(--studio-line, #30465a);border-radius:12px;text-align:center;font-size:14px;color:var(--studio-ink, #bacbdf)}
.wbEmpty small {display:block;font-size:12px;color:var(--wb-muted);margin-top:8px}
.wbInfoGrid,.wbSteps {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:20px}
.wbInfoGrid article,.wbSteps article {padding:22px;border:1px solid var(--wb-line);border-radius:12px;background:var(--studio-surface, #121e2d)}
.wbInfoGrid p,.wbSteps p {margin-top:10px}
.wbSteps article>span {display:block;font-size:26px;font-weight:700;letter-spacing:-1px;color:var(--studio-violet, #9a8cce);margin-bottom:15px}
.wbNotice {padding:22px;border:1px solid var(--wb-line);border-left:3px solid #a092ca;border-radius:9px;margin-top:22px;background:rgba(78,59,110,.1)}
.wbNotice b {font-size:14px}
.wbNotice p {margin:8px 0}
.wbNotice .btn {margin-top:10px}
.wbHint {font-size:11px!important;color:var(--studio-muted, #98acc2)}
.wbGuide {position:relative;min-height:275px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.wbGuideHalo {position:absolute;width:225px;height:225px;border:1px dashed #457e81;border-radius:50%;box-shadow:0 0 80px #65d4b51c,inset 0 0 65px #65d4b511;animation:wbOrbit 35s linear infinite}
.wbGeneCharacter {position:relative;width:190px;height:245px;filter:drop-shadow(0 0 18px #59bfad33);animation:wbFloat 4s ease-in-out infinite}
.wbOrbit {position:absolute;font-size:12px;letter-spacing:3px;border:1px solid #477079;border-radius:7px;background:#102c37;padding:8px;color:#8ce5d2;animation:wbFloat 5s ease-in-out infinite}
.wbOrbitA {top:40px;left:12px}
.wbOrbitB {right:6px;bottom:45px;animation-delay:-2s;color:#c8b4ff}
.wbMotionPaused * {animation-play-state:paused!important}
@keyframes wbFloat {0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes wbOrbit {to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.builderWorkspace * {animation:none!important;transition:none!important}}
.wbSaberDiagram {display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px;position:relative}
.wbSaberDiagram>i {height:100px;width:7px;border-radius:8px 8px 0 0;background:#a4f6ee;box-shadow:0 0 15px #63ffe6}
.wbSaberDiagram>span {display:block;width:105px;padding:7px;border:1px solid #6d7a92;background:linear-gradient(90deg,var(--studio-surface, #293849),#5d6e7e,var(--studio-surface, #293849));text-align:center;font-size:10px;color:var(--studio-accent, #eff5ff);border-radius:4px}
.wbSaberDiagram>span:nth-of-type(3){padding:15px 7px;background:repeating-linear-gradient(0deg,var(--studio-surface, #283240),var(--studio-surface, #283240) 5px,#435162 6px,#435162 8px)}
.wbSaberDiagram small {font-size:10px;margin-top:10px;color:var(--wb-muted)}
.wbDonorDiagram {display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.wbDonorDiagram span {display:flex;flex-direction:column;gap:12px;align-items:center;border:1px solid var(--studio-line, #554a72);padding:22px 14px;border-radius:14px;font-size:11px;color:var(--studio-violet, #c8b6f1)}
.wbDonorDiagram svg {width:35px;height:35px}
.wbDonorDiagram b {font-size:18px;color:var(--studio-muted, #8d82ab)}
.wbFamilyGrid {display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;max-height:480px;overflow:auto}
.wbFamilyGrid article {padding:18px;border:1px solid var(--wb-line);border-radius:10px;background:var(--studio-surface, #122130)}
.wbFamilyGrid p {margin:8px 0 13px}
.wbBack {display:block;padding:0;margin:0 0 19px;background:none;border:0;font-size:12px;color:var(--wb-muted)}
.wbDocumentGrid {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(230px,1fr);gap:24px;align-items:start}
.wbEditorForm {border:1px solid var(--wb-line);border-radius:12px;padding:23px;background:var(--studio-surface, #111e2c)}
.wbEditorForm>.wbSectionTitle,.wbEditorForm fieldset>.wbSectionTitle {margin-top:0}
.wbEditorForm fieldset {border:0;padding:0;margin:0;min-width:0}
.wbEditorForm label {display:block;margin-bottom:16px}
.wbEditorForm .wbCheck {display:flex;align-items:center;gap:9px}
.wbEditorForm fieldset fieldset {margin:20px 0;border:1px solid var(--wb-line);padding:16px;border-radius:8px}
.wbEditorForm legend {font-size:12px;padding:0 7px;color:var(--wb-muted)}
.wbEditorForm .wbCheck input {margin:0;accent-color:#75e2cc}
.wbFieldGrid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.wbBinding {margin:15px 0 22px}
.wbBinding label {margin-bottom:8px}
.wbBinding>div {display:flex;gap:6px;flex-wrap:wrap}
.wbPart {border-top:1px solid var(--wb-line);padding:16px 0}
.wbPart summary {cursor:pointer;font-size:14px;font-weight:650}
.wbPart summary span {float:right;font-size:10px;font-weight:400;color:var(--wb-muted)}
.wbPart .wbFieldGrid label {font-size:11px}
.wbDocumentAside {display:flex;flex-direction:column;gap:16px;min-width:0}
.wbDraftSymbol {height:115px;border:1px solid var(--wb-line);border-radius:12px;background:radial-gradient(ellipse,var(--studio-wash, #23484666),transparent 70%);display:grid;place-items:center}
.wbDraftSymbol svg {width:50px;height:50px;color:var(--studio-muted, #83c6bf)}
.wbReadiness,.wbDependencies,.wbProvenance {border:1px solid var(--wb-line);border-radius:10px;padding:19px;background:var(--studio-surface, #121e2b)}
.wbReadiness p {margin:10px 0 14px}
.wbDependency {border-top:1px solid var(--wb-line);padding:12px 0;display:flex;flex-direction:column;gap:6px}
.wbDependencies h3 {margin-bottom:12px}
.wbDependency b {font-size:12px;color:var(--studio-warn, #dac299)}
.wbDependency.found b {color:var(--studio-good, #84d9be)}
.wbDependency small {font-size:10px;color:var(--studio-muted, #91a5bb);overflow-wrap:anywhere;line-height:1.6}
.wbDependency span {font-size:10px;color:var(--studio-muted, #96adc3)}
.wbProvenance {font-size:12px}
.wbProvenance p {font-size:11px;overflow-wrap:anywhere;margin-top:10px}
.wbSaveBar {display:flex;gap:20px;flex-wrap:wrap;position:sticky;bottom:-24px;padding:14px 18px;margin:24px -2px -1px;background:var(--studio-surface, #142338);border:1px solid var(--studio-line, #33465b);border-radius:9px;font-size:12px}
.wbError {color:var(--studio-bad, #ffb3a5)!important;line-height:1.6}
.wbColourSample {display:flex;align-items:center;gap:15px;margin:14px 0 22px}
.wbColourSample>span {display:block;min-width:120px;height:6px;border-radius:5px;background:var(--blade);box-shadow:0 0 15px var(--blade)}
.wbColourSample small {font-size:10px;color:var(--wb-muted)}
.wbDialog {width:min(620px,94vw);max-height:85vh;overflow:auto;border:1px solid var(--studio-line, #425870);border-radius:14px;padding:25px;background:var(--studio-surface, #142131);color:var(--studio-accent, #e5effc);box-shadow:0 25px 100px #0009}
.wbDialog::backdrop {background:var(--studio-surface, #030915bb);backdrop-filter:blur(3px)}
.wbDialog h2 {font-size:22px;margin-bottom:14px}
.wbDialog p {margin-bottom:17px}
.wbDialog label {display:block;margin:14px 0}
.wbDialog small {font-size:11px;color:var(--wb-muted);line-height:1.6}
.wbDialog footer,.wbDialog header {display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:20px}
.wbDialog header {margin-top:0}
.wbPickerList {max-height:45vh;overflow:auto;margin-top:18px}
@container(max-width:750px){.wbHero{grid-template-columns:1fr;padding:24px}.wbBlueprint{display:none}.wbGuide{min-height:230px}.wbLabGrid,.wbDocumentGrid{grid-template-columns:1fr}.wbTop{align-items:flex-start;flex-wrap:wrap}.wbDocumentAside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.wbDocumentAside>.wbReadiness{grid-column:1/-1}.wbSectionTitle>span{display:none}.wbSaberDiagram{display:none}.wbHero .wbGuide{display:none}.wbHero:has(.wbGuide){grid-template-columns:minmax(0,1fr) 160px;gap:10px}.wbHero .wbGuide{display:flex}.wbGeneCharacter{width:140px}.wbGuideHalo{width:160px;height:160px}.wbOrbit{display:none}}
@container(max-width:480px){.wbHero:has(.wbGuide),.wbInfoGrid,.wbSteps,.wbDocumentAside{grid-template-columns:1fr}.wbHero .wbGuide{display:none}.wbNav button{padding:12px 9px;font-size:11px;gap:5px}.wbTop h1{font-size:26px}.wbHero h2{font-size:32px}.wbHero{padding:20px}.wbSearch{display:block}.wbFieldGrid{grid-template-columns:1fr}.wbLabCard>.wbPill{font-size:9px}.wbDonorDiagram{gap:5px}.wbDonorDiagram span{padding:14px 10px}.wbDraftRow{grid-template-columns:1fr}.wbDraftActions{justify-content:flex-end}.wbPackRow{align-items:flex-start;flex-direction:column}.wbPackRow>.wbActions{width:100%;justify-content:flex-start}.wbPackDraft{grid-template-columns:1fr}.wbPackDraft .wbDraftActions{justify-content:flex-start}.wbSetupSteps{grid-template-columns:1fr}.wbSetupAsset{grid-template-columns:1fr}.wbSetupSummary{display:block}.wbSetupSummary span{display:block;margin-top:6px}}

/* Storage Studio: the browser-authorable contract for the native Terminal 2.0 rebuild. */
.storageStudio{--storage-accent:#3dd6ff;--storage-surface:#111c28;--storage-grid:#09131e;--storage-scale:1;--storage-columns:9;--storage-glow:.68;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:100%;height:100%;min-height:0;overflow:hidden;color:#eaf7ff;background:radial-gradient(circle at 76% -10%,color-mix(in srgb,var(--storage-accent) 12%,transparent),transparent 35%),#07101a;font-family:Inter,"Segoe UI",sans-serif;container-type:inline-size}
.storageStudioHeader{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:22px 28px 18px;border-bottom:1px solid #1d3445;background:linear-gradient(110deg,#0c1723 0%,color-mix(in srgb,var(--storage-surface) 88%,#172d3c) 100%)}
.storageStudioHeader h1{margin:3px 0 4px;font-size:28px;line-height:1}.storageStudioHeader p{margin:0;max-width:720px;color:#91a9b9;font-size:12px}.storageEyebrow,.storageAsideLabel{font:700 9px/1.2 ui-monospace,monospace;letter-spacing:.15em;color:var(--storage-accent)}
.storageHeaderActions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.storageSaveState{margin-right:6px;color:#8ea5b5;font-size:10px}
.storageStudioTabs{display:flex;align-items:center;gap:2px;padding:0 22px;border-bottom:1px solid #1d3445;background:#0a1420;overflow-x:auto;scrollbar-width:thin}.storageStudioTabs button{display:flex;align-items:center;gap:7px;min-height:48px;padding:0 16px;border:0;border-bottom:2px solid transparent;color:#8199aa;background:transparent;font:700 11px Inter,"Segoe UI",sans-serif;white-space:nowrap;cursor:pointer}.storageStudioTabs button span{font-size:14px}.storageStudioTabs button:hover{color:#d8ebf4;background:#11202d}.storageStudioTabs button.active{color:#fff;border-bottom-color:var(--storage-accent);background:linear-gradient(0deg,color-mix(in srgb,var(--storage-accent) 10%,transparent),transparent)}
.storageStudioBody{display:grid;grid-template-columns:minmax(540px,1fr) 270px;gap:14px;min-height:0;padding:16px 18px 14px;overflow:auto}.storageStudioBody>main,.storageStudioBody>aside{min-width:0}.storageStudioFooter{display:flex;align-items:center;gap:22px;min-height:32px;padding:0 20px;border-top:1px solid #1d3445;color:#6f899a;background:#08111b;font-size:9px}.storageStudioFooter span:first-child{color:#a9bdc8}.storageStudioFooter i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#42e3af;box-shadow:0 0 8px #42e3af}.storageStudioFooter span:last-child{margin-left:auto;color:#91c7d8}
.storageTerminal{width:min(100%,calc(990px * var(--storage-scale)));margin:0 auto;border:1px solid color-mix(in srgb,var(--storage-accent) 32%,#243747);border-radius:12px;overflow:hidden;background:linear-gradient(150deg,color-mix(in srgb,var(--storage-surface) 97%,#172b3a),var(--storage-grid));box-shadow:0 22px 54px #0008,0 0 calc(20px * var(--storage-glow)) color-mix(in srgb,var(--storage-accent) 15%,transparent)}
.storageTerminalTop{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid #263b49;background:linear-gradient(100deg,color-mix(in srgb,var(--storage-surface) 90%,#1d3545),var(--storage-surface))}.storageTerminalTop>div:first-child{display:grid;gap:3px}.storageTerminalTop strong{font-size:21px}.storageTerminalTop small{color:#8da4b3}.storageNetworkName{font:700 9px ui-monospace,monospace;letter-spacing:.14em;color:var(--storage-accent)}
.storagePower{display:grid;grid-template-columns:auto auto;gap:3px 8px;align-items:end;font-size:9px;color:#849aa9}.storagePower b{font-size:12px;color:#dff8ff}.storagePower i{grid-column:1/-1;width:105px;height:4px;border-radius:9px;background:#263743;overflow:hidden}.storagePower em{display:block;width:84%;height:100%;background:var(--storage-accent);box-shadow:0 0 8px var(--storage-accent)}
.storageSearchRow{display:grid;grid-template-columns:minmax(210px,1fr) 150px auto;gap:8px;padding:12px 14px;border-bottom:1px solid #203441}.storageSearchRow label{display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid #2c4657;border-radius:7px;background:#07111b}.storageSearchRow label:focus-within{border-color:var(--storage-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--storage-accent) 12%,transparent)}.storageSearchRow input,.storageSearchRow select,.storageStyleControls select{width:100%;min-width:0;border:0;outline:0;color:#eaf7ff;background:transparent;font:11px Inter,"Segoe UI",sans-serif}.storageSearchRow select{padding:0 9px;border:1px solid #2c4657;border-radius:7px;background:#0b1722}
.storageResourceGrid{display:grid;grid-template-columns:repeat(var(--storage-columns),minmax(62px,1fr));gap:7px;padding:14px;min-height:335px;align-content:start;background-image:linear-gradient(#10233266 1px,transparent 1px),linear-gradient(90deg,#10233266 1px,transparent 1px);background-size:24px 24px}.storageResource{position:relative;display:grid;grid-template-rows:40px minmax(24px,auto) auto;place-items:center;gap:3px;min-width:0;min-height:89px;padding:8px 5px;border:1px solid #29404f;border-radius:7px;color:#d8e7ee;background:linear-gradient(145deg,#172431,#0a141e);font:10px Inter,"Segoe UI",sans-serif;cursor:pointer}.storageResource:hover{border-color:#527a91;transform:translateY(-1px)}.storageResource.selected{border-color:var(--storage-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--storage-accent) 40%,transparent),0 0 12px color-mix(in srgb,var(--storage-accent) 12%,transparent)}.storageResource b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.storageResource>span:last-of-type{color:#fff;font:700 10px ui-monospace,monospace}.storageResource small{max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#718997;font-size:7px;white-space:nowrap}.storageFavourite{position:absolute;top:4px;right:5px;color:#ffd66b;font-size:9px}
.storageItemIcon{display:grid;place-items:center;width:34px;height:34px;border:1px solid color-mix(in srgb,var(--item-colour) 60%,#fff);border-radius:5px;color:#071018;background:linear-gradient(135deg,color-mix(in srgb,var(--item-colour) 90%,#fff),color-mix(in srgb,var(--item-colour) 52%,#000));box-shadow:inset -4px -4px #0002,inset 3px 3px #fff4,0 0 10px color-mix(in srgb,var(--item-colour) 18%,transparent);font:800 13px ui-monospace,monospace;text-shadow:0 1px #fff5;image-rendering:pixelated}.storageStudio[data-density="compact"] .storageResource{min-height:72px;grid-template-rows:30px 16px auto}.storageStudio[data-density="compact"] .storageItemIcon{width:28px;height:28px}.storageStudio[data-density="large"] .storageResource{min-height:110px}.storageStudio[data-density="large"] .storageItemIcon{width:42px;height:42px;font-size:15px}
.storageTerminalStatus{display:flex;justify-content:space-between;gap:15px;padding:9px 15px;border-top:1px solid #243744;color:#698494;background:#09131d;font:8px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em}.storageOnline{color:#6aefbd;font:700 9px ui-monospace,monospace}
.storageInspector{position:sticky;top:0;display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid #263c4b;border-radius:12px;background:linear-gradient(160deg,#121f2c,#09131e);box-shadow:0 16px 36px #0005}.storageInspector h2{margin:2px 0 0;font-size:20px}.storageInspector>code{padding:7px;border-radius:5px;color:#81b8c9;background:#07111b;font-size:8px;overflow-wrap:anywhere}.storageSelectedIcon{display:grid;place-items:center;min-height:90px;margin:3px 0;background:radial-gradient(circle,color-mix(in srgb,var(--storage-accent) 12%,transparent),transparent 65%)}.storageSelectedIcon .storageItemIcon{width:54px;height:54px;font-size:18px}.storageInspector dl{display:grid;gap:1px;margin:4px 0 8px;border:1px solid #253846;border-radius:7px;overflow:hidden}.storageInspector dl div{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;background:#0a151f;font-size:9px}.storageInspector dt{color:#77909f}.storageInspector dd{margin:0;color:#d8e9f0;font-weight:700;text-align:right}.storageAsideHint,.storageInspector>p{color:#8199a8;font-size:10px;line-height:1.55}.storageEmpty{grid-column:1/-1;display:grid;place-items:center;min-height:220px;color:#849aa8}
.storageFluidList,.storageSecurityList,.storageDiagnosticList{display:grid;gap:7px;padding:14px}.storageFluidList article,.storageSecurityList article,.storageDiagnosticList article{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:11px 13px;border:1px solid #293e4b;border-radius:8px;background:#0b1621}.storageFluidList article>div,.storageSecurityList article>div,.storageDiagnosticList article>div{display:grid;gap:4px}.storageFluidList small,.storageSecurityList small,.storageDiagnosticList small{color:#78909f;font-size:9px}.storageFluidList strong,.storageSecurityList strong,.storageDiagnosticList strong{font-size:10px}.storageFluidIcon{display:grid;place-items:center;width:38px;height:38px;border-radius:50% 50% 48% 48%;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--fluid) 80%,#fff),var(--fluid));box-shadow:inset 0 -6px #0002,0 0 12px color-mix(in srgb,var(--fluid) 30%,transparent)}.storageFluidList i{display:block;width:100%;height:5px;border-radius:5px;background:#243440;overflow:hidden}.storageFluidList i em{display:block;height:100%;background:var(--fluid)}
.storageCraftBody{display:flex;align-items:center;justify-content:center;gap:28px;min-height:300px;padding:25px}.storageCraftGrid{display:grid;grid-template-columns:repeat(3,62px);gap:5px}.storageCraftGrid button,.storageCraftOutput{display:grid;place-items:center;width:62px;height:62px;border:1px solid #314957;border-radius:6px;background:#0b1722}.storageCraftOutput{width:84px;height:84px;color:#fff}.storageCraftOutput b{font-size:9px}.storageCraftArrow{font-size:30px;color:var(--storage-accent)}.storageCraftActions{display:flex;justify-content:center;gap:8px;padding:13px;border-top:1px solid #243744}
.storageUpgradeGrid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:8px;padding:14px}.storageUpgradeGrid article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;border:1px solid #2a404e;border-left:3px solid var(--upgrade);border-radius:8px;background:#0b1621}.storageUpgradeGrid article>span{color:var(--upgrade);font-size:20px}.storageUpgradeGrid article>div{display:grid;gap:4px}.storageUpgradeGrid small{color:#8097a6;font-size:9px}.storageUpgradeGrid em{color:#b8cbd4;font-size:9px;font-style:normal}.storageSecurityList article>span{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;color:#071018;background:var(--storage-accent);font-weight:800}
.storageDiagnosticList article>i{width:8px;height:8px;border-radius:50%;background:#6ce4b2;box-shadow:0 0 8px #6ce4b2}.storageDiagnosticList article>i.warning{background:#ffba63;box-shadow:0 0 8px #ffba63}.storageDiagnosticList article>strong{color:#6ce4b2}.storageDiagnosticList article:has(i.warning)>strong{color:#ffba63}
.storageStylePanel{display:grid;grid-template-columns:minmax(300px,1.1fr) minmax(280px,.9fr);gap:14px}.storageStylePreview,.storageStyleControls{border:1px solid #263c4b;border-radius:12px;background:linear-gradient(160deg,var(--storage-surface),var(--storage-grid))}.storageStylePreview{display:grid;place-items:center;align-content:center;min-height:500px;padding:25px;background-image:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--storage-accent) 18%,transparent),transparent 36%),linear-gradient(160deg,var(--storage-surface),var(--storage-grid))}.storageStylePreview>span{margin-top:35px;color:var(--storage-accent);font:700 9px ui-monospace,monospace;letter-spacing:.14em}.storageStylePreview>strong{margin-top:7px;font-size:20px}.storageStylePreview>small{margin-top:6px;color:#77909f}.storageArchitecture{position:relative;width:240px;height:200px;perspective:500px}.storageArchitecture b{position:absolute;left:85px;top:65px;width:70px;height:70px;border-radius:50%;background:#fff;box-shadow:0 0 calc(45px * var(--storage-glow)) var(--storage-accent),0 0 calc(90px * var(--storage-glow)) color-mix(in srgb,var(--storage-accent) 70%,transparent)}.storageArchitecture i{position:absolute;inset:25px;border:4px solid var(--storage-accent);border-radius:50%;box-shadow:0 0 calc(18px * var(--storage-glow)) var(--storage-accent);transform:rotateX(65deg)}.storageArchitecture i:nth-child(2){transform:rotateY(62deg) rotateZ(25deg)}.storageArchitecture i:nth-child(3){transform:rotateY(-58deg) rotateZ(-18deg)}.storageStudio[data-motion="true"] .storageArchitecture i:first-child{animation:storageRing 8s linear infinite}.storageStudio[data-motion="true"] .storageArchitecture i:nth-child(2){animation:storageRingB 11s linear infinite}.storageStudio[data-quality="low"] .storageArchitecture i:nth-child(3){display:none}@keyframes storageRing{to{transform:rotateX(65deg) rotateZ(360deg)}}@keyframes storageRingB{to{transform:rotateY(62deg) rotateZ(385deg)}}
.storageStyleControls{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px;align-content:start}.storageStyleControls label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;color:#9db0bb;font-size:10px}.storageStyleControls label>input[type="color"]{width:42px;height:30px;padding:2px;border:1px solid #355061;border-radius:5px;background:#08121c}.storageStyleControls label>input[type="range"]{grid-column:1/-1;width:100%;accent-color:var(--storage-accent)}.storageStyleControls label>select{grid-column:1/-1;padding:8px;border:1px solid #2f4858;border-radius:6px;background:#09141e}.storageStyleControls .storageCheck{grid-column:1/-1;display:flex}.storageStyleControls .storageCheck input{accent-color:var(--storage-accent)}.storageStyleButtons{grid-column:1/-1;display:flex;justify-content:flex-end;padding-top:4px}
@container(max-width:900px){.storageStudioHeader{align-items:flex-start;padding:18px}.storageStudioHeader p{display:none}.storageStudioBody{grid-template-columns:1fr}.storageStudioBody>aside{order:-1}.storageInspector{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}.storageInspector .storageAsideLabel,.storageInspector h2,.storageInspector>code,.storageInspector .storageSelectedIcon,.storageInspector .storageAsideHint{grid-column:1/-1}.storageInspector dl{grid-column:1/-1}.storageStylePanel{grid-template-columns:1fr}.storageResourceGrid{grid-template-columns:repeat(7,minmax(60px,1fr))}}
@container(max-width:620px){.storageStudioHeader{display:grid}.storageHeaderActions{justify-content:flex-start}.storageStudioTabs{padding:0 8px}.storageStudioTabs button{padding:0 12px}.storageStudioBody{padding:9px}.storageSearchRow{grid-template-columns:1fr 120px}.storageSearchRow>.btn{grid-column:1/-1}.storageResourceGrid{grid-template-columns:repeat(4,minmax(55px,1fr));padding:8px}.storageTerminalTop{padding:14px}.storagePower{display:none}.storageTerminalStatus{flex-wrap:wrap}.storageInspector{grid-template-columns:1fr}.storageUpgradeGrid{grid-template-columns:1fr}.storageFluidList article,.storageSecurityList article,.storageDiagnosticList article{grid-template-columns:auto minmax(0,1fr) auto}.storageFluidList article>.btn,.storageSecurityList article>.btn,.storageDiagnosticList article>.btn{grid-column:2/-1}.storageStyleControls{grid-template-columns:1fr}.storageStyleControls>*{grid-column:1/-1}.storageStudioFooter span:nth-child(2){display:none}}
@media(max-width:900px){.builderWorkspace{padding:22px 18px}.wbSaveBar{bottom:-24px}}
/* Modeling Studio: shared dock and nearest-neighbour PNG painting. */
#app .modelArea.studioDockLayout { grid-template-columns: var(--model-outliner,220px) minmax(160px,1fr) 310px; }
#app.panelModelOutlinerHidden .modelArea.studioDockLayout { grid-template-columns: 0 minmax(160px,1fr) 310px; }
#app .studioDockLayout > .modelStudioDock { display:block !important; grid-column:3; grid-row:1; width:auto; min-width:0; overflow:auto; background:var(--studio-surface, #101d2b); border-left:1px solid var(--studio-line, #2a4154); color:var(--studio-ink, #d5e3ec); padding:0; }
.modelStudioDock .msHeading {padding:18px 16px 12px;display:flex;align-items:center;gap:10px;}
.modelStudioDock .msHeading small {display:block;color:var(--studio-accent, #69d9ce);letter-spacing:1.6px;font-size:9px;margin-bottom:6px;}
.modelStudioDock .msHeading b {font-size:17px;color:var(--studio-accent, #f0f7fc);}
.modelStudioDock .msTabs {display:flex;gap:2px;padding:0 8px 10px;border-bottom:1px solid var(--studio-line, #2a4154);position:sticky;top:0;background:var(--studio-surface, #101d2b);z-index:4;}
.modelStudioDock button {border:1px solid var(--studio-line, #32495d);border-radius:7px;background:var(--studio-surface, #1a2a3b);color:var(--studio-ink, #dfeaf3);cursor:pointer;font:inherit;padding:8px 10px;line-height:1.25;min-height:32px;}
.modelStudioDock button:hover:not(:disabled) {background:var(--studio-surface, #294356);border-color:#72cfc8;}
.modelStudioDock button:disabled {opacity:.4;cursor:default;}
.modelStudioDock button:focus-visible,.modelStudioDock input:focus-visible,.modelStudioDock select:focus-visible {outline:2px solid #6be9d7;outline-offset:2px;}
.modelStudioDock .msTabs button {flex:1;border-color:transparent;background:transparent;padding:9px 3px;font-size:11px;font-weight:650;}
.modelStudioDock button[aria-pressed="true"],.modelStudioDock button.primary {border-color:#41978e;background:var(--studio-surface, #193c42);color:var(--studio-accent, #9cfff0);}
.modelStudioDock [data-ms-page] {padding:14px;}
.modelStudioDock [data-ms-page][hidden] {display:none!important;}
.modelStudioDock .msActions {display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 0 14px;}
.modelStudioDock label {display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--studio-muted, #aabfce);margin-bottom:10px;}
.modelStudioDock input:not([type="checkbox"]),.modelStudioDock select {box-sizing:border-box;width:100%;min-width:0;min-height:33px;background:var(--studio-surface, #0b1622);color:var(--studio-accent, #eef6fc);border:1px solid var(--studio-line, #32495d);border-radius:6px;padding:6px 8px;font:inherit;}
.modelStudioDock input[type="color"] {padding:3px;height:34px;}
.modelStudioDock fieldset {border:0;padding:0;margin:14px 0;min-width:0;}
.modelStudioDock legend {font-size:11px;font-weight:600;color:var(--studio-ink, #afc5d7);margin:0 0 7px;padding:0;}
.modelStudioDock h3 {font-size:13px;margin:18px 0 12px;}
.modelStudioDock .msVector {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.modelStudioDock .msVector label {font-size:10px;margin:0;}
.modelStudioDock .msEmpty,.modelStudioDock .msIntro {font-size:12px;line-height:1.6;color:var(--studio-muted, #aabfce);margin:0 0 14px;}
.modelStudioDock .msEmpty {border:1px dashed var(--studio-line, #32495d);padding:14px;border-radius:8px;}
.modelStudioDock .msEmpty p {margin-bottom:0;}
.modelStudioDock .msDetails {margin-top:18px;border-top:1px solid var(--studio-line, #2a4154);padding-top:12px;font-size:11px;}
.modelStudioDock summary {cursor:pointer;color:var(--studio-muted, #aabfce);}
.modelStudioDock .modelSourceCard {margin:10px 0;padding:10px;}
.modelStudioDock small {font-size:10px;line-height:1.6;color:var(--studio-muted, #93acbf);display:block;margin:8px 0;}
.modelStudioDock .geometryEditPanel,.modelStudioDock .gapFillerToolPanel {position:static;inset:auto;transform:none;width:auto;min-width:0;max-width:none;background:transparent;border:0;box-shadow:none;padding:0;margin:0;}
.modelStudioDock .geometryEditHead,.modelStudioDock .gapFillerToolHead {margin-bottom:12px;}
.modelStudioDock .geometryEditHead button,.modelStudioDock .gapFillerToolHead button {display:none;}
.modelStudioDock #gapFillerToolInfo {padding:12px;border:1px solid var(--studio-line, #33566b);border-radius:8px;background:var(--studio-surface, #0c1a28);line-height:1.6;font-size:12px;margin-bottom:12px;}
.modelStudioDock #gapFillerToolInfo p {margin:7px 0;}
.modelStudioDock .msPaintSettings {display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.modelStudioDock .msChecks {display:grid;grid-template-columns:1fr 1fr;gap:0 6px;}
.modelStudioDock .msChecks label {flex-direction:row;align-items:center;font-size:10px;}
.modelStudioDock #msPixelStatus {font:10px/1.5 monospace;color:var(--studio-accent, #80e3d5);margin:6px 0;}
.modelStudioDock .msCanvasScroll {overflow:auto;max-height:340px;min-height:140px;border:1px solid var(--studio-line, #32495d);border-radius:6px;margin-bottom:12px;background:repeating-conic-gradient(var(--studio-surface, #14202c) 0% 25%,var(--studio-surface, #263340) 0% 50%) 0 0 / 16px 16px;}
.modelStudioDock #msPixelCanvas {display:block;max-width:none;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;cursor:crosshair;}
.modelStudioDock .msPixelSheet {position:relative;width:max-content;}
.modelStudioDock .msPixelOverlay {position:absolute;inset:0;pointer-events:none;}
.modelStudioDock .msGrid .msPixelOverlay {background-image:linear-gradient(to right,rgba(190,215,225,.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(190,215,225,.18) 1px,transparent 1px);background-size:var(--pixel-zoom) var(--pixel-zoom);}
#app .studioDockLayout .modelSideResizeHandle {display:none!important;}
#app .modelArea.studioDockLayout.msCompact,#app.panelModelOutlinerHidden .modelArea.studioDockLayout.msCompact {grid-template-columns: minmax(0,1fr);grid-template-rows:minmax(240px,1fr) minmax(190px,42%);overflow:auto;}
#app .studioDockLayout.msCompact > .viewportWrap {grid-column:1!important;grid-row:1!important;min-width:0;min-height:240px;}
#app .studioDockLayout.msCompact > .modelStudioDock {grid-column:1!important;grid-row:2!important;border-left:0;border-top:1px solid var(--studio-line, #2a4154);}
#app .studioDockLayout.msCompact > .outliner,#app .studioDockLayout.msCompact .modelOutlinerResizeHandle {display:none!important;}
#app .studioDockLayout.msCompact .msHeading {padding:10px 14px 6px;}
#app .studioDockLayout.msCompact .msHeading b {font-size:14px;}
#app .studioDockLayout.msCompact .msHeading small {display:none;}
#app .studioDockLayout.msCompact .viewportCompass {transform:scale(.8);transform-origin:top right;}
#app .studioDockLayout.msCompact .minecraftSizeGuideHud {display:none;}
html[data-theme="light"] .modelStudioDock {filter: none;}

#app.panelModelSideHidden .modelArea.studioDockLayout > .modelSidePanel.modelStudioDock, #app.focusMode .modelArea.studioDockLayout > .modelSidePanel.modelStudioDock {display:block!important;}

/* Keep code-only actions out of the visual modeling workspace. */
#app .codeTools.hidden {display:none!important;}
#modelVisual[data-studio-mode="paint"] .transformHud,
#modelVisual[data-studio-mode="fill"] .transformHud,
#modelVisual[data-studio-mode="faces"] .transformHud {display:none;}
#modelVisual.studioDockLayout .viewOverlay .pill[title*="Blockbench"] {display:none;}

/* Reference guides share the Modeling Studio dock and viewport. */
.modelStudioDock .msTabs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;}
.modelStudioDock [data-ms-page="reference"] > label {display:grid;grid-template-columns:1fr auto;gap:6px;margin:14px 0;}
.modelStudioDock [data-ms-page="reference"] input[type="range"] {grid-column:1 / -1;width:100%;padding:0;accent-color:#61dfd0;}
.modelStudioDock [data-ms-page="reference"] .msVector {grid-template-columns:1fr 1fr;}
#msRefStatus {font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere;}
.msReferenceBoard {position:absolute;transform:translate(-50%,-50%);z-index:3;pointer-events:none;overflow:hidden;}
.msReferenceBoard[hidden] {display:none;}
.msReferenceBoard img,.msReferenceBoard canvas {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.msReferenceBoard img {user-select:none;pointer-events:none;}
.msReferenceBoard canvas {pointer-events:none;touch-action:none;}
.msReferenceBoard[data-tool="sketch"] {outline:1px dashed #ffb34d80;}
.msReferenceBoard[data-tool="position"] {outline:1px dashed #61dfd0;}
.msReferenceBoard[data-tool="sketch"] canvas {pointer-events:auto;cursor:crosshair;}
.msReferenceBoard[data-tool="position"] canvas {pointer-events:auto;cursor:move;}
.msRefTools {margin:14px 0;}

/* Shared theme roles for all Studios chrome; author-created assets retain their colours. */
:root { --canvas:var(--bg); --accent:var(--cyan); --border:var(--line); }
html[data-theme="light"] {
  --studio-surface:#fff; --studio-wash:rgba(35,61,91,.045); --studio-ink:#24324a;
  --studio-muted:#53667e; --studio-line:rgba(42,62,91,.19); --studio-accent:#087d89;
  --studio-good:#13744f; --studio-warn:#8c5700; --studio-bad:#b42a44;
  --studio-violet:#7043ad; --studio-pink:#a83089;
}
html[data-theme="light"] .builderWorkspace {--wb-mint:#087d79;--wb-muted:#53667e;--wb-line:#cbd7e3;}
html[data-theme="light"] .wbHero {background:linear-gradient(130deg,#e3f3ef,#edf0fa);}
html[data-theme="light"] :is(.modelStudioDock,.builderWorkspace,.ilUiStudio) :is(input,select,textarea) {color:var(--text);}
html[data-theme="light"] .modelStudioDock button[aria-pressed="true"] {background:#dcefeb;color:#145d59;}
html[data-theme="light"] :is(.msHint,.wbNotice,.creatureNote) {background:#eaf1f7;color:var(--text);}
html[data-theme="light"] :is(.customSelectButton,.customSelectList) {background:var(--panel);color:var(--text);}

/* Server dashboard and release review use the same semantic theme from day one. */
#app.minecraftServerActive [data-resize-panel] {display:none!important;}
.minecraftServerPage {container-type:inline-size;background:var(--bg2);}
.minecraftServerPageHeader {align-items:center;margin-bottom:24px;}
.minecraftServerPageHeader h2 {font-size:32px;}
.minecraftServerPageHeader p {max-width:620px;}
.minecraftServerTabs {border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:0 0 10px;gap:8px;}
.minecraftServerTabs button {font-weight:600;font-size:13px;}
.minecraftServerPageBody {gap:22px;}
.serverDashboard {display:grid;gap:22px;}
.serverConnectCard {display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px;border:1px solid var(--line2);border-radius:14px;background:linear-gradient(115deg,color-mix(in srgb,var(--cyan) 8%,var(--panel)),var(--panel));}
.serverConnectCard h3 {font-size:24px;letter-spacing:-.6px;margin:8px 0;overflow-wrap:anywhere;}
.serverConnectCard p {font-size:13px;line-height:1.6;color:var(--muted);margin:0;max-width:540px;}
.serverSummaryGrid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.serverSummaryGrid article {min-width:0;display:grid;gap:10px;border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--panel);}
.serverSummaryGrid :is(span,small) {font-size:12px;color:var(--muted);}
.serverSummaryGrid b {font-size:20px;overflow-wrap:anywhere;}
.serverDashboardColumns {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:20px;}
.serverDashboardColumns>* {min-width:0;}
.serverConsolePreview {height:260px;min-height:0;overflow:auto;font-size:11px;}
.serverShortcuts {padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);}
.serverShortcuts h3 {font-size:16px;margin:0 0 14px;}
.serverShortcuts button {width:100%;display:flex;gap:12px;align-items:center;border:0;border-top:1px solid var(--line);padding:15px 0;color:var(--text);text-align:left;background:transparent;cursor:pointer;}
.serverShortcuts button>span {font-size:20px;color:var(--cyan);}
.serverShortcuts button>div {flex:1;}
.serverShortcuts button small {display:block;color:var(--muted);font-size:11px;margin-top:5px;line-height:1.5;}
.serverShortcuts button:hover {color:var(--cyan);}
.serverHardware {border:1px solid var(--line);border-radius:12px;background:var(--panel);}
.serverHardware>summary {cursor:pointer;padding:18px;font-size:13px;font-weight:600;}
.serverHardware .minecraftServerResourceSection {border:0;}
.minecraftServerSettingsGrid {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.minecraftServerSettingsCard {padding:24px;}
.minecraftServerNetworkNote {line-height:1.65;}
@container (max-width:850px) {
  .serverDashboardColumns {grid-template-columns:1fr;}
  .serverSummaryGrid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .serverConnectCard {align-items:flex-start;flex-direction:column;}
}
@container (max-width:520px) {
  .minecraftServerPageHeader {display:block;}
  .minecraftServerPageState {justify-items:start;margin-top:14px;}
  .minecraftServerSettingsGrid,.minecraftServerStatusStrip {grid-template-columns:1fr;}
  .serverConnectCard {padding:18px;}
  .serverConnectCard h3 {font-size:19px;}
}
.modal:has(.gitReview),.modalCard:has(.gitReview) {width:min(1040px,calc(100vw - 32px));}
.gitReview {font-size:13px;line-height:1.6;color:var(--text);}
.gitReviewBanner {padding:20px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);}
.gitReview h3 {font-size:22px;margin:12px 0 6px;}
.gitReviewBanner p {margin:0;color:var(--muted);}
.gitReviewNotice {padding:12px 16px;border-left:3px solid var(--cyan);background:var(--panel2);}
.gitReviewFilters {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0;}
.gitReviewFilters label {display:grid;gap:7px;min-width:0;}
.gitReviewFilters label:last-child {grid-column:1/-1;}
.gitReviewActions,.gitReviewPager {display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0;}
.gitReviewActions span,.gitReviewPager span {margin-left:auto;color:var(--muted);font-size:12px;}
.gitReviewFiles {max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel);}
.gitReviewRow {display:flex;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12px;}
.gitReviewRow>span:not(.gitChange) {flex:1;min-width:0;overflow-wrap:anywhere;}
.gitReviewRow small {display:block;color:var(--muted);font:10px/1.5 monospace;overflow-wrap:anywhere;}
.gitChange {min-width:82px;font-size:10px;color:var(--cyan);}
.gitReviewExclusions {margin:18px 0;color:var(--muted);}
.gitReviewExclusions summary {cursor:pointer;color:var(--text);}
@media(max-width:600px) {.gitReviewFilters{grid-template-columns:1fr}.gitReviewRow{gap:7px}.gitChange{min-width:0}}
.storageRuntimeBadge{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #2b4555;border-radius:999px;color:#a9bdc8;background:#08131d;font:700 9px ui-monospace,monospace;white-space:nowrap}.storageRuntimeBadge i{width:7px;height:7px;border-radius:50%;background:#778b98;box-shadow:0 0 8px #778b98}.storageRuntimeBadge.live{color:#9af1cf;border-color:#26795f}.storageRuntimeBadge.live i{background:#42e3af;box-shadow:0 0 8px #42e3af}.storageRuntimeBadge.stale{color:#f2ce7a;border-color:#765d27}.storageRuntimeBadge.stale i{background:#f3b64b;box-shadow:0 0 8px #f3b64b}.storageRuntimeBadge.demo{color:#c4b5ff;border-color:#5d4b9b}.storageRuntimeBadge.demo i{background:#9d7aff;box-shadow:0 0 8px #9d7aff}.storageNetworkSelect{max-width:210px;height:31px;border:1px solid #2b4555;border-radius:6px;padding:0 9px;color:#d9edf5;background:#08131d;font-size:10px}.storageEmptyRuntime{display:grid;place-items:center;align-content:center;gap:12px;min-height:460px;padding:50px;text-align:center}.storageEmptyRuntime h2{margin:0;font-size:22px}.storageEmptyRuntime p{max-width:560px;margin:0;color:#86a0af;line-height:1.55}.storageEmptyRuntime>div{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.storageRuntimeGlyph{display:grid;place-items:center;width:58px;height:58px;border:1px solid color-mix(in srgb,var(--storage-accent) 55%,#263c4b);border-radius:18px;color:var(--storage-accent);background:color-mix(in srgb,var(--storage-accent) 9%,#09131e);font-size:25px;box-shadow:0 0 28px color-mix(in srgb,var(--storage-accent) 12%,transparent)}

/* Studios Home uses the same semantic theme tokens and controls as the editor. */
#welcome.studioHome{background:var(--bg2);color:var(--studio-ink,var(--text));padding:24px clamp(16px,3vw,36px) 40px;container-type:inline-size;color-scheme:inherit;font:inherit;}
#welcome.studioHome::before{display:none}
.studioHome .dashboardShell{width:min(1280px,100%);padding:0;text-align:left}
.studioHome [hidden]{display:none!important}
.studioHome h1,.studioHome h2,.studioHome h3{font-family:inherit;color:var(--studio-ink,var(--text));letter-spacing:normal}
.studioHome h1{font-size:24px;line-height:1.3;font-weight:650;margin:0 0 6px}
.studioHome h2{font-size:18px;line-height:1.4;font-weight:650;margin:0}
.studioHome h3{font-size:15px;line-height:1.4;font-weight:600;margin:0 0 5px}
.studioHome .dashboardHeader{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.studioHome .dashboardHeader p{margin:0;color:var(--studio-muted,var(--muted));font-size:13px;line-height:1.5}
.studioHome .dashboardProject{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;padding:18px 20px;border:1px solid var(--studio-line,var(--line));border-radius:var(--radius);background:var(--studio-wash,var(--panel2));margin-bottom:20px}
.studioHome .dashboardProjectIdentity{display:grid;gap:5px;min-width:0;flex:1 1 190px}
.studioHome .dashboardProjectIdentity strong{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.studioHome .dashboardShortcuts{display:flex;gap:8px;flex-wrap:wrap}
.studioHome .btn{font-family:inherit;font-size:14px;white-space:normal}
.studioHome .btn:disabled{opacity:.5;cursor:not-allowed}
.studioHome button:focus-visible,.studioHome summary:focus-visible{outline:2px solid var(--studio-accent,var(--cyan));outline-offset:3px}
.studioHome .dashboardColumns{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr);gap:18px;align-items:start}
.studioHome .dashboardMainColumn,.studioHome .dashboardSidebar{display:grid;gap:18px;min-width:0}
.studioHome .dashboardPanel{padding:20px;border:1px solid var(--studio-line,var(--line));border-radius:var(--radius);background:var(--studio-surface,var(--panel));min-width:0}
.studioHome .dashboardSectionHeading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.studioHome .dashboardSectionHeading>span{font-size:12px;color:var(--studio-muted,var(--muted))}
.studioHome .dashboardFilters{display:flex;gap:5px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--studio-line,var(--line))}
.studioHome .dashboardFilters .btn{min-height:30px;padding:4px 10px;background:transparent;border-color:transparent;color:var(--studio-muted,var(--muted))}
.studioHome .dashboardFilters .btn[aria-pressed="true"]{color:var(--studio-accent,var(--cyan));border-color:var(--studio-line,var(--line));background:var(--studio-wash,rgba(120,244,237,.07))}
.studioHome .dashboardFeature{padding:16px 0;border-bottom:1px solid var(--studio-line,var(--line));display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:start}
.studioHome .dashboardFeature:last-child{border-bottom:0;padding-bottom:0}
.studioHome .dashboardFeatureMeta{grid-column:1/-1;display:flex;gap:9px;flex-wrap:wrap;color:var(--studio-muted,var(--muted));font-size:12px;line-height:1.5;margin-bottom:6px}
.studioHome .dashboardFeatureMeta span:first-child{color:var(--studio-accent,var(--cyan));font-weight:600}
.studioHome .dashboardFeature h3{grid-column:1;grid-row:2}
.studioHome .dashboardFeature>p{grid-column:1;grid-row:3;font-size:14px;line-height:1.6;margin:0;color:var(--studio-muted,var(--muted))}
.studioHome .dashboardFeature>.btn{grid-column:2;grid-row:2/4;align-self:center;max-width:150px}
.studioHome .dashboardFeatureDetail{grid-column:1/-1;margin-top:8px;color:var(--studio-muted,var(--muted));font-size:12px;line-height:1.6}
.studioHome summary{cursor:pointer;line-height:1.7}
.studioHome summary:hover{color:var(--studio-accent,var(--cyan))}
.studioHome .dashboardFeatureDetail p{margin:6px 0 0}
.studioHome .dashboardFocusRow{padding:12px 0;border-top:1px solid var(--studio-line,var(--line));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
.studioHome .dashboardFocusRow:first-child{padding-top:0;border-top:0}
.studioHome .dashboardFocusRow h3{grid-column:1;grid-row:1;margin:0;font-size:13px}
.studioHome .dashboardFocusRow p{grid-column:1/-1;font-size:14px;line-height:1.5;margin:0;color:var(--studio-muted,var(--muted))}
.studioHome .dashboardState{grid-column:2;grid-row:1;font-size:12px;line-height:1.5;border:1px solid var(--studio-line,var(--line));border-radius:5px;padding:2px 6px;color:var(--studio-muted,var(--muted));align-self:start;white-space:nowrap}
.studioHome .dashboardState[data-state="In progress"]{color:var(--studio-accent,var(--cyan))}
.studioHome .dashboardState[data-state="Next"]{color:var(--studio-violet,var(--violet))}
.studioHome .dashboardDocNumber{display:flex;align-items:center;gap:12px;margin:8px 0 14px}
.studioHome .dashboardDocNumber strong{font-size:32px;line-height:1.1;font-weight:650;font-variant-numeric:tabular-nums;color:var(--studio-accent,var(--cyan))}
.studioHome .dashboardDocNumber span{font-size:12px;line-height:1.5;color:var(--studio-muted,var(--muted))}
.studioHome progress{display:block;width:100%;height:6px;border:0;border-radius:5px;overflow:hidden;background:var(--studio-line,var(--line));accent-color:var(--studio-accent,var(--cyan))}
.studioHome progress::-webkit-progress-bar{background:var(--studio-line,var(--line))}
.studioHome progress::-webkit-progress-value{background:var(--studio-accent,var(--cyan))}
.studioHome progress::-moz-progress-bar{background:var(--studio-accent,var(--cyan))}
.studioHome .dashboardCaption{font-size:12px;line-height:1.6;color:var(--studio-muted,var(--muted));margin:8px 0 12px}
.studioHome .dashboardProjectIdentity .dashboardCaption{margin:0}
.studioHome .dashboardDocShelf{display:flex;gap:20px;font-size:12px;color:var(--studio-muted,var(--muted));padding:10px 0 14px}
.studioHome .dashboardDocShelf b{color:var(--studio-ink,var(--text));font-weight:600}
.studioHome .dashboardDocDetails{font-size:12px;border-top:1px solid var(--studio-line,var(--line));padding-top:10px}
.studioHome .dashboardDocQueue{list-style:none;padding:0;margin:8px 0}
.studioHome .dashboardDocQueue li{display:grid;grid-template-columns:12px 1fr;gap:2px 7px;font-size:12px;margin:10px 0}
.studioHome .dashboardDocQueue small{grid-column:2;font-size:12px;color:var(--studio-muted,var(--muted))}
.studioHome .dashboardNotice{padding:12px;border:1px solid var(--studio-line,var(--line));border-radius:9px;margin-bottom:18px;font-size:12px;color:var(--studio-muted,var(--muted))}
.studioHome .dashboardEmpty{font-size:12px;line-height:1.5;color:var(--studio-muted,var(--muted));padding:12px 0}
.studioHome .homeRecentBuildRows{min-width:0}
.studioHome .homeRecentBuildRow{flex-wrap:wrap;min-width:0}
.studioHome .homeRecentBuildIdentity,.studioHome .homeRecentBuildEvidence{min-width:0;overflow-wrap:anywhere}
.studioHome .dashboardFooter{text-align:right;margin-top:18px;font-size:12px;color:var(--studio-muted,var(--muted))}
@container (max-width:900px){.studioHome .dashboardColumns{grid-template-columns:minmax(0,1fr)}.studioHome .dashboardSidebar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:600px){.studioHome .dashboardSidebar{grid-template-columns:minmax(0,1fr)}.studioHome .dashboardHeader{align-items:flex-start}.studioHome h1{font-size:21px}.studioHome .dashboardPanel{padding:16px}.studioHome .dashboardFeature{grid-template-columns:minmax(0,1fr)}.studioHome .dashboardFeature>.btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:10px;max-width:none}.studioHome .dashboardFeatureDetail{grid-row:4}}
@media(prefers-reduced-motion:reduce){#welcome.studioHome{scroll-behavior:auto}}

.studioHome .homeEyebrow{font-size:12px;line-height:1.6;letter-spacing:.09em;font-weight:600;color:var(--studio-muted,var(--muted))}
.studioHome .homeEyebrow>span{margin:0 10px;opacity:.5}
.studioHome .dashboardHeader{margin-bottom:16px}
.studioHome .homeLibraryHero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 28px;padding:32px 32px 0;margin-bottom:18px;border:1px solid color-mix(in srgb,var(--studio-accent,var(--cyan)) 30%,var(--studio-line,var(--line)));border-radius:16px;background:radial-gradient(ellipse at 88% 20%,color-mix(in srgb,var(--studio-violet,var(--violet)) 14%,transparent),transparent 55%),radial-gradient(ellipse at 3% 10%,color-mix(in srgb,var(--studio-accent,var(--cyan)) 10%,transparent),transparent 58%),var(--studio-surface,var(--panel));overflow:hidden}
.studioHome .homeLibraryHero::before{content:"";position:absolute;inset:0 15% auto;height:2px;background:linear-gradient(90deg,transparent,var(--studio-accent,var(--cyan)),var(--studio-violet,var(--violet)),transparent)}
.studioHome .homeLibraryIntro{padding-bottom:30px;max-width:580px}
.studioHome .homeHeroLabel{font-size:13px;line-height:1.5;font-weight:600;color:var(--studio-accent,var(--cyan));display:flex;gap:8px;align-items:center;margin-bottom:16px}
.studioHome .homeLibraryIntro h1{font-size:clamp(32px,4.1cqi,52px);font-weight:750;letter-spacing:-.045em;line-height:1.1;margin:0 0 18px}
.studioHome .homeLibraryIntro h1>span{color:var(--studio-accent,var(--cyan));background:linear-gradient(105deg,var(--studio-accent,var(--cyan)) 12%,var(--studio-violet,var(--violet)) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.studioHome .homeLibraryIntro p{font-size:16px;line-height:1.65;color:var(--studio-muted,var(--muted));margin:0 0 16px;max-width:52ch}
.studioHome .homeHeroLink{display:inline-flex;align-items:center;gap:16px;text-decoration:none;color:var(--studio-accent,var(--cyan));font-size:14px;font-weight:650;padding:4px 0;border-bottom:1px solid var(--studio-line,var(--line))}
.studioHome .homeHeroLink:focus-visible{outline:2px solid var(--studio-accent,var(--cyan));outline-offset:4px}
.studioHome .homeSourceFlow{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;min-width:0;padding:0 0 28px}
.studioHome .homeFlowSource{display:flex;align-items:center;gap:13px;padding:12px 20px;border:1px solid var(--studio-line,var(--line));border-radius:10px;background:var(--studio-wash,rgba(10,17,35,.5))}
.studioHome .homeFlowSource>span{font:20px ui-monospace,monospace;color:var(--studio-violet,var(--violet))}
.studioHome .homeSourceFlow strong{display:block;font-size:15px;font-weight:650;color:var(--studio-ink,var(--text))}
.studioHome .homeSourceFlow small{display:block;font-size:12px;color:var(--studio-muted,var(--muted));margin-top:3px}
.studioHome .homeFlowStem{width:1px;height:22px;background:linear-gradient(var(--studio-violet,var(--violet)),var(--studio-accent,var(--cyan)))}
.studioHome .homeFlowLibrary{display:flex;align-items:center;gap:14px;padding:17px 24px;position:relative;border:1px solid color-mix(in srgb,var(--studio-accent,var(--cyan)) 55%,transparent);border-radius:12px;background:color-mix(in srgb,var(--studio-accent,var(--cyan)) 7%,var(--studio-surface,var(--panel)));box-shadow:0 0 38px color-mix(in srgb,var(--studio-accent,var(--cyan)) 7%,transparent)}
.studioHome .homeFlowMonogram{display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;font-size:22px;font-weight:800;letter-spacing:-1px;border-radius:10px;border:1px solid color-mix(in srgb,var(--studio-accent,var(--cyan)) 35%,transparent);color:var(--studio-accent,var(--cyan));background:color-mix(in srgb,var(--studio-accent,var(--cyan)) 10%,transparent)}
.studioHome .homeFlowBranches{height:30px;width:69%;border-top:1px solid var(--studio-line,var(--line));display:flex;justify-content:space-between;margin-top:20px;position:relative}
.studioHome .homeFlowBranches::before{content:"";position:absolute;left:50%;bottom:100%;height:20px;border-left:1px solid var(--studio-line,var(--line))}
.studioHome .homeFlowBranches span{height:100%;border-left:1px solid var(--studio-line,var(--line))}
.studioHome .homeFlowOutputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.studioHome .homeFlowOutputs span{text-align:center;display:grid;place-items:center;padding:10px 6px;border:1px solid var(--studio-line,var(--line));border-radius:8px;color:var(--studio-muted,var(--muted));font-size:12px;background:var(--studio-wash,rgba(8,12,24,.4))}
.studioHome .homeLibraryStats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 -32px;border-top:1px solid var(--studio-line,var(--line));background:var(--studio-wash,rgba(7,12,25,.28))}
.studioHome .homeLibraryStat{padding:23px 26px;border-right:1px solid var(--studio-line,var(--line));min-width:0;display:flex;flex-direction:column;gap:5px}
.studioHome .homeLibraryStat:last-child{border-right:0}
.studioHome .homeLibraryStat strong{font-size:clamp(32px,3.6cqi,46px);font-weight:700;line-height:1.1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--studio-accent,var(--cyan));margin-bottom:4px}
.studioHome .homeLibraryStat:nth-child(2) strong{color:var(--studio-violet,var(--violet))}
.studioHome .homeLibraryStat:nth-child(3) strong{color:var(--studio-good,var(--good))}
.studioHome .homeLibraryStat:nth-child(4) strong{color:var(--studio-pink,var(--pink))}
.studioHome .homeLibraryStat>span{font-size:14px;line-height:1.4;font-weight:600}
.studioHome .homeLibraryStat small{font-size:12px;line-height:1.5;color:var(--studio-muted,var(--muted))}
.studioHome .homeOverviewGrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start;margin-bottom:22px}
.studioHome .homeCompatibilityPanel{border-color:color-mix(in srgb,var(--studio-accent,var(--cyan)) 22%,var(--studio-line,var(--line)))}
.studioHome .homeCompatibilityPanel h2{font-size:24px;letter-spacing:-.025em;margin:7px 0 0}
.studioHome .homeSourceBadge{font-size:12px;color:var(--studio-accent,var(--cyan));border:1px solid var(--studio-line,var(--line));border-radius:6px;padding:5px 8px}
.studioHome .homeTargetControl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 20px;flex-wrap:wrap}
.studioHome .homeTargetControl label{font-size:14px;color:var(--studio-muted,var(--muted))}
.studioHome .homeTargetControl select{font:inherit;font-size:14px;color:var(--studio-ink,var(--text));background:var(--studio-surface,var(--panel2));border:1px solid var(--studio-line,var(--line));border-radius:8px;padding:9px 32px 9px 12px;max-width:100%;min-width:190px;cursor:pointer}
.studioHome .homeTargetControl select:focus-visible{outline:2px solid var(--studio-accent,var(--cyan));outline-offset:2px}
.studioHome .homeCoverageNumbers{display:flex;gap:20px;align-items:flex-end;margin:0 0 18px;flex-wrap:wrap}
.studioHome .homeCoverageNumbers>div:first-child{flex:1}
.studioHome .homeCoverageNumbers strong{display:block;font-size:36px;line-height:1.2;font-weight:650;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--studio-accent,var(--cyan))}
.studioHome .homeCoverageNumbers>div+div strong{color:var(--studio-muted,var(--muted));font-size:26px}
.studioHome .homeCoverageNumbers span{display:block;font-size:13px;margin-top:5px;color:var(--studio-muted,var(--muted))}
.studioHome .homeCoverageBar{display:flex;gap:2px;height:12px;overflow:hidden;border-radius:6px;background:var(--studio-line,var(--line))}
.studioHome .homeCoverageBar>span{flex-basis:0;min-width:1px}
.studioHome .coverage-native{background:var(--studio-accent,var(--cyan))}
.studioHome .coverage-adapted{background:var(--studio-violet,var(--violet))}
.studioHome .coverage-generated{background:var(--studio-good,var(--good))}
.studioHome .coverage-emulated{background:var(--studio-pink,var(--pink))}
.studioHome .coverage-unresolved{background:var(--studio-warn,var(--warn))}
.studioHome .coverage-undeclared{background:var(--studio-muted,var(--muted))}
.studioHome .homeCoverageCaption{font-size:13px;line-height:1.6;color:var(--studio-muted,var(--muted));margin:10px 0 18px}
.studioHome .homeCoverageCaption strong{color:var(--studio-ink,var(--text))}
.studioHome .homeCoverageLegend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;padding:16px 0;border-top:1px solid var(--studio-line,var(--line));border-bottom:1px solid var(--studio-line,var(--line))}
.studioHome .homeCoverageLegend>span{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--studio-muted,var(--muted));min-width:0}
.studioHome .homeCoverageLegend i{height:8px;width:8px;flex:0 0 8px;border-radius:2px}
.studioHome .homeCoverageLegend b{margin-left:auto;color:var(--studio-ink,var(--text));font-variant-numeric:tabular-nums;font-weight:600}
.studioHome .homeDomainDetails{font-size:14px;margin:15px 0}
.studioHome .homeDomainRows{display:grid;gap:12px;padding-top:15px}
.studioHome .homeDomainRow{display:grid;grid-template-columns:140px minmax(30px,1fr) 90px;align-items:center;gap:14px;font-size:12px}
.studioHome .homeDomainRow b{font-size:12px;text-align:right;font-weight:500;font-variant-numeric:tabular-nums;color:var(--studio-muted,var(--muted))}
.studioHome .homeEvidenceNote{margin-bottom:0}
.studioHome .homeBenefits{background:linear-gradient(150deg,color-mix(in srgb,var(--studio-violet,var(--violet)) 7%,transparent),transparent 70%),var(--studio-surface,var(--panel))}
.studioHome .homeBenefits>h2{font-size:28px;letter-spacing:-.03em;line-height:1.2;margin:9px 0 24px}
.studioHome .homeBenefit{display:flex;align-items:flex-start;gap:13px;margin:0 0 20px}
.studioHome .homeBenefitMark{font:12px ui-monospace,monospace;color:var(--studio-violet,var(--violet));border:1px solid var(--studio-line,var(--line));background:var(--studio-wash,rgba(255,255,255,.025));width:29px;height:29px;flex-shrink:0;display:grid;place-items:center;border-radius:7px}
.studioHome .homeBenefit h3{font-size:15px;margin:2px 0 6px}
.studioHome .homeBenefit p{font-size:14px;line-height:1.6;color:var(--studio-muted,var(--muted));margin:0}
.studioHome .homeComparison{font-size:14px;border-top:1px solid var(--studio-line,var(--line));padding-top:14px}
.studioHome .homeComparisonTable{max-width:100%;overflow-x:auto;margin-top:12px}
.studioHome .homeComparison table{border-collapse:collapse;width:100%;min-width:310px;font-size:12px;line-height:1.6;text-align:left}
.studioHome .homeComparison td,.studioHome .homeComparison th{vertical-align:top;padding:10px 8px;border-bottom:1px solid var(--studio-line,var(--line));color:var(--studio-muted,var(--muted));font-weight:400}
.studioHome .homeComparison th{font-weight:600;color:var(--studio-ink,var(--text))}
.studioHome .homeComparison td:last-child,.studioHome .homeComparison thead th:last-child{color:var(--studio-accent,var(--cyan));background:var(--studio-wash,rgba(120,244,237,.025))}
@container (max-width:1000px){.studioHome .homeOverviewGrid{grid-template-columns:minmax(0,1fr)}.studioHome .homeBenefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px}.studioHome .homeBenefits>.homeEyebrow,.studioHome .homeBenefits>h2,.studioHome .homeComparison{grid-column:1/-1}.studioHome .homeBenefits>h2 br{display:none}.studioHome .homeBenefit{display:block}.studioHome .homeBenefitMark{margin-bottom:10px}}
@container (max-width:760px){.studioHome .homeLibraryHero{grid-template-columns:minmax(0,1fr);padding:26px 24px 0}.studioHome .homeSourceFlow{display:none}.studioHome .homeLibraryStats{margin:0 -24px}.studioHome .homeLibraryStat{padding:20px 16px}.studioHome .homeLibraryIntro{max-width:100%}.studioHome .homeLibraryIntro h1{font-size:40px}.studioHome .homeLibraryIntro p{max-width:100%}}
@container (max-width:600px){.studioHome .homeLibraryStats{grid-template-columns:repeat(2,minmax(0,1fr))}.studioHome .homeLibraryStat:nth-child(2){border-right:0}.studioHome .homeLibraryStat:nth-child(n+3){border-top:1px solid var(--studio-line,var(--line))}.studioHome .homeBenefits{display:block}.studioHome .homeBenefit{display:flex}.studioHome .homeCoverageLegend{column-gap:12px}.studioHome .homeDomainRow{grid-template-columns:minmax(90px,1fr) minmax(30px,1fr) 80px;gap:10px}.studioHome .dashboardShortcuts{width:100%}.studioHome .dashboardShortcuts .btn{flex:1 1 auto}.studioHome .homeEyebrow{letter-spacing:.035em}}
@container (max-width:360px){.studioHome .homeLibraryIntro h1{font-size:32px}.studioHome .homeCoverageLegend{grid-template-columns:1fr}.studioHome .homeDomainRow{grid-template-columns:minmax(0,1fr) 80px}.studioHome .homeDomainRow progress{grid-column:1;grid-row:2}.studioHome .homeDomainRow b{grid-column:2;grid-row:1/3}.studioHome .homeTargetControl select{width:100%;min-width:0}}
@media(forced-colors:active){.studioHome .homeLibraryIntro h1>span{-webkit-text-fill-color:currentColor;background:none}.studioHome .homeCoverageBar>span,.studioHome .homeCoverageLegend i{border:1px solid CanvasText}}

/* Live progress for verified full-editor exports. */
.editorExportProgressFill.indeterminate {
  width: 34%;
  animation: editorExportProgressSweep 1.05s ease-in-out infinite alternate;
}
@keyframes editorExportProgressSweep {
  from { transform: translateX(-10%); }
  to { transform: translateX(195%); }
}

/* Version Farm 2026 target-first control room. */
.vfShell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding-bottom: 8px;
}
.vfHero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 270px);
  gap: 20px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--studio-accent, #78f4ed) 28%, var(--line));
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 15%, color-mix(in srgb, var(--studio-violet, #b777ff) 18%, transparent), transparent 37%),
    radial-gradient(circle at 7% 4%, color-mix(in srgb, var(--studio-accent, #78f4ed) 12%, transparent), transparent 42%),
    linear-gradient(145deg, var(--studio-surface, #0d1527), var(--studio-surface, #090f1d));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .16);
}
.vfHero::before {
  content: "";
  position: absolute;
  inset: 0 18% auto;
  z-index: -1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--studio-accent, #78f4ed), var(--studio-violet, #b777ff), transparent);
  opacity: .8;
}
.vfHeroCopy { min-width: 0; }
.vfHeroCopy h2 {
  margin: 6px 0 8px;
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.vfHeroCopy > p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.vfFlowStrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 10px;
}
.vfFlowStrip > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.07));
  border-radius: 8px;
  background: var(--studio-wash, rgba(0,0,0,.18));
}
.vfFlowStrip b { color: var(--cyan); font: 800 9px ui-monospace, monospace; }
.vfFlowStrip i { color: color-mix(in srgb, var(--cyan) 70%, var(--muted)); font-style: normal; }
.vfHeroChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
}
.vfHeroChips > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.07));
  border-radius: 999px;
  background: var(--studio-wash, rgba(0,0,0,.2));
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .02em;
}
.vfHeroChips > span b { color: var(--studio-ink, var(--text)); font-size: 10px; }
.vfHeroChips > span.good { border-color: rgba(120,244,173,.24); }
.vfHeroChips > span.good b { color: var(--good); }
.vfHeroChips > span.blocked { border-color: rgba(255,122,145,.25); }
.vfHeroChips > span.blocked b { color: var(--bad); }
.vfHeroStatus {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.065));
  border-radius: 13px;
  background: color-mix(in srgb, var(--studio-wash, rgba(0,0,0,.2)) 86%, transparent);
}
.vfHeroStatus > b {
  display: block;
  margin-top: 11px;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.35;
}
.vfHeroStatus > small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }

.vfModeTabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.06));
  border-radius: 13px;
  background: var(--studio-wash, rgba(0,0,0,.17));
}
.vfModeTabs > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 10px;
  min-width: 0;
  min-height: 64px;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--studio-ink, var(--text));
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.vfModeTabs > button:hover { border-color: rgba(120,244,237,.17); background: rgba(120,244,237,.035); }
.vfModeTabs > button.active {
  border-color: rgba(120,244,237,.35);
  background: linear-gradient(135deg, rgba(120,244,237,.105), rgba(183,119,255,.055));
  box-shadow: inset 0 0 0 1px rgba(120,244,237,.035);
}
.vfModeTabs > button > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 2px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.08));
  border-radius: 9px;
  color: var(--muted);
  font: 700 9px ui-monospace, monospace;
}
.vfModeTabs > button.active > span { border-color: rgba(120,244,237,.3); color: var(--cyan); background: rgba(120,244,237,.07); }
.vfModeTabs b { align-self: end; min-width: 0; font-size: 12px; }
.vfModeTabs small { min-width: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }

.vfLane { display: grid; gap: 10px; min-width: 0; }
.vfStep {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.06));
  border-radius: 13px;
  background: linear-gradient(145deg, var(--studio-surface, rgba(15,22,39,.74)), var(--studio-wash, rgba(4,9,18,.38)));
}
.vfStepHead {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin-bottom: 13px;
}
.vfStepHead > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(120,244,237,.22);
  border-radius: 8px;
  background: rgba(120,244,237,.055);
  color: var(--cyan);
  font: 700 9px ui-monospace, monospace;
}
.vfStepHead > div { min-width: 0; }
.vfStepHead b { display: block; font-size: 13px; line-height: 1.35; }
.vfStepHead small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.vfStepCount {
  align-self: center;
  padding: 5px 8px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.06));
  border-radius: 99px;
  background: var(--studio-wash, rgba(0,0,0,.18));
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}
.vfLoaderGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.vfLoaderCard,
.vfApiTarget,
.vfSweepMod,
.vfAcceptanceMods > button,
.vfAcceptanceTarget {
  font: inherit;
  color: var(--studio-ink, var(--text));
  cursor: pointer;
}
.vfLoaderCard {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.065));
  border-radius: 10px;
  background: var(--studio-wash, rgba(0,0,0,.19));
  text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.vfLoaderCard:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(120,244,237,.25); }
.vfLoaderCard.selected { border-color: rgba(120,244,237,.45); background: linear-gradient(140deg, rgba(120,244,237,.095), rgba(81,170,255,.04)); }
.vfLoaderCard > span { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.vfLoaderCard > b { font-size: 12px; }
.vfLoaderCard > small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.vfLoaderCard.disabled,
.vfLoaderCard:disabled { opacity: .45; cursor: not-allowed; }
.vfTargetToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 13px 0 7px;
}
.vfTargetToolbar > span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.vfTargetToolbar > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.vfApiTargetGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.vfApiTarget {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.06));
  border-radius: 9px;
  background: var(--studio-wash, rgba(0,0,0,.17));
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.vfApiTarget:hover:not(:disabled) { border-color: rgba(120,244,237,.23); }
.vfApiTarget.selected { border-color: rgba(120,244,237,.47); background: rgba(120,244,237,.07); box-shadow: inset 3px 0 0 var(--cyan); }
.vfApiTarget > span { min-width: 0; }
.vfApiTarget b { display: block; font-size: 11px; }
.vfApiTarget small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.vfApiTarget > strong { align-self: start; color: var(--muted); font-size: 9px; letter-spacing: .045em; text-align: right; }
.vfApiTarget > code { grid-column: 1 / -1; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.vfApiTarget.disabled,
.vfApiTarget:disabled { opacity: .42; cursor: not-allowed; }
.vfApiTarget.disabled > strong { color: var(--warn); }
.vfSweepModGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.vfSweepMod {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.06));
  border-radius: 9px;
  background: var(--studio-wash, rgba(0,0,0,.17));
  text-align: left;
}
.vfSweepMod:hover:not(:disabled) { border-color: rgba(120,244,237,.23); }
.vfSweepMod.selected { border-color: rgba(120,244,237,.43); background: rgba(120,244,237,.065); }
.vfCheckMark {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.11));
  border-radius: 6px;
  color: var(--cyan);
  font-size: 11px;
}
.vfSweepMod.selected .vfCheckMark { border-color: rgba(120,244,237,.45); background: rgba(120,244,237,.1); }
.vfSweepMod > div { min-width: 0; }
.vfSweepMod > div:nth-child(2) b { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.vfSweepMod > div:nth-child(2) small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.vfSweepMod > div:last-child { text-align: right; }
.vfSweepMod > div:last-child strong { display: block; color: var(--muted); font-size: 9px; letter-spacing: .04em; }
.vfSweepMod > div:last-child small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.vfSweepMod.disabled,
.vfSweepMod:disabled { opacity: .43; cursor: not-allowed; }

.vfRunStep { border-color: color-mix(in srgb, var(--studio-accent, #78f4ed) 20%, var(--line)); }
.vfRunPanel {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(230px, 1.1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.055));
  border-radius: 10px;
  background: var(--studio-wash, rgba(0,0,0,.18));
}
.vfOutcomeChooser {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  align-items: center;
  gap: 5px 8px;
  min-width: 0;
}
.vfOutcomeChooser label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.vfOutcomeChooser select { min-width: 0; height: 34px; }
.vfOutcomeChooser small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.vfManualStageControls { margin-top: 8px; }
.vfManualStageControls > div { display: grid; gap: 10px; }
.vfRefreshToggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}
.vfRefreshToggle input { margin: 2px 0 0; accent-color: var(--cyan); }
.vfRefreshToggle b { display: block; font-size: 11px; }
.vfRefreshToggle small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.vfRunSafety { display: flex; flex-wrap: wrap; gap: 4px; }
.vfRunSafety > span {
  padding: 4px 6px;
  border: 1px solid rgba(120,244,173,.16);
  border-radius: 99px;
  background: rgba(120,244,173,.035);
  color: var(--good);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .045em;
}
.vfPrimaryAction { min-height: 38px; white-space: nowrap; }
.vfRunButtons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.vfRunButtons > small { flex: 1 0 100%; color: var(--muted); font-size: 9px; line-height: 1.4; text-align: right; }
.vfBlockerNotice {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(247,198,106,.22);
  border-radius: 9px;
  background: rgba(247,198,106,.045);
}
.vfBlockerNotice b { color: var(--warn); font-size: 10px; }
.vfBlockerNotice span { color: var(--muted); font-size: 9px; line-height: 1.5; overflow-wrap: anywhere; }
.vfEmptyCompact { padding: 12px; border: 1px dashed var(--studio-line, rgba(255,255,255,.08)); border-radius: 9px; color: var(--muted); font-size: 9px; }

.vfCatalogueAudit {
  overflow: hidden;
  border: 1px solid var(--studio-line, rgba(255,255,255,.06));
  border-radius: 12px;
  background: var(--studio-surface, rgba(8,13,24,.72));
}
.vfCatalogueAudit.review { border-color: rgba(247,198,106,.24); }
.vfCatalogueAudit.pass { border-color: rgba(120,244,173,.18); }
.vfCatalogueAudit > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
}
.vfCatalogueAudit > summary::-webkit-details-marker { display: none; }
.vfCatalogueAudit > summary b,
.vfCatalogueAudit > summary small { display: block; }
.vfCatalogueAudit > summary b { font-size: 11px; }
.vfCatalogueAudit > summary small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.vfCatalogueAudit > summary > div { text-align: right; }
.vfCatalogueAudit > summary strong { color: var(--warn); font-size: 9px; letter-spacing: .055em; }
.vfCatalogueAudit.pass > summary strong { color: var(--good); }
.vfCatalogueAudit[open] > summary { border-bottom: 1px solid var(--studio-line, rgba(255,255,255,.055)); }
.vfCatalogueAuditBody { display: grid; gap: 9px; padding: 11px 13px; }
.vfCatalogueAuditMetrics { display: flex; flex-wrap: wrap; gap: 6px; }
.vfCatalogueAuditMetrics span { padding: 6px 8px; border-radius: 8px; background: var(--studio-wash, rgba(0,0,0,.17)); color: var(--muted); font-size: 9px; }
.vfCatalogueAuditMetrics b { color: var(--studio-ink, var(--text)); font-size: 11px; }
.vfCatalogueAuditIssues { display: grid; gap: 5px; }
.vfCatalogueAuditIssues > div { display: grid; grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr); gap: 8px; padding: 7px 8px; border: 1px solid rgba(247,198,106,.12); border-radius: 7px; background: rgba(247,198,106,.035); }
.vfCatalogueAuditIssues code { color: var(--warn); font-size: 9px; }
.vfCatalogueAuditIssues span,
.vfCatalogueAuditNote { color: var(--muted); font-size: 9px; line-height: 1.4; overflow-wrap: anywhere; }

.vfAcceptanceMods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.vfAcceptanceMods > button {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.06));
  border-radius: 9px;
  background: var(--studio-wash, rgba(0,0,0,.17));
  text-align: left;
}
.vfAcceptanceMods > button:hover { border-color: rgba(120,244,237,.22); }
.vfAcceptanceMods > button.selected { border-color: rgba(120,244,237,.45); background: rgba(120,244,237,.065); }
.vfAcceptanceMods > button > span { min-width: 0; }
.vfAcceptanceMods b { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.vfAcceptanceMods small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.vfAcceptanceMods strong { color: var(--muted); font-size: 9px; letter-spacing: .04em; text-align: right; }
.vfAcceptanceMods .active strong { color: var(--good); }
.vfAcceptanceMods .pending strong { color: var(--warn); }
.vfAcceptanceMods .paused strong { color: var(--muted); }
.vfAcceptanceIdentity {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}
.vfAcceptanceIdentity > div { min-width: 0; padding: 8px; border-radius: 8px; background: var(--studio-wash, rgba(0,0,0,.16)); }
.vfAcceptanceIdentity span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.vfAcceptanceIdentity code { display: block; margin-top: 4px; overflow: hidden; color: var(--studio-ink, var(--text)); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.vfAcceptanceTargetGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.vfAcceptanceTarget {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.055));
  border-radius: 8px;
  background: var(--studio-wash, rgba(0,0,0,.16));
  text-align: left;
}
.vfAcceptanceTarget:hover:not(:disabled) { border-color: rgba(120,244,237,.22); }
.vfAcceptanceTarget.selected { border-color: rgba(120,244,237,.43); background: rgba(120,244,237,.065); }
.vfAcceptanceTarget b { display: block; font-size: 11px; }
.vfAcceptanceTarget small { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.vfAcceptanceTarget > strong { color: var(--muted); font-size: 9px; letter-spacing: .035em; }
.vfAcceptanceTarget.ready > strong,
.vfAcceptanceTarget.complete > strong { color: var(--good); }
.vfAcceptanceTarget.blocked > strong,
.vfAcceptanceTarget.pending > strong { color: var(--warn); }
.vfAcceptanceTarget:disabled { opacity: .38; cursor: not-allowed; }
.vfAdvanced {
  overflow: hidden;
  border: 1px solid var(--studio-line, rgba(255,255,255,.055));
  border-radius: 11px;
  background: var(--studio-wash, rgba(0,0,0,.14));
}
.vfAdvanced > summary,
.vfConsole > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.vfAdvanced > summary::-webkit-details-marker,
.vfConsole > summary::-webkit-details-marker { display: none; }
.vfAdvanced > summary > span,
.vfConsole > summary > span { min-width: 0; }
.vfAdvanced > summary b,
.vfConsole > summary b { display: block; font-size: 11px; }
.vfAdvanced > summary small,
.vfConsole > summary small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.vfAdvanced > summary > strong,
.vfConsole > summary strong { color: var(--muted); font-size: 9px; letter-spacing: .055em; }
.vfAdvanced[open] > summary,
.vfConsole[open] > summary { border-bottom: 1px solid var(--studio-line, rgba(255,255,255,.055)); background: rgba(120,244,237,.025); }
.vfAdvanced > div { padding: 12px; }
.vfAdvancedActions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.vfAdvancedActions small { color: var(--muted); font-size: 9px; line-height: 1.4; }

.vfActivity {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.06));
  border-radius: 13px;
  background: linear-gradient(145deg, var(--studio-surface, rgba(12,18,32,.8)), var(--studio-wash, rgba(2,6,13,.35)));
}
.vfActivity > #ilbankFarmProgress:empty,
.vfActivity > #ilbankFarmSummary:empty { display: none; }
.vfConsole {
  overflow: hidden;
  border: 1px solid var(--studio-line, rgba(255,255,255,.055));
  border-radius: 10px;
  background: var(--studio-wash, rgba(0,0,0,.17));
}
.vfConsole > summary > div { display: flex; align-items: center; gap: 7px; }
.vfConsoleBody { display: grid; gap: 8px; padding: 11px; }
.vfConsole .ilbankFarmLog { min-height: 150px; max-height: min(36vh, 360px); }
.vfProgressColumns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.vfProgressColumns > div { min-width: 0; }
.vfProgressLabel,
.vfSectionMiniHead {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vfProgressColumns .ilbankFarmProgressRows { max-height: 240px; }
.vfProgressColumns .ilbankFarmProgressRow { grid-template-columns: 9px minmax(90px, 1fr) auto; }
.vfProgressColumns .ilbankFarmProgressDetail { grid-column: 2 / -1; }

.vfSweepSummary { display: grid; gap: 9px; }
.vfSummaryHeadline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.055));
  border-radius: 10px;
  background: var(--studio-wash, rgba(0,0,0,.16));
}
.vfSummaryHeadline > div { min-width: 0; }
.vfSummaryHeadline span { color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.vfSummaryHeadline b { display: block; margin-top: 4px; font-size: 13px; }
.vfSummaryHeadline small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.vfSummaryHeadline > code { max-width: 38%; overflow-wrap: anywhere; color: var(--muted); font-size: 8px; text-align: right; }
.vfCombinedReceipt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.vfCombinedReceipt > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.05));
  border-radius: 9px;
  background: var(--studio-wash, rgba(0,0,0,.15));
}
.vfCombinedReceipt span,
.vfCombinedReceipt b,
.vfCombinedReceipt small,
.vfCombinedReceipt code { display: block; }
.vfCombinedReceipt span { color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.vfCombinedReceipt b { margin-top: 4px; font-size: 11px; }
.vfCombinedReceipt small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.vfCombinedReceipt code { margin-top: 6px; overflow-wrap: anywhere; color: var(--muted); font-size: 8px; }
.vfMetricGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}
.vfMetricGrid > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.045));
  border-radius: 8px;
  background: var(--studio-wash, rgba(0,0,0,.15));
}
.vfMetricGrid span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .035em; }
.vfMetricGrid b { display: block; margin-top: 4px; color: var(--studio-ink, var(--text)); font-size: 14px; }
.vfSafetyBanner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(120,244,173,.18);
  border-radius: 9px;
  background: rgba(120,244,173,.035);
}
.vfSafetyBanner b { flex: 0 0 auto; color: var(--good); font-size: 9px; letter-spacing: .045em; }
.vfSafetyBanner span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.vfProjectCoverage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.vfProjectCoverage > div { min-width: 0; padding: 9px; border: 1px solid var(--studio-line, rgba(255,255,255,.05)); border-radius: 8px; background: var(--studio-wash, rgba(0,0,0,.14)); }
.vfProjectCoverage b { display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.vfProjectCoverage span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.vfProjectCoverage small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.vfTargetResults { display: grid; gap: 6px; }
.vfResultTarget { overflow: hidden; border: 1px solid var(--studio-line, rgba(255,255,255,.055)); border-radius: 9px; background: var(--studio-wash, rgba(0,0,0,.14)); }
.vfResultTarget > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; cursor: pointer; list-style: none; }
.vfResultTarget > summary::-webkit-details-marker { display: none; }
.vfResultTarget > summary > span { min-width: 0; }
.vfResultTarget > summary code { display: block; color: var(--cyan); font-size: 9px; }
.vfResultTarget > summary b { display: block; margin-top: 3px; font-size: 11px; }
.vfResultTarget > summary > strong { color: var(--muted); font-size: 9px; letter-spacing: .04em; text-align: right; }
.vfResultTarget.blocked > summary > strong { color: var(--warn); }
.vfResultTarget[open] > summary { border-bottom: 1px solid var(--studio-line, rgba(255,255,255,.055)); background: rgba(120,244,237,.025); }
.vfResultBody { display: grid; gap: 9px; padding: 10px; }
.vfWaveGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.vfWave { min-width: 0; padding: 8px; border: 1px solid var(--studio-line, rgba(255,255,255,.05)); border-radius: 8px; background: var(--studio-wash, rgba(0,0,0,.15)); }
.vfWave span { display: block; color: var(--muted); font-size: 8px; }
.vfWave b { display: block; margin-top: 4px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.vfWave small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.vfResultSplit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vfResultSplit > div { min-width: 0; }
.vfCandidateRows { display: grid; gap: 4px; }
.vfCandidateRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.045));
  border-radius: 7px;
  background: var(--studio-wash, rgba(0,0,0,.13));
}
.vfCandidateRow > div { min-width: 0; }
.vfCandidateRow code { display: block; overflow: hidden; color: var(--studio-ink, var(--text)); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.vfCandidateRow small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.vfCandidateRow > b { align-self: center; color: var(--muted); font-size: 9px; white-space: nowrap; }
.vfModImpactRows { display: grid; gap: 4px; }
.vfModImpactRows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; min-width: 0; padding: 7px 8px; border-radius: 7px; background: var(--studio-wash, rgba(0,0,0,.13)); color: var(--muted); font-size: 9px; }
.vfModImpactRows b { overflow: hidden; color: var(--studio-ink, var(--text)); text-overflow: ellipsis; white-space: nowrap; }
.vfModImpactRows strong { color: var(--cyan); }
.vfNextAction { display: grid; gap: 4px; padding: 9px 10px; border-left: 3px solid var(--cyan); border-radius: 5px 8px 8px 5px; background: rgba(120,244,237,.045); }
.vfNextAction b { color: var(--cyan); font-size: 9px; letter-spacing: .045em; text-transform: uppercase; }
.vfNextAction code { overflow-wrap: anywhere; color: var(--studio-ink, var(--text)); font-size: 9px; }

.ilbankFarmJobScope.ecosystem { border-color: rgba(120,244,237,.2); background: rgba(120,244,237,.035); }

.vfAllVersionsMatrix {
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid var(--studio-line, rgba(255,255,255,.07));
  border-radius: 10px;
  background: var(--studio-wash, rgba(0,0,0,.16));
}
.vfAllVersionsMatrix > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  cursor: pointer;
}
.vfAllVersionsMatrix > summary b,
.vfAllVersionsMatrix > summary small { display: block; }
.vfAllVersionsMatrix > summary b { font-size: 11px; }
.vfAllVersionsMatrix > summary small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.vfAllVersionsMatrix > summary strong { color: var(--cyan); font-size: 9px; letter-spacing: .055em; white-space: nowrap; }
.vfMatrixScroll { max-height: 480px; overflow: auto; border-block: 1px solid var(--studio-line, rgba(255,255,255,.06)); }
.vfMatrixScroll table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 9px; }
.vfMatrixScroll th,
.vfMatrixScroll td { padding: 7px 8px; border-right: 1px solid rgba(255,255,255,.035); border-bottom: 1px solid rgba(255,255,255,.035); text-align: left; white-space: nowrap; }
.vfMatrixScroll thead th { position: sticky; top: 0; z-index: 2; background: var(--studio-panel, #15191f); color: var(--muted); font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.vfMatrixScroll th:first-child { position: sticky; left: 0; z-index: 1; min-width: 105px; background: var(--studio-panel, #15191f); }
.vfMatrixScroll thead th:first-child { z-index: 3; }
.vfMatrixScroll tbody th b,
.vfMatrixScroll tbody th small { display: block; }
.vfMatrixScroll tbody th small { margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 400; }
.vfMatrixScroll tr.regression th:first-child { box-shadow: inset 3px 0 rgba(120,244,237,.48); }
.vfMatrixClass,
.vfMatrixGate { display: inline-flex; align-items: center; min-height: 20px; padding: 3px 6px; border-radius: 99px; font-size: 8px; font-weight: 750; letter-spacing: .025em; text-transform: uppercase; }
.vfMatrixClass { background: rgba(255,255,255,.055); color: var(--muted); }
.vfMatrixGate.pass { background: rgba(76,213,148,.11); color: var(--good); }
.vfMatrixGate.configured { background: rgba(120,244,237,.09); color: var(--cyan); }
.vfMatrixGate.blocked { background: rgba(255,103,119,.10); color: var(--bad); }
.vfMatrixGate.pending { background: rgba(255,190,91,.09); color: var(--warn); }
.vfAllVersionsMatrix > footer { display: flex; flex-wrap: wrap; gap: 5px 12px; padding: 9px 12px; color: var(--muted); font-size: 8px; }
.vfAllVersionsMatrix > footer span::before { content: '•'; margin-right: 5px; color: var(--cyan); }

@media (max-width: 1180px) {
  .vfMetricGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vfAcceptanceTargetGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vfWaveGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vfRunPanel { grid-template-columns: minmax(210px, 1fr) minmax(220px, 1fr); }
  .vfPrimaryAction, .vfRunButtons { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 980px) {
  .vfHero { grid-template-columns: minmax(0, 1fr); }
  .vfHeroStatus { min-height: 92px; }
  .vfSweepModGrid, .vfAcceptanceMods, .vfProjectCoverage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vfProgressColumns { grid-template-columns: minmax(0, 1fr); }
  .vfAcceptanceIdentity { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .vfHero { padding: 18px; }
  .vfModeTabs { grid-template-columns: minmax(0, 1fr); }
  .vfLoaderGrid, .vfApiTargetGrid, .vfSweepModGrid, .vfAcceptanceMods, .vfProjectCoverage, .vfResultSplit { grid-template-columns: minmax(0, 1fr); }
  .vfAcceptanceTargetGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vfRunPanel { grid-template-columns: minmax(0, 1fr); }
  .vfOutcomeChooser { grid-template-columns: minmax(0, 1fr); }
  .vfOutcomeChooser small { grid-column: 1; }
  .vfPrimaryAction, .vfRunButtons { grid-column: 1; justify-self: stretch; }
  .vfRunButtons .btn, .vfPrimaryAction { width: 100%; }
  .vfRunButtons > small { text-align: left; }
  .vfCombinedReceipt { grid-template-columns: minmax(0, 1fr); }
  .vfTargetToolbar { align-items: flex-start; flex-direction: column; }
  .vfTargetToolbar > div { justify-content: flex-start; }
  .vfStepHead { grid-template-columns: 30px minmax(0, 1fr); }
  .vfStepCount { grid-column: 2; justify-self: start; }
  .vfSummaryHeadline { flex-direction: column; }
  .vfSummaryHeadline > code { max-width: 100%; text-align: left; }
  .vfMetricGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vfWaveGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vfSafetyBanner { align-items: flex-start; flex-direction: column; }
  .vfAdvancedActions { align-items: stretch; flex-direction: column; }
  .vfCatalogueAudit > summary { align-items: flex-start; flex-direction: column; }
  .vfCatalogueAudit > summary > div { text-align: left; }
  .vfCatalogueAuditIssues > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 470px) {
  .vfAcceptanceTargetGrid, .vfMetricGrid, .vfWaveGrid { grid-template-columns: minmax(0, 1fr); }
  .vfHeroChips > span { width: 100%; }
  .vfConsole > summary { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .vfModeTabs > button,
  .vfLoaderCard,
  .vfApiTarget { transition: none; }
}

/* Version Farm readability and result-card corrections. */
.vfHeroCopy > p { font-size: 13px; }
.vfFlowStrip { font-size: 11px; }
.vfHeroChips > span,
.vfHeroChips > span b { font-size: 11px; }
.vfModeTabs b { font-size: 13px; }
.vfModeTabs small { font-size: 11px; }
.vfStepHead b { font-size: 14px; }
.vfStepHead small { font-size: 11px; }
.vfLoaderCard > b,
.vfApiTarget b,
.vfSweepMod > div:nth-child(2) b,
.vfAcceptanceMods b,
.vfAcceptanceTarget b { font-size: 12px; }
.vfLoaderCard > small,
.vfApiTarget small,
.vfSweepMod > div:nth-child(2) small,
.vfSweepMod > div:last-child small,
.vfAcceptanceMods small,
.vfAcceptanceTarget small,
.vfRefreshToggle small,
.vfBlockerNotice span,
.vfAdvanced > summary small,
.vfConsole > summary small { font-size: 10px; }
.vfTargetToolbar > span,
.vfStepCount,
.vfApiTarget > strong,
.vfSweepMod > div:last-child strong,
.vfAcceptanceMods strong,
.vfAcceptanceTarget > strong,
.vfRunSafety > span,
.vfBlockerNotice b,
.vfAdvanced > summary > strong,
.vfConsole > summary strong { font-size: 10px; }

.vfSummaryHeadline > div:last-child {
  display: grid;
  justify-items: end;
  gap: 6px;
  max-width: 46%;
  text-align: right;
}
.vfSummaryHeadline > div:last-child code {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 9px;
}
.vfSummaryHeadline > div:last-child strong {
  color: var(--good);
  font-size: 10px;
  letter-spacing: .06em;
}
.vfMetricGrid span { font-size: 10px; }
.vfMetricGrid b { font-size: 16px; }
.vfSafetyBanner b,
.vfSafetyBanner span { font-size: 10px; }
.vfProjectCoverage b { font-size: 11px; }
.vfProjectCoverage span,
.vfProjectCoverage small { font-size: 10px; }

.vfResultTarget > summary > div { min-width: 0; }
.vfResultTarget > summary > div:first-child span {
  display: block;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.vfResultTarget > summary > div:first-child b {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}
.vfResultState {
  display: grid;
  justify-items: end;
  gap: 4px;
  max-width: 52%;
  text-align: right;
}
.vfResultState strong { font-size: 10px; letter-spacing: .04em; }
.vfResultState small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.vfResultTarget.blocked > summary { box-shadow: inset 3px 0 0 rgba(247,198,106,.72); }
.vfResultTarget.ready > summary { box-shadow: inset 3px 0 0 rgba(120,244,173,.65); }

.vfApiEvidenceCard {
  display: grid;
  grid-template-columns: minmax(155px, .75fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid var(--studio-line, rgba(255,255,255,.055));
  border-radius: 9px;
  background: var(--studio-wash, rgba(0,0,0,.15));
}
.vfApiEvidenceCard.ready { border-color: rgba(120,244,173,.2); background: rgba(120,244,173,.035); }
.vfApiEvidenceCard.blocked { border-color: rgba(247,198,106,.23); background: rgba(247,198,106,.04); }
.vfApiEvidenceCard span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .055em; }
.vfApiEvidenceCard b { display: block; margin-top: 4px; color: var(--good); font-size: 11px; }
.vfApiEvidenceCard.blocked b { color: var(--warn); }
.vfApiEvidenceCard p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.vfApiEvidenceCard > strong { color: var(--studio-ink, var(--text)); font-size: 10px; text-align: right; white-space: nowrap; }

.vfWave span,
.vfWave small { font-size: 9px; }
.vfWave b { font-size: 11px; }
.vfWave strong { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; letter-spacing: .04em; }
.vfSectionMiniHead { font-size: 10px; }
.vfSectionMiniHead b { display: block; color: var(--studio-ink, var(--text)); font-size: 11px; letter-spacing: 0; text-transform: none; }
.vfSectionMiniHead span { display: block; margin-top: 3px; line-height: 1.4; text-transform: none; }

.vfCandidateRow {
  grid-template-columns: 105px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
}
.vfCandidateRow > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.vfCandidateRow code { font-size: 10px; }
.vfCandidateRow small { margin: 0; font-size: 9px; text-align: right; }
.vfCandidateRow.reuse > span { color: var(--good); }
.vfCandidateRow.api > span,
.vfCandidateRow.backend > span,
.vfCandidateRow.operation > span { color: var(--warn); }
.vfModImpactRows > div {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 8px 9px;
  font-size: 10px;
}
.vfModImpactRows span { min-width: 0; }
.vfModImpactRows b { display: block; font-size: 11px; }
.vfModImpactRows small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.vfNextAction b { font-size: 10px; }

@media (max-width: 760px) {
  .vfSummaryHeadline > div:last-child,
  .vfResultState { max-width: 100%; justify-items: start; text-align: left; }
  .vfResultTarget > summary { align-items: flex-start; flex-direction: column; }
  .vfApiEvidenceCard { grid-template-columns: minmax(0, 1fr); }
  .vfApiEvidenceCard > strong { text-align: left; white-space: normal; }
  .vfCandidateRow { grid-template-columns: minmax(0, 1fr) auto; }
  .vfCandidateRow > span { grid-column: 1 / -1; }
}

/* Version Farm shared core replay: reuses the target-first section layout. */
.vfCoreBatchStep { grid-column: 1 / -1; }
.vfCoreBatchBody { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 20px 20px; }
.vfCoreBatchBody > div { min-width: 0; }
.vfCoreBatchBody p { margin: 8px 0; }
.vfCoreBatchBody small { display: block; overflow-wrap: anywhere; opacity: .75; }
.vfCoreBatchBody button { flex-shrink: 0; }
.vfBatchImpact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.vfBatchImpact > div { display: flex; flex-direction: column; gap: 9px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.vfBatchImpact code, .vfReplayProgress code { overflow-wrap: anywhere; white-space: normal; font-size: 11px; opacity: .8; }
.vfBatchGaps { margin-top: 18px; }
.vfBatchGaps summary { cursor: pointer; padding: 10px 0; }
.vfBatchGap { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; }
.vfBatchGap code { min-width: 0; overflow-wrap: anywhere; }
.vfBatchGap span { flex-shrink: 0; }
.vfReplayProgress { padding-top: 14px; display: grid; gap: 8px; }
@media (max-width: 700px) {
  .vfCoreBatchBody { align-items: stretch; flex-direction: column; }
  .vfBatchGap { flex-direction: column; gap: 4px; }
}

/* Target checkpoint summary uses the existing Core Sweep layout. */
.vfBatchResumeSummary { display: flex; flex-wrap: wrap; gap: .65rem 1.4rem; padding: .8rem 1rem; }
.vfBatchResumeSummary span { display: inline-flex; gap: .35rem; align-items: baseline; }

.vfRetroInputs { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.vfRetroInputs h3 { margin: 6px 0 8px; }
.vfRetroInputs p { margin: 0; max-width: 90ch; line-height: 1.55; }
.vfRetroEyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.vfRetroActions { display: flex; flex-wrap: wrap; gap: 10px; }
.vfRetroInputs small { opacity: .8; line-height: 1.5; }

.vfRetroSummary .vfProjectCoverage code { display: block; margin-top: 6px; white-space: normal; overflow-wrap: anywhere; font-size: 11px; line-height: 1.5; }
.vfRetroSummary .vfSummaryHeadline b { overflow-wrap: anywhere; }

.vfRetroOption { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; }
.vfRetroOption input { width: 16px; height: 16px; flex: 0 0 auto; }
.vfRetroDependencies { margin: 14px 0; }
.vfRetroDependencies .vfProjectCoverage > div { align-items: start; gap: 12px; }
.vfRetroDependencies .vfProjectCoverage span { min-width: 0; overflow-wrap: anywhere; }

.vfRetroGroup { margin: 10px 0; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.vfRetroGroup > summary { cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.vfRetroGroup > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.vfRetroToolkit { margin: 16px 0; min-width: 0; }
.vfRetroDependencies p, .vfRetroToolkit p { overflow-wrap: anywhere; }
.vfRetroGroup .vfProjectCoverage { grid-template-columns: minmax(0, 1fr); margin-top: 10px; }
.vfRetroGroup .vfProjectCoverage > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vfRetroGroup .vfProjectCoverage b, .vfRetroGroup .vfProjectCoverage small { white-space: normal; overflow: visible; text-overflow: clip; font-size: 12px; line-height: 1.5; }
.vfRetroHashes { display: grid; gap: 6px; margin: 8px 0; min-width: 0; }
.vfRetroHashes small, .vfRetroGroup small { display: block; overflow-wrap: anywhere; }
.vfRetroToolkit code, .vfRetroGroup code { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 700px) {
  .vfRetroGroup .vfProjectCoverage > div { grid-template-columns: minmax(0, 1fr); flex-direction: column; align-items: stretch; }
}

/* Home evidence separates preparation observations from build and playtest gates. */
.studioHome .homeReadiness{min-width:0}
.studioHome .homeReadinessHeading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.studioHome .homeReadinessHeading h3{font-size:25px;letter-spacing:-.02em;margin:7px 0 0}
.studioHome .homeReadinessLead{font-size:15px;font-weight:600;margin:18px 0 14px}
.studioHome .homePreparationMetrics{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px;margin-bottom:14px}
.studioHome .homePreparationMetrics>div{padding:13px 11px;border:1px solid var(--studio-line,var(--line));border-radius:9px;min-width:0;background:var(--studio-wash,transparent)}
.studioHome .homePreparationMetrics strong{display:block;font-size:24px;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--studio-accent,var(--cyan))}
.studioHome .homePreparationMetrics span{display:block;font-size:12px;line-height:1.5;margin-top:7px;color:var(--studio-muted,var(--muted))}
.studioHome .homeDependencyProgress{width:100%;height:9px;accent-color:var(--studio-accent,var(--cyan))}
.studioHome .homeToolChips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.studioHome .homeToolChips span{font-size:11px;line-height:1.6;border:1px solid var(--studio-line,var(--line));border-radius:6px;padding:4px 7px;color:var(--studio-muted,var(--muted))}
.studioHome .homeToolChips b{color:var(--studio-ink,var(--text));font-weight:500}
.studioHome .homeBlockedInputs,.studioHome .homeReportDetails{font-size:12px;line-height:1.65;margin:14px 0;min-width:0}
.studioHome .homeBlockedInputs ul{padding-left:18px;margin:10px 0 0;display:grid;gap:4px}
.studioHome .homeBlockedInputs code,.studioHome .homeReportDetails code{overflow-wrap:anywhere;word-break:break-word;font-size:11px}
.studioHome .homeReportDetails>code{display:block;color:var(--studio-muted,var(--muted))}
.studioHome .homeReportDetails p{margin:10px 0 4px}
.studioHome .homeGateTitle{font-size:14px;margin:22px 0 10px}
.studioHome .homeGateRows{border-top:1px solid var(--studio-line,var(--line))}
.studioHome .homeGateRow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--studio-line,var(--line));font-size:12px;line-height:1.5}
.studioHome .homeGateRow>span{min-width:0}
.studioHome .homeGateStatus{flex-shrink:0;border:1px solid var(--studio-line,var(--line));border-radius:6px;padding:4px 8px;font-size:11px;font-weight:600;color:var(--studio-muted,var(--muted));white-space:nowrap}
.studioHome .homeGateStatus[data-tone="blocked"]{color:var(--studio-warn,var(--warn));border-color:color-mix(in srgb,var(--studio-warn,var(--warn)) 35%,var(--studio-line,var(--line)));background:color-mix(in srgb,var(--studio-warn,var(--warn)) 6%,transparent)}
.studioHome .homeNextGate{font-size:13px;line-height:1.7;margin:18px 0;padding:12px 14px;border-left:2px solid var(--studio-accent,var(--cyan));background:var(--studio-wash,transparent)}
.studioHome .homeSnapshotNotice{font-size:12px;line-height:1.65;color:var(--studio-muted,var(--muted))}
.studioHome .homeSnapshotNotice[data-stale="true"]{color:var(--studio-warn,var(--warn))}
.studioHome .homeReadinessActions{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0}
.studioHome .homeReadinessNotice{font-size:13px;line-height:1.65;padding:14px;border:1px solid var(--studio-line,var(--line));border-radius:9px;margin-bottom:18px}
.studioHome .homeReadinessNotice p{color:var(--studio-muted,var(--muted))}
.studioHome .homeMappingDetails{margin-top:20px;border-top:1px solid var(--studio-line,var(--line));padding-top:16px}
.studioHome .homeMappingDetails>summary{font-size:13px;font-weight:600;margin-bottom:16px}
.studioHome .homeReadiness summary,.studioHome .homeMappingDetails summary{cursor:pointer}
.studioHome .homeReadiness summary:focus-visible,.studioHome .homeMappingDetails summary:focus-visible{outline:2px solid var(--studio-accent,var(--cyan));outline-offset:4px;border-radius:3px}
.studioHome .dashboardFeatureMeta time{margin-left:auto;font-variant-numeric:tabular-nums}
@container(max-width:600px){.studioHome .homePreparationMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}.studioHome .homePreparationMetrics>div:first-child{grid-column:1/-1}.studioHome .homePreparationMetrics>div:first-child strong{font-size:30px}.studioHome .dashboardFeatureMeta time{margin-left:0}.studioHome .homeGateRow{gap:8px}.studioHome .homeReadinessHeading h3{font-size:23px}}
@media(forced-colors:active){.studioHome .homeGateStatus[data-tone="blocked"]{color:CanvasText;border:1px solid CanvasText}.studioHome .homeNextGate{border-left-color:CanvasText}}

/* Native helper preparation is separate from Minecraft and mod acceptance. */
.vfNativeSummary, .vfNativeStart { min-width: 0; overflow-wrap: anywhere; }
.vfNativeSummary > *, .vfNativeStart > * { min-width: 0; }
.vfNativeStart { display: grid; gap: 12px; }
.vfNativeStart h4 { margin: 0; }
.vfNativeStart button { justify-self: start; white-space: normal; }
.vfNativeStages { display: grid; gap: 8px; }
.vfNativeStages > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; }
.vfNativeStages b, .vfNativeStages span { font-size: 12px; line-height: 1.5; }
.vfNativeStages p { grid-column: 1 / -1; }
.vfNativeSummary pre { max-height: 320px; overflow: auto; font-size: 12px; }
@media (max-width: 540px) { .vfNativeStages > div { grid-template-columns: minmax(0, 1fr); } }

.studioHome .homeWorkspaceHeader{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}
.studioHome .homeWorkspaceHeader h1{font-size:clamp(24px,3vw,36px);line-height:1.2;margin:8px 0}
.studioHome .homeWorkspaceHeader p{margin:0;color:var(--studio-muted,var(--muted));max-width:58ch}
.studioHome .homeContinueProject{flex-shrink:0}
.studioHome .homeActivityGrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);gap:20px;align-items:start;margin-bottom:24px}
.studioHome .homeActivityGrid .dashboardCard{margin:0;min-width:0;background:var(--studio-panel,var(--panel));border:1px solid var(--studio-line,var(--line));box-shadow:none}
.studioHome .homeWorkQueue{display:grid;gap:20px;min-width:0}
.studioHome .homeMilestoneRow{padding:14px 0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;border-top:1px solid var(--studio-line,var(--line))}
.studioHome .homeMilestoneRow:first-child{border-top:0}
.studioHome .homeMilestoneRow h3{font-size:14px;line-height:1.5;margin:8px 0 4px}
.studioHome .homeMilestoneRow p{font-size:12px;line-height:1.65;margin:4px 0;color:var(--studio-muted,var(--muted))}
.studioHome .homeMilestoneRow details{font-size:12px;margin:8px 0;color:var(--studio-muted,var(--muted))}
.studioHome .homeMilestoneRow details summary{cursor:pointer}
.studioHome .homeMilestoneRow .dashboardFeatureMeta{font-size:10px;gap:8px;display:flex;flex-wrap:wrap;align-items:center}
.studioHome .dashboardFocusRow{padding:12px 0;border:0;border-radius:0;border-top:1px solid var(--studio-line,var(--line));background:transparent}
.studioHome .dashboardFocusRow:first-child{border-top:0}
.studioHome .dashboardFocusRow h3,.studioHome .dashboardFocusRow b{font-size:13px;line-height:1.5}
.studioHome .dashboardFocusRow p{font-size:12px;line-height:1.65}
.studioHome .homeDetailsGrid{display:grid;gap:12px;margin-top:20px}
.studioHome .homeTechnicalDetails{border:1px solid var(--studio-line,var(--line));border-radius:8px;background:var(--studio-panel,var(--panel));padding:0}
.studioHome .homeTechnicalDetails>summary{cursor:pointer;display:list-item;list-style-position:inside;padding:16px 20px;font-size:13px;font-weight:600}
.studioHome .homeTechnicalDetails>summary:focus-visible{outline:2px solid var(--studio-accent,var(--cyan));outline-offset:2px}
.studioHome .homeDetailsBody{padding:0 20px 20px;min-width:0}
.studioHome .homeDetailsBody .dashboardCard{box-shadow:none;margin:0}
.adminPanelPending{min-height:160px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:20px}
.adminLoadTiming{margin:8px 0 0;font-size:11px}
.adminDiagnosticsProgress{font-size:12px;color:var(--muted);margin:14px 0}
.adminDiagnosticsStages{display:grid;gap:8px;margin-bottom:16px}
.adminDiagnosticsStages>div{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px;border:1px solid var(--line);border-radius:6px;font-size:12px}
.adminDiagnosticsStages p{grid-column:1/-1;margin:0}
#adminDiagnostics .adminCardTitle{display:flex;justify-content:space-between;align-items:center;gap:12px}
#adminDiagnostics pre{max-height:300px;overflow:auto;font-size:11px;line-height:1.6;padding:12px;background:var(--panel2,var(--panel));border-radius:6px}
@media(max-width:950px){.studioHome .homeActivityGrid{grid-template-columns:minmax(0,1fr)}.studioHome .homeWorkQueue{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.studioHome .homeWorkspaceHeader{align-items:flex-start;flex-direction:column;gap:14px}.studioHome .homeWorkQueue{grid-template-columns:minmax(0,1fr)}.studioHome .homeDetailsBody{padding:0 12px 12px}.adminDiagnosticsStages>div{grid-template-columns:1fr}}

.studioDedicatedHost{width:100%;height:100%;min-height:0;overflow:auto}
#app.videoEditorActive .workToolbar,#app.geneLabActive .workToolbar{display:none}
#app.videoEditorActive #contentHost,#app.geneLabActive #contentHost{padding:0;overflow:hidden;height:100%}

#app.soundCreatorActive .workToolbar{display:none}
#app.soundCreatorActive #contentHost{padding:0;overflow:hidden;height:100%}