/* ============================================================
 * LiveOps 活动数据后台 —— 设计令牌与组件类
 * 令牌与组件类沿用 pro.html（数数/TE 浅色风格）以保持视觉一致。
 * ============================================================ */
:root {
  --bg:#f2f4f7; --panel:#ffffff; --ink:#1d2129; --muted:#86909c; --line:#e5e8ef;
  --pri:#3370ff; --pri-weak:#e8f0ff; --ok:#00b578; --warn2:#ff8f1f; --bad:#e8353e;
  --top:#1d2536;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { font:13px/1.55 "Microsoft YaHei","Segoe UI",sans-serif; background:var(--bg); color:var(--ink); display:flex; flex-direction:column; overflow:hidden; }

/* ===== 顶栏 ===== */
#topbar { min-height:48px; flex:none; background:var(--top); color:#fff; display:flex; align-items:center; gap:10px 14px; padding:4px 16px; flex-wrap:wrap; }
#topbar .brand { font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; white-space:nowrap; }
#topbar .brand .cube { width:16px; height:16px; border-radius:4px; background:linear-gradient(135deg,#3370ff,#00c3ff); }
#topbar .sp { flex:1; }
#topbar .tbtn { background:#2b3549; color:#dfe6f2; border:1px solid #3c4a63; border-radius:4px; padding:4px 12px; cursor:pointer; font:inherit; font-size:12px; white-space:nowrap; }
#topbar .tbtn:hover { background:#38455e; }
#topbar .tbtn.pri { background:var(--pri); border-color:var(--pri); color:#fff; }
#topbar .acct { font-size:12px; color:#dfe6f2; background:#2b3549; border:1px solid #3c4a63; border-radius:12px; padding:2px 12px; white-space:nowrap; }
#topbar .envbadge { font-size:12px; font-weight:600; border-radius:12px; padding:2px 12px; cursor:pointer; user-select:none; white-space:nowrap; }
#topbar .envbadge.test { background:#e8353e22; color:#ff8f9a; border:1px solid #e8353e55; }
#topbar .envbadge.prod { background:#00b57822; color:#7ce3a8; border:1px solid #00b57855; }
#topbar .conn { font-size:11px; display:flex; align-items:center; gap:5px; color:#9fb0c9; white-space:nowrap; }
#topbar .conn .dot { width:8px; height:8px; border-radius:4px; background:var(--muted); }
#topbar .conn.ok .dot { background:var(--ok); }
#topbar .conn.bad .dot { background:var(--bad); }

/* ===== 主体 ===== */
#layout { flex:1; display:flex; min-height:0; }
#sidebar { width:184px; flex:none; background:var(--panel); border-right:1px solid var(--line); padding:10px 0; overflow-y:auto; }
.navitem { display:flex; align-items:center; gap:10px; padding:9px 18px; cursor:pointer; color:#4e5969; border-left:3px solid transparent; user-select:none; text-decoration:none; }
.navitem .ic { width:15px; height:15px; flex:none; text-align:center; font-size:13px; }
.navitem:hover { background:#f7f8fa; }
.navitem.active { background:var(--pri-weak); color:var(--pri); border-left-color:var(--pri); font-weight:600; }
.navsec { padding:12px 18px 4px; font-size:11px; color:#c9cdd4; }
#content { flex:1; overflow:auto; padding:14px 16px; min-width:0; }
.pagehead { display:flex; align-items:baseline; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.pagehead h1 { font-size:17px; font-weight:700; }
.pagehead .sub { color:var(--muted); font-size:12px; }
.pagehead .sp { flex:1; }

/* ===== 通用 ===== */
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; margin-bottom:12px; }
.card-h { padding:10px 14px; border-bottom:1px solid var(--line); font-weight:600; font-size:13px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.card-h .sub { font-weight:400; color:var(--muted); font-size:12px; }
.card-h .sp { flex:1; }
.card-b { padding:12px 14px; }
.btn { border:1px solid var(--line); background:#fff; border-radius:4px; padding:5px 12px; font:inherit; font-size:12px; cursor:pointer; color:var(--ink); }
.btn:hover { border-color:var(--pri); color:var(--pri); }
.btn.pri { background:var(--pri); border-color:var(--pri); color:#fff; }
.btn.pri:hover { color:#fff; opacity:.92; }
.btn.danger { border-color:var(--bad); color:var(--bad); }
.btn.danger:hover { background:var(--bad); color:#fff; }
.btn.mini { padding:2px 8px; font-size:11px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.sel,.inp { border:1px solid var(--line); border-radius:4px; padding:5px 8px; font:inherit; font-size:12px; background:#fff; color:var(--ink); max-width:100%; }
.sel:focus,.inp:focus { outline:none; border-color:var(--pri); }
textarea.inp { width:100%; resize:vertical; font-family:Consolas,monospace; }
.mono { font-family:Consolas,monospace; }
.muted { color:var(--muted); }
.chip { display:inline-block; padding:0 7px; border-radius:9px; font-size:11px; color:#fff; line-height:17px; }
.tag { display:inline-block; padding:0 6px; border-radius:3px; font-size:11px; line-height:17px; background:#f2f3f5; color:#4e5969; margin:1px 2px 1px 0; }
.tag.seg { background:#e8f0ff; color:#3370ff; }
.tag.activity_layer { background:#fff0e0; color:#e8590c; }
.tag.abtest { background:#e8f7ff; color:#0c8599; }
.tag.color { background:#f8e8ff; color:#9c36b5; }
.tag.attribution { background:#e8fff0; color:#087f5b; }
.pill { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; }
.pill.ok { background:#e8fff4; color:var(--ok); }
.pill.warn { background:#fff4e8; color:var(--warn2); }
.pill.bad { background:#ffecee; color:var(--bad); }
.pill.mute { background:#f2f3f5; color:var(--muted); }
.empty { color:var(--muted); text-align:center; padding:60px 0 40px; font-size:14px; }
.empty .btns { margin-top:18px; display:flex; gap:12px; justify-content:center; }
.err { color:var(--bad); }
.warnnote { background:#fff8ee; border:1px solid #ffe0b3; color:#a6600a; border-radius:6px; padding:8px 12px; font-size:12px; margin-bottom:10px; }
.badnote { background:#fff0f1; border:1px solid #ffcdd0; color:var(--bad); border-radius:6px; padding:8px 12px; font-size:12px; margin-bottom:10px; }
.hint { color:var(--muted); font-size:11px; margin-top:4px; line-height:1.5; }
.hint code { background:#f2f3f5; padding:0 4px; border-radius:3px; font-family:Consolas,monospace; }

/* KPI */
.kpis { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.kpi { flex:1; min-width:150px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px 16px; }
.kpi .v { font-size:24px; font-weight:700; color:var(--ink); font-family:Consolas,monospace; }
.kpi .l { font-size:12px; color:var(--muted); margin-top:2px; }

/* 表格 */
.tblwrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:12px; color:var(--muted); font-weight:600; padding:7px 10px; border-bottom:1px solid var(--line); background:#fafbfc; white-space:nowrap; position:sticky; top:0; }
.tbl th.sortable { cursor:pointer; user-select:none; }
.tbl th.sortable:hover { color:var(--pri); }
.tbl td { padding:6px 10px; border-bottom:1px solid #f2f3f5; font-size:12px; white-space:nowrap; }
.tbl tr:hover td { background:#f7f9fc; }
.tbl td.num,.tbl th.num { text-align:right; font-family:Consolas,monospace; }
.tbl tr.clickable { cursor:pointer; }
.tbl tr.sel td { background:var(--pri-weak); }

/* 水平条 */
.hbar { display:flex; align-items:center; gap:10px; margin:5px 0; }
.hbar .hname { width:200px; flex:none; font-family:Consolas,monospace; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.hbar .hwrap { flex:1; background:#f2f3f5; border-radius:3px; height:16px; }
.hbar .hfill { height:100%; border-radius:3px; background:var(--pri); min-width:2px; }
.hbar .hval { width:80px; flex:none; font-size:12px; color:var(--muted); font-family:Consolas,monospace; }

/* 漏斗 */
.fxstep { margin-bottom:2px; }
.fxbarw { background:#f2f3f5; border-radius:4px; height:34px; }
.fxbar { height:100%; border-radius:4px; background:linear-gradient(90deg,#3370ff,#6a9bff); display:flex; align-items:center; padding:0 12px; color:#fff; font-size:12px; gap:12px; min-width:130px; }
.fxbar b { font-size:14px; font-family:Consolas,monospace; }
.fxconv { padding:4px 12px; color:var(--muted); font-size:12px; }
.fxconv b { color:var(--pri); font-family:Consolas,monospace; }

/* 表单 */
.form { display:grid; grid-template-columns:130px 1fr; gap:10px 12px; align-items:start; }
.form label { color:#4e5969; font-size:12px; padding-top:6px; }
.form .full { grid-column:1 / -1; }
.form .inp, .form .sel, .form textarea { width:100%; }
.frow { display:flex; gap:6px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
.frow .inp, .frow .sel { flex:1; min-width:80px; }
.frow .del { color:#c9cdd4; cursor:pointer; padding:0 3px; flex:none; }
.frow .del:hover { color:var(--bad); }
.checkline { display:flex; align-items:center; gap:6px; }
.checkline input { margin:0; }

/* kv 展示 */
.kv { display:grid; grid-template-columns:180px 1fr; gap:2px 14px; }
.kv > div { padding:3px 0; border-bottom:1px dashed #f2f3f5; font-size:12px; }
.kv .k { color:var(--muted); font-family:Consolas,monospace; }

/* diff */
.diff { display:grid; grid-template-columns:1fr 20px 1fr; gap:4px 8px; align-items:center; }
.diff .base { background:#fff0f1; border-radius:4px; padding:4px 8px; font-family:Consolas,monospace; font-size:12px; }
.diff .over { background:#e8fff4; border-radius:4px; padding:4px 8px; font-family:Consolas,monospace; font-size:12px; }
.diff .arr { text-align:center; color:var(--muted); }
.diff .col { color:var(--muted); font-size:12px; grid-column:1 / -1; margin-top:6px; font-weight:600; }

/* 弹窗 */
#mask { position:fixed; inset:0; padding:16px; background:rgba(29,33,41,.45); z-index:50; display:none; align-items:center; justify-content:center; }
.mbox { background:#fff; border-radius:8px; min-width:0; max-width:820px; width:92%; max-height:86vh; display:flex; flex-direction:column; box-shadow:0 8px 32px rgba(0,0,0,.25); }
.mbox .mh { padding:12px 16px; border-bottom:1px solid var(--line); font-weight:600; flex:none; }
.mbox .mb { padding:16px; overflow:auto; }
.mbox .mf { padding:10px 16px; border-top:1px solid var(--line); text-align:right; display:flex; gap:8px; justify-content:flex-end; flex:none; }

@media (max-width:600px) {
  #mask { padding:8px; align-items:flex-end; }
  .mbox { width:100%; max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); }
  .mbox .mh,.mbox .mf { padding-left:12px; padding-right:12px; }
  .mbox .mb { padding:12px; }
  .mbox .mf .btn { flex:1; }
  .mbox .form { grid-template-columns:minmax(0,1fr); gap:5px; }
  .mbox .form > * { min-width:0; }
  .mbox .form label { padding-top:4px; font-weight:600; }
}

/* toast */
#toasts { position:fixed; right:16px; bottom:16px; z-index:80; display:flex; flex-direction:column; gap:8px; }
.toast { background:#1d2129ee; color:#f2f3f5; border-radius:6px; padding:9px 14px; font-size:12px; box-shadow:0 4px 16px rgba(0,0,0,.25); max-width:340px; }
.toast.ok { border-left:3px solid var(--ok); }
.toast.bad { border-left:3px solid var(--bad); }
.toast.warn { border-left:3px solid var(--warn2); }

/* ===== 登录视图（账号系统）===== */
.loginwrap { display:flex; justify-content:center; padding-top:12vh; }
.logincard { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:28px 32px 22px; width:360px; box-shadow:0 8px 32px rgba(0,0,0,.08); }
.logincard h2 { font-size:16px; margin-bottom:16px; }
.logincard .inp { width:100%; margin-bottom:10px; padding:8px 10px; font-size:13px; }
.logincard .btn { width:100%; padding:8px 0; font-size:13px; }
.logincard .lerr { color:var(--bad); font-size:12px; min-height:18px; margin-bottom:8px; }
.loginfold { margin-top:16px; font-size:11px; color:var(--muted); border-top:1px dashed var(--line); padding-top:10px; }
.loginfold a { color:var(--muted); cursor:pointer; text-decoration:underline; }
.loginfold .btn { width:auto; padding:4px 12px; font-size:12px; }

.multi { border:1px solid var(--line); border-radius:4px; padding:6px; max-height:130px; overflow:auto; }
.multi label { display:flex; align-items:center; gap:6px; padding:2px 4px; font-size:12px; cursor:pointer; }
.multi label:hover { background:#f7f8fa; }
.loading { color:var(--muted); padding:30px 0; text-align:center; }