/**
* Material Design 家族 · 全局配色主题
* 通过 切换主色
* 配合 js/theme-boot.js 在首屏前写入 data-theme，避免刷新闪色
*
* 视觉定位：纸张隐喻 + 层级阴影；白/浅灰表面 + 高饱和主色；
* 圆角克制、阴影柔和，适合管理后台与跨端一致性体验。
*/
:root {
/* —— Material 表面与文字层级 —— */
--md-bg: #f5f5f5;
--md-surface: #ffffff;
--md-surface-2: #fafafa;
--md-outline: rgba(0, 0, 0, 0.12);
--md-outline-strong: rgba(0, 0, 0, 0.23);
--md-on-surface: rgba(0, 0, 0, 0.87);
--md-on-surface-secondary: rgba(0, 0, 0, 0.60);
--md-on-surface-disabled: rgba(0, 0, 0, 0.38);
--md-on-primary: #ffffff;
/* —— Elevation（纸片高度） —— */
--md-elevation-0: none;
--md-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
--md-elevation-2: 0 3px 6px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.10);
--md-elevation-3: 0 6px 12px rgba(0, 0, 0, 0.14), 0 3px 6px rgba(0, 0, 0, 0.10);
--md-elevation-4: 0 10px 20px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.08);
--md-elevation-6: 0 14px 28px rgba(0, 0, 0, 0.16), 0 5px 10px rgba(0, 0, 0, 0.08);
--md-elevation-8: 0 18px 36px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.10);
/* —— 形状 —— */
--md-radius-sm: 4px;
--md-radius: 8px;
--md-radius-lg: 12px;
--md-radius-pill: 999px;
/* —— 功能色 —— */
--md-error: #b00020;
--md-error-bg: #fdecea;
--md-success: #2e7d32;
--md-success-bg: #e8f5e9;
--md-warning: #ed6c02;
--md-warning-bg: #fff4e5;
--md-info: #0288d1;
--md-info-bg: #e1f5fe;
/* —— 动效（Material 缓动） —— */
--md-ease: cubic-bezier(0.4, 0, 0.2, 1);
--md-ease-enter: cubic-bezier(0, 0, 0.2, 1);
--md-ease-exit: cubic-bezier(0.4, 0, 1, 1);
--md-duration: 200ms;
/* 兼容旧变量名 */
--radius: var(--md-radius);
/* 后台顶栏默认：海湾蓝（与主题主色可分离） */
--admin-bar: #1e88e5;
--admin-bar-rgb: 30, 136, 229;
}
/* ========== 主色预设（主色 / 辅色结构） ========== */
/* 经典粉 · Material Pink（后台顶栏固定海湾蓝） */
:root,
html[data-theme="pink"] {
--brand: #e91e63;
--brand-soft: #f06292;
--brand-light: #f48fb1;
--brand-mid: #ec407a;
--brand-alt: #ff80ab;
--brand-deep: #c2185b;
--brand-secondary: #00bcd4;
--brand-bg: #fce4ec;
--brand-bg-soft: #fff0f5;
--brand-bg-page: #f5f5f5;
--brand-border: #f8bbd0;
--brand-border-soft: #fce4ec;
--brand-border-light: #fce4ec;
--brand-chip: #f8bbd0;
--brand-notice: #fff8fa;
--brand-rgb: 233, 30, 99;
--brand-rgb-soft: 240, 98, 146;
--brand-gradient: linear-gradient(135deg, #f06292 0%, #e91e63 100%);
--brand-gradient-alt: linear-gradient(135deg, #ec407a 0%, #ff80ab 100%);
--admin-bar: #1e88e5;
--admin-bar-rgb: 30, 136, 229;
}
/* 海湾蓝 · Material Blue */
html[data-theme="ocean"] {
--brand: #1e88e5;
--brand-soft: #42a5f5;
--brand-light: #64b5f6;
--brand-mid: #2196f3;
--brand-alt: #29b6f6;
--brand-deep: #1565c0;
--brand-secondary: #00897b;
--brand-bg: #e3f2fd;
--brand-bg-soft: #f0f7ff;
--brand-bg-page: #f5f5f5;
--brand-border: #90caf9;
--brand-border-soft: #bbdefb;
--brand-border-light: #e3f2fd;
--brand-chip: #bbdefb;
--brand-notice: #f7fbff;
--brand-rgb: 30, 136, 229;
--brand-rgb-soft: 66, 165, 245;
--brand-gradient: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%);
--brand-gradient-alt: linear-gradient(135deg, #2196f3 0%, #29b6f6 100%);
--admin-bar: #1e88e5;
--admin-bar-rgb: 30, 136, 229;
}
/* 清新绿 · Material Teal */
html[data-theme="mint"] {
--brand: #00897b;
--brand-soft: #26a69a;
--brand-light: #4db6ac;
--brand-mid: #009688;
--brand-alt: #80cbc4;
--brand-deep: #00695c;
--brand-secondary: #5c6bc0;
--brand-bg: #e0f2f1;
--brand-bg-soft: #f0faf9;
--brand-bg-page: #f5f5f5;
--brand-border: #80cbc4;
--brand-border-soft: #b2dfdb;
--brand-border-light: #e0f2f1;
--brand-chip: #b2dfdb;
--brand-notice: #f6fcfb;
--brand-rgb: 0, 137, 123;
--brand-rgb-soft: 38, 166, 154;
--brand-gradient: linear-gradient(135deg, #26a69a 0%, #00897b 100%);
--brand-gradient-alt: linear-gradient(135deg, #009688 0%, #4db6ac 100%);
--admin-bar: #00897b;
--admin-bar-rgb: 0, 137, 123;
}
/* 深橙 · Material Deep Orange（后台顶栏固定海湾蓝） */
html[data-theme="sunset"] {
--brand: #f4511e;
--brand-soft: #ff7043;
--brand-light: #ff8a65;
--brand-mid: #ff5722;
--brand-alt: #ffab91;
--brand-deep: #d84315;
--brand-secondary: #5c6bc0;
--brand-bg: #fbe9e7;
--brand-bg-soft: #fff3f0;
--brand-bg-page: #f5f5f5;
--brand-border: #ffab91;
--brand-border-soft: #ffccbc;
--brand-border-light: #fbe9e7;
--brand-chip: #ffccbc;
--brand-notice: #fffaf8;
--brand-rgb: 244, 81, 30;
--brand-rgb-soft: 255, 112, 67;
--brand-gradient: linear-gradient(135deg, #ff7043 0%, #f4511e 100%);
--brand-gradient-alt: linear-gradient(135deg, #ff5722 0%, #ff8a65 100%);
--admin-bar: #1e88e5;
--admin-bar-rgb: 30, 136, 229;
}
/* 石墨灰 · Material Blue Grey */
html[data-theme="slate"] {
--brand: #455a64;
--brand-soft: #607d8b;
--brand-light: #78909c;
--brand-mid: #546e7a;
--brand-alt: #90a4ae;
--brand-deep: #37474f;
--brand-secondary: #00897b;
--brand-bg: #eceff1;
--brand-bg-soft: #f5f7f8;
--brand-bg-page: #f5f5f5;
--brand-border: #b0bec5;
--brand-border-soft: #cfd8dc;
--brand-border-light: #eceff1;
--brand-chip: #cfd8dc;
--brand-notice: #fafbfc;
--brand-rgb: 69, 90, 100;
--brand-rgb-soft: 96, 125, 139;
--brand-gradient: linear-gradient(135deg, #607d8b 0%, #455a64 100%);
--brand-gradient-alt: linear-gradient(135deg, #546e7a 0%, #78909c 100%);
--admin-bar: #455a64;
--admin-bar-rgb: 69, 90, 100;
}
/* ========== 手机端通用适配 ========== */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="email"],
textarea,
select {
font-size: 16px;
}
/* 顾客端：订单号校验确认（页面居中） */
.order-format-overlay {
position: fixed;
inset: 0;
z-index: 4000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(4px);
}
.order-format-overlay[hidden] {
display: none !important;
}
.order-format-card {
width: 100%;
max-width: 360px;
background: #fff;
border-radius: 16px;
padding: 24px 20px 18px;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
text-align: center;
}
.order-format-icon {
width: 48px;
height: 48px;
margin: 0 auto 12px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(var(--brand-rgb, 240, 98, 146), 0.12);
color: var(--brand, #e91e63);
font-size: 22px;
font-weight: 700;
}
.order-format-card h3 {
margin: 0 0 10px;
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
line-height: 1.35;
}
.order-format-no {
margin: 0 0 12px;
padding: 8px 10px;
border-radius: 8px;
background: #f8fafc;
color: #334155;
font-size: 14px;
font-weight: 600;
word-break: break-all;
line-height: 1.4;
}
.order-format-card p {
margin: 0;
font-size: 14px;
color: #64748b;
line-height: 1.65;
text-align: left;
}
.order-format-actions {
display: flex;
gap: 10px;
margin-top: 18px;
}
.order-format-btn {
flex: 1;
min-height: 42px;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.order-format-btn.ghost {
background: #f1f5f9;
color: #475569;
}
.order-format-btn.primary {
background: var(--brand-gradient, linear-gradient(135deg, #f06292, #e91e63));
color: #fff;
}
.order-format-btn.full {
flex: 1 1 100%;
}