/* ============================================================
   base.css — 变量、reset、按钮、输入框、通用组件
   ============================================================ */

:root {
  /* 浅色主题变量（默认） */
  --bg: #ffffff;
  --bg-sidebar: #f7f7f5;
  --bg-hover: #efefed;
  --bg-active: #e9e9e7;
  --bg-secondary: #f7f7f5;
  --bg-tertiary: #f1f1ef;
  --bg-modal: #ffffff;
  --bg-code: #f7f6f3;
  --bg-input: #ffffff;
  --text: #37352f;
  --text-secondary: #73726e;
  --text-tertiary: #9b9a97;
  --border: #e9e9e7;
  --border-strong: #d9d9d7;
  --accent: #2383e2;
  --accent-hover: #0077d4;
  --accent-soft: rgba(35, 131, 226, 0.1);
  --danger: #eb5757;
  /* 以下三个令牌取值与原先硬编码的字面量逐字节相同。
     刻意**不**指向 --danger / --text —— 徽标底色、行内代码字色、橙色头像
     与「危险」「正文」是不同的语义，指过去会把它们永久绑死，
     日后想单独调徽标色就得先解耦。 */
  --badge-bg: #eb5757;
  --code-inline-text: #eb5757;
  --avatar-orange: #d9730d;
  --on-light-text: #37352f;
  --shadow-menu: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
  --shadow-modal: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 5px 10px, rgba(15, 15, 15, 0.2) 0px 15px 40px;
  --overlay: rgba(15, 15, 15, 0.6);
  /* 标签颜色 */
  --tag-gray: #e3e2e0;   --tag-gray-text: #787774;
  --tag-brown: #eee0da;  --tag-brown-text: #9f6b53;
  --tag-orange: #fadec9; --tag-orange-text: #d9730d;
  --tag-yellow: #fdecc8; --tag-yellow-text: #cb912f;
  --tag-green: #dbeddb;  --tag-green-text: #448361;
  --tag-blue: #d3e5ef;   --tag-blue-text: #337ea9;
  --tag-purple: #e8deee; --tag-purple-text: #9065b0;
  --tag-pink: #f5e0e9;   --tag-pink-text: #c14c8a;
  --tag-red: #ffe2dd;    --tag-red-text: #d44c47;
}

html[data-theme="dark"] {
  --bg: #191919;
  --bg-sidebar: #202020;
  --bg-hover: #2c2c2c;
  --bg-active: #373737;
  --bg-secondary: #202020;
  --bg-tertiary: #282828;
  --bg-modal: #252525;
  --bg-code: #202020;
  --bg-input: #2c2c2c;
  --text: #d4d4d2;
  --text-secondary: #9b9b9b;
  --text-tertiary: #6f6f6f;
  --border: #2f2f2f;
  --border-strong: #404040;
  --accent: #2383e2;
  --accent-hover: #3d94ec;
  --accent-soft: rgba(35, 131, 226, 0.25);
  --danger: #eb5757;
  --shadow-menu: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px, rgba(15, 15, 15, 0.4) 0px 3px 6px, rgba(15, 15, 15, 0.6) 0px 9px 24px;
  --shadow-modal: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px, rgba(15, 15, 15, 0.4) 0px 5px 10px, rgba(15, 15, 15, 0.6) 0px 15px 40px;
  --overlay: rgba(15, 15, 15, 0.8);
  --tag-gray: #5a5a5a;   --tag-gray-text: #9b9b9b;
  --tag-brown: #603b2c;  --tag-brown-text: #ba856f;
  --tag-orange: #854c1d; --tag-orange-text: #c77d48;
  --tag-yellow: #89632a; --tag-yellow-text: #ca9849;
  --tag-green: #2b593f;  --tag-green-text: #529e72;
  --tag-blue: #1f3e52;   --tag-blue-text: #5a87a5;
  --tag-purple: #492f64; --tag-purple-text: #9d68d3;
  --tag-pink: #69334c;   --tag-pink-text: #e05c8b;
  --tag-red: #6e3630;    --tag-red-text: #e07069;
}

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol",
    "Inter", "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei";
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font-family: inherit; font-size: inherit; color: var(--text); outline: none; }
img { max-width: 100%; }
::selection { background: rgba(35, 131, 226, 0.28); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border: 2px solid transparent; background-clip: content-box; }

