/* ============================================================
   345VIP · 手机端专属适配 (mobile.css)
   断点：max-width 480px (手机竖屏) + 600px landscape
   策略：侧栏→底部导航、卡片单列、弹窗全屏、触摸目标44px+、安全区适配
   加载顺序：在 tokens.css / components.css / styles.css 之后加载
   ============================================================ */

/* ===================== 全局手机适配 ===================== */

@media (max-width: 480px) {

  /* —— 安全区（刘海/底部横条）—— */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* —— 字号微调 —— */
  body { font-size: 15px; }

  /* —— 触摸目标最小 44px —— */
  .btn, .btn-primary, .btn-lg, .btn-line, .btn-ghost,
  .nav-item, .nav-item .ic, .copy-btn, .copy-inline,
  .filter-bar .fbtn, .seg-tabs button, .vs-btn,
  .pw-box button, .kefu-btn, .toggle,
  .task-card .tc-btn, .card button.mk,
  .actions button, .modal-actions .btn,
  .dash-action-btn, .bill-pay-btn {
    min-height: 44px;
  }

  /* —— 弹窗全屏 —— */
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 20px 16px !important;
    padding-top: max(20px, env(safe-area-inset-top, 0px)) !important;
  }
  .modal-mask, .modal-mask.show {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .modal-close {
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
  }

  /* —— 密码门全屏 —— */
  .pw-mask { padding: 20px; }
  .pw-box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 20px !important;
  }
  .pw-box input { font-size: 16px; /* 防 iOS 缩放 */ }

  /* —— 输入框防 iOS 缩放 —— */
  input, select, textarea { font-size: 16px !important; }

  /* —— 表格横向滚动优化 —— */
  .tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
  }
  .tbl-scroll .tbl {
    min-width: 480px;
  }
  .tbl th, .tbl td {
    padding: 10px 8px;
    white-space: nowrap;
  }

  /* —— SVG 图表横向滚动：双轴折线图在窄屏保持原宽，避免坐标/数值被压扁到看不清 —— */
  .chart-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chart-scroll svg {
    max-width: none !important;   /* 覆盖 app.js 内联的 max-width:100%，否则会被压扁 */
    width: 640px !important;
    height: auto;
  }

  /* —— 通用卡片/面板间距收紧 —— */
  .panel { padding: 14px; margin-bottom: 14px; }
  .card-box { padding: 14px; }

  /* —— 页面头部 —— */
  .page-head h2 { font-size: 20px; }
  .page-head p { font-size: 12px; }

  /* —— 悬浮客服按钮下移避开底部导航 —— */
  .kefu { bottom: 80px !important; right: 14px !important; }
  .kefu-btn { width: 48px; height: 48px; }
}

/* ===================== 中控后台 (admin.html / components.css) ===================== */

