*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f5f5}.app{display:flex;height:100%}.sidebar{width:280px;background:#fff;border-right:1px solid #ddd;display:flex;flex-direction:column}.sidebar-header{padding:16px;border-bottom:1px solid #eee}.sidebar-header h1{font-size:18px;font-weight:600;margin-bottom:12px;color:#333}.beta-badge{display:inline-block;font-size:11px;font-weight:700;color:#000;background:linear-gradient(145deg,#ffe566,#ffd500);padding:3px 8px;border-radius:6px;transform:rotate(3deg);margin-left:6px;vertical-align:middle;border:2px solid #000;box-shadow:0 4px 8px #0003,0 2px 4px #0000001a,inset 0 2px #fff6,inset 0 -2px #0000001a;text-transform:lowercase}.search-input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:8px}.search-input:focus{outline:none;border-color:#007aff}.category-select{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;background:#fff;cursor:pointer}.icon-grid{flex:1;overflow-y:auto;padding:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start}.icon-item{aspect-ratio:1;border-radius:8px;padding:8px;cursor:pointer;background:#fff;transition:all .15s;display:flex;align-items:center;justify-content:center}.icon-item:hover{background:#f0f7ff}.icon-item img{max-width:100%;max-height:100%;object-fit:contain}.icon-item--other-category{background:#f5f5f5;opacity:1}.icon-item--other-category:hover{background:#eef5ff;opacity:1}.load-more{grid-column:1 / -1;padding:12px;background:#f0f0f0;border:none;border-radius:6px;cursor:pointer;font-size:14px}.load-more:hover{background:#e0e0e0}.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden}.toolbar{padding:12px 16px;background:#fff;border-bottom:1px solid #ddd;display:flex;gap:8px;align-items:center}.toolbar-btn{padding:10px 18px;background:linear-gradient(145deg,#4da3ff,#007aff);color:#fff;border:1px solid rgba(0,80,180,.3);border-radius:12px;cursor:pointer;font-size:14px;font-weight:600;box-shadow:0 4px 8px #007aff4d,0 2px 4px #0000001a,inset 0 2px #fff3,inset 0 -2px #0000001a;transition:all .15s ease;transform:translateY(0)}.toolbar-btn:hover{background:linear-gradient(145deg,#5eb0ff,#08f);transform:translateY(-2px);box-shadow:0 6px 12px #007aff59,0 4px 6px #0000001f,inset 0 2px #ffffff40,inset 0 -2px #0000001a}.toolbar-btn:active{transform:translateY(1px);box-shadow:0 2px 4px #007aff40,0 1px 2px #0000001a,inset 0 2px 4px #0000001a}.toolbar-btn.secondary{background:linear-gradient(145deg,#fff,#e8e8e8);color:#444;border:1px solid rgba(0,0,0,.3);box-shadow:0 4px 8px #0000001a,0 2px 4px #0000000f,inset 0 2px #fffc,inset 0 -2px #0000000d}.toolbar-btn.secondary:hover{background:linear-gradient(145deg,#fff,#f0f0f0);transform:translateY(-2px);box-shadow:0 6px 12px #0000001f,0 4px 6px #00000014,inset 0 2px #ffffffe6,inset 0 -2px #0000000d}.toolbar-btn.secondary:active{transform:translateY(1px);box-shadow:0 2px 4px #00000014,0 1px 2px #0000000d,inset 0 2px 4px #0000000f}.toolbar-btn.danger{background:linear-gradient(145deg,#ff6259,#ff3b30);border:1px solid rgba(180,30,20,.3);box-shadow:0 4px 8px #ff3b304d,0 2px 4px #0000001a,inset 0 2px #fff3,inset 0 -2px #0000001a}.toolbar-btn.danger:hover{background:linear-gradient(145deg,#ff7068,#ff4d42);transform:translateY(-2px);box-shadow:0 6px 12px #ff3b3059,0 4px 6px #0000001f,inset 0 2px #ffffff40,inset 0 -2px #0000001a}.toolbar-btn.danger:active{transform:translateY(1px);box-shadow:0 2px 4px #ff3b3040,0 1px 2px #0000001a,inset 0 2px 4px #0000001a}.toolbar-spacer{flex:1}.toolbar-divider{width:1px;height:24px;background:#ddd;margin:0 8px}.toolbar-btn-icon{display:none}.toolbar-btn-text{display:inline}.toolbar-info{font-size:13px;color:#666}.canvas-container{flex:1;background:#fefcfc;position:relative}.floating-toolbar{position:absolute;background:#fff;border-radius:8px;box-shadow:0 2px 12px #00000026;padding:4px;display:flex;gap:4px;z-index:100}.floating-btn{width:32px;height:32px;border:none;background:transparent;border-radius:4px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}.floating-btn:hover{background:#f0f0f0}.icon-count{font-size:12px;color:#999;text-align:center;padding:8px}.context-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999}.context-menu{position:fixed;background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;padding:4px;z-index:1000;min-width:160px}.context-menu button{display:block;width:100%;padding:8px 12px;border:none;background:transparent;text-align:left;font-size:14px;cursor:pointer;border-radius:4px}.context-menu button:hover{background:#f0f7ff}.context-menu-header{padding:6px 12px;font-size:12px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.context-menu-divider{height:1px;background:#eee;margin:4px 0}.context-menu button.selected{background:#f0f7ff;font-weight:500}.icon-item--locked{position:relative;opacity:.7}.premium-badge{position:absolute;top:4px;right:4px;background:linear-gradient(145deg,gold,#fa0);color:#333;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:1;box-shadow:0 1px 3px #0003}.premium-badge--small{width:20px;height:20px}.premium-badge--medium{width:28px;height:28px}.subscription-badge{padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600;margin-right:8px}.subscription-badge--free{background:#f0f0f0;color:#666}.subscription-badge--premium{background:linear-gradient(145deg,gold,#fa0);color:#333}.subscription-badge--clickable{cursor:pointer;transition:opacity .15s ease}.subscription-badge--clickable:hover{opacity:.8}.toolbar-upsell{color:#007aff;font-size:12px;cursor:pointer;margin-right:12px}.toolbar-upsell:hover{text-decoration:underline}.icon-count-upgrade{color:#007aff;cursor:pointer;text-decoration:underline}.icon-count-upgrade:hover{color:#0056b3}.upgrade-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.upgrade-modal{background:#fff;border-radius:16px;padding:32px;max-width:400px;width:90%;position:relative;box-shadow:0 20px 60px #0000004d;animation:bloopIn .2s ease-out}@keyframes bloopIn{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.05);opacity:1}to{transform:scale(1)}}.upgrade-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:28px;cursor:pointer;color:#999;line-height:1}.upgrade-close:hover{color:#333}.upgrade-content{text-align:center}.upgrade-icon{width:80px;height:80px;background:linear-gradient(145deg,gold,#fa0);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:#333}.upgrade-content h2{font-size:24px;margin-bottom:12px;color:#333}.upgrade-description{color:#666;margin-bottom:24px;line-height:1.5}.upgrade-price{margin-bottom:24px}.upgrade-price-amount{font-size:48px;font-weight:700;color:#333}.upgrade-price-period{font-size:18px;color:#666}.upgrade-features{list-style:none;text-align:left;margin-bottom:24px;padding:0}.upgrade-features li{padding:8px 0 8px 28px;position:relative;color:#444}.upgrade-features li:before{content:"✓";position:absolute;left:0;color:#22c55e;font-weight:700}.upgrade-btn{width:100%;padding:14px 24px;background:linear-gradient(145deg,#4da3ff,#007aff);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .15s ease;box-shadow:0 4px 12px #007aff4d}.upgrade-btn:hover{background:linear-gradient(145deg,#5eb0ff,#08f);transform:translateY(-2px);box-shadow:0 6px 16px #007aff59}.upgrade-btn:active{transform:translateY(0)}.upgrade-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.upgrade-note{margin-top:16px;font-size:12px;color:#999}.sidebar-collapsed-header,.sidebar-expanded-controls{display:none}@media(max-width:768px){.app{flex-direction:column}.sidebar{position:fixed;top:0;left:0;right:0;width:100%;z-index:100;border-right:none;border-bottom:1px solid #ddd;box-shadow:0 2px 8px #0000001a;transition:max-height .3s ease;overflow:hidden}.sidebar--collapsed{max-height:60px}.sidebar--expanded{max-height:70vh;overflow-y:auto}.sidebar-collapsed-header{display:flex;align-items:center;padding:8px 16px;height:60px;gap:12px}.sidebar-collapsed-title{flex:1;font-size:18px;font-weight:600;color:#333;margin:0}.sidebar-toggle-btn{width:44px;height:44px;min-width:44px;min-height:44px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}.sidebar-toggle-btn:hover{background:#f5f5f5}.sidebar-header,.sidebar-expanded-content{display:none}.sidebar--expanded .sidebar-expanded-content{display:flex;flex-direction:column;border-top:1px solid #eee;flex:1;min-height:0}.sidebar-expanded-controls{display:block;padding:12px 16px;border-bottom:1px solid #eee}.sidebar-expanded-controls .search-input{margin-bottom:8px}.sidebar--expanded .icon-grid{flex:1;overflow-y:auto;max-height:calc(70vh - 180px)}.toolbar-auth-desktop{display:none}.main-area{padding-top:60px}.toolbar-btn-icon{display:inline}.toolbar-btn-text{display:none}.toolbar-btn{padding:10px 12px;min-width:44px;min-height:44px}.toolbar-divider{margin:0 4px}.toolbar{gap:4px;padding:8px 12px}}