/* ── Design tokens — Night (default) ────────────────────────────────────────── */
:root, [data-theme="dark"] {
  --bg:            hsl(225, 27%, 15%);
  --bg-card:       hsl(225, 27%, 18%);
  --bg-card-alt:   hsl(225, 27%, 21%);
  --bg-input:      hsl(225, 20%, 21%);
  --border:        hsl(225, 20%, 25%);
  --muted:         hsl(225, 20%, 25%);
  --muted-fg:      hsl(215, 20%, 58%);
  --fg:            hsl(210, 40%, 98%);
  --fg-muted:      hsl(215, 20%, 65%);
  --cyan:          #06b5f4;
  --cyan-d:        #0399ce;
  --cyan-glow:     rgba(6, 181, 244, 0.18);
  --cyan-glow-md:  rgba(6, 181, 244, 0.30);
  --red:           hsl(0, 84%, 62%);
  --amber:         hsl(38, 92%, 55%);
  --emerald:       hsl(155, 80%, 62%);   /* bright green — readable on dark bg */
  --radius:        1rem;
  --nav-h:         68px;
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
}

/* ── Day theme ───────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:            hsl(210, 28%, 96%);
  --bg-card:       hsl(0, 0%, 100%);
  --bg-card-alt:   hsl(210, 20%, 94%);
  --bg-input:      hsl(0, 0%, 98%);
  --border:        hsl(215, 20%, 82%);
  --muted:         hsl(215, 20%, 88%);
  --muted-fg:      hsl(215, 22%, 40%);
  --fg:            hsl(225, 40%, 14%);
  --fg-muted:      hsl(215, 20%, 35%);
  --cyan:          #0284c7;
  --cyan-d:        #0369a1;
  --cyan-glow:     rgba(2, 132, 199, 0.10);
  --cyan-glow-md:  rgba(2, 132, 199, 0.20);
  --red:           hsl(0, 72%, 46%);
  --amber:         hsl(35, 85%, 40%);
  --emerald:       hsl(155, 65%, 30%);   /* darker — readable on white bg */
  --radius:        1rem;
  --nav-h:         68px;
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
}

/* ── Auto theme: follow system preference ────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg:            hsl(210, 28%, 96%);
    --bg-card:       hsl(0, 0%, 100%);
    --bg-card-alt:   hsl(210, 20%, 94%);
    --bg-input:      hsl(0, 0%, 98%);
    --border:        hsl(215, 20%, 82%);
    --muted:         hsl(215, 20%, 88%);
    --muted-fg:      hsl(215, 22%, 40%);
    --fg:            hsl(225, 40%, 14%);
    --fg-muted:      hsl(215, 20%, 35%);
    --cyan:          #0284c7;
    --cyan-d:        #0369a1;
    --cyan-glow:     rgba(2, 132, 199, 0.10);
    --cyan-glow-md:  rgba(2, 132, 199, 0.20);
    --red:           hsl(0, 72%, 46%);
    --amber:         hsl(35, 85%, 40%);
    --emerald:       hsl(155, 65%, 30%);
  }
}

/* ── Reset ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ── App shell ───────────────────────────────────────────────────────────────── */
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom));
}

/* ── Page headers ────────────────────────────────────────────────────────────── */
.page-header {
  padding: 56px 20px 24px;
  background: var(--bg);
}
.page-header--accent {
  background: var(--bg);
}
.page-header__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 4px;
}
.page-header__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--fg);
}
.page-header__subtitle {
  font-size: 11px;
  color: var(--muted-fg);
  margin-top: 4px;
}
.page-header__back {
  display: flex;
  align-items: center;
  gap: 12px;
}
.back-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-muted);
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.back-btn:hover { background: var(--muted); color: var(--fg); }

/* ── Page content ────────────────────────────────────────────────────────────── */
.page-content {
  padding: 0 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Cards ───────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px;
}
.card--link {
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  display: block;
}
.card--link:hover  { border-color: var(--cyan); background: var(--bg-card-alt); }
.card--link:active { transform: scale(.98); }

