:root {
  color-scheme: light;
  --ink: #0d2340;
  --muted: #657080;
  --line: #d9e0e8;
  --paper: #f6f8fa;
  --panel: #ffffff;
  --navy: #0d2340;
  --red: #d62828;
  --gold: #f2c94c;
  --blue: #1d5f9e;
  --green: #16735c;
  --amber: #9b5d0b;
  --watch-a: #16735c;
  --watch-b: #d62828;
  --watch-c: #1d5f9e;
  --watch-d: #f2c94c;
  --shadow: 0 18px 50px rgba(13, 35, 64, 0.14);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--navy) 0 260px, var(--paper) 260px 100%);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(180deg, var(--navy) 0 58%, #08172b 58% 100%);
}

.login-panel {
  width: min(430px, 100%);
  border: 1px solid rgba(242, 201, 76, 0.48);
  border-radius: 8px;
  padding: 26px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.login-crest {
  width: 96px;
  height: 96px;
  display: block;
  margin: 0 auto 14px;
  border: 3px solid var(--gold);
  border-radius: 50%;
  object-fit: cover;
}

.login-panel h1 {
  margin-bottom: 18px;
  color: var(--navy);
  text-align: center;
}

.login-panel .eyebrow {
  text-align: center;
}

.login-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.login-mode-button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  font-weight: 900;
}

.login-mode-button.active {
  border-color: var(--gold);
  background: var(--gold);
}

.login-form {
  display: grid;
  gap: 12px;
}

.cloud-login-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.admin-login-direct {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 14px;
}

.request-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.request-divider::before,
.request-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.login-message {
  min-height: 22px;
  margin-top: 12px;
  color: var(--red);
  font-weight: 900;
  text-align: center;
}

.cloud-reset-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(242, 201, 76, 0.85);
  border-radius: 8px;
  background: #fff8df;
}

.cloud-reset-panel p {
  margin-bottom: 0;
  color: var(--muted);
  font-weight: 800;
}

.cloud-reset-message {
  min-height: 20px;
  color: var(--navy);
  font-weight: 900;
}

.cloud-reset-message.warning {
  color: var(--red);
}

.cloud-reset-message.ready {
  color: var(--green);
}

button,
input,
select {
  font: inherit;
}

.shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0;
}

.topbar,
.topbar-actions,
.controls,
.date-controls,
.summary-grid,
.main-grid,
.section-heading,
.roster-row,
.row-meta,
.overtime-entry,
.entry-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.topbar {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  color: #fff;
}

.topbar-actions {
  gap: 10px;
}

.brand-heading {
  display: flex;
  align-items: center;
  gap: 16px;
}

.crest {
  width: 82px;
  height: 82px;
  border: 3px solid var(--gold);
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
}

h2 {
  margin-bottom: 0;
  font-size: 1.25rem;
}

.today-card,
.status-panel,
.roster-panel,
.overtime-panel,
.monthly-summary,
.dashboard-panel,
.leave-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.today-card {
  min-width: 185px;
  border-radius: 8px;
  padding: 14px 16px;
  border-color: rgba(242, 201, 76, 0.62);
  color: var(--ink);
}

.today-card span,
.panel-label {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.today-card strong {
  display: block;
  margin-top: 4px;
  font-size: 1.05rem;
}

.session-card {
  min-width: 185px;
  border: 1px solid rgba(242, 201, 76, 0.62);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  color: var(--ink);
}

.session-card span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.session-card strong {
  display: block;
  margin: 3px 0 8px;
  color: var(--navy);
}

.session-card small {
  display: block;
  margin: -2px 0 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.session-card small.cloud-connected {
  color: var(--green);
}

.session-card small.cloud-local {
  color: var(--amber);
}

.session-card .secondary-button {
  width: 100%;
  min-height: 36px;
}

.controls {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
  border: 1px solid rgba(242, 201, 76, 0.34);
  border-radius: 8px;
  padding: 10px;
  background: rgba(13, 35, 64, 0.96);
  box-shadow: 0 12px 28px rgba(13, 35, 64, 0.18);
}

.app-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.app-tab {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  font-weight: 900;
}

.app-tab.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.date-controls {
  justify-content: flex-end;
  gap: 10px;
}

.date-controls label {
  width: 180px;
}

.watch-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 8px;
  width: min(430px, 100%);
}

.watch-tab,
.secondary-button,
.primary-button,
.icon-button,
.view-button,
.set-work-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
}

.watch-tab {
  background: #fff;
  color: var(--ink);
  font-size: 1.25rem;
}

.watch-tab.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.watch-tab[data-watch="A"].active {
  background: var(--watch-a);
  border-color: var(--watch-a);
}

.watch-tab[data-watch="B"].active {
  background: var(--watch-b);
  border-color: var(--watch-b);
}

.watch-tab[data-watch="C"].active {
  background: var(--watch-c);
  border-color: var(--watch-c);
}

.watch-tab[data-watch="D"].active {
  background: var(--watch-d);
  border-color: var(--watch-d);
  color: var(--navy);
}

.secondary-button,
.icon-button,
.view-button,
.set-work-button {
  background: #fff;
  color: var(--blue);
  padding: 0 14px;
}

.view-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  min-width: 150px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.month-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-width: 142px;
}

.month-nav .secondary-button {
  padding: 0 10px;
}

.view-button {
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border-color: transparent;
}

.view-button.active {
  background: var(--blue);
  color: #fff;
}

.set-work-button {
  min-width: 126px;
  font-size: 0.84rem;
}

.primary-button {
  width: 100%;
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  padding: 0 16px;
}

.summary-grid {
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.monthly-summary,
.dashboard-panel,
.account-panel,
.help-panel,
.holidays-panel,
.pay-panel,
.feedback-panel,
.install-panel,
.live-panel,
.admin-panel,
.leave-panel,
.ambo-panel {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 14px;
}

.monthly-summary::before,
.dashboard-panel::before,
.account-panel::before,
.help-panel::before,
.holidays-panel::before,
.pay-panel::before,
.feedback-panel::before,
.install-panel::before,
.live-panel::before,
.admin-panel::before,
.leave-panel::before,
.ambo-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("dfb-crest.jpg") right 24px center / 170px 170px no-repeat;
  opacity: 0.03;
  pointer-events: none;
}

.monthly-summary > *,
.dashboard-panel > *,
.account-panel > *,
.help-panel > *,
.holidays-panel > *,
.pay-panel > *,
.feedback-panel > *,
.install-panel > *,
.live-panel > *,
.admin-panel > *,
.leave-panel > *,
.ambo-panel > * {
  position: relative;
}

.monthly-summary-grid,
.dashboard-grid,
.account-grid,
.help-grid,
.install-grid,
.live-grid,
.admin-grid,
.leave-overview-grid,
.ambo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.monthly-summary-grid article,
.dashboard-grid article,
.account-grid article,
.help-grid article,
.install-grid article,
.live-grid article,
.admin-grid article,
.leave-overview-grid article,
.ambo-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(246, 248, 250, 0.72);
}

