<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --primary: #1E3A5F;
  --primary-light: #2D5F8A;
  --accent: #D4A84B;
  --accent-light: #F5E6C8;
  --bg: #F7F8FA;
  --card: #FFFFFF;
  --text: #1F2937;
  --text-secondary: #6B7280;
  --border: #E5E7EB;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --red: #DC2626;
  --red-light: #FEF2F2;
}

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

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Inter", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---- Header ---- */
.header {
  background: linear-gradient(135deg, var(--primary) 0%, #0F2540 100%);
  color: #fff;
  padding: 48px 0 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.header::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 70%, rgba(212,168,75,0.08) 0%, transparent 50%);
}
.header-inner {
  max-width: 900px; margin: 0 auto;
  padding: 0 40px;
  position: relative; z-index: 1;
}
.header .tag {
  display: inline-block;
  padding: 4px 16px;
  border: 1px solid var(--accent);
  border-radius: 20px;
  font-size: 12px; letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.header h1 {
  font-size: 30px; font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.header .subtitle {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  font-weight: 400;
}

/* ---- Container ---- */
.container {
  max-width: 960px;
  margin: -24px auto 40px;
  padding: 0 20px;
  position: relative; z-index: 2;
}

/* ---- Meta Card ---- */
.meta-card {
  background: var(--card);
  border-radius: 12px;
  padding: 28px 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.meta-item { }
.meta-item .m-label {
  font-size: 11px; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.meta-item .m-value {
  font-size: 14px; font-weight: 600;
  color: var(--text);
}

/* ---- Section ---- */
.section {
  background: var(--card);
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.section-header {
  display: flex; align-items: center;
  gap: 12px; margin-bottom: 20px;
}
.section-num {
  width: 36px; height: 36px;
  background: var(--primary);
  color: #fff; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  flex-shrink: 0;
}
.section-title {
  font-size: 18px; font-weight: 700;
  color: var(--primary);
}

/* ---- Table ---- */
.table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}
table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
thead { }
thead th {
  background: var(--primary);
  color: #fff; font-weight: 600;
  padding: 12px 14px; text-align: left;
  font-size: 12px; letter-spacing: 0.3px;
  white-space: nowrap;
}
thead th:first-child { border-radius: 8px 0 0 0; }
thead th:last-child { border-radius: 0 8px 0 0; }
tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #F9FAFB; }
tbody tr:last-child td:first-child { border-radius: 0 0 0 8px; }
tbody tr:last-child td:last-child { border-radius: 0 0 8px 0; }
td.center { text-align: center; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.strong { font-weight: 700; color: var(--primary); }
td.name small { color: var(--text-secondary); font-size: 11px; }
td.discount { color: var(--red); font-weight: 500; }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px;
}

/* ---- Category Cards ---- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.cat-card {
  background: var(--bg);
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
  border: 1px solid var(--border);
  transition: transform 0.15s;
}
.cat-card:hover { transform: translateY(-2px); }
.cat-card .cat-icon { font-size: 22px; margin-bottom: 6px; }
.cat-card .cat-name { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.cat-card .cat-amount { font-size: 16px; font-weight: 700; color: var(--primary); }
.cat-card .cat-pct { font-size: 11px; color: var(--text-secondary); }

/* ---- Grand Total ---- */
.grand-section {
  background: linear-gradient(135deg, var(--primary), #0F2540);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  box-shadow: 0 4px 20px rgba(30,58,95,0.25);
}
.grand-left { }
.grand-left .g-label { font-size: 13px; opacity: 0.7; margin-bottom: 2px; }
.grand-left .g-amount { font-size: 36px; font-weight: 800; letter-spacing: -1px; }
.grand-left .g-cn { font-size: 14px; opacity: 0.8; margin-top: 4px; }
.grand-right { text-align: right; }
.grand-right .g-item {
  margin-bottom: 8px;
  font-size: 13px;
}
.grand-right .g-item span:first-child { opacity: 0.7; }
.grand-right .g-item span:last-child { font-weight: 600; margin-left: 8px; }

/* ---- Info Grid ---- */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.info-item {
  padding: 12px 16px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.info-item .i-label {
  font-size: 11px; color: var(--text-secondary);
  margin-bottom: 2px;
  letter-spacing: 0.3px;
}
.info-item .i-value {
  font-size: 14px; font-weight: 500;
}

/* ---- Alert ---- */
.alert {
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
  display: flex; align-items: flex-start; gap: 10px;
}
.alert-warn {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}
.alert-info {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
}
.alert-icon { font-size: 16px; flex-shrink: 0; }

/* ---- Footer ---- */
.footer {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary);
  font-size: 12px;
}
.footer .divider {
  width: 40px; height: 2px;
  background: var(--accent);
  margin: 0 auto 12px;
}

/* ---- Print ---- */
@media print {
  body { background: #fff; }
  .header { padding: 32px 0 28px; }
  .container { margin-top: 0; }
  .section, .meta-card { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
  .grand-section { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 768px) {
  .meta-card { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .grand-section { flex-direction: column; text-align: center; gap: 16px; }
  .grand-right { text-align: center; }
  .info-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>

<!-- ====== HEADER ====== -->
<header class="header">
  <div class="header-inner">
    <div class="tag">PROJECT QUOTATION</div>
    <h1>{{header_title}}</h1>
    <div class="subtitle">{{header_subtitle}}</div>
  </div>
</header>

<div class="container">

<!-- ====== META ====== -->
<div class="meta-card">
  <div class="meta-item"><div class="m-label">报价方</div><div class="m-value">{{company_name}}</div></div>
  <div class="meta-item"><div class="m-label">客户名称</div><div class="m-value">{{client_name}}</div></div>
  <div class="meta-item"><div class="m-label">报价单号</div><div class="m-value">{{quote_no}}</div></div>
  <div class="meta-item"><div class="m-label">报价日期</div><div class="m-value">{{quote_date}}</div></div>
  <div class="meta-item"><div class="m-label">报价人</div><div class="m-value">{{quoter_name}}</div></div>
  <div class="meta-item"><div class="m-label">有效期至</div><div class="m-value">{{valid_until}}</div></div>
  <div class="meta-item"><div class="m-label">联系电话</div><div class="m-value">{{quoter_phone}}</div></div>
  <div class="meta-item"><div class="m-label">邮箱</div><div class="m-value" style="font-size:12px">{{quoter_email}}</div></div>
</div>

<!-- ====== 一、需求摘要 ====== -->
<div class="section">
  <div class="section-header">
    <div class="section-num">01</div>
    <div class="section-title">客户需求摘要</div>
  </div>
  <p style="font-size:14px;color:var(--text-secondary);line-height:1.9">{{requirement_summary}}</p>
</div>

<!-- ====== 二、方案概述 ====== -->
<div class="section">
  <div class="section-header">
    <div class="section-num">02</div>
    <div class="section-title">推荐方案概述</div>
  </div>
  <p style="font-size:14px;color:var(--text-secondary);line-height:1.9">{{solution_overview}}</p>
</div>

<!-- ====== 三、产品明细 ====== -->
<div class="section">
  <div class="section-header">
    <div class="section-num">03</div>
    <div class="section-title">产品与服务明细</div>
  </div>
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th style="width:50px">序号</th>
          <th style="width:72px">类别</th>
          <th>名称 / 型号</th>
          <th style="width:56px">数量</th>
          <th style="width:56px">单位</th>
          <th style="width:96px">单价 (元)</th>
          <th style="width:80px">折扣</th>
          <th style="width:110px">小计 (元)</th>
        </tr>
      </thead>
      <tbody>
        {{product_rows}}
      </tbody>
    </table>
  </div>
</div>

<!-- ====== 四、金额汇总 ====== -->
<div class="section">
  <div class="section-header">
    <div class="section-num">04</div>
    <div class="section-title">金额汇总</div>
  </div>

  <div class="cat-grid">
    {{category_cards}}
  </div>

  <div class="table-wrap" style="max-width:480px">
    <table>
      <tbody>
        <tr><td style="color:var(--text-secondary)">折扣后合计</td><td class="num strong">¥{{discounted_total_fmt}}</td></tr>
        <tr><td style="color:var(--text-secondary)">税费 · 增值税专票 13%</td><td class="num">¥{{tax_amount_fmt}}</td></tr>
        <tr><td style="color:var(--text-secondary)">运费</td><td class="num">{{shipping_fee_desc}}</td></tr>
      </tbody>
    </table>
  </div>
</div>

<!-- ====== GRAND TOTAL ====== -->
<div class="grand-section">
  <div class="grand-left">
    <div class="g-label">含税总价 · 增值税专票</div>
    <div class="g-amount">¥{{grand_total_fmt}}</div>
    <div class="g-cn">{{grand_total_cn}}</div>
  </div>
  <div class="grand-right">
    {{grand_breakdown}}
  </div>
</div>

<!-- ====== 五、商务条款 ====== -->
<div class="section">
  <div class="section-header">
    <div class="section-num">05</div>
    <div class="section-title">商务条款</div>
  </div>
  <div class="info-grid">
    <div class="info-item"><div class="i-label">供货周期</div><div class="i-value">{{delivery_date}}</div></div>
    <div class="info-item"><div class="i-label">付款条件</div><div class="i-value">{{payment_terms}}</div></div>
    <div class="info-item" style="grid-column:1/-1"><div class="i-label">质保条款</div><div class="i-value">{{warranty}}</div></div>
  </div>
</div>

<!-- ====== 六、服务与交付 ====== -->
<div class="section">
  <div class="section-header">
    <div class="section-num">06</div>
    <div class="section-title">服务范围与交付边界</div>
  </div>
  <div class="info-grid">
    <div class="info-item"><div class="i-label">✅ 服务范围</div><div class="i-value" style="font-size:13px">{{service_scope}}</div></div>
    <div class="info-item"><div class="i-label">🚫 不含项</div><div class="i-value" style="font-size:13px">{{delivery_boundary}}</div></div>
  </div>
</div>

<!-- ====== 七、备注 ====== -->
<div class="section">
  <div class="section-header">
    <div class="section-num">07</div>
    <div class="section-title">备注</div>
  </div>
  <p style="font-size:14px;color:var(--text-secondary);line-height:1.9;white-space:pre-line">{{remarks}}</p>
</div>

<!-- ====== FOOTER ====== -->
<div class="footer">
  <div class="divider"></div>
  <p>本报价方案仅供客户内部评估使用，未经许可不得向第三方披露</p>
</div>

</div>

</body>
</html>
