.app{min-height:100vh}.header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:60px 20px;text-align:center;margin-bottom:40px;border-radius:12px;box-shadow:0 10px 30px #0003}.header-content h1{font-size:3rem;margin-bottom:10px;font-weight:700}.subtitle{font-size:1.3rem;opacity:.95;margin-bottom:30px}.stats{display:flex;justify-content:center;gap:60px;margin-top:30px}.stat{display:flex;flex-direction:column;align-items:center}.stat-number{font-size:2.5rem;font-weight:700;display:block}.stat-label{font-size:1rem;opacity:.9}.container{background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 20px #0000001a;margin-bottom:30px}.controls{margin-bottom:30px}.search-box{margin-bottom:20px}.search-input{width:100%;padding:16px 20px;font-size:16px;border:2px solid #e0e0e0;border-radius:8px;transition:border-color .2s}.search-input:focus{outline:none;border-color:#667eea}.filter-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.control-group{display:flex;align-items:center;gap:10px}.control-group label{font-weight:600;color:#555}.select{padding:8px 16px;font-size:14px;border:2px solid #e0e0e0;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .2s}.select:focus{outline:none;border-color:#667eea}.results-count{color:#666;font-size:14px}.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;margin-top:20px}.icon-card{display:flex;flex-direction:column;align-items:center;padding:20px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s;background:#fff}.icon-card:hover{border-color:#667eea;transform:translateY(-4px);box-shadow:0 8px 16px #667eea33}.icon-card.selected{border-color:#667eea;background:#f8f9ff}.icon-wrapper{margin-bottom:12px;display:flex;align-items:center;justify-content:center;min-height:40px}.icon-name{font-size:13px;font-weight:600;text-align:center;word-break:break-word;color:#333}.icon-category{font-size:11px;color:#999;margin-top:4px;text-transform:capitalize}.empty-state{text-align:center;padding:60px 20px;color:#999}.empty-hint{margin-top:10px;font-size:14px}.playground{background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 20px #0000001a;margin-bottom:30px}.playground-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #e0e0e0}.playground-header h2{color:#667eea}.close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:#999;transition:color .2s}.close-btn:hover{color:#333}.playground-content{display:grid;grid-template-columns:1fr 1fr;gap:30px}.preview-section{display:flex;flex-direction:column;gap:20px}.preview-box{display:flex;align-items:center;justify-content:center;min-height:200px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:8px;padding:40px}.controls-grid{display:flex;flex-direction:column;gap:20px}.slider{width:100%;height:6px;border-radius:3px;background:#e0e0e0;outline:none;cursor:pointer}.color-picker-group{display:flex;gap:10px;align-items:center}.color-picker{width:50px;height:40px;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer}.color-input{padding:8px 12px;border:2px solid #e0e0e0;border-radius:6px;font-family:monospace;font-size:14px}.code-section h3{margin-bottom:15px;color:#333}.code-tabs{display:flex;gap:10px;margin-bottom:15px}.tab{padding:8px 16px;border:none;background:#f5f5f5;border-radius:6px 6px 0 0;cursor:pointer;font-weight:600;transition:background .2s}.tab.active{background:#2d2d2d;color:#fff}.code-block{background:#2d2d2d;color:#f8f8f2;padding:20px;border-radius:8px;overflow-x:auto;margin-bottom:15px;font-family:Courier New,monospace;font-size:14px;line-height:1.6}.copy-btn{padding:10px 20px;background:#667eea;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:background .2s}.copy-btn:hover{background:#764ba2}.examples-section{background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 20px #0000001a}.examples-section h2{color:#667eea;margin-bottom:25px}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.example-card{padding:20px;border:2px solid #e0e0e0;border-radius:8px}.example-card h3{margin-bottom:15px;font-size:16px;color:#333}.example-icons{display:flex;justify-content:space-around;align-items:center;gap:10px}@media(max-width:768px){.header{padding:40px 20px}.header-content h1{font-size:2rem}.subtitle{font-size:1rem}.stats{gap:20px;flex-wrap:wrap}.stat-number{font-size:2rem}.playground{padding:20px;margin:0 10px 20px}.playground-header{margin-bottom:20px;padding-bottom:15px}.playground-header h2{font-size:1.3rem}.playground-content{grid-template-columns:1fr;gap:20px}.preview-box{min-height:150px;padding:30px}.code-section{order:2}.code-block{font-size:.8rem}.icon-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:15px}.icon-card{padding:15px}.icon-name{font-size:.8rem}.icon-category{font-size:.7rem}.examples-grid{grid-template-columns:1fr}.controls{padding:20px 15px}.filter-controls{flex-direction:column;gap:15px}}@media(max-width:480px){.header-content h1{font-size:1.5rem}.subtitle{font-size:.9rem}.stats{gap:15px}.stat-number{font-size:1.5rem}.stat-label{font-size:.85rem}.playground{padding:15px;margin:0 5px 15px}.playground-header h2{font-size:1.1rem}.close-btn{font-size:20px}.preview-box{min-height:120px;padding:20px}.control-group label{font-size:.9rem}.code-block{font-size:.75rem;padding:12px}.copy-btn{font-size:.85rem;padding:8px 15px}.icon-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}.icon-card{padding:10px}.icon-wrapper{margin-bottom:6px}.icon-name{font-size:.75rem}.icon-category{font-size:.65rem}.search-input{font-size:.9rem;padding:10px 15px}.example-card h3{font-size:1rem}.example-icons{gap:8px;flex-wrap:wrap}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif;line-height:1.6;color:#333;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh}#root{max-width:1400px;margin:0 auto;padding:20px}.icon-demo{cursor:pointer;transition:all .2s ease}.icon-demo:hover{transform:scale(1.1)}.icon-demo:active{transform:scale(.95)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#555}