body { background: #f4f6f8; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 340px; }
#app { display: flex; min-height: 100vh; }
.side { width: 200px; background: #1f3b2d; color: #dfe9e3; flex-shrink: 0; display: flex; flex-direction: column; }
.brand { font-size: 1.1rem; font-weight: 600; padding: 20px 16px; line-height: 1.4; }
#nav { flex: 1; overflow-y: auto; }
#nav .grp { font-size: .75rem; color: #8aa597; padding: 10px 16px 4px; }
#nav a { display: block; padding: 8px 16px 8px 24px; color: #dfe9e3; text-decoration: none; }
#nav a:hover { background: #2a4d3b; }
#nav a.on { background: #3b7a57; color: #fff; }
.side-foot { padding: 12px 16px; font-size: .85rem; }
.side-foot a { color: #9fd1b4; margin-left: 8px; }
.main { flex: 1; padding: 20px 24px; min-width: 0; }
.tbl-wrap { background: #fff; border-radius: 6px; overflow-x: auto; }
.tbl-wrap table { margin: 0; white-space: nowrap; }
.tbl-wrap th { background: #eef3f0; }
td.computed { background: #f7faf8; color: #2a6b47; }
td.neg { color: #c0392b; font-weight: 600; }
.section-title { font-size: 1rem; font-weight: 600; margin: 20px 0 8px; }

@media (max-width: 768px) {
  #app { flex-direction: column; }
  .side { width: 100%; }
  .brand { padding: 10px 16px; }
  #nav { display: flex; flex-wrap: wrap; flex: none; padding: 0 8px 8px; }
  #nav .grp { display: none; }
  #nav a { padding: 6px 10px; margin: 2px; border-radius: 4px; font-size: .9rem; }
  .side-foot { padding: 6px 16px 10px; }
  .main { padding: 14px 12px; }
}