/* ============================================================
   无尽的拉格朗日 · 配队工作台  —  样式
   浅色主题 / 零依赖
   ============================================================ */
:root{
  --bg:#eef1f6;
  --panel:#ffffff;
  --panel-2:#f7f9fc;
  --line:#dde3ec;
  --line-2:#eaeff6;
  --text:#1b2430;
  --text-2:#5a6879;
  --text-3:#8a97a8;
  --accent:#1f5fd0;
  --accent-2:#e8f0ff;
  --accent-line:#b9cffa;
  --gold:#b8860b;
  --gold-bg:#fdf6e3;
  --green:#0f7b52;
  --green-bg:#e8f7f0;
  --red:#c0392b;
  --red-bg:#fdecea;
  --purple:#6b3fa0;
  --purple-bg:#f3ecfd;
  --radius:10px;
  --shadow:0 1px 2px rgba(20,40,80,.06), 0 4px 14px rgba(20,40,80,.05);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:14px/1.55 "PingFang SC","Microsoft YaHei","Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------------- 顶栏 ---------------- */
.top{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 20px; background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 1px 3px rgba(20,40,80,.04);
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,#1f5fd0,#4a8ef0); color:#fff; font-size:19px;
}
.top h1{margin:0; font-size:16px; font-weight:700; letter-spacing:.3px}
.sub{margin:2px 0 0; font-size:12px; color:var(--text-3)}
.sub b{color:var(--accent); font-weight:600}

/* ---------------- 按钮 ---------------- */
.btn{
  border:1px solid var(--line); background:#fff; color:var(--text);
  padding:7px 13px; border-radius:8px; cursor:pointer; font-size:13px;
  transition:.13s; white-space:nowrap;
}
.btn:hover{border-color:var(--accent-line); background:var(--accent-2); color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:5px 10px; font-size:12.5px}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:#1a52b8; color:#fff}
.btn-danger:hover{border-color:#f0b4ad; background:var(--red-bg); color:var(--red)}

/* ---------------- 布局 ---------------- */
.layout{
  display:grid; gap:14px; padding:14px 20px 40px;
  grid-template-columns:250px minmax(0,1fr) 330px;
  align-items:start;
  max-width:1800px; margin:0 auto;
}
@media (max-width:1350px){ .layout{grid-template-columns:230px minmax(0,1fr)} .col-fleet{grid-column:1/-1} }
@media (max-width:900px){ .layout{grid-template-columns:1fr} .col-fleet{grid-column:auto} }

.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:14px;
}
.panel-h{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 13px; font-weight:600; font-size:13px;
  background:var(--panel-2); border-bottom:1px solid var(--line-2);
}
.panel-b{padding:12px 13px}
.col-filters{position:sticky; top:74px}
.col-fleet{position:sticky; top:74px; max-height:calc(100vh - 88px); overflow-y:auto}
.col-fleet::-webkit-scrollbar{width:8px}
.col-fleet::-webkit-scrollbar-thumb{background:#cdd7e5; border-radius:4px}

/* ---------------- 表单 ---------------- */
.input{
  width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:8px;
  background:#fff; outline:none; transition:.13s; font-size:13px;
}
.input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-2)}
.input-sm{width:auto; padding:4px 8px; font-size:12.5px}
.fld{display:block; margin-top:9px}
.fld>span{display:block; font-size:11.5px; color:var(--text-3); margin-bottom:3px; letter-spacing:.3px}
.fld-h{display:flex; align-items:center; gap:5px}
.fld-h em{font-style:normal; color:var(--text-3)}
.fld-h .mini{
  margin-left:auto; font-size:11px; color:var(--accent); text-decoration:none;
  border-bottom:1px dashed var(--accent-line);
}
.fld-h .mini + .mini{margin-left:2px}
.fld-h .mini:hover{color:#1a52b8; border-bottom-color:var(--accent)}

/* 多选 chip（舰船类型） */
.pick-list{display:flex; flex-wrap:wrap; gap:5px; margin-top:1px}
.pick{
  display:inline-flex; align-items:center; gap:4px;
  border:1px solid var(--line); background:#fff; border-radius:20px;
  padding:3px 9px; font-size:12px; color:var(--text-2); cursor:pointer; transition:.13s;
}
.pick:hover{border-color:var(--accent-line); background:var(--accent-2); color:var(--accent)}
.pick b{font-weight:600; font-size:10.5px; opacity:.55}
.pick.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.pick.on b{opacity:.85; color:#fff}

.chk{display:flex; align-items:center; gap:7px; margin-top:9px; font-size:12.5px; color:var(--text-2); cursor:pointer}
.chk input{accent-color:var(--accent); width:14px; height:14px}
.row-btns{display:flex; gap:7px; margin-top:11px; flex-wrap:wrap}

.seg{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.seg button{
  border:1px solid var(--line); background:#fff; border-radius:7px;
  padding:6px 4px; font-size:12.5px; cursor:pointer; transition:.13s; color:var(--text-2);
}
.seg button:hover{border-color:var(--accent-line); color:var(--accent)}
.seg button.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}

/* ---------------- 列表头 ---------------- */
.list-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px; flex-wrap:wrap;
}
.list-count{font-size:13px; color:var(--text-2)}
.list-count b{color:var(--accent); font-weight:700}
.list-sort{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-3)}

