@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900;1000&family=Roboto:wght@300;400;500;700&display=swap");
:root{
   --font: 'roboto', sans-sarif;
   --w : #fff;
   --fc : #919ad9;
   --fs: #2e375c;
   --tab: #1c2644;
}
[data-theme="dark"] {
  --bg: #121212;
  --surface: #1e1e1e;
  --accent: #bb86fc;
  --head-tab: #272727;
  --elements-tab: #1f1f1f;
  --tab-button: #2a2a2a;
  --input-bg: #2c2c2c;
  --input-border: #444;
  --select-bg: #333;
  --font-color: #e0e0e0;
  --font-color-home: #ffffff;
}

[data-title] {
  position: relative;
  cursor: pointer;
}

[data-title]::after {
  content: attr(data-title);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(10px); /* niche se start hoga */
  background: black;
  color: white;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  font-size: 14px;
  z-index: 1000;
  box-shadow: 0px 2px 8px rgba(0,0,0,0.3);
  pointer-events: none; /* invisible hone par click na ho */
  transition: all 0.3s ease; /* smooth animation */
}

/* Tooltip arrow */
[data-title]::before {
  content: "";
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  border-width: 6px;
  border-style: solid;
  border-color: black transparent transparent transparent;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

[data-title]:hover::after,
[data-title]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0); /* upar ki taraf halka sa move */
}

html body {
   background: #0f1023 !important;
   color: white;
   margin: 0;
   font-family: 'Roboto', sans-sarif;
   overscroll-behavior-y: contain;
}
button{font-family: 'Roboto', sans-sarif;}
/*.drag-box {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
  cursor: grab;
  position: fixed;
  top: 100px;
  left: 100px;
  margin: 10px;
}*/
body::-webkit-scrollbar, #webedmenu::-webkit-scrollbar{
  display: none;
}
ppp::-webkit-scrollbar{
  /*display: none;*/
  width: 5px;background: grey;
}
ppp::-webkit-scrollbar-thumb{
  background: #304073;border-radius: 10px;
}
#foo {
   position: fixed;
   z-index: 102;   
   user-select: none;
   touch-action: none;
   cursor: grab;
   background: #1c2644;
   padding: 3px;border-radius: 4px;
   transition: .3s margin-left;
}
#foo svg{color: white;}

footer > button, .tab > button, #projectList  button, #fileList  button {
   border: none; background: #304073;font-family: 'roboto', sans-sarif;color: white;font-weight: 300;

}
.headDec button, .menuCode{margin: 0 5px; background: #304073;font-family: 'roboto', sans-sarif;color: white;font-weight: 300;padding: 3px 10px;border: none;}
.actm{display: flex !important;}

#projectList li{
   list-style-type: none; background: #222; margin: 5px 10px; padding: 5px 15px; border-radius: 2px;
}
#projectList li button {
   margin: 0 10px;float: right;background: transparent;
}

#fileList{display: flex;width: 100%; padding: 0; overflow: auto;}
#fileList .fileNamecssjs{display: flex;}
.fileNamecssjs button{margin: 0 0 0 10px;}
button:hover{background:rgba(0,0,0,.3);cursor:pointer;}
summary:hover{background:rgba(0,0,0,.3);cursor:pointer;}
#editor-wrapper, #editModal, #sidebar, #filesTab, #fileManager, #fullcodearea, #seticon, #iconEditor, #addSh, #treeTabForIcon, #previewIconTab, #iconEditorTab{
   /*background: #1c2644;*/
   background-color: rgba(90,74,140,.4);
   backdrop-filter: blur(10px);
   position: fixed;
   left: 10px;top: 10px;
   height: 90%; width: 80%;
   overflow-x: auto;
   scrollbar-width: none;
   border-radius: 5px;
   display: none;
   z-index: 100;
   resize: both;
}
   .tab::-webkit-scrollbar{display: none;}
   
