/* roi-theme.css — 「AI 工作流效率诊断 & ROI 测算器」嵌入页莫兰迪风格层
 * 由 sync-embed.mjs 注入到生成的 roi.html 中。
 * 这是【唯一】允许修改嵌入页视觉的地方；roi.html 由原型自动生成，禁止手改。
 * 原工具为深色（深蓝底 + 金/青）仪表盘风格；此处重映射为站点莫兰迪：
 *   本功能专属色系 = 灰蓝紫(主) + 陈玫瑰(强调)，与其它功能区分。
 * 浅色 = 莫兰迪亮；[data-theme="dark"] = 同色系暗变体。 */
:root{
  --serif:"Songti SC","STSong",Georgia,"Times New Roman",serif;
  --bg:#eef1f0; --panel:#ffffff; --panel2:#f4f7f6; --line:#dde3e1;
  --txt:#222a28; --muted:#8a938f;
  --gold:#8790A8; --gold-d:#6E7891; --cyan:#B08A92;
  --green:#5c8a6b; --red:#b9605a; --blue:#7E8CA8;
  --warn-bg:#f6efdf; --warn-bd:#e6d9bd; --warn-tx:#8a6d3b;
  --verdict-bg:#edf2ee; --verdict-bd:#cfe0d3; --verdict-tx:#3f5c48;
}
[data-theme="dark"]{
  --bg:#1b2120; --panel:#232a28; --panel2:#1f2624; --line:#333c39;
  --txt:#e7ecea; --muted:#8a938f;
  --gold:#9CA6BC; --gold-d:#B6BFD2; --cyan:#C8A6AE;
  --green:#7fae8f; --red:#d28b84; --blue:#9CA6BC;
  --warn-bg:#33301f; --warn-bd:#4a4530; --warn-tx:#d8bd7e;
  --verdict-bg:#202a24; --verdict-bd:#33463b; --verdict-tx:#bcd6c4;
}

/* ---- 基础底色 / 字体 ---- */
body{background:var(--bg);color:var(--txt)}
header h1,.card h2{font-family:var(--serif);letter-spacing:.3px}
.sub,.tip,.who,.field label,.metric .l,.cta .lead{color:var(--muted)}
a{color:var(--gold-d)}

/* ---- 卡片 / 表单控件（去掉硬编码深色） ---- */
.card{background:var(--panel);border:1px solid var(--line)}
.task-row input,.task-row select,.field input{background:var(--panel2);border-color:var(--line);color:var(--txt)}
.task-row .del{color:var(--red)}
.preset{background:var(--panel2);border-color:var(--line);color:var(--txt)}
.preset:hover{border-color:var(--gold);color:var(--gold-d)}
.add{background:var(--panel2);border:1px dashed var(--line);color:var(--gold-d)}
.add:hover{border-color:var(--gold)}
.metric{background:var(--panel2);border:1px solid var(--line)}
.verdict{background:var(--verdict-bg);border:1px solid var(--verdict-bd);color:var(--verdict-tx)}
.verdict b{color:var(--green)}
.bar{background:var(--line)}
button.act{background:linear-gradient(180deg,var(--gold),var(--gold-d));color:#fff}
button.ghost{background:var(--panel2);border-color:var(--line);color:var(--txt)}
.warn{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-tx)}
footer{color:var(--muted);border-top:1px solid var(--line)}

/* ---- CTA：留资 + 二维码（原为米黄亮块，改为站点面板风格） ---- */
.cta{background:var(--panel);border:1px solid var(--line)}
.cta h3{color:var(--gold-d);font-family:var(--serif)}
.cta-form label{color:var(--muted)}
.cta-form label b{color:var(--gold-d)}
.cta-form input,.cta-form select,.cta-form textarea{background:var(--panel2);border:1px solid var(--line);color:var(--txt)}
.cta-submit{background:var(--gold);color:#fff}
.cta-submit:hover{background:var(--gold-d)}
.cta-side{background:var(--panel2);border:1px dashed var(--line)}
.cta-side .scan{color:var(--gold-d)}
.cta-side .tip2{color:var(--muted)}
.cta-side .wxid{background:var(--panel);color:var(--muted)}
.cta-done .ok{color:var(--green)}
.cta-done .msg{color:var(--muted)}
.cta-done .qr-big{border:4px solid var(--line);background:#fff}
.cta-foot{color:var(--muted)}
.cta-flash{background:var(--verdict-bg);color:var(--green);border:1px solid var(--verdict-bd)}
.cta-flash.info{background:var(--panel2);color:var(--gold-d);border-color:var(--line)}
.cta-flash.warn{background:var(--warn-bg);color:var(--warn-tx);border-color:var(--warn-bd)}