/* Blueprint Grid & Studio Aesthetic */
body {
  background-color: #0b0d13;
  background-image: 
    linear-gradient(rgba(30, 34, 48, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 34, 48, 0.4) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0b0d13;
}
::-webkit-scrollbar-thumb {
  background: #1e2538;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2b3652;
}

/* Frame container device modes */
.device-mobile-mode {
  max-width: 390px !important;
  max-height: 740px !important;
  margin: auto !important;
  border-radius: 28px !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 8px #181d2c !important;
}

/* Tab active state */
.tab-btn.active {
  color: #38bdf8 !important;
  border-bottom: 2px solid #06b6d4 !important;
  background-color: #0f1117 !important;
}

/* Glowing effects */
.glow-cyan {
  box-shadow: 0 0 25px -5px rgba(6, 182, 212, 0.35);
}

/* Code highlighting text */
#codePre {
  tab-size: 2;
  white-space: pre-wrap;
  word-break: break-all;
}