/* ============================================================
花迹网 · 基座组件 site.css v0.1（Phase 0）
只放全站骨架组件：顶导航 / 页脚 / 按钮 / toast / 行内错误 / 容器
颜色一律 var(--bt-*)，本文件出现裸色值即为违规
============================================================ */
/* 基座骨架：内容再短，页脚也钉在视口最下方 */
/* font-family 必须由基座施加：夜园页按四层级联关闭了 legacy style.css，而 tokens.css 只定义
--bt-font 变量——缺这条规则时 body 退回 UA 衬线，/gallery /plants /showcase 实测整页落
Times New Roman（story-1「换站感」根因）。 */
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bt-bg-base); color: var(--bt-text); font-family: var(--bt-font); }
/* flex 列容器里 margin:auto 的子项会收缩为内容宽——所有直系内容容器强制满宽 */
body > main, body > .bt-container, body > .container, body > section, body > div:not(.bt-toast-stack) { width: 100%; }
/* 320px 窄屏：容器 width:100% + 左右 padding 在 content-box 下会变成 320+2×padding
（实测 /gallery 352、/plants 352、/showcase 368 → 整页横向滚动）。
只对容器层做 border-box，不做全局 * 重置，避免波及 legacy 组件既有尺寸。 */
main, section, article, aside, nav, .bt-container, .bt-shell, .btx, .btx-side, .sc-hero, .sc-sec, .sc-cta, .gal-head { box-sizing: border-box; }
/* ── 顶导航 ── */
.bt-header {
position: sticky; top: 0; z-index: var(--bt-z-header);
background: var(--bt-bg-layout);
border-bottom: 1px solid var(--bt-border-tertiary);
}
.bt-header-inner {
max-width: var(--bt-w-std); margin: 0 auto; padding: 0 var(--bt-space-4);
height: 56px; display: flex; align-items: center; gap: var(--bt-space-2);
}
.bt-brand { display: flex; align-items: center; gap: var(--bt-space-2); text-decoration: none; margin-right: var(--bt-space-4); flex: none; }
.bt-brand-leaf { width: 32px; height: 32px; display: flex; flex: none; }
/* 与首页 .site-avatar 同款处理：圆形裁切 + 浅底 + 描边，保证全站标志观感一致 */
.bt-brand-leaf img {
width: 32px; height: 32px; object-fit: cover; border-radius: 50%;
border: 1.5px solid color-mix(in srgb, var(--bt-text-on-primary) 82%, transparent);
background: #eef4e8; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
transition: transform .3s;
}
.bt-brand:hover .bt-brand-leaf img { transform: rotate(-8deg) scale(1.06); }
/* 密叶猴耳环设定：白昼张开、夜间合拢——按时间段切换，逻辑在 app.js（与主页一致） */
.bt-brand-name { font-size: var(--bt-fs-md); font-weight: 600; color: var(--bt-text); }
.bt-nav { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.bt-nav::-webkit-scrollbar { display: none; }
/* 键盘可达：legacy 有 8 处 outline:none，这里统一补可见焦点环（仅键盘触发，不打扰鼠标） */
:focus-visible { outline: 2px solid var(--bt-primary); outline-offset: 2px; border-radius: var(--bt-r-sm); }
.bt-nav a, .bt-nav .bt-nav-disabled {
padding: 6px 12px; border-radius: var(--bt-r-sm); white-space: nowrap;
font-size: var(--bt-fs-base); text-decoration: none; color: var(--bt-text-secondary);
transition: background .15s, color .15s;
}
.bt-nav a:hover { background: var(--bt-bg-elevated); color: var(--bt-text); }
.bt-nav a.is-active { background: var(--bt-primary-bg); color: var(--bt-link); font-weight: 600; }
.bt-nav .bt-nav-disabled { color: var(--bt-text-faint); opacity: .65; cursor: not-allowed; user-select: none; }
.bt-account { margin-left: auto; flex: none; display: flex; align-items: center; }
.bt-account-btn {
display: flex; align-items: center; gap: var(--bt-space-2);
padding: 5px 12px 5px 5px; border-radius: var(--bt-r-full);
text-decoration: none; color: var(--bt-text); cursor: pointer; list-style: none; user-select: none;
transition: background .15s;
}
.bt-account-btn:hover, .bt-account-menu[open] .bt-account-btn { background: var(--bt-primary-bg); }
.bt-avatar {
width: 32px; height: 32px; border-radius: var(--bt-r-full); flex: none;
display: flex; align-items: center; justify-content: center;
background: var(--bt-primary); color: var(--bt-text-on-primary);
font-size: var(--bt-fs-md); font-weight: 700;
}
.bt-account-name { font-size: var(--bt-fs-base); font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-account-caret { color: var(--bt-text-tertiary); font-size: var(--bt-fs-xs); }
.bt-account-btn::-webkit-details-marker { display: none; }
.bt-account-menu { position: relative; }
.bt-account-pop {
position: absolute; right: 0; top: calc(100% + 8px); min-width: 168px;
background: var(--bt-bg-container); border: 1px solid var(--bt-border-secondary);
border-radius: var(--bt-r-md); box-shadow: var(--bt-shadow-hover); padding: var(--bt-space-1);
display: flex; flex-direction: column;
}
.bt-account-pop a { padding: 8px 12px; border-radius: var(--bt-r-sm); font-size: var(--bt-fs-base); color: var(--bt-text-secondary); text-decoration: none; }
.bt-account-pop a:hover { background: var(--bt-bg-elevated); color: var(--bt-text); }
.bt-account-pop .bt-account-out { color: var(--bt-error); }
/* ── 页脚 ── */
.bt-footer { border-top: 1px solid var(--bt-border-tertiary); background: var(--bt-bg-layout); margin-top: auto; }
.bt-footer-inner {
max-width: var(--bt-w-std); margin: 0 auto; padding: var(--bt-space-8) var(--bt-space-4);
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--bt-space-2) var(--bt-space-6);
font-size: var(--bt-fs-xs); color: var(--bt-text-tertiary); text-align: center;
}
.bt-footer-inner a { color: var(--bt-text-tertiary); text-decoration: none; }
.bt-footer-inner a:hover { color: var(--bt-link); text-decoration: underline; }
.bt-footer-slogan { flex-basis: 100%; margin-top: var(--bt-space-2); }
/* ── 按钮（三级制度：全站每屏仅 1 个 primary）── */
.bt-btn {
display: inline-flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 6px; /* !important：防旧皮 .community-form label{display:grid} 把图标压到文字上方 */
min-height: 44px; padding: 0 var(--bt-space-4); border-radius: var(--bt-r-md);
font-size: var(--bt-fs-base); font-weight: 600; text-decoration: none; cursor: pointer;
border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
.bt-btn--primary { background: var(--bt-primary); color: var(--bt-text-on-primary); }
.bt-btn--primary:hover { background: var(--bt-primary-hover); }
.bt-btn--primary:active { background: var(--bt-primary-active); }
.bt-btn--secondary { background: var(--bt-bg-container); color: var(--bt-link); border-color: var(--bt-primary-border); }
.bt-btn--secondary:hover { background: var(--bt-primary-bg); }
.bt-btn--ghost { background: transparent; color: var(--bt-text-secondary); }
.bt-btn--ghost:hover { background: var(--bt-bg-elevated); color: var(--bt-text); }
.bt-btn[disabled], .bt-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.bt-btn--sm { min-height: 34px; font-size: var(--bt-fs-xs); padding: 0 var(--bt-space-3); }
/* ── 行内字段错误（story-4：替代 alert）── */
.bt-field-error {
display: none; margin: 4px 0 0; font-size: var(--bt-fs-xs); color: var(--bt-error);
}
.bt-field-error.is-shown { display: block; }
.bt-input.is-error { border-color: var(--bt-error-border); background: var(--bt-error-bg); }
/* ── Toast（story-4 统一反馈通道，可带撤销）── */
.bt-toast-stack {
position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
z-index: var(--bt-z-toast); display: flex; flex-direction: column; gap: var(--bt-space-2);
align-items: center; pointer-events: none; max-width: min(92vw, 480px);
}
.bt-toast {
pointer-events: auto; display: flex; align-items: center; gap: var(--bt-space-3);
background: var(--bt-ink); color: var(--bt-primary-bg); border-radius: var(--bt-r-md);
padding: 10px 16px; font-size: var(--bt-fs-sm); box-shadow: var(--bt-shadow-hover);
opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.bt-toast.is-on { opacity: 1; transform: translateY(0); }
.bt-toast--error { background: var(--bt-error); color: var(--bt-text-on-primary); }
.bt-toast--success { background: var(--bt-success); color: var(--bt-text-on-primary); }
.bt-toast-undo {
background: transparent; border: 1px solid currentColor; opacity: .78; color: inherit;
border-radius: var(--bt-r-sm); padding: 3px 10px; font-size: var(--bt-fs-xs); cursor: pointer;
}
.bt-toast-undo:hover { opacity: 1; }
/* ── 面包屑 ── */
.bt-crumbs { max-width: var(--bt-w-std); margin: 0 auto; padding: var(--bt-space-3) var(--bt-space-4) 0; font-size: var(--bt-fs-xs); color: var(--bt-text-tertiary); }
.bt-crumbs a { color: var(--bt-link); text-decoration: none; }
.bt-crumbs a:hover { text-decoration: underline; }
.bt-crumbs .sep { margin: 0 6px; color: var(--bt-text-faint); }
/* ── 容器工具 ── */
.bt-container { max-width: var(--bt-w-std); margin: 0 auto; padding: 0 var(--bt-space-4); }
.bt-container--read { max-width: var(--bt-w-read); }
/* ── 减弱动效偏好（story-4 安抚规范的一部分）── */
@media (prefers-reduced-motion: reduce) {
.bt-toast, .bt-toast.is-on { transition: none; }
.bt-btn, .bt-nav a { transition: none; }
}
/* ============================================================
环境匹配（/recommend 与知识库内嵌共用）rcx 组件
============================================================ */
.rcx { max-width: var(--bt-w-std); margin: 0 auto; padding: var(--bt-space-4); }
.rcx-head { margin-top: var(--bt-space-6); }
.rcx-head .eyebrow { font-size: var(--bt-fs-xs); letter-spacing: .14em; color: var(--bt-link); font-weight: 700; margin: 0 0 6px; }
.rcx-head h1 { font-size: var(--bt-fs-2xl); color: var(--bt-text); margin: 0 0 8px; }
.rcx-head p { color: var(--bt-text-secondary); font-size: var(--bt-fs-base); margin: 0; line-height: 1.7; }
.rcx-form { margin-top: var(--bt-space-6); background: var(--bt-bg-container); border: 1px solid var(--bt-border-secondary); border-radius: var(--bt-r-lg); padding: var(--bt-space-6); display: flex; flex-direction: column; gap: var(--bt-space-6); }
.rcx-form fieldset { border: 0; margin: 0; padding: 0; }
.rcx-form legend { font-size: var(--bt-fs-base); font-weight: 700; color: var(--bt-text); padding: 0; margin-bottom: var(--bt-space-3); }
.rcx-options { display: flex; flex-wrap: wrap; gap: var(--bt-space-2); }
.rcx-option { cursor: pointer; }
.rcx-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rcx-option span { display: inline-block; padding: 8px 18px; border-radius: var(--bt-r-full); font-size: var(--bt-fs-sm); color: var(--bt-text-secondary); background: var(--bt-bg-elevated); border: 1px solid var(--bt-border-secondary); transition: all .15s; }
.rcx-option input:checked + span { background: var(--bt-primary); border-color: var(--bt-primary); color: var(--bt-text-on-primary); font-weight: 600; }
.rcx-option input:focus-visible + span { outline: 2px solid var(--bt-primary-border); outline-offset: 2px; }
.rcx-option span:hover { border-color: var(--bt-primary-border); }
.rcx-submit { margin-top: var(--bt-space-2); }
.rcx-submit .bt-btn { text-decoration: none; }
.rcx-results { margin-top: var(--bt-space-8); }
.rcx-results h2 { font-size: var(--bt-fs-lg); color: var(--bt-text); margin: 0 0 4px; }
.rcx-results .rcx-sub { color: var(--bt-text-tertiary); font-size: var(--bt-fs-xs); margin: 0 0 var(--bt-space-4); }
.rcx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--bt-space-4); }
.rcx-card { display: block; text-decoration: none; color: inherit; background: var(--bt-bg-container); border: 1px solid var(--bt-border-secondary); border-radius: var(--bt-r-lg); overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; }
.rcx-card:hover { transform: translateY(-3px); border-color: var(--bt-primary-border); box-shadow: var(--bt-shadow-hover); }
.rcx-card img { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--bt-bg-spotlight); }
.rcx-card .cv-noimg { height: 150px; display: flex; align-items: center; justify-content: center; background: var(--bt-bg-spotlight); color: var(--bt-primary); }
.rcx-card .cv-body { padding: var(--bt-space-3) var(--bt-space-4); }
.rcx-card strong { display: block; font-size: var(--bt-fs-md); color: var(--bt-text); margin-bottom: 2px; }
.rcx-card em { font-style: normal; font-size: var(--bt-fs-xs); color: var(--bt-text-tertiary); }
.rcx-card p { margin: var(--bt-space-2) 0 0; font-size: var(--bt-fs-xs); color: var(--bt-text-secondary); line-height: 1.6; }
.rcx-card .cv-reasons { margin: var(--bt-space-2) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.rcx-card .cv-reasons li { font-size: var(--bt-fs-xs); color: var(--bt-link); background: var(--bt-primary-bg); border-radius: var(--bt-r-sm); padding: 2px 8px; }
.rcx-empty { text-align: center; color: var(--bt-text-secondary); background: var(--bt-bg-container); border: 1px dashed var(--bt-border-secondary); border-radius: var(--bt-r-lg); padding: var(--bt-space-12) var(--bt-space-4); }
@media (prefers-reduced-motion: reduce) { .rcx-card { transition: none; } }
/* ---------- BTUI.confirm 对话框（替代原生 confirm，Phase 3 清债） ---------- */
.bt-dialog-mask {
position: fixed; inset: 0; z-index: 2400;
display: flex; align-items: center; justify-content: center;
padding: var(--bt-space-4, 16px);
background: rgba(18, 24, 20, .58);
opacity: 0; transition: opacity .18s ease;
}
.bt-dialog-mask.is-on { opacity: 1; }
.bt-dialog {
width: min(420px, 100%);
padding: var(--bt-space-6, 24px);
border-radius: var(--bt-r-xl, 18px);
background: var(--bt-bg-container, #fff);
box-shadow: var(--bt-shadow-lg, 0 18px 48px rgba(20, 32, 24, .28));
transform: translateY(8px) scale(.98);
transition: transform .18s ease;
}
.bt-dialog-mask.is-on .bt-dialog { transform: none; }
.bt-dialog-title {
margin: 0 0 var(--bt-space-2, 8px);
font-size: var(--bt-fs-lg, 16px); font-weight: 700;
color: var(--bt-text-primary, #243328);
}
.bt-dialog-message {
margin: 0 0 var(--bt-space-6, 24px);
font-size: var(--bt-fs-sm, 13px); line-height: 1.7;
color: var(--bt-text-secondary, #4a554a);
}
.bt-dialog--danger .bt-dialog-title { color: var(--bt-danger, #b4453c); }
.bt-dialog-actions { display: flex; justify-content: flex-end; gap: var(--bt-space-3, 12px); }
.bt-dialog--danger .bt-dialog-ok {
background: var(--bt-danger, #b4453c); border-color: var(--bt-danger, #b4453c); color: #fff;
}
/* BTUI.prompt 的输入区（原生 window.prompt 无法样式化，移动端也难用） */
.bt-dialog-input {
box-sizing: border-box; width: 100%; margin-bottom: var(--bt-space-4);
padding: 10px 12px; border: 1px solid var(--bt-border); border-radius: var(--bt-r-md);
background: var(--bt-bg-elevated); color: var(--bt-text);
font-family: inherit; font-size: var(--bt-fs-base);
}
.bt-dialog-input::placeholder { color: var(--bt-text-faint); }
.bt-dialog-input:focus { outline: none; border-color: var(--bt-primary); }
.bt-dialog-textarea { resize: vertical; min-height: 76px; line-height: 1.6; }
body.bt-dialog-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.bt-dialog-mask, .bt-dialog { transition: none; }
}
/* Markdown 表格：花神经对比类回答的结构化呈现（挂基座页面共用，
主页浮窗走 style.css 里的同名规则，两处保持一致） */
.md-table-wrap { overflow-x: auto; margin: 8px 0; }
table.md-table {
border-collapse: collapse;
width: 100%;
min-width: 320px;
font-size: 12px;
line-height: 1.5;
background: #fff;
color: #243328;
border-radius: 10px;
overflow: hidden;
}
.md-table th, .md-table td {
border: 1px solid #dfe8d6;
padding: 6px 8px;
text-align: left;
vertical-align: top;
}
.md-table th {
background: #eef4e6;
color: #2f5e36;
font-weight: 700;
white-space: nowrap;
}
.md-table td { background: #fff; color: #243328; }
.md-table strong { color: #1f3a26; }
.md-table tbody tr:nth-child(even) td { background: #f7faf4; }
/* 未收录品种的候选：长在回答气泡内，一行一个 */
.flower-gap-options {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed rgba(47, 94, 54, .28);
}
.flower-gap-option {
display: block;
width: 100%;
padding: 7px 10px;
border: 1px solid #cfdccb;
border-radius: 10px;
background: #f7faf3;
color: #243328;
font-size: 12.5px;
line-height: 1.4;
text-align: left;
cursor: pointer;
}
.flower-gap-option:hover { border-color: #5d8a66; background: #eef4e6; }
.flower-gap-option.is-upload { border-style: dashed; background: #fff; color: #2f5e36; }
/* 花友经验引用：一行一条，只露昵称/城市/动作类型，原文留在 snapshot 页 */
.flower-peer-refs {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed rgba(47, 94, 54, .28);
}
.flower-peer-refs-title {
font-size: 12px;
color: var(--bt-text-faint, #97a097);
}
.flower-peer-ref {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 7px 10px;
border: 1px solid #cfdccb;
border-radius: 10px;
background: #f7faf3;
color: #243328;
font-size: 12.5px;
line-height: 1.4;
text-align: left;
cursor: pointer;
}
.flower-peer-ref:hover { border-color: #5d8a66; background: #eef4e6; }
.flower-peer-ref-arrow { color: #97a097; }
/* ── story-5 图标收编：线性 SVG 图标与文案的统一排布（只碰布局，色值一律走令牌）──
消费方式：
注意：sprite 已把 改成 ——引用 不会建立视口，
消费端