:root {
  --bz-bg: #0f1419;
  --bz-surface: #1a2332;
  --bz-surface2: #243044;
  --bz-text: #e8eef7;
  --bz-muted: #8b9cb3;
  --bz-accent: #3b82f6;
  --bz-accent2: #06b6d4;
  --bz-danger: #ef4444;
  --bz-radius: 14px;
  --bz-font: 'Inter', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bz-bg); color: var(--bz-text); font-family: var(--bz-font); }
a { color: var(--bz-accent2); text-decoration: none; }
a:hover { text-decoration: underline; }
.bz-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; border-bottom: 1px solid var(--bz-surface2);
  background: rgba(15,20,25,0.95); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 100;
}
.bz-logo { font-size: 1.25rem; font-weight: 700; color: var(--bz-text); letter-spacing: -0.02em; }
.bz-logo-sm { font-weight: 700; color: var(--bz-text); white-space: nowrap; }
.bz-nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.bz-nav a { color: var(--bz-muted); font-size: 0.9rem; }
.bz-nav a.active, .bz-nav a:hover { color: var(--bz-text); text-decoration: none; }
.bz-badge { background: var(--bz-accent); color: #fff; font-size: 0.7rem; padding: 2px 6px; border-radius: 999px; }
.bz-user { color: var(--bz-muted); font-size: 0.85rem; }
.bz-btn-sm { background: var(--bz-accent); color: #fff !important; padding: 6px 12px; border-radius: 8px; }
.bz-main { min-height: calc(100vh - 120px); }
.bz-footer { text-align: center; padding: 24px; color: var(--bz-muted); font-size: 0.8rem; border-top: 1px solid var(--bz-surface2); }

/* Home */
.bz-home { display: grid; place-items: center; min-height: calc(100vh - 140px); padding: 24px; }
.bz-home-center { width: min(720px, 100%); text-align: center; }
.bz-home-logo { font-size: clamp(2.5rem, 8vw, 4rem); margin: 0 0 8px; background: linear-gradient(135deg, #fff, var(--bz-accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.bz-home-tag { color: var(--bz-muted); margin-bottom: 28px; }
.bz-search-form { width: 100%; }
.bz-search-row {
  display: flex; background: var(--bz-surface); border: 1px solid var(--bz-surface2);
  border-radius: 999px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.bz-search-row input {
  flex: 1; border: 0; background: transparent; color: var(--bz-text);
  padding: 16px 22px; font-size: 1.05rem; outline: none;
}
.bz-search-row button {
  border: 0; background: var(--bz-accent); color: #fff; padding: 0 22px; cursor: pointer;
}
.bz-search-form--compact { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--bz-surface2); }
.bz-search-form--compact .bz-search-row { flex: 1; min-width: 240px; border-radius: var(--bz-radius); }
.bz-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.bz-filters--home { margin-top: 20px; }
.bz-filters label, .bz-filters select { font-size: 0.85rem; color: var(--bz-muted); }
.bz-filters select { background: var(--bz-surface); color: var(--bz-text); border: 1px solid var(--bz-surface2); border-radius: 8px; padding: 6px 10px; }
.bz-ai-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.bz-home-links { margin-top: 28px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; font-size: 0.9rem; }

/* Results */
.bz-search-page { max-width: 900px; margin: 0 auto; }
.bz-meta { color: var(--bz-muted); font-size: 0.85rem; padding: 12px 24px; }
.bz-knowledge {
  display: flex; gap: 16px; margin: 0 24px 20px; padding: 16px; background: var(--bz-surface);
  border-radius: var(--bz-radius); border: 1px solid var(--bz-surface2);
}
.bz-knowledge img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; }
.bz-knowledge h2 { margin: 0 0 8px; font-size: 1.1rem; }
.bz-ai-answer {
  margin: 0 24px 20px; padding: 20px; background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid #334155; border-radius: var(--bz-radius);
}
.bz-ai-answer h2 { margin-top: 0; font-size: 1rem; color: var(--bz-accent2); }
.bz-ai-body { line-height: 1.6; }
.bz-ai-note { font-size: 0.8rem; color: var(--bz-muted); }
.bz-results { padding: 0 24px 40px; }
.bz-result { margin-bottom: 28px; }
.bz-result cite { color: #6ee7b7; font-size: 0.82rem; font-style: normal; }
.bz-result h3 { margin: 4px 0; font-size: 1.15rem; font-weight: 500; }
.bz-result h3 a { color: #93c5fd; }
.bz-result p { color: var(--bz-muted); line-height: 1.5; margin: 6px 0 0; font-size: 0.92rem; }
.bz-result-img img { max-width: 200px; max-height: 160px; border-radius: 8px; object-fit: cover; }
.bz-suggestions { padding: 0 24px 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.bz-suggestions a { background: var(--bz-surface); padding: 6px 12px; border-radius: 999px; font-size: 0.85rem; }
.bz-pagination { padding: 0 24px 40px; display: flex; gap: 16px; }
.bz-empty { color: var(--bz-muted); padding: 40px 24px; text-align: center; }
.bz-alert { background: rgba(239,68,68,0.15); border: 1px solid var(--bz-danger); color: #fecaca; padding: 12px 16px; border-radius: 10px; margin: 16px 24px; }
.bz-alert--muted { background: var(--bz-surface); border-color: var(--bz-surface2); color: var(--bz-muted); }

/* Auth */
.bz-auth-card {
  max-width: 420px; margin: 48px auto; padding: 32px; background: var(--bz-surface);
  border-radius: var(--bz-radius); border: 1px solid var(--bz-surface2);
}
.bz-auth-card h1 { margin-top: 0; }
.bz-auth-card label { display: block; margin-bottom: 14px; font-size: 0.9rem; color: var(--bz-muted); }
.bz-auth-card input { width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--bz-surface2); background: var(--bz-bg); color: var(--bz-text); }
.bz-btn-primary { background: var(--bz-accent); color: #fff; border: 0; padding: 12px 20px; border-radius: 10px; cursor: pointer; font-weight: 600; width: 100%; }
.bz-btn-danger { background: transparent; border: 1px solid var(--bz-danger); color: #fecaca; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.bz-auth-foot { text-align: center; font-size: 0.88rem; margin-top: 20px; }

/* History */
.bz-history { max-width: 720px; margin: 0 auto; padding: 24px; }
.bz-history-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.bz-history-list { list-style: none; padding: 0; margin: 24px 0 0; }
.bz-history-list li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--bz-surface2);
}
.bz-history-query { font-weight: 500; color: var(--bz-text); }
.bz-history-meta { color: var(--bz-muted); font-size: 0.82rem; }
.bz-history-del button { background: transparent; border: 0; color: var(--bz-muted); cursor: pointer; font-size: 1.2rem; }

@media (max-width: 640px) {
  .bz-filters { justify-content: flex-start; }
  .bz-knowledge { flex-direction: column; }
}

.bz-search-form { position: relative; }
.bz-suggest-box {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--bz-surface); border: 1px solid var(--bz-surface2);
  border-radius: 12px; overflow: hidden; z-index: 50;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.bz-suggest-box button {
  display: block; width: 100%; text-align: left; border: 0;
  background: transparent; color: var(--bz-text); padding: 10px 16px;
  cursor: pointer; font-size: 0.92rem;
}
.bz-suggest-box button:hover { background: var(--bz-surface2); }