/* ===== Icon Detail Page ===== */

/* Breadcrumb */
.icon-breadcrumb{padding:14px 0;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}
.breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;gap:6px;list-style:none;font-size:13px;color:var(--text-muted)}
.breadcrumb-list a{color:var(--accent);font-weight:500;transition:opacity .2s}
.breadcrumb-list a:hover{opacity:.75}
.breadcrumb-list i{font-size:12px;color:var(--text-muted)}
.breadcrumb-list [aria-current]{color:var(--text-primary);font-weight:600}

/* Hero */
.icon-hero{padding:48px 0 60px}
@media(min-width:768px){.icon-hero{padding:64px 0 80px}}
.icon-hero-grid{display:grid;gap:48px;align-items:start}
@media(min-width:1024px){.icon-hero-grid{grid-template-columns:380px 1fr;gap:64px}}

/* Preview */
.icon-preview-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.icon-preview-box{width:100%;max-width:320px;aspect-ratio:1;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:24px;display:flex;align-items:center;justify-content:center;padding:48px;transition:background .3s}
.icon-preview-box[data-bg="light"]{background:#f8fafc}
.icon-preview-box[data-bg="dark"]{background:#0f172a;border-color:#1e293b}
.icon-preview-box[data-bg="accent"]{background:var(--accent-light);border-color:rgba(var(--accent-rgb),.2)}
.icon-preview-box img{width:100%;height:100%;object-fit:contain;transition:filter .3s}
.icon-preview-box[data-bg="dark"] img{filter:invert(1) brightness(2)}

.icon-preview-controls{display:flex;gap:8px}
.preview-bg-btn{width:36px;height:36px;border-radius:50%;border:2px solid var(--border-color);cursor:pointer;padding:3px;background:transparent;transition:border-color .2s}
.preview-bg-btn.active{border-color:var(--accent)}
.bg-swatch{display:block;width:100%;height:100%;border-radius:50%}
.bg-swatch.white{background:#ffffff;box-shadow:inset 0 0 0 1px #e2e8f0}
.bg-swatch.light{background:#f1f5f9}
.bg-swatch.dark{background:#0f172a}
.bg-swatch.accent{background:var(--accent-light)}

/* Info */
.icon-collection-tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent);margin-bottom:12px}
.icon-collection-tag a{color:inherit;transition:opacity .2s}
.icon-collection-tag a:hover{opacity:.75}
.icon-collection-tag i{font-size:15px}

.icon-info h1{font-size:28px;font-weight:800;margin-bottom:10px;line-height:1.2}
@media(min-width:768px){.icon-info h1{font-size:36px}}
.icon-tagline{font-size:15px;color:var(--text-secondary);line-height:1.7;margin-bottom:28px;max-width:500px}

/* Actions */
.icon-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}

/* Meta */
.icon-meta-rows{display:flex;flex-direction:column;gap:0;margin-bottom:28px}
.meta-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-color);font-size:14px}
.meta-row:last-child{border-bottom:none}
.meta-row dt{display:flex;align-items:center;gap:6px;min-width:120px;color:var(--text-muted);font-weight:500;font-style:normal}
.meta-row dt i{font-size:15px}
.meta-row dd{color:var(--text-primary);font-style:normal}
.meta-row dd a{color:var(--accent);font-weight:500;transition:opacity .2s}
.meta-row dd a:hover{opacity:.75}

/* Tags */
.icon-tags{display:flex;flex-wrap:wrap;gap:6px}
.tag-chip{padding:4px 10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;font-size:12px;color:var(--text-secondary);transition:all .2s;text-decoration:none}
.tag-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}

/* Usage snippet */
.icon-usage{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius);overflow:hidden}
.usage-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border-color)}
.usage-label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.usage-copy-btn{width:28px;height:28px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);color:var(--text-muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.usage-copy-btn:hover{border-color:var(--accent);color:var(--accent)}
.usage-code{padding:14px 16px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-secondary);overflow-x:auto;white-space:pre-wrap;word-break:break-all;margin:0}

/* Related Icons */
.related-icons-section{padding:60px 0 80px;background:var(--bg-secondary)}
.section-header-inline{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.section-header-inline h2{font-size:20px;font-weight:700}
@media(min-width:768px){.section-header-inline h2{font-size:24px}}
.see-all-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:14px;font-weight:600;transition:gap .2s}
.see-all-link:hover{gap:10px}

.related-icons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
@media(min-width:640px){.related-icons-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px}}
@media(min-width:1024px){.related-icons-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}

.related-icon-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius);transition:all .3s;text-align:center}
.related-icon-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.related-icon-preview{width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.related-icon-preview img{width:100%;height:100%;object-fit:contain}
[data-theme="dark"] .related-icon-preview img{filter:invert(1) brightness(2)}
.related-icon-name{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;line-height:1.3}

/* Toast */
.copy-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--text-primary);color:var(--bg-primary);padding:12px 24px;border-radius:12px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;z-index:9999;transition:transform .3s ease,opacity .3s ease;opacity:0;pointer-events:none;box-shadow:var(--shadow-xl)}
.copy-toast.visible{transform:translateX(-50%) translateY(0);opacity:1}
.copy-toast i{color:var(--accent);font-size:18px}