/* ============================================================
   site_ui.css — 全站统一 UI 规范 (蓝色科技赛博风)
   2026-08-17 皓哥拍板: 性能优先(纯色+轻光晕+轻上浮), 公共文件统一管理
   三站共用: site_home(8000) / board(9121) / stock_analysis(9200)
   引用方式: <link rel="stylesheet" href=".../site_ui.css"> 或内联拷贝
   修改规范: 改这一份 → 三站同步 (sync_code_to_server.py 已含)
   ============================================================ */

/* ---------- 1. 设计令牌 (Design Tokens) ---------- */
:root{
  /* 深空底色 (纯色优先, 性能友好) */
  --bg:#0d1117;
  --card:#161b22;
  --card2:#1c2330;
  --border:#2a3340;
  --text:#e6e9ef;
  --muted:#8b95a5;

  /* 品牌色: 科技蓝 + 赛博紫渐变 */
  --accent:#52bdd7;
  --accent2:#8e5cff;
  --grad:linear-gradient(135deg,#52bdd7,#8e5cff);

  /* 语义色 */
  --green:#2ecc71;
  --red:#e74c3c;
  --yellow:#f1c40f;
  --orange:#e67e22;

  /* A股行情涨跌色 (红升绿跌, 2026-08-18 皓哥定规, 与看板 render.py 口径一致)
     用法: 行情涨跌一律用 --up/--down, 禁止用 --green/--red 表达涨跌;
     --green/--red 仅用于 badge 语义色(强=绿/弱=红/警示=红)等非涨跌场景 */
  --up:#f85149;
  --down:#3fb950;

  /* 形状 */
  --radius:12px;
  --radius-sm:8px;

  /* 轻光晕 (性能: 只用 rgba 阴影, 不用模糊大图) */
  --glow:0 0 0 4px rgba(82,189,215,.12), 0 8px 32px rgba(0,0,0,.35);
  --glow-soft:0 0 0 3px rgba(82,189,215,.08), 0 4px 16px rgba(0,0,0,.25);

  /* 字体 */
  --font:-apple-system,'Segoe UI','Microsoft YaHei',sans-serif;
}

/* ---------- 2. 基础 ---------- */
*{box-sizing:border-box}
body{
  background:var(--bg);
  /* 轻赛博光晕: 单层 radial-gradient 极淡, 不占性能 */
  background-image:radial-gradient(1200px 500px at 80% -10%, rgba(82,189,215,.05), transparent 60%),
                   radial-gradient(900px 400px at 10% 110%, rgba(142,92,255,.04), transparent 60%);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font);
  margin:0;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:#52bdd7}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 3. 卡片 (轻上浮: 纯 transform, GPU 合成) ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:var(--glow-soft);
}

/* ---------- 4. 品牌标题 (渐变+字距) ---------- */
.brand-title{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:1.5px;
  font-weight:800;
}
.section-title{
  font-size:16px;font-weight:700;
  margin:24px 0 12px;
  color:var(--accent);
  letter-spacing:1px;
  border-left:3px solid var(--accent);
  padding-left:10px;
}

/* ---------- 5. 徽章体系 ---------- */
.badge{font-size:12px;padding:2px 10px;border-radius:20px;font-weight:600;display:inline-block;line-height:1.6}
.badge-strong{background:rgba(46,204,113,.15);color:var(--green);border:1px solid var(--green)}
.badge-mid{background:rgba(241,196,15,.12);color:var(--yellow);border:1px solid var(--yellow)}
.badge-weak{background:rgba(231,76,60,.12);color:var(--red);border:1px solid var(--red)}
.badge-err{background:rgba(231,76,60,.2);color:var(--red)}
.best-tag{font-size:10px;color:var(--yellow);border:1px solid var(--yellow);border-radius:8px;padding:0 5px;margin-left:4px}
.pos{color:var(--up)}
.neg{color:var(--down)}

/* ---------- 6. 表格 ---------- */
table{width:100%;border-collapse:collapse}
th,td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-weight:500;font-size:12px}
tr:hover td{background:rgba(82,189,215,.04)}

/* ---------- 7. 输入框 (发光聚焦) ---------- */
input,select,textarea{
  background:var(--card);
  border:1.5px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:8px 14px;
  font-size:14px;
  font-family:var(--font);
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  box-shadow:var(--glow);
}

/* ---------- 8. 按钮 ---------- */
.btn{
  background:var(--grad);
  color:#fff;border:none;cursor:pointer;
  border-radius:var(--radius-sm);
  padding:8px 18px;font-size:14px;font-weight:600;
  transition:transform .15s ease,opacity .15s ease,box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--glow-soft);opacity:.95}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- 9. 芯片/chip ---------- */
.chip{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--muted);
  padding:7px 16px;
  border-radius:20px;
  font-size:13px;
  cursor:pointer;
  transition:border-color .15s ease,color .15s ease,transform .15s ease;
}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.chip.active{background:rgba(82,189,215,.12);border-color:var(--accent);color:var(--accent)}

/* ---------- 10. 响应式 ---------- */
@media (max-width:768px){
  body{background-image:none}  /* 移动端关光晕省性能 */
  .card{padding:12px}
}