* {margin:0;padding:0;box-sizing:border-box;}
body {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#f3f4f6;color:#1f2937;line-height:1.5;overflow-x:hidden;}
a {text-decoration:none;color:inherit;}
.pd20{ padding:20px;}
button {cursor:pointer;border:none;outline:none;font-family:inherit;}
.hidden {display:-webkit-box !important;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
img,svg,video,canvas {max-width:100%;height:auto;}
.header {background:#fff;padding:16px 24px;position:sticky;top:0;z-index:100;}
.header-inner {max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;}
.logo {display:flex;align-items:center;}
.logo-img {height:36px;width:auto;display:block;}
.hamburger-btn {display:none;flex-direction:column;gap:5px;background:transparent;border:none;cursor:pointer;padding:8px;z-index:101;}
.hamburger-line {width:24px;height:3px;background:#4b5563;border-radius:2px;transition:all 0.3s ease;}
.hamburger-btn.active .hamburger-line:nth-child(1) {transform:rotate(45deg) translate(6px,6px);}
.hamburger-btn.active .hamburger-line:nth-child(2) {opacity:0;}
.hamburger-btn.active .hamburger-line:nth-child(3) {transform:rotate(-45deg) translate(6px,-6px);}
.header-nav {display:flex;align-items:center;gap:24px;}
.header-nav span {color:#ccc}
.nav-item {color:#333;transition:color 0.2s;font-size:18px;font-weight:600}
.nav-item.active {border-bottom:3px solid #0062ff;color:#0062ff;}
.nav-item:hover {color:#0062ff;border-bottom:3px solid #0062ff;}
.tools-badge {position:relative;}
.badge-new {background:#b80000;color:white;font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;position:absolute;top:-8px;right:-16px;font-style:normal}
.badge-new {background:#f80000;color:#fff!important;font-size:12px;padding:0px 8px;border-radius:4px;font-weight:400;position:absolute;top:-10px;right:-16px;}
.index_h2 {text-align:center;padding:30px 0;}
.icon-title {padding-bottom:20px;text-align:center;}
.signin-btn {padding:8px 16px;border:1px solid #ddd;border-radius:20px;background:transparent;color:#4b5563;font-size:14px;transition:all 0.2s;}
.signin-btn:hover {background:#f3f4f6;}
.hero-section {background:#e5e7eb;padding:48px 24px 32px;}
.hero-content {max-width:1400px;margin:0 auto;}
.hero-content h1 {font-size:28px;font-weight:700;color:#1f2937;margin-bottom:8px;}
.hero-subtitle {font-size:16px;color:#6b7280;}
.breadcrumb-bar {background:#f4f4f4;padding:24px 24px 0 24px;}
.breadcrumb-inner {max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:8px;font-size:14px;}
.breadcrumb-link {color:#4b5563;}
.breadcrumb-link:hover {color:#1f2937;}
.breadcrumb-sep {color:#9ca3af;}
.breadcrumb-current {color:#1f2937;font-weight:500;}
.main-content {max-width:1400px;margin:0 auto;padding:24px;}
.set-search {max-width:600px;margin:0 auto 24px;position:relative;}
.search-input-wrapper {position:relative;background:white;border-radius:8px;padding:12px 16px;box-shadow:0 1px 3px rgba(0,0,0,0.1);}
.search-icon {position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9ca3af;}
.search-input {width:100%;padding-left:32px;border:none;outline:none;font-size:14px;color:#1f2937;}
.search-input::placeholder {color:#9ca3af;}
.set-info-section {background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;box-shadow:0 1px 3px rgba(0,0,0,0.05);}
.set-info-top {display:flex;justify-content:space-between;align-items:flex-start;gap:24px;}
.set-info-left {flex:1;}
.set-title {font-size:24px;font-weight:700;color:#1f2937;margin:0 0 8px 0;}
.set-desc {font-size:14px;color:#6b7280;margin:0;line-height:1.6;}
.set-desc strong {color:#1f2937;font-weight:600;}
.author-link {color:#3b82f6;text-decoration:none;}
.author-link:hover {text-decoration:underline;}
.license-badge {display:inline-block;background:#dbeafe;color:#1e40af;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500;margin-left:8px;}
.set-search-right {flex-shrink:0;width:300px;}
.set-search-right .search-input-wrapper {margin:0;}
.search-container {width:100%;max-width:700px;margin:15px auto 50px;position:relative;text-align:center}
.search-container em {font-style:inherit;padding:0 5px;color:#f80000;font-weight:700;}
.main-search-box {width:100%;position:relative}
.main-search-input {width:100%;padding:18px 70px 18px 25px;margin-top:20px;border:1px solid #ddd;border-radius:40px;font-size:18px;background:#fff;transition:all 0.3s ease;outline:none;}
.main-search-input:focus {border-color:#007bff;box-shadow:0 4px 20px rgba(0,123,255,0.15)}
.main-search-btn {position:absolute;right:20px;top:62%;transform:translateY(-50%);background:#fff;color:#888;border:none;border-radius:50%;width:35px;height:35px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;z-index:2}
.icon-card {background:#fff;border-radius:8px;padding:16px;border:1px solid #e5e7eb;transition:all 0.2s ease;cursor:pointer;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,0.05);}
.icon-card:hover {transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1);border-color:#3b82f6;}
.icon-preview {height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.icon-preview img {width:48px;height:48px;object-fit:contain;}
.icon-name {font-size:13px;color:#374151;font-weight:500;word-break:break-word;}
.icons-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;}
@media (max-width:768px) {.hamburger-btn {display:flex;}
.header-nav {display:flex !important;position:fixed;top:0;right:-100%;width:280px;height:100vh;background:#fff;box-shadow:-2px 0 10px rgba(0,0,0,0.1);flex-direction:column;align-items:flex-start;padding:80px 24px 24px;gap:0;transition:right 0.3s ease;z-index:99;overflow-y:auto;}
.header-nav.active {right:0 !important;}
.nav-item {width:100%;padding:16px 0;border-bottom:1px solid #e5e7eb;font-size:20px;font-weight:600}
.header-nav span {display:none}
.nav-item:last-child {border-bottom:none;}
.signin-btn {width:100%;text-align:center;margin-top:16px;}
.badge-new {position:static;margin-left:8px;}
.menu-overlay {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:98;opacity:0;transition:opacity 0.3s ease;}
.menu-overlay.active {display:block;opacity:1;}
.set-info-top {flex-direction:column;}
.set-search-right {width:100%;}
.icons-grid {grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
}
@media (max-width:480px) {.set-info-section {padding:16px;}
.set-title {font-size:20px;}
.icons-grid {grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;}
.icon-preview {height:60px;}
.icon-preview img {width:36px;height:36px;}
.icon-name {font-size:12px;}
}
.sets-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.set-card {background:#fff;border-radius:10px;padding:16px;display:flex;gap:16px;transition:all 0.2s;}
.set-card:hover {transform:translateY(-2px);}
.set-preview {display:grid;grid-template-columns:repeat(3,1fr);width:120px;height:96px;flex-shrink:0;}
.set-preview-item {display:flex;align-items:center;justify-content:center;}
.set-preview-item img {width:100%;height:100%;object-fit:contain;padding:0px 8px;}
.set-preview-item svg {width:24px;height:24px;}
.set-info {flex:1;display:flex;flex-direction:column;justify-content:center;}
.set-name {font-size:16px;font-weight:600;color:#1f2937;margin-bottom:4px;}
.set-author {font-size:13px;color:#6b7280;margin-bottom:4px;}
.set-count {font-size:13px;color:#6b7280;margin-bottom:8px;}
.set-license {display:inline-block;background:#dbeafe;color:#1e40af;font-size:12px;padding:3px 8px;border-radius:4px;font-weight:500;text-align:center;}
.set-license a {display:block;}
.icons-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;}
.icon-card {background:#fff;border-radius:10px;padding:20px 12px 14px;border:1px solid #e5e7eb;transition:all 0.25s ease;cursor:pointer;text-align:center;}
.icon-card:hover {transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.08);border-color:#3b82f6;}
.icon-preview {width:48px;height:48px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;}
.icon-preview img {width:40px;height:40px;object-fit:contain;}
.icon-card:hover .icon-preview img {filter:brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(195deg) brightness(95%) contrast(90%);transform:scale(1.15);}
.icon-name {font-size:13px;font-weight:500;color:#1f2937;margin-bottom:4px;}
.icon-file {font-size:11px;color:#9ca3af;opacity:0;max-height:0;overflow:hidden;transition:all 0.25s ease;}
.icon-card:hover .icon-file {opacity:1;max-height:20px;margin-top:4px;}
.pagination {display:flex;justify-content:center;align-items:center;gap:8px;margin-top:32px;flex-wrap:wrap;}
.page-btn {padding:8px 16px;background:#fff;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;color:#4b5563;transition:all 0.2s;}
.page-btn:hover:not(:disabled) {background:#f3f4f6;border-color:#d1d5db;}
.page-btn:disabled {opacity:0.5;cursor:not-allowed;}
.page-number {padding:8px 12px;background:#3b82f6;color:#fff;border-radius:6px;font-size:14px;font-weight:500;}
.detail-layout {display:grid;grid-template-columns:1fr 800px;gap:24px;}
.preview-panel {display:flex;flex-direction:column;gap:16px;}
.preview-box {background:#fff;border-radius:8px;padding:24px;position:relative;}
.preview-box .icon-meta {padding-bottom:20px;}
.preview-actions {position:absolute;top:12px;right:12px;display:flex;gap:8px;}
.preview-action-btn {width:32px;height:32px;background:white;border:1px solid #d1d5db;border-radius:4px;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.preview-action-btn:hover {background:#f3f4f6;}
.preview-canvas {width:100%;height:400px;display:flex;align-items:center;justify-content:center; background:#f4f4f4;border-radius:4px;margin-bottom:16px;}
.preview-canvas svg {width:200px;height:200px;}
.color-picker-section {background:white;border-radius:8px;padding:16px;}
.color-controls {display:flex;align-items:center;gap:12px;}
.color-toggle {display:flex;align-items:center;gap:8px;font-size:14px;color:#374151;}
.color-select {padding:6px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;background:white;}
.info-panel {background:white;border-radius:8px;padding:24px;}
.info-panel h1 {font-size:24px;font-weight:600;color:#1f2937;margin-bottom:16px;}
.meta-info {display:flex;flex-direction:column;gap:8px;margin-bottom:24px;font-size:14px;color:#6b7280;}
.meta-row {display:flex;align-items:center;gap:8px;}
.meta-label {font-weight:500;color:#374151;}
.badge-basic {background:#10b981;color:white;font-size:11px;padding:2px 8px;border-radius:4px;font-weight:500;}
.badge-member {background:#3b82f6;color:white;font-size:11px;padding:2px 8px;border-radius:4px;font-weight:500;}
.badge-pro {background:#ec4899;color:white;font-size:11px;padding:2px 8px;border-radius:4px;font-weight:500;}
.customize-btn {width:100%;padding:12px;background:#3b82f6;color:white;border-radius:6px;font-size:14px;font-weight:500;margin-bottom:24px;transition:background-color 0.2s;}
.customize-btn:hover {background:#2563eb;}
.copy-section {margin-bottom:16px;}
.copy-section h3 {font-size:13px;font-weight:600;color:#374151;margin-bottom:8px;}
.code-block {background:#f3f4f6;font-family:monospace;font-size:12px;color:#1f2937;overflow-x:auto;margin-bottom:8px;max-width:100%; word-wrap:break-word;white-space:pre-wrap;max-height: 80px;overflow: scroll; overflow-x: hidden;}
.code-block::-webkit-scrollbar { width: 3px; } 
.code-block::-webkit-scrollbar-thumb { border-radius: 10px; background: #333; } 
.code-block::-webkit-scrollbar-track { border-radius: 0; background: rgba(0,0,0,0.1); } 
.copy-btn {padding:6px 12px;background:#333;border-radius:4px;font-size:12px;color:#374151;transition:background-color 0.2s;}
.copy-btn:hover {background:#333;}
.download-section {margin-top:10px;}
.download-buttons {display:flex;gap:8px;margin-top:25px;}
.download-btn {flex:1;padding:10px;background:#333;border-radius:6px;font-size:13px;color:#374151;transition:background-color 0.2s;}
.download-btn:hover {background:#e5e7eb;}
.about-section {padding-bottom:10px;}
.about-title {font-size:20px;font-weight:600;color:#1f2937;margin-bottom:10px;}
.about-content p {font-size:14px;color:#4b5563;margin-bottom:16px;line-height:1.6;}
.about-content a {color:#3b82f6;}
.about-content a:hover {text-decoration:underline;}
.highlights-title,.style-notes-title,.related-title,.code-title {font-size:16px;font-weight:600;color:#1f2937;margin-top:24px;margin-bottom:12px;}
.highlights-list,.style-notes-list {list-style-type:disc;padding-left:20px;font-size:14px;color:#4b5563;line-height:1.8;}
.related-tags {display:flex;flex-wrap:wrap;gap:8px;}
.tag {padding:4px 12px;background:#f3f4f6;border-radius:16px;font-size:13px;color:#374151;}
.code-tabs {margin-bottom:16px;background: #f4f4f4; padding:8px;border-radius: 6px;}
.code-tab-group {display:flex;justify-content:space-between;align-items:center;background:#f3f4f6;}
.code-tab-label {font-size:13px;font-weight:500;color:#374151;}
.code-copy-btn {padding:4px 12px;background:#333;border-radius:4px;font-size:12px;color:#fff;transition:background-color 0.2s;}
.code-copy-btn:hover {background:#0062ff;}
.more-from-set-section {padding:32px 0;}
.more-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.more-title {font-size:20px;font-weight:600;color:#1f2937;}
.see-all-btn {color:#3b82f6;text-decoration:none;font-size:14px;font-weight:500;}
.see-all-btn:hover {text-decoration:underline;}
.more-icons-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;}
.icon-card-small {background:#fff;border-radius:8px;padding:12px;border:1px solid #e5e7eb;transition:all 0.2s ease;cursor:pointer;text-align:center;}
.icon-card-small:hover {transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.08);border-color:#3b82f6;}
.icon-preview-small {width:48px;height:48px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;}
.icon-preview-small img {width:40px;height:40px;object-fit:contain;}
.icon-name-small {font-size:12px;font-weight:500;color:#374151;margin-bottom:4px;}
.icon-file-small {font-size:11px;color:#9ca3af;}
.footer {background:#fff;padding:32px 24px;border-top:1px solid #eee;}
.footer-inner {max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;}
.footer p {font-size:13px;color:#6b7280;}
.footer-links {display:flex;gap:24px;}
.footer-links a {font-size:13px;color:#6b7280;transition:color 0.2s;}
.footer-links a:hover {color:#1f2937;}
.png-modal {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:1000;align-items:center;justify-content:center;}
.png-modal.active {display:flex;}
.png-modal-content {background:white;border-radius:12px;padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.png-modal-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #e5e7eb;}
.png-modal-header h3 {font-size:20px;font-weight:600;color:#1f2937;margin:0;}
.png-modal-close {background:transparent;border:none;font-size:28px;color:#6b7280;cursor:pointer;padding:0;width:32px;height:32px;line-height:1;transition:color 0.2s;}
.png-modal-close:hover {color:#1f2937;}
.png-modal-body {padding:0;}
.png-modal-desc {font-size:14px;color:#6b7280;margin-bottom:20px;}
.png-size-section {margin-bottom:24px;}
.png-size-section h4 {font-size:14px;font-weight:600;color:#374151;margin-bottom:12px;}
.png-size-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.png-size-btn {padding:10px 8px;background:#f3f4f6;border:2px solid transparent;border-radius:6px;font-size:13px;color:#374151;cursor:pointer;transition:all 0.2s;font-weight:500;}
.png-size-btn:hover {background:#e5e7eb;border-color:#3b82f6;}
.png-custom-size {display:flex;align-items:center;gap:8px;}
.png-custom-size input[type="number"] {flex:1;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;outline:none;transition:border-color 0.2s;}
.png-custom-size input[type="number"]:focus {border-color:#3b82f6;}
.size-separator {font-size:16px;color:#6b7280;font-weight:500;}
.png-custom-btn {padding:10px 20px;background:#3b82f6;color:white;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color 0.2s;white-space:nowrap;}
.png-custom-btn:hover {background:#2563eb;}
@media (max-width:1024px) {.detail-layout {grid-template-columns:1fr;}
.preview-canvas {height:300px;}
.preview-canvas svg {width:150px;height:150px;}
}
@media (max-width:768px) {.header {padding:12px 16px;}
.logo-img {height:28px;}
.main-content {max-width:100%;padding:10px;overflow-x:hidden;}
.hero-section {padding:32px 16px 24px;}
.hero-content h1 {font-size:22px;}
.hero-subtitle {font-size:14px;}
.breadcrumb-bar {padding:16px 16px 0 16px;}
.breadcrumb-inner {font-size:12px;}
.main-content {padding:16px;}
.set-search {max-width:100%;}
.filter-bar {overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;}
.filter-btn {white-space:nowrap;flex-shrink:0;}
.icons-grid {grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;}
.icon-card {padding:14px 8px 10px;}
.icon-preview {width:44px;height:44px;}
.icon-preview img {width:32px;height:32px;}
.icon-name {font-size:11px;}
.icon-file {display:none;}
.detail-layout {grid-template-columns:1fr;gap:16px;width:100%;max-width:100%;}
.preview-panel {width:100%;max-width:100%;}
.info-panel {width:100%;max-width:100%;}
.preview-box {padding:16px;width:100%;max-width:100%;box-sizing:border-box;}
.preview-canvas {height:250px;width:100%;max-width:100%;box-sizing:border-box;}
.preview-canvas svg {width:120px;height:120px;max-width:100%;}
.color-picker-section {padding:12px;}
.color-controls {flex-wrap:wrap;gap:8px;}
.info-panel {padding:16px;width:100%;max-width:100%;box-sizing:border-box;}
.info-panel h1 {font-size:20px;}
.customize-btn {width:100%;text-align:center;font-size:14px;padding:12px;}
.about-section {padding:16px 0;}
.more-from-set-section {padding:16px 0;}
.pagination {flex-wrap:wrap;gap:6px;}
.page-btn {padding:6px 12px;font-size:12px;}
.page-number {padding:6px 10px;font-size:12px;}
.footer {padding:24px 16px;}
.footer-inner {flex-direction:column;text-align:center;gap:12px;}
.footer-links {justify-content:center;gap:16px;}
.png-modal-content {width:95%;padding:20px;max-height:85vh;}
.png-size-grid {grid-template-columns:repeat(3,1fr);}
.png-custom-size {flex-wrap:wrap;}
.png-custom-btn {width:100%;margin-top:8px;}
}
@media (max-width:480px) {.hero-content h1 {font-size:18px;}
.icons-grid {grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;}
.icon-card {padding:10px 6px 8px;border-radius:6px;}
.icon-preview {width:36px;height:36px;}
.icon-preview img {width:28px;height:28px;}
.icon-name {font-size:10px;}
.preview-canvas {height:200px;}
.preview-canvas svg {width:100px;height:100px;}
.set-title {font-size:18px;}
.info-panel h1 {font-size:18px;}
/**.action-sections{ display: none;}**/
}
.svg-down {background:#0062ff;color:#fff;font-size:18px;font-weight:600;}
.png-down {background:#01af96;color:#fff;font-size:18px;font-weight:600;}
.moer_bnt {text-align:center;margin-top:40px;margin-bottom:30px;}
.moer_bnt a {display:block;width:200px;padding:8px 12px;margin:0 auto;border-radius:50px;background:#dbeafe;font-weight:500;}
.moer_bnt a:hover {background:#dedede;}
.pages {text-align:center;margin:20px 0;}
.pages a {display:inline-block;height:30px;line-height:30px;background:#fff;text-align:center;padding:0 15px;margin:3px;color:#000;border-radius:8px;}
.pages a:hover {background:#444;color:#fff;text-decoration:none;}
.pages b {display:inline-block;height:30px;line-height:30px;background:#0062ff;color:#fff;text-align:center;padding:0 10px;margin:3px;border-radius:8px;}
.pages .total {display:none;}
.pages a:first-child {display:none !important;}
.pages a:last-child {display:none !important;}
.about-section .set-link {color: #3b82f6;}
.about-section .author {color: #3b82f6;}
a.donw_a_bnt {color: #3b82f6;}
.main-content p {
    line-height: 28px;
    margin-top: 8px;
}
.main-content h2 {
    font-size: 18px;
    padding: 10px 0;
}