/* ===== 家庭个人工作台 · 样式（浅色主题，无外网依赖） ===== */
:root{
  --bg:#F4F6F8;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --border:#E2E6EB;
  --border-strong:#CFD6DE;
  --text:#1F2328;
  --text-2:#5A6472;
  --text-3:#8A939F;
  --brand:#185FA5;
  --brand-soft:#E6F1FB;
  --ok:#3B6D11;
  --ok-soft:#EAF3DE;
  --warn:#854F0B;
  --warn-soft:#FAEEDA;
  --danger:#A32D2D;
  --danger-soft:#FCEBEB;
  --info:#0F6E56;
  --info-soft:#E1F5EE;
  --radius:12px;
  --radius-sm:8px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* 便于按用户换主题的几处硬编码色（粉主题会覆盖这些） */
  --topbar-bg:rgba(255,255,255,.92);
  --bg-grad-top:#EEF3F9;
  --brand-hover:#14508A;
  --ghost-hover:#EDF1F6;
  --brand-edge:#CFE2F4;
  --kpi-accent-a:#F7FBFF;
  --kpi-accent-b:#EDF4FC;
}
/* ---------- 主题：粉色（按用户区分） ---------- */
html[data-theme="pink"]{
  --bg:#FDF1F6;
  --surface:#FFFFFF;
  --surface-2:#FDF6F9;
  --border:#F3DCE6;
  --border-strong:#E7C3D3;
  --text:#2A1F26;
  --text-2:#6B5560;
  --text-3:#9C8491;
  --brand:#C2185B;
  --brand-soft:#FCE4EC;
  --topbar-bg:rgba(255,252,254,.94);
  --bg-grad-top:#FCE7F0;
  --brand-hover:#A01349;
  --ghost-hover:#FBECF2;
  --brand-edge:#F3C9DA;
  --kpi-accent-a:#FFF7FA;
  --kpi-accent-b:#FCE9F1;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:600}
h1{font-size:17px}
h2{font-size:15px}
a{color:var(--brand);text-decoration:none}
[hidden]{display:none !important}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:13px;line-height:1;
  padding:8px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text);
  cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{background:var(--surface-2);border-color:var(--text-3)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-hover)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--ghost-hover);color:var(--text)}
