:root {
  color-scheme: dark;
  --bg: #07101f;
  --surface: rgba(17, 29, 52, 0.86);
  --surface-strong: #14213b;
  --border: rgba(148, 163, 184, 0.18);
  --text: #edf4ff;
  --muted: #9aabc3;
  --primary: #5d73ff;
  --primary-hover: #7185ff;
  --success: #3ddc97;
  --danger: #ff637d;
  --warning: #f7c760;
  --terminal: #030712;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% -10%, rgba(93, 115, 255, 0.26), transparent 34rem),
    radial-gradient(circle at 100% 5%, rgba(45, 212, 191, 0.12), transparent 30rem),
    var(--bg);
  color: var(--text);
}

button, input { font: inherit; }

.topbar {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.65rem, 3vw, 2.35rem); }
h2 { margin-bottom: 8px; font-size: 1.45rem; }

.eyebrow {
  color: #92a2ff;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.muted { color: var(--muted); }
.small { font-size: 0.78rem; }

.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-chip, .counter {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.045);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 0.82rem;
  color: #c9d5e9;
}

.page {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: 48px;
}

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

.status-card, .report-card, .job-banner {
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.status-card {
  min-height: 82px;
  border-radius: 18px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 13px;
}

.status-card .label {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  margin-bottom: 4px;
}

.status-card strong { font-size: 0.94rem; }

.status-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 6px rgba(247, 199, 96, 0.10);
}

.status-icon.ok {
  background: var(--success);
  box-shadow: 0 0 0 6px rgba(61, 220, 151, 0.10);
}

.status-icon.bad {
  background: var(--danger);
  box-shadow: 0 0 0 6px rgba(255, 99, 125, 0.10);
}

.actions-card { justify-content: center; }

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

.report-card {
  min-width: 0;
  border-radius: 24px;
  padding: 26px;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.button {
  border: 0;
  border-radius: 12px;
  padding: 11px 15px;
  cursor: pointer;
  font-weight: 750;
  transition: transform 150ms ease, background 150ms ease, opacity 150ms ease;
}

.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: 0.48; cursor: not-allowed; }

.button.primary {
  color: white;
  background: linear-gradient(135deg, var(--primary), #7c5cff);
  box-shadow: 0 12px 28px rgba(93, 115, 255, 0.24);
}

.button.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary-hover), #8a6cff);
}

.button.ghost {
  color: #d5deed;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
}

.button.danger { color: #ffb5c1; }
.button.subtle { background: rgba(255, 99, 125, 0.08); border: 1px solid rgba(255, 99, 125, 0.18); }
.button.wide { width: 100%; }

.action-button {
  width: 100%;
  margin: 18px 0 24px;
  min-height: 48px;
}

.log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.83rem;
  font-weight: 750;
}

.terminal {
  min-height: 260px;
  max-height: 390px;
  overflow: auto;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 16px;
  background: var(--terminal);
  color: #cfe1ff;
  font: 0.78rem/1.55 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.job-banner {
  margin-top: 18px;
  padding: 18px 22px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.job-banner span { display: block; color: var(--muted); margin-top: 3px; }

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.modal {
  width: min(430px, calc(100% - 28px));
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #101c32;
  color: var(--text);
  padding: 26px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.6);
}

.modal::backdrop {
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(7px);
}

.modal-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 14px;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), #7c5cff);
}

.modal label, .login-form label {
  display: grid;
  gap: 8px;
  color: #dce6f7;
  font-size: 0.86rem;
  font-weight: 700;
}

input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.72);
  color: white;
  padding: 13px 14px;
  outline: none;
}

input:focus {
  border-color: rgba(113, 133, 255, 0.85);
  box-shadow: 0 0 0 4px rgba(93, 115, 255, 0.14);
}

#otp-input {
  text-align: center;
  letter-spacing: 0.35em;
  font-size: 1.35rem;
  font-weight: 800;
}

.modal-actions {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.alert {
  border-radius: 12px;
  padding: 11px 13px;
  margin: 14px 0;
  font-size: 0.84rem;
}

.alert.error {
  color: #ffd7de;
  background: rgba(255, 99, 125, 0.10);
  border: 1px solid rgba(255, 99, 125, 0.22);
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: min(420px, calc(100% - 48px));
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #182743;
  box-shadow: var(--shadow);
}

.toast.error { border-color: rgba(255, 99, 125, 0.35); color: #ffd7de; }

.hidden { display: none !important; }

.login-body { display: grid; place-items: center; padding: 24px; }
.login-shell { width: min(440px, 100%); }
.login-card {
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), #7c5cff);
  font-size: 1.5rem;
  font-weight: 900;
}
.login-form { display: grid; gap: 16px; margin-top: 24px; }

@media (max-width: 900px) {
  .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .topbar, .page { width: min(100% - 28px, 1440px); }
  .topbar { align-items: flex-start; }
  .top-actions { flex-direction: column; align-items: flex-end; }
  .status-grid { grid-template-columns: 1fr; }
  .report-card { padding: 20px; }
  .terminal { min-height: 220px; }
}


.services-panel {
  margin-top: 18px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.services-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.services-heading h2 {
  margin-bottom: 7px;
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  border: 1px solid rgba(61, 220, 151, 0.18);
  border-radius: 999px;
  padding: 8px 12px;
  color: #baf6da;
  background: rgba(61, 220, 151, 0.07);
  font-size: 0.78rem;
  font-weight: 750;
}

.live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.5);
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgba(61, 220, 151, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
}

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

.service-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: rgba(3, 10, 25, 0.38);
}

