/* ============================================================
GELATOlab × 貴妃駕到 — Royal Gelato Studio Stylesheet
貴妃風格：深酒紅 + 金色 + 象牙白 + 優雅排版
============================================================ */
/* @import 已移至 index.html 載入，此處不再重複 @import */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }
:root {
/* ── Brand palette (raw 色值；新 code 請優先用 semantic roles) ── */
--burgundy: #7B1528;
--burgundy-lt: #9B2035;
--burgundy-dk: #5F0E1E;
--burgundy-bg: #FDF0F2;
--gold: #C8A055;
--gold-lt: #E8C880;
--gold-dk: #B88F45;
--gold-bg: #FDF8EE;
--ivory: #FAF6F0;
--ivory-dk: #F2EBE0;
/* ── Semantic color roles ────────── */
--color-primary: var(--burgundy);
--color-primary-hover: var(--burgundy-lt);
--color-primary-bg: var(--burgundy-bg);
--color-accent: var(--gold);
--color-accent-bg: var(--gold-bg);
/* ── Surface / text ────────── */
--bg: var(--ivory);
--surface: #FFFDFB;
--surface-2: var(--ivory-dk);
--border: #E8D9C8;
--border-gold: #D4B87A;
--text: #1A1018;
--text-sm: #7A6860;
--text-gold: #7A5A1E; /* WCAG AA ≥4.5:1 on ivory */
--danger: #C73542;
--ok: #2E7D52;
--warning-c: #D4882A;
--info-c: #1D6FA4;
--err: #C73542;
--bg-card: #FFFDFB;
/* ── 側邊欄 ──────── */
--sidebar-bg: #2A1820; /* 暖深酒紅（原 #160D12 太黑） */
--sidebar-w: 240px;
/* ── Type scale (統一字級) ────── */
--fs-xs: 11px;
--fs-sm: 12px;
--fs-base: 13px;
--fs-md: 14px;
--fs-body: 15px;
--fs-lg: 18px;
--fs-xl: 22px;
--fs-2xl: 28px;
/* ── Spacing scale (4px base) ── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 48px;
--space-10: 64px;
/* ── Radii ──── */
--radius: 12px;
--radius-sm: 8px;
--radius-xs: 6px;
--radius-pill: 99px;
/* ── Shadows ──── */
--shadow: 0 2px 16px rgba(123,21,40,.10);
--shadow-lg: 0 8px 24px rgba(123,21,40,.12);
--shadow-gold: 0 4px 20px rgba(200,160,85,.20);
}
/* ── 暗色模式備用 ─────────────────────────────────────────── */
body {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
font-size: var(--fs-body);
line-height: 1.55;
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
h1, h2 {
font-family: 'Playfair Display', serif;
letter-spacing: -.015em;
}
h3, h4 {
font-weight: 700;
letter-spacing: -.005em;
}
/* ══════════════════════════════════════════════════════════════
APP SHELL
══════════════════════════════════════════════════════════════ */
#app {
display: flex;
min-height: 100vh;
max-width: 100vw;
overflow-x: hidden;
}
.main-content {
flex: 1;
margin-left: var(--sidebar-w);
margin-right: auto;
padding: 28px 36px;
min-height: 100vh;
max-width: 1280px;
transition: margin-left .3s;
}
/* ══════════════════════════════════════════════════════════════
SIDEBAR
══════════════════════════════════════════════════════════════ */
.sidebar {
position: fixed; top: 0; left: 0;
width: var(--sidebar-w);
height: 100vh;
background: var(--sidebar-bg);
color: #fff;
display: flex; flex-direction: column;
z-index: 200;
box-shadow: 4px 0 20px rgba(0,0,0,.3);
}
.sidebar-logo {
padding: 20px 18px 16px;
cursor: pointer;
display: flex; flex-direction: column; gap: 4px;
border-bottom: 1px solid rgba(200,160,85,.2);
text-decoration: none;
}
.sidebar-logo:hover { opacity: .9; }
.logo-brand {
font-family: 'Playfair Display', serif;
font-size: 15px; font-weight: 700;
color: var(--gold-lt);
letter-spacing: .02em;
line-height: 1.3;
}
.logo-sub {
font-size: 11px; color: rgba(255,255,255,.45);
letter-spacing: .06em;
text-transform: uppercase;
}
.sidebar-nav {
flex: 1; padding: 10px 8px;
display: flex; flex-direction: column; gap: 2px;
overflow-y: auto;
}
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 11px 14px; border-radius: var(--radius-sm);
border: none; background: none;
color: rgba(255,255,255,.65);
cursor: pointer; font-size: 14px; text-align: left; width: 100%;
transition: background .15s, color .15s;
position: relative;
}
.nav-item:hover { background: rgba(200,160,85,.12); color: var(--gold-lt); }
.nav-item.active {
background: rgba(255,255,255,.08);
color: #fff;
}
.nav-item.active::before {
content: '';
position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
width: 3px; height: 60%; border-radius: 2px;
background: var(--burgundy-lt);
}
.nav-item.nav-locked { opacity: .55; }
.nav-icon { font-size: 18px; width: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gli { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; }
.nav-icon .gli { width: 20px; height: 20px; }
.mnav-icon .gli { width: 22px; height: 22px; }
.nav-lock .gli { width: 12px; height: 12px; }
.btn-icon .gli { width: 18px; height: 18px; }
.btn-icon.btn-touch .gli,
.btn-icon.btn-sm .gli,
.btn-icon-bordered .gli { width: 18px; height: 18px; }
button .gli { vertical-align: -0.2em; }
.btn-primary .gli,
.btn-secondary .gli,
.btn-danger.btn-sm .gli { width: 16px; height: 16px; margin-right: 4px; }
.tab-btn .gli { width: 16px; height: 16px; margin-right: 4px; vertical-align: -0.2em; }
.search-input-wrap .gli { width: 16px; height: 16px; }
.toast-icon { display: inline-flex; align-items: center; margin-right: 6px; }
.nav-label { flex: 1; }
.pro-badge {
font-size: 11px; padding: 2px 5px;
border-radius: 4px;
background: var(--gold); color: #1A0E15;
font-weight: 700; letter-spacing: .04em;
}
.sidebar-user {
padding: 14px 16px;
border-top: 1px solid rgba(200,160,85,.2);
display: flex; align-items: center; gap: 10px;
}
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.avatar-placeholder {
width: 34px; height: 34px; border-radius: 50%;
background: linear-gradient(135deg, var(--burgundy), var(--burgundy-lt));
border: 2px solid var(--gold);
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 14px; color: #fff;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-tier { font-size: 11px; margin-top: 1px; }
.tier-free { color: rgba(255,255,255,.4); }
.tier-pro { color: var(--gold-lt); }
.btn-icon { background: none; border: none; color: rgba(255,255,255,.4); cursor: pointer; font-size: 18px; padding: 4px; border-radius: 6px; }
.btn-icon:hover { color: var(--gold-lt); background: rgba(255,255,255,.08); }
/* ══════════════════════════════════════════════════════════════
VIEW HEADERS
══════════════════════════════════════════════════════════════ */
.view-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.view-header h2 {
font-size: var(--fs-2xl); color: var(--text); font-weight: 700;
}
.section-label {
font-size: 11px; text-transform: uppercase;
letter-spacing: .1em; color: var(--text-sm);
margin: 28px 0 10px;
font-weight: 600;
}
/* ══════════════════════════════════════════════════════════════
BUTTONS
══════════════════════════════════════════════════════════════ */
.btn-primary {
background: var(--burgundy);
color: #fff;
border: none; border-radius: var(--radius-sm);
padding: 10px 20px; cursor: pointer; font-size: 14px; font-weight: 600;
transition: background .15s;
letter-spacing: .01em;
}
.btn-primary:hover { background: var(--burgundy-lt); }
.btn-primary:active { background: #5F0E1E; }
.btn-secondary {
background: var(--surface); color: var(--burgundy);
border: 1px solid var(--border-gold); border-radius: var(--radius-sm);
padding: 9px 18px; cursor: pointer; font-size: 14px; font-weight: 500;
transition: background .15s, border-color .15s;
}
.btn-secondary:hover { background: var(--gold-bg); border-color: var(--gold); }
.btn-gold {
background: var(--gold);
color: #1A0E15;
border: none; border-radius: var(--radius-sm);
padding: 10px 20px; cursor: pointer; font-size: 14px; font-weight: 700;
transition: background .15s;
letter-spacing: .01em;
}
.btn-gold:hover { background: #B88F45; }
.btn-danger { background: #FEF2F2; color: var(--danger); border: 1px solid #FCA5A5; border-radius: var(--radius-sm); padding: 9px 16px; cursor: pointer; font-size: 13px; font-weight: 500; }
.btn-danger:hover { background: #FEE2E2; }
.btn-toggle {
font-size: 13px; padding: 7px 14px;
background: var(--surface); color: var(--text-sm);
border: 1px solid var(--border); border-radius: var(--radius-sm);
cursor: pointer; transition: all .15s;
}
.btn-toggle:hover { border-color: var(--gold); color: var(--text-gold); }
.btn-toggle.active {
background: var(--gold-bg); color: var(--text-gold);
border-color: var(--gold); font-weight: 600;
}
/* ── Button system v2 (consolidated 9-class) ──────────────────
1 primary + 4 secondary (secondary/gold/danger/text) + 4 specialized
(icon / icon-bordered / toggle / google). Modifiers: .btn-sm .btn-full .btn-touch */
.btn-text {
background: none; border: none; color: var(--burgundy); cursor: pointer;
font-size: 13px; padding: 0; font-weight: 500;
}
.btn-text:hover { text-decoration: underline; }
.btn-icon-bordered {
background: none; border: 1px solid var(--border, #ddd); color: var(--text, #333);
cursor: pointer; font-size: 15px; padding: 8px 10px; border-radius: 8px;
transition: all .15s; line-height: 1; min-height: 38px;
display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon-bordered:hover { background: var(--gold-bg, rgba(200,160,85,.1)); border-color: var(--gold, #C8A055); }
.btn-icon-bordered:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-icon-bordered:disabled:hover { background: none; border-color: var(--border, #ddd); }
/* .btn-icon variants via modifier */
.btn-icon.btn-sm { font-size: 15px; padding: 2px; opacity: .6; color: var(--text-sm); }
.btn-icon.btn-sm:hover { opacity: 1; background: transparent; color: var(--text); }
.btn-icon.btn-touch {
min-width: 44px; min-height: 44px; font-size: 18px;
color: var(--text-sm); opacity: 1;
display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.btn-icon.btn-touch:hover { background: var(--ivory-dk); color: var(--text); }
.btn-icon.hover-danger { color: var(--text-sm); opacity: 1; min-width: 36px; min-height: 36px;
display: inline-flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 4px;
transition: color .1s, background .1s;
}
.btn-icon.hover-danger:hover { color: var(--danger); background: #FEE2E2; opacity: 1; }
/* Compound sizing for danger (solid emphatic variant for batch actions) */
.btn-danger.btn-sm {
padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
background: var(--err, #c0392b); color: #fff; border: 1px solid var(--err, #c0392b);
}
.btn-danger.btn-sm:hover { background: #a93226; }
.btn-danger.btn-sm:disabled { opacity: 0.4; cursor: not-allowed; }
/* ══════════════════════════════════════════════════════════════
LOGIN PAGE
══════════════════════════════════════════════════════════════ */
.login-page {
min-height: 100vh; width: 100%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, #1A0E15 0%, #2D1020 50%, #1A0E15 100%);
padding: 20px;
position: relative; overflow: hidden;
}
/* 背景裝飾 */
.login-page::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(123,21,40,.4) 0%, transparent 60%),
radial-gradient(ellipse at 80% 70%, rgba(200,160,85,.15) 0%, transparent 50%);
pointer-events: none;
}
.login-card {
background: rgba(255,253,251,.96);
border-radius: 20px;
padding: 48px 44px;
width: 100%; max-width: 400px;
box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(200,160,85,.3);
position: relative; z-index: 1;
text-align: center;
}
/* v263: 登入頁語言切換器 */
.login-lang-picker {
position: absolute;
top: 14px;
right: 16px;
display: flex;
align-items: center;
gap: 6px;
z-index: 2;
}
.login-lang-label {
font-size: 11px;
color: var(--text-sm, #888);
letter-spacing: 0.04em;
}
.login-lang-select {
font-size: 12px;
padding: 4px 8px;
border: 1px solid rgba(200, 160, 85, 0.4);
border-radius: 6px;
background: #fff;
color: var(--text, #333);
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
}
.login-lang-select:hover,
.login-lang-select:focus {
border-color: var(--burgundy, #7B1528);
outline: none;
box-shadow: 0 0 0 2px rgba(123, 21, 40, 0.15);
}
.login-logo {
margin-bottom: 32px;
}
.login-brand {
font-family: 'Playfair Display', serif;
font-size: 22px; color: var(--burgundy);
font-weight: 700; line-height: 1.3;
margin-bottom: 4px;
}
.login-brand-sub {
font-size: 12px; color: var(--text-gold);
letter-spacing: .1em; text-transform: uppercase;
margin-bottom: 8px;
}
.login-gelato-icon { font-size: 52px; margin-bottom: 8px; display: block; }
.login-brand-logo { display: block; width: 240px; max-width: 80%; height: auto; margin: 0 auto 8px; }
.login-tagline { font-size: 13px; color: var(--text-sm); }
.login-divider {
border: none; border-top: 1px solid var(--border);
margin: 24px 0;
position: relative;
}
.login-divider::before {
content: '⸻ ⋆ ⸻';
position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
background: var(--surface); padding: 0 10px;
font-size: 11px; color: var(--text-gold); letter-spacing: .15em;
}
.btn-google {
width: 100%;
display: flex; align-items: center; justify-content: center; gap: 10px;
background: #fff; color: #3c4043;
border: 1.5px solid #dadce0; border-radius: var(--radius-sm);
padding: 12px 20px; cursor: pointer; font-size: 14px; font-weight: 500;
transition: background .15s, box-shadow .15s;
box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.btn-google:hover { background: #f8f9fa; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.login-note { font-size: 11px; color: var(--text-sm); margin-top: 20px; line-height: 1.5; }
/* ══════════════════════════════════════════════════════════════
DASHBOARD
══════════════════════════════════════════════════════════════ */
.view-dashboard { max-width: 100%; overflow-x: hidden; }
.quick-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
margin-bottom: 4px;
}
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 20px;
text-align: center;
box-shadow: var(--shadow);
position: relative; overflow: hidden;
}
.stat-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--burgundy), var(--gold));
}
.stat-num { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; color: var(--burgundy); }
.stat-label { font-size: 12px; color: var(--text-sm); margin-top: 2px; }
.recipe-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 14px;
}
.recipe-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
cursor: pointer;
transition: transform .15s, box-shadow .15s, border-color .15s;
box-shadow: var(--shadow);
position: relative; overflow: hidden;
}
.recipe-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(123,21,40,.1); border-color: var(--burgundy-lt); }
/* Dashboard tabs */
.dashboard-tabs {
display: flex; gap: 0; margin-bottom: 16px;
border-bottom: 2px solid var(--border, #e5e5e5);
}
.dash-tab {
padding: 10px 20px; font-size: 14px; font-weight: 600;
border: none; background: none; cursor: pointer;
color: var(--text-sm, #888); transition: all .15s;
border-bottom: 2px solid transparent; margin-bottom: -2px;
display: flex; align-items: center; gap: 6px;
}
.dash-tab:hover { color: var(--text, #333); }
.dash-tab-active {
color: var(--burgundy, #7B1528); border-bottom-color: var(--burgundy, #7B1528);
}
.dash-tab-count {
font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px;
background: var(--gold-bg, rgba(200,160,85,.12)); color: var(--text-gold, #a57d32);
}
.dash-tab-active .dash-tab-count {
background: var(--burgundy, #7B1528); color: #fff;
}
.dash-toolbar { margin-bottom: 8px; }
.recipe-count-info { font-size: 13px; color: var(--text-sm); padding: 4px 0 8px; }
.recipe-card-selected { border-color: var(--gold, #C8A055); box-shadow: 0 0 0 2px rgba(200,160,85,.3); }
.recipe-card-top { display: flex; justify-content: space-between; align-items: center; }
.recipe-card-type { font-size: 11px; color: var(--text-gold); margin-bottom: 6px; font-weight: 500; }
.recipe-card-name { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.recipe-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.recipe-card-desc { font-size: 12px; color: var(--text-sm); margin-bottom: 10px; line-height: 1.4; }
/* Star button */
.star-btn {
background: none; border: none; cursor: pointer; font-size: 16px; padding: 2px 4px;
color: #ccc; transition: color .15s, transform .15s; line-height: 1;
}
.star-btn:hover { transform: scale(1.2); }
.star-active { color: #f59e0b; }
/* Batch checkbox */
.batch-checkbox {
position: absolute; top: 10px; right: 10px; font-size: 18px; z-index: 1;
color: var(--gold, #C8A055);
}
/* Tag chips */
.tag-chip { display: inline-block; padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 500; background: var(--gold-bg, rgba(200,160,85,.12)); color: var(--text-gold); border: 1px solid rgba(200,160,85,.2); }
.tag-chip-sm { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 500; background: rgba(200,160,85,.1); color: var(--text-gold); }
/* Tag toggle buttons */
.tag-toggle-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-toggle {
padding: 6px 14px; border-radius: 99px; font-size: 13px; font-weight: 500;
border: 1px solid var(--border, #ddd); background: var(--surface, #fff);
color: var(--text, #333); cursor: pointer; transition: all .15s;
}
.tag-toggle:hover { border-color: var(--gold, #C8A055); background: var(--gold-bg, rgba(200,160,85,.08)); }
.tag-active { border-color: var(--gold, #C8A055); background: var(--gold, #C8A055); color: #fff; }
.tag-active:hover { background: var(--gold-dk, #b08a3e); }
/* Tag manager */
.tag-manager-list { display: flex; flex-direction: column; gap: 8px; }
.tag-manager-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border, #eee); }
/* Recipe filter bar */
.recipe-filter-bar {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
padding: 10px 0; margin-bottom: 4px;
}
.recipe-filter-bar .search-input { flex: 1; min-width: min(180px, 100%); }
.filter-select {
padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border, #ddd);
background: var(--surface, #fff); color: var(--text, #333); font-size: 13px;
cursor: pointer; min-width: 100px;
}
.filter-select:focus { border-color: var(--gold, #C8A055); outline: none; }
.recipe-score {
font-size: 12px; padding: 3px 10px; border-radius: 99px; font-weight: 600;
}
.score-good { background: #D4F0DF; color: #1A6B3D; }
.score-ok { background: #FEF3C7; color: #92400E; }
.score-bad { background: #FEE2E2; color: #991B1B; }
/* ══════════════════════════════════════════════════════════════
CALCULATOR VIEW
══════════════════════════════════════════════════════════════ */
.view-calculator { max-width: 100%; overflow-x: hidden; overflow-wrap: break-word; }
/* 手機分頁 tab bar & 指標展開按鈕 — 桌面版隱藏 */
.calc-mobile-tabs { display: none; }
.btn-metrics-expand { display: none; }
.calculator-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: 20px;
align-items: start;
}
.calc-left, .calc-right {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.panel-header {
padding: 14px 18px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
background: var(--surface);
}
.panel-header h3 { font-size: 15px; color: var(--text); }
.total-weight {
font-size: 12px; padding: 3px 10px;
background: var(--gold-bg); color: var(--text-gold);
border-radius: 99px; font-weight: 600;
border: 1px solid rgba(200,160,85,.3);
}
.total-weight-mx {
color: #40916c; font-weight: 700; font-size: 12px;
}
/* ── Multiplier bar ──────────────────────────────────────── */
.multiplier-bar {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.multiplier-label {
font-size: 11px; font-weight: 600; color: var(--text-sm); flex-shrink: 0;
}
.multiplier-presets {
display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.mx-btn {
padding: 4px 10px; border-radius: 16px; cursor: pointer; font-size: 12px; font-weight: 700;
border: 1.5px solid var(--border); background: var(--bg); color: var(--text-sm);
transition: all .14s; min-width: 34px; text-align: center;
}
.mx-btn:hover { border-color: #40916c; color: #40916c; }
.mx-btn.active { background: #40916c; color: #fff; border-color: #40916c; }
.mx-custom {
width: 56px; padding: 4px 6px; border-radius: 8px; font-size: 12px; text-align: center;
border: 1.5px solid var(--border); background: var(--bg); color: var(--text);
outline: none; transition: border-color .14s;
}
.mx-custom:focus { border-color: #40916c; }
.mx-custom::placeholder { color: var(--text-sm); font-size: 11px; }
.mx-total-badge {
margin-left: 4px; padding: 3px 10px; border-radius: 99px; font-size: 12px;
background: rgba(64,145,108,.12); color: #40916c;
border: 1px solid rgba(64,145,108,.3);
}
/* ── Serving count calculator ─────────────────────────── */
.serving-calc-details { width: 100%; }
.serving-calc-summary {
font-size: 11px; color: var(--text-sm); cursor: pointer; padding: 4px 0;
list-style: none; user-select: none;
}
.serving-calc-summary::-webkit-details-marker { display: none; }
.serving-calc-summary::before { content: '▸ '; }
.serving-calc-details[open] .serving-calc-summary::before { content: '▾ '; }
.serving-calc-bar {
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
width: 100%; padding-top: 5px; border-top: 1px dashed var(--border); margin-top: 2px;
}
.serving-sep {
font-size: 11px; color: var(--text-sm); flex-shrink: 0;
}
.serving-count-input, .serving-size-input {
width: 52px; padding: 3px 6px; border-radius: 8px; font-size: 12px; text-align: center;
border: 1.5px solid var(--border); background: var(--bg); color: var(--text);
outline: none; transition: border-color .14s;
}
.serving-count-input:focus, .serving-size-input:focus { border-color: var(--gold); }
.serving-x { font-size: 11px; color: var(--text-sm); }
.serving-unit { font-size: 11px; color: var(--text-sm); }
.serving-result {
padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600;
background: rgba(200,160,85,.15); color: var(--text-gold);
border: 1px solid rgba(200,160,85,.3);
}
/* ── Score breakdown (weak metrics) ──────────────────── */
.score-breakdown {
margin: 0 0 12px 0; padding: 10px 12px;
background: rgba(200,160,85,.07); border-radius: 8px;
border-left: 3px solid var(--gold);
}
.score-breakdown-title {
font-size: 11px; font-weight: 600; color: var(--text-sm);
text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px;
}
.score-breakdown-item {
display: flex; align-items: center; gap: 8px;
padding: 3px 0; font-size: 12px;
}
.sbd-label { color: var(--text); flex: 1; min-width: 52px; }
.sbd-arrow { font-size: 11px; font-weight: 600; }
.sbd-score { font-weight: 700; font-size: 12px; min-width: 32px; text-align: right; }
/* ── Scaled weight in ingredient row ─────────────────────── */
.ing-scaled {
font-size: 12px; font-weight: 700; color: #40916c;
min-width: 54px; text-align: right;
background: rgba(64,145,108,.08); padding: 2px 6px; border-radius: 6px;
}
/* ── Production card (秤重清單) ──────────────────────────── */
.prod-card {
margin: 0 8px 10px; border-radius: 10px; overflow: hidden;
border: 1.5px solid rgba(64,145,108,.35);
background: var(--surface);
}
.prod-card-header {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px;
padding: 8px 12px; background: rgba(64,145,108,.1);
border-bottom: 1px solid rgba(64,145,108,.2);
}
.prod-card-title { font-size: 13px; font-weight: 700; color: #276f4e; }
.prod-card-meta { font-size: 11px; color: var(--text-sm); }
.prod-card-rows { padding: 6px 4px; display: flex; flex-direction: column; gap: 2px; }
.prod-row {
display: grid; grid-template-columns: 10px 1fr auto auto;
align-items: center; gap: 8px;
padding: 5px 8px; border-radius: 6px;
font-size: 13px; transition: background .1s;
}
.prod-row:hover { background: var(--ivory); }
.prod-total-row {
display: grid; grid-template-columns: 10px 1fr auto auto;
align-items: center; gap: 8px;
padding: 6px 8px; border-top: 1px solid var(--border); margin-top: 2px;
}
.prod-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.prod-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-base { font-size: 11px; color: var(--text-sm); white-space: nowrap; }
.prod-scaled {
font-size: 14px; font-weight: 700; color: #276f4e; min-width: 56px; text-align: right;
white-space: nowrap;
}
.prod-scaled-total {
font-size: 15px; color: #40916c;
}
.ingredient-list { padding: 8px; }
.empty-ing {
text-align: center; padding: 40px 20px;
color: var(--text-sm); font-size: 13px;
}
.empty-ing-guide {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.empty-ing-guide p {
margin: 0;
}
.empty-ing-sub {
max-width: 280px;
line-height: 1.6;
}
.empty-ing-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
/* v263: 空計算器 3 步驟入門階梯 */
.starter-ladder {
background: linear-gradient(135deg, #fff8f1 0%, #fef3e8 100%);
border: 1px solid #f7d9b8;
border-radius: 12px;
padding: 16px 20px;
margin: 6px 0 4px;
max-width: 460px;
width: 100%;
align-self: stretch; /* 父 flex column align-items:center 會把 100% 寬度壓縮 */
text-align: left;
box-sizing: border-box;
}
.starter-ladder-title {
font-size: 14px;
font-weight: 600;
color: #7a4a1f;
margin: 0 0 10px;
line-height: 1.4;
text-align: center;
}
.starter-ladder-steps {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.starter-ladder-steps li {
font-size: 13px;
color: #5a3d1f;
line-height: 1.55;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.7);
border-radius: 6px;
}
.btn-starter {
background: linear-gradient(135deg, #f4a261 0%, #e76f51 100%) !important;
color: #fff !important;
font-weight: 600;
box-shadow: 0 2px 6px rgba(231, 111, 81, 0.3);
}
.btn-starter:hover {
filter: brightness(1.05);
transform: translateY(-1px);
}
.ing-row {
display: flex; align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 9px 10px;
border-radius: var(--radius-sm);
margin-bottom: 3px;
transition: background .1s;
}
.ing-row:hover { background: var(--ivory); }
.ing-row-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ing-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ing-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ing-row-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ing-amount {
width: 68px; text-align: center;
border: 1px solid var(--border); border-radius: 6px;
padding: 5px 6px; font-size: 13px;
background: var(--ivory); color: var(--text);
transition: border-color .15s;
}
.ing-amount:focus { outline: none; border-color: var(--gold); background: #fff; }
.ing-unit { font-size: 12px; color: var(--text-sm); }
.ing-pct { font-size: 11px; color: var(--text-gold); min-width: 38px; text-align: right; }
/* ── Balance Panel ──────────────────────────────────── */
.balance-panel {
padding: 16px 18px;
border-top: 1px solid var(--border);
background: linear-gradient(to bottom, var(--ivory-dk), var(--surface));
}
.balance-placeholder {
padding: 32px 20px; text-align: center; color: var(--text-sm);
}
.balance-placeholder-icon { font-size: 32px; margin-bottom: 8px; opacity: .5; }
.balance-placeholder-action {
margin-top: 12px;
}
.balance-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 14px; flex-wrap: wrap; gap: 6px;
}
.balance-title { font-weight: 600; font-size: 14px; color: var(--text); }
.balance-mode-switch {
display: inline-flex;
gap: 6px;
margin-bottom: 8px;
padding: 4px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--bg);
}
.balance-mode-btn {
border: none;
background: transparent;
color: var(--text-sm);
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
}
.balance-mode-btn.active {
background: var(--gold);
color: #1a0f14;
}
.balance-mode-hint {
margin-bottom: 10px;
font-size: 12px;
color: var(--text-sm);
}
/* ── 平衡指標模式切換（桌機 + 手機通用）─────────────────
基礎模式：隱藏進階指標（PAC、共熔點、結晶、產出量等）
專家模式：顯示全部指標 */
.balance-panel.mode-basic .balance-metrics .metric-advanced { display: none !important; }
/* ── 服務（展示櫃）溫度選擇器 ──────────────────────────── */
.balance-service-temp {
margin: 6px 0 12px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: linear-gradient(135deg, rgba(34,118,178,.06), rgba(196,162,107,.06));
}
.bst-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
}
.bst-title { font-size: 13px; font-weight: 600; color: var(--text); }
.bst-current {
font-family: 'Playfair Display', serif;
font-size: 18px; font-weight: 700;
color: var(--burgundy);
}
.bst-options {
display: flex; flex-wrap: wrap; gap: 6px;
align-items: center;
}
.bst-btn {
border: 1px solid var(--border);
background: var(--bg);
color: var(--text-sm);
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
cursor: pointer;
transition: all .15s;
white-space: nowrap;
}
.bst-btn:hover { border-color: var(--gold); color: var(--text); }
.bst-btn.active {
background: var(--gold);
border-color: var(--gold);
color: #1a0f14;
font-weight: 600;
}
.bst-custom-wrap {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; color: var(--text-sm);
border: 1px dashed var(--border);
border-radius: 999px;
padding: 4px 10px;
}
.bst-custom {
width: 56px;
border: none;
background: transparent;
font-size: 13px;
font-weight: 600;
color: var(--burgundy);
text-align: center;
outline: none;
}
.bst-custom::-webkit-inner-spin-button,
.bst-custom::-webkit-outer-spin-button { opacity: 1; }
.bst-hint {
margin-top: 8px;
font-size: 12px;
color: var(--text-sm);
line-height: 1.5;
}
.bst-hint b { color: var(--burgundy); font-weight: 600; }
@media (max-width: 480px) {
.bst-btn { font-size: 11px; padding: 5px 8px; }
.bst-current { font-size: 16px; }
.bst-custom { width: 48px; }
}
.balance-score {
font-family: 'Playfair Display', serif;
font-size: 22px; font-weight: 700;
}
.balance-flags { display: inline-flex; gap: 3px; margin-left: 4px; flex-wrap: wrap; }
.metric-flag {
font-size: 10px; font-weight: 600;
padding: 1px 5px; border-radius: 4px;
white-space: nowrap;
}
.metric-flag.metric-low { background: #fef3c7; color: #d97706; }
.metric-flag.metric-high { background: #fee2e2; color: #dc2626; }
/* GL-UX-07: 資料完整性警示橫幅 */
.balance-incomplete-banner {
background: #fff8ec; border: 1px solid #f4c97a; border-left: 4px solid #f4a261;
border-radius: 6px; padding: 10px 12px; margin: 8px 0;
font-size: 12.5px; color: #7c4d00;
display: flex; flex-direction: column; gap: 6px;
}
.balance-incomplete-head {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.balance-incomplete-icon { font-size: 16px; }
.balance-incomplete-head strong { color: #b65f00; font-size: 13px; }
.balance-incomplete-hint { font-size: 12px; color: #8a6534; }
.balance-incomplete-line {
font-size: 12px; color: #6b4a00; padding-left: 22px;
word-break: break-word;
}
.balance-incomplete-actions {
display: flex; gap: 8px; flex-wrap: wrap; padding-left: 22px; margin-top: 2px;
}
.balance-incomplete-actions .btn-sm { padding: 4px 10px; font-size: 12px; }
.balance-metrics { display: flex; flex-direction: column; gap: 8px; }
.metric-row {
display: grid; grid-template-columns: 64px 1fr 52px 72px;
align-items: center; gap: 8px; font-size: 13px;
}
.metric-label { color: var(--text-sm); font-size: 12px; }
.metric-bar-wrap { }
.metric-bar {
height: 6px; border-radius: 3px;
background: var(--ivory-dk); overflow: hidden;
}
.metric-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
.metric-fill.status-ok { background: linear-gradient(90deg, var(--ok), #52B788); }
.metric-fill.status-low { background: linear-gradient(90deg, var(--info-c), #60A5FA); }
.metric-fill.status-high { background: linear-gradient(90deg, var(--warning-c), #F97316); }
.metric-fill.status-na { background: var(--border); }
.metric-val { text-align: right; font-weight: 600; font-size: 12px; }
.metric-val.status-ok { color: var(--ok); }
.metric-val.status-low { color: var(--info-c); }
.metric-val.status-high { color: var(--warning-c); }
.metric-val.status-na { color: var(--text-sm); }
.metric-range { font-size: 11px; color: var(--text-sm); text-align: right; }
.suggestions { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.suggestion {
font-size: 12px; padding: 8px 12px;
border-radius: var(--radius-sm); line-height: 1.5;
}
.suggestion-ok { background: #D4F0DF; color: #1A6B3D; }
.suggestion-warning { background: #FEF3C7; color: #92400E; border-left: 3px solid var(--warning-c); }
.suggestion-info { background: #EFF6FF; color: #1D4ED8; border-left: 3px solid var(--info-c); }
/* ── Ingredient Picker ──────────────────────────────── */
.ingredient-picker { padding: 8px; height: 360px; overflow-y: auto; }
.picker-item {
display: flex; align-items: center; gap: 8px;
padding: 9px 10px; border-radius: var(--radius-sm);
cursor: pointer; transition: background .1s;
}
.picker-item:hover { background: var(--gold-bg); }
.picker-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.picker-name { flex: 1; font-size: 13px; font-weight: 500; }
.picker-cat { font-size: 11px; color: var(--text-sm); }
.picker-add {
font-size: 16px; color: var(--burgundy); font-weight: 700;
padding: 2px 8px; opacity: 0;
transition: opacity .1s;
}
.picker-item:hover .picker-add { opacity: 1; }
@media (hover: none), (max-width: 768px) {
.picker-add { opacity: 1; background: var(--gold-bg); border-radius: 6px; font-size: 18px; min-width: 36px; text-align: center; }
}
.empty-picker { text-align: center; padding: 30px; color: var(--text-sm); font-size: 13px; }
/* ── Category Tabs ──────────────────────────────────── */
.category-tabs {
display: flex; gap: 5px; flex-wrap: wrap;
padding: 8px 10px; border-bottom: 1px solid var(--border);
}
@media (max-width: 768px) {
.category-tabs {
flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; padding-bottom: 6px;
}
.category-tabs::-webkit-scrollbar { display: none; }
}
.cat-tab {
font-size: 12px; padding: 5px 10px;
border: 1px solid var(--border); border-radius: 99px;
background: none; cursor: pointer; color: var(--text-sm);
transition: all .15s; white-space: nowrap;
}
.cat-tab:hover { border-color: var(--gold); color: var(--text-gold); background: var(--gold-bg); }
.cat-tab.active { background: var(--burgundy); color: #fff; border-color: var(--burgundy); }
/* ── Calculator Header Controls ─────────────────────── */
.header-left { display: flex; align-items: center; gap: 12px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-secondary-desktop { display: flex; align-items: center; gap: 8px; }
.header-overflow-wrap { display: none; position: relative; }
.header-overflow-btn { font-size: 20px; font-weight: 700; letter-spacing: 2px; }
.header-overflow-menu {
display: none; position: absolute; top: calc(100% + 6px); right: 0;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.15);
z-index: 100; min-width: 180px; padding: 6px 0;
}
.header-overflow-wrap.open .header-overflow-menu { display: block; }
.header-overflow-menu button {
display: block; width: 100%; text-align: left; padding: 10px 16px;
border: none; background: none; font-size: 14px; color: var(--text);
cursor: pointer; transition: background .1s;
}
.header-overflow-menu button:hover { background: var(--gold-bg); }
.header-overflow-menu button:disabled { opacity: .4; cursor: not-allowed; }
.recipe-name-input {
font-family: 'Playfair Display', serif;
font-size: 20px; font-weight: 600; color: var(--text);
background: none; border: none; border-bottom: 2px solid transparent;
padding: 4px 4px 4px 0;
transition: border-color .15s;
max-width: 280px;
}
.recipe-name-input:focus { outline: none; border-bottom-color: var(--gold); }
.select-type {
font-size: 13px; padding: 8px 12px;
border: 1px solid var(--border-gold); border-radius: var(--radius-sm);
background: var(--surface); color: var(--text);
cursor: pointer;
}
.select-type:focus { outline: none; border-color: var(--gold); }
/* ══════════════════════════════════════════════════════════════
INGREDIENT DATABASE VIEW
══════════════════════════════════════════════════════════════ */
.view-ingredients { max-width: 100%; overflow-x: hidden; }
.search-filter-bar {
display: flex; flex-direction: column; gap: 10px;
margin-bottom: 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
box-shadow: var(--shadow);
}
.search-input {
font-size: 14px; padding: 9px 14px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--ivory); color: var(--text);
width: 100%; transition: border-color .15s;
}
.search-input:focus { outline: none; border-color: var(--gold); background: #fff; }
.ing-count-bar {
font-size: 13px; color: var(--text-sm);
padding: 4px 2px; margin-bottom: 6px;
display: flex; align-items: center; gap: 10px;
}
.badge-incomplete {
font-size: 11px; padding: 2px 8px;
background: #FFF7ED; color: #C2410C;
border-radius: 99px; font-weight: 500;
}
.badge-incomplete-dot { font-size: 12px; color: #F97316; margin-left: 4px; cursor: help; }
.ing-help-banner {
display: flex;
gap: var(--space-3);
align-items: flex-start;
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--info-c);
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-3);
font-size: var(--fs-sm);
color: var(--text-sm);
line-height: 1.6;
}
.ing-help-banner-icon {
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
line-height: 1.4;
}
.ing-help-banner-text { flex: 1; min-width: 0; }
.ing-help-banner-text > div + div { margin-top: 4px; }
.ing-help-banner-text strong { color: var(--text); font-weight: 600; }
/* Pro 冷門食材延遲載入 stub — 滑鼠 hover 顯示 cursor-help 提示 */
.ing-row-remote { cursor: help; }
.ing-row-remote:hover { cursor: pointer; }
.ingredient-table {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
}
.ing-table-header {
display: grid;
grid-template-columns: 2fr 1fr .7fr .7fr .7fr .7fr .7fr .7fr .5fr;
padding: 10px 14px;
background: linear-gradient(to right, var(--ivory-dk), var(--surface));
border-bottom: 1px solid var(--border);
font-size: 11px; font-weight: 600; color: var(--text-sm);
text-transform: uppercase; letter-spacing: .05em;
}
.ing-table-row {
display: grid;
grid-template-columns: 2fr 1fr .7fr .7fr .7fr .7fr .7fr .7fr .5fr;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
font-size: 13px; cursor: pointer;
transition: background .1s;
align-items: center;
}
.ing-table-row:last-child { border-bottom: none; }
.ing-table-row:hover { background: var(--gold-bg); }
.ing-table-row.row-incomplete { opacity: .6; }
.ing-table-row.row-incomplete:hover { opacity: 1; background: var(--gold-bg); }
.ing-name-cell { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.badge-custom { font-size: 10px; padding: 1px 6px; background: #F3E8FF; color: #7C3AED; border-radius: 6px; }
.badge-pro-sm { font-size: 11px; padding: 1px 5px; background: linear-gradient(135deg, #C8A055, #D4AF37); color: #fff; border-radius: 4px; font-weight: 700; letter-spacing: 0.5px; }
.badge-pro-locked { font-size: 11px; padding: 1px 5px; background: #D4AF37; color: #fff; border-radius: 4px; font-weight: 700; letter-spacing: 0.5px; opacity: 0.8; }
.badge-community-sm { font-size: 11px; padding: 1px 5px; background: #E0F2FE; color: #0284C7; border-radius: 4px; font-weight: 600; }
/* Taiwan local badge — v198: 強化視覺辨識 */
.badge-tw-sm {
display: inline-flex; align-items: center; gap: 2px;
font-size: 10px; margin-left: 4px;
padding: 1px 5px 1px 4px;
background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
color: #B91C1C;
border: 1px solid #FCA5A5;
border-radius: 9px;
font-weight: 700;
cursor: help;
letter-spacing: 0.3px;
box-shadow: 0 1px 2px rgba(185,28,28,0.08);
white-space: nowrap;
vertical-align: middle;
}
.badge-tw-sm::after { content: "在地"; font-size: 9px; }
.badge-tw-filter {
font-size: 11px; padding: 2px 8px;
background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
color: #2E7D32; border-radius: 6px; font-weight: 600;
}
/* 食材 picker 項目：左側台灣綠邊條 */
.picker-item.has-tw-local {
border-left: 3px solid #16A34A;
padding-left: 5px;
}
.picker-item.has-tw-local:hover {
background: linear-gradient(90deg, rgba(22,163,74,0.06), transparent 40%);
}
/* v198: 鈉自動計算徽章 */
.ls-label-row {
display: flex; align-items: center; gap: 6px;
flex-wrap: wrap;
}
.ls-auto-badge {
display: inline-flex; align-items: center;
font-size: 10px; font-weight: 700;
padding: 1px 6px;
background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
color: #1E40AF;
border-radius: 4px;
letter-spacing: 0.3px;
}
.ls-auto-badge:not(:first-child) { margin-left: 2px; }
.ls-recalc-btn {
background: #fff;
border: 1px solid #D1D5DB;
color: #4B5563;
font-size: 10px; font-weight: 600;
padding: 1px 6px;
border-radius: 4px;
cursor: pointer;
transition: all 0.12s;
}
.ls-recalc-btn:hover {
background: #F3F4F6;
border-color: #9CA3AF;
color: #111827;
}
/* v198: 多產地標示 UI */
.ls-multi-origin-bar { margin-top: 6px; }
.ls-multi-origin-btn {
display: inline-flex; align-items: center; gap: 4px;
background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
color: #065F46;
border: 1px solid #6EE7B7;
border-radius: 6px;
padding: 4px 10px;
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.ls-multi-origin-btn:hover {
background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
transform: translateY(-1px);
}
.ls-multi-origin-list {
margin-top: 6px;
display: flex; flex-direction: column; gap: 3px;
}
.ls-mo-empty {
font-size: 11px;
color: #9CA3AF;
padding: 4px 0;
font-style: italic;
}
.ls-mo-row {
display: flex; align-items: center; gap: 6px;
background: #FFFBEB;
border: 1px solid #FEF3C7;
border-radius: 6px;
padding: 4px 8px;
font-size: 11.5px;
}
.ls-mo-ing { font-weight: 600; color: #92400E; }
.ls-mo-arrow { color: #D4AF37; }
.ls-mo-loc { color: #16A34A; font-weight: 600; flex: 1; }
.ls-mo-del {
background: transparent; border: 0;
color: #DC2626; cursor: pointer;
font-size: 12px; padding: 0 4px;
}
.ls-mo-del:hover { color: #7F1D1D; }
/* v198: 台灣地圖選擇器 */
.tw-map-overlay {
position: fixed; inset: 0; z-index: 10001;
background: rgba(0,0,0,0.6);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.tw-map-card {
background: #fff;
border-radius: 14px;
padding: 18px 22px;
max-width: 860px; width: 100%;
max-height: 90vh; overflow: auto;
box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}
.tw-map-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 10px;
}
.tw-map-header h3 { margin: 0; font-size: 16px; color: #111827; }
.tw-map-close {
background: transparent; border: 0;
font-size: 20px; color: #6B7280; cursor: pointer;
padding: 4px 8px;
}
.tw-map-close:hover { color: #111827; }
.tw-map-legend {
display: flex; flex-wrap: wrap; gap: 10px;
padding: 6px 0 10px;
border-bottom: 1px solid #F3F4F6;
font-size: 11px; color: #4B5563;
}
.tw-map-lg-item { display: inline-flex; align-items: center; gap: 4px; }
.tw-map-lg-item .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tw-map-wrap {
margin-top: 10px;
border-radius: 10px;
overflow: hidden;
background: #F0F9FF;
max-height: 540px;
}
.tw-map-svg { width: 100%; height: auto; display: block; }
.tw-map-dot { cursor: pointer; transition: all 0.12s; }
.tw-map-dot:hover circle { r: 8; stroke-width: 2.5; }
.tw-map-dot.selected circle { stroke: #D4AF37; stroke-width: 3; }
.tw-map-selected-info {
margin: 10px 0;
padding: 8px 12px;
background: #FFFBEB;
border-left: 3px solid #D4AF37;
border-radius: 4px;
font-size: 12.5px;
color: #78350F;
}
.tw-map-actions {
display: flex; justify-content: flex-end; gap: 8px;
margin-top: 8px;
}
/* v198: Pro 升級頁 9 類型預覽卡片 */
.upgrade-types-preview {
background: linear-gradient(135deg, #FEF3C7, #FDE68A);
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 14px;
}
.upgrade-types-title {
font-size: 12px; font-weight: 700;
color: #92400E; margin-bottom: 8px;
}
.upgrade-types-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.upgrade-type-card {
background: #fff;
border-radius: 8px;
padding: 8px 9px;
border: 1px solid #E5E7EB;
transition: all 0.15s;
}
.upgrade-type-card.type-card-free {
border-color: #10B981;
background: linear-gradient(180deg, #fff, #ECFDF5);
}
.upgrade-type-card.type-card-pro {
border-color: #D4AF37;
background: linear-gradient(180deg, #fff, #FFFBEB);
}
.utc-head {
display: flex; align-items: center; gap: 4px;
margin-bottom: 4px;
}
.utc-icon { font-size: 14px; }
.utc-name {
font-size: 12px; font-weight: 700; color: #1F2937;
flex: 1;
}
.utc-lock {
font-size: 9px; font-weight: 700;
background: #D4AF37; color: #fff;
padding: 1px 5px; border-radius: 4px;
}
.utc-free {
font-size: 9px; font-weight: 700;
background: #10B981; color: #fff;
padding: 1px 5px; border-radius: 4px;
}
.utc-targets {
font-size: 10.5px; font-weight: 600;
color: #4B5563; font-family: 'SF Mono', Menlo, monospace;
}
.utc-note {
font-size: 9.5px; color: #6B7280;
margin-top: 2px;
}
@media (max-width: 480px) {
.upgrade-types-grid { grid-template-columns: repeat(2, 1fr); }
}
/* v198: N 軸感官疊圖 modal */
.sensory-compare-overlay {
position: fixed; inset: 0; z-index: 10000;
background: rgba(0,0,0,0.6);
display: flex; align-items: center; justify-content: center;
}
.sensory-compare-card {
background: #fff; border-radius: 12px;
padding: 18px 20px 14px;
max-width: 600px; width: calc(100% - 32px);
box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.sc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sc-header h3 { margin: 0; font-size: 15px; }
.sc-close {
background: transparent; border: 0;
font-size: 18px; cursor: pointer;
color: #6B7280; padding: 4px 8px;
}
.sc-close:hover { color: #111827; }
.sc-legend {
display: flex; flex-wrap: wrap; gap: 10px;
padding: 8px 0; font-size: 12px;
justify-content: center;
}
.sc-legend-item { display: inline-flex; align-items: center; gap: 4px; color: #374151; }
.sc-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sensory-compare-card canvas {
display: block; margin: 4px auto;
max-width: 100%; height: auto;
}
.sc-hint {
text-align: center; color: #6B7280;
font-size: 11px; margin: 6px 0 0;
}
/* v198: 目標類型快捷 Pills（header 工具列） */
.type-pills {
display: inline-flex;
gap: 4px;
background: #F3F4F6;
border-radius: 8px;
padding: 3px;
margin-right: 4px;
}
.type-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
background: transparent;
border: 0;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: #4B5563;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.type-pill:hover { background: rgba(255,255,255,0.7); color: #111827; }
.type-pill.active {
background: #fff;
color: #B91C1C;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.type-pill.locked { opacity: 0.55; }
.type-pill-icon { font-size: 13px; }
.type-pill-label { font-size: 11.5px; }
.type-pill-lock { font-size: 9px; margin-left: 1px; }
@media (max-width: 768px) {
.type-pills .type-pill-label { display: none; }
.type-pill { padding: 4px 6px; }
}
/* v251 hotfix #8: 非 base kind 的「夾層醬 / 淋面」徽章 + subtype pills（取代 9 大類選單） */
.kind-active-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
border: 1px solid #F59E0B;
border-radius: 8px;
margin-right: 4px;
font-weight: 700;
color: #92400E;
font-size: 13px;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(245, 158, 11, 0.15);
}
.kind-active-icon { font-size: 16px; }
.kind-active-label { font-size: 13px; }
@media (max-width: 768px) {
.kind-active-badge { padding: 5px 9px; font-size: 12px; }
}
.subtype-pills {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 3px;
margin-right: 4px;
}
.subtype-pill {
display: inline-flex; align-items: center;
padding: 4px 10px;
background: transparent;
border: 0;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: #4B5563;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.subtype-pill:hover {
background: #FEF3C7;
color: #92400E;
}
.subtype-pill.active {
background: #fff;
color: #92400E;
box-shadow: 0 1px 3px rgba(245, 158, 11, 0.25);
border: 1px solid #FCD34D;
}
@media (max-width: 768px) {
.subtype-pill { padding: 4px 7px; font-size: 11.5px; }
}
/* Group badge */
.badge-group-sm {
font-size: 11px; padding: 1px 5px;
background: #FFF3E0; color: #E65100;
border-radius: 4px; font-weight: 600;
margin-left: 2px;
}
/* Locked ingredient rows */
.row-locked { opacity: 0.55; cursor: pointer; }
.row-locked:hover { opacity: 0.75; background: #FFF7ED; }
.picker-item-locked { opacity: 0.55; cursor: pointer; }
.picker-item-locked:hover { opacity: 0.75; background: #FFF7ED; }
.picker-name-locked { color: var(--text-sm); }
.picker-lock { font-size: 12px; margin-left: auto; }
/* ══════════════════════════════════════════════════════════════
FLAVOR PAIRING VIEW
══════════════════════════════════════════════════════════════ */
.pro-gate {
text-align: center; padding: 60px 30px;
max-width: 420px; margin: 0 auto;
}
.pro-gate-icon { font-size: 48px; margin-bottom: 16px; }
.pro-gate h3 { font-size: 22px; margin-bottom: 10px; }
.pro-gate p { font-size: 14px; color: var(--text-sm); margin-bottom: 24px; line-height: 1.6; }
/* ══════════════════════════════════════════════════════════════
SETTINGS VIEW
══════════════════════════════════════════════════════════════ */
.view-settings { max-width: 100%; overflow-x: hidden; }
.settings-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
margin-bottom: 16px;
box-shadow: var(--shadow);
}
.settings-section { margin-bottom: 20px; }
.settings-section:last-child { margin-bottom: 0; }
.settings-section h3 { font-size: 16px; margin-bottom: 12px; color: var(--text); }
.settings-section p { font-size: 14px; color: var(--text-sm); line-height: 1.6; }
/* Seller profile form */
.seller-form-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.seller-form-group label {
display: block; font-size: 12px; color: var(--text-sm); margin-bottom: 4px; font-weight: 500;
}
.seller-form-group .input-field {
width: 100%; padding: 8px 12px; border-radius: 6px;
border: 1px solid var(--border, #ddd); background: var(--card, #fafafa);
font-size: 14px; color: var(--text);
}
.seller-form-group .input-field:focus { border-color: var(--gold, #C8A055); outline: none; box-shadow: 0 0 0 2px rgba(200,160,85,.15); }
.seller-form-full { grid-column: 1 / -1; }
@media (max-width: 600px) {
.seller-form-grid { grid-template-columns: 1fr; }
}
.upgrade-card {
background: linear-gradient(135deg, #FDF0F2 0%, var(--gold-bg) 100%);
border: 1px solid var(--border-gold); border-radius: var(--radius);
padding: 24px; margin-bottom: 20px;
}
.price-card {
text-align: center; margin-bottom: 20px;
}
.price-amount {
font-family: 'Playfair Display', serif;
font-size: 36px; color: var(--burgundy); font-weight: 700;
}
.price-amount span { font-size: 16px; color: var(--text-sm); }
.feature-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.feature-item { font-size: 14px; color: var(--text); }
.btn-upgrade { margin-top: 16px; width: 100%; }
.btn-full { width: 100%; text-align: center; }
.payment-secure-note { font-size: 11px; color: var(--text-sm); margin-top: 10px; text-align: center; }
.promo-section { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.promo-toggle {
background: none; border: 1px dashed var(--border-gold);
border-radius: var(--radius-sm); color: var(--text-gold);
padding: 7px 16px; cursor: pointer; font-size: 13px;
transition: background .15s;
}
.promo-toggle:hover { background: var(--gold-bg); }
.promo-input-wrap { margin-top: 10px; }
.promo-input-row { display: flex; gap: 8px; }
.promo-input {
flex: 1; padding: 9px 12px; font-size: 13px;
border: 1px solid var(--border-gold); border-radius: var(--radius-sm);
background: var(--surface);
}
.btn-promo-submit {
background: var(--burgundy); color: #fff;
border: none; border-radius: var(--radius-sm);
padding: 9px 16px; cursor: pointer; font-size: 13px; font-weight: 500;
}
.promo-message { margin-top: 8px; font-size: 13px; }
/* ── 方案選擇卡片 ───────────────────────────────────────────── */
.plan-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.plan-card {
position: relative;
border: 1px solid var(--border); border-radius: var(--radius);
padding: 16px; background: var(--surface);
transition: border-color .15s, box-shadow .15s;
}
.plan-card:hover {
border-color: var(--burgundy);
box-shadow: 0 2px 8px rgba(128,0,32,.08);
}
.plan-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.plan-price {
font-family: 'Playfair Display', serif;
font-size: var(--fs-2xl); font-weight: 700; color: var(--burgundy);
margin-bottom: 4px;
}
.plan-price span { font-size: 14px; color: var(--text-sm); font-family: inherit; font-weight: 400; }
.plan-desc { font-size: 12px; color: var(--text-sm); margin-bottom: 12px; }
.plan-badge {
position: absolute; top: -8px; right: 12px;
background: var(--burgundy); color: #fff;
font-size: 11px; font-weight: 600;
padding: 2px 10px; border-radius: 10px;
}
.plan-badge-save { background: var(--ok); }
.plan-trial { border-color: var(--border-gold); background: var(--gold-bg); }
/* ── 設定頁訂閱資訊 ─────────────────────────────────────────── */
.sub-info-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.sub-info-row {
display: flex; justify-content: space-between; align-items: center;
font-size: 14px; padding: 4px 0;
}
/* ── Mobile: 方案卡片 & 訂閱資訊 ────────────────────────────── */
@media (max-width: 480px) {
.plan-card { padding: 14px; }
.plan-price { font-size: 22px; }
.plan-desc { font-size: 11px; }
.plan-badge { font-size: 10px; padding: 2px 8px; }
.sub-info-row { font-size: 13px; }
.sub-info-row span:last-child { text-align: right; max-width: 55%; }
/* 社群卡片行動裝置 */
.community-card { padding: 12px; }
.comm-card-actions { gap: 6px; }
.comm-card-actions button { font-size: 12px; padding: 5px 8px; }
/* 商城卡片 aspect-ratio 降級 */
.mkt-card-img { min-height: 120px; }
}
.promo-ok { color: var(--ok); }
.promo-error { color: var(--danger); }
.promo-loading { color: var(--text-sm); }
.payment-methods { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.pm-icon { font-size: 24px; cursor: help; }
.payment-loading { text-align: center; padding: 30px 20px; }
.spinner {
width: 32px; height: 32px; border-radius: 50%; margin: 0 auto 12px;
border: 3px solid var(--border); border-top-color: var(--burgundy);
animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ══════════════════════════════════════════════════════════════
ADMIN PANEL
══════════════════════════════════════════════════════════════ */
.view-admin {}
.admin-tabs {
display: flex; gap: 4px; flex-wrap: wrap;
margin-bottom: 20px;
border-bottom: 2px solid var(--border);
padding-bottom: 0;
}
.admin-tab {
font-size: 13px; padding: 9px 16px;
border: 1px solid transparent; border-bottom: none;
border-radius: 8px 8px 0 0;
background: var(--ivory); color: var(--text-sm);
cursor: pointer; margin-bottom: -2px;
transition: all .15s;
}
.admin-tab:hover { background: var(--surface); color: var(--burgundy); }
.admin-tab.active {
background: var(--surface); color: var(--burgundy);
border-color: var(--border); font-weight: 600;
border-bottom-color: var(--surface);
}
.admin-tab-content { display: block; }
.admin-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
margin-bottom: 16px;
box-shadow: var(--shadow);
}
.admin-card h3 { font-size: 16px; margin-bottom: 16px; color: var(--text); }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.admin-form-row { display: flex; flex-direction: column; gap: 4px; }
.admin-form-row label { font-size: 12px; font-weight: 600; color: var(--text-sm); }
.admin-form-row input, .admin-form-row select, .admin-form-row textarea { }
.input-field {
padding: 8px 12px; font-size: 14px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--ivory); color: var(--text);
width: 100%; transition: border-color .15s;
font-family: inherit;
}
.input-field:focus { outline: none; border-color: var(--gold); background: #fff; }
.admin-msg { margin-top: 10px; font-size: 13px; min-height: 20px; }
/* ── Admin sensory sliders ───────────────────────────────── */
.admin-sensory-header {
font-size: 13px; font-weight: 700; color: var(--text);
margin: 16px 0 10px; padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.admin-sensory-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px;
}
.admin-sensory-row {
display: flex; align-items: center; gap: 8px;
}
.admin-sensory-label {
font-size: 12px; font-weight: 600; min-width: 36px; flex-shrink: 0;
}
.admin-sensory-slider {
flex: 1; height: 4px; cursor: pointer;
}
.admin-sensory-val {
font-size: 12px; font-weight: 700; min-width: 26px;
text-align: right; color: var(--text);
}
@media (max-width: 600px) {
.admin-sensory-grid { grid-template-columns: 1fr; }
}
.admin-ok { color: var(--ok); }
.admin-err { color: var(--danger); }
.admin-info { color: var(--text-sm); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
text-align: left; padding: 9px 12px;
border-bottom: 2px solid var(--border);
color: var(--text-sm); font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .05em;
white-space: nowrap;
}
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--gold-bg); }
.row-inactive td { opacity: .5; }
.badge-active { background: #D4F0DF; color: #1A6B3D; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.badge-inactive { background: #FEF2F2; color: #B91C1C; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.badge-official { font-size: 11px; padding: 2px 8px; background: var(--gold-bg); color: var(--text-gold); border-radius: 8px; font-weight: 600; }
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; font-weight: 500; background: var(--surface); color: var(--text); transition: background .1s; }
.btn-sm:hover { background: var(--ivory-dk); }
.btn-danger { background: #FEF2F2; color: var(--danger); border-color: #FCA5A5; }
.btn-danger:hover { background: #FEE2E2; }
/* ══════════════════════════════════════════════════════════════
MODALS
══════════════════════════════════════════════════════════════ */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(22,13,18,.6);
display: flex; align-items: center; justify-content: center;
z-index: 1000; padding: 20px;
backdrop-filter: blur(4px);
}
.modal-card {
background: var(--surface);
border-radius: 16px;
width: 100%; max-width: 520px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(200,160,85,.2);
}
.modal-wide { max-width: 760px; }
.modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--border);
background: var(--surface);
border-radius: 16px 16px 0 0;
}
.modal-header h3 { font-size: 18px; }
.modal-body { padding: 20px 24px; }
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--border);
display: flex; justify-content: flex-end; gap: 10px;
background: var(--ivory);
border-radius: 0 0 16px 16px;
}
/* ── Share modal ─────────────────────────────────────────── */
.share-modal-card {
max-width: 480px; width: 94%;
}
.share-modal-body {
padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
}
.share-text-preview {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 14px 16px;
font-size: 12px; line-height: 1.75; color: var(--text-sm);
white-space: pre-wrap; word-break: break-word;
max-height: 240px; overflow-y: auto;
font-family: 'Courier New', monospace;
}
.share-actions {
display: flex; flex-wrap: wrap; gap: 8px;
}
.share-btn {
flex: 1; min-width: 120px; padding: 10px 14px;
border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600;
border: 1.5px solid var(--border); background: var(--bg); color: var(--text);
transition: all .15s; text-align: center;
}
.share-btn:hover { border-color: var(--gold); }
.share-btn-copy { border-color: rgba(200,160,85,.4); color: #b07d2e; background: var(--gold-bg); }
.share-btn-copy:hover { background: rgba(200,160,85,.2); }
.share-btn-img { border-color: rgba(64,145,108,.4); color: #276f4e; background: rgba(64,145,108,.07); }
.share-btn-img:hover { background: rgba(64,145,108,.15); }
.share-btn-fb { background: #1877F2; color: #fff; border-color: #1877F2; }
.share-btn-fb:hover { background: #1565c0; border-color: #1565c0; }
.share-hint {
font-size: 11px; color: var(--text-sm); line-height: 1.6; margin: 0;
padding: 8px 10px; background: var(--ivory); border-radius: 8px;
border-left: 3px solid var(--gold);
}
/* ── Recipe card share button ──────────────────────────────── */
.recipe-card-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.recipe-card-footer .recipe-score { flex-shrink: 0; }
.recipe-card-footer .badge-official { flex-shrink: 0; }
.recipe-card-footer-actions { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.recipe-share-btn {
padding: 3px 8px; border-radius: 8px; font-size: 11px; font-weight: 600;
border: 1px solid #1877F2; color: #1877F2; background: rgba(24,119,242,.07);
cursor: pointer; transition: all .15s; white-space: nowrap;
}
.recipe-share-btn:hover { background: #1877F2; color: #fff; }
.recipe-delete-btn {
padding: 3px 7px; border-radius: 8px; font-size: 12px;
border: 1px solid var(--err, #c0392b); color: var(--err, #c0392b);
background: rgba(192,57,43,.07); cursor: pointer; transition: all .15s;
line-height: 1.4; white-space: nowrap;
}
.recipe-delete-btn:hover { background: var(--err, #c0392b); color: #fff; }
.recipe-copy-btn {
padding: 3px 7px; border-radius: 8px; font-size: 12px;
border: 1px solid var(--gold, #C8A055); color: var(--gold, #C8A055);
background: rgba(200,160,85,.07); cursor: pointer; transition: all .15s;
line-height: 1.4; white-space: nowrap;
}
.recipe-copy-btn:hover { background: var(--gold, #C8A055); color: #fff; }
/* ── Ingredient restriction styles ────────────────────────── */
.picker-item-restricted {
opacity: 0.65; cursor: pointer;
background: rgba(230,57,70,.06);
border-left: 3px solid #e63946;
}
.picker-item-restricted:hover { background: rgba(230,57,70,.12); }
.picker-name-restricted { color: #e63946; font-weight: 600; }
.picker-restrict-badge {
font-size: 10px; font-weight: 700; color: #fff; background: #e63946;
padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.restriction-modal {
text-align: center; max-width: 380px; padding: 28px 24px;
}
.restriction-icon { font-size: 48px; margin-bottom: 8px; }
.restriction-title { color: #e63946; font-size: 18px; margin-bottom: 8px; }
.restriction-name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.restriction-reason {
font-size: 13px; color: var(--text-sm); line-height: 1.5;
background: #FEE2E2; padding: 10px 14px; border-radius: 8px;
}
/* ── Pet nutrition tips in balance panel ──────────────────── */
.pet-nutrition-panel {
margin-top: 12px; padding: 12px 14px;
background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
border: 1px solid #F59E0B; border-radius: 10px;
}
.pet-nutrition-title { font-size: 13px; font-weight: 700; color: #92400E; margin-bottom: 8px; }
.pet-nutrition-item {
font-size: 12px; color: #78350F; padding: 4px 0;
border-bottom: 1px dashed rgba(245,158,11,.3);
}
.pet-nutrition-item:last-child { border-bottom: none; }
.pet-nutrition-item strong { color: #92400E; }
/* ── 特殊分類冰淇淋平衡要點 panel ──────────────────────────── */
.balance-tips-panel {
margin: 10px 0 12px;
padding: 0;
background: linear-gradient(135deg, #EEF2FF, #EDE9FE);
border: 1px solid #A5B4FC;
border-radius: 10px;
overflow: hidden;
}
.balance-tips-title {
font-size: 13px; font-weight: 700; color: #3730A3;
padding: 10px 14px;
cursor: pointer;
list-style: none;
display: flex; align-items: center; gap: 6px;
user-select: none;
}
.balance-tips-title::-webkit-details-marker { display: none; }
.balance-tips-title::after {
content: '▼';
margin-left: auto;
font-size: 10px;
color: #6366F1;
transition: transform 0.2s;
}
.balance-tips-panel:not([open]) .balance-tips-title::after {
transform: rotate(-90deg);
}
.balance-tips-panel[open] .balance-tips-title {
border-bottom: 1px solid rgba(165,180,252,0.4);
}
.balance-tips-body {
padding: 8px 14px 10px;
}
.balance-tip-item {
display: flex; gap: 8px; align-items: flex-start;
padding: 6px 0;
font-size: 12px; line-height: 1.55; color: #312E81;
border-bottom: 1px dashed rgba(99,102,241,0.2);
}
.balance-tip-item:last-child { border-bottom: none; }
.balance-tip-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.balance-tip-content { flex: 1; }
.balance-tip-content strong {
color: #4338CA; font-weight: 700; margin-right: 6px;
}
/* ingredient detail modal */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.detail-col h4 { font-size: 13px; margin-bottom: 10px; color: var(--text-gold); text-transform: uppercase; letter-spacing: .05em; }
.detail-row {
display: flex; justify-content: space-between; align-items: center;
padding: 5px 0; border-bottom: 1px solid var(--border);
font-size: 13px;
}
.detail-row:last-child { border-bottom: none; }
.mini-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; margin: 0 8px; overflow: hidden; }
/* add/edit ingredient modal */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-col {}
.form-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-gold); margin-bottom: 10px; }
.form-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.form-row label { font-size: 11px; font-weight: 600; color: var(--text-sm); }
.form-row input, .form-row select {
padding: 7px 10px; font-size: 13px;
border: 1px solid var(--border); border-radius: 6px;
background: var(--ivory); color: var(--text);
font-family: inherit;
}
.form-row input:focus, .form-row select:focus { outline: none; border-color: var(--gold); background: #fff; }
/* ══════════════════════════════════════════════════════════════
TOAST
══════════════════════════════════════════════════════════════ */
.toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
background: #1A0E15; color: #fff;
padding: 12px 22px; border-radius: 99px;
font-size: 14px; font-weight: 500;
box-shadow: 0 8px 30px rgba(0,0,0,.3);
z-index: 9999; transition: transform .3s cubic-bezier(.34,1.56,.64,1);
white-space: nowrap;
border: 1px solid rgba(200,160,85,.3);
pointer-events: none; /* 不遮擋點擊 */
opacity: 0;
}
.toast.show {
transform: translateX(-50%) translateY(0);
pointer-events: auto;
opacity: 1;
animation: toastAutoHide 3.5s ease forwards; /* CSS 安全保障 */
}
@keyframes toastAutoHide {
0%, 80% { opacity: 1; transform: translateX(-50%) translateY(0); }
100% { opacity: 0; transform: translateX(-50%) translateY(100px); pointer-events: none; }
}
.toast-success { border-color: rgba(82,183,136,.5); background: #0F2418; }
.toast-error { border-color: rgba(199,53,66,.5); background: #2A0E10; }
.toast-info { border-color: rgba(200,160,85,.4); }
.toast-action {
background: none; border: 1px solid rgba(255,255,255,.4);
color: #fff; padding: 4px 12px; border-radius: 99px;
font-size: 12px; cursor: pointer; margin-left: 10px;
font-weight: 600; transition: background .15s;
}
.toast-action:hover { background: rgba(255,255,255,.15); }
/* ══════════════════════════════════════════════════════════════
UPGRADE MODAL STYLES
══════════════════════════════════════════════════════════════ */
.upgrade-modal .modal-header { background: linear-gradient(135deg, var(--burgundy-bg), var(--gold-bg)); }
.upgrade-modal .modal-header h3 { color: var(--burgundy); }
.btn-upgrade {
background: linear-gradient(135deg, var(--gold) 0%, #D4B870 100%) !important;
color: #1A0E15 !important;
font-weight: 700;
box-shadow: var(--shadow-gold) !important;
}
/* ══════════════════════════════════════════════════════════════
RADAR CHART (SVG)
══════════════════════════════════════════════════════════════ */
.sensory-radar { margin-top: 10px; }
.radar-bg { fill: var(--ivory-dk); }
.radar-grid { stroke: var(--border); stroke-width: .5; fill: none; }
.radar-fill { fill: rgba(123,21,40,.15); stroke: var(--burgundy); stroke-width: 1.5; }
/* ══════════════════════════════════════════════════════════════
SETTINGS PAGE
══════════════════════════════════════════════════════════════ */
.settings-row {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 0; border-bottom: 1px solid var(--border);
font-size: 14px;
}
.settings-row:last-child { border-bottom: none; }
.settings-row > span:first-child { color: var(--text-sm); }
.settings-row > span:last-child { font-weight: 500; }
.tier-badge {
font-size: 12px; padding: 3px 10px; border-radius: 99px; font-weight: 600;
}
.tier-badge.tier-pro { background: linear-gradient(135deg, var(--burgundy), var(--burgundy-lt)); color: #fff; }
.tier-badge.tier-free { background: var(--ivory-dk); color: var(--text-sm); }
.upgrade-section {
background: linear-gradient(135deg, var(--burgundy-bg) 0%, var(--gold-bg) 100%);
border: 1px solid var(--border-gold); border-radius: var(--radius);
padding: 20px; margin-bottom: 16px;
}
.upgrade-section h3 { margin-bottom: 10px; color: var(--burgundy); }
.upgrade-section .feature-list { margin-bottom: 14px; }
.upgrade-section .feature-item { padding: 4px 0; font-size: 14px; }
/* ══════════════════════════════════════════════════════════════
FLAVOR PAIRING VIEW
══════════════════════════════════════════════════════════════ */
/* ── 配對載入動畫 ── */
.pairing-loading {
display: flex; flex-direction: column; align-items: center;
justify-content: center; padding: 80px 20px; gap: 24px;
}
.pairing-loading-ring {
width: 58px; height: 58px; border-radius: 50%;
border: 3px solid var(--ivory-dk);
border-top-color: var(--gold);
border-right-color: var(--burgundy);
animation: spin 1s linear infinite;
}
.pairing-loading-label {
font-size: 14px; color: var(--text-sm);
letter-spacing: .04em;
}
.pairing-loading-dots::after {
content: '';
animation: pairing-dots 1.5s steps(4, end) infinite;
}
@keyframes pairing-dots {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
}
.pairing-loading-steps {
display: flex; gap: 8px; align-items: center;
}
.pairing-loading-step {
width: 8px; height: 8px; border-radius: 50%;
background: var(--ivory-dk);
animation: pairing-pulse 1.5s ease-in-out infinite;
}
.pairing-loading-step:nth-child(2) { animation-delay: .25s; }
.pairing-loading-step:nth-child(3) { animation-delay: .50s; }
@keyframes pairing-pulse {
0%, 100% { background: var(--ivory-dk); transform: scale(1); }
50% { background: var(--gold); transform: scale(1.4); }
}
.pairing-layout {
display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start;
}
.pairing-left {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow);
overflow: hidden; position: sticky; top: 10px;
}
.pairing-left-header {
padding: 14px 14px 10px; border-bottom: 1px solid var(--border);
}
.pairing-left-header h3 { font-size: 13px; color: var(--text-sm); margin-bottom: 6px; }
.pairing-base-badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; color: var(--text-gold);
background: rgba(200,160,85,0.12); border: 1px solid rgba(200,160,85,0.25);
border-radius: 20px; padding: 4px 10px;
}
.pairing-picker {
height: 420px; overflow-y: auto; padding: 6px;
}
.pairing-pick-item {
display: flex; align-items: center; gap: 7px;
padding: 8px 10px; border-radius: 6px; cursor: pointer;
font-size: 13px; color: var(--text); transition: background .12s;
}
.pairing-pick-item:hover { background: var(--gold-bg); }
.pairing-pick-item.selected {
background: linear-gradient(90deg, var(--burgundy), #9b1e30);
color: #fff; font-weight: 600;
}
.pairing-right {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}
.pairing-right-header {
margin-bottom: 14px;
}
.pairing-right-header h3 {
font-size: 16px; margin-bottom: 4px;
font-family: 'Playfair Display', serif;
}
.pairing-hint { font-size: 12px; color: var(--text-sm); margin: 0 0 10px; }
.pairing-selected-preview {
display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.pairing-sel-chip {
font-size: 11px; padding: 3px 10px;
background: rgba(200,160,85,0.15); border: 1px solid var(--gold);
color: var(--gold); border-radius: 20px; cursor: pointer;
transition: background .15s;
}
.pairing-sel-chip:hover { background: rgba(200,160,85,0.3); }
/* Result cards */
.pairing-results { display: flex; flex-direction: column; gap: 10px; }
.pairing-result-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; border-radius: 10px;
background: linear-gradient(135deg, rgba(26,15,20,0.6), var(--surface));
border: 1px solid var(--border);
cursor: pointer; transition: border-color .15s, transform .1s, box-shadow .15s;
}
.pairing-result-item:hover {
border-color: rgba(200,160,85,0.4);
transform: translateX(2px);
box-shadow: 0 4px 16px rgba(123,21,40,0.15);
}
.pairing-item-selected {
border-color: var(--gold) !important;
background: linear-gradient(135deg, rgba(200,160,85,0.12), rgba(26,15,20,0.6)) !important;
}
.pairing-rank {
min-width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%; font-size: 14px; font-weight: 700;
background: var(--border); color: var(--text-sm);
flex-shrink: 0;
}
.rank-gold { background: linear-gradient(135deg,#b8860b,#ffd700); color: #1a0f14; }
.rank-silver { background: linear-gradient(135deg,#888,#ccc); color: #1a0f14; }
.rank-bronze { background: linear-gradient(135deg,#8b5e3c,#cd7f32); color: #fff; }
.pairing-result-body { flex: 1; min-width: 0; }
.pairing-result-top {
display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
}
.pairing-result-name {
font-weight: 600; font-size: 14px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.pairing-cat-badge {
font-size: 11px; padding: 2px 7px; border-radius: 10px;
white-space: nowrap; font-weight: 500;
}
.pairing-score-track {
height: 6px; border-radius: 3px;
background: rgba(255,255,255,0.08);
overflow: hidden; margin-bottom: 7px;
}
.pairing-score-fill { height: 100%; border-radius: 3px; transition: width .5s ease; }
.pairing-result-bottom {
display: flex; align-items: center; justify-content: space-between;
}
.pairing-flavor-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pairing-flavor-dot {
font-size: 10px; padding: 2px 6px; border-radius: 8px; font-weight: 500;
}
.pairing-score-badge {
font-size: 18px; font-weight: 900; font-family: 'Playfair Display', serif;
min-width: 40px; text-align: right; line-height: 1;
}
.score-high { color: #f0d080; text-shadow: 0 0 10px rgba(200,160,85,0.6); }
.score-mid { color: #d4a84b; }
.score-low { color: #7a5a3a; }
.pairing-check {
min-width: 28px; height: 28px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700;
border: 2px solid var(--border); color: var(--text-sm);
transition: all .15s; flex-shrink: 0;
}
.pairing-check.checked {
background: var(--gold); border-color: var(--gold); color: #1a0f14;
}
.pairing-import-hint {
text-align: center; font-size: 12px; color: var(--text-sm);
padding: 10px 0; border-top: 1px dashed var(--border); margin-top: 4px;
}
/* ── Picker: dual-action items (base + free-add button) ──── */
.pairing-pick-item {
display: flex; align-items: center; gap: 4px;
padding: 6px 8px;
}
.pairing-pick-name {
flex: 1; cursor: pointer; font-size: 13px;
display: flex; align-items: center; gap: 5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pairing-pick-added {
background: rgba(64,145,108,.1);
border-left: 3px solid #40916c;
}
.pairing-free-add-btn {
flex-shrink: 0;
width: 22px; height: 22px; border-radius: 50%;
border: 1.5px solid var(--border); background: transparent;
color: var(--text-sm); font-size: 13px; font-weight: 700;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.pairing-free-add-btn:hover { border-color: var(--gold); color: var(--gold); }
.pairing-free-add-btn.active {
background: #40916c; border-color: #40916c; color: #fff; font-size: 10px;
}
/* ── Tab bar ─────────────────────────────────────────────── */
.pairing-tabs {
display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap;
}
.pairing-tab-btn {
padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 600;
border: 1.5px solid var(--border); background: var(--bg); color: var(--text-sm);
transition: all .15s; display: flex; align-items: center; gap: 5px;
}
.pairing-tab-btn:hover { border-color: var(--gold); color: var(--gold); }
.pairing-tab-btn.active {
background: var(--gold); color: #1a0f14; border-color: var(--gold);
}
.pairing-tab-badge {
background: rgba(0,0,0,.15); color: inherit;
border-radius: 10px; padding: 0 6px; font-size: 10px; font-weight: 700;
}
.pairing-tab-btn.active .pairing-tab-badge { background: rgba(0,0,0,.2); }
.pairing-tab-content { overflow-y: auto; flex: 1; }
/* ── Region flavor selector ──────────────────────────────── */
.region-selector {
margin-bottom: 14px; padding: 10px 12px; border-radius: 10px;
background: var(--surface); border: 1px solid var(--border);
}
.region-selector-label {
font-size: 11px; font-weight: 600; color: var(--text-sm);
margin-bottom: 8px; letter-spacing: 0.3px;
}
.region-btns-row {
display: flex; flex-wrap: wrap; gap: 6px;
}
.region-btn {
display: flex; align-items: center; gap: 4px;
padding: 5px 10px; border-radius: 20px; cursor: pointer;
font-size: 12px; font-weight: 600;
border: 1.5px solid var(--border); background: var(--bg);
color: var(--text-sm); transition: all .15s;
}
.region-btn:hover { border-color: var(--gold); color: var(--gold); }
.region-btn.active {
background: var(--gold); color: #1a0f14; border-color: var(--gold);
}
.region-flag { font-size: 14px; line-height: 1; }
.region-label { font-size: 11px; }
.region-desc-note {
margin-top: 7px; font-size: 11px; color: var(--text-sm);
padding: 5px 8px; background: var(--gold-bg); border-radius: 6px;
border-left: 2px solid var(--gold);
}
/* ── Combo region note ───────────────────────────────────── */
.combo-region-note {
font-size: 11px; line-height: 1.5; color: var(--text-sm);
padding: 6px 8px; border-radius: 6px;
background: rgba(200,160,85,.08); border: 1px solid rgba(200,160,85,.2);
margin-top: -2px;
}
/* ── Pairing view tabs (combos / free) ───────────────────── */
.pairing-view-tabs {
display: flex; gap: 6px; margin-bottom: 14px;
}
.pairing-view-tab {
flex: 1; padding: 8px 12px; border-radius: 10px; cursor: pointer;
font-size: 13px; font-weight: 600; text-align: center;
border: 1.5px solid var(--border); background: var(--surface);
color: var(--text-sm); transition: all .15s;
display: flex; align-items: center; justify-content: center; gap: 5px;
}
.pairing-view-tab:hover { border-color: var(--gold); color: var(--gold); }
.pairing-view-tab.active {
background: var(--gold); color: #1a0f14; border-color: var(--gold);
}
.pairing-view-tab .pairing-tab-badge {
background: rgba(0,0,0,.15); color: inherit;
border-radius: 10px; padding: 0 6px; font-size: 10px; font-weight: 700;
}
/* ── Free-pick list ──────────────────────────────────────── */
.pairing-free-section { display: flex; flex-direction: column; gap: 10px; }
/* Header */
.free-pick-header { display: flex; flex-direction: column; gap: 2px; }
.free-pick-title { font-size: 15px; font-weight: 700; color: var(--text); }
.free-pick-hint { font-size: 12px; color: var(--text-sm); }
/* Search bar */
.free-search-wrap {
display: flex; align-items: center; gap: 7px;
background: var(--surface); border: 1.5px solid var(--border);
border-radius: 10px; padding: 6px 10px;
transition: border-color .15s;
}
.free-search-wrap:focus-within { border-color: var(--gold); }
.free-search-icon { font-size: 14px; flex-shrink: 0; }
.free-search-input {
flex: 1; border: none; background: transparent; outline: none;
font-size: 13px; color: var(--text);
}
.free-search-clear {
flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
border: 1px solid var(--border); background: transparent;
color: var(--text-sm); font-size: 11px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.free-search-clear:hover { border-color: #ef4444; color: #ef4444; }
/* Selected chips */
.free-chips-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 8px 10px; border-radius: 8px;
background: rgba(64,145,108,.07); border: 1px solid rgba(64,145,108,.3);
}
.free-chips-label {
font-size: 11px; font-weight: 600; color: #40916c; flex-shrink: 0;
}
.free-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;
background: rgba(64,145,108,.15); color: var(--text); border: 1px solid rgba(64,145,108,.4);
}
.free-chip-remove {
width: 14px; height: 14px; border-radius: 50%; border: none;
background: rgba(64,145,108,.3); color: #40916c; font-size: 11px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
padding: 0; line-height: 1;
}
.free-chip-remove:hover { background: #ef4444; color: #fff; }
/* Ingredient list */
.pairing-free-list {
display: flex; flex-direction: column; gap: 4px;
max-height: 340px; overflow-y: auto;
padding-right: 2px;
}
.pairing-free-item {
display: flex; align-items: center; gap: 7px;
padding: 7px 10px; border-radius: 8px; cursor: pointer;
background: var(--surface); border: 1px solid var(--border);
transition: all .15s; user-select: none;
}
.pairing-free-item:hover { border-color: var(--gold); background: var(--gold-bg); }
.pairing-free-item.pairing-item-selected {
border-color: #40916c; background: rgba(64,145,108,.08);
}
.pairing-free-name {
flex: 0 0 auto; max-width: 110px; font-size: 13px; font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.free-stars {
font-size: 11px; letter-spacing: -1px; flex-shrink: 0;
}
.free-check-mark {
flex-shrink: 0; font-size: 13px; font-weight: 700;
color: #40916c; width: 16px; text-align: center;
}
/* Analysis separator */
.free-analysis-sep {
text-align: center; font-size: 11px; color: var(--text-sm);
padding: 6px 0; letter-spacing: 1px;
}
/* Hint box (no selection yet) */
.free-hint-box {
display: flex; align-items: flex-start; gap: 10px;
padding: 14px; border-radius: 10px;
background: var(--surface); border: 1px dashed var(--border);
font-size: 13px; color: var(--text-sm); line-height: 1.6;
}
/* ── Blend analysis panel ────────────────────────────────── */
.blend-analysis-panel { display: flex; flex-direction: column; gap: 10px; }
.btn-import-calc {
width: 100%; margin-top: 12px;
font-size: 14px; padding: 12px 16px;
border-radius: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 480px) {
.btn-import-calc {
font-size: 13px;
padding: 10px 14px;
min-height: 40px;
}
}
.blend-score-header {
display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.blend-score-label { font-size: 12px; color: var(--text-sm); flex: 1; }
.blend-score-pill {
padding: 3px 12px; border-radius: 12px; font-size: 18px; font-weight: 800;
}
.blend-score-pill.score-high { background: rgba(200,160,85,.2); color: var(--text-gold); }
.blend-score-pill.score-mid { background: rgba(176,125,46,.15); color: #b07d2e; }
.blend-score-pill.score-low { background: rgba(107,58,42,.15); color: #a05a3a; }
.blend-ing-list { display: flex; flex-direction: column; gap: 6px; }
.blend-ing-row {
display: flex; align-items: center; gap: 6px;
padding: 6px 8px; border-radius: 6px; background: var(--surface);
border: 1px solid var(--border);
}
.blend-ing-name {
flex: 0 0 auto; max-width: 110px; font-size: 12px; font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.blend-remove-btn {
flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
border: 1px solid var(--border); background: transparent;
color: var(--text-sm); font-size: 10px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.blend-remove-btn:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.1); }
.blend-radar-wrap {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 12px 0 4px;
}
.blend-radar-legend {
display: flex; align-items: center; gap: 5px;
font-size: 11px; color: var(--text-sm);
}
.blend-legend-dot {
display: inline-block; width: 12px; height: 12px; border-radius: 50%;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════
VARIETY COMPARE（品種比較）
══════════════════════════════════════════════════════════════ */
.compare-section { padding: 0; }
.compare-header h3 { margin: 0 0 4px; font-size: 18px; }
.compare-desc { font-size: 12px; color: var(--text-sm); margin: 0 0 12px; }
.compare-group-selector {
display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.compare-group-btn {
padding: 6px 14px; border: 1.5px solid #ddd; border-radius: 8px;
background: #fff; font-size: 13px; cursor: pointer;
transition: all .15s;
}
.compare-group-btn:hover { border-color: var(--gold); background: var(--gold-bg); }
.compare-group-btn.active {
border-color: var(--gold); background: var(--gold);
color: #fff; font-weight: 600;
}
.compare-empty {
text-align: center; padding: 40px 20px;
color: var(--text-sm); font-size: 13px; line-height: 1.8;
}
.compare-body { display: flex; flex-direction: column; gap: 20px; }
.compare-radar-wrap {
background: #1a1410; border-radius: 12px; padding: 16px;
text-align: center; overflow: hidden;
}
.compare-radar-svg {
display: block; margin: 0 auto; width: 300px; height: 300px; max-width: 100%;
}
.compare-radar-legend {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 10px; margin-bottom: 10px;
}
.compare-legend-item {
display: flex; align-items: center; gap: 4px;
font-size: 12px; color: #d4c8a8; font-weight: 500;
}
.compare-legend-dot {
display: inline-block; width: 10px; height: 10px;
border-radius: 50%; flex-shrink: 0;
}
.compare-table-wrap { }
.compare-table-wrap h4 { font-size: 14px; margin: 0 0 8px; }
.compare-table-scroll { overflow-x: auto; }
.compare-table {
width: 100%; border-collapse: collapse; font-size: 12px;
}
.compare-table th, .compare-table td {
padding: 6px 10px; text-align: center;
border-bottom: 1px solid #eee;
}
.compare-table th {
background: #f9f6f0; font-weight: 600;
position: sticky; top: 0; font-size: 11px;
white-space: nowrap;
}
.compare-table th .compare-legend-dot {
width: 8px; height: 8px; vertical-align: middle; margin-right: 3px;
}
.compare-tag-cell {
text-align: left !important; white-space: nowrap; font-weight: 500;
}
.compare-tag-dot {
display: inline-block; width: 8px; height: 8px;
border-radius: 50%; margin-right: 4px; vertical-align: middle;
}
.compare-cell-max {
font-weight: 700; color: var(--text-gold);
background: rgba(200,160,85,0.06);
}
/* ── Compare: sub-description ── */
.compare-sub-desc {
font-size: 11px; color: var(--text-sm); margin: 0 0 10px; line-height: 1.4;
}
/* ── Compare: Fingerprint Cards ── */
.compare-fp-section { margin-bottom: 4px; }
.compare-fp-section h4 { font-size: 14px; margin: 0 0 4px; }
.compare-fp-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.compare-fp-card {
background: var(--surface); border: 1.5px solid var(--border);
border-radius: 10px; padding: 12px 14px;
border-left: 3px solid var(--card-accent, var(--gold));
transition: box-shadow .15s;
}
.compare-fp-card:hover {
box-shadow: 0 2px 12px rgba(200,160,85,0.10);
}
.fp-card-head {
display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.fp-card-dot {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.fp-card-name {
font-size: 13px; font-weight: 700; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp-card-personality {
font-size: 12px; color: var(--text-gold); font-weight: 500;
margin-bottom: 8px; letter-spacing: 0.3px;
}
.fp-card-traits {
display: flex; flex-wrap: wrap; gap: 5px;
}
.fp-trait {
display: inline-flex; align-items: center; gap: 3px;
font-size: 11px; font-weight: 600;
padding: 2px 7px; border-radius: 6px;
background: rgba(200,160,85,0.06);
}
.fp-trait.up { color: #2e7d32; background: rgba(46,125,50,0.07); }
.fp-trait.down { color: #c62828; background: rgba(198,40,40,0.06); }
.fp-trait-arrow { font-size: 11px; }
.fp-trait-dot {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.fp-trait-none {
font-size: 11px; color: var(--text-sm); font-style: italic;
}
/* ── Compare: Key Differentiators ── */
.compare-keydiff-section { margin-bottom: 4px; }
.compare-keydiff-section h4 { font-size: 14px; margin: 0 0 4px; }
.compare-keydiff-list {
display: flex; flex-direction: column; gap: 10px;
}
.keydiff-group {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 10px 14px;
}
.keydiff-label {
display: flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 700; margin-bottom: 8px;
}
.keydiff-stars {
font-size: 10px; color: var(--text-gold); margin-left: auto;
letter-spacing: 1px;
}
.keydiff-bar-row {
display: flex; align-items: center; gap: 8px; padding: 2.5px 0;
}
.keydiff-bar-name {
width: 80px; flex-shrink: 0; font-size: 11px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.keydiff-bar-track {
flex: 1; height: 16px; background: var(--border); border-radius: 8px;
overflow: hidden;
}
.keydiff-bar-fill {
height: 100%; border-radius: 8px; transition: width 0.5s ease;
min-width: 2px;
}
.keydiff-bar-val {
width: 30px; flex-shrink: 0; font-size: 11px; font-weight: 700;
text-align: right; color: var(--text);
}
/* ── Compare: desktop/mobile visibility ── */
.compare-mobile-only { display: none; }
/* ── Compare: bar chart (mobile) ── */
.compare-bars-wrap h4 { font-size: 14px; margin: 0 0 10px; }
.cmp-bar-group {
margin-bottom: 12px; padding: 8px 10px;
background: var(--surface); border-radius: 8px; border: 1px solid var(--border);
}
.cmp-bar-label {
font-size: 12px; font-weight: 600; margin-bottom: 6px;
display: flex; align-items: center; gap: 4px;
}
.cmp-bar-row {
display: flex; align-items: center; gap: 6px; padding: 2px 0;
}
.cmp-bar-name {
width: 64px; flex-shrink: 0; font-size: 11px; color: var(--text-sm);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-bar-track {
flex: 1; height: 14px; background: var(--border); border-radius: 7px; overflow: hidden;
}
.cmp-bar-fill {
height: 100%; border-radius: 7px; transition: width 0.4s ease;
}
.cmp-bar-val {
width: 28px; flex-shrink: 0; font-size: 11px; font-weight: 600;
text-align: right; color: var(--text);
}
@media (max-width: 720px) {
.compare-desktop-only { display: none; }
.compare-mobile-only { display: block; }
.compare-radar-wrap { padding: 10px 8px; border-radius: 10px; }
.compare-radar-svg { width: 100%; height: auto; }
.compare-radar-legend { gap: 6px; margin-bottom: 8px; }
.compare-legend-item { font-size: 11px; }
.compare-group-btn { padding: 5px 10px; font-size: 12px; }
.compare-fp-grid { grid-template-columns: 1fr; }
.keydiff-bar-name { width: 64px; }
}
/* ══════════════════════════════════════════════════════════════
FLAVOR PAIRING — COMBO CARDS（科學風味配對組合卡片）
══════════════════════════════════════════════════════════════ */
/* Header above the 3 cards */
.pairing-combos-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.pairing-combos-title {
font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px;
}
.pairing-combos-sub {
font-size: 11px; color: var(--text-sm);
}
.pairing-combos-swipe-hint {
display: none;
}
.combo-ing-detail-row {
padding: 2px 8px 5px 22px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.pairing-regen-btn {
padding: 6px 14px; border-radius: 8px; cursor: pointer;
border: 1.5px solid var(--border); background: var(--bg); color: var(--text-sm);
font-size: 12px; white-space: nowrap; transition: all .15s; flex-shrink: 0;
}
.pairing-regen-btn:hover { border-color: var(--gold); color: var(--gold); }
/* 3-column grid */
.pairing-combos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 1100px) { .pairing-combos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .pairing-combos-grid { grid-template-columns: 1fr; } }
/* Individual combo card */
.combo-card {
border: 1.5px solid var(--border);
border-radius: 12px;
padding: 14px;
background: var(--card-bg);
display: flex; flex-direction: column; gap: 10px;
transition: box-shadow .2s;
}
.combo-card:hover { box-shadow: 0 4px 20px rgba(200,160,85,.15); }
.combo-card-classic { border-color: #C8A05540; }
.combo-card-contrast { border-color: #7db36a40; }
.combo-card-creative { border-color: #9b7fd440; }
/* Card top row: badge/chip + score block */
.combo-card-top {
display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.combo-badge-wrap { display: flex; align-items: center; gap: 6px; }
.combo-badge { font-size: 22px; line-height: 1; }
.combo-style-chip {
padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;
}
.combo-chip-classic { background: #C8A05520; color: var(--text-gold); border: 1px solid #C8A05540; }
.combo-chip-contrast { background: #7db36a20; color: #7db36a; border: 1px solid #7db36a40; }
.combo-chip-creative { background: #9b7fd420; color: #9b7fd4; border: 1px solid #9b7fd440; }
.combo-score-block { text-align: right; flex-shrink: 0; }
.combo-stars { margin-bottom: 2px; }
.combo-score-row { display: flex; align-items: baseline; gap: 4px; justify-content: flex-end; }
.combo-score-num { font-size: 22px; font-weight: 800; line-height: 1; }
.combo-score-lbl { font-size: 10px; font-weight: 600; }
/* Score progress bar */
.combo-score-bar-wrap {
height: 5px; background: var(--bg); border-radius: 3px; overflow: hidden;
}
.combo-score-bar { height: 100%; border-radius: 3px; transition: width .6s ease; }
/* Flavor tags row */
.combo-flavor-tags-row { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.combo-flavor-tag {
padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 500;
}
/* Ingredient list */
.combo-ingredients-list { display: flex; flex-direction: column; gap: 0; }
.combo-ing-row {
display: flex; align-items: center; gap: 6px;
padding: 5px 6px; border-radius: 6px; font-size: 12px;
}
.combo-ing-row:hover { background: var(--gold-bg); }
.combo-ing-base { background: var(--bg); font-weight: 600; }
.combo-ing-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-ing-stars { flex-shrink: 0; }
.combo-main-badge {
padding: 1px 5px; border-radius: 6px; font-size: 10px; font-weight: 600;
background: var(--gold); color: #000; flex-shrink: 0;
}
.combo-swap-btn {
flex-shrink: 0; padding: 1px 5px; border-radius: 5px; cursor: pointer;
border: 1px solid var(--border); background: transparent; color: var(--text-sm);
font-size: 12px; transition: all .15s;
}
.combo-swap-btn:hover { border-color: var(--gold); color: var(--gold); }
/* Swap dropdown panel */
.combo-swap-panel {
background: var(--card-bg); border: 1.5px solid var(--gold);
border-radius: 8px; margin: 2px 0 4px; overflow: hidden;
}
.swap-panel-inner { padding: 8px; }
.swap-panel-title { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.swap-search-input {
width: 100%; box-sizing: border-box;
padding: 6px 10px; margin-bottom: 6px;
border: 1.5px solid var(--border); border-radius: 7px;
font-size: 12px; color: var(--text); background: var(--bg);
outline: none; transition: border-color .14s;
}
.swap-search-input:focus { border-color: var(--gold); }
.swap-search-input::placeholder { color: var(--text-sm); }
.swap-alternatives { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.swap-alt-item {
display: flex; align-items: center; gap: 6px;
padding: 5px 6px; border-radius: 5px; cursor: pointer; font-size: 12px;
}
.swap-alt-item:hover { background: var(--gold-bg); }
.swap-alt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swap-panel-hint { font-size: 10px; color: var(--text-sm); text-align: center; padding-top: 5px; }
/* Mini radar chart */
.combo-radar-wrap {
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.combo-radar-legend {
display: flex; gap: 10px; font-size: 10px; color: var(--text-sm);
}
/* Science note */
.combo-science-note {
font-size: 11px; color: var(--text-sm); line-height: 1.5;
background: var(--bg); padding: 6px 8px; border-radius: 6px;
border-left: 3px solid var(--gold);
}
/* Use button */
.combo-use-btn {
width: 100%; margin-top: auto; font-size: 13px; padding: 10px;
}
/* Empty state for pairing */
.pairing-empty { padding: 60px 20px; }
/* ══════════════════════════════════════════════════════════════
COST CALCULATOR (PRO)
══════════════════════════════════════════════════════════════ */
.cost-panel {
padding: 14px 18px; border-top: 1px solid var(--border);
background: linear-gradient(to bottom, var(--gold-bg), var(--surface));
}
.cost-panel-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 12px;
}
.cost-panel-title { font-weight: 600; font-size: 14px; }
.cost-total {
font-family: 'Playfair Display', serif; font-size: 20px;
color: var(--burgundy); font-weight: 700;
}
.cost-row {
display: flex; align-items: center; justify-content: space-between;
padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--border);
gap: 8px;
}
.cost-row:last-child { border-bottom: none; }
.cost-row-name { flex: 1; color: var(--text-sm); }
.cost-input-wrap { display: flex; align-items: center; gap: 4px; }
.cost-input {
width: 68px; text-align: right; padding: 4px 6px; font-size: 12px;
border: 1px solid var(--border); border-radius: 5px;
background: var(--ivory); color: var(--text);
}
.cost-input:focus { outline: none; border-color: var(--gold); }
.cost-unit { font-size: 11px; color: var(--text-sm); white-space: nowrap; }
.cost-subtotal { font-weight: 600; color: var(--text); min-width: 50px; text-align: right; }
.cost-per100 { font-size: 11px; color: var(--text-sm); }
/* ══════════════════════════════════════════════════════════════
LABEL EXPORT MODAL (PRO) — 台灣 114 年版
══════════════════════════════════════════════════════════════ */
/* Modal override: wider 2-column layout with independent column scrolling */
.label-modal-overlay .modal-card,
.label-modal-card {
max-width: 820px !important;
width: 95vw;
max-height: 90vh;
overflow: hidden; /* block card-level scroll */
display: flex;
flex-direction: column;
}
.label-modal-overlay .modal-card > .modal-header,
.label-modal-card > .modal-header {
flex-shrink: 0; /* header never squishes */
}
/* GL-UX-06: 標籤 modal 同步按鈕 + 估算值警示 */
.label-modal-header-actions {
display: flex; align-items: center; gap: 8px;
}
.label-sync-btn {
white-space: nowrap; padding: 6px 12px; font-size: 12px; font-weight: 600;
}
.label-estimate-warning {
display: flex; align-items: flex-start; gap: 6px;
padding: 8px 16px; background: #f0f9ff; border-bottom: 1px solid #bae6fd;
font-size: 11.5px; color: #075985; line-height: 1.5; flex-shrink: 0;
}
.label-estimate-warning .lew-icon { font-size: 14px; }
.label-estimate-warning .lew-text { flex: 1; }
.label-modal-body {
display: grid;
grid-template-columns: 280px 1fr;
gap: 0;
flex: 1; /* fill remaining card height */
min-height: 0; /* critical: allow flex child to shrink */
overflow: hidden; /* clip; columns scroll individually */
}
/* Left settings panel */
.label-settings-panel {
border-right: 1px solid var(--border);
overflow-y: auto;
overflow-x: hidden;
padding: 16px;
background: var(--surface);
height: 100%; /* fill grid row height */
box-sizing: border-box;
}
.label-settings-section {
margin-bottom: 18px;
}
.label-settings-section h4 {
font-size: 12px; font-weight: 700; color: var(--text-gold);
text-transform: uppercase; letter-spacing: .5px;
margin-bottom: 10px; padding-bottom: 4px;
border-bottom: 1px solid var(--border);
}
.ls-label {
display: flex; flex-direction: column; gap: 4px;
font-size: 12px; color: var(--text-sm); margin-bottom: 10px;
}
.ls-hint { font-size: 10px; color: var(--text-sm); opacity: .7; }
.ls-input {
padding: 6px 8px; border-radius: 4px;
border: 1px solid var(--border); background: var(--bg);
color: var(--text); font-size: 12px;
}
.ls-input:focus { outline: none; border-color: var(--gold); }
.ls-producer-toggle {
display: flex; gap: 4px; margin-bottom: 4px;
}
.ls-ptoggle-btn {
flex: 1; padding: 5px 0; border-radius: 4px;
border: 1px solid var(--border); background: var(--bg);
color: var(--text-sm); font-size: 11px; cursor: pointer;
transition: all .15s;
}
.ls-ptoggle-btn.active {
background: var(--gold); color: #fff; border-color: var(--gold);
font-weight: 600;
}
.ls-ptoggle-btn:not(.active):hover { border-color: var(--gold); color: var(--gold); }
/* ── Label Preset Bar ── */
.ls-preset-bar-wrap {
display: flex; align-items: center; gap: 10px;
padding: 8px 16px; border-bottom: 1px solid var(--border);
background: var(--card); flex-wrap: wrap;
position: relative;
}
.ls-preset-actions { flex-shrink: 0; }
.ls-preset-save-btn {
padding: 5px 12px; border-radius: 6px;
border: 1px solid var(--gold); background: transparent;
color: var(--gold); font-size: 12px; cursor: pointer;
font-weight: 600; transition: all .15s;
}
.ls-preset-save-btn:hover { background: var(--gold); color: #fff; }
.ls-preset-list {
display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-height: 28px;
align-items: center;
}
.ls-preset-empty { font-size: 11px; color: var(--text-sm); opacity: .6; }
.ls-saved-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px 3px 10px; border-radius: 14px;
background: var(--bg); border: 1px solid var(--border);
font-size: 12px; cursor: pointer; transition: all .15s;
}
.ls-saved-chip:hover { border-color: var(--gold); background: rgba(191,155,48,.08); }
.ls-saved-name { cursor: pointer; }
.ls-saved-del {
font-size: 10px; color: var(--text-sm); opacity: .5;
cursor: pointer; padding: 0 2px; line-height: 1;
}
.ls-saved-del:hover { opacity: 1; color: #e63946; }
/* ── v290 已儲存標籤 picker popover ── */
.ls-saved-picker-btn {
display: inline-flex; align-items: center; gap: 4px;
}
.ls-saved-count {
font-size: 11px; opacity: .8;
font-weight: 500;
}
.ls-saved-picker-popover {
position: absolute;
top: calc(100% - 1px);
left: 16px;
right: 16px;
z-index: 30;
max-height: 380px;
display: flex;
flex-direction: column;
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,.18);
padding: 10px 10px 6px;
overflow: hidden;
}
.ls-saved-picker-popover[hidden] { display: none; }
.ls-saved-search {
width: 100%; box-sizing: border-box;
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg);
color: var(--text);
font-size: 13px;
margin-bottom: 8px;
}
.ls-saved-search:focus { outline: none; border-color: var(--gold); }
.ls-saved-tabs {
display: flex; gap: 4px;
border-bottom: 1px solid var(--border);
margin: 0 -4px 6px;
padding: 0 4px;
}
.ls-saved-tab {
flex: 1;
padding: 6px 8px;
border: none;
background: transparent;
color: var(--text-sm);
font-size: 12px;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all .15s;
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.ls-saved-tab:hover { color: var(--text); }
.ls-saved-tab.active {
color: var(--gold);
border-bottom-color: var(--gold);
font-weight: 600;
}
.ls-saved-tab-cnt {
display: inline-block;
min-width: 18px;
padding: 1px 5px;
border-radius: 9px;
background: var(--bg);
border: 1px solid var(--border);
font-size: 10px;
text-align: center;
line-height: 1.3;
}
.ls-saved-tab.active .ls-saved-tab-cnt {
background: rgba(191,155,48,.15);
border-color: rgba(191,155,48,.4);
color: var(--gold);
}
.ls-saved-tab-pane {
flex: 1;
overflow-y: auto;
max-height: 260px;
padding: 2px 0;
}
.ls-saved-tab-pane[hidden] { display: none; }
.ls-saved-row {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px;
border-radius: 6px;
font-size: 12px;
transition: background .15s;
}
.ls-saved-row + .ls-saved-row { border-top: 1px solid var(--border); }
.ls-saved-row:hover { background: rgba(191,155,48,.06); }
.ls-saved-row-icon {
font-size: 14px;
flex-shrink: 0;
width: 18px; text-align: center;
}
.ls-saved-row-name {
flex: 1; min-width: 0;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text);
}
.ls-saved-row-name:hover { color: var(--gold); }
.ls-saved-row-meta {
font-size: 10px;
color: var(--text-sm);
opacity: .7;
flex-shrink: 0;
white-space: nowrap;
}
.ls-saved-row-del {
background: transparent; border: none;
color: var(--text-sm); opacity: .5;
cursor: pointer;
padding: 2px 4px;
line-height: 1;
border-radius: 4px;
flex-shrink: 0;
}
.ls-saved-row-del:hover { opacity: 1; color: #e63946; background: rgba(230,57,70,.08); }
.ls-saved-empty {
padding: 18px 12px;
text-align: center;
font-size: 12px;
color: var(--text-sm);
opacity: .7;
background: var(--bg);
border-radius: 6px;
margin: 4px 0;
}
@media (max-width: 640px) {
.ls-saved-picker-popover {
left: 8px;
right: 8px;
max-height: 70vh;
}
.ls-saved-row-meta { display: none; }
}
.ls-number { width: 90px; }
.ls-textarea {
padding: 6px 8px; border-radius: 4px;
border: 1px solid var(--border); background: var(--bg);
color: var(--text); font-size: 11px;
min-height: 56px; resize: vertical; width: 100%; box-sizing: border-box;
}
.ls-textarea:focus { outline: none; border-color: var(--gold); }
.ls-slider-row {
display: flex; align-items: center; gap: 10px;
}
.ls-slider-row input[type=range] { flex: 1; accent-color: var(--gold); }
.ls-slider-row span { font-size: 11px; min-width: 36px; text-align: right; color: var(--text-gold); }
/* Format toggle (A/B) */
.ls-format-toggle {
display: flex; gap: 6px; margin-top: 2px;
}
.ls-fmt-btn {
flex: 1; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 600;
border: 1.5px solid var(--border); background: var(--bg); color: var(--text-sm);
transition: all .15s;
}
.ls-fmt-btn:hover { border-color: var(--gold); color: var(--gold); }
.ls-fmt-btn.active {
background: var(--gold); color: #000; border-color: var(--gold);
}
/* Layout toggle (single / side / split) */
.ls-layout-toggle {
display: flex; gap: 6px; margin-top: 2px;
}
.ls-layout-btn {
flex: 1; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 600;
border: 1.5px solid var(--border); background: var(--bg); color: var(--text-sm);
transition: all .15s; line-height: 1.4;
}
.ls-layout-btn span { font-weight: 400; font-size: 10px; }
.ls-layout-btn:hover { border-color: var(--gold); color: var(--gold); }
.ls-layout-btn.active {
background: var(--gold); color: #000; border-color: var(--gold);
}
/* ── Side-by-side label layout ─────────────────────────── */
.tw-label-side {
display: flex !important;
align-items: flex-start;
gap: 0;
}
.tw-label-side-left {
flex: 1;
}
.tw-label-side-divider {
width: 1px; background: #000;
margin: 0 8px; align-self: stretch;
}
.tw-label-side-right {
flex: 1;
padding-top: 2px;
}
/* ── Split (two separate labels) ───────────────────────── */
.tw-label-split-gap {
height: 16px;
border-top: 1px dashed #bbb;
margin: 12px 0 4px;
position: relative;
}
.tw-label-split-gap::before {
content: '✂';
position: absolute;
left: 50%; top: -10px;
transform: translateX(-50%);
background: #fff; padding: 0 4px;
font-size: 13px; color: #999;
}
/* Date input row: text field + calendar picker side by side */
.ls-date-row {
display: flex; gap: 4px; align-items: center; margin-top: 2px;
}
.ls-date-text { flex: 1; min-width: 0; }
.ls-date-picker {
flex: 0 0 auto; width: 30px; padding: 4px 2px;
border: 1px solid var(--border); border-radius: 6px;
background: var(--bg); color: var(--text); cursor: pointer;
font-size: 11px; text-align: center;
}
.ls-date-picker::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
/* Serving size presets */
.ls-serving-presets {
display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px;
}
.ls-preset-btn {
padding: 3px 10px; border-radius: 12px; cursor: pointer; font-size: 11px;
border: 1px solid var(--border); background: var(--bg); color: var(--text-sm);
transition: all .15s;
}
.ls-preset-btn:hover { border-color: var(--gold); color: var(--gold); }
.ls-preset-btn.active {
background: var(--gold); color: #000; border-color: var(--gold);
}
/* Hint block */
.ls-hint-block {
background: rgba(212,175,55,.08); border-left: 3px solid var(--gold);
border-radius: 0 6px 6px 0; padding: 7px 10px;
font-size: 11px; color: var(--text-sm); line-height: 1.6;
margin-top: 4px;
}
/* Right preview panel */
.label-preview-panel {
display: flex; flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
height: 100%; /* fill grid row height */
box-sizing: border-box;
}
.label-preview-header {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 16px; border-bottom: 1px solid var(--border);
font-size: 13px; font-weight: 600; background: var(--surface);
position: sticky; top: 0; z-index: 2;
}
.label-preview-area {
padding: 24px; display: flex; justify-content: center;
background: #e8e4de;
flex: 1;
overflow-x: auto;
}
.label-preview-note {
font-size: 11px; color: var(--text-sm); padding: 10px 16px;
border-top: 1px solid var(--border); background: var(--surface);
line-height: 1.5;
}
/* ── Taiwan Nutrition Label ────────────────────── */
.tw-label {
background: #fff; color: #000;
font-family: "Noto Sans TC", Arial, sans-serif;
font-size: 12px; line-height: 1.4;
border: 2px solid #000;
padding: 6px 8px;
box-sizing: border-box;
width: 280px; /* default, overridden by inline style */
}
.tw-label-product {
font-size: 1.1em; font-weight: 900;
text-align: center; padding-bottom: 4px;
border-bottom: 1px solid #000; margin-bottom: 4px;
}
.tw-label-title {
font-size: 1.8em; font-weight: 900; letter-spacing: 2px;
border-bottom: 8px solid #000;
padding-bottom: 2px; margin-bottom: 4px;
}
.tw-label-serving-row {
display: flex; justify-content: space-between;
font-size: .9em;
border-bottom: 4px solid #000;
padding-bottom: 3px; margin-bottom: 0;
}
.tw-label-table {
width: 100%; border-collapse: collapse;
font-size: .95em;
}
.tw-label-table thead tr th {
font-size: .8em; font-weight: 600;
border-bottom: 1px solid #000;
padding: 2px 2px; text-align: center;
}
.tw-label-table thead tr th:first-child { text-align: left; }
.tw-label-table tbody tr td {
padding: 2px 2px;
border-bottom: 1px solid #ccc;
vertical-align: middle;
}
.tw-label-table tbody tr td:nth-child(2),
.tw-label-table tbody tr td:nth-child(3) { text-align: right; white-space: nowrap; }
.tw-row-main td { font-weight: 700; }
.tw-row-sub td { font-weight: 400; }
/* Thick border after sodium (last main row) */
.tw-label-table tbody tr:last-child td { border-bottom: 4px solid #000; }
.tw-label-dv-note {
font-size: .78em; color: #333;
padding: 4px 0; border-bottom: 1px solid #000;
margin-bottom: 4px; line-height: 1.5;
}
.tw-label-ing {
font-size: .85em; margin-bottom: 3px;
word-break: break-all; line-height: 1.5;
}
.tw-label-producer {
font-size: .78em; color: #555;
}
.tw-label-info-row {
font-size: .82em; margin-bottom: 2px;
line-height: 1.5; word-break: break-all;
}
.tw-label-producer-block {
font-size: .78em; color: #555;
margin-top: 2px; line-height: 1.6;
display: flex; flex-wrap: wrap; gap: 0;
}
.tw-label-producer-block span { display: inline; }
/* ── Info Block (食品標示 card) ─────────────────────────────── */
.tw-label-info-card {
border: 1.5px solid #000;
padding: 6px 10px;
}
.tw-info-header {
font-weight: 700;
font-size: 1.1em;
text-align: center;
letter-spacing: .08em;
padding-bottom: 4px;
}
.tw-info-divider {
border-top: 1.5px solid #000;
margin: 4px 0;
}
.tw-info-body {
padding: 2px 0;
}
.tw-info-row {
font-size: .88em;
line-height: 1.6;
margin-bottom: 1px;
word-break: break-all;
}
.tw-info-row strong {
font-weight: 600;
}
.tw-info-dates {
font-size: .85em;
line-height: 1.7;
padding: 2px 0;
}
.tw-info-dates strong {
font-weight: 600;
}
.tw-info-storage {
font-size: .85em;
line-height: 1.6;
padding: 2px 0;
}
.tw-info-storage strong {
font-weight: 600;
}
.tw-info-note {
font-size: .78em;
color: #555;
margin-top: 4px;
line-height: 1.5;
}
.tw-info-separator {
height: 8px;
}
/* ── Auto-scale inline checkbox ───────────────────────────── */
.ls-label-inline {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
cursor: pointer;
margin-bottom: 8px;
}
.ls-label-inline input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
cursor: pointer;
}
/* ── Label Print Controls UI ──────────────────────────────── */
.label-print-controls {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.label-print-select {
padding: 4px 8px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 13px;
background: #fff;
cursor: pointer;
}
.label-custom-size {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #555;
}
.label-size-input {
width: 48px;
padding: 3px 4px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 12px;
text-align: center;
}
.btn-export-pdf {
white-space: nowrap;
background: #e8f5e9;
border-color: #81c784;
font-weight: 600;
}
.btn-export-pdf:hover { background: #c8e6c9; }
.btn-export-pdf:disabled {
opacity: 0.6;
cursor: wait;
}
.btn-print-label,
.btn-print-preview {
white-space: nowrap;
font-weight: 600;
border: 1px solid #c5a3ab;
background: #fdf1f3;
color: var(--burgundy, #7B1528);
}
.btn-print-label:hover,
.btn-print-preview:hover {
background: #f8dde2;
}
.btn-print-preview {
background: #fff;
}
/* ── 過敏原勾選區塊 ───────────────────────────────────────── */
.ls-allergen-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 8px;
background: #fff3cd;
color: #856404;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
}
.ls-allergen-group-title {
margin: 8px 0 4px;
font-size: 12px;
font-weight: 600;
color: #555;
}
.ls-allergen-group-title-cross { color: #b26a00; }
.ls-allergen-row {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
border: 1px solid #eee;
border-radius: 6px;
margin-bottom: 3px;
background: #fafafa;
cursor: pointer;
font-size: 12.5px;
}
.ls-allergen-row:hover { background: #f5efe8; }
.ls-allergen-row-cross { background: #fff8ec; border-color: #f0d9a8; }
.ls-allergen-row-cross:hover { background: #fdeccb; }
.ls-allergen-icon { font-size: 14px; }
.ls-allergen-name { font-weight: 600; flex: 0 0 auto; }
.ls-allergen-required {
display: inline-block;
margin-left: 3px;
padding: 0 5px;
background: var(--burgundy, #7B1528);
color: #fff;
font-size: 10px;
border-radius: 3px;
font-style: normal;
}
.ls-allergen-sources {
flex: 1 1 auto;
color: #666;
font-size: 11.5px;
text-align: right;
word-break: break-all;
}
/* ── 標籤上過敏原區塊 ─────────────────────────────────────── */
.tw-info-allergen {
padding: 2px 4px;
border-left: 3px solid var(--burgundy, #7B1528);
background: rgba(123, 21, 40, 0.05);
font-weight: 600;
}
.tw-info-allergen-cross {
padding: 2px 4px;
border-left: 3px solid #d89a2a;
background: rgba(216, 154, 42, 0.06);
font-size: 0.92em;
}
/* ══════════════════════════════════════════════════════════════
PRINT STYLES
══════════════════════════════════════════════════════════════ */
@media print {
/* Label-only print: when the food-label modal is open, hide everything except the label.
Scoped via :has() so other views (e.g. production schedule) can use window.print() too. */
body:has(.label-modal-overlay) > *:not(.label-modal-overlay),
.label-modal-overlay .label-modal-card > .modal-header,
.label-modal-overlay .label-settings-panel,
.label-modal-overlay .label-preview-header,
.label-modal-overlay .label-preview-note {
display: none !important;
}
/* Reset modal from fixed overlay to static block — critical for mobile print */
.modal-overlay,
.label-modal-overlay {
position: static !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
inset: auto !important;
display: block !important;
backdrop-filter: none !important;
z-index: auto !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
}
.modal-card,
.label-modal-card,
.label-modal-overlay .modal-card {
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
max-width: none !important;
max-height: none !important;
width: auto !important;
height: auto !important;
background: none !important;
padding: 0 !important;
overflow: visible !important;
display: block !important;
}
.label-modal-body {
display: block !important;
max-height: none !important;
height: auto !important;
overflow: visible !important;
grid-template-columns: none !important;
}
.label-preview-panel {
display: block !important;
height: auto !important;
overflow: visible !important;
}
.label-preview-area {
background: none !important;
padding: 8px !important;
display: block !important;
height: auto !important;
overflow: visible !important;
}
.tw-label {
page-break-inside: avoid;
margin: 0 auto !important;
overflow: visible !important;
}
/* Ensure split labels both print */
.tw-label-split-item { page-break-inside: avoid; }
.tw-label-split-gap { height: 12px !important; margin: 8px 0 !important; }
}
@media (max-width: 768px) {
.label-modal-overlay .modal-card,
.label-modal-card {
max-height: 100vh;
max-height: 100dvh; /* dynamic vh for mobile browser bars */
max-width: 100vw !important;
width: 100vw;
border-radius: 0; /* flush edges → more usable space */
}
.label-modal-body {
grid-template-columns: 1fr;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
height: auto;
}
/* Preview first (above settings) so the SVG is immediately visible.
Note: browsers coerce overflow-y:visible to auto when overflow-x differs,
so we reset both axes. */
.label-preview-panel {
order: 1;
height: auto;
overflow: visible;
}
.label-settings-panel {
order: 2;
border-right: none;
border-top: 1px solid var(--border);
height: auto;
overflow: visible;
padding: 12px;
}
/* Header: stacked so print controls get their own row and can wrap */
.label-preview-header {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px 12px;
position: static;
}
.label-print-controls { justify-content: flex-start; }
.label-print-controls .btn-sm,
.label-print-select {
font-size: 12px;
padding: 7px 10px;
min-height: 36px; /* ≥ recommended touch target */
}
.label-preview-area {
padding: 10px;
min-height: 46vh;
align-items: flex-start;
overflow-x: auto;
}
/* Stretch SVG preview to the preview-area width so touch targets are big
enough to drag. svgPoint() uses getScreenCTM(), so mouse/touch coords
remain correct under CSS scaling. */
.label-preview-area svg[data-label-engine="v2"] {
width: 100%;
height: auto;
max-width: 100%;
touch-action: none; /* prevent browser pan/zoom while dragging */
}
/* In explicit editor mode, give the preview even more room and make it
stick so sliders below can be adjusted without losing sight of it. */
.label-modal-body.editor-mode .label-preview-area {
min-height: 55vh;
background: #d8d4cc; /* slight contrast → clearer canvas edge */
}
.label-modal-body.editor-mode .label-preview-panel {
position: sticky;
top: 0;
z-index: 2;
background: var(--surface);
box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
/* Compact settings sliders for narrow screens */
.label-settings-section { margin-bottom: 14px; }
.ls-number { width: 72px; }
}
@media (max-width: 480px) {
.label-preview-area { padding: 6px; min-height: 42vh; }
.label-modal-body.editor-mode .label-preview-area { min-height: 52vh; }
.label-print-controls .btn-sm,
.label-print-select { font-size: 11px; padding: 6px 8px; }
/* Collapse "advanced" controls summary to a compact chip */
.label-print-advanced summary { font-size: 11px; padding: 4px 8px; }
}
/* ══════════════════════════════════════════════════════════════
EMPTY STATE
══════════════════════════════════════════════════════════════ */
.empty-state {
text-align: center; padding: 60px 20px;
color: var(--text-sm);
}
.empty-icon { font-size: 52px; margin-bottom: 12px; opacity: .6; }
.empty-state p { font-size: 14px; line-height: 1.6; }
.empty-state-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 14px;
}
/* ══════════════════════════════════════════════════════════════
RECIPE RADAR CHART
══════════════════════════════════════════════════════════════ */
.radar-panel {
border-top: 1px solid var(--border);
background: linear-gradient(to bottom, rgba(26,15,20,0.6), var(--surface));
padding: 14px 18px 18px;
}
.radar-panel-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 12px;
}
.radar-panel-header h3 {
font-size: 14px; font-weight: 600; color: var(--gold); margin: 0;
font-family: 'Playfair Display', serif;
}
.radar-header-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.btn-export-radar {
font-size: 12px; padding: 5px 12px;
background: transparent; border: 1px solid var(--gold);
color: var(--gold); border-radius: 4px; cursor: pointer;
transition: background .2s, color .2s;
}
.btn-export-radar:hover {
background: var(--gold); color: #160D12;
}
.radar-svg-wrap {
display: flex; justify-content: center;
background: #1a0f14; border-radius: 8px;
padding: 12px 8px;
border: 1px solid rgba(200,160,85,0.15);
}
.radar-svg-wrap svg { max-width: 100%; height: auto; }
.radar-tags {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 12px;
}
.radar-tag {
font-size: 11px; padding: 3px 8px;
border: 1px solid; border-radius: 12px;
white-space: nowrap; font-weight: 500;
}
.radar-empty {
text-align: center; padding: 24px; color: var(--text-sm);
font-size: 13px;
}
/* ══════════════════════════════════════════════════════════════
MOBILE NAV (bottom bar for phones)
══════════════════════════════════════════════════════════════ */
.mobile-nav {
display: none;
position: fixed; bottom: 0; left: 0; right: 0;
background: var(--sidebar-bg);
border-top: 1px solid rgba(200,160,85,.2);
z-index: 300;
padding-bottom: env(safe-area-inset-bottom, 0);
padding: 0 4px env(safe-area-inset-bottom, 4px);
}
.mobile-nav-inner {
display: flex; justify-content: space-around; align-items: center;
max-width: 600px; margin: 0 auto;
}
.mobile-nav-item {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 8px 10px; border: none; background: none;
color: rgba(255,255,255,.5); cursor: pointer;
font-size: 10px; min-width: 56px;
transition: color .15s;
border-radius: 10px;
}
.mobile-nav-item .mnav-icon { font-size: 20px; transition: transform .15s; }
.mobile-nav-item.active { color: var(--gold-lt); }
.mobile-nav-item.active .mnav-icon { transform: scale(1.15); }
.mobile-nav-item:hover { color: rgba(255,255,255,.8); }
/* 「更多」上拉選單 — 3 欄 × 2 列 grid，與語言字串長度脫鉤 */
.mobile-more-menu {
position: absolute; bottom: 100%; left: 0; right: 0;
background: var(--sidebar-bg);
border-top: 1px solid rgba(200,160,85,.3);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
padding: 10px 8px;
box-shadow: 0 -4px 16px rgba(0,0,0,.25);
animation: moreSlideUp .2s ease;
}
.mobile-more-item {
display: flex; flex-direction: column; align-items: center; gap: 3px;
background: none; border: none;
color: rgba(255,255,255,.7); font-size: 12px;
padding: 8px 4px; cursor: pointer;
border-radius: 8px; transition: background .15s;
min-width: 0;
text-align: center;
overflow-wrap: break-word;
}
.mobile-more-item > span:last-child {
line-height: 1.25;
font-size: 11px;
}
.mobile-more-item:hover { background: rgba(255,255,255,.1); color: #fff; }
@keyframes moreSlideUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE — TABLET / MOBILE
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
:root { --sidebar-w: 200px; }
.main-content { padding: 20px 24px; }
.calculator-layout { grid-template-columns: 1fr 300px; }
}
@media (max-width: 768px) {
/* Sidebar hidden on mobile — use bottom nav instead */
.sidebar { display: none; }
.main-content {
margin-left: 0;
padding: 16px 16px 80px; /* padding-bottom for mobile nav */
max-width: 100vw;
overflow-x: hidden;
}
.mobile-nav { display: block; }
/* Full-width header on mobile */
.view-header { flex-direction: column; align-items: flex-start; }
.view-header > div, .header-actions { width: 100%; }
.header-actions { justify-content: flex-end; flex-wrap: nowrap; gap: 8px; }
.header-left { flex-direction: row; align-items: center; gap: 8px; }
.header-left .btn-notes-toggle { display: none; } /* 備註收進溢出選單 */
.recipe-name-input { font-size: 18px; max-width: 100%; flex: 1; min-width: 0; }
.select-type { max-width: 130px; font-size: 12px; padding: 6px 8px; }
/* 手機：隱藏桌面版次要按鈕，顯示溢出選單 */
.header-secondary-desktop { display: none; }
.header-overflow-wrap { display: block; }
/* Calculator: stack on mobile, prevent overflow */
.calculator-layout { grid-template-columns: 1fr; max-width: 100%; overflow: hidden; }
.calc-left, .calc-right { max-width: 100%; min-width: 0; overflow-x: hidden; }
.calc-right { order: -1; }
.ingredient-picker { height: 240px; }
/* Stats: 3 columns on mobile but smaller */
.quick-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-num { font-size: 24px; }
.stat-card { padding: 12px 8px; }
/* Recipe grid: 2 columns on mobile */
.recipe-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.recipe-card { padding: 12px; }
.recipe-card-name { font-size: 14px; }
/* Ingredient table: simplified columns on mobile */
.ingredient-table { overflow-x: auto; max-width: 100%; }
.ing-table-header,
.ing-table-row {
grid-template-columns: 1.8fr 1fr .7fr .7fr .5fr;
}
/* Hide less important columns on mobile */
.ing-table-header span:nth-child(4),
.ing-table-header span:nth-child(5),
.ing-table-row span:nth-child(4),
.ing-table-row span:nth-child(5) { display: none; }
/* Balance metric rows on mobile — card style */
.balance-metrics {
display: flex;
flex-direction: column;
gap: 4px;
}
.metric-row {
display: grid !important;
grid-template-areas:
"lbl val"
"bar bar";
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 2px 8px;
padding: 8px 12px;
background: var(--bg-card, #fff);
border: 1px solid var(--border);
border-radius: 8px;
}
.metric-row > .metric-label { grid-area: lbl; font-size: 12px !important; font-weight: 600; }
.metric-row > .metric-bar-wrap { grid-area: bar; }
.metric-row > .metric-val { grid-area: val; text-align: right; font-weight: 700; font-size: 14px; }
.metric-row > .metric-range { display: none; grid-area: bar; }
/* Info-only metric rows (no bar) */
.metric-row-info .metric-bar-wrap { display: none; }
.metric-row-info .metric-val {
grid-column: 2;
grid-row: 1;
}
/* Modal full width */
.modal-overlay { padding: 0; align-items: flex-end; }
.modal-card { max-width: 100%; border-radius: 20px 20px 0 0; max-height: 90vh; }
.modal-wide { max-width: 100%; }
/* Forms: single column */
.form-grid { grid-template-columns: 1fr; }
.detail-grid { grid-template-columns: 1fr; }
.admin-form-grid { grid-template-columns: 1fr; }
/* Admin tabs scroll on mobile */
.admin-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.admin-tab { white-space: nowrap; flex-shrink: 0; }
.login-card { padding: 32px 24px; }
.login-brand { font-size: 19px; }
.pairing-layout { grid-template-columns: 1fr; max-width: 100%; overflow-x: hidden; }
.pairing-left { position: static; }
.pairing-picker { height: 180px; }
.pairing-pick-item { padding: 10px; min-height: 44px; }
.pairing-right { padding: 14px 12px; }
.pairing-result-item { padding: 10px; gap: 8px; }
.pairing-score-badge { font-size: 15px; }
.pairing-flavor-tags { display: none; }
.pairing-view-tabs {
flex-wrap: nowrap; overflow-x: auto;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pairing-view-tabs::-webkit-scrollbar { display: none; }
.pairing-view-tab { flex: 0 0 auto; white-space: nowrap; font-size: 12px; padding: 7px 10px; }
/* ════════════════════════════════════════════════════════════
深度手機優化（768px 以下）
════════════════════════════════════════════════════════════ */
/* ── 0. 計算器手機分頁 ──────────────────────────────────────── */
.calc-mobile-tabs {
display: flex !important;
position: sticky; top: 0; z-index: 50;
background: var(--surface);
border-bottom: 2px solid var(--border);
padding: 0; margin: 0 0 12px;
}
.calc-mtab {
flex: 1;
padding: 10px 4px;
font-size: 14px; font-weight: 600;
border: none; background: none;
color: var(--text-sm);
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all .15s;
text-align: center;
}
.calc-mtab.active {
color: var(--burgundy);
border-bottom-color: var(--burgundy);
background: var(--gold-bg);
}
/* 分頁內容切換 — 預設全隱藏，依 AppState.calcMobileTab 顯示 */
.calc-section-ingredients,
.calc-section-balance,
.calc-section-analysis { display: none; }
/* 用 JS 切換的 class（在 app.js 中由 tab 點擊設定） */
.calc-section-ingredients.calc-tab-active,
.calc-section-balance.calc-tab-active,
.calc-section-analysis.calc-tab-active { display: block; }
/* calc-right（食材選擇器）在手機 ingredients tab 時顯示，其他時候隱藏 */
.calc-right { display: none; }
.calc-right.calc-tab-active { display: block; }
/* ── 平衡指標折疊：手機只顯示前 6 行 ───────────────────── */
.balance-panel.mode-expert .balance-metrics .metric-row:nth-child(n+7),
.balance-panel.mode-expert .balance-metrics .metric-row-info:nth-child(n+7) { display: none; }
.balance-panel.mode-expert .balance-metrics.metrics-expanded .metric-row,
.balance-panel.mode-expert .balance-metrics.metrics-expanded .metric-row-info { display: grid !important; }
.balance-panel.mode-basic .balance-metrics .metric-row,
.balance-panel.mode-basic .balance-metrics .metric-row-info { display: grid !important; }
.balance-panel.mode-basic .balance-metrics .metric-advanced { display: none !important; }
.btn-metrics-expand {
display: block !important;
width: 100%; padding: 8px;
background: var(--ivory); border: 1px dashed var(--border);
border-radius: 8px; font-size: 13px; color: var(--text-sm);
cursor: pointer; margin-top: 6px; text-align: center;
}
/* ── 1. 全域字體基線提升 ───────────────────────────────────── */
html { font-size: 16px; }
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* 防止 iOS 輸入框自動縮放（字體 < 16px 時 Safari 會縮放） */
input, select, textarea { font-size: 16px !important; }
/* ── 2. 底部導覽加大 ───────────────────────────────────────── */
.mobile-nav { padding: 0 2px env(safe-area-inset-bottom, 6px); }
.mobile-nav-item {
padding: 10px 6px;
font-size: 12px;
min-width: 48px;
gap: 3px;
}
.mobile-nav-item .mnav-icon { font-size: 24px; }
.main-content { padding-bottom: 96px !important; }
/* ── 3. 按鈕觸控目標 44px ──────────────────────────────────── */
.btn-primary, .btn-secondary {
min-height: 44px;
padding: 12px 18px;
font-size: 15px;
border-radius: 10px;
}
.btn-danger {
min-height: 44px;
padding: 10px 16px;
font-size: 14px;
}
.btn-icon.hover-danger {
min-width: 44px !important;
min-height: 44px !important;
font-size: 18px;
}
.btn-icon.btn-sm {
min-width: 40px;
min-height: 40px;
padding: 8px;
}
.mx-btn {
min-width: 40px;
min-height: 40px;
padding: 8px 12px;
font-size: 14px;
}
/* ── 4. 輸入框加大 ─────────────────────────────────────────── */
.search-input {
padding: 12px 14px;
font-size: 16px;
min-height: 44px;
border-radius: 10px;
}
.ing-amount {
width: 76px;
padding: 8px;
font-size: 16px;
min-height: 40px;
border-radius: 8px;
}
.serving-count-input, .mx-custom {
padding: 8px;
font-size: 15px;
min-height: 38px;
}
/* ── 5. 計算器版面 ─────────────────────────────────────────── */
.calc-right { order: 0; } /* 食材在上，平衡在下（更符合操作順序）*/
.ingredient-picker { height: 280px; }
.picker-item {
min-height: 44px;
padding: 12px;
font-size: 14px;
}
.picker-category { padding: 10px 14px; }
/* ── 6. 平衡指標可讀性 ──────────────────────────────────────── */
.metric-row {
padding: 10px 14px !important;
gap: 3px 10px !important;
}
.metric-row > .metric-label {
font-size: 14px !important;
}
.metric-row > .metric-val {
font-size: 16px !important;
font-weight: 700;
}
.metric-row > .metric-range {
display: block;
font-size: 11px;
color: var(--text-sm);
grid-area: bar;
}
.metric-bar {
height: 8px;
border-radius: 4px;
}
.balance-score { font-size: 20px; }
.balance-title { font-size: 16px; }
/* ── 7. 配方卡片 ───────────────────────────────────────────── */
.recipe-grid { grid-template-columns: 1fr !important; gap: 12px; }
.recipe-card {
padding: 14px;
min-height: 60px;
}
.recipe-card-name { font-size: 16px !important; }
.recipe-card-desc { font-size: 13px; }
.recipe-card-meta { font-size: 12px; }
/* ── 8. Modal 行動優化 ──────────────────────────────────────── */
.modal-body { padding: 16px 20px; }
.modal-header h3 { font-size: 20px; }
.modal-footer { padding: 14px 20px; }
.modal-footer .btn-primary,
.modal-footer .btn-secondary { min-height: 44px; width: 100%; }
/* ── 9. 設定頁 ─────────────────────────────────────────────── */
.settings-card { padding: 16px; }
.settings-row {
min-height: 44px;
font-size: 15px;
padding: 6px 0;
}
.settings-section h3 { font-size: 18px; }
.settings-section p { font-size: 14px; }
.toggle-switch {
width: 50px;
height: 28px;
flex-shrink: 0;
}
.toggle-slider:before {
width: 22px;
height: 22px;
}
.upgrade-section { padding: 16px; }
.upgrade-section .feature-item { font-size: 14px; padding: 5px 0; }
.sub-info-row { font-size: 14px; min-height: 36px; }
/* ── 10. 社群/市集卡片 ──────────────────────────────────────── */
.community-card { padding: 14px; }
.comm-card-title { font-size: 15px; }
.comm-card-desc { font-size: 13px; }
.comm-card-actions { gap: 8px; }
.comm-card-actions button {
padding: 8px 14px;
font-size: 13px;
min-height: 36px;
border-radius: 8px;
}
.comm-used-badge { font-size: 12px; }
.mkt-card { border-radius: 10px; }
.mkt-card-content { padding: 12px; font-size: 14px; }
.mkt-card-name { font-size: 15px; }
.mkt-card-price { font-size: 18px; }
/* ── 11. 食材步進按鈕（手機取代滑桿） ───────────────────────── */
.ing-slider-desktop { display: none !important; }
.ing-stepper-mobile { display: flex !important; }
.ing-row-controls {
display: flex; align-items: center; gap: 6px;
justify-content: center; width: 100%;
}
.ing-amount { width: 60px; text-align: center; font-size: 16px; }
.ing-slider::-webkit-slider-thumb {
width: 24px !important;
height: 24px !important;
}
.ing-slider::-moz-range-thumb {
width: 24px !important;
height: 24px !important;
}
/* ── 12. 食材行 ────────────────────────────────────────────── */
.ing-row {
padding: 12px 14px;
gap: 10px;
}
.ing-name { font-size: 15px; }
.ing-pct { font-size: 13px; }
.ing-unit { font-size: 13px; }
/* ── 13. 登入頁 ────────────────────────────────────────────── */
.login-card { padding: 28px 20px; }
.login-brand { font-size: 22px; }
.login-desc { font-size: 14px; }
.btn-google { min-height: 48px; font-size: 15px; }
/* ── 14. 分類標籤 ──────────────────────────────────────────── */
.category-tabs { gap: 6px; }
.category-tab {
padding: 8px 14px;
font-size: 13px;
min-height: 36px;
}
/* ── 15. 方案卡片（訂閱） ──────────────────────────────────── */
.plan-card { padding: 16px; }
.plan-price { font-size: 24px; }
.plan-name { font-size: 16px; }
.plan-desc { font-size: 13px; }
.plan-card .btn-primary { min-height: 48px; font-size: 16px; }
/* ── 16. 排行榜 ────────────────────────────────────────────── */
.lb-name { font-size: 14px; }
.lb-score { font-size: 14px; }
/* ── 17. Toast 通知 ────────────────────────────────────────── */
.toast {
font-size: 14px;
padding: 12px 18px;
bottom: calc(80px + env(safe-area-inset-bottom, 0px) + 16px);
max-width: calc(100vw - 32px);
}
}
/* ════════════════════════════════════════════════════════════════
小螢幕手機進一步調整（≤480px）
════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
.quick-stats { grid-template-columns: repeat(3, 1fr); }
.recipe-grid { grid-template-columns: 1fr !important; }
.main-content { padding: 12px 12px 96px !important; }
/* calc-mobile-tabs 已改用 100vw + transform 全寬，不需負 margin */
.view-header h2 { font-size: 20px; }
.btn-primary, .btn-secondary { padding: 12px 16px; font-size: 14px; }
/* ing table even simpler */
.ing-table-header,
.ing-table-row {
grid-template-columns: 2fr 1fr .8fr .4fr;
}
.ing-table-header span:nth-child(4),
.ing-table-header span:nth-child(5),
.ing-table-header span:nth-child(6),
.ing-table-row span:nth-child(4),
.ing-table-row span:nth-child(5),
.ing-table-row span:nth-child(6) { display: none; }
}
/* ══════════════════════════════════════════════════════════════
COMMUNITY VIEW
══════════════════════════════════════════════════════════════ */
.view-community { max-width: 860px; overflow-x: hidden; }
.community-desc {
color: var(--text-sm);
font-size: 14px;
margin: 0 0 16px;
line-height: 1.6;
}
.points-info-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
background: linear-gradient(135deg, #fff9e6 0%, #fffdf5 100%);
border: 1px solid var(--border-gold);
border-radius: 10px;
padding: 10px 16px;
margin-bottom: 16px;
font-size: 14px;
color: var(--text);
}
.points-earn-hint {
font-size: 12px;
color: var(--text-sm);
}
.community-tabs {
display: flex;
gap: 8px;
margin-bottom: 14px;
}
.comm-tab {
padding: 8px 18px;
border-radius: 20px;
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--text-sm);
font-size: 13px;
cursor: pointer;
transition: all .18s;
}
.comm-tab.active {
background: var(--burgundy);
color: #fff;
border-color: var(--burgundy);
}
.community-search-wrap {
margin-bottom: 16px;
}
.community-search-input {
width: 100%;
max-width: 340px;
}
.community-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
}
.community-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
transition: box-shadow .18s, border-color .18s;
}
.community-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,.07);
border-color: var(--burgundy-light, #c9748e);
}
.comm-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.comm-card-title {
font-weight: 600;
font-size: 15px;
color: var(--text);
flex: 1;
}
.comm-used-badge {
font-size: 11px;
color: var(--ok);
background: #e8f9e8;
border-radius: 6px;
padding: 2px 6px;
white-space: nowrap;
}
.comm-desc {
font-size: 13px;
color: var(--text-sm);
line-height: 1.4;
}
.comm-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
color: var(--text-sm);
}
.comm-author { color: var(--text-sm); }
.comm-date { color: var(--text-sm); opacity: .7; }
.comm-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.comm-tag {
font-size: 11px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 5px;
padding: 2px 7px;
color: var(--text-sm);
}
.comm-score-tag.score-ok { background: #e8f9e8; color: var(--ok); border-color: var(--ok); }
.comm-score-tag.score-bad { background: #ffeaea; color: var(--err); border-color: var(--err); }
.comm-score-tag.score-good{ background: #e8f5ff; color: #2b7dbf; border-color: #2b7dbf; }
.comm-actions {
display: flex;
gap: 8px;
margin-top: 4px;
flex-wrap: wrap;
align-items: flex-start;
}
.comm-use-btn { flex: 1; min-width: 0; padding: 7px 12px; font-size: 13px; }
.comm-preview-btn{ padding: 7px 10px; font-size: 12px; }
.comm-actions .btn-rate { flex-shrink: 0; }
.comm-more-actions { position: relative; }
.comm-more-actions summary { list-style: none; }
.comm-more-actions summary::-webkit-details-marker { display: none; }
.comm-more-btn { min-width: 72px; cursor: pointer; }
.comm-more-panel {
position: absolute;
right: 0;
bottom: calc(100% + 6px);
z-index: 3;
min-width: 170px;
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface);
box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
.comm-more-panel .btn-secondary,
.comm-more-panel .btn-rate,
.comm-more-panel .btn-comm-edit,
.comm-more-panel .btn-comm-delete {
width: 100%;
}
/* ── Community Edit / Delete buttons ── */
.btn-comm-edit {
background: #e8f0fe;
color: #1a73e8;
border: 1px solid #c5d8f8;
font-size: 12px;
padding: 5px 10px;
border-radius: 6px;
cursor: pointer;
flex-shrink: 0;
}
.btn-comm-edit:hover { background: #d2e3fc; }
.btn-comm-delete {
background: #fce8e6;
color: #c5221f;
border: 1px solid #f5c6c2;
font-size: 12px;
padding: 5px 10px;
border-radius: 6px;
cursor: pointer;
flex-shrink: 0;
}
.btn-comm-delete:hover { background: #f8d7d5; }
.btn-danger {
background: #d93025 !important;
color: #fff !important;
border: none !important;
}
.btn-danger:hover { background: #b71c1c !important; }
/* ── Community Edit Modal Grid ── */
.comm-edit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 12px;
}
.comm-edit-grid .comm-edit-row:first-child {
grid-column: 1 / -1;
}
.comm-edit-row .field-label {
font-size: 12px;
margin-bottom: 2px;
}
.comm-edit-row .input-field {
width: 100%;
box-sizing: border-box;
}
/* ── Community Share Modal ── */
.comm-share-modal { max-width: 400px; }
.comm-share-reward {
background: linear-gradient(135deg, #fff9e6, #fffdf5);
border: 1px solid var(--border-gold);
border-radius: 8px;
padding: 10px 14px;
margin: 12px 0;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.comm-share-email-row {
margin: 8px 0;
}
.toggle-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
color: var(--text-sm);
}
/* ── Share buttons ── */
.share-btn-community {
background: linear-gradient(135deg, #1a73e8, #0f5bbf);
color: #fff;
}
.share-btn-community:hover { opacity: .88; }
/* ══════════════════════════════════════════════════════════════
POINTS UI — SIDEBAR + SETTINGS
══════════════════════════════════════════════════════════════ */
.points-badge-sidebar {
font-size: 11px;
color: #c07b10;
background: #fff9e0;
border: 1px solid #f0d060;
border-radius: 6px;
padding: 2px 6px;
margin-top: 2px;
display: inline-block;
}
.points-settings-card { border-color: #f0d060 !important; }
.points-balance-row {
display: flex;
align-items: baseline;
gap: 6px;
margin: 12px 0;
}
.points-big {
font-family: 'Playfair Display', serif;
font-size: 42px;
font-weight: 700;
color: var(--burgundy);
line-height: 1;
}
.points-big-label {
font-size: 18px;
color: var(--text-sm);
}
.points-earn-table {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 16px;
background: var(--bg);
border-radius: 8px;
padding: 10px 14px;
}
.points-row {
display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--text-sm);
}
.points-earn {
color: var(--ok);
font-weight: 600;
}
.points-redeem-section { margin-top: 12px; }
.points-redeem-section h4 { margin: 0 0 12px; font-size: 14px; }
.redeem-options {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.redeem-option {
flex: 1;
min-width: 140px;
background: var(--bg);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
text-align: center;
transition: border-color .18s;
}
.redeem-option:not(.redeem-disabled) { border-color: var(--burgundy-light, #c9748e); }
.redeem-disabled { opacity: .55; }
.redeem-plan { font-weight: 600; font-size: 14px; }
.redeem-cost { font-size: 13px; color: var(--text-sm); }
.redeem-btn { width: 100%; padding: 7px; font-size: 13px; margin-top: 4px; }
/* ── Points Log Modal ── */
.points-log-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 8px;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.points-log-reason { color: var(--text); }
.points-plus { color: var(--ok); font-weight: 700; }
.points-minus { color: var(--err); font-weight: 700; }
.points-log-date { color: var(--text-sm); font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) {
.community-list { grid-template-columns: 1fr; }
.redeem-options { flex-direction: column; }
.points-info-bar { flex-direction: column; align-items: flex-start; }
.comm-actions {
flex-wrap: wrap;
}
.comm-actions .comm-use-btn {
flex: 1 1 calc(50% - 4px); order: 1;
}
.comm-actions .comm-preview-btn {
flex: 1 1 calc(50% - 4px); order: 2;
}
.comm-actions .btn-rate {
flex: 1 1 calc(50% - 4px); order: 3;
}
.comm-actions .btn-comm-edit {
flex: 1 1 calc(50% - 4px); order: 4;
}
.comm-actions .btn-comm-delete {
flex: 1 1 calc(50% - 4px); order: 5;
}
.comm-edit-grid {
grid-template-columns: 1fr;
}
}
/* ══════════════════════════════════════════════════════════════
LEADERBOARD
══════════════════════════════════════════════════════════════ */
.leaderboard-wrap {
max-width: 640px;
margin: 0 auto;
}
.lb-header {
text-align: center;
margin-bottom: 20px;
}
.lb-title {
font-family: 'Playfair Display', serif;
font-size: 22px;
font-weight: 700;
color: var(--text);
margin: 0 0 6px;
}
.lb-subtitle {
font-size: 13px;
color: var(--text-sm);
margin: 0;
}
.lb-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.lb-row {
display: grid;
grid-template-columns: 42px 42px 1fr auto;
align-items: center;
gap: 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px 14px;
transition: box-shadow .16s, border-color .16s;
}
.lb-row:hover {
box-shadow: 0 3px 12px rgba(0,0,0,.07);
}
.lb-row-top3 {
border-color: #e8c84a;
background: linear-gradient(135deg, #fffdf0 0%, #fff9e0 100%);
}
.lb-row-me {
border-color: var(--burgundy) !important;
background: linear-gradient(135deg, #fff5f8 0%, #fff0f4 100%) !important;
box-shadow: 0 0 0 2px rgba(160,40,70,.12);
}
.lb-rank {
text-align: center;
font-size: 22px;
line-height: 1;
min-width: 28px;
}
.lb-rank-num {
font-size: 14px;
font-weight: 700;
color: var(--text-sm);
background: var(--bg);
border-radius: 50%;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lb-avatar-wrap { display: flex; align-items: center; }
.lb-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--border);
}
.lb-avatar-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: var(--burgundy);
color: #fff;
font-size: 15px;
font-weight: 700;
}
.lb-name-wrap {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.lb-name {
font-size: 14px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lb-me-tag {
font-size: 11px;
color: var(--burgundy);
font-weight: 500;
}
.lb-bar-wrap {
height: 5px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
}
.lb-bar {
height: 100%;
background: linear-gradient(90deg, var(--burgundy), #e07090);
border-radius: 3px;
transition: width .4s ease;
}
.lb-row-top3 .lb-bar {
background: linear-gradient(90deg, #c08010, #e8c840);
}
.lb-points {
display: flex;
flex-direction: column;
align-items: flex-end;
white-space: nowrap;
}
.lb-pts-num {
font-family: 'Playfair Display', serif;
font-size: 20px;
font-weight: 700;
color: var(--burgundy);
line-height: 1;
}
.lb-pts-label {
font-size: 11px;
color: var(--text-sm);
}
.lb-my-rank-note {
margin-top: 16px;
padding: 12px 16px;
background: var(--bg);
border: 1px dashed var(--border);
border-radius: 10px;
font-size: 13px;
color: var(--text-sm);
text-align: center;
}
.lb-hint {
margin-top: 12px;
font-size: 12px;
color: var(--text-sm);
text-align: center;
}
@media (max-width: 480px) {
.lb-row { grid-template-columns: 34px 36px 1fr auto; gap: 7px; padding: 8px 10px; }
.lb-rank { font-size: 18px; }
.lb-avatar { width: 30px; height: 30px; }
.lb-pts-num { font-size: 18px; }
}
/* ── PRO Lock UI ─────────────────────────────────────────── */
/* Nav locked items */
.nav-item-locked {
opacity: 0.6;
position: relative;
}
.nav-item-locked:hover { opacity: 0.85; }
.nav-lock {
font-size: 11px;
margin-left: 2px;
vertical-align: middle;
}
.mnav-locked {
opacity: 0.55;
}
.mnav-locked:hover { opacity: 0.8; }
/* Ingredient picker recommended items */
.picker-section-label {
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
color: var(--burgundy, #7c2d41);
background: var(--gold-bg, #fff9f0);
border-bottom: 1px solid var(--border);
letter-spacing: 0.3px;
}
/* 平衡修正推薦區段 — 綠色系 */
.picker-section-balance {
color: #1b5e3b;
background: rgba(64, 145, 108, 0.08);
border-left: 3px solid #40916c;
}
.picker-item-balance {
background: rgba(64, 145, 108, 0.06);
border-left: 2px solid rgba(64, 145, 108, 0.35);
}
.picker-item-balance:hover {
background: rgba(64, 145, 108, 0.13);
}
/* 平衡修正標籤（顯示原因，如「↑ PAC」） */
.picker-bal-badge {
display: inline-block;
font-size: 10px;
padding: 1px 5px;
background: #40916c;
color: #fff;
border-radius: 6px;
margin-left: 4px;
font-weight: 700;
vertical-align: middle;
letter-spacing: 0.02em;
}
.picker-item-recommended {
background: rgba(255, 245, 230, 0.4);
}
.picker-item-recommended:hover {
background: rgba(255, 240, 215, 0.7);
}
.picker-rec-badge {
display: inline-block;
font-size: 10px;
padding: 1px 5px;
background: linear-gradient(135deg, #d4a017, #c89b3c);
color: #fff;
border-radius: 6px;
margin-left: 4px;
font-weight: 600;
vertical-align: middle;
}
/* Ingredient picker locked items */
.picker-item-pro-locked {
opacity: 0.55;
cursor: pointer;
}
.picker-item-pro-locked:hover { opacity: 0.75; background: var(--gold-bg, #fff9f0); }
.picker-name-locked { color: var(--text-sm); }
.picker-lock-badge {
font-size: 12px;
margin-left: auto;
padding: 1px 6px;
background: var(--gold-bg, #fff9f0);
border-radius: 8px;
color: var(--burgundy, #7c2d41);
font-weight: 600;
}
/* Ingredient library locked rows */
.ing-row-locked {
opacity: 0.55;
cursor: pointer;
}
.ing-row-locked:hover { opacity: 0.75; background: var(--gold-bg, #fff9f0); }
.badge-pro-lock {
display: inline-block;
font-size: 10px;
padding: 1px 6px;
background: linear-gradient(135deg, var(--burgundy, #7c2d41), #a0405a);
color: #fff;
border-radius: 8px;
margin-left: 4px;
font-weight: 600;
vertical-align: middle;
}
/* Calculator locked panels */
.pro-locked-panel {
padding: 14px 18px;
border-top: 1px solid var(--border);
cursor: pointer;
background: var(--gold-bg, #fff9f0);
transition: background 0.15s;
}
.pro-locked-panel:hover { background: #fff0e0; }
.pro-locked-panel-header {
font-weight: 600;
font-size: 14px;
color: var(--text);
margin-bottom: 4px;
}
.pro-locked-panel-desc {
font-size: 12px;
color: var(--text-sm);
margin: 0;
}
.pro-locked-btn {
opacity: 0.7;
position: relative;
}
.pro-locked-btn:hover { opacity: 1; }
/* ── Pro Lab Panel (v206) ─────────────────────────────────── */
.pro-lab-teaser {
display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.pro-lab-chip {
display: inline-block;
padding: 3px 9px;
font-size: 11px;
background: rgba(123,21,40,.08);
border: 1px solid rgba(123,21,40,.25);
border-radius: 12px;
color: var(--text);
white-space: nowrap;
}
.pro-lab-panel {
border-top: 1px solid var(--border);
background: linear-gradient(180deg, rgba(123,21,40,.025), transparent 60%);
}
.pro-lab-panel > summary {
display: flex; align-items: center; gap: 8px;
}
.pro-lab-count {
margin-left: auto;
font-size: 11px;
padding: 2px 8px;
background: rgba(123,21,40,.12);
border-radius: 10px;
color: #7B1528;
font-weight: 600;
}
.pro-lab-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px;
padding: 10px 18px 16px;
}
.pro-lab-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
font-size: 13px;
}
.pro-lab-card-title {
font-weight: 600;
font-size: 13px;
margin-bottom: 6px;
color: #7B1528;
}
.pro-lab-card-body { line-height: 1.55; color: var(--text); }
.pro-lab-card-body b { color: #7B1528; }
.pro-lab-tip {
margin-top: 5px;
font-size: 11.5px;
color: var(--text-sm);
}
.pro-lab-muted { color: var(--text-sm); font-size: 12px; }
/* Pro Lab 卡片使用說明（摺疊） */
.pro-lab-help {
margin-top: 10px;
border-top: 1px dashed var(--border);
padding-top: 6px;
}
.pro-lab-help-summary {
font-size: 11px;
color: var(--text-sm);
cursor: pointer;
padding: 2px 0;
list-style: none;
user-select: none;
}
.pro-lab-help-summary::-webkit-details-marker { display: none; }
.pro-lab-help-summary::marker { content: ''; }
.pro-lab-help-summary::before {
content: '▸ ';
display: inline-block;
margin-right: 2px;
transition: transform .15s;
}
.pro-lab-help[open] .pro-lab-help-summary::before { transform: rotate(90deg); }
.pro-lab-help-summary:hover { color: var(--text); }
.pro-lab-help[open] .pro-lab-help-summary { color: var(--text); font-weight: 500; }
.pro-lab-help-body {
margin-top: 6px;
padding: 8px 10px;
background: var(--bg);
border-radius: var(--radius-xs);
border-left: 2px solid var(--info-c);
}
.pro-lab-help-line {
font-size: 11px;
line-height: 1.6;
color: var(--text-sm);
}
.pro-lab-help-line + .pro-lab-help-line { margin-top: 5px; }
.pro-lab-help-line strong { color: var(--text); font-weight: 600; }
.trige-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
margin-bottom: 4px;
}
.pro-lab-swatches {
display: flex; gap: 4px; margin: 6px 0;
}
.pro-lab-swatch {
display: inline-block;
width: 22px; height: 22px;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.1);
}
.pro-lab-empty {
padding: 14px 18px;
font-size: 12px;
color: var(--text-sm);
text-align: center;
}
.pro-lab-action {
display: block;
width: 100%;
margin-top: 8px;
padding: 7px 10px;
font-size: 12px;
font-weight: 600;
border: none;
border-radius: 6px;
background: linear-gradient(135deg, #7B1528, #a31d36);
color: #fff;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.15s;
}
.pro-lab-action:hover {
box-shadow: 0 2px 8px rgba(123,21,40,.3);
transform: translateY(-1px);
}
.pro-lab-action:active { transform: translateY(0); }
.pro-lab-ok {
margin-top: 8px;
padding: 6px 10px;
font-size: 12px;
text-align: center;
background: rgba(64,145,108,.08);
border-radius: 6px;
color: #40916c;
font-weight: 600;
}
.pro-lab-curve {
display: block;
width: 100%;
height: auto;
margin: 8px 0 4px;
border-radius: 4px;
background: rgba(0,0,0,.02);
}
.pro-lab-chip-clickable { cursor: pointer; transition: transform 0.1s, background 0.15s; }
.pro-lab-chip-clickable:hover {
background: rgba(123,21,40,.18);
transform: scale(1.04);
}
.pro-lab-teaser-hint {
margin: 8px 0 0;
font-size: 11px;
color: var(--text-sm);
text-align: center;
}
.trige-radar {
display: block;
width: 100%;
max-width: 200px;
margin: 4px auto 6px;
}
.pl-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-left: 4px;
vertical-align: middle;
box-shadow: 0 0 0 2px rgba(0,0,0,.04);
}
.pl-dot-safe { background: #40916c; }
.pl-dot-warn { background: #f4a261; animation: pl-pulse 2s ease-in-out infinite; }
.pl-dot-danger { background: #e63946; animation: pl-pulse 1s ease-in-out infinite; }
.pl-dot-cool { background: #0077b6; }
.pl-dot-hot { background: #e63946; }
.pl-dot-numb { background: #6f42c1; }
.pl-dot-astr { background: #8d6e63; }
@keyframes pl-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
.pl-risk-safe { color: #40916c; }
.pl-risk-warn { color: #f4a261; }
.pl-risk-danger { color: #e63946; font-weight: 600; }
.pl-risk-high { color: #e63946; font-weight: 600; }
.pro-lab-warn {
margin-top: 8px;
padding: 7px 10px;
font-size: 12px;
background: rgba(230,57,70,.08);
border-left: 3px solid #e63946;
border-radius: 4px;
color: #e63946;
}
.pro-lab-action-secondary {
background: linear-gradient(135deg, #6c757d, #495057);
}
.pro-lab-action-secondary:hover {
box-shadow: 0 2px 8px rgba(73,80,87,.3);
}
.pro-lab-progress {
display: block;
width: 100%;
height: auto;
margin: 8px 0 4px;
}
.pro-lab-card-wide { grid-column: 1 / -1; }
.pl-badge-foodb {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
font-size: 9px;
font-weight: 700;
background: linear-gradient(135deg, #4a7ba8, #2d5a87);
color: #fff;
border-radius: 8px;
letter-spacing: 0.5px;
vertical-align: middle;
}
.mp-pairing-block + .mp-pairing-block {
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed rgba(0,0,0,.08);
}
.mp-source {
font-size: 12px;
margin-bottom: 6px;
color: var(--text);
}
.mp-candidates {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 6px;
}
.mp-candidate {
padding: 6px 8px;
background: rgba(74,123,168,.06);
border-left: 3px solid #4a7ba8;
border-radius: 4px;
cursor: help;
transition: background 0.15s;
}
.mp-candidate:hover { background: rgba(74,123,168,.12); }
.mp-cand-name {
font-size: 12px;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.mp-cand-meta {
display: flex;
align-items: center;
gap: 6px;
}
.mp-cand-score {
display: inline-block;
min-width: 22px;
padding: 1px 5px;
font-size: 10px;
font-weight: 700;
background: #4a7ba8;
color: #fff;
border-radius: 8px;
text-align: center;
}
.mp-cand-shared {
font-size: 10px;
color: var(--text-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.mp-cand-arrow {
margin-left: 3px;
color: #4a7ba8;
font-weight: 900;
opacity: 0.5;
transition: opacity 0.15s, transform 0.15s;
}
.mp-candidate:hover .mp-cand-arrow {
opacity: 1;
transform: translateX(2px);
}
/* 分子配對深入 modal */
.mp-detail-modal {
position: relative; /* 讓 .modal-close-x 的 absolute 定位有正確錨點 */
max-width: 720px;
width: 95%;
max-height: 90vh;
overflow-y: auto;
padding: 22px 26px;
}
.modal-close-x {
position: absolute;
top: 8px;
right: 12px;
width: 36px;
height: 36px;
background: rgba(0,0,0,0.04);
border: 1px solid rgba(0,0,0,0.08);
border-radius: 50%;
font-size: 22px;
font-weight: 300;
cursor: pointer;
color: var(--text);
line-height: 1;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, transform 0.15s;
z-index: 2;
}
.modal-close-x:hover {
background: rgba(230,57,70,.12);
color: #c0392b;
transform: rotate(90deg);
}
.mp-detail-header {
text-align: center;
padding-bottom: 14px;
border-bottom: 1px solid rgba(0,0,0,.08);
margin-bottom: 14px;
}
.mp-detail-title {
font-size: 13px;
color: var(--text-sm);
margin-bottom: 8px;
}
.mp-detail-vs {
font-size: 18px;
font-weight: 700;
color: var(--text);
margin-bottom: 10px;
}
.mp-detail-x {
margin: 0 12px;
color: #4a7ba8;
font-weight: 400;
}
.mp-detail-stats {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.mp-stat-pill {
padding: 3px 10px;
font-size: 11px;
background: rgba(74,123,168,.1);
color: #2d5a87;
border-radius: 12px;
font-weight: 600;
}
.mp-detail-section {
margin-bottom: 16px;
}
.mp-detail-section h4 {
font-size: 13px;
margin: 0 0 8px;
color: var(--text);
font-weight: 700;
}
.mp-detail-section h4 small,
.mp-detail-hint {
font-size: 10px;
color: var(--text-sm);
font-weight: 400;
margin-left: 4px;
}
.mp-detail-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.mp-detail-list {
list-style: none;
margin: 0;
padding: 0;
}
.mp-detail-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 10px;
align-items: center;
padding: 6px 8px;
font-size: 11px;
border-bottom: 1px dashed rgba(0,0,0,.05);
}
.mp-detail-row:last-child { border-bottom: none; }
.mp-detail-name {
font-family: 'SF Mono', Consolas, monospace;
font-size: 11px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mp-detail-desc {
font-size: 10px;
color: #666;
white-space: nowrap;
}
.mp-detail-desc-empty {
font-size: 10px;
color: #ccc;
}
.mp-detail-conc {
font-size: 10px;
color: #4a7ba8;
font-weight: 600;
font-family: 'SF Mono', Consolas, monospace;
}
.mp-detail-empty {
font-size: 11px;
color: var(--text-sm);
text-align: center;
padding: 10px;
margin: 0;
}
.mp-detail-footer {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid rgba(0,0,0,.06);
text-align: center;
color: var(--text-sm);
font-size: 10px;
}
@media (max-width: 600px) {
.mp-detail-2col { grid-template-columns: 1fr; }
.mp-detail-modal { padding: 16px; }
.mp-detail-vs { font-size: 16px; }
.mp-detail-x { margin: 0 8px; }
}
/* 品嚐會排程器 */
.view-tasting-flight .view-header { margin-bottom: 16px; }
.view-tasting-flight .view-header h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.badge-pro-active {
font-size: 11px;
padding: 3px 10px;
background: linear-gradient(135deg, #7B1528, #a31d36);
color: #fff;
border-radius: 10px;
font-weight: 700;
letter-spacing: 0.5px;
}
.badge-license-active {
font-size: 11px;
padding: 3px 10px;
background: linear-gradient(135deg, #0E7C5E, #14A380);
color: #fff;
border-radius: 10px;
font-weight: 700;
letter-spacing: 0.5px;
}
.tf-layout {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 18px;
}
.tf-section-title {
font-size: 14px;
margin: 0 0 10px;
font-weight: 700;
color: var(--text);
}
.tf-section-title small {
font-size: 11px;
color: var(--text-sm);
font-weight: 400;
margin-left: 4px;
}
.tf-pool, .tf-flight {
background: rgba(0,0,0,.02);
padding: 14px;
border-radius: 10px;
min-height: 400px;
}
.tf-pool-list { display: flex; flex-direction: column; gap: 6px; max-height: 600px; overflow-y: auto; }
.tf-pool-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: #fff;
border: 1px solid rgba(0,0,0,.06);
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
font-size: 13px;
}
.tf-pool-item:hover { background: rgba(123,21,40,.06); border-color: rgba(123,21,40,.2); }
.tf-pool-item.tf-selected {
background: rgba(123,21,40,.08);
border-color: rgba(123,21,40,.4);
font-weight: 500;
}
.tf-pool-icon { font-size: 16px; }
.tf-type-bubble {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 16px;
flex-shrink: 0;
font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
}
.tf-type-bubble-lg {
width: 36px;
height: 36px;
font-size: 20px;
}
.tf-pool-name { flex: 1; }
.tf-pool-check { color: #7B1528; font-weight: 700; }
.tf-pool-add { color: #999; font-weight: 700; }
.tf-empty {
text-align: center;
padding: 30px;
color: var(--text-sm);
font-size: 13px;
}
.tf-flight-list {
list-style: none;
margin: 0;
padding: 0;
}
.tf-flight-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #fff;
border-left: 4px solid #7B1528;
border-radius: 6px;
margin: 6px 0;
cursor: grab;
transition: box-shadow 0.15s, transform 0.15s;
}
.tf-flight-item:hover {
box-shadow: 0 2px 8px rgba(0,0,0,.08);
transform: translateX(2px);
}
.tf-flight-item:active { cursor: grabbing; opacity: 0.7; }
.tf-flight-num {
font-size: 18px;
font-weight: 700;
color: #7B1528;
min-width: 24px;
text-align: center;
}
.tf-flight-icon { font-size: 18px; /* legacy */ }
.tf-flight-body { flex: 1; min-width: 0; }
.tf-flight-name {
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
}
.tf-flight-tags {
font-size: 10px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.tf-tag {
padding: 1px 6px;
background: rgba(74,123,168,.1);
color: #2d5a87;
border-radius: 8px;
white-space: nowrap;
}
.tf-tag-muted { color: var(--text-sm); }
.tf-flight-remove {
background: none;
border: none;
color: #999;
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
line-height: 1;
}
.tf-flight-remove:hover { color: #e63946; }
.tf-cleanser {
padding: 6px 12px;
font-size: 11px;
color: #888;
text-align: center;
font-style: italic;
list-style: none;
}
.tf-summary {
margin-top: 14px;
padding: 10px 14px;
background: rgba(123,21,40,.04);
border-radius: 6px;
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-sm);
}
/* 使用說明 */
.tf-help {
margin: 0 0 16px;
background: linear-gradient(135deg, rgba(74,123,168,.06), rgba(123,21,40,.04));
border: 1px solid rgba(74,123,168,.18);
border-radius: 10px;
overflow: hidden;
}
.tf-help-summary {
padding: 12px 16px;
cursor: pointer;
list-style: none;
user-select: none;
font-weight: 600;
font-size: 14px;
color: var(--text);
}
.tf-help-summary::-webkit-details-marker { display: none; }
.tf-help-summary small { font-weight: 400; color: var(--text-sm); margin-left: 6px; }
.tf-help[open] .tf-help-summary { border-bottom: 1px solid rgba(74,123,168,.12); }
.tf-help-body { padding: 14px 18px 16px; }
.tf-help-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-bottom: 14px;
}
.tf-help-card {
position: relative;
padding: 10px 14px 10px 42px;
background: rgba(255,255,255,.6);
border-radius: 8px;
font-size: 12px;
line-height: 1.55;
color: var(--text);
}
.tf-help-card-num {
position: absolute;
top: 12px;
left: 12px;
width: 22px;
height: 22px;
background: linear-gradient(135deg, #4a7ba8, #2d5a87);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
}
.tf-help-card-title {
font-weight: 600;
margin-bottom: 4px;
color: var(--text);
}
.tf-help-card p { margin: 0; color: var(--text-sm); }
.tf-help-card p b { color: #7B1528; }
.tf-help-legend {
padding: 10px 12px;
background: rgba(255,255,255,.5);
border-radius: 8px;
font-size: 12px;
line-height: 2;
color: var(--text);
}
.tf-help-legend .tf-type-bubble {
width: 22px;
height: 22px;
font-size: 12px;
margin: 0 2px 0 8px;
vertical-align: middle;
}
.tf-help-toggle {
font-size: 12px;
padding: 4px 10px;
}
.pro-lock-card {
text-align: center;
padding: 60px 30px;
background: rgba(123,21,40,.04);
border: 2px dashed rgba(123,21,40,.25);
border-radius: 14px;
cursor: pointer;
transition: background 0.2s;
}
.pro-lock-card:hover { background: rgba(123,21,40,.08); }
.pro-lock-icon { font-size: 36px; margin-bottom: 12px; }
.pro-lock-card h3 { margin: 0 0 10px; color: #7B1528; }
.pro-lock-card p { margin: 4px 0; }
@media (max-width: 720px) {
.tf-layout { grid-template-columns: 1fr; }
.view-tasting-flight .header-actions { flex-wrap: wrap; gap: 6px; }
}
/* Pro Lab 通知 bell icon + panel */
.notification-bell {
position: relative;
}
.notification-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: #e63946;
color: #fff;
font-size: 10px;
font-weight: 700;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.notification-modal {
position: relative; /* close-x absolute 定位錨點 */
max-width: 480px;
width: 95%;
max-height: 80vh;
overflow-y: auto;
padding: 22px;
}
.notification-title {
margin: 0 0 14px;
font-size: 16px;
text-align: center;
}
.notif-empty {
text-align: center;
padding: 30px 20px;
color: var(--text-sm);
font-size: 13px;
}
.notif-loading {
text-align: center;
color: var(--text-sm);
padding: 20px;
}
.notif-row {
display: flex;
gap: 10px;
padding: 10px 12px;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
margin-bottom: 6px;
align-items: center;
}
.notif-row:hover { background: rgba(0,0,0,.04); }
.notif-unread { background: rgba(74,123,168,.06); }
.notif-read { opacity: 0.7; }
.notif-icon { font-size: 18px; }
.notif-body { flex: 1; min-width: 0; }
.notif-msg {
font-size: 12px;
color: var(--text);
line-height: 1.4;
margin-bottom: 2px;
}
.notif-time {
font-size: 10px;
color: var(--text-sm);
}
.notif-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #4a7ba8;
flex-shrink: 0;
}
.notification-footer {
margin-top: 12px;
text-align: center;
border-top: 1px solid rgba(0,0,0,.06);
padding-top: 10px;
}
/* 分子級資料徽章（食材搜尋頁） */
.badge-mol-data {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 1px 7px;
margin-left: 4px;
font-size: 10px;
font-weight: 700;
background: linear-gradient(135deg, #4a7ba8, #2d5a87);
color: #fff;
border-radius: 8px;
letter-spacing: 0.3px;
cursor: help;
vertical-align: middle;
transition: transform 0.15s, box-shadow 0.15s;
}
.badge-mol-data:hover {
transform: scale(1.08);
box-shadow: 0 1px 4px rgba(74,123,168,.4);
}
/* 配方頁通知徽章 chip */
.recipe-notif-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
margin-left: 8px;
font-size: 11px;
background: linear-gradient(135deg, #4a7ba8, #2d5a87);
color: #fff;
border-radius: 12px;
cursor: pointer;
font-weight: 500;
white-space: nowrap;
animation: chip-pulse 2.5s ease-in-out infinite;
transition: transform 0.15s, box-shadow 0.15s;
}
.recipe-notif-chip:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(74,123,168,.4);
}
.recipe-notif-chip b { font-size: 12px; }
@keyframes chip-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(74,123,168,.4); }
50% { box-shadow: 0 0 0 4px rgba(74,123,168,0); }
}
/* 通知偏好設定（settings 頁） */
.notif-pref-row {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 0;
}
.notif-pref-info { flex: 1; }
.notif-pref-label {
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
}
.notif-pref-desc {
font-size: 11px;
color: var(--text-sm);
line-height: 1.4;
}
.notif-pref-hint {
margin: 12px 0 0;
padding: 8px 12px;
background: rgba(74,123,168,.06);
border-radius: 6px;
font-size: 11px;
color: var(--text-sm);
}
.notif-pref-actions {
margin-top: 14px;
display: flex;
gap: 8px;
}
.btn-sm {
padding: 6px 12px;
font-size: 12px;
border-radius: 6px;
}
#webpush-toggle-btn {
white-space: nowrap;
min-width: 90px;
}
#webpush-toggle-btn[data-enabled="true"] {
background: rgba(64,145,108,.1);
color: #1d6e4a;
border-color: #40916c;
}
/* iOS 風格 switch toggle */
.switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: #ccc;
border-radius: 12px;
transition: background 0.2s;
}
.switch-slider::before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background: white;
border-radius: 50%;
transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.switch input:checked + .switch-slider { background: #7B1528; }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }
.switch input:focus + .switch-slider { box-shadow: 0 0 0 2px rgba(123,21,40,.25); }
/* Pro Lab 使用熱力圖（settings 頁） */
.plh-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
}
.plh-cell {
padding: 10px 8px;
border-radius: 8px;
text-align: center;
transition: transform 0.15s, box-shadow 0.15s;
}
.plh-cell:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.plh-cell-icon { font-size: 20px; margin-bottom: 4px; }
.plh-cell-name { font-size: 11px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.plh-cell-count {
font-size: 13px;
font-weight: 700;
color: #7B1528;
margin-bottom: 2px;
}
.plh-cell-last { font-size: 9px; color: var(--text-sm); line-height: 1.2; }
.plh-unused { color: #aaa; font-style: italic; }
.plh-hint {
margin: 12px 0 0;
padding: 8px 12px;
background: rgba(74,123,168,.06);
border-radius: 6px;
font-size: 12px;
color: var(--text-sm);
text-align: center;
}
/* 配方頁陳化 banner */
.rec-age-banner {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
margin: 0 0 8px;
border-radius: 8px;
font-size: 13px;
border-left: 4px solid #ccc;
}
.rec-age-banner-icon { font-size: 18px; }
.rec-age-banner-msg { flex: 1; line-height: 1.4; }
.rec-age-banner-action {
padding: 5px 12px;
font-size: 11px;
background: rgba(255,255,255,0.5);
border: 1px solid rgba(0,0,0,0.1);
border-radius: 14px;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
}
.rec-age-banner-action:hover { background: rgba(255,255,255,0.9); }
.rec-age-banner-peak {
background: linear-gradient(90deg, rgba(64,145,108,0.18), rgba(64,145,108,0.06));
border-left-color: #40916c;
color: #1d6e4a;
}
.rec-age-banner-peak b { color: #40916c; }
.rec-age-banner-near {
background: linear-gradient(90deg, rgba(244,162,97,0.15), rgba(244,162,97,0.05));
border-left-color: #f4a261;
color: #b86b1e;
}
.rec-age-banner-young {
background: rgba(74,123,168,0.06);
border-left-color: #4a7ba8;
color: #2d5a87;
}
.rec-age-banner-past {
background: linear-gradient(90deg, rgba(230,57,70,0.12), rgba(230,57,70,0.04));
border-left-color: #e63946;
color: #b51e2c;
}
.rec-age-banner-info {
background: rgba(0,0,0,0.03);
border-left-color: #888;
color: var(--text-sm);
}
/* Pro Lab Dashboard Widget */
.pro-lab-dash {
margin: 14px 0;
padding: 14px 18px;
background: linear-gradient(135deg, rgba(123,21,40,.04), rgba(74,123,168,.04));
border: 1px solid rgba(123,21,40,.15);
border-radius: 10px;
}
.pro-lab-dash[open] { padding-bottom: 14px; }
.pro-lab-dash-summary {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
list-style: none;
user-select: none;
}
.pro-lab-dash-summary::-webkit-details-marker { display: none; }
.pro-lab-dash-title {
font-weight: 700;
font-size: 14px;
color: #7B1528;
}
.pro-lab-dash-meta {
font-size: 11px;
color: var(--text-sm);
background: rgba(123,21,40,.08);
padding: 3px 10px;
border-radius: 12px;
}
.pld-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
margin-top: 12px;
}
.pld-card {
padding: 10px 12px;
background: rgba(255,255,255,0.7);
border-radius: 8px;
border-left: 3px solid #ccc;
transition: box-shadow 0.15s;
}
.pld-card-safe { border-left-color: #40916c; }
.pld-card-warn { border-left-color: #f4a261; background: rgba(244,162,97,.06); }
.pld-card-danger { border-left-color: #e63946; background: rgba(230,57,70,.06); }
.pld-card-head {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.pld-card-icon { font-size: 14px; }
.pld-card-label {
flex: 1;
font-weight: 600;
font-size: 12px;
color: var(--text);
}
.pld-card-count {
font-size: 14px;
font-weight: 700;
color: #7B1528;
background: rgba(123,21,40,.08);
padding: 1px 8px;
border-radius: 10px;
min-width: 24px;
text-align: center;
}
.pld-card-desc {
font-size: 11px;
color: var(--text-sm);
line-height: 1.5;
}
.pld-recipe-link {
color: #4a7ba8;
cursor: pointer;
text-decoration: none;
border-bottom: 1px dashed rgba(74,123,168,.4);
}
.pld-recipe-link:hover {
color: #2d5a87;
border-bottom-style: solid;
}
/* Free 用戶鎖定預覽 */
.pro-lab-dash-locked { cursor: pointer; padding: 14px 18px; }
.pro-lab-dash-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.pld-tease-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pld-tease-pill {
padding: 6px 12px;
background: rgba(255,255,255,0.7);
border-radius: 14px;
font-size: 12px;
color: var(--text);
filter: blur(0.3px);
opacity: 0.8;
}
.pld-tease-pill b {
color: #7B1528;
margin-left: 4px;
}
.pld-tease-hint {
margin: 10px 0 0;
text-align: center;
font-size: 12px;
color: var(--text-sm);
}
.recipe-card-ageing {
display: flex;
align-items: center;
gap: 6px;
margin: 6px 0 4px;
font-size: 10px;
color: var(--text-sm);
}
.rc-age-bar {
flex: 1;
height: 8px;
display: block;
}
.rc-age-label {
white-space: nowrap;
font-weight: 500;
}
@media (max-width: 480px) {
.pro-lab-grid { grid-template-columns: 1fr; padding: 10px 14px 14px; }
.trige-radar { max-width: 160px; }
}
/* PRO Lock Modal Overlay */
.pro-lock-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
animation: fadeIn 0.2s ease;
}
.pro-lock-modal {
background: #fff;
border-radius: 16px;
padding: 32px 28px 24px;
max-width: 380px;
width: 90vw;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
animation: slideUp 0.25s ease;
}
.pro-lock-icon {
font-size: 44px;
margin-bottom: 8px;
}
.pro-lock-modal h3 {
font-family: 'Playfair Display', serif;
color: var(--burgundy, #7c2d41);
font-size: 20px;
margin: 0 0 6px;
}
.pro-lock-feature {
font-size: 14px;
color: var(--text-sm);
margin: 0 0 8px;
font-weight: 500;
}
.pro-lock-desc {
font-size: 13px;
color: var(--text-sm);
margin: 0 0 16px;
}
.pro-lock-benefits {
text-align: left;
background: var(--gold-bg, #fff9f0);
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 18px;
}
.pro-lock-benefit {
font-size: 13px;
padding: 4px 0;
color: var(--text);
}
.pro-lock-actions {
display: flex;
gap: 8px;
}
.pro-lock-actions .btn-primary {
flex: 1;
padding: 11px 16px;
font-size: 14px;
}
.pro-lock-actions .btn-secondary {
padding: 11px 16px;
font-size: 13px;
}
/* Select type locked options */
.select-type option:disabled {
color: #999;
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ── Ingredient Breakdown Table ──────────────────────────── */
.breakdown-panel {
border-top: 1px solid var(--border);
background: var(--card);
}
.breakdown-panel details { margin: 0; }
.breakdown-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px; cursor: pointer; user-select: none;
font-size: 14px; font-weight: 600; color: var(--text);
}
.breakdown-header::-webkit-details-marker { display: none; }
.breakdown-header::before { content: '▶'; font-size: 10px; margin-right: 6px; transition: transform .2s; color: var(--text-sm); }
details[open] > .breakdown-header::before { transform: rotate(90deg); }
details[open] > .breakdown-header .breakdown-hint { display: none; }
.breakdown-hint { font-size: 11px; color: var(--text-sm); font-weight: 400; }
.breakdown-scroll {
overflow-x: auto; -webkit-overflow-scrolling: touch;
padding: 0 0 8px;
}
.breakdown-table {
width: 100%; min-width: 680px; border-collapse: collapse;
font-size: 12px; line-height: 1.4;
}
.breakdown-table th,
.breakdown-table td {
padding: 5px 8px; white-space: nowrap; border-bottom: 1px solid var(--border);
}
.breakdown-table thead th {
background: var(--bg); position: sticky; top: 0; z-index: 2;
font-weight: 600; color: var(--text-sm); font-size: 11px; text-align: center;
}
.bd-subheader th { font-weight: 400; font-size: 10px; padding: 2px 8px; }
.bd-sub-raw { color: var(--burgundy); margin-right: 6px; }
.bd-sub-mix { color: #40916c; }
.bd-sticky-col {
position: sticky; left: 0; z-index: 3; background: var(--card);
text-align: left; min-width: 100px; max-width: 140px;
overflow: hidden; text-overflow: ellipsis; font-weight: 500;
}
thead .bd-sticky-col { background: var(--bg); }
tfoot .bd-sticky-col { background: var(--bg); }
.bd-amt { text-align: center; color: var(--text-sm); min-width: 44px; }
.bd-num { text-align: center; min-width: 64px; }
.bd-val-raw { color: var(--burgundy); font-size: 11px; margin-right: 4px; }
.bd-val-mix { color: #40916c; font-weight: 500; font-size: 11px; }
.bd-val-total { font-weight: 700; font-size: 12px; }
.bd-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
margin-right: 4px; vertical-align: middle;
}
.bd-total-row td { background: var(--bg); border-top: 2px solid var(--border); font-weight: 600; }
.breakdown-legend {
display: flex; gap: 16px; padding: 6px 18px 10px; font-size: 11px;
}
.bd-legend-raw { color: var(--burgundy); }
.bd-legend-mix { color: #40916c; }
@media (max-width: 768px) {
.breakdown-table { min-width: 0; width: max-content; font-size: 11px; }
.breakdown-table th, .breakdown-table td { padding: 4px 5px; }
.bd-sticky-col { min-width: 70px; max-width: 100px; font-size: 10px; }
.bd-num { min-width: 48px; font-size: 10px; }
.bd-amt { min-width: 36px; }
.breakdown-scroll { max-width: calc(100vw - 32px); }
}
/* ===== RECIPE NOTES ===== */
.btn-notes-toggle {
background: transparent; border: 1px solid var(--border); border-radius: 6px;
cursor: pointer; font-size: 16px; padding: 4px 8px;
transition: all 0.2s ease;
}
.btn-notes-toggle:hover { border-color: var(--gold); background: rgba(212,175,55,0.1); }
.recipe-notes-area {
max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 18px;
}
.recipe-notes-area.open { max-height: 180px; padding: 8px 18px 12px; }
.recipe-notes-input {
width: 100%; min-height: 60px; resize: vertical;
background: var(--card); border: 1px solid var(--border); border-radius: 6px;
color: var(--text); font-size: 13px; padding: 10px 12px; line-height: 1.5;
font-family: inherit;
}
.recipe-notes-input:focus { outline: none; border-color: var(--gold); }
.recipe-notes-input::placeholder { color: var(--text-sm); }
/* ===== MARKETPLACE STYLES ===== */
/* Marketplace View Layout */
.mkt-view {
display: flex; flex-direction: column; gap: 16px; padding: 16px;
background: var(--bg); color: var(--text);
}
.mkt-tabs {
display: flex; gap: 0; border-bottom: 1px solid var(--border);
background: var(--bg);
}
.mkt-tab-btn {
padding: 12px 20px; font-size: 14px; font-weight: 500;
background: transparent; border: none; color: var(--text-sm);
cursor: pointer; transition: all 0.2s ease;
border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mkt-tab-btn:hover {
color: var(--text); background: rgba(255, 255, 255, 0.03);
}
.mkt-tab-btn.active {
color: var(--gold); border-bottom-color: var(--gold);
}
.mkt-search-filter {
display: flex; gap: 12px; align-items: center;
background: var(--surface); padding: 12px; border-radius: 8px;
border: 1px solid var(--border);
}
.mkt-search-input {
flex: 1; padding: 8px 12px; background: var(--card);
border: 1px solid var(--border); border-radius: 6px;
color: var(--text); font-size: 14px;
}
.mkt-search-input::placeholder {
color: var(--text-sm);
}
.mkt-filter-btn {
padding: 8px 16px; background: var(--card); border: 1px solid var(--border);
border-radius: 6px; color: var(--text); cursor: pointer;
font-size: 13px; transition: all 0.2s ease;
}
.mkt-filter-btn:hover {
background: var(--surface); border-color: var(--gold);
}
/* Filter & Sort Bar */
.mkt-filter-bar {
display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
padding: 10px 12px; background: var(--surface);
border-radius: 8px; border: 1px solid var(--border);
margin-top: 8px;
}
.mkt-filter-group {
display: flex; flex-direction: column; gap: 3px;
}
.mkt-filter-label {
font-size: 10px; font-weight: 700; text-transform: uppercase;
color: var(--text-sm); letter-spacing: 0.5px;
}
.mkt-filter-select {
padding: 7px 28px 7px 10px; background: var(--card);
border: 1px solid var(--border); border-radius: 6px;
color: var(--text); cursor: pointer; font-size: 13px;
transition: all 0.2s ease;
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.mkt-filter-select:hover,
.mkt-filter-select:focus {
border-color: var(--gold); outline: none;
}
.mkt-filter-reset {
padding: 7px 12px; background: transparent;
border: 1px dashed var(--text-sm); border-radius: 6px;
color: var(--text-sm); cursor: pointer; font-size: 12px;
transition: all 0.2s ease; align-self: flex-end;
}
.mkt-filter-reset:hover {
border-color: #dc2626; color: #dc2626; background: rgba(220,38,38,0.05);
}
.mkt-result-count {
font-size: 13px; color: var(--text-sm); padding: 6px 0;
}
.mkt-grid {
display: grid; gap: 16px;
grid-template-columns: repeat(3, 1fr);
}
/* Product Cards */
.mkt-card {
display: flex; flex-direction: column; background: var(--surface);
border: 1px solid var(--border); border-radius: 12px;
overflow: hidden; transition: all 0.25s ease;
}
.mkt-card:hover {
transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
border-color: var(--gold);
}
.mkt-card-image {
width: 100%; aspect-ratio: 16 / 10;
background: linear-gradient(135deg, var(--card), var(--surface));
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.mkt-card-image img {
width: 100%; height: 100%; object-fit: cover;
}
.mkt-card-content {
display: flex; flex-direction: column; gap: 8px; padding: 12px;
flex: 1;
}
.mkt-card-name {
font-weight: 600; font-size: 15px; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mkt-card-author {
font-size: 12px; color: var(--text-sm);
}
.mkt-card-badge-row {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.mkt-type-badge {
display: inline-block; padding: 3px 8px; border-radius: 4px;
font-size: 11px; font-weight: 600; text-transform: uppercase;
}
.mkt-type-recipe {
background: rgba(212, 175, 55, 0.2); color: var(--gold);
}
.mkt-type-ingredient {
background: rgba(64, 145, 108, 0.2); color: #40916c;
}
.mkt-type-bundle {
background: rgba(147, 51, 234, 0.2); color: #9333ea;
}
.mkt-sales-badge {
font-size: 11px; color: var(--text-sm); margin-left: auto;
}
.mkt-card-price {
font-size: 18px; font-weight: 700; color: var(--gold);
margin: 8px 0; text-align: center;
}
.mkt-card-price-row {
display: flex; align-items: center; justify-content: center;
gap: 6px; margin: 8px 0; flex-wrap: wrap;
}
.mkt-price-ntd {
font-size: 18px; font-weight: 700; color: var(--gold);
}
.mkt-price-pts {
font-size: 15px; font-weight: 600; color: #f59e0b;
background: rgba(245, 158, 11, 0.1); padding: 2px 8px;
border-radius: 12px;
}
.mkt-price-sep {
color: var(--text-sm); font-size: 14px; opacity: 0.5;
}
.mkt-price-free {
color: #40916c;
}
/* Publish modal dual price */
.price-dual-wrap {
display: flex; gap: 12px; margin-bottom: 12px;
}
.price-col {
flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.price-label-sm {
font-size: 12px; font-weight: 600; color: var(--text-sm);
}
/* Payment method selection modal */
.pay-method-options {
display: flex; flex-direction: column; gap: 10px; margin-top: 12px;
}
.pay-method-btn {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-radius: 10px;
border: 2px solid var(--border); background: var(--card);
cursor: pointer; transition: all 0.2s ease; text-align: left;
}
.pay-method-btn:hover {
border-color: var(--gold); background: rgba(212, 175, 55, 0.05);
transform: translateY(-1px);
}
.pay-method-ntd:hover { border-color: var(--gold); }
.pay-method-pts:hover { border-color: #f59e0b; }
.pay-method-icon {
font-size: 24px; flex-shrink: 0;
}
.pay-method-label {
font-size: 15px; font-weight: 700; color: var(--text);
}
.pay-method-balance {
font-size: 12px; color: var(--text-sm); margin-left: auto;
}
/* ── Rating System ──────────────────────────────────────────── */
/* Inline star display */
.rating-inline {
display: inline-flex; align-items: center; gap: 4px;
}
.star { font-size: 14px; line-height: 1; }
.star-full { color: #f59e0b; }
.star-half { color: #f59e0b; opacity: 0.5; }
.star-empty { color: var(--text-sm); opacity: 0.3; }
.rating-avg { font-size: 13px; font-weight: 700; color: #f59e0b; }
.rating-count { font-size: 12px; color: var(--text-sm); }
.rating-none { font-size: 12px; color: var(--text-sm); font-style: italic; }
/* Community card rating row */
.comm-rating-row {
margin: 4px 0 6px; line-height: 1.4;
}
/* Marketplace card rating */
.mkt-card-rating {
text-align: center; margin: 2px 0;
}
/* Marketplace detail rating */
.mkt-detail-rating {
margin: 4px 0 8px;
}
/* Rate button */
.btn-rate {
padding: 6px 14px; border-radius: 6px;
border: 1px solid #f59e0b; background: rgba(245, 158, 11, 0.08);
color: #f59e0b; font-size: 13px; font-weight: 600;
cursor: pointer; transition: all 0.2s ease;
}
.btn-rate:hover {
background: rgba(245, 158, 11, 0.18); transform: translateY(-1px);
}
/* Star Picker (interactive) */
.star-picker {
display: flex; align-items: center; gap: 4px;
justify-content: center; margin-bottom: 12px;
}
.star-pick {
font-size: 32px; cursor: pointer; color: var(--text-sm); opacity: 0.25;
transition: all 0.15s ease; user-select: none;
}
.star-pick:hover {
transform: scale(1.2); opacity: 0.6;
}
.star-pick-active {
color: #f59e0b; opacity: 1;
}
.star-pick-active:hover {
opacity: 1;
}
.star-pick-label {
font-size: 14px; font-weight: 600; color: var(--text-sm);
margin-left: 8px;
}
/* Rating form */
.rating-form {
margin-bottom: 16px;
}
.rating-form textarea {
margin-bottom: 10px; resize: vertical;
}
/* Reviews section */
.rating-reviews-section {
border-top: 1px solid var(--border); padding-top: 12px;
}
.rating-reviews-title {
font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--text);
}
.rating-reviews-list {
max-height: 240px; overflow-y: auto;
display: flex; flex-direction: column; gap: 8px;
}
.review-item {
padding: 8px 10px; border-radius: 6px;
background: var(--surface); border: 1px solid var(--border);
}
.review-mine {
border-color: rgba(245, 158, 11, 0.3);
background: rgba(245, 158, 11, 0.04);
}
.review-header {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.review-author {
font-size: 13px; font-weight: 600; color: var(--text);
}
.review-stars {
font-size: 12px; color: #f59e0b;
}
.review-date {
font-size: 11px; color: var(--text-sm); margin-left: auto;
}
.review-comment {
font-size: 13px; color: var(--text); margin-top: 4px; line-height: 1.4;
}
.review-empty {
font-size: 13px; color: var(--text-sm); font-style: italic; text-align: center;
padding: 12px;
}
/* Rating summary block */
.rating-summary {
display: flex; flex-direction: column; align-items: center;
gap: 2px; padding: 14px; margin-bottom: 14px;
background: linear-gradient(135deg, rgba(245,158,11,.06), rgba(245,158,11,.02));
border: 1px solid rgba(245,158,11,.15); border-radius: 10px;
}
.rating-summary-score {
font-size: 32px; font-weight: 700; color: #f59e0b; line-height: 1;
}
.rating-summary-stars {
font-size: 18px; color: #f59e0b; letter-spacing: 2px;
}
.rating-summary-count {
font-size: 12px; color: var(--text-sm);
}
.rating-form-title {
font-size: 13px; font-weight: 600; color: var(--text-sm);
margin: 0 0 6px; text-align: center;
}
/* View-only rate button (for own items) */
.btn-rate-view {
border-color: var(--border); background: var(--surface);
color: var(--text-sm);
}
.btn-rate-view:hover {
border-color: var(--text-sm); background: var(--card);
}
/* Rating mobile */
@media (max-width: 600px) {
.star-pick { font-size: 36px; }
.star-picker { gap: 2px; }
.rating-reviews-list { max-height: 180px; }
}
.mkt-card-button {
padding: 10px 12px; background: var(--gold); border: none;
border-radius: 8px; color: var(--bg); font-weight: 600;
cursor: pointer; transition: all 0.2s ease; font-size: 14px;
width: 100%;
}
.mkt-card-button:hover {
background: #e4c141; transform: scale(1.02);
}
.mkt-card-button:disabled {
background: var(--text-sm); cursor: not-allowed; opacity: 0.6;
}
/* ── My Products card actions ── */
.mkt-card-own { position: relative; }
.mkt-card-actions {
display: flex; gap: 6px; padding: 8px 12px;
border-top: 1px solid var(--border);
background: var(--ivory);
border-radius: 0 0 var(--radius) var(--radius);
}
.mkt-card-actions .btn-sm { font-size: 12px; padding: 5px 10px; border-radius: 6px; }
.mkt-status-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.mkt-status-paused { background: #FEF3C7; color: #92400E; }
/* Product Detail Modal */
.modal-content.mkt-modal-detail {
background: var(--surface); border-radius: 16px;
width: 100%; max-width: 600px; max-height: 90vh;
overflow-y: auto; overflow-x: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(200,160,85,.15);
position: relative;
}
.modal-content.mkt-modal-detail .modal-close {
position: absolute; top: 12px; right: 12px; z-index: 5;
width: 32px; height: 32px; border-radius: 50%;
background: rgba(0,0,0,.45); color: #fff; border: none;
font-size: 16px; cursor: pointer; display: flex;
align-items: center; justify-content: center;
backdrop-filter: blur(4px); transition: background .2s;
}
.modal-content.mkt-modal-detail .modal-close:hover {
background: rgba(0,0,0,.7);
}
.mkt-detail-container {
display: flex; flex-direction: column;
}
.mkt-detail-image {
width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--card), var(--surface));
display: flex; align-items: center; justify-content: center;
overflow: hidden; position: relative;
}
.mkt-detail-image img {
width: 100%; height: 100%; object-fit: cover;
}
.mkt-detail-placeholder {
font-size: 4rem; opacity: 0.6;
}
.mkt-detail-info {
display: flex; flex-direction: column; gap: 12px; padding: 20px;
}
.mkt-detail-header {
display: flex; align-items: flex-start; gap: 10px;
}
.mkt-detail-header h2 {
font-family: 'Playfair Display', serif;
font-size: 20px; font-weight: 700; color: var(--text);
margin: 0; flex: 1; line-height: 1.3;
}
.mkt-detail-rating {
margin: -4px 0 4px;
}
.mkt-description {
background: var(--card); border-radius: 8px; padding: 12px;
border: 1px solid var(--border);
}
.mkt-description h4 {
font-size: 12px; font-weight: 700; color: var(--text-sm);
text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 6px;
}
.mkt-description p {
font-size: 13px; color: var(--text); line-height: 1.5; margin: 0;
}
.mkt-detail-section {
background: var(--card); border-radius: 8px; padding: 12px;
border: 1px solid var(--border);
display: flex; flex-direction: column; gap: 8px;
}
.mkt-detail-section h4 {
font-size: 12px; font-weight: 700; color: var(--text-sm);
text-transform: uppercase; letter-spacing: 0.5px; margin: 0;
}
.mkt-detail-section h5 {
font-size: 12px; font-weight: 600; color: var(--text); margin: 4px 0 2px;
}
.mkt-detail-section ul {
margin: 0; padding-left: 18px; font-size: 13px; color: var(--text);
}
.mkt-detail-section ul li {
padding: 2px 0; line-height: 1.5;
}
.mkt-detail-section p {
font-size: 13px; color: var(--text); margin: 0;
}
.mkt-detail-section table.comp-table {
width: 100%; font-size: 13px; border-collapse: collapse;
}
.mkt-detail-section table.comp-table td {
padding: 4px 8px; border-bottom: 1px solid var(--border);
}
.mkt-detail-section table.comp-table td:last-child {
text-align: right; font-weight: 600; color: var(--gold);
}
.mkt-detail-footer {
display: flex; gap: 10px; padding: 14px 20px;
border-top: 1px solid var(--border); background: var(--bg);
align-items: center; flex-wrap: wrap;
}
.mkt-price-section {
flex-shrink: 0;
}
.mkt-detail-buttons {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
margin-left: auto;
}
.mkt-detail-buttons .btn-rate {
padding: 10px 16px; font-size: 14px;
}
.mkt-report-link {
margin-top: 8px; text-align: right; width: 100%;
}
.mkt-report-link .btn-text {
background: none; border: none; color: var(--text-sm); font-size: 12px;
cursor: pointer; opacity: 0.6; padding: 4px 0;
}
.mkt-report-link .btn-text:hover { opacity: 1; color: var(--error); }
.mkt-detail-footer button {
padding: 10px 18px; border-radius: 8px; border: none;
font-weight: 600; cursor: pointer; font-size: 14px;
transition: all 0.2s ease;
}
.mkt-detail-footer .btn-primary {
background: var(--gold); color: var(--bg);
}
.mkt-detail-footer .btn-secondary {
background: var(--card); color: var(--text); border: 1px solid var(--border);
}
.mkt-detail-footer .btn-danger {
background: rgba(220,38,38,.1); color: #dc2626; border: 1px solid rgba(220,38,38,.25);
}
.already-owned {
font-size: 13px; font-weight: 600; color: #40916c; margin: 0;
white-space: nowrap;
}
.mkt-detail-action-buy {
background: var(--gold); color: var(--bg);
}
.mkt-detail-action-buy:hover {
background: #e4c141;
}
.mkt-detail-action-edit {
background: var(--card); color: var(--text); border: 1px solid var(--border);
}
.mkt-detail-action-edit:hover {
background: var(--surface); border-color: var(--gold);
}
.mkt-detail-action-delete {
background: rgba(220, 38, 38, 0.15); color: #dc2626;
border: 1px solid rgba(220, 38, 38, 0.3);
}
.mkt-detail-action-delete:hover {
background: rgba(220, 38, 38, 0.25);
}
.mkt-owned-badge {
display: inline-block; padding: 6px 12px; border-radius: 4px;
background: rgba(64, 145, 108, 0.2); color: #40916c;
font-weight: 600; font-size: 12px; margin-left: auto;
}
/* Publish Modal */
.mkt-publish-modal {
display: flex; flex-direction: column; gap: 0;
background: var(--surface); border-radius: 8px; overflow: auto;
max-height: 90vh;
}
.mkt-publish-header {
padding: 20px 24px; border-bottom: 1px solid var(--border);
background: var(--bg);
}
.mkt-publish-title {
font-size: 20px; font-weight: 700; color: var(--text);
}
.mkt-publish-content {
display: flex; flex-direction: column; gap: 16px; padding: 24px;
flex: 1;
}
.mkt-form-group {
display: flex; flex-direction: column; gap: 6px;
}
.mkt-form-label {
font-weight: 600; font-size: 13px; color: var(--text);
text-transform: uppercase; letter-spacing: 0.5px;
}
.mkt-form-input {
padding: 10px 12px; background: var(--card); border: 1px solid var(--border);
border-radius: 6px; color: var(--text); font-size: 13px;
transition: all 0.2s ease;
}
.mkt-form-input:focus {
outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1);
}
.mkt-image-upload {
display: flex; flex-direction: column; gap: 8px;
}
.mkt-upload-area {
position: relative; padding: 32px; border: 2px dashed var(--border);
border-radius: 8px; background: rgba(212, 175, 55, 0.05);
text-align: center; cursor: pointer; transition: all 0.2s ease;
}
.mkt-upload-area:hover {
border-color: var(--gold); background: rgba(212, 175, 55, 0.1);
}
.mkt-upload-area.has-image {
padding: 0; border: 1px solid var(--border); background: transparent;
}
.mkt-upload-label {
font-size: 13px; color: var(--text-sm); line-height: 1.5;
}
.mkt-upload-label strong {
color: var(--text);
}
.mkt-upload-input {
display: none;
}
.mkt-upload-preview {
width: 100%; max-height: 200px; object-fit: contain; border-radius: 4px;
}
.mkt-description-textarea {
padding: 12px; background: var(--card); border: 1px solid var(--border);
border-radius: 6px; color: var(--text); font-size: 13px;
min-height: 120px; font-family: inherit; resize: vertical;
transition: all 0.2s ease;
}
.mkt-description-textarea:focus {
outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1);
}
.mkt-price-input-wrapper {
display: flex; align-items: center;
}
.mkt-price-prefix {
padding: 10px 12px; background: var(--card); border: 1px solid var(--border);
border-right: none; border-radius: 6px 0 0 6px;
color: var(--text-sm); font-weight: 600; font-size: 13px;
}
.mkt-price-input {
flex: 1; padding: 10px 12px; background: var(--card);
border: 1px solid var(--border); border-left: none;
border-radius: 0 6px 6px 0; color: var(--text); font-size: 13px;
}
.mkt-price-input:focus {
outline: none; border-color: var(--gold);
}
.mkt-bundle-builder {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.mkt-bundle-column {
display: flex; flex-direction: column; gap: 8px;
}
.mkt-bundle-column-title {
font-weight: 600; font-size: 12px; color: var(--text);
text-transform: uppercase; letter-spacing: 0.5px;
}
.mkt-checkbox-group {
display: flex; flex-direction: column; gap: 8px;
}
.mkt-checkbox-item {
display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.mkt-checkbox-item input[type="checkbox"] {
width: 16px; height: 16px; cursor: pointer; accent-color: var(--gold);
}
.mkt-checkbox-item label {
flex: 1; cursor: pointer; font-size: 13px; color: var(--text);
}
.mkt-selected-count {
display: inline-block; padding: 4px 10px; border-radius: 4px;
background: rgba(212, 175, 55, 0.2); color: var(--gold);
font-weight: 600; font-size: 11px; margin-top: 8px;
}
.mkt-publish-footer {
display: flex; gap: 12px; padding: 16px 24px;
border-top: 1px solid var(--border); background: var(--bg);
}
.mkt-publish-btn {
flex: 1; padding: 12px; background: var(--gold); border: none;
border-radius: 6px; color: var(--bg); font-weight: 600;
cursor: pointer; font-size: 14px; transition: all 0.2s ease;
}
.mkt-publish-btn:hover {
background: #e4c141;
}
.mkt-publish-btn:disabled {
background: var(--text-sm); cursor: not-allowed; opacity: 0.6;
}
.mkt-cancel-btn {
padding: 12px 24px; background: var(--card); border: 1px solid var(--border);
border-radius: 6px; color: var(--text); font-weight: 600;
cursor: pointer; font-size: 14px; transition: all 0.2s ease;
}
.mkt-cancel-btn:hover {
background: var(--surface); border-color: var(--gold);
}
/* Purchase Flow */
.mkt-purchase {
display: flex; flex-direction: column; gap: 12px;
}
.mkt-price-breakdown {
display: flex; flex-direction: column; gap: 8px;
padding: 12px; background: var(--card); border-radius: 6px;
}
.mkt-breakdown-row {
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; color: var(--text);
}
.mkt-breakdown-row.total {
font-weight: 700; color: var(--gold); border-top: 1px solid var(--border);
padding-top: 8px; margin-top: 4px;
}
.mkt-breakdown-label {
color: var(--text-sm);
}
.mkt-breakdown-amount {
font-weight: 600;
}
.mkt-loading-spinner {
display: inline-block; width: 16px; height: 16px;
border: 2px solid var(--text-sm); border-top-color: var(--gold);
border-radius: 50%; animation: mkt-spin 0.8s linear infinite;
}
@keyframes mkt-spin {
to { transform: rotate(360deg); }
}
/* My Products Table */
.mkt-my-products {
display: flex; flex-direction: column; gap: 0;
background: var(--surface); border-radius: 8px; overflow: hidden;
}
.mkt-my-products-header {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 12px; padding: 12px 16px; background: var(--card);
border-bottom: 1px solid var(--border); font-weight: 600;
font-size: 12px; color: var(--text-sm); text-transform: uppercase;
letter-spacing: 0.5px;
}
.mkt-my-products-row {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border);
align-items: center; font-size: 13px; color: var(--text);
}
.mkt-my-products-row:hover {
background: rgba(212, 175, 55, 0.05);
}
.mkt-product-cell-name {
font-weight: 600; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;
}
.mkt-status-badge {
display: inline-block; padding: 4px 8px; border-radius: 4px;
font-weight: 600; font-size: 11px; text-align: center;
}
.mkt-status-active {
background: rgba(64, 145, 108, 0.2); color: #40916c;
}
.mkt-status-paused {
background: rgba(202, 138, 4, 0.2); color: #ca8a04;
}
.mkt-status-deleted {
background: rgba(220, 38, 38, 0.2); color: #dc2626;
}
.mkt-sales-display {
font-weight: 600;
}
.mkt-revenue-display {
color: var(--gold); font-weight: 600;
}
.mkt-actions-cell {
display: flex; gap: 6px; justify-content: flex-end;
}
.mkt-action-btn-sm {
padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border);
background: var(--card); color: var(--text); font-size: 11px;
cursor: pointer; transition: all 0.2s ease; font-weight: 600;
}
.mkt-action-btn-sm:hover {
background: var(--surface); border-color: var(--gold);
}
.mkt-action-btn-sm.delete {
border-color: rgba(220, 38, 38, 0.3); color: #dc2626;
}
.mkt-action-btn-sm.delete:hover {
background: rgba(220, 38, 38, 0.1); border-color: #dc2626;
}
/* Mobile Responsive */
@media (max-width: 900px) {
.mkt-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.mkt-grid {
grid-template-columns: 1fr;
gap: 10px;
}
/* Mobile horizontal card layout */
.mkt-grid > .mkt-card {
flex-direction: row; border-radius: 10px;
}
.mkt-grid > .mkt-card > .mkt-card-image {
width: 90px; min-width: 90px; height: auto;
aspect-ratio: auto; border-radius: 10px 0 0 10px;
}
.mkt-grid > .mkt-card > .mkt-card-content {
padding: 10px 12px; gap: 4px; flex: 1; min-width: 0;
}
.mkt-grid > .mkt-card .mkt-card-name {
font-size: 14px;
}
.mkt-grid > .mkt-card .mkt-card-author {
font-size: 11px;
}
.mkt-grid > .mkt-card .mkt-card-price-row {
justify-content: flex-start; margin: 2px 0;
}
.mkt-grid > .mkt-card .mkt-card-rating {
text-align: left;
}
.mkt-grid > .mkt-card .mkt-card-button {
padding: 7px 12px; font-size: 12px;
width: 100%; align-self: stretch;
border-radius: 6px;
}
.mkt-search-filter {
flex-direction: column;
}
.mkt-search-input {
width: 100%;
}
.mkt-filter-bar {
gap: 8px;
}
.mkt-filter-group {
flex: 1; min-width: calc(50% - 8px);
}
.mkt-filter-select {
width: 100%;
}
.modal-content.mkt-modal-detail {
max-width: 100%; max-height: 100vh;
border-radius: 0; position: fixed; inset: 0;
overflow-y: auto;
}
.modal-content.mkt-modal-detail .modal-close {
top: 8px; right: 8px;
}
.mkt-detail-image {
aspect-ratio: 16/10; max-height: 200px;
}
.mkt-detail-info {
padding: 16px; gap: 10px;
padding-bottom: 100px;
}
.mkt-detail-header h2 {
font-size: 18px;
}
.mkt-detail-footer {
position: fixed; bottom: 0; left: 0; right: 0;
padding: 10px 14px; gap: 8px;
border-radius: 0; background: var(--surface);
border-top: 1px solid var(--border); z-index: 10;
flex-direction: row; flex-wrap: wrap;
box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}
.mkt-price-section {
flex: 0 0 auto;
}
.mkt-detail-buttons {
display: flex; gap: 8px; flex-wrap: nowrap;
margin-left: auto;
}
.mkt-detail-footer button {
padding: 9px 14px; font-size: 13px;
}
.mkt-detail-buttons .btn-rate {
padding: 9px 14px; font-size: 13px;
}
.mkt-publish-modal {
max-height: 100vh;
}
.mkt-bundle-builder {
grid-template-columns: 1fr;
}
.mkt-my-products-header,
.mkt-my-products-row {
grid-template-columns: 1fr;
}
.mkt-my-products-header {
padding: 8px 12px;
}
.mkt-my-products-row {
padding: 12px; gap: 6px;
}
.mkt-actions-cell {
justify-content: flex-start;
}
}
/* ── Weekly Spotlight 每週精選專欄 ────────────────── */
.weekly-spotlight {
background: linear-gradient(135deg, var(--gold-bg, #FDF8EE) 0%, var(--surface, #FFFDFB) 100%);
border: 1px solid var(--border-gold, #D4B87A);
border-radius: var(--radius, 12px);
margin-bottom: 20px;
overflow: hidden;
}
.sl-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px 10px;
border-bottom: 1px solid rgba(200,160,85,.2);
}
.sl-header-left { display: flex; align-items: center; gap: 8px; }
.sl-crown {
font-size: 18px;
color: var(--gold, #C8A055);
filter: drop-shadow(0 1px 2px rgba(200,160,85,.4));
}
.sl-title {
font-family: 'Playfair Display', serif;
font-size: 18px;
font-weight: 700;
color: var(--text, #1A1018);
letter-spacing: .5px;
}
.sl-week {
font-size: 12px;
color: var(--text-sm, #7A6860);
background: rgba(200,160,85,.12);
padding: 2px 10px;
border-radius: 10px;
}
.sl-body { padding: 16px 20px 20px; }
.sl-section { margin-bottom: 16px; }
.sl-section:last-child { margin-bottom: 0; }
.sl-section-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.sl-section-icon { font-size: 16px; }
.sl-section-title {
font-weight: 600;
font-size: 14px;
color: var(--text, #1A1018);
}
.sl-section-sub {
font-size: 12px;
color: var(--text-sm, #7A6860);
margin-left: 4px;
}
.sl-pro-tag {
font-size: 10px;
font-weight: 700;
color: var(--gold, #C8A055);
background: rgba(200,160,85,.15);
padding: 2px 8px;
border-radius: 8px;
margin-left: auto;
letter-spacing: .5px;
}
.sl-grid {
display: flex;
gap: 20px;
}
.sl-group { flex: 1; min-width: 0; }
.sl-group-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .8px;
color: var(--gold, #C8A055);
margin-bottom: 8px;
}
.sl-card {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
background: var(--surface, #FFFDFB);
border: 1px solid var(--border, #E8D9C8);
border-radius: var(--radius-sm, 8px);
margin-bottom: 6px;
cursor: pointer;
transition: all .2s;
}
.sl-card:hover {
border-color: var(--gold, #C8A055);
box-shadow: 0 2px 8px rgba(200,160,85,.15);
transform: translateY(-1px);
}
.sl-card-rank { font-size: 20px; flex-shrink: 0; line-height: 1; padding-top: 2px; }
.sl-card-body { flex: 1; min-width: 0; }
.sl-card-name {
font-weight: 600;
font-size: 13px;
color: var(--text, #1A1018);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sl-card-meta {
font-size: 12px;
color: var(--text-sm, #7A6860);
margin-top: 2px;
}
.sl-stars { color: var(--gold, #C8A055); letter-spacing: 1px; }
.sl-avg { font-weight: 600; }
.sl-card-author {
font-size: 11px;
color: var(--text-sm, #7A6860);
opacity: .7;
margin-top: 1px;
}
/* Official section */
.sl-section-official { border-top: 1px solid rgba(200,160,85,.2); padding-top: 16px; }
.sl-official-row { display: flex; gap: 12px; }
.sl-card-official {
flex: 1;
position: relative;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(200,160,85,.08), rgba(123,21,40,.04));
border: 1px solid var(--border-gold, #D4B87A);
}
.sl-card-official:hover {
background: linear-gradient(135deg, rgba(200,160,85,.15), rgba(123,21,40,.06));
}
.sl-official-badge {
font-size: 11px;
font-weight: 600;
color: var(--gold, #C8A055);
margin-bottom: 6px;
letter-spacing: .3px;
}
.sl-card-intro {
font-size: 12px;
color: var(--text-sm, #7A6860);
line-height: 1.5;
margin-top: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Pro lock overlay */
.sl-card-locked {
opacity: .65;
cursor: pointer;
}
.sl-card-locked:hover { opacity: .8; }
.sl-lock-icon {
position: absolute;
top: 10px;
right: 12px;
font-size: 16px;
opacity: .6;
}
/* ── Responsive ── */
@media (max-width: 768px) {
.weekly-spotlight { margin-bottom: 16px; }
.sl-header { padding: 12px 16px 8px; }
.sl-body { padding: 12px 16px 16px; }
.sl-grid { flex-direction: column; gap: 12px; }
.sl-official-row { flex-direction: column; gap: 8px; }
.sl-week { display: none; }
}
/* ── Site Footer ────────────────────────────────── */
.site-footer {
margin-top: 48px;
padding: 0 24px 28px;
text-align: center;
font-size: 13px;
color: var(--text-sm, #7A6860);
line-height: 1.7;
}
.footer-divider {
max-width: 160px;
height: 1px;
margin: 0 auto 20px;
background: linear-gradient(90deg, transparent, var(--gold, #C8A055), transparent);
}
.footer-inner { max-width: 540px; margin: 0 auto; }
.footer-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0;
margin-bottom: 4px;
}
.footer-item { white-space: nowrap; }
.footer-label {
display: inline-block;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--gold, #C8A055);
margin-right: 4px;
}
.footer-dot {
width: 3px; height: 3px;
border-radius: 50%;
background: var(--gold, #C8A055);
opacity: .5;
display: inline-block;
margin: 0 12px;
vertical-align: middle;
}
.site-footer a {
color: var(--text-sm, #7A6860);
text-decoration: none;
transition: color .2s;
}
.site-footer a:hover { color: var(--burgundy, #7B1528); }
.footer-copy {
margin-top: 8px;
font-size: 11px;
opacity: .5;
letter-spacing: .3px;
}
/* Login page footer — v284 改用 static flow 避免 position:absolute
在短 viewport（mobile 全部 / desktop 高度 < ~900px）與 BY INVITATION
seal / login 內容重疊。靜態流動下，內容短時尾隨 login splash，
內容長時自然下推；視覺較乾淨。 */
.login-page + .site-footer {
margin-top: 24px;
padding-bottom: 20px;
}
@media (max-width: 768px) {
.site-footer { margin-top: 32px; padding: 0 16px 24px; }
.footer-dot { display: none; }
.footer-row {
flex-direction: column;
gap: 2px;
}
}
/* ══════════════════════════════════════════════════════���═══════
TEXTURE BADGE
══════════════════════════════════════════════════════════════ */
.texture-badge {
font-size: 11px; font-weight: 600; padding: 3px 10px;
border-radius: 12px; display: inline-flex; align-items: center; gap: 3px;
white-space: nowrap;
}
.texture-creamy { background: #D4F0DF; color: #1A6B3D; }
.texture-icy { background: #DBEAFE; color: #1E40AF; }
.texture-grainy { background: #FEF3C7; color: #92400E; }
.texture-dense { background: #E5E7EB; color: #374151; }
.texture-powdery { background: #FDE8E8; color: #9B1C1C; }
.texture-standard { background: #F3F4F6; color: #6B7280; }
/* ══════════════════════════════════════════════════════════════
SCIENCE PANELS (Pasteurization, Aging, Version History)
══════════════════════════════════════════════════════════════ */
.science-panel { border-top: 1px solid var(--border); }
.science-panel-header {
padding: 12px 18px; font-size: 13px; font-weight: 600;
cursor: pointer; color: var(--text); display: flex; align-items: center; gap: 8px;
list-style: none;
}
.science-panel-header::-webkit-details-marker { display: none; }
.science-panel-header::before {
content: '▸'; font-size: 11px; color: var(--text-sm); transition: transform .15s;
}
details.science-panel[open] > .science-panel-header::before { transform: rotate(90deg); }
.science-panel-body { padding: 0 18px 16px; }
/* ── Pasteurization ─────────────��───────────────────────── */
.pasteur-methods { display: flex; flex-direction: column; gap: 8px; }
.pasteur-method {
padding: 10px 14px; border-radius: var(--radius-sm);
background: var(--surface); border: 1px solid var(--border);
}
.pasteur-recommended { border-color: var(--ok); background: #F0FFF4; }
.pasteur-unsuitable { opacity: 0.45; }
.pasteur-method-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pasteur-temp { font-size: 18px; font-weight: 700; color: var(--burgundy); }
.pasteur-time { font-size: 13px; font-weight: 600; color: var(--text-sm); }
.pasteur-method-label { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.pasteur-method-desc { font-size: 11px; color: var(--text-sm); line-height: 1.5; }
.badge-rec { font-size: 10px; background: var(--ok); color: #fff; padding: 2px 8px; border-radius: 8px; font-weight: 600; }
.badge-egg { font-size: 10px; background: #FEF3C7; color: #92400E; padding: 2px 8px; border-radius: 8px; font-weight: 600; }
.pasteur-notes { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pasteur-note { font-size: 12px; color: var(--text-sm); line-height: 1.5; padding: 8px 12px; background: #EFF6FF; border-radius: var(--radius-sm); }
/* GL-UX-05 split: 後加食材註記面板 */
.late-add-badge {
font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 8px;
background: #FFF4E5; color: #b54200; margin-left: 6px;
}
.late-add-panel .science-panel-body { display: flex; flex-direction: column; gap: 10px; }
.late-add-item {
border: 1px solid #f4c97a; background: #fff8ec; border-left: 4px solid #f4a261;
border-radius: 6px; padding: 10px 12px;
font-size: 12.5px; color: #5e3a00; line-height: 1.55;
}
.late-add-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.late-add-icon { font-size: 16px; }
.late-add-title { font-weight: 700; color: #b65f00; }
.late-add-list { color: #8a6534; font-size: 12px; word-break: break-word; }
.late-add-action { font-weight: 600; color: #4a2e00; margin: 2px 0; }
.late-add-reason { font-size: 11.5px; color: #7c4d00; }
/* ── Aging ───────────────────────────────────────────────── */
.aging-badge {
font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 8px;
background: var(--burgundy-bg); color: var(--burgundy);
}
.aging-factors { display: flex; flex-direction: column; gap: 8px; }
.aging-factor {
padding: 8px 12px; border-radius: var(--radius-sm);
background: var(--surface); border: 1px solid var(--border); font-size: 12px;
}
.aging-factor-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.aging-factor-label { font-weight: 600; }
.aging-factor-hours { font-weight: 700; color: var(--burgundy); }
.aging-factor-reason { font-size: 11px; color: var(--text-sm); line-height: 1.4; }
.aging-indicator {
margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm);
background: #F0FFF4; font-size: 11px; line-height: 1.5; color: var(--text-sm);
}
/* ── Version History ─────────────────────────────────────── */
.version-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.version-item {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px; border-radius: 6px; font-size: 12px;
border: 1px solid var(--border); background: var(--surface);
}
.version-item:hover { background: var(--ivory-dk); }
.version-number { font-weight: 700; color: var(--burgundy); min-width: 28px; }
.version-time { color: var(--text-sm); font-size: 11px; }
.version-meta { color: var(--text-sm); font-size: 11px; margin-left: auto; }
/* ── Version Diff ────────────────────────────────────────── */
.diff-list { display: flex; flex-direction: column; gap: 4px; }
.diff-row {
padding: 4px 10px; border-radius: 4px; font-size: 12px; font-family: 'Courier New', monospace;
}
.diff-added { background: #ECFDF5; color: #065F46; }
.diff-removed { background: #FEF2F2; color: #991B1B; }
.diff-changed { background: #FFFBEB; color: #92400E; }
.diff-delta-pos { color: #059669; font-weight: 600; }
.diff-delta-neg { color: #DC2626; font-weight: 600; }
.diff-balance-table { display: flex; flex-direction: column; gap: 2px; }
.diff-balance-row {
display: flex; align-items: center; gap: 8px;
padding: 3px 10px; font-size: 12px; border-radius: 4px;
background: var(--surface);
}
.diff-balance-label { font-weight: 600; min-width: 60px; }
/* ══════════════════════════════════════════════════════════════
FLAVOR PAIRING UPGRADE: Progressive Disclosure + Guided Mode
══════════════════════════════════════════════════════════════ */
/* ── Combo Card 3-level ── */
.combo-card-glance { display: flex; flex-direction: column; gap: 8px; }
.combo-narrative-line {
font-size: 13px; font-style: italic; color: var(--text-gold);
line-height: 1.5; padding: 0 2px;
}
.combo-expand-btn, .combo-detail-btn {
background: transparent; border: 1px dashed var(--border);
border-radius: 8px; padding: 6px; font-size: 11px;
color: var(--text-sm); cursor: pointer; text-align: center;
transition: all .15s;
}
.combo-expand-btn:hover, .combo-detail-btn:hover {
border-color: var(--gold); color: var(--gold);
}
.combo-card-explore, .combo-card-analyze {
display: flex; flex-direction: column; gap: 10px;
padding-top: 10px; border-top: 1px solid var(--border);
}
/* ── Combo type gradients ── */
.combo-card-classic::before, .combo-card-contrast::before,
.combo-card-layered::before, .combo-card-creative::before {
content: ''; display: block; height: 3px;
border-radius: 12px 12px 0 0; margin: -14px -14px 10px;
}
.combo-card-classic::before { background: linear-gradient(90deg, #C8A055, #f0d080, #C8A055); }
.combo-card-contrast::before { background: linear-gradient(90deg, #7db36a, #b8e6a0, #7db36a); }
.combo-card-layered::before { background: linear-gradient(90deg, #52b788, #C8A055, #8d6e63); }
.combo-card-creative::before { background: linear-gradient(90deg, #9b7fd4, #e06666, #6b9fd4); }
.combo-card-minimalist::before { content:''; display:block; height:3px; border-radius:3px 3px 0 0; background: linear-gradient(90deg, #5c6bc0, #7986cb, #5c6bc0); }
.combo-card-luxury::before { content:''; display:block; height:3px; border-radius:3px 3px 0 0; background: linear-gradient(90deg, #ab47bc, #ce93d8, #ab47bc); }
.combo-card-seasonal::before { content:''; display:block; height:3px; border-radius:3px 3px 0 0; background: linear-gradient(90deg, #26a69a, #80cbc4, #26a69a); }
.combo-card-bold::before { content:''; display:block; height:3px; border-radius:3px 3px 0 0; background: linear-gradient(90deg, #e53935, #ef5350, #e53935); }
.combo-card-layered { border-color: #52b78840; }
.combo-card-minimalist { border-color: #5c6bc040; }
.combo-card-luxury { border-color: #ab47bc40; }
.combo-card-seasonal { border-color: #26a69a40; }
.combo-card-bold { border-color: #e5393540; }
.combo-chip-layered { background: #52b78820; color: #52b788; border: 1px solid #52b78840; }
.combo-chip-minimalist { background: #5c6bc020; color: #5c6bc0; border: 1px solid #5c6bc040; }
.combo-chip-luxury { background: #ab47bc20; color: #ab47bc; border: 1px solid #ab47bc40; }
.combo-chip-seasonal { background: #26a69a20; color: #26a69a; border: 1px solid #26a69a40; }
.combo-chip-bold { background: #e5393520; color: #e53935; border: 1px solid #e5393540; }
/* ── Temporal Flow ── */
.temporal-flow { padding: 8px 0; }
.temporal-flow-label { font-size: 11px; font-weight: 600; color: var(--text-sm); margin-bottom: 8px; }
.temporal-flow-track { display: flex; align-items: flex-start; gap: 4px; }
.temporal-phase {
flex: 1; padding: 8px; border-radius: 8px;
background: var(--surface); border: 1px solid;
}
.temporal-phase-header { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.temporal-phase-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.temporal-phase-name { font-size: 11px; font-weight: 700; }
.temporal-phase-desc { font-size: 11px; color: var(--text-sm); margin-bottom: 6px; }
.temporal-phase-ings { display: flex; flex-wrap: wrap; gap: 4px; }
.temporal-ing-chip { font-size: 11px; padding: 2px 6px; border-radius: 8px; border: 1px solid; }
.temporal-arrow { font-size: 14px; color: var(--text-sm); padding-top: 18px; flex-shrink: 0; }
.temporal-empty { font-size: 10px; color: var(--text-sm); }
/* ── Taste Wheel ── */
.taste-wheel-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.taste-wheel-label { font-size: 11px; font-weight: 600; color: var(--text-sm); }
.taste-wheel-legend { display: flex; gap: 12px; font-size: 10px; color: var(--text-sm); }
/* ── Guided Welcome ── */
.guided-welcome { padding: 48px 20px; text-align: center; animation: guidedFadeUp 0.5s ease-out; }
.guided-welcome-header { margin-bottom: 32px; }
.guided-welcome-icon { margin-bottom: 16px; animation: guidedPulseGlow 3s ease-in-out infinite; }
.guided-welcome-title { font-size: 22px; font-family: 'Playfair Display', serif; margin: 0 0 8px; }
.guided-welcome-desc { font-size: 13px; color: var(--text-sm); margin: 0; }
.guided-welcome-paths { display: flex; flex-direction: column; gap: 12px; max-width: 400px; margin: 0 auto; }
.guided-path-card {
display: grid; grid-template-columns: 40px 1fr 24px; grid-template-rows: auto auto;
gap: 2px 12px; align-items: center; padding: 16px 20px; border-radius: 12px;
border: 1.5px solid var(--border); background: var(--surface); text-align: left;
cursor: pointer; transition: all 0.25s ease;
}
.guided-path-card:hover { border-color: var(--gold); box-shadow: 0 4px 24px rgba(200,160,85,0.15); transform: translateY(-2px); }
.guided-path-guided:hover { border-color: var(--burgundy); box-shadow: 0 4px 24px rgba(123,21,40,0.12); }
.guided-path-icon { font-size: 24px; grid-row: 1/3; }
.guided-path-label { font-size: 15px; font-weight: 700; grid-column: 2; }
.guided-path-desc { font-size: 12px; color: var(--text-sm); line-height: 1.5; grid-column: 2; }
.guided-path-arrow { grid-row: 1/3; font-size: 18px; color: var(--gold); opacity: 0; transform: translateX(-4px); transition: all 0.2s; }
.guided-path-card:hover .guided-path-arrow { opacity: 1; transform: translateX(0); }
/* ── Guided Wizard ── */
.guided-wizard { text-align: center; padding: 32px 20px; }
.guided-title { font-size: 20px; margin: 0 0 6px; font-family: 'Playfair Display', serif; }
.guided-subtitle { font-size: 13px; color: var(--text-sm); margin: 0 0 20px; }
.guided-skip-btn { background: transparent; border: none; color: var(--text-sm); font-size: 12px; cursor: pointer; padding: 8px; }
.guided-skip-btn:hover { color: var(--gold); }
/* ── Guided Progress Bar ── */
.guided-progress { max-width: 320px; margin: 0 auto 24px; }
.guided-progress-bar { height: 4px; border-radius: 2px; background: var(--ivory-dk); overflow: hidden; margin-bottom: 10px; }
.guided-progress-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--burgundy), var(--gold)); transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.guided-progress-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-sm); }
.guided-progress-step.active { color: var(--burgundy); font-weight: 600; }
.guided-progress-step.done { color: var(--ok); }
/* ── Style Cards ── */
.guided-style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 520px; margin: 0 auto 20px; }
.guided-style-card {
display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 14px;
cursor: pointer; border: 1.5px solid var(--border); background: var(--surface);
text-align: left; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
position: relative; overflow: hidden;
}
.guided-style-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gs-color); opacity: 0; transition: opacity 0.3s; }
.guided-style-card:hover::before { opacity: 1; }
.guided-style-card:hover { border-color: var(--gs-color); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.08); }
.guided-style-card-head { display: flex; align-items: center; gap: 8px; }
.guided-style-badge { font-size: 28px; }
.guided-style-label { font-size: 14px; font-weight: 700; }
.guided-style-desc { font-size: 12px; color: var(--text-sm); line-height: 1.5; }
.guided-style-vibe { font-size: 10px; color: var(--text-sm); letter-spacing: 0.5px; font-style: italic; }
.guided-style-preview { display: flex; align-items: center; gap: 4px; padding: 6px 0 4px; flex-wrap: wrap; }
.guided-preview-chip { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: var(--ivory-dk); font-weight: 500; }
.guided-preview-plus { font-size: 10px; color: var(--text-sm); }
.guided-style-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.guided-tag-pill { font-size: 10px; padding: 2px 7px; border-radius: 10px; font-weight: 500; }
.guided-style-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
/* ── Step 2 Sections ── */
.guided-section-label { font-size: 12px; font-weight: 700; color: var(--text-sm); padding: 12px 0 8px; display: flex; align-items: center; gap: 6px; }
.guided-section-icon { color: var(--gold); font-size: 14px; }
.guided-section-hint { font-weight: 400; font-size: 11px; }
.guided-section-other { opacity: 0.7; margin-top: 8px; }
.guided-base-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.guided-base-card {
display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
padding: 10px 14px; border-radius: 10px; cursor: pointer;
border: 1.5px solid var(--border); background: var(--surface);
font-size: 13px; font-weight: 500; transition: all 0.2s; position: relative; min-width: 110px;
}
.guided-base-card:hover { border-color: var(--gold); background: var(--gold-bg); }
.guided-base-name { display: flex; align-items: center; gap: 6px; }
.guided-base-flavor { font-size: 10px; color: var(--text-sm); font-weight: 400; }
.guided-base-rec { border-color: rgba(200,160,85,0.3); background: var(--gold-bg); }
.guided-base-rec::after { content: '推薦'; position: absolute; top: -6px; right: 8px; font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--gold); color: #fff; font-weight: 600; }
.guided-ing-preview {
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px;
box-shadow: 0 4px 16px rgba(0,0,0,0.1); white-space: nowrap; z-index: 10; display: flex; gap: 4px;
animation: guidedFadeUp 0.15s ease-out;
}
.guided-search-enhanced { border-radius: 10px; padding: 10px 14px; border: 1.5px solid var(--border); transition: border-color 0.2s; }
.guided-search-enhanced:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,160,85,0.1); }
.guided-cat-btn { padding: 4px 10px; border-radius: 6px; font-size: 11px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-sm); transition: all .15s; }
.guided-cat-btn:hover { border-color: var(--gold); }
.guided-cat-btn.active { background: var(--burgundy); color: #fff; border-color: var(--burgundy); }
.guided-cat-count { font-size: 10px; opacity: 0.6; font-weight: 400; }
/* ── Guided Loading ── */
.guided-loading-steps { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 220px; margin: 0 auto; }
.guided-load-step { font-size: 12px; color: var(--text-sm); opacity: 0.35; display: flex; align-items: center; gap: 8px; transition: all 0.4s; }
.guided-load-step.active { opacity: 1; color: var(--gold); }
.guided-load-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ivory-dk); transition: background 0.4s; }
.guided-load-step.active .guided-load-dot { background: var(--gold); box-shadow: 0 0 6px rgba(200,160,85,0.5); }
/* ── Staggered Reveal + Best Badge ── */
.guided-combo-reveal { opacity: 0; animation: guidedCardReveal 0.5s ease-out forwards; }
.guided-best-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: 0.5px; padding: 4px 12px; margin-bottom: -4px; background: linear-gradient(90deg, rgba(200,160,85,0.08), transparent); border-radius: 8px 8px 0 0; }
/* ── Style Context Bar ── */
.guided-context-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 14px; margin-bottom: 14px; background: var(--ivory); border-radius: 10px; border: 1px solid var(--border); }
.guided-context-current { display: flex; align-items: center; gap: 8px; }
.guided-context-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 16px; font-size: 12px; font-weight: 600; }
.guided-context-hint { font-size: 10px; color: var(--text-sm); }
.guided-context-switch { display: flex; gap: 4px; flex-wrap: wrap; }
.guided-switch-btn { font-size: 11px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.guided-switch-btn:hover { border-color: currentColor; background: var(--gold-bg); }
.guided-switch-reset { color: var(--text-sm); }
/* ── Guided Animations ── */
@keyframes guidedFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes guidedFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-12px); } }
@keyframes guidedCardReveal { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes guidedPulseGlow { 0%,100% { filter: drop-shadow(0 0 0 rgba(200,160,85,0)); } 50% { filter: drop-shadow(0 0 12px rgba(200,160,85,0.3)); } }
.guided-animate-in { animation: guidedFadeUp 0.4s ease-out; }
.guided-animate-out { animation: guidedFadeOut 0.2s ease-in forwards; }
@media (max-width: 480px) {
.guided-style-grid { grid-template-columns: 1fr; }
.guided-welcome-paths { max-width: 100%; }
}
/* ── Free Pick Tiers ── */
.free-tier-header {
font-size: 12px; font-weight: 700; padding: 8px 10px 4px;
letter-spacing: 0.3px; border-bottom: 1px solid var(--border); margin-top: 8px;
}
.free-tier-header:first-child { margin-top: 0; }
.free-tier-count { font-weight: 400; color: var(--text-sm); font-size: 11px; }
.tier-perfect { color: #C8A055; }
.tier-great { color: #7db36a; }
.tier-good { color: #6b9fd4; }
.tier-experimental { color: #9b7fd4; }
.free-why-btn {
width: 18px; height: 18px; border-radius: 50%;
border: 1px solid var(--border); background: transparent;
color: var(--text-sm); font-size: 10px; cursor: help;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.free-why-btn:hover { border-color: var(--gold); color: var(--gold); }
.free-suggest-next {
display: flex; align-items: center; gap: 6px;
padding: 8px 12px; border-radius: 8px; font-size: 12px;
background: rgba(200,160,85,0.08); border: 1px solid rgba(200,160,85,0.2);
color: var(--text-sm); margin-top: 6px;
}
.free-suggest-btn {
background: transparent; border: 1px solid var(--gold);
border-radius: 6px; padding: 4px 10px; font-size: 12px;
color: var(--gold); cursor: pointer; font-weight: 600;
transition: all .15s;
}
.free-suggest-btn:hover { background: var(--gold); color: #1a0f14; }
/* ── Region Culture Card ── */
.region-culture-card {
padding: 10px 14px; margin-top: 8px; border-radius: 10px;
background: var(--ivory); border: 1px solid var(--border);
}
.region-culture-story { font-size: 12px; color: var(--text-sm); line-height: 1.6; font-style: italic; }
.region-soul-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--text-sm); }
.region-soul-chip {
font-size: 11px; padding: 3px 8px; border-radius: 6px;
background: var(--gold-bg); color: var(--text-gold); font-weight: 600;
border: 1px solid rgba(200,160,85,0.2);
}
/* ── Region Inspiration Grid ── */
.region-inspiration { margin-top: 10px; }
.region-insp-title { font-size: 12px; font-weight: 700; color: var(--gold); margin-bottom: 8px; letter-spacing: 0.3px; }
.region-insp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.region-insp-card {
padding: 10px; border-radius: 8px; background: var(--surface);
border: 1px solid var(--border); transition: all .15s;
}
.region-insp-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.region-insp-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.region-insp-ings { font-size: 11px; color: var(--text-gold); margin-bottom: 4px; }
.region-insp-story { font-size: 10px; color: var(--text-sm); line-height: 1.4; }
@media (max-width: 720px) { .region-insp-grid { grid-template-columns: 1fr; } }
/* ── Creative Inspiration Bar ── */
.creative-inspiration-bar {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
padding: 10px 0; margin-bottom: 8px;
}
.creative-daily {
flex: 1; min-width: 200px; padding: 8px 12px; border-radius: 8px;
background: linear-gradient(135deg, rgba(200,160,85,0.06), rgba(123,21,40,0.04));
border: 1px solid rgba(200,160,85,0.15);
}
.creative-daily-label { font-size: 10px; font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.creative-daily-content { font-size: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.creative-daily-tip { font-size: 11px; color: var(--text-sm); font-style: italic; }
.creative-challenge-btn {
padding: 8px 16px; border-radius: 8px; font-size: 12px; cursor: pointer;
border: 1.5px dashed var(--gold); background: transparent; color: var(--gold);
transition: all .2s; white-space: nowrap;
}
.creative-challenge-btn:hover { background: var(--gold); color: #1a0f14; border-style: solid; }
/* ── Swap animation ── */
.combo-card-swapped { animation: swapPulse .6s ease; }
@keyframes swapPulse {
0% { box-shadow: 0 0 0 0 rgba(200,160,85,0.4); }
50% { box-shadow: 0 0 0 8px rgba(200,160,85,0); }
100% { box-shadow: none; }
}
/* ── Mobile pairing ── */
@media (max-width: 720px) {
/* -- 1. 組合卡片：垂直堆疊（取代水平滾動） -- */
.pairing-combos-grid {
display: flex !important;
flex-direction: column !important;
gap: 12px;
overflow: visible;
max-width: 100%;
}
.pairing-combos-grid > .combo-card,
.pairing-combos-grid > .guided-combo-reveal {
min-width: 0; max-width: 100%; width: 100%;
flex-shrink: 1; box-sizing: border-box;
}
.pairing-combos-swipe-hint { display: none; }
/* -- 3. Combo 卡片內部優化 -- */
.combo-card { padding: 12px; }
.combo-card-top { flex-wrap: wrap; gap: 6px; }
.combo-score-num { font-size: 18px; }
.combo-ing-row { gap: 4px; padding: 5px 4px; }
.combo-ing-name { font-size: 11px; }
.combo-swap-panel { max-width: 100%; }
.combo-ing-detail-row { padding: 2px 4px 5px 16px; gap: 3px; }
/* -- 4. SVG 雷達圖自適應 -- */
.taste-wheel-wrap svg,
.combo-radar-wrap svg,
.blend-radar-wrap svg {
width: 100%; height: auto; max-width: 200px; display: block; margin: 0 auto;
}
/* -- 5. 自由配對列表觸控優化 -- */
.pairing-free-item { min-height: 44px; padding: 10px; gap: 5px; }
.pairing-free-name { max-width: 90px; font-size: 12px; }
.pairing-free-item .picker-cat { display: none; }
.free-stars { font-size: 10px; }
.pairing-free-list { max-height: 50vh; }
/* -- 6. 時間軸緊縮 -- */
.guided-style-grid { grid-template-columns: 1fr; }
.temporal-flow-track { flex-direction: column; }
.temporal-arrow { padding: 2px 0; text-align: center; transform: rotate(90deg); font-size: 12px; }
.temporal-phase { padding: 8px 10px; }
.temporal-ing-chip { font-size: 10px; padding: 2px 5px; }
/* -- 7. 風格切換列 -- */
.guided-context-bar { flex-direction: column; gap: 6px; padding: 8px 10px; }
.guided-switch-btn { font-size: 10px; padding: 3px 6px; }
/* -- 8. 地區選擇器 -- */
.region-btn { padding: 4px 8px; font-size: 11px; }
.region-culture-card { padding: 8px 10px; }
.region-soul-row { flex-wrap: wrap; gap: 4px; }
}
/* ══════════════════════════════════════════════════════════════
HARDNESS CURVE
══════════════════════════════════════════════════════════════ */
.hardness-curve-chart {
display: flex; justify-content: space-around; align-items: flex-end;
height: 140px; padding: 8px 0; gap: 4px;
}
.hc-bar-col { display: flex; flex-direction: column; align-items: center; flex: 1; }
.hc-bar-wrap { width: 28px; height: 100px; background: #f3f4f6; border-radius: 4px 4px 0 0;
display: flex; align-items: flex-end; overflow: hidden; }
.hc-bar { width: 100%; border-radius: 4px 4px 0 0; transition: height .3s; min-height: 2px; }
.hc-temp { font-size: 11px; font-weight: 600; margin-top: 4px; }
.hc-label { font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-top: 2px; }
.hc-ideal { background: #D1FAE5; color: #065F46; }
.hc-hard, .hc-rock { background: #FEE2E2; color: #991B1B; }
.hc-soft, .hc-tooSoft { background: #FEF3C7; color: #92400E; }
.hc-ice { font-size: 11px; color: var(--text-sm); margin-top: 2px; }
.hc-legend { font-size: 10px; color: var(--text-sm); text-align: center; margin-top: 8px; }
/* ══════════════════════════════════════════════════════════════
SEASONAL BANNER
══════════════════════════════════════════════════════════════ */
.seasonal-banner { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; }
.seasonal-summer { background: linear-gradient(135deg, #FEF3C7, #FFFBEB); border-left: 4px solid #F59E0B; }
.seasonal-autumn { background: linear-gradient(135deg, #FED7AA, #FFF7ED); border-left: 4px solid #EA580C; }
.seasonal-winter { background: linear-gradient(135deg, #DBEAFE, #EFF6FF); border-left: 4px solid #3B82F6; }
.seasonal-spring { background: linear-gradient(135deg, #FCE7F3, #FDF2F8); border-left: 4px solid #EC4899; }
.seasonal-header { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
.seasonal-icon { font-size: 20px; }
.seasonal-title { font-size: 14px; }
.seasonal-tips { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.6; color: var(--text-sm); }
.seasonal-adjustments { margin-top: 8px; }
.seasonal-adj-chip { display: inline-block; font-size: 11px; padding: 2px 8px;
background: rgba(0,0,0,.06); border-radius: 12px; margin: 4px 4px 0 0; }
/* ══════════════════════════════════════════════════════════════
PWA OFFLINE INDICATOR
══════════════════════════════════════════════════════════════ */
.offline-indicator {
position: fixed; bottom: 0; left: 0; right: 0;
background: #F59E0B; color: #fff; text-align: center;
padding: 6px; font-size: 12px; font-weight: 600; z-index: 301;
}
@media (max-width: 768px) {
.offline-indicator {
bottom: calc(61px + env(safe-area-inset-bottom, 0px));
}
}
/* ══════════════════════════════════════════════════════════════
ALLERGEN PANEL
══════════════════════════════════════════════════════════════ */
.allergen-badge { font-size: 10px; padding: 2px 8px; border-radius: 8px; font-weight: 600; margin-left: auto; }
.allergen-badge-ok { background: #D1FAE5; color: #065F46; }
.allergen-badge-warn { background: #FEF3C7; color: #92400E; }
.allergen-clear { font-size: 12px; color: var(--ok); padding: 8px 0; }
.allergen-detected-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.allergen-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.allergen-tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 16px; font-size: 12px; font-weight: 500;
background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D;
}
.allergen-tag-mandatory { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.allergen-source-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.allergen-source-row { display: flex; gap: 8px; font-size: 11px; padding: 4px 8px; background: var(--ivory); border-radius: var(--radius-sm); }
.allergen-source-label { font-weight: 600; white-space: nowrap; min-width: 60px; }
.allergen-source-items { color: var(--text-sm); }
.allergen-cross-title { font-size: 12px; font-weight: 600; color: #D97706; margin: 8px 0 6px; }
.allergen-cross-list { display: flex; flex-direction: column; gap: 4px; }
.allergen-cross-row { font-size: 11px; color: var(--text-sm); padding: 6px 10px; background: #FFFBEB; border-radius: var(--radius-sm); border-left: 3px solid #F59E0B; }
.allergen-tw-note { font-size: 11px; color: var(--text-sm); margin-top: 10px; padding: 6px 8px; background: #EFF6FF; border-radius: var(--radius-sm); }
/* ══════════════════════════════════════════════════════════════
SHELF LIFE PREDICTION
══════════════════════════════════════════════════════════════ */
.shelf-life-badge { font-size: 10px; padding: 2px 8px; border-radius: 8px; font-weight: 600; margin-left: auto; }
.shelf-life-disclaimer { font-size: 11px; color: #D97706; background: #FFFBEB; padding: 6px 10px; border-radius: var(--radius-sm); margin-bottom: 12px; }
.shelf-life-estimates { display: flex; gap: 10px; margin-bottom: 12px; }
.shelf-life-est-card {
flex: 1; padding: 12px; border-radius: var(--radius-sm); background: var(--ivory);
border: 1px solid var(--border); text-align: center;
}
.shelf-life-est-temp { font-size: 18px; font-weight: 700; color: var(--burgundy); }
.shelf-life-est-label { font-size: 11px; color: var(--text-sm); margin: 2px 0 6px; }
.shelf-life-est-days { font-size: 22px; font-weight: 700; color: var(--text); }
.shelf-life-aw { font-size: 11px; color: var(--text-sm); margin-bottom: 10px; }
.shelf-life-factors-title { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.shelf-life-factors { display: flex; flex-direction: column; gap: 4px; }
.shelf-life-factor { font-size: 12px; color: var(--text-sm); line-height: 1.5; padding: 4px 8px; background: var(--surface); border-radius: var(--radius-sm); }
.shelf-life-risk-desc { font-size: 13px; color: var(--text); margin-bottom: 10px; padding: 6px 10px; background: var(--ivory); border-radius: 6px; }
.shelf-life-est-note { font-size: 10px; color: var(--text-sm); margin-top: 2px; }
.shelf-life-degrad { font-size: 12px; color: var(--text); margin-bottom: 8px; padding: 4px 8px; background: #FFF7ED; border-left: 3px solid #F59E0B; border-radius: 4px; }
/* ══════════════════════════════════════════════════════════════
COST SENSITIVITY
══════════════════════════════════════════════════════════════ */
.cost-sens-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.cost-sens-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.cost-sens-chart { display: flex; flex-direction: column; gap: 6px; }
.cost-sens-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cost-sens-bar-name { width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-sm); }
.cost-sens-bar-track { flex: 1; height: 12px; background: var(--border); border-radius: 6px; overflow: hidden; }
.cost-sens-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--burgundy)); border-radius: 6px; transition: width .3s; }
.cost-sens-bar-pct { font-weight: 600; min-width: 40px; text-align: right; }
.cost-sens-hint { font-size: 11px; color: var(--text-sm); margin-top: 8px; }
.cost-sens-empty { font-size: 12px; color: var(--text-sm); padding: 8px 0; }
.cost-subs-title { font-size: 13px; font-weight: 600; margin-top: 12px; color: var(--burgundy); }
.cost-subs-list { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.cost-sub-group { background: var(--ivory); border-radius: var(--radius-sm); padding: 8px 10px; }
.cost-sub-original { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.cost-sub-alt { display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer; border-radius: 4px; font-size: 12px; }
.cost-sub-alt:hover { background: var(--gold-bg); }
.cost-sub-alt-name { flex: 1; }
.cost-sub-alt-price { color: var(--text-sm); }
.cost-sub-alt-save { color: var(--ok); font-weight: 600; font-size: 11px; }
/* ══════════════════════════════════════════════════════════════
PRODUCTION PLANNER MODAL
══════════════════════════════════════════════════════════════ */
.planner-modal-card { max-width: 900px !important; width: 95vw; }
.planner-body { display: flex; gap: 20px; padding: 16px 20px; max-height: 70vh; overflow-y: auto; }
.planner-left { flex: 0 0 260px; display: flex; flex-direction: column; gap: 8px; }
.planner-right { flex: 1; min-width: 0; }
.planner-date-row { display: flex; align-items: center; gap: 8px; }
.planner-recipe-list { display: flex; flex-direction: column; gap: 6px; }
.planner-recipe-entry { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--ivory); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.planner-recipe-name { flex: 1; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planner-mx-input { width: 50px; text-align: center; font-size: 12px; padding: 4px; }
.planner-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.planner-tab { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; cursor: pointer; }
.planner-tab.active { background: var(--burgundy); color: #fff; border-color: var(--burgundy); }
.planner-cat-group { margin-bottom: 12px; }
.planner-cat-header { font-size: 12px; font-weight: 700; color: var(--text-sm); padding: 4px 0; border-bottom: 1px solid var(--border); }
.planner-ing-row { display: flex; justify-content: space-between; padding: 4px 8px; font-size: 13px; }
.planner-ing-name { flex: 1; }
.planner-ing-total { font-weight: 700; min-width: 60px; text-align: right; }
.planner-ing-sources { font-size: 11px; color: var(--text-sm); padding: 0 8px 4px; }
.planner-timeline { position: relative; padding-left: 24px; }
.planner-step { position: relative; padding: 8px 0 16px 16px; border-left: 2px solid var(--border); }
.planner-step::before { content: ''; position: absolute; left: -6px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--burgundy); }
.planner-step-time { font-size: 11px; color: var(--text-sm); font-weight: 600; }
.planner-step-label { font-size: 13px; font-weight: 600; }
.planner-step-recipe { font-size: 12px; color: var(--burgundy); }
.planner-step-detail { font-size: 11px; color: var(--text-sm); }
/* ── Plan recipe entry 上下移動按鈕 ─────────────────────── */
.planner-recipe-entry { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 4px; background: var(--surface); }
.planner-recipe-entry .planner-recipe-name { flex: 1; font-size: 12px; }
.planner-move-btns { display: flex; flex-direction: column; gap: 1px; }
.planner-move-btn {
width: 18px; height: 13px;
font-size: 8px; line-height: 1;
border: 1px solid var(--border);
background: var(--surface);
cursor: pointer; border-radius: 2px; padding: 0;
color: var(--text-sm);
display: flex; align-items: center; justify-content: center;
}
.planner-move-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--border-gold); }
.planner-move-btn:disabled { opacity: 0.25; cursor: not-allowed; }
/* ── 排程設定表單 ─────────────────────────────────────── */
.scheduler-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 16px;
}
.scheduler-setting-row { display: flex; flex-direction: column; gap: 4px; }
.scheduler-setting-row label { font-size: 12px; font-weight: 600; color: var(--text); }
.scheduler-setting-row label small { font-weight: 400; color: var(--text-sm); margin-left: 4px; font-size: 11px; }
.scheduler-setting-row .input-field { font-size: 13px; }
.scheduler-setting-toggle { grid-column: 1 / -1; padding-top: 4px; border-top: 1px dashed var(--border); padding: 12px 0 0; }
.scheduler-setting-toggle > label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.scheduler-setting-toggle > label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.scheduler-setting-toggle > small { display: block; color: var(--text-sm); font-size: 11px; line-height: 1.5; margin-top: 6px; padding-left: 24px; }
@media (max-width: 600px) {
.scheduler-settings-grid { grid-template-columns: 1fr; }
}
/* ── 三軌甘特圖 ────────────────────────────────────────── */
.gantt-header {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
padding: 4px 0 12px;
}
.gantt-summary { display: flex; align-items: baseline; gap: 10px; }
.gantt-makespan { font-size: 16px; font-weight: 700; color: var(--burgundy); }
.gantt-date { color: var(--text-sm); font-size: 12px; }
.gantt-controls { display: flex; align-items: center; gap: 10px; }
.gantt-mode {
font-size: 11px; padding: 3px 8px; border-radius: 12px;
background: var(--surface-2); color: var(--text-sm);
}
.gantt-mode-auto { background: var(--gold-bg); color: var(--text-gold); }
.gantt-mode-manual { background: #EAF5FB; color: var(--info-c); }
.gantt-reopt { font-size: 12px; padding: 5px 12px; }
.gantt-warnings { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.gantt-warning {
padding: 8px 12px; border-radius: 6px; font-size: 12px; line-height: 1.5;
border-left: 3px solid var(--warning-c); background: #FFF7E6; color: var(--text);
}
.gantt-warn-overtime { border-color: var(--danger); background: #FEF0F1; }
.gantt-warn-overAged { border-color: var(--warning-c); background: #FFF7E6; }
.gantt-warn-split { border-color: var(--info-c); background: #EAF5FB; }
.gantt-warn-tankWait { border-color: var(--info-c); background: #EAF5FB; }
.gantt-chart {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px 14px;
overflow-x: auto;
}
.gantt-lane {
display: grid;
grid-template-columns: 110px 1fr;
gap: 12px;
align-items: center;
margin-bottom: 6px;
}
.gantt-lane-scale { margin-bottom: 2px; }
.gantt-lane-label {
font-size: 12px; font-weight: 600; color: var(--text);
text-align: right; line-height: 1.3;
}
.gantt-lane-label small {
display: block; color: var(--text-sm);
font-weight: 400; font-size: 10px; margin-top: 2px;
}
.gantt-lane-track {
position: relative;
height: 36px;
background: var(--surface-2);
border-radius: 4px;
}
.gantt-scale-track {
height: 22px;
background: transparent;
border-bottom: 1px solid var(--border);
}
.gantt-tick {
position: absolute; top: 0; bottom: 0;
border-left: 1px dashed var(--border);
}
.gantt-tick-label {
position: absolute; top: 2px; left: 4px;
font-size: 10px; color: var(--text-sm);
white-space: nowrap;
}
.gantt-workend {
position: absolute; top: -2px; bottom: -2px;
width: 0;
border-left: 2px dashed var(--danger);
z-index: 5;
pointer-events: none;
}
.gantt-block {
position: absolute;
top: 4px;
height: 28px;
border-radius: 4px;
padding: 0 8px;
font-size: 11px;
color: #fff;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
cursor: default;
box-shadow: 0 1px 2px rgba(0,0,0,0.12);
display: flex; align-items: center;
min-width: 4px;
transition: box-shadow 0.15s;
}
.gantt-block:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.25); z-index: 10; }
.gantt-block-label {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gantt-aging { opacity: 0.78; }
.gantt-block.gantt-warn { outline: 2px solid var(--warning-c); outline-offset: -2px; }
.gantt-legend {
display: flex; flex-wrap: wrap; gap: 12px;
margin-top: 14px; padding-top: 12px;
border-top: 1px solid var(--border);
}
.gantt-legend-item {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--text);
}
.gantt-color {
width: 14px; height: 14px;
border-radius: 3px;
display: inline-block;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
.gantt-lane { grid-template-columns: 80px 1fr; gap: 8px; }
.gantt-lane-label { font-size: 11px; }
}
/* 從 modal 改成 nav view 後，padding 與高度交給 main-content/view-header 控制 */
.view-production-planner .planner-body { max-height: none; padding: 0; overflow: visible; }
.view-production-planner .planner-recipe-list { max-height: 360px; overflow-y: auto; }
@media (max-width: 768px) {
.planner-body { flex-direction: column; }
.planner-left { flex: none; }
.shelf-life-estimates { flex-direction: column; }
}
/* ══════════════════════════════════════════════════════════════
ACCESSIBILITY: Focus Visible Ring
══════════════════════════════════════════════════════════════ */
:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 3px solid var(--gold);
outline-offset: -1px;
}
/* ══════════════════════════════════════════════════════════════
ACCESSIBILITY: Reduced Motion
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ══════════════════════════════════════════════════════════════
MIX-IN 配料模式
══════════════════════════════════════════════════════════════ */
.ing-row-mixin {
background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(255,183,77,0.06) 8px, rgba(255,183,77,0.06) 16px);
border-left: 3px solid #ffb74d;
opacity: 0.85;
}
.badge-mixin {
font-size: 10px;
background: #fff3e0;
color: #e65100;
padding: 1px 6px;
border-radius: 8px;
font-weight: 600;
white-space: nowrap;
}
.btn-mixin-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 14px;
padding: 2px 4px;
opacity: 0.6;
transition: opacity 0.15s;
}
.btn-mixin-toggle:hover { opacity: 1; }
.mixin-summary {
padding: 6px 14px;
font-size: 12px;
color: #e65100;
background: #fff8e1;
border-radius: 6px;
margin: 6px 0;
}
/* ══════════════════════════════════════════════════════════════
食材步進按鈕（手機專用）
══════════════════════════════════════════════════════════════ */
.ing-stepper-mobile { display: none; }
.ing-stepper { display: flex; gap: 3px; }
.stepper-btn {
width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid var(--border);
background: var(--surface); color: var(--text); font-size: 15px; font-weight: 700;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: all .12s; flex-shrink: 0; padding: 0;
}
.stepper-btn:active { background: var(--burgundy); color: #fff; border-color: var(--burgundy); }
.stepper-minus-10, .stepper-plus-10 { font-size: 11px; font-weight: 600; width: 34px; }
/* ══════════════════════════════════════════════════════════════
食材滑桿輸入
══════════════════════════════════════════════════════════════ */
.ing-slider {
width: 60px;
height: 4px;
-webkit-appearance: none;
appearance: none;
background: var(--border);
border-radius: 2px;
outline: none;
cursor: pointer;
}
.ing-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--burgundy);
cursor: pointer;
}
.ing-slider::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--burgundy);
cursor: pointer;
border: none;
}
@media (max-width: 768px) {
.ing-slider { width: 40px; }
}
/* ══════════════════════════════════════════════════════════════
氧化/變色警告
══════════════════════════════════════════════════════════════ */
.ing-oxidation-warn {
flex-basis: 100%;
font-size: 11px;
padding: 4px 12px 4px 32px;
border-radius: 4px;
margin-top: 2px;
line-height: 1.4;
}
.ing-oxidation-high {
background: #fce4ec;
color: #c62828;
}
.ing-oxidation-medium {
background: #fff3e0;
color: #e65100;
}
.ing-oxidation-low {
background: #f3f9f1;
color: #558b2f;
}
/* ══════════════════════════════════════════════════════════════
Overrun 建議器
══════════════════════════════════════════════════════════════ */
.overrun-advisor {
margin-top: 12px;
padding: 10px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
}
.overrun-advisor-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
margin-bottom: 8px;
}
.overrun-advisor-bar { margin: 6px 0; }
.overrun-bar-track {
position: relative;
height: 8px;
background: #eee;
border-radius: 4px;
overflow: visible;
}
.overrun-bar-range {
position: absolute;
top: 0;
height: 100%;
background: rgba(64, 145, 108, 0.25);
border-radius: 4px;
}
.overrun-bar-ideal {
position: absolute;
top: -2px;
width: 2px;
height: 12px;
background: #40916c;
border-radius: 1px;
}
.overrun-bar-current {
position: absolute;
top: -4px;
width: 10px;
height: 16px;
border-radius: 3px;
margin-left: -5px;
}
.overrun-bar-labels {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--text-sm);
margin-top: 2px;
}
.overrun-advisor-tip {
font-size: 11px;
color: var(--text-sm);
margin-top: 4px;
}
.overrun-advisor-fix {
font-size: 11px;
color: #e65100;
margin-top: 4px;
}
/* ══════════════════════════════════════════════════════════════
合規徽章（義大利 Gelato / 台灣在地）
══════════════════════════════════════════════════════════════ */
.compliance-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.compliance-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: 16px;
cursor: help;
}
.badge-italian {
background: linear-gradient(135deg, #e8f5e9 0%, #fff9c4 50%, #ffebee 100%);
color: #2e7d32;
border: 1px solid #a5d6a7;
}
.badge-tw-local {
background: linear-gradient(135deg, #e3f2fd, #fff3e0);
color: #1565c0;
border: 1px solid #90caf9;
}
/* ══════════════════════════════════════════════════════════════
IG 配色指南
══════════════════════════════════════════════════════════════ */
.ig-color-guide {
margin-top: 10px;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.ig-color-header {
padding: 10px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
background: var(--bg-card);
}
.ig-color-body {
padding: 10px 14px;
}
.ig-color-palette {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.ig-color-swatch {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.ig-swatch {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.ig-swatch-name {
font-size: 10px;
font-weight: 600;
color: var(--text);
}
.ig-swatch-hex {
font-size: 11px;
color: var(--text-sm);
font-family: monospace;
}
.ig-color-tips {
font-size: 11px;
color: var(--text-sm);
}
.ig-tip { margin: 3px 0; }
/* ══════════════════════════════════════════════════════════════
無障礙：大字模式
══════════════════════════════════════════════════════════════ */
.large-font-mode {
font-size: 16px !important;
}
.large-font-mode .metric-label,
.large-font-mode .metric-val,
.large-font-mode .metric-range,
.large-font-mode .ing-name,
.large-font-mode .ing-amount,
.large-font-mode .ing-pct,
.large-font-mode .search-input,
.large-font-mode .suggestion,
.large-font-mode .balance-title,
.large-font-mode .balance-score {
font-size: 16px !important;
}
.large-font-mode .ing-unit,
.large-font-mode .score-breakdown-item,
.large-font-mode .overrun-advisor-tip,
.large-font-mode .overrun-advisor-fix,
.large-font-mode .ig-color-tips,
.large-font-mode .mixin-summary,
.large-font-mode .ing-oxidation-warn {
font-size: 14px !important;
}
/* ══════════════════════════════════════════════════════════════
無障礙：色盲友善模式
══════════════════════════════════════════════════════════════ */
.color-blind-mode .metric-fill.status-ok {
background: #1565c0 !important;
background-image: none !important;
}
.color-blind-mode .metric-fill.status-low {
background: #f57f17 !important;
background-image: repeating-linear-gradient(
45deg, transparent, transparent 3px, rgba(255,255,255,0.3) 3px, rgba(255,255,255,0.3) 6px
) !important;
}
.color-blind-mode .metric-fill.status-high {
background: #d32f2f !important;
background-image: repeating-linear-gradient(
-45deg, transparent, transparent 3px, rgba(255,255,255,0.4) 3px, rgba(255,255,255,0.4) 6px
) !important;
}
.color-blind-mode .metric-val.status-ok { color: #1565c0 !important; }
.color-blind-mode .metric-val.status-low { color: #f57f17 !important; }
.color-blind-mode .metric-val.status-high { color: #d32f2f !important; }
/* 色盲模式下加上文字標記 */
.color-blind-mode .metric-val.status-ok::after { content: ' ✓'; }
.color-blind-mode .metric-val.status-low::after { content: ' ↓'; }
.color-blind-mode .metric-val.status-high::after { content: ' ↑'; }
/* ══════════════════════════════════════════════════════════════
無障礙：Toggle Switch
══════════════════════════════════════════════════════════════ */
.toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background: #ccc;
border-radius: 24px;
transition: 0.2s;
}
.toggle-slider:before {
content: '';
position: absolute;
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background: white;
border-radius: 50%;
transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--burgundy); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }
/* ══════════════════════════════════════════════════════════════
RWD: 食材列卡片化 + 附加手機修正
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* 食材列表卡片化 */
.ing-row {
flex-direction: column;
align-items: stretch;
padding: 10px 12px;
margin-bottom: 6px;
border: 1px solid var(--border);
border-radius: 8px;
gap: 6px;
}
.ing-row-info {
width: 100%;
flex-wrap: wrap;
gap: 4px;
}
.btn-mixin-toggle {
margin-left: auto;
}
.ing-row-controls {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 4px;
margin-top: 2px;
justify-content: center;
}
.ing-amount {
width: 56px;
text-align: center;
}
.ing-pct, .ing-scaled {
margin-left: auto;
font-size: 12px;
}
.btn-icon.hover-danger {
flex-shrink: 0;
}
.ing-oxidation-warn {
padding-left: 12px;
}
/* 平衡面板不需左右滑動 */
.balance-panel { overflow-x: hidden; max-width: 100%; word-break: break-word; }
/* 合規徽章堆疊 */
.compliance-badges { flex-direction: column; }
/* IG 色票縮小 */
.ig-swatch { width: 32px; height: 32px; }
}
/* ══════════════════════════════════════════════════════════════
R4: 社群按讚/收藏/評論/預覽
══════════════════════════════════════════════════════════════ */
.comm-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.comm-card-actions-top {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.btn-like, .btn-fav {
border: 1px solid var(--border);
border-radius: 16px;
padding: 2px 8px;
font-size: 12px;
cursor: pointer;
background: var(--bg-card);
transition: all 0.15s;
}
.btn-like.liked { background: #fce4ec; border-color: #e91e63; color: #c2185b; }
.btn-fav.faved { background: #fff8e1; border-color: #ffc107; color: #f57f17; }
.btn-like:hover { border-color: #e91e63; }
.btn-fav:hover { border-color: #ffc107; }
.comm-review {
font-size: 12px;
color: var(--text-sm);
padding: 4px 0;
border-top: 1px dashed var(--border);
margin: 4px 0;
line-height: 1.4;
}
.comm-review-author {
font-weight: 600;
color: var(--text);
}
.comm-ing-preview {
font-size: 11px;
color: var(--text-sm);
padding: 4px 0;
line-height: 1.3;
}
.comm-type-filter, .comm-sort-filter {
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 13px;
background: var(--bg-card);
}
.community-search-wrap {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.community-search-wrap .community-search-input {
flex: 1;
min-width: 200px;
}
/* ── 配方預覽 Modal ─────────────────────────────────── */
.recipe-preview-modal h3 { margin: 0 0 8px; }
.preview-meta { font-size: 13px; color: var(--text-sm); margin-bottom: 12px; }
.preview-desc { font-size: 13px; margin: 0 0 12px; color: var(--text); }
.preview-ing-list h4, .preview-balance h4 { font-size: 13px; margin: 12px 0 6px; color: var(--burgundy); }
.preview-ing-row {
display: flex;
justify-content: space-between;
padding: 3px 0;
font-size: 13px;
border-bottom: 1px dotted var(--border);
}
.preview-balance p { font-size: 12px; color: var(--text-sm); }
/* ── 口感描述 ─────────────────────────────────────── */
.texture-desc {
font-size: 12px;
color: var(--text-sm);
padding: 6px 14px;
line-height: 1.5;
border-top: 1px dashed var(--border);
margin-top: 4px;
}
/* ── 寵物餵食量指南 ──────────────────────────────── */
.pet-feeding-guide {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.pet-feeding-title {
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
}
.pet-feed-row {
display: flex;
justify-content: space-between;
padding: 3px 0;
font-size: 12px;
border-bottom: 1px dotted var(--border);
}
.pet-feed-note {
font-size: 11px;
color: #e65100;
margin-top: 6px;
}
/* ── 市集定價建議 ──────────────────────────────── */
.price-suggestion {
font-size: 12px;
color: var(--text-sm);
background: #f5f5f5;
padding: 8px 12px;
border-radius: 6px;
margin-top: 6px;
line-height: 1.5;
}
/* ── 排行品質說明 ──────────────────────────────── */
.lb-quality-note {
font-size: 12px;
color: var(--text-sm);
background: #f5f5f5;
padding: 8px 12px;
border-radius: 6px;
margin: 10px 0;
line-height: 1.5;
}
/* ══════════════════════════════════════════════════════════════
成就徽章系統
══════════════════════════════════════════════════════════════ */
.achievement-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
margin: 10px 0;
}
.achievement-item {
position: relative;
padding: 12px 8px;
text-align: center;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-card);
opacity: 0.4;
filter: grayscale(1);
transition: all 0.2s;
}
.achievement-item.unlocked {
opacity: 1;
filter: none;
border-color: #ffc107;
background: #fffde7;
}
.ach-icon { font-size: 28px; margin-bottom: 4px; }
.ach-name { font-size: 12px; font-weight: 600; color: var(--text); }
.ach-desc { font-size: 10px; color: var(--text-sm); margin-top: 2px; }
.ach-check {
position: absolute; top: 4px; right: 6px;
font-size: 14px; color: #4caf50;
}
.ach-progress {
text-align: center;
font-size: 13px;
color: var(--text-sm);
margin-top: 8px;
}
/* ══════════════════════════════════════════════════════════════
每週挑戰
══════════════════════════════════════════════════════════════ */
.weekly-challenge {
display: flex;
gap: 14px;
align-items: center;
padding: 12px;
background: linear-gradient(135deg, #fff8e1, #fce4ec);
border-radius: 10px;
border: 1px solid #ffcc80;
}
.wc-icon { font-size: 40px; }
.wc-theme { font-size: 16px; font-weight: 700; color: var(--burgundy); }
.wc-desc { font-size: 13px; color: var(--text); margin: 4px 0; }
.wc-reward { font-size: 12px; color: #e65100; }
/* ══════════════════════════════════════════════════════════════
語言選擇器
══════════════════════════════════════════════════════════════ */
.lang-selector {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.lang-btn {
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-card);
cursor: pointer;
font-size: 14px;
transition: all 0.15s;
}
.lang-btn.active {
border-color: var(--burgundy);
background: var(--burgundy);
color: white;
}
.lang-btn:hover { border-color: var(--burgundy); }
/* ══════════════════════════════════════════════════════════════
配方比較 Modal
══════════════════════════════════════════════════════════════ */
.compare-modal { max-width: 700px; }
.compare-selectors {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 16px;
}
.compare-col { flex: 1; }
.compare-col label { font-size: 12px; font-weight: 600; display: block; margin-bottom: 4px; }
.compare-vs { font-size: 20px; font-weight: 700; color: var(--burgundy); }
.cmp-header {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
margin-bottom: 12px;
text-align: center;
}
.cmp-score { font-size: 12px; color: var(--text-sm); }
.cmp-table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cmp-row {
display: grid;
grid-template-columns: 100px 1fr 60px 1fr;
padding: 6px 12px;
font-size: 13px;
border-bottom: 1px solid var(--border);
align-items: center;
}
.cmp-row:last-child { border-bottom: none; }
.cmp-row:nth-child(even) { background: #fafafa; }
.cmp-label { font-weight: 600; color: var(--text-sm); }
.cmp-val-a, .cmp-val-b { text-align: center; }
.cmp-diff { text-align: center; font-size: 11px; font-weight: 600; }
.cmp-ingredients {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 16px;
}
.cmp-ing-col h4 { font-size: 13px; margin: 0 0 6px; color: var(--burgundy); }
.cmp-ing-col div { font-size: 12px; padding: 2px 0; border-bottom: 1px dotted var(--border); }
/* ══════════════════════════════════════════════════════════════
分享卡片按鈕
══════════════════════════════════════════════════════════════ */
.share-btn-card { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }
.share-btn-card:hover { opacity: 0.9; }
.share-btn-line { background: #06C755; color: white; }
.share-btn-line:hover { opacity: 0.9; }
/* ══════════════════════════════════════════════════════════════
PHASE 2: VOC 化合物 / 交互作用 / 梅納反應面板
══════════════════════════════════════════════════════════════ */
.combo-interaction-panel {
margin-top: 8px;
padding: 8px 12px;
background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
border: 1px solid #a5d6a7;
border-radius: 8px;
font-size: 12px;
}
.combo-interaction-title {
font-weight: 700;
color: #2e7d32;
margin-bottom: 4px;
}
.combo-interaction-text {
color: #33691e;
line-height: 1.5;
}
.combo-voc-panel {
margin-top: 8px;
padding: 8px 12px;
background: linear-gradient(135deg, #e3f2fd, #e8eaf6);
border: 1px solid #90caf9;
border-radius: 8px;
font-size: 11px;
}
.combo-voc-title {
font-weight: 700;
color: #1565c0;
margin-bottom: 4px;
font-size: 12px;
}
.combo-voc-row {
padding: 2px 0;
color: #37474f;
}
.voc-ing-name {
font-weight: 600;
color: #1565c0;
}
.voc-chip {
display: inline-block;
padding: 1px 6px;
margin: 1px 2px;
background: rgba(21,101,192,0.08);
border: 1px solid rgba(21,101,192,0.2);
border-radius: 10px;
font-size: 10px;
color: #1565c0;
font-family: 'Courier New', monospace;
}
/* ── 梅納反應面板 ──────────────────────────────── */
.maillard-panel {
margin-top: 12px;
border: 1px solid #ffcc80;
border-radius: 8px;
overflow: hidden;
}
.maillard-header {
padding: 10px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
background: linear-gradient(135deg, #fff3e0, #fce4ec);
display: flex;
justify-content: space-between;
align-items: center;
}
.maillard-intensity {
font-size: 11px;
padding: 2px 8px;
border-radius: 12px;
background: rgba(230,81,0,0.1);
color: #e65100;
font-weight: 700;
}
.maillard-body {
padding: 10px 14px;
font-size: 12px;
background: #fffde7;
}
.maillard-rec {
color: #e65100;
font-weight: 500;
margin: 0 0 8px;
line-height: 1.5;
}
.maillard-product {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 0;
border-bottom: 1px dotted #ffcc80;
}
.maillard-reaction { font-weight: 600; color: #6d4c41; }
.maillard-arrow { color: #ff8f00; }
.maillard-result { font-family: 'Courier New', monospace; color: #e65100; }
.maillard-odor { color: var(--text-sm); font-style: italic; }
.maillard-shift {
margin-top: 6px;
font-size: 11px;
color: #bf360c;
font-weight: 500;
}
/* ══════════════════════════════════════════════════════════════
PHASE 3: AI 配方預測 / 風味敘述
══════════════════════════════════════════════════════════════ */
.combo-narrative {
font-size: 12px;
line-height: 1.7;
color: var(--text);
padding: 8px 12px;
margin-top: 6px;
background: linear-gradient(135deg, #fafaf5, #f5f0e8);
border-radius: 8px;
border-left: 3px solid var(--gold);
font-style: italic;
}
/* Phase 3A: Claude AI 解說 */
.combo-claude-narrative {
margin-top: 8px;
padding: 10px 14px;
background: linear-gradient(135deg, #f0f4ff, #e8eef8);
border-radius: 10px;
border-left: 3px solid #6366f1;
}
.claude-badge {
font-size: 11px;
font-weight: 600;
color: #6366f1;
margin-bottom: 4px;
letter-spacing: 0.3px;
}
.claude-text {
font-size: 13px;
line-height: 1.6;
color: var(--text);
}
/* 主廚處方（結構化 v2）：處方 + 味覺弧線 + 禁忌 */
.combo-chef-narrative {
background: linear-gradient(135deg, #fff8ed, #fdefd9);
border-left: 3px solid #c8a055;
padding: 12px 14px;
}
.combo-chef-narrative .claude-badge {
color: #8a6a2d;
display: flex;
align-items: center;
gap: 4px;
}
.chef-prescription {
font-size: 14px;
line-height: 1.65;
color: #3a2e1e;
font-weight: 500;
padding: 8px 10px;
margin: 6px 0 10px;
background: rgba(255,255,255,0.55);
border-radius: 6px;
border-left: 2px solid #c8a055;
font-style: normal;
}
.chef-prescription::before {
content: '❝ ';
color: #c8a055;
font-weight: 700;
}
.chef-prescription::after {
content: ' ❞';
color: #c8a055;
font-weight: 700;
}
.chef-arc {
display: flex;
flex-direction: column;
gap: 6px;
margin: 8px 0 10px;
position: relative;
padding-left: 14px;
}
.chef-arc::before {
content: '';
position: absolute;
left: 4px;
top: 8px;
bottom: 8px;
width: 2px;
background: linear-gradient(to bottom, #f4a261 0%, #c8a055 50%, #40916c 100%);
border-radius: 1px;
}
.arc-step {
display: flex;
gap: 8px;
align-items: baseline;
font-size: 13px;
line-height: 1.55;
position: relative;
}
.arc-step::before {
content: '';
position: absolute;
left: -14px;
top: 7px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
border: 2px solid #c8a055;
}
.arc-step:nth-child(1)::before { border-color: #f4a261; }
.arc-step:nth-child(2)::before { border-color: #c8a055; }
.arc-step:nth-child(3)::before { border-color: #40916c; }
.arc-label {
flex: 0 0 34px;
font-size: 11px;
font-weight: 600;
color: #8a6a2d;
letter-spacing: 0.5px;
}
.arc-text {
color: #3a2e1e;
flex: 1;
}
.chef-avoid {
display: flex;
gap: 6px;
align-items: flex-start;
font-size: 13px;
line-height: 1.5;
color: #7a2e1e;
background: rgba(230, 57, 70, 0.08);
border: 1px solid rgba(230, 57, 70, 0.2);
border-radius: 6px;
padding: 7px 10px;
margin-top: 4px;
}
.avoid-icon {
flex: 0 0 auto;
font-size: 13px;
line-height: 1.4;
}
.avoid-text {
flex: 1;
}
@media (max-width: 480px) {
.chef-prescription { font-size: 13px; padding: 7px 9px; }
.arc-step { font-size: 12px; }
.arc-label { flex-basis: 30px; font-size: 11px; }
.chef-avoid { font-size: 12px; }
}
/* 自由配對主廚處方 CTA */
.chef-narrative-cta {
margin-top: 14px;
padding: 12px 14px;
background: linear-gradient(135deg, #fff8ed, #fdefd9);
border: 1px dashed #c8a055;
border-radius: 10px;
text-align: center;
}
.btn-chef-narrative {
background: linear-gradient(135deg, #c8a055, #b88640);
color: #fff;
border: none;
border-radius: 8px;
padding: 9px 20px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.3px;
box-shadow: 0 2px 6px rgba(200,160,85,0.3);
transition: transform .15s, box-shadow .15s;
}
.btn-chef-narrative:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(200,160,85,0.4);
}
.btn-chef-narrative:active { transform: translateY(0); }
.chef-narrative-hint {
margin-top: 6px;
font-size: 11px;
color: #8a6a2d;
opacity: 0.75;
}
.chef-narrative-loading {
margin-top: 14px;
padding: 14px;
background: linear-gradient(135deg, #fff8ed, #fdefd9);
border-left: 3px solid #c8a055;
border-radius: 8px;
font-size: 13px;
color: #8a6a2d;
display: flex;
align-items: center;
gap: 10px;
}
.chef-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgba(200,160,85,0.25);
border-top-color: #c8a055;
border-radius: 50%;
animation: chef-spin 0.9s linear infinite;
flex-shrink: 0;
}
@keyframes chef-spin { to { transform: rotate(360deg); } }
.chef-narrative-error {
margin-top: 14px;
padding: 10px 14px;
background: rgba(230, 57, 70, 0.08);
border: 1px solid rgba(230, 57, 70, 0.25);
border-radius: 8px;
font-size: 13px;
color: #7a2e1e;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
/* Phase 3B: 文化配對標記 */
.combo-cultural-info {
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.cultural-tag {
display: flex;
gap: 6px;
align-items: baseline;
font-size: 12px;
padding: 4px 8px;
background: var(--gold-bg);
border-radius: 6px;
border: 1px solid rgba(200,160,85,.2);
}
.cultural-origin {
font-weight: 600;
color: var(--burgundy);
white-space: nowrap;
}
.cultural-reason {
color: var(--text-sm);
font-style: italic;
}
/* Molecular Gastronomy: 化學穩定性提示 */
.combo-stability-panel {
margin-top: 8px;
padding: 8px 12px;
background: #fff8e1;
border-radius: 8px;
border-left: 3px solid #ffa726;
}
.combo-stability-title {
font-size: 12px; font-weight: 600;
color: #e65100; margin-bottom: 4px;
}
.stability-warning {
display: flex; gap: 6px; align-items: flex-start;
font-size: 12px; color: var(--text);
padding: 3px 0; line-height: 1.5;
}
.stability-icon { flex-shrink: 0; }
.combo-success-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
margin-top: 6px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 12px;
}
.success-label { font-weight: 600; color: var(--text-sm); }
.success-score { font-weight: 700; font-size: 14px; }
.success-source { font-size: 10px; color: var(--text-sm); }
/* ── 口味基因 Flavor Profile ─────────────────────────────── */
.flavor-profile-card { border-color: rgba(200,160,85,0.25); }
.flavor-personality-badge {
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, rgba(200,160,85,0.10), rgba(200,160,85,0.04));
border: 1px solid rgba(200,160,85,0.25);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 18px;
}
.fp-badge-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.fp-badge-label {
font-size: 16px;
font-weight: 700;
color: var(--text-gold, #C8A055);
letter-spacing: 0.5px;
}
.fp-badge-desc { font-size: 12px; color: var(--text-sm); margin-top: 2px; }
.fp-radar-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-bottom: 18px;
}
.fp-radar-wrap canvas {
border-radius: 10px;
max-width: 100%;
}
.fp-radar-legend {
display: flex;
gap: 16px;
font-size: 11px;
color: var(--text-sm);
}
.fp-legend-row { display: flex; align-items: center; gap: 5px; }
.fp-legend-swatch {
display: inline-block;
width: 16px;
height: 8px;
border-radius: 2px;
}
.fp-legend-user {
background: rgba(200,160,85,0.35);
border: 2px solid #C8A055;
}
.fp-legend-avg {
background: transparent;
border: 1.5px dashed rgba(200,160,85,0.45);
}
.fp-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 14px;
}
@media (max-width: 480px) {
.fp-stats-grid { grid-template-columns: 1fr 1fr; }
}
.fp-stat-item {
background: var(--bg-card, rgba(255,255,255,0.04));
border: 1px solid var(--border, rgba(200,160,85,0.12));
border-radius: 8px;
padding: 10px 8px;
text-align: center;
}
.fp-stat-value {
font-size: 18px;
font-weight: 700;
color: var(--text-gold, #C8A055);
line-height: 1.2;
word-break: break-all;
}
.fp-stat-label {
font-size: 11px;
color: var(--text-sm);
margin-top: 3px;
}
.fp-personalized-tip {
background: rgba(200,160,85,0.06);
border-left: 3px solid rgba(200,160,85,0.35);
border-radius: 0 6px 6px 0;
padding: 10px 12px;
font-size: 13px;
color: var(--text);
line-height: 1.5;
margin-bottom: 4px;
}
/* ── Label Engine v2 · Editor (Phase 2) ─────────────────────
* Styles apply only to the SVG produced by LabelRenderer when
* output: 'svg'. The legacy HTML path is untouched.
*/
.label-editor-toggle {
background: #fff;
color: var(--accent, #7B1528);
border: 1px solid rgba(123, 21, 40, 0.35);
font-weight: 500;
}
.label-editor-toggle:hover {
background: rgba(123, 21, 40, 0.05);
}
.label-editor-toggle.active {
background: var(--accent, #7B1528);
color: #fff;
border-color: var(--accent, #7B1528);
}
/* Hitbox is pointer-transparent by default so labels stay readable.
* Editor toggles .label-editor-active on the