:root {
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --secondary: #0F172A;
  --accent: #06B6D4;
  --background: #F1F5F9;
  --surface: #FFFFFF;
  --surface-alt: #F8FAFC;
  --border: #E2E8F0;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --success: #10B981;
  --error: #EF4444;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--background);
  color: var(--text-primary);
  line-height: 1.6;
}

a { color: var(--primary); text-decoration: none; }

a:hover { color: var(--primary-dark); }

.container {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
}

.site-header {
  background: var(--secondary);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-text { font-size: 1.35rem; font-weight: 800; color: #fff; }
.brand-text span { color: var(--accent); }

.primary-nav .menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: .35rem;
}

.primary-nav a {
  color: #cbd5e1;
  font-size: .95rem;
  padding: .5rem .8rem;
  border-radius: 10px;
}

.primary-nav a:hover,
.primary-nav .current-menu-item > a { background: rgba(255,255,255,.12); color: #fff; }

.menu-toggle,
.header-search-toggle {
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  background: transparent;
  padding: .45rem .6rem;
  border-radius: 8px;
  cursor: pointer;
}

.menu-toggle { display: none; }
.menu-toggle span { display: block; width: 18px; height: 2px; background: #fff; margin: 3px 0; }

.hero {
  background: var(--secondary);
  color: #fff;
  padding: 4.5rem 0;
  text-align: center;
}

.hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 .8rem; }
.hero p { color: #94a3b8; max-width: 760px; margin: 0 auto 1.5rem; }

.hero-search,
.kbase-live-search-form {
  display: flex;
  gap: .75rem;
  max-width: 760px;
  margin: 0 auto;
}

.kbase-live-search-input,
.tools-filters input,
.tools-filters select,
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .8rem 1rem;
  font-family: inherit;
  background: var(--surface);
}

.kbase-live-search-form button,
.btn,
.contact-form button,
.tools-filters button {
  border: none;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  padding: .8rem 1rem;
  cursor: pointer;
}

.btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }

.page-section { padding: 2.5rem 0; }
.section-title-wrap { margin-bottom: 1rem; }


.category-grid,
.article-grid,
.tool-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.category-card,
.article-card,
.tool-card,
.single-article,
.contact-form,
.contact-info,
.kbase-voting,
.social-share,
.related-posts,
.search-overlay-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.category-card a,
.article-card-link { display: block; padding: 1.1rem; color: inherit; }
.category-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #eff6ff;
  color: var(--primary);
  display: grid;
  place-items: center;
  margin-bottom: .65rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.category-icon::before { content: 'KB'; }
.category-icon.icon-ai::before { content: 'AI'; }
.category-icon.icon-mobile::before { content: 'MOB'; }
.category-icon.icon-hardware::before { content: 'HW'; }
.category-icon.icon-network::before { content: 'NET'; }
.category-icon.icon-security::before { content: 'SEC'; }
.category-icon.icon-os::before { content: 'OS'; }
.category-icon.icon-software::before { content: 'SW'; }
.category-icon.icon-tablet::before { content: 'TAB'; }

.card-thumb img { width: 100%; height: auto; display: block; }
.card-body h3 { margin: .3rem 0 .45rem; font-size: 1.05rem; }
.card-meta { font-size: .78rem; color: var(--text-muted); }

.single-article { padding: 1.4rem; }
.single-header h1 { margin-top: 0; }
.post-meta { display: flex; gap: 1rem; color: var(--text-secondary); font-size: .9rem; flex-wrap: wrap; }

.kbase-breadcrumbs ol {
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  gap: .5rem;
  list-style: none;
  font-size: .85rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.kbase-breadcrumbs li:not(:last-child)::after { content: '›'; margin-left: .5rem; color: var(--text-muted); }

.kbase-voting,
.social-share { padding: 1.1rem; margin-top: 1.2rem; }
.vote-buttons,
.social-share-buttons { display: flex; gap: .7rem; flex-wrap: wrap; }
.vote-btn { border: 1px solid #9ad7bf; background: #f0fdf4; color: #166534; padding: .65rem 1rem; border-radius: 10px; cursor: pointer; }
.vote-btn-negative { border-color: #fecaca; background: #fff1f2; color: #991b1b; }
.vote-status { margin: .8rem 0 0; color: var(--text-secondary); }
.vote-percentage { color: var(--success); font-weight: 700; }

.tools-filters {
  display: grid;
  gap: .75rem;
  grid-template-columns: 2fr 1fr 1fr;
  margin-bottom: 1rem;
}
.tool-card { padding: 1rem; }
.tool-card header { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.tool-type-badge { font-size: .75rem; padding: .2rem .5rem; border-radius: 999px; background: #ecfeff; color: #155e75; }
.tool-internal .tool-type-badge { background: #eff6ff; color: #1d4ed8; }
.tool-features { margin: .8rem 0; padding-left: 1rem; }
.tool-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.contact-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.contact-form { padding: 1.2rem; }
.contact-form label { font-weight: 600; font-size: .9rem; }
.contact-form > * { margin-bottom: .75rem; }
.contact-info { padding: 1.2rem; }

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .7);
  z-index: 60;
  display: grid;
  place-items: center;
}
.search-overlay[hidden] { display: none; }
.search-overlay-box { width: min(760px, calc(100% - 2rem)); padding: 1rem; }
.search-overlay-close { float: right; border: 0; background: transparent; font-size: 1.6rem; cursor: pointer; }
.kbase-live-results { margin-top: .75rem; max-height: 320px; overflow: auto; }
.live-result-item { border-top: 1px solid var(--border); padding: .7rem 0; }
.live-result-type { font-size: .75rem; color: var(--accent); text-transform: uppercase; }

.site-footer {
  background: var(--secondary);
  color: #cbd5e1;
  margin-top: 2rem;
  padding: 2rem 0 1rem;
}
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.footer-grid h3, .footer-grid h4 { color: #fff; margin-top: 0; }
.footer-menu, .footer-cats { list-style: none; margin: 0; padding: 0; }
.footer-menu li, .footer-cats li { margin-bottom: .35rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 1rem; padding-top: .7rem; font-size: .9rem; }