/* ========================================
   AIHub v3 — 文档样式
   TouchFlow Design System
   ======================================== */

:root {
  --brand-primary: #3B82F6;
  --brand-primary-light: #60A5FA;
  --brand-primary-dark: #2563EB;
  --brand-primary-bg: #EFF6FF;
  --brand-primary-bg-hover: #DBEAFE;
  --accent-coral: #F97171;
  --accent-coral-bg: #FEF2F2;
  --accent-mint: #34D399;
  --accent-mint-bg: #ECFDF5;
  --accent-amber: #FBBF24;
  --accent-amber-bg: #FFFBEB;
  --accent-purple: #6366F1;
  --accent-purple-bg: #EEF2FF;
  --accent-teal: #14B8A6;
  --accent-teal-bg: #F0FDFA;
  --neutral-900: #111827;
  --neutral-800: #1F2937;
  --neutral-700: #374151;
  --neutral-600: #4B5563;
  --neutral-500: #6B7280;
  --neutral-400: #9CA3AF;
  --neutral-300: #D1D5DB;
  --neutral-200: #E5E7EB;
  --neutral-100: #F3F4F6;
  --neutral-50: #F9FAFB;
  --white: #FFFFFF;
  --surface-primary: var(--white);
  --surface-secondary: var(--neutral-50);
  --gradient-primary: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-light));
  --shadow-subtle: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-medium: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-large: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-card-hover: 0 12px 32px -4px rgba(59,130,246,0.18);
  --font-headline: 'Figtree', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: 'Roboto Mono', 'SF Mono', 'Fira Code', monospace;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: var(--font-body);
  color: var(--neutral-800);
  background: var(--surface-secondary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-headline); }

/* ========== NAVBAR ========== */
.docs-navbar {
  background: var(--white);
  border-bottom: 1px solid var(--neutral-200);
  box-shadow: var(--shadow-subtle);
  position: sticky; top: 0; z-index: 1030;
  padding: 8px 0;
}
.docs-navbar .navbar-brand {
  font-family: var(--font-headline); font-weight: 800; font-size: 1.2rem;
  color: var(--neutral-900); display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.docs-navbar .navbar-brand img { height: 32px; width: 32px; border-radius: var(--radius-sm); }
.docs-navbar .navbar-brand .brand-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.docs-navbar .nav-link {
  color: var(--neutral-600); font-weight: 500; font-size: 0.85rem;
  padding: 6px 12px !important; border-radius: var(--radius-sm); transition: var(--transition-fast);
}
.docs-navbar .nav-link:hover { color: var(--brand-primary); background: var(--brand-primary-bg); }
.docs-navbar .back-link { color: var(--neutral-500); font-size: 0.8rem; }

/* ========== LAYOUT ========== */
.docs-layout { display: flex; min-height: calc(100vh - 57px); }
.docs-sidebar {
  width: 260px; min-width: 260px; background: var(--white); border-right: 1px solid var(--neutral-200);
  padding: 24px 0; position: sticky; top: 57px; height: calc(100vh - 57px); overflow-y: auto;
}
.docs-content {
  flex: 1; min-width: 0; padding: 32px 48px; max-width: 860px;
}
.docs-content h1 { font-size: 2rem; font-weight: 800; color: var(--neutral-900); margin-bottom: 8px; }
.docs-content h2 {
  font-size: 1.35rem; font-weight: 700; color: var(--neutral-900);
  margin-top: 36px; margin-bottom: 16px; padding-bottom: 8px;
  border-bottom: 1px solid var(--neutral-200);
}
.docs-content h3 { font-size: 1.1rem; font-weight: 700; color: var(--neutral-800); margin-top: 28px; margin-bottom: 12px; }
.docs-content p { color: var(--neutral-600); margin-bottom: 16px; line-height: 1.75; }
.docs-content ul, .docs-content ol { color: var(--neutral-600); margin-bottom: 16px; padding-left: 20px; }
.docs-content li { margin-bottom: 6px; }
.docs-content a { color: var(--brand-primary); text-decoration: none; font-weight: 500; }
.docs-content a:hover { color: var(--brand-primary-dark); text-decoration: underline; }
.docs-content code {
  font-family: var(--font-mono); font-size: 0.85rem; background: var(--neutral-100);
  padding: 2px 6px; border-radius: 4px; color: var(--accent-coral);
}
.docs-content pre {
  background: var(--neutral-800); color: var(--neutral-100); padding: 16px 20px;
  border-radius: var(--radius-md); overflow-x: auto; margin-bottom: 20px; font-size: 0.85rem;
}
.docs-content pre code { background: none; color: inherit; padding: 0; }

.docs-lead {
  font-size: 1.1rem; color: var(--neutral-500); margin-bottom: 28px; line-height: 1.7;
}

/* ========== SIDEBAR NAV ========== */
.sidebar-title {
  font-family: var(--font-headline); font-size: 0.75rem; font-weight: 700;
  color: var(--neutral-400); text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0 20px; margin-bottom: 8px;
}
.sidebar-nav { list-style: none; padding: 0; margin: 0 0 24px 0; }
.sidebar-nav li { margin: 0; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px; color: var(--neutral-600); font-size: 0.88rem;
  text-decoration: none; transition: var(--transition-fast); border-left: 3px solid transparent;
}
.sidebar-nav a:hover { color: var(--brand-primary); background: var(--brand-primary-bg); }
.sidebar-nav a.active {
  color: var(--brand-primary); background: var(--brand-primary-bg); font-weight: 600;
  border-left-color: var(--brand-primary);
}
.sidebar-nav a i { width: 18px; text-align: center; font-size: 0.8rem; }

/* ========== PAGE NAV ========== */
.page-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--neutral-200);
}
.page-nav a {
  display: flex; align-items: center; gap: 8px;
  color: var(--brand-primary); font-weight: 500; font-size: 0.9rem; text-decoration: none;
  transition: var(--transition-fast);
}
.page-nav a:hover { color: var(--brand-primary-dark); }
.page-nav .prev label, .page-nav .next label {
  display: block; font-size: 0.75rem; color: var(--neutral-400); margin-bottom: 2px;
}

