/* ============================================================
   影视罗盘 · 导航站 — 设计系统 base.css
   依据 01-设计系统.png 定义，色值/字阶/组件均按设计稿 1:1 还原。
   视口基准 1440px，内容区 1280px（左右各留 80）。
   ============================================================ */

:root {
  /* ---- 色彩 Tokens（页面底 / 面 / 线 + 文字三级 + 品牌与强调 + 状态三色）---- */
  --bg:         #0A0D14;  /* 页面底 */
  --surface:    #0E121B;  /* 区块底 */
  --card:       #141926;  /* 卡片面 */
  --card-hover: #1A2032;  /* 卡片悬浮 */
  --line:       #232B3D;  /* 发丝线 */

  --text-2:     #98A3B8;  /* 次文字 */
  --text-3:     #5F6A80;  /* 弱文字 */
  --text-1:     #F2F5FA;  /* 主文字 */

  --brand:      #6D5EF6;  /* 品牌紫 · 交互 */
  --brand-dim:  rgba(109, 94, 246, .16);
  --accent:     #FF7A45;  /* 高亮橙 · 热 / 新 */
  --accent-dim: rgba(255, 122, 69, .10);

  --ok:         #35D07F;  /* 状态 · 可用 */
  --slow:       #F5A524;  /* 状态 · 缓慢 */
  --down:       #F0524B;  /* 状态 · 失效 */
  --gold:       #FFB020;  /* 评分金 */
  --blue:       #4A9EFD;  /* 图表 / 图标辅助 */

  /* ---- 字体：Noto Sans SC（中文标题正文） + JetBrains Mono（数据与元信息）---- */
  --font: "Noto Sans SC", "Sora", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Roboto Mono", Consolas, "Courier New", monospace;

  /* ---- 布局与圆角 ---- */
  --wrap: 1280px;
  --r-card: 16px;
  --r-item: 12px;
  --r-pill: 999px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  font-size: 15px;      /* Body 15 / Regular */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; color: var(--text-1); }

/* 内容容器：1440 视口下内容边界正好落在 80 / 1360 */
.wrap { max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 0 24px; }

.mono { font-family: var(--mono); font-size: 12px; font-weight: 500; }

/* ============================================================
   顶部导航（高 72，底发丝线）
   ============================================================ */
.hd {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 13, 20, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.hd-in {
  max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 0 24px;
  height: 72px; display: flex; align-items: center; gap: 28px;
}
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-img { height: 26px; width: auto; display: block; }
.logo-sub {
  font-size: 15px; font-weight: 700; letter-spacing: .4px; color: var(--text-2);
  padding-left: 12px; border-left: 1px solid var(--line); line-height: 1;
  transition: color .15s;
}
.logo:hover .logo-sub { color: var(--text-1); }
.nav { display: flex; gap: 24px; font-size: 14px; color: var(--text-2); }
.nav a { transition: color .15s; white-space: nowrap; }
.nav a:hover { color: var(--text-1); }
.nav a.on { color: var(--text-1); font-weight: 600; }
.hd-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.search-mini {
  width: 210px; height: 38px; padding: 0 14px 0 36px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 13px; outline: none; transition: border-color .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235F6A80' stroke-width='1.6'%3E%3Ccircle cx='6.8' cy='6.8' r='4.6'/%3E%3Cpath d='M10.4 10.4 14 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px center; background-size: 15px;
}
.search-mini::placeholder { color: var(--text-3); }
.search-mini:focus { border-color: var(--brand); }

/* ============================================================
   按钮（药丸形）
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 20px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-pri { background: var(--brand); color: #fff; }
.btn-pri:hover { background: #7d6ff8; }
.btn-gho { background: var(--card); border: 1px solid var(--line); color: var(--text-2); }
.btn-gho:hover { color: var(--text-1); border-color: #2f3a52; }
.btn-lg { height: 56px; padding: 0 30px; font-size: 15px; }

/* 文字链接（品牌紫） */
.tlink { color: var(--brand); font-size: 13px; font-weight: 600; }
.tlink:hover { text-decoration: underline; }

/* ============================================================
   区块（eyebrow + H1 + 描述 + 右侧链接）
   ============================================================ */
.sec { padding-top: 68px; }
.sec-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 2.6px; text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}
.h1 { font-size: 28px; font-weight: 700; letter-spacing: .4px; line-height: 1.35; }
.sec-sub { color: var(--text-3); font-size: 14px; margin-top: 8px; }
.sec-more { color: var(--brand); font-size: 13px; font-weight: 600; white-space: nowrap; padding-bottom: 4px; }
.sec-more:hover { text-decoration: underline; }