/* Add shift FAB in header */
.page-header__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.add-shift-fab {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cyan);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 4px 16px rgba(6,181,244,.35);
  transition: background .15s, transform .1s, box-shadow .15s;
  align-self: flex-end;
  margin-bottom: 4px;
}
.add-shift-fab:hover  { background: #0ca8e0; box-shadow: 0 6px 20px rgba(6,181,244,.45); }
.add-shift-fab:active { transform: scale(.93); }

/* ── THIS WEEK – the prominent card ─────────────────────────────────────────── */
.card--week {
  border-radius: var(--radius);
  border: 1px solid var(--emerald);
  background: var(--bg-card);
  box-shadow: 0 0 24px rgba(16,185,129,.18);
  padding: 20px 20px 16px;
  position: relative;
  overflow: hidden;
  transition: border-color .4s ease, box-shadow .4s ease;
}
/* Colour variants for status */
.card--week.s-green  { border-color: var(--emerald); box-shadow: 0 0 24px rgba(16,185,129,.18); }
.card--week.s-amber  { border-color: var(--amber);   box-shadow: 0 0 24px rgba(245,158,11,.22); }
.card--week.s-orange { border-color: #f97316;        box-shadow: 0 0 24px rgba(249,115,22,.22); }
.card--week.s-red    { border-color: var(--red);     box-shadow: 0 0 28px rgba(239,68,68,.28); }

.wc-top   { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.wc-eye   { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--cyan); margin-bottom: 2px; }
.wc-range { font-size: 12px; color: var(--muted-fg); }
.wc-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--muted); color: var(--fg-muted); white-space: nowrap; }
.wc-total { font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--fg); margin-bottom: 4px; }
.wc-meta  { font-size: 12px; color: var(--muted-fg); margin-bottom: 16px; }
.wc-bar-bg   { height: 6px; border-radius: 99px; background: var(--muted); overflow: hidden; margin-bottom: 5px; }
.wc-bar-fill { height: 100%; border-radius: 99px; background: var(--cyan); transition: width .7s cubic-bezier(.4,0,.2,1); }
.card--week.s-green  .wc-eye  { color: var(--emerald); }
.card--week.s-green  .wc-bar-fill  { background: var(--emerald); }
.card--week.s-amber  .wc-eye  { color: var(--amber); }
.card--week.s-amber  .wc-bar-fill  { background: var(--amber); }
.card--week.s-orange .wc-eye  { color: #f97316; }
.card--week.s-orange .wc-bar-fill  { background: #f97316; }
.card--week.s-red    .wc-eye  { color: var(--red); }
.card--week.s-red    .wc-bar-fill  { background: var(--red); }
.wc-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-fg); }

