/* Shared visual contract for legacy script detail pages. */
body:has(.hero .panel) {
  background:
    radial-gradient(circle at 12% 10%, rgba(74, 137, 220, 0.16), transparent 28%),
    radial-gradient(circle at 88% 20%, rgba(69, 108, 180, 0.12), transparent 26%),
    linear-gradient(180deg, #080d17 0%, #060a12 56%, #050811 100%) !important;
}

body:has(.hero .panel)::before {
  background:
    radial-gradient(circle at 18% 18%, rgba(91, 155, 239, 0.12), transparent 30%),
    radial-gradient(circle at 82% 38%, rgba(75, 118, 195, 0.08), transparent 28%) !important;
}

body:has(.hero .panel) .shell {
  width: min(100% - 32px, 1240px) !important;
  margin: 0 auto !important;
  padding: 18px 0 48px !important;
}

body:has(.hero .panel) .topbar {
  position: relative !important;
  width: 100% !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  padding: 0 18px !important;
  border: 1px solid rgba(126, 174, 231, 0.20) !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, rgba(22, 34, 55, 0.78), rgba(7, 12, 22, 0.86)) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(180, 214, 255, 0.06) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
}

body:has(.hero .panel) .topbar::before {
  content: none !important;
}

body:has(.hero .panel) .topbar a {
  color: #eef2f8 !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}

body:has(.hero .panel) .topbar > a:first-child {
  justify-self: start !important;
}

body:has(.hero .panel) .topbar > a:last-child {
  justify-self: end !important;
}

body:has(.hero .panel) .topbar .brand-link {
  justify-self: center !important;
  color: #f4f7ff !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body:has(.hero .panel) .hero {
  margin-top: 18px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}

body:has(.hero .panel) .panel,
body:has(.hero .panel) .section {
  border-color: rgba(126, 174, 231, 0.20) !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, rgba(20, 32, 52, 0.84), rgba(8, 13, 23, 0.88)) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(180, 214, 255, 0.06) !important;
}

body:has(.hero .panel) .panel.preview {
  align-self: start !important;
  overflow: hidden !important;
}

body:has(.hero .panel) .details {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

body:has(.hero .panel) .art {
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  border-color: rgba(126, 174, 231, 0.28) !important;
  border-radius: 22px !important;
  box-shadow: 0 0 0 1px rgba(126, 174, 231, 0.08), 0 18px 50px rgba(0, 0, 0, 0.46) !important;
}

body:has(.hero .panel) .detail-art-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

body:has(.hero .panel) .details h1 {
  margin: 0 !important;
  color: #f6f8ff !important;
  font-size: clamp(2rem, 3.8vw, 3.4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  text-wrap: balance;
}

body:has(.hero .panel) .meta {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  gap: 10px !important;
}

body:has(.hero .panel) .pill {
  padding: 7px 13px !important;
  border-radius: 999px !important;
  border-color: rgba(126, 174, 231, 0.20) !important;
  background: rgba(80, 90, 110, 0.12) !important;
  color: #eef2f8 !important;
  font-size: 0.84rem !important;
}

body:has(.hero .panel) .pill.universal {
  background: rgba(90, 167, 255, 0.10) !important;
  border-color: rgba(90, 167, 255, 0.28) !important;
  color: #d9ecff !important;
}

body:has(.hero .panel) .pill.updated {
  background: rgba(79, 209, 139, 0.10) !important;
  border-color: rgba(79, 209, 139, 0.24) !important;
  color: #d8f8e6 !important;
}

body:has(.hero .panel) .row,
body:has(.hero .panel) .toggle-row,
body:has(.hero .panel) .raw-actions,
body:has(.hero .panel) .source-actions {
  gap: 10px !important;
  align-items: center !important;
}

body:has(.hero .panel) .btn,
body:has(.hero .panel) .small-btn,
body:has(.hero .panel) .copy {
  min-height: 44px !important;
  padding: 11px 16px !important;
  border: 1px solid rgba(126, 174, 231, 0.20) !important;
  border-radius: 999px !important;
  background: rgba(24, 35, 54, 0.72) !important;
  color: #eef2f8 !important;
  font: inherit !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}

body:has(.hero .panel) .btn:hover,
body:has(.hero .panel) .small-btn:hover,
body:has(.hero .panel) .copy:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(180, 214, 255, 0.48) !important;
  background: rgba(40, 50, 70, 0.78) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30) !important;
}

body:has(.hero .panel) .btn.github,
body:has(.hero .panel) .btn.scriptblox {
  background: rgba(37, 51, 76, 0.78) !important;
}

