*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #090909;--panel: #111111;--panel-2: #181818;--border: #242424;--accent: #EAFF00;--accent-dim: rgba(234,255,0,.12);--accent-2: #FF4500;--text: #E4DDD4;--text-muted: #938F89;--text-dim: #87837D;--font-brand: "Unbounded", sans-serif;--font-ui: "IBM Plex Mono", monospace;--radius: 4px;--header-h: 56px}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:12px;line-height:1.5;overflow:hidden}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{height:var(--header-h);min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--border);background:var(--panel);position:relative;z-index:10}.header-brand{display:flex;align-items:baseline;gap:14px}.brand-name{font-family:var(--font-brand);font-size:18px;font-weight:900;letter-spacing:.05em;color:var(--accent);line-height:1}.brand-sub{font-size:9px;letter-spacing:.18em;color:var(--text-muted);text-transform:uppercase}.header-actions{display:flex;align-items:center;gap:8px}.main-layout{display:flex;flex:1;overflow:hidden}.controls-panel{width:240px;min-width:240px;background:var(--panel);border-right:1px solid var(--border);overflow-y:auto;overflow-x:hidden;padding:16px 14px;display:flex;flex-direction:column;gap:20px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.controls-panel::-webkit-scrollbar{width:4px}.controls-panel::-webkit-scrollbar-track{background:transparent}.controls-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.control-group{display:flex;flex-direction:column;gap:8px}.control-label{font-size:9px;letter-spacing:.2em;color:var(--text-muted);text-transform:uppercase;display:flex;align-items:center;justify-content:space-between}.control-value{color:var(--accent);font-size:11px;font-weight:500}.chip-grid{display:flex;flex-wrap:wrap;gap:5px}.chip{background:var(--panel-2);border:1px solid var(--border);color:var(--text-muted);font-family:var(--font-ui);font-size:9px;letter-spacing:.12em;padding:5px 8px;border-radius:var(--radius);cursor:pointer;transition:all .15s;text-transform:uppercase;white-space:nowrap}.chip:hover{border-color:var(--text-muted);color:var(--text)}.chip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.slider{-webkit-appearance:none;width:100%;height:3px;background:var(--border);border-radius:2px;outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;box-shadow:0 0 6px #eaff0066;transition:box-shadow .15s}.slider::-webkit-slider-thumb:hover{box-shadow:0 0 10px #eaff0099}.slider::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;border:none}.palette-grid{display:flex;flex-direction:column;gap:4px}.palette-chip{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:6px 8px;cursor:pointer;transition:all .15s;text-align:left;color:var(--text-muted);font-family:var(--font-ui);font-size:10px;letter-spacing:.08em}.palette-chip:hover{border-color:var(--text-muted);color:var(--text)}.palette-chip.active{border-color:var(--accent);background:var(--accent-dim);color:var(--text)}.palette-swatches{display:flex;gap:2px;flex-shrink:0}.swatch{width:14px;height:14px;border-radius:2px;border:1px solid rgba(255,255,255,.08)}.bg-row{display:flex;gap:5px}.bg-row .chip{flex:1;text-align:center}.color-row{display:flex;align-items:center;gap:8px;margin-top:2px}.color-row input[type=color]{width:28px;height:28px;border:1px solid var(--border);background:none;border-radius:var(--radius);cursor:pointer;padding:2px}.color-row span{color:var(--text-muted);font-size:10px;letter-spacing:.08em}.text-input{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-ui);font-size:11px;padding:7px 10px;outline:none;width:100%;transition:border-color .15s;letter-spacing:.05em}.text-input::placeholder{color:var(--text-dim)}.text-input:focus{border-color:var(--accent)}.text-controls{display:flex;align-items:center;gap:8px;margin-top:2px}.text-controls input[type=color]{width:28px;height:28px;border:1px solid var(--border);background:none;border-radius:var(--radius);cursor:pointer;padding:2px;flex-shrink:0}.text-controls .slider{flex:1}.lock-row{display:flex;gap:6px}.lock-btn{flex:1;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);font-family:var(--font-ui);font-size:9px;letter-spacing:.1em;padding:6px 4px;cursor:pointer;transition:all .15s;text-transform:uppercase;text-align:center;display:flex;align-items:center;justify-content:center;gap:4px}.lock-btn:hover{border-color:var(--text-muted);color:var(--text)}.lock-btn.active{background:#ff45001f;border-color:var(--accent-2);color:var(--accent-2)}.lock-icon{font-size:11px}.canvas-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:radial-gradient(circle,#252525 1px,transparent 1px);background-size:22px 22px;background-color:#0d0d0d;position:relative;overflow:hidden}.canvas-area:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,transparent 40%,#090909 100%);pointer-events:none}.logo-canvas-wrapper{position:relative;z-index:1;border-radius:6px;overflow:visible;box-shadow:0 0 0 1px var(--border),0 20px 60px #0009,0 0 80px #eaff000a;transition:box-shadow .3s;display:flex;align-items:center;justify-content:center}.logo-canvas-wrapper svg:first-of-type{border-radius:6px;overflow:hidden;display:block}.logo-canvas-wrapper:hover{box-shadow:0 0 0 1px #eaff004d,0 20px 60px #0009,0 0 80px #eaff0014}.logo-canvas-wrapper svg{display:block;width:420px;height:420px}.transparent-bg{background:repeating-conic-gradient(#333,#333 25%,#222 0%,#222 50%) 0 0 / 20px 20px}.canvas-hints{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-dim);font-size:9px;letter-spacing:.1em;text-align:center;position:relative;z-index:1}.export-name-wrapper{display:flex;align-items:center;gap:6px;position:relative;z-index:1;border-bottom:1px solid var(--border);transition:border-color .15s;padding-bottom:2px}.export-name-wrapper:focus-within{border-bottom-color:var(--accent)}.export-name-wrapper:focus-within .export-name-edit-icon{color:var(--accent)}.export-name-input{background:none;border:none;color:var(--text-muted);font-family:var(--font-ui);font-size:11px;letter-spacing:.12em;text-align:center;outline:none;padding:4px 0;width:180px;transition:color .15s}.export-name-input::placeholder{color:var(--text-dim)}.export-name-input:not(:placeholder-shown){color:var(--text)}.export-name-input:focus{color:var(--text)}.export-name-edit-icon{width:12px;height:12px;color:var(--text-dim);flex-shrink:0;transition:color .15s;pointer-events:none}.export-name-saved{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);font-family:var(--font-ui);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);pointer-events:none;white-space:nowrap;animation:nameSavedFade 1s ease forwards}@keyframes nameSavedFade{0%{opacity:1}50%{opacity:1}to{opacity:0}}.canvas-actions{position:relative;z-index:1;display:flex;align-items:center;gap:10px}.btn{font-family:var(--font-ui);font-size:10px;letter-spacing:.15em;text-transform:uppercase;border-radius:var(--radius);cursor:pointer;border:none;transition:all .15s;padding:0 16px;height:34px;display:flex;align-items:center;gap:6px;white-space:nowrap}.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-muted)}.btn-ghost:hover{border-color:var(--text-muted);color:var(--text)}.btn-export{background:var(--panel-2);border:1px solid #3a3a3a;color:var(--text)}.btn-export:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.btn-export-dim{background:transparent;border:1px solid var(--border);color:var(--text-muted)}.btn-export-dim:hover{border-color:var(--text-muted);color:var(--text)}.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-muted)}.btn-outline:hover{border-color:var(--text-muted);color:var(--text)}.btn-regen{background:var(--accent);color:#000;font-weight:500;font-size:11px;padding:0 24px;height:42px;letter-spacing:.1em;box-shadow:0 0 20px #eaff0040}.btn-regen:hover{background:#f0ff20;box-shadow:0 0 30px #eaff0066;transform:translateY(-1px)}.btn-regen:active{transform:translateY(0)}.btn-heart{width:42px;height:42px;flex-shrink:0;border-radius:var(--radius);background:var(--panel-2);border:1px solid var(--border);color:#fff6;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s}.btn-heart svg{width:17px;height:17px;transition:all .18s}.btn-heart:hover{background:#ff408126;border-color:#ff4081;color:#ff4081}.btn-heart:hover svg{fill:#ff4081;stroke:#ff4081}.btn-heart:active{transform:translateY(1px)}.btn-random-all{background:#ff45001f;border:1px solid rgba(255,69,0,.4);color:var(--accent-2);font-size:10px;height:42px;padding:0 18px}.btn-random-all:hover{background:#ff450038;border-color:var(--accent-2);box-shadow:0 0 20px #ff450033;transform:translateY(-1px)}.btn-random-all:active{transform:translateY(0)}.export-group{position:relative}.dropdown-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;z-index:100;min-width:140px;box-shadow:0 8px 24px #00000080;animation:fadeDown .1s ease}@keyframes fadeDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.dropdown-menu button{display:flex;align-items:center;width:100%;padding:9px 14px;background:none;border:none;color:var(--text-muted);font-family:var(--font-ui);font-size:10px;letter-spacing:.1em;text-align:left;cursor:pointer;text-transform:uppercase;transition:all .1s;gap:8px}.dropdown-menu button:hover{background:var(--accent-dim);color:var(--accent)}.dropdown-menu button+button{border-top:1px solid var(--border)}.dropdown-divider{height:1px;background:var(--border);margin:2px 0}.dropdown-badge{margin-left:auto;color:var(--text-dim);font-size:9px;letter-spacing:.05em}.history-panel{width:200px;min-width:200px;background:var(--panel);border-left:1px solid var(--border);overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.history-panel::-webkit-scrollbar{width:4px}.history-panel::-webkit-scrollbar-thumb{background:var(--border)}.history-header{display:flex;align-items:center;justify-content:space-between}.history-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.history-item{aspect-ratio:1;border-radius:4px;overflow:hidden;cursor:pointer;border:1px solid var(--border);transition:all .15s;background:#111;position:relative}.history-item:hover{border-color:var(--accent);box-shadow:0 0 10px #eaff0033;transform:scale(1.04)}.history-item-check{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#000;font-size:9px;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}.history-item-delete{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#0000008c;border:1px solid rgba(255,255,255,.15);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s,color .15s;z-index:2;padding:0;font-size:9px;line-height:1;color:#fff9}.history-item:hover .history-item-delete{opacity:1}.history-item-delete:hover{color:#fff;background:#000c}.history-item.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.history-item svg{width:100%;height:100%;display:block}.history-footer{display:flex;flex-direction:column;gap:6px;margin-top:4px}.history-footer-btn{width:100%;padding:8px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);font-family:var(--font-ui);font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .15s}.history-footer-btn:hover{border-color:var(--text-muted);color:var(--text)}.history-footer-btn--delete{border-color:#ff45004d;color:var(--accent-2)}.history-footer-btn--delete:hover{background:#ff45001a;border-color:var(--accent-2);color:var(--accent-2)}.history-browse-hint{text-align:center;font-size:9px;color:var(--text-dim);padding:8px 0 4px;letter-spacing:.03em}.history-empty{color:var(--text-dim);font-size:10px;letter-spacing:.08em;text-align:center;padding:20px 0;line-height:1.8}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(10px);background:var(--accent);color:#000;font-family:var(--font-ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px 20px;border-radius:var(--radius);z-index:1000;opacity:0;animation:toastIn .2s forwards,toastOut .3s 1.8s forwards;pointer-events:none}@keyframes toastIn{to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastOut{to{opacity:0;transform:translate(-50%) translateY(10px)}}.divider{height:1px;background:var(--border);margin:0 -14px}@media (max-width: 900px){html,body,#root{overflow:auto}.app{height:auto;min-height:100vh;overflow:auto}.main-layout{flex-direction:column;overflow:auto}.controls-panel{width:100%;min-width:0;border-right:none;border-bottom:1px solid var(--border);overflow:hidden}.history-panel{width:100%;min-width:0;border-left:none;border-top:1px solid var(--border)}.history-grid{grid-template-columns:repeat(4,1fr)}.canvas-area{min-height:60vw;padding:24px}.logo-canvas-wrapper svg{width:min(90vw,420px);height:min(90vw,420px)}}