/* 商户交易撮合系统 - 移动端H5样式 */

/* ============================================================================
   全局主题色变量定义
   ============================================================================ */
:root {
  /* 蓝色主题 - 统一定义 */
  --color-primary: #2563eb;        /* 主题蓝 blue-600 */
  --color-primary-hover: #1d4ed8;  /* 深蓝 blue-700 - hover/active状态 */
}

/* ============================================================================
   首页缺失的Tailwind CSS样式 - 补充样式
   ============================================================================ */

/* Tailwind CSS自定义属性（CSS变量） */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}

/* 布局相关 */
.inset-0 { inset: 0px; }
.top-0 { top: 0px; }
.left-0 { left: 0px; }
.right-0 { right: 0px; }
.bottom-0 { bottom: 0px; }
.top-1 { top: 4px; }
.left-1 { left: 4px; }
.right-1 { right: 4px; }
.bottom-1 { bottom: 4px; }
.top-4 { top: 16px; }
.left-4 { left: 16px; }
.bottom-3 { bottom: 0.75rem; }

/* Grid布局 */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 尺寸 */
.h-40 { height: 10rem; }

/* 边框 */
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-emerald-100 { --tw-border-opacity: 1; border-color: rgb(209 250 229 / var(--tw-border-opacity, 1)); }

/* 背景色 */
.bg-amber-100 { --tw-bg-opacity: 1; background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1)); }
.bg-green-100 { --tw-bg-opacity: 1; background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); }
.bg-green-50 { --tw-bg-opacity: 1; background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1)); }
.bg-purple-100 { --tw-bg-opacity: 1; background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1)); }
.bg-rose-100 { --tw-bg-opacity: 1; background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1)); }
.bg-sky-100 { --tw-bg-opacity: 1; background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1)); }

/* 半透明背景 */
.bg-white\/20 { background-color: rgb(255 255 255 / 0.2); }

