.tools-page { padding-bottom: var(--space-2xl); }

.tools-grid {
    display: grid; grid-template-columns: repeat(1, 1fr); gap: 1px;
    background: var(--color-border); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); overflow: hidden;
}

.tool-card {
    display: flex; align-items: center; gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-surface); color: inherit;
    transition: background var(--transition-fast);
}
.tool-card:hover { background: var(--color-surface-elevated); }

.tool-icon {
    width: 40px; height: 40px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tool-icon svg { width: 20px; height: 20px; }
.tool-icon.t-amber { background: rgba(243, 159, 90, 0.1); color: var(--color-amber); }
.tool-icon.t-rose  { background: rgba(174, 68, 90, 0.1); color: var(--color-rose); }
.tool-icon.t-plum  { background: rgba(102, 37, 73, 0.15); color: var(--color-blush); }
.tool-icon.t-blush { background: rgba(232, 188, 185, 0.08); color: var(--color-blush); }

.tool-info { flex: 1; min-width: 0; }
.tool-name {
    font-size: 0.88rem; font-weight: var(--font-weight-semibold); margin-bottom: 2px;
}
.tool-desc {
    font-size: 0.78rem; color: var(--color-text-secondary); line-height: 1.5;
}

.tool-arrow {
    flex-shrink: 0; width: 16px; height: 16px; color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}
.tool-card:hover .tool-arrow { transform: translateX(3px); color: var(--color-accent); }

.tool-status {
    flex-shrink: 0; font-size: 0.68rem; color: var(--color-text-muted);
    display: flex; align-items: center; gap: 4px;
}
.status-dot {
    width: 5px; height: 5px; border-radius: 50%;
}
.status-dot.ready { background: #22c55e; }
.status-dot.coming { background: var(--color-amber); }

/* ── Tool detail page ── */
.tool-detail { padding-bottom: var(--space-2xl); }
.tool-detail-header {
    display: flex; align-items: flex-start; gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}
.tool-detail-header .tool-icon { width: 48px; height: 48px; }
.tool-detail-header .tool-icon svg { width: 24px; height: 24px; }
.tool-detail-title {
    font-size: 1.3rem; font-weight: var(--font-weight-bold); margin-bottom: 4px;
}
.tool-detail-desc {
    font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.6;
    max-width: 560px;
}
.tool-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--space-4xl) var(--space-xl); text-align: center;
    border: 1px dashed var(--color-border); border-radius: var(--radius-lg);
}
.tool-placeholder svg {
    width: 48px; height: 48px; color: var(--color-text-muted); opacity: 0.3;
    margin-bottom: var(--space-md);
}
.tool-placeholder p {
    font-size: 0.85rem; color: var(--color-text-muted);
}
.tool-back {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: var(--space-lg);
    transition: color var(--transition-fast);
}
.tool-back:hover { color: var(--color-accent); }
.tool-back svg { width: 14px; height: 14px; }

@media (max-width: 768px) {
    .tool-card { padding: var(--space-md); gap: var(--space-md); }
    .tool-detail-header { flex-direction: column; }
}