*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f5f5f5;color:#222}header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #e0e0e0;padding:16px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}header h1{font-size:18px;font-weight:600;white-space:nowrap}input[type=search]{flex:1;min-width:200px;padding:8px 12px;border:1px solid #ccc;border-radius:6px;font-size:14px;outline:none}input[type=search]:focus{border-color:#4f46e5}.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}label{font-size:13px;color:#555;display:flex;align-items:center;gap:6px}input[type=color]{width:36px;height:36px;border:1px solid #ccc;border-radius:6px;cursor:pointer;padding:2px;background:#fff}input[type=range]{width:100px;cursor:pointer}.count{font-size:13px;color:#888;white-space:nowrap}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;padding:24px}.icon-card{background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:16px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:box-shadow .15s,border-color .15s;-webkit-user-select:none;user-select:none}.icon-card:hover{box-shadow:0 4px 12px #0000001a;border-color:silver}.icon-card.active{border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e526}.icon-card svg{display:block}.icon-name{font-size:11px;color:#666;text-align:center;word-break:break-all;line-height:1.4}.empty{grid-column:1/-1;text-align:center;padding:60px;color:#999;font-size:16px}.code-panel{position:fixed;bottom:0;left:0;right:0;z-index:20;background:#1e1e2e;color:#cdd6f4;border-top:2px solid #4f46e5;padding:16px 24px}.code-panel-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}.code-panel-header strong{font-size:14px;color:#cba6f7;flex:1}.code-panel-header svg{overflow:visible;color:#cdd6f4}.close-btn{background:none;border:none;color:#6c7086;cursor:pointer;font-size:16px;line-height:1;padding:4px 8px;border-radius:4px;transition:color .15s,background .15s}.close-btn:hover{color:#cdd6f4;background:#ffffff0d}.code-examples{display:flex;gap:16px;flex-wrap:wrap}.code-block{flex:1;min-width:220px;background:#181825;border:1px solid #313244;border-radius:8px;overflow:hidden}.code-block-label{font-size:11px;font-weight:600;color:#89b4fa;text-transform:uppercase;letter-spacing:.06em;padding:8px 12px;border-bottom:1px solid #313244;display:flex;align-items:center;gap:6px}.code-tag{background:#4f46e5;color:#fff;font-size:9px;padding:1px 5px;border-radius:3px;text-transform:none;letter-spacing:0}.code-line{display:flex;align-items:flex-start;gap:8px;padding:10px 12px}code{flex:1;font-family:JetBrains Mono,Fira Code,monospace;font-size:12px;color:#a6e3a1;white-space:pre;overflow-x:auto}code.code-multiline{white-space:pre;display:block;overflow-x:auto;font-size:11px}.code-line button{flex-shrink:0;background:#313244;border:none;color:#cdd6f4;padding:4px 10px;border-radius:5px;font-size:11px;cursor:pointer;transition:background .15s;white-space:nowrap}.code-line button:hover{background:#4f46e5}.panel-enter-active,.panel-leave-active{transition:transform .2s ease,opacity .2s ease}.panel-enter-from,.panel-leave-to{transform:translateY(20px);opacity:0}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(80px);background:#1a1a1a;color:#fff;padding:10px 20px;border-radius:8px;font-size:13px;transition:transform .2s ease;pointer-events:none;z-index:100}.toast.show{transform:translate(-50%) translateY(0)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#c0bfbf;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:#4f46e5}*{scrollbar-width:thin;scrollbar-color:#c0bfbf transparent}