.loading-service {
  grid-column: 1 / -1;
  min-height: 82px;
}

.service-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 6px rgba(247, 199, 96, 0.08);
}

.service-dot.ok {
  background: var(--success);
  box-shadow: 0 0 0 6px rgba(61, 220, 151, 0.08);
}

.service-dot.bad {
  background: var(--danger);
  box-shadow: 0 0 0 6px rgba(255, 99, 125, 0.08);
}

.service-content {
  min-width: 0;
}

.service-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.service-top strong {
  display: block;
  margin-bottom: 4px;
}

.service-top code {
  color: #7f91ac;
  font: 0.72rem/1.35 "SFMono-Regular", Consolas, monospace;
}

.service-state {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 800;
}

.service-state.ok {
  color: #baf6da;
  background: rgba(61, 220, 151, 0.09);
}

.service-state.bad {
  color: #ffc1cb;
  background: rgba(255, 99, 125, 0.10);
}

.service-description {
  margin: 10px 0 9px;
  color: var(--muted);
  font-size: 0.82rem;
}

.service-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: #8193af;
  font-size: 0.72rem;
}

.service-action {
  white-space: nowrap;
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .services-heading {
    flex-direction: column;
  }

  .service-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .service-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .service-top {
    flex-direction: column;
  }
}


.calendar-panel {
  margin-top: 18px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.calendar-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.calendar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 9px; }
