/**
 * these are styles for index.html
 */
 html,
 body {
   overflow: hidden;
 }
 
 .content {
   margin-left: 65px;
   height: 100vh;
   position: relative;
   overflow: hidden;
 }
 
 #frame {
   width: 100%;
   height: 100%;
   border: none;
 }
 
 .modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   backdrop-filter: blur(8px);
   background-color: rgba(0, 0, 0, 0.2);
   opacity: 0;
   pointer-events: none;
   transition: 0.27s ease;
   z-index: 999;
 }
 
 .modal-overlay.active {
   opacity: 1;
   pointer-events: auto;
 }
 
 .main-modal {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.92);
   background: var(--fourth-bg);
   padding: 1.1rem;
   border-radius: 22px;
   border: 2.2px solid rgba(255, 255, 255, 0.15);
   opacity: 0;
   transition: 0.27s ease;
   z-index: 1000;
   max-width: 90%;
   width: 400px;
   text-align: center;
   pointer-events: none;
 }
 
 .main-modal.active {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
   pointer-events: auto;
 }
 
 .modal-content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
 }
 
 .modal-title {
   font-weight: 600;
   margin-bottom: 0.5rem;
   font-size: 1.5rem;
   color: white;
   text-align: left;
   width: 100%;
 }
 
 .modal-body {
   font-size: 1rem;
   margin-bottom: 1.5rem;
   color: rgba(255, 255, 255, 0.85);
   text-align: left;
   width: 100%;
 }
 
 .modal-button {
   padding: 0.62rem 1.35rem;
   border: none;
   background-color: var(--button-bg);
   color: white;
   font-weight: 600;
   font-size: 1.15rem;
   border-radius: 12px;
   cursor: pointer;
   transition: 0.2s ease;
   align-self: flex-end;
 }
 
 .modal-button:hover {
   background-color: var(--button-hover);
 }
 
 
 @keyframes pulse {
   0%, 100% {
     transform: scale(1);
   }
   50% {
     transform: scale(1.06);
   }
 }
 
 @keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
 }
 
 #loader-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   transition: opacity 0.2s ease;
 }
 
 #loader-overlay::before {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--bg);
   opacity: 0.6;
   z-index: -1;
 }
 
 .loader-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.3rem;
 }
 
 #loader-logo {
   width: 60px;
   height: 60px;
   animation: fadeIn 0.3s ease-in-out forwards, pulse 2s ease-in-out infinite;
 }
 
 #loader-text {
   color: rgba(255, 255, 255, 0.75);
   text-align: center;
   font-family: "Inter", sans-serif;
   opacity: 0;
   animation: fadeIn 0.3s ease-in-out 0.1s forwards;
 }
 
 pre {
   background: #1e1e1e;
   padding: 0.75rem 1rem;
   border-radius: 8px;
   overflow-x: auto;
   color: var(--primary);
   font-family: monospace;
   font-size: 12px;
   width: 100%;
   box-sizing: border-box;
   margin-bottom: 1rem;
   text-align: left;
 }
 
 pre code {
   white-space: pre-wrap;
   word-break: break-all;
 }