/* dolinx · 多邻 — 自定义样式
 * 主样式走 Tailwind（CDN），这里只补 Tailwind 不方便表达的：品牌渐变、背景光斑、代码卡片、细节动效。
 */

:root {
  --brand-1: #22d3ee; /* cyan */
  --brand-2: #3b82f6; /* blue */
  --brand-3: #6366f1; /* indigo */
  --warm-1: #fb923c;  /* orange */
  --warm-2: #f472b6;  /* pink */
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* —— 品牌渐变文字 —— */
.grad {
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-warm {
  background: linear-gradient(90deg, var(--warm-1), var(--warm-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-title-ink {
  color: #14161d;
}
.dark .hero-title-ink {
  color: #f8fafc;
}
.hero-title-api {
  background: linear-gradient(90deg, #ff9800 0%, #fb7a2a 40%, #f2557f 70%, #df3f9b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-title-forward {
  background: linear-gradient(90deg, #d9439d 0%, #8a2e83 45%, #351447 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* logo 小标 */
.logo-mark {
  background: transparent url("/favicon.svg?v=20260706-dot") center / contain no-repeat;
  border-radius: 0 !important;
  box-shadow: none;
  color: transparent !important;
  flex: 0 0 36px !important;
  font-size: 0 !important;
  height: 34px !important;
  line-height: 0 !important;
  transform: translateY(1px);
  width: 36px !important;
}

/* —— Hero 背景光斑 —— */
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-blob {
  position: absolute; border-radius: 9999px; filter: blur(80px); opacity: .55;
}
.hero-blob.b1 { width: 520px; height: 520px; top: -160px; left: -120px;
  background: radial-gradient(circle at 30% 30%, var(--brand-1), transparent 70%); }
.hero-blob.b2 { width: 480px; height: 480px; top: -120px; right: -100px;
  background: radial-gradient(circle at 70% 30%, var(--brand-3), transparent 70%); }
.hero-blob.b3 { width: 360px; height: 360px; top: 120px; left: 40%;
  background: radial-gradient(circle at 50% 50%, var(--warm-2), transparent 70%); opacity: .25; }
.dark .hero-blob { opacity: .4; }
.dark .hero-blob.b3 { opacity: .18; }

/* CTA 主按钮渐变 */
.btn-grad {
  background: linear-gradient(120deg, var(--brand-2), var(--brand-3));
  box-shadow: 0 10px 30px -10px rgba(79, 70, 229, .7);
}
.btn-grad:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-grad { transition: transform .15s ease, filter .15s ease; }

/* —— 能力卡片 —— */
.feature-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(30, 58, 138, .45); }

details {
  max-width: 100%;
  overflow: hidden;
}
details summary {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
details summary > span:first-of-type {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: calc(100% - 1.5rem) !important;
  overflow-wrap: anywhere !important;
  word-break: break-all !important;
}
details summary > span:last-of-type {
  flex: 0 0 auto !important;
}

/* 卡片图标小方块 */
.icon-tile {
  background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(99,102,241,.18));
}
.dark .icon-tile { background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(99,102,241,.22)); }

/* —— 代码卡片 —— */
.code-card {
  background: #f8fafc;
  color: #162033;
  border: 1px solid rgba(203, 213, 225, .78);
  box-shadow: none;
}
.dark .code-card {
  background: rgba(255, 255, 255, .03);
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, .1);
}
.code-card pre {
  margin: 0; overflow-x: auto; font-size: 13px; line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.code-card pre::-webkit-scrollbar { height: 8px; }
.code-card pre::-webkit-scrollbar-thumb { background: rgba(120,120,140,.4); border-radius: 8px; }
.code-card .copy-btn {
  color: #64748b;
  z-index: 2;
}
.code-card .copy-btn:hover { color: #111827; }
.code-comment { color: #94a3b8; }
.code-cmd { color: #2563eb; }
.copy-btn.is-copied { color: #10b981 !important; }
.os-switch {
  position: absolute;
  top: 10px;
  right: 74px;
  z-index: 2;
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid rgba(203, 213, 225, .8);
}
.os-switch button {
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.os-switch button.is-active {
  background: #17113f;
  color: #fff;
  box-shadow: 0 8px 18px -12px rgba(23, 17, 63, .8);
}

/* —— Hero Base URL 复制框 —— */
.base-url-box {
  box-shadow: 0 18px 44px -26px rgba(30, 58, 138, .5);
  transition: box-shadow .18s ease, transform .18s ease;
}
.base-url-box:hover { transform: translateY(-1px); box-shadow: 0 24px 50px -26px rgba(30, 58, 138, .55); }
.dark .base-url-box { box-shadow: 0 18px 44px -28px rgba(0, 0, 0, .7); }
.base-url-box pre { line-height: 1.5; }
.base-url-box pre::-webkit-scrollbar { height: 6px; }
.base-url-box pre::-webkit-scrollbar-thumb { background: rgba(120,120,140,.35); border-radius: 6px; }

/* —— Hero Typewriter —— */
.typewriter-box {
  min-height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.typewriter-text {
  min-width: 0;
  color: #10203d;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.dark .typewriter-text { color: #f8fafc; }
.typewriter-cursor {
  display: inline-block;
  margin-left: .22rem;
  color: #2563eb;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-.04em);
  font-size: 1.25rem;
}
.dark .typewriter-cursor { color: #67e8f9; }
@media (min-width: 640px) {
  .typewriter-box { min-height: 4rem; }
  .typewriter-text,
  .typewriter-cursor { font-size: 1.55rem; }
}

/* —— Quick Start Tab —— */
.qs-tab.is-active {
  background: linear-gradient(120deg, var(--brand-2), var(--brand-3));
  color: #fff;
  box-shadow: 0 8px 22px -10px rgba(79,70,229,.7);
}

/* 步骤序号圆点 */
.step-num {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-3));
}

/* 进入动画 */
@keyframes floatUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.animate-up { animation: floatUp .6s ease both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-up { animation: none; }
}

@media (max-width: 420px) {
  .logo-mark + span .text-slate-400 { display: none; }
  [data-theme-toggle] { display: none; }
  .os-switch {
    position: static;
    width: max-content;
    max-width: calc(100% - 56px);
    margin: 10px 48px 0 10px;
  }
  .code-card [data-os-panel] { padding-top: 12px !important; }
}

/* —— Prompt 灵感库 —— */
.prompt-filter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 2.5rem;
  padding: 0 .95rem;
  border-radius: .75rem;
  border: 1px solid rgba(203, 213, 225, .8);
  background: rgba(255, 255, 255, .82);
  color: #475569;
  font-size: .875rem;
  font-weight: 700;
  transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.prompt-filter:hover { transform: translateY(-1px); border-color: var(--brand-2); color: #0f172a; }
.prompt-filter span {
  color: #94a3b8;
  font-weight: 800;
  font-size: .75rem;
}
.prompt-filter.is-active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(120deg, var(--brand-2), var(--brand-3));
  box-shadow: 0 10px 26px -14px rgba(79, 70, 229, .8);
}
.prompt-filter.is-active span { color: rgba(255,255,255,.82); }
.dark .prompt-filter {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  color: #cbd5e1;
}
.dark .prompt-filter:hover { color: #fff; border-color: var(--brand-1); }

.prompt-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(226, 232, 240, .9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 24px 52px -36px rgba(30, 58, 138, .5);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.prompt-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, .35);
  box-shadow: 0 30px 68px -36px rgba(30, 58, 138, .58);
}
.dark .prompt-card {
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  box-shadow: 0 24px 52px -36px rgba(0,0,0,.9);
}
.prompt-image-wrap {
  display: block;
  aspect-ratio: 4 / 3;
  background: #f1f5f9;
  overflow: hidden;
}
.dark .prompt-image-wrap { background: rgba(255,255,255,.04); }
.prompt-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.prompt-card:hover .prompt-image { transform: scale(1.035); }
.prompt-card-body { padding: 1rem; }
.prompt-meta {
  margin: 0;
  color: #64748b;
  font-size: .75rem;
  font-weight: 800;
}
.dark .prompt-meta { color: #94a3b8; }
.prompt-title {
  margin-top: .2rem;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 800;
  color: #0f172a;
}
.dark .prompt-title { color: #fff; }
.prompt-subtitle {
  margin-top: .1rem;
  color: #94a3b8;
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prompt-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: .2rem .55rem;
  background: rgba(14, 165, 233, .1);
  color: #0369a1;
  font-size: .7rem;
  font-weight: 800;
}
.dark .prompt-badge { background: rgba(34,211,238,.12); color: #67e8f9; }
.prompt-text {
  display: -webkit-box;
  min-height: 8.2rem;
  margin-top: .8rem;
  color: #475569;
  font-size: .82rem;
  line-height: 1.65;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.dark .prompt-text { color: #cbd5e1; }
.prompt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-top: 1rem;
}
.prompt-copy,
.prompt-play,
.prompt-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  border-radius: .65rem;
  padding: 0 .8rem;
  font-size: .8rem;
  font-weight: 800;
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.prompt-copy {
  color: #fff;
  background: linear-gradient(120deg, var(--brand-2), var(--brand-3));
}
.prompt-copy:hover,
.prompt-play:hover,
.prompt-link:hover { transform: translateY(-1px); }
.prompt-copy.is-copied { background: linear-gradient(120deg, #10b981, #059669); }
.prompt-play {
  color: #0f172a;
  background: #f1f5f9;
}
.prompt-link { color: #64748b; }
.dark .prompt-play { color: #fff; background: rgba(255,255,255,.08); }
.dark .prompt-link { color: #94a3b8; }