/* ===== Agent HUB · 白色 shadcn 风格 ===== */
:root {
  --bg: #ffffff; --fg: #18181b;
  --muted: #f4f4f5; --muted-fg: #71717a;
  --border: #e4e4e7; --card: #ffffff;
  --primary: #18181b; --primary-fg: #fafafa;
  --destructive: #ef4444; --destructive-bg: #fef2f2; --destructive-border: #fecaca;
  --warning: #d97706; --warning-bg: #fffbeb; --warning-border: #fde68a;
  --success: #16a34a; --success-bg: #f0fdf4; --success-border: #bbf7d0;
  --claude: #d97757;
  --radius: .5rem; --radius-lg: .75rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --mono: "SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--fg); line-height: 1.65; font-size: 15px;
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--claude); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Topbar */
#topbar {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); padding: 10px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.brand-dot { width: 11px; height: 11px; border-radius: 9999px; background: linear-gradient(135deg,#d97757,#b85c3f); box-shadow: 0 0 0 3px rgba(217,119,87,.15); }
.brand-name { font-size: 15px; letter-spacing: .01em; }
.brand-sub { font-size: 11.5px; color: var(--muted-fg); }
.topnav { display: flex; gap: 4px; }
.navlink {
  padding: 6px 14px; border-radius: var(--radius); color: var(--muted-fg);
  font-size: 13.5px; font-weight: 500; transition: all .15s;
}
.navlink:hover { background: var(--muted); color: var(--fg); text-decoration: none; }
.navlink.active { background: var(--muted); color: var(--fg); }
.icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--border);
  background: #fff; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center;
  transition: all .15s; margin-left: 4px;
}
.icon-btn:hover { border-color: var(--fg); background: var(--muted); }

