:root { --anim-style: 0.3s ease; --preview-bg1: #fff; }

  .container1 {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
	min-height: calc(100vh - 150px);
    align-items: start;
  }

.menu-btn { display: none; }

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 998;
}

.sidebar1 {
  z-index: 8;
}

.sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.sidebar-close {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 4px 5px;
  border-radius: 4px;
  border: none;
  background: #d90036;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  display: none;

}

.sidebar-close:hover {
  background: #000;
}

.sidebar-close:hover {
  opacity: 1;
}

  .sidebar1 { display: flex; flex-direction: column;  }
  
  .main1 { 
    display: flex; 
	position: sticky;
	top:80px;
    flex-direction: column; 
    gap: 20px; 
    height: fit-content;
	min-width:0;
  }

 .sidebar1 .card { 
    background: white; 
    border-radius: 12px; 
    padding: 20px; 
    border: 1px solid #e2e8f0; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); 
  }
  
 .sidebar1 .card h3 { 
    font-size: 1rem; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    color: #64748b; 
    margin: 0 0 15px 0; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
  }
 .sidebar1 .card h3::before { content: ''; width: 4px; height: 14px; background: #3b82f6; border-radius: 10px; }

  .presets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .btn-preset { 
    padding: 10px; border: 1px solid #e2e8f0; border-radius: 6px; 
    background: white; cursor: pointer; font-size: 11px; font-weight: 600; 
    transition: 0.2s; text-align: center; background:var(--preview-bg);
  }
  .btn-preset:hover { border-color: #3b82f6; background: #eff6ff; }

  .row1 { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-end; }
  .field { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  
  .label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  label { font-size: .75rem; font-weight: 700; color: #475569; }
  
  .badge { 
    font-size: .75rem; 
    background: #f1f5f9; 
    color: #3b82f6; 
    padding: 2px 6px; 
    border-radius: 4px; 
    font-family: monospace;
    border: 1px solid #e2e8f0;
  }

  .sidebar1 input[type="range"] { width: 100%; cursor: pointer; accent-color: #3b82f6; }
  .sidebar1 input[type="text"], select { padding: 8px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 12px; outline: none; }
  .sidebar1 input[type="color"] { width: 100%; height: 35px; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; background: white; padding: 2px; }
  
  .checkbox-row { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }


  .border-ctrl { display: none; }
  .border-active .border-ctrl { display: flex; }

.main1.dark .preview-box {
  --preview-bg1: #0f172a;
}

.preview-toolbar {
  position: absolute;
  top: 10px;
  right: 10px;
}

.theme-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.theme-switch input[type="checkbox"] {
  appearance: none;
  width: 30px;
  height: 18px;
  border-radius: 12px;
  background: #ccc;
  position: relative;
  outline: none;
  cursor: pointer;
  transition: background 0.25s;
}

.theme-switch input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.25s;
}

.theme-switch input[type="checkbox"]:checked {
  background: #265cff;
}

.theme-switch input[type="checkbox"]:checked::before {
  transform: translateX(12px);
}

.main1.dark .theme-switch span {
  color: #fff;
}

.preview-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.theme-switch {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

  .preview-box { 
    position: relative;
    background: var(--preview-bg1, #f8fafc);
    background-image: radial-gradient(#cecebf 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid #e2e8f0; 
    padding: 60px; 
    border-radius: 16px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 400px; 
  }
  
  .btn-reset { background: #fee2e2; color: #ef4444; border: none; padding: 4px 8px; border-radius: 4px; font-size: .75rem; cursor: pointer; font-weight: 700; }
  .btn-reset:hover { background: #fecaca; }
  
  /* TOGGLE RENDERER */
  .architect-toggle { -webkit-tap-highlight-color: transparent; user-select: none; display: inline-flex; align-items: center; cursor: pointer; position: relative; }
  .architect-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
  .track {
    width: var(--track-width); height: var(--track-height);
    background-color: var(--track-bg-off);
    border: var(--track-border-width) solid var(--track-b-color-off);
    border-radius: var(--track-radius);
    position: relative; transition: var(--anim-style);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--text-pos); box-sizing: border-box;
  }
  .thumb {
    position: absolute; width: var(--thumb-size); height: var(--thumb-size);
    background: var(--thumb-bg-off); border: var(--thumb-border-width) solid var(--thumb-b-color-off);
    border-radius: var(--thumb-radius); box-shadow: var(--thumb-shadow);
    top: 50%; left: var(--thumb-offset); transform: translateY(-50%);
    transition: var(--anim-style); z-index: 2; box-sizing: border-box;
  }
  .lbl { font-size: var(--track-fontsize); font-weight: 800; pointer-events: none; transition: opacity var(--anim-style); position: relative; z-index: 1; font-family: sans-serif; }
  .lbl-on { color: var(--txt-color-on); opacity: 0; white-space: nowrap;}
  .lbl-off { color: var(--txt-color-off); opacity: 1; white-space: nowrap;}
  input:checked + .track { background-color: var(--track-bg-on); border-color: var(--track-b-color-on); }
  input:checked + .track .thumb { left: calc(100% - var(--thumb-size) - var(--thumb-offset)); background: var(--thumb-bg-on); border-color: var(--thumb-b-color-on); }
  input:checked + .track .lbl-on { opacity: 1; }
  input:checked + .track .lbl-off { opacity: 0; }
  
@media (max-width: 850px) {
	.sidebar-close {
		display: block;
	}
    .menu-btn {
        display: block;  z-index: 8;
        background: #2563eb; color: white; border: none; padding: 4px 8px; font-size:0.75em;
        border-radius: 6px; cursor: pointer;
		font-size:0.85em;
    }

    .container1 { grid-template-columns: 1fr; min-height:200px}

    .sidebar1 {
        position: fixed; top: 0; left: -320px;
        width: 320px; height:100vh;; z-index: 999; background:white;padding:20px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 10px 0 20px rgba(0,0,0,0.1);overflow-y:scroll;
    }
	.main1 {position:relative;top:0;}

    .sidebar1.open {
        transform: translateX(320px);
    }
  .row1 {
    flex-direction: column;
    align-items: stretch;
  }
}