:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0c0c0e;--surface: #16161a;--surface-2: #1e1e24;--border: rgba(255, 255, 255, .08);--text: #ececf1;--text-dim: rgba(255, 255, 255, .5);--accent: #7c6ff7;--accent-hover: #9488ff;--radius: 10px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:2rem}.app--editor{align-items:stretch;justify-content:flex-start;padding:0}.header{text-align:center;padding:2rem 1.5rem 0}.header h1{font-size:2rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,var(--accent),#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--text-dim);font-size:.9rem;margin-top:.25rem}.header--compact{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;background:var(--surface);border-bottom:1px solid var(--border)}.header--compact h1{font-size:1.25rem}.header-actions{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border-radius:8px;font-size:.85rem;font-weight:500;cursor:pointer;border:none;transition:all .15s}.btn--primary{background:var(--accent);color:#fff}.btn--primary:hover{background:var(--accent-hover)}.btn--ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border)}.btn--ghost:hover{color:var(--text);border-color:#ffffff26}.dropzone{width:100%;max-width:500px;aspect-ratio:4/3;border:2px dashed rgba(255,255,255,.12);border-radius:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:var(--surface)}.dropzone:hover{border-color:var(--accent);background:#7c6ff70a}.dropzone-content{text-align:center;color:var(--text-dim);display:flex;flex-direction:column;align-items:center;gap:.75rem}.dropzone-content svg{opacity:.4}.dropzone-content p{font-size:1rem;color:var(--text)}.dropzone-hint{font-size:.8rem;opacity:.5}.editor{display:flex;flex:1;overflow:hidden}.canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:var(--bg);overflow:hidden}.canvas{max-width:100%;max-height:calc(100vh - 60px);object-fit:contain;border-radius:4px;box-shadow:0 8px 32px #00000080}.sidebar{width:280px;background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column;gap:0}.panel{padding:1rem;border-bottom:1px solid var(--border)}.panel-title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:.75rem}.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.filter-btn{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.35rem;background:transparent;border:2px solid transparent;border-radius:var(--radius);cursor:pointer;transition:all .15s}.filter-btn:hover{background:#ffffff0a}.filter-btn--active{border-color:var(--accent);background:#7c6ff714}.filter-thumb{width:56px;height:56px;border-radius:6px;object-fit:cover;display:block}.filter-name{font-size:.65rem;color:var(--text-dim);font-weight:500}.filter-btn--active .filter-name{color:var(--accent)}.sliders{display:flex;flex-direction:column;gap:.85rem}.slider-header{display:flex;justify-content:space-between;margin-bottom:.35rem}.slider-label{font-size:.8rem;color:var(--text)}.slider-value{font-size:.75rem;color:var(--text-dim);font-variant-numeric:tabular-nums}.slider-input{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:2px;background:#ffffff1a;outline:none}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--surface)}.slider-input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--surface)}@media(max-width:768px){.editor{flex-direction:column}.sidebar{width:100%;border-left:none;border-top:1px solid var(--border);max-height:50vh}.canvas-wrap{padding:1rem}.canvas{max-height:40vh}}