.connection-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  font-size: .78rem;
  font-weight: 800;
}
.connection-chip.ok { color: #baf6da; border-color: rgba(61,220,151,.2); background: rgba(61,220,151,.08); }
.connection-chip.bad { color: #ffc1cb; border-color: rgba(255,99,125,.2); background: rgba(255,99,125,.08); }
.calendar-connect-state {
  min-height: 150px;
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px dashed rgba(148,163,184,.25);
  border-radius: 18px;
  padding: 24px;
  background: rgba(3,10,25,.32);
}
.calendar-connect-state h3 { margin: 0 0 7px; }
.calendar-connect-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: linear-gradient(135deg,#4285f4,#34a853,#fbbc05,#ea4335);
  color: white;
  font-size: 1.4rem;
  font-weight: 900;
}
.calendar-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.next-shift-card, .calendar-stat-card, .month-card, .agenda-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(3,10,25,.38);
}
.next-shift-card { padding: 20px; min-height: 150px; }
.next-shift-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.next-shift-date { display: block; color: #a8b7ce; font-size: .82rem; margin-bottom: 5px; text-transform: capitalize; }
.next-shift-card h3 { margin: 0; font-size: 1.35rem; }
.next-shift-details { color: #a8b7ce; margin: 13px 0; }
.next-shift-time { display: flex; align-items: baseline; gap: 12px; }
.next-shift-time strong { font-size: 1.05rem; }
.countdown-chip { border-radius: 999px; padding: 7px 10px; color: #c9d1ff; background: rgba(93,115,255,.12); font-size: .75rem; font-weight: 800; white-space: nowrap; }
.calendar-stat-card { padding: 18px; display: flex; flex-direction: column; justify-content: center; min-height: 112px; }
.calendar-stat-card .label { color: var(--muted); font-size: .76rem; margin-bottom: 10px; }
.calendar-stat-card strong { font-size: 1.25rem; }
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .9fr); gap: 14px; }
.month-card, .agenda-card { padding: 20px; min-width: 0; }
.month-toolbar, .agenda-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.month-toolbar h3, .agenda-head h3 { margin: 0; text-transform: capitalize; }
.month-buttons { display: flex; gap: 7px; }
.button.compact { padding: 8px 11px; min-width: 38px; }
.weekday-row, .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.weekday-row { color: #7587a3; font-size: .72rem; font-weight: 800; text-align: center; padding-bottom: 7px; }
.month-grid { border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.month-day {
  min-height: 112px;
  min-width: 0;
  padding: 8px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(2,6,23,.36);
}
.month-day.outside { opacity: .38; }
.month-day.today { background: rgba(93,115,255,.08); box-shadow: inset 0 0 0 1px rgba(93,115,255,.35); }
.month-day-number { display: block; color: #9fb0ca; font-size: .75rem; font-weight: 800; margin-bottom: 6px; }
.calendar-event {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  margin: 4px 0 0;
  border: 0;
  border-radius: 7px;
  padding: 5px 6px;
  color: white;
  font-size: .65rem;
  font-weight: 750;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.calendar-event span { opacity: .75; font-size: .58rem; }
.calendar-more { border: 0; background: transparent; color: #92a2ff; padding: 5px 0 0; font-size: .65rem; cursor: pointer; }
.agenda-list { display: grid; gap: 8px; max-height: 610px; overflow: auto; padding-right: 3px; }
.agenda-item {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 10px;
  background: rgba(2,6,23,.42);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.agenda-item:hover { border-color: rgba(113,133,255,.45); }
.agenda-date { width: 43px; height: 47px; display: grid; place-items: center; align-content: center; border-radius: 10px; color: white; }
.agenda-date small { text-transform: uppercase; font-size: .56rem; opacity: .78; }
.agenda-date strong { font-size: 1rem; line-height: 1.05; }
.agenda-content { min-width: 0; display: grid; gap: 3px; }
.agenda-content strong, .agenda-content span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-content span { color: var(--muted); font-size: .72rem; }
.agenda-time { color: #b9c7dc; font-size: .72rem; white-space: nowrap; }
.agenda-empty { padding: 18px 4px; }
.palette-green { background: #138a5b; }
.palette-magenta { background: #b528b6; }
.palette-yellow { background: #a27a0a; }
.palette-gray { background: #59657a; }
.palette-blue { background: #4968d9; }
.palette-coral { background: #b95353; }
.event-modal { overflow: hidden; }
.event-dialog-accent { height: 7px; margin: -26px -26px 22px; }
.event-dialog-time { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
@media (max-width: 1150px) {
  .calendar-summary-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .next-shift-card { grid-column: 1 / -1; }
  .calendar-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .calendar-heading { flex-direction: column; }
  .calendar-actions { justify-content: flex-start; }
  .calendar-summary-grid { grid-template-columns: 1fr; }
  .next-shift-card { grid-column: auto; }
  .month-card { padding: 13px; overflow-x: auto; }
  .weekday-row, .month-grid { min-width: 680px; }
  .agenda-item { grid-template-columns: 44px minmax(0,1fr); }
  .agenda-time { grid-column: 2; }
}


/* Step 1: trustworthy time states */
.calendar-event.time-tba {
  border: 1px dashed rgba(255, 255, 255, .78);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.08) 0,
    rgba(255,255,255,.08) 5px,
    transparent 5px,
    transparent 10px
  );
}

.calendar-event.time-unspecified {
  border: 1px dotted rgba(255, 255, 255, .58);
  filter: saturate(.82);
}

.calendar-event.time-tba span,
.calendar-event.time-unspecified span {
  opacity: 1;
  font-weight: 850;
}

.agenda-time {
  max-width: 135px;
  text-align: right;
}

@media (max-width: 650px) {
  .agenda-time {
    max-width: none;
    text-align: left;
  }
}


/* Step 2: local plan and actual times */
.event-editor-modal {
  width: min(760px, calc(100vw - 28px));
  max-height: min(900px, calc(100vh - 28px));
  overflow: auto;
}

.event-modal-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.manual-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(125, 94, 255, .35);
  border-radius: 999px;
  padding: 7px 10px;
  color: #d8ceff;
  background: rgba(125, 94, 255, .12);
  font-size: .74rem;
  font-weight: 800;
}

.event-current-time,
.sheet-source-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 14px 16px;
  background: rgba(3, 10, 25, .42);
}

.event-current-time strong,
.sheet-source-box strong {
  display: block;
  margin-top: 4px;
}

.sheet-source-box {
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
}

.manual-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.manual-fieldset {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 15px;
  background: rgba(12, 23, 45, .48);
}

.manual-fieldset legend {
  padding: 0 7px;
  font-weight: 850;
}

.time-input-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.time-input-row label,
.event-note-label {
  display: grid;
  gap: 7px;
  color: #c9d4e8;
  font-size: .82rem;
  font-weight: 750;
}

.time-input-row input,
.event-note-label textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px 11px;
  color: var(--text);
  background: rgba(2, 8, 20, .75);
  font: inherit;
}

.event-note-label {
  margin-top: 15px;
}

.event-note-label textarea {
  resize: vertical;
  min-height: 82px;
  line-height: 1.45;
}

.actual-summary {
  margin-top: 11px;
  border-radius: 10px;
  padding: 9px 10px;
  background: rgba(61, 220, 151, .07);
  color: #baf6da;
}

.event-editor-actions {
  flex-wrap: wrap;
}

.calendar-event {
  position: relative;
}

.calendar-event-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-marker {
  margin-left: auto;
  padding-left: 4px;
  color: rgba(255, 255, 255, .96);
  font-size: .75rem;
  font-weight: 900;
}

.calendar-event.has-manual-data {
  outline: 1px solid rgba(255, 255, 255, .34);
  outline-offset: -1px;
}

.agenda-manual-marker {
  color: #a99aff;
  font-size: .72rem;
  font-weight: 850;
}

@media (max-width: 720px) {
  .manual-time-grid {
    grid-template-columns: 1fr;
  }

  .event-modal-heading,
  .event-current-time {
    flex-direction: column;
    align-items: flex-start;
  }

  .time-input-row {
    grid-template-columns: 1fr 1fr;
  }

  .event-editor-actions .button {
    flex: 1 1 100%;
  }
}

@media (max-width: 440px) {
  .time-input-row {
    grid-template-columns: 1fr;
  }
}


/* Step 3: rolling six-month event archive */
.archive-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(125, 94, 255, .25);
  border-radius: 999px;
  padding: 8px 11px;
  color: #d9d1ff;
  background: rgba(125, 94, 255, .09);
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}

.archive-range {
  display: block;
  margin-top: 4px;
}

.calendar-event.archived-event {
  opacity: .58;
  filter: saturate(.62);
  outline: 1px dashed rgba(255, 255, 255, .55);
  outline-offset: -1px;
}

.calendar-event.archived-event:hover {
  opacity: .86;
}

.archive-marker {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  margin-left: 3px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 50%;
  color: #fff;
  font-size: .56rem;
  font-weight: 950;
  line-height: 1;
}

.archive-notice {
  margin-top: 15px;
  border: 1px solid rgba(247, 199, 96, .26);
  border-radius: 14px;
  padding: 13px 14px;
  color: #f6e3ad;
  background: rgba(247, 199, 96, .08);
}

.archive-notice strong,
.archive-notice span {
  display: block;
}

.archive-notice span {
  margin-top: 4px;
  color: #cbbf9f;
  font-size: .8rem;
  line-height: 1.45;
}

.month-buttons .button:disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 720px) {
  .calendar-actions {
    align-items: stretch;
  }

  .archive-chip {
    justify-content: center;
  }
}


/* Step 4: employment status and archive deletion */
.event-heading-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.work-status-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: .74rem;
  font-weight: 850;
  white-space: nowrap;
}

.work-status-fieldset {
  margin-top: 16px;
}

.work-status-label {
  display: grid;
  grid-template-columns: minmax(120px, .35fr) minmax(220px, 1fr);
  align-items: center;
  gap: 12px;
  color: #c9d4e8;
  font-size: .84rem;
  font-weight: 800;
}

.work-status-label select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px 38px 10px 11px;
  color: var(--text);
  background: rgba(2, 8, 20, .75);
  font: inherit;
}

.status-planned {
  color: #d9e1f1;
  background: rgba(148, 163, 184, .09);
}

.status-worked {
  color: #b8f5d8;
  border-color: rgba(61, 220, 151, .3);
  background: rgba(61, 220, 151, .1);
}

.status-not_worked {
  color: #d6dde9;
  border-color: rgba(148, 163, 184, .32);
  background: rgba(148, 163, 184, .1);
}

.status-sick {
  color: #e2d4ff;
  border-color: rgba(168, 127, 255, .32);
  background: rgba(168, 127, 255, .1);
}

.status-cancelled {
  color: #ffc0ca;
  border-color: rgba(255, 100, 128, .34);
  background: rgba(255, 100, 128, .1);
}

.work-status-marker {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  margin-left: 3px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .57rem;
  font-weight: 950;
  line-height: 1;
}

.calendar-event.work-status-not_worked,
.calendar-event.work-status-sick,
.calendar-event.work-status-cancelled {
  opacity: .66;
  filter: saturate(.65);
}

.calendar-event.work-status-not_worked .calendar-event-label,
.calendar-event.work-status-cancelled .calendar-event-label {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.calendar-event.work-status-worked {
  box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .45);
}

.agenda-status-marker {
  font-size: .72rem;
  font-weight: 850;
}

.agenda-status-marker.status-worked {
  color: #7ee6b5;
  background: none;
  border: 0;
}

.agenda-status-marker.status-not_worked {
  color: #aeb8c8;
  background: none;
  border: 0;
}

.agenda-status-marker.status-sick {
  color: #c9adff;
  background: none;
  border: 0;
}

.agenda-status-marker.status-cancelled {
  color: #ff91a5;
  background: none;
  border: 0;
}

#event-archive-delete {
  margin-right: auto;
}

@media (max-width: 720px) {
  .event-heading-badges {
    justify-content: flex-start;
  }

  .work-status-label {
    grid-template-columns: 1fr;
  }

  #event-archive-delete {
    margin-right: 0;
  }
}


/* Step 5: protected StempelUhr weekly-report links */
.weekly-report-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background: rgba(4, 12, 28, .56);
}

.weekly-report-card.available {
  border-color: rgba(61, 220, 151, .28);
  background: rgba(61, 220, 151, .055);
}

.weekly-report-card.missing {
  border-color: rgba(255, 100, 128, .2);
}

.weekly-report-card.pending {
  border-color: rgba(247, 199, 96, .22);
}

.weekly-report-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  color: #ffd5dc;
  background:
    linear-gradient(145deg, rgba(255, 100, 128, .28), rgba(255, 100, 128, .08));
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .05em;
}

.weekly-report-card.available .weekly-report-icon {
  color: #b8f5d8;
  background:
    linear-gradient(145deg, rgba(61, 220, 151, .28), rgba(61, 220, 151, .07));
}

.weekly-report-copy {
  min-width: 0;
}

.weekly-report-copy strong,
.weekly-report-copy span {
  display: block;
}

.weekly-report-copy strong {
  margin: 3px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-button {
  min-width: 108px;
  color: #dff8ed;
  border-color: rgba(61, 220, 151, .3);
  background: rgba(61, 220, 151, .11);
  text-align: center;
  text-decoration: none;
}

.report-button:hover {
  background: rgba(61, 220, 151, .18);
}

@media (max-width: 620px) {
  .weekly-report-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .weekly-report-card .report-button {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* Step 6: automatic StempelUhr PDF analysis */
.stamp-analysis-card {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 15px;
  background: rgba(4, 12, 28, .58);
}

.stamp-analysis-card.found {
  border-color: rgba(61, 220, 151, .28);
  background:
    linear-gradient(
      145deg,
      rgba(61, 220, 151, .075),
      rgba(4, 12, 28, .58)
    );
}

.stamp-analysis-card.error {
  border-color: rgba(255, 100, 128, .28);
}

.stamp-analysis-card.no-entry {
  border-color: rgba(247, 199, 96, .25);
}

.stamp-analysis-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.stamp-analysis-heading strong,
.stamp-analysis-heading span {
  display: block;
}

.stamp-analysis-heading strong {
  margin-top: 4px;
}

.stamp-analysis-badge {
  flex: 0 0 auto;
  border: 1px solid rgba(61, 220, 151, .28);
  border-radius: 999px;
  padding: 6px 9px;
  color: #b8f5d8;
  background: rgba(61, 220, 151, .09);
  font-size: .69rem;
  font-weight: 850;
}

.stamp-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.stamp-metrics > div {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 12px;
  padding: 11px;
  background: rgba(2, 8, 20, .48);
}

.stamp-metrics span,
.stamp-metrics strong {
  display: block;
}

.stamp-metrics span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: .69rem;
}

.stamp-metrics strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .86rem;
}

.stamp-comparison {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 11px;
  border: 1px solid rgba(125, 94, 255, .2);
  border-radius: 12px;
  padding: 11px 12px;
  background: rgba(125, 94, 255, .07);
}

.stamp-comparison span {
  color: var(--muted);
  font-size: .76rem;
}

.stamp-comparison strong {
  color: #ded8ff;
  text-align: right;
}

.stamp-description {
  margin: 12px 0 0;
  border-left: 2px solid rgba(61, 220, 151, .3);
  padding-left: 10px;
  line-height: 1.48;
}

.stamp-warning {
  margin: 12px 0 0;
  border: 1px solid rgba(247, 199, 96, .25);
  border-radius: 11px;
  padding: 10px 11px;
  color: #ead9a9;
  background: rgba(247, 199, 96, .07);
  font-size: .76rem;
  line-height: 1.45;
}

.stamp-analysis-empty {
  margin-top: 13px;
  border-radius: 12px;
  padding: 12px;
  background: rgba(2, 8, 20, .46);
}

.stamp-analysis-empty strong,
.stamp-analysis-empty span {
  display: block;
}

.stamp-analysis-empty span {
  margin-top: 5px;
}

.stamp-marker {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  margin-left: 3px;
  border: 1px solid rgba(184, 245, 216, .8);
  border-radius: 50%;
  color: #b8f5d8;
  background: rgba(2, 18, 13, .32);
  font-size: .55rem;
  font-weight: 950;
  line-height: 1;
}

@media (max-width: 720px) {
  .stamp-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 440px) {
  .stamp-analysis-heading,
  .stamp-comparison {
    flex-direction: column;
    align-items: flex-start;
  }

  .stamp-comparison strong {
    text-align: left;
  }

  .stamp-metrics {
    grid-template-columns: 1fr;
  }
}


/* Step 7: account password management and recovery */
.alert.success {
  color: #c7f7df;
  background: rgba(61, 220, 151, .10);
  border: 1px solid rgba(61, 220, 151, .23);
}

.auth-secondary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  text-align: center;
}

.auth-secondary a {
  color: #aebcff;
  font-size: .85rem;
  font-weight: 750;
  text-decoration: none;
}

.auth-secondary a:hover {
  color: #d8deff;
  text-decoration: underline;
}

.password-modal label + label {
  margin-top: 14px;
}

.password-requirement {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.45;
}

@media (max-width: 600px) {
  #change-password-open {
    width: 100%;
  }

  .top-actions form,
  .top-actions form .button {
    width: 100%;
  }
}


/* Step 8: automatic absence recognition on the protected main page */
.absence-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: .74rem;
  font-weight: 900;
  white-space: nowrap;
}

.absence-notice {
  margin-top: 15px;
  border: 1px solid rgba(125, 94, 255, .25);
  border-radius: 14px;
  padding: 13px 14px;
  color: #dfdbff;
  background: rgba(125, 94, 255, .075);
}

.absence-notice strong,
.absence-notice span {
  display: block;
}

.absence-notice span {
  margin-top: 4px;
  color: #b5b2d3;
  font-size: .8rem;
  line-height: 1.45;
}

.absence-leave {
  color: #a9f0ce;
  border-color: rgba(61, 220, 151, .42);
  background: rgba(61, 220, 151, .12);
}

.absence-leave_requested {
  color: #ffe39b;
  border-color: rgba(247, 199, 96, .42);
  background: rgba(247, 199, 96, .12);
}

.absence-unavailable {
  color: #d3d9e5;
  border-color: rgba(148, 163, 184, .42);
  background: rgba(148, 163, 184, .12);
}

.absence-sick {
  color: #e0c8ff;
  border-color: rgba(168, 127, 255, .42);
  background: rgba(168, 127, 255, .12);
}

.absence-medical_appointment {
  color: #ffc2ce;
  border-color: rgba(255, 100, 128, .42);
  background: rgba(255, 100, 128, .12);
}

.calendar-event.absence-event {
  filter: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.calendar-event.absence-leave {
  background-image: linear-gradient(
    135deg,
    rgba(61, 220, 151, .28),
    rgba(61, 220, 151, .08)
  );
}

.calendar-event.absence-leave_requested {
  background-image: linear-gradient(
    135deg,
    rgba(247, 199, 96, .3),
    rgba(247, 199, 96, .08)
  );
  border-style: dashed;
}

.calendar-event.absence-unavailable {
  background-image: linear-gradient(
    135deg,
    rgba(148, 163, 184, .26),
    rgba(148, 163, 184, .07)
  );
}

.calendar-event.absence-sick {
  background-image: linear-gradient(
    135deg,
    rgba(168, 127, 255, .3),
    rgba(168, 127, 255, .08)
  );
}

.calendar-event.absence-medical_appointment {
  background-image: linear-gradient(
    135deg,
    rgba(255, 100, 128, .3),
    rgba(255, 100, 128, .08)
  );
}

.absence-marker {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  margin-left: 3px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .56rem;
  font-weight: 950;
  line-height: 1;
}

.agenda-absence-marker {
  font-size: .72rem;
  font-weight: 850;
}

.agenda-absence-marker.absence-leave {
  color: #7ee6b5;
  background: none;
  border: 0;
}

.agenda-absence-marker.absence-leave_requested {
  color: #f2cf72;
  background: none;
  border: 0;
}

.agenda-absence-marker.absence-unavailable {
  color: #aeb8c8;
  background: none;
  border: 0;
}

.agenda-absence-marker.absence-sick {
  color: #c9adff;
  background: none;
  border: 0;
}

.agenda-absence-marker.absence-medical_appointment {
  color: #ff9caf;
  background: none;
  border: 0;
}

.manual-time-grid.absence-mode {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 720px) {
  .absence-badge {
    justify-content: center;
  }
}


/* Step 8.1: multi-day absence spans */
.calendar-event.absence-event {
  min-width: 0;
}

.calendar-event.absence-event .calendar-event-label {
  font-weight: 800;
}

@media (max-width: 720px) {
  .calendar-event.absence-event {
    font-size: .68rem;
  }
}


/* Step 8.2: protected roadmap page and footer link */
.site-footer {
  width: min(1180px, calc(100% - 32px));
  margin: 8px auto 28px;
  padding: 16px 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  color: #7f879a;
  font-size: .78rem;
  text-align: center;
}

.site-footer a {
  color: #aeb8d2;
  text-decoration: none;
  transition: color .18s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.roadmap-page {
  display: grid;
  gap: 24px;
}

.roadmap-hero,
.roadmap-section,
.roadmap-note {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .035),
      rgba(255, 255, 255, .012)
    );
  box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
}

.roadmap-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 28px;
}

