/* ============================================================
   钟山流动租赁 - H5全局样式 theme-58.css
   电商租赁平台风格 - 珊瑚红主色 #F56C6C
   纯白卡片 + 柔和阴影，与小程序完全一致
   ============================================================ */

/* --- Reset & Base --- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;background:#F5F5F5;color:#333333;max-width:750px;margin:0 auto;min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.6;letter-spacing:0.01em}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

/* --- Design Tokens --- */
.text-primary{color:#333333}
.text-secondary{color:#666666}
.text-muted{color:#999999}
.text-disabled{color:#CCCCCC}
.text-accent{color:#F56C6C}
.text-accent-deep{color:#E05050}

.bg-page{background:#F5F5F5}
.bg-card{background:#FFFFFF}
.bg-accent{background:#F56C6C}
.bg-accent-light{background:#FDECEC}
.bg-brand{background:#F56C6C}
.bg-gray-50{background:#F8F8F8}
.bg-gray-100{background:#F0F0F0}
.bg-gray-200{background:#E8E8E8}

.border-subtle{border:1px solid #F0F0F0}
.border-accent{border-color:#FAD3D3}
.border-gray{border-color:#E5E5E5}

/* --- 圆角系统 --- */
.rounded-sm{border-radius:6px}
.rounded-md{border-radius:10px}
.rounded-lg{border-radius:20px}
.rounded-full{border-radius:999px}

/* --- Typography --- */
.fw-500{font-weight:500}
.fw-600{font-weight:600}
.fw-700{font-weight:700}

/* --- SVG Icon System --- */
.icon-svg{width:1em;height:1em;vertical-align:-0.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Category icon containers - 彩色圆形（与小程序金刚区一致） */
.cat-icon-box{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;transition:transform .12s}
.cat-icon-box:active{transform:scale(.95)}
.cat-icon-box svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2}
.ci-tableware{background:#FFF4D9}
.ci-tableware svg{stroke:#F0B429}
.ci-tent{background:#DDF5E0}
.ci-tent svg{stroke:#67C23A}
.ci-cold{background:#FFE3D6}
.ci-cold svg{stroke:#F78948}
.ci-kitchen{background:#FCE0EC}
.ci-kitchen svg{stroke:#EB4D8B}
.ci-disinfect{background:#DDEBFF}
.ci-disinfect svg{stroke:#409EFF}
.ci-chairs{background:#E6DDFF}
.ci-chairs svg{stroke:#8E66FF}
.ci-sound{background:#D9F5F0}
.ci-sound svg{stroke:#2DB7A2}
.ci-wedding{background:#FFD9D9}
.ci-wedding svg{stroke:#F56C6C}
.ci-default{background:#FDECEC}
.ci-default svg{stroke:#F56C6C}

/* --- Top Header Bar: 珊瑚红纯色（与小程序一致） --- */
.top-bar{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:750px;background:#F56C6C;z-index:200;padding:10px 16px;display:flex;align-items:center;gap:10px}
.top-bar .loc-btn{display:flex;align-items:center;gap:4px;font-size:14px;color:#FFFFFF;font-weight:600;white-space:nowrap;cursor:pointer;flex-shrink:0;padding:6px 12px;background:rgba(255,255,255,0.18);border-radius:20px}
.top-bar .loc-btn:active{opacity:0.8}
.top-bar .loc-btn svg{width:16px;height:16px;stroke:#FFFFFF;fill:none;stroke-width:2}
.top-bar .loc-btn .loc-text{max-width:64px;overflow:hidden;text-overflow:ellipsis}
.top-bar .loc-btn .loc-arrow{width:12px;height:12px;stroke:#FFFFFF}
.top-bar .sign-btn{display:flex;align-items:center;gap:4px;font-size:13px;color:#FFFFFF;font-weight:500;padding:6px 14px;background:rgba(255,255,255,0.18);border-radius:20px;cursor:pointer;flex-shrink:0}
.top-bar .sign-btn:active{opacity:0.8}
.top-bar .sign-btn svg{width:16px;height:16px;stroke:#FFFFFF;fill:none;stroke-width:2}

/* --- Search Bar: 白色圆角卡片包裹 --- */
.search-card{background:#FFFFFF;border-radius:16px;padding:12px 16px;margin:0 16px;box-shadow:0 2px 12px rgba(245,108,108,0.06)}
.search-bar{background:#F5F5F5;border-radius:24px;padding:10px 16px;display:flex;align-items:center;gap:8px;border:none}
.search-bar svg{width:18px;height:18px;stroke:#F56C6C;fill:none;stroke-width:2;flex-shrink:0}
.search-bar input{border:none;outline:none;font-size:14px;color:#333333;width:100%;background:transparent}
.search-bar input::placeholder{color:#BBBBBB}
.search-bar .scan-btn{width:24px;height:24px;flex-shrink:0;cursor:pointer}
.search-bar .scan-btn svg{width:20px;height:20px;stroke:#999999;stroke-width:1.8}

/* --- Notice Bar: 白色圆角卡 --- */
.notice-bar{display:flex;align-items:center;gap:10px;background:#FFFFFF;border-radius:12px;margin:10px 16px;padding:12px 16px}
.notice-bar .notice-ic{width:20px;height:20px;flex-shrink:0}
.notice-bar .notice-ic svg{width:20px;height:20px;fill:#F56C6C;stroke:none}
.notice-bar .notice-line{width:1px;height:16px;background:#E5E5E5;flex-shrink:0}
.notice-bar .notice-txt{flex:1;font-size:13px;color:#333333;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice-bar .notice-arrow{width:12px;height:12px;flex-shrink:0}
.notice-bar .notice-arrow svg{width:12px;height:12px;stroke:#BBBBBB;fill:none;stroke-width:2}

/* --- Banner --- */
.banner-wrap{margin:10px 16px;border-radius:16px;overflow:hidden;position:relative;aspect-ratio:2.2/1}
.banner-track{display:flex;height:100%;transition:transform .4s ease}
.banner-slide{min-width:100%;height:100%;display:flex;align-items:center;padding:20px 24px;position:relative;overflow:hidden;background:#F56C6C}
.banner-content{position:relative;z-index:1}
.banner-content h2{font-size:18px;font-weight:700;color:#fff;margin-bottom:4px;letter-spacing:.3px}
.banner-content p{font-size:13px;color:rgba(255,255,255,.8);line-height:1.5}
.banner-accent{display:inline-block;padding:3px 10px;background:rgba(255,255,255,0.25);color:#fff;font-size:11px;font-weight:600;border-radius:6px;margin-bottom:8px}
.banner-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.banner-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:all .3s}
.banner-dot.active{width:20px;border-radius:3px;background:#FFFFFF}

/* --- Trust Bar --- */
.trust-bar{margin:10px 16px;background:#fff;border-radius:16px;padding:14px 16px;display:flex;align-items:center;justify-content:space-around}
.trust-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#666666;font-weight:500}
.trust-item svg{width:16px;height:16px;flex-shrink:0;stroke:#F56C6C;fill:none;stroke-width:2}
.trust-num{color:#333333;font-weight:700;font-size:15px}
.trust-num.accent{color:#F56C6C}
.trust-divider{width:1px;height:28px;background:#F0F0F0}

/* --- Category Grid: 白色圆角大卡片（与小程序一致） --- */
.category-grid{background:#fff;margin:10px 16px;border-radius:16px;padding:18px 10px 14px}
.category-grid .grid-row{display:flex;flex-wrap:wrap}
.cat-cell{width:25%;display:flex;flex-direction:column;align-items:center;padding:10px 4px;cursor:pointer}
.cat-cell:active{opacity:.75}
.cat-cell .cat-label{font-size:12px;color:#333333;margin-top:6px;white-space:nowrap;font-weight:500}

/* --- Quick Filter Tabs: 选中黑色粗字+红色下划线 --- */
.quick-tabs{display:flex;gap:4px;padding:12px 16px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.quick-tabs::-webkit-scrollbar{display:none}
.quick-tab{flex-shrink:0;padding:8px 14px;font-size:13px;color:#666666;font-weight:500;border-radius:8px;background:transparent;cursor:pointer;white-space:nowrap;transition:all .15s;position:relative}
.quick-tab:active{opacity:.8}
.quick-tab.active{color:#1A1A1A;background:transparent;font-weight:700;font-size:15px}
.quick-tab.active::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:18px;height:3px;border-radius:2px;background:#F56C6C}

/* --- Section Header --- */
.sec-head{display:flex;align-items:center;justify-content:space-between;padding:16px 4px 12px}
.sec-title{font-size:17px;font-weight:800;color:#1A1A1A;letter-spacing:.2px}
.sec-more{font-size:13px;color:#999999;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:2px}
.sec-more svg{width:12px;height:12px;stroke:#BBBBBB}

/* --- Goods Card: 整体白色大卡片 --- */
.goods-card{margin:10px 16px;background:#FFFFFF;border-radius:16px;padding:4px 12px 18px}

/* --- Post Card (两列 Grid) --- */
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.post-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #EEEEEE;cursor:pointer;transition:transform .12s}
.post-card:active{transform:scale(.985)}
.post-cover{position:relative;width:100%;aspect-ratio:4/3;background:#E5E5E5;overflow:hidden}
.post-cover img{width:100%;height:100%;object-fit:cover}
.post-cover-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#999999;font-size:12px}
.post-cat-badge{position:absolute;top:8px;left:8px;padding:3px 8px;background:#F56C6C;color:#fff;font-size:10px;font-weight:600;border-radius:4px}
.post-body{padding:10px 12px 12px}
.post-title{font-size:13px;font-weight:600;color:#1A1A1A;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.post-price-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:8px}
.post-price{font-size:18px;font-weight:800;color:#F56C6C;letter-spacing:-.3px}
.post-price .unit{font-size:11px;font-weight:600;color:#F56C6C;margin-left:2px}
.post-price.nego{font-size:14px;color:#666666;font-weight:700}
.post-tag-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.post-tag{display:inline-block;padding:3px 8px;background:#F56C6C;color:#FFFFFF;font-size:10px;font-weight:600;border-radius:4px}
.post-cart{width:20px;height:20px;flex-shrink:0}
.post-cart svg{width:20px;height:20px;stroke:#F56C6C;fill:none;stroke-width:2}
.post-user{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid #F5F5F5}
.post-avatar{width:22px;height:22px;border-radius:50%;background:#F56C6C;color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.post-user-name{font-size:12px;color:#666666;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.post-status{position:absolute;top:8px;right:8px;padding:3px 8px;font-size:10px;font-weight:600;border-radius:4px;z-index:2}
.status-approved{background:#10B981;color:#fff}
.status-pending{background:#F56C6C;color:#fff}
.status-offline{background:#999999;color:#fff}
.status-rejected{background:#666666;color:#fff}

/* --- CTA 悬浮按钮 --- */
.fab{position:fixed;right:20px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:150;width:56px;height:56px;border-radius:16px;background:#F56C6C;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 8px 24px rgba(245,108,108,.35);cursor:pointer;transition:transform .12s}
.fab:active{transform:scale(.94)}
.fab svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.2}
.fab-label{color:#fff;font-size:10px;font-weight:600;letter-spacing:.5px}

/* --- Bottom Tab Bar --- */
.tab-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:750px;background:#FFFFFF;z-index:180;display:flex;align-items:flex-start;padding:8px 0 calc(6px + env(safe-area-inset-bottom));border-top:1px solid #EEEEEE}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 0;cursor:pointer;color:#999999;transition:color .15s}
.tab-item:active{opacity:.7}
.tab-item.active{color:#F56C6C}
.tab-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tab-item.active svg{stroke:#F56C6C}
.tab-center{position:relative;flex:1;display:flex;justify-content:center;padding-top:0}
.tab-center-btn{position:absolute;top:-20px;width:52px;height:52px;border-radius:14px;background:#F56C6C;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:0 6px 16px rgba(245,108,108,.35)}
.tab-center-btn svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.2}
.tab-center-btn span{color:#fff;font-size:9px;font-weight:600}
.tab-label{font-size:11px;font-weight:500}
.tab-center-placeholder{height:32px}

/* --- 通用按钮 --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 22px;font-size:14px;font-weight:600;border-radius:24px;border:none;cursor:pointer;transition:all .12s;font-family:inherit}
.btn:active{transform:scale(.97)}
.btn-primary{background:#F56C6C;color:#fff}
.btn-brand{background:#F56C6C;color:#fff}
.btn-outline{background:#fff;color:#666666;border:1px solid #E5E5E5}
.btn-ghost{background:#F5F5F5;color:#666666}
.btn-block{display:flex;width:100%}
.btn-lg{padding:14px 24px;font-size:16px;height:50px}

/* --- Card Component --- */
.card{background:#FFFFFF;border-radius:16px;padding:20px;margin:0 16px 12px}

/* --- Empty State --- */
.empty{padding:80px 24px;text-align:center}
.empty-icon{width:80px;height:80px;margin:0 auto 20px;background:#F5F5F5;border-radius:50%;display:flex;align-items:center;justify-content:center}
.empty-icon svg{width:40px;height:40px;stroke:#BBBBBB;fill:none;stroke-width:1.6}
.empty-title{font-size:17px;font-weight:700;color:#333333;margin-bottom:8px}
.empty-desc{font-size:13px;color:#999999;line-height:1.6;margin-bottom:24px}
.empty-btn{display:inline-block;background:#F56C6C;color:#FFFFFF;border-radius:24px;padding:10px 32px;font-size:14px;font-weight:600;cursor:pointer}

/* --- Loading --- */
.loading{text-align:center;padding:40px 0;color:#999999;font-size:13px}
.spinner{display:inline-block;width:24px;height:24px;border:3px solid #E5E5E5;border-top-color:#F56C6C;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Profile Page (个人中心) --- */
.profile-header{background:#F56C6C;padding:20px 16px 40px;position:relative}
.profile-avatar{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;border:2px solid rgba(255,255,255,0.3)}
.profile-name{font-size:18px;font-weight:700;color:#FFFFFF;margin-top:10px}
.profile-desc{font-size:12px;color:rgba(255,255,255,0.7);margin-top:4px}
.profile-stats{display:flex;gap:12px;margin:0 16px;margin-top:-28px;position:relative;z-index:2}
.profile-stat-card{flex:1;background:#FFFFFF;border-radius:16px;padding:16px 12px;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,0.06)}
.profile-stat-num{font-size:20px;font-weight:800;color:#333333}
.profile-stat-label{font-size:12px;color:#999999;margin-top:4px}
.profile-menu{margin:12px 16px;background:#FFFFFF;border-radius:16px;overflow:hidden}
.profile-menu-item{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid #F5F5F5;cursor:pointer}
.profile-menu-item:last-child{border-bottom:none}
.profile-menu-item:active{background:#FAFAFA}
.profile-menu-icon{width:36px;height:36px;border-radius:10px;background:#FDECEC;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.profile-menu-icon svg{width:18px;height:18px;stroke:#F56C6C;fill:none;stroke-width:2}
.profile-menu-label{flex:1;font-size:15px;color:#333333;font-weight:500}
.profile-menu-arrow{width:16px;height:16px;stroke:#CCCCCC;fill:none;stroke-width:2}

/* --- Login Page --- */
.login-header{background:#F56C6C;padding:60px 24px 40px;text-align:center}
.login-logo{width:64px;height:64px;border-radius:16px;background:rgba(255,255,255,0.2);margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.login-logo svg{width:32px;height:32px;stroke:#FFFFFF;fill:none;stroke-width:2}
.login-title{font-size:22px;font-weight:700;color:#FFFFFF}
.login-subtitle{font-size:13px;color:rgba(255,255,255,0.7);margin-top:6px}
.login-card{margin:-24px 16px 0;background:#FFFFFF;border-radius:16px;padding:24px 20px;box-shadow:0 4px 20px rgba(0,0,0,0.06)}
.login-input-group{margin-bottom:16px}
.login-input-group label{display:block;font-size:13px;font-weight:600;color:#333333;margin-bottom:8px}
.login-input-group input{width:100%;height:48px;padding:0 16px;border:1px solid #E5E5E5;border-radius:12px;font-size:15px;color:#333333;background:#FFFFFF;outline:none;transition:border-color .15s}
.login-input-group input:focus{border-color:#F56C6C}
.login-btn{width:100%;height:50px;background:#F56C6C;color:#FFFFFF;border:none;border-radius:24px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .12s}
.login-btn:active{transform:scale(.97)}

/* --- Detail Page --- */
.detail-price{font-size:24px;font-weight:800;color:#F56C6C}
.detail-tag{display:inline-block;padding:3px 10px;background:#F56C6C;color:#FFFFFF;font-size:11px;font-weight:600;border-radius:6px}
.detail-btn-call{background:#F56C6C;color:#FFFFFF;border-radius:24px;padding:12px 24px;font-size:15px;font-weight:600;border:none;cursor:pointer}

/* --- 关怀模式大字版 --- */
body.elder{font-size:18px}
body.elder .sec-title{font-size:20px}
body.elder .post-title{font-size:17px;min-height:48px}
body.elder .post-price{font-size:24px}
body.elder .cat-label{font-size:15px}
body.elder .tab-label{font-size:14px}
body.elder .btn-lg{padding:18px 28px;font-size:20px;height:60px}
body.elder .empty-title{font-size:22px}
body.elder .empty-desc{font-size:17px}
body.elder .trust-item{font-size:15px}
body.elder .trust-num{font-size:18px}
body.elder .quick-tab{font-size:16px;padding:10px 22px}

/* --- 间距工具 --- */
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mb-12{margin-bottom:12px}
.mb-16{margin-bottom:16px}
.mx-16{margin-left:16px;margin-right:16px}
.px-16{padding-left:16px;padding-right:16px}
.pt-safe{padding-top:calc(52px + env(safe-area-inset-top))}
.pb-safe{padding-bottom:calc(80px + env(safe-area-inset-bottom))}