:root {
  --brand: #5AA5B4;
  --brand-dark: #2E7D8C;
  --bg: #F5F9FA;
  --card: #ffffff;
  --text: #1A3A4A;
  --text-sub: #7A97A3;
  --border: rgba(90,165,180,.18);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  background:linear-gradient(180deg,#F5F9FA 0%,#E9F1F3 100%);
  color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
}
.hidden { display:none !important; }

/* ============ 登录页 ============ */
.login {
  height:100vh; display:flex; align-items:center; justify-content:center;
}
.login-box {
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:44px 48px; text-align:center; width:340px;
  box-shadow:0 8px 32px rgba(26,58,74,.10);
}
.logo, .logo-dot {
  width:44px; height:44px; border-radius:12px; margin:0 auto 16px;
  background:linear-gradient(135deg,#5AA5B4,#2E7D8C);
  box-shadow:0 4px 12px rgba(90,165,180,.4);
}
.login h1 { font-size:20px; letter-spacing:2px; }
.sub { font-size:12px; color:var(--text-sub); margin:8px 0 26px; letter-spacing:1px; }
.login input {
  width:100%; padding:12px 16px; font-size:15px; text-align:center;
  border:1.5px solid #D5E4E8; border-radius:10px; outline:none; color:var(--text);
  letter-spacing:4px; transition:border-color .2s;
}
.login input:focus { border-color:var(--brand); }
.login button {
  width:100%; margin-top:14px; padding:12px; font-size:15px; font-weight:600;
  color:#fff; background:linear-gradient(135deg,#5AA5B4,#2E7D8C);
  border:none; border-radius:10px; cursor:pointer; letter-spacing:6px;
}
.login button:hover { opacity:.88; }
.err { color:#E05B5B; font-size:13px; margin-top:14px; min-height:18px; }

/* ============ 主界面 ============ */
.main { height:100vh; display:flex; flex-direction:column; }
.topbar {
  display:flex; align-items:center; gap:2vw;
  padding:14px 3vw; background:rgba(255,255,255,.8);
  border-bottom:1px solid var(--border); backdrop-filter:blur(6px);
}
.brand { display:flex; align-items:center; gap:12px; }
.logo-dot { width:38px; height:38px; margin:0; border-radius:10px; }
.brand-txt .name { font-size:18px; font-weight:700; letter-spacing:1px; }
.brand-txt small { display:block; font-size:11px; color:var(--text-sub); letter-spacing:1px; }
.nav { flex:1; display:flex; gap:8px; }
.nav .tab {
  padding:9px 18px; font-size:15px; color:var(--text-sub); cursor:pointer;
  border-radius:9px; border:1px solid transparent; transition:all .2s;
  white-space:nowrap;
}
.nav .tab:hover { background:rgba(90,165,180,.08); color:var(--brand-dark); }
.nav .tab.active {
  background:linear-gradient(135deg,#5AA5B4,#2E7D8C); color:#fff;
  box-shadow:0 3px 10px rgba(90,165,180,.35);
}
.right { display:flex; align-items:center; gap:16px; }
.clock { font-size:16px; color:var(--brand-dark); font-weight:600; font-variant-numeric:tabular-nums; }
.logout {
  padding:8px 16px; font-size:13px; color:var(--text-sub); cursor:pointer;
  background:#fff; border:1px solid var(--border); border-radius:8px;
}
.logout:hover { color:#E05B5B; border-color:#E05B5B; }

.panel { flex:1; overflow:auto; padding:24px 3vw; }

/* ============ 模块面板通用 ============ */
.mod-head {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;
}
.mod-title { font-size:20px; font-weight:700; display:flex; align-items:center; gap:10px; }
.mod-title .ico { font-size:24px; }
.mod-title small { font-size:13px; color:var(--text-sub); font-weight:400; margin-left:8px; }
.mod-actions { display:flex; align-items:center; gap:12px; }
.badge {
  display:inline-block; padding:3px 12px; font-size:12px; font-weight:600;
  border-radius:20px; background:#F7EEDD; color:#B07817; border:1px solid #EBD5A8;
}
.btn-refresh {
  padding:7px 16px; font-size:13px; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#5AA5B4,#2E7D8C); border:none; border-radius:8px;
}
.btn-refresh:hover { opacity:.88; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.card {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:20px; box-shadow:0 4px 16px rgba(26,58,74,.06);
}
.card h3 {
  font-size:15px; color:#5F7C89; font-weight:600; margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.card h3::before {
  content:""; width:4px; height:16px; border-radius:3px;
  background:linear-gradient(180deg,#5AA5B4,#2E7D8C);
}
.placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 20px; text-align:center; color:var(--text-sub);
}
.placeholder .big { font-size:40px; margin-bottom:14px; }
.placeholder .msg { font-size:14px; }
.placeholder .hint { font-size:12px; margin-top:8px; opacity:.7; }

/* ============ 车间模块 ============ */
.counters { display:flex; gap:16px; margin-bottom:16px; }
.big-card {
  flex:1; background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:26px; text-align:center; box-shadow:0 4px 16px rgba(26,58,74,.06);
}
.big-card .blabel { font-size:14px; color:var(--text-sub); letter-spacing:2px; margin-bottom:14px; }
.big-card .bnum {
  font-size:52px; font-weight:700; color:var(--brand-dark);
  font-variant-numeric:tabular-nums; letter-spacing:2px; line-height:1;
}
.big-card.total .bnum { color:#B07817; }
.big-card .bunit { font-size:13px; color:var(--text-sub); margin-top:12px; letter-spacing:3px; }

.hours { display:flex; align-items:flex-end; gap:4px; height:160px; }
.hbar { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; }
.hbar .bar {
  width:100%; border-radius:4px 4px 0 0; min-height:2px;
  background:linear-gradient(180deg,#8FC7D2,#5AA5B4); transition:height .8s;
}
.hbar.cur .bar { background:linear-gradient(180deg,#2E7D8C,#1F6E7E); box-shadow:0 0 8px rgba(46,125,140,.45); }
.hbar .hlab { font-size:11px; color:#9DB4BD; margin-top:5px; }

.parts { display:flex; flex-direction:column; gap:12px; justify-content:center; min-height:120px; }
.prow { display:flex; align-items:center; gap:10px; font-size:14px; }
.prow .pname { width:12em; color:#4A6B78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prow .pbar-wrap { flex:1; height:12px; background:#EDF4F5; border-radius:6px; overflow:hidden; }
.prow .pbar { height:100%; border-radius:6px; background:linear-gradient(90deg,#5AA5B4,#8FC7D2); transition:width .8s; }
.prow .pval { width:4em; text-align:right; color:var(--brand-dark); font-weight:600; font-variant-numeric:tabular-nums; }

.feed { display:flex; flex-direction:column; gap:2px; max-height:160px; overflow:hidden; }
.frow { display:flex; align-items:center; gap:10px; font-size:13px; padding:6px 2px; border-bottom:1px dashed #E3EEF0; }
.frow:last-child { border-bottom:none; }
.frow .ftime { color:var(--brand-dark); font-weight:700; font-variant-numeric:tabular-nums; width:3.5em; }
.frow .fpart { flex:1; color:#4A6B78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.frow .fqty { color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }

.empty { color:#9DB4BD; font-size:13px; text-align:center; padding:20px 0; }
.updated { font-size:12px; color:var(--text-sub); font-variant-numeric:tabular-nums; }
.badge.ok { background:#E4F3EE; color:#2BA36B; border-color:#C5E4D4; }
.badge.err { background:#FBE8E8; color:#E05B5B; border-color:#F0C9C9; }

/* ============ 会议室模块 ============ */
.datebar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.dtab {
  padding:8px 16px; font-size:14px; color:var(--text-sub); cursor:pointer;
  border-radius:8px; border:1px solid var(--border); background:#fff; transition:all .2s;
}
.dtab:hover { color:var(--brand-dark); border-color:var(--brand); }
.dtab.active { background:linear-gradient(135deg,#5AA5B4,#2E7D8C); color:#fff; border-color:transparent; }

.card h3 .rcap {
  font-size:12px; color:var(--text-sub); font-weight:400; margin-left:8px; float:right;
}
.slots { display:flex; flex-direction:column; gap:8px; max-height:260px; overflow:auto; }
.slot {
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
  font-size:13px; background:#F2F8F9; border:1px solid #E0EDEF;
}
.slot .stime { font-weight:700; color:var(--brand-dark); font-variant-numeric:tabular-nums; white-space:nowrap; }
.slot .stag { font-size:11px; padding:1px 8px; border-radius:10px; white-space:nowrap; }
.slot .sbooker { flex:1; color:#4A6B78; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.slot.st-book { background:#EAF3F5; border-color:#CDE3E8; }
.slot.st-book .stag { background:#E4F3EE; color:#2BA36B; }
.slot.st-apply { background:#FBF6EA; border-color:#F0E3C2; }
.slot.st-apply .stag { background:#F7EEDD; color:#B07817; }
.slot.st-approve { background:#FBF2EA; border-color:#F0DCC2; }
.slot.st-approve .stag { background:#FBE8D5; color:#C06A17; }
.slot.st-cancel { background:#F5F5F5; border-color:#E5E5E5; opacity:.6; }