:root{--bg: #0f1117;--panel: #181b24;--panel-border: #262a36;--text: #e7e9ee;--muted: #9aa0ad;--accent: #4f46e5;--accent-hover: #6366f1;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--bg)}#root{display:flex;flex-direction:column}.app{display:grid;grid-template-columns:320px 1fr;height:100%}.sidebar{background:var(--panel);border-right:1px solid var(--panel-border);padding:24px;display:flex;flex-direction:column;gap:22px;overflow-y:auto}.sidebar h1{font-size:20px;margin:0;display:flex;align-items:center;gap:10px}.sidebar h1 img{width:28px;height:28px}.tagline{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.field{display:flex;flex-direction:column;gap:8px}.field label{font-size:13px;font-weight:600;color:var(--muted);display:flex;justify-content:space-between}.field label span{font-weight:400;color:var(--text)}.field input[type=text]{background:var(--bg);border:1px solid var(--panel-border);border-radius:8px;padding:10px 12px;color:var(--text);font-size:15px;outline:none}.field input[type=text]:focus{border-color:var(--accent)}.field input[type=range]{width:100%;accent-color:var(--accent)}.variants{display:flex;gap:8px}.variant-btn{flex:1;background:var(--bg);border:1px solid var(--panel-border);border-radius:8px;padding:10px 12px;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s ease}.variant-btn:hover{border-color:var(--accent);color:var(--text)}.variant-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.field input[type=color]{width:100%;height:36px;background:var(--bg);border:1px solid var(--panel-border);border-radius:8px;padding:2px}.btn{margin-top:auto;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:12px 16px;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s ease}.btn:hover{background:var(--accent-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}.viewport{position:relative}.hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%);color:var(--muted);font-size:12px;background:#00000059;padding:6px 12px;border-radius:999px;pointer-events:none}@media (max-width: 720px){.app{grid-template-columns:1fr;grid-template-rows:auto 1fr}.sidebar{border-right:none;border-bottom:1px solid var(--panel-border)}}