body { background: #edf3f0; }
.manager-shell { width: min(100%, 1120px); min-height: 100vh; margin: 0 auto; }
.manager-topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; gap: 12px; min-height: 70px; padding: max(12px, env(safe-area-inset-top)) 18px 12px; color: white; background: rgba(11, 73, 56, .96); backdrop-filter: blur(14px); }
.manager-topbar > a { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: white; background: rgba(255,255,255,.12); text-decoration: none; }
.manager-topbar > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.manager-topbar strong { font-size: 16px; }
.manager-topbar span { overflow: hidden; margin-top: 2px; color: #bde2d5; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.manager-topbar button { padding: 8px 11px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; color: white; background: transparent; font-size: 12px; }
.manager-loading { display: grid; min-height: 60vh; place-content: center; place-items: center; color: var(--muted); }
.manager-error { padding: 70px 20px; text-align: center; }
.manager-error h1 { font-size: 22px; }
.manager-error p { color: var(--muted); }
.manager-error a { display: inline-block; margin-top: 10px; color: var(--green-700); }
.manager-content { padding: 22px 18px 50px; }
.dashboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.dashboard-head span { color: var(--muted); font-size: 11px; }
.dashboard-head h1 { margin: 4px 0 0; font-size: 24px; }
.due-slots { text-align: right; }
.due-slots strong { display: block; max-width: 55vw; margin-top: 4px; font-size: 12px; }
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi-grid article { min-height: 94px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); }
.kpi-grid span { color: var(--muted); font-size: 11px; }
.kpi-grid strong { display: block; margin-top: 9px; font-size: 25px; }
.kpi-grid .good strong { color: #15845e; }
.kpi-grid .danger strong { color: #c0362c; }
.kpi-grid .warning strong { color: #b16a08; }
.kpi-grid .amount { grid-column: span 1; }
.kpi-grid .amount strong { color: var(--green-700); font-size: 21px; }
.filter-row { display: flex; gap: 8px; margin: 20px 0 12px; overflow-x: auto; }
.filter-row button { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: white; font-size: 12px; }
.filter-row button.active { border-color: var(--green-700); color: white; background: var(--green-700); }
.people-list { display: grid; gap: 9px; }
.person-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) repeat(4, minmax(64px, .7fr)); align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.person-main { min-width: 0; }
.person-main strong, .person-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-main strong { font-size: 14px; }
.person-main span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.person-stat span, .person-stat strong { display: block; text-align: right; }
.person-stat span { color: var(--muted); font-size: 10px; }
.person-stat strong { margin-top: 3px; font-size: 13px; }
.person-stat.bad strong { color: var(--danger); }
.person-stat.warn strong { color: var(--warning); }
.empty-state { padding: 30px; border-radius: 15px; color: var(--muted); background: white; text-align: center; }
@media (max-width: 620px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .person-row { grid-template-columns: 1fr repeat(2, 68px); }
  .person-stat.optional { display: none; }
}