.roadmap-hero h2 {
  margin: 4px 0 10px;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
}

.roadmap-intro {
  max-width: 760px;
  margin: 0;
  line-height: 1.65;
}

.roadmap-updated {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(135, 154, 255, .28);
  border-radius: 999px;
  padding: 8px 12px;
  color: #c5ceff;
  background: rgba(91, 115, 255, .1);
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}

.roadmap-section {
  padding: 24px;
}

.roadmap-section-heading,
.roadmap-step-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.roadmap-section-heading {
  margin-bottom: 18px;
}

.roadmap-section-heading h2,
.roadmap-step-heading h3 {
  margin: 4px 0 0;
}

.roadmap-count {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 11px;
  color: #aeb9d6;
  background: rgba(255, 255, 255, .055);
  font-size: .74rem;
  font-weight: 800;
}

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

.roadmap-card {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  padding: 18px;
  background: rgba(5, 10, 24, .34);
}

.roadmap-card h3 {
  margin: 12px 0 7px;
  font-size: 1rem;
}

.roadmap-card p,
.roadmap-step p,
.roadmap-step li {
  color: #aeb5c7;
  line-height: 1.55;
}

.roadmap-card p {
  margin: 0;
  font-size: .86rem;
}

.roadmap-done {
  border-color: rgba(61, 220, 151, .15);
  background:
    linear-gradient(
      145deg,
      rgba(61, 220, 151, .065),
      rgba(5, 10, 24, .34)
    );
}

