body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(19, 44, 97, 1) 100%);
}
.blocklyFlyoutScrollbar {
   scrollbar-width: thin;
}
#parent{
   width: 100%;
   height: 100%;
   overflow: hidden;
}
#child{
   width: 100%;
   height: 100%;
   overflow-y: scroll;
   padding-right: 17px;
   box-sizing: content-box;
}
::-webkit-scrollbar {
   display: none;
}
.blocklyFlyoutBackground {
overflow-y: auto !important;
}
.blocklyToolbox
{
   background: rgba(255, 255, 255, 0.575) !important;
   width: 185px;
   font-weight: bold !important;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}
.blocklyFlyoutBackground::-webkit-scrollbar {
width: 6px;
}
.blocklyFlyoutBackground::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.3);
border-radius: 4px;
}
.blocklyFlyoutBackground::-webkit-scrollbar:vertical {
display: none;
}
.hover-lift {
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
   transform: translateY(-4px);
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
.loading {
   display: inline-block;
   width: 20px;
   height: 20px;
   border: 3px solid rgba(255,255,255,.3);
   border-radius: 50%;
   border-top-color: #fff;
   animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
   to { transform: rotate(360deg); }
}
.fade-in {
   animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
}
.slide-up {
   animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
   from { 
       transform: translateY(100%);
       opacity: 0;
   }
   to { 
       transform: translateY(0);
       opacity: 1;
   }
}
.banner-transition {
   transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.banner-hidden {
   transform: translateY(100%);
   opacity: 0;
}
.banner-visible {
   transform: translateY(0);
   opacity: 1;
}
#blocklyDiv {
   height: 100%;
   width: 100%;
}
.blockly-container {
   height: calc(100vh - 210px);
   width: 100%;
}

.blocklyScrollbarHandle,
.blocklyFlyoutScrollbar,
.blocklyMainWorkspaceScrollbar,
.blocklyWorkspaceScrollbar,
.blocklyZoom {
display: none !important;
}

.blocklyFlyoutBackground::-webkit-scrollbar {
display: none;
}

.blocklyFlyoutBackground {
overflow: hidden !important;
}
@media (max-width: 768px) {
   .sidebar {
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       z-index: 20;
       transform: translateY(0);
   }
   .main-content {
       padding-bottom: 140px !important;
   }
   .blockly-container {
       height: calc(100vh - 200px);
   }
}

.code-editor-wrapper {
   position: relative;
   border-radius: 0.5rem;
   overflow: hidden;
}
.code-editor {
   position: relative;
   font-family: 'Courier New', Courier, monospace;
   font-size: 14px;
   line-height: 1.5;
}
.code-editor textarea {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 200px;
   padding: 1rem;
   margin: 0;
   border: none;
   outline: none;
   background: transparent;
   color: transparent;
   caret-color: #fff;
   resize: none;
   font-family: 'Courier New', Courier, monospace;
   font-size: 14px;
   line-height: 1.5;
   z-index: 2;
}
.code-editor pre {
   margin: 0;
   padding: 1rem;
   background: #1e293b;
   border: 1px solid #334155;
   border-radius: 0.5rem;
   overflow-x: auto;
   pointer-events: none;
}
.code-editor pre code {
   font-family: 'Courier New', Courier, monospace;
   font-size: 14px;
   line-height: 1.5;
   background: transparent;
   white-space: pre;
}
.token.comment { color: #6b7280; }
.token.string { color: #86efac; }
.token.keyword { color: #c084fc; }
.token.function { color: #60a5fa; }
.token.number { color: #fbbf24; }
.token.operator { color: #f472b6; }
.token.punctuation { color: #94a3b8; }