@charset "UTF-8";

/* ==========================================================================
   App Shell — 统一设计系统(参考 auto 项目 · 蓝色企业风 · 全局非加粗)
   左右布局:蓝色渐变侧栏 + 右侧功能区
   所有功能页共用;功能样式在各自 css 里补充(复用下方令牌)
   ========================================================================== */

:root {
  color-scheme: light;
  /* 品牌蓝 */
  --blue-700: #1e40af;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-100: #dbeafe;
  --blue-50:  #eff6ff;
  /* 墨色文字 */
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  /* 线与底 */
  --line: #e2e8f0;
  --line-soft: #eef2f7;
  --bg: #f4f7fb;
  --card: #ffffff;
  /* 语义色 */
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --ok: #059669;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  /* 圆角/阴影/字体 */
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --shadow-pop: 0 12px 40px rgba(15, 23, 42, .18);
  --font: "Inter", -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  --mono: "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* 兼容旧令牌名(功能页 css 复用) */
  --primary: #2563eb;
  --primary-dark: #1e40af;
  --primary-light: #3b82f6;
  --panel: #ffffff;
  --panel2: #f8fafc;
  --line-strong: #cbd5e1;
  --text: #0f172a;
  --muted: #64748b;
}

/* 全局:一律不加粗,盒模型统一 */
* { box-sizing: border-box; font-weight: 400 !important; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; }
code, .text-mono { font-family: var(--mono); }
input, textarea, button, select { font-family: inherit; font-size: 14px; color: inherit; }

/* 统一滚动条 */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }

/* ---------- 布局骨架 ---------- */
.layout { display: flex; min-height: 100vh; }

/* ---------- 侧栏(蓝色渐变) ---------- */
.sidebar {
  width: 224px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--blue-700), var(--blue-600));
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sidebar-brand .logo-box {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  letter-spacing: .5px;
}
.sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.sidebar-brand .brand-text b { color: #fff; font-size: 16px; letter-spacing: 1px; }
.sidebar-brand .brand-text small { color: rgba(255, 255, 255, .78); font-size: 12px; }

.sidebar-menu { flex: 1 1 auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
/* 底部固定链接组：被主菜单的 flex:1 顶到侧栏底部，并用分隔线与主导航区分 */
.menu-foot {
  margin-top: auto;
  flex: 0 0 auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: 14px;
  transition: background .15s, color .15s;
}
.menu-item:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.menu-item.active { background: rgba(255, 255, 255, .18); color: #fff; }
.menu-item .icon { font-size: 18px; width: 20px; text-align: center; }
/* 导航图标：CSS mask + currentColor（白色），替代 emoji */
.menu-item .nav-ic {
  width: 18px; height: 18px; text-align: initial; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  opacity: .9;
}
.menu-item:hover .nav-ic, .menu-item.active .nav-ic { opacity: 1; }
.nav-ic-accounts {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}
.nav-ic-cardflow {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
}
.nav-ic-protocol {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E");
}
.nav-ic-pay {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");
}
.nav-ic-cardlink {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");
}
.nav-ic-github {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5C5.73.5.5 5.73.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56 0-.27-.01-1.16-.02-2.1-3.2.7-3.87-1.36-3.87-1.36-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.2 1.77 1.2 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.04 0 0 .97-.31 3.18 1.18a11.1 11.1 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.58.23 2.75.11 3.04.74.81 1.19 1.83 1.19 3.09 0 4.41-2.69 5.38-5.25 5.67.41.35.78 1.05.78 2.12 0 1.53-.01 2.76-.01 3.14 0 .31.21.68.8.56A11.51 11.51 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5z'/%3E%3C/svg%3E");
}
.nav-ic-qq {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E");
}
.menu-item .count {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 4px; background: #f87171; color: #fff;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
}

/* ---------- 主区域 ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 60px;
  flex-shrink: 0;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
}
.topbar-title { font-size: 18px; color: var(--ink-900); letter-spacing: .3px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-500); }
.topbar-actions .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .16); }

.content { flex: 1; padding: 22px 28px 60px; min-width: 0; width: 100%; }

/* ---------- 面板/卡片 ---------- */
.card, .panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.section-title b { font-size: 14px; color: var(--ink-900); }
.section-title small { color: var(--ink-500); font-size: 12px; }

/* 药丸标签 */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 12px;
  background: var(--blue-50);
  color: var(--blue-700);
  border: 1px solid var(--blue-100);
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 12px;
  background: var(--blue-50);
  color: var(--blue-700);
  border: 1px solid var(--blue-100);
}

/* ---------- 表单控件 ---------- */
label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--ink-500); }
label > span { color: var(--ink-500); }