/* ── Last shift card ─────────────────────────────────────────────────────────── */
.ls-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ls-eye  { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 6px; }
.ls-date { font-size: 12px; font-weight: 500; color: var(--muted-fg); margin-bottom: 3px; }
.ls-time { font-size: 20px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.ls-meta { font-size: 12px; color: var(--muted-fg); margin-top: 4px; }
.ls-wt-lbl { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 2px; text-align: right; }
.ls-wt { font-size: 26px; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; text-align: right; }

/* ── Shift card row ──────────────────────────────────────────────────────────── */
.sc-wrap  { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sc-date  { font-size: 12px; font-weight: 500; color: var(--muted-fg); margin-bottom: 3px; }
.sc-times { font-size: 18px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.sc-arrow { color: var(--muted-fg); }
.sc-meta  { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sc-pill  { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted-fg); }
.sc-dot   { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.sc-wt-lbl { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 2px; text-align: right; }
.sc-wt    { font-size: 20px; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; }

/* ── Average card ────────────────────────────────────────────────────────────── */
.avg-eye       { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 10px; }
.avg-row       { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.avg-total     { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); }
.avg-total.over { color: var(--red); }
.avg-unit      { font-size: 13px; font-weight: 500; color: var(--muted-fg); margin-left: 4px; }
.avg-limit-lbl { font-size: 11px; color: var(--muted-fg); text-align: right; }
.avg-limit-val { font-size: 13px; font-weight: 600; color: var(--fg-muted); }
.avg-bar-bg    { height: 6px; border-radius: 99px; background: var(--muted); overflow: hidden; margin-bottom: 4px; }
.avg-bar-fill  { height: 100%; border-radius: 99px; transition: width .7s cubic-bezier(.4,0,.2,1); }
.avg-pct       { font-size: 11px; color: var(--muted-fg); text-align: right; }

/* ── History rows ────────────────────────────────────────────────────────────── */
.hr-wrap   { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hr-week   { font-size: 14px; font-weight: 600; color: var(--fg); transition: color .15s; }
.card--link:hover .hr-week { color: var(--cyan); }
.hr-shifts { font-size: 12px; color: var(--muted-fg); margin-top: 2px; }
.hr-right  { display: flex; align-items: center; gap: 8px; }
.hr-total  { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hr-total.ok   { color: var(--fg); }
.hr-total.high { color: var(--amber); }
.hr-total.over { color: var(--red); }
.hr-chevron { color: var(--muted-fg); transition: color .15s; flex-shrink: 0; }
.card--link:hover .hr-chevron { color: var(--cyan); }

/* ── Section eyebrow ─────────────────────────────────────────────────────────── */
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-fg);
  padding: 0 2px; margin-top: 6px;
}

/* ── Skeleton ────────────────────────────────────────────────────────────────── */
.skeleton {
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-alt) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Empty / Error ───────────────────────────────────────────────────────────── */
.empty-state {
  background: var(--bg-card);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 36px 20px;
  text-align: center;
  color: var(--muted-fg);
  font-size: 13px;
  line-height: 1.7;
}
.error-state {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.35);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
  color: #fca5a5;
}

/* ── Info card ───────────────────────────────────────────────────────────────── */
.info-card {
  background: rgba(6,181,244,.08);
  border: 1px solid rgba(6,181,244,.25);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; gap: 12px;
}
.info-card__icon  { color: var(--cyan); flex-shrink: 0; margin-top: 1px; }
.info-card__title { font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.info-card__text  { font-size: 12px; color: var(--muted-fg); line-height: 1.65; }

/* ── Settings ────────────────────────────────────────────────────────────────── */
.settings-card h2 { font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: 6px; }
.settings-card p  { font-size: 13px; color: var(--muted-fg); line-height: 1.65; margin-bottom: 16px; }

/* ── Theme picker (Appearance settings) ─────────────────────────────────────── */
.theme-picker {
  display: flex;
  gap: 8px;
}
.theme-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border: 1.5px solid var(--border);
  border-radius: .75rem;
  background: var(--bg-card-alt);
  color: var(--muted-fg);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  font-family: inherit;
  letter-spacing: .02em;
}
.theme-btn__icon { font-size: 22px; line-height: 1; }
.theme-btn:hover { border-color: var(--cyan); color: var(--fg); }
.theme-btn--active {
  border-color: var(--cyan);
  background: var(--cyan-glow);
  color: var(--cyan);
}

.about-dl {}
.about-row { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.about-row:last-child { border-bottom: none; }
.about-row dt { color: var(--muted-fg); }
.about-row dd { font-weight: 600; color: var(--fg); text-align: right; }

/* ── Forms ───────────────────────────────────────────────────────────────────── */
.form-group + .form-group { margin-top: 14px; }
.form-row .form-group + .form-group { margin-top: 0; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted-fg); margin-bottom: 7px; letter-spacing: .03em; text-transform: uppercase; }
.form-label .hint { font-weight: 400; color: var(--muted-fg); text-transform: none; letter-spacing: 0; }
.form-input {
  width: 100%;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: .75rem;
  padding: 12px 16px;
  font-size: 16px; font-weight: 600; font-family: inherit;
  color: var(--fg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  caret-color: var(--cyan);
}
.form-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-glow); }
.form-input::placeholder { font-weight: 400; color: var(--muted-fg); }
.form-input--center { text-align: center; letter-spacing: .06em; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input-wrap { position: relative; }
.input-suffix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 500; color: var(--muted-fg); pointer-events: none;
}

/* ── Date input wrap (shared by native + flatpickr) ──────────────────────────── */
.date-input-wrap { position: relative; display: block; }
.date-input-wrap .date-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--cyan); pointer-events: none;
}
/* flatpickr-input inherits .form-input; make it look like our inputs */
.flatpickr-input { cursor: pointer; }
.flatpickr-input[readonly] { opacity: 1; }

/* ── Flatpickr dark theme ─────────────────────────────────────────────────────── */
.flatpickr-calendar {
  background: hsl(225, 27%, 18%);
  border: 1px solid hsl(225, 20%, 25%);
  border-radius: 1.1rem;
  box-shadow: 0 12px 48px rgba(0,0,0,.65);
  font-family: 'Poppins', system-ui, sans-serif;
  z-index: 9999;
  padding: 4px 4px 10px;
  width: 308px;
}
/* hide the arrow pointing to the input */
.flatpickr-calendar::before,
.flatpickr-calendar::after { display: none; }

