/* ===================================================
   智养舌诊 · 暗夜星河 dark-tech 主题
   覆盖 style.css 的 CSS 变量 + 少量字面色，将整体切换为
   「深空黑蓝 + 青/紫霓虹」。雷达图 canvas 配色由 patch-darktech.js 同步替换。
   报告页新增舌象大图 Hero（class: .report-hero）。
   =================================================== */

:root {
  /* 主色：青霓虹 + 紫霓虹（替代中国红/香槟金） */
  --primary:         #3FE0FF;
  --primary-dark:    #22B8E6;
  --primary-light:   #7C5CFF;
  --primary-bg:      #0C1226;
  --gold:            #9BB8FF;
  --gold-light:      #B9CCFF;
  --gold-dark:       #6E8BD8;
  --gold-bg:         #0E1430;

  /* 背景：深空黑蓝渐变 */
  --bg-white:  #0E1630;
  --bg-warm:   #0C1226;
  --bg-cream:  #0E1430;
  --bg-card:   rgba(255,255,255,0.045);   /* 玻璃拟态卡底 */
  --bg-card2:  rgba(120,180,255,0.08);
  --bg-gradient: linear-gradient(165deg, #080D1F 0%, #0C1430 55%, #090D1E 100%);
  --bg-app:    var(--bg-gradient);

  /* 边框 / 阴影：青色霓虹描边 + 冷光投影 */
  --border:     rgba(120,180,255,0.20);
  --border-md:  rgba(120,180,255,0.26);
  --shadow-sm:  0 2px 12px rgba(0,0,0,0.30);
  --shadow-md:  0 6px 24px rgba(0,0,0,0.40);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.50);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 10px 34px -8px rgba(20,80,200,0.30);
  --shadow-gold: 0 4px 24px rgba(63,224,255,0.22);

  /* 文字：冷白 + 青灰 */
  --text-primary: #E8F0FF;
  --text-main:    #E8F0FF;
  --text-second:  #B6C6E0;
  --text-dim:     #8FA3C7;
  --text-gold:    #9BB8FF;
  --text-red:     #FF6B8A;
}

/* 全局深空背景（若 style.css 未自动套用变量） */
body { background: var(--bg-gradient); color: var(--text-primary); }

/* ---- 背景装饰：网格 + 光晕（置于内容之下） ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(420px 420px at 12% -6%, rgba(63,224,255,0.16), transparent 60%),
    radial-gradient(460px 460px at 92% 8%, rgba(124,92,255,0.16), transparent 60%),
    radial-gradient(520px 520px at 78% 96%, rgba(63,224,255,0.10), transparent 60%),
    linear-gradient(rgba(120,180,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,180,255,0.045) 1px, transparent 1px);
  background-size: auto, auto, auto, 34px 34px, 34px 34px;
}

/* ---- 顶栏 ---- */
.top-bar, .app-header, .report-header {
  background: rgba(12,18,38,0.72) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(120,180,255,0.18) !important;
  color: #EAF2FF !important;
}

/* ===================================================
   舌象大图 Hero（新增）
   =================================================== */
.report-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 14px 0 18px;
  padding: 18px 20px;
  border-radius: var(--radius-lg, 16px);
  background:
    radial-gradient(420px 200px at 0% 0%, rgba(63,224,255,0.14), transparent 70%),
    linear-gradient(135deg, rgba(63,224,255,0.08), rgba(124,92,255,0.10));
  border: 1px solid rgba(120,180,255,0.28);
  box-shadow: 0 0 0 1px rgba(63,224,255,0.08), 0 20px 54px -14px rgba(20,80,200,0.55);
  overflow: hidden;
}
.report-hero-img {
  flex: 0 0 auto;
  width: 116px; height: 116px;
  border-radius: 14px;
  padding: 4px;
  background: linear-gradient(135deg, #3FE0FF, #7C5CFF);
  box-shadow: 0 0 0 4px rgba(63,224,255,0.10), 0 0 34px rgba(63,224,255,0.40);
}
.report-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.report-hero-info { flex: 1 1 auto; min-width: 0; }
.report-hero-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #3FE0FF, #7C5CFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.report-hero-sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-second);
}

/* ===================================================
   报告摘要 / 雷达 + 评分 卡片
   =================================================== */
