/* ============================================================================
   LX AI Micro-SaaS Directory — 设计系统覆盖层
   ----------------------------------------------------------------------------
   加载顺序：必须放在 /tailwind.css 之后（同特异性时后者胜）。
   设计令牌：蓝 #1B63FF + 白 + 橙 #FF8A34 点缀（视觉占比 5%~8%）。
   本文件只做「追加与覆盖」，不删除任何既有样式与组件。
   ========================================================================== */

:root{
  /* 主蓝 */
  --blue:#1B63FF;
  --blue-dark:#1248BF;
  --blue-soft:#DFE9FF;
  --blue-deep:#0B2E7A;
  /* 面 */
  --bg:#F4F8FF;
  --surface:#FFFFFF;
  --surface-alt:#EEF4FF;
  /* 文本与线 */
  --text:#0F172A;
  --muted:#52607A;
  --line:#D7E0EF;
  /* 点缀与语义 */
  --accent:#FF8A34;
  --accent-soft:#FFF1E4;
  --ok:#1F9D6A;
  --warn:#D97706;
  --danger:#D14343;
  /* 形状与节奏 */
  --r-card:22px;
  --r-pill:999px;
  --tap:48px;           /* 最小点击区 */
  --content:1200px;     /* 内容最大宽 */
  --gap:8px;            /* 间距基数 */
  --shadow-1:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(18,72,191,.16);
  --shadow-2:0 2px 4px rgba(15,23,42,.05), 0 16px 40px -16px rgba(18,72,191,.26);
}

/* ---------------------------------------------------------------- 基础层 */
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--blue-soft);color:var(--blue-dark)}

/* 键盘可达：统一且清晰的焦点环（鼠标点击不出现） */
:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:6px;
}
/* 覆盖既有 .skip-link 的观感，行为不变 */
.skip-link{
  position:absolute;left:8px;top:-56px;z-index:60;
  background:var(--blue-dark);color:#fff;font-weight:700;
  padding:12px 18px;border-radius:12px;text-decoration:none;
  transition:top .18s ease;
}
.skip-link:focus,.skip-link:focus-visible{top:8px;color:#fff}

/* ---------------------------------------------------------- 按钮与交互区 */
/* 主 CTA（蓝底）与次 CTA（描边）：保证 ≥48px 点击区，符合无障碍 */
a[class~="bg-brand-700"],
a[class~="bg-brand-600"],
button[class~="bg-brand-700"],
button[class~="bg-brand-600"]{
  min-height:var(--tap);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:14px;
  box-shadow:0 6px 18px -10px rgba(18,72,191,.55);
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
a[class~="bg-brand-700"]:hover,
a[class~="bg-brand-600"]:hover,
button[class~="bg-brand-700"]:hover,
button[class~="bg-brand-600"]:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px -12px rgba(18,72,191,.6);
}
a[class~="border-brand-100"]{min-height:var(--tap);display:inline-flex;align-items:center;gap:6px}
a[class~="border-brand-100"]:hover{background:var(--blue-soft)}

/* 一级详情的次级链接（"All X tools →"） */
a[class~="text-brand-700"]{text-underline-offset:3px}

/* 导航主 CTA：统一为品牌蓝（原为深灰 nav，与蓝色系脱节） */
header a[class~="bg-slate-900"],
nav a[class~="bg-slate-900"]{
  background:var(--blue-dark)!important;
  min-height:44px;display:inline-flex;align-items:center;gap:6px;
  border-radius:12px;
}
header a[class~="bg-slate-900"]:hover,
nav a[class~="bg-slate-900"]:hover{
  background:var(--blue)!important;transform:translateY(-1px);
}

/* ---------------------------------------------------------------- 卡片 */
.card-hover{
  border-radius:var(--r-card);
  box-shadow:var(--shadow-1);
  background:var(--surface);
}
.card-hover:hover{
  box-shadow:var(--shadow-2);
  border-color:var(--blue-soft)!important;
}

/* 产品缩略图（真实站点截图，非示意图） */
.thumb{
  position:relative;
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:16px;
  background:linear-gradient(180deg,var(--surface-alt),var(--blue-soft));
  border:1px solid var(--line);
  margin-bottom:12px;
}
.thumb img{
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  display:block;
}
.thumb::after{ /* 顶部 1px 高光，弱化"网页截图"的生硬边缘 */
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
}
.thumb-fallback{ /* 无截图时的抽象占位（明确标注，不伪造界面） */
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--blue-dark);
  background:
    radial-gradient(120% 80% at 12% 0%,var(--blue-soft) 0%,transparent 60%),
    radial-gradient(120% 80% at 88% 100%,var(--accent-soft) 0%,transparent 55%),
    var(--surface-alt);
}

/* ------------------------------------------------------- 橙色点缀（5%~8%） */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-dark);
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}

.tag-accent{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-soft);
  border:1px solid #FFD9B8;
  color:#8A4A12;
  font-size:11px;font-weight:800;letter-spacing:.02em;
  padding:3px 10px;border-radius:var(--r-pill);
}
.note-accent{ /* 优惠/说明类小字 */
  display:inline-block;
  background:var(--accent-soft);color:#8A4A12;
  border-radius:10px;padding:3px 9px;
  font-size:12.5px;font-weight:700;
}
.dot-accent{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;vertical-align:middle}

