/* ============================================================
   coolbestllm — Page-specific components
   Code window · gateway diagram · pricing · FAQ · steps · tables
   ============================================================ */

/* ---------- Code window ---------- */
.codeblock { border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; background: hsl(222 47% 9%); box-shadow: var(--shadow-lg); }
.codeblock .bar { display: flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-4); border-bottom: 1px solid hsl(217 33% 18%); background: hsl(222 47% 11%); }
.codeblock .dots { display: flex; gap: 6px; }
.codeblock .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.codeblock .name { font: var(--text-xs)/1 var(--font-mono); color: hsl(215 20% 65%); margin-left: 6px; }
.codeblock .copy { margin-left: auto; border: 1px solid hsl(217 33% 22%); background: transparent; color: hsl(215 20% 75%); font: var(--text-xs)/1 var(--font-mono); padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--dur), color var(--dur); }
.codeblock .copy:hover { background: hsl(217 33% 16%); color: #fff; }
.codeblock pre { margin: 0; padding: var(--space-5); overflow-x: auto; font: var(--text-sm)/1.7 var(--font-mono); color: hsl(210 40% 92%); }
.codeblock .k { color: hsl(244 92% 78%); }
.codeblock .s { color: hsl(150 60% 66%); }
.codeblock .c { color: hsl(215 16% 52%); }
.codeblock .f { color: hsl(188 86% 62%); }
.codeblock .n { color: hsl(38 92% 68%); }

/* ---------- Gateway diagram ---------- */
.gateway { background: hsl(222 47% 9%); border: 1px solid hsl(217 33% 18%); border-radius: var(--radius-xl); padding: var(--space-10); color: hsl(210 40% 92%); overflow: hidden; }
.gateway-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: var(--space-4); }
.gw-col { display: flex; flex-direction: column; gap: var(--space-3); }
.gw-node { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid hsl(217 33% 22%); background: hsl(222 47% 12%); font: var(--text-sm)/1 var(--font-mono); }
.gw-node svg { width: 18px; height: 18px; color: hsl(var(--cyan-400)); flex: none; }
.gw-core { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); border: 1px solid hsl(var(--indigo-500) / 0.5); background: linear-gradient(180deg, hsl(var(--indigo-600) / 0.25), hsl(var(--indigo-600) / 0.08)); text-align: center; box-shadow: 0 0 0 1px hsl(var(--indigo-500) / 0.15), 0 12px 40px -10px hsl(var(--indigo-600) / 0.5); }
.gw-core .t { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: #fff; }
.gw-core .d { font: var(--text-xs)/1.4 var(--font-mono); color: hsl(210 40% 70%); margin-top: 4px; }
.gw-arrow { color: hsl(215 20% 45%); display: flex; justify-content: center; }
.gw-arrow svg { width: 26px; height: 26px; }
.gw-col-label { font: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: hsl(215 20% 55%); margin-bottom: 4px; }
@media (max-width: 820px) { .gateway-flow { grid-template-columns: 1fr; } .gw-arrow svg { transform: rotate(90deg); } }

/* ---------- Steps / process ---------- */
.steps { counter-reset: step; display: grid; gap: var(--space-6); }
.step { display: flex; gap: var(--space-5); }
.step .num { counter-increment: step; flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: hsl(var(--primary)); color: #fff; font-family: var(--font-mono); font-weight: 600; }
.step .num::before { content: '0' counter(step); }
.step h4 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.step p { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); line-height: var(--leading-relaxed); }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: start; }
.price-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-5); }
.price-card.featured { border-color: hsl(var(--primary)); box-shadow: var(--shadow-lg); position: relative; }
.price-card.featured::before { content: '最受欢迎'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: hsl(var(--primary)); color: #fff; font: var(--text-xs)/1 var(--font-mono); padding: 6px 12px; border-radius: var(--radius-full); }
.price-card .tier { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); }
.price-card .price { font-family: var(--font-display); font-weight: 800; font-size: var(--text-5xl); letter-spacing: var(--tracking-tighter); }
.price-card .price small { font-size: var(--text-base); font-weight: 500; color: hsl(var(--muted-foreground)); }
.price-card .feats { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.price-card .feats li { display: flex; gap: var(--space-3); font-size: var(--text-sm); }
.price-card .feats svg { width: 18px; height: 18px; color: hsl(var(--primary)); flex: none; margin-top: 1px; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* ---------- FAQ accordion ---------- */
.faq { max-width: 800px; margin: 0 auto; border-top: 1px solid hsl(var(--border)); }
.faq-item { border-bottom: 1px solid hsl(var(--border)); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: var(--space-5) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: hsl(var(--foreground)); }
.faq-q svg { width: 20px; height: 20px; color: hsl(var(--muted-foreground)); transition: transform var(--dur); flex: none; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height var(--dur-slow) var(--ease-out); }
.faq-a-inner { padding-bottom: var(--space-5); font-size: var(--text-base); color: hsl(var(--muted-foreground)); line-height: var(--leading-relaxed); }

/* ---------- Comparison table ---------- */
.cmp { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cmp th, .cmp td { padding: var(--space-4); text-align: left; border-bottom: 1px solid hsl(var(--border)); }
.cmp th { font: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: hsl(var(--muted-foreground)); }
.cmp td:first-child { font-weight: var(--weight-medium); }
.cmp .yes { color: hsl(var(--success)); font-weight: 600; }
.cmp .no { color: hsl(var(--muted-foreground)); }

/* ---------- Logo cloud ---------- */
.logo-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-8) var(--space-12); opacity: 0.7; }
.logo-cloud .model { font-family: var(--font-mono); font-size: var(--text-base); font-weight: 600; color: hsl(var(--muted-foreground)); letter-spacing: var(--tracking-tight); }

/* ---------- Page hero (interior) ---------- */
.page-hero { position: relative; padding: var(--space-24) 0 var(--space-16); border-bottom: 1px solid hsl(var(--border)); overflow: hidden; }
.page-hero .hero-grid { opacity: 0.6; }
.page-hero h1 { font-size: clamp(2rem, 4.5vw, var(--text-6xl)); letter-spacing: var(--tracking-tighter); }
.page-hero p { margin-top: var(--space-5); max-width: 620px; }
.breadcrumb { display: flex; gap: var(--space-2); font: var(--text-xs)/1 var(--font-mono); color: hsl(var(--muted-foreground)); margin-bottom: var(--space-5); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.breadcrumb a:hover { color: hsl(var(--foreground)); }

/* ---------- Docs ---------- */
.docs-grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-12); align-items: start; }
.docs-side { position: sticky; top: calc(var(--header-h) + var(--space-8)); display: flex; flex-direction: column; gap: var(--space-6); }
.docs-side .group h6 { font: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: hsl(var(--muted-foreground)); margin-bottom: var(--space-3); }
.docs-side .group a { display: block; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); padding: 6px 0; }
.docs-side .group a:hover, .docs-side .group a.active { color: hsl(var(--primary)); }
@media (max-width: 820px) { .docs-grid { grid-template-columns: 1fr; } .docs-side { position: static; } }