/* ===== 设置弹窗 ===== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(24,24,27,.45); backdrop-filter: blur(2px); padding: 20px;
  animation: fadeIn .2s ease;
}
.modal {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  width: 100%; max-width: 460px; max-height: 84vh; overflow-y: auto; box-shadow: 0 20px 50px rgb(0 0 0 / .2);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 16px; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted-fg); padding: 4px 8px; border-radius: 6px; }
.modal-close:hover { background: var(--muted); color: var(--fg); }
.modal-body { padding: 18px 20px 22px; }
.setting-group { margin-bottom: 20px; }
.setting-group:last-child { margin-bottom: 4px; }
.setting-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--fg); }
.setting-hint { font-size: 12px; color: var(--muted-fg); margin-top: 6px; }
.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-btn {
  padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: #fff;
  font-size: 13px; cursor: pointer; transition: all .15s; font-family: inherit; color: var(--fg);
}
.radio-btn:hover { border-color: var(--fg); }
.radio-btn.active { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }

/* ===== 深色主题 ===== */
[data-theme="dark"] {
  --bg: #09090b; --fg: #fafafa;
  --muted: #18181b; --muted-fg: #a1a1aa;
  --border: #27272a; --card: #101012;
  --primary: #fafafa; --primary-fg: #18181b;
  --destructive: #f87171; --destructive-bg: #3b1212; --destructive-border: #7f1d1d;
  --warning: #fbbf24; --warning-bg: #1c1506; --warning-border: #713f12;
  --success: #4ade80; --success-bg: #052e16; --success-border: #14532d;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / .4);
}
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] #topbar { background: rgba(9,9,11,.9); }
[data-theme="dark"] .codeblock pre { background: #0a0a0c; border-color: #27272a; color: #d4d4d8; }
[data-theme="dark"] .copy-btn, [data-theme="dark"] .icon-btn, [data-theme="dark"] .radio-btn,
[data-theme="dark"] .searchbox input, [data-theme="dark"] .btn { background: #18181b; color: #fafafa; }
[data-theme="dark"] th { background: #1c1c1f; }
[data-theme="dark"] .wb-agent.selected { background: #171310; }
[data-theme="dark"] .agent-icon { opacity: .92; }

/* ===== PWA 安装条 ===== */
#installBar {
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card); border: 1px solid var(--claude); border-radius: var(--radius-lg);
  padding: 12px 16px; margin-bottom: 18px; box-shadow: var(--shadow);
}
#installBar.show { display: flex; }
#installBar .ib-text { font-size: 13.5px; }
#installBar .ib-text b { color: var(--claude); }

/* ===== 线上地址条 ===== */
.site-url {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 10px 16px; box-shadow: var(--shadow-sm); font-size: 13.5px;
}
.site-url .su-label { color: var(--muted-fg); font-size: 12px; }
.site-url a {
  font-family: var(--mono); font-size: 13.5px; color: var(--claude); font-weight: 600;
  word-break: break-all;
}
.site-url .copy-btn { position: static; margin-left: 2px; }

/* Layout */
#view { flex: 1; max-width: 1120px; width: 100%; margin: 0 auto; padding: 28px 24px 60px; }
#footer { border-top: 1px solid var(--border); padding: 18px 24px; text-align: center; color: var(--muted-fg); font-size: 12.5px; }

/* Hero */
.hero { padding: 26px 0 30px; }
.hero h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.hero p { color: var(--muted-fg); max-width: 680px; margin-top: 8px; font-size: 15px; }
.hero .stats { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.stat { font-size: 13px; color: var(--muted-fg); }
.stat b { color: var(--fg); font-variant-numeric: tabular-nums; }

/* Search */
.searchbox { margin: 6px 0 20px; }
.searchbox input {
  width: 100%; max-width: 420px; padding: 9px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 14px; font-family: inherit; background: #fff;
}
.searchbox input:focus { outline: 2px solid rgba(217,119,87,.35); border-color: var(--claude); }

/* Cards grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.agent-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 18px 16px; box-shadow: var(--shadow-sm); cursor: pointer; transition: all .18s;
  display: flex; flex-direction: column; gap: 8px;
}
.agent-card:hover { border-color: var(--claude); transform: translateY(-2px); box-shadow: var(--shadow); }
.agent-card .ac-top { display: flex; align-items: center; gap: 10px; }
.agent-icon {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff; flex-shrink: 0;
}
.agent-icon.pi { background: linear-gradient(135deg,#6366f1,#4338ca); }
.agent-icon.cc { background: linear-gradient(135deg,#d97757,#b85c3f); }
.agent-icon.hermes { background: linear-gradient(135deg,#0ea5e9,#0369a1); }
.agent-icon.codex { background: linear-gradient(135deg,#22c55e,#15803d); }
.agent-icon.reasonix { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.agent-icon.arkclaw { background: linear-gradient(135deg,#f59e0b,#b45309); }
.agent-card h3 { font-size: 15.5px; font-weight: 700; }
.agent-card .ac-tag { font-size: 12.5px; color: var(--muted-fg); flex: 1; }
.agent-card .ac-foot { display: flex; align-items: center; justify-content: space-between; }
.platform-badge { font-size: 11px; color: var(--muted-fg); }
.pill { font-size: 10.5px; padding: 2px 8px; border-radius: 9999px; font-weight: 600; }
.pill.mac { background: var(--muted); color: var(--muted-fg); }
.pill.win { background: #eff6ff; color: #1d4ed8; }
.pill.needkey { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }

/* Section headings */
.view-head { margin-bottom: 18px; }
.view-head .back { font-size: 13px; color: var(--muted-fg); cursor: pointer; }
.view-head h1 { font-size: 24px; font-weight: 800; margin-top: 6px; letter-spacing: -.01em; }
.view-head p { color: var(--muted-fg); margin-top: 6px; max-width: 760px; }

/* Card */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.card h3 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.card h4 { font-size: 13.5px; font-weight: 600; margin: 14px 0 6px; color: var(--fg); }

/* Alert */
.alert { display: flex; gap: 12px; padding: 13px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); margin-bottom: 14px; font-size: 13.5px; }
.alert .t { font-weight: 600; margin-bottom: 2px; }
.alert .d { color: var(--muted-fg); }
.alert-warn { background: var(--warning-bg); border-color: var(--warning-border); }
.alert-warn .t { color: #92400e; }
.alert-err { background: var(--destructive-bg); border-color: var(--destructive-border); }
.alert-err .t { color: #b91c1c; }
.alert-ok { background: var(--success-bg); border-color: var(--success-border); }
.alert-ok .t { color: #166534; }

/* Code */
code.inline { background: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-family: var(--mono); font-size: 12.5px; }
.codeblock { position: relative; margin: 10px 0; }
.codeblock pre {
  background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 15px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: #27272a;
  white-space: pre-wrap; word-break: break-all; max-height: 420px; overflow-y: auto;
}
.copy-btn {
  position: absolute; top: 8px; right: 8px; background: #fff; border: 1px solid var(--border);
  color: var(--muted-fg); font-size: 11px; padding: 3px 9px; border-radius: 6px; cursor: pointer; transition: all .15s;
}
.copy-btn:hover { color: var(--fg); border-color: var(--fg); }
.copy-btn.copied { color: var(--success); border-color: var(--success); }

/* Table */
table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
th, td { text-align: left; padding: 8px 11px; border-bottom: 1px solid var(--border); }
th { color: var(--muted-fg); font-weight: 500; font-size: 12px; background: var(--muted); }

/* Checkbox items */
.bundle-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; cursor: pointer; transition: all .15s; background: #fff; }
.bundle-item:hover { border-color: var(--fg); }
.bundle-item.checked { border-color: var(--success-border); background: var(--success-bg); }
.bundle-item input { margin-top: 4px; accent-color: var(--success); width: 16px; height: 16px; flex-shrink: 0; }
.bundle-item .bi-title { font-weight: 600; font-size: 13.5px; }
.bundle-item .bi-desc { font-size: 12.5px; color: var(--muted-fg); }
.sub-options { margin: 8px 0 2px 26px; display: flex; flex-direction: column; gap: 5px; }
.sub-options label { font-size: 12.5px; color: var(--fg); display: flex; gap: 7px; align-items: center; cursor: pointer; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; color: var(--fg); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all .15s; font-family: inherit; }
.btn:hover { border-color: var(--fg); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.btn.primary:hover { background: #27272a; }
.btn.sm { padding: 5px 11px; font-size: 12.5px; }

/* Workbench */
.workbench { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .workbench { grid-template-columns: 1fr; } }
.wb-agent { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.wb-agent.selected { border-color: var(--claude); background: #fffaf8; }
.wb-agent .wb-top { display: flex; align-items: center; gap: 10px; }
.wb-agent input[type=checkbox] { accent-color: var(--claude); width: 17px; height: 17px; flex-shrink: 0; }
.wb-agent .wb-bundles { margin: 10px 0 2px 26px; display: flex; flex-direction: column; gap: 5px; }
.wb-agent .wb-bundles label { font-size: 12.5px; color: var(--muted-fg); display: flex; gap: 7px; align-items: center; cursor: pointer; }

.tabs { display: flex; gap: 4px; background: var(--muted); padding: 4px; border-radius: var(--radius-lg); width: fit-content; margin-bottom: 10px; }
.tab-btn { background: transparent; border: none; color: var(--muted-fg); padding: 6px 16px; border-radius: calc(var(--radius-lg) - 2px); cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit; }
.tab-btn.active { background: #fff; color: var(--fg); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }

.checklist { list-style: none; }
.checklist li { padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.checklist li code { margin: 0 4px; }

.empty { text-align: center; color: var(--muted-fg); padding: 60px 20px; font-size: 14px; }

/* 错误视图 */
.err-view { text-align: center; padding: 70px 20px; max-width: 520px; margin: 0 auto; }
.err-view .err-icon { font-size: 42px; margin-bottom: 12px; }
.err-view h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.err-view p { color: var(--muted-fg); font-size: 14px; }

/* 推荐 / 描述 */
.rec-badge {
  font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px;
  background: var(--success-bg); color: #166534; border: 1px solid var(--success-border);
  margin-left: 4px; vertical-align: 1px; white-space: nowrap;
}
.sub-desc { display: block; font-size: 11.5px; color: var(--muted-fg); margin-left: 22px; margin-top: 1px; }