.default-heading{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: white;
}

/* From Uiverse.io by ami-hp */ 
.darkThemeBtn * {
  transition: all 0.3s;
}

.darkThemeBtn input {
  width: 0;
  height: 0;
  visibility: hidden;
}

.darkThemeBtn label {
  border: 1px solid #efefef;
  background: rgba(239, 239, 239, 0.5);
  border-radius: 10px;
  height: 46px;
  width: 46px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.darkThemeBtn label:active {
  border-radius: 5px;
}

.darkThemeBtn label svg {
  position: absolute;
  width: 16px;
  transition: 0.3s;
  z-index: 1;
  fill: #000;
}

.darkThemeBtn label svg.sun {
  width: 20px;
  opacity: 0;
  fill: #fff;
}

.darkThemeBtn label svg.moon {
  opacity: 1;
}

.darkThemeBtn input:checked + label {
  background: #4a6cf7;
}

.darkThemeBtn input:checked + label svg.sun {
  opacity: 1;
}

.darkThemeBtn input:checked + label svg.moon {
  opacity: 0;
}

.darkThemeBtn input:checked ~ span {
  background-color: #16174b;
}

/* From Uiverse.io by zanina-yassine */ 
.button2 {
  min-width: 120px;

  position: relative;
  cursor: pointer;

  padding: 12px 17px;
  border: 0;
  border-radius: 7px;

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  background: radial-gradient(
    ellipse at bottom,
    rgba(71, 81, 92, 1) 0%,
    rgba(11, 21, 30, 1) 45%
  );

  color: rgb(255, 255, 255, 0.66);

  transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.button2::before {
  content: "";
  width: 70%;
  height: 1px;

  position: absolute;
  bottom: 0;
  left: 15%;

  background: rgb(255, 255, 255);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0.2;

  transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.button2:hover {
  color: rgb(255, 255, 255, 1);
  transform: scale(1.1) translateY(-3px);
}

.button2:hover::before {
  opacity: 1;
}


body, html {
    margin: 0;
    height: 100%;
    overflow-x: hidden;
    padding-left: 1%;
    padding-right: 1%; 
}

h1, p {
    text-align: center;
}

a {
  color: lightblue !important;
}
a:hover {
  color: blueviolet !important;
}
a:visited {
  color: lightblue !important;
}

/* From Uiverse.io by adamgiebl */ 
/* Inspired by twitter.com/marina_uiux */
/*
Copyright - 2024 adamgiebl (Adam Giebl)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
*/

/* Button Styles */

/* From Uiverse.io by adamgiebl */ 
/* Inspired by twitter.com/marina_uiux */

.button {
  font-size: 17px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgb(56, 56, 56) 0%, rgb(36, 36, 36) 66%, rgb(41, 41, 41) 100%);
  color: rgb(218, 218, 218);
  border: none;
  padding: 2px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.button span {
  border-radius: 10px;
  padding: 0.8em 1.3em;
  padding-right: 1.2em;
  text-shadow: 0px 0px 20px #4b4b4b;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  transition: all 0.3s;
  background-color: rgb(29, 29, 29);
  background-image: radial-gradient(at 95% 89%, rgb(15, 15, 15) 0px, transparent 50%), radial-gradient(at 0% 100%, rgb(17, 17, 17) 0px, transparent 50%), radial-gradient(at 0% 0%, rgb(29, 29, 29) 0px, transparent 50%);
}

.button:hover span {
  background-color: rgb(26, 25, 25);
}

.button-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-conic-gradient(rgb(48, 47, 47) 0.0000001%, rgb(51, 51, 51) 0.000104%) 60% 60%/600% 600%;
  filter: opacity(10%) contrast(105%);
  -webkit-filter: opacity(10%) contrast(105%);
}

.button svg {
  width: 15px;
  height: 15px;
}



button {
  padding: 5px;
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: 2%;
}

#inputfile {
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: 2%;
}

p, h1 {
  font-family: helvetica, sans-serif;
}

.intro {
  color: white;
}

.mainheading {
  text-decoration: underline;
  text-align: left;
  display: inline-block;
}

.together-beginning {
  display: inline-block;
}

.together-beginning::before {
  padding-left: 2px;
}

.madebynotice {
  display: inline-block;
  padding-left: 1%;
}

.tutorialnotice {
  font-size: small;
}

.explainer {
  margin-left: 10px;
  text-align: left !important;
}

py-terminal {
  border: solid 1px white;
  margin-bottom: 5%;
}

button {
  margin-top: 10px;
  padding: 8px 16px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

#pymoduleinstalls {
  width: 100%;
  font-size: medium;
}

/* From Uiverse.io by satyamchaudharydev */ 
.form {
  --width-of-input: 200px;
  --border-height: 1px;
  --border-before-color: rgba(221, 221, 221, 0.39);
  --border-after-color: #5891ff;
  --input-hovered-color: #4985e01f;
  position: relative;
  width: var(--width-of-input);
 }
 /* styling of Input */
 .input {
  color: #fff;
  font-size: 0.9rem;
  background-color: transparent;
  width: 100%;
  box-sizing: border-box;
  padding-inline: 0.5em;
  padding-block: 0.7em;
  border: none;
  border-bottom: var(--border-height) solid var(--border-before-color);
 }
 /* styling of animated border */
 .input-border {
  position: absolute;
  background: var(--border-after-color);
  width: 0%;
  height: 2px;
  bottom: 0;
  left: 0;
  transition: 0.3s;
 }
 /* Hover on Input */
 input:hover {
  background: var(--input-hovered-color);
 }
 
 input:focus {
  outline: none;
 }
 /* here is code of animated border */
 input:focus ~ .input-border {
  width: 100%;
 }
 /* === if you want to do animated border on typing === */
 /* remove input:focus code and uncomment below code */
 /* input:valid ~ .input-border{
   width: 100%;
 } */


 /* Monaco Editor Cursor Styling */
.monaco-editor {
  --monaco-cursor-transition: 0.1s;
}

.monaco-editor .cursor {
  transition: all var(--monaco-cursor-transition) ease !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Notification container */
#notification-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 10000 !important;
    width: 350px !important;  /* Fixed width */
}

/* Base notification */
.notification {
    background: #1e1e1e !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 0 !important;
    transform: translateX(100%) !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Show state */
.notification.show {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Light theme */
html[data-theme="light"] .notification {
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Message content */
.notification span {
    display: block !important;
    width: 100% !important;
    word-break: break-word !important;
    margin-bottom: 8px !important;
}

/* Progress bar */
.notification-progress {
    height: 2px !important;
    width: 100% !important;
    background: rgba(0, 122, 204, 0.3) !important;
    margin-top: 8px !important;
    transform-origin: left !important;
    transform: scaleX(0) !important;
}

.notification-progress.active {
    transform: scaleX(1) !important;
    transition: transform 3s linear !important;
    background: #007acc !important;
}

#banner-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    max-width: 400px !important;
}

.banner-notification {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    margin: 0 !important;
    opacity: 0 !important;
    transform: translateX(100%) !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    position: relative !important;
    width: 100% !important;
    min-width: 300px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 15px !important;
}

.banner-notification.banner-show {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.banner-text {
    display: block !important;
    width: 100% !important;
    word-wrap: break-word !important;
    margin: 0 !important;
    padding: 0 !important;
}

.banner-progress {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: #007acc !important;
    transform-origin: left !important;
    transform: scaleX(1) !important;
}

.banner-progress.active {
    transform: scaleX(0) !important;
    transition: transform 10s linear !important;
}

/* Light theme support for progress bar */
html[data-theme="light"] .banner-progress {
    background: #007acc !important;
    opacity: 0.8 !important;
}

.banner-content {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
}

.banner-close {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: #ffffff80 !important;
    transition: color 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
}

.banner-close:hover {
    color: #ffffff !important;
}

/* Light theme support for close button */
html[data-theme="light"] .banner-close {
    color: #33333380 !important;
}

html[data-theme="light"] .banner-close:hover {
    color: #333333 !important;
}

/* Popup styles */
.popup-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(3px) !important;
}

.popup-content {
    background: #1e1e1e !important;
    padding: 24px !important;
    border-radius: 8px !important;
    width: 400px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.popup-content h3 {
    margin: 0 0 16px 0 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.popup-content p {
    margin: 0 0 24px 0 !important;
    color: #cccccc !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.popup-buttons {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

.popup-buttons button {
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.popup-buttons .cancel {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.popup-buttons .cancel:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.popup-buttons .confirm {
    background: #dc3545 !important;
    border: none !important;
    color: #ffffff !important;
}

.popup-buttons .confirm:hover {
    background: #c82333 !important;
}

/* Light theme support */
html[data-theme="light"] .popup-content {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] .popup-content h3 {
    color: #333333 !important;
}

html[data-theme="light"] .popup-content p {
    color: #666666 !important;
}

html[data-theme="light"] .popup-buttons .cancel {
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #333333 !important;
}

html[data-theme="light"] .popup-buttons .cancel:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

.tab .tab-actions i {
    color: rgba(255, 255, 255, 0.7) !important;  /* Semi-transparent white */
    font-size: 14px !important;
    cursor: pointer !important;
    transition: opacity 0.2s !important;
}

.tab .tab-actions i:hover {
    color: rgba(255, 255, 255, 1) !important;  /* Full white on hover */
}

/* Override light theme styles for tab icons */
html[data-theme="light"] .tab .tab-actions i {
    color: rgba(255, 255, 255, 0.7) !important;  /* Keep white in light mode */
}

html[data-theme="light"] .tab .tab-actions i:hover {
    color: rgba(255, 255, 255, 1) !important;  /* Keep white hover in light mode */
}

/* Force download icon to stay white in both themes */
html[data-theme="light"] [id*="download"] i.fa,
html[data-theme="light"] [id*="download"] i.fa-solid,
html[data-theme="dark"] [id*="download"] i.fa,
html[data-theme="dark"] [id*="download"] i.fa-solid {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Import Roboto font for Material Design */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
/* Set Roboto as the font for Material Design elements */
md-filled-button, md-outlined-button, md-filled-tonal-button {
    font-family: 'Roboto', sans-serif;
}
py-terminal {
    border-radius: 8px;
    overflow: hidden;
}
html, body {
    transition: background-color 0.3s ease;
}
a, .fa-solid, .intro, .explainer, .default-heading {
    transition: color 0.3s ease;
}
#matrix-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    opacity: 0.15;
    transition: opacity 0.3s ease;
    display: block;  /* Ensure it's displayed */
    pointer-events: none;  /* Allow clicking through */
}

/* Update body background to be transparent */
html {
    min-height: 100vh;
    background: rgb(15, 32, 39) !important;
}
body {
    min-height: 100vh;
    background: transparent;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.cursor {
    display: inline-block;
    animation: blink 1s step-start infinite;
    font-weight: lighter;
    color: #d4d4d4;
    font-size: 1.2em;
    position: relative;
    top: 1px;
}
@keyframes blink {
    50% {
        opacity: 0;
    }
}
.darkThemeBtn {
    position: fixed;
    top: 10px;
    left: 20px;
    z-index: 1000;  /* Ensure it stays above other elements */
}

/* Re-enable text selection for Monaco and terminal */
#editor, py-terminal {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}
/* Ensure Monaco cursor is visible */
.monaco-editor .cursor {
    display: block !important;
    visibility: visible !important;
}
.popup {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    max-width: 300px !important;
    background: rgba(50, 50, 50, 0.8) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 12px 16px !important;
    transform: translateY(-150%);
    transition: transform 0.3s ease-in-out;
    z-index: 10000;
}
.popup.show {
    transform: translateY(0);
}
.popup-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
#alertMessage {
    color: white !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}
.button2 {
    align-self: flex-end !important;
    background: transparent !important;
    border: none !important;
    color: #007AFF !important;
    font-size: 13px !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    transition: opacity 0.2s !important;
}
.button2:hover {
    opacity: 0.8 !important;
}
.cursor {
    display: none !important;  /* Hide the cursor for notifications */
}
.input-wrapper {
    position: relative;
    width: 100%;
    display: inline-block !important;
    font-family: Helvetica, sans-serif;
}

.input-wrapper .tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background: rgba(50, 50, 50, 0.9);
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.2s ease;
    pointer-events: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.input-wrapper:hover .tooltip,
.input-wrapper:focus-within .tooltip {
    visibility: visible;
    opacity: 1;
}
.editor-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.tab-bar {
    height: 35px;
    background: #252526;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 8px 8px 0 0;
    border: 1px solid #ddd;
    border-bottom: none;
}
.tab {
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 25px;
    background: #2d2d2d;
    color: #fff;
    cursor: pointer;
    user-select: none;
    position: relative;
    border-radius: 4px 4px 0 0;
    margin-right: 1px;
    transition: opacity 0.2s;
}
.tab.dragging {
    opacity: 0.5;
    cursor: move;
}
.tab-name {
    font-family: Helvetica, sans-serif;
}
.tab .tab-actions {
    display: none;
    margin-left: 8px;
    font-family: Helvetica, sans-serif;
}
.tab:hover .tab-actions {
    display: flex;
    gap: 8px;
}
.tab .tab-actions i {
    color: rgba(255, 255, 255, 0.7) !important;  /* White with opacity */
    font-size: 14px !important;
    cursor: pointer !important;
    transition: opacity 0.2s !important;
}
.tab .tab-actions i:hover {
    color: rgba(255, 255, 255, 1) !important;  /* Full white on hover */
}
/* Light theme support */
html[data-theme="light"] .tab .tab-actions i {
    color: rgba(0, 0, 0, 0.7) !important;  /* Dark with opacity for light theme */
}
html[data-theme="light"] .tab .tab-actions i:hover {
    color: rgba(0, 0, 0, 1) !important;  /* Full black on hover for light theme */
}
.tab.active {
    background: #1e1e1e;
}
/* Light theme support */
html[data-theme="light"] .tab-bar {
    background: #f3f3f3;
}
html[data-theme="light"] .tab {
    background: #e1e1e1;
    color: #333;
}
html[data-theme="light"] .tab.active {
    background: #ffffff;
    color: #000;
}
.tabs-wrapper {
    display: flex;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 0 2px;  /* Add padding for first/last tab */
    gap: 1px;       /* Space between tabs */
}
.new-tab-btn {
    background: transparent;
    border: none;
    color: inherit;
    padding: 0 10px;
    cursor: pointer;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s;
    position: relative;
}
.new-tab-btn:hover {
    opacity: 1;
}
.new-tab-btn[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: rgba(50, 50, 50, 0.9);
    color: white;
    font-size: 12px;
    font-weight: normal;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    font-family: Helvetica, sans-serif;
    margin-bottom: 5px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
/* Popup styles */
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.popup-content {
    background: #1e1e1e;
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    font-family: Helvetica, sans-serif;
}
.popup-content h2 {
    margin: 0 0 15px 0;
    font-size: 18px;
}
.popup-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
.popup-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: Helvetica, sans-serif;
}
.popup-btn.cancel {
    background: transparent;
    color: inherit;
    border: 1px solid #666;
}
.popup-btn.confirm {
    background: #007acc;
    color: white;
}
/* Light theme support */
html[data-theme="light"] .popup-content {
    background: #ffffff;
    color: #000;
}
html[data-theme="light"] .popup-btn.cancel {
    border-color: #ccc;
}
/* Notification container */
#notification-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    pointer-events: none !important;
}
/* Notification styles */
.notification {
    pointer-events: auto !important;
    width: 300px !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.95) 0%, rgba(24, 32, 45, 0.95) 100%) !important;
    color: white !important;
    font-family: Helvetica, sans-serif !important;
    font-size: 14px !important;
    opacity: 0 !important;
    transform: translateX(100%) !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}
/* Light theme notification */
html[data-theme="light"] .notification {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 242, 245, 0.95) 100%) !important;
    color: #333 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="light"] .notification-progress {
    background: rgba(0, 122, 204, 0.2) !important;
}
html[data-theme="light"] .notification-progress.active {
    background: #007acc !important;
}
html[data-theme="light"] .notification-dismiss {
    color: #007acc !important;
}
.notification.show {
    opacity: 1 !important;
    transform: translateX(0) !important;
}
.notification span {
    flex: 1 !important;
    line-height: 1.4 !important;
}
.notification-dismiss {
    background: none !important;
    border: none !important;
    color: #007acc !important;
    cursor: pointer !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    opacity: 0.7 !important;
}
.notification-dismiss:hover {
    opacity: 1 !important;
}
.notification-progress {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: rgba(0, 122, 204, 0.3) !important;
    transform-origin: left !important;
    transform: scaleX(0) !important;
}
.notification-progress.active {
    transform: scaleX(1) !important;
    transition: transform 3s linear !important;
    background: #007acc !important;
}
.rename-popup {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 10001 !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: Helvetica, sans-serif !important;
}
.rename-content {
    background: #1e1e1e !important;
    padding: 24px !important;
    border-radius: 8px !important;
    width: 300px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.rename-content h3 {
    margin: 0 0 16px 0 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    font-family: Helvetica, sans-serif !important;
}
#renameInput {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: #2d2d2d !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    margin-bottom: 16px !important;
    outline: none !important;
    box-sizing: border-box !important;
    font-family: Helvetica, sans-serif !important;
}
#renameInput:focus {
    border-color: #007acc !important;
}
.rename-buttons {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}
.rename-btn {
    padding: 6px 16px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
    font-family: Helvetica, sans-serif !important;
}
.rename-btn.cancel {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}
.rename-btn.confirm {
    background: #007acc !important;
    color: #fff !important;
}
.rename-btn:hover {
    opacity: 0.8 !important;
}
/* Light theme support */
html[data-theme="light"] .rename-content {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="light"] .rename-content h3 {
    color: #333 !important;
}
html[data-theme="light"] #renameInput {
    background: #f5f5f5 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #333 !important;
}
html[data-theme="light"] .rename-btn.cancel {
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #333 !important;
}
.customize-content {
    width: 80% !important;
    height: 80% !important;
    max-width: 1200px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.popup-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.popup-header h3 {
    margin: 0 !important;
}
.close-popup {
    background: none !important;
    border: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    padding: 8px !important;
    font-size: 18px !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s !important;
}
.close-popup:hover {
    opacity: 1 !important;
}
#customizeFrame {
    flex: 1 !important;
    width: 100% !important;
    border: none !important;
    background: #1e1e1e !important;
}
/* Light theme support */
html[data-theme="light"] .customize-content {
    background: #ffffff !important;
}
html[data-theme="light"] .popup-header {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="light"] .close-popup {
    color: #333333 !important;
}
html[data-theme="light"] #customizeFrame {
    background: #ffffff !important;
}
/* Smooth transitions for drag and drop */
.tab {
    transition: transform 0.2s;
}
:root {
--md-sys-color-primary: rgb(61, 61, 61);
--md-sys-color-secondary: rgb(175, 175, 175);
--md-sys-color-tertiary: rgb(255, 255, 255);
--md-sys-color-primary-container: rgb(255, 255, 255);
--md-sys-color-secondary-container: rgb(255, 255, 255);
--md-sys-color-tertiary-container: rgb(255, 255, 255);
--md-sys-color-background: rgb(255, 255, 255);
--md-sys-color-surface: rgb(255, 255, 255);
--md-sys-color-surface-container: rgb(110, 110, 110);
--md-sys-color-surface-container-lowest: rgb(83, 83, 83);
--md-sys-color-surface-container-high: rgb(94, 94, 94);
--md-sys-color-surface-container-highest: rgb(216, 216, 216);
--md-sys-color-surface-variant: rgb(255, 255, 255);

}