/* Scoped visual layer for the live ScriptCenter; preserves its current runtime. */
html:has(.script-center-page) {
  --studio-bg: #101116;
  --studio-panel: #191a22;
  --studio-border: #2b2d39;
  --studio-text: #ececf4;
  --studio-muted: #9c9eaf;
  --studio-accent: #b4a3ff;
}
html:has(.script-center-page) body,
html:has(.script-center-page) #root,
html:has(.script-center-page) #root > div:has(.script-center-page) {
  background: var(--studio-bg) !important;
  color: var(--studio-text) !important;
}
html:has(.script-center-page) main:has(> .script-center-page) {
  max-width: 1392px !important;
  padding: 36px 40px 80px !important;
}
html body .script-center-page.script-center-page {
  font-family: Inter, "Microsoft YaHei UI", "PingFang SC", sans-serif !important;
  color: var(--studio-text) !important;
  --studio-coral: #b4a3ff;
  --studio-coral-dark: #9580e9;
  --studio-line: #2b2d39;
}
html body .script-center-page.script-center-page :is(h1,h2,h3,button,input,textarea,select) {
  font-family: inherit !important;
}
html body .script-center-page.script-center-page :is(h1,h2,h3) { color: var(--studio-text) !important; letter-spacing: -.035em; }
html body .script-center-page.script-center-page h2 { font-size: 18px !important; font-weight: 600 !important; }
html body .script-center-page.script-center-page button {
  border-radius: 12px !important;
  cursor: pointer;
  font-weight: 500;
  transition: background .18s, border-color .18s, transform .18s;
}
html body .script-center-page.script-center-page button:focus-visible { outline: 2px solid #c5b8ff !important; outline-offset: 4px; }
html body .script-center-page.script-center-page :is(input,select,textarea) {
  background: #14151d !important;
  color: var(--studio-text) !important;
  border: 1px solid var(--studio-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html body .script-center-page.script-center-page .script-center-toolbar {
  padding: 0 0 24px !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
}
html body .script-center-page.script-center-page .script-center-toolbar > div:first-child { min-width: 220px; max-width: 360px; }
html body .script-center-page.script-center-page .script-center-toolbar select { height: 46px; padding-left: 42px; font-size: 14px; }
html body .script-center-page.script-center-page .script-center-toolbar > div:last-child > button {
  background: #22232e !important; color: #dddde8 !important; border: 1px solid #343543 !important; box-shadow: none !important; height: 44px;
}
html body .script-center-page.script-center-page .script-center-toolbar > div:last-child > button:first-child {
  background: #b4a3ff !important; color: #201a38 !important; border-color: #b4a3ff !important;
}
html body .script-center-page.script-center-page .script-center-workspace { display: flex !important; flex-direction: column; gap: 28px !important; }
html body .script-center-page.script-center-page .script-center-sidebar {
  position: static !important; display: flex !important; width: 100%; align-items: center;
  gap: 6px; padding: 0 0 18px !important; overflow-x: auto;
  border: 0 !important; border-bottom: 1px solid var(--studio-border) !important;
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
}
html body .script-center-page.script-center-page .script-center-sidebar > div { display: none; }
html body .script-center-page.script-center-page .script-center-sidebar > button {
  width: auto !important; min-width: max-content; min-height: 40px; padding: 10px 15px !important;
  background: transparent !important; color: var(--studio-muted) !important; border: 0 !important; gap: 8px !important;
  font-size: 13px !important; box-shadow: none !important;
}
html body .script-center-page.script-center-page .script-center-sidebar > button[class~="bg-[#6977f8]"] {
  background: #292536 !important; color: #d7ccff !important;
}
html body .script-center-page.script-center-page .script-center-sidebar > button:hover { background: #22232e !important; color: #fff !important; }
html body .script-center-page.script-center-page .script-center-sidebar > button:last-child { display: none; }
html body .script-center-page.script-center-page .script-center-content { width: 100%; }
html body .script-center-page.script-center-page .script-center-hero {
  padding: 44px 44px 0 !important; min-height: 300px;
  border: 1px solid #383448 !important; border-radius: 24px !important;
  background: radial-gradient(ellipse at 94% 0%, #39304f 0%, transparent 58%), linear-gradient(120deg,#22212d,#1c1d26) !important;
  box-shadow: 0 22px 60px #00000018 !important;
}
html body .script-center-page.script-center-page .script-center-hero::after { display: none; }
html body .script-center-page.script-center-page .script-center-hero > div:first-child { align-items: center !important; }
html body .script-center-page.script-center-page .script-center-hero > div:first-child > div { flex: 1; min-width: 0; }
html body .script-center-page.script-center-page .script-center-hero h1 { font-size: clamp(32px,3.5vw,46px) !important; font-weight: 650 !important; margin: 16px 0 14px; line-height: 1.2; }
html body .script-center-page.script-center-page .script-center-hero p {
  max-width: 760px; font-size: 14px !important; line-height: 1.9 !important; color: #adaaba !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html body .script-center-page.script-center-page .script-center-hero > div:first-child > div > span {
  background: transparent !important; color: #b5a6e2 !important; padding: 0 !important; font-size: 10px !important; font-weight: 600; letter-spacing: .24em;
}
html body .script-center-page.script-center-page .script-center-hero > div:first-child > button {
  background: #eee8ff !important; color: #32274c !important; border: 0 !important;
  padding: 15px 22px !important; box-shadow: 0 8px 30px #00000015 !important;
}
html body .script-center-page.script-center-page .script-center-hero > div:last-child { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 0 !important; margin-top: 36px !important; border-top: 1px solid #ffffff12; }
html body .script-center-page.script-center-page .script-center-stat {
  border: 0 !important; border-right: 1px solid #ffffff0b !important; border-radius: 0 !important;
  padding: 24px 28px !important; background: transparent !important; box-shadow: none !important;
}
html body .script-center-page.script-center-page .script-center-stat:first-child { padding-left: 0 !important; }
html body .script-center-page.script-center-page .script-center-stat:last-child { border-right: 0 !important; }
html body .script-center-page.script-center-page .script-center-stat span { color: #aaa6b8 !important; font-size: 12px; }
html body .script-center-page.script-center-page .script-center-stat svg { color: #9a8db6 !important; width: 16px; }
html body .script-center-page.script-center-page .script-center-stat strong { font-size: 27px; margin-top: 10px; font-weight: 500; }
html body .script-center-page.script-center-page .script-center-stat small { color: #888496 !important; margin-left: 8px; }
html body .script-center-page.script-center-page .script-center-content > div:has(> .script-center-hero) > div:last-child { grid-template-columns: 1fr 1fr !important; margin-top: 28px !important; gap: 24px !important; }
html body .script-center-page.script-center-page .script-center-content > div:has(> .script-center-hero) > div:last-child > div {
  background: #191a22 !important; border: 1px solid #2b2d39 !important; border-radius: 20px !important; padding: 26px !important;
}
html body .script-center-page.script-center-page .script-center-content > div:has(> .script-center-hero) > div:last-child > div:last-child { order: -1; }
html body .script-center-page.script-center-page .script-center-content > div:has(> .script-center-hero) > div:last-child button {
  background: #20212b !important; color: #d8d8e5 !important; border: 1px solid #2c2d3a !important; padding: 16px !important;
}
html body .script-center-page.script-center-page .script-center-content > div:has(> .script-center-hero) > div:last-child button:hover { background: #2a2838 !important; border-color: #61537e !important; transform: translateY(-2px); }
html body .script-center-page.script-center-page .script-center-content > div:has(> .script-center-hero) > div:last-child small { color: #9292a5 !important; font-size: 11px; display: block; margin-top: 6px; }
html body .script-center-page.script-center-page .script-center-content > div:has(> .script-center-hero) > div:last-child strong { font-weight: 500 !important; }
html body .script-center-page.script-center-page .script-center-content > div:has(> .script-center-hero) > div:last-child button > span:first-child:has(svg) { background: #2c293b !important; color: #b5a6e2 !important; }
html body .script-center-page.script-center-page .script-center-content > div:not(:has(> .script-center-hero)) { color: var(--studio-text); }
html body .script-center-page.script-center-page .script-center-content > div:not(:has(> .script-center-hero)) [class*="border"] { border-color: var(--studio-border) !important; }
html body .script-center-page.script-center-page .script-center-content > div:not(:has(> .script-center-hero)) [class*="bg-white"] { background-color: var(--studio-panel) !important; }
@media (max-width: 800px) {
  html:has(.script-center-page) main:has(> .script-center-page) { padding: 20px 16px 50px !important; }
  html body .script-center-page.script-center-page .script-center-hero { padding: 28px 24px 0 !important; }
  html body .script-center-page.script-center-page .script-center-hero > div:first-child { flex-direction: column; align-items: flex-start !important; }
  html body .script-center-page.script-center-page .script-center-stat { padding: 18px 12px !important; }
  html body .script-center-page.script-center-page .script-center-stat svg { display: none; }
  html body .script-center-page.script-center-page .script-center-content > div:has(> .script-center-hero) > div:last-child { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) { html body .script-center-page.script-center-page * { animation: none !important; transition: none !important; } }