/* 状态徽章（比既有彩色徽章更克制） */
.badge-live{background:#E7F6EF;color:#10603F;border:1px solid #BFE6D3;
  font-size:11px;font-weight:800;padding:3px 9px;border-radius:var(--r-pill);display:inline-flex;gap:5px;align-items:center}
.badge-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.badge-soon{background:var(--surface-alt);color:var(--muted);border:1px solid var(--line);
  font-size:11px;font-weight:800;padding:3px 9px;border-radius:var(--r-pill);display:inline-flex;gap:5px;align-items:center}
.badge-soon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn)}

/* ------------------------------------------------------------ 区块节奏 */
/* 统一主 section 的垂直留白（56/64/80），不改结构 */
section[class~="py-10"]{padding-top:64px;padding-bottom:64px}
section[class~="py-6"]{padding-top:48px;padding-bottom:48px}

/* 数字/统计卡：去掉彩色背景的杂音，统一为面 + 线 */
[class*="bg-brand-50"][class*="border"]{background:var(--surface-alt)!important;border-color:var(--line)!important}

/* 表格（定价对照一类）：更清晰的分隔与对齐 */
table{border-collapse:collapse}
table th{color:var(--muted);font-weight:800;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase}
table td,table th{border-color:var(--line)}

/* 代码/等宽片段 */
code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}

/* ============================================================================
   补齐缺失工具类
   ----------------------------------------------------------------------------
   背景：tailwind.css 是早期构建产物，content 未覆盖 categories/**，且后续新增
   的类从未重新构建 —— 全站有 54 个 class 被使用但**从未定义**（静默失效）。
   下列定义按 Tailwind v3 默认刻度补齐，值与原设计意图一致。
   ========================================================================== */

/* --- 内边距 --- */
.pr-3{padding-right:.75rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.pt-6{padding-top:1.5rem}
.pt-8{padding-top:2rem}
.p-2{padding:.5rem}
.p-8{padding:2rem}
.py-12{padding-top:3rem;padding-bottom:3rem}

/* --- 外边距 --- */
.mb-1{margin-bottom:.25rem}
.mt-0\.5{margin-top:.125rem}
.mt-5{margin-top:1.25rem}
.mt-10{margin-top:2.5rem}
.mx-1{margin-left:.25rem;margin-right:.25rem}
.gap-x-5{column-gap:1.25rem}
.gap-y-2{row-gap:.5rem}
.space-y-1\.5>:not([hidden])~:not([hidden]){margin-top:.375rem}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}

/* --- 尺寸与宽度 --- */
.w-full{width:100%}
.max-w-sm{max-width:24rem}
.max-w-md{max-width:28rem}

/* --- 圆角 --- */
.rounded-3xl{border-radius:1.5rem}
.rounded-r-xl{border-top-right-radius:.75rem;border-bottom-right-radius:.75rem}

/* --- 排版 --- */
.uppercase{text-transform:uppercase}
.tracking-wide{letter-spacing:.025em}
.italic{font-style:italic}
.not-italic{font-style:normal}
.text-left{text-align:left}
.text-\[14px\]{font-size:14px;line-height:1.55}
.text-2xl{font-size:1.5rem;line-height:2rem}
@media (min-width:640px){ .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem} }

/* --- 布局 --- */
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto;-webkit-overflow-scrolling:touch}
.border-collapse{border-collapse:collapse}
.border-l-4{border-left-width:4px}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){ .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.divide-y>:not([hidden])~:not([hidden]){border-top-width:1px;border-top-style:solid}
.divide-slate-100>:not([hidden])~:not([hidden]){border-color:#E7EEF9}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}
.from-brand-50{--tw-gradient-from:#F1F6FF;--tw-gradient-to:rgb(241 246 255 / 0);
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-indigo-50{--tw-gradient-to:#F1F6FF}

/* --- 颜色（未在 config.extend 中定义，或被后续页面新引入）--- */
.border-brand-200{border-color:#BFD4FF}
.text-indigo-600{color:#1B63FF}
.text-indigo-900{color:#12306E}
.bg-indigo-50{background-color:#F1F6FF}
.border-indigo-100{border-color:#DFE9FF}
.border-indigo-300{border-color:#A8C6FF}
.border-indigo-400{border-color:#7FA8FF}
.hover\:border-indigo-400:hover{border-color:#7FA8FF}
.text-rose-600{color:#E11D48}

/* ------------------------------------------------------------ 响应式 */
@media (max-width:1100px){
  :root{--content:100%}
  section[class~="py-10"]{padding-top:56px;padding-bottom:56px}
}
@media (max-width:860px){
  /* 导航与双栏结构在移动端纵向堆叠 */
  header nav, .nav-links{gap:6px;flex-wrap:wrap}
  section[class~="py-10"]{padding-top:48px;padding-bottom:48px}
  .thumb{aspect-ratio:16/9}
}
@media (max-width:640px){
  :root{--r-card:18px}
  body{font-size:15.5px}
  .thumb{aspect-ratio:3/2;border-radius:12px}
  a[class~="bg-brand-700"],a[class~="bg-brand-600"]{width:100%}
}

/* -------------------------------------------------- 动效与可访问性偏好 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .card-hover:hover{transform:none}
  a[class~="bg-brand-700"]:hover,a[class~="bg-brand-600"]:hover{transform:none}
}
@media (prefers-contrast:more){
  :root{--muted:#3A4760;--line:#B9C6DA}
}