@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Dark mode palette (softened whites for less harsh contrast) */
  --bg:#000000;--bg1:#000000;--bg2:#1a1a1a;--bg3:#232323;
  --border:#4f4f4f;--border2:#4f4f4f;
  --text:#e6e6e6;--text2:#cfcfcf;--text3:#bfbfbf;
  --accent:#4f8fff;--accent-dim:#161616;
  --danger:#e04444;--success:#26a57a;
  --font:'JetBrains Mono',monospace;
}
:root.light-mode{
  /* Light mode palette (darken very-light elements for better visibility) */
  --bg:#efefef;--bg1:#efefef;--bg2:#ededf0;--bg3:#d9d9dc;
  --border:#161616;--border2:#202020;
  --text:#0f0f0f;--text2:#1d1d1d;--text3:#1b1b1b;
  --accent:#2563eb;--accent-dim:#cfcfcf;
  --danger:#b91c1c;--success:#0f9a6b;
}
html,body{width:100%;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;margin:0;padding:0}

/* Menu Bar Styles */
#menubar{display:flex;align-items:center;gap:2px;height:32px;background:var(--bg2);border-bottom:1px solid var(--border);padding:0 12px;flex-shrink:0;user-select:none}
#project-name-container{display:flex;align-items:center;margin-right:20px;min-width:120px}
#project-name-display{font-size:13px;color:var(--text);font-weight:500;cursor:text;padding:4px 8px;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#project-name-display:hover{background:var(--bg3)}
#project-name-input{font-family:var(--font);font-size:13px;background:var(--bg3);color:var(--text);border:1px solid var(--accent);border-radius:3px;padding:4px 8px;outline:none;width:150px}
.menu-item{position:relative;display:flex;align-items:center}
.menu-title{padding:6px 12px;font-size:13px;color:var(--text);cursor:pointer;border-radius:3px;white-space:nowrap;transition:background .1s}
.menu-title:hover{background:var(--bg3)}
.menu-dropdown{position:absolute;top:calc(100% - 4px);left:0;background:var(--bg1);border:1px solid var(--border);border-radius:4px;min-width:180px;display:none;flex-direction:column;z-index:999;padding-top:4px;box-shadow:0 4px 12px rgba(0,0,0,.3);visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s}
.menu-item:hover .menu-dropdown{display:flex;visibility:visible;opacity:1}
.menu-dropdown.active{display:flex;visibility:visible;opacity:1}
.menu-option{padding:8px 16px;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap;transition:background .1s}
.menu-option:hover{background:var(--bg3);color:var(--accent)}
.menu-option:active{background:var(--accent-dim)}

