/* ===== H5 全局样式 ===== */
/* 三支柱退休金精算系统 - 移动端 H5 页面 */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; background: #f0f2f5; overscroll-behavior: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}
.h5-container { max-width: 480px; margin: 0 auto; min-height: 100dvh; background: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; }

/* ---- Flex & Layout ---- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ---- Spacing ---- */
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.pt-12 { padding-top: 12px; }
.m-0 { margin: 0; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mx-16 { margin-left: 16px; margin-right: 16px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---- Typography ---- */
.text-12 { font-size: 12px; }
.text-13 { font-size: 13px; }
.text-14 { font-size: 14px; }
.text-15 { font-size: 15px; }
.text-16 { font-size: 16px; }
.text-17 { font-size: 17px; }
.text-18 { font-size: 18px; }
.text-22 { font-size: 22px; }
.text-32 { font-size: 32px; }
.text-36 { font-size: 36px; }
.text-48 { font-size: 48px; }
.font-normal { font-weight: 400; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }
.leading-normal { line-height: 1.6; }
.whitespace-pre { white-space: pre-wrap; word-break: break-word; }

/* ---- Colors ---- */
.text-white { color: #fff; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-purple { color: #5b21b6; }
.text-purple-600 { color: #7c3aed; }
.text-purple-700 { color: #6d28d9; }
.text-red { color: #dc2626; }
.text-green { color: #059669; }
.text-amber { color: #d97706; }
.bg-white { background: #fff; }
.bg-gray-50 { background: #f9fafb; }
.bg-gray-100 { background: #f3f4f6; }
.bg-purple-50 { background: #eef2ff; }
.bg-purple-100 { background: #f0f4ff; }
.bg-red-50 { background: rgba(239,68,68,.08); }
.bg-green-50 { background: rgba(16,185,129,.08); }

/* ---- Borders ---- */
.rounded-8 { border-radius: 8px; }
.rounded-12 { border-radius: 12px; }
.rounded-16 { border-radius: 16px; }
.rounded-18 { border-radius: 18px; }
.rounded-20 { border-radius: 20px; }
.rounded-24 { border-radius: 24px; }
.rounded-full { border-radius: 50%; }
.border { border: 1px solid #e5e7eb; }
.border-t { border-top: 1px solid #e5e7eb; }
.border-b { border-bottom: 1px solid #e5e7eb; }
.border-dashed { border-style: dashed; }
.border-gray-300 { border-color: #d1d5db; }
.border-purple { border-color: #7c3aed; }

/* ---- Shadows ---- */
.shadow-sm { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.shadow-md { box-shadow: 0 2px 8px rgba(102,126,234,.3); }

/* ---- Width/Height ---- */
.w-full { width: 100%; }
.h-full { height: 100%; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---- Inline ---- */
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }

/* ---- Position ---- */
.relative { position: relative; }
.absolute { position: absolute; }

/* ---- Z-index ---- */
.z-10 { z-index: 10; }

/* ===== 渐变色背景 ===== */
.gradient-hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.gradient-dark { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%); }
.gradient-card { background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%); }
.gradient-btn { background: linear-gradient(135deg, #667eea, #764ba2); }
.gradient-btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); }

/* ===== 动画 ===== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bounce { 0%,80%,100% { transform: scale(0); } 40% { transform: scale(1); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.animate-fade-up { animation: fadeUp .35s ease; }
.animate-pulse { animation: pulse 2s infinite; }

/* ===== 滚动条（隐藏） ===== */
.scroll-hide::-webkit-scrollbar { display: none; }
.scroll-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== 安全区域 ===== */
.safe-bottom { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

/* ===== Opacity ===== */
.opacity-50 { opacity: .5; }
.opacity-60 { opacity: .6; }
.opacity-80 { opacity: .8; }

/* ---- 禁止点击穿透 ---- */
.no-tap { -webkit-tap-highlight-color: transparent; }