/* ========== DOCS HOME CARDS ========== */
.docs-home-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  margin-top: 32px;
}
.doc-card {
  background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg);
  padding: 28px; transition: var(--transition-smooth); text-decoration: none; color: inherit;
}
.doc-card:hover {
  border-color: var(--brand-primary-bg-hover); box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px); text-decoration: none; color: inherit;
}
.doc-card .card-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); display: flex;
  align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 16px;
}
.doc-card h3 { font-family: var(--font-headline); font-size: 1.05rem; font-weight: 700; color: var(--neutral-900); margin: 0 0 8px 0; }
.doc-card p { font-size: 0.85rem; color: var(--neutral-500); margin: 0; line-height: 1.6; }

.icon-blue { background: var(--brand-primary-bg); color: var(--brand-primary); }
.icon-coral { background: var(--accent-coral-bg); color: var(--accent-coral); }
.icon-mint { background: var(--accent-mint-bg); color: var(--accent-mint); }
.icon-amber { background: var(--accent-amber-bg); color: var(--accent-amber); }
.icon-purple { background: var(--accent-purple-bg); color: var(--accent-purple); }
.icon-teal { background: var(--accent-teal-bg); color: var(--accent-teal); }

/* ========== ADMONITIONS ========== */
.admonition {
  border-left: 4px solid; border-radius: var(--radius-sm); padding: 16px 20px;
  margin-bottom: 20px; font-size: 0.9rem;
}
.admonition.info { background: var(--brand-primary-bg); border-color: var(--brand-primary); color: var(--neutral-700); }
.admonition.warning { background: var(--accent-amber-bg); border-color: var(--accent-amber); color: var(--neutral-700); }
.admonition.tip { background: var(--accent-mint-bg); border-color: var(--accent-mint); color: var(--neutral-700); }
.admonition.danger { background: var(--accent-coral-bg); border-color: var(--accent-coral); color: var(--neutral-700); }
.admonition strong { display: block; margin-bottom: 4px; }

