/* ============================================================
   廊坊市揭榜挂帅 OPC 平台 — 设计系统
   风格：互联网创新平台（现代 SaaS · 活力主色 · 大圆角 · 轻拟态）
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 主品牌：靛蓝 / 紫罗兰（可信赖 + 创新感） */
  --brand-50:  #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-300: #A5B4FC;
  --brand-400: #818CF8;
  --brand-500: #6366F1;
  --brand-600: #4F46E5;
  --brand-700: #4338CA;
  --brand-800: #3730A3;
  --brand-900: #312E81;

  /* 辅助色：青（算力 / AI / 技术） */
  --cyan-50:  #ECFEFF;
  --cyan-100: #CFFAFE;
  --cyan-400: #22D3EE;
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;

  /* 语义色 */
  --success:      #10B981;
  --success-bg:   #ECFDF5;
  --warning:      #F59E0B;
  /* warning 原色在白底只有 2.15:1 —— 金额数字恰恰是用户最需要看清的信息。
     涉及文字的地方一律用这个深琥珀；原色留给星星、图标等非文字场景。 */
  --warning-text: #B45309;
  --warning-bg:   #FFFBEB;
  --danger:       #EF4444;
  --danger-bg:    #FEF2F2;
  --info:         #3B82F6;
  --info-bg:      #EFF6FF;
  --gold:         #D97706;
  --gold-bg:      #FEF3C7;

  /* 中性 */
  --ink-900: #0F172A;
  --ink-800: #1E293B;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748B;
  /* ink-400 曾是 #94A3B8：在白底上只有 2.56:1，WCAG AA 要 4.5 ——
     全站辅助文字（统计副标题、表单提示、卡片注释）全部不达标。
     换成 slate-600，白底 4.76:1。深色背景上需要亮灰的地方
     （页脚、深色面包屑）已单独覆盖回亮色，不跟着这个 token 变。 */
  --ink-400: #64748B;
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-100: #F1F5F9;
  --ink-50:  #F8FAFC;
  --white:   #FFFFFF;

  /* 圆角 */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* 阴影 */
  --sh-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --sh-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --sh-md: 0 4px 16px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --sh-lg: 0 12px 32px rgba(15, 23, 42, .08), 0 2px 8px rgba(15, 23, 42, .04);
  --sh-xl: 0 24px 56px rgba(15, 23, 42, .12);
  --sh-brand: 0 8px 24px rgba(79, 70, 229, .24);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .08);

  /* 字体 */
  --font: "PingFang SC", "HarmonyOS Sans SC", "Helvetica Neue", -apple-system,
          BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
  --font-num: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* 布局 */
  --container: 1200px;
  --nav-h: 68px;

  /* 动效 */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  font-family: var(--font);
  color: var(--ink-800);
  background: var(--white);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
/* 标题与文本行内直接内嵌的 svg（icon() 未包 stat-ico / tag 等容器时）给默认尺寸，
   否则 svg 无宽高约束会撑满整行 —— opc-detail 首屏曾出现 722px 的巨型图标盖住标题 */
h1 svg, h2 svg, h3 svg, h4 svg { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.18em; }
p > svg, li > svg, span > svg { width: 1em; height: 1em; display: inline-block; vertical-align: -.15em; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.3; color: var(--ink-900); letter-spacing: -.01em; }

::selection { background: var(--brand-200); color: var(--brand-900); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-100); }
::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: var(--r-full); border: 2px solid var(--ink-100); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

/* ---------- 3. 布局容器 ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 880px; }
.container-lg { max-width: 1320px; }

.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.row-top { display: flex; align-items: flex-start; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.grow { flex: 1; }
.wrap { flex-wrap: wrap; }
.center-x { display: flex; justify-content: center; }
.rel { position: relative; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }

/* 栅格 */
.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-5 { grid-template-columns: repeat(5, 1fr); }
.g-6 { grid-template-columns: repeat(6, 1fr); }

/* ---------- 4. 文字样式 ---------- */
.t-xs   { font-size: 12px; line-height: 1.5; }
.t-sm   { font-size: 13px; line-height: 1.6; }
.t-base { font-size: 15px; }
.t-md   { font-size: 17px; line-height: 1.55; }
.t-lg   { font-size: 20px; line-height: 1.45; }
.t-xl   { font-size: 26px; line-height: 1.35; }
.t-2xl  { font-size: 34px; line-height: 1.25; letter-spacing: -.02em; }
.t-3xl  { font-size: 44px; line-height: 1.18; letter-spacing: -.025em; }
.t-hero { font-size: 52px; line-height: 1.14; letter-spacing: -.03em; font-weight: 800; }

.fw-4 { font-weight: 400; } .fw-5 { font-weight: 500; } .fw-6 { font-weight: 600; }
.fw-7 { font-weight: 700; } .fw-8 { font-weight: 800; }