@media (max-width: 480px) {

  /* —— 侧栏 → 底部固定导航条 —— */
  .app {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto;
  }
  .sidebar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    height: auto !important;
    max-height: 64px;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 6px 4px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important;
    z-index: 90 !important;
    border-right: none !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -2px 12px rgba(15,23,42,.06);
    background: var(--surface) !important;
    backdrop-filter: blur(12px);
  }
  /* 品牌区/版本号/间隔器在底部导航中隐藏 */
  .sidebar .brand,
  .sidebar .spacer,
  .sidebar .ver {
    display: none !important;
  }
  /* 中控导航项仅 2 个，让 .nav 不占满宽，把主题键一起排进底部栏（避免溢出/重叠） */
  .nav { width: auto !important; }
  /* 导航项：等宽排列，只显示图标 */
  .nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100%;
    justify-content: space-around;
    gap: 0 !important;
    margin: 0 !important;
  }
  .nav-item {
    flex: 1;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 6px 2px !important;
    margin: 0 !important;
    border-radius: var(--radius-sm) !important;
    font-size: 11px !important;
    text-align: center;
    justify-content: center;
    min-height: 52px;
  }
  /* 激活态强化（与控制台一致） */
  .nav-item.active {
    color: var(--brand);
    font-weight: 700;
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    border-radius: 10px;
    position: relative;
  }
  .nav-item.active::before {
    content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 2px; background: var(--brand);
  }
  .nav-item svg {
    width: 22px !important;
    height: 22px !important;
  }
  .nav-item .ic { width: auto !important; }

  /* —— 主内容区留出底部导航空间 —— */
  .main { padding-bottom: 70px; }

  /* —— Topbar 精简 —— */
  .topbar {
    height: 52px !important;
    padding: 0 14px !important;
  }
  .topbar .page-title { font-size: 16px !important; }
  .topbar .page-sub { display: none; }
  .topbar-right .btn { font-size: 12px !important; padding: 6px 10px; }
  .topbar-right { gap: 6px !important; }
  .avatar { width: 28px; height: 28px; font-size: 12px !important; }

  /* —— Canvas 间距 —— */
  .canvas { padding: 14px 12px !important; }

  /* —— KPI 卡片单列 —— */
  .cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .kpi .v { font-size: 22px !important; }

  /* —— 数据看板 v2 —— */
  .hero-cards { grid-template-columns: 1fr !important; gap: 12px !important; }
  .hero-card { padding: 16px !important; }
  .hero-value { font-size: 28px !important; }
  .metric-row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .mc-value { font-size: 18px !important; }

  /* —— 视图切换器横向滚动 —— */
  .view-switcher {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .vs-btn { white-space: nowrap; padding: 8px 14px; }

  /* —— 漏斗图 —— */
  .funnel { height: 110px !important; gap: 6px !important; }
  .funnel .bar .lbl { font-size: 10px !important; }
  .funnel-wrap { padding-bottom: 24px; }

  /* —— 趋势图 —— */
  .trend { height: 72px !important; gap: 8px !important; }
  .tbar .bv, .tbar .bh { width: 8px !important; }
  .tdate { font-size: 10px !important; }

  /* —— BD 引擎：漏斗条纵向全宽 —— */
  .funnel-bar {
    flex-direction: row !important;
    align-items: center;
  }
  .funnel-bar .lbl { min-width: 60px; font-size: 12px; }
  .funnel-bar .bar { height: 18px; }
  .funnel-bar .cnt { font-size: 13px; }
  .funnel-bar .pct { display: none; }

  /* —— BD 任务卡片 —— */
  .task-card { padding: 12px; }
  .task-card .tc-company { font-size: 14px; }
  .task-card .tc-body { font-size: 12px; }
  .task-card .tc-btns { flex-wrap: wrap; }
  .task-card .tc-btn { font-size: 12px; padding: 6px 12px; }

  /* —— BD 潜在客户表格横向滚动 —— */
  #bdCanvas .tbl-scroll .tbl { min-width: 520px; }

  /* —— 账单页 —— */
  .bill-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .bill-card { padding: 16px !important; }
  .bill-card-value { font-size: 26px !important; }
  .bill-cum-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .bill-cum-num { font-size: 22px !important; }
  .bill-pay-btn { width: 100% !important; padding: 14px !important; }

  /* —— 环形图纵向排列 —— */
  .ring-chart-wrap { flex-direction: column !important; text-align: center; }

  /* —— 条形图标签 —— */
  .bar-row .rl { width: 70px; font-size: 12px; }
  .rbar .rl { width: 72px; font-size: 12px; }

  /* —— 行动建议表格滚动 —— */
  .ch-tbl { min-width: 400px; }

  /* —— 拦截率头版 —— */
  .block-headline {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 14px;
  }
  .block-headline .bh-num { font-size: 30px; min-width: auto; }
  .block-headline .bh-txt { font-size: 13px; }

  /* —— 详情弹窗 kv 行 —— */
  .kv { font-size: 12px; padding: 8px 0; }
  .kv .lbl { min-width: 80px; flex: 0 0 80px; }

  /* —— seg-2 / script-full 话术弹窗 —— */
  .seg-2 .txt, .script-full { font-size: 14px; padding: 10px; line-height: 1.7; }
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; justify-content: center; }
}

/* ===================== 客户门户 (index.html / styles.css) ===================== */