#app{display:flex;width:100vw;height:calc(100vh - 32px);overflow:hidden;flex-direction:row}
#left{display:flex;flex-direction:column;padding:12px;gap:12px;flex:1;overflow:hidden}
#canvas-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}
#canvas-wrap canvas{display:block;border-radius:6px;border:1px solid var(--border);width:100%;height:100%;max-width:100%;object-fit:contain}
#global-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#global-controls-card{flex-shrink:0}
.gctl{display:flex;flex-direction:column;gap:4px}
.gctl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;height:12px;margin:0}
.gctl input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--border2);border-radius:2px}
.gctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:12px;width:12px;border-radius:50%;background:var(--accent);margin-top:-4.5px;cursor:pointer}
.gctl input[type=range]::-moz-range-thumb{height:12px;width:12px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}
.gctl input[type=range]::-moz-range-track{height:3px;background:var(--border2);border-radius:2px}
.gctl label{font-size:14px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
select,button{font-family:var(--font);font-size:14px;background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:4px;padding:5px 8px;cursor:pointer;outline:none}
select:hover,button:hover{border-color:var(--accent)}
.toggles{display:flex;gap:6px;flex-wrap:wrap}
.tog{font-size:14px;padding:4px 10px;border-radius:4px;border:1px solid var(--border2);cursor:pointer;background:var(--bg2);color:var(--text2);user-select:none;transition:all .15s}
.tog.on{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}
#right{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:280px;scrollbar-gutter:stable;background:var(--bg1)}
.sec{font-size:14px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;padding-bottom:4px;border-bottom:1px solid var(--border);margin-top:2px;flex-shrink:0}
#layers-list{display:flex;flex-direction:column;gap:8px}
.layer-card{background:var(--bg1);border:1px solid var(--border);border-radius:6px;overflow:hidden;transition:border-color .15s;font-size:14px}
.layer-card.dragging{opacity:.35;border-color:var(--accent)}
.layer-card.drag-over{border-top:2px solid var(--accent)}
.card-header{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--bg2);border-bottom:1px solid var(--border);cursor:grab;user-select:none}
.card-header .card-toggle{font-size:14px;width:18px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);flex-shrink:0}
.layer-card.collapsed .card-header{cursor:pointer}
.layer-card.collapsed .card-toggle{color:var(--accent)}
.layer-card .card-body{transition:max-height .18s ease;overflow:hidden}
.layer-card.collapsed .card-body{display:none}
.drag-handle{color:var(--text3);font-size:14px;flex-shrink:0;letter-spacing:-2px}
.card-num{font-size:14px;color:var(--text3);min-width:14px}
.card-title{flex:1;font-size:14px;font-weight:500;color:var(--text)}
.card-badge{font-size:14px;padding:1px 6px;border-radius:3px;background:var(--accent-dim);color:var(--accent);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-eye{font-size:14px;cursor:pointer;color:var(--text2);padding:2px 5px;user-select:none;flex-shrink:0}
.card-eye:hover{color:var(--text)}
.card-eye.hidden-layer{color:var(--text3)}
.card-rm{font-size:13px;cursor:pointer;color:var(--text3);padding:2px 4px;user-select:none;transition:color .1s;flex-shrink:0;line-height:1}
.card-rm:hover{color:var(--danger)}
.card-body{padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.ctrl{display:flex;align-items:center;gap:6px}
.ctrl label{font-size:12px;color:var(--text2);min-width:64px;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0}
.ctrl input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:3px;background:var(--border2);border-radius:2px;outline:none;cursor:pointer;}
.ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}
.ctrl input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}
.ctrl .val{font-size:14px;color:var(--text);min-width:36px;text-align:right;flex-shrink:0}
.ctrl2{display:flex;gap:6px}
.ctrl2 select{flex:1;font-size:14px;padding:4px 6px}
input[type=number]{font-family:var(--font);font-size:14px;background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:4px;padding:5px;cursor:default}
input[type=number]:focus{border-color:var(--accent);outline:none}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{appearance:textfield;-moz-appearance:textfield}
.add-layer-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:5px;border:1px dashed var(--border2);background:transparent;color:var(--text2);cursor:pointer;font-family:var(--font);font-size:14px;transition:all .15s;width:100%}
.add-layer-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.inject-box{display:flex;flex-direction:column;gap:6px}
.hint{font-size:12px;color:var(--text3);line-height:1.6}
.hint code{color:var(--accent)}
textarea{font-family:var(--font);font-size:14px;background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:4px;padding:8px;resize:vertical;min-height:88px;outline:none;line-height:1.5;width:100%}
textarea:focus{border-color:var(--accent)}
.inject-row{display:flex;gap:6px}
.inject-row button{flex:1;font-size:14px}
.msg{font-size:12px;padding:2px 0;min-height:16px}
.msg.err{color:var(--danger)}
.msg.ok{color:var(--success)}

/* Scrollbar Styling */
::-webkit-scrollbar{width:1px;height:10px}
::-webkit-scrollbar-track{background:var(--bg1);border-radius:5px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:5px;transition:background .2s}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
/* Firefox scrollbar */
* {
  scrollbar-color: var(--border2) var(--bg1);
  scrollbar-width: 1px;
}

/* Mobile responsive layout */
@media(max-width:900px){
  #app{flex-direction:column;height:calc(100vh - 32px);overflow:hidden}
  #left{height:50%;min-height:50%;overflow:hidden}
  #canvas-wrap{min-height:auto}
  #right{height:50%;min-height:50%;width:100%;max-width:100%;min-width:0;flex:0 0 50%;overflow-y:auto;border-top:1px solid var(--border);padding:10px 8px}
  #global-controls{grid-template-columns:1fr 1fr}
  .toggles{font-size:14px}
  .layer-card{font-size:14px}
  textarea{min-height:60px;font-size:14px}
}



