/* ============================================================
   Auto HOT — base.css (全局基础样式)
   设计 tokens + reset + 共享组件
   ============================================================ */

:root {
  /* ---- QoderWork Primitive tokens ---- */
  --qdw-mint-50: #F1FAF3; --qdw-mint-100: #E6F7EC; --qdw-mint-200: #CDEFD9;
  --qdw-mint-300: #B3E6C7; --qdw-mint-500: #8EE5A1; --qdw-mint-600: #73CD94; --qdw-mint-700: #5AB87E;
  --qdw-ink-950: #0F0D0C; --qdw-ink-900: #141414; --qdw-ink-800: #080807;
  --qdw-gray-700: #636261; --qdw-gray-600: #838280; --qdw-gray-500: #AAA9A8;
  --qdw-gray-400: #BCBBBA; --qdw-gray-300: #DDDDDD; --qdw-gray-200: #E6E6E6;
  --qdw-gray-100: #EFEFEF; --qdw-gray-50: #F9F9F9; --qdw-gray-25: #FCFCFC;
  --qdw-white: #FFFFFF; --qdw-off-white: #FDFDFD; --qdw-spotlight: #FAFAFA;
  --qdw-blue-500: #0B83F1; --qdw-blue-100: #E6F7FF;
  --qdw-teal-500: #14B8A6; --qdw-teal-100: #DEF7F1;
  --qdw-orange-500: #FA8125; --qdw-orange-100: #FFEFDE;
  --qdw-purple-500: #615CED; --qdw-purple-100: #EBE9FF;
  --qdw-red-500: #FF4D4F; --qdw-red-100: #FFF2F0;
  --qdw-sage-100: #EFF3F2;

  /* Semantic colors */
  --color-bg-base: var(--qdw-white); --color-bg-layout: var(--qdw-off-white);
  --color-bg-container: var(--qdw-white); --color-bg-elevated: var(--qdw-gray-50);
  --color-text: var(--qdw-ink-900); --color-text-base: var(--qdw-ink-950);
  --color-text-secondary: var(--qdw-gray-700); --color-text-tertiary: var(--qdw-gray-600);
  --color-text-quaternary: var(--qdw-gray-500);
  --color-border: var(--qdw-gray-400); --color-border-secondary: var(--qdw-gray-300);
  --color-border-tertiary: var(--qdw-gray-200);
  --color-primary: var(--qdw-mint-500); --color-primary-hover: var(--qdw-mint-600);
  --color-primary-bg: var(--qdw-mint-50); --color-primary-bg-hover: var(--qdw-mint-100);
  --color-primary-border: var(--qdw-mint-200);
  --color-warning: var(--qdw-orange-500);

  /* Section palette */
  --sec-newcar-fg: var(--qdw-blue-500); --sec-newcar-bg: var(--qdw-blue-100);
  --sec-industry-fg: var(--qdw-teal-500); --sec-industry-bg: var(--qdw-teal-100);
  --sec-tech-fg: var(--qdw-orange-500); --sec-tech-bg: var(--qdw-orange-100);
  --sec-review-fg: var(--qdw-purple-500); --sec-review-bg: var(--qdw-purple-100);
  --sec-policy-fg: var(--qdw-red-500); --sec-policy-bg: var(--qdw-red-100);

  /* Typography */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px;
  --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px;
  --text-display-sm: 28px; --text-display-md: 36px;
  --leading-tight: 1.2; --leading-ui: 1.45; --leading-body: 1.6;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* Radius */
  --radius-xs: 3px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px;
  --radius-xl: 12px; --radius-2xl: 16px; --radius-pill: 9999px;

  /* Layout */
  --max-width: 1280px; --header-h: 56px; --sidebar-w: 240px;

  /* Elevation & Motion */
  --shadow-sm: 0 1px 2px -0.5px rgba(15,13,12,0.07), 0 2px 6px -3px rgba(15,13,12,0.05);
  --shadow-md: 0 4px 12px -4px rgba(15,13,12,0.10);
  --shadow-popover: 0 8px 24px -12px rgba(15,13,12,0.18);
  --duration-fast: 120ms; --duration-base: 200ms; --duration-panel: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-panel: cubic-bezier(0.16, 1, 0.3, 1);

  /* Footer dark theme */
  --white-08: rgba(255,255,255,0.08); --white-10: rgba(255,255,255,0.1);
  --white-15: rgba(255,255,255,0.15); --white-20: rgba(255,255,255,0.2);
  --white-25: rgba(255,255,255,0.25); --white-30: rgba(255,255,255,0.3);
  --white-50: rgba(255,255,255,0.5); --white-60: rgba(255,255,255,0.6);
  --white-80: rgba(255,255,255,0.8); --white-90: rgba(255,255,255,0.9);
  --overlay-30: rgba(15,13,12,0.3); --overlay-65: rgba(15,13,12,0.65);
  --accent-08: rgba(142,229,161,0.08); --accent-15: rgba(142,229,161,0.15);
}