.c-900 { color: var(--ink-900); } .c-800 { color: var(--ink-800); }
.c-600 { color: var(--ink-600); } .c-500 { color: var(--ink-500); }
.c-400 { color: var(--ink-400); } .c-brand { color: var(--brand-600); }
.c-cyan { color: var(--cyan-600); } .c-success { color: var(--success); }
.c-warning { color: var(--warning); } .c-danger { color: var(--danger); }
.c-white { color: var(--white); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.tc { text-align: center; } .tr { text-align: right; }
.two-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.three-line { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowrap { white-space: nowrap; }

.gradient-text {
  background: linear-gradient(100deg, var(--brand-600) 0%, var(--cyan-500) 55%, var(--brand-500) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 章节标题 */
.section { padding: 80px 0; }
.section-sm { padding: 56px 0; }
.section-tight { padding: 40px 0; }
.bg-soft { background: var(--ink-50); }
.bg-white { background: var(--white); }
.bg-ink { background: var(--ink-900); color: var(--white); }

.section-head { margin-bottom: 36px; }
.section-head.center { text-align: center; max-width: 680px; margin-inline: auto; }
.section-head h2 { font-size: 34px; margin-bottom: 12px; }
.section-head p { color: var(--ink-500); font-size: 16px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--brand-600); background: var(--brand-50);
  padding: 6px 14px; border-radius: var(--r-full); margin-bottom: 16px;
}
.eyebrow svg { width: 15px; height: 15px; }

/* ---------- 5. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: all .18s var(--ease); border: 1px solid transparent; position: relative;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--brand-600); color: var(--white); box-shadow: var(--sh-brand); }
.btn-primary:hover { background: var(--brand-700); box-shadow: 0 12px 28px rgba(79,70,229,.32); transform: translateY(-1px); }

.btn-dark { background: var(--ink-900); color: var(--white); }
.btn-dark:hover { background: var(--ink-800); transform: translateY(-1px); }

.btn-outline { background: var(--white); color: var(--ink-700); border-color: var(--ink-200); box-shadow: var(--sh-xs); }
.btn-outline:hover { border-color: var(--brand-400); color: var(--brand-600); background: var(--brand-50); }

.btn-ghost { background: transparent; color: var(--ink-600); }
.btn-ghost:hover { background: var(--ink-100); color: var(--ink-900); }

.btn-soft { background: var(--brand-50); color: var(--brand-700); }
.btn-soft:hover { background: var(--brand-100); }

.btn-white { background: var(--white); color: var(--brand-700); }
.btn-white:hover { transform: translateY(-1px); box-shadow: var(--sh-lg); }

.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: var(--white); }

.btn-gradient {
  background: linear-gradient(100deg, var(--brand-600), var(--cyan-500));
  color: var(--white); box-shadow: 0 8px 24px rgba(79,70,229,.28);
}
.btn-gradient:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(79,70,229,.36); }

.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: var(--r-sm); }
.btn-sm svg { width: 15px; height: 15px; }
.btn-lg { height: 50px; padding: 0 28px; font-size: 15px; border-radius: var(--r-lg); }
.btn-lg svg { width: 19px; height: 19px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[disabled] { opacity: .5; pointer-events: none; }

.btn-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--brand-600); font-weight: 600; font-size: 14px; transition: gap .18s var(--ease);
}
.btn-link:hover { gap: 9px; color: var(--brand-700); }
.btn-link svg { width: 16px; height: 16px; }

/* ---------- 6. 卡片 ---------- */
.card {
  background: var(--white); border: 1px solid var(--ink-200);
  border-radius: var(--r-lg); padding: 22px;
  transition: all .22s var(--ease-out);
}
.card-hover:hover {
  transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--brand-200);
}
.card-shadow { box-shadow: var(--sh-sm); border-color: transparent; }
.card-flat { background: var(--ink-50); border-color: transparent; }
.card-pad-sm { padding: 16px; }
.card-pad-lg { padding: 30px; }

.card-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.card-desc { color: var(--ink-500); font-size: 14px; line-height: 1.7; }

/* ---------- 7. 标签 / 徽章 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-xs);
  font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.tag svg { width: 12px; height: 12px; }
.tag-brand   { background: var(--brand-50);  color: var(--brand-700); }
/* cyan-600 在白底只有 3.54:1，标签小字（12px）不达标，用 cyan-700 */
.tag-cyan    { background: var(--cyan-50);   color: #0E7490; }
.tag-success { background: var(--success-bg);color: #047857; }
.tag-warning { background: var(--warning-bg);color: #B45309; }
.tag-danger  { background: var(--danger-bg); color: #B91C1C; }
.tag-info    { background: var(--info-bg);   color: #1D4ED8; }
.tag-gold    { background: var(--gold-bg);   color: #92400E; }
.tag-neutral { background: var(--ink-100);   color: var(--ink-600); }
.tag-muted   { background: var(--ink-100);   color: var(--ink-400); }
.tag-orange  { background: #FFF3E6;           color: #C2410C; }
.tag-outline { background: transparent; border: 1px solid var(--ink-200); color: var(--ink-600); }
.tag-lg { padding: 5px 12px; font-size: 13px; border-radius: var(--r-sm); }

/* 带圆点的状态标签 */
.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-live { background: var(--success); box-shadow: 0 0 0 3px rgba(16,185,129,.16); animation: pulse 2s infinite; }
.dot-run  { background: var(--info); }
.dot-end  { background: var(--ink-400); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.4); }
  50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}

/* ---------- 8. 表单控件 ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.label { font-size: 14px; font-weight: 600; color: var(--ink-700); }
/* 必填星号虽是提示性符号，但 danger 原色 #EF4444 只有 3.76:1，压深一档 */
.label .req { color: #DC2626; margin-left: 2px; }
.label-hint { font-size: 12px; font-weight: 400; color: var(--ink-400); margin-left: 6px; }

.input, .select, .textarea {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--white); border: 1px solid var(--ink-200);
  border-radius: var(--r-md); font-size: 14px; color: var(--ink-800);
  transition: all .16s var(--ease); outline: none;
}
.textarea { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.7; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-300); }
.select {
  appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.input-error, .select-error, .textarea-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px var(--danger-bg) !important; }
.error-msg { font-size: 12px; color: var(--danger); margin-top: 5px; }

/* 搜索框 */
.search-box { position: relative; flex: 1; }
.search-box svg.search-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-400); pointer-events: none; }
.search-box .input { height: 48px; padding-left: 44px; padding-right: 96px; border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.search-box .btn { position: absolute; right: 5px; top: 5px; height: 38px; border-radius: var(--r-sm); }
.search-clear { position: absolute; right: 108px; top: 50%; transform: translateY(-50%); color: var(--ink-400); display: none; }
.search-box.has-value .search-clear { display: block; }

/* 复选 / 单选 芯片 */
.chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 14px; border-radius: var(--r-full);
  background: var(--white); border: 1px solid var(--ink-200);
  font-size: 13px; font-weight: 500; color: var(--ink-600);
  transition: all .16s var(--ease); user-select: none; white-space: nowrap;
}
.chip:hover { border-color: var(--brand-300); color: var(--brand-600); background: var(--brand-50); }
.chip.active { background: var(--brand-600); border-color: var(--brand-600); color: var(--white); }
.chip.active:hover { background: var(--brand-700); color: var(--white); }
.chip-count { font-size: 11px; opacity: .7; }

/* 开关 / 原生 checkbox */
.check {
  display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.6;
}
.check input { width: 17px; height: 17px; accent-color: var(--brand-600); margin-top: 2px; cursor: pointer; flex-shrink: 0; }

/* 文件上传区 */
.upload {
  border: 1.5px dashed var(--ink-300); border-radius: var(--r-md); padding: 30px;
  text-align: center; cursor: pointer; transition: all .18s var(--ease); background: var(--ink-50);
}
.upload:hover { border-color: var(--brand-400); background: var(--brand-50); }
.upload svg { width: 26px; height: 26px; color: var(--brand-500); margin: 0 auto 10px; }

/* ---------- 选择卡（入驻通道 / 核验方式）---------- */
.choice-grid { display: grid; gap: 16px; }
.choice-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.choice-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.choice {
  position: relative; text-align: left; display: block; width: 100%;
  border: 1.5px solid var(--ink-200); border-radius: var(--r-lg); padding: 18px 18px 16px 18px;
  background: var(--white); cursor: pointer; transition: all .18s var(--ease); min-width: 0;
}
.choice:hover { border-color: var(--brand-300); box-shadow: 0 6px 20px rgba(15,23,42,.06); }
.choice.active { border-color: var(--brand-600); background: var(--brand-50); box-shadow: 0 0 0 3px rgba(79,70,229,.10); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-dot {
  position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--ink-300); background: var(--white); display: grid; place-items: center;
  transition: all .18s var(--ease);
}
.choice-dot::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--white); transform: scale(0); transition: transform .18s var(--ease); }
.choice.active .choice-dot { border-color: var(--brand-600); background: var(--brand-600); }
.choice.active .choice-dot::after { transform: scale(1); }
.choice-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: var(--r-full); margin-bottom: 10px; line-height: 1.5;
}
.choice-badge.hot { background: var(--brand-100); color: var(--brand-700); }
.choice-badge.warm { background: #FFF1E8; color: #C2410C; }
.choice-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 3px; padding-right: 26px; }
.choice-sub { font-size: 12.5px; color: var(--ink-500); margin-bottom: 12px; }
.choice-meta { display: flex; flex-direction: column; gap: 7px; }
.choice-meta > div { display: flex; gap: 8px; font-size: 13px; color: var(--ink-600); line-height: 1.5; }
.choice-meta svg { width: 15px; height: 15px; color: var(--brand-500); flex-shrink: 0; margin-top: 2px; }
.choice-note {
  margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--ink-200);
  font-size: 12px; color: var(--ink-500); line-height: 1.6;
}

