wooo/ewoooc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

優化暖色系統與雲端匯入頁
All checks were successful
CD Pipeline / deploy (push) Successful in 1m1s
Details

Browse Source
This commit is contained in:
OoO
2026-05-06 21:26:15 +08:00
parent 7bc81e966b
commit 464cb6b037
5 changed files with 255 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
routes/auto_import_routes.py
View File

@@ -18,7 +18,7 @@ logger = logging.getLogger(__name__)
@auto_import_bp.route('/auto_import')
def auto_import_index():
"""自動匯入主頁"""
return render_template('auto_import_index.html')
return render_template('auto_import_index.html', active_page='auto_import')
@auto_import_bp.route('/api/import_jobs', methods=['GET'])

331
templates/auto_import_index.html
View File

@@ -1,267 +1,241 @@
<!DOCTYPE html>
<html lang="zh-TW">
{% extends 'ewoooc_base.html' %}
{% block title %}當日業績報表匯入 - EwoooC{% endblock %}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>當日業績報表匯入 - WOOO TECH</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
{% block extra_css %}
<style>
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
min-height: 100vh;
padding-top: 70px;
.auto-import-page {
display: flex;
flex-direction: column;
gap: 18px;
}
.navbar-dark.bg-primary {
background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%) !important;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
.auto-import-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
padding: 22px;
border: 1px solid var(--momo-border-strong);
border-radius: 8px;
background:
radial-gradient(circle at 16px 16px, rgba(42, 37, 32, 0.11) 1px, transparent 1px),
linear-gradient(135deg, rgba(247, 239, 227, 0.98), rgba(237, 214, 204, 0.5) 48%, rgba(198, 154, 74, 0.12));
background-size: 18px 18px, auto;
box-shadow: var(--momo-shadow-soft);
}
.navbar-dark .navbar-brand {
color: #ffffff !important;
font-weight: 600;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 500;
transition: all 0.3s;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
}
.navbar-dark .navbar-nav .nav-link.active {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.15);
border-radius: 6px;
font-weight: 600;
}
.navbar-dark .navbar-text {
color: rgba(255, 255, 255, 0.8) !important;
}
.navbar {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
}
.card {
border: none;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
margin-bottom: 1.5rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.card-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 16px 16px 0 0 !important;
padding: 1.2rem 1.5rem;
}
.card-header h5 {
.auto-import-hero h2 {
margin: 0;
font-weight: 600;
font-size: clamp(1.45rem, 2vw, 2rem);
font-weight: 850;
color: var(--momo-text-strong);
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.auto-import-hero p {
margin: 0;
color: var(--momo-text-muted);
font-weight: 650;
}
.auto-import-page .card {
border: 1px solid var(--momo-border-light);
border-radius: 8px;
box-shadow: var(--momo-shadow-soft);
margin-bottom: 1.5rem;
background: rgba(255, 253, 248, 0.96);
}
.auto-import-page .card-header {
background: linear-gradient(135deg, var(--momo-warm-terracotta), var(--momo-warm-copper));
color: var(--momo-page-inverse);
border: none;
border-radius: 10px;
padding: 0.6rem 1.5rem;
font-weight: 600;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
border-radius: 8px 8px 0 0 !important;
padding: 1rem 1.25rem;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
background: linear-gradient(135deg, #5568d3 0%, #6a3e8b 100%);
.auto-import-page .card:nth-of-type(2) .card-header {
background: linear-gradient(135deg, var(--momo-warm-apricot), var(--momo-warm-caramel));
}
.btn-secondary {
border-radius: 10px;
padding: 0.6rem 1.5rem;
font-weight: 600;
transition: all 0.3s ease;
.auto-import-page .card:nth-of-type(3) .card-header {
background: linear-gradient(135deg, var(--momo-warm-copper), var(--momo-warm-olive));
}
.btn-success {
background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
.auto-import-page .card-header h5 {
margin: 0;
font-weight: 850;
}
.auto-import-page .btn-primary {
background: linear-gradient(135deg, var(--momo-warm-terracotta), var(--momo-warm-copper));
border: none;
border-radius: 10px;
border-radius: 8px;
padding: 0.6rem 1.5rem;
font-weight: 600;
box-shadow: 0 4px 12px rgba(81, 207, 102, 0.3);
font-weight: 750;
box-shadow: 0 4px 12px rgba(184, 111, 82, 0.18);
transition: all 0.3s ease;
}
.btn-success:hover {
.auto-import-page .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(81, 207, 102, 0.4);
background: linear-gradient(135deg, #40c057 0%, #2f9e44 100%);
box-shadow: 0 6px 16px rgba(184, 111, 82, 0.24);
background: linear-gradient(135deg, var(--momo-warm-copper), var(--momo-warm-terracotta));
}
.table {
background: white;
.auto-import-page .btn-secondary {
border-radius: 8px;
padding: 0.6rem 1.5rem;
font-weight: 750;
transition: all 0.3s ease;
background: rgba(255, 244, 232, 0.78);
border-color: var(--momo-border-light);
color: var(--momo-text-strong);
}
.auto-import-page .btn-success {
background: linear-gradient(135deg, var(--momo-warm-olive), var(--momo-warm-amber));
border: none;
border-radius: 8px;
padding: 0.6rem 1.5rem;
font-weight: 750;
box-shadow: 0 4px 12px rgba(143, 137, 104, 0.18);
transition: all 0.3s ease;
}
.auto-import-page .btn-success:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(143, 137, 104, 0.24);
background: linear-gradient(135deg, var(--momo-warm-amber), var(--momo-warm-olive));
}
.auto-import-page .table {
background: var(--momo-bg-elevated);
width: 100%;
}
.table thead th {
background: #f8f9fa;
border-bottom: 2px solid #dee2e6;
color: #495057;
font-weight: 600;
.auto-import-page .table thead th {
background: linear-gradient(90deg, var(--momo-warm-copper), var(--momo-warm-terracotta));
border-bottom: 0;
color: var(--momo-page-inverse);
font-weight: 800;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.5px;
white-space: nowrap;
}
.table tbody td {
.auto-import-page .table tbody td {
vertical-align: middle;
white-space: nowrap;
}
.table-responsive {
.auto-import-page .table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* 錯誤訊息可換行 */
.table tbody td.error-cell {
.auto-import-page .table tbody td.error-cell {
white-space: normal;
max-width: 250px;
word-break: break-word;
}
.badge {
.auto-import-page .badge {
padding: 0.4rem 0.8rem;
font-weight: 500;
border-radius: 8px;
}
.badge-pending {
background: #fff3cd;
color: #856404;
.auto-import-page .badge-pending {
background: var(--momo-warm-honey-soft);
color: #6f4c08;
}
.badge-downloading {
background: #d1ecf1;
color: #0c5460;
.auto-import-page .badge-downloading {
background: var(--momo-warm-peach-soft);
color: #5f4035;
}
.badge-importing {
background: #cce5ff;
color: #004085;
.auto-import-page .badge-importing {
background: var(--momo-warm-mahogany-soft);
color: #5f4035;
}
.badge-completed {
background: #d4edda;
color: #155724;
.auto-import-page .badge-completed {
background: var(--momo-warm-earth-soft);
color: #4a512d;
}
.badge-failed {
background: #f8d7da;
color: #721c24;
.auto-import-page .badge-failed {
background: var(--momo-warm-rust-soft);
color: #823c43;
}
.progress {
.auto-import-page .progress {
height: 8px;
border-radius: 4px;
background: #e9ecef;
background: rgba(42, 37, 32, 0.08);
}
.progress-bar {
background: linear-gradient(90deg, #667eea, #764ba2);
.auto-import-page .progress-bar {
background: linear-gradient(90deg, var(--momo-warm-terracotta), var(--momo-warm-apricot), var(--momo-warm-amber));
}
.form-label {
font-weight: 600;
color: #495057;
.auto-import-page .form-label {
font-weight: 750;
color: var(--momo-text-primary);
margin-bottom: 0.5rem;
}
.form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
.auto-import-page .form-control:focus {
border-color: var(--momo-warm-terracotta);
box-shadow: 0 0 0 0.2rem rgba(184, 111, 82, 0.15);
}
.empty-state {
.auto-import-page .alert {
border-radius: 8px;
}
.auto-import-page .alert-info {
color: #5f4035;
background:
linear-gradient(135deg, rgba(237, 214, 204, 0.58), rgba(247, 239, 227, 0.88));
border-color: rgba(184, 111, 82, 0.22);
}
.auto-import-page .alert-light {
color: var(--momo-text-secondary);
background: rgba(255, 248, 239, 0.82);
border-color: rgba(216, 193, 170, 0.72) !important;
}
.auto-import-page .empty-state {
text-align: center;
padding: 3rem 1rem;
color: #6c757d;
color: var(--momo-text-muted);
}
.empty-state i {
.auto-import-page .empty-state i {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.3;
}
/* Custom Dark Gray Navbar */
.navbar.bg-custom-dark {
background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar.bg-custom-dark .navbar-brand {
color: #ffffff;
font-weight: 600;
}
.navbar.bg-custom-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
}
.navbar.bg-custom-dark .navbar-nav .nav-link:hover {
color: #ffffff;
}
.navbar.bg-custom-dark .navbar-nav .nav-link.active {
color: #ffffff;
font-weight: 600;
}
.navbar.bg-custom-dark .navbar-text {
color: rgba(255, 255, 255, 0.75);
}
</style>
</head>
{% endblock %}
<body class="bg-body-tertiary">
<!-- 導航列 -->
{% include 'components/_navbar.html' %}
<div class="container">
{% block ewooo_content %}
<div class="auto-import-page">
<!-- 頁面標題 -->
<div class="row mb-4">
<div class="col">
<section class="auto-import-hero">
<div>
<h2><i class="fas fa-cloud-download-alt me-2"></i>當日業績報表匯入</h2>
<p class="text-muted">
<p>
<i class="fas fa-info-circle me-1"></i>
支援兩種匯入方式：<strong>Google Drive 自動匯入</strong>（每 30 分鐘檢查）或 <strong>手動上傳</strong>
</p>
</div>
</div>
</section>
<!-- 配置區 -->
<div class="card">
@@ -381,8 +355,9 @@
</div>
</div>
</div>
{% endblock %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
{% block extra_js %}
<script>
// 載入配置
async function loadConfig() {
@@ -733,6 +708,4 @@
}
}
</script>
</body>
</html>
{% endblock %}

30
templates/components/_ewoooc_shell.html
View File

@@ -19,8 +19,8 @@
<style>
.momo-sidebar {
background:
radial-gradient(circle at 28px 30px, rgba(201, 100, 66, 0.06), transparent 36px),
linear-gradient(180deg, #f1ecdf 0%, #e9e3d5 100%) !important;
radial-gradient(circle at 28px 30px, rgba(184, 111, 82, 0.05), transparent 36px),
linear-gradient(180deg, #f4ecdf 0%, #e8dfd0 100%) !important;
border-right: 1px solid rgba(42, 37, 32, 0.14);
box-shadow: inset -1px 0 0 rgba(255, 248, 238, 0.72), 16px 0 32px rgba(61, 38, 27, 0.08);
}
@@ -34,25 +34,15 @@
}
.momo-brand-name {
color: var(--momo-text-primary, #2a2520) !important;
font-family: var(--momo-font-family-mono, "SF Mono", Menlo, Consolas, monospace) !important;
font-family: "JetBrains Mono", "Inter", var(--momo-font-family-base, system-ui), sans-serif !important;
font-size: 18px;
font-weight: 950;
font-weight: 850;
line-height: 1;
letter-spacing: 0 !important;
}
@supports (-webkit-background-clip: text) {
.momo-brand-name {
background-image: radial-gradient(circle, var(--momo-text-primary, #2a2520) 0 1.05px, transparent 1.15px);
background-size: 3px 3px;
background-position: 0 0;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
image-rendering: pixelated;
}
text-rendering: geometricPrecision;
}
.momo-logo-mark {
background: var(--momo-page-accent-dark, var(--momo-ink, #2a2520));
background: linear-gradient(135deg, var(--momo-warm-copper, #7f5a49), var(--momo-warm-caramel, #b98a5f));
color: var(--momo-bg-elevated, #fdfaf3);
box-shadow: none;
}
@@ -73,7 +63,7 @@
.momo-nav-link.is-active {
background: linear-gradient(135deg, var(--momo-page-accent, #d06d49), var(--momo-page-accent-dark, #c45f3f)) !important;
color: var(--momo-page-inverse, #fff8ee) !important;
box-shadow: 0 10px 22px rgba(201, 100, 66, 0.2);
box-shadow: 0 10px 22px rgba(127, 90, 73, 0.18);
}
.momo-nav-link .momo-nav-code {
color: var(--momo-text-tertiary, #9b9184) !important;
@@ -111,9 +101,9 @@
.momo-nav-subtree {
margin: 0.42rem 0 0.72rem 1.05rem;
padding: 0.42rem 0 0.42rem 0.78rem;
border-left: 1px solid color-mix(in srgb, var(--momo-page-accent, #c96442) 34%, transparent);
border-left: 1px solid color-mix(in srgb, var(--momo-page-accent, #b86f52) 34%, transparent);
background:
radial-gradient(circle at 6px 8px, rgba(201, 100, 66, 0.12) 1px, transparent 1.4px),
radial-gradient(circle at 6px 8px, rgba(184, 111, 82, 0.1) 1px, transparent 1.4px),
linear-gradient(180deg, rgba(255, 248, 238, 0.48), rgba(255, 252, 246, 0.18));
background-size: 10px 10px, auto;
border-radius: 0 0.95rem 0.95rem 0;
@@ -155,7 +145,7 @@
font-weight: 850;
}
.momo-nav-sublink.is-active .momo-nav-num {
color: var(--momo-page-accent-dark, rgba(143, 69, 48, 0.82));
color: var(--momo-page-accent-dark, rgba(127, 90, 73, 0.82));
}
.momo-nav-sublink .momo-nav-code {
opacity: 0.68;

54
templates/ewoooc_base.html
View File

@@ -30,9 +30,12 @@
}
.momo-app[data-active-page="edm"],
.momo-app[data-active-page="campaigns"] {
--momo-page-accent: var(--momo-warm-honey);
--momo-page-accent-dark: #7a5510;
--momo-page-accent: var(--momo-warm-amber);
--momo-page-accent-dark: var(--momo-warm-copper);
--momo-page-accent-soft: var(--momo-warm-honey-soft);
--momo-page-accent-2: var(--momo-warm-apricot);
--momo-page-accent-3: var(--momo-warm-terracotta);
--momo-page-accent-4: var(--momo-warm-olive);
}
.momo-app[data-active-page="sales"],
.momo-app[data-active-page="daily_sales"],
@@ -56,9 +59,12 @@
}
.momo-app[data-active-page="auto_import"],
.momo-app[data-active-page="market_intel"] {
--momo-page-accent: var(--momo-warm-mahogany);
--momo-page-accent-dark: #7f3f32;
--momo-page-accent: var(--momo-warm-terracotta);
--momo-page-accent-dark: var(--momo-warm-copper);
--momo-page-accent-soft: var(--momo-warm-mahogany-soft);
--momo-page-accent-2: var(--momo-warm-amber);
--momo-page-accent-3: var(--momo-warm-apricot);
--momo-page-accent-4: var(--momo-warm-olive);
}
.momo-app[data-active-page^="obs_"],
.momo-app[data-active-page="settings"],
@@ -107,6 +113,20 @@
border-color: var(--momo-page-accent-dark) !important;
}
.momo-app .dashboard-kpi.is-accent,
.momo-app .kpi-card.text-white:nth-child(2n),
.momo-app .card:nth-of-type(2) .card-header.bg-gradient,
.momo-app .auto-import-page .btn-success {
background: linear-gradient(135deg, var(--momo-page-accent-2), var(--momo-page-accent-5, var(--momo-warm-olive))) !important;
border-color: var(--momo-page-accent-5, var(--momo-warm-olive)) !important;
}
.momo-app .campaign-tab.is-active,
.momo-app .campaign-slot-tab.active,
.momo-app .auto-import-page .progress-bar {
background: linear-gradient(90deg, var(--momo-page-accent), var(--momo-page-accent-2), var(--momo-page-accent-3)) !important;
}
.momo-app .page-header h1,
.momo-app .page-header h2,
.momo-app .page-header h3,
@@ -190,6 +210,32 @@
background: var(--momo-page-accent);
box-shadow: 0 0 8px var(--momo-page-accent);
}
.momo-app .card,
.momo-app .dashboard-panel,
.momo-app .campaign-panel,
.momo-app .stockout-panel {
background: rgba(255, 252, 247, 0.94);
border-color: color-mix(in srgb, var(--momo-warm-latte) 55%, transparent) !important;
}
.momo-app .badge.bg-warning,
.momo-app .text-bg-warning {
color: #5f4524 !important;
background-color: var(--momo-warm-honey-soft) !important;
}
.momo-app .badge.bg-success,
.momo-app .text-bg-success {
color: #4d5135 !important;
background-color: var(--momo-warm-earth-soft) !important;
}
.momo-app .badge.bg-danger,
.momo-app .text-bg-danger {
color: #704247 !important;
background-color: var(--momo-warm-rust-soft) !important;
}
</style>
</head>
<body class="momo-v2-body {% if active_page|default('') in [

67
web/static/css/ewoooc-tokens.css
View File

@@ -1,7 +1,7 @@
/**
* MOMO Pro × Nothing × Claude 設計 Token v2.0
* — Nothing 的點陣骨架（黑白、像素、工業）
* — Claude 的暖米基底（#f0eee9、EwoooC 珊瑚橘 #d96f52）
* — Cream / warm wood / muted rose / apricot / terra cotta palette
*/
:root {
@@ -22,40 +22,57 @@
--momo-line-soft: rgba(42,37,32,0.18);
--momo-line-faint: rgba(42,37,32,0.10);
/* EwoooC 珊瑚橘（accent） */
--momo-accent: #d96f52; /* 主 accent */
--momo-accent-50: #fff4ef;
--momo-accent-100: #fde4d8;
--momo-accent-200: #f8c6b3;
--momo-accent-500: #d96f52;
--momo-accent-600: #c65f45;
--momo-accent-700: #9f4f3e;
--momo-accent-soft: rgba(217,111,82,0.13);
/* EwoooC refined warm accent */
--momo-accent: #b86f52; /* muted terra cotta */
--momo-accent-50: #fbf4ee;
--momo-accent-100: #f2dfd2;
--momo-accent-200: #dfb89f;
--momo-accent-500: #b86f52;
--momo-accent-600: #9f5f49;
--momo-accent-700: #7a4d3f;
--momo-accent-soft: rgba(184,111,82,0.12);
--momo-accent-strong: var(--momo-accent-700);
/* ===== EwoooC 暖色家族（全站運用） =====
* 全部留在暖色域（珊瑚/蜜桃/琥珀/玫瑰銅/暖橄欖），避免髒棕與冷藍紫
* 全部留在暖色域（terracotta / apricot / amber / dusty rose / olive bronze），避免髒棕與冷藍紫
* 用法：活動頁 / 標籤色 / 圖表分類色 / 各區段視覺主軸
*/
--momo-warm-caramel: #d96f52; /* 珊瑚橘 — 主 accent / 主要動作 */
--momo-warm-peach: #f29f7e; /* 蜜桃 — hover / 淡底層 */
--momo-warm-honey: #d6a12f; /* 琥珀金 — 提醒 / 次重點 */
--momo-warm-rust: #c85f6a; /* 玫瑰銅 — 下降 / 風險 */
--momo-warm-mahogany: #a95846; /* 暖陶紅 — 強調 / active */
--momo-warm-earth: #9a8f59; /* 暖橄欖 — 中性成功 / 輔助 */
--momo-warm-cream: #f7efe3; /* 奶油米白 — 大面積背景 */
--momo-warm-latte: #d8c1aa; /* 奶茶木色 — 邊界 / 分隔 */
--momo-warm-caramel: #b98a5f; /* 低飽和焦糖 — 次重點 */
--momo-warm-terracotta: #b86f52; /* 磚紅土陶 — CTA / active */
--momo-warm-apricot: #e7b98f; /* 杏色 — hover / 淡暖層次 */
--momo-warm-amber: #c69a4a; /* 柔琥珀 — 提醒 / 數字亮點 */
--momo-warm-rose: #b98286; /* 乾燥玫瑰 — 風險 / 區塊底 */
--momo-warm-copper: #7f5a49; /* 溫潤木棕 — 深色 active / 邊界 */
--momo-warm-olive: #8f8968; /* 暖橄欖 — 中性成功 / 輔助 */
--momo-warm-greige: #b8aea2; /* 暖灰 — 次文字 / disabled */
--momo-warm-blush: #edd6cc; /* 霧粉 — 柔和分區底 */
/* 舊命名相容 */
--momo-warm-peach: var(--momo-warm-apricot);
--momo-warm-honey: var(--momo-warm-amber);
--momo-warm-rust: var(--momo-warm-rose);
--momo-warm-mahogany: var(--momo-warm-copper);
--momo-warm-earth: var(--momo-warm-olive);
/* 對應淡色（背景 / 軟標籤用） */
--momo-warm-caramel-soft: rgba(217,111,82,0.13);
--momo-warm-peach-soft: rgba(242,159,126,0.18);
--momo-warm-honey-soft: rgba(214,161,47,0.15);
--momo-warm-rust-soft: rgba(200,95,106,0.14);
--momo-warm-mahogany-soft:rgba(169,88,70,0.13);
--momo-warm-earth-soft: rgba(154,143,89,0.15);
--momo-warm-caramel-soft: rgba(185,138,95,0.14);
--momo-warm-peach-soft: rgba(231,185,143,0.22);
--momo-warm-honey-soft: rgba(198,154,74,0.15);
--momo-warm-rust-soft: rgba(185,130,134,0.14);
--momo-warm-mahogany-soft:rgba(127,90,73,0.12);
--momo-warm-earth-soft: rgba(143,137,104,0.15);
--momo-page-accent-2: var(--momo-warm-apricot);
--momo-page-accent-3: var(--momo-warm-amber);
--momo-page-accent-4: var(--momo-warm-rose);
--momo-page-accent-5: var(--momo-warm-olive);
/* 頁面調性：共用 shell 與反白 UI 以此套用各頁暖色 accent */
--momo-page-accent: var(--momo-warm-caramel);
--momo-page-accent-dark: var(--momo-warm-mahogany);
--momo-page-accent-soft: var(--momo-warm-caramel-soft);
--momo-page-inverse: #fff8ee;
--momo-page-inverse: #fff8ef;
/* ===== 標籤色系統（Tag / Chip / Badge 統一規範） =====
* 規則：
@@ -142,7 +159,7 @@
--momo-primary-600: var(--momo-accent-600);
--momo-primary-700: var(--momo-accent-700);
--momo-primary-800: var(--momo-accent-700);
--momo-primary-900: #7f3f32;
--momo-primary-900: #5f4035;
/* 導航（Nothing 黑） */
--momo-nav-start: #1a1a1a;