#editor-wrapper > #controls > button,
#controls input,
#controls  textarea,
.tab textarea,
#editor-wrapper > #controls > select {
   border: none; background: #304073;font-family: 'roboto', sans-sarif;color: white;width: 90%; margin: 2px; padding: 5px; 
}
#editor-wrapper > #controls{
   text-align: center; 
}
#editor-wrapper{
   right: 5px;top: 5px; height: 80%; width: 100px;
}
#tree{ font-size: 14px; }
.tab button {border: none; background: #304073;font-family: 'roboto', sans-sarif;color: white; padding: 5px; }

#canvas {
      flex: 1;
      background: #000;
      overflow: auto;
      border-radius: 0 0 6px 6px;
      width: 100%;height: 100%;
    }

    .editable {
      outline: 1px dashed #006cff;
      min-height: 30px;
      transition: border-color 0.3s ease;
    }
    .editable:hover {
      border-color: #45528a;
      outline: none;
    }
    .selected {
      outline: 2px dashed darkgreen;
    }

    .tree-item {
      padding-left: 10px;
      margin-bottom: 6px;
      font-size: 14px;
      font-weight: 200;
    }

    .tree-label {
      cursor: pointer;
      color: #f1f1f1;
    }

    .tree-label:hover {
      text-decoration: underline;
      font-weight: 400;
    }

    .tree-actions button {
      margin-left: 5px;
      font-size: 14px;
      padding: 2px 6px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .tree-actions button:hover {
      background: #f1f1f1;
    }

details {
   font-family: var(--font);
   font-weight: 200;
   color: rgb(200,200,200);
   padding: 0 5px;
}
summary {
   background: rgba(200,200,200,.1);
   padding: 5px; margin: 0 0 5px 0;
   font-weight: 400;
   color: var(--w);
}
details div {
    display: flex;justify-content: space-between;align-items: center;gap: 10px;
}
details icoopt{
   background: rgba(0,0,0,.3); margin: 5px 0; display: flex; justify-content: center;align-items: center;gap: 2px;border-radius: 5px;
}
details icoopt svg{padding: 5px;}
details icoopt svg:hover{background: rgba(100,100,100,.5);}

details div input, details div select{
    width: 50%;
}
    details input,
    .tab input[type="text"],
    details select {
      background-color: var(--fs);
      font-family: 'roboto', sans-sarif;
      color: #fff;
      padding: 5px 8px;
      margin: 5px 0;
      border: none;
      border-radius: 4px;
    }

    details input[type="color"] {
      padding: 0;
      border: none;
      width: 40px;
      height: 30px;
      cursor: pointer;
    }

    details input[type="range"] {
      width: 150px;
    }
    details input[type="button"]{
       border: none; background: #304073;font-family: 'roboto', sans-sarif;color: white;font-weight: 300;
       
    }

    details select {
      width: 150px;
    }

    ::placeholder {
      color: #bbb;
    }
    .actw{ display:none;position:absolute; }
    .act:hover .actw{ display:block; }
    
  
  .outer-box {
    position: relative;
    width: 100%;           /* relative to parent width */
    height: 200px;          /* relative to parent height */
    background: lightgreen;
    outline: 0.5% solid green;
    border-radius: 2%;
    background: #474747;
  }

  .outer-box input {
    position: absolute;
    width: 15%;           /* responsive input width */
    padding: 1%;
    text-align: center;
    background: white;
    outline: 0.3% solid green;
    border: none;
    border-radius: 8%;
    font-size: 90%;
    background: #2c2c2c;
  }

  /* Outer inputs (positions in %) */
  .top-center { top: 3%; left: 50%; transform: translateX(-50%); }
  .left-center { top: 50%; left: 3%; transform: translateY(-50%); }
  .right-center { top: 50%; right: 3%; transform: translateY(-50%); }
  .bottom-center { bottom: 3%; left: 50%; transform: translateX(-50%); }

  /* Inner box */
  .inner-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 55%;           /* inner box takes 55% of outer */
    height: 55%;
    transform: translate(-50%, -50%);
    background: cyan;
    outline: 0.5% solid green;
    border-radius: 3%;
    background: #1a1a1a;
  }

  .inner-box input {
    position: absolute;
    width: 30%;           /* relative to inner box */
    padding: 3%;
    margin: 0;
    text-align: center;
    background: white;
    border-radius: 8%;
    outline: 0.3% solid blue;
    font-size: 90%;
    background: #2c2c2c;
  }

  /* Inner inputs */
  .inner-top { top: 5%; left: 50%; transform: translateX(-50%); }
  .inner-right { top: 50%; right: 5%; transform: translateY(-50%); }
  .inner-bottom { bottom: 5%; left: 50%; transform: translateX(-50%); }
  .inner-left { top: 50%; left: 5%; transform: translateY(-50%); }