/* ---------- 动态区块显隐 ---------- */
[hidden-by-js] { display: none !important; }

/* ---------- 常见疑问折叠 ---------- */
.faq-item { border-bottom: 1px solid var(--ink-200); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 13px 0; font-size: 14px; font-weight: 600; color: var(--ink-800); text-align: left; cursor: pointer;
}
.faq-q:hover { color: var(--brand-600); }
.faq-q .faq-arrow { color: var(--ink-400); transition: transform .2s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-q { color: var(--brand-600); }
.faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--brand-500); }
.faq-a { display: none; padding: 0 0 14px; font-size: 13.5px; color: var(--ink-600); line-height: 1.85; }
.faq-item.open .faq-a { display: block; }

@media (max-width: 900px) {
  .choice-grid.c3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .choice-grid.c2 { grid-template-columns: 1fr; }
}

/* ---------- 9. 顶栏 / 导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  background: rgba(255,255,255,.82); backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--ink-200);
}
/* 收缩策略：只让 logo 收缩（省略号），导航项与操作区不收缩、不换行，
   空间不够时由下方断点把导航收进汉堡菜单，而不是把文字挤成竖排 */
.nav-inner { display: flex; align-items: center; gap: 24px; height: var(--nav-h); }
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 1; overflow: hidden; }
.logo-text { min-width: 0; }
.logo-text h1 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-text span { font-size: 11px; color: var(--ink-500); letter-spacing: .06em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-600), var(--cyan-500));
  display: grid; place-items: center; color: var(--white);
  font-weight: 800; font-size: 15px; letter-spacing: -.5px;
  box-shadow: 0 4px 12px rgba(79,70,229,.28);
}
.nav-links { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.nav-link {
  display: block; padding: 8px 12px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 500;
  color: var(--ink-600); transition: all .16s var(--ease); position: relative; white-space: nowrap;
}
.nav-link:hover { color: var(--brand-600); background: var(--brand-50); }
.nav-link.active { color: var(--brand-700); background: var(--brand-50); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center;
  color: var(--ink-500); transition: all .16s var(--ease); position: relative;
}
.icon-btn:hover { background: var(--ink-100); color: var(--ink-900); }
.icon-btn svg { width: 19px; height: 19px; }
.badge-dot {
  position: absolute; top: 7px; right: 7px; width: 7px; height: 7px;
  background: var(--danger); border: 2px solid var(--white); border-radius: 50%;
}
.user-chip {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 4px;
  border-radius: var(--r-full); border: 1px solid var(--ink-200); transition: all .16s var(--ease);
  white-space: nowrap; flex-shrink: 0; max-width: 200px;
}
.user-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip:hover { border-color: var(--brand-300); background: var(--brand-50); }
.user-chip img, .user-chip .av { width: 30px; height: 30px; }

.nav-toggle { display: none; width: 38px; height: 38px; place-items: center; border-radius: var(--r-sm); }
.nav-toggle:hover { background: var(--ink-100); }

/* 窄屏收起次要文案只留图标，防止导航操作区撑破视口 */
.hide-sm { display: inline; }
@media (max-width: 900px) { .hide-sm { display: none; } }

/* 移动端下拉菜单 */
.mobile-menu { display: none; position: fixed; inset: var(--nav-h) 0 0; background: var(--white); z-index: 99; padding: 16px 24px; overflow-y: auto; }
.mobile-menu.open { display: block; }
.mobile-menu .nav-link { display: block; padding: 14px 12px; font-size: 16px; border-bottom: 1px solid var(--ink-100); }

/* ---------- 10. 头像 ---------- */
.av {
  width: 42px; height: 42px; border-radius: var(--r-full); flex-shrink: 0;
  display: grid; place-items: center; font-weight: 700; font-size: 15px; color: var(--white);
  letter-spacing: .5px;
}
.av-sm { width: 34px; height: 34px; font-size: 13px; }
.av-lg { width: 64px; height: 64px; font-size: 22px; }
.av-xl { width: 84px; height: 84px; font-size: 28px; }
.av-square { border-radius: var(--r-md); }
.av-ring { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--brand-200); }