/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ui); background: var(--color-bg-layout);
  color: var(--color-text); -webkit-font-smoothing: antialiased;
  font-size: var(--text-base); line-height: var(--leading-body);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; }
input { font-family: inherit; }

/* === HEADER === */
[data-component="site-header"] {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-bg-container);
  border-bottom: 1px solid var(--color-border-tertiary);
}
.header-inner {
  height: 64px; padding: 0 var(--space-4);
  display: flex; align-items: center; gap: var(--space-2);
}
.header-brand {
  font-size: var(--text-xl); font-weight: var(--weight-semibold);
  color: var(--color-text-base); white-space: nowrap; flex-shrink: 0;
}
.header-brand span { color: var(--color-primary-hover); }
.sidebar-toggle {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--color-text-secondary); padding: var(--space-1); border-radius: var(--radius-sm);
  flex-shrink: 0; margin-left: auto;
}
.header-search {
  width: 360px; height: 32px; display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-2); background: var(--color-bg-container);
  border: 1px solid var(--color-border-tertiary); border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--ease-standard);
}
.header-search:focus-within {
  border-color: var(--color-primary-border);
  box-shadow: 0 0 0 3px rgba(142,229,161,0.12);
}
.header-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: var(--text-sm); color: var(--color-text);
}
.header-search input::placeholder { color: var(--color-text-quaternary); }
.header-actions { display: none; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: none; background: transparent;
  color: var(--color-text-secondary); border-radius: var(--radius-md);
  cursor: pointer; transition: all var(--duration-fast);
}
.icon-btn:hover { background: var(--color-bg-elevated); color: var(--color-text); }

/* === APP LAYOUT (左侧栏 + 主内容) === */
.app-layout {
  display: flex;
  min-height: calc(100vh - var(--header-h) - 200px);
  position: relative;
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: var(--overlay-30); z-index: 90;
  cursor: pointer;
}

/* === SIDEBAR (左侧栏) === */
.app-sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  border-right: 1px solid var(--color-border-tertiary);
  background: var(--color-bg-container);
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  z-index: 95;
  display: flex;
  flex-direction: column;
}
.sidebar-scroll {
  padding: var(--space-3) 0;
  flex: 1;
  overflow-y: visible;
}
.sidebar-section {
  background: var(--color-bg-container);
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-left: var(--space-3);
  margin-right: var(--space-3);
  margin-bottom: var(--space-3);
}
.sidebar-section + .sidebar-section { margin-top: var(--space-4); }
.sidebar-section__label {
  font-size: 11px; font-weight: var(--weight-semibold);
  color: var(--color-text-quaternary); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0 var(--space-2); margin-bottom: var(--space-2);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar-item {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text-secondary);
  transition: all var(--duration-fast) var(--ease-standard); cursor: pointer;
}
.sidebar-item:hover { background: var(--color-bg-elevated); color: var(--color-text); }
.sidebar-item--active {
  background: var(--color-primary-bg); color: var(--color-primary-hover);
  font-weight: var(--weight-medium);
}
.sidebar-item__tag {
  font-size: 10px; padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--color-primary-border); color: var(--color-primary-hover);
}
/* 侧栏热搜三态：与卡片徽章 .news-card__heat--* 同一套色系与强弱次序 */
.sidebar-item__tag--burst {
  color: #fff;
  background: var(--qdw-orange-500);
}
.sidebar-item__tag--ferment {
  color: var(--qdw-orange-500);
  background: var(--qdw-orange-100);
}
.sidebar-item__tag--fresh {
  color: var(--qdw-blue-500);
  background: var(--qdw-blue-100);
}
.sidebar-item__badge {
  font-size: 10px; padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--color-bg-elevated); color: var(--color-text-tertiary);
  margin-left: auto;
}
.sidebar-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0 var(--space-2); }
.sidebar-tag {
  font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--color-bg-elevated); color: var(--color-text-secondary);
  transition: all var(--duration-fast);
}
.sidebar-tag:hover { background: var(--color-primary-bg); color: var(--color-primary-hover); }
.sidebar-section--bottom {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-tertiary);
}
.sidebar-cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  transition: background var(--duration-fast) var(--ease-standard);
  text-decoration: none;
}
.sidebar-cta:hover {
  background: var(--color-primary-bg);
}
.sidebar-cta__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-primary-hover);
}
.sidebar-cta__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.sidebar-cta__desc {
  font-size: 11px;
  color: var(--color-text-quaternary);
}