.monthly-summary-grid span,
.dashboard-grid span,
.account-grid span,
.help-grid span,
.install-grid span,
.live-grid span,
.admin-grid span,
.leave-overview-grid span,
.ambo-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.monthly-summary-grid strong,
.dashboard-grid strong,
.account-grid strong,
.help-grid strong,
.install-grid strong,
.live-grid strong,
.admin-grid strong,
.leave-overview-grid strong,
.ambo-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--navy);
  font-size: 1.35rem;
}

.account-note {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-left: 5px solid var(--gold);
  border-radius: 8px;
  padding: 12px;
  background: rgba(242, 201, 76, 0.12);
  color: var(--navy);
  font-weight: 800;
  line-height: 1.45;
}

.account-preferences-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  background: #fff;
}

.account-setup-panel {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  background: rgba(246, 248, 250, 0.82);
}

.account-setup-list {
  display: grid;
  gap: 8px;
}

.account-setup-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(13, 35, 64, 0.12);
  border-left: 5px solid var(--gold);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.account-setup-item.ready {
  border-left-color: var(--green);
}

.account-setup-item strong,
.account-setup-item span {
  display: block;
}

.account-setup-item strong {
  color: var(--navy);
  font-size: 0.95rem;
}

.account-setup-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.account-export-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-left: 5px solid var(--navy);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  background: #fff;
}

.account-export-panel strong,
.account-export-panel small {
  display: block;
}

.account-export-panel strong {
  color: var(--navy);
  font-size: 1.05rem;
}

.account-export-panel small {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.ambo-card {
  border-left: 5px solid var(--blue);
}

.ambo-card small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-weight: 800;
}

.ambo-form {
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) minmax(170px, 1fr) minmax(110px, 0.65fr) minmax(120px, 0.65fr) minmax(150px, 0.9fr) minmax(180px, 1fr) minmax(150px, 0.9fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(13, 35, 64, 0.12);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
  background: rgba(246, 248, 250, 0.78);
}

.ambo-list {
  display: grid;
  gap: 8px;
}

.ambo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.ambo-item.shift-night {
  border-left-color: var(--red);
}

.ambo-item strong,
.ambo-item span,
.ambo-item small {
  display: block;
}

.ambo-item span,
.ambo-item small {
  margin-top: 3px;
  color: #111827;
  font-weight: 800;
}

.account-export-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 8px;
}

.import-account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.help-grid article {
  position: relative;
  overflow: hidden;
}

.help-grid span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-size: 1rem;
}

.help-grid small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.4;
}

.support-summary-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
  gap: 12px;
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  background: #fff;
}

.support-summary-panel strong,
.support-summary-panel small {
  display: block;
}

.support-summary-panel strong {
  margin-top: 6px;
  color: var(--navy);
  font-size: 1.2rem;
}

.support-summary-panel small {
  margin-top: 7px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.support-summary-panel textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f6f8fa;
  color: var(--navy);
  font: inherit;
  line-height: 1.4;
}

.install-grid small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.4;
}

.install-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.install-checklist label {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  color: var(--navy);
  font-weight: 850;
}

.install-checklist input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

#installStatus.ready {
  color: var(--green);
}

.install-note {
  border: 1px solid rgba(242, 201, 76, 0.8);
  border-left: 5px solid var(--gold);
  border-radius: 8px;
  padding: 12px;
  background: #fff9df;
}

.install-note strong,
.install-note span {
  display: block;
}

.install-note span {
  margin-top: 5px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.live-grid small,
.live-step small,
.launch-note span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.live-roadmap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.readiness-panel {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: #fff;
}

.release-guard-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.release-guard-panel article {
  border: 1px solid rgba(22, 115, 92, 0.28);
  border-radius: 8px;
  padding: 12px;
  background: #effaf6;
}

.release-guard-panel strong,
.release-guard-panel small {
  display: block;
}

.release-guard-panel strong {
  margin-top: 5px;
  color: var(--navy);
}

.release-guard-panel small {
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.readiness-score {
  display: grid;
  align-content: center;
  gap: 6px;
  border: 1px solid rgba(13, 35, 64, 0.12);
  border-radius: 8px;
  padding: 16px;
  background: #f6f8fa;
}

.readiness-score span,
.readiness-score small {
  color: var(--muted);
  font-weight: 900;
}

.readiness-score strong {
  color: var(--navy);
  font-size: 3rem;
  line-height: 1;
}

.readiness-score strong[data-state="ready"] {
  color: var(--green);
}

.readiness-score strong[data-state="testing"] {
  color: var(--amber);
}

.readiness-score strong[data-state="setup"] {
  color: var(--red);
}

.readiness-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.readiness-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fa;
}

.readiness-list article.ready {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.readiness-list article.pending {
  border-color: rgba(242, 201, 76, 0.85);
  background: #fff9df;
}

.readiness-list strong,
.readiness-list span,
.readiness-list small {
  display: block;
}

.readiness-list strong {
  color: var(--navy);
}

.readiness-list span,
.readiness-list small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.3;
}

.preflight-panel {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: #fff;
}

.preflight-panel .section-heading {
  margin-bottom: 10px;
}

.preflight-panel .section-heading > strong {
  color: var(--navy);
  font-size: 1rem;
}

.preflight-panel .section-heading > strong[data-state="pass"] {
  color: var(--green);
}

.preflight-panel .section-heading > strong[data-state="warn"] {
  color: var(--amber);
}

.preflight-panel .section-heading > strong[data-state="fail"] {
  color: var(--red);
}

.preflight-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.preflight-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fa;
}

.preflight-list article.pass {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.preflight-list article.warn {
  border-color: rgba(242, 201, 76, 0.85);
  background: #fff9df;
}

.preflight-list article.fail {
  border-color: rgba(214, 40, 40, 0.34);
  background: #fff3f3;
}

.preflight-list strong,
.preflight-list span,
.preflight-list small {
  display: block;
}

.preflight-list strong {
  color: var(--navy);
}

.preflight-list span,
.preflight-list small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.3;
}

.backend-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  margin: 12px 0;
  background: #fff;
}

.backend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.backend-grid article {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: #f6f8fa;
}

.backend-grid article.ready {
  border-color: rgba(22, 115, 92, 0.3);
  background: #effaf6;
}

.backend-grid span,
.backend-steps span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.backend-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--navy);
  font-size: 1.2rem;
}

.backend-grid small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.backend-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.backend-steps span {
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff9df;
  color: var(--navy);
}

.backend-launch-guide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.backend-launch-guide article {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 11px;
  background: #f6f8fa;
}

.backend-launch-guide span,
.backend-launch-guide strong,
.backend-launch-guide small {
  display: block;
}

.backend-launch-guide span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.backend-launch-guide strong {
  margin-top: 5px;
  color: var(--navy);
}

