:root { --bg:#f4f6f9; --card:#fff; --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --pri:#1d4ed8; --side:#0f172a;
  --green:#15803d; --red:#b91c1c; --amber:#b45309; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.5 system-ui, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--pri); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { font-size:22px; margin:0 0 16px; } h2 { font-size:17px; margin:24px 0 10px; } h3 { font-size:15px; margin:16px 0 8px; }
.muted { color:var(--muted); } .small, small { font-size:12px; } .center { text-align:center; }
.pre { white-space:pre-wrap; }

.banner { position:sticky; top:0; z-index:20; height:64px; display:flex; align-items:center; gap:12px; padding:0 20px;
  background:linear-gradient(90deg, #0f172a, #1e3a8a 60%, #1d4ed8); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.banner a { color:#fff; } .banner a:hover { text-decoration:none; }
.banner .logo { font-size:30px; line-height:1; }
.banner .titles { display:flex; flex-direction:column; min-width:0; }
.banner .sys { font-weight:700; font-size:16px; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.banner .co { font-size:12px; color:#bfdbfe; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account { margin-left:auto; position:relative; }
.account summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; }
.account summary::-webkit-details-marker { display:none; }
.account summary:hover, .account[open] summary { background:rgba(255,255,255,.12); }
.avatar { width:34px; height:34px; border-radius:50%; background:#fff; color:#1e3a8a; display:grid; place-items:center; font-weight:700; }
.who { display:flex; flex-direction:column; line-height:1.2; } .who small { color:#bfdbfe; }
.dropdown { position:absolute; right:0; top:calc(100% + 6px); min-width:220px; background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.15); padding:8px; display:flex; flex-direction:column; }
.dropdown .muted { padding:4px 10px 8px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.dropdown a { color:var(--ink); padding:7px 10px; border-radius:6px; } .dropdown a:hover { background:#f1f5f9; }
.menu { display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:4px; }

.wrap { display:flex; min-height:calc(100vh - 64px); }
#side { width:240px; flex:none; background:var(--side); color:#cbd5e1; position:sticky; top:64px; height:calc(100vh - 64px); overflow:auto; padding-top:8px; }
#side nav a { display:block; color:#cbd5e1; padding:6px 16px; }
#side nav a:hover, #side nav a.on { background:#1e293b; color:#fff; text-decoration:none; }
#side .grp { padding:12px 16px 4px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#64748b; }
main { flex:1; padding:24px; min-width:0; display:flex; flex-direction:column; }
.credit { margin-top:auto; padding-top:32px; text-align:center; font-size:12px; color:var(--muted); }

.head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .actions form { margin:0; }
.btn { display:inline-block; background:var(--pri); color:#fff; border:1px solid var(--pri); border-radius:6px; padding:7px 14px; font:inherit; cursor:pointer; }
.btn:hover { text-decoration:none; filter:brightness(1.1); }
.btn.ghost { background:#fff; color:var(--pri); } .btn.danger { background:var(--red); border-color:var(--red); }
.btn.small { padding:2px 8px; font-size:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; }
.flash { padding:10px 14px; border-radius:6px; background:#dcfce7; margin-bottom:12px; } .flash.err { background:#fee2e2; }

input, select, textarea { font:inherit; padding:7px 9px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; width:100%; }
label { display:flex; flex-direction:column; gap:4px; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.grid .wide { grid-column:1/-1; } .req { color:var(--red); }
.narrow, .login { max-width:380px; display:flex; flex-direction:column; gap:12px; }
.login { margin:10vh auto; }
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 12px; }
.filters input, .filters select { width:auto; min-width:150px; }

.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; background:#fff; }
th, td { padding:7px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:#f8fafc; font-weight:600; font-size:13px; white-space:nowrap; }
td.num, th.num { text-align:right; white-space:nowrap; } .neg { color:var(--red); }
tbody tr:hover { background:#f8fafc; }

.badge { padding:1px 8px; border-radius:10px; font-size:12px; white-space:nowrap; background:#fef3c7; color:var(--amber); }
.badge.green { background:#dcfce7; color:var(--green); } .badge.red { background:#fee2e2; color:var(--red); }
.bar { display:inline-block; width:60px; height:6px; background:var(--line); border-radius:3px; vertical-align:middle; }
.bar i { display:block; height:100%; background:var(--pri); border-radius:3px; }
.count { background:var(--line); border-radius:10px; padding:0 8px; font-size:12px; } .count.red { background:#fee2e2; color:var(--red); }

.dl { display:grid; grid-template-columns:220px 1fr; gap:6px 16px; margin:0; } .dl dt { color:var(--muted); } .dl dd { margin:0; }
.kpis { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 14px; color:var(--ink); }
.kpi span { display:block; color:var(--muted); font-size:12px; } .kpi b { font-size:20px; }
.kpi.warn b { color:var(--amber); } .kpi.bad b { color:var(--red); } .kpi.good b { color:var(--green); }
.alerts { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.alert ul { margin:0; padding-left:18px; } .alert h3 { margin-top:0; }
.kid { background:#fff; border:1px solid var(--line); border-radius:8px; margin:10px 0; }
.kid summary { padding:10px 14px; cursor:pointer; font-weight:600; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.gantt { background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px; overflow-x:auto; }
.g-row { display:flex; align-items:center; min-width:800px; border-bottom:1px solid var(--line); }
.g-name { width:280px; flex:none; padding:6px; font-size:13px; }
.g-track { position:relative; flex:1; height:30px; overflow:hidden; }
.g-axis .g-track { height:22px; } .tick { position:absolute; font-size:11px; color:var(--muted); border-left:1px solid var(--line); padding-left:3px; }
.g-bar { position:absolute; top:7px; height:16px; background:#bfdbfe; border-radius:4px; overflow:hidden; }
.g-bar i { display:block; height:100%; background:var(--pri); } .g-bar.late { outline:2px solid var(--red); }
.g-now { position:absolute; top:0; bottom:0; width:2px; background:var(--red); }

.paper { background:#fff; max-width:900px; margin:0 auto; padding:30px 40px; font-family:"Times New Roman", serif; font-size:15px; display:block; }
.hdr, .sign { border:none; } .hdr, .sign { table-layout:fixed; } .hdr td, .sign td { border:none; text-align:center; }
.sign td { padding-top:30px; height:140px; }
.form-print th { width:35%; white-space:normal; background:none; } .form-print th, .form-print td { border:1px solid #999; }
.editable { border:1px dashed #94a3b8; min-height:80px; padding:8px; }
.bang-in th, .bang-in td { border:1px solid #999; padding:4px 6px; } .bang-in th { background:none; white-space:normal; }

.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; margin-bottom:12px; }
.gallery figure { margin:0; background:#f8fafc; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.gallery img { width:100%; height:120px; object-fit:cover; display:block; }
.gallery .doc { display:grid; place-items:center; height:120px; text-align:center; padding:6px; font-size:12px; word-break:break-all; }
.gallery figcaption { font-size:11px; color:var(--muted); padding:4px 6px; }
.linkbtn { background:none; border:none; color:var(--red); cursor:pointer; padding:0 4px; font:inherit; }
.anh-in { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .anh-in img { width:100%; max-height:260px; object-fit:contain; }

.tai { padding:2px 6px; border-radius:4px; } .heat td.tai { border-radius:0; }
.t0 { background:#f1f5f9; } .t1 { background:#dbeafe; } .t2 { background:#bbf7d0; } .t3 { background:#fde68a; } .t4 { background:#fca5a5; }

@media (max-width:800px) {
  body { display:block; } .wrap { display:block; }
  .banner { padding:0 10px; gap:8px; } .menu { display:block; }
  .banner .sys { font-size:13px; } .banner .logo { display:none; } .who { display:none; }
  #side { display:none; position:fixed; z-index:15; top:64px; left:0; height:calc(100vh - 64px); }
  body.open #side { display:block; }
  main { padding:16px; } .dl { grid-template-columns:1fr; } .dl dd { margin-bottom:8px; }
  .kpis { grid-template-columns:1fr 1fr; gap:8px; } .kpi b { font-size:16px; }
  .paper { padding:16px; }
}
@media print {
  .banner, #side, .menu, .noprint, .flash, .credit { display:none !important; }
  body, .wrap { background:#fff; display:block; } main { padding:0; }
  .paper { padding:0; max-width:none; } .editable { border:none; }
}