@media (max-width: 480px) {

  /* —— 侧栏 → 底部固定导航条 —— */
  .shell { flex-direction: column !important; }
  .sidebar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    height: auto !important;
    max-height: 64px;
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 6px 4px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important;
    z-index: 90 !important;
    border-right: none !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -2px 12px rgba(15,23,42,.06);
  }
  .sidebar .logo { display: none !important; }
  .sidebar .spacer, .sidebar .ver { display: none !important; }

  .nav-item {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 6px 2px !important;
    margin: 0 !important;
    font-size: 11px !important;
    text-align: center;
    flex: 1;
    min-height: 52px;
    justify-content: center;
  }
  /* 手机端底部栏收敛到 ≤5：合并冗余的线索明细、把设置移入顶栏齿轮 */
  .sidebar .nav-item[data-route="leaddetail"],
  .sidebar .nav-item[data-route="settings"] { display: none !important; }
  /* 激活态强化：品牌色文字 + 胶囊底 + 顶部 2px 高亮条 */
  .nav-item.active {
    color: var(--brand);
    font-weight: 700;
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    border-radius: 10px;
    position: relative;
  }
  .nav-item.active::before {
    content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 2px; background: var(--brand);
  }
  .nav-item .ic { width: auto !important; }
  .nav-item .ic svg { width: 22px !important; height: 22px !important; }
  /* 设置齿轮顶栏按钮：仅手机端显示 */
  .topbar-right .nav-settings-btn { display: inline-grid !important; }

  /* —— 主内容留底 —— */
  .main { padding-bottom: 70px; }

  /* —— Topbar —— */
  .topbar {
    height: 50px !important;
    padding: 0 14px !important;
  }
  .topbar .page-title { font-size: 15px !important; }
  .topbar .user { gap: 6px; font-size: 12px; }
  .topbar .logout { padding: 5px 10px; font-size: 12px; }
  .topbar-home { padding: 5px 10px; font-size: 12px; }
  .topbar-left { gap: 8px; }

  /* —— 内容区 —— */
  .content { padding: 14px 12px !important; max-width: 100% !important; }

  /* —— 卡片单列 —— */
  .cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stat .v { font-size: 22px !important; }
  .stat { padding: 14px; }

  /* —— 意向客户网格单列 —— */
  .grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .card { padding: 14px; }

  /* —— 营销顾问工作台单列 —— */
  .workbench { grid-template-columns: 1fr !important; gap: 12px; }
  .lead-pick { max-height: 300px; }

  /* —— 平台卡片单列 —— */
  .pf-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .pf-card-head { padding: 12px 14px 4px; }
  .pf-name { font-size: 14px; }
  .pf-card-sub { padding: 0 14px 10px; font-size: 11px; }
  .pf-card-body { padding: 4px 14px 14px; }
  .pf-td-k { width: 100px; font-size: 12px; }
  .pf-tbl td { font-size: 12px; padding: 8px 4px; }
  .pf-bar-name { width: 60px; font-size: 11px; }

  /* —— 接入说明 cb-grid 单列 —— */
  .cb-grid { grid-template-columns: 1fr !important; }
  .cb-card { padding: 14px; }

  /* —— 话术弹窗 —— */
  .seg .txt { font-size: 14px; padding: 10px; }
  .full { font-size: 14px; padding: 10px; line-height: 1.7; }
  .actions { flex-direction: column; }
  .actions button { width: 100%; }

  /* —— 拦截率头版 —— */
  .block-headline {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 14px;
  }
  .block-headline .bh-num { font-size: 30px; min-width: auto; }

  /* —— 趋势 / 漏斗 —— */
  .funnel { height: 100px !important; gap: 6px; }
  .funnel-wrap { padding-bottom: 24px; }
  .trend { height: 72px !important; gap: 8px; }
  .tbar .bv, .tbar .bh { width: 8px !important; }

  /* —— 无效原因条形 —— */
  .rbar .rl { width: 72px; font-size: 12px; }
  .rbar .rfill { height: 14px; }

  /* —— 过滤条横向滚动 —— */
  .filter-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .filter-bar .fbtn { white-space: nowrap; }

  /* —— 登录/注册 —— */
  .auth-wrap { flex-direction: column !important; }
  .auth-brand { padding: 30px 20px !important; }
  .auth-brand .brand-lockup { gap: 10px; margin-bottom: 16px; }
  .auth-brand .logo-mark { height: 52px; }
  .auth-brand .brand-cn { font-size: 28px; }
  .auth-brand .brand-en { font-size: 13px; }
  .auth-brand h1 { font-size: 28px !important; }
  .auth-brand p { font-size: 13px !important; max-width: 100% !important; }
  .auth-points { margin-top: 18px; gap: 8px; }
  .auth-points li { padding: 10px 12px; font-size: 13px; }
  .auth-form { width: 100% !important; padding: 30px 20px !important; }
  .auth-form h2 { font-size: 20px; }
  .auth-form .hint { font-size: 12px; }

  /* —— 悬浮客服按钮（压到弹窗遮罩之下，避免穿透）—— */
  .kefu { bottom: 80px !important; right: 14px !important; z-index: 90 !important; }
  .kefu-btn { width: 48px; height: 48px; }

  /* —— 服务态横幅 —— */
  .svc { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; font-size: 14px; }

  /* —— 欢迎弹窗 —— */
  .welcome-modal .wm-hero { font-size: 18px; }
  .welcome-modal .wm-body { font-size: 13px; }
  .welcome-modal .wm-actions .btn-primary { padding: 12px 24px; font-size: 14px; }

  /* —— 接入说明书弹窗 —— */
  .guide-modal h3 { font-size: 16px; }
  .guide-modal .gm-section { padding: 12px; }
  .guide-modal .gm-section h4 { font-size: 14px; }
  .guide-modal .gm-step { font-size: 13px; }

  /* —— 数据看板 v2（与 admin 共享部分类名）—— */
  .hero-cards { grid-template-columns: 1fr !important; }
  .metric-row { grid-template-columns: 1fr 1fr !important; }

  /* —— boss 视图操作按钮在手机上占满宽度 —— */
  .dash-action-row { display: flex; }
  .dash-action-btn { width: 100%; justify-content: center; }
}

