/* ═══════════════════════════════════════════════════════════════
   企订通 H5 端 - 去 AI 化对齐中企销 mobile 版
   真实中企销特征：白底+黑色文字+iOS 蓝 #007aff+极少红 #ce3c39
   无渐变/无粒子/无 emoji/无玻璃/无彩虹
   ═══════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent;}
html, body { height: 100%; overflow-x: hidden;}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px; line-height: 1.5;
    color: #353535; background: #f5f5f5;
    padding-bottom: 56px;
}
a { color: inherit; text-decoration: none;}
img { max-width: 100%; display: block;}
ul, li { list-style: none;}
button { font-family: inherit; border: 0; background: none; cursor: pointer;}

/* ───────── 顶部导航 ───────── */
.app-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: #fff; height: 44px;
    display: flex; align-items: center; padding: 0 16px;
    border-bottom: 1px solid #e5e5e5;
}
.app-bar .menu-btn {
    width: 28px; height: 28px; display: flex; flex-direction: column;
    justify-content: center; gap: 4px; cursor: pointer;
}
.app-bar .menu-btn i {
    display: block; width: 18px; height: 2px; background: #353535;
}
.app-bar .title {
    flex: 1; text-align: center; font-size: 17px; font-weight: 500; color: #000;
}
.app-bar .logo {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-size: 16px; font-weight: bold; color: #ce3c39;
}
.app-bar .back {
    font-size: 14px; color: #007aff; cursor: pointer;
}