/* ---------------- 分组 ---------------- */
.grp{margin-bottom:12px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.grp-h{
  display:flex; align-items:center; gap:9px; padding:10px 13px; cursor:pointer;
  background:var(--panel-2); border-bottom:1px solid var(--line-2); user-select:none;
}
.grp-h:hover{background:#eef3fb}
.grp-caret{color:var(--text-3); font-size:11px; transition:.15s; width:12px}
.grp.folded .grp-caret{transform:rotate(-90deg)}
.grp.folded .grp-b{display:none}
.grp-name{font-weight:700; font-size:13.5px}
.grp-type{font-size:11.5px; color:var(--text-3); background:#eef2f8; padding:1px 7px; border-radius:20px}
.grp-n{margin-left:auto; font-size:11.5px; color:var(--text-3)}
.grp-b{padding:11px; display:grid; gap:9px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}

/* ---------------- 舰船卡 ---------------- */
.card{
  border:1px solid var(--line); border-radius:9px; background:#fff; padding:11px 12px;
  transition:.14s; display:flex; flex-direction:column; gap:7px;
}
.card:hover{border-color:var(--accent-line); box-shadow:0 3px 12px rgba(31,95,208,.10); transform:translateY(-1px)}
.card.in-fleet{border-color:var(--green); background:var(--green-bg)}
.card-t{display:flex; align-items:flex-start; gap:8px}
.card-name{font-weight:700; font-size:13.5px; line-height:1.35; cursor:pointer}
.card-name:hover{color:var(--accent)}
.card-name .cls{color:var(--text-3); font-weight:500}
.card-name .var{color:var(--text)}
.card-add{
  margin-left:auto; flex:none; border:1px solid var(--accent-line); background:var(--accent-2);
  color:var(--accent); border-radius:7px; padding:3px 9px; font-size:12px; cursor:pointer; transition:.13s;
}
.card-add:hover{background:var(--accent); color:#fff; border-color:var(--accent)}
.card-add.on{background:var(--green); border-color:var(--green); color:#fff}

.chips{display:flex; flex-wrap:wrap; gap:4px}
.chip{
  font-size:11.5px; padding:2px 7px; border-radius:5px; line-height:1.5;
  background:var(--purple-bg); color:var(--purple); border:1px solid #e2d5f7;
}
.chip.s{background:var(--accent-2); color:var(--accent); border-color:var(--accent-line)}
.chip.g{background:var(--gold-bg); color:var(--gold); border-color:#f0e0b8}
.chip.n{background:#f0f3f8; color:var(--text-3); border-color:var(--line)}
.chip[data-tip]{cursor:help}
.chips-lbl{font-size:11px; color:var(--text-3); margin-right:2px; align-self:center}

.card-meta{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:11.5px; color:var(--text-2); border-top:1px dashed var(--line-2); padding-top:6px}
.card-meta i{font-style:normal; color:var(--text-3)}
.card-meta b{font-weight:600; color:var(--text)}

/* 卡片上的生产资源行 */
.card-cost{display:flex; flex-wrap:wrap; gap:4px 7px; font-size:11.5px; align-items:center}
.cc{
  padding:1px 6px; border-radius:5px; border:1px solid var(--line);
  background:#f4f7fb; color:var(--text-2); white-space:nowrap;
}
.cc.m{background:#f6f1e6; color:#8a6d1f; border-color:#ecdfc2}
.cc.c{background:#eaf3fb; color:#1f6ea8; border-color:#cfe4f4}
.cc.d{background:#f0f0fa; color:#4a4a9c; border-color:#dcdcf2}
.cc.t{background:#f1f4f8; color:var(--text-3); border-color:var(--line)}
.cc.na{font-style:italic; color:var(--text-3)}

/* ---------------- 舰队 ---------------- */
.panel-fleet .panel-h{background:linear-gradient(180deg,#f2f6fd,#e9f0fb)}
.fleet-cmd{font-size:12.5px; color:var(--text-2); display:flex; align-items:center; gap:5px}
.fleet-cmd b{font-size:16px; color:var(--accent)}
.cap{width:62px; padding:2px 6px; border:1px solid var(--line); border-radius:6px; text-align:center; font-size:12.5px}
.cmdbar{height:7px; background:#e6ecf5; border-radius:4px; overflow:hidden; margin-bottom:11px}
.cmdbar-fill{height:100%; width:0; background:linear-gradient(90deg,#3f83e8,#1f5fd0); transition:width .2s}
.cmdbar-fill.over{background:linear-gradient(90deg,#e8703f,#c0392b)}
.fleet-list{display:flex; flex-direction:column; gap:7px; min-height:44px}
.fleet-empty{font-size:12.5px; color:var(--text-3); text-align:center; padding:16px 0; border:1px dashed var(--line); border-radius:8px}
.fleet-item{border:1px solid var(--line); border-radius:8px; padding:8px 9px; background:var(--panel-2)}
.fleet-item-h{display:flex; align-items:center; gap:7px}
.fleet-item-h .n{font-size:12.5px; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fleet-item-h .c{font-size:11.5px; color:var(--accent); font-weight:600; flex:none}
.fleet-item-h .x{border:0; background:transparent; color:var(--text-3); cursor:pointer; font-size:13px; padding:0 2px; flex:none}
.fleet-item-h .x:hover{color:var(--red)}
.fleet-item .chips{margin-top:5px}

/* 数量步进 */
.fleet-item-q{display:flex; align-items:center; gap:5px; margin-top:6px}
.q-lbl{font-size:11px; color:var(--text-3)}
.q-btn{
  width:22px; height:22px; border:1px solid var(--line); background:#fff; border-radius:6px;
  cursor:pointer; line-height:1; color:var(--text-2); font-size:14px; padding:0; flex:none;
}
.q-btn:hover:not(:disabled){border-color:var(--accent-line); background:var(--accent-2); color:var(--accent)}
.q-btn:disabled{opacity:.35; cursor:not-allowed}
.q-in{
  width:52px; padding:2px 4px; border:1px solid var(--line); border-radius:6px;
  text-align:center; font-size:12.5px; font-weight:600; background:#fff;
}
.q-in:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-2)}
.q-lim{font-size:10.5px; color:var(--text-3)}

.fleet-item-cost{display:flex; flex-direction:column; gap:2px; margin-top:6px; font-size:11px; color:var(--text-3); line-height:1.5}
.fleet-item-cost .sum{color:var(--accent); font-weight:600}

/* 生产资源汇总 */
.res-sum{
  border:1px solid var(--accent-line); background:linear-gradient(180deg,#f4f8ff,#eef4ff);
  border-radius:9px; padding:9px 10px; margin-bottom:11px;
}
.res-h{display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; color:var(--accent); margin-bottom:7px}
.res-qty{font-weight:500; font-size:11px; color:var(--text-3)}
.res-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:5px}
.res-item{
  display:flex; align-items:center; justify-content:space-between; gap:5px;
  background:#fff; border:1px solid var(--line-2); border-radius:7px; padding:4px 6px;
  min-width:0;
}
.res-item i{font-style:normal; font-size:11px; color:var(--text-3); flex:none}
.res-item b{font-size:12px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.res-item.r-metal b{color:#8a6d1f}
.res-item.r-crystal b{color:#1f6ea8}
.res-item.r-deu b{color:#4a4a9c}
.res-item.r-time{grid-column:1/-1}
.res-item.r-time b{color:var(--green); font-size:12.5px}
.res-note{font-size:10.5px; color:var(--text-3); margin-top:5px; line-height:1.5}

.share-box{margin-top:9px; display:flex; gap:6px; align-items:flex-start}
.share-box .input{font-size:11.5px; font-family:ui-monospace,Consolas,monospace}
.share-box input.input{flex:1; min-width:0}

/* ---------------- 策略云 ---------------- */
.cloud{display:flex; flex-wrap:wrap; gap:5px; max-height:230px; overflow-y:auto}
.cloud::-webkit-scrollbar{width:7px}
.cloud::-webkit-scrollbar-thumb{background:#cdd7e5; border-radius:4px}
.cloud .tag{
  font-size:11.5px; padding:3px 8px; border-radius:20px; cursor:pointer;
  background:#f0f3f8; color:var(--text-2); border:1px solid var(--line); transition:.13s;
}
.cloud .tag:hover{background:var(--accent-2); color:var(--accent); border-color:var(--accent-line)}
.cloud .tag.on{background:var(--accent); color:#fff; border-color:var(--accent)}
.cloud .tag b{font-weight:600; opacity:.6; margin-left:3px; font-size:10.5px}

/* ---------------- 弹窗 ---------------- */
.modal{position:fixed; inset:0; background:rgba(18,30,50,.42); z-index:80; display:grid; place-items:center; padding:20px}
.modal-box{
  background:#fff; border-radius:14px; max-width:760px; width:100%; max-height:88vh;
  overflow-y:auto; padding:22px 24px; position:relative; box-shadow:0 20px 60px rgba(10,25,50,.28);
}
.modal-x{position:absolute; top:14px; right:16px; border:0; background:#f0f3f8; width:28px; height:28px; border-radius:50%; cursor:pointer; color:var(--text-2)}
.modal-x:hover{background:var(--red-bg); color:var(--red)}
.m-h1{margin:0 0 2px; font-size:19px}
.m-sub{margin:0 0 14px; font-size:12.5px; color:var(--text-3)}
.m-sec{margin:16px 0 7px; font-size:13px; font-weight:700; color:var(--accent); border-left:3px solid var(--accent); padding-left:8px}
.m-kv{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:7px 16px; font-size:13px}
.m-kv div{display:flex; gap:7px; border-bottom:1px dashed var(--line-2); padding-bottom:5px}
.m-kv i{font-style:normal; color:var(--text-3); flex:none; min-width:62px}
.m-kv b{font-weight:600}
.m-p{margin:0; font-size:13px; color:var(--text-2); line-height:1.7}
.m-str{border:1px solid var(--line); border-radius:9px; padding:10px 12px; margin-bottom:8px; background:var(--panel-2)}
.m-str .t{font-weight:700; font-size:13.5px; color:var(--purple); margin-bottom:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.m-str .t .cost{
  font-size:11px; font-weight:600; color:var(--accent); background:var(--accent-2);
  border:1px solid var(--accent-line); border-radius:20px; padding:1px 8px;
}
.m-str .d{font-size:12.5px; color:var(--text-2); line-height:1.65}
.m-str .no{font-size:12px; color:var(--text-3); font-style:italic}
.m-str .lvs{margin-top:7px; border-top:1px dashed var(--line); padding-top:7px; display:flex; flex-direction:column; gap:4px}
.m-str .lv{display:flex; gap:8px; font-size:12.5px; line-height:1.6}
.m-str .lv b{
  flex:none; min-width:38px; color:var(--gold); font-weight:600; font-size:11.5px;
  background:var(--gold-bg); border-radius:4px; padding:0 5px; height:19px; line-height:19px; text-align:center;
}
.m-str .lv span{color:var(--text-2); flex:1}

/* 弹窗里的生产资源 */
.m-cost{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.m-cost .mc{
  display:flex; flex-direction:column; gap:2px; border:1px solid var(--line);
  border-radius:9px; padding:8px 11px; background:var(--panel-2);
}
.m-cost .mc i{font-style:normal; font-size:11.5px; color:var(--text-3)}
.m-cost .mc b{font-size:16px; font-weight:700}
.m-cost .mc.r-metal{border-color:#ecdfc2; background:#fbf8f0}
.m-cost .mc.r-metal b{color:#8a6d1f}
.m-cost .mc.r-crystal{border-color:#cfe4f4; background:#f4f9fd}
.m-cost .mc.r-crystal b{color:#1f6ea8}
.m-cost .mc.r-deu{border-color:#dcdcf2; background:#f6f6fc}
.m-cost .mc.r-deu b{color:#4a4a9c}
.m-cost .mc.r-time{border-color:#cfe9dc; background:#f2faf6}
.m-cost .mc.r-time b{color:var(--green); font-size:15px}

/* ---------------- 悬浮提示 ---------------- */
.tipbox{
  position:fixed; z-index:120; max-width:340px; pointer-events:none;
  background:#1b2430; color:#fff; font-size:12.5px; line-height:1.62;
  padding:8px 11px; border-radius:8px; box-shadow:0 8px 26px rgba(0,0,0,.3);
  opacity:0; transition:opacity .12s;
}
.tipbox.on{opacity:1}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%);
  background:#1b2430; color:#fff; padding:9px 18px; border-radius:22px; font-size:13px;
  z-index:99; box-shadow:0 8px 26px rgba(0,0,0,.25); animation:tin .2s;
}
@keyframes tin{from{opacity:0; transform:translate(-50%,8px)}to{opacity:1; transform:translate(-50%,0)}}

/* 空态 */
.empty{text-align:center; padding:50px 20px; color:var(--text-3); font-size:13.5px}

/* ============================================================
   手机端专项优化（≤820px）
   —— 只在这个断点内生效，PC 端（>820px）画面与之前完全一致
   ============================================================ */

/* 手机端才出现的元素：PC 上彻底不显示 */
.m-only{display:none}
/* 折叠容器：PC 上 .folded 不产生任何效果，只有手机端断点才隐藏 */
.m-panel-tog{display:none}

@media (max-width:820px){

  /* 手机端专用元素解除隐藏（放在最前，后面更具体的规则可覆盖 display） */
  .m-only{display:block}

  /* ---------- 全局：手感与防缩放 ---------- */
  html{-webkit-text-size-adjust:100%}
  body{
    -webkit-tap-highlight-color:transparent;
    /* 触屏上禁用 hover 位移/阴影，避免点完卡住 hover 态 */
  }
  /* iOS 聚焦输入框时 <16px 会强制放大整页 —— 统一提到 16px */
  .input, select.input, textarea.input, input.input, .q-in{
    font-size:16px !important;
  }
  .input, select.input{padding:9px 11px}

  /* ---------- 顶栏：压缩 ---------- */
  .top{padding:9px 12px; gap:10px}
  .logo{width:32px; height:32px; font-size:16px; border-radius:9px}
  .brand{gap:9px}
  .top h1{font-size:14.5px}
  .sub{font-size:11px}

  /* ---------- 布局：单列、去掉 sticky 内滚动 ---------- */
  .layout{
    display:block;                 /* 三栏改单列流式 */
    padding:10px 10px 0;
    gap:0;
  }
  .col-filters, .col-fleet{
    position:static;               /* 去掉 sticky —— 手机上会出现嵌套滚动 */
    max-height:none;
    overflow:visible;
    margin-bottom:0;
  }
  .col-list{margin-bottom:12px}
  .col-fleet{margin-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

  /* ---------- 手机端筛选折叠开关 ---------- */
  .m-panel-tog{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    width:100%; margin-bottom:10px;
    padding:11px 13px; font-size:13.5px; font-weight:600; color:var(--text);
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); cursor:pointer;
  }
  .m-panel-tog em{font-style:normal; font-size:12px; font-weight:500; color:var(--accent)}
  .m-panel-tog:active{background:var(--accent-2)}
  .m-collapse.folded{display:none}
  .m-panel-tog.on em{color:var(--text-3)}

  /* ---------- 卡片网格：单列铺满 ---------- */
  .grp-b{grid-template-columns:1fr; padding:10px; gap:8px}
  .grp{margin-bottom:10px}
  .grp-h{padding:11px 12px}

  /* ---------- 触控目标放大 ---------- */
  .pick{padding:6px 12px; font-size:12.5px; min-height:30px}
  .pick b{font-size:11px}
  .cloud .tag{padding:6px 11px; font-size:12px}
  .cloud{max-height:200px; padding-bottom:2px}
  .card-add{padding:6px 12px; font-size:12.5px; min-height:30px}
  .q-btn{width:30px; height:30px; font-size:17px}
  .q-in{width:46px; padding:2px 4px}
  .seg button{padding:9px 4px}
  .chk{padding:4px 0}
  .chk input{width:16px; height:16px}
  .btn{padding:9px 14px}
  .btn-sm{padding:7px 12px}
  .row-btns{gap:8px}
  .row-btns .btn{flex:1; min-width:0}
  /* 卡片整体可点区域更大 */
  .card{padding:12px}
  .card-name{font-size:14px}

  /* ---------- 列表头 ---------- */
  .list-head{gap:8px; margin-bottom:9px}
  .list-sort{font-size:12px}

  /* ---------- 舰队面板：资源数字加大 ---------- */
  .res-grid{grid-template-columns:repeat(3,1fr); gap:6px}
  .res-item{padding:6px 7px}
  .res-item i{font-size:11px}
  .res-item b{font-size:13px}
  .res-item.r-time b{font-size:14px}
  .fleet-item{padding:9px 10px}
  .fleet-item-h .n{font-size:13px}
  .fleet-item-h .x{font-size:16px; padding:0 4px}
  .cmdbar{height:8px}

  /* ---------- 弹窗：手机接近全屏 ---------- */
  .modal{padding:0; place-items:stretch}
  .modal-box{
    max-width:none; width:100%;
    border-radius:0; padding:18px 14px calc(24px + env(safe-area-inset-bottom,0px));
    max-height:100vh; height:100vh;          /* 老浏览器兜底 */
    max-height:100dvh; height:100dvh;        /* 动态视口：避开手机地址栏 */
  }
  .m-h1{font-size:17px; padding-right:30px}
  .m-kv{grid-template-columns:1fr}
  .m-cost{grid-template-columns:repeat(2,1fr)}
  .modal-x{top:10px; right:12px; width:32px; height:32px; font-size:15px}

  /* ---------- Toast 抬到悬浮条之上 ---------- */
  .toast{bottom:calc(100px + env(safe-area-inset-bottom,0px))}

  /* ---------- 底部导航 + 资源速览 ---------- */
  .mbar{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:rgba(255,255,255,.97);
    backdrop-filter:saturate(180%) blur(10px);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
    border-top:1px solid var(--line);
    box-shadow:0 -2px 14px rgba(20,40,80,.08);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .mb-row{display:flex; gap:6px; padding:6px 8px 5px}
  .mb-btn{
    flex:1; min-width:0; position:relative;
    display:flex; align-items:center; justify-content:center; gap:5px;
    padding:9px 4px; font-size:13px; color:var(--text-2);
    background:var(--panel-2); border:1px solid var(--line); border-radius:9px;
    cursor:pointer; white-space:nowrap;
  }
  .mb-btn i{font-style:normal; font-size:13px; color:var(--accent)}
  .mb-btn:active{background:var(--accent-2); border-color:var(--accent-line); color:var(--accent)}
  .mb-btn em{
    font-style:normal; min-width:17px; height:17px; padding:0 4px;
    border-radius:9px; background:var(--accent); color:#fff;
    font-size:11px; font-weight:700; line-height:17px; text-align:center;
  }
  .mb-sum{
    display:grid; grid-template-columns:repeat(4,1fr); gap:5px;
    padding:0 8px 7px;
  }
  .mb-i{
    display:flex; align-items:baseline; justify-content:center; gap:4px;
    background:#fff; border:1px solid var(--line-2); border-radius:7px;
    padding:4px 3px; min-width:0; overflow:hidden;
  }
  .mb-i i{font-style:normal; font-size:10.5px; color:var(--text-3); flex:none}
  .mb-i b{
    font-size:12.5px; font-weight:700; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
  }
  .mb-i.cmd b{color:var(--accent)}
  .mb-i.m b{color:#8a6d1f}
  .mb-i.c b{color:#1f6ea8}
  .mb-i.d b{color:#4a4a9c}
}

/* 更窄的手机（≤400px）：再紧一点，避免横向溢出 */
@media (max-width:400px){
  .layout{padding:8px 7px 0}
  .grp-b{padding:8px}
  .card{padding:10px 11px}
  .card-meta{gap:3px 8px; font-size:11px}
  .cc{font-size:11px; padding:1px 5px}
  .mb-btn{font-size:12px; padding:9px 2px}
  .mb-i i{font-size:10px}
  .mb-i b{font-size:11.5px}
  .res-item b{font-size:12px}
}

/* 手机横放（矮屏）：底部条再压扁，别吃掉可视高度 */
@media (max-height:500px) and (max-width:1100px){
  .mb-row{padding:4px 8px 3px}
  .mb-btn{padding:6px 4px}
  .mb-sum{padding:0 8px 4px}
  .mb-i{padding:2px 3px}
  .top{padding:6px 12px}
  .logo{width:26px; height:26px; font-size:14px}
  .col-fleet{margin-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}