/* =====================================================================
   全尺寸响应式适配层
   覆盖：小屏手机 / 主流手机 / 折叠屏(展开·折叠) / iPad / 华为Pad /
        平板横竖屏 / 笔记本 / 桌面 / 2K·4K
   要点：安全区(刘海·挖孔·手势条) / 触控目标≥44px / 表格卡片化 /
        折叠屏视口分段 / 横屏优化
   ===================================================================== */

/* ------------------------------------------------------------- 全局 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }

/* iOS 输入框字号 <16px 会触发自动缩放，这里强制规避 */
@media (max-width: 767px) {
  .fld input, .fld select, .fld textarea, .inp { font-size: 16px; }
}

/* 触控设备：去掉 hover 位移/阴影，加大点击区 */
@media (hover: none) and (pointer: coarse) {
  .mkt-card:hover { transform: none; box-shadow: none; }
  .btn.primary:hover:not(:disabled) { transform: none; }
  .nav-item { min-height: 46px; }
  .btn { min-height: 42px; }
  .btn.sm { min-height: 38px; }
  .btn.xs { min-height: 34px; padding: 6px 11px; }
  .tabbar .tb-item { -webkit-tap-highlight-color: transparent; }
  table.tbl tbody tr:hover { background: transparent; }
  .chip { min-height: 36px; }
}

/* ------------------------------------------------------------- 侧栏抽屉 */
.menu-btn {
  display: none; background: var(--panel2); border: 1px solid var(--line2);
  border-radius: 10px; width: 40px; height: 40px; font-size: 17px; color: var(--txt);
  cursor: pointer; flex-shrink: 0; align-items: center; justify-content: center;
}
.menu-btn:active { background: var(--panel3); }
.side-close { display: none; background: none; border: none; color: var(--txt2);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; margin-left: auto; }
.scrim { display: none; position: fixed; inset: 0; background: rgba(4,7,12,.66);
  backdrop-filter: blur(3px); z-index: 55; }
.scrim.on { display: block; }

/* ------------------------------------------------------------- 底部导航 */
.tabbar { display: none; }

