/* ============================================
   晋级专区服务综合管理平台 - 客户端公共样式
   风格：微信小程序式极简
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: #e9ecf1;
    color: #1f2329;
    font-size: 14px;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

/* 页面容器（小程序宽度） */
.app {
    max-width: 420px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f6f7f9;
    position: relative;
    padding-bottom: 76px;
}

/* 顶部导航栏 */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 48px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ebedf0;
}

.topbar .title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2329;
    letter-spacing: 1px;
}

/* 底部标签栏 */
.tabbar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 420px;
    height: 56px;
    background: #ffffff;
    border-top: 1px solid #ebedf0;
    display: flex;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
}

.tabbar .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #8a919f;
    font-size: 11px;
    cursor: pointer;
}

.tabbar .tab-item svg {
    width: 22px;
    height: 22px;
}

.tabbar .tab-item.active {
    color: #07c160;
    font-weight: 600;
}

/* 通用卡片 */
.card {
    background: #ffffff;
    border-radius: 12px;
    margin: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(31, 35, 41, 0.04);
}

/* 区块标题 */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 12px 8px;
}

.section-header .section-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2329;
    display: flex;
    align-items: center;
}

.section-header .section-title::before {
    content: "";
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: #07c160;
    margin-right: 8px;
}

.section-header .section-more {
    font-size: 12px;
    color: #8a919f;
}

/* 表单 */
.form-item {
    margin-bottom: 14px;
}

.form-item label {
    display: block;
    font-size: 13px;
    color: #51565d;
    margin-bottom: 6px;
}

.form-item input {
    width: 100%;
    height: 42px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    color: #1f2329;
    background: #f7f8fa;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.form-item input:focus {
    border-color: #07c160;
    background: #ffffff;
}

.btn-primary {
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 8px;
    background: #07c160;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-primary:active {
    opacity: 0.85;
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-plain {
    width: 100%;
    height: 42px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    background: #ffffff;
    color: #51565d;
    font-size: 15px;
    cursor: pointer;
}

.btn-plain:active {
    background: #f2f3f5;
}

/* 轻提示 toast */
.toast {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 8px;
    z-index: 999;
    max-width: 80%;
    text-align: center;
    display: none;
}

/* 主内容包裹层：大屏分栏时作为「右栏」，小屏下无样式，不影响原有布局 */
.page-main {
    min-width: 0;
}


/* ============================================
   多端适配：小屏手机 / 中屏平板 / 大屏 PC
   对齐微信《大屏适配指南》
     小屏手机 sm  < 768px
     中屏平板 md  768px ~ 1023px
     大屏 PC  lg  >= 1024px  → 分栏模式（左导航 + 右内容）
   ============================================ */

/* ---------- 24 栅格（对齐小程序 row / col 组件） ---------- */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -6px;
    margin-right: -6px;
}
.row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
    min-width: 0;
    box-sizing: border-box;
}
.col-24 { flex: 0 0 100%;     max-width: 100%; }
.col-18 { flex: 0 0 75%;      max-width: 75%; }
.col-16 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-12 { flex: 0 0 50%;      max-width: 50%; }
.col-8  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-6  { flex: 0 0 25%;      max-width: 25%; }
.col-4  { flex: 0 0 16.6667%; max-width: 16.6667%; }

/* 屏幕越大 → 同一模块占的份数越少 → 一行容纳更多内容（模块换行排列） */
@media screen and (min-width: 768px) {
    .col-md-24 { flex: 0 0 100%;     max-width: 100%; }
    .col-md-12 { flex: 0 0 50%;      max-width: 50%; }
    .col-md-8  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-md-6  { flex: 0 0 25%;      max-width: 25%; }
}
@media screen and (min-width: 1024px) {
    .col-lg-24 { flex: 0 0 100%;     max-width: 100%; }
    .col-lg-12 { flex: 0 0 50%;      max-width: 50%; }
    .col-lg-8  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-lg-6  { flex: 0 0 25%;      max-width: 25%; }
    .col-lg-4  { flex: 0 0 16.6667%; max-width: 16.6667%; }
}

/* ---------- 按屏幕档位显示/隐藏 ----------
   依赖 assets/adapt.js 打在 <html> 上的 data-screen 标记
   用法：<div class="u-hide-lg">大屏下收起（模块可折叠/展现）</div> */
html[data-screen="sm"] .u-hide-sm,
html[data-screen="md"] .u-hide-md,
html[data-screen="lg"] .u-hide-lg {
    display: none !important;
}

/* ---------- 中屏（平板）768px ~ 1023px ----------
   同一类布局，模块左右伸缩：容器变宽，比例微调 */
@media screen and (min-width: 768px) {
    .app { max-width: 720px; }
    .tabbar { max-width: 720px; }

    .topbar { height: 52px; }
    .topbar .title { font-size: 17px; }
    .search-zone { padding: 12px 18px; }
    .search-bar { height: 40px; border-radius: 20px; }
    .search-bar input { font-size: 15px; }

    .card { margin: 14px 18px; padding: 20px; }
    .section-header { margin: 18px 18px 10px; }
}

/* ---------- 大屏（PC）>= 1024px：保持底部 tabbar，仅放大居中卡片 ----------
   设计要求：tabbar 始终固定在底部不挪位
   PC 上把内容区升级为「居中卡片」：白底 + 浅阴影 + 圆角，模拟手机/平板视图 */
@media screen and (min-width: 1024px) {
    body { background: #e9ecf1; }

    /* 内容区：固定宽度居中卡片，底栏为其预留空间 */
    .app {
        max-width: 960px;
        min-height: 100vh;
        background: #ffffff;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.06);
        padding-bottom: 76px;   /* 继续为底部 tabbar 留位 */
    }

    /* 关键：tabbar 仍然是固定底栏，不变成侧边导航 */
    .tabbar {
        position: fixed;
        bottom: 0;
        left: 50%;
        right: auto;
        top: auto;
        transform: translateX(-50%);
        flex-direction: row;             /* 保持水平排列 */
        max-width: 960px;               /* 跟 .app 等宽，居中 */
        border-top: 1px solid #ebedf0;
        border-right: none;
        background: #ffffff;
    }
    .tabbar .tab-item {
        flex-direction: column;          /* 小屏样式继续生效 */
        height: 56px;
        padding: 0;
    }
    .tabbar .tab-item svg { width: 22px; height: 22px; }
    .tabbar .tab-item.active { font-weight: 600; }
    .tabbar .tab-item.active::before { display: none; }  /* 不要侧边高亮条 */

    /* 主内容区（大屏下用 24 栅格可一行多列） */
    .page-main {
        background: #ffffff;
    }

    .topbar { height: 56px; }
    .topbar .title { font-size: 18px; letter-spacing: 2px; }
    .search-zone { padding: 14px 24px; }
    /* 搜索栏跟顶栏同宽，不再居中收成小框 */
    .search-bar { height: 44px; border-radius: 22px; }

    .card { margin: 16px 24px; padding: 24px; border-radius: 14px; }
    .section-header { margin: 20px 24px 10px; }

    /* 我的页：登录/注册表单做成居中卡片（me-header、菜单项已默认全宽） */
    .auth-wrap { max-width: 480px; margin: 20px auto 0; }
    .auth-title { text-align: center; }
    .auth-switch { text-align: center; }

    /* PC：me-user 居中 + 放大头像，避免内容贴左边显得头重脚轻 */
    .me-user { justify-content: center; padding: 40px 0 36px; }
    .me-avatar { width: 80px; height: 80px; font-size: 32px; }
    .me-info { margin-left: 20px; }
    .me-name { font-size: 24px; }
}