.report-radar-score-card {
  background: linear-gradient(145deg, rgba(63,224,255,0.07), rgba(124,92,255,0.07));
  border: 1px solid rgba(120,180,255,0.28);
  box-shadow: 0 0 0 1px rgba(63,224,255,0.08), 0 20px 54px -14px rgba(20,80,200,0.55);
}
/* 雷达图背后的霓虹光球 */
.radar-chart-wrap { position: relative; }
.radar-chart-wrap::before {
  content: "";
  position: absolute; inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(63,224,255,0.22), rgba(124,92,255,0.10) 60%, transparent 72%);
  filter: blur(4px);
  z-index: 0; pointer-events: none;
}
#radar-chart { position: relative; z-index: 1; }
.radar-label-name { color: var(--text-second); text-shadow: 0 0 6px rgba(63,224,255,0.35); }

/* 体质名渐变 + 评分条 */
.analysis-title { color: #EAF2FF; }
.main-constitution-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(120,180,255,0.16); }
.main-badge, .sub-badge {
  background: linear-gradient(135deg, #3FE0FF, #7C5CFF);
  color: #06121F; font-weight: 700;
  box-shadow: 0 0 12px rgba(63,224,255,0.45);
}
.main-c-name {
  font-size: 20px; font-weight: 700;
  background: linear-gradient(135deg, #3FE0FF, #7C5CFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.main-c-score { text-shadow: 0 0 12px rgba(63,224,255,0.55); }
.score-bar-bg { background: rgba(120,180,255,0.12); }
.score-bar-fill {
  background: linear-gradient(90deg, #3FE0FF, #7C5CFF, #3FE0FF) !important;
  box-shadow: 0 0 14px rgba(63,224,255,0.55);
}
.sub-constitution-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(120,180,255,0.14); }
.sub-c-rank {
  background: linear-gradient(135deg, #7C5CFF, #3FE0FF);
  color: #06121F; font-weight: 700;
}
.sub-c-name { color: #EAF2FF; }

/* 报告底部小舌象图（霓虹环） */
.report-thumb-small {
  width: 64px; height: 64px;
  border-radius: 10px;
  border: 2px solid rgba(63,224,255,0.6);
  box-shadow: 0 0 0 3px rgba(63,224,255,0.10), 0 0 18px rgba(63,224,255,0.40);
}

/* ===================================================
   区块标题
   =================================================== */
.report-section-title {
  color: #EAF2FF;
  border-bottom: 1px solid rgba(120,180,255,0.18);
}
.report-section-title .section-icon {
  filter: drop-shadow(0 0 6px rgba(63,224,255,0.65));
}

/* ===================================================
   通用卡片：玻璃化 + 霓虹描边
   =================================================== */
.tongue-features,
.risk-matrix-section,
.constitution-detail-section,
.six-channel-section,
.report-block,
.history-card,
.lifestyle-card,
.recipe-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(120,180,255,0.18);
  box-shadow: 0 10px 34px -12px rgba(0,0,0,0.55);
}
.report-radar-score-card:hover,
.tongue-features:hover,
.risk-matrix-section:hover,
.constitution-detail-section:hover {
  box-shadow: 0 0 26px rgba(63,224,255,0.28);
}

/* 舌象特征小卡 */
.tongue-feature-item {
  background: rgba(120,180,255,0.06);
  border: 1px solid rgba(120,180,255,0.16);
}
.feature-label { color: var(--text-dim); }
.feature-value { color: #EAF2FF; }

/* 体质详解 */
.formation-reason-box {
  background: rgba(120,180,255,0.05);
  border: 1px solid rgba(120,180,255,0.14);
}
.formation-text { color: var(--text-second); }
.formation-text strong { color: #EAF2FF; }

/* ===================================================
   健康建议卡（advice-card 出现 45 次）
   =================================================== */
.advice-card,
.advice-item,
.health-advice-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(120,180,255,0.18) !important;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5) !important;
}

/* 顶部信息行 */
.report-user-info {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(120,180,255,0.16);
  border-radius: var(--radius-lg, 14px);
  padding: 12px 14px;
}
.report-user-info .user-label { color: var(--text-dim); }
.report-user-info .user-value { color: #EAF2FF; }

/* ===================================================
   疾病风险胶囊（保留 绿/黄/橙/红 语义，仅微调为深色底）
   =================================================== */
.risk-normal { background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(34,197,94,0.06)); border-color: rgba(34,197,94,0.35); }
.risk-low    { background: linear-gradient(135deg, rgba(234,179,8,0.14), rgba(234,179,8,0.06)); border-color: rgba(234,179,8,0.35); }
.risk-medium { background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(249,115,22,0.06)); border-color: rgba(249,115,22,0.35); }
.risk-high   { background: linear-gradient(135deg, rgba(239,68,68,0.16), rgba(239,68,68,0.07)); border-color: rgba(239,68,68,0.4); }
.risk-name { color: #EAF2FF; }

/* ===================================================
   一体机扫码浮层（覆盖 kiosk-addon.css 的绿色 → 暗夜星河）
   仅作用于 scan.v.iscare.vip 的二维码流程，对 pg1 根站无副作用
   =================================================== */
.scan-flow {
  background: radial-gradient(circle at 50% 30%, #0a1830 0%, #06101f 70%, #04080f 100%) !important;
}
.scan-flow-inner { color: #EAF2FF; }
.scan-title {
  color: #3FE0FF !important;
  text-shadow: 0 0 18px rgba(63,224,255,.45) !important;
}
.scan-sub { color: #B6C6E0 !important; }
.scan-tip { color: #8FA3C7 !important; }
.scan-cancel {
  background: rgba(63,224,255,.12) !important;
  color: #bfe6f5 !important;
  border: 1px solid rgba(63,224,255,.30) !important;
}
.scan-success { color: #3FE0FF !important; }
.scan-loading {
  background: rgba(63,224,255,.12) !important;
  border: 1px solid rgba(63,224,255,.30) !important;
  color: #B6C6E0 !important;
}
.scan-loading .dot { background: #3FE0FF !important; }
.scan-spinner {
  border: 5px solid rgba(63,224,255,.2) !important;
  border-top-color: #3FE0FF !important;
}
.scan-retry {
  background: #3FE0FF !important;
  color: #06121F !important;
}
.qr-home-card {
  background: linear-gradient(160deg, rgba(12,30,60,.55), rgba(8,16,40,.55)) !important;
  border: 1px solid rgba(63,224,255,.28) !important;
}
.qr-home-title { color: #EAF2FF !important; }
.qr-home-sub { color: #B6C6E0 !important; }
.qr-home-tip { color: #8FA3C7 !important; }
.qr-home-refresh {
  background: rgba(63,224,255,.10) !important;
  color: #bfe6f5 !important;
  border: 1px solid rgba(63,224,255,.30) !important;
}
.qr-home-wrap, .scan-qr-wrap {
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 2px rgba(63,224,255,.35) !important;
}

/* ===================================================
   首页 · 上传区（覆盖 style.css 硬编码白底/红色/绿色 → 暗夜星河）
   对应 style.css: .upload-card(452) / ::before(464) / .upload-pulse(506)
   / .upload-title(512) / .upload-hint(516) / .btn-camera(532) / .btn-gallery(539)
   =================================================== */
.upload-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.065) 0%, rgba(124,92,255,0.06) 100%) !important;
  border: 1.5px solid rgba(120,180,255,0.28) !important;
  box-shadow: 0 0 0 1px rgba(63,224,255,0.10), 0 22px 58px -18px rgba(20,80,200,0.60) !important;
}
.upload-card::before {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(63,224,255,0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(124,92,255,0.15) 0%, transparent 55%) !important;
}
.upload-pulse {
  background: radial-gradient(circle, rgba(63,224,255,0.14) 0%, transparent 70%) !important;
}
.upload-title { color: #EAF2FF !important; }
.upload-hint  { color: var(--text-dim) !important; }
.upload-auto-compress {
  color: #9BE8FF !important;
  background: rgba(63,224,255,0.10) !important;
  border: 1px solid rgba(63,224,255,0.22) !important;
}
.btn-camera {
  background: linear-gradient(135deg, #3FE0FF, #7C5CFF) !important;
  color: #06121F !important;
  box-shadow: 0 6px 22px rgba(63,224,255,0.38) !important;
}
.btn-camera:active { box-shadow: 0 2px 10px rgba(63,224,255,0.28) !important; }
.btn-gallery {
  background: rgba(120,180,255,0.10) !important;
  border: 1px solid rgba(120,180,255,0.30) !important;
  color: #CFE6FF !important;
}
.btn-gallery:active { background: rgba(120,180,255,0.18) !important; }