.bg-indigo { background: linear-gradient(135deg, #6366F1, #4F46E5); }
.bg-teal   { background: linear-gradient(135deg, #22D3EE, #0891B2); }
.bg-green  { background: linear-gradient(135deg, #34D399, #059669); }
.bg-orange { background: linear-gradient(135deg, #FBBF24, #EA580C); }
.bg-rose   { background: linear-gradient(135deg, #FB7185, #E11D48); }
.bg-violet { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.bg-blue   { background: linear-gradient(135deg, #60A5FA, #2563EB); }
.bg-slate  { background: linear-gradient(135deg, #94A3B8, #475569); }

/* ---------- 11. 统计数据 ---------- */
.stat-box {
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--r-lg);
  padding: 22px; transition: all .22s var(--ease-out);
}
.stat-box:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--brand-200); }
.stat-num { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.stat-label { font-size: 13px; color: var(--ink-500); margin-top: 4px; }
.stat-sub { font-size: 12px; margin-top: 8px; display: flex; align-items: center; gap: 5px; }
.stat-sub .up { color: var(--success); } .stat-sub .down { color: var(--danger); }
.stat-ico { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; }
.stat-ico svg { width: 20px; height: 20px; }

/* ---------- 12. 标签页 ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ink-200); margin-bottom: 24px; overflow-x: auto; }
.tab {
  padding: 12px 18px; font-size: 14.5px; font-weight: 600; color: var(--ink-500);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: all .16s var(--ease); position: relative;
}
.tab:hover { color: var(--ink-800); }
.tab.active { color: var(--brand-600); border-bottom-color: var(--brand-600); }
.tab .tab-count { font-size: 12px; color: var(--ink-400); margin-left: 5px; font-weight: 500; }
.tab.active .tab-count { color: var(--brand-500); }

/* ---------- 13. 时间轴 / 流程 ---------- */
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--brand-300), var(--ink-200));
}
.tl-item { position: relative; padding-bottom: 26px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: -30px; top: 3px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--white); border: 2.5px solid var(--ink-300);
}
.tl-item.done::before { background: var(--success); border-color: var(--success); }
.tl-item.current::before { background: var(--brand-600); border-color: var(--brand-600); box-shadow: 0 0 0 4px var(--brand-100); }
.tl-time { font-size: 12px; color: var(--ink-400); font-family: var(--font-num); }
.tl-title { font-size: 15px; font-weight: 600; color: var(--ink-900); margin: 2px 0 4px; }
.tl-desc { font-size: 13.5px; color: var(--ink-500); line-height: 1.65; }

/* 步骤序列（横向） */
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; position: relative; }
.step { text-align: center; position: relative; }
.step-n {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: var(--r-full);
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
  background: var(--white); border: 2px solid var(--ink-200); color: var(--ink-400);
  transition: all .2s var(--ease);
}
.step-t { font-size: 14.5px; font-weight: 700; color: var(--ink-900); margin-bottom: 4px; }
.step-d { font-size: 12.5px; color: var(--ink-500); line-height: 1.6; }
.step::after {
  content: ''; position: absolute; top: 22px; left: calc(50% + 30px); width: calc(100% - 60px);
  height: 2px; background: repeating-linear-gradient(90deg, var(--ink-200) 0 6px, transparent 6px 12px);
}
.step:last-child::after { display: none; }

/* ---------- 14. 表格 ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--ink-200); border-radius: var(--r-lg); background: var(--white); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.table thead th {
  background: var(--ink-50); text-align: left; padding: 13px 18px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-600);
  letter-spacing: .03em; white-space: nowrap; border-bottom: 1px solid var(--ink-200);
}
.table tbody td { padding: 15px 18px; border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .14s var(--ease); }
.table tbody tr:hover { background: var(--ink-50); }
.table .cell-main { font-weight: 600; color: var(--ink-900); }
.table .actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------- 15. 进度条 ---------- */
.progress { height: 7px; background: var(--ink-100); border-radius: var(--r-full); overflow: hidden; }
.progress-bar { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--brand-500), var(--cyan-400)); transition: width .8s var(--ease-out); }
.progress-bar.ok { background: linear-gradient(90deg, #34D399, #10B981); }
.progress-bar.warn { background: linear-gradient(90deg, #FBBF24, #F59E0B); }

/* 评分星星 */
.stars { display: inline-flex; gap: 2px; color: var(--warning); }
.stars svg { width: 14px; height: 14px; }
.stars .empty { color: var(--ink-200); }

/* ---------- 16. 榜单卡片 · 核心组件 ---------- */
.task-card {
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--r-lg);
  padding: 22px; display: flex; flex-direction: column; height: 100%;
  transition: all .24s var(--ease-out); position: relative; overflow: hidden;
}
.task-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand-500);
  transform: scaleY(0); transform-origin: top; transition: transform .24s var(--ease-out);
}
.task-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--brand-300); }
.task-card:hover::before { transform: scaleY(1); }
.task-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.task-pub { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-600); }
.task-pub .av { width: 30px; height: 30px; font-size: 12px; }
.task-title {
  font-size: 17px; font-weight: 700; line-height: 1.45; margin-bottom: 10px; color: var(--ink-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.task-card:hover .task-title { color: var(--brand-700); }
.task-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.task-brief {
  font-size: 13.5px; color: var(--ink-500); line-height: 1.7; margin-bottom: 16px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.task-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 1px dashed var(--ink-200); margin-top: auto;
}
.task-money { font-size: 20px; font-weight: 800; color: var(--warning-text); letter-spacing: -.02em; }
.task-money small { font-size: 12px; font-weight: 500; color: var(--ink-400); margin-left: 3px; }
.task-stats { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-400); }
.task-stats span { display: inline-flex; align-items: center; gap: 4px; }
.task-stats svg { width: 13px; height: 13px; }
.task-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* OPC 名片 */
.opc-card {
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--r-lg);
  padding: 22px; text-align: center; transition: all .24s var(--ease-out); position: relative;
}
.opc-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--brand-300); }
.opc-card .av { margin: 0 auto 14px; }
.opc-name { font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.opc-domain { font-size: 13px; color: var(--ink-500); margin-bottom: 14px; min-height: 20px; }
.opc-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 14px 0; margin: 14px 0; border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100);
}
.opc-metric-num { font-size: 17px; font-weight: 700; color: var(--ink-900); }
.opc-metric-label { font-size: 11.5px; color: var(--ink-400); }
.verified-badge {
  position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-600); color: var(--white); display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(79,70,229,.32);
}
.verified-badge svg { width: 13px; height: 13px; }