/* 渐变背景 */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.from-black\/40 {
  --tw-gradient-from: rgb(0 0 0 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-600 {
  --tw-gradient-from: var(--color-primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-700 {
  --tw-gradient-from: var(--color-primary-hover) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-purple-600 {
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}
.to-purple-700 {
  --tw-gradient-to: #7c3aed var(--tw-gradient-to-position);
}

/* 字体大小 - 任意值语法 */
.text-\[11px\] { font-size: 11px; }

/* 文本颜色 */
.text-purple-600 { --tw-text-opacity: 1; color: rgb(147 51 234 / var(--tw-text-opacity, 1)); }

/* 文本颜色 - 透明度修饰符 */
.text-emerald-600\/70 { color: rgb(5 150 105 / 0.7); }
.text-sky-600\/70 { color: rgb(2 132 199 / 0.7); }

/* 透明度 */
.opacity-90 { opacity: 0.9; }

/* 背景效果 */
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

/* Hover状态 */
.hover\:bg-blue-50:hover { --tw-bg-opacity: 1; background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); }
.hover\:bg-white\/30:hover { background-color: rgb(255 255 255 / 0.3); }
.hover\:text-slate-800:hover { --tw-text-opacity: 1; color: rgb(30 41 59 / var(--tw-text-opacity, 1)); }
.hover\:from-blue-700:hover {
  --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-purple-700:hover {
  --tw-gradient-to: #7c3aed var(--tw-gradient-to-position);
}
.hover\:scale-105:hover {
  transform: scale(1.05);
}

/* 基础样式 */
html, body { 
    height: 100%; 
    overflow-x: hidden;
}

body { 
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; 
    font-size: 14px;
}

/* 容器样式 - 真实H5页面 */
.container { 
    max-width: 448px; 
    margin: 0 auto; 
    min-height: 100vh;
    background: white;
}

.tab-active { 
    color: var(--color-primary); 
}

.tab-inactive { 
    color: #64748b; 
}

/* 底部导航样式优化 */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 50;
}

/* 页面内容区域 */
.page-content { 
    padding-bottom: 80px; /* 避免底部导航遮挡 */
}

/* 表单控件样式 */
.form-input {
    width: 100%;
    padding: 8px 12px;
    padding-right: 3rem !important; /* 为密码眼睛按钮预留空间 */
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background-color: white;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
    height: 45px !important; /* 统一高度 */
    box-sizing: border-box !important;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-label {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
    color: #475569;
}

/* 按钮样式 */
.btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-primary {
    background-color: #0ea5e9;
    color: white;
}

.btn-primary:hover {
    background-color: #0284c7;
}

.btn-secondary {
    background-color: #f1f5f9;
    color: #475569;
}

.btn-secondary:hover {
    background-color: #e2e8f0;
}

/* 卡片样式 */
.card {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background-color: white;
}

.card-header {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* 状态标签样式 - 已迁移到订单状态样式部分 */

.status-pending {
    background-color: #fef3c7;
    color: #d97706;
}

.status-success {
    background-color: #dcfce7;
    color: #16a34a;
}

.status-error {
    background-color: #fecaca;
    color: #dc2626;
}

/* 统计卡片样式 */
.metric-card {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid;
}

.metric-card.indigo {
    background-color: #eef2ff;
    border-color: #c7d2fe;
}

.metric-card.blue {
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

.metric-card.emerald {
    background-color: #ecfdf5;
    border-color: #a7f3d0;
}

.metric-card.sky {
    background-color: #f0f9ff;
    border-color: #7dd3fc;
}

.metric-card.amber {
    background-color: #fffbeb;
    border-color: #fcd34d;
}

.metric-card.rose {
    background-color: #fff1f2;
    border-color: #fda4af;
}

/* 文件上传样式 */
.file-input {
    font-size: 12px;
}

.file-input::-webkit-file-upload-button {
    margin-right: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 0;
    font-size: 12px;
    font-weight: 600;
    background-color: #f0f9ff;
    color: #0369a1;
    cursor: pointer;
}

.file-input::-webkit-file-upload-button:hover {
    background-color: #e0f2fe;
}

/* 开关按钮样式 */
.toggle-switch {
    width: 40px;
    height: 20px;
    background-color: #cbd5e1;
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-switch.checked {
    background-color: #0ea5e9;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    background-color: white;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    transition: all 0.2s;
}

.toggle-switch.checked::after {
    transform: translateX(20px);
}

/* Tab 样式 */
.tab-button {
    padding: 8px 12px;
    font-size: 14px;
    background-color: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-button.active {
    background-color: #f0f9ff;
    color: #0369a1;
}

/* 响应式调整 */
@media (max-width: 393px) {
    .container {
        width: 100%;
        padding: 0 16px;
    }
}

/* 列表项样式 */
.list-item {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 8px;
}

.list-item:hover {
    background-color: #f8fafc;
}

/* 网格布局辅助 */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* 间距辅助类 */
.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 30px; }
.mb-1\.5 { margin-bottom: 6px; }

.mt-0\.5 { margin-top: 2px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }

.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }

/* 行高 */
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

.pa-1{ padding: 4px; }

.p-1 {padding: 4px;}
.p-2 {padding: 8px;}
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }


.pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }
.pt-3 { padding-top: 12px; }
.pt-4 { padding-top: 16px; }
.pt-5 { padding-top: 20px; }
.pt-6 { padding-top: 24px; }

.px-1 { padding-left: 4px; padding-right: 4px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 20px !important; padding-right: 20px !important; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px !important; padding-bottom: 24px !important; }
.py-top-125 { padding-top: 125px !important; }


.pb-6 { padding-bottom: 24px; }

/* 文本样式 */
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-base { font-size: 16px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 20px; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-center { text-align: center; }
.text-right { text-align: right; }

/* 颜色 */
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-900 { color: #0f172a; }
.text-sky-600 { color: #0284c7; }
.text-sky-700 { color: #0369a1; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.text-rose-600 { color: #dc2626; }
.text-amber-600 { color: #d97706; }
.text-indigo-600 { color: #4f46e5; }
.text-white { color: #ffffff; }
.text-orange-700 { color: #c2410c; }
.text-green-700 { color: #15803d; }
.text-blue-700 { color: var(--color-primary-hover); }
.text-red-700 { color: #b91c1c; }
.text-gray-700 { color: #374151; }
.text-orange-600 { color: #ea580c; }
.text-blue-600 { color: var(--color-primary); }
.text-green-600 { color: #16a34a; }
.text-red-600 { color: #dc2626; }
.text-gray-600 { color: #4b5563; }

/* 背景色 */
.bg-white { background-color: white; }
.bg-slate-50 { background-color: #f8fafc; }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-slate-300 { background-color: #cbd5e1; }
.bg-gray-400 { background-color: #9ca3af; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-sky-50 { background-color: #f0f9ff; }
.bg-sky-600 { background-color: #0284c7; }
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-emerald-500 { background-color: #10b981; }
.bg-indigo-50 { background-color: #eef2ff; }
.bg-amber-50 { background-color: #fffbeb; }
.bg-rose-50 { background-color: #fff1f2; }
.bg-orange-100 { background-color: #fed7aa; }
.bg-green-100 { background-color: #dcfce7; }
.bg-red-100 { background-color: #fee2e2; }
.bg-red-500 { background-color: #ef4444; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-blue-100\/30 { background-color: rgb(219 234 254 / 0.3); }
.bg-purple-100\/20 { background-color: rgb(243 232 255 / 0.2); }
.bg-blue-200\/40 { background-color: rgb(191 219 254 / 0.4); }
.bg-purple-200\/30 { background-color: rgb(233 213 255 / 0.3); }

/* 边框 */
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.border-blue-500 { border-color: var(--color-primary); }
.border-sky-100 { border-color: #e0f2fe; }
.border-emerald-500 { border-color: #10b981; }
.border-white { border-color: #ffffff; }
.border-orange-200 { border-color: #fed7aa; }
.border-green-200 { border-color: #bbf7d0; }
.border-blue-200 { border-color: #bfdbfe; }
.border-red-200 { border-color: #fecaca; }
.border-gray-200 { border-color: #e5e7eb; }

.rounded-md { border-radius: 4px; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }

/* 过渡动画 */
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.transition-all { transition: all 0.2s ease; }
.transform { transform: var(--tw-transform); }

/* Hover效果 */
.hover\:bg-slate-50:hover { background-color: #f8fafc; }
.hover\:bg-blue-100:hover { background-color: #dbeafe; }
.rounded-2xl { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }

/* Ring */
.ring-2 { box-shadow: 0 0 0 2px var(--tw-ring-color); }
.ring-slate-100 { --tw-ring-color: #f1f5f9; }

/* Shadow */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-bottom { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

/* Profile Container */
.profile-container { position: relative; min-height: 100vh; }
.profile-main-content { padding-top: 140px !important; padding-bottom: 10px !important; }

/* App main layout: account for bottom nav (h-16 ~= 64px + 1px border) */
.app-main {
    min-height: calc(100vh - 65px);
    padding-bottom: 65px; /* avoid bottom nav overlap */
}

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px !important; }
.gap-8 { gap: 32px; }

/* Min Width */
.min-w-0 { min-width: 0px; }

/* Max Width */
.max-w-sm { max-width: 24rem; } /* 384px */
.max-w-md { max-width: 28rem; } /* 448px */
.max-w-lg { max-width: 32rem; } /* 512px */
.max-w-xl { max-width: 36rem; } /* 576px */

/* Margin */
.mx-auto { margin-left: auto; margin-right: auto; }
.gap-15 { gap: 30px; }

/* 宽度高度 */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-1 { width: 4px; }
.h-1 { height: 4px; }
.w-1-5 { width: 6px; }
.h-1-5 { height: 6px; }
.w-2 { width: 8px; }
.h-2 { height: 8px; }
.w-0\.5 { width: 2px; }
.h-0\.5 { height: 2px; }
.w-8 { width: 32px; }
.h-8 { height: 32px; }
.w-10 { width: 40px; }
.h-10 { height: 40px; }
.w-12 { width: 48px; }
.h-12 { height: 48px; }
.w-14 { width: 56px; }
.h-14 { height: 56px; }
.w-16 { width: 64px; }
.h-16 { height: 64px; }
.w-20 {width: 80px;}
.w-24 { width: 96px; }
.h-24 { height: 96px; }
.w-32 { width: 128px; }
.h-32 { height: 128px; }
.w-36 { width: 144px; }
.h-36 { height: 144px; }
.w-40 { width: 160px; }

/* 隐藏显示 */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* 光标样式 */
.cursor-not-allowed { cursor: not-allowed; }

/* 溢出 */
.overflow-hidden { overflow: hidden; }

/* 文本处理相关样式 */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.text-ellipsis {
  text-overflow: ellipsis;
}
.overflow-y-auto { overflow-y: auto; }

/* 定位 */
.relative { position: relative; }
.absolute { position: absolute; }

/* 堆叠顺序（z-index） - 统一管理 */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
.z-500 { z-index: 500; }
.z-1000 { z-index: 1000; }
.z-9999 { z-index: 9999; }

/* 图片 */
.object-cover { object-fit: cover; }

/* Vue相关样式 */
[v-cloak] {
  display: none !important;
}

/* 骨架屏 - 加载占位符 */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

.skeleton-text {
  height: 16px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-title {
  height: 20px;
  width: 60%;
  border-radius: 4px;
  margin-bottom: 12px;
}

.skeleton-button {
  height: 40px;
  border-radius: 8px;
  margin-top: 16px;
}

.skeleton-input {
  height: 44px;
  border-radius: 8px;
  margin-bottom: 16px;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 订单页面相关样式 */
.tab-button {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.tab-button:hover {
  color: #111827;
  border-bottom-color: #d1d5db;
}

.tab-button.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* 筛选面板动画 */
.filter-panel-enter-active, .filter-panel-leave-active {
  transition: all 0.3s ease;
}

.filter-panel-enter-from, .filter-panel-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

/* 订单状态样式 */
.status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
}

.status-pending {
  background-color: #fef3c7;
  color: #92400e;
}

.status-success {
  background-color: #d1fae5;
  color: #065f46;
}

.status-warning {
  background-color: #fed7aa;
  color: #9a3412;
}

.status-error {
  background-color: #fecaca;
  color: #991b1b;
}

.status-info {
  background-color: #dbeafe;
  color: #1e40af;
}

/* 文件输入样式 */
.file-input {
  display: block;
  width: 100%;
  font-size: 0.75rem;
  color: #6b7280;
}

.file-input::-webkit-file-upload-button {
  margin-right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 0;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: #eff6ff;
  color: #1d4ed8;
  cursor: pointer;
}

.file-input::-webkit-file-upload-button:hover {
  background-color: #dbeafe;
}

/* 订单列表容器样式 */
.orders-container {
  height: calc(100vh - 240px); /* 减去header、title、tabs等高度 */
  min-height: 400px;
  max-height: 600px;
  position: relative;
  background: #ffffff;
  overflow: hidden;
}

.orders-empty-state {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
}

.orders-empty-state .text-gray-500 {
  color: #9ca3af !important;
}

.orders-content {
  height: 100%;
  overflow-y: auto;
  padding: 0;
}

.orders-content .space-y-2,
.orders-content .space-y-3 {
  padding: 16px;
}

.orders-content .space-y-2 > * + * {
  margin-top: 8px;
}

.orders-content .space-y-3 > * + * {
  margin-top: 12px;
}

/* 订单卡片样式 */
.orders-content .border-slate-200 {
  border-color: #e2e8f0;
}

.orders-content .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.orders-content .bg-slate-50 {
  background-color: #f8fafc;
}

/* 文件输入框样式 */
.file-input {
  font-size: 11px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #ffffff;
}

.file-input:disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
}

/* 自定义滚动条样式 */
.orders-content::-webkit-scrollbar {
  width: 6px;
}

.orders-content::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.orders-content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.orders-content::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 筛选面板样式 */
.filter-panel-container {
  position: relative;
  z-index: 50;
}

.filter-panel {
  position: fixed;
  left: 0;
  right: 0;
  top: 55px; /* 与标签页上边框对齐 */
  background: #ffffff;
  z-index: 100; /* 确保在列表之上 */
  animation: slideDown 0.3s ease-out;
  display: flex;
  flex-direction: column;
  
}

@keyframes slideDown {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 移除了不再使用的 .filter-select 样式 */

.filter-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.filter-btn-primary {
  background: var(--color-primary);
  color: #ffffff;
}

.filter-btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.filter-btn-secondary {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

.filter-btn-secondary:hover {
  background: #e5e7eb;
  color: #374151;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 筛选选项按钮 */
.filter-option-btn {
  padding: 6px 8px;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-option-btn:hover {
  border-color: #d1d5db;
  color: #374151;
}

.filter-option-active {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.filter-option-active:hover {
  border-color: var(--color-primary-hover) !important;
  color: var(--color-primary-hover) !important;
}

/* 列表区域遮罩层 */
.filter-overlay {
  position: fixed;
  top: 200px; /* 筛选面板下方开始，动态调整 */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 51;
}

/* 筛选面板内容区域 */
.filter-content {
  flex: 1;
  overflow-y: auto;
  max-height: 400px; /* 给内容区域设置最大高度 */
}

.filter-content::-webkit-scrollbar {
  width: 4px;
}

.filter-content::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 2px;
}

.filter-content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

.filter-content::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 筛选面板底部操作区域 */
.filter-actions {
  flex-shrink: 0;
  padding: 16px;
  border-top: 1px solid #f3f4f6;
  background: #ffffff;
}

/* 订单容器在筛选时的样式调整 */
.orders-container {
  position: relative;
  z-index: 10; /* 确保在遮罩层下方 */
}

/* ============================================================================
   审核记录时间线样式
   ============================================================================ */

/* 审核记录时间线动画 */
.audit-timeline-item {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 时间线图标悬停效果 */
.timeline-icon {
    transition: all 0.2s ease;
}

.timeline-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 记录卡片悬停效果 */
.audit-record-card {
    transition: all 0.2s ease;
}

.audit-record-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* 审核记录容器在弹窗中的样式 */
.audit-history-modal {
    max-height: 300px;
    overflow-y: auto;
}

/* 响应式设计 */
@media (max-width: 640px) {
    .audit-timeline-content {
        margin-left: 0.5rem;
    }
    
    .timeline-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}


/* ============================================================================
   全局样式扩展
   ============================================================================ */

/* Segmented tabs - 更精细的边框与激活态样式 */
.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 2px;
  border-radius: 12px;
  background: #f8fafc; /* slate-50 */
  border: 1px solid #e5e7eb; /* slate-200 */
}

.segmented-btn {
  position: relative;
  padding: 9px 12px; /* 36px高度感受 */
  font-size: 14px;
  line-height: 1;
  color: #64748b; /* slate-500/600 */
  background: transparent;
  border-radius: 10px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.segmented-btn:not(.active):hover {
  background: #f1f5f9; /* slate-100 */
  color: #334155; /* slate-700 */
  border-color: #e5e7eb; /* slate-200 */
}

.segmented-btn.active {
  /* 与提交按钮一致的渐变背景 */
  background-image: linear-gradient(to right, var(--color-primary), #9333ea); /* from-blue-600 to-purple-600 */
  color: #ffffff;
  border-color: transparent;
}

.segmented-btn.active:hover {
  background-image: linear-gradient(to right, var(--color-primary-hover), #7c3aed); /* hover: from-blue-700 to-purple-700 */
}

/* 中间分隔线（仅在按钮未激活时显示更清晰的分隔） */
.segmented-btn + .segmented-btn::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, #e5e7eb, transparent);
  pointer-events: none;
}

/* 高对比度与键盘可用性：聚焦态柔和外环 */


@media (prefers-reduced-motion: reduce) {
  .segmented-btn { transition: none; }
}

/* 全局禁用按钮点击时的蓝色背景和焦点效果 */
button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  /* 禁用点击时的蓝色背景色 */
  -webkit-tap-highlight-color: transparent !important;
  
  /* 禁用焦点轮廓 */
  outline: none !important;
  
  /* 禁用用户选择 */
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* 禁用按钮的active状态样式 */
button:active,
.btn:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
  background-color: inherit !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 禁用按钮的focus状态默认样式 */
button:focus,
.btn:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 禁用WebKit的默认按钮样式 */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Button禁用状态样式 */
button:disabled,
.btn:disabled {
  cursor: not-allowed !important;
  position: relative;
}

/* 禁用状态的加载图标样式 */
button:disabled .fa-spinner,
.btn:disabled .fa-spinner {
  color: rgba(255, 255, 255, 0.8);
  z-index: 2;
  position: relative;
}

/* 全局错误样式 */
.error,
.text-error {
  color: #ef4444 !important;
}

.error-text {
  color: #dc2626 !important;
  font-size: 12px;
  line-height: 1.4;
}

.error-border {
  border-color: #f87171 !important;
  background-color: #fef2f2 !important;
}

.error-message {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.error-message i {
  color: #ef4444;
  margin-right: 6px;
}

/* 全局成功样式 */
.success,
.text-success {
  color: #22c55e !important;
}

.success-message {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.success-message i {
  color: #22c55e;
  margin-right: 6px;
}

/* 登录页面特定样式 */
.login-logo {
  width: calc(100vw - 4rem) !important; /* 左右留2rem空白 */
  max-width: 800px !important; /* 最大宽度限制 */
  height: 200px !important; /* 固定高度 */
  border-radius: 20px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  border: 3px solid rgba(255, 255, 255, 0.9) !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}

.login-logo:hover {
  transform: scale(1.05);
}

/* 表单输入框错误状态 */
.form-error input,
.form-error textarea,
.form-error select {
  border-color: #f87171 !important;
  background-color: #fef2f2 !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2) !important;
}

.form-error input:focus,
.form-error textarea:focus,
.form-error select:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3) !important;
}

/* 消息列表页面样式 */
.messages-container {
  /* 使用 flex: 1 自适应高度（在 index.html 中定义） */
  /* 不设置固定高度，由父容器 #messages (100vh) 和 flex 布局控制 */
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}

.messages-empty-state {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
}

.messages-empty-state .text-gray-500 {
  color: #9ca3af !important;
}

.messages-content {
  height: 100%;
  overflow-y: auto;
}

.messages-content .space-y-2 > * + * {
  margin-top: 8px;
}

/* 消息项样式 */
.message-item {
  cursor: pointer;
  transition: all 0.2s ease;
}

.message-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.message-type-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.025em;
}

/* 文本截断样式 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 未读消息特殊样式 */
.message-item:not(.border-slate-200) {
  position: relative;
}

.message-item:not(.border-slate-200)::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-hover));
  border-radius: 0 2px 2px 0;
}

/* 消息内容滚动条样式 */
.messages-content::-webkit-scrollbar {
  width: 6px;
}

.messages-content::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.messages-content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.messages-content::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 消息标签页特殊样式 */
.tab-button .bg-red-500 {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* ============================================================================
   商户状态标签样式
   ============================================================================ */

/* 商户状态：0-待完善 */
.merchant-status-0 {
  background-color: #fed7aa; /* orange-100 */
  color: #c2410c; /* orange-700 */
  border-color: #fed7aa; /* orange-200 */
}

/* 商户状态：1-待审批 */
.merchant-status-1 {
  background-color: #dbeafe; /* blue-100 */
  color: var(--color-primary-hover); /* blue-700 */
  border-color: #bfdbfe; /* blue-200 */
}

/* 商户状态：2-审批通过 */
.merchant-status-2 {
  background-color: #dcfce7; /* green-100 */
  color: #15803d; /* green-700 */
  border-color: #bbf7d0; /* green-200 */
}

/* 商户状态：5-审批驳回 */
.merchant-status-3 {
  background-color: #fee2e2; /* red-100 */
  color: #b91c1c; /* red-700 */
  border-color: #fecaca; /* red-200 */
}

/* 商户状态：3-已激活(正常) */
.merchant-status-4 {
  background-color: #ecfdf5; /* emerald-50 */
  color: #047857; /* emerald-700 */
  border-color: #a7f3d0; /* emerald-200 */
}

/* 商户状态：4-已禁用 */
.merchant-status-5 {
  background-color: #f3f4f6; /* gray-100 */
  color: #374151; /* gray-700 */
  border-color: #e5e7eb; /* gray-200 */
}

/* 状态标签基础样式 */
.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  border-width: 1px;
  line-height: 1.2;
}

.status-tag i {
  margin-right: 4px;
  font-size: 10px;
}

/* 自定义下拉选择器样式 */
.custom-select-container {
  position: relative;
}

.custom-select {
  transition: all 0.2s ease;
}

.custom-dropdown {
  animation: dropdown-fade-in 0.2s ease;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.dropdown-item {
  font-size: 14px;
  transition: all 0.15s ease;
}

.dropdown-item:hover {
  background-color: #eff6ff !important;
  color: var(--color-primary);
}

@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 旋转动画 */
.rotate-180 {
  transform: rotate(180deg);
}

.transition-transform {
  transition: transform 0.2s ease;
}

/* 持续时间 */
.duration-200 {
  transition-duration: 0.2s;
}

/* ============================================================================
   现代CSS特性补充 - 支持头部设计所需的样式
   ============================================================================ */

/* 渐变文字效果 */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-tl {
  background-image: linear-gradient(to top left, var(--tw-gradient-stops));
}

.bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.bg-gradient-to-bl {
  background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
}

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.text-transparent {
  color: transparent;
}

/* 深色背景渐变 */
.from-slate-900 {
  --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-slate-800 {
  --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1e293b var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-indigo-900 {
  --tw-gradient-to: #312e81 var(--tw-gradient-to-position);
}

/* 渐变文字颜色 */
.from-white {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-blue-100 {
  --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #dbeafe var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-purple-100 {
  --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);
}

/* 半透明颜色 */
.from-blue-500\/20 {
  --tw-gradient-from: rgb(59 130 246 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-purple-500\/20 {
  --tw-gradient-to: rgb(168 85 247 / 0.2) var(--tw-gradient-to-position);
}

.from-indigo-400\/15 {
  --tw-gradient-from: rgb(129 140 248 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(129 140 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-cyan-400\/15 {
  --tw-gradient-to: rgb(34 211 238 / 0.15) var(--tw-gradient-to-position);
}

.from-purple-400\/10 {
  --tw-gradient-from: rgb(196 181 253 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(196 181 253 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-pink-400\/10 {
  --tw-gradient-to: rgb(244 114 182 / 0.1) var(--tw-gradient-to-position);
}

.from-blue-400 {
  --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-purple-400 {
  --tw-gradient-to: #c084fc var(--tw-gradient-to-position);
}

.from-emerald-400\/30 {
  --tw-gradient-from: rgb(52 211 153 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-400\/30 {
  --tw-gradient-to: rgb(96 165 250 / 0.3) var(--tw-gradient-to-position);
}

.from-blue-400\/20 {
  --tw-gradient-from: rgb(96 165 250 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-200\/40 {
  --tw-gradient-from: rgb(191 219 254 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(191 219 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-200\/30 {
  --tw-gradient-from: rgb(233 213 255 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(233 213 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-purple-400\/20 {
  --tw-gradient-to: rgb(196 181 253 / 0.2) var(--tw-gradient-to-position);
}

/* 背景色半透明 */
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

/* 边框半透明 */
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

/* 文字颜色 */
.text-slate-800 {
  color: #1e293b;
}

.text-slate-300 {
  color: #cbd5e1;
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-red{
  color:red;
}
/* 模糊效果 */
.blur-sm {
  filter: blur(4px);
}

.blur-xl {
  filter: blur(24px);
}

.blur-2xl {
  filter: blur(40px);
}

.blur-3xl {
  filter: blur(64px);
}

/* 毛玻璃效果 */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* 字体大小 */
.text-2xl {
  font-size: 24px;
  line-height: 1.2;
}

.text-3xl {
  font-size: 30px;
  line-height: 1.2;
}

/* 间距 */
.space-y-3 > * + * {
  margin-top: 12px;
}

.gap-3 {
  gap: 12px;
}
.py-1\.5 {
  padding-top: 6px;
  padding-bottom: 6px;
}

.py-8 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.py-10 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.px-6 {
  padding-left: 24px;
  padding-right: 24px;
}

.px-8 {
  padding-left: 32px;
  padding-right: 32px;
}

/* 最小高度 */
.min-h-\[120px\] {
  min-height: 120px;
}

/* 尺寸 */
.w-16 { width: 64px; }
.h-16 { height: 64px; }
.w-24 { width: 96px; }
.h-24 { height: 96px; }
.w-32 { width: 128px; }
.h-32 { height: 128px; }
.w-36 { width: 144px; }
.h-36 { height: 144px; }
.w-40 { width: 160px; }

.h-40 {
  height: 160px;
}

/* 定位 */
.-top-20 {
  top: -80px;
}

.-left-20 {
  left: -80px;
}

.top-10 {
  top: 40px;
}

.right-10 {
  right: 40px;
}

.left-1\/3 {
  left: 33.333333%;
}

/* 负边距 */
.-mx-4 {
  margin-left: -16px;
  margin-right: -16px;
}

.-mx-6 {
  margin-left: -24px;
  margin-right: -24px;
}

/* 响应式 */
@media (min-width: 640px) {
  .sm\:text-3xl {
    font-size: 30px;
    line-height: 1.2;
  }
  
  .sm\:flex {
    display: flex;
  }
  
  .sm\:flex-row {
    flex-direction: row;
  }
  
  .sm\:items-center {
    align-items: center;
  }
  
  .sm\:justify-between {
    justify-content: space-between;
  }
  
  .sm\:block {
    display: block;
  }
  
  .sm\:px-8 {
    padding-left: 32px;
    padding-right: 32px;
  }
  
  .sm\:py-10 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* ============================================================================
   Location Modal Styles - 地址选择弹窗样式
   ============================================================================ */

/* 弹窗主容器 - 全屏覆盖层 */
.location-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 遮罩层 - 半透明黑色背景 */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  animation: fadeIn 0.2s ease-out;
}

/* 弹窗内容容器 - 白色圆角卡片 */
.modal-content {
  position: relative;
  background: white;
  border-radius: 16px;
  width: 85%;
  max-width: none;
  height: 80vh;
  max-height: none;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  animation: slideUp 0.3s ease-out;
  overflow: hidden;
}

/* 弹窗头部 - 标题和关闭按钮 */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f1f5f9;
}

/* 弹窗标题 */
.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
}

/* 关闭按钮 */
.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #f8fafc;
  color: #64748b;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-close:hover {
  background: #e2e8f0;
  color: #475569;
}

/* 弹窗主体内容区域 */
.modal-body {
  padding: 0;
  height: calc(80vh - 80px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 搜索框容器 */
.search-box {
  position: relative;
  padding: 16px 24px 20px;
  border-bottom: 1px solid #f1f5f9;
}

/* 搜索图标 */
.search-icon {
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 14px;
}

/* 搜索输入框 */
.search-input {
  width: 100%;
  height: 40px;
  padding: 0 16px 0 36px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  color: #334155;
  background: #f8fafc;
  transition: all 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: white;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* 选项列表容器 */
.options-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

/* 单个选项项 */
.option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px solid #f8fafc;
}

.option-item:hover {
  background: #f1f5f9;
}

.option-item.selected {
  background: #eff6ff;
  color: var(--color-primary);
}

/* 选项文本 */
.option-text {
  font-size: 15px;
  font-weight: 500;
}

/* 选中状态的勾选图标 */
.option-check {
  color: var(--color-primary);
  font-size: 14px;
}

/* 无搜索结果提示 */
.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}

/* 弹窗动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}