/* ========== TABLES ========== */
.docs-content table {
  width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 0.9rem;
}
.docs-content th {
  text-align: left; font-weight: 600; color: var(--neutral-900);
  padding: 10px 14px; background: var(--neutral-100); border-bottom: 2px solid var(--neutral-200);
}
.docs-content td {
  padding: 10px 14px; border-bottom: 1px solid var(--neutral-200); color: var(--neutral-600);
}

/* ========== STEPS ========== */
.step-list { list-style: none; padding: 0; counter-reset: step; }
.step-list li {
  counter-increment: step; display: flex; gap: 16px; margin-bottom: 24px; align-items: flex-start;
}
.step-list li::before {
  content: counter(step); width: 32px; height: 32px; min-width: 32px;
  background: var(--gradient-primary); color: var(--white); font-weight: 700;
  border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
}
.step-list li .step-content { flex: 1; }
.step-list li .step-content strong { display: block; color: var(--neutral-900); margin-bottom: 4px; font-weight: 600; }
.step-list li .step-content p { margin: 0; font-size: 0.9rem; color: var(--neutral-500); }

/* ========== FAQ ========== */
.faq-category { margin-bottom: 36px; }
.faq-category h2 { margin-bottom: 16px; }
.accordion-item { background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; }
.accordion-header {
  width: 100%; text-align: left; padding: 16px 20px; background: none; border: none;
  font-size: 0.95rem; font-weight: 600; color: var(--neutral-800); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: var(--transition-fast);
}
.accordion-header:hover { background: var(--neutral-50); }
.accordion-header i { font-size: 0.8rem; color: var(--neutral-400); transition: var(--transition-fast); }
.accordion-body { display: none; padding: 0 20px 16px; color: var(--neutral-600); font-size: 0.9rem; line-height: 1.7; }
.accordion-item.open .accordion-body { display: block; }
.accordion-item.open .accordion-header { color: var(--brand-primary); }
.accordion-item.open .accordion-header i { transform: rotate(180deg); color: var(--brand-primary); }

/* ========== CHANGELOG ========== */
.changelog-entry { margin-bottom: 36px; }
.changelog-entry .version-badge {
  display: inline-block; background: var(--brand-primary); color: var(--white);
  font-weight: 700; font-size: 0.8rem; padding: 4px 12px; border-radius: var(--radius-full);
  margin-bottom: 12px;
}
.changelog-entry .release-date {
  display: inline-block; color: var(--neutral-400); font-size: 0.85rem; margin-left: 8px;
}
.changelog-entry h3 { margin-top: 0; margin-bottom: 12px; }
.changelog-entry ul { margin-bottom: 12px; }

/* ========== TROUBLESHOOTING ========== */
.ts-entry {
  background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-md);
  padding: 24px; margin-bottom: 20px;
}
.ts-entry .ts-symptom {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.ts-entry .ts-symptom .ts-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--accent-coral-bg);
  color: var(--accent-coral); display: flex; align-items: center; justify-content: center;
}
.ts-entry h3 { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--neutral-900); }
.ts-entry h4 { font-size: 0.9rem; font-weight: 600; color: var(--neutral-700); margin-top: 16px; margin-bottom: 8px; }
.ts-entry p { font-size: 0.9rem; color: var(--neutral-500); margin-bottom: 8px; }
.ts-entry ul { font-size: 0.9rem; color: var(--neutral-500); }

/* ========== FOOTER ========== */
.docs-footer {
  text-align: center; padding: 24px; color: var(--neutral-400); font-size: 0.8rem;
  border-top: 1px solid var(--neutral-200);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .docs-sidebar { display: none; }
  .docs-content { padding: 24px 20px; }
  .docs-home-grid { grid-template-columns: 1fr; }
  .page-nav { flex-direction: column; gap: 12px; }
}