/* ══════════════════════════════════════════════
   AgentsGo 3.0 · 移动端组件库 · V1.0
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   Cards
   ══════════════════════════════════════════════ */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:14px 16px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
}
.card:active{background:#F8FAFC}

/* Feed 卡片 */
.card-feed{
  display:flex;
  gap:12px;
  align-items:flex-start;
  cursor:pointer;
}
.card-feed .cf-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.card-feed .cf-body{flex:1;min-width:0}
.card-feed .cf-title{font-size:var(--f-md);font-weight:600;line-height:1.4;margin-bottom:4px}
.card-feed .cf-desc{font-size:var(--f-sm);color:var(--sec);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-feed .cf-meta{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:var(--f-xs);color:var(--placeholder)}
.card-feed .cf-badge{font-size:9px;padding:2px 6px;border-radius:4px;font-weight:600}
.card-feed .cf-arrow{color:var(--placeholder);align-self:center;flex-shrink:0;font-size:16px}

/* 统计卡片 */
.card-stat{
  text-align:center;
  padding:12px 8px;
}
.card-stat .cs-num{font-size:var(--f-xl);font-weight:800;line-height:1.2}
.card-stat .cs-label{font-size:var(--f-xs);color:var(--sec);margin-top:2px}

/* 内容卡片 */
.card-content{
  cursor:pointer;
}
.card-content .cc-type{font-size:9px;padding:2px 8px;border-radius:4px;font-weight:600;display:inline-block;margin-bottom:8px}
.card-content .cc-title{font-size:var(--f-lg);font-weight:700;margin-bottom:6px;line-height:1.4}
.card-content .cc-body{font-size:var(--f-sm);color:var(--sec);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-content .cc-meta{display:flex;gap:10px;align-items:center;margin-top:8px;font-size:var(--f-xs);color:var(--placeholder)}

/* ══════════════════════════════════════════════
   Buttons
   ══════════════════════════════════════════════ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  height:var(--touch);
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--card);
  color:var(--text);
  font-size:var(--f-md);
  font-family:var(--font);
  cursor:pointer;
  white-space:nowrap;
  transition:all var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{background:var(--gray-l)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:active{background:var(--accent-h)}
.btn-danger{color:var(--red);border-color:var(--red)}
.btn-danger:active{background:var(--red-l)}
.btn-sm{height:32px;padding:0 10px;font-size:var(--f-sm);border-radius:6px}
.btn-block{width:100%}
.btn-icon{width:var(--touch);padding:0;border:none;background:transparent}
.btn-icon:active{background:var(--gray-l)}

/* 浮动操作按钮 */
.fab{
  position:fixed;
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 16px);
  right:16px;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  border:none;
  font-size:24px;
  cursor:pointer;
  box-shadow:var(--shadow-lg);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:90;
  transition:transform var(--dur) var(--ease);
}
.fab:active{transform:scale(.9)}

/* ══════════════════════════════════════════════
   Badges & Tags
   ══════════════════════════════════════════════ */
.badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:10px;
  font-size:var(--f-xs);
  font-weight:600;
}
.badge-green{background:var(--green-l);color:var(--green)}
.badge-red{background:var(--red-l);color:var(--red)}
.badge-amber{background:var(--amber-l);color:var(--amber)}
.badge-purple{background:var(--purple-l);color:var(--purple)}
.badge-blue{background:var(--blue-l);color:var(--blue)}
.badge-gray{background:var(--gray-l);color:var(--gray)}
.badge-accent{background:var(--accent-l);color:var(--accent)}

/* ══════════════════════════════════════════════
   KPI 统计条
   ══════════════════════════════════════════════ */
.kpi-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.kpi-row.col-3{grid-template-columns:repeat(3,1fr)}
.kpi-row.col-4{grid-template-columns:repeat(2,1fr)} /* 移动端最多2列 */
.kpi-item{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px 12px;
}
.kpi-item .ki-num{font-size:var(--f-xl);font-weight:800}
.kpi-item .ki-label{font-size:var(--f-xs);color:var(--sec)}
.kpi-item .ki-trend{font-size:10px;margin-top:2px}

/* ══════════════════════════════════════════════
   Search & Filter
   ══════════════════════════════════════════════ */
.search-bar{
  display:flex;
  gap:8px;
  align-items:center;
}
.search-input{
  flex:1;
  height:38px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:0 12px;
  font-size:var(--f-md);
  font-family:var(--font);
  background:var(--gray-l);
  outline:none;
  transition:all var(--dur) var(--ease);
}
.search-input:focus{background:var(--card);border-color:var(--accent)}
.filter-row{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:2px 0;
  -webkit-overflow-scrolling:touch;
}
.filter-row::-webkit-scrollbar{display:none}
.filter-chip{
  flex-shrink:0;
  height:30px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--card);
  font-size:var(--f-sm);
  font-family:var(--font);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  transition:all var(--dur) var(--ease);
}
.filter-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.filter-chip:active{opacity:.8}

