/* 移动驾驶舱样式（任务 #24）
   - 750x1334 视口为基准（iPhone 6/7/8 Plus 标尺）
   - 深色科技风，单列竖向滚动
*/
@import url('./mdi-icon-font.css');
*, *::before, *::after { box-sizing:border-box; }
html, body {
  margin:0;padding:0;background:#070C1E;color:#E5EAFA;
  font-family:'PingFang SC','Microsoft YaHei',sans-serif;
  -webkit-text-size-adjust:100%;
}
.mc-frame{
  max-width:750px;margin:0 auto;min-height:100vh;
  background:radial-gradient(ellipse at top, #122046 0%, #050A1A 70%);
  position:relative;
}
.mc-statusbar{
  height:44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;color:#fff;font-size:14px;font-weight:600;
}
.mc-header{
  padding:14px 20px 18px;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mc-header .mc-back{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.06);display:inline-flex;align-items:center;justify-content:center;
}
.mc-header .mc-title{font-size:18px;font-weight:600;flex:1;}
.mc-header .mc-time{font-size:12px;color:#A2B0D8;}

.mc-section{padding:16px 16px 0;}
.mc-section-title{
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:#A2B0D8;margin:8px 0 10px;font-weight:500;
}
.mc-section-title::before{
  content:'';display:inline-block;width:3px;height:13px;background:linear-gradient(180deg,#3B7AF7,#6FA0FF);border-radius:2px;
}

/* KPI 卡 2x2 */
.mc-kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mc-kpi-card{
  background:linear-gradient(135deg,rgba(45,99,232,.18),rgba(45,99,232,.02));
  border:1px solid rgba(91,141,239,.18);border-radius:12px;padding:14px;
}
.mc-kpi-card .lb{font-size:12px;color:#A2B0D8;}
.mc-kpi-card .vl{font-size:24px;font-weight:700;color:#fff;margin-top:6px;display:flex;align-items:baseline;gap:4px;}
.mc-kpi-card .vl .un{font-size:13px;font-weight:400;color:#A2B0D8;}
.mc-kpi-card .tr{font-size:11.5px;color:#52E3A1;margin-top:4px;display:flex;align-items:center;gap:3px;}
.mc-kpi-card .tr.dn{color:#FF7A8A;}

/* 通用卡 */
.mc-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:14px;margin-bottom:10px;
}
.mc-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.mc-card-head .ti{font-size:14px;font-weight:600;color:#E5EAFA;}
.mc-card-head .ex{font-size:12px;color:#7A8AAD;}

/* 横向滚动卡片 */
.mc-hscroll{
  display:flex;gap:10px;overflow-x:auto;padding:4px 16px 14px;
  scrollbar-width:none;
}
.mc-hscroll::-webkit-scrollbar{display:none;}
.mc-hscroll .mc-mini{
  flex:0 0 auto;width:160px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:12px;
}

/* 列表 */
.mc-list .mc-row{
  display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.mc-list .mc-row:last-child{border-bottom:none;}
.mc-row .ic{
  width:36px;height:36px;flex:none;border-radius:8px;
  background:linear-gradient(135deg,#1F3266,#0E1733);
  display:inline-flex;align-items:center;justify-content:center;color:#7A95D8;
}
.mc-row .bd{flex:1;min-width:0;}
.mc-row .bd .a{font-size:13.5px;color:#E5EAFA;}
.mc-row .bd .b{font-size:11.5px;color:#7A8AAD;margin-top:2px;}
.mc-row .vl{font-size:14px;font-weight:600;color:#5BD0FF;flex:none;}
.mc-row .vl.warn{color:#FFB45B;}
.mc-row .vl.bad{color:#FF7A8A;}
.mc-row .vl.good{color:#52E3A1;}

/* tag */
.mc-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;background:rgba(91,141,239,.14);color:#7A95D8;}
.mc-tag.warn{background:rgba(255,180,91,.14);color:#FFB45B;}
.mc-tag.bad{background:rgba(255,122,138,.14);color:#FF7A8A;}
.mc-tag.good{background:rgba(82,227,161,.14);color:#52E3A1;}

/* 进度条 */
.mc-progress{height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;margin-top:6px;}
.mc-progress > i{display:block;height:100%;background:linear-gradient(90deg,#3B7AF7,#5BD0FF);border-radius:3px;}

/* 底部 Tab */
.mc-tabbar{
  position:sticky;bottom:0;background:rgba(7,12,30,.92);backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.06);display:flex;padding:8px 0;
}
.mc-tabbar .mc-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:11px;color:#7A8AAD;padding:4px 0;
}
.mc-tabbar .mc-tab.active{color:#5B8DEF;}
.mc-tabbar .mc-tab iconify-icon{font-size:22px;}

/* 充足底部留白避免遮挡 */
.mc-frame > :last-child{margin-bottom:24px;}