.roadmap-status {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(61, 220, 151, .28);
  border-radius: 999px;
  padding: 5px 8px;
  color: #9ce7c4;
  background: rgba(61, 220, 151, .085);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.roadmap-status-next {
  color: #d8ddff;
  border-color: rgba(104, 126, 255, .42);
  background: rgba(91, 115, 255, .17);
}

.roadmap-status-optional {
  color: #efcb84;
  border-color: rgba(239, 188, 90, .35);
  background: rgba(239, 188, 90, .1);
}

.roadmap-list {
  display: grid;
  gap: 14px;
}

.roadmap-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 17px;
  padding: 18px;
  background: rgba(5, 10, 24, .34);
}

.roadmap-next {
  border-color: rgba(91, 115, 255, .3);
  background:
    linear-gradient(
      145deg,
      rgba(91, 115, 255, .11),
      rgba(5, 10, 24, .36)
    );
}

.roadmap-optional {
  border-color: rgba(239, 188, 90, .18);
}

.roadmap-step-number {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(124, 143, 255, .3);
  border-radius: 14px;
  color: #d5dcff;
  background: rgba(91, 115, 255, .11);
  font-weight: 950;
}

.roadmap-step-content {
  min-width: 0;
}

.roadmap-step p {
  margin: 9px 0 0;
  font-size: .88rem;
}

