/*
 * 视觉设计语言与 app.tanghoong.com 保持一致。
 *
 * 那边是 Next.js + Tailwind v4 + shadcn/ui，这边是零依赖静态站 —— 框架不同是有意
 * 的安排，所以这里不引 Tailwind，而是把同一套设计 token（shadcn 的 zinc 中性色阶、
 * 0.625rem 基准圆角、system-ui 字体栈、indigo→purple 品牌渐变）翻译成原生 CSS 变量。
 * 值是照抄的，改的只是表达方式。
 */

:root {
  /* ---- 与 app.tanghoong.com 的 globals.css 逐条对应 ---- */
  --background: #ffffff;
  --foreground: #09090b;
  --card: #ffffff;
  --card-foreground: #09090b;
  --primary: #18181b;
  --primary-foreground: #fafafa;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --accent: #f4f4f5;
  --accent-foreground: #18181b;
  --border: #e4e4e7;
  --ring: #a1a1aa;

  --radius: 0.625rem;              /* 10px 基准 */
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-2xl: 1rem;              /* 卡片 */
  --radius-3xl: 1.5rem;            /* hero / 分区 */

  /* 品牌渐变：取自那边标题第二行的 indigo-500 → purple-500 */
  --brand-from: #6366f1;
  --brand-to: #a855f7;
  --brand-tint: rgba(99, 102, 241, 0.05);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

:root[data-theme='dark'] {
  --background: #09090b;
  --foreground: #fafafa;
  --card: #09090b;
  --card-foreground: #fafafa;
  --primary: #fafafa;
  --primary-foreground: #18181b;
  --secondary: #27272a;
  --secondary-foreground: #fafafa;
  --muted: #27272a;
  --muted-foreground: #a1a1aa;
  --accent: #27272a;
  --accent-foreground: #fafafa;
  --border: #27272a;
  --ring: #d4d4d8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 200ms ease, color 200ms ease;
}

::selection { background: var(--primary); color: var(--primary-foreground); }

.page {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 12px;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  padding: 24px;
  margin-bottom: 24px;
  background: linear-gradient(
    to bottom right,
    color-mix(in srgb, var(--muted) 30%, transparent),
    transparent 50%,
    color-mix(in srgb, var(--muted) 20%, transparent)
  );
}

/* 两团模糊光晕，和那边 hero 的处理一样 */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}
.hero__orb--a {
  right: -80px;
  top: -80px;
  width: 256px;
  height: 256px;
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.hero__orb--b {
  left: -80px;
  bottom: -80px;
  width: 192px;
  height: 192px;
  background: var(--brand-tint);
}

.hero__actions {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 32px;
  text-align: left;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 80%, transparent);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
}
.pill svg { color: #f59e0b; }

.hero__title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.hero__title span {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
/* 第一行 foreground → muted-foreground，第二行品牌渐变 —— 与那边标题同构 */
.hero__title .line-1 {
  background-image: linear-gradient(to right, var(--foreground), var(--foreground), var(--muted-foreground));
}
.hero__title .line-2 {
  background-image: linear-gradient(to right, var(--brand-from), var(--brand-to));
}

.hero__sub {
  font-size: 14px;
  color: var(--muted-foreground);
  max-width: 42rem;
}

/* ---------- 圆形图标按钮 ---------- */

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 80%, transparent);
  backdrop-filter: blur(4px);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.icon-btn:hover { background: var(--accent); color: var(--accent-foreground); }
.icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px color-mix(in srgb, var(--ring) 50%, transparent);
}

/* ---------- 应用网格 ---------- */

.apps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.app-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-2xl);
  text-decoration: none;
  color: var(--card-foreground);
  text-align: left;
  cursor: pointer;
  transition: background-color 300ms ease, transform 300ms ease;
}
.app-card:hover { background: rgba(0, 0, 0, 0.05); }
:root[data-theme='dark'] .app-card:hover { background: rgba(255, 255, 255, 0.1); }
.app-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 50%, transparent);
}

.app-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--muted-foreground);
  transition: background 300ms ease, color 300ms ease, transform 300ms ease;
}
/* hover 时底色转品牌渐变、图标转白 —— 与那边卡片的 group-hover 处理一致 */
.app-card:hover .app-card__icon {
  background: linear-gradient(to bottom right, var(--brand-from), var(--brand-to));
  color: #fff;
  transform: scale(1.05);
}
.app-card__icon svg { width: 20px; height: 20px; }

.app-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-card__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-card__desc {
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-card__chevron {
  flex-shrink: 0;
  align-self: center;
  color: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
}

/* ---------- 状态 ---------- */

.status {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 80px 24px;
  text-align: center;
  border-radius: var(--radius-2xl);
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  color: var(--muted-foreground);
  font-size: 14px;
}
.status code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: var(--radius-md);
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.status--error { color: #ef4444; }

.footer {
  margin-top: 32px;
  padding: 24px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--muted-foreground);
  border-top: 1px solid var(--border);
}
.footer a { color: inherit; }

/* ---------- 响应式：小屏一行一个，大屏回到密集网格 ---------- */

@media (min-width: 640px) {
  .page { padding: 24px; }
  .hero { padding: 32px; }
  .hero__body { align-items: center; text-align: center; padding-top: 16px; }
  .hero__title { font-size: 36px; }

  /* 那边有十几个项目，密集网格才好看；这边 app 还少，min 稍放宽免得卡片显得孤零零 */
  .apps { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
  .app-card {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    text-align: center;
  }
  .app-card:hover { transform: translateY(-2px); }
  .app-card__icon { width: 48px; height: 48px; margin-top: 0; }
  .app-card__icon svg { width: 22px; height: 22px; }
  .app-card__body { align-items: center; gap: 6px; }
  .app-card__name { font-size: 12px; white-space: normal; }
  .app-card__desc { font-size: 10px; line-height: 1.3; }
  .app-card__chevron { display: none; }
}

@media (min-width: 1024px) {
  .page { padding: 24px 32px; }
  .hero__title { font-size: 48px; }
  .hero__sub { font-size: 16px; }
}