/* Tool and category pages (includes/tool-template.php, includes/category-template.php). */
:root { --kn-bg: #f4f6fb; --kn-card: #fff; --kn-text: #1a2233; --kn-muted: #5b6577; --kn-line: #e3e8f0; --kn-accent: #1e88e5; --kn-accent-dark: #1565c0; }
body.kn-page { margin: 0; background: var(--kn-bg); color: var(--kn-text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; }
.kn-wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px 48px; }
.kn-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.kn-brand { font-weight: 800; color: var(--kn-text); text-decoration: none; font-size: 1.05rem; }
.kn-brand span { color: var(--kn-accent); }
.kn-topbar a.kn-home { color: var(--kn-accent); text-decoration: none; font-weight: 600; }

.kn-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; padding: 26px 28px 28px; color: #e8f1ff;
  background: radial-gradient(ellipse at 85% 20%, #164a8a 0%, rgba(22,74,138,0) 55%), linear-gradient(135deg, #0b1a33, #0a1426 60%, #08101f); box-shadow: 0 14px 40px rgba(10, 20, 38, .25); }
.kn-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.kn-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,16,31,.85) 0%, rgba(8,16,31,.45) 50%, rgba(8,16,31,0) 85%); }
.kn-hero-inner { max-width: 720px; }
.kn-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; font-size: .85rem; }
.kn-crumbs li { color: rgba(232,241,255,.75); }
.kn-crumbs li + li::before { content: "›"; margin-right: 6px; color: rgba(232,241,255,.45); }
.kn-crumbs a { color: #9fd0ff; text-decoration: none; }
.kn-crumbs a:hover { text-decoration: underline; }
.kn-hero h1 { margin: 0 0 6px; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.15; color: #fff; letter-spacing: -.01em; }
.kn-lede { margin: 0; color: rgba(232,241,255,.85); max-width: 640px; }
.kn-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.kn-chips li { font-size: .82rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: rgba(159,208,255,.12); border: 1px solid rgba(159,208,255,.3); color: #dcecff; }
.kn-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.kn-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; font-size: .95rem; }
.kn-btn-primary { background: linear-gradient(135deg, #42a5f5, var(--kn-accent-dark)); color: #fff; box-shadow: 0 6px 18px rgba(30,136,229,.35); }
.kn-btn-primary:hover { filter: brightness(1.08); }
.kn-btn-ghost { background: rgba(255,255,255,.1); color: #e8f1ff; border: 1px solid rgba(255,255,255,.25); }
.kn-btn-ghost:hover { background: rgba(255,255,255,.18); }

.kn-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; margin-top: 22px; }
@media (max-width: 860px) { .kn-layout { grid-template-columns: 1fr; } }
.kn-card { background: var(--kn-card); border: 1px solid var(--kn-line); border-radius: 14px; padding: 20px 22px; margin-bottom: 18px; }
.kn-card h2, .kn-card h3 { margin: 0 0 10px; font-size: 1.15rem; }
.kn-meta { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.kn-meta dt { color: var(--kn-muted); font-weight: 600; }
.kn-meta dd { margin: 0; word-break: break-word; }
.kn-meta a, .kn-card a { color: var(--kn-accent-dark); }
.kn-card ul { margin: 0; padding-left: 18px; color: var(--kn-muted); }

.kn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 22px; }
.kn-tool { display: flex; flex-direction: column; background: var(--kn-card); border: 1px solid var(--kn-line); border-radius: 14px; padding: 16px 18px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.kn-tool:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 40, 80, .1); border-color: #bcd6f5; }
.kn-tool h2 { margin: 0 0 6px; font-size: 1.05rem; }
.kn-tool h2 a { color: var(--kn-text); text-decoration: none; }
.kn-tool h2 a:hover { color: var(--kn-accent-dark); }
.kn-tool p { margin: 0 0 12px; color: var(--kn-muted); font-size: .92rem; flex: 1; }
.kn-tool-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--kn-line); padding-top: 10px; }
.kn-tool-foot a { color: var(--kn-accent-dark); font-weight: 600; text-decoration: none; font-size: .9rem; }
.kn-fav { background: none; border: 1px solid var(--kn-line); border-radius: 8px; padding: 4px 9px; cursor: pointer; color: var(--kn-muted); }
.kn-fav:hover { color: #e53935; border-color: #e53935; }
.kn-foot { margin-top: 30px; text-align: center; color: var(--kn-muted); font-size: .85rem; }
.kn-foot a { color: var(--kn-accent-dark); }