input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-900);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:not([type="checkbox"]):not([type="radio"]) { height: 38px; padding: 0 12px; }
textarea { resize: vertical; font-family: var(--mono); line-height: 1.6; }
input:focus, textarea:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59, 130, 246, .12); }

/* 下拉框:统一箭头样式 */
select {
  width: 100%;
  height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--ink-900);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
select:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59, 130, 246, .12); }
select option { background: #fff; color: var(--ink-900); }
input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; accent-color: var(--blue-600); cursor: pointer; }

/* ---------- 统一按钮 ---------- */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--blue-600);
  border-radius: var(--radius-sm);
  background: var(--blue-600);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
button:hover:not(:disabled), .btn:hover:not(:disabled), .btn-primary:hover:not(:disabled) { background: var(--blue-700); border-color: var(--blue-700); }
button:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }

/* 次要 / 幽灵按钮 */
button.secondary, button.ghost, .btn-ghost, .btn-secondary,
.load-card-button, .copy-one-button, .remove-pair, .add-at-button {
  background: #fff;
  color: var(--ink-700);
  border-color: var(--line);
}
button.secondary:hover:not(:disabled), button.ghost:hover:not(:disabled),
.btn-ghost:hover:not(:disabled), .btn-secondary:hover:not(:disabled),
.load-card-button:hover:not(:disabled), .copy-one-button:hover:not(:disabled) {
  background: var(--blue-50);
  color: var(--blue-700);
  border-color: var(--blue-100);
}

/* 危险按钮 */
.btn-danger, button.danger {
  background: #fff; color: var(--danger); border-color: #fecaca;
}
.btn-danger:hover:not(:disabled), button.danger:hover:not(:disabled) { background: var(--danger-soft); }

/* 小尺寸 */
.small, .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }

/* ---------- 提示框(status/hint) ---------- */
.status {
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue-600);
  color: var(--ink-700);
  font-size: 13px;
  white-space: pre-wrap;
}
.status.ok { border-left-color: var(--ok); background: var(--ok-soft); color: #047857; }
.status.error { border-left-color: var(--danger); background: var(--danger-soft); color: #991b1b; }
.status.warn { border-left-color: var(--warn); background: var(--warn-soft); color: #92400e; }

.hint { color: var(--ink-500); font-size: 13px; margin: 0 0 12px; }
.hint code { background: var(--blue-50); color: var(--blue-700); padding: 1px 6px; border-radius: 5px; font-size: 12px; }

/* ---------- 空态 ---------- */
.empty {
  min-height: 300px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 6px;
  color: var(--ink-400);
  background: #fbfcfd;
}
.empty b { font-size: 15px; color: var(--ink-700); }
.empty[hidden] { display: none; }

/* ---------- 响应式:窄屏侧栏收窄为图标 ---------- */
@media (max-width: 960px) {
  .sidebar { width: 64px; }
  .sidebar-brand { justify-content: center; padding: 16px 0; }
  .sidebar-brand .brand-text { display: none; }
  .menu-item { justify-content: center; padding: 11px 0; }
  .menu-item span:not(.icon):not(.count) { display: none; }
}
@media (max-width: 820px) {
  .content, .topbar { padding-left: 16px; padding-right: 16px; }
}