/* ══════════════════════════════════════════════
   AgentsGo 3.0 · 移动端设计系统 · V1.0
   2026-06-12 · 独立于PC端，专门为移动场景设计
   ══════════════════════════════════════════════ */

:root {
  /* ── 品牌色（与PC端一致）── */
  --accent: #E11D48;
  --accent-h: #BE123C;
  --accent-l: #FEF2F2;
  --red: #E11D48;
  --red-l: #FEF2F2;
  --purple: #7C3AED;
  --purple-l: #F5F3FF;
  --blue: #2563EB;
  --blue-l: #EFF6FF;
  --amber: #D97706;
  --amber-l: #FEF3C7;
  --green: #16A34A;
  --green-l: #DCFCE7;
  --gray: #6B7280;
  --gray-l: #F3F4F6;

  /* ── 移动端专属── */
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --line: #E5E7EB;
  --text: #0F172A;
  --sec: #64748B;
  --placeholder: #94A3B8;

  /* ── 尺寸── */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --touch: 44px;          /* 最小触摸目标 */
  --nav-h: 48px;          /* 顶部导航栏高度 */
  --tabbar-h: 56px;       /* 底部TabBar高度 */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* ── 字体── */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --f-xs: 10px;
  --f-sm: 12px;
  --f-md: 14px;
  --f-lg: 16px;
  --f-xl: 20px;
  --f-xxl: 24px;

  /* ── 阴影── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 2px 8px rgba(0,0,0,.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.12);

  /* ── 动画── */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .25s;
}

/* ══════════════════════════════════════════════
   Reset & Base
   ══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
  font-family:var(--font);
  font-size:var(--f-md);
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* 禁止弹性滚动导致底部TabBar偏移 */
  overscroll-behavior:none;
  /* 安全区适配 */
  padding-top:var(--safe-t);
  padding-bottom:calc(var(--tabbar-h) + var(--safe-b));
  min-height:100vh;
  min-height:100dvh;
}

/* ══════════════════════════════════════════════
   Typography
   ══════════════════════════════════════════════ */
a{color:var(--accent);text-decoration:none}
a:active{opacity:.7}
p{font-size:var(--f-md);line-height:1.65;color:var(--sec)}
small{font-size:var(--f-sm);color:var(--placeholder)}

/* ══════════════════════════════════════════════
   Scroll Container
   ══════════════════════════════════════════════ */
.scroll-container{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:12px 14px;
}
.scroll-container::-webkit-scrollbar{display:none}

/* ══════════════════════════════════════════════
   Utility
   ══════════════════════════════════════════════ */
.flex{display:flex}
.flex-1{flex:1}
.flex-col{display:flex;flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-8{gap:8px}
.gap-10{gap:10px}
.gap-12{gap:12px}
.text-center{text-align:center}
.text-right{text-align:right}
.text-sec{color:var(--sec)}
.text-sm{font-size:var(--f-sm)}
.text-xs{font-size:var(--f-xs)}
.text-lg{font-size:var(--f-lg)}
.text-xl{font-size:var(--f-xl)}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.mb-16{margin-bottom:16px}
.p-12{padding:12px}
.p-14{padding:14px}
.p-16{padding:16px}

/* ══════════════════════════════════════════════
   Page Layout
   ══════════════════════════════════════════════ */
.page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}

/* ── 顶部导航栏 ── */
.navbar{
  position:sticky;
  top:var(--safe-t);
  z-index:100;
  height:var(--nav-h);
  background:var(--card);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 14px;
  gap:10px;
  flex-shrink:0;
}
.navbar .nav-title{
  flex:1;
  font-size:var(--f-lg);
  font-weight:700;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.navbar .nav-back{
  width:var(--touch);
  height:var(--touch);
  border:none;
  background:transparent;
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--text);
  flex-shrink:0;
}
.navbar .nav-back:active{background:var(--gray-l)}
.navbar .nav-action{
  width:var(--touch);
  height:var(--touch);
  border:none;
  background:transparent;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--accent);
  flex-shrink:0;
}
.navbar .nav-action:active{background:var(--accent-l)}

/* ── 汉堡菜单(跨端切换) ── */
.navbar .nav-burger{
  width:var(--touch);
  height:var(--touch);
  border:none;
  background:transparent;
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--text);
  flex-shrink:0;
}
.navbar .nav-burger:active{background:var(--gray-l)}

.cross-drawer-bg{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:200;visibility:hidden;opacity:0;transition:opacity .2s}
.cross-drawer-bg.open{visibility:visible;opacity:1}
.cross-drawer{position:fixed;top:0;left:0;width:280px;height:100%;background:var(--card);z-index:201;transform:translateX(-100%);transition:transform .25s var(--ease);box-shadow:2px 0 20px rgba(0,0,0,.1);display:flex;flex-direction:column}
.cross-drawer-bg.open .cross-drawer{transform:translateX(0)}
.cross-drawer-head{padding:24px 20px 16px;border-bottom:1px solid var(--line)}
.cross-drawer-head h3{font-size:16px;font-weight:700}
.cross-drawer-head p{font-size:12px;color:var(--sec);margin-top:4px}
.cross-drawer-body{flex:1;overflow-y:auto;padding:8px 0}
.cross-drawer-body .cd-item{display:flex;align-items:center;gap:12px;padding:14px 20px;font-size:15px;cursor:pointer;transition:.12s;border-left:3px solid transparent}
.cross-drawer-body .cd-item:hover{background:var(--accent-l);color:var(--accent)}
.cross-drawer-body .cd-item.active{background:var(--accent-l);color:var(--accent);font-weight:700;border-left-color:var(--accent)}
.cross-drawer-body .cd-item .cd-icon{font-size:20px;width:28px;text-align:center}
.cross-drawer-foot{padding:16px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--sec)}

/* ── 底部TabBar ── */
.tabbar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:100;
  height:var(--tabbar-h);
  background:var(--card);
  border-top:1px solid var(--line);
  display:flex;
  padding-bottom:var(--safe-b);
}
.tabbar .tab-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:10px;
  color:var(--placeholder);
  transition:color var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.tabbar .tab-item .tab-icon{font-size:20px;line-height:1}
.tabbar .tab-item.active{color:var(--accent)}
.tabbar .tab-item.active .tab-icon{color:var(--accent)}
.tabbar .tab-badge{
  position:absolute;
  top:2px;
  right:calc(50% - 22px);
  min-width:16px;
  height:16px;
  background:var(--red);
  color:#fff;
  font-size:9px;
  font-weight:700;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
}