/* Modal styles */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}
.modal.hidden{display:none}
.modal-content{background:var(--bg1);border:1px solid var(--border);border-radius:8px;width:90%;max-width:500px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-header h2{font-size:18px;color:var(--text);margin:0}
.modal-close{background:none;border:none;color:var(--text3);font-size:24px;cursor:pointer;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;transition:color .15s}
.modal-close:hover{color:var(--text)}
.modal-body{padding:20px;display:flex;flex-direction:column;gap:16px;font-size:14px;line-height:1.6}
.modal-body p{color:var(--text2);margin:0}
.modal-body a{color:var(--accent);text-decoration:none;transition:color .15s}
.modal-body a:hover{color:#6fa3ff}
.about-section{padding:12px;background:var(--bg2);border-radius:6px;border-left:3px solid var(--accent)}
.about-section h3{color:var(--text);font-size:14px;margin:0 0 8px 0;text-transform:uppercase;letter-spacing:.05em}
.about-section p{color:var(--text2);margin:0;font-size:13px;line-height:1.5}

/* Mobile-friendly styles for menubar and modal */
@media(max-width:600px) {

  .modal
  {
    padding: 0%;
    width: 100%;
    max-width: 100%;
    border-radius: 6px;
    
    /* Centering logic */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .modal-content {
    padding: 0%;
    width: 80%;
    max-width: 80%;
    border-radius: 6px;
    
  }

  .modal-body {
    padding: 16px;
    font-size: 14px;
  }

  .modal-header {
    padding: 16px;
  }

  .modal-close {
    font-size: 20px;
  }
}

/* Color Editor Styles */
.color-stop-item{display:flex;align-items:center;gap:8px;padding:8px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;cursor:grab;user-select:none;transition:all .15s}
.color-stop-item.dragging{opacity:.5;border-color:var(--accent)}
.color-stop-item.drag-over{border-color:var(--accent);background:var(--accent-dim)}
.color-stop-item:hover{border-color:var(--accent)}
.color-stop-drag{color:var(--text3);font-size:12px;flex-shrink:0}
.color-stop-preview{width:24px;height:24px;border-radius:3px;border:1px solid var(--border2);flex-shrink:0;cursor:pointer}
.color-stop-controls{display:flex;gap:6px;flex:1;align-items:center}
.color-stop-controls input{padding:4px 6px;font-family:var(--font);font-size:12px;background:var(--bg1);border:1px solid var(--border2);border-radius:3px;color:var(--text);width:60px}
.color-stop-controls input[type=color]{width:40px;padding:2px;cursor:pointer}
.color-stop-remove{padding:2px 6px;background:var(--danger);color:white;border:none;border-radius:3px;cursor:pointer;font-size:12px;flex-shrink:0;transition:opacity .1s}
.color-stop-remove:hover{opacity:.8}

/* Theme toggle switch */
.theme-switch {
  display: inline-block;
  vertical-align: middle;
}

.theme-switch input {
  display: none;
}

.switch-track {
  display: inline-flex;
  align-items: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border-radius: 6px;
  padding: 0;
  border: none;
  transition: background .15s, border-color .15s;
  position: relative;
  cursor: pointer;
}

/* Default State: Moon Icon */
.switch-track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  /* Moon SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E6EEF6' d='M 12 0 C 11.4 0 11 0.4 11 1 L 11 2 C 11 2.6 11.4 3 12 3 C 12.6 3 13 2.6 13 2 L 13 1 C 13 0.4 12.6 0 12 0 z M 4.199 3.199 C 3.949 3.199 3.7 3.3 3.5 3.5 C 3.1 3.9 3.1 4.5 3.5 4.9 L 4.199 5.599 C 4.599 5.999 5.199 5.999 5.599 5.599 C 5.999 5.199 5.999 4.599 5.599 4.199 L 4.9 3.5 C 4.7 3.3 4.449 3.199 4.199 3.199 z M 19.8 3.199 C 19.55 3.199 19.299 3.3 19.099 3.5 L 18.4 4.199 C 18 4.599 18 5.199 18.4 5.599 C 18.8 5.999 19.4 5.999 19.8 5.599 L 20.5 4.9 C 20.9 4.5 20.9 3.9 20.5 3.5 C 20.3 3.3 20.05 3.199 19.8 3.199 z M 12 5 A 7 7 0 0 0 5 12 A 7 7 0 0 0 12 19 A 7 7 0 0 0 19 12 A 7 7 0 0 0 12 5 z M 1 11 C 0.4 11 0 11.4 0 12 C 0 12.6 0.4 13 1 13 L 2 13 C 2.6 13 3 12.6 3 12 C 3 11.4 2.6 11 2 11 L 1 11 z M 22 11 C 21.4 11 21 11.4 21 12 C 21 12.6 21.4 13 22 13 L 23 13 C 23.6 13 24 12.6 24 12 C 24 11.4 23.6 11 23 11 L 22 11 z M 4.9 18.099 C 4.65 18.099 4.399 18.2 4.199 18.4 L 3.5 19.099 C 3.1 19.499 3.1 20.1 3.5 20.5 C 3.9 20.9 4.5 20.9 4.9 20.5 L 5.599 19.8 C 5.999 19.4 5.999 18.8 5.599 18.4 C 5.399 18.2 5.15 18.099 4.9 18.099 z M 19.099 18.099 C 18.849 18.099 18.6 18.2 18.4 18.4 C 18 18.8 18 19.4 18.4 19.8 L 19.099 20.5 C 19.499 20.9 20.1 20.9 20.5 20.5 C 20.9 20.1 20.9 19.499 20.5 19.099 L 19.8 18.4 C 19.6 18.2 19.349 18.099 19.099 18.099 z M 12 21 C 11.4 21 11 21.4 11 22 L 11 23 C 11 23.6 11.4 24 12 24 C 12.6 24 13 23.6 13 23 L 13 22 C 13 21.4 12.6 21 12 21 z' /%3E%3C/svg%3E");
  transition: background-image 0.2s ease-in-out;
}

/* Checked State: Sun Icon */
.theme-switch input:checked + .switch-track::before {
  /* Symmetrical Sun SVG */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%230F1720' d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");

}