/* ---------- 17. Hero 背景装饰 ---------- */
.hero {
  position: relative; overflow: hidden; padding: 84px 0 72px;
  background:
    radial-gradient(1000px 520px at 12% -10%, rgba(99,102,241,.16), transparent 60%),
    radial-gradient(820px 460px at 88% 6%, rgba(6,182,212,.14), transparent 58%),
    linear-gradient(180deg, var(--ink-50) 0%, var(--white) 78%);
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--ink-300) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .3; mask-image: linear-gradient(180deg, #000, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%); pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

/* ---------- 18. 粘性侧栏 / 分栏 ---------- */
.layout-side { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
/* 关键防御：grid/flex 子项默认 min-width:auto，会被 nowrap 文本或宽表格顶开导致横向溢出 */
.layout-side > *, .dash > *, .grid > * { min-width: 0; }
.layout-side.sticky-col > aside { position: sticky; top: calc(var(--nav-h) + 24px); }
.side-panel { background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--r-lg); padding: 22px; }
.side-panel + .side-panel { margin-top: 20px; }
.side-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.side-title svg { width: 16px; height: 16px; color: var(--brand-600); }

/* 定义列表 */
.dl { display: flex; flex-direction: column; gap: 0; }
.dl-row {
  display: flex; justify-content: space-between; gap: 16px; padding: 9px 0;
  border-bottom: 1px dashed var(--ink-100); font-size: 14px;
}
.dl-row:last-child { border-bottom: none; }
.dl-row dt { color: var(--ink-500); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 数值完整性优先：dd 不收缩，超长时由 dt 截断 */
.dl-row dd { color: var(--ink-800); font-weight: 600; text-align: right; flex-shrink: 0; }

/* ---------- 19. 横幅 / 提示条 ---------- */
.banner {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-radius: var(--r-md); font-size: 14px; line-height: 1.6;
}
.banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.banner-info { background: var(--info-bg); color: #1E40AF; border: 1px solid #BFDBFE; }
.banner-warn { background: var(--warning-bg); color: #92400E; border: 1px solid #FDE68A; }
.banner-success { background: var(--success-bg); color: #065F46; border: 1px solid #A7F3D0; }
.banner-danger { background: var(--danger-bg); color: #991B1B; border: 1px solid #FECACA; }

/* ---------- 20. Toast ---------- */
.toast-wrap { position: fixed; top: calc(var(--nav-h) + 16px); right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast {
  display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-radius: var(--r-md);
  background: var(--ink-900); color: var(--white); font-size: 14px; box-shadow: var(--sh-xl);
  animation: toastIn .32s var(--ease-out); max-width: 380px;
}
.toast.out { animation: toastOut .26s var(--ease) forwards; }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast.success svg { color: #34D399; }
.toast.error svg { color: #F87171; }
.toast.info svg { color: #60A5FA; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px) scale(.96); } }

/* ---------- 21. 模态框 ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(15,23,42,.52); backdrop-filter: blur(3px);
  z-index: 9998; display: grid; place-items: center; padding: 24px;
  animation: fadeIn .2s var(--ease);
}
.modal {
  background: var(--white); border-radius: var(--r-xl); width: 100%; max-width: 560px;
  box-shadow: var(--sh-xl); animation: modalIn .3s var(--ease-out); max-height: 88vh; display: flex; flex-direction: column;
}
.modal-lg { max-width: 720px; }
.modal-head { padding: 22px 26px; border-bottom: 1px solid var(--ink-100); display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { font-size: 18px; }
.modal-body { padding: 26px; overflow-y: auto; }
.modal-foot { padding: 18px 26px; border-top: 1px solid var(--ink-100); display: flex; justify-content: flex-end; gap: 10px; }
.modal-close { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-400); }
.modal-close:hover { background: var(--ink-100); color: var(--ink-800); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- 22. 面包屑 ---------- */
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-400); padding: 20px 0; flex-wrap: wrap; }
.crumb a:hover { color: var(--brand-600); }
.crumb svg { width: 13px; height: 13px; opacity: .6; }
.crumb .current { color: var(--ink-700); font-weight: 500; }

/* ---------- 23. 页头 ---------- */
/* 内页头重做记录：
   原来是 brand-900→cyan-600 的 160° 斜渐变，四个内页（榜单/能力库/服务/入驻）
   同一张脸只换标题文字，一眼模板站。
   现在改为深墨底 + 品牌/青双色柔光 + 细网格淡纹：
   · 和 admin.html 的 ink-900 头部同一色族，全站深浅两种头部从此统一；
   · 柔光代替实色渐变，色彩是"透出来"的，不是"刷上去"的；
   · 网格纵向渐隐（mask），只在标题区隐约可见，增加质地不抢内容。 */
.page-head { background: var(--ink-900); color: var(--white); padding: 44px 0 52px; position: relative; overflow: hidden; }
.page-head::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(560px 340px at 86% 6%, rgba(79, 70, 229, .42), transparent 68%),
    radial-gradient(520px 320px at 2% 98%, rgba(8, 145, 178, .30), transparent 66%);
}
.page-head::after {
  content: ''; position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 78%, transparent 100%);
}
.page-head > .container { position: relative; z-index: 1; }
.page-head h1 { font-size: 34px; color: var(--white); margin-bottom: 10px; }
.page-head p { color: rgba(255,255,255,.8); font-size: 15.5px; max-width: 640px; }
.page-head .crumb { color: rgba(255,255,255,.66); padding-top: 0; margin-bottom: 14px; }
.page-head .crumb a, .page-head .crumb .current { color: rgba(255,255,255,.9); }

/* 深色内联头部（admin.html 用 style 写背景而不是套 page-head），
   面包屑如果落回浅色底的 --ink-400，在 ink-900 上几乎不可读 —— 曾经就是这样。 */
.head-dark .crumb { color: rgba(255,255,255,.66); }
.head-dark .crumb a { color: rgba(255,255,255,.92); }
.head-dark .crumb a:hover { color: var(--white); }
.head-dark .crumb .current { color: rgba(255,255,255,.92); }
/* 与 page-head 共享柔光语言，只是更收敛 —— 运营后台不该比前台页面更花 */
.head-dark { position: relative; overflow: hidden; }
.head-dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(520px 300px at 88% 0%, rgba(79, 70, 229, .30), transparent 66%),
    radial-gradient(460px 280px at 0% 100%, rgba(8, 145, 178, .20), transparent 64%);
}
.head-dark > .container { position: relative; z-index: 1; }

/* ---------- 24. 页脚 ---------- */
/* 页脚正文锁回亮灰：ink-400 提到 slate-600 后，若跟着变会在 ink-900 上只有 3.4:1。
   #94A3B8 在 ink-900 上 5.5:1，正文小字达标。 */
.footer { background: var(--ink-900); color: #94A3B8; padding: 56px 0 28px; margin-top: 0; }
.footer .logo-text span { color: #94A3B8; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer h4 { color: var(--white); font-size: 14.5px; margin-bottom: 16px; font-weight: 600; }
.footer li { margin-bottom: 11px; }
.footer a { font-size: 13.5px; transition: color .16s var(--ease); }
.footer a:hover { color: var(--white); }
.footer-brand p { font-size: 13.5px; line-height: 1.8; max-width: 320px; margin-top: 14px; }
.footer-bottom { padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; }
.footer-social { display: flex; gap: 9px; margin-top: 18px; }
.footer-social a { width: 34px; height: 34px; border-radius: var(--r-sm); background: rgba(255,255,255,.08); display: grid; place-items: center; transition: all .16s var(--ease); }
.footer-social a:hover { background: var(--brand-600); transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; }

/* ---------- 25. 空状态 / 分页 ---------- */
.empty { text-align: center; padding: 72px 24px; }
.empty svg { width: 64px; height: 64px; color: var(--ink-300); margin: 0 auto 18px; }
.empty h4 { font-size: 17px; margin-bottom: 8px; }
.empty p { color: var(--ink-500); font-size: 14px; margin-bottom: 20px; }

.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 36px; }
.pager-btn {
  min-width: 38px; height: 38px; padding: 0 11px; border-radius: var(--r-sm);
  border: 1px solid var(--ink-200); font-size: 14px; font-weight: 500; color: var(--ink-600);
  transition: all .16s var(--ease); display: grid; place-items: center;
}
.pager-btn:hover:not(:disabled) { border-color: var(--brand-400); color: var(--brand-600); background: var(--brand-50); }
.pager-btn.active { background: var(--brand-600); border-color: var(--brand-600); color: var(--white); }
.pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.pager-btn svg { width: 16px; height: 16px; }

/* ---------- 26. 杂项 utilities ---------- */
.divider { height: 1px; background: var(--ink-200); margin: 24px 0; }
.divider-dashed { border-top: 1px dashed var(--ink-200); margin: 20px 0; }
.hr-soft { background: var(--ink-100); }

.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.info-cell { background: var(--ink-50); border-radius: var(--r-md); padding: 14px 16px; }
.info-cell dt { font-size: 12.5px; color: var(--ink-500); margin-bottom: 5px; }
.info-cell dd { font-size: 16px; font-weight: 700; color: var(--ink-900); }

/* 富文本内容块 */
.article { font-size: 15px; line-height: 1.9; color: var(--ink-700); }
.article h3 { font-size: 19px; margin: 30px 0 12px; }
.article h4 { font-size: 16px; margin: 22px 0 10px; }
.article p { margin-bottom: 14px; }
.article ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.article ol { margin: 0 0 16px; padding-left: 22px; list-style: decimal; }
.article li { margin-bottom: 7px; }
.article strong { color: var(--ink-900); font-weight: 700; }
.article blockquote {
  border-left: 3px solid var(--brand-500); background: var(--brand-50);
  padding: 14px 18px; border-radius: 0 var(--r-md) var(--r-md) 0; margin: 18px 0; color: var(--ink-700);
}

/* 列表项 hover */
.list-item {
  display: flex; align-items: center; gap: 12px; padding: 13px 0;
  border-bottom: 1px dashed var(--ink-100); transition: all .16s var(--ease);
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { transform: translateX(3px); }
.list-item:hover .list-item-title { color: var(--brand-600); }
.list-item-title { font-size: 14px; font-weight: 600; color: var(--ink-900); transition: color .16s var(--ease); }

/* 评分条形构成 */
.rating-bars { display: flex; flex-direction: column; gap: 10px; }
.rating-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
/* progress 可能作为 span 使用，需显式转为块级 */
.rating-row .progress { display: block; }
.rating-row .progress-bar { display: block; }
.rating-row .rl { width: 76px; color: var(--ink-600); flex-shrink: 0; }
.rating-row .rv { width: 44px; text-align: right; font-weight: 700; flex-shrink: 0; }

/* ---------- 26c. 工作台 / 后台骨架 ---------- */
.dash { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; }
.dash-nav { position: sticky; top: calc(var(--nav-h) + 24px); }
.dash-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 4px;
  border-radius: var(--r-md); font-size: 14.5px; font-weight: 500; color: var(--ink-600);
  transition: all .16s var(--ease); cursor: pointer; width: 100%; text-align: left;
}
.dash-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.dash-item:hover { background: var(--ink-100); color: var(--ink-900); }
.dash-item.active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.dash-item .badge-n {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full);
  /* #DC2626 而非 danger 原色：白字对比 4.86:1（原 #EF4444 只有 3.76，11px 小字不达标） */
  background: #DC2626; color: var(--white); font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
.dash-user {
  display: flex; align-items: center; gap: 11px; padding: 14px; margin-bottom: 14px;
  background: var(--ink-50); border-radius: var(--r-md);
}
@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr; }
  .dash-nav { position: static; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
  .dash-user { display: none; }
  .dash-item { white-space: nowrap; margin-bottom: 0; }
}

/* ---------- 26b. 筛选侧栏区块 ---------- */
.filter-block { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--ink-200); }
.filter-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-title { font-size: 13px; font-weight: 700; color: var(--ink-700); margin-bottom: 11px; }

/* ---------- 26c. 顶部可折叠筛选条 ---------- */
.filter-bar {
  background: var(--white); border: 1px solid var(--ink-200);
  border-radius: var(--r-lg); margin-bottom: 22px; overflow: hidden;
}
.filter-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; transition: background .18s var(--ease);
}
.filter-toggle:hover { background: var(--brand-50); }
.filter-toggle-l { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--ink-800); }
.filter-toggle-l > .ico-ph > svg { width: 17px; height: 17px; color: var(--brand-600); }
.filter-toggle-r { display: flex; align-items: center; gap: 9px; color: var(--ink-500); min-width: 0; }
.filter-chev { display: inline-flex; transition: transform .26s var(--ease); flex-shrink: 0; }
.filter-chev > svg { width: 17px; height: 17px; }
.filter-bar.open .filter-chev { transform: rotate(180deg); }
.filter-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-full); background: var(--brand-600); color: var(--white);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.filter-body { padding: 0 20px 20px; }
.filter-body[hidden] { display: none; }
.filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 34px; padding-top: 18px; border-top: 1px dashed var(--ink-200); }
.filter-grid .filter-block { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.filter-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--ink-200);
}
.filter-tips { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; padding: 0; list-style: none; }
.filter-tips li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-600); }
.filter-tips li b { color: var(--ink-800); }
.filter-tips .ico-ph > svg { width: 13px; height: 13px; color: var(--brand-600); flex-shrink: 0; }