.flatpickr-months { padding: 4px 4px 0; align-items: center; }
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: hsl(210, 40%, 98%);
  height: 44px;
  border-radius: .75rem;
}
.flatpickr-current-month {
  font-size: 14px; font-weight: 700;
  padding-top: 10px;
  color: hsl(210, 40%, 98%);
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: hsl(225, 27%, 18%);
  color: hsl(210, 40%, 98%);
  font-weight: 600;
  border: none; outline: none;
  -webkit-appearance: none; appearance: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: hsl(225, 27%, 22%);
}
.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: hsl(225, 27%, 18%);
}
.flatpickr-current-month input.cur-year {
  color: hsl(210, 40%, 98%); font-weight: 700; font-family: inherit;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: hsl(215, 20%, 58%);
  fill: hsl(215, 20%, 58%);
  padding: 8px 10px;
  top: 6px;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { color: #06b5f4; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #06b5f4; }

.flatpickr-weekdaycontainer { padding: 0 2px; }
span.flatpickr-weekday {
  background: transparent;
  color: hsl(215, 20%, 50%);
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
}

.dayContainer { padding: 2px; gap: 1px; }
.flatpickr-days .dayContainer { min-width: 100%; max-width: 100%; width: 100%; }
.flatpickr-day {
  color: hsl(210, 40%, 92%);
  border: none;
  border-radius: .65rem;
  font-size: 13px; font-weight: 500;
  font-family: 'Poppins', system-ui, sans-serif;
  height: 36px; line-height: 36px;
  max-width: 36px;
  margin: 1px;
  flex-basis: calc(14.2857% - 2px);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(6,181,244,.15);
  border-color: transparent;
  color: #06b5f4;
}
.flatpickr-day.today {
  border: 2px solid #06b5f4;
  color: #06b5f4;
  font-weight: 700;
}
.flatpickr-day.today:hover {
  background: rgba(6,181,244,.15);
  color: #06b5f4;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: #06b5f4;
  border-color: #06b5f4;
  color: hsl(225, 27%, 12%);
  font-weight: 700;
  box-shadow: 0 2px 14px rgba(6,181,244,.45);
}
.flatpickr-day.today.selected { border-color: #06b5f4; }
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: hsl(225, 20%, 38%); }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: hsl(225, 20%, 32%);
  cursor: default;
}
.numInputWrapper span.arrowUp,
.numInputWrapper span.arrowDown { border-color: hsl(225, 20%, 25%); }
.numInputWrapper span.arrowUp::after { border-bottom-color: hsl(215, 20%, 58%); }
.numInputWrapper span.arrowDown::after { border-top-color: hsl(215, 20%, 58%); }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 20px;
  border-radius: .75rem;
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; border: none;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  user-select: none;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary {
  background: var(--cyan); color: #fff;
  box-shadow: 0 4px 18px var(--cyan-glow-md);
}
.btn--primary:hover:not(:disabled) { opacity: .88; }
.btn--secondary {
  background: var(--bg-card-alt); color: var(--fg-muted);
  border: 1.5px solid var(--border);
}
.btn--secondary:hover:not(:disabled) { border-color: var(--muted-fg); color: var(--fg); }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* ── Working time preview ────────────────────────────────────────────────────── */
.wt-preview {
  background: rgba(6,181,244,.08);
  border: 1px solid rgba(6,181,244,.25);
  border-radius: .75rem;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.wt-preview__label { font-size: 13px; font-weight: 600; color: var(--muted-fg); }
.wt-preview__val   { font-size: 20px; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; }

/* ── Banners ─────────────────────────────────────────────────────────────────── */
.banner { border-radius: .75rem; padding: 12px 16px; font-size: 13px; }
.banner--error   { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; }
.banner--success { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: #6ee7b7; display: flex; align-items: center; gap: 8px; font-weight: 500; }

/* ── Modal ───────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-card {
  width: 90%; max-width: 640px;
  background: var(--bg-card);
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 48px rgba(0,0,0,.6);
  overflow: hidden;
}
.modal-header {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header h2 { font-size: 17px; font-weight: 700; color: var(--fg); }
.modal-close {
  background: var(--muted); border: none; border-radius: 50%;
  width: 30px; height: 30px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-fg);
  transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--bg-card-alt); color: var(--fg); }
.modal-body { padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 14px; max-height: 82dvh; overflow-y: auto; }

/* ── Shift card list (week detail + home 'other shifts') ─────────────────────── */
.shift-chip-list {
  display: flex;
  flex-direction: column;
  gap: 0;           /* gaps handled by the pill margins */
}
/* Each .shift-chip uses card + card--link + card--week-earn for cyan border & hover */

/* ── Gap row between consecutive shifts ───────────────────────────────────────── */

/* Outer wrapper — stretches to full width; timeline lines self-centre */
.shift-gap-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* The thin vertical connector line drawn above/below the gap row */
.shift-timeline-line {
  display: block;
  width: 1.5px;
  height: 10px;
  background: var(--border);
  flex-shrink: 0;
  align-self: center;  /* stay centred even though parent is stretch */
}

/* Base gap row — used only by next-rest pill (flex, centred) */
.shift-gap-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
}

/* Between-shift variant — 3-column grid so badge sits right */
/* Columns: [left spacer] [pill centred on the timeline] [badge right-aligned] */
.shift-gap-row--between {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
}
.shift-gap-row--between .shift-gap-pill {
  grid-column: 2;
  justify-self: center;
}
.shift-gap-row--between .rest-badge {
  grid-column: 3;
  justify-self: end;
  margin-right: 16px;  /* matches shift card inner padding — aligns with duration text */
}

/* ── Gap duration pill — matches shift card style & theme ───────────────────── */
.shift-gap-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted-fg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: .45rem;
  padding: 3px 12px;
  letter-spacing: .03em;
  pointer-events: none;
  user-select: none;
}

/* ── Rest type badges — small rounded rectangles (matches shift card shape) ───── */
.rest-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: .35rem;
  pointer-events: none;
  user-select: none;
}
/* Badge colours use CSS vars so they respond to theme changes */
.rest-badge--standard { color: var(--emerald);  background: rgba(16,185,129,.13); border: 1px solid rgba(16,185,129,.35); }
.rest-badge--reduced  { color: var(--amber);    background: rgba(245,158,11,.13); border: 1px solid rgba(245,158,11,.35); }
.rest-badge--split    { color: var(--cyan);      background: rgba(6,181,244,.13);  border: 1px solid rgba(6,181,244,.35);  }
.rest-badge--warn     { color: var(--red);       background: rgba(239,68,68,.13);  border: 1px solid rgba(239,68,68,.35);  }
/* Light-theme overrides: slightly richer badge backgrounds for contrast on white */
[data-theme="light"] .rest-badge--standard,
@media (prefers-color-scheme: light) { [data-theme="auto"] .rest-badge--standard }
{ background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.30); }
[data-theme="light"] .rest-badge--reduced,
@media (prefers-color-scheme: light) { [data-theme="auto"] .rest-badge--reduced }
{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.30); }

