/* ============================================================
   必租开放平台 — 统一设计系统 (Design Tokens + Components)
   前台 Portal 与 后台 Console 共用同一套设计语言
   ============================================================ */

:root {
  /* 品牌色 */
  --c-primary: #4f46e5;
  --c-primary-d: #4338ca;
  --c-primary-l: #6366f1;
  --c-blue: #2563eb;
  --c-teal: #0ea5a4;
  --c-cyan: #06b6d4;

  /* 语义色 */
  --c-success: #10b981;
  --c-success-bg: #ecfdf5;
  --c-warning: #f59e0b;
  --c-warning-bg: #fffbeb;
  --c-danger: #f97316;
  --c-danger-bg: #fff7ed;
  --c-required: #f97316; /* 必填项边框色（橙，与 danger 统一） */
  --c-required-bg: #fef2f2;
  --c-info: #3b82f6;
  --c-info-bg: #eff6ff;

  /* 中性色 */
  --c-ink: #0f172a;
  --c-ink-2: #334155;
  --c-ink-3: #64748b;
  --c-ink-4: #94a3b8;
  --c-line: #e2e8f0;
  --c-line-2: #eef2f7;
  --c-bg: #f6f8fc;
  --c-surface: #ffffff;

  /* 渐变 */
  --grad-brand: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
  --grad-hero: radial-gradient(1200px 600px at 80% -10%, rgba(99,102,241,0.18), transparent 60%),
               radial-gradient(900px 500px at 0% 10%, rgba(14,165,164,0.14), transparent 55%),
               linear-gradient(180deg, #0b1437 0%, #0f1f4d 100%);

  /* 间距 / 圆角 / 阴影 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  --sh-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.05);
  --sh-md: 0 4px 12px rgba(15,23,42,0.08);
  --sh-lg: 0 12px 32px rgba(15,23,42,0.12);
  --sh-brand: 0 10px 30px rgba(79,70,229,0.28);

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --maxw: 1200px;
  --header-h: 64px;

  /* 移动端间距标准（桌面默认，下方媒体查询按断点覆盖）
     --m-page-pad:    页面主容器左右内边距（sub-nav-tabs / console-body 对齐）
     --m-panel-inset: page-panel / dashboard-panel 内卡片相对屏幕边缘的内缩
     --m-card-gap:    卡片/面板之间竖向间距
     --m-card-pad:    卡片内部 padding
     --m-section-gap: cap-content 内 section 间距 */
  --m-page-pad: 20px;
  --m-panel-inset: 0px;
  --m-card-gap: 22px;
  --m-card-pad: 18px;
  --m-section-gap: 22px;

  /* 间距工具令牌：统一分散写在各页面里的 margin-top:Npx，集中收口到此处 */
  --m-gap-xs: 10px;
  --m-gap-sm: 12px;
  --m-gap-md: 16px;
  --m-gap-lg: 22px; /* = --m-card-gap，卡片/面板之间的竖向间距 */

  /* 控制台二级 tab / 页面标题到首个内容块之间的统一间距 */
  --console-body-gap: 22px;
}

/* 间距工具类：统一替代各页面模板里散写的 margin-top:Npx，值全部来自上方令牌 */
.mt-xs { margin-top: var(--m-gap-xs) !important; }
.mt-sm { margin-top: var(--m-gap-sm) !important; }
.mt-md { margin-top: var(--m-gap-md) !important; }
.mt-lg { margin-top: var(--m-gap-lg) !important; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: var(--font);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-primary); text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

/* ---------- 布局容器 ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container.wide { max-width: 1320px; }
.section { padding: 72px 0; }
.section.tight { padding: 48px 0; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head .eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 1px;
  color: var(--c-primary); background: var(--c-info-bg);
  padding: 4px 12px; border-radius: var(--r-full); margin-bottom: 14px;
}
.section-head h2 { font-size: 32px; margin: 0 0 10px; letter-spacing: -0.5px; }
.section-head p { color: var(--c-ink-3); margin: 0 auto; max-width: 620px; font-size: 16px; }
.grid { display: grid; gap: 22px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r-md);
  padding: 11px 20px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: all .18s ease; white-space: nowrap; line-height: 1;
}
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand); }
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-ghost { background: #fff; color: var(--c-ink); border-color: var(--c-line); }
.btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
.btn-light:hover { background: rgba(255,255,255,.24); }
.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: var(--r-sm); }
.btn-xs { padding: 3px 8px; font-size: 11.5px; border-radius: var(--r-sm); }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.05); }
.btn-orange { background: var(--c-danger); color: #fff; box-shadow: 0 6px 18px rgba(249,115,22,.28); }
.btn-orange:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-block { width: 100%; }
/* 凭证行内小按钮：统一收归到 .btn 体系，不再在表格单元格里写内联样式 */
.btn.btn-cred { padding: 0 6px; height: 22px; font-size: 11px; line-height: 20px; border-radius: 4px; background: none; white-space: nowrap; }
.btn.btn-cred-copy { color: var(--c-primary); border: 1px solid var(--c-border); }
.btn.btn-cred-copy:hover { background: #eef2ff; border-color: var(--c-primary); }
.btn.btn-cred-rotate { color: #ea580c; border: 1px solid #fdba74; }
.btn.btn-cred-rotate:hover { background: #fff7ed; border-color: #ea580c; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* 图标按钮：用于工具栏刷新/操作等纯图标按钮，比 btn-ghost.btn-sm 更紧凑 */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: none; border-radius: 7px;
  background: transparent; color: var(--c-text-2);
  cursor: pointer; transition: all .18s ease;
}
.btn-icon:hover { background: var(--c-bg-2); color: var(--c-primary); }
.btn-icon svg { width: 16px; height: 16px; }
.btn-icon:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- 徽章 / 标签 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-full); line-height: 1.6;
}
.badge.free { background: #ecfdf5; color: #047857; }
.badge.paid { background: #fffbeb; color: #b45309; }
.badge.beta { background: #eef2ff; color: #4338ca; }
.badge.online { background: #ecfdf5; color: #059669; }
.badge.offline { background: #fff7ed; color: #ea580c; }
.badge.planned { background: #f1f5f9; color: #64748b; }
.badge.info { background: #eff6ff; color: #2563eb; }
.badge.warn { background: #fffbeb; color: #d97706; }
.badge.ok { background: #ecfdf5; color: #059669; }
.badge.success { background: #e6f7ed; color: #07c160; }
.tag {
  display: inline-block; font-size: 12px; color: var(--c-ink-3);
  background: var(--c-line-2); border-radius: var(--r-sm); padding: 2px 9px; margin: 2px 4px 2px 0;
  white-space: nowrap;
}
.tag-xs { font-size: 11.5px; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.heat-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 10px; border: 1px solid transparent; }
.heat-pill.heat-high { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
.heat-pill.heat-mid { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.heat-pill.heat-low { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.method { font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.method.get { background: #e0f2fe; color: #0369a1; }
.method.post { background: #dcfce7; color: #15803d; }
.method.put { background: #fef3c7; color: #b45309; }
.method.delete { background: #fff7ed; color: #c2410c; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card.hover:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: #c7d2fe; }


/* ---------- 图标（内联 SVG） ---------- */
.ic { width: 22px; height: 22px; flex: none; }
.ic-lg { width: 40px; height: 40px; }
.icon-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; background: var(--c-info-bg); color: var(--c-primary);
}
.icon-box.teal { background: #ccfbf1; color: #0f766e; }
.icon-box.amber { background: var(--c-warning-bg); color: #b45309; }
.icon-box.green { background: var(--c-success-bg); color: #047857; }

/* ============================================================
   前台 PORTAL 专用
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(255,255,255,.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.site-header .inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--c-ink); }
.brand .logo {
  width: 34px; height: 34px; border-radius: 10px; background: var(--grad-brand);
  display: grid; place-items: center; color: #fff; font-weight: 900;
}
.nav { display: flex; gap: 6px; align-items: center; }
.nav a {
  color: var(--c-ink-2); font-weight: 600; font-size: 15px; padding: 8px 14px; border-radius: var(--r-sm);
}
.nav a:hover, .nav a.active { color: var(--c-primary); background: var(--c-info-bg); }
.nav .btn { margin-left: 8px; }
.menu-toggle { display: none; }

.hero {
  position: relative; color: #fff; padding: 96px 0 110px;
  background: var(--grad-hero); overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(circle at 70% 30%, #000, transparent 70%);
}
.hero .inner { position: relative; z-index: 1; max-width: 820px; }
.hero h1 { font-size: 52px; line-height: 1.1; margin: 18px 0 18px; letter-spacing: -1px; }
.hero p.sub { font-size: 19px; color: rgba(255,255,255,.82); margin: 0 0 30px; }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 44px; margin-top: 52px; flex-wrap: wrap; }
.hero-stats .stat .n { font-size: 30px; font-weight: 800; }
.hero-stats .stat .l { color: rgba(255,255,255,.7); font-size: 14px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  padding: 6px 14px; border-radius: var(--r-full);
}

/* 分类筛选 */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
.chip {
  border: 1px solid var(--c-line); background: #fff; color: var(--c-ink-2);
  padding: 9px 18px; border-radius: var(--r-full); font-weight: 600; font-size: 14px; cursor: pointer;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.chip.active { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--sh-brand); }

/* 服务卡片 */
.svc-card { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.svc-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.svc-card h3 { margin: 0; font-size: 18px; }
.svc-card .desc { color: var(--c-ink-3); font-size: 14px; flex: 1; }
.svc-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.svc-cat { font-size: 12px; color: var(--c-ink-4); display: flex; align-items: center; gap: 5px; }

/* API 文档卡片 */
.doc-card { font-family: var(--font-mono); }
.doc-card .endpoint { display: flex; align-items: center; gap: 10px; }
.doc-card .path { color: var(--c-ink); font-size: 14px; word-break: break-all; }
.doc-card .desc { font-family: var(--font); color: var(--c-ink-3); font-size: 14px; margin-top: 8px; }
.doc-card .params { font-family: var(--font); margin-top: 12px; border-top: 1px dashed var(--c-line); padding-top: 12px; }
.doc-card .param { display: flex; gap: 8px; font-size: 13px; padding: 3px 0; }
.doc-card .param .pn { font-family: var(--font-mono); color: var(--c-primary); font-weight: 600; }
.doc-card .param .pt { color: var(--c-ink-4); }
.doc-card pre {
  font-family: var(--font-mono); font-size: 12.5px; background: #0f172a; color: #e2e8f0;
  padding: 12px; border-radius: var(--r-sm); overflow-x: auto; margin-top: 12px;
}

/* 资源 / 案例 / 公告 */
.res-card { display: flex; gap: 14px; align-items: flex-start; }
.res-card h4 { margin: 0 0 4px; font-size: 16px; }
.res-card p { margin: 0; color: var(--c-ink-3); font-size: 13.5px; }
.case-card .quote { font-size: 16px; color: var(--c-ink-2); font-style: italic; margin: 14px 0; position: relative; padding-left: 18px; }
.case-card .quote::before { content: "“"; position: absolute; left: -2px; top: -10px; font-size: 40px; color: #c7d2fe; }
.case-logo { width: 48px; height: 48px; border-radius: 12px; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font-weight: 800; }
.notice {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--c-line); background: #fff; margin-bottom: 12px;
}
.notice .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; flex: none; }
.notice.info .dot { background: var(--c-info); }
.notice.warning .dot { background: var(--c-warning); }
.notice.success .dot { background: var(--c-success); }
.notice .t { font-weight: 700; font-size: 14.5px; }
.notice .c { color: var(--c-ink-3); font-size: 13.5px; }
.notice .date { color: var(--c-ink-4); font-size: 12px; }

.footer {
  background: #0b1437; color: rgba(255,255,255,.7); padding: 56px 0 30px; margin-top: 40px;
}
.footer a { color: rgba(255,255,255,.8); }
.footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.footer h5 { color: #fff; font-size: 15px; margin: 0 0 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 9px; font-size: 14px; }
.footer .bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 20px; font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ============================================================
   后台 CONSOLE 专用
   ============================================================ */
.console { display: flex; height: 100vh; width: 100%; background: var(--c-bg); overflow: hidden; }
.sidebar {
  width: 64px; flex: none; background: #0f172a; color: #cbd5e1;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overflow-x: hidden; transition: width .22s ease;
}
.sidebar.open { width: 240px; }
.sidebar:not(.open) { overflow: visible; }
.sidebar .brand {
  color: #fff; padding: 20px 10px 16px; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 15px; font-weight: 700; letter-spacing: 0.3px; display: flex; align-items: center; gap: 10px;
  justify-content: center; transition: padding .22s ease, justify-content .22s ease;
}
.sidebar.open .brand { padding: 20px 20px 16px; justify-content: flex-start; }
.sidebar .brand .logo { width: 30px; height: 30px; font-size: 15px; flex: none; }
.sidebar .brand .brand-text {
  white-space: nowrap; opacity: 0; width: 0; overflow: hidden;
  transition: opacity .18s ease, width .18s ease;
  display: none;
}
.sidebar.open .brand .brand-text { opacity: 1; width: auto; display: inline; }

/* ── 扁平导航（admin 风格） ── */
.side-nav { padding: 8px 10px; flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.side-nav a {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 10px;
  border-radius: var(--r-sm); color: #94a3b8; font-size: 13.5px;
  font-weight: 500; transition: all .15s ease; position: relative;
  text-decoration: none; line-height: 1;
}
.sidebar.open .side-nav a { justify-content: flex-start; padding: 10px 14px; }
.side-nav a .nav-icon {
  width: 18px; height: 18px; flex-shrink: 0; opacity: .7;
  display: inline-flex; align-items: center; justify-content: center;
}
.side-nav a .nav-icon svg { width: 18px; height: 18px; }
.side-nav a .nav-label {
  white-space: nowrap; opacity: 0; width: 0; overflow: hidden;
  transition: opacity .18s ease, width .18s ease;
}
.sidebar:not(.open) .side-nav a .nav-label { display: none; }
.sidebar.open .side-nav a .nav-label { opacity: 1; width: auto; display: inline; }
.side-nav a:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.side-nav a:hover .nav-icon { opacity: 1; }
.side-nav a.active {
  background: rgba(79,70,229,.14); color: #a5b4fc; font-weight: 600;
}
.side-nav a.active .nav-icon { opacity: 1; color: #818cf8; }
.side-nav a.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; background: #6366f1; border-radius: 0 3px 3px 0;
}

/* 折叠侧边栏：鼠标悬停图标时显示自定义菜单名称提示 */
.sidebar:not(.open) .side-nav a::after {
  content: attr(data-title);
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: #0f172a; color: #fff; padding: 5px 10px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 1.2;
  box-shadow: var(--sh-md); opacity: 0; pointer-events: none;
  transition: opacity .12s ease; z-index: 70;
}
.sidebar:not(.open) .side-nav a:hover::after { opacity: 1; }

.sidebar .foot { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; color: var(--c-ink-3); line-height: 1.6; display: flex; align-items: center; gap: 4px; }
.sidebar .foot .ic { width: 14px; height: 14px; vertical-align: -2px; flex-shrink: 0; }
.sidebar .foot a { color: var(--c-ink-3); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; transition: color .15s; }
.sidebar .foot a:hover { color: var(--c-primary); }
.sidebar .foot .sep { color: rgba(255,255,255,.2); margin: 0 2px; }

.sidebar-foot { padding: 8px 10px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
.sidebar.open .sidebar-foot { padding: 8px 14px; justify-content: flex-start; }
/* CityU 风格：底部圆形箭头切换按钮（展开态 <，收起态 >） */
.sidebar-foot .side-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #cbd5e1;
  border: 1px solid rgba(255,255,255,.12);
  transition: background .15s ease, color .15s ease, transform .2s ease;
}
.sidebar-foot .side-toggle:hover { background: rgba(255,255,255,.14); color: #fff; }
.sidebar-foot .side-toggle svg { width: 18px; height: 18px; }

/* ── 二级导航 tabs（内容区顶部，对齐 Element Plus el-tabs） ── */
.sub-nav-tabs {
  display: flex; gap: 0;
  background: #fff; padding: 0 var(--m-page-pad);
  border-bottom: 1px solid var(--c-line);
  height: 48px; min-height: 48px; box-sizing: border-box;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sub-nav-tabs::-webkit-scrollbar { display: none; }
.sub-nav-tabs a {
  display: inline-flex; align-items: center; flex-shrink: 0;
  height: 100%; box-sizing: border-box;
  padding: 0 18px;
  font-size: 13.5px; font-weight: 500; color: #334155;
  text-decoration: none; position: relative; transition: color .15s;
  line-height: 1; white-space: nowrap; border-bottom: 2px solid transparent;
}
.sub-nav-tabs a:hover { color: var(--c-primary); }
.sub-nav-tabs a.active {
  color: var(--c-primary); font-weight: 600; border-bottom-color: var(--c-primary);
}

.console-main { flex: 1; display: flex; flex-direction: column; min-width: 0; width: 100%; overflow-y: auto; }
.topbar {
  height: 62px; background: #fff; border-bottom: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: sticky; top: 0; z-index: 20;
}
.topbar > div:first-child { min-width: 0; flex: 1; overflow: hidden; }
.topbar h1 { font-size: 18px; margin: 0; white-space: nowrap; }
.topbar .crumb { color: var(--c-ink-4); font-size: 13px; margin-bottom: 2px; }
.topbar .right { display: flex; align-items: center; gap: 12px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.console-body { padding: var(--console-body-gap) var(--m-page-pad) var(--m-page-pad); min-width: 0; overflow-x: hidden; width: 100%; box-sizing: border-box; }
/* ── 修复：移除 flex:1 和 min-height:100% 导致的移动端大块空白
   原 .console-body { flex: 1 } 在 100vh - topbar - sub-nav-tabs 后仍占满剩余高度，
   当面板内容（如 BaseDataPanel 8 子标签）较短时，console-body 内会留下巨大空白。
   改为 min-height:0 + 自然高度，内容多时由 console-main 的 overflow-y:auto 滚动。 */
.page-panel { margin: calc(-1 * var(--console-body-gap)) calc(-1 * var(--m-page-pad) + var(--m-panel-inset)); padding: var(--console-body-gap) var(--m-panel-inset) 0; }
/* 标准：二级 tab 与下方任意首个内容块之间统一保留 section 间距（不依赖 :first-child 类名） */
.page-panel > .card + .card,
.cap-content > .cap-banner + .card,
.page-panel > .card + .cap-banner,
.page-panel > .cap-banner + .card { margin-top: var(--m-card-gap); }
/* 面包屑自身有 padding-top，作为首个元素时抵消，避免与 page-panel 顶部间距叠加 */
.page-panel > .cap-breadcrumb:first-child { padding-top: 0; margin-top: 0; }
.page-title { font-size: 18px; font-weight: 600; color: var(--c-ink); margin: 0 0 16px; }

/* 数据表格 */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .left { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar .right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar .left .select { width: auto; min-width: 140px; }
.toolbar-title { font-size: 15px; font-weight: 600; color: var(--c-ink); margin-right: 4px; white-space: nowrap; }
/* 工具栏内联输入（搜索/筛选）：复用 .input 尺寸，去掉 100% 宽度以适配 flex 布局。
   用 .input.input-inline 提高特异性，确保覆盖 .input 的 width:100% */
.input.input-inline,
.select.input-inline,
.select-sm.input-inline {
  width: auto; min-width: 140px; max-width: 260px; flex: 1;
}
.select.input-inline { padding-right: 32px; background-position: right 10px center; background-size: 14px; }

/* 列表页工具栏规范组件（截图：灰底圆角搜索框 + 整行蓝色新增按钮）
   适用于 .toolbar 内的搜索框和「新增/创建」主按钮；弹窗表单内保持 .input/.btn-primary */
.toolbar-search {
  width: 100%; max-width: 320px; flex: 1;
  border: 1px solid transparent; border-radius: var(--r-md);
  padding: 10px 13px; font-size: 14px; font-family: inherit;
  background: #f1f3f6; color: var(--c-ink); outline: none;
  box-sizing: border-box; transition: background .18s ease;
}
.toolbar-search::placeholder { color: #94a3b8; }
.toolbar-search:focus { background: #e8ebf0; }
.toolbar-add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: var(--r-md);
  padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--grad-brand); color: #fff;
  transition: all .18s ease; white-space: nowrap; line-height: 1;
}
.toolbar-add-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.toolbar-add-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.table-wrap { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); width: 100%; box-sizing: border-box; }
/* 列表表格单元格默认不换行（全局固定行为：table.data 与 table.data-table 通用）。
   开放平台所有列表页均继承此规则，无需在模板里逐个加 white-space:nowrap。
   若某列需换行/省略，在单元格 style 里用 overflow:hidden;text-overflow:ellipsis 配合即可。 */
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th,
table.data-table th {
  text-align: left; padding: 10px 14px; background: #f0f4ff; color: #4338ca;
  font-weight: 600; font-size: 12.5px; border-bottom: 2px solid var(--c-line); white-space: nowrap;
  letter-spacing: 0.02em;
}
table.data th:first-child { width: 42px; text-align: center; }
table.data td:first-child { width: 42px; text-align: center; color: var(--c-ink-4); font-size: 12.5px; }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { background: #e8edff; }
table.data td,
table.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--c-line-2); vertical-align: middle; white-space: nowrap; color: var(--c-ink); }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #fafbff; }
/* list-view 行点击编辑：指针手势 + 明显悬停 */
table.data tbody tr.lv-row-clickable { cursor: pointer; }
table.data tbody tr.lv-row-clickable:hover { background: #f0f4ff; }

/* 表头固定：滚动时表头悬浮 */
table.data thead { position: sticky; top: 0; z-index: 5; }

/* 列表页表格：固定前两列（序号 + 名称），右侧可横向滑动
   全局生效，不再局限于 <=768px，覆盖小平板/大手机横屏（<=1024px） */
.table-wrap.freeze-cols-1 table.data,
.table-wrap.freeze-cols-2 table.data {
  border-collapse: separate;
  border-spacing: 0;
}
.table-wrap.freeze-cols-1 table.data th,
.table-wrap.freeze-cols-1 table.data td,
.table-wrap.freeze-cols-2 table.data th,
.table-wrap.freeze-cols-2 table.data td {
  white-space: nowrap;
  word-break: normal;
  background: #fff;
}
.table-wrap.freeze-cols-1 table.data thead th,
.table-wrap.freeze-cols-2 table.data thead th { background: #f0f4ff; }
.table-wrap.freeze-cols-1 table.data tbody tr:hover td,
.table-wrap.freeze-cols-2 table.data tbody tr:hover td { background: #fafbff; }
.table-wrap.freeze-cols-1 table.data tbody tr:hover td:nth-child(1),
.table-wrap.freeze-cols-2 table.data tbody tr:hover td:nth-child(1),
.table-wrap.freeze-cols-2 table.data tbody tr:hover td:nth-child(2) { background: #fafbff; }
/* 第一列：序号 */
.table-wrap.freeze-cols-1 table.data th:nth-child(1),
.table-wrap.freeze-cols-1 table.data td:nth-child(1),
.table-wrap.freeze-cols-2 table.data th:nth-child(1),
.table-wrap.freeze-cols-2 table.data td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 10;
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  text-align: center;
}
.table-wrap.freeze-cols-1 table.data th:nth-child(1),
.table-wrap.freeze-cols-2 table.data th:nth-child(1) { z-index: 11; }
/* 第二列：名称/关键标识（仅 freeze-cols-2） */
.table-wrap.freeze-cols-2 table.data th:nth-child(2),
.table-wrap.freeze-cols-2 table.data td:nth-child(2) {
  position: sticky;
  left: 56px;
  z-index: 10;
  display: table-cell; /* 覆盖 .cell-title 的 inline-block，否则 sticky 失效 */
  min-width: 90px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 2px 0 4px -2px rgba(0,0,0,0.08);
}
.table-wrap.freeze-cols-2 table.data th:nth-child(2) { z-index: 11; }

/* 列表页表格：移动端固定前两列（序号 + 名称），右侧可横向滑动 */
@media (max-width: 768px) {
  .table-wrap.freeze-cols-1,
  .table-wrap.freeze-cols-2 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap.freeze-cols-1 table.data,
  .table-wrap.freeze-cols-2 table.data {
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 0;
  }
  .table-wrap.freeze-cols-1 table.data th,
  .table-wrap.freeze-cols-1 table.data td,
  .table-wrap.freeze-cols-2 table.data th,
  .table-wrap.freeze-cols-2 table.data td {
    white-space: nowrap;
    word-break: normal;
    background: #fff;
  }
  .table-wrap.freeze-cols-1 table.data thead th,
  .table-wrap.freeze-cols-2 table.data thead th { background: #f0f4ff; }
  .table-wrap.freeze-cols-1 table.data tbody tr:hover td,
  .table-wrap.freeze-cols-2 table.data tbody tr:hover td { background: #fafbff; }
  .table-wrap.freeze-cols-1 table.data tbody tr:hover td:nth-child(1),
  .table-wrap.freeze-cols-2 table.data tbody tr:hover td:nth-child(1),
  .table-wrap.freeze-cols-2 table.data tbody tr:hover td:nth-child(2) { background: #fafbff; }
  /* 第一列：序号 */
  .table-wrap.freeze-cols-1 table.data th:nth-child(1),
  .table-wrap.freeze-cols-1 table.data td:nth-child(1),
  .table-wrap.freeze-cols-2 table.data th:nth-child(1),
  .table-wrap.freeze-cols-2 table.data td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 10;
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    text-align: center;
  }
  .table-wrap.freeze-cols-1 table.data th:nth-child(1),
  .table-wrap.freeze-cols-2 table.data th:nth-child(1) { z-index: 11; }
  /* 第二列：名称/关键标识（仅 freeze-cols-2） */
  .table-wrap.freeze-cols-2 table.data th:nth-child(2),
  .table-wrap.freeze-cols-2 table.data td:nth-child(2) {
    position: sticky;
    left: 56px;
    z-index: 10;
    display: table-cell; /* 覆盖 .cell-title 的 inline-block，否则 sticky 失效 */
    min-width: 90px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 2px 0 4px -2px rgba(0,0,0,0.08);
  }
  .table-wrap.freeze-cols-2 table.data th:nth-child(2) { z-index: 11; }
}

.expand-row td { padding: 0 !important; background: #f8fafc; vertical-align: top; }
.db-tables-panel { padding: 16px 20px; }
.db-tables-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:14px; }
.db-tables-head b { font-size:14px; color:var(--c-ink-2); }
table.data.data-sm th, table.data.data-sm td { padding: 8px 12px; font-size:13px; }
table.data.data-sm code { font-size:12px; }
.cell-title { font-weight: 600; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; display: inline-block; vertical-align: middle; }
.cell-sub { color: var(--c-ink-4); font-size: 12.5px; }
.row-actions { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-start; }
.row-actions.center { justify-content: center; }

/* ===== 统一列表组件 <list-view> ===== */
.list-view { display: flex; flex-direction: column; }
/* 列表主体允许横向滚动，冻结列在其上 sticky 悬浮（桌面 + 移动端一致） */
.list-view .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 列表表格按内容展开，避免列被压缩导致文字互相遮挡；同时保证容器空时仍占满 */
.list-view table.data { width: max-content; min-width: 100%; }
.list-view .cell-title { max-width: 100%; }
.list-view table.data th.lv-frozen,
.list-view table.data td.lv-frozen {
  position: sticky; z-index: 10; background: #fff;
  box-shadow: 2px 0 4px -2px rgba(0,0,0,.06);
}
.list-view table.data thead th.lv-frozen { background: #f0f4ff; z-index: 11; }
.list-view table.data tbody tr:hover td.lv-frozen { background: #fafbff; }
.list-view .lv-frozen.lv-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-view .lv-empty,
.list-view .lv-loading { padding: 40px 16px; text-align: center; color: var(--c-ink-4); font-size: 14px; }
/* 工具栏在窄屏自动换行堆叠，搜索框占满一行 */
.list-view .toolbar { flex-wrap: wrap; gap: 8px; }
.list-view .toolbar .left { flex: 1 1 auto; flex-wrap: wrap; gap: 8px; align-items: center; }
.list-view .toolbar .right { flex-wrap: wrap; gap: 8px; align-items: center; }
.list-view .toolbar .right .btn,
.list-view .toolbar .right .toolbar-add-btn { margin-left: 0; }
.btn-danger { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.btn-danger:hover { background: #fecaca; color: #b91c1c; }
@media (max-width: 768px) {
  .list-view .toolbar .right { width: 100%; }
  .list-view .toolbar .left .toolbar-search { max-width: none; }
}
.row-actions.end { justify-content: flex-end; }
/* 展开明细子行（expandable）：内容由父级 #row-detail slot 注入 */
.list-view table.data .lv-detail-row > .lv-detail-cell { background: var(--c-bg); padding: 0; border-bottom: 1px solid var(--c-border); }
.list-view table.data .lv-detail-row .lv-detail-cell { font-size: 13px; }
/* 操作按钮：图标风格，语义化配色 */
.row-actions .btn-ghost.btn-sm { width: 30px; height: 30px; padding: 0; display:inline-flex;align-items:center;justify-content:center;border-radius:7px; }
.row-actions .btn-ghost.btn-sm svg { width:15px;height:15px; }
.row-actions .act-edit:hover { background: #eef2ff; color: #4338ca; }
.row-actions .act-refresh:hover { background: #fff7ed; color: #d97706; }
.row-actions .act-del:hover { background: #fff7ed; color: #ea580c; }
.row-actions .act-toggle:hover { background: #f0fdf4; color: #16a34a; }
/* 分页 */
.pagination {
  background: #fcfdff;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border-top: 1px solid var(--c-line-2);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: 13px; flex-wrap: wrap; width: 100%; box-sizing: border-box;
}
.pagination .page-total { color: var(--c-text-2); white-space: nowrap; }
.pagination .pager { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.pagination { white-space: nowrap; }
.pagination .page-numbers { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.pagination .page-numbers .btn-primary,
.pagination .page-numbers .btn-ghost { min-width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); }
.pagination .page-indicator {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 34px; padding: 0 10px;
  font-size: 13px; color: var(--c-ink); background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
}
.pagination .page-jump { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-3); font-size: 12px; }
.pagination .page-prev,
.pagination .page-next {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: #fff; color: var(--c-ink); font-size: 16px; line-height: 1;
  cursor: pointer; transition: all .12s;
}
.pagination .page-prev:hover:not(:disabled),
.pagination .page-next:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); background: #eef2ff; }
.pagination .page-prev:disabled,
.pagination .page-next:disabled { opacity: .45; cursor: not-allowed; background: #f8fafc; }
.pagination .page-mobile-only { display: none; }
.pagination select {
  height: 34px; font-size: 13px; padding: 0 26px 0 10px;
  border-radius: var(--r-sm); min-width: auto; max-width: 90px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 12px;
}
.pagination input[type="number"] { width: 48px; height: 34px; text-align: center; border: 1px solid var(--c-line); border-radius: var(--r-sm); font-size: 13px; outline: none; }
.pagination input[type="number"]:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
@media (max-width: 768px) {
  .pagination { flex-wrap: nowrap; padding: 10px 12px; gap: 8px; border-radius: 0 0 var(--r-md) var(--r-md); }
  .pagination .page-desktop-only { display: none !important; }
  .pagination .page-mobile-only { display: inline-flex; }
  .pagination .pager { flex: 1; justify-content: flex-end; gap: 6px; }
  .pagination .page-prev,
  .pagination .page-next { width: 40px; height: 40px; font-size: 18px; border-radius: var(--r-sm); }
  .pagination .page-indicator { height: 40px; min-width: 56px; border-radius: var(--r-sm); font-size: 14px; }
  .pagination select { height: 40px; padding: 0 28px 0 10px; font-size: 14px; min-width: 64px; background-position: right 8px center; }
  .pagination .page-total { font-size: 12px; }
}
/* 空数据 */
.empty { padding: 48px 24px; text-align: center; color: var(--c-text-3); }
.empty div { margin-top: 12px; font-size: 14px; }

/* 表单 / 弹窗 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(15,23,42,.5);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 1200; overflow-y: auto;
}
.modal {
  background: #fff; border-radius: var(--r-xl); width: 100%; max-width: 560px; box-shadow: var(--sh-lg);
  animation: pop .18s ease; overflow: hidden;
}
@keyframes pop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { padding: 20px 24px; border-bottom: 1px solid var(--c-line); display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-body { padding: 22px 24px; max-height: 64vh; overflow-y: auto; }
.modal-foot { padding: 16px 18px; border-top: 1px solid var(--c-line); display: flex; justify-content: flex-end; gap: 10px; }
.modal-foot.between { justify-content: space-between; align-items: center; }
/* 弹窗底部操作按钮组：取消在左、保存在右，统一间距 */
.modal-actions { display: flex; gap: 10px; align-items: center; }
/* 全局弹窗/抽屉关闭按钮：统一尺寸、圆形灰底、hover 放大，确保明显可点 */
.close-x {
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: #e2e8f0;
  color: #334155;
  font-size: 24px;
  font-weight: 700;
  line-height: 0;
  padding: 0 0 2px 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
  flex: 0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(15,23,42,.06);
}
.close-x:hover { background: #cbd5e1; color: #0f172a; transform: scale(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 5px rgba(15,23,42,.12); }
.close-x:active { transform: scale(.92); }

/* 弹窗尺寸工具类（桌面端统一宽度，单一事实来源）。
   移动端由 @media (max-width:1024px)/(max-width:768px) 的 .modal{...!important} 覆盖为满屏。
   未加尺寸类的 .modal 默认走上方基础定义 max-width:560px（即 md）。 */
.modal.modal-sm { max-width: 420px; }
.modal.modal-md { max-width: 560px; }
.modal.modal-lg { max-width: 920px; }
.modal.modal-xl { max-width: 1000px; }

.field { margin-bottom: 16px; min-width: 0; width: 100%; box-sizing: border-box; }
.field label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; color: var(--c-ink-2); }
.field .hint { font-size: 12px; color: var(--c-ink-4); margin-top: 4px; }
/* 表单字段容器在移动端弹窗内不允许被子元素撑开（配合 input[type=date] 等 intrinsic 宽度大的控件） */
.modal .field { overflow: hidden; }

/* 权限 / 多选勾选框（按分类分组，一级可全选） */
.checks { display: flex; flex-direction: column; gap: 0; padding: 2px 0; }
.check-group { padding: 6px 0; }
.check-group + .check-group { border-top: 1px solid var(--c-line); margin-top: 2px; }
.check-group-row { display: flex; align-items: center; gap: 8px; padding: 3px 2px 6px; user-select: none; }
.check-group-check { display: inline-flex; align-items: center; cursor: pointer; flex: 0 0 auto; }
.check-group-check input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--c-primary); cursor: pointer; }
.check-group-head { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; padding: 2px 0; }
.check-group-head:hover { opacity: .8; }
.check-group-title { font-size: 13px; font-weight: 700; color: var(--c-ink-2); }
.check-group-count { font-size: 11px; color: var(--c-ink-4); background: var(--c-bg); padding: 1px 7px; border-radius: 10px; }
.check-group-arrow { font-size: 11px; color: var(--c-ink-4); margin-left: auto; }
.check-group-body { padding: 2px 0 4px 23px; }
.check-item { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--c-line); border-radius: 20px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; font-size: 13px; line-height: 1.3; user-select: none; margin: 2px 4px 2px 0; }
.check-item:hover { border-color: var(--c-primary); background: #f8f7ff; }
.check-item input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--c-primary); flex: 0 0 auto; }
.check-name { font-weight: 500; font-size: 13px; color: var(--c-ink-2); }
.check-key, .check-desc { display: none; }
/* 密钥权限模式：全部权限 / 受限 分段切换 */
.checks-perm { padding: 2px 0; }
.seg { display: inline-flex; gap: 4px; padding: 3px; background: #f1f3f9; border-radius: 9px; margin-bottom: 10px; }
.seg-btn {
  border: none; background: transparent; color: var(--c-ink-3); font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: 7px; cursor: pointer; transition: all .15s; font-family: inherit;
}
.seg-btn:hover:not(:disabled) { color: var(--c-primary); }
.seg-btn.active { background: #fff; color: var(--c-primary); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.seg-btn:disabled { opacity: .45; cursor: not-allowed; }
.perm-all-note {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px; margin: 4px 0;
  background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 9px; color: #047857; font-size: 13px; line-height: 1.5;
}
.perm-all-icon { font-size: 15px; }
.input, .textarea, .select {
  width: 100%; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 10px 13px;
  font-size: 14px; font-family: inherit; outline: none; background: #fff; color: var(--c-ink);
  box-sizing: border-box;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }

/* 搜索框：与 .input 同源风格，避免裸奔 */
.search {
  border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 9px 13px; font-size: 14px; min-width: 140px; max-width: 260px; flex: 1; outline: none;
}
.search:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }

/* 必填表单控件：橙边框，与 danger 统一，聚焦时加深 */
.input.required, .select.required, .textarea.required { border-color: var(--c-required); background: #fff; }
.input.required:focus, .select.required:focus, .textarea.required:focus { border-color: #ea580c; box-shadow: 0 0 0 3px rgba(249,115,22,.15); }
/* iOS Safari 中 date/datetime-local 默认有最小宽度且文本居中，会撑开或短于容器，强制拉齐 */
input[type="date"].input,
input[type="datetime-local"].input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  overflow: hidden;
}
/* iOS Safari 日期输入框内部 edit-field 默认有最小宽度，会撑破容器，强制其跟随 input 宽度 */
input[type="date"].input::-webkit-datetime-edit,
input[type="datetime-local"].input::-webkit-datetime-edit {
  min-width: 0;
  max-width: 100%;
}
/* 日期选择框：text 主输入 + 隐藏原生 date picker，彻底规避 iOS Safari date input 溢出 */
.date-wrap {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.date-wrap .date-text {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: 42px; /* 给右侧日历触发区留空，避免文本被覆盖 */
}
.date-wrap .date-native {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
/* 隐藏原生日期选择器内部 edit-field，确保只占触发区 */
.date-wrap .date-native::-webkit-datetime-edit,
.date-wrap .date-native::-webkit-datetime-edit-fields-wrapper {
  display: none;
}
.date-wrap .date-native::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
/* 移动端弹窗内日期组合框进一步收缩 */
@media (max-width: 768px) {
  .modal .date-wrap .date-text {
    padding-left: 10px;
    padding-right: 38px;
    font-size: 15px;
  }
  .modal .date-wrap .date-native {
    width: 40px;
  }
}
.textarea { resize: vertical; min-height: 84px; }
/* JSON / 代码编辑框：等宽字体 + 灰底，复用 .textarea 基础尺寸（23 处使用，此前无独立样式） */
.code-area { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; background: var(--c-bg); color: var(--c-ink-2); }
/* 下拉框：移除浏览器默认箭头，使用统一自定义箭头（跨浏览器/OS 视觉一致） */
.select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
/* 尺寸变体：紧凑型（替代散落 font-size:12px / 小内边距） */
.input-sm { padding: 6px 10px; font-size: 12px; }
.select-sm { padding: 6px 32px 6px 10px; font-size: 12px; }
/* 复选 / 单选统一包装（替代裸写 inline style 的 label） */
.form-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; color: var(--c-ink-2); user-select: none; }
.form-check.strong { font-weight: 600; font-size: 13.5px; }
.form-check input[type=checkbox], .form-check input[type=radio] { width: 15px; height: 15px; accent-color: var(--c-primary); flex: 0 0 auto; cursor: pointer; }
/* Toggle switch（替代弹窗内原生 checkbox，移动端更大更易点） */
.field .toggle-field { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; cursor: default; }
.toggle-label { font-weight: 500; color: var(--c-ink); font-size: 14px; white-space: nowrap; }
.toggle-state { font-size: 13px; color: var(--c-ink-2); min-width: 2em; }
.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex: 0 0 auto; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ts-slider { position: absolute; cursor: pointer; inset: 0; background: var(--c-line); border-radius: 26px; transition: background .2s ease; }
.ts-slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.toggle-switch input:checked + .ts-slider { background: var(--c-primary); }
.toggle-switch input:checked + .ts-slider::before { transform: translateX(22px); }
/* 表单布局工具类（替代散落 inline style） */
.flex-1 { flex: 1; }
.ml-1 { margin-left: 4px; }
.ml-3 { margin-left: 12px; }
.mt-1 { margin-top: 4px; }
.w-48 { width: 48px; }
.w-50 { width: 50px; }
.w-58 { width: 58px; }
.w-90 { width: 90px; }
.w-100 { width: 100%; }
.min-w-58 { min-width: 58px; }
.min-w-140 { min-width: 140px; }
.min-w-260 { min-width: 260px; }
.min-w-280 { min-width: 280px; }
.max-w-400 { max-width: 400px; }
.text-13 { font-size: 13px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* API 市场分类导航 + 卡片 */
.cat-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--c-ink-2); transition: background .15s, color .15s; user-select: none; }
.cat-nav-item:hover { background: var(--c-bg); color: var(--c-ink); }
.cat-nav-item.active { background: rgba(79,70,229,.08); color: var(--c-primary); font-weight: 600; }
.cat-nav-item .ic { width: 18px; height: 18px; stroke-width: 2; }
.api-card { background: #fff; border: 1px solid var(--c-line); border-radius: 10px; padding: 18px; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .1s; display: flex; flex-direction: column; gap: 12px; }
.api-card:hover { border-color: var(--c-primary); box-shadow: 0 4px 12px rgba(79,70,229,.08); transform: translateY(-1px); }
.api-card-head { display: flex; align-items: center; gap: 14px; }
.api-card-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(79,70,229,.08); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; }
.api-card-icon .ic { width: 22px; height: 22px; }
.api-card-title { font-size: 15px; font-weight: 600; color: var(--c-ink); line-height: 1.3; }
.api-card-desc { font-size: 12.5px; color: var(--c-ink-3); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.api-card .badge.free { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.api-card .badge.paid { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.api-card .badge.beta { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.api-card .badge.online { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.api-card .badge.offline { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.api-card { position: relative; }
.api-card .cap-edit {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: var(--c-ink-3); opacity: .65;
  transition: opacity .15s, border-color .15s, color .15s, background .15s;
}
.api-card .cap-edit svg { width: 12px; height: 12px; }
.api-card .cap-edit:hover { opacity: 1; border-color: var(--c-line); color: var(--c-primary); background: #f8fafc; }

/* 租户 Logo 上传控件 */
.logo-upload { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.logo-preview { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; border: 1px solid var(--c-line); background: #fff; padding: 3px; flex: 0 0 auto; }
.logo-actions { display: flex; flex-direction: column; gap: 6px; }
.logo-actions input[type=file] { font-size: 12.5px; color: var(--c-ink-3); }
.form-static-url { font-size: 12.5px; color: var(--c-text-3); word-break: break-all; padding: 6px 0; }
.form-image-preview { max-width: 100%; max-height: 220px; border-radius: 8px; border: 1px solid var(--c-border); object-fit: contain; background: var(--c-bg); }
.input:disabled, .textarea:disabled, .select:disabled,
.date-combo.disabled .input, .date-combo.disabled .date-native,
.toggle-field.disabled .toggle-switch { opacity: .65; background: var(--c-bg-2); cursor: not-allowed; }

/* 提示 / 空态 */
.toast {
  position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 10000;
  display: inline-flex; align-items: center; gap: 8px;
  min-width: min-content; max-width: min(90vw, 360px);
  background: #ED1C24; color: #fff; padding: 9px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.4;
  box-shadow: 0 8px 20px rgba(237,28,36,.25);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  pointer-events: none;
  animation: toast-pop .2s ease;
}
@keyframes toast-pop {
  from { transform: translateX(-50%) translateY(12px) scale(.98); opacity: 0; }
  to { transform: translateX(-50%); opacity: 1; }
}
/* 全局 Toast 浮层：默认隐藏，由 showToast() 切换 .show 显隐 */
#global-toast { display: none; }
#global-toast.show { display: inline-flex; }
.empty { text-align: center; padding: 60px 20px; color: var(--c-ink-4); }
.empty .ic { width: 48px; height: 48px; opacity: .5; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.stat-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sh-sm); }
.stat-card .n { font-size: 28px; font-weight: 800; color: var(--c-primary); }
.stat-card .l { color: var(--c-ink-3); font-size: 13px; margin-top: 2px; }

/* 租户内容统计小卡片（紧凑门户概览版） */
.portal-stats { display: flex; gap: 0; border: 1px solid var(--c-line-2); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden; margin-bottom: 14px; }
.ps-item { flex: 1; text-align: center; padding: 10px 6px; border-right: 1px solid var(--c-line-2); }
.ps-item:last-child { border-right: none; }
.ps-n { display: block; font-size: 20px; font-weight: 700; color: var(--c-primary); line-height: 1.2; }
.ps-l { font-size: 11px; color: var(--c-ink-4); margin-top: 2px; }

/* 门户租户列表（紧凑行） */
.portal-tenants { display: flex; flex-direction: column; gap: 8px; }
.pt-row { background: var(--c-surface); border: 1px solid var(--c-line-2); border-radius: var(--r-md); padding: 10px 14px; transition: box-shadow .15s; }
.pt-row:hover { box-shadow: var(--sh-sm); }
.pt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pt-name { font-size: 13.5px; color: var(--c-ink-1); }
.pt-code { font-size: 11.5px; color: var(--c-ink-4); background: var(--c-line-1); padding: 1px 7px; border-radius: 4px; font-family: var(--font-mono); }
.pt-manage { margin-left: auto !important; padding: 3px 8px !important; font-size: 11.5px; }

.pt-stats { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--c-ink-3); flex-wrap: wrap; }
.pt-stats span i { font-weight: 600; color: var(--c-primary); font-style: normal; margin-right: 2px; }
.pt-total { margin-left: auto; color: var(--c-ink-4); font-style: normal; font-size: 11px; }

.pt-recent { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pt-tag { font-size: 11px; color: var(--c-ink-3); background: #f1f5f9; padding: 2px 8px; border-radius: 4px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; cursor: default; border: 1px solid #e2e8f0; line-height: 1.6; display: inline-flex; align-items: center; }
.pt-tag b { font-weight: 600; margin-right: 4px; }
.pt-t-A { color: #818cf8; } /* API */
.pt-t-分 { color: #f59e0b; } /* 分类 */
.pt-t-文 { color: #06b6d4; } /* 文档 */
.pt-t-资 { color: #10b981; } /* 资源 */
.pt-t-案 { color: #ec4899; } /* 案例 */
.pt-t-公 { color: #f97316; } /* 公告 */

.token-box {
  display: flex; align-items: center; gap: 10px; background: #0f172a; color: #e2e8f0;
  padding: 12px 16px; border-radius: var(--r-md); font-family: var(--font-mono); font-size: 13px;
}

/* 控制台登录 */
.console-login { min-height: 100vh; display: grid; place-items: center; background: var(--grad-hero); padding: 20px; }
.login-card { background: #fff; border-radius: var(--r-xl); padding: 38px; width: 100%; max-width: 400px; box-shadow: var(--sh-lg); }
.login-card h2 { margin: 0 0 6px; }
.login-card p.sub { color: var(--c-ink-3); margin: 0 0 22px; font-size: 14px; }

/* 登录方式切换 Tab（账号密码 / 手机号登录） */
.login-tabs { display: flex; gap: 8px; margin-bottom: 18px; background: #f3f4f7; border-radius: 10px; padding: 4px; }
.login-tab { flex: 1; border: 0; background: transparent; padding: 9px 0; border-radius: 8px; font-size: 14px; color: var(--c-ink-3); cursor: pointer; transition: .15s; }
.login-tab.active { background: #fff; color: var(--c-primary); font-weight: 600; box-shadow: 0 1px 4px rgba(15,23,42,.08); }
/* 验证码输入 + 获取按钮一行 */
.code-row { display: flex; gap: 10px; }
.code-row .input { flex: 1; }
.code-row .btn { white-space: nowrap; flex-shrink: 0; }
.login-hint { margin: 14px 0 0; font-size: 12px; color: var(--c-ink-3); text-align: center; }

/* 只读输入框（如「更新日期」系统自动维护） */
.input.ro, .input[readonly] { background: #f5f6f8; color: var(--c-ink-3); cursor: not-allowed; }

/* ============================================================
   场景详情抽屉（cap-modal）—— PC 右侧滑出，移动端全屏
   ============================================================ */
.cap-modal-mask {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, .42);
  display: flex; justify-content: flex-end; align-items: stretch;
}
.cap-modal {
  position: relative; width: 440px; max-width: 92vw; height: 100%;
  background: #fff; box-shadow: -10px 0 36px rgba(15, 23, 42, .22);
  padding: 22px 26px; box-sizing: border-box; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.cap-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--c-line); flex: 0 0 auto;
  position: relative;
}
.cap-modal-head > :not(.close-x) { flex: 0 0 auto; }
.cap-invoke-box {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--c-bg); border: 1px solid var(--c-line);
}
.cap-invoke-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--c-ink); }
/* 抽屉滑入/淡入动画 */
.cap-slide-enter-active, .cap-slide-leave-active { transition: opacity .25s ease; }
.cap-slide-enter-from, .cap-slide-leave-to { opacity: 0; }
.cap-slide-enter-active .cap-modal, .cap-slide-leave-active .cap-modal { transition: transform .28s cubic-bezier(.22,.61,.36,1); }
.cap-slide-enter-from .cap-modal, .cap-slide-leave-to .cap-modal { transform: translateX(100%); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --m-page-pad: 16px;
    --m-panel-inset: 8px;
    --m-card-gap: 18px;
    --m-card-pad: 16px;
    --m-section-gap: 18px;
  }
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .footer .cols { grid-template-columns: 1fr 1fr; }

  /* ── 控制台横屏 / 小平板（768px < width <= 1024px）──
     手机横屏时屏幕高度不足、宽度也局促，必须让 sidebar 收起为图标栏、
     toolbar 垂直、表格横向滚动，避免内容被挤压截断。 */
  .console { min-width: 0; width: 100%; } /* 防止 flex 子项撑开整体，同时确保占满视口宽度 */
  .sidebar,
  .sidebar:not(.open) {
    width: 64px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 强制占满整高，菜单超长时内部滚动，避免图标溢出到 sidebar 背景外 */
  }
  .sidebar.open { width: 240px; box-shadow: var(--sh-lg); }
  .sidebar:not(.open) .brand { padding: 16px 10px 12px; justify-content: center; }
  .sidebar:not(.open) .brand-text,
  .sidebar:not(.open) .nav-label { display: none; }
  .sidebar:not(.open) .side-nav { padding: 6px 10px; }
  .sidebar:not(.open) .side-nav a { justify-content: center; padding: 8px 10px; }
  .sidebar:not(.open) .sidebar-foot { justify-content: center; padding: 8px 10px; }
  /* 横屏/小平板下隐藏折叠 sidebar 的 tooltip：触摸设备无 hover，且会遮挡主内容区 */
  .sidebar:not(.open) .side-nav a::after { display: none; }

  .console-main { width: 100%; min-width: 0; }
  .console-body { padding: var(--console-body-gap) var(--m-page-pad) var(--m-page-pad); width: 100%; box-sizing: border-box; min-width: 0; }
  .page-panel { margin: calc(-1 * var(--console-body-gap)) calc(-1 * var(--m-page-pad) + var(--m-panel-inset)); padding: var(--console-body-gap) var(--m-panel-inset) 0; }
  .page-panel > .card { border-radius: var(--r-md); padding: var(--m-card-pad); }
  .page-panel > .cap-banner { border-radius: var(--r-md); }
  .page-panel > .card + .card,
  .page-panel > .cap-banner + .card { margin-top: var(--m-card-gap); }
  .dashboard-panel .stat-grid { gap: var(--m-card-gap); margin-bottom: var(--m-card-gap); }
  .dashboard-panel .stat-card { padding: var(--m-card-pad); }
  .dashboard-panel > .card { padding: var(--m-card-pad); margin-top: var(--m-card-gap) !important; border-radius: var(--r-md); }

  /* toolbar 垂直铺满，避免横向挤压导致右侧空白/截断 */
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar .left { flex-direction: column; flex-wrap: nowrap; width: 100%; gap: 8px; align-items: stretch; }
  .toolbar .left .input-inline { width: 100%; max-width: none; flex: none; }
  .toolbar .left .select { width: 100%; flex: none; min-width: auto; }
  .toolbar .right { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .toolbar .right .input { width: 100%; flex: none; }
  .toolbar .right .btn { flex: 1; justify-content: center; }
  .toolbar .toolbar-search,
  .toolbar .left .toolbar-search { width: 100%; max-width: none; flex: none; }
  .toolbar .toolbar-add-btn { width: 100%; }

  /* 表格强制最小宽度并允许横向滚动，字段不再被压扁 */
  .table-wrap { overflow-x: auto; width: 100%; box-sizing: border-box; }
  .table-wrap.freeze-cols-1,
  .table-wrap.freeze-cols-2 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap.freeze-cols-1 table.data,
  .table-wrap.freeze-cols-2 table.data { min-width: 680px; }
  /* 移动端长标题列限制最大宽度，避免撑爆单元格 */
  .cell-title { max-width: 45vw; }

  /* 二级 tab 可横向滑动 */
  .sub-nav-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-shrink: 0; padding: 0 var(--m-page-pad); gap: 8px; }
  .sub-nav-tabs a { flex: 0 0 auto; flex-shrink: 0; -webkit-flex-shrink: 0; padding: 16px 20px; font-size: 14px; }

  .field-row { grid-template-columns: 1fr; }
  .portal-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
  .ps-item { border-right: 1px solid var(--c-line-2); }
  .card { padding: var(--m-card-pad); margin-left: 0 !important; margin-right: 0 !important; }
  .cap-banner { padding: 14px var(--m-card-pad); border-radius: var(--r-md); }
  .cap-content > .cap-banner + .card { margin-top: var(--m-card-gap); }

  /* 弹窗满屏：横屏/小平板（768px < width <= 1024px）同样要铺满，避免 560px 居中上下截断 */
  .modal-mask { padding: 0 !important; }
  .modal {
    width: 100% !important; max-width: 100% !important;
    border-radius: 0 !important; min-height: auto !important; max-height: 100vh !important; max-height: 100dvh !important;
    box-shadow: none !important;
    display: flex !important; flex-direction: column !important;
  }
  .modal-head, .modal-foot { padding: 16px !important; flex: 0 0 auto !important; }
  .modal .modal-body { padding: 16px !important; overflow-x: hidden; overflow-y: auto; flex: 0 0 auto !important; max-height: calc(100vh - 150px) !important; max-height: calc(100dvh - 150px) !important; box-sizing: border-box !important; width: 100% !important; }
  .modal-foot { flex-direction: row; }
  .modal-foot .btn { flex: 1; justify-content: center; }
  /* 场景抽屉移动端全屏铺满（手机/iPad 横竖屏） */
  .cap-modal-mask { padding: 0; }
  .cap-modal { width: 100vw; max-width: 100%; padding: 16px; }
  /* 移动端关闭按钮放大，便于手指点击 */
  .close-x { width: 40px; height: 40px; font-size: 26px; }
  /* iOS Safari：输入框/下拉框/文本域字体小于 16px 时聚焦会自动放大页面，平板/手机统一提升到 16px
     覆盖 .input/.select/.textarea/.toolbar-search/.search/.input-inline/.page-size/.code-area 以及所有原生文本类输入 */
  .input, .input-inline, .input-sm, .textarea, .select, .select-sm, .toolbar-search, .search, .page-size, .code-area,
  input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="password"], input[type="date"], input[type="datetime-local"], input:not([type]),
  textarea, select { font-size: 16px !important; }

  /* 能力/技能/软件链接中心详情移动端改为全屏弹窗 */
  .market-center-page .cap-content > .empty,
  .market-center-page .cap-content > .api-doc {
    position: fixed; inset: 0; z-index: 1000;
    background: #f8fafc;
    padding: var(--m-page-pad);
    padding-top: calc(12px + env(safe-area-inset-top));
    overflow-y: auto; border-radius: 0; margin: 0;
    box-sizing: border-box;
  }
  .market-center-page .api-doc-head {
    position: sticky; top: 0; background: #f8fafc; z-index: 1;
    margin: calc(-1 * var(--m-page-pad)) calc(-1 * var(--m-page-pad)) 12px;
    padding: 12px var(--m-page-pad);
    border-bottom: 1px solid var(--c-line);
  }
  .market-center-page .api-doc-body {
    padding-bottom: calc(var(--m-page-pad) + env(safe-area-inset-bottom));
  }
  /* 能力/技能中心详情返回按钮：仅移动端显示 */
  .market-center-page .api-doc-header .m-back-btn { display: inline-flex; margin-right: 8px; }
}
.menu-btn { display: none; }
@media (max-width: 768px) {
  :root {
    --m-page-pad: 16px;
    --m-panel-inset: 10px;
    --m-card-gap: 16px;
    --m-card-pad: 16px;
    --m-section-gap: 16px;
  }
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column; position: absolute; top: var(--header-h); left: 0; right: 0;
    background: #fff; padding: 14px; border-bottom: 1px solid var(--c-line); gap: 4px; box-shadow: var(--sh-md);
  }
  .menu-toggle { display: inline-flex; }
  .hero { padding: 64px 0 80px; }
  .hero h1 { font-size: 36px; }
  .hero-stats { gap: 28px; }
  .section { padding: 52px 0; }
  .section-head h2 { font-size: 26px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; margin-right: 12px;
    border-radius: 50%;
    background: #eef2f7; color: #475569;
    border: 1px solid var(--c-line);
    transition: background .15s ease, color .15s ease;
  }
  .menu-btn:hover { background: #e2e8f0; color: #1e293b; }
  .menu-btn svg { width: 20px; height: 20px; }
  .sidebar { position: fixed; z-index: 60; width: 240px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--sh-lg); }
  .sidebar.open { transform: none; }
  .sidebar .brand { padding: 20px 20px 16px; justify-content: flex-start; }
  .sidebar .brand .brand-text { opacity: 1; width: auto; }
  .side-nav a { justify-content: flex-start; padding: 10px 14px; }
  .side-nav a .nav-label { opacity: 1; width: auto; }
  .console-main { width: 100%; }
  .console-body { padding: var(--console-body-gap) var(--m-page-pad) var(--m-page-pad); }
  .dashboard-panel .stat-grid { gap: var(--m-card-gap); margin-bottom: var(--m-card-gap); }
  .dashboard-panel .stat-card { padding: var(--m-card-pad); }
  .dashboard-panel .stat-card .n { font-size: 22px; }
  .dashboard-panel .stat-card .l { font-size: 12px; }
  .dashboard-panel > .card { padding: var(--m-card-pad); margin-top: var(--m-card-gap) !important; border-radius: var(--r-md); }
  .page-panel { margin: calc(-1 * var(--console-body-gap)) calc(-1 * var(--m-page-pad) + var(--m-panel-inset)); padding: var(--console-body-gap) var(--m-panel-inset) 0; }
  .page-panel > .card { border-radius: var(--r-md); }
  .page-panel > .cap-banner { border-radius: var(--r-md); }
  .page-panel > .card + .card,
  .page-panel > .cap-banner + .card { margin-top: var(--m-card-gap); }
  .sidebar-foot { display: none; }
  .sidebar-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 55; }
  .card { padding: var(--m-card-pad); margin-left: 0 !important; margin-right: 0 !important; }
  .cap-banner { padding: 14px var(--m-card-pad); border-radius: var(--r-md); }
  .cap-content > .cap-banner + .card { margin-top: var(--m-card-gap); }
  /* 二级导航 tab 统一使用移动端间距标准 */
  .sub-nav-tabs { padding: 0 var(--m-page-pad); gap: 8px; }
  .sub-nav-tabs a { padding: 16px 20px; font-size: 14px; }
  .table-wrap { overflow-x: auto; width: 100%; box-sizing: border-box; }
  table.data { min-width: 680px; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar .left { flex-direction: column; flex-wrap: nowrap; width: 100%; gap: 8px; align-items: stretch; }
  .toolbar .left .input-inline { width: 100%; max-width: none; flex: none; }
  .toolbar .left .select { width: 100%; flex: none; min-width: auto; }
  .toolbar .right { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .toolbar .right .input { width: 100%; flex: none; }
  .toolbar .right .btn { flex: 1; justify-content: center; }
  .toolbar .toolbar-search,
  .toolbar .left .toolbar-search { width: 100%; max-width: none; flex: none; }
  .toolbar .toolbar-add-btn { width: 100%; }
  /* 移动端弹窗：全屏覆盖，不再留边距（用户确认移动端覆盖整页可接受）
     注意：本文件第 994 行另有第二套 .modal 定义且更靠后，会覆盖上面的 padding，故这里必须加 !important 才能压住 */
  .modal-mask { padding: 0 !important; }
  .modal {
    width: 100% !important; max-width: 100% !important;
    border-radius: 0 !important; min-height: auto !important; max-height: 100vh !important; max-height: 100dvh !important;
    box-shadow: none !important;
    display: flex !important; flex-direction: column !important;
  }
  .modal-head, .modal-foot { padding: 16px !important; flex: 0 0 auto !important; }
  .modal .modal-body { padding: 16px !important; overflow-x: hidden; overflow-y: auto; flex: 0 0 auto !important; max-height: calc(100vh - 150px) !important; max-height: calc(100dvh - 150px) !important; box-sizing: border-box !important; width: 100% !important; }
  .modal-foot { flex-direction: row; }
  .modal-foot .btn { flex: 1; justify-content: center; }
  .field-row { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr; }
  .portal-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
  .ps-item { border-right: 1px solid var(--c-line-2); }
  .sub-nav-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-shrink: 0; padding: 0 var(--m-page-pad); gap: 8px; }
  .sub-nav-tabs a { flex: 0 0 auto; flex-shrink: 0; -webkit-flex-shrink: 0; padding: 16px 20px; font-size: 14px; }
  .relation-chart { height: 360px !important; }
  /* 移动端 toggle switch 放大，便于手指点击 */
  .toggle-switch { width: 56px; height: 30px; }
  .ts-slider { border-radius: 30px; }
  .ts-slider::before { height: 24px; width: 24px; left: 3px; bottom: 3px; }
  .toggle-switch input:checked + .ts-slider::before { transform: translateX(26px); }
  .toggle-label { font-size: 15px; }
  .toggle-state { font-size: 14px; }
}
.side-toggle svg { width: 18px; height: 18px; }
.relation-chart { width: 100%; height: 520px; background: #fafbff; border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.relation-chart.relation-chart-flat { background: transparent; border: none; border-radius: 0; }

/* ============================================================
   自定义面板（开发工具 / 认证管理）
   ============================================================ */
.subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.subtab {
  border: 1px solid var(--c-line); background: #fff; color: var(--c-ink-2);
  padding: 8px 16px; border-radius: var(--r-full); font-weight: 600; font-size: 13.5px; cursor: pointer;
  transition: all .15s ease;
}
.subtab:hover { border-color: var(--c-primary); color: var(--c-primary); }
.subtab.active { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--sh-brand); }

.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.kv > div { display: flex; flex-direction: column; gap: 2px; }
.kv span { font-size: 12px; color: var(--c-ink-4); }
.kv b { font-size: 14px; color: var(--c-ink); }

.proxy-result {
  font-family: var(--font-mono); font-size: 12.5px; background: #0f172a; color: #e2e8f0;
  padding: 14px; border-radius: var(--r-md); overflow-x: auto; margin-top: 12px; max-height: 320px;
}

/* HTTP 方法徽标配色 */
.method.get { background: #eef2ff; color: #4338ca; }
.method.post { background: #ecfdf5; color: #047857; }
.method.put { background: #fffbeb; color: #b45309; }
.method.delete { background: #fef2f2; color: #b91c1c; }
.method.patch { background: #f5f3ff; color: #6d28d9; }

/* 可排序表头 */
.col-head.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.col-head.sortable:hover { background: var(--c-line-2); }
.col-head.sortable .col-label { margin-right: 2px; }
.sort-ind { display: inline-block; margin-left: 4px; font-size: 10px; color: var(--c-info); vertical-align: middle; }

/* 单元格：强调主文本 */
.cell-strong { font-weight: 700; color: var(--c-ink); font-size: 14px; line-height: 1.3; }

/* ════════════════════════════════════
   控制台仪表盘 (Dashboard)
   ════════════════════════════════════ */
.dash-welcome {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #1a3a6b 0%, #2d5a9e 100%);
  color: #fff; border-radius: 10px; padding: 22px 24px;
  margin-bottom: 20px;
}
.dash-welcome h2 { color: #fff; }
.dash-welcome p { color: rgba(255,255,255,.7); }
.dash-welcome-actions { display: flex; gap: 8px; flex-shrink: 0; }
.dash-welcome-actions .btn-primary { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.dash-welcome-actions .btn-primary:hover { background: rgba(255,255,255,.25); }

.quick-tile {
  display: flex; align-items: center; gap: 8px; padding: 14px 16px;
  background: var(--c-surface); border: 1px solid var(--c-line-2);
  border-radius: 8px; text-decoration: none; color: var(--c-ink-1);
  font-size: 13.5px; font-weight: 500; transition: all .15s;
}
.quick-tile:hover { border-color: var(--c-info); color: var(--c-info); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.06); }

.dash-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.dash-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--c-line-2); font-size: 13px; }
.dash-item:last-child { border-bottom: none; }
.dash-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-dot.info { background: var(--c-info); } .dash-dot.success { background: #22c55e; }
.dash-dot.beta { background: #f59e0b; } .dash-dot.warning { background: #f97316; }
.dash-dot.online { background: #22c55e; } .dash-dot.danger { background: #f97316; }
.dash-label { color: var(--c-ink-3); flex: 1; }

/* ════════════════════════════════════
   个人中心 (Profile)
   ════════════════════════════════════ */
.profile-header { display: flex; align-items: center; gap: 18px; padding: 8px 0; }
.avatar-lg { width: 56px; height: 56px; line-height: 56px; text-align: center;
  border-radius: 14px; background: linear-gradient(135deg,#E87722,#1a3a6b);
  color: #fff; font-size: 22px; font-weight: 700; flex-shrink: 0; }
.profile-info h3 { font-size: 17px; }
.profile-info p { margin: 2px 0 !important; }
.profile-header.compact { padding: 4px 0; }
.profile-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 4px; }
.profile-title-row h3 { margin: 0; line-height: 1.2; }
.profile-title-row .cell-sub { font-size: 12px; color: var(--c-ink-3); }
.profile-contact-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; color: var(--c-ink-3); font-size: 13px; }
.profile-update-wrap { display: inline-flex; }

@media (max-width: 768px) {
  .profile-update-wrap { display: flex; width: 100%; }
  .profile-update-wrap .refresh-btn { flex: 1; width: 100%; justify-content: center; padding: 10px 0; }
  .profile-update-wrap .refresh-btn .rb-icon + .rb-text { margin-left: 6px; }
}

/* ════════════════════════════════════
   消息中心 (Messages)
   ════════════════════════════════════ */
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg-item { display: flex; gap: 12px; padding: 14px 16px; background: var(--c-surface);
  border: 1px solid var(--c-line-2); border-radius: 8px; cursor: pointer;
  transition: background .2s, border-color .2s, opacity .3s; }
.msg-item:hover { background: var(--c-line-1); }
.msg-item.unread { border-left: 3px solid var(--c-info); background: #eff6ff; }
.msg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary);
  flex-shrink: 0; margin-top: 6px; transition: opacity .25s, transform .25s; }
.msg-body { flex: 1; min-width: 0; }
.msg-title { font-size: 14px; font-weight: 600; color: var(--c-ink-1); margin-bottom: 3px; transition: opacity .2s; }
.msg-item:not(.unread) .msg-title { font-weight: 500; color: var(--c-ink-2); }
.msg-item:not(.unread) .msg-desc { color: var(--c-ink-4); }
.msg-desc { font-size: 12.5px; color: var(--c-ink-3); line-height: 1.6; margin-bottom: 5px; }
.msg-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--c-ink-4); }

/* Header avatar link */
.avatar-link { text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; }

/* 问题反馈入口：外圆与头像同尺寸，仅放大内部问号并保持橙色醒目 */
.avatar-feedback {
  background: #f97316;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}
.avatar-feedback:hover { background: #ea670c; box-shadow: 0 3px 10px rgba(249, 115, 22, 0.45); }

/* 顶部租户切换 */
.tenant-switcher { position: relative; display: inline-flex; }
.tenant-switcher-btn {
  display: inline-flex; align-items: center; gap: 6px; position: relative;
  height: 34px; padding: 0 16px 0 20px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: all .15s ease;
}
.tenant-switcher-btn:hover { border-color: var(--c-primary); box-shadow: 0 2px 6px rgba(67,97,238,0.10); }
.tenant-switcher.open .tenant-switcher-btn { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(67,97,238,0.08); }
.tenant-switcher-btn .tenant-label-pc {
  font-size: 13.5px; font-weight: 600; color: var(--c-ink);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tenant-switcher-btn .avatar-tenant-mobile {
  display: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-primary); color: #fff; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
  padding: 2px; box-sizing: border-box;
}
.tenant-switcher-btn .avatar-tenant-mobile .tenant-abbr-row {
  font-size: 10px; font-weight: 700; transform: scale(0.92);
  line-height: 1.2; letter-spacing: 0.5px;
}
.tenant-switcher-btn .tenant-arrow { width: 14px; height: 14px; color: var(--c-ink-3); display: grid; place-items: center; }
.tenant-switcher.open .tenant-arrow { transform: rotate(180deg); color: var(--c-primary); }
.tenant-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px;
  z-index: 100;
}
.tenant-dropdown-header {
  font-size: 12px;
  color: var(--c-ink-4);
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 4px;
}
.tenant-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-md);
  color: var(--c-ink);
  text-decoration: none;
  font-size: 13.5px;
}
.tenant-dropdown a:hover { background: var(--c-bg); }
.tenant-dropdown a.active { background: rgba(67,97,238,0.08); color: var(--c-primary); font-weight: 600; }
.tenant-dropdown .tenant-dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-bg); color: var(--c-ink-3);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.tenant-dropdown a.active .tenant-dot { background: var(--c-primary); color: #fff; }
.tenant-dropdown .tenant-empty { padding: 12px 8px; color: var(--c-ink-4); font-size: 13px; text-align: center; }

@media (max-width: 768px) {
  .tenant-switcher-btn { padding: 0; width: 34px; height: 34px; border-radius: 50%; justify-content: center; border: none; background: transparent; box-shadow: none; }
  .tenant-switcher-btn:hover, .tenant-switcher.open .tenant-switcher-btn { background: transparent; box-shadow: none; border-color: transparent; }
  .tenant-switcher-btn .tenant-label-pc { display: none; }
  .tenant-switcher-btn .avatar-tenant-mobile { display: flex; }
  .tenant-switcher-btn .tenant-arrow { display: none; }
  .tenant-switcher .tenant-dropdown {
    position: fixed;
    top: 68px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 260px;
    min-width: auto;
  }
}

/* 必填星号 */
.req { color: var(--c-required); font-weight: 700; margin-left: 2px; }

/* 问题反馈弹窗：截图上传与预览 */
.feedback-upload { display: flex; flex-direction: column; gap: 8px; }
.feedback-upload-zone {
  position: relative;
  min-height: 110px;
  border: 2px dashed var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s ease; overflow: hidden;
}
.feedback-upload-zone:hover { border-color: var(--c-primary); background: #f5f7ff; }
.feedback-upload-zone.disabled { opacity: .6; cursor: not-allowed; }
.feedback-upload-zone input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.feedback-upload-zone.disabled input[type="file"] { cursor: not-allowed; }
.feedback-upload-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px; color: var(--c-ink-3); text-align: center;
}
.feedback-upload-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--c-primary); font-size: 22px; line-height: 40px;
  box-shadow: var(--sh-sm); font-weight: 300;
}
.feedback-upload-text { font-size: 14px; font-weight: 600; color: var(--c-ink-2); }
.feedback-upload-hint { font-size: 12px; color: var(--c-ink-4); }
.feedback-preview {
  max-width: 100%; max-height: 220px; border-radius: var(--r-md);
  object-fit: contain; padding: 10px; box-sizing: border-box;
}
.feedback-remove-img {
  align-self: flex-start;
  border: none; background: transparent; color: var(--c-danger);
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0;
}
.feedback-remove-img:hover { text-decoration: underline; }

/* 问题反馈弹窗：顶部说明 banner 加宽行距与内边距，避免文字拥挤 */
.feedback-cap-banner {
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(79,70,229,.06), rgba(16,163,74,.06));
}
.feedback-cap-banner p {
  font-size: 14px;
  line-height: 1.85;
  margin: 0;
  color: var(--c-ink-3);
}
.feedback-cap-banner p b { font-size: 14px; color: var(--c-primary); }
.feedback-modal .field { margin-bottom: 18px; }
.feedback-modal .field label {
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--c-ink);
}

/* 问题反馈弹窗移动端优化 */
@media (max-width: 768px) {
  .modal.feedback-modal .modal-head { padding: 14px 16px; }
  .modal.feedback-modal .modal-body { padding: 14px 16px; }
  .modal.feedback-modal .modal-foot { padding: 12px 16px; }
  .feedback-upload-zone { min-height: 100px; }
  .feedback-preview { max-height: 160px; }
  .feedback-cap-banner { padding: 16px 18px; }
  .feedback-cap-banner p { font-size: 13.5px; line-height: 1.8; }
}

/* ════════════════════════════════════
   密钥管理：紧凑表格专用样式
   ════════════════════════════════════ */

/* 密钥名称 + 租户（两行合并列） */
.key-name-cell { line-height: 1.45; min-width: 0; }
.key-name-cell .cell-strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.key-name-cell .cell-sub { display: block; font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }

/* App Key 截断显示 */
.key-mono { font-family: var(--font-mono); font-size: 12.5px; background: var(--c-line-2); padding: 3px 8px; border-radius: 6px; cursor: default; display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-mono:hover { background: #e2e8f0; }

/* 权限紧凑标签 */
.tag-xs { font-size: 11px !important; padding: 1px 7px !important; margin: 1px 3px 1px 0 !important; border-radius: 4px !important; }

/* IP 限制图标 */
.ip-lock { font-size: 11px; cursor: help; opacity: .7; margin-left: 2px; }
.ip-lock:hover { opacity: 1; }

/* 调用次数 + 日限额（进度条可视化） */
.usage-cell { min-width: 100px; }
.usage-num { font-size: 13px; font-weight: 600; color: var(--c-ink); }
.usage-bar { width: 100%; height: 5px; background: var(--c-line-2); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.usage-fill { height: 100%; border-radius: 3px; transition: width .3s ease; }

/* ════════════════════════════════════
   通用能力中心 (CapabilityCenter)
   ════════════════════════════════════ */
.capability-card {
  display: flex; flex-direction: column;
  padding: 18px; min-height: 230px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.capability-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--c-primary-l); }
.capability-card.ready { border-left: 3px solid var(--c-success); }
.capability-card:not(.ready) { border-left: 3px solid var(--c-ink-4); opacity: .96; }

.capability-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.capability-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(79,70,229,.08); border-radius: 10px; color: var(--c-primary); }
.capability-icon .ic { width: 22px; height: 22px; }

.capability-title { font-size: 15px; font-weight: 700; color: var(--c-ink); margin-bottom: 8px; }
.capability-desc { font-size: 13px; color: var(--c-ink-3); line-height: 1.6; flex: 1; margin-bottom: 12px; }
.capability-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.capability-tag { font-size: 11px; color: var(--c-ink-3); background: var(--c-line-2); padding: 3px 8px; border-radius: var(--r-full); }
.capability-footer { display: flex; gap: 8px; margin-top: auto; }
.capability-footer .btn:disabled { cursor: not-allowed; opacity: .6; }

.settlement-item { padding: 14px; background: var(--c-bg); border-radius: var(--r-md); }
.settlement-item .n { font-size: 22px; font-weight: 800; color: var(--c-primary); margin-bottom: 4px; }
.settlement-item .l { font-size: 14px; font-weight: 600; color: var(--c-ink); margin-bottom: 6px; }
.settlement-item .d { font-size: 12.5px; color: var(--c-ink-3); line-height: 1.6; }

/* 企业能力中心：顶部原则 banner */
.cap-banner { display: flex; gap: 16px; align-items: flex-start; padding: 20px 24px;
  background: linear-gradient(120deg, rgba(79,70,229,.08), rgba(16,163,74,.08));
  border: 1px solid var(--c-line); border-radius: 12px; }
.cap-banner-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  background: var(--c-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.cap-banner-ic .ic { width: 26px; height: 26px; }
.cap-banner b { font-size: 18px; color: var(--c-ink); }
.cap-banner p { margin: 6px 0 0; font-size: 13.5px; color: var(--c-ink-3); line-height: 1.7; }
.cap-banner p b { font-size: 13.5px; color: var(--c-primary); }

/* 企业能力中心：API 文档详情视图（腾讯云风格） */
.api-doc { margin-top: 4px; }
.api-doc-head { padding: 8px 0 18px; position: relative; }
/* 能力/技能中心详情返回按钮：默认隐藏，仅移动端由 .market-center-page 媒体查询显示 */
.market-center-page .api-doc-header .m-back-btn { display: none; }
.api-doc-head h2 { font-size: 22px; font-weight: 700; color: var(--c-ink); }
.api-doc-head .cell-sub { margin-top: 8px; }
.api-doc-head .cap-edit {
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: var(--c-ink-3); opacity: .65;
  transition: opacity .15s, border-color .15s, color .15s, background .15s;
}
.api-doc-head .cap-edit svg { width: 12px; height: 12px; }
.api-doc-head .cap-edit:hover { opacity: 1; border-color: var(--c-line); color: var(--c-primary); background: #f8fafc; }

/* 能力详情页头部卡片 */
.api-doc-header {
  padding: 22px 24px 18px;
  position: relative;
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(180deg, rgba(79,70,229,.03), transparent 90px);
}
.api-doc-header .api-doc-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.api-doc-header .api-doc-title-text {
  flex: 1;
  min-width: 0;
}
.api-doc-header .api-doc-title-text h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.25;
}
.api-doc-header .api-doc-title-text .cell-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--c-ink-3);
}
.api-doc-header .cap-edit {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--c-line);
  background: #fff;
  color: var(--c-ink-2);
  opacity: .85;
  transition: opacity .15s, border-color .15s, color .15s, background .15s;
}
.api-doc-header .cap-edit:hover {
  opacity: 1;
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: rgba(79,70,229,.05);
}
.api-doc-header .cap-edit svg { width: 14px; height: 14px; }
.api-doc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.api-doc-meta .link { font-size: 12.5px; margin-left: 2px; }
.api-doc-header .cap-invoke-box { margin-top: 18px; }
.api-doc-header .cap-invoke-title { margin-bottom: 6px; }

.api-call-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgba(79,70,229,.08); color: var(--c-primary); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.api-call-pill .ic { width: 14px; height: 14px; }
.api-call-pill b { font-size: 13.5px; font-weight: 800; }
.api-key-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgba(100,116,139,.10); color: var(--c-ink-2); font-size: 12px; font-weight: 500; font-family: var(--font-mono); white-space: nowrap; cursor: help; }
.api-key-pill .ic { width: 13px; height: 13px; }
.api-key-pill b { font-weight: 700; color: var(--c-ink); }
.cap-invoke-actions { margin-top: 10px; }
.cap-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; vertical-align: middle; }
.cap-tag-self { background: rgba(16,185,129,.12); color: #0f9d6b; }
.cap-tag-ext { background: rgba(245,158,11,.14); color: #b9740a; }
/* （已删除此处重复的 .modal/.modal-mask/.modal-head/.modal-body 定义——统一收敛到上方 525 行的唯一基础定义，避免无 inline 宽度的弹窗静默 fallback 到 620px） */
.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--c-ink-2); margin: 12px 0 6px; }
.debug-input { width: 100%; box-sizing: border-box; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-bg); color: var(--c-ink); resize: vertical; }
.debug-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.debug-result { margin-top: 14px; }
.debug-json { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 8px; padding: 12px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: var(--c-ink); white-space: pre-wrap; word-break: break-all; margin: 0; max-height: 320px; overflow: auto; }
.debug-error { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(239,68,68,.08); color: #dc2626; font-size: 12.5px; font-family: var(--font-mono); white-space: pre-wrap; word-break: break-all; }
.cap-invoke-box { margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(79,70,229,.25); background: rgba(79,70,229,.06); border-radius: 10px; }
.cap-invoke-title { font-size: 12px; font-weight: 700; color: #4f46e5; margin-bottom: 8px; letter-spacing: .02em; }
.cap-invoke-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cap-method { font-size: 11px; font-weight: 700; color: #fff; background: #4f46e5; padding: 3px 8px; border-radius: 6px; }
.cap-path { font-family: var(--font-mono); font-size: 13px; color: var(--c-ink); background: rgba(255,255,255,.6); padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(79,70,229,.2); }
.api-doc-body { display: flex; gap: 18px; margin-top: 14px; align-items: flex-start; }
.api-doc-main { flex: 1; min-width: 0; }
.api-sec { margin-bottom: 24px; scroll-margin-top: 16px; }
.api-sec h3 { font-size: 15px; font-weight: 700; color: var(--c-ink); margin: 0 0 12px; padding-left: 10px; border-left: 3px solid var(--c-primary); }
.api-sec > p { color: var(--c-ink-2); font-size: 13.5px; line-height: 1.7; }
/* API 详情页表格：覆盖全局首列 42px 的序号列样式，避免参数名称被挤压截断 */
.api-sec .data th:first-child,
.api-sec .data td:first-child { width: auto; min-width: 160px; text-align: left; }
.api-sec .data th,
.api-sec .data td { white-space: normal; }
.api-doc-toc { width: 150px; flex: 0 0 auto; position: sticky; top: 16px; align-self: flex-start;
  padding: 14px 14px; background: #f8fafc; border: 1px solid var(--c-line); border-radius: 10px; }
.api-doc-toc .toc-item { display: block; padding: 6px 8px; font-size: 12.5px; color: var(--c-ink-3);
  border-radius: 6px; cursor: pointer; line-height: 1.4; }
.api-doc-toc .toc-item:hover { background: #eef2f7; color: var(--c-primary); }
.code-block { background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 14px 16px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre; margin: 0; }
.api-example { margin-bottom: 14px; }
.api-example-title { font-size: 12px; color: #64748b; margin-bottom: 6px; font-weight: 600; }
@media (max-width: 880px) {
  .api-doc-body { flex-direction: column; }
  .api-doc-toc { width: 100%; position: static; }
}

/* 企业能力中心：左侧树形导航（腾讯云文档风格） */
/* 顶部面包屑/二级导航统一高度：与 .topbar 形成更稳的层级，避免能力中心等页面显得过矮 */
.cap-crumb { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--c-ink-4);
  height: 48px; min-height: 48px; box-sizing: border-box; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--c-line);
  margin: 0; flex-wrap:wrap; }
.cap-crumb-item { cursor:pointer; color:var(--c-ink-3); transition:color .15s; padding: 15px 0; line-height: 1; }
.cap-crumb-item:hover { color:var(--c-primary); }
.cap-crumb-item.current { color:var(--c-ink); font-weight:600; cursor:default; }
.cap-crumb-sep { color:var(--c-ink-4); }

/* 内容区内层级面包屑（由页面级 cap-crumb 降级而来，根分类已由顶部导航条显示） */
.cap-breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--c-ink-4);
  padding: 12px 20px 4px; margin: 0; flex-wrap:wrap; }

.cap-layout { display:flex; gap:24px; align-items:flex-start; padding: 0 var(--m-page-pad) var(--m-page-pad); }
.cap-tree { width:236px; flex:0 0 auto; position:sticky; top:16px; background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:14px; max-height:calc(100vh - 120px); overflow-y:auto; }
.cap-tree-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:8px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--c-ink-2); transition:all .15s; user-select:none; }
.cap-tree-item:hover { background:var(--c-bg); color:var(--c-primary); }
.cap-tree-item.active { background:rgba(79,70,229,.1); color:var(--c-primary); }
.cap-tree-ic { width:18px; height:18px; flex:0 0 auto; opacity:.85; display:inline-flex; align-items:center; justify-content:center; }
.cap-tree-ic .ic { width:18px; height:18px; }
.cap-tree-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cap-tree-caret { width:14px; height:14px; color:var(--c-ink-4); flex:0 0 auto; }
.cap-tree-caret .ic { width:14px; height:14px; }
.cap-tree-children { padding:4px 0 4px 12px; margin:2px 0 6px 14px; border-left:1px solid var(--c-line); }
.cap-tree-leaf { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--c-ink-2); transition:all .15s; user-select:none; }
.cap-tree-leaf:hover { background:var(--c-bg); color:var(--c-primary); }
.cap-tree-leaf.active { background:rgba(79,70,229,.12); color:var(--c-primary); font-weight:600; }
.cap-tree-leaf-ic { width:18px; height:18px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; color:var(--c-ink); }
.cap-tree-leaf-ic .ic { width:18px; height:18px; }
.cap-tree-leaf:hover .cap-tree-leaf-ic { color:var(--c-primary); }
.cap-tree-leaf.active .cap-tree-leaf-ic { color:var(--c-primary); }
.cap-tree-leaf-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cap-tree-badge { font-size:11px; padding:1px 7px; border-radius:10px; background:#f1f5f9; color:#64748b; flex:0 0 auto; }
.cap-tree-badge.online { background:#ecfdf5; color:#047857; }
.cap-tree-dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.cap-tree-dot.online { background:var(--c-success); }
.cap-tree-dot.planned { background:var(--c-ink-4); }
.cap-tree-dot.offline { background:#f59e0b; }
.cap-tree-empty { font-size:12px; color:var(--c-ink-4); padding:6px 10px; }
.cap-tree-node { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--c-ink-2); transition:all .15s; user-select:none; }
.cap-tree-node:hover { background:var(--c-bg); color:var(--c-primary); }
.cap-tree-node.active { background:rgba(79,70,229,.12); color:var(--c-primary); font-weight:600; }
.cap-tree-node.open { color:var(--c-primary); }
.cap-tree-node:hover .cap-tree-leaf-ic { color:var(--c-primary); }
.cap-tree-node.active .cap-tree-leaf-ic { color:var(--c-primary); }
.cap-tree-nested { padding:2px 0 4px 12px; margin:0 0 4px 14px; border-left:1px solid var(--c-line); }
.cap-tree-nested .cap-tree-leaf { padding:6px 10px; font-size:12.5px; }
.cap-tree-nested .cap-tree-leaf.no-ic { padding-left:10px; gap:8px; }
.cap-content { flex:1; min-width:0; }
.cap-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px; }
.cap-content > .card { padding: 22px; }
.cap-content .toolbar { margin-bottom: 22px; }

/* 能力中心搜索建议下拉 */
.cap-search-box { position: relative; flex: 1; min-width: 0; }
.cap-search-box .toolbar-search { width: 100%; }
.cap-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  z-index: 50;
}
.cap-search-dropdown-header {
  font-size: 12px;
  color: var(--c-ink-4);
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 4px;
}
.cap-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s;
}
.cap-search-item:hover { background: var(--c-bg); }
.cap-search-item-icon {
  width: 18px; height: 18px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink-3);
}
.cap-search-item-icon .ic { width: 18px; height: 18px; }
.cap-search-item-body { flex: 1; min-width: 0; }
.cap-search-item-title {
  font-size: 13.5px; font-weight: 600; color: var(--c-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cap-search-item-meta {
  font-size: 11.5px; color: var(--c-ink-4);
  margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cap-search-item-caret {
  width: 14px; height: 14px; flex: 0 0 auto;
  color: var(--c-ink-4);
  display: inline-flex; align-items: center; justify-content: center;
}
.cap-search-empty {
  padding: 14px 10px;
  color: var(--c-ink-4);
  font-size: 13px;
  text-align: center;
}
@media (max-width: 880px) {
  .cap-layout { flex-direction:column; }
  .cap-tree { width:100%; position:static; max-height:none; }
  /* 企业能力/技能/软件链接中心：移动端统一收紧 content 区内边距与卡片间距 */
  .cap-layout { padding: 0 0 var(--m-card-gap) 0; }
  .cap-content > .card { padding: var(--m-card-pad); }
  .cap-content .toolbar { margin-bottom: var(--m-card-gap); }
  .cap-content > .cap-banner + .card { margin-top: var(--m-card-gap); }
  /* 能力/技能/软件链接中心：移动端隐藏整个卡片列表，只留分类导航 + toolbar */
  .market-center-page .cap-cards { display: none; }
  /* 能力/技能/软件链接中心：移动端 toolbar 置顶且通栏，分类树在下 */
  .market-center-page .page-panel { padding-left: 0; padding-right: 0; }
  .market-center-page .cap-layout { flex-direction: column-reverse; padding: 0; }
  .market-center-page .cap-content { width: 100%; }
  .market-center-page .cap-content > .card {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  .market-center-page .cap-content > .card:first-child {
    padding: var(--m-card-pad);
  }
  .market-center-page .cap-content .toolbar {
    margin-bottom: 0;
  }
  .market-center-page .cap-tree {
    width: 100%;
    margin: var(--m-card-gap) 0 0 0;
    box-sizing: border-box;
  }
  /* 企业能力中心：移动端详情页全屏弹出，铺满视口，无圆角/无边框 */
  .market-center-page .cap-content > .card.cap-detail-mobile-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    margin: 0;
    border-radius: 0;
    border: none;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
  }
  .market-center-page .cap-content > .card.cap-detail-mobile-modal .api-doc {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 16px;
    box-sizing: border-box;
  }
  .market-center-page .cap-content > .card.cap-detail-mobile-modal .api-doc-head {
    padding: 8px 0 16px;
    border-bottom: 1px solid var(--c-line);
    margin-bottom: 12px;
  }
  .market-center-page .cap-content > .card.cap-detail-mobile-modal .api-doc-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
  }
}

/* ============================================================
   统一列表组件 <list-view> 移动端冻结列兜底
   ============================================================
   确保 .list-view 里带 freeze-cols-* 的表格在移动端必然出现横向滚动条，
   且仅首列（或前两列） sticky 固定，其余列跟随滚动。 */
@media (max-width: 768px) {
  .list-view .table-wrap.freeze-cols-1,
  .list-view .table-wrap.freeze-cols-2 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .list-view .table-wrap.freeze-cols-1 table.data,
  .list-view .table-wrap.freeze-cols-2 table.data {
    min-width: 680px;
  }
}

/* ============================================================
   人脉图谱 — 标签云（参考词云布局）
   ============================================================ */
.tag-cloud-page {
  display: flex;
  flex-direction: column;
}
.tag-cloud-page > .card {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tag-cloud-page .tag-cloud {
  flex: 1;
  overflow-y: auto;
}
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  padding: 8px 0 6px;
  line-height: 1.15;
}
.tag-cloud-item {
  cursor: pointer;
  border-radius: 999px;
  transition: all .12s ease;
  white-space: nowrap;
  user-select: none;
  letter-spacing: -0.01em;
}
.tag-cloud-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  opacity: 1 !important;
}
@media (max-width: 768px) {
  .tag-cloud { gap: 6px 10px; padding: 8px 4px 6px; }
  .tag-cloud-page {
    /* tab 与卡片之间留标准空隙；卡片尽量占满可视区域
       100dvh - topbar(62) - sub-nav-tabs(48) - 底部呼吸(8) */
    padding-top: 0;
    min-height: calc(100dvh - 62px - 48px - 8px);
  }
  .tag-cloud-page > .card {
    margin-top: 0;
  }
}

/* 人脉结果列表 */
.person-list { border-top: 1px solid var(--c-line); }
.person-row {
  display: grid;
  grid-template-columns: 1fr 120px 170px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-line);
  transition: background .12s ease;
}
.person-row:hover { background: var(--c-surface); }
.person-row.person-head {
  background: #f8fafc;
  color: var(--c-ink-3);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
}
.person-cell { display: flex; align-items: center; gap: 10px; }
.person-name-col { gap: 10px; }
.person-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: #eef2ff; color: #1e40af;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.person-name-text { font-size: 14px; font-weight: 500; color: var(--c-ink); }
.person-status-col { flex-direction: column; align-items: flex-start; gap: 2px; }
.person-status {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.person-status.public { background: #dcfce7; color: #166534; }
.person-status.pending { background: #f3f4f6; color: #6b7280; }
.person-status.know { background: #eff6ff; color: #1e40af; }
.person-status.colleague_current { background: #f0fdf4; color: #15803d; }
.person-status.colleague_former { background: #fff7ed; color: #c2410c; }
.person-status.friend { background: #fdf4ff; color: #86198f; }
.person-status.partner { background: #ecfeff; color: #0e7490; }
.person-status.mentor { background: #fefce8; color: #a16207; }
.person-status.mentee { background: #f5f3ff; color: #6d28d9; }
.person-ops-col { justify-content: flex-end; gap: 6px; }

/* ---------- 人脉关系：中心人物 + 关系流卡片 ---------- */
.relation-center-card {
  display: inline-flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #f5f7ff 0%, #eef2ff 100%);
  border: 1px solid #e0e7ff; border-radius: var(--r-lg);
  padding: 16px 22px; margin-bottom: 18px;
}
.relation-center-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--grad-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(79,70,229,0.25);
}
.relation-center-name { font-size: 18px; font-weight: 700; color: var(--c-ink); }
.relation-center-meta { font-size: 13px; color: var(--c-ink-3); margin-top: 2px; }

.relation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.relation-card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--sh-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.relation-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: #c7d2fe; }
.relation-flow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.relation-node {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 70px; text-align: center;
}
.relation-node.is-center .relation-avatar {
  background: var(--grad-brand); color: #fff;
  box-shadow: 0 4px 12px rgba(79,70,229,0.22);
}
.relation-node.is-center .relation-node-name { color: var(--c-primary); font-weight: 700; }
.relation-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: #f1f5f9; color: var(--c-ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; flex-shrink: 0;
}
.relation-node-name {
  font-size: 13px; font-weight: 600; color: var(--c-ink-2);
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.relation-arrow {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 90px;
}
.relation-type-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: #f1f5f9; color: var(--c-ink-2);
}
.relation-type-pill.know { background: #eff6ff; color: #1e40af; }
.relation-type-pill.colleague_current { background: #f0fdf4; color: #15803d; }
.relation-type-pill.colleague_former { background: #fff7ed; color: #c2410c; }
.relation-type-pill.friend { background: #fdf4ff; color: #86198f; }
.relation-type-pill.partner { background: #ecfeff; color: #0e7490; }
.relation-type-pill.mentor { background: #fefce8; color: #a16207; }
.relation-type-pill.mentee { background: #f5f3ff; color: #6d28d9; }
.relation-arrow-icon {
  width: 28px; height: 14px; color: var(--c-ink-3);
}
.relation-notes {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--c-line);
  font-size: 12px; color: var(--c-ink-3); line-height: 1.5;
}
.relation-notes-label {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--c-ink-4); background: var(--c-line-2);
  padding: 1px 6px; border-radius: 4px; margin-right: 6px;
}
.relation-ops {
  display: flex; justify-content: flex-end; margin-top: 12px;
}

/* 新增关系弹窗：A → 关系 → B 视觉流 */
.relation-flow-form {
  display: flex; align-items: flex-end; gap: 10px;
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: 18px 14px;
}
.form-flow-node { flex: 1; min-width: 0; }
.form-flow-label {
  font-size: 12px; font-weight: 600; color: var(--c-ink-3); margin-bottom: 8px;
}
.form-flow-person {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--c-ink);
}
.form-flow-arrow {
  flex: none; font-size: 20px; font-weight: 700; color: var(--c-ink-3);
  padding-bottom: 10px;
}

@media (max-width: 720px) {
  .person-row { grid-template-columns: 1fr 90px 130px; padding: 8px 10px; gap: 8px; }
  .person-ops-col .btn { padding: 2px 6px; font-size: 11px; }
  .person-name-text { font-size: 13px; }
  .relation-grid { grid-template-columns: 1fr; }
  .relation-flow { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .relation-arrow { order: -1; min-width: 100%; flex-direction: row; justify-content: center; gap: 8px; }
  .relation-arrow-icon { transform: rotate(90deg); width: 14px; height: 28px; }
  .relation-flow-form { flex-direction: column; align-items: stretch; gap: 8px; }
  .form-flow-arrow { text-align: center; transform: rotate(90deg); padding: 4px 0; }
}

/* ===== 全局刷新/更新按钮（<refresh-button> 组件） =====
   列表页顶部的「刷新/更新/同步」按钮统一用 <refresh-button block>，
   保证移动端白底、通栏、图标+文字，样式不再散落在各页面。 */
.refresh-btn { flex: 0 0 auto; white-space: nowrap; }
.refresh-btn .rb-text { line-height: 1; }
.refresh-btn.refresh-btn-block { width: 100%; justify-content: center; }
@keyframes rb-spin { to { transform: rotate(360deg); } }
.refresh-btn.is-loading .ic { animation: rb-spin .9s linear infinite; transform-origin: center; }
/* 移动端 toolbar 内 block 模式刷新按钮通栏铺满 */
@media (max-width: 768px) {
  .toolbar .right .refresh-btn.refresh-btn-block,
  .toolbar .left .refresh-btn.refresh-btn-block { flex: 1; width: 100%; }
}