.font-categories{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid var(--gray-200)}.cat-inner-btn{background:transparent;border:none;padding:8px 20px;font-size:0.85rem;font-weight:500;border-radius:40px;cursor:pointer;transition:all 0.3s;color:var(--gray-600)}.cat-inner-btn:hover{background:var(--gray-100);color:var(--gray-800)}.cat-inner-btn.active{background:var(--primary-color);color:white;box-shadow:0 4px 12px rgba(59,130,246,0.3)}.font-list{display:grid;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));gap:20px;margin-bottom:40px}.font-card{background:white;border-radius:20px;padding:20px;transition:all 0.3s;border:1px solid var(--gray-200);cursor:pointer;position:relative;overflow:hidden}.font-card:hover{transform:translateY(-4px);box-shadow:0 20px 30px -12px rgba(0,0,0,0.1);border-color:var(--primary-light)}.font-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, var(--primary-color), var(--primary-light));transform:scaleX(0);transition:transform 0.3s}.font-card:hover::before{transform:scaleX(1)}.font-name{font-size:1.1rem;font-weight:600;color:var(--gray-800);margin-bottom:4px}.font-family{font-size:0.7rem;color:var(--gray-400);font-family:monospace;margin-bottom:12px}.font-preview{font-size:1.2rem;padding:16px 0;border-top:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100);margin:12px 0;color:var(--gray-700)}.font-css{background:#1e1e2e;color:#e0e0e0;padding:8px 12px;border-radius:12px;font-family:monospace;font-size:0.7rem;overflow-x:auto;white-space:nowrap}.copy-font-btn{position:absolute;bottom:16px;right:16px;background:var(--gray-100);border:none;padding:6px 12px;border-radius:20px;font-size:0.7rem;cursor:pointer;transition:all 0.2s}.copy-font-btn:hover{background:var(--primary-color);color:white}.css-generator{background:linear-gradient(135deg, var(--gray-50), #fff);border-radius:24px;padding:24px;margin-bottom:32px;border:1px solid var(--gray-200)}.generator-content{margin-top:20px}.generator-preview{background:white;border-radius:16px;padding:40px;text-align:center;font-size:24px;border:1px solid var(--gray-200);margin-bottom:20px;transition:all 0.2s}.generator-controls{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-bottom:20px}.generator-controls label{font-size:0.85rem;font-weight:500;color:var(--gray-600)}.font-select,.weight-select{padding:8px 16px;border:1px solid var(--gray-300);border-radius:30px;background:white;font-size:0.85rem}#fontSize{width:150px}#fontSizeValue{min-width:45px;font-size:0.85rem;color:var(--primary-color);font-weight:500}.css-code{background:#1e1e2e;border-radius:16px;padding:16px;overflow-x:auto}.css-code pre{margin:0;color:#e0e0e0;font-family:monospace;font-size:0.85rem}.info-section{margin-top:20px}.info-content ul{padding:16px 20px;background:var(--gray-50);border-radius:16px;list-style:none}.info-content li{padding:8px 0;color:var(--gray-600);font-size:0.85rem;line-height:1.6}.info-content code{background:white;padding:2px 8px;border-radius:6px;font-family:monospace;font-size:0.8rem;color:var(--primary-color)}.empty-state{text-align:center;padding:60px;color:var(--gray-400)}.empty-state i{font-size:48px;margin-bottom:16px}@media (max-width:768px){.font-list{grid-template-columns:1fr}.generator-controls{flex-direction:column;align-items:stretch}.font-select,.weight-select,#fontSize{width:100%}}