/* \"Next rest\" pill sits after the last shift with a bit more breathing room */
.shift-gap-row--next-rest { margin-top: 0; padding-bottom: 4px; }
.shift-gap-row--next-rest .rest-badge { font-size: 11px; padding: 4px 12px; }

/* ── Weekly rest card (bottom of shift list, after 6 consecutive shifts) ─────── */
.weekly-next-rest-card {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  border-radius: var(--radius);        /* 1rem — matches shift cards exactly */
  border: 1px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
  box-sizing: border-box;
}
/* Warn variant — red tint */
.weekly-next-rest-card--warn {
  background: rgba(239,68,68,.07);
  border-color: rgba(239,68,68,.35);
}
/* Standard variant — green tint */
.weekly-next-rest-card--standard {
  background: rgba(16,185,129,.07);
  border-color: rgba(16,185,129,.35);
}
/* Info button inside the card */
.weekly-next-rest-card .wkr-info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: transparent;
  width: auto;
  height: auto;
  min-height: 52px;
  padding: 0 16px;
  align-self: stretch;
  color: var(--muted-fg);
}
.weekly-next-rest-card--warn .wkr-info-btn { color: var(--red); }
.weekly-next-rest-card--standard .wkr-info-btn { color: var(--emerald); }
.weekly-next-rest-card .wkr-info-btn:hover {
  background: rgba(255,255,255,.06);
}
/* Thin vertical divider between i button and text */
.wnrc-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  flex-shrink: 0;
}
.weekly-next-rest-card--warn .wnrc-divider { background: rgba(239,68,68,.3); }
.weekly-next-rest-card--standard .wnrc-divider { background: rgba(16,185,129,.3); }
/* Text area */
.wnrc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
}
.wnrc-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.weekly-next-rest-card--warn     .wnrc-eyebrow { color: var(--red); }
.weekly-next-rest-card--standard .wnrc-eyebrow { color: var(--emerald); }
.wnrc-text {
  font-size: 12px;
  color: var(--fg);
  line-height: 1.55;
  margin: 0;
}
.wnrc-text strong { font-weight: 600; }

