:root{color-scheme:light;--bg: #f4f5f7;--panel: #ffffff;--border: #d7dbe1;--text: #1f2937;--muted: #64748b;--accent: #0f766e;--danger: #b91c1c;--warn: #b45309;--success: #166534}*{box-sizing:border-box}body{margin:0;font-family:Avenir Next,Segoe UI,sans-serif;color:var(--text);background:radial-gradient(circle at top,#ffffff 0%,var(--bg) 58%)}.app{max-width:1400px;margin:0 auto;padding:1rem;display:grid;gap:1rem}@media(min-width:980px){.app{grid-template-columns:minmax(320px,420px) 1fr;align-items:start}}.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1rem;box-shadow:0 10px 20px #0f172a0f}h1,h2{margin:0}.subtitle{margin:.5rem 0 1rem;color:var(--muted)}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}@media(max-width:420px){.field-grid{grid-template-columns:1fr}}.field{display:flex;flex-direction:column;gap:.3rem;font-size:.93rem}.field input[type=number],.slider-group input[type=range],.actions button{width:100%}input[type=number]{border:1px solid var(--border);border-radius:8px;padding:.5rem;font-size:1rem}.slider-group{margin-top:1rem}input[type=range]{accent-color:var(--accent)}fieldset.colors{margin:1rem 0 0;border:1px solid var(--border);border-radius:10px;padding:.75rem}.colors legend{padding:0 .4rem;font-size:.9rem;color:var(--muted)}.color-field{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.5rem;margin-top:.45rem;font-size:.9rem}.color-field input[type=color]{border:none;background:transparent;width:44px;height:32px;padding:0}.remove-color-btn{border:1px solid var(--border);border-radius:6px;padding:.25rem .5rem;font-size:.78rem;cursor:pointer;background:#f8fafc}.remove-color-btn:hover{background:#eef2f7}.palette-actions{margin-top:.7rem;display:grid;grid-template-columns:1fr;gap:.5rem}.palette-actions button{border:1px solid var(--border);border-radius:8px;padding:.45rem .55rem;font-size:.88rem;cursor:pointer;background:#f8fafc}.palette-actions button:hover{background:#eef2f7}.actions{margin-top:1rem;display:grid;gap:.55rem}.actions button{border:1px solid var(--border);border-radius:10px;padding:.65rem .8rem;font-size:.95rem;cursor:pointer;background:#f8fafc}.actions button:hover{background:#eef2f7}.actions button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,#f8fafc)}.status{margin:.9rem 0 0;min-height:1.3rem;font-size:.9rem}.status[data-type=info]{color:var(--muted)}.status[data-type=warning]{color:var(--warn)}.status[data-type=error]{color:var(--danger)}.status[data-type=success]{color:var(--success)}.preview-panel h2{margin-bottom:.8rem}.preview-frame{width:100%;aspect-ratio:1 / 1;border:1px solid var(--border);border-radius:12px;background:linear-gradient(145deg,#f8fafc,#eef2f6);overflow:hidden}.preview{width:100%;height:100%;display:grid;place-items:center}.preview svg{width:100%;height:100%;display:block}