/* ===================== 落地页 (home.html) ===================== */

@media (max-width: 480px) {

  /* —— 导航 —— */
  .nav { padding: 10px 16px !important; }
  .nav .brand { font-size: 16px; }
  .nav .brand .logo-mark { height: 42px; }
  .nav .brand .brand-cn { font-size: 22px; }
  .nav .brand .brand-en { font-size: 10px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn { padding: 6px 12px; font-size: 12px; }
  .theme-toggle { width: 40px; height: 40px; padding: 6px; }

  /* —— Hero —— */
  .portal-hero { margin: 24px 12px 20px !important; max-width: 100% !important; }
  .portal-hero .eyebrow { font-size: 12px; padding: 4px 12px; margin-bottom: 14px; }
  .portal-hero h1 { font-size: 28px !important; letter-spacing: -.5px !important; }
  .portal-hero p { font-size: 14px !important; margin-top: 14px !important; }
  .portal-hero .cta-row { flex-direction: column; gap: 10px; margin-top: 22px; }
  .portal-hero .cta-row .btn { width: 100%; justify-content: center; padding: 14px; font-size: 15px; }

  /* —— 拦截率条 —— */
  .intercept-strip {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding: 16px;
    margin: 20px 0;
  }
  .intercept-strip .num { font-size: 28px; }
  .intercept-strip .txt { font-size: 13px; }

  /* —— 优势卡片 —— */
  .benefits { grid-template-columns: 1fr !important; gap: 12px; }
  .benefit { padding: 18px; }
  .benefit .ic { width: 36px; height: 36px; }
  .benefit h4 { font-size: 15px; }
  .benefit p { font-size: 13px; }

  /* —— 页脚 —— */
  .footer { padding: 20px 16px; }
  .footer-inner { flex-direction: column; gap: 16px; text-align: center; }
  .footer-cta h3 { font-size: 18px; }
  .footer-cta p { font-size: 13px; }
  .kefu { justify-content: center; }
  .kefu img { width: 80px; height: 80px; }
  .copyright { padding: 16px; font-size: 11px; text-align: center; }
}

/* ===================== 手机横屏补丁 (max-width: 600px landscape) ===================== */

@media (max-width: 600px) and (orientation: landscape) {
  /* 横屏时弹窗不完全全屏，留边距 */
  .modal {
    max-width: 94vw !important;
    max-height: 92vh !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border) !important;
    padding: 20px !important;
  }
  .modal-mask, .modal-mask.show {
    padding: 16px !important;
    align-items: center !important;
  }
}

/* ===================== 平板竖屏微调 (481px-768px) ===================== */

@media (min-width: 481px) and (max-width: 768px) {
  /* 平板上侧栏保持顶部横条，但优化间距 */
  .nav-item { padding: 8px 10px; font-size: 13px; }
  .canvas { padding: 20px 16px; }
  .content { padding: 20px 16px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .hero-cards { grid-template-columns: repeat(2, 1fr); }
  .metric-row { grid-template-columns: repeat(2, 1fr); }
}