/* ============================================
   Tools Page Styles
   ============================================ */
.tools-section { padding: 0 0 var(--space-16); }
.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.tool-card { display: flex; gap: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: var(--space-6); transition: all var(--transition-normal) var(--ease-out-quart); }
.tool-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tool-icon { flex-shrink: 0; width: 56px; height: 56px; background: var(--color-primary-light); color: var(--color-primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.tool-content { flex-grow: 1; }
.tool-title { font-size: var(--text-h4); font-weight: 600; margin-bottom: var(--space-2); }
.tool-description { font-size: var(--text-body-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.tool-tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.tool-links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.tool-link { font-size: var(--text-caption); color: var(--color-text-secondary); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: 6px; transition: all var(--transition-fast); }
.tool-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tool-link-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.tool-link-primary:hover { background: var(--color-primary-hover); }
.skills-section-alt { padding: var(--space-16) 0; background: var(--color-surface); }
.skills-guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.skill-guide-card { background: var(--color-background); border: 1px solid var(--color-border); border-radius: 16px; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); transition: all var(--transition-normal) var(--ease-out-quart); text-decoration: none; color: inherit; }
.skill-guide-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.skill-guide-icon { width: 48px; height: 48px; background: var(--color-primary-light); color: var(--color-primary); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.skill-guide-card h3 { font-size: var(--text-body); font-weight: 600; }
.skill-guide-card p { font-size: var(--text-body-sm); color: var(--color-text-secondary); flex-grow: 1; }
.skill-level { display: inline-flex; align-self: flex-start; padding: var(--space-1) var(--space-3); border-radius: 9999px; font-size: var(--text-caption); font-weight: 500; background: var(--color-secondary-light); color: var(--color-secondary); }
.skill-level-adv { background: var(--color-primary-light); color: var(--color-primary); }
@media (max-width: 1024px) { .tools-grid { grid-template-columns: 1fr; } .skills-guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .skills-guide-grid { grid-template-columns: 1fr; } .tool-card { flex-direction: column; } .tool-icon { width: 48px; height: 48px; } }