/* Tools listing page */
.tools-header{text-align:center;padding:6rem 2rem 2rem;max-width:700px;margin:0 auto}
.tools-header h1{font-size:2.5rem;color:var(--text-primary);margin-bottom:1rem}
.tools-header p{color:var(--text-secondary);font-size:1.05rem;line-height:1.6}

.tools-grid{max-width:800px;margin:2rem auto;padding:0 2rem;display:flex;flex-direction:column;gap:1.2rem}

.tool-card{display:flex;align-items:start;gap:1.5rem;padding:1.5rem 2rem;background:var(--secondary-dark);border:1px solid var(--border-color);border-radius:4px;text-decoration:none;transition:all .3s;position:relative}
.tool-card:hover{border-color:var(--accent-cyan);transform:translateY(-2px)}
.tool-card:hover .tool-arrow{color:var(--accent-cyan);transform:translateX(4px)}

.tool-icon{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(100,255,218,.08);border:1px solid rgba(100,255,218,.2);color:var(--accent-cyan);margin-top:.2rem}
.tool-icon svg{width:24px;height:24px}

.tool-info{flex:1;min-width:0}
.tool-info h2{font-size:1.3rem;color:var(--text-primary);margin-bottom:.2rem;font-family:'JetBrains Mono',monospace}
.tool-lang{color:var(--accent-cyan);font-size:.75rem;font-family:'JetBrains Mono',monospace;margin-bottom:.6rem;letter-spacing:.5px;display:flex;align-items:center;gap:.8rem}
.tool-card-stars{color:var(--text-secondary);font-size:.7rem;font-family:'JetBrains Mono',monospace;display:none;align-items:center;gap:.25rem}
.tool-card-stars.visible{display:inline-flex}
.tool-card-stars svg{width:12px;height:12px;color:#e3b341}
.tool-desc{color:var(--text-secondary);font-size:.9rem;line-height:1.6}
.tool-arrow{color:var(--text-muted);font-size:1.2rem;position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);transition:all .3s}

/* Tool detail page */
.back-link{display:inline-block;padding:6rem 2rem 1rem;max-width:800px;margin:0 auto;color:var(--text-secondary);text-decoration:none;font-size:.9rem;font-family:'JetBrains Mono',monospace;transition:color .3s}
.back-link:hover{color:var(--accent-cyan)}

.tool-detail{max-width:800px;margin:0 auto;padding:0 2rem 4rem}

.tool-detail .tool-hero{text-align:center;margin-bottom:2.5rem}
.tool-detail .tool-hero h1{font-size:2.5rem;color:var(--text-primary);margin-bottom:.5rem;font-family:'JetBrains Mono',monospace}
.tool-detail .tool-hero .tool-tagline{color:var(--text-secondary);font-size:1.1rem;line-height:1.6;margin-bottom:1.5rem}
.tool-detail .tool-hero-img{max-width:100%;border-radius:4px;margin:1.5rem 0;border:1px solid var(--border-color)}

.tool-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin:1.5rem 0 2.5rem}
.tool-actions .btn{font-size:.85rem;padding:.7rem 1.5rem}
.btn-github{border-color:var(--text-secondary);color:var(--text-secondary);display:inline-flex;align-items:center;gap:.5rem}
.btn-github:hover{border-color:var(--accent-cyan);color:var(--accent-cyan)}
.btn-icon{width:16px;height:16px;flex-shrink:0}
.github-stars{font-size:.75rem;font-family:'JetBrains Mono',monospace;display:none;align-items:center;gap:.3rem;margin-left:.3rem;border-left:1px solid var(--border-color);padding-left:.6rem}
.github-stars.visible{display:inline-flex}
.github-stars .star-icon{width:14px;height:14px;color:#e3b341}

.tool-install{background:var(--secondary-dark);border:1px solid var(--border-color);border-radius:4px;padding:1rem 1.4rem;font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--accent-cyan);margin:1.5rem 0;overflow-x:auto;position:relative}
.tool-install code{color:var(--accent-cyan)}
.tool-install .install-label{color:var(--text-muted);font-size:.7rem;letter-spacing:.5px;display:block;margin-bottom:.4rem}

.tool-detail h2{font-size:1.3rem;color:var(--text-primary);margin:2.5rem 0 1rem;padding-bottom:.4rem;border-bottom:1px solid var(--border-color)}
.tool-detail h3{font-size:1.05rem;color:var(--text-primary);margin:1.5rem 0 .8rem}
.tool-detail p{color:var(--text-secondary);font-size:.95rem;line-height:1.7;margin-bottom:1rem}

.tool-detail ul,.tool-detail ol{color:var(--text-secondary);font-size:.95rem;line-height:1.7;margin-bottom:1rem;padding-left:1.5rem}
.tool-detail li{margin-bottom:.4rem}
.tool-detail li strong{color:var(--text-primary)}

.tool-detail table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.85rem}
.tool-detail th{text-align:left;padding:.6rem 1rem;background:var(--secondary-dark);color:var(--accent-cyan);font-family:'JetBrains Mono',monospace;font-weight:500;border-bottom:2px solid var(--border-color)}
.tool-detail td{padding:.6rem 1rem;color:var(--text-secondary);border-bottom:1px solid var(--border-color)}
.tool-detail tr:hover td{background:rgba(100,255,218,.02)}

.tool-detail .tool-options{background:var(--secondary-dark);border:1px solid var(--border-color);border-radius:4px;padding:1.2rem 1.5rem;margin:1rem 0}
.tool-detail .tool-options code{color:var(--accent-cyan);font-family:'JetBrains Mono',monospace;font-size:.85rem}
.tool-detail .tool-options p{margin-bottom:.5rem}

.tool-detail code{color:var(--accent-cyan);font-family:'JetBrains Mono',monospace;font-size:.88em}
.tool-detail pre{background:var(--secondary-dark);border:1px solid var(--border-color);border-radius:4px;padding:1rem 1.4rem;font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--text-secondary);margin:1rem 0;overflow-x:auto;line-height:1.6}
.tool-detail pre code{color:var(--text-secondary)}

.tool-flow{display:flex;flex-direction:column;gap:.8rem;margin:1rem 0 1.5rem}
.tool-flow-step{display:flex;align-items:start;gap:.8rem}
.tool-flow-num{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(100,255,218,.1);border:1px solid rgba(100,255,218,.3);color:var(--accent-cyan);font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:700}
.tool-flow-text{color:var(--text-secondary);font-size:.9rem;line-height:1.5;padding-top:.25rem}
.tool-flow-text strong{color:var(--text-primary)}

/* Mobile */
@media(max-width:768px){
    .tools-header{padding:5rem 1.5rem 1.5rem}
    .tools-header h1{font-size:2rem}
    .tools-grid{padding:0 1.5rem}
    .tool-card{flex-direction:column;gap:1rem;padding:1.2rem 1.5rem}
    .tool-arrow{position:static;transform:none;margin-top:.5rem}
    .back-link{padding:5rem 1.5rem 1rem}
    .tool-detail{padding:0 1.5rem 3rem}
    .tool-detail .tool-hero h1{font-size:1.8rem}
    .tool-actions{flex-direction:column;align-items:center}
    .tool-detail table{font-size:.78rem}
    .tool-detail th,.tool-detail td{padding:.5rem .6rem}
    .tool-install table td+td{overflow-wrap:break-word;word-break:break-word}
    .tool-install table code{word-break:break-all}
}