/* ── Weekly rest info button — italic 'i' in rounded square ─────────────────── */

.wkr-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: .45rem;
  background: var(--bg-card);
  color: var(--muted-fg);
  font-size: 14px;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  flex-shrink: 0;
  user-select: none;
}
.wkr-info-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--cyan-glow);
}

/* ── Weekly rest info modal — rule cards ─────────────────────────────────────── */
.wkr-rule {
  padding: 10px 12px;
  border-radius: .5rem;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
}
.wkr-rule__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 5px;
}
.wkr-rule__body {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.65;
}
.wkr-rule__body strong { color: var(--fg); font-weight: 600; }
.wkr-rule--note {
  background: transparent;
  border-color: transparent;
  padding: 2px 4px;
}
.wkr-rule--note .wkr-rule__body { font-size: 11px; color: var(--muted-fg); font-style: italic; }

/* ── Weekly rest card (shown above the first shift of the week) ────────────── */
/* ── Weekly rest card — solid coloured card above first shift ─────────────── */
.weekly-rest-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 8px;
  border-radius: .75rem;
  overflow: hidden;
}
/* Standard ≥ 45h — bright green */
.weekly-rest-card--standard {
  background: hsl(155, 62%, 36%);
}
/* Reduced 24–45h — bright orange */
.weekly-rest-card--reduced {
  background: hsl(32, 78%, 44%);
}
/* Insufficient < 24h — dark red + bright red border */
.weekly-rest-card--short {
  background: hsl(0, 55%, 24%);
  border: 2px solid hsl(0, 80%, 56%);
}

/* Duration pill — white text, white dashed border */
.wrc-pill {
  display: inline-block;
  color: #fff;
  border: 1.5px dashed rgba(255,255,255,.65);
  background: rgba(255,255,255,.1);
  border-radius: 99px;
  padding: 3px 13px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* Rest type label */
.wrc-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}

.wrc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Payback / warning line */
.wrc-payback {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
  margin: 0;
}
.wrc-payback strong { color: #fff; }
/* Info-style line (✓ permitted) — slightly softer than warning lines */
.wrc-payback--info { color: rgba(255,255,255,.85); }




/* ── Next Shift Modal (nsm-*) ─────────────────────────────────────────────────── */
.nsm-shift-ref {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}
.nsm-shift-ref__label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-fg); }
.nsm-shift-ref__val   { font-size: 13px; color: var(--fg); font-weight: 500; }

.nsm-earliest {
  text-align: center;
  padding: 18px 0 14px;
}
.nsm-earliest__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-fg);
  margin-bottom: 4px;
}
.nsm-earliest__time {
  font-size: 52px;
  font-weight: 800;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.nsm-earliest__date {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin-top: 2px;
}
.nsm-rest-label {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 99px;
}
.nsm-rest--standard { color: hsl(160,84%,39%); background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); }
.nsm-rest--reduced  { color: hsl(38,92%,50%);  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3); }
.nsm-rest--split    { color: var(--cyan);       background: rgba(6,181,244,.12);  border: 1px solid rgba(6,181,244,.3); }

.nsm-split-hint {
  font-size: 11px;
  color: var(--muted-fg);
  margin: 6px 0 0;
  line-height: 1.5;
}

/* Explanatory note below the rest-type badge */
.nsm-rest-note {
  font-size: 11px;
  color: var(--muted-fg);
  text-align: center;
  margin: 6px 0 0;
  line-height: 1.5;
}

