*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f7f9fc;--bg2:#ffffff;--bg3:#ffffff;--border:#e3e8f0;--text:#0f172a;--text2:#5b6878;--text3:#64748b;--accent:#2563eb;--radius:10px}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;font-size:14px;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
nav{background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0}
.nav-inner{padding:0 20px;height:52px;display:flex;align-items:center;gap:20px}
.logo{font-weight:700;font-size:17px;color:var(--accent)}
.nav-tabs{display:flex;gap:4px}
.tab-btn{background:none;border:1px solid var(--border);color:var(--text2);padding:5px 14px;border-radius:7px;font-size:13px;cursor:pointer;transition:all .15s}
.tab-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.app-layout{display:grid;grid-template-columns:300px 1fr;flex:1;overflow:hidden}
.controls-panel{overflow-y:auto;border-right:1px solid var(--border);background:var(--bg2)}
.panel-section{padding:16px;border-bottom:1px solid var(--border)}
.panel-section h3{font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.section-header h3{margin-bottom:0}
.btn-add-layer{background:none;border:1px solid var(--accent);color:var(--accent);padding:4px 10px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .15s}
.btn-add-layer:hover{background:var(--accent);color:#fff}
.layer-list{display:flex;flex-direction:column;gap:6px}
.layer-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;border:1px solid var(--border);cursor:pointer;transition:all .15s}
.layer-item:hover{border-color:var(--accent)}
.layer-item.active{border-color:var(--accent);background:rgba(79,142,247,.08)}
.layer-preview{width:20px;height:20px;border-radius:4px;flex-shrink:0}
.layer-name{flex:1;font-size:13px;color:var(--text2)}
.layer-item.active .layer-name{color:var(--text)}
.layer-toggle{margin-left:auto}
.layer-toggle input{accent-color:var(--accent);cursor:pointer}
.btn-del-layer{background:none;border:none;color:var(--text3);font-size:16px;cursor:pointer;padding:0 2px;transition:color .15s}
.btn-del-layer:hover{color:#dc2626}
.slider-field{margin-bottom:14px}
.slider-label-row{display:flex;justify-content:space-between;margin-bottom:6px}
label{font-size:12px;color:var(--text2);font-weight:500}
.slider-val{font-size:12px;color:var(--accent);font-weight:600}
input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
.toggle-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:0}
.toggle-row>span{font-size:12px;color:var(--text2);font-weight:500}
.toggle{position:relative;display:inline-block;width:36px;height:20px}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--bg3);border-radius:10px;transition:.2s;cursor:pointer}
.toggle-slider::before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked+.toggle-slider{background:var(--accent)}
.toggle input:checked+.toggle-slider::before{transform:translateX(16px)}
.color-row{display:flex;gap:8px;align-items:center}
input[type=color]{width:40px;height:32px;border:1px solid var(--border);border-radius:6px;background:var(--bg3);cursor:pointer;padding:2px}
input[type=text]{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:6px 10px;font-size:13px;font-family:monospace}
input[type=text]:focus{outline:none;border-color:var(--accent)}
.presets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.preset-btn{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 8px;cursor:pointer;text-align:center;transition:all .15s}
.preset-btn:hover{border-color:var(--accent)}
.preset-preview{width:40px;height:28px;background:#fff;border-radius:4px;margin:0 auto 6px;display:block}
.preset-name{font-size:11px;color:var(--text2)}
.preview-panel{display:flex;flex-direction:column;overflow:hidden}
.preview-area{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.preview-el{width:160px;height:100px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#333;transition:box-shadow .1s,text-shadow .1s,border-radius .1s}
.code-panel{background:var(--bg2);border-top:1px solid var(--border);flex-shrink:0;padding:14px 16px}
.code-tabs{display:flex;gap:4px;margin-bottom:10px}
.code-tab{background:none;border:1px solid var(--border);color:var(--text3);padding:4px 12px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .15s}
.code-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.code-wrap{position:relative}
.code-block{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-family:'Courier New',monospace;font-size:13px;color:#a8d8b8;white-space:pre;overflow-x:auto;min-height:60px;line-height:1.6}
.btn-copy{position:absolute;top:8px;right:8px;background:var(--bg2);border:1px solid var(--border);color:var(--text2);padding:4px 10px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .15s}
.btn-copy:hover{border-color:var(--accent);color:var(--text)}
.code-note{font-size:11px;color:var(--text3);margin-top:6px}
@media(max-width:700px){body{overflow:auto;height:auto}.app-layout{grid-template-columns:1fr;overflow:visible}.controls-panel{overflow-y:visible}.preview-area{height:220px}}