/* === MAIN CONTENT === */
.app-main {
  flex: 1; min-width: 0; padding: var(--space-4);
  overflow: visible;
}

/* === NEWS CARD === */
.news-card {
  display: flex;
  align-items: center;
  background: var(--color-bg-container);
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: background var(--duration-fast) var(--ease-standard);
  cursor: pointer;
  margin-bottom: var(--space-3);
}
.news-card:last-child {
  margin-bottom: 0;
}
.news-card:hover {
  background: var(--color-primary-bg);
}
.news-card__body {
  flex: 1;
  padding: 10px var(--space-3);
  min-width: 0;
}
.news-card__head {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-xs); color: var(--color-text-tertiary); margin-bottom: 1px;
}
.news-card__meta {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.news-card__time { font-variant-numeric: tabular-nums; }
.news-card__source-dot {
  width: 3px; height: 3px; border-radius: 50%; background: var(--color-text-quaternary);
  flex-shrink: 0;
}
.news-card__source { color: var(--color-text-tertiary); font-size: var(--text-xs); }
.news-card__sources {
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--qdw-blue-500);
  background: var(--qdw-blue-100);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.news-card__heat {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-left: auto;
}
/* 热度形态三态：强弱必须看得出来——「爆」是唯一实心块，「发酵中」同色系但降为浅底，
   「新」用蓝色（信息性标记，不表强度）。三态共用「爆」的配色就是虚标。 */
.news-card__heat--burst {
  color: #fff;
  background: var(--qdw-orange-500);
}
.news-card__heat--ferment {
  color: var(--qdw-orange-500);
  background: var(--qdw-orange-100);
}
.news-card__heat--fresh {
  color: var(--qdw-blue-500);
  background: var(--qdw-blue-100);
}
/* 徽章出现处的一行口径指路（partials/heat_note.tmpl）：首页/详情/搜索三处共用，
   三者的 CSS 各自引入，所以落在 base.css。样式刻意弱化——它是口径说明，不是第四种徽章。 */
.heat-note {
  font-size: var(--text-xs); color: var(--color-text-tertiary);
  margin: var(--space-2) 0 0; line-height: var(--leading-body);
}
.heat-note__link { color: var(--color-primary-hover); }
.news-card__title {
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  line-height: 1.4; color: var(--color-text-base);
  margin-bottom: var(--space-1);
}
.news-card__summary {
  font-size: var(--text-sm); color: var(--color-text-secondary);
  line-height: var(--leading-body); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card__ai-insight {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: var(--space-1); padding-top: var(--space-1);
  border-top: 1px dashed var(--color-border-secondary);
  font-size: var(--text-xs); color: var(--qdw-mint-700);
}
.news-card__ai-insight svg {
  flex-shrink: 0;
  color: var(--qdw-mint-600);
  margin-top: 2px;
}

/* === TAG === */
.tag {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-xs);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
}
.tag--newcar { background: var(--sec-newcar-bg); color: var(--sec-newcar-fg); }
.tag--industry { background: var(--sec-industry-bg); color: var(--sec-industry-fg); }
.tag--tech { background: var(--sec-tech-bg); color: var(--sec-tech-fg); }
.tag--review { background: var(--sec-review-bg); color: var(--sec-review-fg); }
.tag--policy { background: var(--sec-policy-bg); color: var(--sec-policy-fg); }

/* === LOAD MORE === */
.load-more {
  display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  padding: var(--space-3); margin: var(--space-4) 0;
  border: 1px solid var(--color-border-tertiary); border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--color-text-secondary);
  cursor: pointer; transition: all var(--duration-fast);
}
.load-more:hover { border-color: var(--color-primary-border); color: var(--color-primary-hover); }