/* Info box shown for 15-hour shifts (replaces split rest checkbox) */
.nsm-ext-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(6,181,244,.07);
  border: 1px solid rgba(6,181,244,.2);
  border-radius: .6rem;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted-fg);
  line-height: 1.5;
}
.nsm-ext-note strong { color: var(--fg); }

/* "Reduced not available" warning strip */
.nsm-no-reduced {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: .55rem;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: hsl(38,92%,50%);
  margin-bottom: 12px;
}

/* Secondary "If Regular Rest (11h)" row */
.nsm-regular-alt {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: .55rem;
  font-size: 13px;
}
.nsm-regular-alt__label { color: var(--muted-fg); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; width: 100%; text-align: center; margin-bottom: 2px; }
.nsm-regular-alt__time  { color: var(--fg); font-weight: 700; font-size: 16px; }
.nsm-regular-alt__sep   { color: var(--muted-fg); }
.nsm-regular-alt__date  { color: var(--muted-fg); font-size: 13px; }

/* ── Shift detail modal rows ─────────────────────────────────────────────────── */
.sd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sd-row--total { margin-top: 2px; }
.sd-lbl {
  font-size: 13px;
  color: var(--muted-fg);
  font-weight: 500;
}
.sd-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
}
.sd-val--cyan { color: var(--cyan); font-size: 18px; }
.sd-divider {
  height: 1px;
  background: var(--border);
  border-radius: 1px;
}

/* ── Bottom navigation ───────────────────────────────────────────────────────── */
#nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
}
.nav {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.3);
  display: flex;
  width: 100%;
  justify-content: center;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
}
.nav__inner {
  max-width: 480px; margin: 0 auto; width: 100%; display: flex;
}
.nav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted-fg); cursor: pointer;
  background: none; border: none; font-family: inherit;
  transition: color .15s; text-decoration: none;
  padding: 8px 4px;
}
.nav__item:hover  { color: var(--fg); }
.nav__item.active { color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════════════════════
   NEW STYLES – Shift Tracker redesign
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Input prefix (£ symbol) ─────────────────────────────────────────────────── */
.input-prefix {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 16px; font-weight: 600; color: var(--muted-fg); pointer-events: none;
}
.form-input--prefixed { padding-left: 28px; }

/* ── Toggle switches ─────────────────────────────────────────────────────────── */
.toggle-list { display: flex; flex-direction: column; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; gap: 12px;
}
.toggle-row:last-child { border-bottom: none; }
.toggle-info { display: flex; flex-direction: column; gap: 2px; }
.toggle-label { font-size: 14px; font-weight: 500; color: var(--fg); }
.toggle-desc  { font-size: 12px; color: var(--muted-fg); }
.toggle-wrap  { position: relative; flex-shrink: 0; }
.toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  display: block; width: 48px; height: 27px;
  background: var(--muted); border-radius: 99px;
  cursor: pointer; transition: background .2s;
  position: relative;
}
.toggle-track::after {
  content: ''; position: absolute;
  width: 21px; height: 21px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.toggle-input:checked + .toggle-track { background: var(--cyan); }
.toggle-input:checked + .toggle-track::after { transform: translateX(21px); }

/* ── Overnight checkbox ──────────────────────────────────────────────────────── */
.overnight-check {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-input); border: 1.5px solid var(--border); border-radius: .75rem;
  cursor: pointer; user-select: none;
  transition: border-color .2s, background .2s;
}
.overnight-check:has(input:checked) { border-color: var(--cyan); background: rgba(6,181,244,.08); }
.overnight-check input[type=checkbox] { display: none; }
.overnight-check__box {
  width: 28px; height: 28px;
  border-radius: 8px; border: 2px solid var(--border);
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .2s, border-color .2s, color .2s;
  color: var(--cyan);
}
.overnight-check:has(input:checked) .overnight-check__box {
  background: var(--cyan); border-color: var(--cyan);
  /* icon inherits color — set to dark navy so moon is visible on cyan bg */
  color: hsl(225, 27%, 12%);
}
.overnight-check__label {
  font-size: 14px; font-weight: 500; color: var(--fg);
  transition: color .2s;
}
.overnight-check:has(input:checked) .overnight-check__label { color: var(--cyan); font-weight: 600; }

