/* ============================================================
   高简设计系统 — Gaojian Design System
   品牌基因：高效简单（To be simple 大智若愚 · To be stupid 大道至简）
   主色取自高简官网 tbsacademy.com：#3f83ff
   ============================================================ */

:root {
  --gj-blue: #3f83ff;
  --gj-blue-deep: #155bd9;
  --gj-blue-ink: #0d3a8f;
  --gj-ink: #16263e;          /* 标题 */
  --gj-text: #353535;         /* 正文 */
  --gj-gray: #66758c;         /* 辅助 */
  --gj-faint: #9aa7b8;
  --gj-line: #e3e9f2;
  --gj-bg: #f6f8fc;
  --gj-card: #ffffff;
  --gj-tint: #eef4ff;         /* 浅蓝底 */
  --gj-good: #14a06a;
  --gj-warn: #e8930c;
  --gj-bad: #d94848;
  --font-sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-serif: 'Songti SC', 'Noto Serif CJK SC', 'SimSun', serif;
  --shadow-sm: 0 1px 3px rgba(22, 38, 62, .06);
  --shadow-md: 0 6px 24px rgba(22, 38, 62, .08);
  --shadow-lg: 0 16px 48px rgba(22, 38, 62, .12);
  --radius: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--gj-text);
  background: var(--gj-bg);
  line-height: 1.7;
  font-size: 15px;
}
a { color: var(--gj-blue); text-decoration: none; }
a:hover { color: var(--gj-blue-deep); }
::selection { background: rgba(63, 131, 255, .18); }

/* ---------- 布局容器 ---------- */
.gj-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.gj-wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }

/* ---------- 顶部品牌条 + 导航 ---------- */
.gj-topbar {
  background: var(--gj-ink); color: rgba(255, 255, 255, .55);
  font-size: 12px; padding: 7px 0;
}
.gj-topbar .gj-wrap { display: flex; justify-content: space-between; align-items: center; }
.gj-topbar a { color: rgba(255, 255, 255, .7); }
.gj-topbar a:hover { color: #fff; }

.gj-header { background: #fff; border-bottom: 1px solid var(--gj-line); position: sticky; top: 0; z-index: 50; }
.gj-header .gj-wrap { display: flex; align-items: center; gap: 36px; height: 64px; }
.gj-logo { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.gj-logo .zh { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--gj-ink); letter-spacing: 2px; }
.gj-logo .en { font-size: 11px; color: var(--gj-faint); letter-spacing: 1.5px; text-transform: uppercase; }
.gj-logo .mark {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; align-self: center;
  background: linear-gradient(135deg, var(--gj-blue), var(--gj-blue-deep));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 14px; font-family: var(--font-serif);
}
.gj-nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; }
.gj-nav a {
  padding: 8px 14px; border-radius: 8px; font-size: 14px; color: var(--gj-gray);
  white-space: nowrap; transition: all .15s;
}
.gj-nav a:hover { color: var(--gj-blue-deep); background: var(--gj-tint); }
.gj-nav a.on { color: var(--gj-blue-deep); background: var(--gj-tint); font-weight: 600; }

/* ---------- 按钮 ---------- */
.gj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 26px; border-radius: 10px; border: none; cursor: pointer;
  font-size: 15px; font-family: var(--font-sans); font-weight: 600;
  background: var(--gj-blue); color: #fff; transition: all .18s;
}
.gj-btn:hover { background: var(--gj-blue-deep); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(63, 131, 255, .35); }
.gj-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.gj-btn-ghost {
  background: transparent; color: var(--gj-blue-deep); border: 1px solid var(--gj-blue);
}
.gj-btn-ghost:hover { background: var(--gj-tint); box-shadow: none; }

/* ---------- 卡片 ---------- */
.gj-card {
  background: var(--gj-card); border: 1px solid var(--gj-line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.gj-card-hover { transition: all .25s ease; }
.gj-card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(63, 131, 255, .35); }

/* ---------- 蓝图网格背景（构建母题）---------- */
.gj-blueprint {
  background-image:
    linear-gradient(rgba(63, 131, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 131, 255, .045) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ---------- 标签 ---------- */
.gj-tag {
  display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px;
  background: var(--gj-tint); color: var(--gj-blue-deep); border: 1px solid rgba(63, 131, 255, .25);
  letter-spacing: 1px;
}
.gj-tag-ok { background: #e7f7f0; color: var(--gj-good); border-color: rgba(20, 160, 106, .25); }
.gj-tag-soon { background: #f3f5f9; color: var(--gj-faint); border-color: var(--gj-line); }

/* ---------- 页脚 ---------- */
.gj-footer { background: var(--gj-ink); color: rgba(255, 255, 255, .45); padding: 44px 0; text-align: center; font-size: 13px; margin-top: 0; }
.gj-footer .brand { font-family: var(--font-serif); color: rgba(255, 255, 255, .9); font-size: 16px; letter-spacing: 2px; margin-bottom: 6px; }
.gj-footer .slogan { color: rgba(255, 255, 255, .6); }

/* ---------- 动画 ---------- */
.fade-up { animation: gjFadeUp .55s ease both; }
.d1 { animation-delay: .08s; } .d2 { animation-delay: .16s; } .d3 { animation-delay: .24s; } .d4 { animation-delay: .32s; }
@keyframes gjFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

@keyframes gjSpin { to { transform: rotate(360deg); } }
.gj-spinner {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--gj-line); border-top-color: var(--gj-blue);
  animation: gjSpin .6s linear infinite; vertical-align: -2px;
}

@keyframes gjShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.gj-shimmer {
  background: linear-gradient(90deg, #9aa7b8 30%, #2f5dab 50%, #9aa7b8 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gjShimmer 1.8s linear infinite;
}

/* ---------- 移动端 ---------- */
@media (max-width: 720px) {
  .gj-header .gj-wrap { gap: 14px; }
  .gj-logo .en { display: none; }
}