/* ══════════════════════════════════════════════
   Bottom Sheet / Drawer
   ══════════════════════════════════════════════ */
.sheet-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  z-index:200;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.sheet-overlay.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:201;
  background:var(--card);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  max-height:85vh;
  max-height:85dvh;
  display:flex;
  flex-direction:column;
  transform:translateY(100%);
  transition:transform var(--dur) var(--ease);
  padding-bottom:var(--safe-b);
}
.sheet.open{transform:translateY(0)}
.sheet-handle{
  width:32px;
  height:4px;
  background:var(--line);
  border-radius:2px;
  margin:10px auto;
  flex-shrink:0;
}
.sheet-header{
  padding:0 14px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.sheet-title{font-size:var(--f-lg);font-weight:700}
.sheet-body{flex:1;overflow-y:auto;padding:14px;-webkit-overflow-scrolling:touch}

/* ══════════════════════════════════════════════
   Modal / Dialog
   ══════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{
  background:var(--card);
  border-radius:var(--radius-lg);
  width:100%;
  max-width:360px;
  max-height:80vh;
  max-height:80dvh;
  display:flex;
  flex-direction:column;
  transform:scale(.9);
  transition:transform var(--dur) var(--ease);
  box-shadow:var(--shadow-lg);
}
.modal-overlay.open .modal{transform:scale(1)}
.modal-header{
  padding:16px 16px 12px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
}
.modal-title{font-size:var(--f-lg);font-weight:700}
.modal-close{
  width:32px;
  height:32px;
  border:none;
  background:var(--gray-l);
  border-radius:50%;
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-body{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch;font-size:var(--f-md);line-height:1.7}
.modal-footer{
  padding:12px 16px 16px;
  display:flex;
  gap:8px;
  border-top:1px solid var(--line);
  flex-shrink:0;
}
.modal-footer.btns-2 .btn{flex:1}

/* ══════════════════════════════════════════════
   List / Table → Card Stack
   ══════════════════════════════════════════════ */
.list-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 14px;
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:center;
}
.list-card:active{background:#F8FAFC}
.list-card .lc-icon{font-size:24px;flex-shrink:0}
.list-card .lc-body{flex:1;min-width:0}
.list-card .lc-title{font-size:var(--f-md);font-weight:600}
.list-card .lc-sub{font-size:var(--f-sm);color:var(--sec);margin-top:2px}
.list-card .lc-right{flex-shrink:0;text-align:right}
.list-card .lc-badge{margin-top:4px}

/* ══════════════════════════════════════════════
   Empty State
   ══════════════════════════════════════════════ */
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px 20px;
  text-align:center;
}
.empty-state .es-icon{font-size:48px;margin-bottom:12px}
.empty-state .es-title{font-size:var(--f-lg);font-weight:600;margin-bottom:6px}
.empty-state .es-desc{font-size:var(--f-sm);color:var(--sec);line-height:1.6}
.empty-state .es-btn{margin-top:16px}

/* ══════════════════════════════════════════════
   Loading & Skeleton
   ══════════════════════════════════════════════ */