body:has(.hero .panel) .copy.success {
  border-color: rgba(79, 209, 139, 0.62) !important;
  background: rgba(79, 209, 139, 0.18) !important;
  color: #dcffe9 !important;
}

body:has(.hero .panel) .btn svg,
body:has(.hero .panel) .btn img,
body:has(.hero .panel) .copy svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
}

body:has(.hero .panel) .section h2 {
  color: #f6f8ff !important;
  font-size: 1.8rem !important;
  letter-spacing: -0.03em !important;
}

body:has(.hero .panel) .description-box,
body:has(.hero .panel) .source-card {
  border-color: rgba(126, 174, 231, 0.16) !important;
  border-radius: 22px !important;
  background: rgba(20, 28, 42, 0.66) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body:has(.hero .panel) .source-grid {
  display: grid !important;
  gap: 16px !important;
}

body:has(.hero .panel) .details > .source-card,
body:has(.hero .panel) .details > #loadstring-section {
  width: 100% !important;
  margin-top: 18px !important;
}

body:has(.hero .panel) .details > #loadstring-section {
  padding: 20px !important;
}

body:has(.hero .panel) .source-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

body:has(.hero .panel) .source-head h3 {
  margin: 0 !important;
  color: #f6f8ff !important;
}

body:has(.hero .panel) .source-label,
body:has(.hero .panel) .section p {
  color: #aeb9ce !important;
}

body:has(.hero .panel) pre,
body:has(.hero .panel) #loadstringText,
body:has(.hero .panel) #scriptText,
body:has(.hero .panel) #rawText {
  max-height: 50vh !important;
  padding: 18px !important;
  border: 1px solid rgba(126, 174, 231, 0.16) !important;
  border-radius: 18px !important;
  background: rgba(6, 9, 14, 0.82) !important;
  color: #d6dbe6 !important;
  line-height: 1.6 !important;
  overflow: auto !important;
}

