.shell{ max-width:none; margin:0 auto; padding:0 20px 60px; }

/* ---- Global nav ---- */
.gnav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0 12px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
  flex-wrap:wrap;
  gap:10px;
}
.gnav .brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:17px; color:var(--navy-deep); letter-spacing:.03em;
}
.gnav .brand::before{ content:""; width:9px;height:9px;background:var(--accent); border-radius:2px; display:inline-block; }
.tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.tab-btn{
  border:1px solid var(--line);
  background:var(--card);
  color:var(--navy-deep);
  padding:8px 18px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
}
.tab-btn:hover{ background:var(--accent-soft); border-color:var(--accent); }
.tab-btn.active{ background:var(--navy-deep); color:#fff; border-color:var(--navy-deep); }

.screen{ display:none; }
.screen.active{ display:block; }

.titlebar{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:6px;}
.titlebar h1{ font-size:19px; margin:0; color:var(--navy-deep); font-weight:700; }
.titlebar .sub{ font-size:12px; color:#8792a0; }

.toolbar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; margin-bottom:14px; gap:12px; flex-wrap:wrap;
}
.month-nav{ display:flex; align-items:center; gap:14px; }
.month-nav button.nav-arrow{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  background:var(--paper);color:var(--navy-deep);font-size:14px;cursor:pointer;transition:.15s;
}
.month-nav button.nav-arrow:hover{ background:var(--accent-soft); border-color:var(--accent); }
.month-label{ font-size:18px; font-weight:700; color:var(--navy-deep); min-width:130px; text-align:center; }
.legend{ display:flex; align-items:center; gap:14px; font-size:11px; color:#6b7684; }
.legend span{ display:flex; align-items:center; gap:5px; }
.legend i{ width:12px;height:12px;border-radius:3px;display:inline-block;border:1px solid var(--line); }
.legend i.ok{ background:#fff; }
.legend i.tri{ background:var(--warn-bg); }
.legend i.x{ background:var(--off-bg); }

.hint{ margin-top:10px; font-size:11px; color:#96a0ac; }