.skeleton{
  background:linear-gradient(90deg,var(--gray-l) 25%,#e5e7eb 50%,var(--gray-l) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:6px;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-line{height:14px;margin-bottom:8px}
.sk-line.w60{width:60%}
.sk-line.w80{width:80%}
.sk-line.w40{width:40%}
.sk-card{height:80px;border-radius:var(--radius);margin-bottom:10px}

/* ══════════════════════════════════════════════
   Toast / Snackbar
   ══════════════════════════════════════════════ */
.toast{
  position:fixed;
  top:calc(var(--safe-t) + 8px);
  left:16px;
  right:16px;
  z-index:400;
  background:var(--text);
  color:#fff;
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:var(--f-sm);
  line-height:1.5;
  transform:translateY(-120%);
  opacity:0;
  transition:all var(--dur) var(--ease);
  text-align:center;
}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{background:var(--green)}
.toast.error{background:var(--red)}

/* ══════════════════════════════════════════════
   Section Header
   ══════════════════════════════════════════════ */
.section-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:16px 0 8px;
}
.section-hd .sh-title{font-size:var(--f-md);font-weight:700}
.section-hd .sh-more{font-size:var(--f-sm);color:var(--accent);cursor:pointer}
.section-hd .sh-more:active{opacity:.7}

/* ══════════════════════════════════════════════
   Avatar
   ══════════════════════════════════════════════ */
.avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px}
.avatar-sm{width:28px;height:28px;font-size:13px}
.avatar-lg{width:48px;height:48px;font-size:22px}

/* ══════════════════════════════════════════════
   Divider
   ══════════════════════════════════════════════ */
.divider{height:1px;background:var(--line);margin:12px 0}

/* ══════════════════════════════════════════════
   Horizontal Scroll
   ══════════════════════════════════════════════ */
.h-scroll{display:flex;gap:10px;overflow-x:auto;padding:4px 0;-webkit-overflow-scrolling:touch}
.h-scroll::-webkit-scrollbar{display:none}
.h-scroll > *{flex-shrink:0}

/* ══════════════════════════════════════════════
   Select Menu (bottom sheet style)
   ══════════════════════════════════════════════ */
.select-menu{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:4px 0;
}
.select-menu::-webkit-scrollbar{display:none}
.select-item{
  flex-shrink:0;
  padding:6px 14px;
  border:1px solid var(--line);
  border-radius:20px;
  font-size:var(--f-sm);
  cursor:pointer;
  background:var(--card);
  white-space:nowrap;
}
.select-item.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ══════════════════════════════════════════════
   Feed Card (used by all sub-pages)
   ══════════════════════════════════════════════ */
.feed-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  margin-bottom:8px;
}
.feed-card:active{background:#F8FAFC}
.feed-card .fc-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.feed-card .fc-title{font-size:14px;font-weight:700;line-height:1.4;flex:1;min-width:0}
.feed-card .fc-meta{display:flex;gap:10px;margin-top:6px;font-size:11px;color:var(--placeholder)}
.feed-card .fc-desc{font-size:12px;color:var(--sec);line-height:1.5;margin-top:4px}

/* content area wrapper */
.content{padding:12px;overflow-y:auto;-webkit-overflow-scrolling:touch;height:100%;box-sizing:border-box}

/* Segmented control */
.segmented{display:flex;background:var(--gray-l);border-radius:8px;padding:3px;margin-bottom:12px}
.segmented .seg{flex:1;text-align:center;padding:6px 0;font-size:12px;font-weight:600;color:var(--sec);border-radius:6px;cursor:pointer;transition:.12s}
.segmented .seg.active{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* Filter pills */
.filter-bar{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;-webkit-overflow-scrolling:touch}
.filter-bar::-webkit-scrollbar{display:none}
.filter-pill{flex-shrink:0;padding:5px 14px;border:1px solid var(--line);border-radius:16px;font-size:12px;cursor:pointer;background:var(--card);white-space:nowrap;transition:.12s}
.filter-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Section header */
.section-header{display:flex;align-items:center;justify-content:space-between;margin:12px 0 6px}
.section-header h3{font-size:14px;font-weight:700;margin:0}

/* KPI card (compact) */
.kpi-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:center}
.kpi-card .kpi-num{font-size:22px;font-weight:800;line-height:1.2}
.kpi-card .kpi-lbl{font-size:10px;color:var(--sec);margin-top:2px}

/* search input */
.search-bar input[type="search"],.search-bar input{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font-size:13px;font-family:var(--font);background:var(--gray-l);outline:none;box-sizing:border-box}
.search-bar input:focus{background:var(--card);border-color:var(--accent)}

/* Full-width button */
.btn-full{width:100%}
.btn-primary.full{width:100%;height:42px;border:none;border-radius:10px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font)}
.btn-primary.full:active{background:var(--accent-h)}