.roadmap-step ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.roadmap-step li {
  margin: 5px 0;
  font-size: .82rem;
}

.roadmap-note {
  padding: 17px 20px;
  color: #aeb5c7;
  font-size: .84rem;
  line-height: 1.55;
}

.roadmap-note strong {
  color: #eef1ff;
}

.roadmap-bottom-action {
  display: flex;
  justify-content: center;
  padding: 2px 0 4px;
}

@media (max-width: 820px) {
  .roadmap-hero,
  .roadmap-section-heading,
  .roadmap-step-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .roadmap-updated,
  .roadmap-count,
  .roadmap-status {
    align-self: flex-start;
  }

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

@media (max-width: 580px) {
  .site-footer {
    width: min(100% - 22px, 1180px);
    margin-bottom: 18px;
  }

  .roadmap-hero,
  .roadmap-section {
    padding: 18px;
    border-radius: 18px;
  }

  .roadmap-step {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 15px;
  }

  .roadmap-step-number {
    width: 35px;
    height: 35px;
    border-radius: 11px;
  }

  .roadmap-card {
    padding: 15px;
  }
}


/* Step 8.3: protected settings page */
.settings-page {
  display: grid;
  gap: 22px;
}

.settings-hero,
.settings-section,
.settings-reset-card {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .035),
      rgba(255, 255, 255, .012)
    );
  box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
}

.settings-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 28px;
}

.settings-hero h2 {
  margin: 4px 0 10px;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
}

.settings-intro {
  max-width: 760px;
  margin: 0;
  line-height: 1.65;
}

