:root {
  --blue-50:  #f0f8fc;
  --blue-100: #e3f1fa;
  --blue-200: #c8e3f4;
  --blue-300: #9ecfee;
  --blue-400: #6cb9e4;
  --blue-500: #3b9edc;
  --blue-600: #2987c3;
  --blue-700: #1f6fa3;
  --blue-800: #1a3a5c;

  --gray-50:  #f8fafc;
  --gray-100: #f1f4f7;
  --gray-200: #e4e9ee;
  --gray-300: #cfd6dd;
  --gray-400: #95a0ab;
  --gray-500: #65707c;
  --gray-600: #46525e;
  --gray-700: #2f3845;
  --gray-800: #1f2733;
  --gray-900: #14181f;

  --ink:      #1a3a5c;

  --accent:   #f59e0b;
  --accent-soft: #fef3e2;
  --success:  #34c38f;
  --success-soft: #e3f7ee;
  --danger:   #ef6a6a;
  --warning:  #f5b840;

  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.04);
  --shadow:    0 2px 12px rgba(20, 24, 31, 0.06);
  --shadow-md: 0 8px 28px rgba(20, 24, 31, 0.08);
}

* { -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--gray-50);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

[x-cloak] { display: none !important; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-indicator { display: none; }

/* ========= 通用组件 ========= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  transition: all 0.15s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--blue-500);
  color: white;
  box-shadow: 0 2px 8px rgba(75, 169, 224, 0.22);
}
.btn-primary:hover { background: var(--blue-600); }
.btn-secondary {
  background: var(--blue-50);
  color: var(--blue-600);
  border-color: var(--blue-200);
}
.btn-secondary:hover { background: var(--blue-100); border-color: var(--blue-300); }
.btn-ghost { color: var(--gray-500); }
.btn-ghost:hover { background: var(--gray-100); }
.btn-block { width: 100%; }
.btn-lg { min-height: 48px; font-size: 16px; padding: 0 20px; }

.input, .textarea, .select {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 15px;
  background: white;
  color: var(--gray-800);
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.textarea { min-height: 96px; line-height: 1.6; resize: vertical; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--blue-300);
  box-shadow: 0 0 0 3px rgba(75, 169, 224, 0.10);
}

.card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  box-shadow: var(--shadow-sm);
}
.card-hover { transition: box-shadow 0.2s, transform 0.2s; }
.card-hover:hover { box-shadow: var(--shadow-md); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--blue-50);
  color: var(--blue-600);
}
.chip-success { background: var(--success-soft); color: #1a7a5b; }
.chip-warning { background: var(--accent-soft); color: #9a5a14; }
.chip-gray { background: var(--gray-100); color: var(--gray-500); }
.chip-purple { background: #f0e9fb; color: #6c4ab6; }
.chip-warn { background: #fff1e6; color: #b85c1a; }

.chip-lg {
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 14px;
  border: 2px solid transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.chip-lg .mr-1,
.chip-lg > span:first-child { font-size: 18px; }

.chip-share { background: var(--blue-50); color: var(--blue-700, #1a3a5c); border-color: #c8e3f4; }
.chip-share:hover { background: var(--blue-100); border-color: var(--blue-300); }
.chip-share:has(input:checked) { background: var(--blue-500); color: #fff; border-color: var(--blue-500); box-shadow: 0 4px 10px rgba(59,158,220,0.25); }

.chip-help { background: #fff5e8; color: #8a3e0a; border-color: #fbcc8a; }
.chip-help:hover { background: #ffe6c7; border-color: #f59e0b; }
.chip-help:has(input:checked) { background: #f59e0b; color: #fff; border-color: #f59e0b; box-shadow: 0 4px 10px rgba(245,158,11,0.3); }

.chip-new { background: #f3edfb; color: #5a3aa6; border-color: #d6c3f0; }
.chip-new:hover { background: #e9def9; border-color: #a779e9; }
.chip-new:has(input:checked) { background: #8b5cf6; color: #fff; border-color: #8b5cf6; box-shadow: 0 4px 10px rgba(139,92,246,0.3); }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-600);
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 16px;
}
.avatar-sm { width: 28px; height: 28px; font-size: 12px; }
.avatar-lg { width: 56px; height: 56px; font-size: 22px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.divider {
  height: 1px;
  background: var(--gray-100);
  margin: 16px 0;
}

.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}
@media (min-width: 640px) {
  .app-container { padding: 24px; }
}
@media (min-width: 1024px) {
  .app-container { padding: 32px 24px; }
}

.layout-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 1024px) {
  .layout-2col {
    grid-template-columns: 1fr 320px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .layout-2col .main-col { min-width: 0; }
  .layout-2col .side-col { position: sticky; top: 80px; align-self: start; }
}

@media (max-width: 1023px) {
  body { padding-bottom: 64px; }
  .tabbar { display: flex; }
}
@media (min-width: 1024px) {
  .tabbar { display: none; }
}

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--gray-100);
  z-index: 50;
  justify-content: space-around;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 16px rgba(20, 24, 31, 0.04);
}
.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  color: var(--gray-400);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
.tabbar a.active { color: var(--blue-500); }
.tabbar a .ic { font-size: 22px; line-height: 1; }

@media (max-width: 1023px) {
  .navbar-pc { display: none; }
}
@media (min-width: 1024px) {
  .navbar-pc { display: flex; }
}

.navbar-pc {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gray-100);
  height: 64px;
  align-items: center;
  padding: 0 24px;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.25s ease-out; }

/* ========= 瀑布流 Masonry ========= */
.masonry {
  column-count: 1;
  column-gap: 16px;
}
@media (min-width: 640px) {
  .masonry {
    column-count: 2;
  }
}
@media (min-width: 1024px) {
  .masonry {
    column-count: 2;
  }
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 16px;
}

/* ========= 设计 token 复用工具类 ========= */
.brand-bar {
  display: inline-block;
  width: 4px;
  height: 20px;
  border-radius: 999px;
  background: var(--blue-500);
  flex-shrink: 0;
}
.logo-box-sm {
  background: linear-gradient(135deg, var(--blue-400) 0%, var(--blue-500) 100%);
  box-shadow: 0 2px 8px rgba(59, 158, 220, 0.40);
}
.logo-box-md {
  background: linear-gradient(135deg, var(--blue-400) 0%, var(--blue-500) 100%);
  box-shadow: 0 4px 14px rgba(59, 158, 220, 0.35);
}
.logo-box-lg {
  background: linear-gradient(135deg, var(--blue-400) 0%, var(--blue-500) 100%);
  box-shadow: 0 6px 22px rgba(59, 158, 220, 0.35);
}
.brand-text { color: var(--blue-500); }