/* 列表兜底 CTA */
.no-luck {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 26px; padding: 18px 22px;
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-lg);
}
.no-luck h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.no-luck h4 .ico-ph > svg { width: 16px; height: 16px; color: var(--brand-600); }

/* ---------- 27. 入场动画 ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* 悬浮 CTA */
.float-cta {
  position: fixed; right: 24px; bottom: 28px; z-index: 90; display: flex; flex-direction: column; gap: 10px;
}
.float-btn {
  width: 48px; height: 48px; border-radius: var(--r-full); background: var(--white);
  box-shadow: var(--sh-lg); display: grid; place-items: center; color: var(--ink-500);
  transition: all .2s var(--ease); border: 1px solid var(--ink-200);
}
.float-btn:hover { color: var(--brand-600); transform: translateY(-3px); box-shadow: var(--sh-xl); }
.float-btn svg { width: 20px; height: 20px; }

/* ---------- 28. 响应式 ---------- */
/* 导航收起断点：容器上限 1200px，导航内容满载约 1120px，
   低于 1240px 时可用宽度不足，直接收进汉堡菜单，而不是把导航项挤成竖排 */
@media (max-width: 1240px) {
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .nav-inner { gap: 14px; }
  .logo-text span { display: none; }
}

@media (max-width: 1100px) {
  .layout-side { grid-template-columns: 1fr; }
  .layout-side.sticky-col > aside { position: static; }
  .g-6 { grid-template-columns: repeat(3, 1fr); }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
}