/* === SECTION HEADER === */
.sec-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.sec-header__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-base);
  padding: 4px 12px;
  background: var(--color-primary-bg);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  display: inline-block;
}
.sec-header__more {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-sm); color: var(--color-text-tertiary);
  transition: color var(--duration-fast);
}
.sec-header__more:hover { color: var(--color-primary-hover); }

/* === BREADCRUMB === */
.breadcrumb {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); color: var(--color-text-quaternary);
  padding: var(--space-2) 0; margin-bottom: var(--space-2);
}
.breadcrumb__link:hover { color: var(--color-text-secondary); }
.breadcrumb__sep { color: var(--color-text-quaternary); }

/* === MOBILE TABBAR === */
.mobile-tabbar { display: none; }
@media (max-width: 768px) {
  .mobile-tabbar {
    display: flex; justify-content: space-around; position: fixed;
    bottom: 0; left: 0; right: 0; z-index: 100;
    background: var(--color-bg-container); border-top: 1px solid var(--color-border-tertiary);
    height: 52px;
  }
  .mobile-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; gap: 2px; font-size: 10px; color: var(--color-text-quaternary);
    transition: color var(--duration-fast);
  }
  .mobile-tab--active { color: var(--color-primary-hover); }
}

/* === FOOTER === */
[data-component="site-footer"] {
  background: var(--qdw-ink-950);
  color: var(--white-50);
  margin-top: var(--space-6);
}

/* Mobile base */
.footer-inner {
  padding: var(--space-4) var(--space-4) var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-3);
}
.footer-brand {
  grid-column: 1 / -1;
  margin-bottom: var(--space-2);
}
.footer-brand__name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--qdw-white);
}
.footer-brand__name span { color: var(--color-primary); }
.footer-brand__desc { display: none; }

.footer-row {
  display: flex;
  gap: var(--space-6);
  grid-column: 1 / -1;
}
.footer-col__title {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--white-80);
  margin-bottom: var(--space-1);
  letter-spacing: 0.02em;
}
.footer-col__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.footer-col__link {
  font-size: 11px;
  color: var(--white-50);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}
.footer-col__link:hover { color: var(--white-80); }

.footer-bottom {
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--white-08);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  color: var(--white-30);
}

/* --- Footer responsive --- */
@media (min-width: 481px) {
  .footer-inner { padding: var(--space-5) var(--space-5) var(--space-4); }
  .footer-brand { margin-bottom: var(--space-3); }
  .footer-brand__name { font-size: var(--text-lg); }
  .footer-brand__desc { display: block; font-size: var(--text-xs); max-width: 280px; margin-top: var(--space-1); }
  .footer-col__title { font-size: var(--text-xs); margin-bottom: var(--space-2); }
  .footer-col__link { font-size: var(--text-xs); }
  .footer-bottom { padding: var(--space-3) var(--space-5); font-size: 11px; }
}
@media (min-width: 769px) {
  .footer-inner {
    grid-template-columns: auto;
    padding: var(--space-5) var(--space-6) var(--space-4);
    gap: var(--space-4) 0;
  }
  .footer-brand { margin-bottom: 0; }
  .footer-brand__name { font-size: var(--text-xl); }
  .footer-brand__desc { display: block; font-size: var(--text-sm); max-width: 280px; margin-top: var(--space-2); }
  .footer-row { gap: var(--space-8); }
  .footer-col__title { font-size: var(--text-sm); margin-bottom: var(--space-2); }
  .footer-col__link { font-size: var(--text-sm); }
  .footer-bottom { padding: var(--space-3) var(--space-6); font-size: var(--text-xs); }
}
@media (min-width: 1025px) {
  .footer-inner {
    padding: var(--space-6) var(--space-8) var(--space-4);
    gap: var(--space-4) 0;
  }
  .footer-brand__name { font-size: var(--text-xl); }
  .footer-brand__desc { display: block; font-size: var(--text-sm); max-width: 750px; margin-top: var(--space-2); }
  .footer-row { gap: var(--space-10); }
  .footer-col__title { font-size: var(--text-sm); margin-bottom: var(--space-3); }
  .footer-col__link { font-size: var(--text-sm); }
  .footer-bottom { padding: var(--space-3) var(--space-8); font-size: var(--text-xs); }
}