/* ── Calculation preview (add shift modal) ───────────────────────────────────── */
.calc-preview {
  background: rgba(6,181,244,.07);
  border: 1px solid rgba(6,181,244,.22);
  border-radius: .75rem;
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.calc-preview__row {
  display: flex; align-items: center; justify-content: space-between;
}
.calc-preview__lbl { font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.calc-preview__val { font-size: 16px; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; }

/* ── Overnight badge ─────────────────────────────────────────────────────────── */
.overnight-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  color: var(--cyan); background: rgba(6,181,244,.12);
  border: 1px solid rgba(6,181,244,.25);
  border-radius: 99px; padding: 2px 8px;
}
.overnight-badge--sm { font-size: 10px; padding: 1px 6px; }

/* ── 6th Shift badge ─────────────────────────────────────────────────────────── */
.sixth-shift-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(139,92,246,.15); color: #a78bfa;
  border: 1px solid rgba(139,92,246,.3);
  border-radius: .35rem; padding: 2px 8px; white-space: nowrap;
}

/* ── Week earnings card ──────────────────────────────────────────────────────── */
.card--week-earn {
  border-radius: var(--radius);
  border: 1px solid var(--cyan);
  background: var(--bg-card);
  box-shadow: 0 0 24px rgba(6,181,244,.14);
  padding: 20px 20px 16px;
}

/* ── Earnings table ──────────────────────────────────────────────────────────── */
.earn-table {
  width: 100%; border-collapse: collapse;
  margin: 12px 0 4px;
}
.earn-table th {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-fg);
  text-align: left; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.earn-table th:last-child { text-align: right; }
.earn-table td { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.earn-table tr:last-child td { border-bottom: none; }
.earn-td--method { font-size: 13px; color: var(--muted-fg); }
.earn-td--hours  { font-size: 14px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; padding-left: 8px; }
.earn-td--pay    { font-size: 15px; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; text-align: right; }
.earn-allowances {
  font-size: 12px; color: var(--muted-fg);
  padding-top: 10px; margin-top: 4px;
  border-top: 1px solid var(--border);
}

/* ── Earnings breakdown dropdown ─────────────────────────────────────────────── */
.earn-row--clickable { cursor: pointer; user-select: none; }
.earn-row--clickable:hover { background: rgba(6,181,244,.05); }
.earn-chevron {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  margin-left: 3px;
  transition: transform .2s ease;
  vertical-align: middle;
}
.earn-bd__cell { padding: 0 0 8px !important; border-bottom: none !important; }
.earn-bd__body {
  background: rgba(6,181,244,.07);
  border: 1px solid rgba(6,181,244,.18);
  border-radius: .6rem;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.earn-bd__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-fg);
}
.earn-bd__line span:last-child { font-weight: 600; color: var(--fg); white-space: nowrap; }
.earn-bd__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  border-top: 1px solid rgba(6,181,244,.2);
  padding-top: 7px;
  margin-top: 3px;
}

/* ── Last shift card (clickable) ─────────────────────────────────────────────── */
.ls-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.ls-card:hover  { border-color: var(--cyan); background: var(--bg-card-alt); }
.ls-card:active { transform: scale(.98); }
.ls-time { display: flex; align-items: center; font-size: 20px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }

/* ── Shift detail section label ──────────────────────────────────────────────── */
.sd-section-label {
  font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--cyan);
}
.sd-section { display: flex; flex-direction: column; gap: 8px; }
.sd-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Shift detail modal tabs */
.sd-tabs {
  display: flex;
  /* sits flush below the cyan header line – no gap, no padding */
  border-bottom: 1px solid var(--cyan);
}
.sd-tab {
  flex: 1;                       /* each tab is exactly 1/3 of modal width */
  background: var(--bg-card);
  border: none;
  color: var(--fg-muted);
  padding: 10px 4px;
  border-radius: 0;              /* rectangle – no rounding */
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  transition: background .15s, color .15s;
}
.sd-tab:hover { background: rgba(6,181,244,.06); color: var(--fg); }
.sd-tab.active {
  background: rgba(6,181,244,.13);
  color: var(--cyan);
  box-shadow: none;
}

/* ── Danger small button ─────────────────────────────────────────────────────── */
.btn--danger-sm {
  background: rgba(239,68,68,.12); color: #fca5a5;
  border: 1px solid rgba(239,68,68,.3);
  border-radius: .75rem; padding: 10px 14px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn--danger-sm:hover { background: rgba(239,68,68,.22); color: #fecaca; }