/* ═══ 恒镜 · 统一设计系统（hj.css） 2026-09-30 · 2026-10-09 主题升级：浅色侧栏/10px圆角/无投影，与经营驾驶舱统一 ═══ */
:root {
  --bg:#f5f7f7; --card:#ffffff; --line:#dde5e5; --line-soft:#edf1f1;
  --txt:#243537; --sub:#607173; --faint:#6b7b7d;
  --brand:#0d7377; --brand-deep:#095b5f; --brand-soft:#e7f2f1;
  --red:#d92d20; --red-deep:#b42318; --red-soft:#fef3f2;
  --amber:#b54708; --amber-soft:#fffaeb;
  --green:#067647; --green-soft:#ecfdf3;
  --radius:10px;
  --shadow:none;
  --c: var(--brand); --ok: var(--green); --bad: var(--red); --warn: var(--amber);
}
* { box-sizing:border-box; margin:0; }
body { font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.6; }

/* ── 应用外壳 ── */
.hj-shell { display:flex; min-height:100vh; }
.hj-side { width:192px; flex:none; background:#f0f3f3; color:var(--txt); border-right:1px solid var(--line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.hj-logo { display:flex; align-items:center; gap:11px; padding:20px 18px; border-bottom:1px solid var(--line); }
.hj-logo .mark { width:36px; height:36px; border-radius:11px; background:linear-gradient(140deg,#15939a 0%, var(--brand) 52%, #0a6266 100%); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; flex:none; position:relative; overflow:hidden; box-shadow:0 2px 8px rgba(13,115,119,.3); text-shadow:0 1px 2px rgba(0,0,0,.2); }
.hj-logo .mark::after { content:""; position:absolute; left:-30%; top:-60%; width:80%; height:220%; transform:rotate(24deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); }
.hj-logo b { color:var(--txt); font-size:16.5px; display:block; line-height:1.25; letter-spacing:3px; font-weight:700; }
.hj-logo i { font-style:normal; font-size:10.5px; color:var(--sub); display:block; letter-spacing:2px; margin-top:2px; }
.hj-nav { padding:12px 10px; display:flex; flex-direction:column; gap:2px; flex:1; }
.hj-nav .grp { font-size:11px; color:var(--sub); padding:10px 10px 5px; letter-spacing:.5px; }
.hj-nav a { display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:8px; color:#52686b; min-height:44px; text-decoration:none; font-size:13.5px; transition:background .12s; }
.hj-nav a .ico { width:18px; flex:none; display:flex; align-items:center; justify-content:center; }
.hj-nav a .ico svg { width:16px; height:16px; display:block; }
.hj-nav a:hover { background:#e3eeed; color:var(--brand-deep); }
.hj-nav a.on { background:#dceceb; color:var(--brand-deep); font-weight:600; }
.hj-settings-subnav { margin:6px 0 8px 18px; padding-left:9px; border-left:1px solid var(--line); }
.hj-settings-group { font-size:10.5px; color:var(--sub); padding:11px 10px 4px; }
.hj-settings-subnav a { padding:7px 10px; font-size:12.5px; color:#52686b; min-height:34px; }
.hj-settings-subnav a[aria-current="page"] { background:#dceceb; color:var(--brand-deep); font-weight:600; }
.hj-settings-subnav a:focus-visible, #hj-settings-toggle:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.hj-nav { min-height:0; overflow-y:auto; }
@media (max-width:860px) {
  .hj-settings-subnav { display:none; }
  .hj-side.settings-open { width:192px; z-index:45; position:fixed; left:0; }
  .hj-side.settings-open .hj-logo div, .hj-side.settings-open .hj-nav a span, .hj-side.settings-open .hj-me .who { display:block; }
  .hj-side.settings-open .hj-nav a .ico { display:flex; }
  .hj-side.settings-open .hj-settings-subnav { display:block; }
  .hj-side.settings-open .hj-settings-subnav a { justify-content:flex-start; padding-left:12px; }
  .hj-side.settings-open ~ .hj-main { margin-left:60px; }
  .hj-side.settings-open .hj-side-foot .row { display:flex; }
}
@media (max-width:640px) {
  .hj-side.settings-open ~ .hj-main { margin-left:48px; }
  .hj-settings-subnav a { min-height:44px; display:flex; align-items:center; }
}
.hj-side-foot { border-top:1px solid var(--line); padding:12px; }
.hj-me { display:flex; align-items:center; gap:9px; padding:4px 6px 10px; }
.hj-me .av { width:30px; height:30px; border-radius:50%; background:#deeeec; color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex:none; }
.hj-me .nm { font-size:13px; color:var(--txt); line-height:1.25; }
.hj-me .rl { font-size:11px; color:var(--sub); }
.hj-side-foot .row { display:flex; gap:6px; }
.hj-side-foot button { flex:1; padding:6px 0; font-size:12px; border:1px solid #c5d4d4; background:transparent; color:var(--sub); border-radius:7px; cursor:pointer; }
.hj-side-foot button:hover { background:var(--brand-soft); color:var(--brand); }

.hj-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.hj-topbar { background:#fff; border-bottom:1px solid var(--line); padding:13px 26px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:40; }
.hj-topbar h1 { font-size:17px; font-weight:700; }
.hj-topbar .sub { font-size:12px; color:var(--sub); }
.hj-topbar .right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.hj-content { padding:20px 26px 48px; max-width:1240px; width:100%; margin:0 auto; }
@media (max-width:860px) {
  .hj-side { width:60px; }
  .hj-logo div, .hj-nav a span, .hj-me .who, .hj-side-foot .row { display:none; }
  .hj-nav a { justify-content:center; padding:10px 0; }
  .hj-content { padding:16px 14px 40px; }
}
/* ── 手机端（企微 H5，2026-09-30）── */
@media (max-width:640px) {
  .hj-side { width:48px; }
  .hj-logo { padding:14px 0; justify-content:center; }
  .hj-nav { padding:8px 4px; }
  .hj-topbar { padding:10px 14px; flex-wrap:wrap; gap:6px; }
  .hj-topbar h1 { font-size:15px; }
  .hj-topbar .right { margin-left:0; width:100%; justify-content:flex-end; }
  .hj-content { padding:12px 10px 40px; }
  section { padding:14px 12px; overflow-x:auto; } /* 宽表格区内横滑 */
  .tabs { display:flex; width:100%; }
  .tabs button { flex:1; padding:8px 4px; font-size:12.5px; }
  .cards { grid-template-columns:repeat(2,1fr); gap:8px; }
  .card { padding:12px; }
  .card .v { font-size:18px; }
  .minis { grid-template-columns:repeat(2,1fr); gap:8px; }
  .toolbar input, .toolbar select { max-width:100%; }
  .hj-login-card { width:92vw; padding:28px 22px; }
}

/* ── 通用组件 ── */
section { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:14px; box-shadow:var(--shadow); }
section.todo { border:1.5px dashed #d0d5dd; background:#fafbfc; box-shadow:none; }
h2 { font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
h2 .n { font-size:12px; color:var(--sub); font-weight:400; }
.sec-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; color:var(--sub); font-weight:500; border-bottom:1px solid var(--line); padding:8px 10px; white-space:nowrap; font-size:12.5px; }
td { border-bottom:1px solid var(--line-soft); padding:9px 10px; font-variant-numeric:tabular-nums; }
tbody tr:hover { background:#f9fafb; }
tr:last-child td { border-bottom:none; }
.num { text-align:right; white-space:nowrap; }
.neg { color:var(--red); font-weight:600; }
a.lnk { color:var(--brand-deep); text-decoration:none; border-bottom:1px dashed #84c8cb; }
a.lnk:hover { color:var(--brand); }

button, .btn { padding:7px 14px; border:1px solid #d0d5dd; background:#fff; border-radius:8px; cursor:pointer; font-size:13px; color:#344054; }
button:hover, .btn:hover { border-color:var(--brand); color:var(--brand-deep); }
button.primary, .btn.primary { background:var(--brand); color:#fff; border-color:var(--brand); }
button.primary:hover, .btn.primary:hover { background:var(--brand-deep); color:#fff; }
button.danger:hover { border-color:var(--red); color:var(--red); }
button:disabled { opacity:.45; cursor:not-allowed; }
input, select { border:1px solid #d0d5dd; border-radius:8px; padding:7px 10px; font-size:13px; background:#fff; }
input:focus, select:focus { outline:2px solid #b2dddb; border-color:var(--brand); }
.toolbar { display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; align-items:center; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); }
.card .k { color:var(--sub); font-size:12px; }
.card .v { font-size:22px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; }
.card .v.ok { color:var(--green); } .card .v.bad { color:var(--red); }
.card.accent { border-left:3px solid var(--red); }
.card.todo { border:1.5px dashed #d0d5dd; background:#fafbfc; box-shadow:none; }
.card .v.muted { color:var(--faint); font-size:16px; font-weight:500; }
.card .d { font-size:12px; margin-top:5px; font-weight:600; }
.card .d span { font-weight:400; color:var(--faint); margin-left:4px; }
.d.up { color:var(--green); } .d.down { color:var(--red); }

.b { display:inline-block; padding:2px 10px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.bg { background:var(--green-soft); color:var(--green); }
.by { background:var(--amber-soft); color:var(--amber); }
.br { background:var(--red-soft); color:var(--red-deep); }
.bgray { background:#f2f4f7; color:var(--sub); }
.tag { display:inline-block; padding:1.5px 8px; border-radius:20px; font-size:12px; }
.tag.ok { background:var(--green-soft); color:var(--green); }
.tag.bad { background:var(--red-soft); color:var(--red); }
.tag.warn { background:var(--amber-soft); color:var(--amber); }
.tag.off { background:#f2f4f7; color:var(--sub); }
.j::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; vertical-align:1px; }
.j.ok::before { background:#12b76a; } .j.warn::before { background:#f79009; } .j.bad::before { background:var(--red); }
.j { font-size:12.5px; color:#344054; white-space:nowrap; }

.fn { font-size:11.5px; color:var(--faint); line-height:1.6; margin-top:10px; border-top:1px dashed var(--line); padding-top:8px; }
.note { font-size:11.5px; color:var(--faint); line-height:1.9; background:#fafbfc; border:1px solid var(--line); border-radius:var(--radius); padding:12px 18px; margin-top:12px; }
.note b { color:var(--sub); }
pre { background:#211f26; color:#d6d3cb; padding:14px; border-radius:10px; font-size:12px; line-height:1.55; max-height:420px; overflow:auto; }
.spin { display:inline-block; width:11px; height:11px; border:2px solid var(--brand); border-top-color:transparent; border-radius:50%; animation:hjr .8s linear infinite; margin-right:6px; vertical-align:-1px; }
@keyframes hjr { to { transform:rotate(360deg); } }

.minis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:6px; }
.mini { background:#f9fafb; border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.mini.warn { background:var(--amber-soft); border-color:#fedf89; }
.mini.bad { background:var(--red-soft); border-color:#fecdca; }
.mini .k { font-size:12px; color:var(--sub); }
.mini .v { font-size:21px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; }
.mini .v.r { color:var(--red); } .mini .v.a { color:var(--amber); } .mini .v.g { color:var(--green); }

.tabs { display:inline-flex; gap:4px; background:#eceff2; border-radius:10px; padding:4px; }
.tabs button { padding:8px 22px; border-radius:8px; font-size:13.5px; border:0; background:transparent; color:#475467; cursor:pointer; font-weight:500; transition:all .15s; }
.tabs button.on { background:#fff; color:var(--brand-deep); font-weight:600; box-shadow:var(--shadow); }

.real-pill { background:var(--green-soft); border:1px solid #abefc6; color:var(--green); font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px; cursor:help; }
.todo-box { text-align:center; padding:30px 20px; color:var(--sub); }
.todo-box .t { font-size:14px; font-weight:600; color:#475467; margin-bottom:6px; }
.todo-box .r { font-size:12.5px; line-height:1.8; }
.todo-box .pill { display:inline-block; background:#fff; border:1px dashed #d0d5dd; border-radius:999px; padding:3px 12px; font-size:12px; color:var(--amber); font-weight:600; margin-bottom:10px; }

/* ── 模态 / 提示 ── */
.hj-modal-bg { display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:90; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
.hj-modal-bg.show { display:flex; }
.hj-modal { background:#fff; border-radius:14px; padding:22px 24px; width:min(400px,92vw); box-shadow:0 16px 48px rgba(0,0,0,.22); }
.hj-modal h3 { font-size:16px; margin-bottom:14px; }
.hj-modal .f { margin-bottom:11px; }
.hj-modal .f label { display:block; font-size:12px; color:var(--sub); margin-bottom:4px; }
.hj-modal .f input { width:100%; }
.hj-modal .acts { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.hj-modal .err { font-size:12px; color:var(--red); min-height:16px; }
.hj-toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:#111827; color:#fff; padding:9px 18px; border-radius:8px; font-size:13px; opacity:0; transition:opacity .25s; z-index:99; pointer-events:none; }
.hj-toast.show { opacity:.95; }

/* ── 登录页 ── */
.hj-login { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0b3f42 0%,#0d7377 55%,#128a7a 100%); }
.hj-login-card { background:#fff; border-radius:16px; padding:36px 34px 30px; width:360px; box-shadow:0 24px 64px rgba(0,0,0,.28); }
.hj-login-card .hd { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.hj-login-card .mark { width:42px; height:42px; border-radius:11px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:700; }
.hj-login-card h1 { font-size:20px; }
.hj-login-card .en { font-size:11px; color:var(--faint); letter-spacing:.5px; }
.hj-login-card .tip { font-size:12.5px; color:var(--sub); margin:12px 0 18px; }
.hj-login-card .f { margin-bottom:13px; }
.hj-login-card .f label { display:block; font-size:12px; color:var(--sub); margin-bottom:5px; }
.hj-login-card .f input { width:100%; padding:10px 12px; font-size:14px; }
.hj-login-card .err { font-size:12.5px; color:var(--red); min-height:18px; margin-bottom:8px; }
.hj-login-card button { width:100%; padding:11px; background:var(--brand); color:#fff; border:0; border-radius:9px; font-size:15px; font-weight:600; cursor:pointer; }
.hj-login-card button:hover { background:var(--brand-deep); }
.hj-login-card .ft { margin-top:18px; font-size:11.5px; color:var(--faint); text-align:center; line-height:1.7; }