/* === RESPONSIVE: Desktop >= 1025px === */
@media (min-width: 1025px) {
  .header-actions { display: flex; }
  .mobile-tabbar { display: none; }
  .sidebar-overlay { display: none !important; }
  .header-inner { padding: 0 var(--space-6); gap: var(--space-4); }
  .app-main { padding: var(--space-4) var(--space-6); }
  /* 桌面端隐藏移动端快捷菜单（已有侧边栏功能入口） */
  .sidebar-mobile-menu { display: none; }
}

/* === RESPONSIVE: Wide screens >= 1440px === */
@media (min-width: 1440px) {
  .header-inner { padding: 0 var(--space-8); }
  .app-main { padding: var(--space-4) var(--space-8); }
  .footer-inner { padding: var(--space-6) var(--space-8) var(--space-4); }
  .footer-bottom { padding: var(--space-3) var(--space-8); }
}

/* === RESPONSIVE: Ultra-wide screens >= 1920px === */
@media (min-width: 1920px) {
  .header-inner { padding: 0 calc((100vw - 1600px) / 2); }
  .app-main { padding: var(--space-4) calc((100vw - 1600px) / 2); }
  .footer-inner { padding: var(--space-6) calc((100vw - 1600px) / 2) var(--space-4); }
  .footer-bottom { padding: var(--space-3) calc((100vw - 1600px) / 2); }
}

/* === RESPONSIVE: Mobile <= 768px === */
@media (max-width: 768px) {
  .sidebar-toggle { display: flex; }
  .app-sidebar {
    position: fixed; top: var(--header-h); right: 0; left: auto;
    transform: translateX(100%); transition: transform var(--duration-panel) var(--ease-panel);
    z-index: 96; box-shadow: var(--shadow-popover);
    width: 280px;
  }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-overlay { display: block; }
  body.sidebar-open { overflow: hidden; }
  .footer-row { flex-direction: column; gap: var(--space-4); }
  /* 移动端隐藏黑色 footer，只保留白色 mobile-tabbar 导航 */
  [data-component="site-footer"] { display: none; }
  body { padding-bottom: 60px; }
  /* 移动端隐藏桌面端功能入口（快捷菜单代替） */
  .sidebar-section:not(.sidebar-mobile-menu) { display: none; }
  .sidebar-scroll { padding-top: var(--space-4); }
}

/* === INTERACTIONS (hover/focus/active) === */
.sidebar-item:hover,
.category-list__item:hover,
.sidebar-tag:hover,
.sidebar-card:hover,
.sidebar-topic-item:hover {
  background: rgba(142,229,161,0.08);
}
.timeline-item__title:hover,
.sidebar-card__title:hover,
.sidebar-topic-item__title:hover {
  color: var(--color-primary-hover);
}
.load-more:hover,
.topic-load-more:hover {
  border-color: rgba(142,229,161,0.3);
  color: var(--color-primary-hover);
}
.breadcrumb__link:hover {
  color: var(--color-text-secondary);
}
.icon-btn:hover {
  background: var(--color-bg-elevated);
}
input:focus,
input:focus-visible {
  outline-color: var(--color-primary-border);
  box-shadow: 0 0 0 3px rgba(142,229,161,0.12);
}

/* === ERROR PAGE === */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: var(--space-8) var(--space-4);
}
.error-page__inner {
  text-align: center;
  max-width: 400px;
}
.error-page__code {
  font-size: 72px;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-4);
}
.error-page__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-base);
  margin-bottom: var(--space-2);
}
.error-page__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}
.error-page__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--qdw-white);
  background: var(--color-primary);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast);
}
.error-page__btn:hover { background: var(--color-primary-hover); }