:root{--bg-app: #09090b;--bg-panel: #18181b;--bg-input: #27272a;--border-color: #3f3f46;--text-primary: #f4f4f5;--text-secondary: #a1a1aa;--accent: #8b5cf6;--accent-hover: #7c3aed;--radius: 12px;--font-family: "Inter", system-ui, -apple-system, sans-serif}body{margin:0;padding:0;font-family:var(--font-family);background-color:var(--bg-app);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh}*{box-sizing:border-box}button{cursor:pointer;border:none;background:none;font-family:inherit}input[type=text],input[type=number],select{background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);padding:.625rem .875rem;border-radius:8px;font-size:16px;width:100%;transition:border-color .2s,box-shadow .2s;outline:none;min-height:44px}@media(min-width:768px){input[type=text],input[type=number],select{padding:.75rem 1rem;font-size:.95rem}}input[type=text]:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 2px #8b5cf633}.layout{display:flex;flex-direction:column;min-height:100vh;height:auto;gap:.75rem;padding:.75rem;max-width:1400px;margin:0 auto}@media(min-width:768px){.layout{gap:1rem;padding:1rem}}@media(min-width:1024px){.layout{display:grid;grid-template-columns:350px 1fr;grid-template-rows:auto 1fr;gap:2rem;padding:2rem;height:100vh;overflow:hidden}}.header-panel{order:1;display:flex;flex-direction:column;gap:.75rem}@media(min-width:1024px){.header-panel{grid-column:1 / -1;grid-row:1}}.preview-container{order:2;display:flex;flex-direction:column;min-height:0}@media(min-width:1024px){.preview-container{grid-column:2;grid-row:2;order:unset}}.config-container{order:3;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}@media(min-width:1024px){.config-container{grid-column:1;grid-row:2;order:unset}}.panel{background:var(--bg-panel);border-radius:var(--radius);border:1px solid var(--border-color);padding:1rem;display:flex;flex-direction:column;gap:1rem;flex:1;min-height:0}@media(min-width:768px){.panel{padding:1.25rem;gap:1.25rem}}@media(min-width:1024px){.panel{padding:1.5rem;gap:1.5rem}}.panel-content{overflow-y:auto;flex:1;min-height:0;padding-right:.25rem;display:flex;flex-direction:column;gap:1rem;-webkit-overflow-scrolling:touch}@media(min-width:768px){.panel-content{padding-right:.5rem;gap:1.25rem}}@media(min-width:1024px){.panel-content{gap:1.5rem}}.panel-title{font-size:1.1rem;font-weight:600;margin:0;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}@media(min-width:768px){.panel-title{font-size:1.25rem}}.control-group{display:flex;flex-direction:column;gap:.5rem}.label{font-size:.8rem;font-weight:500;color:var(--text-secondary)}@media(min-width:768px){.label{font-size:.875rem}}.preview-area{display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at center,#27272a,#09090b);border-radius:var(--radius);border:1px solid var(--border-color);padding:1rem;position:relative;min-height:250px;width:100%}@media(min-width:768px){.preview-area{padding:1.5rem;min-height:350px}}@media(min-width:1024px){.preview-area{padding:2rem;min-height:400px}}.btn{background:var(--accent);color:#fff;padding:.625rem 1rem;border-radius:8px;font-weight:500;font-size:.9rem;transition:background .2s;display:inline-flex;align-items:center;gap:.5rem;justify-content:center;min-height:44px;white-space:nowrap}@media(min-width:768px){.btn{padding:.75rem 1.5rem;font-size:1rem}}.btn:hover{background:var(--accent-hover)}.btn-secondary{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:#3f3f46}.color-picker-wrapper{position:relative}.checkbox-wrapper{display:flex;align-items:center;gap:.625rem;padding:.625rem .75rem;background:var(--bg-input);border-radius:6px;cursor:pointer;transition:background .2s;min-height:44px}@media(min-width:768px){.checkbox-wrapper{gap:.75rem;padding:.5rem}}.checkbox-wrapper:hover{background:#3f3f46}.checkbox-wrapper input[type=checkbox]{width:1.25rem;height:1.25rem;accent-color:var(--accent);flex-shrink:0}.checkbox-wrapper span{font-size:.9rem;-webkit-user-select:none;user-select:none}@media(min-width:768px){.checkbox-wrapper span{font-size:1rem}}.copy-actions{display:flex;gap:1rem;margin-top:2rem}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#3f3f46;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#52525b}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}