/* ---------- 通用按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 12px; height: 32px;
  border-radius: 6px; font-size: 14px; font-weight: 500;
  transition: background 0.12s ease;
  user-select: none; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-default { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); }
.btn-default:hover { background: var(--bg-hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  color: var(--text-secondary); transition: background 0.12s ease;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- 输入框 ---------- */
.input {
  width: 100%; height: 34px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--bg-input); font-size: 14px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.input::placeholder { color: var(--text-tertiary); }

/* ---------- 屏幕容器 ---------- */
.screen { display: none; height: 100vh; width: 100vw; }
.screen.active { display: flex; }

/* ---------- 弹出层（菜单/气泡） ---------- */
.popup {
  position: fixed; z-index: 1000;
  background: var(--bg-modal); border-radius: 8px;
  box-shadow: var(--shadow-menu);
  padding: 6px; min-width: 180px; max-width: 320px;
  animation: pop-in 0.12s ease;
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.97) translateY(-2px); }
  to { opacity: 1; transform: none; }
}
.popup-title {
  padding: 6px 10px 4px; font-size: 12px; font-weight: 600;
  color: var(--text-tertiary);
}
.menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 10px; border-radius: 5px;
  font-size: 14px; color: var(--text); text-align: left;
  cursor: pointer; user-select: none;
}
.menu-item:hover, .menu-item.highlight { background: var(--bg-hover); }
.menu-item.danger { color: var(--danger); }
.menu-item .menu-icon {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 4px; background: var(--bg);
  font-size: 13px; flex-shrink: 0;
}
.menu-item .menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item .menu-desc { display: block; font-size: 12px; color: var(--text-tertiary); margin-top: 1px; }
.menu-item .menu-hint { font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; }
.menu-divider { height: 1px; background: var(--border); margin: 5px 4px; }

/* ---------- 模态框 ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: var(--overlay);
  display: flex; align-items: flex-start; justify-content: center;
  animation: fade-in 0.15s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--bg-modal); border-radius: 10px;
  box-shadow: var(--shadow-modal);
  animation: modal-in 0.18s ease;
  overflow: hidden;
  display: flex; flex-direction: column;
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.98) translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 标签（select/multi） ---------- */
.tag {
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: 10px;
  font-size: 12px; line-height: 18px; white-space: nowrap;
  background: var(--tag-gray); color: var(--tag-gray-text);
  margin: 1px 2px 1px 0;
}
.tag.c-brown  { background: var(--tag-brown);  color: var(--tag-brown-text); }
.tag.c-orange { background: var(--tag-orange); color: var(--tag-orange-text); }
.tag.c-yellow { background: var(--tag-yellow); color: var(--tag-yellow-text); }
.tag.c-green  { background: var(--tag-green);  color: var(--tag-green-text); }
.tag.c-blue   { background: var(--tag-blue);   color: var(--tag-blue-text); }
.tag.c-purple { background: var(--tag-purple); color: var(--tag-purple-text); }
.tag.c-pink   { background: var(--tag-pink);   color: var(--tag-pink-text); }
.tag.c-red    { background: var(--tag-red);    color: var(--tag-red-text); }

/* ---------- 工具提示文本 ---------- */
.hint-text { font-size: 12px; color: var(--text-tertiary); }

/* ---------- 空状态 ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; color: var(--text-tertiary); gap: 8px; text-align: center;
}
.empty-state .empty-icon { font-size: 32px; }

/* ---------- 品牌 logo（产品 icon 图 + 文字） ---------- */
.brand-logo {
  display: inline-flex;
  width: 40px; height: 40px; border-radius: 8px;
  object-fit: contain;
  user-select: none; flex-shrink: 0; -webkit-user-drag: none;
}
.brand-name { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; }