.settings-database-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(61, 220, 151, .26);
  border-radius: 999px;
  padding: 8px 12px;
  color: #a9efcf;
  background: rgba(61, 220, 151, .08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .73rem;
  font-weight: 800;
}

.settings-alert {
  margin: 0;
}

.settings-form {
  display: grid;
  gap: 22px;
}

.settings-section {
  padding: 24px;
}

.settings-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.settings-section-heading h2 {
  margin: 4px 0 0;
}

.settings-section-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(115, 135, 255, .25);
  border-radius: 14px;
  color: #cfd6ff;
  background: rgba(91, 115, 255, .09);
  font-weight: 900;
}

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

.settings-toggle-card,
.settings-field-card {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  padding: 17px;
  background: rgba(5, 10, 24, .34);
}

.settings-toggle-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  cursor: pointer;
}

.settings-field-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 130px);
  align-items: center;
  gap: 18px;
}

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

.settings-toggle-card > span,
.settings-field-card > span {
  min-width: 0;
}

.settings-toggle-card strong,
.settings-toggle-card small,
.settings-field-card strong,
.settings-field-card small {
  display: block;
}

.settings-toggle-card strong,
.settings-field-card strong {
  color: #eef1ff;
  font-size: .91rem;
}

.settings-toggle-card small,
.settings-field-card small {
  margin-top: 6px;
  color: #9fa8bc;
  font-size: .78rem;
  line-height: 1.5;
}

.settings-toggle-card input[type="checkbox"] {
  flex: 0 0 auto;
  appearance: none;
  width: 48px;
  height: 27px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
  position: relative;
  transition:
    background .18s ease,
    border-color .18s ease;
}

.settings-toggle-card input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #c7ccda;
  transition:
    transform .18s ease,
    background .18s ease;
}

.settings-toggle-card input[type="checkbox"]:checked {
  border-color: rgba(91, 115, 255, .72);
  background: rgba(91, 115, 255, .62);
}

.settings-toggle-card input[type="checkbox"]:checked::after {
  transform: translateX(21px);
  background: #ffffff;
}

.settings-toggle-card input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(115, 135, 255, .35);
  outline-offset: 3px;
}

.settings-field-card input[type="number"] {
  width: 100%;
  min-width: 0;
}

.settings-input-suffix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.settings-input-suffix span {
  color: #98a2b7;
  font-size: .75rem;
  font-weight: 800;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.settings-reset-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 24px;
}

.settings-reset-card h2 {
  margin: 4px 0 8px;
  font-size: 1.05rem;
}

.settings-reset-card p {
  max-width: 760px;
  margin-bottom: 0;
}

.settings-meta {
  margin: -6px 0 0;
  color: #777f92;
  font-size: .74rem;
  text-align: center;
}

/* Compact mode selected in /settings/. */
.compact-calendar .month-day {
  min-height: 82px;
  padding: 6px;
}

.compact-calendar .calendar-event {
  padding-top: 4px;
  padding-bottom: 4px;
}

.compact-calendar .calendar-event-label {
  font-size: .68rem;
}

.compact-calendar .calendar-more {
  padding: 3px 5px;
  font-size: .62rem;
}

