/* =============================================================
订单管理系统 · 全站皮肤 v1（苹果风） 2026-10-28
-------------------------------------------------------------
加载顺序：base.html 里放在 app.css / 各页专属 CSS **之后**，
也就是最后一个加载 → 同优先级下覆盖前面所有规则。
覆盖策略（为什么不改 app.css）：
1. 用 body 前缀 +1 个元素级权重，压过原来单类的 .card/.btn；
admin_design.css 里的 .gbtn.gbtn-primary 这类双类选择器，
这里用同名双类匹配，保证也能压过。
2. 只改「长相」（颜色/字号/圆角/内距/阴影），
**不改 display / position / 结构**，避免把某个页面的布局拆散。
3. 需要整块重做的（统计卡列数、日头吸顶）在本文件末尾单独标出。
回滚：删掉 base.html 里的一行 即可全站恢复原样。
============================================================= */
/* =============================================================
1. 设计令牌：颜色 / 圆角 / 阴影 / 字体
-------------------------------------------------------------
原来 app.css 里的令牌已经比较接近，这里只做三件事：
· 把强调色统一成 Apple Action Blue（白标客户仍可覆盖 --brand-*）
· 圆角收成 5 档（5 / 8 / 11 / 18 / 999）
· 阴影只留一条极淡的，其余全部去掉 —— 靠留白分层
============================================================= */
:root{
--bg: #F5F5F7;
--surface: #FFFFFF;
--surface-2: #FAFAFC;
--surface-3: #F0F0F3;
--line: rgba(0,0,0,.07);
--line-2: rgba(0,0,0,.12);
--text: #1D1D1F;
--text-2: #6E6E73;
--text-3: #86868B;
--text-4: #AEAEB2;
--brand-50: #E8F2FE;
--brand-100: #D6E7FC;
--brand-200: #B9D7FA;
--brand-500: #147CE5;
--brand-600: #0071E3;
--brand-700: #0058B0;
--ok: #1D9E60; --ok-bg: #E8F7EE; --ok-text: #0F7B45;
--warn: #FF9500; --warn-bg: #FFF4E3; --warn-text: #9A5B00;
--danger: #E5484D; --danger-bg: #FDECEC; --danger-text: #B22B2B;
--info: #0071E3; --info-bg: #E8F2FE; --info-text: #0058B0;
--r-xl: 999px; /* 弹窗 / 胶囊 */
--r-lg: 18px; /* 卡片 */
--r: 11px; /* 按钮 / 输入框 */
--r-sm: 8px; /* 内嵌小块 */
--r-full: 999px;
/* 全站只留一档阴影，而且很淡 —— 卡片默认不用它 */
--sh-1: 0 6px 24px rgba(0,0,0,.06);
--sh-2: 0 10px 40px rgba(0,0,0,.10);
--sh-3: 0 16px 56px rgba(0,0,0,.14);
--sh-hover: 0 8px 28px rgba(0,0,0,.08);
/* 导航选中态：半透明浅灰 + 深色字（2026-10-28 用户改）
---------------------------------------------------------
原来是近黑实心胶囊（#1D1D1F），用户说「黑底好丑」。
现在改成一层半透明灰：压在白色底上是浅灰、压在毛玻璃上是灰玻璃，
不用为每种底单独配色，也不用担心白标客户换主题色后选中态糊掉。
⚠️ 这一个变量同时管四处：底部 Tab、桌面横排导航、
后台侧边栏、侧边栏「返回看板」—— 改一处全站生效。 */
--nav-active-bg: rgba(0,0,0,.06);
--nav-active-fg: #1D1D1F;
--sidebar-w: 248px;
--topbar-h: 60px;
--tabbar-h: 78px;
}
/* =============================================================
2. 基础
============================================================= */
html{ -webkit-text-size-adjust:100%; }
body{
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
"Noto Sans SC", "Microsoft YaHei", sans-serif;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* 数字统一等宽 —— 金额、日期、单号能竖向对齐，是"整齐"的关键 */
body .num, body .mono{ font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace; }
/* 文本辅助色统一（原来各页 5 种灰） */
body .muted, body .mut, body .small, body .hint, body .desc{
color: var(--text-3);
}
body .desc{ font-size: 13px; }
body .hint{ font-size: 12px; line-height: 1.6; }
body .small{ font-size: 12px; }
/* =============================================================
3. 外壳 · 前台（顶栏 / 桌面导航 / 底栏）
============================================================= */
body .front-top{
height: 60px;
padding: 0 20px;
background: rgba(255,255,255,.86);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-bottom: .5px solid var(--line);
box-shadow: none;
}
body .front-brand .logo{
border-radius: var(--r-sm);
}
body .front-brand .logo-img{ border-radius: var(--r-sm); }
body .front-brand .ftitle{
font-size: 17px; font-weight: 600; letter-spacing: 0;
color: var(--text);
}
/* 桌面横排导航：做成胶囊 */
body .front-nav{
gap: 4px;
padding: 8px 20px 4px;
border-bottom: 0;
background: transparent;
}
body .fnav-item{
height: 34px;
padding: 0 14px;
border-radius: var(--r-full);
font-size: 14px; font-weight: 500;
color: var(--text-2);
background: transparent;
border: 0;
}
body .fnav-item:hover{ background: rgba(0,0,0,.04); color: var(--text); }
body .fnav-item.active{
background: var(--nav-active-bg);
color: var(--nav-active-fg);
font-weight: 600;
border-bottom-color: transparent; /* 旧版用底部蓝线，去掉 */
}
body .front-main{
padding: 16px 20px 48px;
max-width: 1280px;
}
/* 底部 Tab：毛玻璃 + 5 项 */
body .tabbar{
height: var(--tabbar-h);
padding: 10px 8px 0;
background: rgba(255,255,255,.92);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-top: .5px solid var(--line);
box-shadow: none;
}
body .tab-item{
gap: 4px;
color: #8E8E93;
border-radius: var(--r);
padding: 4px 0;
}
body .tab-item .ico{ line-height: 0; }
body .tab-item .lb{ font-size: 11px; font-weight: 500; }
/* 底栏选中胶囊：3.6 那版 app.css 自带 ::before，旧版没有 —— 这里统一创建一次，
两个版本都走同一套外观（半透明灰底 + 深色字 600） */
body .tabbar .tab-item{ position: relative; }
body .tabbar .tab-item > .ico,
body .tabbar .tab-item > .lb{ position: relative; z-index: 1; }
body .tabbar .tab-item.active::before{
content: "";
position: absolute;
inset: 5px 6px;
background: var(--nav-active-bg);
border-radius: 12px;
}
body .tab-item.active{ color: var(--nav-active-fg); background: transparent; }
body .tabbar .tab-item.active .lb{ font-weight: 600; }
/* 抽屉 */
body .front-drawer, body .sidebar{
background: var(--surface);
border-right: .5px solid var(--line);
}
/* =============================================================
4. 外壳 · 后台（侧边栏 / 顶栏 / 内容区）
============================================================= */
body .sidebar{
width: var(--sidebar-w);
padding: 0;
box-shadow: none;
}
body .sidebar-brand{
padding: 18px 18px 14px;
border-bottom: 0;
}
body .sidebar-brand .logo,
body .sidebar-brand .logo-img{ border-radius: var(--r-sm); }
body .sidebar-brand .name{ font-size: 14px; font-weight: 600; }
body .sidebar-brand .ver{ font-size: 11px; color: var(--text-4); }
body .sidebar-nav{ padding: 4px 10px 12px; }
body .nav-group-title{
font-size: 11px; font-weight: 600; color: var(--text-4);
padding: 14px 8px 6px; letter-spacing: .02em;
text-transform: none;
}
body .nav-item{
height: 34px;
padding: 0 10px;
margin-bottom: 1px;
border-radius: var(--r-sm);
font-size: 13px; font-weight: 400;
color: var(--text-2);
gap: 9px;
}
body .nav-item:hover{ background: var(--bg); color: var(--text); }
body .nav-item.active{
background: var(--nav-active-bg);
color: var(--nav-active-fg);
font-weight: 600;
}
body .nav-item .pill,
body .nav-item .pill.gray{
background: rgba(0,0,0,.05);
color: var(--text-3);
font-size: 11px; font-weight: 500;
border-radius: var(--r-full);
padding: 1px 6px;
}
body .nav-item.active .pill{ background: rgba(0,0,0,.08); color: var(--text-2); }
body .sidebar-foot{ border-top: .5px solid var(--line); padding: 12px; }
body .topbar{
height: var(--topbar-h);
padding: 0 24px;
background: rgba(245,245,247,.86);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-bottom: .5px solid var(--line);
box-shadow: none;
}
body .topbar h1{ font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
body .content{ padding: 20px 24px 40px; max-width: 1440px; }
/* 页面大标题（后台页内） */
body .page-head h2, body .page-head h1{
font-size: 22px; font-weight: 600; letter-spacing: -.01em;
color: var(--text); margin: 0;
}
body .page-head .sub{ font-size: 13px; color: var(--text-3); }
/* =============================================================
5. 卡片
============================================================= */
body .card{
background: var(--surface);
border: 0;
border-radius: var(--r-lg);
box-shadow: none;
margin-bottom: 12px;
overflow: visible; /* 日头 sticky 需要；也避免圆角裁切内容 */
}
body .card-head{
padding: 14px 16px 6px;
display: flex; align-items: baseline; gap: 8px;
border-bottom: 0;
background: transparent;
}
body .card-head h3{
font-size: 17px; font-weight: 600; line-height: 24px;
color: var(--text); margin: 0; letter-spacing: 0;
}
body .card-head .desc{ font-size: 13px; color: var(--text-3); }
body .card-body{ padding: 8px 16px 16px; }
body .card-body.tight{ padding: 0 16px 16px; }
/* 后台面板 */
body .gpanel{
background: var(--surface);
border: 0;
border-radius: var(--r-lg);
box-shadow: none;
margin-bottom: 12px;
overflow: hidden;
}
body .gpanel-head{
padding: 14px 16px;
border-bottom: .5px solid var(--line);
background: transparent;
}
body .gpanel-head h2, body .gpanel-head h3{
font-size: 15px; font-weight: 600; color: var(--text);
}
body .gpanel-head .desc{ font-size: 12px; color: var(--text-3); }
/* =============================================================
6. 待办统计卡：手机 2 列 / 桌面自适应
============================================================= */
body .stats{
display: grid;
grid-template-columns: 1fr 1fr; /* 🔴 用户定：2 列 */
gap: 8px;
margin-bottom: 12px;
}
@media (min-width: 900px){
body .stats{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
body .stat{
background: var(--surface);
border: 0;
border-radius: var(--r-lg);
box-shadow: none;
padding: 14px;
display: flex; flex-direction: column; gap: 2px;
min-height: 0; position: relative;
text-align: left;
}
body .stat::before{ content: none; }
body .stat .num{
font-size: 22px; line-height: 28px; font-weight: 600;
letter-spacing: -.01em; color: var(--text);
margin: 0; text-align: left;
}
body .stat .label{
font-size: 13px; line-height: 18px; font-weight: 500;
color: var(--text-2); margin: 0; text-align: left;
}
body .stat-desc{ font-size: 11px; line-height: 1.5; color: var(--text-3); }
body .stat-warn .num{ color: var(--warn-text); }
body .stat-ok .num{ color: var(--ok-text); }
body .stat-info .num{ color: var(--info-text); }
body .stat-danger .num{ color: var(--danger-text); }
body .stat-muted .num{ color: var(--text-4); }
/* =============================================================
7. 表格（后台主力）
============================================================= */
body .table-wrap{
border: 0;
border-radius: 0;
overflow-x: auto;
background: transparent;
}
body .gtable{
width: 100%;
border-collapse: collapse;
}
body .gtable th,
body .gtable td{
padding: 10px 12px;
font-size: 13px;
border-top: .5px solid var(--line);
border-left: 0; border-right: 0; border-bottom: 0;
background: transparent;
white-space: nowrap;
}
body .gtable thead th{
border-top: 0;
background: var(--surface-2);
font-size: 11px; font-weight: 600;
color: var(--text-3);
letter-spacing: .02em;
}
body .gtable tbody tr:hover{ background: var(--surface-2); }
body .gtable .num{ text-align: right; }
body table.gtable-basic th,
body table.gtable-basic td{ padding: 10px 12px; }
/* =============================================================
8. 按钮：3 档 + 胶囊
============================================================= */
body .btn{
height: 34px;
padding: 0 16px;
border: 0;
border-radius: var(--r-full);
font-size: 13px; font-weight: 500;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
background: var(--bg);
color: var(--text);
box-shadow: none;
transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
body .btn:hover{ background: var(--surface-3); }
body .btn:active{ transform: scale(.97); }
/* 🔴 主操作一律 tinted 浅蓝（2026-10-29 用户定：全站不要实心深蓝）
实心深蓝和 disabled 后的 38% 实心蓝看起来是两种蓝，用户会以为是 bug。 */
body .btn-primary{
background: var(--tint-brand);
border: 1px solid var(--tint-brand-line);
color: var(--tint-brand-fg);
}
body .btn-primary:hover{ background: var(--tint-brand-h); border-color: var(--tint-brand-line-h); }
body .btn-primary:active{ background: var(--tint-brand-a); }
body .btn-ghost{
background: transparent;
color: var(--brand-600);
}
body .btn-ghost:hover{ background: var(--brand-50); }
body .btn-danger{
background: var(--danger-bg);
color: var(--danger-text);
}
body .btn-danger:hover{ background: #FBD9D9; }
body .btn-sm{
height: 30px;
padding: 0 12px;
font-size: 12px;
}
body .btn-block{ width: 100%; }
body .btn[disabled], body .btn:disabled{
opacity: .55; pointer-events: none;
}
/* 后台设计系统按钮（双类，权重对齐 admin_design.css） */
body .gbtn{
height: 32px; padding: 0 14px;
border: 0; border-radius: var(--r-full);
font-size: 13px; font-weight: 500;
background: var(--bg); color: var(--text);
box-shadow: none;
}
body .gbtn.gbtn-primary{
background: var(--tint-brand);
border: 1px solid var(--tint-brand-line);
color: var(--tint-brand-fg);
}
body .gbtn.gbtn-primary:hover{ background: var(--tint-brand-h); border-color: var(--tint-brand-line-h); }
body .gbtn.gbtn-danger{
background: var(--danger-bg); color: var(--danger-text);
}
body .gbtn.gbtn-ghost{ background: transparent; color: var(--brand-600); }
body .gbtn-sm{ height: 28px; padding: 0 10px; font-size: 12px; }
/* =============================================================
8b. 页面私有按钮 —— 全部归到同一套规格
-------------------------------------------------------------
背景：24 个页面各自造过按钮（.price-fetch-btn / .import-btn /
.ext-toggle / .tc-btn / .sch-go / .copy-btn / .st-go / .gchip …），
造型、高度、圆角、配色全不一样。同一个页面里能出现「实心色块」
和「浅蓝描边」两种按钮，看着像两个产品。
统一成三档（和 .btn 完全同一套值，不再有第四种）：
主操作 实心蓝胶囊 高 34 / 大号 40
次操作 浅灰胶囊 高 34
小切换 浅灰小胶囊 高 26–30
所有规则带 body 前缀，权重 0,1,1，能压过页面 CSS 的 0,1,0。
============================================================= */
/* —— 主要动作 —— */
body .st-go{ /* 经营统计工具条 · 查询 */
height: 34px; padding: 0 16px;
border: 1px solid var(--tint-brand-line);
border-radius: var(--r-full);
background: var(--tint-brand); color: var(--tint-brand-fg);
font-size: 13px; font-weight: 500;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
box-shadow: none;
}
body .st-go:hover{ background: var(--tint-brand-h); border-color: var(--tint-brand-line-h); }
body .st-go:active{ transform: scale(.97); background: var(--tint-brand-a); }
/* 取价 / 查询排班：这两个和输入框在同一行，高度必须跟输入框对齐（40），
不能按工具条按钮的 34 —— 否则一行里高低不齐。 */
body .price-fetch-btn,
body .sch-go{
height: 40px; padding: 0 18px;
border: 1px solid var(--tint-brand-line);
border-radius: var(--r-full);
background: var(--tint-brand); color: var(--tint-brand-fg);
font-size: 14px; font-weight: 500;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: none;
}
body .price-fetch-btn:hover, body .sch-go:hover{
background: var(--tint-brand-h); border-color: var(--tint-brand-line-h);
}
body .price-fetch-btn:active, body .sch-go:active{ transform: scale(.98); background: var(--tint-brand-a); }
body .price-fetch-btn:disabled, body .sch-go:disabled{ opacity: .55; pointer-events: none; }
/* 订单制作底部两个大按钮：同尺寸、同圆角，只有主次配色不同 */
body .copy-btn,
body .import-btn{
height: 40px; width: 100%; margin-top: 10px; padding: 0 18px;
border: 0; border-radius: var(--r-full);
font-size: 14px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
box-shadow: none;
}
body .copy-btn{
background: var(--surface); color: var(--tint-brand-fg);
border: 1px solid var(--tint-brand-line);
}
body .copy-btn:hover:not(:disabled){
background: var(--tint-brand-h); border-color: var(--tint-brand-line-h);
}
body .import-btn{
background: var(--tint-brand);
border: 1px solid var(--tint-brand-line);
color: var(--tint-brand-fg);
}
body .import-btn:hover:not(:disabled){ background: var(--tint-brand-h); border-color: var(--tint-brand-line-h); }
body .copy-btn:disabled, body .import-btn:disabled{ opacity: .55; pointer-events: none; }
/* 大号按钮（登录 / 弹窗确认） */
body .btn-lg{
height: 44px; padding: 0 22px;
border: 0; border-radius: var(--r-full);
font-size: 15px; font-weight: 500;
}
body .confirm-popup .btn-confirm{
height: 40px; border: 1px solid var(--tint-brand-line); border-radius: var(--r-full);
background: var(--tint-brand); color: var(--tint-brand-fg);
font-size: 14px; font-weight: 600;
}
body .confirm-popup .btn-cancel{
height: 40px; border: 0; border-radius: var(--r-full);
background: var(--bg); color: var(--text);
font-size: 14px; font-weight: 500;
}
body .confirm-popup .btn-confirm:hover{ background: var(--tint-brand-h); border-color: var(--tint-brand-line-h); }
body .confirm-popup .btn-cancel:hover{ background: var(--surface-3); }
/* —— 次要动作 —— */
body .custom-ext-btn, /* 订单制作 · 自定义外援 */
body .tc-btn, /* 看板 · 待补区 */
body .st-reset{ /* 经营统计 · 重置 */
height: 32px; padding: 0 14px;
border: 0; border-radius: var(--r-full);
background: var(--bg); color: var(--text);
font-size: 13px; font-weight: 500;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
box-shadow: none;
}
body .custom-ext-btn:hover, body .tc-btn:hover, body .st-reset:hover{ background: var(--surface-3); }
/* —— 小切换 / 小标签按钮 —— */
/* 🔴 默认一律 tinted 浅蓝（2026-10-29 用户定：不要灰底胶囊） */
body .ext-toggle, /* 排班 · 选择外援 */
body .gchip,
body .gchip-edit{ /* 酒店与集团 · 分组胶囊 */
height: 28px; padding: 0 12px;
border: 1px solid transparent; border-radius: var(--r-full);
background: var(--tint-brand); color: var(--tint-brand-fg);
font-size: 12px; font-weight: 500;
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
box-shadow: none;
}
body .ext-toggle:hover, body .gchip:hover, body .gchip-edit:hover{
background: var(--tint-brand-h); color: var(--tint-brand-fg);
border-color: var(--tint-brand-line);
}
/* 排班会员卡里的两个小按钮（去订单制作 / 仅复制）—— 不要按全宽大按钮渲染 */
body .member-card .copy-btn,
body .member-card .copy-btn.go-booking{
height: 34px; width: auto; margin-top: 0; padding: 0 14px;
font-size: 13px; font-weight: 500;
}
body .member-card .copy-btn.go-booking{
background: var(--tint-brand); color: var(--tint-brand-fg);
border: 1px solid var(--tint-brand-line);
}
body .member-card .copy-btn.go-booking:hover{ background: var(--tint-brand-h); border-color: var(--tint-brand-line-h); }
body .member-card .copy-only{
background: var(--surface); color: var(--tint-brand-fg);
border: 1px solid var(--tint-brand-line);
}
/* 文字链接按钮 */
body .panel-link-btn,
body .st-all{
border: 0; background: transparent; color: var(--brand-600);
font-size: 13px; font-weight: 500; padding: 0;
box-shadow: none;
}
body .panel-link-btn:hover, body .st-all:hover{ color: var(--brand-700); text-decoration: underline; }
/* 顶栏右侧四个入口（刷新 / 改单系统 / AI 助手 / 管理）：统一 ghost 胶囊 */
body .front-oe-btn,
body .front-ai-btn,
body .front-admin-btn{
height: 32px; padding: 0 12px;
border: 0; border-radius: var(--r-full);
background: transparent; color: var(--text-2);
font-size: 13px; font-weight: 500;
display: inline-flex; align-items: center; gap: 5px;
box-shadow: none;
}
body .front-oe-btn:hover,
body .front-ai-btn:hover,
body .front-admin-btn:hover{ background: rgba(0,0,0,.05); color: var(--text); }
/* 筛选胶囊（经营统计 .chip / 酒店集团 .cp-chip / 房型 .rm-chip）
—— 2026-10-29 用户定：默认也给 tinted 浅蓝（原来是和页面底色同色的灰，
看着像"没样式"），选中态保持深色实心，全站"选中"就这一种表达。 */
/* 🔴🔴 2026-10-30：label 外壳必须清零。
admin.css 里另有一个同名 `.chip`——那是酒店列表的**灰底小标签**
（background: var(--surface-3); padding:1px 6px; font-size:11px）。
经营统计的筛选胶囊是 ``，
于是 label 吃到灰底小标签、内层 span 吃到浅蓝胶囊，
视觉上就是「浅蓝胶囊外面又套了一圈灰」，用户报「谍影重重」。
两个 .chip 语义冲突，但 admin.css 那个还在别处用（admin_members 的酒店标签），
不能动，所以在这里把外壳压平。 */
body .st-chips .chip{
background: none; padding: 0; border-radius: 0;
font-size: inherit; color: inherit;
}
body .st-chips .chip span,
body .cp-chip{
display: inline-flex; align-items: center; gap: 5px;
height: 30px; padding: 0 12px;
border: 1px solid transparent; border-radius: var(--r-full);
background: var(--tint-brand); color: var(--tint-brand-fg);
font-size: 12px; font-weight: 500; line-height: 1;
cursor: pointer; user-select: none;
box-shadow: none;
}
body .st-chips .chip span:hover,
body .cp-chip:hover{
background: var(--tint-brand-h); color: var(--tint-brand-fg);
border-color: var(--tint-brand-line);
}
/* 选中态用实心品牌蓝：未选中已经是浅蓝了，再淡一档根本看不出选了哪个。
全站只有"选中"允许出现实心蓝块（按钮本体一律 tinted）。 */
body .st-chips .chip input:checked + span,
body .cp-chip.on{
background: var(--brand-600); color: #fff;
font-weight: 600; border: 1px solid var(--brand-600); box-shadow: none;
}
body .gchip.is-on{
background: var(--brand-600); color: #fff;
border-color: var(--brand-600);
}
body .gchip.is-on b{ opacity: .95; }
body .st-chips .chip input:focus-visible + span{
outline: 2px solid var(--brand-600); outline-offset: 1px;
}
/* 查价 · 平台多选：整行可点，和输入框同一套底色和圆角（不做成胶囊 ——
一行里有「携程国际版 代码393099」这种长文本，胶囊化会挤成两行） */
body .pq-plat{
padding: 0 12px;
min-height: 40px;
border: 1px solid transparent;
border-radius: var(--r);
background: var(--bg);
font-size: 13px;
align-items: center;
}
body .pq-plat:hover{ background: var(--surface-3); }
body .pq-plat:has(input:checked){
background: var(--tint-brand);
border-color: var(--tint-brand-line);
}
body .pq-plat input{ accent-color: var(--brand-600); margin-right: 2px; }
body .pq-code{ font-size: 11px; color: var(--text-3); }
/* =============================================================
9. 标签 / 胶囊
============================================================= */
body .tag{
display: inline-flex; align-items: center; gap: 3px;
padding: 3px 8px;
border: 0;
border-radius: var(--r-full);
font-size: 11px; font-weight: 500; line-height: 1.3;
background: rgba(0,0,0,.05);
color: var(--text-2);
}
body .tag-warn{ background: var(--warn-bg); color: var(--warn-text); }
body .tag-ok{ background: var(--ok-bg); color: var(--ok-text); }
body .tag-danger{ background: var(--danger-bg); color: var(--danger-text); }
body .tag-info{ background: var(--info-bg); color: var(--info-text); }
body .tag-gray{ background: rgba(0,0,0,.05); color: var(--text-3); }
body .badge-count{
font-family: ui-monospace, "SF Mono", monospace;
font-size: 11px; font-weight: 600;
background: rgba(0,0,0,.06); color: var(--text-2);
border-radius: var(--r-full); padding: 2px 7px;
}
body .pill{
border-radius: var(--r-full);
font-size: 11px; font-weight: 500;
padding: 2px 7px;
}
body .pill.gray{ background: rgba(0,0,0,.05); color: var(--text-3); }
body .pill.danger{ background: var(--danger-bg); color: var(--danger-text); }
/* =============================================================
10. 表单
============================================================= */
body input[type="text"],
body input[type="number"],
body input[type="date"],
body input[type="password"],
body input[type="search"],
body select,
body textarea,
body .input{
background: var(--bg);
border: 0;
border-radius: var(--r);
box-shadow: none;
font-size: 14px;
color: var(--text);
padding: 0 12px;
height: 40px;
outline: none;
transition: box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
body textarea{ height: auto; padding: 10px 12px; line-height: 1.55; }
/* 🔴 嵌在说明文字里的小数字框（利润页的「手续费率 1.6 %」）
—— 上面的通用规则把所有 input[type=number] 撑成 40px 高、14px 字，
塞进 11.5px 的 pcard-detail 里就变成一大块白方块，把
「手续费 −¥225.60（1.6%）」拆成三行，看着像布局坏了（2026-10-30 发现）。
这里用更高权重收回去，让它老老实实当一行内联小控件。 */
body .pcard-detail .fee-pct-in{
width: 52px; height: 22px; padding: 0 6px;
font-size: 12px; border-radius: 6px;
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--line-2);
display: inline-block; vertical-align: middle;
}
body .pcard-detail .fee-pct-save{
height: 22px; padding: 0 8px; font-size: 11.5px;
vertical-align: middle;
}
body input:focus, body select:focus, body textarea:focus, body .input:focus{
background: var(--surface);
box-shadow: 0 0 0 2px var(--brand-500);
}
body input::placeholder, body textarea::placeholder{ color: var(--text-4); }
body .label, body .form-label, body .flabel{
font-size: 12px; font-weight: 600; color: var(--text-3);
margin-bottom: 5px; display: block;
}
body .form-row{ display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
body .gfield{ display: flex; flex-direction: column; gap: 5px; }
body .gfilter{ display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
body .switch-row{
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 10px 0; border-bottom: .5px solid var(--line);
}
body .tip-box{
background: var(--brand-50); color: var(--brand-700);
border: 0; border-radius: var(--r); padding: 10px 12px;
font-size: 12px; line-height: 1.6;
}
body .gnote{
background: var(--surface-2);
border: 0; border-radius: var(--r);
padding: 10px 12px; font-size: 12px; color: var(--text-2);
}
body .req{ color: var(--danger-text); }
/* =============================================================
11. 弹窗
============================================================= */
body .modal{ background: rgba(0,0,0,.28); }
body .modal-box{
background: var(--surface);
border: 0;
border-radius: 26px;
box-shadow: var(--sh-3);
overflow: hidden;
}
body .modal-head{
padding: 16px 20px 8px;
border-bottom: 0;
}
body .modal-head h3{ font-size: 17px; font-weight: 600; }
body .modal-head .close-x, body .modal-x{
width: 28px; height: 28px; border-radius: var(--r-full);
background: rgba(0,0,0,.05); color: var(--text-2);
border: 0;
}
body .modal-body{ padding: 8px 20px 16px; }
body .modal-foot{
padding: 12px 20px 18px;
border-top: 0;
gap: 8px;
}
/* =============================================================
12. 看板：日头 / 订单卡 / 比价 / 提醒
============================================================= */
body .day-sep{
position: sticky; top: 0; z-index: 3;
display: flex; align-items: center; gap: 8px;
margin: 8px -16px 10px;
padding: 8px 16px 9px;
background: rgba(245,245,247,.94);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: .5px solid var(--line);
}
body .day-sep-line{ display: none; }
body .day-sep-title{
flex: 1 1 auto;
display: inline-flex; align-items: center; gap: 8px;
background: transparent; border: 0; padding: 0;
font-size: 17px; font-weight: 600; color: var(--text);
box-shadow: none;
}
body .day-sep-date{
font-family: ui-monospace, "SF Mono", monospace;
font-size: 17px; line-height: 24px; font-weight: 600;
color: var(--text);
}
body .day-sep-today{
background: var(--brand-600); color: #fff;
font-size: 11px; line-height: 1; font-weight: 600;
padding: 4px 8px; border-radius: var(--r-full);
}
body .day-sep-count{
margin-left: auto;
font-size: 13px; font-weight: 400; color: var(--text-3);
}
body .order-cards{ display: flex; flex-direction: column; gap: 8px; }
body .order-card{
background: var(--surface);
border: 0;
border-radius: var(--r-lg);
box-shadow: none;
padding: 14px;
overflow: hidden;
}
body .order-card::before{ width: 3px; border-radius: 0 2px 2px 0; }
body .oc-where{ gap: 6px; margin-bottom: 4px; }
body .color-dot{ width: 8px; height: 8px; border-radius: var(--r-full); }
body .oc-hotel{ font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--text); }
body .oc-badge-today{
background: var(--brand-600); color: #fff;
font-size: 11px; font-weight: 600;
padding: 4px 7px; border-radius: var(--r-full);
}
body .oc-name{ font-size: 15px; font-weight: 500; }
body .oc-co{ font-size: 13px; color: var(--text-2); }
body .oc-co.empty{ color: var(--text-4); }
body .oc-co-label{ font-size: 11px; color: var(--text-3); }
body .oc-l2{ margin-top: 8px; }
body .oc-dates{
display: flex; align-items: baseline; gap: 5px;
font-family: ui-monospace, "SF Mono", monospace;
font-size: 13px; color: var(--text-2);
}
body .oc-date{ font-weight: 500; color: var(--text); }
body .oc-arrow{ color: var(--text-4); }
body .oc-nights{ color: var(--text-3); font-size: 12px; }
body .oc-confirm{ font-size: 12px; color: var(--text-2); }
body .oc-conf-label{ font-size: 11px; color: var(--text-3); margin-right: 4px; }
body .oc-conf-num{ color: var(--text); }
body .oc-conf-wait{ color: var(--warn-text); }
body .oc-conf-none{ color: var(--text-3); }
body .oc-l3{
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 10px; padding-top: 10px;
border-top: .5px solid var(--line);
}
body .oc-s{
display: inline-flex; align-items: baseline; gap: 3px;
background: var(--bg);
border-radius: var(--r-sm);
padding: 5px 8px;
font-size: 12px; line-height: 1.4; color: var(--text-2);
}
body .oc-s i{ font-style: normal; font-size: 11px; color: var(--text-3); }
body .oc-s b{ font-weight: 600; color: var(--text); }
body .oc-s b.up{ color: var(--ok-text); }
body .oc-s b.down{ color: var(--danger-text); }
body .oc-s em{ font-style: normal; color: var(--warn-text); }
body .oc-s em.ok{ color: var(--ok-text); }
body .oc-s-full{ flex-basis: 100%; }
body .oc-s-profit-split{ background: transparent; padding-left: 0; }
body .ps-line{ font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-3); }
body .price-compare{
margin-top: 8px;
border: 0; border-radius: var(--r);
padding: 9px 11px;
background: var(--bg);
display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
body .price-compare.good{ background: var(--ok-bg); }
body .price-compare.bad{ background: var(--danger-bg); }
body .price-compare.na{ background: var(--bg); }
body .pc-left{ font-size: 12.5px; color: var(--text-2); }
body .pc-left b{ font-family: ui-monospace, monospace; font-size: 13px; color: var(--text); }
body .pc-detail{ font-size: 11px; color: var(--text-3); }
body .pc-diff{ font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
body .price-compare.good .pc-diff{ color: var(--ok-text); }
body .price-compare.bad .pc-diff{ color: var(--danger-text); }
body .pc-fresh{ font-size: 11px; color: var(--text-3); }
body .card-footer{
display: flex; gap: 8px; margin-top: 10px;
border-top: 0; padding-top: 0;
}
body .btn-copy,
body .btn-edit-order{
flex: 1 1 0;
height: 38px; border: 0; border-radius: var(--r-full);
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-size: 13px; font-weight: 500;
background: var(--bg); color: var(--text);
box-shadow: none;
text-decoration: none;
}
body .btn-edit-order{
background: var(--tint-brand); color: var(--tint-brand-fg);
border: 1px solid var(--tint-brand-line);
}
body .btn-copy:hover{ background: var(--surface-3); }
body .btn-edit-order:hover{ background: var(--tint-brand-h); border-color: var(--tint-brand-line-h); }
/* 置顶提醒 */
body .preauth-alert{
background: var(--danger-bg);
border: 0; border-radius: var(--r-lg);
box-shadow: none;
padding: 16px; margin-bottom: 12px;
}
body .pa-icon{ display: none; }
body .pa-title{ font-size: 15px; font-weight: 600; color: var(--danger-text); }
body .pa-title b{
font-family: ui-monospace, monospace; font-size: 22px; font-weight: 600;
margin: 0 4px; vertical-align: -2px;
}
body .pa-desc{ font-size: 13px; line-height: 1.55; color: var(--danger-text); opacity: .82; }
body .pa-list{ margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
body .pa-item{
background: rgba(255,255,255,.72);
border: 0; border-radius: var(--r);
padding: 9px 11px; font-size: 13px;
display: flex; align-items: center; gap: 8px;
text-decoration: none; color: var(--text);
}
body .pa-id{ font-family: ui-monospace, monospace; color: var(--text-3); }
body .pa-name{ font-weight: 600; }
body .pa-hotel{ color: var(--text-2); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .pa-room{ color: var(--text-3); font-size: 12px; }
body .pa-go{ color: var(--danger-text); font-weight: 600; }
/* 经营数据 */
body .biz-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body .biz-item{
background: var(--bg); border: 0; border-radius: var(--r-lg);
padding: 14px; display: flex; flex-direction: column; gap: 2px;
text-decoration: none; color: inherit;
}
body .biz-label{ font-size: 13px; font-weight: 500; color: var(--text-2); }
body .biz-value{ font-family: ui-monospace, monospace; font-size: 22px; font-weight: 600; color: var(--text); }
body .biz-sub{ font-size: 11px; color: var(--text-3); }
body .divider{ height: .5px; background: var(--line); margin: 12px 0; border: 0; }
body .bar-track{ background: rgba(0,0,0,.05); border-radius: var(--r-full); }
body .bar-fill{ background: var(--brand-600); border-radius: var(--r-full); }
body .bar-name{ font-size: 12px; color: var(--text-2); }
body .bar-val{ font-size: 11px; color: var(--text-3); }
/* 每日趋势 */
body .trend{ display: flex; gap: 8px; }
body .trend-day{
flex: 1 1 0;
display: flex; flex-direction: column; align-items: center; gap: 4px;
background: var(--bg); border-radius: var(--r);
padding: 8px 4px; text-decoration: none; color: inherit;
}
body .trend-day.today{ background: var(--brand-600); color: #fff; }
body .td-num{ font-family: ui-monospace, monospace; font-size: 13px; font-weight: 600; }
body .td-bar{ background: #D2D2D7; border-radius: 4px; }
body .trend-day.today .td-bar{ background: #fff; }
body .td-label, body .td-week{ font-size: 11px; color: var(--text-3); }
body .trend-day.today .td-label,
body .trend-day.today .td-week{ color: rgba(255,255,255,.8); }
/* 筛选 */
body .filter-toggle{
display: inline-flex; align-items: center; gap: 6px;
height: 32px; padding: 0 14px;
background: var(--surface); border: 0; border-radius: var(--r-full);
box-shadow: inset 0 0 0 1px var(--line);
font-size: 13px; font-weight: 500; color: var(--text);
}
body .filter-form{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
body .filter-form input, body .filter-form select{ height: 40px; }
body .filter-form input[type="text"]{ flex: 1 1 180px; }
body .day-view-tip{
margin-top: 10px; padding: 10px 12px;
background: var(--brand-50); color: var(--brand-700);
border-radius: var(--r); font-size: 13px;
}
/* =============================================================
13. 排班：会员卡
============================================================= */
body .member-card{
background: var(--surface);
border: 0; border-radius: var(--r-lg);
box-shadow: none;
padding: 14px;
margin-bottom: 8px;
}
body .member-card.conflict{ background: #FBFAFA; }
body .member-name{ font-size: 17px; font-weight: 600; }
body .team-badge{
font-size: 11px; font-weight: 600;
border-radius: 6px; padding: 3px 7px;
border: 0;
}
body .status-tag{
font-size: 11px; font-weight: 600;
border-radius: var(--r-full); padding: 4px 8px;
border: 0;
}
body .status-tag.available{ background: var(--ok-bg); color: var(--ok-text); }
body .status-tag.conflict{ background: var(--danger-bg); color: var(--danger-text); }
body .status-tag.hotel-restrict{ background: var(--warn-bg); color: var(--warn-text); }
body .info-item{
background: var(--bg); border: 0; border-radius: var(--r);
padding: 8px 10px;
}
body .info-item .label{ font-size: 11px; color: var(--text-3); }
body .info-item .value{ font-size: 13px; font-weight: 500; font-family: ui-monospace, monospace; }
body .info-item .value.empty{ color: var(--text-4); font-weight: 400; }
body .info-item .value.now{ color: var(--brand-600); font-weight: 600; }
body .analysis-ok{ background: var(--ok-bg); color: var(--ok-text); border: 0; border-radius: var(--r); padding: 8px 10px; font-size: 12px; }
body .analysis-warn{ background: var(--danger-bg); color: var(--danger-text); border: 0; border-radius: var(--r); padding: 8px 10px; font-size: 12px; }
body .sch-select{
height: 40px; border-radius: var(--r);
background: var(--bg); border: 0; box-shadow: none;
font-size: 14px;
}
/* .sch-go 统一由第 8b 节管（与取价按钮同高 40） */
body .sch-label{ font-size: 12px; font-weight: 600; color: var(--text-3); }
body .sch-label .level{
background: var(--brand-50); color: var(--brand-700);
border-radius: 6px; padding: 2px 6px; font-size: 11px;
}
body .date-display{
height: 44px; border-radius: var(--r);
background: var(--bg); border: 0; box-shadow: none;
font-size: 15px;
}
/* 旧的 .copy-btn 单条规则已删 —— 统一由第 8b 节管（订单制作是全宽 40 大按钮，
排班会员卡里是 34 小按钮，靠 .member-card 前缀区分）。 */
body .go-booking{
height: 34px; border: 1px solid var(--tint-brand-line); border-radius: var(--r-full);
background: var(--tint-brand); color: var(--tint-brand-fg);
font-size: 13px; font-weight: 500;
}
body .go-booking:hover{ background: var(--tint-brand-h); border-color: var(--tint-brand-line-h); }
/* =============================================================
14. 订单制作：分步
============================================================= */
body .section-title,
body .bk-step-head,
body .is-step-head{
font-size: 15px; font-weight: 600; color: var(--text);
border-bottom: 0;
padding: 12px 0 8px;
}
body .section-title .badge,
body .bk-step-head .badge,
body .is-step-head .badge{
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: var(--r-full);
background: var(--brand-50); color: var(--brand-700);
font-size: 11px; font-weight: 700; margin-right: 6px;
}
body .radio-chip{
height: 34px; border-radius: var(--r-full);
background: var(--bg); border: 0; box-shadow: none;
font-size: 13px; color: var(--text-2);
padding: 0 14px;
}
body .radio-chip.on,
body .radio-chip.is-on{
background: var(--nav-active-bg); color: var(--nav-active-fg);
font-weight: 600;
}
body .bonus-chip{
border-radius: var(--r-full); background: var(--bg); border: 0;
font-size: 12px; padding: 5px 10px;
}
body .preview-box{
background: var(--bg); border: 0; border-radius: var(--r-lg);
padding: 14px; font-size: 13px; line-height: 1.7;
color: var(--text-2);
font-family: ui-monospace, "SF Mono", monospace;
}
/* =============================================================
15. 详情 / 改单 / AI
============================================================= */
body .detail-item{ background: var(--bg); border: 0; border-radius: var(--r); padding: 10px 12px; }
body .detail-label{ font-size: 11px; color: var(--text-3); }
body .detail-value{ font-size: 15px; font-weight: 500; color: var(--text); }
body .edit-row{
display: flex; align-items: center; gap: 10px;
padding: 10px 0;
border-bottom: .5px solid var(--line);
}
/* 🔴 2026-10-30 用户报「欢迎礼遇积分这个框都没了」——
这一行是 label + input + .hint 三个子元素，.hint 没吃 flex 规则，
按内容自然宽度把 input 挤到只剩 20px（截图里只露出半个「填」字）。
修法：**只给带 .hint 的那一行**换网格布局（label | 控件 两列，
hint 跨两列单独一行）。两个坑：
⚠️ 一开始写成 `body .edit-row{flex-wrap:wrap}`，结果 26 个字段
全变成「label 一行、控件一行」—— 网格格才 228px 宽、label 占 94px，
控件 flex-basis 是内容宽度，放不下就整体换行，整张表单散了。
⚠️ 也不能用 :has + flex-wrap：input 的 basis 是内容宽度
（placeholder「留空=按品牌政策自动算」比剩余空间还宽），照样换行。
网格不猜宽度，给定列宽最稳。 */
body .edit-row:has(> .hint){
display: grid;
grid-template-columns: minmax(94px, auto) 1fr;
align-items: center;
gap: 4px 10px;
}
/* 说明文字跨满整行，永远在控件下面 */
body .edit-row > .hint{
grid-column: 1 / -1; min-width: 0; margin-top: 4px;
}
/* 只读的手续费（2026-10-30）：不是输入框，但保持和右侧控件同一条左边界，
否则整列看起来台阶一样错开 */
body .edit-row > .fee-auto{
flex: 1 1 auto; min-width: 0;
font-size: 13px; color: var(--text-2);
font-variant-numeric: tabular-nums;
}
body .edit-row .lbl{ font-size: 13px; color: var(--text-2); }
/* 改单表单的 flex 修正（2026-10-29 用户报「4 个价格顺序乱了」）
------------------------------------------------------------
本文件把 .edit-row 改成横向 flex（label 左 / 控件右），
但 edit.css 里控件是 `width:100%` —— 两者打架的结果是
**控件把 label 挤到几乎没有宽度**，中文只能逐字换行：
实测 label 宽 31px、高 39px（两行），「价格来源」被折成「价格来 / 源」。
26 个字段全都如此，所以整张表单看着参差。
修法：label 定宽不换行，控件吃剩余宽度（flex:1），
这样同一列里所有输入框左边界严格对齐。
⚠️ .edit-row 目前只用在 order_detail.html 一个模板（26 处），
改这里不会波及其它页面。 */
body .edit-row > label{
flex: 0 0 auto;
min-width: 94px;
white-space: nowrap;
}
body .edit-row > input,
body .edit-row > select,
body .edit-row > textarea{
flex: 1 1 auto;
width: auto;
min-width: 0;
}
/* 只读块 / 单选组这类非控件子元素，同样吃剩余宽度 */
body .edit-row > .tier-readonly,
body .edit-row > .radio-row{
flex: 1 1 auto;
min-width: 0;
}
/* 窄屏（真机）改回「label 在上、控件在下」，
两列格子本身就很窄，横排一定挤 */
@media (max-width: 620px){
body .edit-row{ display: block; }
body .edit-row > label{
display: block; min-width: 0; white-space: normal;
margin-bottom: 5px;
}
body .edit-row > input,
body .edit-row > select,
body .edit-row > textarea{ width: 100%; }
}
body .oe-wrap .card{ background: var(--surface); }
body .oe-inputrow textarea{
border-radius: var(--r); background: var(--bg); border: 0;
font-size: 15px; line-height: 1.6; padding: 12px;
}
body .oe-tip{ font-size: 12px; color: var(--text-3); }
body .ai-wrap, body .chat-box{ background: transparent; }
body .msg-bubble, body .bubble{
border-radius: var(--r-lg);
font-size: 15px; line-height: 1.5;
}
body .chat-send, body .ai-send{
border-radius: var(--r-full);
background: var(--tint-brand); color: var(--tint-brand-fg);
border: 1px solid var(--tint-brand-line);
}
body .chat-send:hover, body .ai-send:hover{
background: var(--tint-brand-h); border-color: var(--tint-brand-line-h);
}
/* =============================================================
16. 通用：空状态 / 通知 / 卡片小件
============================================================= */
body .empty{
background: var(--surface);
border: 0; border-radius: var(--r-lg);
box-shadow: none;
padding: 32px 16px; text-align: center;
}
body .empty p{ font-size: 15px; color: var(--text-2); }
body .empty-s{ font-size: 13px; color: var(--text-4); }
body .notice{
border: 0; border-radius: var(--r-lg);
padding: 14px 16px; font-size: 13px; line-height: 1.55;
background: var(--brand-50); color: var(--brand-700);
box-shadow: none;
}
body .notice-warn{ background: var(--warn-bg); color: var(--warn-text); }
body .notice-info{ background: var(--info-bg); color: var(--info-text); }
body .notice-danger{ background: var(--danger-bg); color: var(--danger-text); }
body .st-card{
background: var(--bg); border: 0; border-radius: var(--r-lg);
padding: 14px;
}
body .st-card .v{
font-family: ui-monospace, monospace; font-size: 22px; font-weight: 600;
}
/* 滚动条：细、淡（桌面端） */
body ::-webkit-scrollbar{ width: 8px; height: 8px; }
body ::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.16); border-radius: var(--r-full); }
body ::-webkit-scrollbar-track{ background: transparent; }
/* =============================================================
18. 线性图标（_icons.html 产出的