/* ───────── 抽屉菜单 ───────── */
.drawer-mask {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4);
    z-index: 200;
}
.drawer-mask.open { display: block;}
.drawer {
    position: fixed; top: 0; left: 0; bottom: 0; width: 75%; max-width: 280px;
    background: #fff; z-index: 201; transform: translateX(-100%);
    transition: transform .25s ease; overflow-y: auto;
}
.drawer.open { transform: translateX(0);}
.drawer .head {
    padding: 24px 16px; background: #ce3c39; color: #fff;
}
.drawer .head .name { font-size: 16px; font-weight: bold;}
.drawer .head .slogan { font-size: 12px; opacity: .85; margin-top: 4px;}
.drawer ul li a {
    display: block; padding: 14px 16px; font-size: 14px; color: #353535;
    border-bottom: 1px solid #f0f0f0;
}
.drawer ul li a.active { color: #ce3c39; background: #fef5f5;}
.drawer ul li a:hover { color: #ce3c39;}

/* ───────── 主区 ───────── */
.page { padding: 44px 0 0;}

/* ───────── Banner ───────── */
.banner {
    position: relative; height: 180px; background: #f0f4f8;
    overflow: hidden;
}
.banner .slide-img {
    width: 100%; height: 100%; object-fit: cover;
}
.banner .slide-text {
    position: absolute; left: 16px; right: 16px; bottom: 16px;
    background: rgba(0,0,0,.5); color: #fff; padding: 10px 14px;
    font-size: 13px;
}
.banner .dots {
    position: absolute; bottom: 8px; left: 0; right: 0;
    text-align: center;
}
.banner .dots i {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.5); margin: 0 3px;
}
.banner .dots i.on { background: #fff;}

/* ───────── 快速入口 4格 ───────── */
.quick {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    background: #fff; padding: 16px 0; margin-bottom: 8px;
}
.quick .item {
    text-align: center; padding: 8px 0;
}
.quick .item .ic {
    width: 38px; height: 38px; margin: 0 auto 6px;
    display: flex; align-items: center; justify-content: center;
    background: #f5f5f5; border-radius: 5px;
}
.quick .item .ic svg { width: 22px; height: 22px; stroke: #ce3c39; fill: none; stroke-width: 1.6;}
.quick .item .l { font-size: 12px; color: #353535;}

/* ───────── 数据条 ───────── */
.stats-bar {
    background: #fff; display: flex; padding: 14px 0; margin-bottom: 8px;
}
.stats-bar .it { flex: 1; text-align: center;}
.stats-bar .it .v { font-size: 18px; font-weight: bold; color: #ce3c39; line-height: 1.2;}
.stats-bar .it .l { font-size: 11px; color: #888; margin-top: 2px;}
.stats-bar .sep { width: 1px; background: #f0f0f0;}

/* ───────── 区块 ───────── */
.block {
    background: #fff; margin-bottom: 8px;
}
.block .head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid #f0f0f0;
}
.block .head h3 { font-size: 15px; font-weight: bold; color: #000;}
.block .head .more { font-size: 12px; color: #888;}
.block .head .more::after { content: " ›"; color: #888;}

/* ───────── 列表 ───────── */
.list .item {
    display: flex; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}
.list .item:last-child { border-bottom: 0;}
.list .item .pic {
    flex: 0 0 80px; height: 80px; background: #f5f5f5;
    display: flex; align-items: center; justify-content: center;
    color: #ce3c39;
}
.list .item .pic svg { width: 36px; height: 36px; stroke: #ce3c39; fill: none; stroke-width: 1.5;}
.list .item .info { flex: 1; min-width: 0;}
.list .item .info .t {
    font-size: 14px; color: #000; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list .item .info .desc {
    font-size: 12px; color: #888; margin-top: 4px;
    line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.list .item .info .meta {
    font-size: 11px; color: #adadad; margin-top: 6px;
}

/* ───────── 表单 ───────── */
.form { background: #fff; padding: 0 16px;}
.form .row {
    display: flex; align-items: center; min-height: 44px;
    border-bottom: 1px solid #f0f0f0;
}
.form .row:last-child { border-bottom: 0;}
.form .row label { width: 80px; font-size: 13px; color: #888;}
.form .row input, .form .row select, .form .row textarea {
    flex: 1; padding: 10px 0; font-size: 14px; color: #353535;
    border: 0; outline: 0; background: transparent;
    font-family: inherit;
}
.form .row textarea { min-height: 80px; resize: none;}
.form .submit {
    display: block; width: calc(100% - 32px); margin: 16px;
    padding: 12px; background: #ce3c39; color: #fff;
    font-size: 15px; border-radius: 5px; text-align: center;
}
.form .submit:active { background: #a52e2c;}

/* ───────── 红色 CTA ───────── */
.cta-banner {
    margin: 16px; padding: 20px; background: #ce3c39; color: #fff;
    text-align: center; border-radius: 5px;
}
.cta-banner h4 { font-size: 16px; margin-bottom: 6px; font-weight: bold;}
.cta-banner p { font-size: 12px; opacity: .9; margin-bottom: 12px;}
.cta-banner .btn {
    display: inline-block; padding: 8px 24px; background: #fff;
    color: #ce3c39; font-size: 13px; border-radius: 3px;
}

/* ───────── 联系条目 ───────── */
.contact-list { background: #fff;}
.contact-list .item {
    padding: 14px 16px; border-bottom: 1px solid #f0f0f0;
    display: flex; gap: 12px; align-items: center;
}
.contact-list .item:last-child { border-bottom: 0;}
.contact-list .item .ic {
    width: 36px; height: 36px; line-height: 36px; text-align: center;
    border-radius: 50%; border: 1px solid #ce3c39; color: #ce3c39;
    font-size: 16px; flex-shrink: 0;
}
.contact-list .item .t { font-size: 14px; color: #000; font-weight: 500;}
.contact-list .item .s { font-size: 12px; color: #888; margin-top: 2px;}

/* ───────── 底部 tabbar ───────── */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 99;
    height: 56px; background: #fff; border-top: 1px solid #e5e5e5;
    display: flex;
}
.tabbar .tab {
    flex: 1; text-align: center; padding: 6px 0;
    color: #888; font-size: 11px;
}
.tabbar .tab .ic {
    width: 24px; height: 24px; margin: 0 auto 2px;
    display: flex; align-items: center; justify-content: center;
}
.tabbar .tab .ic svg { width: 22px; height: 22px; stroke: #888; fill: none; stroke-width: 1.6;}
.tabbar .tab.active { color: #ce3c39;}
.tabbar .tab.active .ic svg { stroke: #ce3c39;}

/* ───────── Banner 简图占位（无真图时显示） ───────── */
.banner-placeholder {
    width: 100%; height: 100%; background: #ce3c39;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.banner-placeholder .p-title {
    font-size: 22px; font-weight: bold;
}
.banner-placeholder .p-sub {
    font-size: 13px; margin-top: 8px; opacity: .9;
}

/* 简单分隔辅助类 */
.muted { color: #888; font-size: 12px;}
.center { text-align: center;}