.btn.icon{padding:6px 9px}
.btn.block{width:100%;justify-content:center;padding:10px 14px;font-size:14px}
.btn.danger{color:var(--danger);border-color:#F0C9C9}
.btn.danger:hover{background:var(--danger-soft)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.sm{padding:5px 10px;font-size:12px}

/* ---------- 登录 ---------- */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:linear-gradient(180deg,var(--bg-grad-top) 0%,var(--bg) 60%);
}
.auth-card{
  width:100%;max-width:390px;background:var(--surface);
  border:1px solid var(--border);border-radius:16px;padding:28px 26px 22px;
  box-shadow:0 6px 24px rgba(23,43,77,.06);
}
.auth-brand{display:flex;gap:12px;align-items:center;color:var(--brand);margin-bottom:20px}
.auth-brand h1{color:var(--text);font-size:16px}
.auth-brand p{margin:2px 0 0;font-size:12px;color:var(--text-3)}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:12.5px;color:var(--text-2);margin-bottom:6px}
.field .hint{color:var(--text-3);font-size:11.5px;margin-left:4px}
.field input{
  width:100%;padding:9px 11px;font:inherit;font-size:14px;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);
}
.field select{
  width:100%;padding:9px 11px;font:inherit;font-size:14px;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);
}
.field input[type=checkbox]{width:auto;padding:0}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(24,95,165,.12)}
.auth-msg{margin:10px 0 0;font-size:12.5px;color:var(--danger);min-height:16px}
.auth-note{margin:14px 0 0;font-size:11.5px;color:var(--text-3);text-align:center;line-height:1.5}
/* 备案号（工信部要求网站底部展示并链接备案系统） */
.beian{margin:10px 0 0;font-size:11px;color:var(--text-3);text-align:center;line-height:1.5}
.beian a{color:inherit;text-decoration:none}
.beian a:hover{text-decoration:underline}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 22px;background:var(--topbar-bg);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border);
}
.topbar-left{display:flex;align-items:center;gap:11px;min-width:0}
.logo{display:flex;color:var(--brand)}
.titles{display:flex;flex-direction:column;line-height:1.25}
.titles strong{font-size:14.5px}
.titles span{font-size:11.5px;color:var(--text-3)}
.topbar-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.stamp{font-size:11.5px;color:var(--text-3);margin-right:4px}
.user-chip{
  display:flex;align-items:center;gap:7px;margin-left:6px;padding:4px 10px 4px 5px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;
}
.avatar{
  width:23px;height:23px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
}
.uname{font-size:12.5px}
.role{
  font-size:10.5px;padding:1px 6px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand);
}
.role.member{background:#EEF1F5;color:var(--text-2)}

/* ---------- 页面 ---------- */
.page{max-width:1180px;margin:0 auto;padding:20px 22px 40px}
.section-head{margin:24px 2px 12px}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.panel-hint{font-size:12px;color:var(--text-3)}

/* ---------- KPI ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;position:relative;overflow:hidden;
}
.kpi .k-label{font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:5px}
.kpi .k-value{font-size:23px;font-weight:600;margin:6px 0 1px;letter-spacing:-.4px}
.kpi .k-value.small{font-size:19px}
.kpi .k-hint{font-size:11.5px;color:var(--text-3)}
.kpi.accent{background:linear-gradient(135deg,var(--kpi-accent-a) 0%,var(--kpi-accent-b) 100%);border-color:var(--brand-edge)}
.kpi.accent .k-value{color:var(--brand)}
.kpi .k-bar{height:3px;border-radius:2px;background:var(--brand-soft);margin-top:9px;overflow:hidden}
.kpi .k-bar>i{display:block;height:100%;background:var(--brand)}

/* ---------- 提醒 ---------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px}
#alerts-panel{margin-top:16px}
.alert-list{display:flex;flex-direction:column;gap:8px}
.alert{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:var(--radius-sm);border:1px solid transparent;
}
.alert .dot{width:7px;height:7px;border-radius:50%;margin-top:6px;flex:none}
.alert .a-main{flex:1;min-width:0}
.alert .a-title{font-size:13px;font-weight:500}
.alert .a-detail{font-size:12px;color:var(--text-2);margin-top:1px}
.alert .a-mod{font-size:11px;color:var(--text-3);white-space:nowrap;margin-top:2px}
.alert.danger{background:var(--danger-soft);border-color:#F2D5D5}
.alert.danger .dot{background:var(--danger)}
.alert.danger .a-title{color:var(--danger)}
.alert.warn{background:var(--warn-soft);border-color:#F0E0C0}
.alert.warn .dot{background:#BA7517}
.alert.warn .a-title{color:var(--warn)}
.alert.info{background:var(--surface-2);border-color:var(--border)}
.alert.info .dot{background:var(--text-3)}
/* 提醒可点击 + 销项按钮 */
.alert{transition:border-color .15s,box-shadow .15s}
.alert[data-href]:not([data-href=""]):hover{border-color:var(--border-strong);box-shadow:0 2px 10px rgba(23,43,77,.06)}
.a-x{
  flex:none;width:22px;height:22px;border:0;border-radius:6px;cursor:pointer;
  background:transparent;color:var(--text-3);font-size:15px;line-height:1;
  align-self:flex-start;margin-top:2px;
}
.a-x:hover{background:var(--danger-soft);color:var(--danger)}
.hint-link{color:var(--text-2);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.hint-link:hover{color:var(--text-1)}
.empty{font-size:12.5px;color:var(--text-3);padding:8px 2px}

/* ---------- 子系统卡片 ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.mcard{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .15s,box-shadow .15s;
}
.mcard:hover{border-color:var(--border-strong);box-shadow:0 3px 14px rgba(23,43,77,.05)}
/* 卡片拖拽排序 */
.mcard[draggable="true"]{cursor:grab}
.mcard.dragging{opacity:.45;outline:2px dashed var(--primary,var(--accent,#534AB7));outline-offset:2px}
.mcard-head{display:flex;align-items:center;gap:11px}
.micon{
  width:36px;height:36px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.mcard-title{flex:1;min-width:0}
.mcard-title strong{display:block;font-size:14.5px}
.mcard-title span{font-size:11.5px;color:var(--text-3)}
.mcard-flag{font-size:10.5px;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.mcard-flag.err{background:var(--danger-soft);color:var(--danger);border-color:#F2D5D5}
.mstats{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px}
.mstat .s-label{font-size:11.5px;color:var(--text-3)}
.mstat .s-value{font-size:14.5px;font-weight:600;letter-spacing:-.2px}
.mstat .s-hint{font-size:11px;color:var(--text-3)}
.chart-wrap{border-top:1px dashed var(--border);padding-top:10px}
.chart-title{font-size:11.5px;color:var(--text-3);margin-bottom:7px}
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.bar-row .bl{font-size:11.5px;color:var(--text-2);width:64px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .bt{flex:1;height:7px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.bar-row .bt>i{display:block;height:100%;border-radius:4px}
.bar-row .bv{font-size:11.5px;color:var(--text-2);min-width:26px;text-align:right;flex:none}
.mcard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding-top:11px;margin-top:auto}
.src-note{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.foot{display:flex;flex-direction:column;gap:3px;margin-top:26px;font-size:11.5px;color:var(--text-3);text-align:center}

/* ---------- 弹层 ---------- */
.modal-mask{
  position:fixed;inset:0;z-index:50;background:rgba(24,35,50,.34);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal{
  width:100%;max-width:620px;max-height:86vh;background:var(--surface);
  border-radius:14px;border:1px solid var(--border);display:flex;flex-direction:column;
  box-shadow:0 18px 50px rgba(20,35,60,.22);
}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--border)}
.modal-body{padding:16px 18px;overflow:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:13px 18px;border-top:1px solid var(--border)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-weight:500;color:var(--text-3);font-size:11.5px;padding:7px 8px;border-bottom:1px solid var(--border)}
.tbl td{padding:9px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tag{font-size:11px;padding:2px 7px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
.tag.on{background:var(--ok-soft);border-color:#D3E5B8;color:var(--ok)}
.tag.off{background:#EEF1F5;color:var(--text-3)}
.tag.admin{background:var(--brand-soft);border-color:var(--brand-edge);color:var(--brand)}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.sec-title{font-size:12.5px;color:var(--text-2);margin:16px 0 8px;font-weight:500}
.sec-title:first-child{margin-top:0}
.note-box{font-size:12px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;line-height:1.6}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%);
  background:#22303F;color:#fff;font-size:13px;padding:9px 16px;border-radius:8px;z-index:80;
}

@media (max-width:720px){
  .topbar{padding:10px 14px;flex-wrap:wrap}
  .page{padding:14px 14px 32px}
  .stamp{display:none}
  .form-row{grid-template-columns:1fr}
}