From 3d5f3eec9c2826815896d9f8f9fe3df4dd39a054 Mon Sep 17 00:00:00 2001
From: jiameng <jiameng@ushareit.com>
Date: Fri, 11 Sep 2026 18:08:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=94=E7=94=A8roasbloom=E5=93=81=E7=89=8CVI?=
 =?UTF-8?q?:=20=E7=8E=AB=E7=91=B0=E9=85=8D=E8=89=B2+DM=20Sans/Inter/JetBra?=
 =?UTF-8?q?ins=20Mono=E5=AD=97=E4=BD=93+Logo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 64 +++++++++++++++++++++++++++++++++---------------------
 1 file changed, 39 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 42d5a33..0ec5b89 100644
--- a/index.html
+++ b/index.html
@@ -5,48 +5,62 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>DSP Routing Daily 报告</title>
 <style>
-  :root{--bg:#f5f6f8;--card:#fff;--line:#e3e6ea;--head:#1f2937;--sub:#6b7280;--accent:#2563eb;--accent-bg:#eff4ff;}
+  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+  /* roasbloom Brand System v1.0 */
+  :root{
+    --rose:#C4506A;--rose-50:#FDF5F6;--rose-100:#F9E0E5;--rose-200:#F0C2CC;--rose-600:#A83D55;--rose-700:#8C2D43;
+    --ink:#2D1B20;--ink-80:#57484C;--ink-60:#827578;--ink-40:#ADA2A4;--ink-20:#D8D0D2;--ink-10:#EBE7E8;--ink-5:#F5F3F4;
+    --success:#4A9E6B;--warning:#D4914A;--danger:#C4506A;
+    --font-brand:'DM Sans',sans-serif;--font-body:'Inter','PingFang SC','Microsoft YaHei',sans-serif;--font-mono:'JetBrains Mono',monospace;
+    --bg:#F5F3F4;--card:#FFFFFF;--line:#EBE7E8;--head:#4E1222;--sub:#827578;--accent:#C4506A;--accent-bg:#FDF5F6;
+  }
   *{box-sizing:border-box;}
-  body{margin:0;background:var(--bg);color:#1f2937;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;}
+  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:13px;}
   .wrap{max-width:1500px;margin:0 auto;padding:24px 20px 60px;}
-  h1{font-size:20px;margin:0 0 4px;}
-  .meta{color:var(--sub);font-size:12px;margin-bottom:20px;}
-  .card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:22px;box-shadow:0 1px 2px rgba(0,0,0,.03);}
-  .card h2{font-size:15px;margin:0 0 12px;display:flex;align-items:center;gap:8px;}
-  .card h2 .tag{font-size:11px;font-weight:normal;color:var(--sub);background:var(--bg);border:1px solid var(--line);padding:1px 8px;border-radius:20px;}
-  table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;}
-  th,td{border:1px solid var(--line);padding:7px 10px;text-align:right;white-space:nowrap;}
-  th{background:var(--head);color:#fff;font-weight:600;text-align:center;position:sticky;top:0;cursor:default;}
+  h1{font-family:var(--font-brand);font-size:20px;font-weight:600;margin:0 0 4px;color:var(--ink);}
+  .meta{color:var(--ink-60);font-size:12px;margin-bottom:20px;}
+  .logo{font-family:var(--font-brand);font-weight:700;font-size:22px;letter-spacing:-.5px;display:inline-flex;align-items:center;margin-bottom:2px;}
+  .logo .roas{color:var(--rose);} .logo .bloom{color:var(--ink);}
+  .logo .ring{display:inline-block;width:.6em;height:.6em;border:.18em solid var(--rose);border-radius:50%;margin:0 .02em;position:relative;top:.05em;}
+  .card{background:var(--card);border:1px solid var(--ink-10);border-radius:10px;padding:16px 18px;margin-bottom:22px;box-shadow:0 1px 2px rgba(45,27,32,.04);}
+  .card h2{font-family:var(--font-brand);font-size:15px;font-weight:600;margin:0 0 12px;display:flex;align-items:center;gap:8px;color:var(--ink);}
+  .card h2 .tag{font-family:var(--font-body);font-size:11px;font-weight:normal;color:var(--ink-60);background:var(--ink-5);border:1px solid var(--ink-10);padding:1px 8px;border-radius:20px;}
+  table{border-collapse:collapse;width:100%;}
+  th,td{border:1px solid var(--ink-10);padding:7px 10px;text-align:right;white-space:nowrap;}
+  td{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
+  td.txt{font-family:var(--font-body);}
+  th{background:var(--head);color:#fff;font-weight:600;text-align:center;position:sticky;top:0;cursor:default;font-family:var(--font-brand);}
   td:first-child,th:first-child{text-align:center;}
-  .detail-scroll{max-height:620px;overflow:auto;border:1px solid var(--line);border-radius:8px;}
+  .detail-scroll{max-height:620px;overflow:auto;border:1px solid var(--ink-10);border-radius:8px;}
   .detail-scroll table th{top:0;}
-  tbody tr:nth-child(even){background:#fafbfc;}
+  tbody tr:nth-child(even){background:var(--ink-5);}
   tbody tr:hover{background:var(--accent-bg);}
   .txt{text-align:left;}
   .filters{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:14px;}
   .fld{display:flex;flex-direction:column;gap:4px;}
-  .fld label{font-size:11px;color:var(--sub);}
-  .fld input,.fld select{border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:13px;min-width:150px;background:#fff;}
+  .fld label{font-size:11px;color:var(--ink-60);}
+  .fld input,.fld select{border:1px solid var(--ink-20);border-radius:6px;padding:6px 8px;font-size:13px;min-width:150px;background:#fff;font-family:var(--font-body);}
   .fld input[type=date]{min-width:140px;}
-  .btn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:6px;padding:7px 16px;font-size:13px;cursor:pointer;}
-  .btn.ghost{background:#fff;color:var(--accent);}
-  .count-note{color:var(--sub);font-size:12px;margin:6px 2px 0;}
-  .pos{color:#059669;} .neg{color:#dc2626;}
-  .empty{padding:30px;text-align:center;color:var(--sub);}
-  .sum-metric{color:var(--accent);font-weight:600;}
-  .note-list{margin:0 0 14px;padding:10px 14px 10px 28px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:#4b5563;font-size:12px;line-height:1.9;}
-  .note-list b{color:var(--head);}
-  .total-row td{position:sticky;top:33px;background:#eef2f7;font-weight:700;color:var(--head);border-top:2px solid #cbd5e1;z-index:1;}
+  .btn{border:1px solid var(--rose);background:var(--rose);color:#fff;border-radius:6px;padding:7px 16px;font-size:13px;cursor:pointer;font-family:var(--font-brand);font-weight:500;}
+  .btn.ghost{background:#fff;color:var(--rose);}
+  .count-note{color:var(--ink-60);font-size:12px;margin:6px 2px 0;}
+  .pos{color:var(--success);} .neg{color:var(--danger);}
+  .empty{padding:30px;text-align:center;color:var(--ink-60);}
+  .sum-metric{color:var(--rose);font-weight:600;}
+  .note-list{margin:0 0 14px;padding:10px 14px 10px 28px;background:var(--ink-5);border:1px solid var(--ink-10);border-radius:8px;color:var(--ink-80);font-size:12px;line-height:1.9;}
+  .note-list b{color:var(--ink);}
+  .total-row td{position:sticky;top:33px;background:var(--rose-50);font-weight:700;color:var(--ink);border-top:2px solid var(--rose-200);z-index:1;}
   .total-row td.txt{text-align:left;}
   th.sortable,th.fsortable{cursor:pointer;user-select:none;}
-  th.sortable:hover,th.fsortable:hover{background:#374151;}
-  th .arrow{display:inline-block;width:10px;margin-left:3px;font-size:10px;color:#93c5fd;}
+  th.sortable:hover,th.fsortable:hover{background:var(--rose-700);}
+  th .arrow{display:inline-block;width:10px;margin-left:3px;font-size:10px;color:var(--rose-200);}
   th.sort-asc .arrow::after{content:"\25B2";}
   th.sort-desc .arrow::after{content:"\25BC";}
 </style>
 </head>
 <body>
 <div class="wrap">
+  <div class="logo"><span class="roas">roas</span><span class="bloom">bl</span><span class="ring"></span><span class="bloom">m</span></div>
   <h1>DSP Routing Daily 报告</h1>
   <div class="meta" id="meta">加载中…</div>