@media (max-width: 900px) {
  /* 内联的 grid-template-columns 会绕开所有断点，窄屏统一兜底为单列，
     否则会出现「一列被压到几十像素、文字溢出」的破版 */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns"] > * { min-width: 0; }
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .nav-inner { gap: 14px; }
  .nav-actions { gap: 6px; }
  .user-chip { padding: 4px; gap: 0; }
  .logo-text span { display: none; }
  .logo-text h1 { font-size: 14px; }
  .logo-mark { width: 34px; height: 34px; font-size: 14px; border-radius: 10px; }
  .g-5, .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 24px 12px; }
  .step:nth-child(3)::after { display: none; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .filter-hint { display: none; }
  .t-hero { font-size: 38px; }
  .t-3xl { font-size: 34px; }
  .t-2xl { font-size: 28px; }
  .section { padding: 56px 0; }
  .section-head h2 { font-size: 27px; }
  .hero { padding: 56px 0 48px; }
  .page-head { padding: 32px 0 40px; }
  .page-head h1 { font-size: 26px; }
  .float-cta { display: none; }
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  /* 手机端导航留白有限：通知入口收进移动端菜单，把空间让给平台名 */
  #nav-bell { display: none; }
  .g-2, .g-3, .g-4, .g-5, .g-6 { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr; gap: 16px; }
  .filter-tips { margin-left: 0; gap: 6px 14px; }
  .filter-foot { gap: 8px; }
  .no-luck { padding: 16px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .t-hero { font-size: 31px; }
  .section-head h2 { font-size: 24px; }
  .card, .task-card, .opc-card { padding: 18px; }
  .stat-box { padding: 16px; }
  .stat-num { font-size: 26px; }
  .search-box .input { padding-right: 14px; }
  .search-box .btn { display: none; }
  .search-clear { right: 14px; }
  .footer-grid { grid-template-columns: 1fr; }
  .toast-wrap { left: 16px; right: 16px; }
  .toast { max-width: none; }
  .modal-mask { padding: 12px; }
}

@media print {
  .nav, .footer, .float-cta, .btn { display: none !important; }
}

/* ---------- 加载占位（接口请求中） ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-50) 37%, var(--ink-100) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}