:root {
	--bg-main: #f8fafc;
	--sidebar-bg: #ffffff;
	--text-dark: #1e293b;
	--text-muted: #64748b;
	--accent: #2563eb;
	--border-color: #e2e8f0;
	--input-bg: #f1f5f9;
	--danger: #ef4444;
}

.app-grid { display: grid; grid-template-columns: 320px 1fr;}

.sidebar1 { position:relative; padding-right: 1.5rem; display: flex; flex-direction: column; gap: 1.2rem; overflow-y: auto; }
.control-row { display: flex; flex-direction: column; gap: 6px; }
.label-box { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; font-weight: 600; }
.badge { border:1px solid var(--border-color); font-size:.85rem;color: var(--text-dark);background: var(--input-bg); padding: 2px 8px; border-radius: 4px; }
input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.color-row { display: grid; grid-template-columns: 45px 1fr; gap: 10px; }
input[type="color"] { width: 100%; height: 35px; border: 1px solid var(--border-color); border-radius: 4px; background: none; cursor: pointer; padding: 0; }

.section-divider { margin-top: 10px; border-top: 1px solid var(--border-color); padding-top: 15px; font-size: 0.7rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }

.preview-pane { display: flex; flex-direction: column; align-items: center; gap: 2rem; overflow-y: auto; flex: 1; transition: background 0.2s; }
#main-text { 
	font-size: 80px; font-weight: 900; color: #1e293b; outline: none; 
	text-align: center; max-width: 100%; word-break: break-word; line-height: 1.1;
}

.layers-section { width: 100%; max-width: 850px; background: white; padding: 1.5rem; border-radius: 16px; border: 1px solid var(--border-color); }
.layer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.layer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 15px; }

.shadow-tab { 
	width:100px;height:100px; border: 2px solid var(--border-color); border-radius: 12px; cursor: pointer; 
	position: relative; transition: 0.2s; display: flex; align-items: center; justify-content: center; background: #fff;
}
.shadow-tab.active { border-color: var(--accent); background: #f0f7ff; }
.tab-preview-txt { font-size: 20px; font-weight: 900; pointer-events: none; color: transparent; }

.btn-del { 
	position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; background: var(--danger); 
	color: white; border: none; border-radius: 50%; font-size: 14px; cursor: pointer; display: none; align-items: center; justify-content: center;
}
/*.shadow-tab:hover .btn-del { display: flex; }*/

.shadow-tab.active .btn-del {
    display: flex;
}

.preview-container {
    flex-shrink: 0;
    margin-bottom: -1rem;
	padding:0;
}

.preview-stage {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
}

#main-text {
    margin: 0;
    padding: 20px;
}

.template-grid { 
	display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; 
	margin-top: 10px; padding-top: 15px; border-top: 1px solid var(--border-color);
}
.temp-card { 
	padding: 10px; border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer; 
	text-align: center; transition: 0.2s; background: var(--bg-main);
}
.temp-card:hover { border-color: var(--accent); background: #fff; transform: translateY(-2px); }
.temp-preview { font-size: 18px; font-weight: 800; margin-bottom: 5px; color: #333; }
.temp-name { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }

.btn-group { display: flex; gap: 8px; }
.btn-layer { font-size:0.85rem;background: var(--accent); color: white; border: none; padding: 3px 16px; border-radius: 8px; }
.btn-ghost { font-size:0.85rem;background: #f1f5f9; color: var(--text-dark); border: 1px solid var(--border-color); padding: 3px 16px; border-radius: 8px; }

.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;
}

@media (max-width: 850px) {
	.sidebar-close {
		display: block;
	}
    .menu-btn {
        display: block;  z-index: 8;
        background: var(--accent); color: white; border: none; padding: 1px 15px;
        border-radius: 6px; cursor: pointer;
		font-size:0.85em;
    }

    .app-grid { grid-template-columns: 1fr; }

    .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);
    }

    .sidebar1.open {
        transform: translateX(320px);
    }

}
.box {
	height:100px;
	line-height:100px;
	text-align:center;
	margin:20px;
	border:1px solid #ccc;
	background:#f2f2f2;
	font-size:2em;
}
.shadow-1 {
	text-shadow: 5px 0px 2px rgba(128, 0, 0, 1);
}
.shadow-2 {
	text-shadow: -5px 0px 2px rgba(128, 0, 0, 1);
}
.shadow-3 {
	text-shadow: 0px 5px 2px rgba(128, 0, 0, 1);
}
.shadow-4 {
	text-shadow: 0px -5px 2px rgba(128, 0, 0, 1);
}
.shadow-5 {
	text-shadow: 0px 0px 5px rgba(128, 0, 0, 1);
}
.shadow-6 {
	text-shadow: 3px 3px 5px rgba(128, 0, 0, 1);
}
.shadow-7 {
	text-shadow: 0px 0px 5px #638253;
}
.shadow-8 {
	text-shadow: 3px 3px 5px rgba(0, 128, 0, 1);
}

.shadow-9 {
background: rgb(35, 35, 35);
text-shadow: rgb(255, 255, 255) 0px 0px 5px, rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 15px, rgb(73, 255, 24) 0px 0px 20px, rgb(73, 255, 24) 0px 0px 30px, rgb(73, 255, 24) 0px 0px 40px, rgb(73, 255, 24) 0px 0px 55px, rgb(73, 255, 24) 0px 0px 75px;
}
.shadow-10 {
background: rgb(255, 255, 255);
text-shadow: rgb(188, 188, 188) 2px 2px 0px, rgb(156, 156, 156) 4px 4px 0px;
}
.shadow-11 {
text-shadow: rgb(255, 255, 255) 2px 2px 0px, rgba(0, 0, 0, 0.15) 5px 4px 0px;
}
.shadow-12 {
color: rgb(255, 255, 255);
text-shadow: rgb(64, 116, 181) 2px 2px 0px, rgb(64, 116, 181) 2px -2px 0px, rgb(64, 116, 181) -2px 2px 0px, rgb(64, 116, 181) -2px -2px 0px, rgb(64, 116, 181) 2px 0px 0px, rgb(64, 116, 181) 0px 2px 0px, rgb(64, 116, 181) -2px 0px 0px, rgb(64, 116, 181 ) 0px -2px 0px;
}
.shadow-13 {
color: rgb(167, 221, 60);
text-shadow: rgb(128, 0, 64) 2px 0px 0px, rgba(77, 0, 38, 0.5) 3px 2px 0px, rgb(255, 0, 43) 3px 0px 3px, rgb(128, 0, 21) 5px 0px 3px, rgba(77, 0, 13, 0.5) 6px 2px 3px, rgb(255, 85, 0) 6px 0px 9px, rgb(128, 42, 0) 8px 0px 9px, rgba(77, 25, 0, 0.5) 9px 2px 9px, rgb(255, 213, 0) 9px 0px 18px, rgb(128, 106, 0) 11px 0px 18px, rgba(77, 66, 0, 0.5) 12px 2px 18px, rgb(212, 255, 0) 12px 0px 30px, rgb(106, 128, 0) 14px 0px 30px, rgba(64, 77, 0, 0.5) 15px 2px 30px, rgb(128, 255, 0) 15px 0px 45px, rgb(64, 128, 0) 17px 0px 45px, rgba(38, 77, 0, 0.5) 17px 2px 45px;
}
.shadow-14 {
color: rgb(255, 255, 255);
text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.6);
}