/* ------------------------------------------------------------- 安装条 */
.install-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: calc(100% - 24px); max-width: 520px;
  display: flex; align-items: center; gap: 11px;
  background: rgba(21,29,44,.97); border: 1px solid var(--line2);
  border-radius: 16px; padding: 11px 13px; z-index: 8800;
  box-shadow: 0 12px 40px rgba(0,0,0,.6); animation: ibIn .3s ease;
}
@keyframes ibIn { from { opacity: 0; transform: translateX(-50%) translateY(18px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.install-bar img { border-radius: 10px; flex-shrink: 0; }
.install-bar .ib-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.install-bar .ib-txt b { font-size: 13.5px; }
.install-bar .ib-txt span { font-size: 11.5px; color: var(--txt3); }
.install-bar .ib-x { background: none; border: none; color: var(--txt3); font-size: 20px;
  cursor: pointer; padding: 0 4px; flex-shrink: 0; }

/* ------------------------------------------------------------- 网络提示 */
.net-tip {
  position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%;
  transform: translateX(-50%); background: rgba(245,158,11,.95); color: #23180a;
  font-size: 12.5px; font-weight: 500; padding: 7px 16px; border-radius: 20px;
  z-index: 9500; box-shadow: 0 6px 20px rgba(0,0,0,.4);
}

/* =====================================================================
   ≥1920px  2K / 4K 大屏
   ===================================================================== */
@media (min-width: 1920px) {
  body { font-size: 15px; }
  .app { grid-template-columns: 258px 1fr; }
  .content { padding: 26px 40px 70px; max-width: 2200px; }
  .topbar { padding: 17px 40px; }
  .stat .vl { font-size: 28px; }
}

/* =====================================================================
   1440 - 1919  桌面
   ===================================================================== */
@media (max-width: 1680px) {
  .g6 { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================================
   1024 - 1439  小笔记本 / iPad 横屏 / 平板横屏
   ===================================================================== */
@media (max-width: 1439px) {
  .g6 { grid-template-columns: repeat(3, 1fr); }
  .g5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1180px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g5 { grid-template-columns: repeat(2, 1fr); }
  .g6 { grid-template-columns: repeat(2, 1fr); }
  .app { grid-template-columns: 198px 1fr; }
  .content { padding: 18px 18px 50px; }
  .topbar { padding: 13px 18px; }
  .logo { padding: 16px 14px; }
  .nav-item { padding: 9px 11px; font-size: 13px; }
}

/* =====================================================================
   ≤1023  平板竖屏 / 折叠屏展开
   ===================================================================== */
@media (max-width: 1023px) {
  .app { grid-template-columns: 1fr; }

  /* 侧栏改为抽屉 */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 268px; z-index: 60;
    transform: translateX(-100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    box-shadow: 8px 0 40px rgba(0,0,0,.55);
  }
  .sidebar.open { transform: translateX(0); }
  .side-close { display: block; }
  .menu-btn { display: inline-flex; }

  .topbar { gap: 10px; padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right: calc(14px + env(safe-area-inset-right, 0px)); }
  .tb-left { flex: 1; min-width: 0; }
  .tb-left h2 { font-size: 16.5px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .tb-sub { display: none; }

  /* 底部导航 */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: rgba(13,18,28,.97); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar .tb-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 2px 9px; color: var(--txt3); font-size: 10.5px;
    transition: color .16s; position: relative; cursor: pointer;
  }
  .tabbar .tb-item em { font-style: normal; font-size: 17px; line-height: 1; }
  .tabbar .tb-item.active { color: var(--brand2); }
  .tabbar .tb-item.active::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg,var(--brand),var(--accent));
  }

  .content { padding: 14px 14px calc(84px + env(safe-area-inset-bottom, 0px)); }
  .topbar { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }

  .g2, .g3, .g4, .g5, .g6 { grid-template-columns: repeat(2, 1fr); }
  .modal { max-width: 640px; }
}

/* =====================================================================
   ≤767  手机（含折叠屏折叠态、大屏手机）
   ===================================================================== */
@media (max-width: 767px) {
  body { font-size: 13.5px; }

  .g2, .g3, .g4, .g5, .g6 { grid-template-columns: 1fr; }
  .g2.mob-2, .grid.mob-2 { grid-template-columns: repeat(2, 1fr) !important; }

  .content { padding: 12px 12px calc(80px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px)); }

  .card { padding: 14px 15px; border-radius: 14px; }
  .card-h { margin-bottom: 12px; flex-wrap: wrap; }
  .card-h h3 { font-size: 13.5px; }

  .stat { padding: 13px 15px; border-radius: 14px; }
  .stat .vl { font-size: 21px; }
  .stat .lb { font-size: 11.5px; }
  .stat .ex { font-size: 11px; }

  .mkt-card { padding: 13px 15px; }
  .mkt-card .mc-val { font-size: 19px; }
  .mkt-card:hover { transform: none; }

  .toolbar { gap: 8px; }
  .toolbar .inp { flex: 1 1 auto; min-width: 0; }
  .toolbar select.inp { flex: 0 0 auto; min-width: 120px; }

  /* 顶部用户菜单压缩 */
  .um-info { display: none; }
  .user-menu { padding: 4px; }
  .um-drop { min-width: 172px; }
  .um-drop a { padding: 11px 14px; font-size: 14px; }

  /* 弹窗全屏化 */
  .modal-mask { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%; width: 100%; max-height: 92vh;
    border-radius: 20px 20px 0 0; border-bottom: none;
    animation: sheetUp .26s cubic-bezier(.32,.72,0,1);
  }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .modal-head { padding: 16px 18px; position: sticky; top: 0; background: var(--panel);
    z-index: 2; border-radius: 20px 20px 0 0; }
  .modal-head::before {
    content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 3px; background: var(--line2);
  }
  .modal-head h3 { font-size: 15px; }
  .modal-body { padding: 16px 18px; }
  .modal-foot { padding: 13px 18px calc(13px + env(safe-area-inset-bottom, 0px));
    position: sticky; bottom: 0; background: var(--panel); }
  .modal-foot .btn { flex: 1; }

  /* 步骤条紧凑 */
  .steps .st { font-size: 10.5px; padding-top: 28px; }
  .steps .st::before { width: 21px; height: 21px; font-size: 10.5px; }

  .tabs { margin-bottom: 14px; }
  .tabs button { padding: 10px 13px; font-size: 13px; }

  .toast-wrap { top: auto; bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    left: 12px; right: 12px; align-items: stretch; }
  .toast { min-width: 0; max-width: none; }

  .btn.sm { padding: 8px 13px; font-size: 13px; }
  .chip { padding: 7px 12px; font-size: 12.5px; }
  .chip-wrap { max-height: 160px; }

  .auth-wrap { grid-template-columns: 1fr; }
  .auth-left { display: none; }
  .auth-right { padding: 0; align-items: stretch; }
  .auth-card {
    max-width: 100%; border-radius: 0; border: none;
    padding: calc(30px + env(safe-area-inset-top, 0px)) 22px
             calc(30px + env(safe-area-inset-bottom, 0px));
    background: transparent; backdrop-filter: none; box-shadow: none;
    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
    justify-content: center;
  }
  .auth-tabs { max-width: 100%; }
  .auth-mobile-brand { display: block !important; }
  .fld { margin-bottom: 14px; }
  .code-row input { font-size: 16px; letter-spacing: 2px; }

  .chart { height: 250px; }
  .chart.sm { height: 200px; }
  .chart.lg { height: 300px; }

  .pager { flex-wrap: wrap; justify-content: center; padding: 12px; }
  .tbl-wrap { max-height: none; }
}

/* =====================================================================
   ≤430  主流手机（iPhone 12~16 / 华为 Mate / 小米 / OPPO）
   ===================================================================== */
@media (max-width: 430px) {
  .tabbar .tb-item span { font-size: 10px; }
  .tb-left h2 { font-size: 15.5px; }
  .stat .vl { font-size: 20px; }
  .mkt-card .mc-val { font-size: 18px; }
  .card { padding: 13px 13px; }
}

/* =====================================================================
   ≤360  小屏手机 / 折叠屏折叠态
   ===================================================================== */
@media (max-width: 360px) {
  body { font-size: 13px; }
  .content { padding-left: 10px; padding-right: 10px; }
  .card { padding: 12px 11px; }
  .stat .vl { font-size: 18px; }
  .avatar { width: 27px; height: 27px; font-size: 12px; }
  .menu-btn { width: 36px; height: 36px; font-size: 15px; }
  .tb-left h2 { font-size: 14.5px; }
  .tabbar .tb-item em { font-size: 15.5px; }
  .tabbar .tb-item span { font-size: 9.5px; }
}

/* =====================================================================
   表格卡片化（≤900px，覆盖 iPad mini / 10.9" 竖屏）
   依靠 JS 输出 data-label 属性
   ===================================================================== */
@media (max-width: 900px) {
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-wrap::-webkit-scrollbar { height: 4px; }

  table.tbl.cardable { min-width: 0; }
  table.tbl.cardable thead { display: none; }
  table.tbl.cardable, table.tbl.cardable tbody,
  table.tbl.cardable tr, table.tbl.cardable td { display: block; width: 100%; }
  table.tbl.cardable tr {
    background: var(--panel2); border: 1px solid var(--line);
    border-radius: 12px; margin-bottom: 10px; padding: 12px 13px;
    position: relative;
  }
  table.tbl.cardable tbody tr:hover { background: var(--panel2); }
  table.tbl.cardable td {
    border: none; padding: 4px 0; white-space: normal;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; text-align: right;
  }
  table.tbl.cardable td::before {
    content: attr(data-label);
    color: var(--txt3); font-size: 11.5px; font-weight: 400;
    text-align: left; flex-shrink: 0; padding-top: 1px;
  }
  table.tbl.cardable td.primary-cell {
    display: block; text-align: left; padding-bottom: 8px;
    margin-bottom: 7px; border-bottom: 1px solid var(--line);
  }
  table.tbl.cardable td.primary-cell::before { display: none; }
  table.tbl.cardable td.primary-cell .pc-row {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  }
  table.tbl.cardable td.primary-cell .pc-code {
    font-family: var(--mono); font-size: 12px; color: var(--brand2);
  }
  table.tbl.cardable td.primary-cell .pc-name { font-size: 14px; font-weight: 500; }
  table.tbl.cardable td.actions-cell {
    justify-content: flex-end; flex-wrap: wrap; gap: 7px;
    margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--line);
  }
  table.tbl.cardable td.actions-cell::before { display: none; }
  table.tbl.cardable .prob-bar { width: 62px; }
}

/* =====================================================================
   折叠屏（可折设备）
   Chrome/Edge 支持 viewport-segments；华为/三星部分支持
   ===================================================================== */
@media (horizontal-viewport-segments: 2) {
  /* 左右双屏展开：主内容与辅助信息分列 */
  .app { grid-template-columns: 232px 1fr 1fr; }
  .sidebar { position: sticky; transform: none; }
  .menu-btn, .side-close { display: none; }
  .scrim { display: none !important; }
  .g2, .g3, .g4, .g5, .g6 { grid-template-columns: repeat(2, 1fr); }
  .tabbar { display: none; }
  .content { padding-bottom: 40px; }
}

@media (vertical-viewport-segments: 2) {
  /* 上下双屏（如翻盖折叠展开） */
  .content { padding-bottom: 40px; }
  .tabbar { display: flex; }
}

/* 展开态宽高比特征（部分折叠屏可用宽高比判定） */
@media (min-width: 600px) and (max-width: 900px) and (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
  .g2, .g3, .g4, .g5 { grid-template-columns: repeat(2, 1fr); }
  .content { padding-left: 20px; padding-right: 20px; }
}

/* =====================================================================
   横屏（手机横置 / 平板横置）
   ===================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  .tabbar { display: none; }
  .content { padding-bottom: 20px; }
  .modal-mask { align-items: center; padding: 12px; }
  .modal { max-height: 94vh; border-radius: 16px; width: 100%; max-width: 720px; }
  .modal-head::before { display: none; }
  .auth-card { min-height: auto; padding: 24px 22px; }
  .chart { height: 200px; }
}

/* =====================================================================
   深色模式下 iOS 状态栏联动 + 打印
   ===================================================================== */
@supports (padding: max(0px)) {
  .topbar { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  @media (min-width: 1024px) {
    .topbar { padding-top: 15px; }
  }
}

/* =====================================================================
   工单第二步「题材 / 个股选择」——窄屏折行
   ===================================================================== */
@media (max-width: 900px) {
  .stk-row { grid-template-columns: 80px 1fr 88px 62px 34px; gap: 9px; }
  .stk-row .sr-ind { display: none; }
  .stk-list { max-height: 218px; }
  .stk-tools .inp { max-width: none; }
}
@media (max-width: 620px) {
  .stk-row {
    grid-template-columns: auto 1fr 32px;
    grid-template-areas: "code name btn" "ind px chg";
    row-gap: 3px; padding: 9px 11px;
  }
  .sr-code { grid-area: code; }
  .sr-name { grid-area: name; }
  .sr-ind { grid-area: ind; display: block; }
  .sr-px { grid-area: px; text-align: left; }
  .sr-chg { grid-area: chg; text-align: left; }
  .sr-btn { grid-area: btn; }
  .pk-chip { font-size: 11.5px; }
  .stk-head { flex-wrap: wrap; gap: 6px; }
  #thChips { max-height: 106px; }
  .stk-list { max-height: 196px; }
}

/* 可访问性：尊重系统减弱动效 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}