/* ===== 全局基础 & 共享组件（徽章 / 提示 / 弹层） ===== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: rgba(120,150,200,.35); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- 类型徽章 ---- */
.t-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
  padding: 2px 8px 2px 4px; border-radius: 20px; white-space: nowrap; }
.t-badge i { width: 16px; height: 16px; border-radius: 50%; background: var(--c);
  color: #fff; font-style: normal; font-size: 10px; display: inline-flex;
  align-items: center; justify-content: center; }
.t-dot { display: inline-flex; align-items: center; justify-content: center;
  background: var(--c); color: #fff; border-radius: 50%; font-weight: 600; flex: none; }

/* ---- 状态 / 优先级徽章 ---- */
.s-badge, .p-badge { display: inline-flex; align-items: center; font-size: 12px;
  padding: 2px 9px; border-radius: 4px; white-space: nowrap; color: var(--c);
  background: color-mix(in srgb, var(--c) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.p-badge { border-radius: 20px; }

/* ---- toast ---- */
#u-toast { position: fixed; left: 50%; bottom: 64px;
  transform: translateX(-50%) translateY(20px); background: rgba(20,30,50,.94);
  color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 14px; z-index: 9999;
  opacity: 0; pointer-events: none; transition: .25s; max-width: 80%;
  box-shadow: 0 8px 30px rgba(0,0,0,.4); border: 1px solid rgba(120,160,255,.25); }
#u-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#u-toast.ok { background: rgba(20,120,80,.96); }
#u-toast.err { background: rgba(150,40,55,.96); }

/* ---- confirm ---- */
.u-confirm-mask { position: fixed; inset: 0; background: rgba(8,14,28,.55);
  backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 9998; }
.u-confirm { background: #fff; border-radius: 14px; padding: 24px 22px 16px; width: 300px;
  max-width: 86vw; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.u-confirm p { margin: 0 0 18px; font-size: 15px; color: #2a3550; line-height: 1.6; text-align: center; }
.u-confirm-btns { display: flex; gap: 10px; }
.u-confirm-btns button { flex: 1; padding: 10px; border-radius: 9px; font-size: 15px; }
.u-confirm-btns .cancel { background: #eef1f6; color: #5a6680; }
.u-confirm-btns .ok { background: linear-gradient(135deg,#2f80ff,#1f5fd6); color: #fff; }

/* ---- 通用按钮 ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border-radius: 9px; font-size: 14px; font-weight: 500;
  background: #eef1f6; color: #45506b; transition: .15s; }
.btn:hover { filter: brightness(.97); }
.btn.primary { background: linear-gradient(135deg,#2f80ff,#1f5fd6); color: #fff;
  box-shadow: 0 6px 16px rgba(47,128,255,.3); }
.btn.danger { background: linear-gradient(135deg,#ff5a6e,#e23a52); color: #fff; }
.btn.ghost { background: transparent; border: 1px solid #d4dbe8; color: #5a6680; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 演示模式角标 */
.demo-flag { position: fixed; left: 10px; bottom: 10px; z-index: 9000;
  font-size: 11px; color: #8aa0c6; background: rgba(15,25,45,.6);
  border: 1px solid rgba(120,160,255,.2); padding: 3px 9px; border-radius: 12px; }