input[type="number"] {
  width: 50px;
  margin: 4px;
  text-align: center;
}

.drag-handle{
   background: var(--fc);
   position: sticky;width: 100%;top: 0;
   cursor: move;
}

.popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}

.popup {
  background: white;
  color: black;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  width: 300px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.popup-icon {
  font-size: 32px;
  color: green;
  background: #e6ffee;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
}

.popup-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

.popup-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

.accept {
  background-color: #5b47fb;
  color: white;
}

.cancel {
  background-color: #eee;
  color: #333;
}

   #iconList{
       display: flex;
        flex-wrap: wrap;
        gap: 1px;
        justify-content: space-around;
        max-width: 960px;
        margin: auto;
    }

.hidden {
  display: none;
}

.sw{margin: 5px 10px;background: #111;color: #fff;display: flex;flex-direction: row;border-bottom: 2px solid transparent;}
.tty{background: #333; padding: 5px;text-transform: uppercase;}
.fileNamecssjs{list-style-type: none; padding: 5px;}
.sw:hover{background: #222;border-bottom: 2px solid #6274c3;}

.fullppppp{width: 100%; height: 100%; position: fixed;top: 0;left: 0;z-index: 9;}
.fgfg{position: fixed;top: 0;left: 0;z-index: 104;}

#controls button:hover{ background: black; }

.options{
   background: rgba(50,44,100,.2); margin: 0 0 0 5px; padding: 2px;border-radius: 5px;align-items: center;
}
.options svg{background: rgba(50,44,100,.2); padding: 3px; transition: all .3s;}
.options svg:hover{background: rgba(50,44,100,.5);}

[tab="menu"]{
   display: block;background: black;color: white; position: fixed;top: 0;left:0; width:100%;height: 100%;z-index: 102;
   overflow: auto;
}
#fileEditor{font-size: 13px;}
.ttt button, .ttt input, .ttt textarea{
   background: #222;color: #999;padding: 5px;border-radius: 2px;outline: none;font-family: 'roboto', sans-sarif; border: none;
}
.ttt textarea{height: 435px;width: 90%;color: white; padding: 10px; margin: 5px;}
.tt2 input{color: #fff;}
.tt2 input:placeholder{color: #999;}

.tt2 button:hover, .tt3 button:hover, .tt4 button:hover {
   color: #999;border-bottom: 1px solid #888;
}
.btnhover {
   color: #fff !important;
   border-bottom: 1px solid #fff !important;
}

#splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    z-index: 9999;
    transition: opacity 0.2s ease;
  }

  #splash.hide {
    opacity: 0;
    pointer-events: none;
  }

  #main-content {
    display: none;
    padding: 20px;
  }

  #main-content.show {
    display: block;
  }
  
.welcome {
   /*background-image: url('https://images.pexels.com/photos/943096/pexels-photo-943096.jpeg?auto=compress&cs=tinysrgb&h=650&w=940');
   */height: 500px; width: 100%;
   background-size: cover;
   background-position: center top;
}
.welcome h1{
   font-weight: 400; padding: 30px 15px 10px 15px; 
}
.welcome p{font-weight: 200; padding: 0px 15px 0px 15px;}
.welcome .bbbttt {background: #384c70; color: #fff; padding: 10px 20px; margin: 10px 15px 0px 15px;border-radius: 5px; transition: all .2s ease-in-out;}
.welcome .bbbttt:hover {background: #fff;color: #000;}
.welcome div div{margin-top: 10px;}
.welcome div div video{display: none;width: 310px;height: 200px; margin: 15px; border-radius: 10px;}
.openEdBtn{transition: background .9s easy;}
.openEdBtn:hover{ background: #384c70; color: white !important;}

/* bg new all bg sets as layer*/

#layers{ display:flex;flex-direction:column;width: 100%; overflow:auto; }
.layer{ display:flex;flex-direction:column;border:2px solid black; }
.gradient-controls{ display:flex;flex-direction:column; }
.gradient-controls > div{ width: 120px;display:flex;overflow:auto; }