.backend-launch-guide small {
  margin-top: 7px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.pilot-plan-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.pilot-plan-panel article {
  border: 1px solid rgba(29, 95, 158, 0.22);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  padding: 11px;
  background: #e9f3ff;
}

.pilot-plan-panel span,
.pilot-plan-panel strong,
.pilot-plan-panel small {
  display: block;
}

.pilot-plan-panel span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.pilot-plan-panel strong {
  margin-top: 5px;
  color: var(--navy);
}

.pilot-plan-panel small {
  margin-top: 7px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.migration-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-left: 5px solid var(--red);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  background: #fff;
}

.migration-panel strong,
.migration-panel small {
  display: block;
}

.migration-panel strong {
  margin-top: 6px;
  color: var(--navy);
  font-size: 1.15rem;
}

.migration-panel small {
  margin-top: 7px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.backend-config-form {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}

.backend-config-actions {
  display: flex;
  gap: 8px;
}

.backend-status {
  margin-top: 10px;
  border: 1px solid rgba(214, 40, 40, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff3f3;
  color: var(--navy);
  font-weight: 800;
}

.backend-status.ready {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.backend-status.testing {
  border-color: rgba(242, 201, 76, 0.85);
  background: #fff9df;
}

.cloud-readiness {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.cloud-readiness article {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 11px;
  background: #f6f8fa;
}

.cloud-readiness span,
.cloud-readiness strong {
  display: block;
}

.cloud-readiness span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.cloud-readiness strong {
  margin-top: 6px;
  color: var(--navy);
  font-size: 1.4rem;
}

.cloud-readiness-note {
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
}

.cloud-live-panel {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: #fff;
}

.cloud-migration-panel {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: #fff;
}

.cloud-login-panel {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: #fff;
}

.cloud-test-user-panel {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: #fff;
}

.cloud-test-user-panel .section-heading {
  margin-bottom: 10px;
}

.cloud-test-user-panel .section-heading > strong {
  color: var(--muted);
  font-size: 1rem;
}

.cloud-test-user-panel .section-heading > strong.ready {
  color: var(--green);
}

.cloud-test-user-panel .section-heading > strong.warning {
  color: var(--red);
}

.cloud-test-user-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.cloud-test-user-result {
  margin-top: 10px;
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f6f8fa;
  color: var(--navy);
  font-weight: 800;
  line-height: 1.35;
}

.cloud-test-user-result.ready {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.cloud-test-user-result.warning {
  border-color: rgba(214, 40, 40, 0.24);
  background: #fff3f3;
}

.cloud-login-panel .section-heading {
  margin-bottom: 10px;
}

.cloud-login-panel .section-heading > strong {
  color: var(--red);
  font-size: 1rem;
}

.cloud-login-panel .section-heading > strong.ready {
  color: var(--green);
}

.cloud-login-panel .secondary-button {
  margin-top: 10px;
}

.cloud-login-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cloud-login-grid article {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fa;
}

.cloud-login-grid article.ready {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.cloud-login-grid article.warn {
  border-color: rgba(242, 201, 76, 0.85);
  background: #fff9df;
}

.cloud-login-grid span,
.cloud-login-grid strong,
.cloud-login-grid small {
  display: block;
}

.cloud-login-grid span,
.cloud-login-grid small {
  color: var(--muted);
  font-weight: 800;
}

.cloud-login-grid strong {
  margin-top: 5px;
  color: var(--navy);
  font-size: 1.15rem;
}

.cloud-login-grid small {
  margin-top: 5px;
  font-size: 0.8rem;
  line-height: 1.3;
}

.cloud-migration-panel .section-heading {
  margin-bottom: 10px;
}

.cloud-migration-panel .section-heading > strong {
  color: var(--green);
  font-size: 1rem;
}

.cloud-migration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cloud-migration-grid article {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fa;
}

.cloud-migration-grid span,
.cloud-migration-grid strong,
.cloud-migration-grid small {
  display: block;
}

.cloud-migration-grid span,
.cloud-migration-grid small {
  color: var(--muted);
  font-weight: 800;
}

.cloud-migration-grid strong {
  margin-top: 5px;
  color: var(--navy);
  font-size: 1.15rem;
}

.cloud-migration-grid small {
  margin-top: 5px;
  font-size: 0.8rem;
  line-height: 1.3;
}

.cloud-live-panel .section-heading {
  margin-bottom: 10px;
}

.cloud-live-panel .section-heading > strong {
  color: var(--red);
  font-size: 1rem;
}

.cloud-live-panel .section-heading > strong.ready {
  color: var(--green);
}

.cloud-live-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cloud-live-grid article {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fa;
}

.cloud-live-grid article.ready {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.cloud-live-grid article.warn {
  border-color: rgba(242, 201, 76, 0.85);
  background: #fff9df;
}

.cloud-live-grid span,
.cloud-live-grid strong,
.cloud-live-grid small {
  display: block;
}

.cloud-live-grid span,
.cloud-live-grid small {
  color: var(--muted);
  font-weight: 800;
}

.cloud-live-grid strong {
  margin-top: 5px;
  color: var(--navy);
  font-size: 1.15rem;
}

.cloud-live-grid small {
  margin-top: 5px;
  font-size: 0.8rem;
  line-height: 1.3;
}

.backup-readiness-panel {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: #fff;
}

.backup-readiness-panel .section-heading {
  margin-bottom: 10px;
}

.backup-readiness-panel .section-heading > strong {
  color: var(--red);
  font-size: 1rem;
}

.backup-readiness-panel .section-heading > strong.ready {
  color: var(--green);
}

.backup-readiness-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.backup-readiness-grid article {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fa;
}

.backup-readiness-grid article.ready {
  border-color: rgba(22, 115, 92, 0.32);
  background: #effaf6;
}

.backup-readiness-grid article.warn {
  border-color: rgba(214, 40, 40, 0.28);
  background: #fff7f7;
}

.backup-readiness-grid span,
.backup-readiness-grid strong,
.backup-readiness-grid small {
  display: block;
}

.backup-readiness-grid span,
.backup-readiness-grid small {
  color: var(--muted);
  font-weight: 800;
}

.backup-readiness-grid strong {
  margin-top: 5px;
  color: var(--navy);
  font-size: 1.15rem;
}

.backup-readiness-grid small {
  margin-top: 5px;
  font-size: 0.8rem;
}

.owner-audit-panel {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: #fff;
}

.owner-audit-panel .section-heading {
  margin-bottom: 10px;
}

.owner-audit-panel .section-heading > strong {
  color: var(--red);
  font-size: 1rem;
}

.owner-audit-panel .section-heading > strong.ready {
  color: var(--green);
}

.owner-audit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.owner-audit-grid article {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fa;
}

.owner-audit-grid article.ready {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.owner-audit-grid article.warn {
  border-color: rgba(242, 201, 76, 0.85);
  background: #fff9df;
}

.owner-audit-grid span,
.owner-audit-grid strong,
.owner-audit-grid small {
  display: block;
}

.owner-audit-grid span,
.owner-audit-grid small {
  color: var(--muted);
  font-weight: 800;
}

.owner-audit-grid strong {
  margin-top: 5px;
  color: var(--navy);
  font-size: 1.15rem;
}

.owner-audit-grid small {
  margin-top: 5px;
  font-size: 0.8rem;
  line-height: 1.3;
}

.mobile-check-panel {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: #fff;
}

.mobile-check-panel .section-heading {
  margin-bottom: 10px;
}

.mobile-check-panel .section-heading > strong {
  color: var(--red);
  font-size: 1rem;
}

.mobile-check-panel .section-heading > strong.ready {
  color: var(--green);
}

.mobile-check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.mobile-check-grid article {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fa;
}

.mobile-check-grid article.ready {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.mobile-check-grid article.warn {
  border-color: rgba(242, 201, 76, 0.85);
  background: #fff9df;
}

.mobile-check-grid span,
.mobile-check-grid strong,
.mobile-check-grid small {
  display: block;
}

.mobile-check-grid span,
.mobile-check-grid small {
  color: var(--muted);
  font-weight: 800;
}

.mobile-check-grid strong {
  margin-top: 5px;
  color: var(--navy);
  font-size: 1.15rem;
}

.mobile-check-grid small {
  margin-top: 5px;
  font-size: 0.8rem;
  line-height: 1.3;
}

.privacy-test-panel {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: #fff;
}

.privacy-test-panel .section-heading {
  margin-bottom: 10px;
}

.privacy-test-panel .section-heading > strong {
  color: var(--navy);
  font-size: 1rem;
}

.privacy-test-panel .section-heading > strong.ready {
  color: var(--green);
}

.privacy-test-panel .section-heading > strong.warning {
  color: var(--red);
}

.privacy-test-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.privacy-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.privacy-proof-grid article {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fa;
}

.privacy-proof-grid span,
.privacy-proof-grid strong,
.privacy-proof-grid small {
  display: block;
}

.privacy-proof-grid span,
.privacy-proof-grid small {
  color: var(--muted);
  font-weight: 800;
}

.privacy-proof-grid strong {
  margin-top: 5px;
  color: var(--navy);
  font-size: 1.15rem;
}

.privacy-proof-grid small {
  margin-top: 5px;
  font-size: 0.8rem;
  line-height: 1.3;
}

.privacy-test-result {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.privacy-test-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f6f8fa;
}

.privacy-test-item.pass {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.privacy-test-item.review {
  border-color: rgba(214, 40, 40, 0.32);
  background: #fff3f3;
}

.privacy-test-item strong,
.privacy-test-item span,
.privacy-test-item small {
  display: block;
}

.privacy-test-item span,
.privacy-test-item small {
  color: var(--muted);
  font-weight: 800;
}

.privacy-test-item > small {
  text-align: right;
}

.feedback-form {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.8fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.feedback-wide {
  grid-column: 1 / -1;
}

.feedback-form textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
}

.feedback-list {
  display: grid;
  gap: 10px;
}

.feedback-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.feedback-item.priority-high {
  border-color: rgba(214, 40, 40, 0.34);
  background: #fff3f3;
}

.feedback-item.priority-medium {
  border-color: rgba(242, 201, 76, 0.86);
  background: #fff9df;
}

.feedback-item.priority-low {
  border-color: rgba(29, 95, 158, 0.24);
  background: #e9f3ff;
}

.feedback-item strong,
.feedback-item span,
.feedback-item small {
  display: block;
}

.feedback-item span,
.feedback-item small {
  color: var(--muted);
  font-weight: 800;
}

.feedback-item > small {
  text-align: right;
}

.launch-checklist-panel {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: #fff;
}

.launch-checklist-panel .section-heading {
  margin-bottom: 10px;
}

.launch-checklist-panel .section-heading > strong {
  color: var(--green);
  font-size: 1rem;
}

.launch-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.launch-checklist label {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fa;
  color: var(--navy);
  font-weight: 850;
}

.launch-checklist input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.release-notes-panel,
.tester-share-panel,
.test-release-panel,
.pilot-signoff-report,
.test-issues-panel {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: #fff;
}

.release-notes-panel {
  border-left: 5px solid var(--gold);
}

.release-notes-panel .section-heading {
  margin-bottom: 10px;
}

.release-notes-panel .section-heading > strong {
  color: var(--navy);
  font-size: 1rem;
}

.release-note-list {
  display: grid;
  gap: 8px;
}

.release-note-item {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f6f8fa;
}

.release-note-item.current {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.release-note-item strong,
.release-note-item span {
  display: block;
}

.release-note-item span {
  margin-top: 5px;
  color: var(--muted);
  font-weight: 800;
}

.release-note-item ul {
  margin: 0;
  padding-left: 18px;
  color: var(--navy);
  font-weight: 800;
  line-height: 1.45;
}

.tester-share-panel {
  border-left: 5px solid var(--blue);
}

.tester-share-panel textarea {
  width: 100%;
  min-height: 170px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f6f8fa;
  color: var(--navy);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
}

.tester-share-form {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}

.tester-share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 230px;
}

.tester-share-actions .primary-button,
.tester-share-actions .secondary-button {
  width: 100%;
}

.tester-checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.tester-checklist-grid article {
  border: 1px solid rgba(29, 95, 158, 0.2);
  border-radius: 8px;
  padding: 10px;
  background: #f4f9ff;
}

.tester-checklist-grid span,
.tester-checklist-grid strong,
.tester-checklist-grid small {
  display: block;
}

.tester-checklist-grid span,
.tester-checklist-grid small {
  color: var(--muted);
  font-weight: 800;
}

.tester-checklist-grid strong {
  margin-top: 4px;
  color: var(--navy);
}

.tester-checklist-grid small {
  margin-top: 5px;
  font-size: 0.82rem;
  line-height: 1.3;
}

.tester-share-panel .section-heading {
  margin-bottom: 10px;
}

.test-release-panel .section-heading,
.test-issues-panel .section-heading {
  margin-bottom: 10px;
}

.pilot-decision-summary {
  margin-bottom: 12px;
}

.pilot-decision-summary article {
  border: 1px solid rgba(242, 201, 76, 0.85);
  border-left: 5px solid var(--gold);
  border-radius: 8px;
  padding: 12px;
  background: #fff9df;
}

.pilot-decision-summary article.ready {
  border-color: rgba(22, 115, 92, 0.35);
  border-left-color: var(--green);
  background: #effaf6;
}

.pilot-decision-summary article.blocked {
  border-color: rgba(214, 40, 40, 0.32);
  border-left-color: var(--red);
  background: #fff3f3;
}

.pilot-decision-summary span,
.pilot-decision-summary strong,
.pilot-decision-summary small {
  display: block;
}

.pilot-decision-summary span,
.pilot-decision-summary small {
  color: var(--muted);
  font-weight: 800;
}

.pilot-decision-summary strong {
  margin-top: 4px;
  color: var(--navy);
  font-size: 1.15rem;
}

.pilot-decision-summary small {
  margin-top: 6px;
  line-height: 1.35;
}

.pilot-coverage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.pilot-signoff-report {
  border-left: 5px solid var(--green);
  margin-bottom: 12px;
}

.pilot-signoff-report .section-heading {
  margin-bottom: 10px;
}

.pilot-report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pilot-report-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fa;
}

.pilot-report-grid article.ready {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.pilot-report-grid article.warn {
  border-color: rgba(242, 201, 76, 0.85);
  background: #fff9df;
}

.pilot-report-grid article.danger {
  border-color: rgba(214, 40, 40, 0.34);
  background: #fff3f3;
}

.pilot-report-grid span,
.pilot-report-grid strong,
.pilot-report-grid small {
  display: block;
}

.pilot-report-grid span,
.pilot-report-grid small {
  color: var(--muted);
  font-weight: 800;
}

.pilot-report-grid strong {
  margin-top: 5px;
  color: var(--navy);
  font-size: 1.2rem;
}

.pilot-report-grid small {
  margin-top: 5px;
  font-size: 0.8rem;
  line-height: 1.3;
}

.pilot-signoff-report textarea {
  width: 100%;
  margin-top: 10px;
  resize: vertical;
  min-height: 130px;
}

.pilot-coverage-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fa;
}

.pilot-coverage-grid article.pass {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.pilot-coverage-grid article.review {
  border-color: rgba(242, 201, 76, 0.85);
  background: #fff9df;
}

.pilot-coverage-grid span,
.pilot-coverage-grid strong,
.pilot-coverage-grid small {
  display: block;
}

.pilot-coverage-grid span,
.pilot-coverage-grid small {
  color: var(--muted);
  font-weight: 800;
}

.pilot-coverage-grid strong {
  margin-top: 4px;
  color: var(--navy);
}

.pilot-coverage-grid small {
  margin-top: 5px;
  font-size: 0.82rem;
  line-height: 1.3;
}

.test-release-panel .section-heading > strong,
.test-issues-panel .section-heading > strong {
  color: var(--navy);
  font-size: 1rem;
}

.test-release-form,
.test-issue-form {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.9fr) auto;
  gap: 10px;
  align-items: end;
}

.test-release-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.test-release-checks {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: rgba(246, 248, 250, 0.76);
}

.test-release-checks legend {
  padding: 0 6px;
  color: var(--muted);
  font-weight: 900;
}

.test-release-checks label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--navy);
  font-weight: 900;
}

.test-release-list,
.test-issue-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.test-issue-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.65fr);
  gap: 10px;
  border: 1px solid rgba(13, 35, 64, 0.12);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  background: rgba(246, 248, 250, 0.78);
}

.test-release-item,
.test-issue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f6f8fa;
}

.test-issue-item.priority-high {
  border-color: rgba(214, 40, 40, 0.35);
  background: #fff3f3;
}

.test-issue-item.priority-medium {
  border-color: rgba(242, 201, 76, 0.85);
  background: #fff9df;
}

.test-issue-item.priority-low {
  border-color: rgba(29, 95, 158, 0.25);
  background: #e9f3ff;
}

.test-issue-item.status-fixed {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.test-issue-actions {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 42px;
  gap: 8px;
  align-items: end;
  min-width: 210px;
}

.test-issue-actions select {
  min-height: 40px;
}

.test-release-item.pass {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.test-release-item.issue-found,
.test-release-item.retest-needed {
  border-color: rgba(242, 201, 76, 0.85);
  background: #fff9df;
}

.test-release-item strong,
.test-release-item span,
.test-release-item small,
.test-issue-item strong,
.test-issue-item span,
.test-issue-item small {
  display: block;
}

.test-release-item span,
.test-release-item small,
.test-issue-item span,
.test-issue-item small {
  color: var(--muted);
  font-weight: 800;
}

.live-step {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.live-step > span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--light);
  color: var(--navy);
  font-weight: 900;
}

.live-step strong {
  display: block;
  margin-top: 10px;
  color: var(--navy);
}

.live-step.complete {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.live-step.complete > span {
  background: var(--green);
  color: #fff;
}

.live-step.active {
  border-color: rgba(242, 201, 76, 0.9);
  background: #fff9df;
}

.live-step.active > span {
  background: var(--gold);
  color: var(--navy);
}

.launch-note {
  border: 1px solid rgba(214, 40, 40, 0.24);
  border-left: 5px solid var(--red);
  border-radius: 8px;
  padding: 14px;
  background: #fff3f3;
}

.launch-note strong {
  display: block;
  color: var(--navy);
}

.admin-grid small,
.admin-card small,
.admin-note span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.admin-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.admin-card,
.admin-note {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.admin-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-card-wide {
  grid-column: 1 / -1;
  align-items: flex-start;
  flex-direction: column;
}

.admin-card strong {
  display: block;
  margin-top: 6px;
  color: var(--navy);
  font-size: 1.2rem;
}

.admin-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.admin-checklist span {
  border: 1px solid rgba(22, 115, 92, 0.28);
  border-radius: 8px;
  padding: 8px 10px;
  background: #effaf6;
  color: var(--green);
  font-weight: 900;
}

.admin-note {
  margin-top: 12px;
  border-color: rgba(242, 201, 76, 0.8);
  background: #fff9df;
}

.admin-summary-panel,
.admin-sync-panel {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 8px;
  padding: 14px;
  margin-top: 14px;
  background: #fff;
}

.admin-summary-panel .section-heading,
.admin-sync-panel .section-heading {
  margin-bottom: 10px;
}

.admin-summary-panel .section-heading > strong,
.admin-sync-panel .section-heading > strong {
  color: var(--navy);
  font-size: 1rem;
}

.admin-summary-panel .section-heading > strong[data-state="ready"],
.admin-sync-panel .section-heading > strong[data-state="ready"] {
  color: var(--green);
}

.admin-summary-panel .section-heading > strong[data-state="warn"],
.admin-sync-panel .section-heading > strong[data-state="warn"] {
  color: var(--amber);
}

.admin-summary-grid,
.admin-sync-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-summary-grid article,
.admin-sync-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fa;
}

.admin-summary-grid article.ready,
.admin-sync-grid article.ready {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.admin-summary-grid article.warn,
.admin-sync-grid article.warn {
  border-color: rgba(242, 201, 76, 0.85);
  background: #fff9df;
}

.admin-summary-grid article.danger,
.admin-sync-grid article.danger {
  border-color: rgba(214, 40, 40, 0.34);
  background: #fff3f3;
}

.admin-summary-grid span,
.admin-summary-grid strong,
.admin-summary-grid small,
.admin-sync-grid span,
.admin-sync-grid strong,
.admin-sync-grid small {
  display: block;
}

.admin-summary-grid span,
.admin-summary-grid small,
.admin-sync-grid span,
.admin-sync-grid small {
  color: var(--muted);
  font-weight: 800;
}

.admin-summary-grid span,
.admin-sync-grid span {
  font-size: 0.8rem;
}

.admin-summary-grid strong,
.admin-sync-grid strong {
  margin-top: 6px;
  color: var(--navy);
  font-size: 1.55rem;
}

.admin-summary-grid small,
.admin-sync-grid small {
  margin-top: 5px;
  font-size: 0.8rem;
  line-height: 1.3;
}

.admin-users,
.admin-activity {
  margin-top: 14px;
}

.admin-users .section-heading > strong {
  color: var(--navy);
  font-size: 1rem;
}

.tester-account-readiness {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.tester-account-readiness article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fa;
}

.tester-account-readiness article.ready {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.tester-account-readiness article.warn {
  border-color: rgba(242, 201, 76, 0.85);
  background: #fff9df;
}

.tester-account-readiness span,
.tester-account-readiness strong,
.tester-account-readiness small {
  display: block;
}

.tester-account-readiness span,
.tester-account-readiness small {
  color: var(--muted);
  font-weight: 800;
}

.tester-account-readiness strong {
  margin-top: 5px;
  color: var(--navy);
  font-size: 1.25rem;
}

.tester-account-readiness small {
  margin-top: 5px;
  font-size: 0.8rem;
  line-height: 1.3;
}

.admin-user-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.65fr);
  gap: 10px;
  border: 1px solid rgba(13, 35, 64, 0.12);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  background: rgba(246, 248, 250, 0.78);
}

.admin-user-list,
.admin-activity-list {
  display: grid;
  gap: 10px;
}

.admin-user-item,
.admin-activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.admin-activity {
  border: 1px solid rgba(13, 35, 64, 0.12);
  border-radius: 8px;
  padding: 14px;
  background: rgba(246, 248, 250, 0.72);
}

.admin-activity .section-heading {
  margin-bottom: 10px;
}

.admin-activity .section-heading > strong {
  color: var(--navy);
  font-size: 1rem;
}

.admin-activity-item {
  border-left: 5px solid var(--gold);
}

.admin-activity-item strong,
.admin-activity-item span,
.admin-activity-item small {
  display: block;
}

.admin-activity-item span,
.admin-activity-item small {
  color: var(--muted);
  font-weight: 800;
}

.admin-activity-item small {
  text-align: right;
}

.admin-user-item.pending {
  border-color: rgba(242, 201, 76, 0.8);
  background: #fff9df;
}

.admin-user-item.approved {
  border-color: rgba(22, 115, 92, 0.3);
  background: #effaf6;
}

.admin-user-item.suspended {
  border-color: rgba(214, 40, 40, 0.3);
  background: #fff3f3;
}

.admin-user-item strong,
.admin-user-item span {
  display: block;
}

.admin-user-item span {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 800;
}

.admin-user-readiness {
  width: fit-content;
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 999px;
  padding: 5px 10px;
  background: #f6f8fa;
  font-size: 0.78rem;
}

.admin-user-readiness.ready {
  border-color: rgba(22, 115, 92, 0.35);
  background: #e7f6ef;
  color: #0f6b55;
}

.admin-user-readiness.warn {
  border-color: rgba(242, 201, 76, 0.9);
  background: #fff5cf;
  color: #7a5900;
}

.admin-user-readiness.danger {
  border-color: rgba(214, 40, 40, 0.35);
  background: #fff0f0;
  color: #b21f1f;
}

.admin-user-meta {
  display: block;
  margin-top: 4px;
  color: var(--navy);
  font-weight: 800;
  line-height: 1.35;
}

.admin-user-records {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.admin-user-records span {
  border: 1px solid rgba(13, 35, 64, 0.14);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-user-invite-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.admin-user-invite-status span {
  border: 1px solid rgba(29, 95, 158, 0.18);
  border-radius: 8px;
  padding: 5px 8px;
  background: rgba(233, 243, 255, 0.74);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-user-key {
  display: inline-block;
  margin-top: 7px;
  border: 1px solid rgba(13, 35, 64, 0.16);
  border-radius: 8px;
  padding: 5px 8px;
  background: #f6f8fa;
  color: var(--navy);
  font-weight: 900;
  line-height: 1.25;
}

.compact-button {
  min-height: 40px;
}

.dashboard-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-columns h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 1rem;
}

.mini-list {
  display: grid;
  gap: 7px;
}

.mini-list div,
.empty-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}

.mini-list span,
.empty-mini {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.mini-list strong {
  color: var(--navy);
}

.monthly-role-list {
  display: grid;
  gap: 10px;
}

.role-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-counts span {
  border: 1px solid #b9d5ef;
  border-radius: 8px;
  padding: 7px 9px;
  background: #e9f3ff;
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 900;
}

.backup-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.import-button {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  color: var(--blue);
  cursor: pointer;
  font-weight: 900;
}

.import-button input {
  display: none;
}

.recent-work {
  display: grid;
  gap: 5px;
}

.recent-work small {
  color: var(--muted);
  font-weight: 800;
}

.saved-on-list {
  margin-top: 12px;
}

.saved-on-heading h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 1rem;
}

.saved-on-items {
  display: grid;
  gap: 8px;
}

.saved-on-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.saved-on-item strong,
.saved-on-item small {
  display: block;
}

.saved-on-item small {
  margin-top: 3px;
  color: var(--blue);
  font-weight: 900;
}

.backup-status {
  margin-top: 12px;
}

.backup-status-card,
.data-health-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.backup-status-card strong,
.data-health-card > div:first-child strong {
  display: block;
  margin-top: 6px;
  color: var(--navy);
  font-size: 1.2rem;
}

.backup-status-card span,
.data-health-card small,
.data-health-dates span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.data-health-card small {
  display: block;
  margin-top: 6px;
  line-height: 1.35;
}

.data-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.data-health-grid article {
  border: 1px solid rgba(13, 35, 64, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.data-health-grid span,
.data-health-grid strong {
  display: block;
}

.data-health-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.data-health-grid strong {
  margin-top: 5px;
  color: var(--navy);
  font-size: 1.35rem;
}

.data-health-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.backup-status-card.good,
.data-health-card.good {
  border-color: rgba(22, 115, 92, 0.35);
  background: #effaf6;
}

.backup-status-card.warning,
.data-health-card.warning {
  border-color: rgba(242, 201, 76, 0.8);
  background: #fff9df;
}

.backup-status-card.neutral,
.data-health-card.neutral {
  background: #fff;
}

.status-panel {
  min-height: 126px;
  border-radius: 8px;
  padding: 18px;
}

.status-panel,
.roster-panel,
.overtime-panel {
  position: relative;
  overflow: hidden;
}

.status-panel::before,
.roster-panel::before,
.overtime-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("dfb-crest.jpg") center / 230px 230px no-repeat;
  opacity: 0.035;
  pointer-events: none;
}

.status-panel > *,
.roster-panel > *,
.overtime-panel > * {
  position: relative;
}

.status-panel p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.status-panel strong {
  display: block;
  margin-top: 14px;
  font-size: 1.55rem;
  line-height: 1.1;
}

.watch-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-top: 10px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-size: 2.35rem;
  font-weight: 900;
}

.watch-mark[data-watch="A"] {
  background: var(--watch-a);
}

.watch-mark[data-watch="B"] {
  background: var(--watch-b);
}

.watch-mark[data-watch="C"] {
  background: var(--watch-c);
}

.watch-mark[data-watch="D"] {
  background: var(--watch-d);
  color: var(--navy);
}

.main-grid {
  align-items: flex-start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
}

.main-grid.month-mode {
  grid-template-columns: 1fr;
}

.roster-panel,
.overtime-panel {
  border-radius: 8px;
  padding: 18px;
}

.section-heading {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.roster-list,
.overtime-list {
  display: grid;
  gap: 10px;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.month-heading {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.month-cell {
  min-height: 142px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}

.month-cell.blank {
  background: transparent;
  border-color: transparent;
}

.month-cell.today {
  border-color: var(--blue);
  box-shadow: inset 0 4px 0 var(--blue);
}

.month-cell-day {
  border-color: rgba(22, 115, 92, 0.3);
  background: #effaf6;
  box-shadow: inset 4px 0 0 var(--green);
}

.month-cell-night {
  border-color: rgba(214, 40, 40, 0.28);
  background: #fff3f3;
  box-shadow: inset 4px 0 0 var(--red);
}

.month-cell-day.today {
  box-shadow: inset 4px 0 0 var(--green), inset 0 4px 0 var(--gold);
}

.month-cell-night.today {
  box-shadow: inset 4px 0 0 var(--red), inset 0 4px 0 var(--gold);
}

.month-cell:not(.blank) {
  cursor: pointer;
}

.month-cell.selected {
  border-color: var(--gold);
  box-shadow: inset 0 4px 0 var(--gold);
}

.month-cell-day.selected {
  box-shadow: inset 4px 0 0 var(--green), inset 0 4px 0 var(--gold);
}

.month-cell-night.selected {
  box-shadow: inset 4px 0 0 var(--red), inset 0 4px 0 var(--gold);
}

.month-date {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}

.month-date strong {
  font-size: 1.1rem;
}

.month-date span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.month-lines {
  display: grid;
  gap: 5px;
}

.month-line {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 800;
}

.month-watch {
  color: var(--muted);
}

.month-shift,
.month-ot {
  border-radius: 6px;
  padding: 3px 5px;
  color: #fff;
  text-align: center;
}

.month-role {
  overflow: hidden;
  color: var(--blue);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.month-ot {
  grid-column: 2 / -1;
  width: fit-content;
  background: var(--amber);
}

.month-detail {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.month-detail-heading {
  margin-bottom: 12px;
}

.month-detail-heading h3 {
  margin: 0;
  font-size: 1.25rem;
}

.month-detail-list {
  display: grid;
  gap: 10px;
}

.month-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.month-detail-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.month-detail-ot {
  display: grid;
  gap: 3px;
  margin-top: 8px;
}

.month-detail-ot span {
  color: var(--amber);
  font-weight: 900;
}

.month-detail-ot small {
  color: var(--muted);
  font-weight: 700;
}

.month-detail-actions {
  display: grid;
  gap: 8px;
  width: min(280px, 100%);
  min-width: 220px;
}

.month-ot-form {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--paper);
}

.month-ot-form label {
  font-size: 0.78rem;
}

.month-ot-form input,
.month-ot-form select {
  min-height: 38px;
  padding: 7px 8px;
}

.month-ot-form label:nth-of-type(2),
.month-ot-form label:nth-of-type(3),
.month-ot-form label:nth-of-type(4),
.month-ot-form .primary-button {
  grid-column: 1 / -1;
}

.roster-row {
  min-height: 82px;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
}

.roster-row.today {
  border-color: var(--blue);
  box-shadow: inset 4px 0 0 var(--blue);
}

.roster-row-day {
  border-color: rgba(22, 115, 92, 0.34);
  background: #effaf6;
  box-shadow: inset 4px 0 0 var(--green);
}

.roster-row-night {
  border-color: rgba(214, 40, 40, 0.34);
  background: #fff3f3;
  box-shadow: inset 4px 0 0 var(--red);
}

.roster-row-day.today {
  border-color: rgba(22, 115, 92, 0.52);
  box-shadow: inset 4px 0 0 var(--green), inset 0 4px 0 var(--gold);
}

.roster-row-night.today {
  border-color: rgba(214, 40, 40, 0.52);
  box-shadow: inset 4px 0 0 var(--red), inset 0 4px 0 var(--gold);
}

.date-stack {
  min-width: 84px;
}

.date-stack strong {
  display: block;
  font-size: 1.15rem;
}

.date-stack span,
.date-stack small,
.shift-detail,
.assignment-line,
.rule-line,
.overtime-entry small {
  color: var(--muted);
  font-weight: 700;
}

.rule-line {
  margin-top: 4px;
  color: var(--red);
}

.holiday-tag,
.pay-tag,
.leave-tag,
.month-holiday,
.month-pay,
.month-leave,
.holiday-detail {
  color: var(--red);
  font-weight: 900;
}

.holiday-tag,
.pay-tag,
.leave-tag {
  display: block;
  margin-top: 5px;
  font-size: 0.75rem;
  line-height: 1.2;
}

.pay-tag,
.month-pay {
  color: var(--navy);
}

.leave-tag.annual,
.month-leave.annual,
.leave-line.annual {
  color: var(--green);
}

.leave-tag.winter,
.month-leave.winter,
.leave-line.winter {
  color: var(--blue);
}

.leave-line {
  margin-top: 4px;
  font-weight: 900;
}

.month-holiday,
.month-pay,
.month-leave {
  margin-bottom: 7px;
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holiday-detail {
  margin-top: 4px;
}

.assignment-line {
  margin-top: 4px;
  color: var(--blue);
}

.shift-badge {
  width: 96px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-weight: 900;
}

.shift-day {
  background: var(--green);
}

.shift-night {
  background: var(--red);
}

.shift-rest {
  background: var(--muted);
}

.shift-off {
  background: #89909a;
}

.row-meta {
  gap: 12px;
}

.overtime-pill {
  min-width: 88px;
  border-radius: 8px;
  background: #fff4df;
  color: var(--amber);
  border: 1px solid #e6c987;
  padding: 8px 10px;
  text-align: center;
  font-weight: 900;
}

.role-pill {
  min-width: 88px;
  border-radius: 8px;
  background: #e9f3ff;
  color: var(--blue);
  border: 1px solid #b9d5ef;
  padding: 8px 10px;
  text-align: center;
  font-weight: 900;
}

.overtime-pill span {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  line-height: 1.2;
}

.overtime-form {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.compact-heading {
  margin-top: 8px;
}

.form-actions {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 8px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

input,
select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
  color: var(--ink);
}

.overtime-entry {
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

input[readonly] {
  background: #eef3f7;
  color: var(--navy);
  font-weight: 900;
}

.overtime-entry strong {
  display: block;
  margin-bottom: 3px;
}

.delete-button {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid #f0c4c8;
  border-radius: 8px;
  background: #fff;
  color: var(--red);
  cursor: pointer;
  font-weight: 900;
}

.edit-button {
  min-width: 54px;
  min-height: 40px;
  border: 1px solid #b9d5ef;
  border-radius: 8px;
  background: #e9f3ff;
  color: var(--blue);
  cursor: pointer;
  font-weight: 900;
}

.entry-actions {
  gap: 8px;
}

.empty-state {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}

.holiday-list {
  display: grid;
  gap: 10px;
}

.holiday-item,
.pay-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.holiday-item strong,
.holiday-item span,
.holiday-item small,
.pay-item strong,
.pay-item span,
.pay-item small {
  display: block;
}

.holiday-item strong {
  color: var(--red);
}

.holiday-item span,
.holiday-item small,
.pay-item span,
.pay-item small {
  color: var(--muted);
  font-weight: 800;
}

.holiday-item small,
.pay-item small {
  text-align: right;
}

.pay-list {
  display: grid;
  gap: 10px;
}

.leave-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.leave-list {
  display: grid;
  gap: 10px;
}

.leave-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.leave-item strong,
.leave-item span {
  display: block;
}

.leave-item.annual strong {
  color: var(--green);
}

.leave-item.winter strong {
  color: var(--blue);
}

.leave-item span {
  color: var(--muted);
  font-weight: 800;
}

.pay-item.today {
  border-color: var(--gold);
  box-shadow: inset 4px 0 0 var(--gold);
}

.pay-item > div:last-child strong {
  color: var(--navy);
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  border: 1px solid rgba(242, 201, 76, 0.42);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(13, 35, 64, 0.96);
  color: #fff;
}

.app-footer strong {
  color: var(--gold);
}

.app-footer span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  font-weight: 700;
}

@media (max-width: 860px) {
  .topbar,
  .date-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .controls {
    align-items: stretch;
    flex-direction: column;
    max-height: calc(100vh - 12px);
    overflow: auto;
  }

  .summary-grid,
  .monthly-summary-grid,
  .dashboard-grid,
  .help-grid,
  .install-grid,
  .live-grid,
  .admin-grid,
  .ambo-grid,
  .admin-columns,
  .live-roadmap,
  .readiness-panel,
  .readiness-list,
  .support-summary-panel,
  .preflight-list,
  .admin-summary-grid,
  .admin-sync-grid,
  .backend-grid,
  .backend-steps,
  .backend-config-form,
  .cloud-test-user-form,
  .cloud-readiness,
  .cloud-login-grid,
  .cloud-migration-grid,
  .cloud-live-grid,
  .owner-audit-grid,
  .mobile-check-grid,
  .data-health-grid,
  .account-preferences-form,
  .ambo-form,
  .admin-user-tools,
  .install-checklist,
  .privacy-test-form,
  .feedback-form,
  .launch-checklist,
  .tester-share-form,
  .tester-checklist-grid,
  .test-release-form,
  .pilot-report-grid,
  .test-issue-form,
  .test-issue-tools,
  .leave-overview-grid,
  .dashboard-columns,
  .leave-form,
  .main-grid {
    grid-template-columns: 1fr;
  }

  .account-setup-item {
    grid-template-columns: 1fr;
  }

  .account-export-panel {
    grid-template-columns: 1fr;
  }

  .account-export-actions {
    grid-template-columns: 1fr;
  }

  .ambo-item {
    align-items: stretch;
    flex-direction: column;
  }

  .watch-tabs {
    width: 100%;
  }

  .secondary-button {
    width: 100%;
  }

  .date-controls label {
    width: 100%;
  }

  .view-toggle {
    width: 100%;
  }

  .month-nav {
    width: 100%;
  }

  .readiness-panel {
    grid-template-columns: 1fr;
  }

  .tester-share-actions {
    min-width: 0;
  }

  .backup-actions,
  .backup-actions .secondary-button,
  .admin-card,
  .import-button {
    width: 100%;
  }

  .app-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .shell {
    width: min(100% - 18px, 1180px);
    padding: 16px 0;
  }

  .brand-heading {
    gap: 10px;
  }

  .topbar {
    align-items: flex-start;
    gap: 10px;
  }

  .controls {
    top: 0;
    margin-left: -2px;
    margin-right: -2px;
    padding: 8px;
  }

  .app-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .app-tab {
    min-height: 40px;
    font-size: 0.86rem;
  }

  .crest {
    width: 62px;
    height: 62px;
    border-width: 2px;
  }

  h1 {
    font-size: 2rem;
  }

  .roster-panel,
  .overtime-panel,
  .status-panel {
    padding: 14px;
  }

  .roster-row,
  .row-meta {
    align-items: stretch;
    flex-direction: column;
  }

  .date-stack {
    min-width: 0;
  }

  .shift-badge,
  .role-pill,
  .set-work-button,
  .overtime-pill {
    width: 100%;
  }

  .form-actions {
    grid-template-columns: 1fr;
  }

  .month-grid {
    grid-template-columns: 1fr;
  }

  .month-heading,
  .month-cell.blank {
    display: none;
  }

  .month-cell {
    min-height: 0;
  }

  .month-detail-row {
    align-items: stretch;
    flex-direction: column;
  }

  .saved-on-item {
    align-items: stretch;
    flex-direction: column;
  }

  .month-detail-actions {
    width: 100%;
    min-width: 0;
  }

  .month-ot-form {
    grid-template-columns: 1fr;
  }

  .month-ot-form label:nth-of-type(2),
  .month-ot-form label:nth-of-type(3),
  .month-ot-form label:nth-of-type(4),
  .month-ot-form .primary-button {
    grid-column: auto;
  }

  .holiday-item,
  .pay-item,
  .leave-item,
  .test-release-item,
  .test-issue-item,
  .admin-activity-item,
  .privacy-test-item,
  .feedback-item,
  .release-note-item {
    align-items: stretch;
    flex-direction: column;
  }

  .release-note-item {
    grid-template-columns: 1fr;
  }

  .test-issue-actions {
    width: 100%;
    min-width: 0;
  }

  .holiday-item small,
  .pay-item small,
  .admin-activity-item small,
  .privacy-test-item > small,
  .feedback-item > small {
    text-align: left;
  }
}

@media print {
  body {
    background: #fff;
  }

  .controls,
  .today-card,
  .backup-actions,
  .overtime-panel,
  .set-work-button,
  .month-ot-form,
  .delete-button,
  .edit-button {
    display: none !important;
  }

  .shell {
    width: 100%;
    padding: 0;
  }

  .topbar {
    color: var(--navy);
  }

  .status-panel,
  .roster-panel,
  .monthly-summary {
    box-shadow: none;
    break-inside: avoid;
  }
}