/* ============================================================
   站点卡片（1.5 列 = 4 列网格，间距 20）
   ============================================================ */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }

.card {
  background: var(--card); border: 1px solid var(--card-hover); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; min-width: 0;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: #2b364f; transform: translateY(-2px); }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ava {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px;
}
.ava.sm3 { font-size: 11px; letter-spacing: -.2px; }
/* 站点真实图标：字母作底，图片盖在上面；图片失败则回落到字母 */
.ava-img { position: relative; overflow: hidden; }
.ava-letter { display: grid; place-items: center; width: 100%; height: 100%; }
.ava-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--card); }
.score { font-size: 13px; font-weight: 700; color: var(--gold); display: inline-flex; align-items: center; gap: 4px; }
/* 刚收录、还没评分的站：评分位显示「新」，不让卡片右上角空着 */
.score.is-new { color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 6px; background: var(--accent-dim); }
.card-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.card-name span { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot.ok { background: var(--ok); }
.dot.slow { background: var(--slow); }
.dot.blocked { background: #4A9EFF; }
.dot.down { background: var(--down); }
.dot.pending { background: var(--text-3); }
.card-desc { font-size: 12.5px; color: var(--text-3); line-height: 1.65; margin-top: 7px; min-height: 41px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.tag {
  font-size: 11px; color: var(--text-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 9px; line-height: 1.5;
}
.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--line); padding-top: 11px; margin-top: 14px;
}
.card-meta { font-size: 11.5px; color: var(--text-3); }
.card-go { font-size: 12.5px; font-weight: 600; color: var(--brand); }
.card:hover .card-go { text-decoration: underline; }
.card-go.warn { color: var(--slow); }

/* ============================================================
   榜单行
   ============================================================ */
.rank { margin-top: 26px; border-top: 1px solid var(--line); }
.rank-row {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 8px; border-bottom: 1px solid var(--line);
  transition: background .15s; border-radius: 10px;
}
.rank-row:hover { background: var(--surface); }
.rank-no {
  font-family: var(--mono); font-size: 20px; font-weight: 700;
  color: var(--gold); width: 32px; flex-shrink: 0;
}
.rank-ava { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.rank-ava.sm3 { font-size: 11px; }
.rank-txt { min-width: 0; }
.rank-name { font-size: 15px; font-weight: 700; }
.rank-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.rank-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.rank-score { font-size: 13.5px; font-weight: 700; color: var(--gold); display: inline-flex; align-items: center; gap: 4px; }
.rank-delta { font-family: var(--mono); font-size: 12.5px; font-weight: 500; width: 36px; text-align: right; }
.d-up { color: var(--ok); }
.d-down { color: var(--down); }
.d-flat { color: var(--text-3); }

/* ============================================================
   页脚（背景同页面底，顶部发丝线）
   ============================================================ */
.ft { border-top: 1px solid var(--line); margin-top: 96px; }
.ft-in {
  max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 44px 24px 0;
  display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.ft-brand { max-width: 340px; }
.ft-logo { font-size: 16px; font-weight: 800; letter-spacing: .3px; display: flex; align-items: center; gap: 10px; }
.ft-logo img { height: 20px; width: auto; display: block; }
.ft-logo span {
  font-size: 15px; font-weight: 700; color: var(--text-2);
  padding-left: 10px; border-left: 1px solid var(--line); line-height: 1.1;
}
.ft-desc { font-size: 12.5px; color: var(--text-3); margin-top: 10px; line-height: 1.7; }
.ft-cols { display: flex; gap: 64px; }
.ft-col h4 { font-size: 12.5px; color: var(--text-3); font-weight: 500; margin-bottom: 14px; }
.ft-col a { display: block; font-size: 13px; color: var(--text-2); padding: 5px 0; transition: color .15s; }
.ft-col a:hover { color: var(--text-1); }
.ft-btm {
  max-width: calc(var(--wrap) + 48px); margin: 36px auto 0; padding: 18px 24px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ft-btm span { font-size: 11.5px; color: var(--text-3); }

/* ============================================================
   响应式（设计基准 1440，逐档降级）
   ============================================================ */
@media (max-width: 1240px) { .grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) {
  .nav { display: none; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-cols { gap: 36px; }
}
@media (max-width: 720px) {
  .search-mini { display: none; }
  .logo-img { height: 22px; }
  .logo-sub { display: none; }
  .ft-in { flex-direction: column; }
  .ft-cols { flex-wrap: wrap; }
  .rank-right { gap: 12px; }
}
@media (max-width: 520px) {
  .grid4 { grid-template-columns: minmax(0, 1fr); }
  .h1 { font-size: 24px; }
}