@media (max-width: 820px) {
  .settings-hero,
  .settings-section-heading,
  .settings-reset-card {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-database-chip,
  .settings-section-icon {
    align-self: flex-start;
  }

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

  .settings-wide {
    grid-column: auto;
  }
}

@media (max-width: 580px) {
  .settings-hero,
  .settings-section {
    padding: 18px;
    border-radius: 18px;
  }

  .settings-field-card {
    grid-template-columns: 1fr;
  }

  .settings-toggle-card,
  .settings-field-card {
    padding: 15px;
  }

  .settings-actions {
    flex-direction: column-reverse;
  }

  .settings-actions .button {
    width: 100%;
  }

  .settings-reset-card {
    padding: 18px;
  }

  .settings-reset-card .button {
    width: 100%;
  }
}


/* Step 8.4: Google Sheets and OAuth management in settings */
.google-settings-section {
  border-color: rgba(80, 145, 255, .18);
  background:
    linear-gradient(
      145deg,
      rgba(66, 133, 244, .07),
      rgba(255, 255, 255, .012)
    );
}

.google-settings-alert {
  margin-bottom: 16px;
}

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

.google-status-card {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 15px;
  padding: 16px;
  background: rgba(5, 10, 24, .34);
}

.google-status-card span,
.google-status-card strong,
.google-status-card small {
  display: block;
}

.google-status-label {
  color: #8792aa;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.google-status-card strong {
  margin-top: 8px;
  color: #eef1ff;
  font-size: .92rem;
  overflow-wrap: anywhere;
}

.google-status-card small {
  margin-top: 6px;
  color: #98a2b7;
  font-size: .76rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.google-state-ok {
  color: #8de6bd !important;
}

.google-state-warning {
  color: #f2cc79 !important;
}

.google-state-error {
  color: #ff9caf !important;
}

.google-state-muted {
  color: #aab2c4 !important;
}

.google-error-box,
.google-guidance {
  margin-top: 14px;
  border-radius: 14px;
  padding: 14px 15px;
}

.google-error-box {
  border: 1px solid rgba(255, 100, 128, .25);
  color: #ffd0d9;
  background: rgba(255, 100, 128, .075);
}

.google-error-box strong,
.google-error-box span {
  display: block;
}

.google-error-box span {
  margin-top: 5px;
  color: #d3aeb7;
  font-size: .78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.google-configuration {
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 15px;
  padding: 4px 16px;
  background: rgba(5, 10, 24, .26);
}

.google-configuration dl {
  margin: 0;
}

.google-configuration dl > div {
  display: grid;
  grid-template-columns: minmax(150px, .65fr) minmax(0, 1.35fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.google-configuration dl > div:last-child {
  border-bottom: 0;
}

.google-configuration dt {
  color: #8993a9;
  font-size: .75rem;
  font-weight: 850;
}

.google-configuration dd {
  min-width: 0;
  margin: 0;
  color: #dce1f2;
  font-size: .79rem;
  overflow-wrap: anywhere;
}

.google-monospace {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.google-guidance {
  border: 1px solid rgba(242, 204, 121, .24);
  color: #efd79f;
  background: rgba(242, 204, 121, .07);
}

.google-guidance strong,
.google-guidance p {
  display: block;
}

.google-guidance p {
  margin: 6px 0 0;
  color: #c4b58f;
  font-size: .8rem;
  line-height: 1.5;
}

.google-action-groups {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.google-action-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  padding: 17px;
  background: rgba(5, 10, 24, .34);
}

.google-action-group > div:first-child {
  min-width: 0;
}

.google-action-group strong,
.google-action-group small {
  display: block;
}

.google-action-group strong {
  color: #eef1ff;
  font-size: .91rem;
}

.google-action-group small {
  max-width: 660px;
  margin-top: 5px;
  color: #99a3b8;
  font-size: .77rem;
  line-height: 1.45;
}

.google-action-danger {
  border-color: rgba(255, 100, 128, .14);
}

.google-action-buttons {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.google-action-buttons form {
  margin: 0;
}

.google-security-note {
  margin: 14px 2px 0;
  color: #777f92;
  font-size: .73rem;
  line-height: 1.45;
}

@media (max-width: 820px) {
  .google-action-group {
    align-items: stretch;
    flex-direction: column;
  }

  .google-action-buttons {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .google-status-grid {
    grid-template-columns: 1fr;
  }

  .google-configuration dl > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .google-action-buttons,
  .google-action-buttons form,
  .google-action-buttons .button {
    width: 100%;
  }
}


/* Step 8.5: SMTP settings */
.smtp-settings-section {
  border-color: rgba(106, 214, 255, .17);
  background:
    linear-gradient(
      145deg,
      rgba(50, 164, 215, .065),
      rgba(255, 255, 255, .012)
    );
}

.smtp-settings-alert {
  margin-bottom: 15px;
}

.smtp-status-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 15px;
  padding: 15px 16px;
  background: rgba(5, 10, 24, .3);
}

.smtp-status-line strong,
.smtp-status-line small {
  display: block;
}

.smtp-status-line small {
  margin-top: 4px;
  color: #98a2b7;
  font-size: .77rem;
  line-height: 1.45;
}

.smtp-status-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .035);
}

.smtp-status-dot.smtp-ok {
  background: #4ed49a;
}

.smtp-status-dot.smtp-warning {
  background: #efbf63;
}

.smtp-password-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.smtp-password-toggle {
  min-width: 84px;
  padding-left: 10px;
  padding-right: 10px;
}

.smtp-settings-form select {
  width: 100%;
  min-width: 0;
}

.smtp-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
}

.smtp-preserve-note {
  color: #7f899e;
  font-size: .75rem;
  line-height: 1.45;
}

.smtp-test-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  padding: 17px;
  background: rgba(5, 10, 24, .34);
}

.smtp-test-row strong,
.smtp-test-row small {
  display: block;
}

.smtp-test-row strong {
  color: #eef1ff;
  font-size: .91rem;
}

.smtp-test-row small {
  margin-top: 5px;
  color: #99a3b8;
  font-size: .77rem;
  line-height: 1.45;
}

.smtp-test-row form {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 820px) {
  .smtp-actions,
  .smtp-test-row {
    align-items: stretch;
    flex-direction: column;
  }

  .smtp-actions .button,
  .smtp-test-row form,
  .smtp-test-row .button {
    width: 100%;
  }
}

@media (max-width: 580px) {
  .smtp-password-field {
    grid-template-columns: 1fr;
  }

  .smtp-password-toggle {
    width: 100%;
  }
}


/* Step 8.6: complete COBRA roadmap */
.roadmap-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.roadmap-overview article {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 18px 20px;
  background:
    linear-gradient(
      145deg,
      rgba(91, 115, 255, .075),
      rgba(5, 10, 24, .35)
    );
}

.roadmap-overview strong,
.roadmap-overview span {
  display: block;
}

.roadmap-overview strong {
  color: #f2f4ff;
  font-size: 1.7rem;
  font-weight: 950;
  line-height: 1;
}

.roadmap-overview span {
  margin-top: 7px;
  color: #a6aec2;
  font-size: .78rem;
  line-height: 1.4;
}

.roadmap-category-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 12px;
  color: #cbd3ec;
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.roadmap-category-heading:first-of-type {
  margin-top: 4px;
}

.roadmap-category-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(121, 139, 255, .28),
    rgba(121, 139, 255, 0)
  );
}

.roadmap-scope-note {
  border-color: rgba(91, 115, 255, .17);
  background:
    linear-gradient(
      145deg,
      rgba(91, 115, 255, .065),
      rgba(255, 255, 255, .012)
    );
}

@media (max-width: 760px) {
  .roadmap-overview {
    grid-template-columns: 1fr;
  }

  .roadmap-overview article {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  .roadmap-overview span {
    margin-top: 0;
  }
}