.vx-action-toast {
  position: fixed;
  left: 50%;
  top: 22px;
  z-index: 1000;
  transform: translateX(-50%) translateY(-18px);
  padding: 12px 18px;
  border: 1px solid rgba(126, 174, 231, 0.24);
  border-radius: 999px;
  background: rgba(8, 13, 23, 0.94);
  color: #eef2f8;
  font-weight: 800;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.vx-action-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

@media (max-width: 980px) {
  body:has(.hero .panel) .hero { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  body:has(.hero .panel) .shell { width: min(100% - 16px, 1240px) !important; padding-top: 12px !important; }
  body:has(.hero .panel) .topbar { min-height: 54px !important; padding: 0 14px !important; }
  body:has(.hero .panel) .panel,
  body:has(.hero .panel) .section { padding: 18px !important; border-radius: 22px !important; }
  body:has(.hero .panel) .art { height: auto !important; }
  body:has(.hero .panel) .btn,
  body:has(.hero .panel) .small-btn,
  body:has(.hero .panel) .copy { min-height: 42px !important; padding: 10px 14px !important; }
}

/* Vexro Emote görünümünü yeni detay şablonuna da uygula. */
body:has(.vx-hero) {
  background:
    radial-gradient(circle at 12% 10%, rgba(74, 137, 220, 0.16), transparent 28%),
    radial-gradient(circle at 88% 20%, rgba(69, 108, 180, 0.12), transparent 26%),
    linear-gradient(180deg, #080d17 0%, #060a12 56%, #050811 100%) !important;
}

body:has(.vx-hero) .vx-shell {
  width: min(100% - 32px, 1240px) !important;
  margin: 0 auto !important;
  padding: 18px 0 48px !important;
}

body:has(.vx-hero) .vx-topbar {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(126, 174, 231, 0.20) !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, rgba(22, 34, 55, 0.78), rgba(7, 12, 22, 0.86)) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(180, 214, 255, 0.06) !important;
}

body:has(.vx-hero) .vx-topbar a {
  color: #eef2f8 !important;
}

body:has(.vx-hero) .vx-brandmark {
  color: #f4f7ff !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.28em !important;
}

body:has(.vx-hero) .vx-hero {
  margin-top: 18px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}

body:has(.vx-hero) .vx-panel {
  padding: 24px !important;
  border: 1px solid rgba(126, 174, 231, 0.20) !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, rgba(20, 32, 52, 0.84), rgba(8, 13, 23, 0.88)) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(180, 214, 255, 0.06) !important;
}

body:has(.vx-hero) .vx-hero > .vx-panel:first-child {
  align-self: start !important;
  overflow: hidden !important;
}

body:has(.vx-hero) .vx-art {
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  border-color: rgba(126, 174, 231, 0.28) !important;
  border-radius: 22px !important;
  box-shadow: 0 0 0 1px rgba(126, 174, 231, 0.08), 0 18px 50px rgba(0, 0, 0, 0.46) !important;
}

body:has(.vx-hero) .vx-art-overlay {
  background: transparent !important;
}

body:has(.vx-hero) .vx-title {
  margin: 0 !important;
  color: #f6f8ff !important;
  background: none !important;
  -webkit-text-fill-color: #f6f8ff !important;
  font-size: clamp(2rem, 3.8vw, 3.4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  text-wrap: balance;
}

body:has(.vx-hero) .vx-subtitle {
  margin: 12px 0 0 !important;
  color: #aeb9ce !important;
  line-height: 1.65 !important;
  max-width: 58ch !important;
}

body:has(.vx-hero) .vx-meta {
  margin: 0 0 18px !important;
  gap: 10px !important;
}

body:has(.vx-hero) .vx-pill {
  padding: 7px 13px !important;
  border-color: rgba(126, 174, 231, 0.20) !important;
  background: rgba(80, 90, 110, 0.12) !important;
  color: #eef2f8 !important;
  font-size: 0.84rem !important;
}

body:has(.vx-hero) .vx-pill.universal {
  background: rgba(90, 167, 255, 0.10) !important;
  border-color: rgba(90, 167, 255, 0.28) !important;
  color: #d9ecff !important;
}

body:has(.vx-hero) .vx-pill.updated {
  background: rgba(79, 209, 139, 0.10) !important;
  border-color: rgba(79, 209, 139, 0.24) !important;
  color: #d8f8e6 !important;
}

body:has(.vx-hero) .vx-source-card {
  margin-top: 18px !important;
  padding: 20px !important;
  border: 1px solid rgba(126, 174, 231, 0.16) !important;
  border-radius: 22px !important;
  background: rgba(20, 28, 42, 0.66) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body:has(.vx-hero) .vx-source-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

body:has(.vx-hero) .vx-source-head h3 {
  margin: 0 !important;
  color: #f6f8ff !important;
}

body:has(.vx-hero) .vx-source-label {
  color: #aeb9ce !important;
}

body:has(.vx-hero) .vx-source-actions {
  gap: 10px !important;
  align-items: center !important;
}

body:has(.vx-hero) .vx-btn {
  min-height: 44px !important;
  padding: 11px 16px !important;
  border: 1px solid rgba(126, 174, 231, 0.20) !important;
  border-radius: 999px !important;
  background: rgba(24, 35, 54, 0.72) !important;
  color: #eef2f8 !important;
  box-shadow: none !important;
}

body:has(.vx-hero) .vx-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(180, 214, 255, 0.48) !important;
  background: rgba(40, 50, 70, 0.78) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30) !important;
}

body:has(.vx-hero) .vx-btn.primary {
  background: rgba(37, 51, 76, 0.78) !important;
  border-color: rgba(126, 174, 231, 0.20) !important;
  color: #eef2f8 !important;
}

body:has(.vx-hero) .vx-code {
  max-height: 50vh !important;
  padding: 18px !important;
  border: 1px solid rgba(126, 174, 231, 0.16) !important;
  border-radius: 18px !important;
  background: rgba(6, 9, 14, 0.82) !important;
  color: #d6dbe6 !important;
  line-height: 1.6 !important;
  overflow: auto !important;
}

body:has(.vx-hero) .vx-notice {
  display: none !important;
}

body:has(.vx-hero) .vx-section {
  margin-top: 18px !important;
  padding: 24px !important;
  border: 1px solid rgba(126, 174, 231, 0.20) !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, rgba(20, 32, 52, 0.84), rgba(8, 13, 23, 0.88)) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(180, 214, 255, 0.06) !important;
}

body:has(.vx-hero) .vx-section-head h2 {
  color: #f6f8ff !important;
  font-size: 1.8rem !important;
  letter-spacing: -0.03em !important;
}

@media (max-width: 980px) {
  body:has(.vx-hero) .vx-hero { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  body:has(.vx-hero) .vx-shell { width: min(100% - 16px, 1240px) !important; padding-top: 12px !important; }
  body:has(.vx-hero) .vx-topbar { min-height: 54px !important; padding: 0 14px !important; }
  body:has(.vx-hero) .vx-panel,
  body:has(.vx-hero) .vx-section { padding: 18px !important; border-radius: 22px !important; }
}