/* Layf Design System authority layer.
   Loaded after styles/main.css. Keep shared tokens and component decisions here. */

:root {
  --font-heading: var(--font-body);
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: var(--font-heading);
  --sans: var(--font-body);

  --layf-page-max-standard: 1480px;
  --layf-page-max-dashboard: 1500px;
  --layf-page-max: var(--layf-page-max-standard);
  --layf-page-gutter: clamp(20px, 2.6vw, 34px);
  --layf-page-gap: 18px;
  --layf-card-radius: 16px;
  --layf-panel-radius: 18px;
  --layf-control-radius: 12px;
  --layf-pill-radius: 999px;
  --layf-modal-radius: 20px;
  --layf-border: 1px solid var(--border);
  --layf-card-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 5%, transparent);
  --layf-card-shadow-hover: 0 18px 42px color-mix(in srgb, var(--ink) 7%, transparent);
  --layf-control-border: color-mix(in srgb, var(--accent) 14%, var(--border));
  --layf-control-bg: color-mix(in srgb, var(--surface) 96%, var(--accent-lt));
  --layf-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);

  --control-radius: var(--layf-pill-radius);
  --control-height: 40px;
  --control-padding-x: 16px;
  --modal-radius: 20px;
  --tab-height: 42px;
  --tab-radius: 999px;
  --tab-gap: 4px;
  --tab-padding-x: 18px;
  --type-hero-title: clamp(34px, 4.8vw, 60px);
  --type-page-title: clamp(30px, 2.5vw, 42px);
  --type-hero-subtitle: 15px;
  --type-section-title: 20px;
  --type-body: 14px;
  --weight-page-title: 350;
  --weight-section-title: 400;
  --weight-card-title: 500;
  --weight-button: 600;
  --weight-metric: 600;
  --line-tight: 1.05;
  --line-normal: 1.45;

  /* ── Module-specific named tokens ── */
  /* Sport */
  --strava-brand: #fc4c02;

  /* Packing — category icon accent colors (Energy OS compliant) */
  --packing-sky:    #4a90d9;   /* ski — mountain sky blue */
  --packing-sea:    #2e86ab;   /* boat — sea teal */
  --packing-forest: #6b7c4a;   /* mountains — forest green */
  --packing-slate:  #5c6b8a;   /* business — neutral slate */

  /* Theme-safe fallbacks for shared modules that use Layf accent tokens.
     Layf Core overrides these with the product gradient below; alternate
     themes inherit their own accent color without losing layout or contrast. */
  --layf-accent-violet: var(--accent);
  --layf-accent-gradient: linear-gradient(135deg, var(--accent), var(--accent));
  --layf-accent-gradient-soft: var(--accent-lt);
  --layf-accent-soft-bg: var(--accent-lt);
  --layf-accent-soft-bg-hover: var(--accent-lt);
  --layf-accent-border: var(--border);
  --layf-accent-text: var(--accent);
  --layf-accent-text-soft: var(--accent);
  --calendar-family-accent: var(--layf-accent-violet);
  --calendar-private-accent: var(--accent);
}

/* Family Agreements - Stage 1 Draft UI Checkpoint */
.family-agreements-page {
  --agreements-accent: var(--layf-accent-gradient, linear-gradient(135deg, #fb7185, #a855f7));
  --agreements-soft: color-mix(in srgb, var(--accent-lt) 54%, #fff 46%);
  --agreements-hairline: rgba(17, 24, 56, .075);
  --agreements-coral: #fb7185;
  --agreements-pink: #ec4899;
  --agreements-lavender: #c084fc;
  --agreements-green: #22c55e;
  --agreements-amber: #f59e0b;
  --agreements-red: #ef4444;
  color: var(--ink);
  display: grid;
  gap: 22px;
  min-width: 0;
}

.family-agreements-page * {
  box-sizing: border-box;
}

.agreements-topbar {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 500px);
  padding: 0 0 26px;
}

.agreements-title-group {
  align-items: center;
  display: flex;
  gap: 16px;
  min-width: 0;
}

.agreements-title-copy h1 {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-page-title);
  font-weight: var(--weight-page-title);
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

.agreements-title-copy p {
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.4;
  margin: 8px 0 0;
}

.agreements-topbar-actions {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-self: end;
  min-width: 0;
  width: 100%;
}

.agreements-search {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 46px;
  padding: 0 12px;
}

.agreements-search svg,
.agreements-filter svg,
.agreements-detail-back svg,
.agreements-meta-item svg,
.agreements-footer-action svg {
  color: var(--ink2);
  height: 18px;
  width: 18px;
}

.agreements-search input {
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  min-width: 0;
  outline: none;
}

.agreements-search input::placeholder {
  color: var(--ink3, var(--muted));
}

.agreements-primary-action {
  align-items: center;
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: var(--layf-control-radius);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--layf-accent-violet) 12%, transparent);
  color: var(--ink);
  display: inline-flex;
  font-weight: var(--weight-button);
  gap: 8px;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  white-space: nowrap;
}

.agreements-primary-action svg {
  height: 18px;
  width: 18px;
}

.family-agreements-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, 1fr) minmax(390px, 2fr);
  min-width: 0;
}


.agreements-master,
.agreements-detail {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.agreements-summary-card,
.agreements-list-panel,
.agreements-detail-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .9)),
    var(--surface);
  border: 1px solid rgba(17, 24, 56, .075);
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(17, 24, 56, .04);
}

.agreements-summary-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  position: relative;
}

.agreements-summary-card::before {
  background: linear-gradient(90deg, rgba(251, 146, 60, .16), rgba(236, 72, 153, .14), rgba(192, 132, 252, .16), rgba(124, 58, 237, .12));
  content: '';
  height: 2px;
  left: 0;
  opacity: .85;
  position: absolute;
  right: 0;
  top: 0;
}

.agreements-summary-segment {
  align-items: start;
  display: grid;
  gap: 7px;
  padding: 14px 16px 14px;
}

.agreements-summary-segment + .agreements-summary-segment {
  border-left: 1px solid var(--agreements-hairline);
}

.agreements-summary-icon,
.agreement-item-icon,
.timeline-icon {
  align-items: center;
  border-radius: 12px;
  display: inline-flex;
  justify-content: center;
}

.agreements-summary-icon {
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
  font-size: 14px;
  height: 30px;
  width: 30px;
}

.agreements-summary-icon svg,
.agreement-item-icon svg,
.timeline-icon svg,
.agreements-meta-item svg {
  fill: none;
  height: 16px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  width: 16px;
}

.agreements-summary-icon svg {
  height: 15px;
  width: 15px;
}

.tone-total {
  background: linear-gradient(135deg, rgba(124, 58, 237, .10), rgba(192, 132, 252, .16));
  color: #6d4fd8;
}

.tone-pending {
  background: linear-gradient(135deg, rgba(251, 146, 60, .10), rgba(251, 191, 36, .16));
  color: #c56a10;
}

.tone-confirmed {
  background: linear-gradient(135deg, rgba(16, 185, 129, .10), rgba(45, 212, 191, .14));
  color: #047857;
}

.tone-change {
  background: linear-gradient(135deg, rgba(244, 63, 94, .10), rgba(236, 72, 153, .14));
  color: #d12d5e;
}

.agreements-summary-value {
  color: var(--ink);
  font-size: 22px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
}

.agreements-summary-label {
  color: var(--ink2);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

.agreements-list-panel {
  display: grid;
  gap: 14px;
  padding: 18px 18px 20px;
}

.agreements-toolbar {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  padding-bottom: 0;
}

.agreements-filter {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ink);
  display: flex;
  font-size: 13px;
  font-weight: 700;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 14px;
}

.agreements-filter select {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-width: 0;
  outline: 0;
  width: 100%;
}

.agreements-sample-note {
  background: linear-gradient(135deg, rgba(236, 72, 153, .08), rgba(192, 132, 252, .09));
  border: 1px solid rgba(236, 72, 153, .12);
  border-radius: 12px;
  color: var(--ink2);
  font-size: 13px;
  font-weight: 700;
  margin-top: -8px;
  padding: 11px 14px;
}

.agreements-view-toggle {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: inline-grid;
  gap: 2px;
  grid-template-columns: repeat(2, 32px);
  padding: 4px;
}

.agreements-view-toggle button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--ink2);
  display: inline-flex;
  height: 30px;
  justify-content: center;
}

.agreements-view-toggle button.is-active {
  background: var(--surface2);
  color: var(--ink);
}

.agreements-view-toggle svg {
  height: 16px;
  width: 16px;
}

.agreements-list {
  display: grid;
  gap: 6px;
}

.agreements-list.is-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agreements-list.is-grid .agreement-item {
  align-items: start;
  gap: 10px;
  grid-template-columns: 48px minmax(0, 1fr);
}

.agreements-list.is-grid .agreement-item-icon {
  height: 44px;
  width: 44px;
}

.agreements-list.is-grid .agreement-status,
.agreements-list.is-grid .agreement-people {
  grid-column: 2;
  justify-self: start;
}

.agreements-list.is-grid .agreement-chevron {
  display: none;
}

.agreements-empty {
  align-items: start;
  color: var(--ink2);
  display: grid;
  gap: 6px;
  padding: 26px 16px;
}

.agreements-empty strong {
  color: var(--ink);
  font-size: 14px;
}

.agreement-item {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--ink);
  cursor: default;
  display: grid;
  gap: 10px;
  grid-template-columns: 44px minmax(0, 1fr) auto 18px;
  padding: 12px 10px;
  text-align: left;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  width: 100%;
}

.agreement-item:not(.is-active) {
  border-bottom-color: rgba(17, 24, 56, .055);
}

.agreement-item:not(.is-active):hover {
  background: rgba(255, 255, 255, .58);
  border-color: rgba(17, 24, 56, .055);
}

.agreement-item.is-active {
  background:
    linear-gradient(105deg, rgba(236, 72, 153, .085) 0%, rgba(192, 132, 252, .095) 58%, rgba(255, 255, 255, .68) 100%),
    var(--surface);
  border-color: rgba(236, 72, 153, .18);
  box-shadow: 0 14px 30px rgba(124, 58, 237, .055), inset 0 0 0 1px rgba(255, 255, 255, .62);
  margin-bottom: 0;
}

.agreement-item-icon {
  background: linear-gradient(135deg, rgba(124, 58, 237, .09), rgba(192, 132, 252, .15));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
  color: #6d4fd8;
  font-size: 18px;
  height: 40px;
  width: 40px;
}

/* Coral-pink family: Rodzina, Opieka, Zwierzęta */
.agreement-item-icon.is-family,
.agreement-item-icon.is-care,
.agreement-item-icon.is-pets {
  background: linear-gradient(135deg, rgba(251, 146, 60, .09), rgba(236, 72, 153, .13));
  color: #c24b85;
}

/* Amber: Nieruchomości */
.agreement-item-icon.is-home {
  background: linear-gradient(135deg, rgba(251, 191, 36, .10), rgba(251, 146, 60, .13));
  color: #b45309;
}

/* Blue-lavender: Wyjazdy, Bezpieczeństwo */
.agreement-item-icon.is-trips,
.agreement-item-icon.is-safety {
  background: linear-gradient(135deg, rgba(99, 102, 241, .09), rgba(192, 132, 252, .13));
  color: #5558c8;
}

/* Lavender-violet: Finanse, Obowiązki, Inne (same as default, explicit for clarity) */
.agreement-item-icon.is-finance,
.agreement-item-icon.is-duties,
.agreement-item-icon.is-other {
  background: linear-gradient(135deg, rgba(192, 132, 252, .10), rgba(124, 58, 237, .14));
  color: #6d4fd8;
}

.agreement-item-content {
  min-width: 0;
}

.agreement-item-title {
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 6px;
}

.agreement-item-bottom {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.agreement-item-meta {
  color: var(--ink2);
  font-size: 11px;
  font-weight: 600;
}

.agreement-importance-badge {
  align-items: center;
  background: rgba(239, 68, 68, .09);
  border-radius: 999px;
  color: #b91c1c;
  display: inline-flex;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .01em;
  line-height: 1;
  min-height: 19px;
  padding: 0 7px;
  white-space: nowrap;
}

.agreement-status {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 10.5px;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  min-height: 23px;
  padding: 0 9px;
  white-space: nowrap;
}

.agreement-status.is-confirmed {
  background: rgba(34, 197, 94, .095);
  border: 1px solid rgba(34, 197, 94, .1);
  color: #157a3d;
}

.agreement-status.is-pending {
  background: rgba(245, 158, 11, .105);
  border: 1px solid rgba(245, 158, 11, .11);
  color: #c76f07;
}

.agreement-status.is-change {
  background: rgba(239, 68, 68, .09);
  border: 1px solid rgba(239, 68, 68, .1);
  color: #c92a2a;
}

.agreement-status.is-draft {
  background: rgba(100, 116, 139, .1);
  color: #475569;
}

.agreement-status.is-archived {
  background: rgba(71, 85, 105, .08);
  color: #64748b;
}

.agreement-people {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.agreement-avatar {
  align-items: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, .72), rgba(236, 72, 153, .62));
  border: 2px solid var(--surface);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 850;
  height: 39px;
  justify-content: center;
  margin-left: -12px;
  overflow: hidden;
  width: 39px;
}

.agreement-avatar:first-child {
  margin-left: 0;
}

.agreement-avatar img,
.participant-avatar img,
.agreements-selected-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.agreement-confirmation-count {
  align-items: center;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(17, 24, 56, .08);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  height: 31px;
  justify-content: center;
  margin-left: 4px;
  min-width: 28px;
  padding: 0 8px;
}

.agreement-chevron {
  color: var(--ink2);
  height: 18px;
  width: 18px;
}

.agreements-show-all {
  align-items: center;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(17, 24, 56, .075);
  border-radius: 10px;
  color: var(--ink);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  min-height: 42px;
  margin-top: 16px;
  width: 100%;
}

.agreements-detail {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .91)),
    var(--surface);
  border: 1px solid rgba(17, 24, 56, .075);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(17, 24, 56, .045);
  height: calc(100vh - 160px);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.agreements-detail-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 22px 22px 12px;
}

.agreements-detail-head {
  display: grid;
  gap: 15px;
  padding: 6px 0 14px;
}

.agreements-detail-back {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--ink2);
  display: inline-flex;
  font-weight: 750;
  gap: 8px;
  justify-self: start;
  padding: 0;
}

.agreements-detail-title-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.agreements-detail-title-row h2 {
  color: var(--ink);
  font-size: clamp(22px, 1.75vw, 27px);
  letter-spacing: 0;
  line-height: 1.24;
  margin: 0;
  max-width: 760px;
}

.agreements-kebab {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--ink2);
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 28px;
}

.agreements-kebab svg {
  height: 18px;
  width: 18px;
}

.agreements-meta-row {
  align-items: center;
  color: var(--ink2);
  display: flex;
  flex-wrap: wrap;
  font-size: 11.5px;
  font-weight: 650;
  gap: 13px 22px;
}

.agreements-meta-item {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.agreements-detail-card {
  display: grid;
  gap: 17px;
  padding: 21px 22px;
}

.agreements-detail-card h3 {
  color: var(--ink);
  font-size: 16px;
  font-weight: 820;
  letter-spacing: 0;
  margin: 0;
}

.agreements-body-list {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.agreements-body-list p {
  margin: 0;
}

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

.participant-row {
  align-items: center;
  display: grid;
  gap: 11px;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-height: 76px;
  padding: 8px 0;
}

.participant-row:nth-child(odd) {
  padding-right: 24px;
}

.participant-row:nth-child(even) {
  border-left: 1px solid var(--agreements-hairline);
  padding-left: 24px;
}

.participant-avatar {
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(236, 72, 153, .13));
  border: 1px solid rgba(236, 72, 153, .14);
  border-radius: 999px;
  color: #8f4dc8;
  display: inline-flex;
  font-size: 15px;
  font-weight: 850;
  height: 55px;
  justify-content: center;
  overflow: hidden;
  width: 55px;
}

.participant-name {
  color: var(--ink);
  display: block;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.participant-role {
  color: var(--ink2);
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin-top: 4px;
}

.participant-confirmation {
  align-items: center;
  display: grid;
  gap: 5px;
  justify-items: end;
  min-width: 96px;
}

.participant-date {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 650;
}

.participant-actions {
  display: inline-flex;
  gap: 5px;
  justify-content: flex-end;
}

.participant-actions button {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(17, 24, 56, .075);
  border-radius: 999px;
  color: var(--ink2);
  font-size: 10px;
  font-weight: 800;
  min-height: 22px;
  padding: 0 7px;
}

.participant-actions button:disabled,
.agreements-footer-action:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.participant-lock {
  color: var(--ink3, var(--muted));
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}

.agreements-muted {
  color: var(--ink2);
  font-size: 13px;
  font-weight: 650;
  margin: 0;
}

.agreements-card-head {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.agreements-card-head p {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 650;
  margin: 5px 0 0;
}

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

.agreements-workflow-step {
  align-items: center;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(17, 24, 56, .075);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  padding: 10px;
}

.agreements-workflow-step.is-important {
  background:
    linear-gradient(135deg, rgba(254, 226, 226, .82), rgba(255, 241, 242, .9)),
    var(--surface);
  border-color: rgba(248, 113, 113, .26);
}

.agreements-workflow-step > button {
  align-items: center;
  background: var(--surface);
  border: 1px solid rgba(17, 24, 56, .12);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-weight: 900;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.agreements-workflow-step > .agreements-step-edit {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(17, 24, 56, .09);
  border-radius: 9px;
  color: var(--ink2);
  font-size: 12px;
  font-weight: 800;
  height: 30px;
  padding: 0 10px;
  width: auto;
}

.agreements-workflow-step.is-done > button {
  background: linear-gradient(135deg, rgba(34, 197, 94, .88), rgba(20, 184, 166, .8));
  border: 0;
}

.agreements-workflow-step.is-done strong {
  text-decoration: line-through;
}

.agreements-workflow-step strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
}

.agreements-workflow-step span {
  color: var(--ink2);
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin-top: 3px;
}

.agreements-timeline {
  display: grid;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}

.agreements-timeline-card {
  min-height: 220px;
}

.agreements-timeline::-webkit-scrollbar {
  width: 8px;
}

.agreements-timeline::-webkit-scrollbar-thumb {
  background: rgba(17, 24, 56, .12);
  border-radius: 999px;
}

.timeline-row {
  display: grid;
  gap: 15px;
  grid-template-columns: 24px 82px minmax(0, 1fr);
  min-height: 70px;
  position: relative;
}

.timeline-row::before {
  background: linear-gradient(180deg, rgba(236, 72, 153, .16), rgba(17, 24, 56, .055));
  bottom: 0;
  content: '';
  left: 12px;
  position: absolute;
  top: 24px;
  width: 1px;
}

.timeline-row:last-child::before {
  display: none;
}

.timeline-icon {
  background: rgba(236, 72, 153, .08);
  border: 1px solid rgba(236, 72, 153, .12);
  color: #c44fa2;
  font-size: 12px;
  height: 24px;
  position: relative;
  width: 24px;
  z-index: 1;
}

.timeline-date {
  color: var(--ink2);
  display: grid;
  font-size: 11.5px;
  font-weight: 750;
  gap: 2px;
  padding-top: 4px;
}

.timeline-date small {
  color: var(--ink3, var(--muted));
  font-size: 10.5px;
  font-weight: 750;
}

.timeline-content {
  color: var(--ink2);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.45;
  padding-top: 2px;
}

.timeline-content strong {
  color: var(--ink);
}

.agreements-footer-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  padding: 12px 22px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.agreements-footer-action {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ink);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
  min-height: 42px;
  padding: 0 15px;
}

.agreements-footer-action.is-primary {
  background: var(--agreements-accent);
  border: 0;
  color: #fff;
  margin-left: auto;
}

.agreements-footer-action.is-primary svg {
  color: #fff;
}

.agreements-footer-action.is-danger {
  border-color: rgba(239, 68, 68, .16);
  color: #b91c1c;
}

.agreements-save-action {
  background: linear-gradient(135deg, #fb7c55 0%, #ec4899 38%, #a855f7 100%) !important;
  border: 0 !important;
  box-shadow: 0 16px 34px rgba(124, 58, 237, .24);
  color: #fff !important;
  justify-content: center;
  min-width: 170px;
  opacity: 1 !important;
}

.agreements-modal {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 1000;
}

.agreements-modal-backdrop {
  background: rgba(17, 24, 56, .22);
  backdrop-filter: blur(14px);
  inset: 0;
  position: absolute;
}

.agreements-modal-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .93)),
    var(--surface);
  border: 1px solid rgba(17, 24, 56, .08);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(17, 24, 56, .18);
  color: var(--ink);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 44px);
  max-width: 680px;
  overflow: hidden;
  position: relative;
  width: min(680px, 100%);
}

.agreements-modal-head {
  align-items: start;
  border-bottom: 1px solid rgba(17, 24, 56, .075);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 22px 24px 18px;
}

.agreements-modal-head h2 {
  font-size: 24px;
  line-height: 1.15;
  margin: 0;
}

.agreements-modal-head p {
  color: var(--ink2);
  font-size: 13px;
  font-weight: 650;
  margin: 7px 0 0;
}

.agreements-modal-head button {
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink2);
  display: inline-flex;
  font-size: 20px;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.agreements-modal-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding: 20px 24px;
}

.agreements-modal-body label {
  display: grid;
  gap: 7px;
}

.agreements-modal-body label > span {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 850;
}

.agreements-modal-body input,
.agreements-modal-body select,
.agreements-modal-body textarea {
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(17, 24, 56, .09);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  outline: 0;
  padding: 12px 13px;
  width: 100%;
}

.agreements-modal-body textarea {
  resize: vertical;
}

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

.agreements-check {
  align-items: center;
  display: flex !important;
  gap: 10px !important;
}

.agreements-check input {
  width: auto;
}

.agreements-participant-picker {
  border: 1px solid rgba(17, 24, 56, .09);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px;
}

.agreements-participant-picker legend {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 850;
  padding: 0 5px;
}

.agreements-participant-picker p {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 650;
  margin: 0;
}

.agreements-participant-add {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.agreements-participant-add select {
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(17, 24, 56, .09);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  min-height: 42px;
  padding: 0 12px;
}

.agreements-selected-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agreements-selected-participant {
  align-items: center;
  background: linear-gradient(135deg, rgba(236, 72, 153, .08), rgba(192, 132, 252, .10));
  border: 1px solid rgba(236, 72, 153, .13);
  border-radius: 999px;
  display: inline-flex;
  gap: 10px;
  min-height: 46px;
  padding: 5px 6px;
}

.agreements-selected-avatar {
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(192, 132, 252, .16));
  border: 1px solid rgba(236, 72, 153, .12);
  border-radius: 999px;
  color: #8f4dc8;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 850;
  height: 38px;
  justify-content: center;
  overflow: hidden;
  width: 38px;
}

.agreements-selected-participant strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  line-height: 1.1;
}

.agreements-selected-participant small {
  color: var(--ink2);
  display: block;
  font-size: 11px;
  font-weight: 650;
  margin-top: 2px;
}

.agreements-selected-participant button {
  align-items: center;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(17, 24, 56, .08);
  border-radius: 999px;
  color: var(--ink2);
  display: inline-flex;
  font-size: 16px;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.agreements-no-participants {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 0;
}

.agreements-modal-foot {
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid rgba(17, 24, 56, .075);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px 20px;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

@media (max-width: 1180px) {
  .agreements-topbar {
    grid-template-columns: 1fr;
  }

  .agreements-topbar-actions {
    justify-self: stretch;
  }

  .family-agreements-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .family-agreements-page {
    gap: 16px;
    overflow-x: hidden;
  }

  .agreements-topbar {
    gap: 14px;
    padding-bottom: 18px;
  }

  .agreements-title-group {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .agreements-title-copy h1 {
    font-size: 25px;
  }

  .agreements-title-copy p {
    font-size: 13px;
    max-width: 100%;
  }

  .agreements-topbar-actions {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .agreements-primary-action {
    min-width: 0;
    width: 100%;
  }

  .agreements-summary-card {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .agreements-summary-segment {
    padding: 10px 10px 12px;
  }

  .agreements-toolbar {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .agreements-filter {
    font-size: 12px;
    min-height: 36px;
    padding: 0 10px;
  }

  .agreement-item {
    align-items: start;
    gap: 10px 12px;
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 0;
    padding: 12px 10px;
  }

  .agreements-list.is-grid {
    grid-template-columns: 1fr;
  }

  .agreement-item-icon {
    height: 42px;
    font-size: 20px;
    width: 42px;
  }

  .agreement-item > .agreement-status {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .agreement-people {
    grid-column: 2;
    grid-row: 3;
    justify-content: flex-start;
  }

  .agreement-chevron {
    display: none;
  }

  .agreements-detail {
    padding: 16px;
  }

  .agreements-detail-title-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .agreements-detail-title-row .agreement-status {
    justify-self: start;
  }

  .agreements-kebab {
    grid-column: 2;
    grid-row: 1;
  }

  .agreements-meta-row {
    gap: 10px 16px;
  }

  .agreements-detail-card {
    padding: 18px;
  }

  .agreements-card-head {
    grid-template-columns: 1fr;
  }

  .agreements-workflow-step {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .agreements-workflow-step > .agreements-step-edit {
    padding: 0 8px;
  }

  .agreements-participants-grid {
    grid-template-columns: 1fr;
  }

  .participant-row:nth-child(odd),
  .participant-row:nth-child(even) {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-right: 0;
  }

  .participant-row:first-child {
    border-top: 0;
  }

  /* Timeline: collapse to 2-col (icon | date+content stacked), no inner scroll */
  .agreements-timeline {
    max-height: none;
    overflow-y: visible;
  }

  .timeline-row {
    gap: 3px 10px;
    grid-template-columns: 24px minmax(0, 1fr);
    min-height: 0;
  }

  .timeline-icon {
    grid-row: span 2;
  }

  .timeline-date {
    align-items: center;
    flex-direction: row;
    gap: 5px;
    padding-top: 3px;
  }

  .timeline-date small::before {
    color: var(--ink3, var(--muted));
    content: '·';
    margin-right: 2px;
  }

  .timeline-content {
    padding-top: 0;
  }

  .agreements-footer-actions,
  .agreements-footer-action,
  .agreements-footer-action.is-primary {
    width: 100%;
  }

  .agreements-footer-action {
    justify-content: center;
  }

  .participant-actions {
    justify-content: flex-start;
  }

  .agreements-modal {
    align-items: end;
    padding: 10px;
  }

  .agreements-modal-card {
    border-radius: 18px;
    max-height: 92vh;
  }

  .agreements-form-grid,
  .agreements-participant-add,
  .agreements-modal-foot {
    grid-template-columns: 1fr;
  }

  .agreements-modal-foot {
    display: grid;
  }
}

/* ── Wspólne ustalenia — dark mode overrides ────────────────────────────── */
html[data-dark='true'] .agreements-summary-card,
html[data-dark='true'] .agreements-list-panel,
html[data-dark='true'] .agreements-detail-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
}

html[data-dark='true'] .agreements-detail {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .32);
}

html[data-dark='true'] .agreements-footer-actions {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-top-color: var(--border);
}

html[data-dark='true'] .agreement-item:not(.is-active):hover {
  background: var(--surface2);
}

html[data-dark='true'] .agreement-item.is-active {
  background:
    linear-gradient(105deg, rgba(236, 72, 153, .12) 0%, rgba(192, 132, 252, .14) 58%, rgba(124, 58, 237, .10) 100%),
    var(--surface2);
  border-color: rgba(192, 132, 252, .28);
  box-shadow: 0 4px 16px rgba(124, 58, 237, .10);
}

html[data-dark='true'] .agreements-topbar {
  border-bottom-color: var(--border);
}

html[data-dark='true'] .agreements-search,
html[data-dark='true'] .agreements-filter {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--ink);
}

html[data-dark='true'] .agreements-modal-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .52);
}

html[data-dark='true'] .agreements-modal-head {
  background: var(--surface);
  border-bottom-color: var(--border);
}

html[data-dark='true'] .agreements-modal-foot {
  background: var(--surface);
  border-top-color: var(--border);
}

html[data-dark='true'] .agreements-form-group input,
html[data-dark='true'] .agreements-form-group textarea,
html[data-dark='true'] .agreements-form-group select {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--ink);
}

html[data-dark='true'] .agreements-workflow-step {
  background: var(--surface2);
  border-color: var(--border);
}

html[data-dark='true'] .agreements-workflow-step.is-done {
  background: color-mix(in srgb, var(--surface2) 80%, rgba(34,197,94,.15));
}

html[data-dark='true'] .agreements-sharing-card {
  background: var(--surface2);
  border-color: var(--border);
}

html[data-dark='true'] .agreements-list-panel {
  background: var(--surface);
}

/* ── Layf Core: themed alias tokens ─────────────────────────────────────── */
html[data-theme='layf-core'] {
  --medical-accent: var(--accent);
  --sport-warm-accent: var(--accent);
  --ftree-accent: var(--accent);

  /* Layf logo-inspired accent system — coral → pink → lavender → violet.
     These tokens replace flat lavender usage across active states, buttons,
     focus rings, outlines and the logo mark. Energy OS is untouched. */
  --layf-accent-coral:    #fb923c;
  --layf-accent-pink:     #ec4899;
  --layf-accent-lavender: #c084fc;
  --layf-accent-violet:   #7c3aed;
  --layf-accent-gradient: linear-gradient(135deg, #fb923c 0%, #ec4899 28%, #c084fc 64%, #7c3aed 100%);
  --layf-accent-gradient-soft: linear-gradient(135deg, rgba(251,146,60,.10) 0%, rgba(236,72,153,.10) 35%, rgba(192,132,252,.12) 70%, rgba(124,58,237,.12) 100%);
  --layf-accent-soft-bg:  rgba(192,132,252,.08);
  --layf-accent-soft-bg-hover: rgba(192,132,252,.14);
  --layf-accent-border:   rgba(192,132,252,.30);
  --layf-accent-text:     #7c3aed;
  --layf-accent-text-soft: #5b42d6;
  --calendar-private-accent: var(--layf-accent-coral);
}
html[data-theme='layf-core'][data-dark='true'] {
  --layf-accent-soft-bg:  rgba(192,132,252,.14);
  --layf-accent-soft-bg-hover: rgba(192,132,252,.22);
  --layf-accent-border:   rgba(192,132,252,.42);
  --layf-accent-text:     #d8b4fe;
  --layf-accent-text-soft: #c4b5fd;
}

/* ── Layf wordmark — product logo used in topbar and auth ───────────────── */
.layf-wordmark {
  --layf-logo-ink: #111827;
  --layf-logo-dot: #8b7cf6;
  --layf-logo-muted: #374151;
  display: inline-grid;
  gap: 2px;
  width: fit-content;
  min-width: 0;
  color: var(--layf-logo-ink) !important;
  line-height: 1;
}

.layf-wordmark-text {
  display: inline-block;
  color: var(--layf-logo-ink) !important;
  font-family: 'Geist', 'Segoe UI', 'Avenir Next', system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.layf-wordmark-dot {
  display: inline-block !important;
  width: .13em !important;
  height: .13em !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 0 .035em !important;
  background: var(--layf-logo-dot) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--layf-logo-dot) !important;
  font-size: 1em !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-indent: 999px !important;
  transform: translateY(.035em);
  vertical-align: baseline;
  -webkit-text-fill-color: var(--layf-logo-dot) !important;
}

.layf-wordmark-dot::before,
.layf-wordmark-dot::after {
  content: none !important;
}

.layf-wordmark-tagline {
  color: var(--layf-logo-muted) !important;
  font-family: 'Geist', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.layf-wordmark--topbar {
  transform: translateY(1px);
}

.layf-wordmark--topbar .layf-wordmark-text {
  font-size: 25px;
}

.layf-wordmark--topbar .layf-wordmark-tagline {
  display: none;
}

.layf-wordmark--auth {
  margin: 0 auto 20px;
  text-align: center;
}

.layf-wordmark--auth .layf-wordmark-text {
  font-size: clamp(52px, 11vw, 72px);
}

.layf-wordmark--auth .layf-wordmark-tagline {
  margin-top: 8px;
  font-size: clamp(16px, 4vw, 22px);
}

html[data-dark='true'] .layf-wordmark {
  --layf-logo-ink: #f8fafc;
  --layf-logo-dot: #a78bfa;
  --layf-logo-muted: #cbd5e1;
}

.wa-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.wa-brand img {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.wa-brand-text {
  min-width: 0;
  color: var(--ink);
  font-weight: 650;
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
}

.wa-brand-tagline {
  color: var(--ink3);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 500;
}

.wa-brand--auth {
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 20px;
  text-align: center;
}

.wa-brand--auth img {
  width: 92px;
  height: 92px;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.wa-brand--auth .wa-brand-text {
  font-size: clamp(36px, 6vw, 68px);
  line-height: 0.95;
}

/* ── Layf Core: clean body background (no orange gradient) ───────────────── */
html[data-theme='layf-core'] body {
  background: var(--base) !important;
}

/* ── Layf Core: Daily Briefing — light card instead of gradient hero ─────── */
html[data-theme='layf-core'] .dashboard-warm-hero,
html[data-theme='layf-core'] .planner-weather-hero {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 4px rgba(17,24,39,.05), 0 0 0 1px var(--border) !important;
  animation: none !important;
}
html[data-theme='layf-core'] .dashboard-warm-hero h1,
html[data-theme='layf-core'] .planner-weather-hero h1 {
  color: var(--ink) !important;
  font-size: clamp(22px, 3vw, 36px) !important;
}
html[data-theme='layf-core'] .planner-warm-badge {
  background: rgba(17,24,39,.05) !important;
  color: var(--ink2) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme='layf-core'] .dashboard-warm-hero-meta span,
html[data-theme='layf-core'] .planner-weather-hero-meta span,
html[data-theme='layf-core'] .dashboard-hero-today button,
html[data-theme='layf-core'] .planner-hero-today button {
  border-color: var(--border) !important;
  background: var(--surface2) !important;
  color: var(--ink2) !important;
}
html[data-theme='layf-core'] .dashboard-hero-today button:hover,
html[data-theme='layf-core'] .planner-hero-today button:hover {
  background: var(--accent-lt) !important;
  color: var(--accent) !important;
}
html[data-theme='layf-core'] .dashboard-warm-hero .is-urgent,
html[data-theme='layf-core'] .planner-weather-hero .is-urgent {
  background: rgba(220,38,38,.08) !important;
  border-color: rgba(220,38,38,.18) !important;
  color: #dc2626 !important;
}
/* Planner hero text colors */
html[data-theme='layf-core'] .planner-weather-hero p,
html[data-theme='layf-core'] .planner-weather-hero span:not(.planner-warm-badge) {
  color: var(--ink2) !important;
}
html[data-theme='layf-core'] .planner-weather-hero strong {
  color: var(--ink) !important;
}
/* Weather widget inside light briefing */
html[data-theme='layf-core'] .dashboard-warm-weather {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
html[data-theme='layf-core'] .dashboard-warm-weather-top span {
  color: var(--ink2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
html[data-theme='layf-core'] .dashboard-warm-weather-top button {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  color: var(--ink2) !important;
  font-weight: 600 !important;
}
html[data-theme='layf-core'] .dashboard-warm-weather-main strong {
  color: var(--ink) !important;
  font-size: clamp(34px, 4vw, 52px) !important;
}
html[data-theme='layf-core'] .dashboard-warm-weather-main span {
  font-size: 34px !important;
  filter: none !important;
}
html[data-theme='layf-core'] .dashboard-warm-weather p {
  color: var(--ink2) !important;
  font-weight: 500 !important;
}
html[data-theme='layf-core'] .dashboard-warm-weather-metrics span {
  background: var(--surface) !important;
  color: var(--ink2) !important;
  font-weight: 500 !important;
}
html[data-theme='layf-core'] .dashboard-warm-weather-metrics strong {
  color: var(--ink) !important;
}
html[data-theme='layf-core'] .dashboard-warm-hero.is-collapsed .module-hero-compact-title,
html[data-theme='layf-core'] .planner-weather-hero.is-collapsed .module-hero-compact-title {
  color: var(--ink) !important;
}
html[data-theme='layf-core'] .hero-collapse-btn {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  color: var(--ink2) !important;
  backdrop-filter: none !important;
}

/* ── Layf Core: sidebar — subtle gradient-tint background, graphite text ── */
html[data-theme='layf-core'] .nav-item.is-active,
html[data-theme='layf-core'] .nav-item.active,
html[data-theme='layf-core'] .sidebar .nav-item.is-active,
html[data-theme='layf-core'] .sidebar .nav-item.active {
  background: var(--layf-accent-gradient-soft) !important;
  border-color: var(--layf-accent-border) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
html[data-dark='true'][data-theme='layf-core'] .nav-item.is-active,
html[data-dark='true'][data-theme='layf-core'] .sidebar .nav-item.is-active {
  color: var(--ink) !important;
}

/* ── Layf Core: per-module icon colors (SVG stroke via currentColor) ──────── */
html[data-theme='layf-core'] .nav-item .nav-icon svg {
  stroke: currentColor;
  transition: stroke .14s;
}
/* Idle: neutral graphite */
html[data-theme='layf-core'] .nav-item .nav-icon {
  color: var(--ink3) !important;
}
/* Per-module accent hues — apply ALWAYS, including active state */
html[data-theme='layf-core'] [data-nav='dashboard'] .nav-icon { color: #f97316 !important; }
html[data-theme='layf-core'] [data-nav='lifeplanner'] .nav-icon { color: #6366f1 !important; }
html[data-theme='layf-core'] [data-nav='calendar'] .nav-icon { color: #7c3aed !important; }
html[data-theme='layf-core'] [data-nav='properties'] .nav-icon { color: #8b5cf6 !important; }
html[data-theme='layf-core'] [data-nav='documentcentre'] .nav-icon { color: #6366f1 !important; }
html[data-theme='layf-core'] [data-nav='family'] .nav-icon { color: #8b5cf6 !important; }
html[data-theme='layf-core'] [data-nav='familyAgreements'] .nav-icon { color: #ec4899 !important; }
html[data-theme='layf-core'] [data-nav='pets'] .nav-icon { color: #f59e0b !important; }
html[data-theme='layf-core'] [data-nav='medical'] .nav-icon { color: #ec4899 !important; }
html[data-theme='layf-core'] [data-nav='sport'] .nav-icon,
html[data-theme='layf-core'] [data-nav='sportvTwo'] .nav-icon { color: #10b981 !important; }
html[data-theme='layf-core'] [data-nav='shopping'] .nav-icon { color: #3b82f6 !important; }
html[data-theme='layf-core'] [data-nav='recipes'] .nav-icon { color: #f97316 !important; }
html[data-theme='layf-core'] [data-nav='packing'] .nav-icon { color: #6366f1 !important; }
html[data-theme='layf-core'] [data-nav='betaFeedback'] .nav-icon { color: #8b5cf6 !important; }
/* Activity / planning that were falling back to grey */
html[data-theme='layf-core'] [data-nav='events'] .nav-icon { color: #ec4899 !important; }
/* Management group — was all grey; unify to the Layf colour scheme */
html[data-theme='layf-core'] [data-nav='waFinance'] .nav-icon { color: #14b8a6 !important; }
html[data-theme='layf-core'] [data-nav='services'] .nav-icon { color: #f59e0b !important; }
html[data-theme='layf-core'] [data-nav='inspections'] .nav-icon { color: #6366f1 !important; }
html[data-theme='layf-core'] [data-nav='accessControl'] .nav-icon { color: #8b5cf6 !important; }
html[data-theme='layf-core'] [data-nav='cleaningSchedule'] .nav-icon { color: #06b6d4 !important; }
html[data-theme='layf-core'] [data-nav='inventory'] .nav-icon { color: #f97316 !important; }
/* Admin / briefs */
html[data-theme='layf-core'] [data-nav='moduleBriefs'] .nav-icon { color: #a855f7 !important; }
html[data-theme='layf-core'] [data-nav='adminStatus'] .nav-icon { color: #6366f1 !important; }
html[data-theme='layf-core'] [data-nav='settings'] .nav-icon { color: #64748b !important; }

/* ── Layf Core: sidebar frame — airy, clean ──────────────────────────────── */
html[data-theme='layf-core'] .sidebar {
  background: #ffffff !important;
  border-right: 1px solid rgba(17,24,39,.06) !important;
  box-shadow: none !important;
}
html[data-theme='layf-core'] .sidebar-section-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: rgba(17,24,39,.32) !important;
  margin-top: 16px !important;
}
html[data-theme='layf-core'] .sidebar-divider {
  display: none !important;
}
html[data-theme='layf-core'] .nav-item {
  border-radius: 10px !important;
  margin: 1px 0 !important;
  font-size: 13.5px !important;
}
html[data-theme='layf-core'] .nav-item:hover {
  background: rgba(17,24,39,.04) !important;
  color: var(--ink) !important;
}

/* ── Layf Core: SVG nav-icon alignment fix ───────────────────────────────── */
.nav-icon svg {
  display: block;
  flex-shrink: 0;
}

html[data-theme='layf-core'][data-dark='true'] body {
  background:
    radial-gradient(circle at 82% -18%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 36%),
    linear-gradient(180deg, var(--base) 0%, color-mix(in srgb, var(--base) 92%, var(--surface2)) 100%) !important;
}

/* ── Energy OS (espresso): accent aliases ────────────────────────────────── */
html:not([data-theme]),
html[data-theme='espresso']:not([data-dark='true']) {
  --accent: #ef6016;
  --accent-contrast: #ffffff;
  --accent-lt: rgba(239, 96, 22, 0.12);
  --accent-md: rgba(239, 96, 22, 0.24);
  --warm-accent-active: var(--accent);
  --medical-accent: var(--accent);
  --sport-warm-accent: var(--accent);
  --ftree-accent: var(--accent);
}

html[data-theme='espresso'][data-dark='true'] {
  --warm-accent-active: var(--accent);
  --medical-accent: var(--accent);
  --sport-warm-accent: var(--accent);
  --ftree-accent: var(--accent);
}

/* Tell the browser the whole document is dark — this makes ALL native
   controls (select dropdowns, scrollbars, date pickers, etc.) render in
   the OS dark style. Must be on the root element to be effective. */
html[data-dark='true'] {
  color-scheme: dark;
}

html[data-dark='true'] body {
  background:
    radial-gradient(circle at 82% -18%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 36%),
    linear-gradient(180deg, #101112 0%, #0b0c0d 100%) !important;
}

html[data-dark='true'] .topbar,
html[data-dark='true'] .sidebar,
html[data-dark='true'] .bottom-nav {
  border-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  color: var(--ink) !important;
}

html[data-dark='true'] .topbar-toggle,
html[data-dark='true'] .icon-btn,
html[data-dark='true'] .user-pill {
  border-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface2) 72%, transparent) !important;
  color: var(--ink2) !important;
}

html[data-dark='true'] .topbar-toggle:hover,
html[data-dark='true'] .icon-btn:hover,
html[data-dark='true'] .user-pill:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border)) !important;
  background: color-mix(in srgb, var(--surface2) 78%, var(--accent-lt)) !important;
  color: var(--ink) !important;
}

html[data-dark='true'] .topbar-logo-text {
  color: var(--ink) !important;
}

html[data-dark='true'] .topbar-page,
html[data-dark='true'] .sidebar-section-label {
  color: var(--ink3) !important;
}

html[data-dark='true'] .sidebar-divider,
html[data-dark='true'] .topbar-sep {
  background: var(--border) !important;
}

html[data-dark='true'] .nav-item,
html[data-dark='true'] .bn-tab {
  color: var(--ink2) !important;
}

body {
  background:
    radial-gradient(circle at 78% -12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
    radial-gradient(circle at 8% 8%, var(--border), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, var(--surface2)) 0%, var(--bg) 100%) !important;
}

#app,
.shell,
.content {
  background: transparent !important;
}

/* Prevent any module from creating horizontal page scroll.
   Modals use position:fixed and are unaffected. */
.content {
  overflow-x: hidden;
}

.topbar {
  border-bottom-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface) 86%, transparent) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: blur(18px);
}

.topbar-toggle,
.icon-btn,
.theme-toggle-btn,
.signout-btn {
  border-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface) 58%, transparent) !important;
  color: var(--ink2) !important;
}

.topbar-toggle:hover,
.icon-btn:hover,
.theme-toggle-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border)) !important;
  background: color-mix(in srgb, var(--surface) 84%, var(--accent-lt)) !important;
  color: var(--accent) !important;
}

.signout-btn:hover {
  border-color: color-mix(in srgb, var(--danger) 32%, var(--border)) !important;
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
}

.topbar-logo:hover {
  background: var(--accent-lt) !important;
}

.topbar-logo-text {
  color: var(--ink) !important;
}

.topbar-sep,
.sidebar-divider {
  background: var(--border) !important;
}

.topbar-page {
  background: color-mix(in srgb, var(--surface2) 78%, var(--accent-lt)) !important;
  color: var(--ink2) !important;
}

.lang-switch,
.user-pill {
  border-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface) 78%, transparent) !important;
  color: var(--ink2) !important;
  box-shadow: none !important;
}

.lang-btn {
  color: var(--ink2) !important;
}

.lang-btn.is-active,
.lang-btn[aria-pressed='true'] {
  background: var(--surface) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-xs) !important;
}

.user-pill:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border)) !important;
  background: color-mix(in srgb, var(--surface) 84%, var(--accent-lt)) !important;
}

.user-pill-avatar {
  background: var(--accent-lt) !important;
  border-color: var(--accent-md) !important;
  color: var(--accent) !important;
  filter: none !important;
}

.sidebar {
  border-right-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface) 78%, transparent) !important;
  box-shadow: var(--shadow-xs) !important;
  backdrop-filter: blur(18px);
}

@media (min-width: 768px) {
  .shell {
    position: relative;
  }

  .content {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }

  .sidebar {
    inset: var(--topbar-h) auto 0 0;
    max-width: min(var(--sidebar-w), calc(100vw - 32px));
    opacity: 1;
    padding: 10px 8px 24px;
    pointer-events: auto;
    position: fixed;
    transform: translateX(0);
    transition:
      transform 0.22s ease,
      opacity 0.22s ease,
      visibility 0s linear 0s;
    visibility: visible;
    width: var(--sidebar-w);
    z-index: 50;
  }

  .sidebar.is-collapsed {
    border-right: 1px solid var(--border);
    opacity: 0;
    padding: 10px 8px 24px;
    pointer-events: none;
    transform: translateX(calc(-100% - 12px));
    transition:
      transform 0.22s ease,
      opacity 0.22s ease,
      visibility 0s linear 0.22s;
    visibility: hidden;
    width: var(--sidebar-w);
  }
}

.sidebar-section-label {
  color: var(--ink3) !important;
}

.sidebar-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.sidebar-section-toggle:hover { color: var(--ink2) !important; }
.sidebar-section-chevron {
  flex-shrink: 0;
  transition: transform .15s ease;
  opacity: .7;
}
.sidebar-section-toggle.is-collapsed .sidebar-section-chevron {
  transform: rotate(-90deg);
}
.sidebar.is-beta-collapsed .beta-nav-item {
  display: none !important;
}

.nav-item {
  border-color: transparent !important;
  color: var(--ink2) !important;
}

.nav-item:hover {
  border-color: color-mix(in srgb, var(--accent) 16%, var(--border)) !important;
  background: color-mix(in srgb, var(--surface) 84%, var(--accent-lt)) !important;
  color: var(--ink) !important;
}

.nav-icon {
  filter: none !important;
}

/* Sharing indicator: a subtle Layf-coloured people glyph, not a filled tile */
.nav-shared-indicator {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  display: inline-flex;
  height: auto;
  justify-content: center;
  line-height: 1;
  margin-left: auto;
  min-width: 0;
  padding: 0;
}

[data-shared-state="shared"] .nav-shared-indicator,
[data-shared-state="shared-to-me"] .nav-shared-indicator {
  color: var(--layf-accent-violet, var(--accent));
}

[data-shared-state="pending"] .nav-shared-indicator {
  color: #f59e0b;
}

.nav-shared-indicator-icon {
  display: block;
  height: 16px;
  width: 16px;
}

.bottom-nav {
  display: none !important;
  border-top-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  box-shadow: var(--shadow-sm) !important;
}

body.is-auth-locked #app {
  filter: blur(12px);
  opacity: .42;
  pointer-events: none;
  user-select: none;
}

.account-isolation-lock {
  max-width: 760px;
  margin: clamp(28px, 8vh, 96px) auto;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--layf-accent-border, var(--border));
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient-soft, linear-gradient(135deg, rgba(124, 92, 252, 0.12), rgba(236, 72, 153, 0.1))) border-box;
  box-shadow: 0 24px 70px rgba(17, 24, 56, 0.10);
}

.account-isolation-mark {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
}

.account-isolation-kicker {
  margin: 0 0 8px;
  color: var(--ink2);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.account-isolation-copy h1 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.account-isolation-copy p,
.account-isolation-help {
  color: var(--ink2);
  font-size: 0.98rem;
  line-height: 1.55;
}

.account-isolation-note {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface2);
}

.account-isolation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.account-isolation-danger {
  border-color: color-mix(in srgb, #ef4444 28%, var(--border)) !important;
  color: var(--ink) !important;
}

.account-isolation-help {
  margin: 18px 0 0;
  font-size: 0.9rem;
}

/* ── Settings: backup safety panel ───────────────────────────────────────── */
.settings-backup-panel {
  display: grid;
  gap: 14px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
}

.settings-backup-panel--compact > summary,
.settings-modules-panel--compact > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
  min-height: 42px;
}

.settings-backup-panel--compact > summary::-webkit-details-marker,
.settings-modules-panel--compact > summary::-webkit-details-marker { display: none; }

.settings-backup-panel--compact > summary::after,
.settings-modules-panel--compact > summary::after {
  color: var(--ink3);
  content: '+';
  font-size: 20px;
  line-height: 1;
}

.settings-backup-panel--compact[open] > summary::after,
.settings-modules-panel--compact[open] > summary::after { content: '−'; }

.settings-backup-panel--compact > summary span,
.settings-modules-panel--compact > summary span { display: grid; gap: 2px; }
.settings-backup-panel--compact > summary strong,
.settings-modules-panel--compact > summary strong { color: var(--ink); font-size: 14px; }
.settings-backup-panel--compact > summary small,
.settings-modules-panel--compact > summary small { color: var(--ink3); font-size: 12px; }

.settings-backup-panel--compact > .settings-backup-head { align-items: flex-start; }
.settings-backup-panel--compact .settings-copy { margin: 0; max-width: 590px; }

.settings-backup-head,
.settings-backup-row,
.settings-backup-preview-head,
.settings-backup-actions {
  align-items: center;
  display: flex;
  gap: 12px;
}

.settings-backup-head,
.settings-backup-row,
.settings-backup-preview-head {
  justify-content: space-between;
}

.settings-backup-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.settings-backup-safety {
  background: color-mix(in srgb, var(--accent-lt) 58%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 14px;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 12px;
}

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

.settings-backup-summary-card {
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-lt));
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: 14px;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
}

.settings-backup-summary-card small,
.settings-backup-summary-card em {
  color: var(--ink3);
  font-size: 11px;
  font-style: normal;
}

.settings-backup-summary-card strong {
  color: var(--ink);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-backup-summary-card.has-backup {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

.settings-backup-cleanup {
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-lt));
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: 16px;
  display: grid;
  gap: 10px;
  padding: 10px;
}

.settings-orphan-preview[hidden] {
  display: none;
}

.settings-orphan-card {
  box-shadow: none;
}

.settings-orphan-list {
  max-height: 180px;
  overflow: auto;
}

.settings-backup-list {
  display: grid;
  gap: 10px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
  scroll-padding-top: 6px;
  scrollbar-width: thin;
}

.settings-backup-row {
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-lt));
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: 16px;
  padding: 12px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.settings-backup-row.is-failed {
  border-color: color-mix(in srgb, var(--danger) 26%, var(--border));
}

.settings-backup-row.is-active {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient, linear-gradient(135deg, var(--accent), var(--accent))) border-box;
  border-color: transparent;
  box-shadow:
    0 12px 34px color-mix(in srgb, var(--accent) 14%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(-1px);
}

.settings-backup-row.is-active .btn {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: color-mix(in srgb, var(--accent-lt) 62%, var(--surface));
}

.settings-backup-status,
.settings-backup-meta,
.settings-backup-preview-head span {
  display: grid;
  gap: 3px;
}

.settings-backup-status small,
.settings-backup-meta small,
.settings-backup-preview-head small,
.settings-backup-ref-list small {
  color: var(--ink3);
  font-size: 12px;
}

.settings-backup-preview-card {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 16px;
  display: grid;
  gap: 9px;
  padding: 10px;
}

.settings-backup-restore-plan {
  display: grid;
  gap: 10px;
}

.settings-backup-restore-plan[hidden] {
  display: none;
}

.settings-backup-restore-card {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient, linear-gradient(135deg, var(--accent), var(--accent))) border-box;
  border: 1px solid transparent;
  border-radius: 16px;
  display: grid;
  gap: 9px;
  padding: 10px;
}

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

.settings-backup-metrics--compact {
  gap: 6px;
}

.settings-backup-metrics span {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  gap: 2px;
  min-height: 0;
  padding: 7px 9px;
}

.settings-backup-metrics strong {
  color: var(--ink);
  font-size: 16px;
}

.settings-backup-metrics small {
  color: var(--ink3);
  font-size: 10px;
}

.settings-backup-compact-note {
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
}

.settings-backup-ref-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.settings-backup-ref-list li {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 1px;
  padding-top: 5px;
}

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

.settings-backup-deep-grid > section {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  gap: 6px;
  padding: 8px;
}

.settings-backup-deep-grid--compact > section {
  max-height: 190px;
  overflow: auto;
}

.settings-backup-details {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.settings-backup-details summary {
  color: var(--ink2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
}

.settings-backup-refresh-note {
  margin: 2px 0 0;
  text-align: right;
}

.settings-backup-final-actions {
  align-items: center;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 8px;
}

.settings-backup-final-actions small {
  color: var(--ink3);
  font-size: 11px;
}

@media (max-width: 720px) {
  .settings-backup-head,
  .settings-backup-row {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-backup-actions {
    justify-content: stretch;
  }

  .settings-backup-actions .btn {
    flex: 1;
  }

  .settings-backup-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-backup-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

.fh-invite-notice {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10000;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  width: min(460px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 20px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient-soft, linear-gradient(135deg, rgba(124, 92, 252, 0.12), rgba(236, 72, 153, 0.10))) border-box;
  box-shadow: 0 24px 70px rgba(17, 24, 56, 0.16);
  color: var(--ink);
}

.fh-invite-notice.is-accepted {
  border-color: color-mix(in srgb, #22c55e 24%, var(--border));
  box-shadow: 0 24px 70px rgba(34, 197, 94, 0.10);
}

.fh-invite-notice-mark {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  color: var(--ink);
  font-weight: 800;
}

.fh-invite-notice-body {
  min-width: 0;
}

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

.fh-invite-notice strong {
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.fh-invite-notice span {
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
}

.fh-invite-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.fh-invite-notice .btn {
  border-width: 1px;
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1.2;
  padding: 8px 12px;
}

.fh-invite-notice .btn.btn-primary {
  background: var(--layf-accent-gradient, var(--accent));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.18);
}

.fh-invite-notice .btn.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink2);
}

.fh-invite-notice-x {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 640px) {
  .fh-invite-notice {
    right: 12px;
    bottom: 12px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .fh-invite-notice-x {
    position: absolute;
    right: 12px;
    top: 12px;
  }
}

.fh-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 0;
  background:
    radial-gradient(circle at 68% 28%, rgba(139,124,246,.10), transparent 32%),
    linear-gradient(90deg, rgba(247,248,252,.98), #ffffff 52%, #f9fafc);
  overflow: auto;
}

.fh-auth-shell {
  display: grid;
  grid-template-columns: minmax(520px, 42vw) minmax(480px, 1fr);
  gap: 0;
  min-height: 100vh;
  max-width: none;
  width: 100%;
  align-items: center;
}

.fh-auth-brand-panel {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: clamp(42px, 4vw, 64px);
  background: url("../docs/Cracow2.png") left center / cover no-repeat;
  box-shadow: none;
}

.fh-auth-brand-panel::before {
  content: none;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.04), transparent 28%, rgba(0,0,0,.46)),
    radial-gradient(circle at 16% 88%, rgba(124,58,237,.36), transparent 34%);
  pointer-events: none;
}

.fh-auth-brand-panel::after {
  content: none;
}

.fh-auth-brand-panel > * {
  position: relative;
  z-index: 1;
}

.fh-auth-brand-panel .layf-wordmark--auth {
  --layf-logo-ink: #ffffff;
  --layf-logo-muted: rgba(255,255,255,.92);
  align-self: center;
  margin: 0 auto;
  text-align: center;
}

.fh-auth-brand-panel .layf-wordmark--auth .layf-wordmark-text {
  color: #ffffff !important;
  font-size: clamp(3.2rem, 4.5vw, 4.65rem);
  text-shadow: 0 12px 34px rgba(0,0,0,.22);
  -webkit-text-fill-color: #ffffff;
}

.fh-auth-brand-panel .layf-wordmark--auth .layf-wordmark-tagline {
  color: rgba(255,255,255,.92) !important;
  font-size: clamp(1rem, 1.25vw, 1.32rem);
  margin-top: 12px;
}

.fh-auth-brand-copy {
  max-width: 560px;
  margin-top: auto;
  padding-bottom: clamp(18px, 5vh, 56px);
}

.fh-auth-kicker,
.fh-auth-welcome {
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .02em;
  margin: 0 0 12px;
}

.fh-auth-kicker {
  color: #8b7cf6;
  font-size: .95rem;
  padding: 0;
  text-transform: uppercase;
}

.fh-auth-welcome {
  color: color-mix(in srgb, var(--accent) 78%, var(--ink));
  font-size: 1rem;
  margin-bottom: 20px;
}

.fh-auth-brand-copy h1 {
  color: #ffffff;
  font-family: var(--sans);
  font-size: clamp(2.55rem, 4vw, 4.2rem);
  font-weight: 750;
  letter-spacing: -.045em;
  line-height: 1.08;
  margin: 0;
  max-width: 10.8ch;
  text-shadow: 0 18px 45px rgba(0,0,0,.34);
}

.fh-auth-brand-copy p {
  color: rgba(255,255,255,.88);
  font-size: clamp(1.2rem, 1.55vw, 1.55rem);
  line-height: 1.42;
  margin: 18px 0 0;
  max-width: 24ch;
  text-shadow: 0 12px 36px rgba(0,0,0,.34);
}

.fh-auth-brand-mid {
  display: grid;
  gap: 26px;
  margin: auto 0;
  max-width: 440px;
  width: 100%;
}

.fh-auth-benefits {
  display: grid;
  gap: 17px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 440px;
}

.fh-auth-benefits li {
  align-items: start;
  color: #ffffff;
  display: grid;
  gap: 2px 14px;
  grid-template-columns: 42px minmax(0, 1fr);
}

.fh-auth-benefits span {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.08)),
    rgba(124,58,237,.36);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  box-shadow: 0 14px 36px rgba(0,0,0,.24);
  color: #a78bfa;
  display: inline-flex;
  font-size: .92rem;
  font-weight: 900;
  grid-row: span 2;
  height: 42px;
  justify-content: center;
  width: 42px;
  backdrop-filter: blur(14px);
}

.fh-auth-benefits strong {
  color: #ffffff;
  display: block;
  font-size: .98rem;
  font-weight: 850;
  text-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.fh-auth-benefits small {
  color: rgba(255,255,255,.78);
  display: block;
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.42;
  text-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.fh-auth-visual-card {
  align-self: flex-start;
  width: min(390px, 100%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  padding: 18px 20px;
  backdrop-filter: blur(18px);
}

.fh-auth-visual-card span,
.fh-auth-visual-card small {
  color: rgba(255,255,255,.78);
  display: block;
  font-size: .86rem;
  font-weight: 750;
}

.fh-auth-visual-card span {
  color: rgba(255,255,255,.32);
  font-size: 2.4rem;
  line-height: .75;
}

.fh-auth-visual-card strong {
  color: #ffffff;
  display: block;
  font-size: .92rem;
  line-height: 1.45;
  margin: 6px 0 4px;
}

.fh-auth-testimonial-author {
  display: grid;
  gap: 1px;
  margin-top: 16px;
  padding-left: 48px;
  position: relative;
}

.fh-auth-testimonial-author::before {
  align-items: center;
  background: linear-gradient(135deg, #f4e7dc, #8b7cf6);
  border: 2px solid rgba(255,255,255,.34);
  border-radius: 50%;
  color: #ffffff;
  content: "T";
  display: inline-flex;
  font-weight: 850;
  height: 34px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 1px;
  width: 34px;
}

.fh-auth-testimonial-author b {
  color: #ffffff;
  font-size: .86rem;
}

.fh-auth-testimonial-author em {
  color: rgba(255,255,255,.70);
  font-size: .72rem;
  font-style: normal;
  font-weight: 650;
}

.fh-auth-card {
  align-self: center;
  width: 100%;
  border: 1px solid rgba(17,24,56,.08);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(17,24,56,.10);
  justify-self: center;
  max-width: 590px;
  padding: clamp(38px, 4vw, 56px);
}

.fh-auth-gate > .fh-auth-card {
  width: min(100%, 520px);
}

.fh-auth-card .eyebrow {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fh-auth-card h1 {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: clamp(2.12rem, 3vw, 2.85rem);
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -.045em;
  text-align: left;
}

.fh-auth-copy {
  margin: 0 0 22px;
  max-width: 40ch;
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.45;
  text-align: left;
}

.fh-auth-form {
  display: grid;
  gap: 11px;
}

.fh-auth-google {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 18px;
  font-weight: 820;
  cursor: pointer;
}

.fh-auth-google span {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface) !important;
  border: 1px solid var(--border);
  color: var(--ink) !important;
  font-weight: 850;
}

.fh-auth-google-icon {
  flex: 0 0 auto;
  height: 20px;
  width: 20px;
}

.fh-auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 650;
}

.fh-auth-divider::before,
.fh-auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}

.fh-auth-form label {
  display: grid;
  gap: 7px;
}

.fh-auth-form label span {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fh-auth-form input {
  width: 100%;
  min-height: 58px;
  border-radius: 16px;
  font: inherit;
  padding: 0 16px;
}

.fh-auth-password-wrap {
  position: relative;
}

.fh-auth-password-wrap .fh-auth-password-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
}

.fh-auth-password-wrap .fh-auth-password-toggle:hover {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
}

.fh-auth-password-wrap .fh-auth-password-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 62%, transparent);
  outline-offset: 1px;
}

.fh-auth-password-wrap .fh-auth-password-toggle svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  width: 20px;
}

.fh-auth-password-wrap input {
  padding-right: 58px;
}

.fh-auth-form input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.fh-auth-message {
  min-height: 20px;
  margin: 0;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.4;
}

.fh-auth-actions {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.fh-auth-actions button {
  min-height: 58px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  font-weight: 760;
  cursor: pointer;
}

.fh-auth-link {
  justify-self: end;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 2px 0;
  cursor: pointer;
}

.fh-auth-mobile-logo {
  display: none !important;
}

.fh-auth-card-logo {
  --layf-logo-ink: var(--ink);
  --layf-logo-muted: var(--ink2);
  display: block;
  margin: 0 auto 32px;
  text-align: center;
}

.fh-auth-card-logo .layf-wordmark-text {
  font-size: clamp(3rem, 5vw, 4rem);
}

.fh-auth-card-logo .layf-wordmark-tagline {
  font-size: .98rem;
  margin-top: 8px;
}

.fh-auth-security {
  align-items: center;
  color: var(--ink2);
  display: grid;
  gap: 2px 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  font-size: .82rem;
  line-height: 1.45;
  margin: 14px 0 0;
  text-align: left;
}

.fh-auth-security-icon {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: inline-flex;
  font-size: 1rem;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.fh-auth-security strong {
  color: var(--ink2);
  display: block;
}

@media (min-width: 901px) and (max-height: 780px) {
  .fh-auth-brand-panel {
    padding: clamp(30px, 3.1vw, 44px);
  }

  .fh-auth-brand-panel .layf-wordmark--auth .layf-wordmark-text {
    font-size: clamp(2.85rem, 4.1vw, 4rem);
  }

  .fh-auth-benefits {
    gap: 11px;
  }

  .fh-auth-brand-mid {
    gap: 16px;
  }

  .fh-auth-visual-card {
    padding: 14px 16px;
  }

  .fh-auth-card {
    max-width: 560px;
    padding: 28px 36px;
  }

  .fh-auth-welcome {
    margin-bottom: 10px;
  }

  .fh-auth-card h1 {
    font-size: 2.12rem;
    letter-spacing: -.035em;
  }

  .fh-auth-copy {
    margin-bottom: 14px;
  }

  .fh-auth-form {
    gap: 7px;
  }

  .fh-auth-google,
  .fh-auth-form input,
  .fh-auth-actions button {
    min-height: 48px;
  }

  .fh-auth-form label {
    gap: 5px;
  }

  .fh-auth-actions {
    gap: 8px;
  }

  .fh-auth-message {
    min-height: 8px;
  }

  .fh-auth-security {
    margin-top: 8px;
  }
}

@media (max-width: 1120px) {
  .fh-auth-shell {
    grid-template-columns: 1fr;
    max-width: 520px;
    width: min(520px, calc(100% - 28px));
  }

  .fh-auth-brand-panel {
    display: none;
  }

  .fh-auth-card {
    border-radius: 26px;
    padding: clamp(26px, 6vw, 38px);
  }

  .fh-auth-card-logo {
    display: block !important;
    margin-bottom: 22px;
  }
}

@media (max-width: 540px) {
  .fh-auth-gate {
    align-items: start;
    overflow: auto;
    padding: 14px;
  }

  .fh-auth-shell {
    width: 100%;
  }

  .fh-auth-card {
    padding: 22px;
  }

  .fh-auth-card h1 {
    font-size: 2rem;
    letter-spacing: -.04em;
  }

  .fh-auth-copy {
    font-size: .95rem;
    margin-bottom: 22px;
  }

  .fh-auth-google,
  .fh-auth-form input,
  .fh-auth-actions button {
    min-height: 52px;
  }
}

/* Wine Operations UX -------------------------------------------------------
   One compact operating surface for the WA panel. Self check-in keeps its
   own hotel palette and is intentionally not targeted by these rules. */
html[data-theme='wine-operations'] {
  --base: #f8f9fc;
  --surface: #ffffff;
  --surface2: #f0f2f7;
  --surface3: #e4e7ef;
  --line: rgba(17, 24, 56, .07);
  --line2: rgba(17, 24, 56, .04);
  --border: var(--line);
  --ink: #111827;
  --ink2: rgba(17, 24, 39, .58);
  --ink3: rgba(17, 24, 39, .36);
  --muted: var(--ink3);
  --card: var(--surface);
  --accent: #7c5cfc;
  --accent-contrast: #ffffff;
  --accent-lt: rgba(124, 92, 252, .09);
  --accent-md: rgba(124, 92, 252, .18);
  --positive: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #2563eb;
  --pos-bg: rgba(22, 163, 74, .09);
  --warn-bg: rgba(217, 119, 6, .09);
  --danger-bg: rgba(220, 38, 38, .08);
  --info-bg: rgba(37, 99, 235, .08);
  --shadow-xs: 0 1px 2px rgba(17, 24, 56, .04);
  --shadow-sm: 0 1px 6px rgba(17, 24, 56, .06), 0 0 0 1px rgba(17, 24, 56, .03);
  --shadow-md: 0 4px 14px rgba(17, 24, 56, .07), 0 0 0 1px rgba(17, 24, 56, .03);
  --shadow-lg: 0 14px 36px rgba(17, 24, 56, .1), 0 0 0 1px rgba(17, 24, 56, .03);
  --layf-accent-coral: #fb923c;
  --layf-accent-pink: #ec4899;
  --layf-accent-lavender: #c084fc;
  --layf-accent-violet: #7c3aed;
  --layf-accent-gradient: linear-gradient(135deg, #fb923c 0%, #ec4899 34%, #c084fc 68%, #7c3aed 100%);
  --layf-accent-gradient-soft: linear-gradient(135deg, rgba(251, 146, 60, .1) 0%, rgba(236, 72, 153, .1) 35%, rgba(192, 132, 252, .12) 70%, rgba(124, 58, 237, .12) 100%);
  --layf-accent-soft-bg: rgba(192, 132, 252, .08);
  --layf-accent-soft-bg-hover: rgba(192, 132, 252, .14);
  --layf-accent-border: rgba(192, 132, 252, .3);
  --layf-accent-text: #7c3aed;
  --layf-accent-text-soft: #5b42d6;
}

html[data-theme='wine-operations'][data-dark='true'] {
  --base: #0e0f1a;
  --surface: #161728;
  --surface2: #1e2038;
  --surface3: #252840;
  --line: rgba(255, 255, 255, .08);
  --line2: rgba(255, 255, 255, .05);
  --border: var(--line);
  --ink: #f3f4f8;
  --ink2: rgba(243, 244, 248, .68);
  --ink3: rgba(243, 244, 248, .42);
  --muted: var(--ink3);
  --card: var(--surface);
  --accent: #a78bfa;
  --accent-contrast: #0e0f1a;
  --accent-lt: rgba(167, 139, 250, .14);
  --accent-md: rgba(167, 139, 250, .26);
  --positive: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
  --info: #60a5fa;
  --pos-bg: rgba(74, 222, 128, .14);
  --warn-bg: rgba(251, 191, 36, .14);
  --danger-bg: rgba(248, 113, 113, .14);
  --info-bg: rgba(96, 165, 250, .14);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .03);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .03);
  --layf-accent-soft-bg: rgba(192, 132, 252, .14);
  --layf-accent-soft-bg-hover: rgba(192, 132, 252, .22);
  --layf-accent-border: rgba(192, 132, 252, .42);
  --layf-accent-text: #d8b4fe;
  --layf-accent-text-soft: #c4b5fd;
}

html[data-theme='wine-operations'] .main {
  background: var(--base);
}

html[data-theme='wine-operations'] .module-header .page-title {
  letter-spacing: 0;
  font-size: clamp(27px, 2vw, 34px);
  font-weight: 700;
}

html[data-theme='wine-operations'] .module-header .page-sub {
  max-width: 720px;
  font-size: 13px;
}

html[data-theme='wine-operations'] .btn-primary,
html[data-theme='wine-operations'] button.btn-primary {
  border-color: var(--accent);
  background: var(--accent);
}

/* Restore the airy Layf navigation language while keeping one WA theme. */
html[data-theme='wine-operations'] .sidebar {
  background: #ffffff;
  border-right-color: rgba(17, 24, 39, .06);
  box-shadow: none;
}

html[data-theme='wine-operations'] .sidebar-section-label {
  color: rgba(17, 24, 39, .32);
}

html[data-theme='wine-operations'] .nav-item:hover {
  background: rgba(17, 24, 39, .04);
  color: var(--ink);
}

html[data-theme='wine-operations'] .nav-item.is-active,
html[data-theme='wine-operations'] .nav-item.active {
  background: var(--layf-accent-gradient-soft);
  border-color: var(--layf-accent-border);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--layf-accent-border);
}

html[data-theme='wine-operations'] .nav-icon,
html[data-theme='wine-operations'] .more-item-icon,
html[data-theme='wine-operations'] .bn-icon {
  filter: none;
  opacity: 1;
}

html[data-theme='wine-operations'] [data-nav='dashboard'] .nav-icon { color: #f97316; }
html[data-theme='wine-operations'] [data-nav='waFinance'] .nav-icon { color: #14b8a6; }
html[data-theme='wine-operations'] [data-nav='reservations'] .nav-icon { color: #ec4899; }
html[data-theme='wine-operations'] [data-nav='checkinAudit'] .nav-icon { color: #22c55e; }
html[data-theme='wine-operations'] [data-nav='waBuilding'] .nav-icon { color: #8b5cf6; }
html[data-theme='wine-operations'] [data-nav='services'] .nav-icon { color: #f59e0b; }
html[data-theme='wine-operations'] [data-nav='inspections'] .nav-icon { color: #6366f1; }
html[data-theme='wine-operations'] [data-nav='accessControl'] .nav-icon { color: #8b5cf6; }
html[data-theme='wine-operations'] [data-nav='cleaningSchedule'] .nav-icon { color: #06b6d4; }
html[data-theme='wine-operations'] [data-nav='inventory'] .nav-icon { color: #f97316; }
html[data-theme='wine-operations'] [data-nav='waEmergency'] .nav-icon { color: #dc2626; }
html[data-theme='wine-operations'] [data-nav='settings'] .nav-icon { color: #64748b; }

html[data-theme='wine-operations'] .page-wrap.module-page :where(
  .svc-module-tab.is-active,
  .svc-prop-chip.is-active,
  .svc-type-tab.is-active,
  .insp-tab.is-active,
  .ac-prop-pill.is-active,
  .ac-type-tab.is-active,
  .cs-ptab--active,
  .shopping-list-tab.is-active
) {
  border-color: var(--layf-accent-border) !important;
  background: var(--layf-accent-gradient-soft) !important;
  color: var(--ink) !important;
  box-shadow: 0 3px 9px color-mix(in srgb, var(--layf-accent-violet) 14%, transparent) !important;
}

/* Dashboard: decision first, then compact today and upcoming work. */
.wa-dashboard-page .module-page-content { gap: 14px; }

.wa-dash-today-strip {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.15fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 96px;
  padding: 17px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 8px;
  color: #fbf8ef;
  background:
    linear-gradient(90deg, rgba(31, 35, 31, .94), rgba(31, 35, 31, .78)),
    url('/assets/wa-dashboard-hero-2026.png') center 54% / cover;
  box-shadow: var(--shadow-sm);
}

.wa-dash-today-main,
.wa-dash-today-status,
.wa-dash-today-count { min-width: 0; }

.wa-dash-today-main > span,
.wa-dash-today-main > small,
.wa-dash-today-count span,
.wa-dash-today-status small {
  display: block;
  color: rgba(251, 248, 239, .7);
  font-size: 11px;
  line-height: 1.35;
}

.wa-dash-today-main > span,
.wa-dash-today-count span {
  margin-bottom: 3px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.wa-dash-today-main > strong {
  display: block;
  margin-bottom: 3px;
  font-size: 22px;
  line-height: 1.1;
}

.wa-dash-today-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-left: 1px solid rgba(251, 248, 239, .25);
}

.wa-dash-today-status i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #70c495;
}

.wa-dash-today-status i.is-warn { background: #e5b36c; }
.wa-dash-today-status strong { display: block; font-size: 13px; line-height: 1.3; }

.wa-dash-today-count {
  min-width: 92px;
  padding-left: 18px;
  border-left: 1px solid rgba(251, 248, 239, .25);
  text-align: right;
}

.wa-dash-today-count strong { display: block; font-size: 34px; line-height: .95; }

.wa-dash-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wa-dash-metric { min-height: 76px; padding: 11px 13px; border-radius: 7px; box-shadow: none; }
.wa-dash-metric strong { font-size: clamp(21px, 2vw, 29px); }
.wa-dash-metric.is-revenue,
.wa-dash-metric.is-info,
.wa-dash-metric.is-neutral { border-top-color: var(--accent); }

.wa-dash-priority { border-radius: 7px; box-shadow: none; }
.wa-dash-priority-list { grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); }
.wa-dash-priority-row { border-radius: 6px; background: var(--surface2); }

.wa-dash-work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.wa-dash-work-column { display: grid; gap: 9px; min-width: 0; }
.wa-dash-work-column > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 1px; }
.wa-dash-work-column > header h2 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 750; }
.wa-dash-work-column > header span { color: var(--ink2); font-size: 11px; text-align: right; }
.wa-dash-card { border-radius: 7px; box-shadow: none; }
.wa-dash-card header { padding: 12px 14px 9px; }
.wa-dash-card h2 { font-size: 15px; }
.wa-dash-card header p { font-size: 12px; }
.wa-dash-row { min-height: 47px; padding: 8px 14px; }
.wa-dash-source { padding: 5px 8px; font-size: 10px; }

.wa-dash-data-state {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.wa-dash-data-state summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 40px;
  padding: 0 13px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.wa-dash-data-state summary::-webkit-details-marker { display: none; }
.wa-dash-data-state summary span { font-size: 13px; font-weight: 700; }
.wa-dash-data-state summary small { color: var(--ink2); font-size: 11px; }
.wa-dash-data-state[open] summary { border-bottom: 1px solid var(--line2); }
.wa-dash-data-state .wa-dash-source-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wa-dash-data-state .wa-dash-source-list article { padding: 12px; }

/* Reservations: keep the ledger as the central working surface. */
.wa-res-page { gap: 12px; }
.wa-res-source {
  min-height: 52px;
  padding: 11px 14px;
  border-radius: 7px;
  background: var(--surface);
  box-shadow: none;
}
.wa-res-source > div { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.wa-res-source > div > span { color: var(--accent); font-size: 12px; font-weight: 750; white-space: nowrap; }
.wa-res-source h2 { margin: 0; font-size: 14px; font-weight: 700; }
.wa-res-health { min-height: 28px; padding: 5px 9px; font-size: 11px; }
.wa-res-health.is-loading i,
.wa-res-health.is-waiting i { background: var(--warning); }
.wa-res-refresh.is-loading { border-color: color-mix(in srgb, var(--warning) 32%, var(--border)); color: var(--warning); }
.wa-res-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wa-res-kpis article { min-height: 76px; padding: 10px 12px; border-radius: 7px; box-shadow: none; }
.wa-res-kpis strong { font-size: clamp(20px, 2vw, 28px); }
.wa-res-filters { gap: 8px; padding: 11px 12px; border-radius: 7px; box-shadow: none; }
.wa-res-filters input,
.wa-res-filters select { min-height: 38px; border-radius: 6px; padding: 7px 9px; }
.wa-res-list { gap: 5px; }
.wa-res-row { min-height: 58px; padding: 9px 12px; border-radius: 6px; box-shadow: none; }
.wa-res-data-state { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.wa-res-data-state summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 13px; cursor: pointer; list-style: none; }
.wa-res-data-state summary::-webkit-details-marker { display: none; }
.wa-res-data-state summary > span { color: var(--ink); font-size: 13px; font-weight: 700; }
.wa-res-data-state summary > small { color: var(--ink2); font-size: 11px; text-align: right; }
.wa-res-data-state[open] summary { border-bottom: 1px solid var(--line2); }
.wa-res-data-state-body { display: grid; gap: 10px; padding: 12px 13px; }
.wa-res-data-state-body > p { margin: 0; color: var(--ink2); font-size: 12px; line-height: 1.45; }
.wa-res-data-state .wa-res-run-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.wa-res-data-state .wa-res-run-list article { padding: 8px; border-radius: 6px; }

/* Settings: five focused operating groups, with technical actions off the default tab. */
.settings-tabs { gap: 7px; }
.settings-tab { min-height: 34px; padding-inline: 12px; border-radius: 999px; font-size: 12px; }
.settings-tab.is-active { box-shadow: none; }
.settings-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.settings-mode-choice { display: grid; gap: 3px; min-height: 64px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface2); color: var(--ink); text-align: left; cursor: pointer; }
.settings-mode-choice:hover { border-color: color-mix(in srgb, var(--accent) 46%, var(--border)); }
.settings-mode-choice.is-active { border-color: var(--accent); background: var(--accent-lt); }
.settings-mode-choice strong { font-size: 13px; }
.settings-mode-choice small { color: var(--ink2); font-size: 11px; line-height: 1.35; }
.settings-workspace .settings-backup-panel { border-radius: 7px; box-shadow: none; }

@media (max-width: 980px) {
  .wa-dash-work-grid { grid-template-columns: 1fr; }
  .wa-dash-today-strip { grid-template-columns: minmax(160px, .8fr) minmax(0, 1.2fr) auto; }
  .wa-res-data-state .wa-res-run-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .wa-dash-today-strip { grid-template-columns: 1fr auto; gap: 12px; min-height: 0; padding: 14px; }
  .wa-dash-today-status { grid-column: 1 / -1; padding: 9px 0 0; border-top: 1px solid rgba(251, 248, 239, .22); border-left: 0; }
  .wa-dash-today-count { padding-left: 12px; }
  .wa-dash-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-dash-work-column > header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .wa-dash-work-column > header span { text-align: left; }
  .wa-dash-data-state .wa-dash-source-list,
  .wa-res-data-state .wa-res-run-list { grid-template-columns: 1fr; }
  .wa-res-source { align-items: flex-start; gap: 8px; }
  .wa-res-source > div { align-items: flex-start; flex-direction: column; gap: 1px; }
  .wa-res-kpis { grid-template-columns: 1fr; }
  .wa-res-data-state summary { align-items: flex-start; flex-direction: column; justify-content: center; gap: 1px; padding-block: 8px; }
  .settings-mode-grid { grid-template-columns: 1fr; }
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

.page-wrap.module-page {
  box-sizing: border-box;
  width: min(100%, var(--layf-page-max));
  max-width: var(--layf-page-max);
  margin-inline: auto;
  padding: var(--layf-page-gutter);
  gap: var(--layf-page-gap);
}

.module-page-content {
  min-width: 0;
}

.module-header {
  align-items: flex-end;
  gap: 18px;
  margin: 0 0 18px;
}

.module-header-actions {
  gap: 8px;
}

@media (max-width: 640px) {
  .module-header {
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
  }
  .module-header-main {
    width: 100%;
  }
  .module-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

.page-title,
.module-hero-title,
.module-hero-compact-title,
.ftree-title,
.ftree-empty h2 {
  font-family: var(--font-heading);
  letter-spacing: 0;
}

.section-title,
.settings-profile-copy h2,
.settings-grid .section-title,
.settings-privacy-head strong,
.settings-module-card-copy strong {
  font-family: var(--font-body);
  font-weight: var(--weight-section-title);
  letter-spacing: 0;
}

.btn,
button.btn,
.fh-dialog-btn,
.settings-page .btn,
.module-form-modal .btn,
.ftree-panel .btn,
.planner-qm-btn-primary,
.planner-qm-btn-ghost {
  min-height: var(--control-height);
  padding-inline: var(--control-padding-x);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: color-mix(in srgb, var(--surface) 84%, var(--accent-lt));
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--weight-button);
  box-shadow: none;
}

.btn-primary,
button.btn-primary,
.fh-dialog-btn--primary,
.settings-page .btn-primary,
.settings-page button.btn-primary,
.module-header-actions .btn-primary,
.module-hero-actions .btn-primary,
.ftree-outer .btn-primary,
.ftree-panel .btn-primary,
.planner-qm-btn-primary {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  box-shadow: none !important;
}

.btn-secondary,
.btn-outline,
button.btn-outline,
.fh-dialog-btn--ghost,
.settings-page .btn-outline {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border)) !important;
  background: color-mix(in srgb, var(--surface) 86%, var(--accent-lt)) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.btn-secondary,
button.btn-secondary {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border)) !important;
  background: color-mix(in srgb, var(--surface) 78%, var(--accent-lt)) !important;
  color: var(--ink) !important;
}

.btn-outline,
button.btn-outline {
  background: var(--surface) !important;
}

.fh-dialog-input-wrap {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.fh-dialog-input-label {
  color: var(--ink2);
  font-size: .82rem;
  font-weight: var(--weight-section-title, 500);
}

.fh-dialog-input {
  width: 100%;
  min-height: var(--control-height);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: var(--control-radius);
  background: color-mix(in srgb, var(--surface) 94%, var(--accent-lt));
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
  padding: 10px 12px;
  outline: none;
}

.fh-dialog-input--textarea {
  min-height: 132px;
  resize: vertical;
}

.fh-dialog-input:focus {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.btn-ghost,
button.btn-ghost,
.planner-qm-btn-ghost {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--ink2) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.user-pill-avatar {
  overflow: hidden;
}

.user-pill-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.user-pill-admin-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 8px;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 999px;
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  color: var(--ink);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .02em;
}

.btn-danger,
button.btn-danger,
.svc-btn-danger,
.docs-mvp-danger-btn,
.planner-qm-btn-ghost.is-danger {
  border-color: color-mix(in srgb, var(--danger) 46%, var(--border)) !important;
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
}

.btn-danger:hover,
button.btn-danger:hover,
.svc-btn-danger:hover,
.docs-mvp-danger-btn:hover,
.planner-qm-btn-ghost.is-danger:hover {
  border-color: color-mix(in srgb, var(--danger) 62%, var(--border)) !important;
  background: color-mix(in srgb, var(--danger-bg) 82%, var(--danger) 18%) !important;
  color: var(--danger) !important;
}

.btn.is-active,
.btn-outline.is-active,
.settings-share-pills .btn.is-active,
.settings-page [data-lang].is-active,
.settings-page [data-lang][aria-pressed='true'],
.settings-inline-row .btn.is-active {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  box-shadow: none !important;
}

.nav-item.is-active,
.nav-item.active,
[data-nav].is-active,
[data-nav].active,
.sidebar .nav-item.is-active,
.sidebar .nav-item.active,
.bottom-nav .bn-tab.is-active,
.bottom-nav .bn-tab.active,
.family-tabs button.is-active,
.family-tabs button.active,
.health-tabs button.is-active,
.medical-tabs button.is-active,
.planner-warm-tab.is-active,
.planner-tab-chip.is-active,
.sport-warm-template .sport-tab-chip.is-active,
.sport-warm-template .sport-disc-item.is-active,
.recipes-cats .btn.is-active,
.shopping-cats .btn.is-active {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  box-shadow: none !important;
}

.nav-item.is-active *:not(.nav-icon):not(.nav-icon *),
.nav-item.active *:not(.nav-icon):not(.nav-icon *),
[data-nav].is-active *:not(.nav-icon):not(.nav-icon *),
[data-nav].active *:not(.nav-icon):not(.nav-icon *) {
  color: inherit !important;
}

/* topbar-logo has data-nav="dashboard" so it gets is-active when Dashboard is active.
   This rule MUST appear after [data-nav].is-active to win the cascade (same specificity,
   later position wins). Keeps the logo container transparent — only the icon square stays orange. */
.topbar-logo.is-active,
.topbar-logo.active {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.topbar-logo.is-active .topbar-logo-text,
.topbar-logo.active .topbar-logo-text {
  color: var(--ink) !important;
}

.fh-auth-gate {
  background:
    radial-gradient(circle at 68% 28%, rgba(139,124,246,.10), transparent 32%),
    linear-gradient(90deg, rgba(247,248,252,.98), #ffffff 52%, #f9fafc) !important;
}

.fh-auth-card {
  border: 1px solid transparent !important;
  background:
    linear-gradient(color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface) 98%, transparent)) padding-box,
    var(--layf-accent-gradient, linear-gradient(135deg, var(--accent), var(--accent-lt))) border-box !important;
  color: var(--ink) !important;
  box-shadow: 0 24px 70px rgba(17,24,56,.10), 0 1px 0 rgba(255,255,255,.75) inset !important;
  backdrop-filter: blur(18px);
}

/* ── Dashboard: rebalanced grid (main slightly narrower, aside wider) ─────── */
.layf-dash-body {
  grid-template-columns: minmax(0, 1.55fr) minmax(380px, 0.95fr) !important;
}
@media (max-width: 1100px) {
  .layf-dash-body { grid-template-columns: 1fr !important; }
}

/* ── Dashboard: Pets card — lifestyle hero with larger avatar ────────────── */
.layf-dash-pet-card {
  position: relative;
  overflow: hidden;
}
.layf-dash-pet-hero {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 14px;
}
.layf-dash-pet-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1px var(--border), 0 4px 12px rgba(17,24,39,.08);
  display: block;
}
html[data-theme='layf-core'] .layf-dash-pet-avatar {
  box-shadow: 0 0 0 1px var(--layf-accent-border), 0 4px 12px rgba(192,132,252,.18);
}
.layf-dash-pet-avatar--fallback {
  display: grid;
  place-items: center;
  background: var(--surface2);
  font-size: 32px;
  line-height: 1;
}
.layf-dash-pet-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.layf-dash-pet-info strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.01em;
}
.layf-dash-pet-info .muted {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layf-dash-pet-open {
  align-self: center;
}
.layf-dash-pet-terms {
  margin-top: 14px;
}
@media (max-width: 480px) {
  .layf-dash-pet-hero {
    grid-template-columns: 56px 1fr;
    gap: 12px;
  }
  .layf-dash-pet-avatar { width: 56px; height: 56px; }
  .layf-dash-pet-info strong { font-size: 16px; }
  .layf-dash-pet-open { grid-column: 1 / -1; margin-top: 4px; }
}

/* ── Dashboard: group labels (overdue vs. today) ──────────────────────────── */
.layf-dash-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink3);
  margin: 10px 0 2px;
  padding: 0 2px;
}
.layf-dash-group-label:first-child { margin-top: 2px; }
.layf-dash-group-label--overdue { color: var(--danger); }

/* ── Layf Core: Compact Dashboard Briefing ───────────────────────────────── */
html[data-theme='layf-core'] .dashboard-warm-hero {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: unset !important;
  padding: 14px 20px !important;
  border-radius: 16px !important;
  animation: none !important;
}
html[data-theme='layf-core'] .dashboard-warm-hero-main {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
html[data-theme='layf-core'] .dashboard-warm-hero h1 {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 3px 0 0 !important;
  line-height: 1.25 !important;
}
html[data-theme='layf-core'] .dashboard-warm-hero-meta {
  margin-top: 5px !important;
  gap: 6px !important;
}
html[data-theme='layf-core'] .dashboard-warm-hero-meta span,
html[data-theme='layf-core'] .dashboard-hero-today button {
  font-size: 11px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
}
html[data-theme='layf-core'] .dashboard-hero-today {
  margin-top: 6px !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}
/* Compact weather block — secondary, right-aligned */
html[data-theme='layf-core'] .dashboard-warm-weather {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 150px !important;
  padding: 10px 13px !important;
  border-radius: 13px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  align-self: stretch !important;
  justify-content: center !important;
}
html[data-theme='layf-core'] .dashboard-warm-weather-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  width: 100% !important;
}
html[data-theme='layf-core'] .dashboard-warm-weather-top span {
  font-size: 11px !important;
  font-weight: 600 !important;
}
html[data-theme='layf-core'] .dashboard-warm-weather-actions { display: none !important; }
html[data-theme='layf-core'] .dashboard-warm-weather-main {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 3px !important;
  margin-top: 2px !important;
}
html[data-theme='layf-core'] .dashboard-warm-weather-main strong {
  font-size: 21px !important;
  line-height: 1 !important;
}
html[data-theme='layf-core'] .dashboard-warm-weather-main span {
  font-size: 18px !important;
  filter: none !important;
}
html[data-theme='layf-core'] .dashboard-warm-weather p[data-dashboard-weather-summary] {
  font-size: 11px !important;
  text-align: right !important;
  margin: 1px 0 0 !important;
  line-height: 1.3 !important;
}
html[data-theme='layf-core'] .dashboard-warm-weather-metrics { display: none !important; }
/* Hero collapse button stays but smaller in compact mode */
html[data-theme='layf-core'] .dashboard-warm-hero .hero-collapse-btn {
  position: static !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
}

/* ── Layf Core: Compact Planner Header ───────────────────────────────────── */
html[data-theme='layf-core'] .planner-weather-hero {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: unset !important;
  padding: 14px 20px !important;
  border-radius: 16px !important;
  grid-template-columns: unset !important;
  animation: none !important;
}
/* Hide the decorative sky scene */
html[data-theme='layf-core'] .planner-weather-sky { display: none !important; }
/* Copy (left side) */
html[data-theme='layf-core'] .planner-weather-copy {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: unset !important;
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  align-items: flex-start !important;
}
html[data-theme='layf-core'] .planner-weather-copy h1 {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 3px 0 0 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
}
html[data-theme='layf-core'] .planner-weather-copy > p { display: none !important; }
html[data-theme='layf-core'] .planner-weather-stats {
  margin-top: 4px !important;
  font-size: 12px !important;
  color: var(--ink2) !important;
}
html[data-theme='layf-core'] .planner-weather-stats strong {
  color: var(--ink) !important;
}
/* Weather card (right side) */
html[data-theme='layf-core'] .planner-weather-card {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 150px !important;
  padding: 10px 13px !important;
  border-radius: 13px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  position: static !important;
  align-self: stretch !important;
  justify-content: center !important;
}
html[data-theme='layf-core'] .planner-weather-topline {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ink2) !important;
}
html[data-theme='layf-core'] .planner-weather-clock { display: none !important; }
html[data-theme='layf-core'] .planner-weather-actions { display: none !important; }
html[data-theme='layf-core'] .planner-weather-temp {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 3px !important;
  margin-top: 2px !important;
}
html[data-theme='layf-core'] .planner-weather-temp strong {
  font-size: 21px !important;
  line-height: 1 !important;
  color: var(--ink) !important;
}
html[data-theme='layf-core'] .planner-weather-temp > span {
  font-size: 18px !important;
  filter: none !important;
}
html[data-theme='layf-core'] [data-weather-summary] {
  font-size: 11px !important;
  text-align: right !important;
  margin: 1px 0 0 !important;
  line-height: 1.3 !important;
  color: var(--ink2) !important;
}
html[data-theme='layf-core'] .planner-weather-metrics { display: none !important; }
/* Collapse btn in compact planner */
html[data-theme='layf-core'] .planner-weather-hero .hero-collapse-btn {
  position: static !important;
  align-self: flex-start !important;
}
/* ── Topbar: ~20% taller + premium spacing ──────────────────────────────── */
:root { --topbar-h: 62px !important; }
@media (max-width: 767px) {
  :root { --topbar-h: 60px !important; }
}
.topbar { padding: 0 14px 0 12px !important; gap: 10px !important; }

.topbar-right {
  --topbar-action-size: 40px;
}

.topbar-right .cloud-refresh-btn,
.topbar-right .theme-toggle-btn,
.topbar-right .signout-btn {
  width: var(--topbar-action-size) !important;
  height: var(--topbar-action-size) !important;
  min-width: var(--topbar-action-size) !important;
  flex: 0 0 var(--topbar-action-size) !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: var(--surface) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
  overflow: hidden;
}

.topbar-right .cloud-refresh-btn:focus,
.topbar-right .theme-toggle-btn:focus,
.topbar-right .signout-btn:focus,
.topbar-right .user-pill:focus {
  outline: none !important;
}

.topbar-right .user-pill {
  -webkit-tap-highlight-color: transparent;
}

.topbar-right .cloud-refresh-btn:focus-visible,
.topbar-right .theme-toggle-btn:focus-visible,
.topbar-right .signout-btn:focus-visible,
.topbar-right .user-pill:focus-visible {
  outline: none !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 3px var(--layf-accent-border, color-mix(in srgb, var(--accent) 22%, transparent)) !important;
}

.topbar-right .cloud-refresh-btn {
  font-size: 22px !important;
}

.topbar-right .cloud-refresh-btn.is-refreshing {
  cursor: progress !important;
  opacity: .92;
}

.topbar-right .cloud-refresh-btn.is-refreshing {
  animation: layf-refresh-spin .7s linear infinite;
}

@keyframes layf-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.topbar-right .theme-toggle-btn {
  font-size: 19px !important;
}

.topbar-right .signout-btn svg {
  width: 20px !important;
  height: 20px !important;
}

/* Subtle Layf gradient accent strip below the topbar (replaces flat violet) */
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #fb923c 0%, #ec4899 35%, #c084fc 70%, #7c3aed 100%);
  pointer-events: none;
  opacity: .85;
}
html[data-dark='true'] .topbar::after { opacity: .6; }

/* User pill avatar — fill the circle properly, no empty padding */
.user-pill-avatar {
  width: var(--topbar-action-size, 40px) !important;
  height: var(--topbar-action-size, 40px) !important;
  min-width: var(--topbar-action-size, 40px) !important;
  flex: 0 0 var(--topbar-action-size, 40px) !important;
  font-size: 13px !important;
  overflow: hidden;
  padding: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.user-pill-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  display: block;
}
.user-pill {
  padding: 3px 12px 3px 3px !important;
  gap: 8px !important;
  min-height: calc(var(--topbar-action-size, 40px) + 6px);
}

/* ── Topbar user pill stays neutral, even when its data-nav matches active route ── */
/*
  The user pill carries data-nav="settings" so it can navigate to Settings.
  When Settings is the active module, the global [data-nav].is-active rule
  paints it with the active accent fill. Exclude the user pill so it stays
  neutral on every page.
*/
.user-pill,
.user-pill.is-active,
.user-pill.active,
[data-nav].is-active.user-pill,
[data-nav].active.user-pill {
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.user-pill:hover {
  background: var(--surface2) !important;
  border-color: color-mix(in srgb, var(--ink) 14%, var(--border)) !important;
}

.topbar-right .user-pill:focus-visible {
  outline: none !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 3px var(--layf-accent-border, color-mix(in srgb, var(--accent) 22%, transparent)) !important;
}

@media (max-width: 640px) {
  .topbar {
    gap: 8px !important;
    padding: 0 10px !important;
  }

  .layf-wordmark--topbar .layf-wordmark-text {
    font-size: 23px;
  }

  .topbar-right {
    gap: 6px !important;
    min-width: 0;
  }

  .user-pill {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .user-pill-avatar {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    flex-basis: 100% !important;
  }

  .user-pill [data-auth-user-label] {
    display: none !important;
  }

  .signout-btn {
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
  }
}

/* ── Layf Core: Przenieś zaległe ghost button — graphite, not purple ──────── */
html[data-theme='layf-core'] .planner-warm-overdue-btn {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--layf-accent-border) !important;
  font-weight: 700 !important;
}
html[data-theme='layf-core'] .planner-warm-overdue-btn:hover {
  background: var(--layf-accent-soft-bg-hover) !important;
  border-color: var(--layf-accent-violet) !important;
  color: var(--ink) !important;
}

/* ── Layf Core: Packing module — soften flat violet ──────────────────────── */
html[data-theme='layf-core'] .packing-trip.is-active {
  background: var(--layf-accent-soft-bg) !important;
  border-color: var(--layf-accent-border) !important;
  box-shadow: inset 3px 0 0 0 transparent !important;
  border-image: linear-gradient(180deg, #fb923c 0%, #ec4899 35%, #c084fc 70%, #7c3aed 100%) 1 !important;
}
html[data-theme='layf-core'] .packing-progress i b,
html[data-theme='layf-core'] .packing-trip i b {
  background: var(--layf-accent-gradient) !important;
}
html[data-theme='layf-core'] .packing-progress {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme='layf-core'] .packing-trip-icon {
  background: var(--layf-accent-soft-bg) !important;
}
/* Checked item visual — make the checkmark indicator subtle gradient instead
   of solid accent; keep semantic colors untouched in main.css */
html[data-theme='layf-core'] .packing-category input[type="checkbox"]:checked {
  accent-color: var(--layf-accent-violet);
}

/* ── Layf Core: Shopping — same soft treatment ───────────────────────────── */
html[data-theme='layf-core'] .shopping-card.is-active,
html[data-theme='layf-core'] .shopping-list.is-active {
  background: var(--layf-accent-soft-bg) !important;
  border-color: var(--layf-accent-border) !important;
}
html[data-theme='layf-core'] .shopping-cats .btn-primary {
  background: var(--layf-accent-soft-bg) !important;
  color: var(--ink) !important;
  border: 1px solid var(--layf-accent-border) !important;
}

/* ── Layf Core: hide Planner hero/header entirely ────────────────────────── */
html[data-theme='layf-core'] .planner-weather-hero {
  display: none !important;
}
/* Pull the toolbar (tabs) up so Planner starts cleanly */
html[data-theme='layf-core'] .planner-warm-page > .planner-warm-toolbar {
  margin-top: 0 !important;
  padding-top: 4px !important;
}

/* ── Layf Core: clean Planner tabs (no double border / outer frame) ──────── */
html[data-theme='layf-core'] .planner-warm-tabs {
  background: color-mix(in srgb, var(--surface) 86%, var(--bg)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  padding: 4px !important;
  gap: 4px !important;
}
html[data-theme='layf-core'] .planner-warm-tab {
  background: transparent !important;
  border: 0 !important;
  color: var(--ink2) !important;
  font-weight: 700 !important;
  padding: 9px 17px !important;
  border-radius: 999px !important;
}
html[data-theme='layf-core'] .planner-warm-tab:hover {
  background: rgba(192,132,252,.06) !important;
  color: var(--ink) !important;
  transform: none !important;
}
/* Note: .planner-warm-tab.is-active styling already comes from the soft-tab
   override block; that gives lavender tint + graphite text + no shadow. */

/* ── Layf Core: Dashboard today rows are neutral (overdue stays red) ──────── */
html[data-theme='layf-core'] .layf-event-row.is-today {
  border-color: var(--border) !important;
  background: var(--surface) !important;
}
html[data-theme='layf-core'] .layf-event-row.is-today .layf-event-date {
  color: var(--ink2) !important;
}
html[data-theme='layf-core'] .layf-event-row .layf-event-icon {
  background: var(--surface2) !important;
}
/* Overdue keeps existing red treatment from main.css (.is-overdue) */

/* Planner today column — subtle Layf logo-gradient accent (not flat violet) */
html[data-theme='layf-core'] .planner-warm-day.is-today {
  border: 1px solid var(--layf-accent-border) !important;
  border-image: none !important;
  background:
    linear-gradient(180deg, rgba(251,146,60,.04) 0%, rgba(192,132,252,.04) 100%),
    var(--surface) !important;
  box-shadow: 0 3px 12px rgba(17,24,39,.05) !important;
  border-radius: 18px !important;
}
html[data-theme='layf-core'] .planner-warm-day.is-today header {
  background: var(--layf-accent-soft-bg) !important;
  border-bottom-color: var(--layf-accent-border) !important;
}
html[data-theme='layf-core'] .planner-warm-day.is-today header span,
html[data-theme='layf-core'] .planner-warm-day.is-today header strong {
  color: var(--ink) !important;
}

/* Mobile: keep flex-row on compact heroes (override the grid→column fallback) */
@media (max-width: 900px) {
  html[data-theme='layf-core'] .dashboard-warm-hero,
  html[data-theme='layf-core'] .planner-weather-hero {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  html[data-theme='layf-core'] .dashboard-warm-weather,
  html[data-theme='layf-core'] .planner-weather-card {
    max-width: 120px !important;
  }
}

/* ── Layf Core: soft tabs, primary buttons, action CTAs ──────────────────── */
/*
  Globally, .btn-primary, planner-warm-primary, planner-warm-today-btn, active
  tabs (planner-warm-tab, planner-tab-chip, family-tabs, etc.) all fill with
  solid var(--accent). In Layf Core this reads as loud purple blocks.
  These overrides swap to a soft lavender tint with muted violet text.
  Energy OS keeps the saturated accent fill (no rules touch espresso).
*/

/* Soft primary buttons — gradient tint background, graphite text */
/* ── Layf Core: ALL .btn-primary everywhere → gradient-soft accent (no filled purple) ──
   Covers module headers, service pages, form footers, any module CTA.
   Uses the brand coral→pink→lavender→violet gradient at low opacity so buttons
   are clearly "Layf-styled" while remaining light and readable.
   This is the global rule — any new module using btn-primary gets this for free. */
html[data-theme='layf-core'] .btn.btn-primary,
html[data-theme='layf-core'] button.btn-primary,
html[data-theme='layf-core'] .btn-primary,
html[data-theme='layf-core'] .planner-qm-btn-primary {
  background: linear-gradient(135deg,
    rgba(251,146,60,.16) 0%,
    rgba(236,72,153,.16) 35%,
    rgba(192,132,252,.20) 70%,
    rgba(124,58,237,.20) 100%) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(124,58,237,.40) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--layf-accent-violet) 12%, transparent) !important;
}
html[data-theme='layf-core'] .btn.btn-primary:hover,
html[data-theme='layf-core'] button.btn-primary:hover,
html[data-theme='layf-core'] .btn-primary:hover,
html[data-theme='layf-core'] .planner-qm-btn-primary:hover {
  background: linear-gradient(135deg,
    rgba(251,146,60,.24) 0%,
    rgba(236,72,153,.22) 35%,
    rgba(192,132,252,.28) 70%,
    rgba(124,58,237,.28) 100%) !important;
  border-color: rgba(124,58,237,.52) !important;
  color: var(--ink) !important;
  transform: none !important;
}
html[data-theme='layf-core'] .btn.btn-primary:focus-visible,
html[data-theme='layf-core'] button.btn-primary:focus-visible,
html[data-theme='layf-core'] .btn-primary:focus-visible,
html[data-theme='layf-core'] .planner-qm-btn-primary:focus-visible {
  outline: 2px solid var(--layf-accent-lavender) !important;
  outline-offset: 2px;
}
html[data-theme='layf-core'] .btn.btn-primary:active,
html[data-theme='layf-core'] button.btn-primary:active,
html[data-theme='layf-core'] .btn-primary:active,
html[data-theme='layf-core'] .planner-qm-btn-primary:active {
  background: rgba(124,92,252,.20) !important;
}
/* Planner-specific aliases — kept separate so renaming doesn't break planner */
html[data-theme='layf-core'] .planner-warm-primary,
html[data-theme='layf-core'] .planner-warm-today-btn {
  background: var(--layf-accent-soft-bg) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--layf-accent-border) !important;
  box-shadow: none !important;
}

/* Soft active tabs / chips / segmented controls */
html[data-theme='layf-core'] .planner-warm-tab.is-active,
html[data-theme='layf-core'] .planner-tab-chip.is-active,
html[data-theme='layf-core'] .family-tabs button.is-active,
html[data-theme='layf-core'] .family-tabs button.active,
html[data-theme='layf-core'] .health-tabs button.is-active,
html[data-theme='layf-core'] .medical-tabs button.is-active,
html[data-theme='layf-core'] .recipes-cats .btn.is-active,
html[data-theme='layf-core'] .shopping-cats .btn.is-active,
html[data-theme='layf-core'] .sport-warm-template .sport-tab-chip.is-active,
html[data-theme='layf-core'] .sport-warm-template .sport-disc-item.is-active,
html[data-theme='layf-core'] .medications-filters .btn-primary {
  background: rgba(124,92,252,.11) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border-color: rgba(124,92,252,.22) !important;
  box-shadow: none !important;
}
html[data-theme='layf-core'] .planner-warm-tab:not(.is-active):hover {
  background: rgba(124,92,252,.06) !important;
  color: var(--ink) !important;
}

/* Soft outline buttons that get .is-active filled */
html[data-theme='layf-core'] .btn-outline.is-active,
html[data-theme='layf-core'] .settings-share-pills .btn.is-active,
html[data-theme='layf-core'] .settings-inline-row .btn.is-active {
  background: rgba(124,92,252,.11) !important;
  color: var(--ink) !important;
  border-color: rgba(124,92,252,.32) !important;
  box-shadow: none !important;
}

/* Bottom nav active tab */
html[data-theme='layf-core'] .bottom-nav .bn-tab.is-active,
html[data-theme='layf-core'] .bottom-nav .bn-tab.active {
  background: rgba(124,92,252,.1) !important;
  color: var(--ink) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Settings language buttons — soft selected state (override prior filled rule) */
html[data-theme='layf-core'] .settings-page [data-lang],
html[data-theme='layf-core'] .settings-page [data-lang].btn-outline {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--ink2) !important;
  border: 1px solid rgba(124,92,252,.18) !important;
  box-shadow: none !important;
}
html[data-theme='layf-core'] .settings-page [data-lang].is-active,
html[data-theme='layf-core'] .settings-page [data-lang][aria-pressed='true'] {
  background: rgba(124,92,252,.12) !important;
  color: var(--ink) !important;
  border-color: rgba(124,92,252,.32) !important;
  box-shadow: none !important;
}
html[data-theme='layf-core'] .settings-page [data-lang]:hover {
  background: rgba(124,92,252,.06) !important;
  color: var(--ink) !important;
}
html[data-dark='true'] .settings-page [data-lang],
html[data-dark='true'] .settings-page [data-lang].btn-outline {
  background: var(--surface2) !important;
  background-image: none !important;
  color: var(--ink2) !important;
  border-color: color-mix(in srgb, var(--ink) 18%, transparent) !important;
}
html[data-dark='true'] .settings-page [data-lang]:not(.is-active):hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface2)) !important;
  color: var(--ink) !important;
}
html[data-dark='true'] .settings-page [data-lang].is-active {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface2)) !important;
  color: var(--ink) !important;
  border-color: color-mix(in srgb, var(--accent) 46%, transparent) !important;
}
.settings-sharing-recipient-note {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 720;
}

/* Pets — empty state CTA spacing */
.pet-empty-cta { margin-top: 8px; }

/* Pets — overview emergency row below main grid */
.pet-overview-emergency-row { margin-top: 12px; }

/* Pets — profile chips: clean without icon */
.pets-overview-profile-card .pet-profile-tags {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.pets-overview-profile-card .pet-tag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  min-height: 0;
  grid-template-columns: unset;
}
.pets-overview-profile-card .pet-tag strong {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pets-overview-profile-card .pet-tag small {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hide any leftover icon element just in case */
.pets-overview-profile-card .pet-tag-icon { display: none; }

@media (max-width: 480px) {
  .pets-overview-profile-card .pet-profile-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Pets module — soft tabs & primary actions in Layf Core ──────────────── */
html[data-theme='layf-core'] .pet-tab-chip.is-active,
html[data-theme='layf-core'] .pets-tabs button.is-active {
  background: var(--layf-accent-soft-bg) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border-color: var(--layf-accent-border) !important;
  box-shadow: none !important;
}
html[data-theme='layf-core'] .pet-action-btn--primary,
html[data-theme='layf-core'] .pets-warm-hero-actions .pet-action-btn--primary,
html[data-theme='layf-core'] .pets-warm-page .pet-action-btn--primary {
  background: var(--layf-accent-soft-bg) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--layf-accent-border) !important;
  box-shadow: none !important;
}
html[data-theme='layf-core'] .pet-action-btn--primary:hover {
  background: var(--layf-accent-soft-bg-hover) !important;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border)) !important;
  color: var(--ink) !important;
}

/* ── Beta & Feedback — soft CTAs in Layf Core ────────────────────────────── */
html[data-theme='layf-core'] .beta-feedback-page button:not(.beta-feedback-danger):not(.beta-feedback-hide-btn),
html[data-theme='layf-core'] .beta-feedback-card-actions button:not(.beta-feedback-danger):not(.beta-feedback-hide-btn) {
  background: rgba(124,92,252,.08) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid rgba(124,92,252,.24) !important;
  box-shadow: none !important;
}
html[data-theme='layf-core'] .beta-feedback-page button:not(.beta-feedback-danger):not(.beta-feedback-hide-btn):hover,
html[data-theme='layf-core'] .beta-feedback-card-actions button:not(.beta-feedback-danger):not(.beta-feedback-hide-btn):hover {
  background: rgba(124,92,252,.14) !important;
  border-color: rgba(124,92,252,.36) !important;
  color: var(--ink) !important;
}

/* ── Beta modules: summary grid extended for hide button ─────────────────── */
.beta-feedback-item summary {
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center;
}

.beta-feedback-hide-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink2);
  cursor: pointer;
  font-size: 16px;
  height: 26px;
  line-height: 1;
  padding: 0;
  transition: background .1s, color .1s;
  width: 26px;
}

.beta-feedback-hide-btn:hover {
  background: var(--danger-bg, #fee2e2);
  border-color: var(--danger, #ef4444);
  color: var(--danger, #ef4444);
}

/* ── Settings: compact module visibility toggle rows ─────────────────────── */
.settings-module-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: var(--layf-card-radius, 16px);
  background: color-mix(in srgb, var(--surface) 94%, var(--accent-lt));
  cursor: pointer;
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.settings-module-row:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: var(--surface);
  box-shadow: var(--layf-card-shadow, 0 12px 28px rgba(17,24,56,.06));
}
.settings-module-row.is-locked { opacity: .55; cursor: not-allowed; }
.settings-module-row.is-hidden .settings-module-row-label { color: var(--ink3); }
.settings-module-row-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  text-align: center;
  overflow: hidden;
}
.settings-module-row-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.settings-module-row-label {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-module-row-switch {
  position: relative;
  width: 40px;
  height: 24px;
  flex-shrink: 0;
}
.settings-module-row-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}
.settings-module-row-input:disabled { cursor: not-allowed; }
.settings-module-row-track {
  position: absolute;
  inset: 0;
  background: var(--surface3, color-mix(in srgb, var(--ink) 14%, var(--surface2)));
  border-radius: 999px;
  transition: background .18s;
}
.settings-module-row-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(17,24,39,.18);
  transition: left .18s;
}
.settings-module-row-input:checked + .settings-module-row-track {
  background: var(--accent);
}
.settings-module-row-input:checked + .settings-module-row-track .settings-module-row-thumb {
  left: 18px;
}
/* Layf Core: switch ON uses Layf gradient instead of flat accent */
html[data-theme='layf-core'] .settings-module-row-input:checked + .settings-module-row-track {
  background: linear-gradient(135deg, #fb923c 0%, #ec4899 35%, #c084fc 70%, #7c3aed 100%) !important;
}

/* Documents Stage 1 checkpoint */
.documents-mvp-page {
  --docs-mvp-radius: 12px;
  --docs-mvp-hairline: color-mix(in srgb, var(--accent) 15%, var(--border));
  --docs-mvp-hairline-strong: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.docs-mvp-tabs {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
}

.docs-mvp-tabs button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ink2);
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  font-weight: 760;
  padding: 10px 16px;
}

.docs-mvp-tabs button.is-active {
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--layf-accent-border, var(--border));
}

.docs-mvp-summary {
  border: 1px solid var(--docs-mvp-hairline);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
  overflow: hidden;
}

.docs-mvp-summary article {
  border-right: 1px solid var(--border);
  align-items: center;
  display: flex;
  gap: 10px;
  padding: 10px 14px;
}

.docs-mvp-summary article:last-child {
  border-right: 0;
}

.docs-mvp-icon-chip {
  align-items: center;
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  border: 1px solid var(--docs-mvp-hairline);
  border-radius: 10px;
  color: var(--ink);
  display: inline-flex;
  height: 28px;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
}

.docs-mvp-icon-chip svg {
  fill: none;
  height: 15px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 15px;
}

.docs-mvp-icon-chip.is-manual { color: var(--layf-accent-violet, var(--accent)); }
.docs-mvp-icon-chip.is-pages { color: var(--ink2); }
.docs-mvp-icon-chip.is-warranty { color: color-mix(in srgb, #059669 80%, var(--ink2)); }
.docs-mvp-icon-chip.is-document { color: var(--layf-accent-lavender, var(--accent)); }

.docs-mvp-summary strong {
  color: var(--ink);
  display: block;
  font-size: 1.3rem;
  line-height: 1;
}

.docs-mvp-summary small {
  color: var(--ink2);
  display: block;
  font-size: .76rem;
  font-weight: 720;
}

.docs-mvp-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(360px, .88fr) minmax(0, 1.12fr);
}

.docs-mvp-list,
.docs-mvp-detail > .card,
.docs-mvp-reader,
.docs-mvp-placeholder {
  border: 1px solid var(--docs-mvp-hairline);
  border-radius: var(--docs-mvp-radius);
}

.docs-mvp-list {
  padding: 16px;
}

.docs-mvp-list > header {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.docs-mvp-list h2,
.docs-mvp-detail h2,
.docs-mvp-reader h3,
.docs-mvp-notes h3,
.docs-mvp-placeholder h2 {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 0;
}

.docs-mvp-list p,
.docs-mvp-detail p,
.docs-mvp-reader p,
.docs-mvp-placeholder p {
  color: var(--ink2);
  margin: 4px 0 0;
}

.docs-mvp-cards {
  display: grid;
  gap: 10px;
}

.docs-mvp-manual-card {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--docs-mvp-hairline);
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 68px;
  padding: 10px 12px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.docs-mvp-manual-card:hover,
.docs-mvp-manual-card:focus-visible {
  border-color: var(--layf-accent-border, var(--border));
  outline: none;
  transform: translateY(-1px);
}

.docs-mvp-manual-card.is-active {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient, linear-gradient(135deg, var(--accent), var(--accent-lt))) border-box;
  border-color: transparent;
}

.docs-mvp-detail-cover {
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface2));
  border-radius: 10px;
  padding: 8px;
  overflow: hidden;
}

.docs-mvp-detail-cover img {
  border-radius: 6px;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.docs-mvp-detail-head--no-cover {
  grid-template-columns: minmax(0, 1fr);
}

.docs-mvp-row-icon {
  align-items: center;
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  border: 1px solid var(--docs-mvp-hairline);
  border-radius: 10px;
  color: var(--ink);
  display: inline-flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.docs-mvp-row-icon svg {
  fill: none;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 17px;
}

.docs-mvp-row-icon.is-manual { color: var(--layf-accent-violet, var(--accent)); }
.docs-mvp-row-icon.is-warranty { color: color-mix(in srgb, #059669 80%, var(--ink2)); }
.docs-mvp-row-icon.is-both { color: var(--layf-accent-lavender, var(--accent)); }

.docs-mvp-cover-fallback {
  align-items: center;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.82), transparent 28%),
    var(--layf-accent-gradient-soft, var(--accent-lt));
  border: 1px solid var(--docs-mvp-hairline);
  border-radius: 12px;
  color: var(--ink);
  display: grid;
  gap: 6px;
  font-weight: 850;
  height: 100%;
  justify-content: center;
  place-items: center;
  width: 100%;
}

.docs-mvp-cover-fallback svg {
  fill: none;
  height: 26px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 26px;
}

.docs-mvp-cover-fallback span {
  color: var(--ink2);
  font-size: .72rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.docs-mvp-cover-fallback--detail svg {
  height: 42px;
  width: 42px;
}

.docs-mvp-card-topline,
.docs-mvp-card-meta {
  color: var(--ink2);
  display: flex;
  flex-wrap: wrap;
  font-size: .78rem;
  font-weight: 720;
  gap: 8px;
}

.docs-mvp-card-body {
  min-width: 0;
  padding: 2px 0;
}

.docs-mvp-card-meta span {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}

.docs-mvp-card-meta svg {
  fill: none;
  height: 13px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  width: 13px;
}

.docs-mvp-card-body h3 {
  color: var(--ink);
  font-size: 1.03rem;
  margin: 4px 0;
}

.docs-mvp-card-body p {
  color: var(--ink2);
  margin: 0 0 8px;
}

.docs-mvp-card-chevron {
  display: none;
}

.docs-mvp-detail {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.docs-mvp-detail-head {
  align-items: center;
  display: grid;
  gap: 22px;
  grid-template-columns: 132px minmax(0, 1fr);
  padding: 16px;
}

.docs-mvp-chip {
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  border: 1px solid var(--docs-mvp-hairline);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: .78rem;
  font-weight: 820;
  padding: 5px 10px;
}

.docs-mvp-kind {
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: .74rem;
  font-weight: 820;
  padding: 4px 9px;
}

.docs-mvp-kind.is-manual {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}

.docs-mvp-kind.is-warranty {
  background: color-mix(in srgb, #059669 9%, var(--surface));
  border-color: color-mix(in srgb, #059669 18%, var(--border));
}

.docs-mvp-kind.is-both {
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  border-color: var(--docs-mvp-hairline-strong);
}

.docs-mvp-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.docs-mvp-detail-toolbar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.docs-mvp-detail-toolbar .btn {
  flex: 0 0 auto;
}

.docs-mvp-detail-toolbar .btn,
.docs-mvp-danger-btn {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.docs-mvp-danger-row {
  display: flex;
  justify-content: flex-end;
}

.docs-mvp-danger-btn {
  border-color: color-mix(in srgb, var(--danger, #dc2626) 22%, var(--border));
  color: color-mix(in srgb, var(--danger, #dc2626) 84%, var(--ink));
}

.docs-mvp-danger-btn svg {
  fill: none;
  height: 15px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 15px;
}

.docs-mvp-detail-head h2 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  margin-top: 8px;
}

.docs-mvp-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.docs-mvp-facts div {
  border-right: 1px solid var(--border);
  display: grid;
  gap: 4px;
  padding: 14px;
}

.docs-mvp-facts div:last-child {
  border-right: 0;
}

.docs-mvp-facts span {
  color: var(--ink2);
  font-size: .78rem;
  font-weight: 760;
}

.docs-mvp-facts strong {
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-mvp-notes small {
  color: var(--ink2);
  display: block;
  font-weight: 720;
  margin-top: 10px;
}

/* reader CSS removed — replaced by docs-mvp-files thumbnail strip + lightbox */

.docs-mvp-placeholder {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 52px minmax(0, 1fr);
}

.docs-mvp-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.docs-mvp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17,24,56,.22);
  backdrop-filter: blur(14px);
}

.docs-mvp-modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(17,24,56,.18);
  display: grid;
  gap: 18px;
  left: 50%;
  max-height: min(760px, calc(100vh - 32px));
  max-width: 760px;
  overflow: auto;
  padding: 22px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 28px));
}

.docs-mvp-modal-card header,
.docs-mvp-modal-card footer {
  align-items: center;
  background: var(--surface);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  position: sticky;
  z-index: 1;
}

.docs-mvp-modal-card header {
  top: -22px;
  padding-top: 2px;
}

.docs-mvp-modal-card footer {
  bottom: -22px;
  border-top: 1px solid var(--border);
  margin: 0 -22px -22px;
  padding: 14px 22px 18px;
}

.docs-mvp-modal-card header button {
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink2);
  cursor: pointer;
  display: flex;
  font-size: 1.2rem;
  height: 38px;
  justify-content: center;
  width: 38px;
}

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

.docs-mvp-form-grid label {
  color: var(--ink2);
  display: grid;
  font-size: .82rem;
  font-weight: 760;
  gap: 7px;
}

.docs-mvp-form-grid label small {
  color: var(--ink3);
  font-weight: 650;
}

.docs-mvp-form-grid .is-wide {
  grid-column: 1 / -1;
}

.docs-mvp-file-pair {
  color: var(--ink2);
  display: grid;
  font-size: .82rem;
  font-weight: 760;
  gap: 6px;
}

.docs-mvp-file-title {
  color: var(--ink2);
  font-size: .82rem;
  font-weight: 760;
}

.docs-mvp-file-pair small {
  color: var(--ink3);
  font-size: .78rem;
  font-weight: 650;
}

.docs-mvp-form-grid input,
.docs-mvp-form-grid select,
.docs-mvp-form-grid textarea {
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  min-width: 0;
  padding: 10px 12px;
}

.docs-mvp-form-placeholder {
  background: var(--surface2);
  border: 1px dashed var(--docs-mvp-hairline-strong);
  border-radius: 10px;
  color: var(--ink2);
  display: flex;
  gap: 12px;
  padding: 14px;
}

.docs-mvp-form-placeholder strong {
  color: var(--ink);
  display: block;
  margin-bottom: 3px;
}

.docs-mvp-existing-pages {
  border: 1px solid var(--docs-mvp-hairline);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.docs-mvp-existing-pages > strong {
  color: var(--ink);
  font-size: .86rem;
}

.docs-mvp-existing-pages label {
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 9px 10px;
}

.docs-mvp-existing-pages label span {
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-mvp-existing-pages input {
  height: 16px;
  width: 16px;
}

.docs-mvp-kind-picker {
  border: 1px solid var(--docs-mvp-hairline);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 12px;
}

.docs-mvp-kind-picker legend {
  color: var(--ink2);
  font-size: .82rem;
  font-weight: 760;
  padding: 0 6px;
}

.docs-mvp-kind-picker label {
  display: block;
}

.docs-mvp-kind-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.docs-mvp-kind-picker span {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ink2);
  cursor: pointer;
  display: flex;
  font-weight: 820;
  gap: 8px;
  justify-content: center;
  padding: 11px 12px;
}

.docs-mvp-kind-picker svg {
  fill: none;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 17px;
}

.docs-mvp-kind-picker input:checked + span {
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  border-color: var(--docs-mvp-hairline-strong);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}

.docs-mvp-empty {
  align-items: center;
  border: 1px dashed var(--docs-mvp-hairline-strong);
  border-radius: 12px;
  color: var(--ink2);
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 28px 18px;
  text-align: center;
}

.docs-mvp-empty h3 {
  color: var(--ink);
  margin: 6px 0 0;
}

.docs-mvp-empty p {
  margin: 0 0 8px;
}

/* Files thumbnail strip */
.docs-mvp-files {
  /* inherits card + panel padding */
}

.docs-mvp-files-header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.docs-mvp-files-header h3 {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 760;
  margin: 0;
}

.docs-mvp-files-count {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink2);
  font-size: .76rem;
  font-weight: 760;
  padding: 2px 8px;
}

.docs-mvp-file-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.docs-mvp-file-thumb {
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  height: 72px;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  transition: transform .14s ease, border-color .14s ease;
  width: 72px;
}

.docs-mvp-file-thumb:hover {
  border-color: var(--layf-accent-border, var(--accent));
  transform: scale(1.06);
}

.docs-mvp-file-thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.docs-mvp-file-thumb-icon {
  color: var(--ink2);
  display: flex;
}

.docs-mvp-file-thumb-icon svg {
  fill: none;
  height: 24px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  width: 24px;
}

/* Lightbox */
.docs-mvp-lightbox {
  display: grid;
  inset: 0;
  place-items: center;
  position: fixed;
  z-index: 1400;
}

.docs-mvp-lb-backdrop {
  backdrop-filter: blur(20px);
  background: rgba(8, 8, 18, 0.9);
  cursor: pointer;
  inset: 0;
  position: absolute;
}

.docs-mvp-lb-stage {
  max-height: 90vh;
  max-width: min(960px, 90vw);
  position: relative;
  z-index: 1;
}

.docs-mvp-lb-stage img {
  border-radius: 10px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65);
  display: block;
  max-height: 88vh;
  max-width: 100%;
  object-fit: contain;
}

.docs-mvp-lb-empty {
  align-items: center;
  color: rgba(255,255,255,.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.docs-mvp-lb-empty svg {
  fill: none;
  height: 48px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
  width: 48px;
}

.docs-mvp-lb-close {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 1.4rem;
  height: 40px;
  line-height: 1;
  position: absolute;
  right: 18px;
  top: 18px;
  width: 40px;
  z-index: 2;
}

.docs-mvp-lb-close:hover {
  background: rgba(255,255,255,.2);
}

.docs-mvp-lb-nav {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 300;
  height: 48px;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: background .14s ease;
  width: 48px;
  z-index: 2;
}

.docs-mvp-lb-nav:hover:not(:disabled) {
  background: rgba(255,255,255,.22);
}

.docs-mvp-lb-nav:disabled {
  cursor: default;
  opacity: .3;
}

.docs-mvp-lb-prev {
  left: 18px;
}

.docs-mvp-lb-next {
  right: 18px;
}

.docs-mvp-lb-counter {
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  bottom: 22px;
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  font-weight: 760;
  left: 50%;
  padding: 5px 12px;
  position: absolute;
  transform: translateX(-50%);
  z-index: 2;
}

@media (max-width: 1100px) {
  .docs-mvp-layout {
    grid-template-columns: 1fr;
  }

  .docs-mvp-detail {
    order: 2;
  }
}

@media (max-width: 640px) {
  .docs-mvp-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .docs-mvp-tabs button {
    padding-inline: 10px;
  }

  .docs-mvp-summary,
  .docs-mvp-facts,
  .docs-mvp-form-grid {
    grid-template-columns: 1fr;
  }

  .docs-mvp-summary article,
  .docs-mvp-facts div {
    border-bottom: 1px solid var(--border);
    border-right: 0;
  }

  .docs-mvp-summary article:last-child,
  .docs-mvp-facts div:last-child {
    border-bottom: 0;
  }

  .docs-mvp-list > header,
  .docs-mvp-modal-card header,
  .docs-mvp-modal-card footer {
    align-items: stretch;
    flex-direction: column;
  }

  .docs-mvp-manual-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .docs-mvp-detail-head {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .docs-mvp-detail-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .docs-mvp-kind-picker {
    grid-template-columns: 1fr;
  }
}

.fh-auth-actions button {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
  background: var(--accent-lt) !important;
  color: var(--ink) !important;
}

.fh-auth-card .eyebrow,
.fh-auth-link {
  color: var(--accent) !important;
}

.fh-auth-card h1,
.fh-auth-brand-copy h1,
.fh-auth-google,
.fh-auth-form input {
  color: var(--ink) !important;
}

.fh-auth-welcome {
  color: color-mix(in srgb, var(--accent) 78%, var(--ink)) !important;
}

.fh-auth-copy,
.fh-auth-security,
.fh-auth-divider,
.fh-auth-form label span,
.fh-auth-message {
  color: var(--ink2) !important;
}

.fh-auth-google,
.fh-auth-form input,
.fh-auth-actions [data-fh-auth-action="signup"] {
  border-color: var(--border) !important;
  background: var(--surface) !important;
}

.fh-auth-form input:focus {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent) !important;
}

html[data-theme='layf-core'] .fh-auth-form input:focus {
  border-color: var(--layf-accent-border) !important;
  box-shadow: 0 0 0 4px var(--layf-accent-soft-bg) !important;
}

.fh-auth-actions [data-fh-auth-action="signup"] {
  color: var(--ink) !important;
}

html[data-theme='layf-core'] .fh-auth-actions [data-fh-auth-action="signin"],
html[data-theme='layf-core'] .fh-auth-actions button:not([data-fh-auth-action="signup"]) {
  border: 1px solid var(--layf-accent-border) !important;
  background: var(--layf-accent-gradient) !important;
  box-shadow: 0 14px 30px rgba(124,58,237,.15) !important;
  color: #ffffff !important;
}

html[data-theme='layf-core'] .fh-auth-actions [data-fh-auth-action="signup"] {
  border-color: var(--layf-accent-border) !important;
  background: var(--layf-accent-soft-bg) !important;
  color: var(--ink) !important;
}

html[data-theme='layf-core'] .fh-auth-actions [data-fh-auth-action="signin"]:hover,
html[data-theme='layf-core'] .fh-auth-actions button:not([data-fh-auth-action="signup"]):hover {
  filter: saturate(1.04) brightness(.99);
}

html[data-theme='layf-core'] .fh-auth-actions [data-fh-auth-action="signup"]:hover {
  background: var(--layf-accent-soft-bg-hover) !important;
}

.fh-auth-message[data-tone="danger"] {
  color: var(--danger) !important;
}

.fh-auth-message[data-tone="success"] {
  color: var(--positive) !important;
}

.fh-auth-consent {
  font-size: 12px;
  color: var(--ink3);
  text-align: center;
  margin: -4px 0 0;
}
.fh-auth-consent a {
  color: var(--accent);
  text-decoration: none;
}
.fh-auth-consent a:hover { text-decoration: underline; }

.fh-auth-copyright {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 11px;
  color: var(--ink3, #9ca3af);
  opacity: 0.55;
  pointer-events: none;
  letter-spacing: 0.01em;
}

.fh-auth-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
  min-height: 100vh;
  padding: clamp(18px, 4vw, 42px);
  width: 100%;
}

.fh-auth-brand-panel {
  display: none !important;
}

.fh-auth-card {
  align-self: center;
  max-width: 640px !important;
  overflow: hidden;
  padding: clamp(28px, 4.2vw, 44px) !important;
  width: min(100%, 640px) !important;
}

.fh-auth-card-logo,
.wa-brand--auth {
  align-items: center;
  justify-items: center;
  text-align: center;
  width: 100%;
}

.fh-auth-card-logo .wa-brand-text {
  display: block;
  font-size: clamp(2.55rem, 6vw, 4.1rem) !important;
  line-height: .98;
  max-width: 100%;
  overflow-wrap: break-word;
  text-align: center;
  white-space: normal;
}

.fh-auth-card-logo .wa-brand-tagline {
  font-size: clamp(.95rem, 1.8vw, 1.15rem);
}

@media (max-width: 680px) {
  .fh-auth-gate {
    align-items: start;
  }

  .fh-auth-shell {
    min-height: 100dvh;
    padding: 14px;
  }

  .fh-auth-card {
    border-radius: 24px !important;
    min-height: auto;
  }

  .fh-auth-card-logo .wa-brand-text {
    font-size: clamp(2.25rem, 14vw, 3.2rem) !important;
  }
}

.settings-copyright {
  margin: 20px 0 4px;
  font-size: 11px;
  color: var(--ink3, #9ca3af);
  text-align: center;
  opacity: 0.7;
  letter-spacing: 0.01em;
}

/* ══ Settings — Legal links section ════════════════════════════════════════ */

.settings-page .settings-legal-panel {
  display: grid;
  gap: 14px;
  border-radius: 8px;
}
.settings-page .settings-legal-head {
  display: grid;
  gap: 4px;
}
.settings-page .settings-legal-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
}
.settings-page .settings-legal-link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface, #fff) 94%, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease, background .12s ease;
}
.settings-page .settings-legal-link:hover {
  background: var(--surface, #fff);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}
.settings-page .settings-legal-link svg {
  width: 18px;
  height: 18px;
  justify-self: center;
  color: var(--accent);
  opacity: 1;
}
.settings-page .settings-legal-link span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.settings-page .settings-legal-link strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
}
.settings-page .settings-legal-link small {
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.35;
}
@media (max-width: 860px) {
  .settings-page .settings-legal-links {
    grid-template-columns: 1fr;
  }
}

/* ══ Module Sharing — Ribbon (desktop) + Bubble (mobile) + Drawer ═══════════ */

/* Host: transparent overlay anchored to module bounds */
.ms-host {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 10;
}

/* ── Desktop: vertical ribbon on right edge ──────────────────────────────────── */

.ms-ribbon {
  align-items: center;
  border-radius: 24px 0 0 24px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 8px;
  outline: none;
  padding: 18px 10px;
  pointer-events: auto;
  position: absolute;
  right: 0;
  top: 50%;
  touch-action: none;
  transform: translateY(-50%);
  transition: right .18s ease, box-shadow .18s ease;
  user-select: none;
  width: 52px;
  z-index: 11;
}
.ms-ribbon:hover {
  box-shadow: -4px 0 14px rgba(0,0,0,.13);
  right: 6px;
}
.ms-ribbon:active { cursor: grabbing; }
.ms-ribbon:focus-visible {
  outline: 2px solid var(--accent, #7c5cfc);
  outline-offset: -2px;
}

/* Private: soft violet tint */
.ms-ribbon--private {
  background: rgba(124,92,252,.16);
  color: #7c5cfc;
}
.ms-ribbon--private:hover { background: rgba(124,92,252,.22); }

/* Shared: Layf gradient */
.ms-ribbon--shared {
  background: linear-gradient(180deg, #fb923c 0%, #ec4899 45%, #a855f7 75%, #7c3aed 100%);
  color: #fff;
}
.ms-ribbon--shared:hover { filter: brightness(1.06); }

/* Pending: amber/orange tint */
.ms-ribbon--pending {
  background: rgba(251,146,60,.22);
  color: #c2410c;
}
.ms-ribbon--pending:hover { background: rgba(251,146,60,.30); }

/* Shared-to-me: recipient view — same gradient, slightly muted */
.ms-ribbon--shared-to-me {
  background: linear-gradient(180deg, #fb923c 0%, #ec4899 45%, #a855f7 75%, #7c3aed 100%);
  color: #fff;
  opacity: .82;
}
.ms-ribbon--shared-to-me:hover { opacity: 1; filter: brightness(1.06); }

/* Energy OS overrides */
html[data-theme='espresso'] .ms-ribbon--shared,
html[data-theme='espresso'] .ms-ribbon--shared-to-me {
  background: var(--accent, #ef6016);
  color: #fff;
}

.ms-ribbon-icon { align-items: center; display: flex; justify-content: center; pointer-events: none; }
.ms-ribbon-count {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.ms-ribbon-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  opacity: .75;
  overflow: hidden;
  pointer-events: none;
  text-overflow: ellipsis;
  text-transform: uppercase;
  transform: rotate(180deg);
  white-space: nowrap;
  writing-mode: vertical-rl;
  max-height: 52px;
}

.shared-readonly-note {
  background: color-mix(in srgb, var(--layf-accent-soft-bg, rgba(124,92,252,.09)) 70%, #fff);
  border: 1px solid var(--layf-accent-border, rgba(124,92,252,.22));
  border-radius: var(--radius-sm, 10px);
  color: var(--ink2, #6b7280);
  font-size: 12px;
  line-height: 1.5;
  margin: 0 auto 14px;
  max-width: var(--module-shell-max, 1480px);
  padding: 10px 14px;
}

[data-shared-readonly="1"] [data-shared-readonly-disabled="1"] {
  cursor: not-allowed !important;
  opacity: .55;
}

/* ── Mobile: floating bubble (hidden on desktop) ────────────────────────────── */

.ms-bubble {
  display: none;
}

/* ── Drawer (desktop: right-slide within module  |  mobile: bottom-sheet) ───── */

.ms-drawer {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity .22s ease, visibility 0s linear .22s;
  visibility: hidden;
  z-index: 20;
}
.ms-drawer[data-ms-open='1'] {
  opacity: 1;
  pointer-events: none;
  transition: opacity .22s ease;
  visibility: visible;
}

.ms-drawer-backdrop {
  display: none;
  inset: 0;
  position: absolute;
}

/* Desktop panel: floating card, vertically centered (not full-height) */
.ms-drawer-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 16px;
  box-shadow: -6px 0 32px rgba(0,0,0,.13);
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: min(62vh, 560px);
  max-width: 100%;
  overflow: hidden;
  position: absolute;
  right: 14px;
  top: 50%;
  bottom: auto;
  transform: translate(calc(100% + 28px), -50%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  width: 320px;
  pointer-events: auto;
}
.ms-drawer[data-ms-open='1'] .ms-drawer-panel {
  transform: translate(0, -50%);
}

.ms-drawer-drag-handle {
  background: var(--border, rgba(0,0,0,.12));
  border-radius: 3px;
  display: none;
  height: 4px;
  margin: 10px auto 4px;
  width: 40px;
}

.ms-drawer-head {
  align-items: center;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.07));
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  padding: 13px 14px;
}
.ms-drawer-title {
  color: var(--ink, #111827);
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}
.ms-drawer-close {
  align-items: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--ink2, #6b7280);
  cursor: pointer;
  display: flex;
  height: 26px;
  justify-content: center;
  padding: 0;
  width: 26px;
}
.ms-drawer-close:hover { background: var(--surface2, #f5f5f8); color: var(--ink, #111827); }

.ms-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}

/* ── Drawer body content ─────────────────────────────────────────────────────── */

.ms-summary {
  align-items: flex-start;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
}
.ms-summary--private { background: rgba(124,92,252,.07); }
.ms-summary--shared  { background: rgba(124,92,252,.07); }
.ms-summary--pending { background: #fef9ec; }

.ms-summary-icon { align-items: center; display: flex; flex-shrink: 0; justify-content: center; margin-top: 1px; }
.ms-summary--private .ms-summary-icon { color: #7c5cfc; }
.ms-summary--shared  .ms-summary-icon { color: #7c3aed; }
.ms-summary--pending .ms-summary-icon { color: #b45309; }

.ms-summary-text { display: flex; flex-direction: column; gap: 2px; }
.ms-summary-text strong { color: var(--ink, #111827); font-size: 12px; font-weight: 600; }
.ms-summary-text span   { color: var(--ink2, #6b7280); font-size: 11px; }

/* Invite CTA (private state) */
.ms-invite-cta {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 6px;
  text-align: center;
}
.ms-invite-illustration { color: var(--ink3, #9ca3af); margin-bottom: 2px; opacity: .45; }
.ms-invite-cta-title    { color: var(--ink, #111827); font-size: 12px; font-weight: 600; }
.ms-invite-cta-desc     { color: var(--ink2, #6b7280); font-size: 11px; line-height: 1.4; margin: 0; }

/* People sections */
.ms-people-section { margin-bottom: 10px; }
.ms-people-label {
  color: var(--ink3, #9ca3af);
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.ms-person-row {
  align-items: center;
  border-radius: 7px;
  display: flex;
  gap: 7px;
  padding: 4px 3px;
}
.ms-person-row:hover { background: var(--surface2, #f5f5f8); }

.ms-person-avatar {
  align-items: center;
  background: var(--accent-lt, #ede9fe);
  border-radius: 50%;
  color: var(--accent, #7c5cfc);
  display: flex;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  overflow: hidden;
  width: 28px;
}
.ms-person-avatar img { height: 100%; object-fit: cover; width: 100%; }
.ms-person-avatar.is-owner { background: var(--accent, #7c5cfc); color: #fff; }

.ms-person-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ms-person-name {
  color: var(--ink, #111827);
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-person-email {
  color: var(--ink2, #6b7280);
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-person-you {
  color: var(--accent, #7c5cfc);
  font-weight: 600;
}

.ms-members-loading {
  color: var(--ink2, #6b7280);
  font-size: 12px;
  padding: 6px 3px;
}

.ms-person-badge {
  border-radius: 20px;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
}
.ms-person-badge--owner   { background: rgba(124,92,252,.12); color: #7c5cfc; }
.ms-person-badge--edit    { background: #dcfce7; color: #166534; }
.ms-person-badge--view    { background: var(--surface2, #f0f0f5); color: var(--ink2, #6b7280); }
.ms-person-badge--pending { background: #fef9ec; color: #b45309; }

.ms-person-more {
  align-items: center;
  background: none;
  border: none;
  border-radius: 5px;
  color: var(--ink3, #9ca3af);
  cursor: pointer;
  display: flex;
  height: 22px;
  justify-content: center;
  padding: 0;
  width: 22px;
}
.ms-person-more:hover { background: var(--surface2, #f0f0f5); color: var(--ink2, #6b7280); }

.ms-remind-btn {
  align-items: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--accent, #7c5cfc);
  cursor: pointer;
  display: flex;
  font-size: 10px;
  font-weight: 500;
  gap: 4px;
  margin: 1px 0 5px 36px;
  padding: 2px 5px;
}
.ms-remind-btn:hover { background: rgba(124,92,252,.08); }

/* Action buttons */
.ms-drawer-actions {
  border-top: 1px solid var(--border, rgba(0,0,0,.07));
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding-top: 12px;
}
.ms-btn-invite,
.ms-btn-manage {
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 500;
  gap: 5px;
  justify-content: center;
  padding: 8px 12px;
  width: 100%;
}
.ms-btn-invite {
  background: linear-gradient(135deg, #fb923c, #ec4899, #a855f7);
  border: none;
  color: #fff;
}
.ms-btn-invite:hover { filter: brightness(1.07); }

.ms-btn-manage {
  background: var(--surface2, #f0f0f5);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  color: var(--ink, #111827);
}
.ms-btn-manage:hover { background: var(--surface2, #e8e8ee); }

/* Privacy note */
.ms-privacy-note {
  align-items: flex-start;
  background: var(--surface2, #f5f5f8);
  border-radius: 7px;
  color: var(--ink3, #9ca3af);
  display: flex;
  font-size: 10px;
  gap: 5px;
  line-height: 1.4;
  margin-top: 10px;
  padding: 8px 10px;
}
.ms-privacy-note p { margin: 0; }
.ms-privacy-note svg { flex-shrink: 0; margin-top: 1px; }

/* ── Mobile: floating bubble + bottom-sheet drawer ───────────────────────────── */

@media (max-width: 768px) {
  /* Hide ribbon, show bubble */
  .ms-ribbon { display: none; }

  .ms-bubble {
    align-items: center;
    border: none;
    bottom: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.10);
    cursor: grab;
    display: flex;
    height: 52px;
    justify-content: center;
    outline: none;
    pointer-events: auto;
    position: fixed;
    right: 20px;
    touch-action: none;
    transition: box-shadow .15s ease, transform .1s ease;
    user-select: none;
    width: 52px;
    z-index: 210;
    border-radius: 50%;
  }
  .ms-bubble:hover  { box-shadow: 0 6px 22px rgba(0,0,0,.22); transform: scale(1.07); }
  .ms-bubble:active { cursor: grabbing; transform: scale(.96); }

  .ms-bubble--private    { background: rgba(124,92,252,.14); color: #7c5cfc; }
  .ms-bubble--shared     { background: linear-gradient(135deg, #fb923c, #ec4899, #a855f7); color: #fff; }
  .ms-bubble--shared-to-me { background: linear-gradient(135deg, #fb923c, #ec4899, #a855f7); color: #fff; opacity: .82; }
  .ms-bubble--pending    { background: rgba(251,146,60,.22); color: #c2410c; }

  .ms-bubble-icon { display: flex; align-items: center; justify-content: center; pointer-events: none; }
  .ms-bubble-icon svg { pointer-events: none; }

  .ms-bubble-badge {
    background: #7c3aed;
    border-radius: 20px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    min-width: 17px;
    padding: 2px 4px;
    pointer-events: none;
    position: absolute;
    right: -3px;
    text-align: center;
    top: -3px;
  }
  .ms-bubble-badge--pending    { background: #d97706; }
  .ms-bubble-badge--shared-to-me { background: #7c3aed; }

  /* Drawer: fixed bottom-sheet on mobile */
  .ms-drawer {
    position: fixed;
  }
  .ms-drawer-backdrop {
    display: none;
    position: fixed;
  }
  .ms-drawer-panel {
    border-left: none;
    border-radius: 20px 20px 0 0;
    border-top: 1px solid var(--border, rgba(0,0,0,.08));
    bottom: 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,.16);
    left: 0;
    max-height: 85dvh;
    overflow-y: auto;
    position: fixed;
    right: 0;
    top: auto;
    transform: translateY(105%);
    width: 100%;
  }
  .ms-drawer[data-ms-open='1'] .ms-drawer-panel {
    transform: translateY(0);
  }
  .ms-drawer-drag-handle { display: block; }

  /* Restore normal font sizes on mobile */
  .ms-summary-text strong,
  .ms-person-name         { font-size: 13px; }
  .ms-summary-text span   { font-size: 12px; }
  .ms-person-badge        { font-size: 10px; padding: 2px 7px; }
  .ms-people-label        { font-size: 10px; }
  .ms-remind-btn          { font-size: 11px; }
  .ms-btn-invite,
  .ms-btn-manage          { font-size: 13px; padding: 9px 14px; }
  .ms-privacy-note        { font-size: 11px; }
  .ms-person-avatar       { width: 32px; height: 32px; font-size: 11px; }
}

/* ── Dark mode ───────────────────────────────────────────────────────────────── */

html[data-dark='true'] .ms-drawer-panel    { background: var(--surface, #1e1e2e); border-color: rgba(255,255,255,.08); }
html[data-dark='true'] .ms-drawer-backdrop { background: transparent; }
html[data-dark='true'] .ms-summary--private,
html[data-dark='true'] .ms-summary--shared  { background: rgba(124,92,252,.10); }
html[data-dark='true'] .ms-summary--pending { background: rgba(251,191,36,.08); }
html[data-dark='true'] .ms-person-row:hover { background: rgba(255,255,255,.05); }
html[data-dark='true'] .ms-privacy-note     { background: rgba(255,255,255,.04); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ms-drawer, .ms-drawer-panel, .ms-ribbon, .ms-bubble { transition: none !important; }
}

/* Module wrappers need position:relative so the ribbon anchors correctly */
.family-calendar-page,
.family-agreements-page,
.properties-page { position: relative; }



.family-tabs,
.health-tabs,
.medical-tabs,
.planner-warm-tabs,
.planner-warm-toolbar--tabs-only,
.sport-tab-bar,
.sport-warm-template .sport-tab-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--tab-gap) !important;
  max-width: 100%;
  padding: 4px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--tab-radius) !important;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-lt)) !important;
  box-shadow: none !important;
  overflow-x: auto !important;
  scrollbar-width: thin;
}

.sport-tab-bar,
.planner-warm-toolbar--tabs-only {
  width: min(100%, max-content) !important;
}

.sport-warm-template .sport-tab-bar {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.family-rail,
.health-rail {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.family-tabs button,
.health-tabs button,
.medical-tabs button,
.planner-warm-tab,
.planner-tab-chip,
.sport-warm-template .sport-tab-chip {
  min-width: max-content !important;
  min-height: calc(var(--tab-height) - 8px) !important;
  padding: 0 var(--tab-padding-x) !important;
  border: 1px solid transparent !important;
  border-radius: var(--tab-radius) !important;
  background: transparent !important;
  color: var(--ink2) !important;
  font-family: var(--font-body) !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.family-tabs button.is-active,
.family-tabs button.active,
.health-tabs button.is-active,
.medical-tabs button.is-active,
.planner-warm-tab.is-active,
.planner-tab-chip.is-active,
.sport-warm-template .sport-tab-chip.is-active {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  box-shadow: none !important;
}

.sport-warm-template .sport-tab-group::before,
.sport-warm-template .sport-tab-group::after {
  display: none !important;
}

.theme-card,
.personalization-card,
.settings-page .theme-card,
.settings-page .personalization-card {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.theme-card.is-active,
.personalization-card.is-active,
.settings-page .theme-card.is-active,
.settings-page .personalization-card.is-active,
.theme-card[aria-pressed='true'],
.personalization-card[aria-pressed='true'] {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  box-shadow: none !important;
}

.theme-card.is-active *,
.personalization-card.is-active *,
.theme-card[aria-pressed='true'] *,
.personalization-card[aria-pressed='true'] * {
  color: inherit !important;
}

.module-form-modal,
.calendar-modal,
.gift-modal,
.ftree-overlay {
  background: color-mix(in srgb, #000 24%, transparent);
  backdrop-filter: blur(10px);
}

.module-form-modal-card,
.calendar-modal-card,
.calendar-form,
.gift-modal-card,
.gift-form,
.ftree-panel {
  border-color: var(--border);
  border-radius: var(--modal-radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.module-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(150px, 18vw, 228px) !important;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
  background:
    radial-gradient(circle at 74% 34%, color-mix(in srgb, var(--accent-contrast) 20%, transparent) 0 11%, transparent 12%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #fff) 0%, var(--accent) 52%, color-mix(in srgb, var(--accent) 68%, #111) 100%) !important;
  box-shadow: var(--shadow-md) !important;
}

.module-hero-main {
  min-width: 0;
}

.module-hero-title {
  color: var(--accent-contrast) !important;
}

.module-hero-subtitle {
  font-size: var(--type-hero-subtitle) !important;
  line-height: var(--line-normal) !important;
  color: color-mix(in srgb, var(--accent-contrast) 88%, transparent) !important;
}

.module-hero-visual {
  min-width: 0;
}

.dashboard-warm-hero,
.planner-weather-hero,
.medical-warm-hero,
.family-warm-hero,
.pets-warm-hero,
.sport-warm-header {
  position: relative;
  overflow: hidden;
  transition: height .28s ease, min-height .28s ease, padding .28s ease;
}

.module-hero-compact-title {
  display: none;
  min-width: 0;
  padding-right: 48px;
  color: var(--accent-contrast);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-collapse-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: auto;
  z-index: 10;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent-contrast) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 16%, transparent);
  color: var(--accent-contrast);
  cursor: pointer;
  line-height: 1;
  backdrop-filter: blur(12px);
  transition: background .18s, transform .18s;
}

.hero-collapse-btn:hover {
  background: color-mix(in srgb, var(--surface) 26%, transparent);
  transform: translateY(-1px);
}

.module-hero.is-collapsed,
.dashboard-warm-hero.is-collapsed,
.planner-weather-hero.is-collapsed,
.medical-warm-hero.is-collapsed,
.family-warm-hero.is-collapsed,
.pets-warm-hero.is-collapsed {
  min-height: 0 !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  padding: 12px 54px 12px 18px !important;
  cursor: pointer;
}

.module-hero.is-collapsed > :not(.hero-collapse-btn):not(.module-hero-compact-title),
.dashboard-warm-hero.is-collapsed > :not(.hero-collapse-btn):not(.module-hero-compact-title),
.planner-weather-hero.is-collapsed > :not(.hero-collapse-btn):not(.module-hero-compact-title),
.medical-warm-hero.is-collapsed > :not(.hero-collapse-btn):not(.module-hero-compact-title),
.family-warm-hero.is-collapsed > :not(.hero-collapse-btn):not(.module-hero-compact-title),
.pets-warm-hero.is-collapsed > :not(.hero-collapse-btn):not(.module-hero-compact-title) {
  display: none !important;
}

.module-hero.is-collapsed .module-hero-compact-title,
.dashboard-warm-hero.is-collapsed .module-hero-compact-title,
.planner-weather-hero.is-collapsed .module-hero-compact-title,
.medical-warm-hero.is-collapsed .module-hero-compact-title,
.family-warm-hero.is-collapsed .module-hero-compact-title,
.pets-warm-hero.is-collapsed .module-hero-compact-title {
  display: block;
  color: var(--accent-contrast);
}

.module-hero.is-collapsed .hero-collapse-btn,
.dashboard-warm-hero.is-collapsed .hero-collapse-btn,
.planner-weather-hero.is-collapsed .hero-collapse-btn,
.medical-warm-hero.is-collapsed .hero-collapse-btn,
.family-warm-hero.is-collapsed .hero-collapse-btn,
.pets-warm-hero.is-collapsed .hero-collapse-btn {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.dashboard-warm-hero,
.planner-weather-hero {
  min-height: clamp(150px, 18vw, 228px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  align-items: center;
  gap: clamp(16px, 3vw, 30px);
  padding: clamp(18px, 2.8vw, 34px) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 74% 34%, color-mix(in srgb, var(--accent-contrast) 20%, transparent) 0 11%, transparent 12%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #fff) 0%, var(--accent) 52%, color-mix(in srgb, var(--accent) 68%, #111) 100%) !important;
  box-shadow: var(--shadow-md) !important;
}

.dashboard-warm-hero-main,
.planner-weather-copy {
  min-width: 0;
}

.dashboard-warm-hero h1,
.planner-weather-hero h1,
.module-hero-title {
  font-size: var(--type-hero-title) !important;
  line-height: var(--line-tight) !important;
  color: var(--accent-contrast) !important;
}

.dashboard-warm-hero p,
.planner-weather-hero p {
  font-size: var(--type-hero-subtitle) !important;
  line-height: var(--line-normal) !important;
  color: color-mix(in srgb, var(--accent-contrast) 88%, transparent) !important;
}

.dashboard-warm-hero-meta,
.dashboard-hero-today {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.dashboard-warm-hero-meta span,
.dashboard-hero-today span,
.dashboard-hero-today button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent-contrast) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-contrast) 14%, transparent);
  color: var(--accent-contrast);
  padding: 0 12px;
  font: 800 12px/1 var(--font-body);
}

.dashboard-hero-today button {
  cursor: pointer;
}

.dashboard-warm-weather,
.planner-weather-card,
.dashboard-warm-alert {
  border: 1px solid color-mix(in srgb, var(--accent-contrast) 22%, transparent) !important;
  background: color-mix(in srgb, var(--accent-contrast) 14%, transparent) !important;
  box-shadow: none !important;
}

.dashboard-warm-alert {
  min-height: 92px;
  cursor: pointer;
}

.module-action-bar.card,
.recipes-actions.card,
.pets-hero-actions {
  border: 1px solid var(--border) !important;
  border-radius: 22px !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.recipes-actions-row,
.pets-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.recipes-actions-row {
  justify-content: flex-end;
}

.pets-hero-actions {
  justify-content: space-between;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.pets-hero-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: var(--ink2);
  font-size: 13px;
  font-weight: 750;
}

.pets-hero-stats strong {
  color: var(--ink);
  font-size: 16px;
}

.pets-hero-stats .is-warning {
  color: var(--warning, var(--accent));
}

.pets-hero-stats .is-danger {
  color: var(--danger);
}

.medical-warm-hero.module-hero,
.pets-warm-hero.module-hero,
.recipes-hero.module-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 400px);
  gap: clamp(16px, 3vw, 30px);
  align-items: center;
}

.medical-warm-hero-card,
.pets-warm-hero-card {
  width: 100%;
  min-height: 116px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--accent-contrast) 28%, transparent);
  background: color-mix(in srgb, var(--accent-contrast) 16%, transparent);
  color: var(--accent-contrast);
  box-shadow: none;
}

.medical-warm-hero-card p,
.pets-warm-hero-card p {
  color: color-mix(in srgb, var(--accent-contrast) 82%, transparent) !important;
}

.medical-warm-hero-card strong,
.pets-warm-hero-card strong {
  color: var(--accent-contrast);
}

.pets-warm-hero-avatar {
  flex: 0 0 64px;
}

.sport-warm-header {
  position: relative;
}

.sport-warm-header.module-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}

.sport-warm-header .module-hero-title {
  color: var(--accent-contrast);
}

.sport-warm-header .module-hero-subtitle {
  max-width: 620px;
  color: color-mix(in srgb, var(--accent-contrast) 88%, transparent);
}

.sport-warm-header .module-hero-visual {
  min-width: 0;
}

.sport-warm-header.is-collapsed {
  min-height: 56px !important;
  height: 56px !important;
  padding: 0 54px 0 20px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 24px !important;
}

.sport-warm-header.is-collapsed > :not(.hero-collapse-btn):not(.module-hero-compact-title) {
  display: none !important;
}

.sport-warm-header.is-collapsed .module-hero-compact-title {
  display: block !important;
  color: var(--accent-contrast);
}

.sport-warm-header.is-collapsed .hero-collapse-btn {
  top: 50%;
  right: 12px;
  bottom: auto;
  transform: translateY(-50%);
}

.sport-warm-template .sport-top-tabs {
  align-items: center;
  gap: 12px;
}

.sport-warm-template .sport-top-primary {
  margin-left: auto;
}

@media (max-width: 820px) {
  .dashboard-warm-hero,
  .planner-weather-hero {
    grid-template-columns: 1fr !important;
  }

  /* Dashboard hero: let content define height when stacked (no 150px floor) */
  .dashboard-warm-hero {
    min-height: 0 !important;
  }

  .sport-warm-header.module-hero,
  .medical-warm-hero.module-hero,
  .pets-warm-hero.module-hero,
  .recipes-hero.module-hero {
    grid-template-columns: 1fr;
  }

  .recipes-actions-row,
  .pets-hero-actions,
  .sport-warm-template .sport-top-tabs {
    align-items: stretch;
    flex-direction: column;
  }

  .sport-warm-template .sport-top-primary {
    width: 100%;
    margin-left: 0;
  }
}

/* WA Finanse Stage 1 - annual decision cockpit. Read-only dashboard layer. */

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

.wa-finance-hero-card {
  display: grid;
  align-content: space-between;
  min-height: 192px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 4%, transparent);
}

.wa-finance-hero-card.is-result {
  position: relative;
  grid-column: span 5;
  min-height: 236px;
  overflow: hidden;
  border-color: transparent;
  background: linear-gradient(135deg, #f16a61 0%, #dd4f88 46%, #7657df 100%);
  box-shadow: 0 18px 40px color-mix(in srgb, #8e4fe1 20%, transparent);
}

.wa-finance-hero-card.is-result::after {
  position: absolute;
  right: -56px;
  bottom: -82px;
  width: 236px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, white 32%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 20px color-mix(in srgb, white 8%, transparent), 0 0 0 44px color-mix(in srgb, white 5%, transparent);
  content: '';
  pointer-events: none;
}

.wa-finance-hero-card.is-inflows { grid-column: span 3; }
.wa-finance-hero-card.is-costs,
.wa-finance-hero-card.is-ytd { grid-column: span 2; }

.wa-finance-hero-card.is-result > * {
  position: relative;
  z-index: 1;
}

.wa-finance-hero-card.is-inflows {
  border-color: var(--border);
  border-top: 3px solid #2e63d6;
  background: var(--surface);
}

.wa-finance-hero-card.is-costs {
  border-color: var(--border);
  border-top: 3px solid #f05b27;
  background: var(--surface);
}

.wa-finance-hero-card.is-ytd {
  border-color: var(--border);
  border-top: 3px solid #119352;
  background: var(--surface);
}

.wa-finance-hero-card.is-ytd > strong {
  color: #119352;
}

.wa-finance-hero-card-head {
  display: grid;
  gap: 5px;
}

.wa-finance-hero-card-head span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.wa-finance-hero-card.is-result .wa-finance-hero-card-head span,
.wa-finance-hero-card.is-result .wa-finance-hero-card-head small,
.wa-finance-hero-card.is-result > strong,
.wa-finance-hero-card.is-result > p {
  color: white;
}

.wa-finance-hero-card-head small,
.wa-finance-hero-card p {
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.4;
}

.wa-finance-hero-card > strong {
  margin: 14px 0 9px;
  color: var(--ink);
  font-size: 32px;
  font-weight: var(--weight-page-title);
  letter-spacing: 0;
  line-height: 1;
}

.wa-finance-hero-card.is-result > strong {
  margin: 12px 0 9px;
  font-size: 62px;
  letter-spacing: 0;
}

.wa-finance-hero-card.is-inflows > strong,
.wa-finance-hero-card.is-costs > strong,
.wa-finance-hero-card.is-ytd > strong {
  font-size: 34px;
}

.wa-finance-hero-card p {
  margin: 0;
}

.wa-finance-result-status,
.wa-finance-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  font-size: 12px;
  font-weight: 760;
}

.wa-finance-result-status {
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, white 18%, transparent);
  color: white;
}

.wa-finance-result-status i,
.wa-finance-kpi-trend i {
  font-style: normal;
  font-size: 14px;
}

.wa-finance-kpi-trend.is-positive { color: #119352; }
.wa-finance-kpi-trend.is-negative { color: #dc303d; }
.wa-finance-kpi-trend.is-neutral { color: var(--ink3); }
.wa-finance-hero-card.is-result .wa-finance-kpi-trend { color: white; }

.wa-finance-card-note {
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.35;
}

.wa-finance-summary-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.wa-finance-summary-metric {
  display: grid;
  gap: 5px;
  min-height: 88px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.wa-finance-summary-metric.is-mint { border-top: 3px solid #2e63d6; }
.wa-finance-summary-metric.is-sky { border-top: 3px solid #dc303d; }
.wa-finance-summary-metric.is-violet { border-top: 3px solid #7657df; }
.wa-finance-summary-metric.is-peach { border-top: 3px solid #2e63d6; }

.wa-finance-summary-metric span,
.wa-finance-summary-metric small {
  color: var(--ink2);
  font-size: 12px;
}

.wa-finance-summary-metric strong {
  color: var(--ink);
  font-size: 21px;
  font-weight: var(--weight-card-title);
  line-height: 1.1;
}

.wa-finance-summary-metric small.is-alert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #dc303d;
  font-weight: 700;
}

.wa-finance-summary-metric small.is-alert i {
  font-style: normal;
}

.wa-finance-dashboard-stage-one-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, .85fr);
  gap: 14px;
  align-items: stretch;
}

.wa-finance-dashboard-stage-one-grid.is-secondary {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.55fr);
}

.wa-finance-trend,
.wa-finance-channel-share,
.wa-finance-reconciliation-card {
  padding: 18px;
  border-radius: 8px;
}

.wa-finance-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.wa-finance-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink2);
  font-size: 12px;
}

.wa-finance-trend-legend span::before {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  content: '';
}

.wa-finance-trend-legend .is-revenue::before { background: #10a88b; }
.wa-finance-trend-legend .is-cost::before { background: #f08a6c; }
.wa-finance-trend-legend .is-result::before { background: #6c63e8; }

.wa-finance-trend svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.wa-finance-trend-guide {
  stroke: color-mix(in srgb, var(--border) 68%, transparent);
  stroke-width: 1;
}

.wa-finance-trend-active-band {
  fill: color-mix(in srgb, #7657df 9%, transparent);
  rx: 7px;
}

.wa-finance-trend-axis,
.wa-finance-trend-month-label {
  fill: var(--ink3);
  font-family: var(--font-body);
  font-size: 10px;
}

.wa-finance-trend-baseline {
  stroke: color-mix(in srgb, var(--ink2) 26%, transparent);
  stroke-width: 1.25;
}

.wa-finance-trend-bar {
  rx: 4px;
  opacity: .86;
}

.wa-finance-trend-bar.is-revenue { fill: #10a88b; }
.wa-finance-trend-bar.is-cost { fill: #f08a6c; }
.wa-finance-trend-month.is-active .wa-finance-trend-bar { opacity: 1; }

.wa-finance-trend-result-line {
  fill: none;
  stroke: #6c63e8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.wa-finance-trend-result-dot {
  fill: var(--surface);
  stroke: #6c63e8;
  stroke-width: 2.5;
}

.wa-finance-channel-share-main {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.wa-finance-channel-donut {
  display: grid;
  place-items: center;
  width: 148px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--wa-channel-gradient, var(--surface2));
}

.wa-finance-channel-donut > div {
  display: grid;
  align-content: center;
  width: 102px;
  aspect-ratio: 1;
  padding: 12px;
  border-radius: 50%;
  background: var(--surface);
  text-align: center;
}

.wa-finance-channel-donut strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.12;
}

.wa-finance-channel-donut span {
  margin-top: 4px;
  color: var(--ink3);
  font-size: 10px;
}

.wa-finance-channel-share-list {
  display: grid;
  gap: 8px;
}

.wa-finance-channel-share-list > div {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
}

.wa-finance-channel-share-list i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--wa-channel-color);
}

.wa-finance-channel-share-list span,
.wa-finance-channel-share-list small {
  overflow: hidden;
  color: var(--ink2);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-finance-channel-share-list strong {
  color: var(--ink);
  font-size: 12px;
}

.wa-finance-channel-share-list small {
  grid-column: 2 / -1;
  margin-top: -4px;
  font-size: 11px;
}

/* WA Finanse dashboard interactions and current-month emphasis. */
.wa-finance-result-context {
  display: grid;
  justify-items: start;
  gap: 9px;
  margin-top: auto;
}

.wa-finance-hero-card.is-result .wa-finance-result-comparison {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  color: color-mix(in srgb, white 84%, transparent);
  font-size: 12px;
  font-weight: 650;
}

.wa-finance-result-comparison b {
  color: white;
  font-size: 14px;
  font-weight: 780;
}

.wa-finance-result-value.is-celebration:not(.is-counting) {
  animation: wa-finance-result-pop .42s cubic-bezier(.2, .9, .2, 1.25) both;
}

.wa-finance-result-amount {
  position: relative;
  justify-self: start;
  width: fit-content;
  margin: 12px 0 9px;
}

.wa-finance-result-amount .wa-finance-result-value {
  display: block;
  color: white;
  font-size: 62px;
  font-weight: var(--weight-page-title);
  letter-spacing: 0;
  line-height: 1;
}

.wa-finance-result-sparkles {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.wa-finance-result-sparkles i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, white 92%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, white 84%, transparent);
  animation: wa-finance-sparkle .72s ease-out both;
}

.wa-finance-result-sparkles i:nth-child(1) { --wa-sparkle-x: 88px; --wa-sparkle-y: -52px; animation-delay: .78s; }
.wa-finance-result-sparkles i:nth-child(2) { --wa-sparkle-x: 116px; --wa-sparkle-y: 16px; animation-delay: .82s; }
.wa-finance-result-sparkles i:nth-child(3) { --wa-sparkle-x: 58px; --wa-sparkle-y: 62px; animation-delay: .8s; }
.wa-finance-result-sparkles i:nth-child(4) { --wa-sparkle-x: -48px; --wa-sparkle-y: 66px; animation-delay: .86s; }
.wa-finance-result-sparkles i:nth-child(5) { --wa-sparkle-x: -104px; --wa-sparkle-y: 20px; animation-delay: .79s; }
.wa-finance-result-sparkles i:nth-child(6) { --wa-sparkle-x: -82px; --wa-sparkle-y: -58px; animation-delay: .84s; }
.wa-finance-result-sparkles i:nth-child(7) { --wa-sparkle-x: 0; --wa-sparkle-y: -82px; animation-delay: .81s; }

@keyframes wa-finance-result-pop {
  0% { transform: scale(.965); }
  70% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@keyframes wa-finance-sparkle {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  22% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--wa-sparkle-x), var(--wa-sparkle-y)) scale(1); }
}

.wa-finance-trend-chart {
  position: relative;
}

.wa-finance-trend-active-band {
  fill: color-mix(in srgb, #7657df 18%, transparent);
  stroke: color-mix(in srgb, #7657df 52%, transparent);
  stroke-width: 1;
}

.wa-finance-trend-month.is-active .wa-finance-trend-bar {
  opacity: 1;
  filter: drop-shadow(0 3px 4px color-mix(in srgb, #7657df 20%, transparent));
}

.wa-finance-trend-month.is-active .wa-finance-trend-month-label {
  fill: #5f45cf;
  font-weight: 800;
}

.wa-finance-trend-hit {
  fill: transparent;
  cursor: crosshair;
}

.wa-finance-trend-hit:focus { outline: none; }

.wa-finance-trend-tooltip {
  position: absolute;
  left: var(--wa-tooltip-x, 50%);
  top: 9px;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 148px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, #7657df 26%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 96%, white 4%);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--ink) 15%, transparent);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
}

.wa-finance-trend-tooltip.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.wa-finance-trend-tooltip strong,
.wa-finance-trend-tooltip span,
.wa-finance-trend-tooltip small { font-size: 11px; }
.wa-finance-trend-tooltip strong { color: var(--ink2); font-weight: 760; }
.wa-finance-trend-tooltip b { color: #6c63e8; font-size: 16px; line-height: 1.1; }
.wa-finance-trend-tooltip span { color: var(--ink3); }
.wa-finance-trend-tooltip small { color: var(--ink2); white-space: nowrap; }

.wa-finance-channel-donut {
  position: relative;
  cursor: help;
}

.wa-finance-channel-donut > div:not(.wa-finance-channel-tooltip) {
  position: relative;
  z-index: 1;
}

.wa-finance-channel-donut > .wa-finance-channel-tooltip {
  position: absolute;
  left: 50%;
  top: -9px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 174px;
  aspect-ratio: auto;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, #7657df 26%, var(--border));
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--ink);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, -7px);
  transition: opacity .14s ease, transform .14s ease;
}

.wa-finance-channel-donut > .wa-finance-channel-tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.wa-finance-channel-tooltip strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-finance-channel-tooltip-logo {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  overflow: hidden;
  border-radius: 6px;
  background: color-mix(in srgb, #7657df 10%, var(--surface-muted));
  color: var(--ink);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.wa-finance-channel-tooltip-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wa-finance-channel-share-list > article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  width: 100%;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background .14s ease, border-color .14s ease;
}

.wa-finance-channel-share-list > article:hover,
.wa-finance-channel-share-list > article.is-active,
.wa-finance-channel-share-list > article:focus-within {
  border-color: color-mix(in srgb, #7657df 23%, var(--border));
  background: color-mix(in srgb, #7657df 7%, var(--surface));
}

.wa-finance-channel-share-list .wa-finance-channel-brand {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: var(--wa-channel-brand-bg, #edf1ff);
  color: var(--wa-channel-brand-color, #2e63d6);
  cursor: pointer;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0;
}

.wa-finance-channel-brand:focus-visible {
  outline: 2px solid color-mix(in srgb, #7657df 75%, white);
  outline-offset: 2px;
}

.wa-finance-channel-brand img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
}

.wa-finance-channel-brand.has-logo .wa-finance-channel-brand-fallback { opacity: 0; }

.wa-finance-brand-modal .module-form-modal-card { width: min(460px, calc(100vw - 28px)); }

.wa-finance-brand-editor {
  display: grid;
  justify-items: start;
  gap: 14px;
}

.wa-finance-brand-editor > p,
.wa-finance-brand-paste-hint {
  margin: -5px 0 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.45;
}

.wa-finance-brand-preview {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 20px;
  font-weight: 820;
}

.wa-finance-brand-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
}

.wa-finance-brand-editor .field { width: 100%; }

.wa-finance-brand-editor-divider {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 9px;
  color: var(--ink3);
  font-size: 11px;
}

.wa-finance-brand-editor-divider::before,
.wa-finance-brand-editor-divider::after {
  height: 1px;
  background: var(--border);
  content: '';
}

.wa-finance-brand-upload { cursor: pointer; }

.wa-finance-channel-brand.is-airbnb { --wa-channel-brand-bg: #ffe9ec; --wa-channel-brand-color: #e54263; }
.wa-finance-channel-brand.is-booking { --wa-channel-brand-bg: #e8efff; --wa-channel-brand-color: #123f8c; }
.wa-finance-channel-brand.is-expedia { --wa-channel-brand-bg: #fff4d8; --wa-channel-brand-color: #a96a00; }
.wa-finance-channel-brand.is-hotelbeds { --wa-channel-brand-bg: #e6f7f1; --wa-channel-brand-color: #087b69; }
.wa-finance-channel-brand.is-easyjet { --wa-channel-brand-bg: #fff0df; --wa-channel-brand-color: #d56a00; }
.wa-finance-channel-brand.is-lastminute { --wa-channel-brand-bg: #f0ecff; --wa-channel-brand-color: #6443c8; }
.wa-finance-channel-brand.is-sun { --wa-channel-brand-bg: #fff8d9; --wa-channel-brand-color: #9d7000; }
.wa-finance-channel-brand.is-direct { --wa-channel-brand-bg: #eaf2ff; --wa-channel-brand-color: #265fc1; }
.wa-finance-channel-brand.is-hyper { --wa-channel-brand-bg: #fce8f4; --wa-channel-brand-color: #ba317e; }

@media (prefers-reduced-motion: reduce) {
  .wa-finance-result-value.is-celebration,
  .wa-finance-result-sparkles i { animation: none; }

  .wa-finance-trend-tooltip,
  .wa-finance-channel-donut > .wa-finance-channel-tooltip { transition: none; }
}

.wa-finance-reconciliation-card {
  display: grid;
  align-content: start;
  gap: 14px;
}

.wa-finance-reconciliation-card .wa-finance-section-head {
  margin: 0;
}

.wa-finance-reconciliation-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.wa-finance-reconciliation-values > div {
  display: grid;
  gap: 5px;
  min-height: 76px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface2);
}

.wa-finance-reconciliation-values span {
  color: var(--ink2);
  font-size: 11px;
}

.wa-finance-reconciliation-values strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

@media (max-width: 1120px) {
  .wa-finance-hero-card.is-result { grid-column: span 6; }
  .wa-finance-hero-card.is-inflows { grid-column: span 3; }
  .wa-finance-hero-card.is-costs,
  .wa-finance-hero-card.is-ytd { grid-column: span 3; }
}

@media (max-width: 960px) {
  .wa-finance-hero-card.is-result { grid-column: span 12; }
  .wa-finance-hero-card.is-inflows,
  .wa-finance-hero-card.is-costs,
  .wa-finance-hero-card.is-ytd { grid-column: span 4; }

  .wa-finance-dashboard-stage-one-grid,
  .wa-finance-dashboard-stage-one-grid.is-secondary { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .wa-finance-hero { grid-template-columns: 1fr; }
  .wa-finance-hero-card.is-inflows,
  .wa-finance-hero-card.is-costs,
  .wa-finance-hero-card.is-result,
  .wa-finance-hero-card.is-ytd { grid-column: auto; min-height: 136px; }
  .wa-finance-hero-card.is-result > strong,
  .wa-finance-result-amount .wa-finance-result-value { font-size: 50px; }
  .wa-finance-hero-card.is-inflows > strong,
  .wa-finance-hero-card.is-costs > strong,
  .wa-finance-hero-card.is-ytd > strong { font-size: 30px; }

  .wa-finance-summary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-finance-channel-share-main { grid-template-columns: 124px minmax(0, 1fr); gap: 14px; }
  .wa-finance-channel-donut { width: 124px; }
  .wa-finance-channel-donut > div { width: 84px; }
  .wa-finance-channel-donut strong { font-size: 12px; }
  .wa-finance-reconciliation-values { grid-template-columns: 1fr; }
}

.help-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 18px;
}

.help-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 28%, transparent);
  backdrop-filter: blur(10px);
}

.help-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(720px, calc(100vh - 36px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--modal-radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.help-modal-header,
.help-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.help-modal-footer {
  border-top: 1px solid var(--border);
  border-bottom: 0;
  justify-content: flex-end;
}

.help-modal-header h2 {
  margin: 0;
  font: var(--weight-section-title) var(--type-section-title)/1.15 var(--font-body);
  letter-spacing: 0;
}

.help-modal-body {
  overflow: auto;
  padding: 18px;
}

.help-modal-body p {
  margin: 0 0 12px;
  color: var(--ink2);
  font-size: var(--type-body);
  line-height: var(--line-normal);
}

.help-modal-body ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: var(--type-body);
  line-height: 1.65;
}

@media (max-width: 640px) {
  .help-modal {
    align-items: end;
    padding: 0;
  }

  .help-modal-card {
    width: 100%;
    max-height: 86vh;
    border-radius: 22px 22px 0 0;
  }
}

/* ── Shared component: EmptyState ── */
.module-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
  color: var(--ink2);
}

.module-empty-state-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 2px;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 16px;
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  color: var(--ink);
  line-height: 1;
}

.module-empty-state-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.module-empty-state h3 {
  margin: 0;
  font-size: 15px;
  font-weight: var(--weight-card-title);
  color: var(--ink);
  font-family: var(--sans);
  letter-spacing: 0;
}

.module-empty-state p {
  margin: 0;
  font-size: 13px;
  color: var(--ink2);
  line-height: var(--line-normal);
  max-width: 28ch;
}

/* ── Shared component: FormModal ────────────────────────────────────
   Used by all single-type module modals after the 2026-05-11 cleanup.
   Complex multi-type modals (calendar, pets, packing, medical) keep
   their bespoke wrappers in main.css for now.
   ─────────────────────────────────────────────────────────────────── */
.module-form-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.module-form-modal[hidden] {
  display: none;
}

.module-form-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 30%, transparent);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

/* The card is usually the <form> element itself */
.module-form-modal-card {
  position: relative;
  width: min(600px, calc(100vw - 28px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 20px;
  border: var(--layf-border);
  border-radius: var(--layf-modal-radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

/* Wide variant for forms with 2-column grids that need more space */
.module-form-modal-card.is-wide {
  width: min(720px, calc(100vw - 28px));
}

.module-form-modal-head {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.module-form-modal-head h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-section-title);
  font-weight: var(--weight-section-title);
  letter-spacing: 0;
  line-height: 1.16;
}

.module-form-modal-foot {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.docs-mvp-modal-card,
.agreements-modal-card,
.family-calendar-form,
.gift-modal-card,
.planner-modal-card,
.ev-modal-box,
.health-modal-card,
.insp-modal,
.ac-modal-card,
.cs-modal {
  border: var(--layf-border);
  border-radius: var(--layf-modal-radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.docs-mvp-modal-card h2,
.agreements-modal-card h2,
.family-calendar-form h2,
.gift-modal-card h2,
.planner-modal-card h2,
.ev-modal-title,
.health-modal-card h2,
.insp-modal-header h2,
.cs-modal-title {
  font-family: var(--font-body);
  font-weight: var(--weight-section-title);
  letter-spacing: 0;
}

/* Mobile bottom-sheet behaviour */
@media (max-width: 640px) {
  .module-form-modal {
    align-items: flex-end;
    padding: 0;
  }

  .module-form-modal-card {
    width: 100%;
    max-height: 90dvh;
    border-radius: 22px 22px 0 0;
  }
}

/* ── Shared component: StatusCard / StatusGrid ── */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.status-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--layf-card-radius);
  box-shadow: var(--shadow-xs);
}

.status-card-icon {
  font-size: 16px;
  margin-bottom: 4px;
  line-height: 1;
}

.status-card-value {
  font-size: 22px;
  font-weight: var(--weight-metric);
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1.1;
}

.status-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink3);
}

.status-card.is-danger .status-card-value  { color: var(--danger); }
.status-card.is-warning .status-card-value { color: var(--warning); }
.status-card.is-positive .status-card-value { color: var(--positive); }
.status-card.is-info .status-card-value    { color: var(--info); }

/* ── Hero override reset (2026-05-11) ────────────────────────────────────
   main.css had per-module rules that turned .module-header into large
   orange gradient banners (min-height 190-280px, radial gradients, white
   text). Those modules now use compact ModuleHeader — these rules neutralise
   the legacy overrides. Dashboard and Planner are intentionally excluded.
   ─────────────────────────────────────────────────────────────────────── */
.recipes-page .module-header,
.shopping-page .module-header,
.packing-page .module-header,
.settings-page .module-header,
.beta-feedback-page .module-header {
  position: static;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
  color: inherit;
  align-items: flex-end;
}

.recipes-page .module-header::after,
.packing-page .module-header::after,
.settings-page .module-header::after,
.beta-feedback-page .module-header::after {
  display: none;
}

.recipes-page .module-header .module-header-main,
.recipes-page .module-header .module-header-actions,
.packing-page .module-header .module-header-main,
.packing-page .module-header .module-header-actions,
.settings-page .module-header-main,
.settings-page .module-header-actions,
.beta-feedback-page .module-header-main,
.beta-feedback-page .module-header-actions {
  position: static;
  z-index: auto;
}

.recipes-page .module-header .eyebrow,
.shopping-page .module-header .eyebrow,
.packing-page .module-header .eyebrow,
.settings-page .module-header .eyebrow,
.beta-feedback-page .module-header .eyebrow {
  display: block;
  min-height: unset;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--accent);
}

.recipes-page .module-header .page-title,
.shopping-page .module-header .page-title,
.packing-page .module-header .page-title,
.settings-page .module-header .page-title,
.beta-feedback-page .module-header .page-title {
  margin-top: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-page-title);
  font-weight: var(--weight-page-title);
  line-height: 1.08;
  letter-spacing: 0;
}

.recipes-page .module-header .page-sub,
.shopping-page .module-header .page-sub,
.packing-page .module-header .page-sub,
.settings-page .module-header .page-sub,
.beta-feedback-page .module-header .page-sub {
  max-width: none;
  color: var(--ink2);
  font-weight: 400;
}

.recipes-page .module-header .btn,
.shopping-page .module-header .btn,
.packing-page .module-header .btn,
.settings-page .module-header .btn,
.beta-feedback-page .module-header .btn {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  backdrop-filter: none;
}

.recipes-page .module-header .btn-primary,
.shopping-page .module-header .btn-primary,
.packing-page .module-header .btn-primary,
.settings-page .module-header .btn-primary,
.beta-feedback-page .module-header .btn-primary {
  border-color: var(--layf-accent-border);
  background: var(--layf-accent-soft-bg);
  color: var(--ink);
}

/* ── Dashboard mobile: prevent week-strip from making the page wider ──────
   .layf-dash-days uses repeat(7, 76px) = 532px on mobile which is wider
   than the viewport. The card wrapping it must clip this overflow so the
   strip scrolls internally (it has overflow-x:auto) instead of pushing
   the whole page right. */
@media (max-width: 760px) {
  .layf-dash-card {
    overflow: hidden;
  }
}

/* ── Dashboard mobile: force side padding so hero has visible margins ─────
   Density-specific rules (html[data-density] .page-wrap, specificity 0-2-1)
   can beat the generic .page-wrap.module-page padding (0-2-0), potentially
   leaving .dashboard-page with no horizontal padding. !important ensures
   the hero matches the Planner's side spacing on all mobile devices. */
@media (max-width: 860px) {
  .dashboard-page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── Settings: consistent card borders ───────────────────────────────────── */
.settings-page .card {
  border: 1px solid rgba(17, 24, 56, 0.12) !important;
}
html[data-dark='true'] .settings-page .card {
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

/* ── Settings: theme / appearance selector ───────────────────────────────── */

.settings-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.settings-theme-grid--compact {
  grid-template-columns: repeat(2, minmax(140px, 220px));
}

.settings-section-divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}

.settings-section-sub-label {
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink3);
  margin: 0 0 10px;
}

/* ── Settings: two-column row layout ─────────────────────────────────────── */
.settings-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

/* Prevent grid children from overflowing their column */
.settings-two-col > * {
  min-width: 0;
  overflow: hidden;
}

/* Wine Apartments: settings are an operational control surface, not a profile page. */
.settings-page .card.panel {
  padding: 16px 18px;
}

.settings-page .section-title {
  margin-bottom: 4px;
  font-size: 17px;
  line-height: 1.25;
}

.settings-page .settings-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.settings-two-col--operational {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: start;
}

/* Wine Apartments: keep Settings in a simple operational order. */
.settings-page .settings-top-row {
  display: block;
  margin-bottom: 12px;
}

.settings-page .settings-two-col--controls {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  margin-bottom: 12px;
}

.settings-page .settings-appearance-panel,
.settings-page .settings-auth-panel {
  min-height: 100%;
}

.settings-page .settings-backup-panel,
.settings-page .wa-email-notifications-panel,
.settings-page .wa-access-draft,
.settings-page .settings-legal-panel,
.settings-page .settings-modules-panel {
  margin-top: 12px;
}

.settings-two-col--compact {
  margin-top: 12px;
}

.wa-email-notifications-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.wa-email-notifications-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 8px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.wa-email-notifications-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wa-email-notifications-list {
  display: grid;
  border-top: 1px solid var(--border);
}

.wa-email-notification-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(175px, .55fr);
  gap: 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.wa-email-notification-row strong,
.wa-email-notification-row span,
.wa-email-notification-row em {
  display: block;
}

.wa-email-notification-row strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.wa-email-notification-row > div:first-child > span {
  margin-top: 2px;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.35;
}

.wa-email-notification-meta {
  text-align: right;
}

.wa-email-notification-meta span {
  color: var(--ink2);
  font-size: 11px;
  line-height: 1.35;
}

.wa-email-notification-meta em {
  margin-top: 2px;
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.wa-email-notifications-footnote {
  margin: 10px 0 0;
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.4;
}

.wa-notification-recipients {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.wa-notification-recipients-head h3,
.wa-notification-recipients-head p,
.wa-notification-recipient-form-head strong,
.wa-notification-recipient-form-head span,
.wa-notification-recipients-empty {
  margin: 0;
}

.wa-notification-recipients-head h3 {
  color: var(--ink);
  font-size: 14px;
}

.wa-notification-recipients-head p,
.wa-notification-recipients-empty,
.wa-notification-recipient-form-head span {
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.45;
}

.wa-notification-recipient-list {
  display: grid;
  gap: 8px;
}

.wa-notification-recipient-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, .9fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
}

.wa-notification-recipient-row strong,
.wa-notification-recipient-row span,
.wa-notification-recipient-row small {
  display: block;
}

.wa-notification-recipient-row strong { color: var(--ink); font-size: 12px; }
.wa-notification-recipient-row span,
.wa-notification-recipient-row small { color: var(--ink2); font-size: 11px; line-height: 1.35; }
.wa-notification-recipient-row small { margin-top: 2px; color: var(--ink3); }
.wa-notification-recipient-types { display: flex; flex-wrap: wrap; gap: 4px; }
.wa-notification-recipient-types em {
  padding: 4px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  line-height: 1.15;
}

.wa-notification-recipient-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.wa-notification-recipient-form-head { display: grid; gap: 2px; }
.wa-notification-recipient-form-head strong { color: var(--ink); font-size: 12px; }
.wa-notification-recipient-inputs { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(150px, .7fr); gap: 8px; }
.wa-notification-recipient-inputs .field { gap: 4px; }
.wa-notification-recipient-inputs .field > span { font-size: 10px; }
.wa-notification-recipient-inputs .field-input { min-height: 34px; padding: 7px 9px; font-size: 12px; }
.wa-notification-type-grid { display: flex; flex-wrap: wrap; gap: 7px 10px; }
.wa-notification-type-grid label { display: inline-flex; align-items: center; gap: 5px; color: var(--ink2); font-size: 11px; }
.wa-notification-type-grid input { accent-color: var(--accent); }
.wa-notification-type-grid label:has(input:disabled) { color: var(--ink3); text-decoration: line-through; }

@media (max-width: 700px) {
  .settings-two-col {
    grid-template-columns: 1fr;
  }

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

  .wa-email-notification-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .wa-email-notification-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    text-align: left;
  }

  .wa-email-notification-meta em {
    margin-top: 0;
  }

  .wa-notification-recipient-row,
  .wa-notification-recipient-inputs { grid-template-columns: 1fr; }

  .wa-notification-recipient-remove { justify-self: start; }
}

/* ── Settings: top row — profile + onboarding guide side by side ─────────── */
.settings-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 0;
}

/* Below ~860px (half-screen on typical desktop): stack vertically */
@media (max-width: 860px) {
  .settings-top-row {
    grid-template-columns: 1fr;
  }
}

/* Onboarding card inside top-row: fill available height */
.settings-top-row > * {
  min-width: 0;
}

/* ── Settings: profile card ───────────────────────────────────────────────── */
.settings-profile-card {
  padding: 16px !important;
  margin: 0 !important;
  display: grid;
  gap: 16px;
}

.settings-profile-card--account {
  max-width: 880px;
}

/* Always horizontal: photo left, data right — regardless of container width.
   flex-direction: row must be explicit to beat the legacy main.css
   @media (max-width: 760px) rule that sets column. */
.settings-profile-main {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.settings-profile-avatar-block {
  display: grid;
  justify-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.settings-profile-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  display: grid !important;
  place-items: center !important;
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 10%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent) !important;
  overflow: hidden !important;
}

.settings-profile-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.settings-profile-copy {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.settings-profile-nick {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 680 !important;
  color: var(--ink) !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.settings-profile-fullname {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink2) !important;
}

.settings-profile-role {
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink2) !important;
}

.settings-profile-email {
  margin: 3px 0 0 !important;
  font-size: 10px !important;
  color: var(--ink3, var(--ink2)) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.settings-profile-hint {
  margin: 6px 0 0 !important;
  max-width: 560px !important;
  color: var(--ink2) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.settings-profile-eyebrow {
  margin: 0 !important;
  color: var(--accent) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.settings-profile-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: end;
  padding-top: 12px;
  border-top: 1px solid var(--line, var(--border));
}

.settings-profile-form .field {
  margin: 0;
}

.settings-profile-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-profile-photo-btn {
  padding-inline: 10px !important;
  min-height: 30px !important;
}

.settings-profile-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink2);
  font-size: 12px;
}

.settings-profile-status[data-tone='success'] {
  color: #15803d;
}

.settings-profile-status[data-tone='error'] {
  color: #b91c1c;
}

.settings-profile-btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  align-self: center !important;
}

/* On very narrow screens (phone): allow wrapping */
@media (max-width: 420px) {
  .settings-profile-main {
    align-items: flex-start !important;
  }
  .settings-profile-form {
    grid-template-columns: 1fr;
  }
  .settings-profile-actions {
    justify-content: stretch;
  }
  .settings-profile-actions .btn {
    flex: 1 1 auto;
  }
}

.settings-auth-btn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 480px) {
  .settings-page .settings-two-col--controls {
    grid-template-columns: 1fr;
  }

  .settings-auth-btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .settings-auth-btn-row .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Wine Apartments: responsive workspace pass ────────────────────────────
   Dense operational pages must work in a half-width desktop window as well as
   on a phone. Tables retain their columns inside local scroll containers;
   cards and actions reflow before they can expand the application shell. */
.wa-finance-page,
.wa-res-page,
.svc-page,
.inventory-page,
.checkin-audit-page,
.inspections-page,
.access-control-page,
.cleaning-page,
.cleaning-service-page,
.wab-shell {
  min-width: 0;
}

.page-wrap.module-page :where(.card, .panel, .svc-table-wrap, .checkin-audit-table-wrap, .cs-hist-table-wrap, .wa-table-scroll, .wa-monthly-finance-scroll, .wa-reservation-table-scroll) {
  min-width: 0;
}

.page-wrap.module-page :where(.svc-table-wrap, .checkin-audit-table-wrap, .cs-hist-table-wrap, .wa-table-scroll, .wa-monthly-finance-scroll, .wa-reservation-table-scroll) {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1120px) {
  .page-wrap.module-page .module-header {
    align-items: flex-start;
    gap: 12px;
  }

  .page-wrap.module-page .module-header-actions {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .page-wrap.module-page .module-header-actions .btn {
    min-width: 0;
  }

  .wa-finance-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .checkin-audit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cleaning-page .cs-tabs-bar,
  .inspections-page .insp-tabs,
  .wa-finance-switch--wide {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
}

@media (max-width: 760px) {
  .page-wrap.module-page {
    padding-inline: 12px;
  }

  .page-wrap.module-page .module-header-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
    width: 100%;
  }

  .page-wrap.module-page .module-header-actions .btn {
    justify-content: center;
    width: 100% !important;
  }

  .wa-finance-kpis,
  .checkin-audit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .wa-finance-kpi,
  .checkin-audit-stats article { min-height: 94px; padding: 12px; }

  .wa-finance-kpi strong,
  .checkin-audit-stats strong { font-size: 21px; }

  .checkin-audit-log-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .checkin-audit-more {
    align-items: stretch;
    flex-direction: column;
  }

  .checkin-audit-more .btn { width: 100%; }

  .access-control-page .ac-code-row {
    align-items: stretch;
    flex-direction: column;
  }

  .access-control-page .ac-row-right {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .access-control-page .ac-row-actions { margin-left: auto; }

  .inspections-page .insp-tabs,
  .cleaning-page .cs-tabs-bar {
    margin-inline: -2px;
    padding-bottom: 3px;
  }

  .inspections-page .insp-tab,
  .cleaning-page .cs-tab { flex: 0 0 auto; }

  .svc-page .svc-table-wrap,
  .checkin-audit-page .checkin-audit-table-wrap,
  .cleaning-page .cs-hist-table-wrap,
  .wa-finance-page .wa-table-scroll,
  .wa-finance-page .wa-monthly-finance-scroll,
  .wa-finance-page .wa-reservation-table-scroll {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  .inventory-page .inv-items-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .inventory-page .inv-search { flex: 1 1 100%; }
}

@media (max-width: 420px) {
  .wa-finance-kpis,
  .checkin-audit-stats { grid-template-columns: 1fr; }

  .settings-page .settings-profile-main { align-items: flex-start !important; }
  .settings-page .settings-profile-btn { margin-left: 60px; width: auto !important; }
}

/* ── Module Briefs / internal admin checkpoint ─────────────────────────── */
.module-briefs-page {
  --module-brief-hairline: var(--layf-accent-gradient, linear-gradient(135deg, var(--accent), var(--accent-lt)));
}

.module-briefs-page .module-header .btn-primary {
  border-color: var(--layf-accent-border, var(--border)) !important;
  background: var(--layf-accent-soft-bg, var(--accent-lt)) !important;
  color: var(--ink) !important;
}

.module-brief-admin-strip,
.module-brief-list,
.module-brief-detail,
.module-briefs-denied,
.module-brief-form {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--module-brief-hairline) border-box;
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(17, 24, 56, .055);
}

.module-brief-admin-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.module-brief-admin-strip > div:not(.module-brief-admin-actions) {
  min-width: 0;
  flex: 1;
}

.module-brief-admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.module-brief-import-label {
  cursor: pointer;
}

.module-brief-admin-strip p,
.module-briefs-denied p,
.module-brief-detail p,
.module-brief-row small,
.module-brief-empty p,
.module-brief-sample-note {
  color: var(--ink2);
}

.module-brief-admin-badge,
.module-brief-status {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 999px;
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  color: var(--ink);
  font-size: 11px;
  font-weight: 820;
}

.module-brief-layout {
  display: grid;
  grid-template-columns: minmax(290px, .9fr) minmax(0, 1.35fr);
  gap: 14px;
  align-items: start;
}

.module-brief-list,
.module-brief-detail {
  padding: clamp(14px, 1.8vw, 20px);
}

.module-brief-list {
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

.module-brief-detail {
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

.module-brief-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .42fr);
  gap: 10px;
  margin-bottom: 12px;
}

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

.module-brief-summary span {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 720;
}

.module-brief-summary strong {
  display: block;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.module-brief-rows {
  display: grid;
  gap: 9px;
}

.module-brief-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
.module-brief-row:hover:not(.is-active) {
  background: var(--surface2) !important;
}

.module-brief-row-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface2);
  color: var(--ink2);
}

.module-brief-row strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 13.5px;
}

.module-brief-row small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  line-height: 1.35;
}

.module-brief-status.is-approved,
.module-brief-status.is-implemented {
  background: color-mix(in srgb, #22c55e 10%, var(--surface));
  border-color: color-mix(in srgb, #22c55e 24%, var(--border));
}

.module-brief-status.is-in-progress {
  background: color-mix(in srgb, #60a5fa 10%, var(--surface));
  border-color: color-mix(in srgb, #60a5fa 24%, var(--border));
}

.module-brief-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.module-brief-detail-head h2 {
  margin: 8px 0 5px;
  color: var(--ink);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
}

.module-brief-detail-actions,
.module-brief-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.module-brief-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ink2);
  font-size: 12px;
  font-weight: 720;
}

.module-brief-copy-note {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 14px;
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  color: var(--ink);
  font-size: 13px;
  font-weight: 720;
}

.module-brief-copy-note.is-error {
  border-color: color-mix(in srgb, var(--danger) 26%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.module-brief-section-grid {
  display: grid;
  gap: 10px;
}

.module-brief-section {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface2) 54%, var(--surface));
}

.module-brief-section h3 {
  margin: 0 0 7px;
  color: var(--ink);
  font-size: 13px;
}

.module-brief-section p {
  margin: 0;
  font-size: 13px;
  line-height: 1.48;
}

.module-brief-sample-note,
.module-brief-empty {
  padding: 12px;
  border: 1px dashed var(--layf-accent-border, var(--border));
  border-radius: 14px;
  background: var(--surface2);
  font-size: 13px;
}

.module-brief-sample-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.module-briefs-denied {
  max-width: 680px;
  padding: 24px;
}

.module-briefs-lock {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 15px;
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  color: var(--ink);
}

.module-brief-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}

.module-brief-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 56, .28);
  backdrop-filter: blur(12px);
}

.module-brief-form {
  position: relative;
  z-index: 1;
  width: min(860px, 100%);
  max-height: min(86vh, 900px);
  overflow: auto;
  padding: 18px;
}

.module-brief-form-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.module-brief-form-head h2 {
  margin: 0;
  color: var(--ink);
}

.module-brief-kicker {
  margin: 0 0 4px;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.module-brief-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .34fr);
  gap: 12px;
}

.module-brief-span {
  grid-column: 1 / -1;
}

.module-brief-form-actions {
  position: sticky;
  bottom: -18px;
  margin: 14px -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(14px);
}

@media (max-width: 920px) {
  .module-brief-layout {
    grid-template-columns: 1fr;
  }

  .module-brief-detail-head,
  .module-brief-admin-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .module-brief-admin-actions {
    justify-content: flex-start;
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .module-brief-toolbar,
  .module-brief-summary,
  .module-brief-form-grid {
    grid-template-columns: 1fr;
  }

  .module-brief-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .module-brief-row .module-brief-status {
    grid-column: 2;
  }

  .module-brief-sample-note {
    align-items: stretch;
    flex-direction: column;
  }

}

.settings-theme-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s;
  box-shadow: var(--shadow-xs);
}

.settings-theme-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-lt));
  box-shadow: var(--shadow-sm);
}

.settings-theme-tile.is-active {
  border-color: var(--accent) !important;
  background: var(--accent-lt) !important;
  box-shadow: 0 0 0 2px var(--accent) !important;
}

.settings-theme-tile.is-active strong {
  color: var(--accent);
}

.settings-theme-tile.is-soon {
  opacity: 0.48;
  cursor: default;
  pointer-events: none;
}

.settings-theme-swatches {
  display: flex;
  gap: 4px;
}

.settings-theme-swatches i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: block;
  border: 1px solid rgba(0,0,0,0.06);
}

.settings-theme-tile strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.settings-theme-tile small {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink3);
  line-height: 1.3;
}

.settings-theme-soon-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink3) !important;
  font-size: 10px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Planner Pinned: calendar opt-in cards and responsive add form */
.planner-warm-quickbar[data-active-tab="pinned"] {
  grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.5fr) minmax(170px, .9fr) minmax(184px, auto) !important;
}

.planner-warm-quickbar datalist {
  display: none;
}

.planner-warm-quickbar .planner-warm-primary {
  min-width: max-content;
  white-space: nowrap;
}

.planner-warm-pinned-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}

.planner-warm-pinned-group {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface2));
  box-shadow: var(--shadow-xs);
}

.planner-warm-pinned-group h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.planner-warm-pinned-list {
  display: grid;
  gap: 10px;
}

.planner-warm-pinned-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.planner-warm-pinned-card-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.planner-warm-pinned-card-main strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.planner-warm-pinned-card-main small {
  display: block;
  margin-top: 4px;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.35;
}

.planner-warm-pinned-dot {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
}

.planner-warm-pinned-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.planner-warm-pinned-actions .planner-warm-ghost,
.planner-warm-pinned-actions .planner-warm-danger {
  min-height: 34px;
  padding: 8px 10px;
  font-size: 12px;
}

.planner-warm-pinned-calendar.is-on {
  opacity: .72;
  cursor: default;
}

@media (max-width: 1180px) {
  .planner-warm-quickbar[data-active-tab="pinned"] {
    grid-template-columns: minmax(0, 1fr) minmax(170px, .8fr) minmax(184px, auto) !important;
  }

  .planner-warm-quickbar[data-active-tab="pinned"] > div:first-child {
    display: block;
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .planner-warm-quickbar[data-active-tab="pinned"] {
    grid-template-columns: 1fr !important;
  }

  .planner-warm-quickbar .planner-warm-primary {
    width: 100%;
  }

  .planner-warm-pinned-groups {
    grid-template-columns: 1fr;
  }
}

/* Planner polish: align Calendar / Workflow / Pinned with Layf Core */
html[data-theme='layf-core'] .planner-warm-page--no-left {
  max-width: 1500px;
}

html[data-theme='layf-core'] .planner-warm-toolbar--tabs-only {
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-theme='layf-core'] .planner-warm-tabs {
  border-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface) 94%, var(--bg)) !important;
  box-shadow: 0 8px 22px rgba(17,24,39,.04) !important;
}

html[data-theme='layf-core'] .planner-warm-tab {
  min-height: 38px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

html[data-theme='layf-core'] .planner-warm-calendar-card,
html[data-theme='layf-core'] .planner-warm-flow-card,
html[data-theme='layf-core'] .planner-warm-pinned-group,
html[data-theme='layf-core'] .planner-warm-pinned-card,
html[data-theme='layf-core'] .planner-warm-day {
  border-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface) 97%, var(--bg)) !important;
  box-shadow: 0 10px 28px rgba(17,24,39,.055) !important;
}

html[data-theme='layf-core'] .planner-warm-calendar-card {
  padding: clamp(14px, 1.6vw, 20px) !important;
  border-radius: 24px !important;
}

html[data-theme='layf-core'] .planner-warm-section-head {
  align-items: center !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom-color: color-mix(in srgb, var(--border) 76%, transparent) !important;
}

html[data-theme='layf-core'] .planner-warm-section-head h2 {
  margin-bottom: 4px !important;
  color: var(--ink) !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

html[data-theme='layf-core'] .planner-warm-section-head p {
  max-width: 620px;
  color: var(--ink2) !important;
  font-size: 12px !important;
  line-height: 1.4;
}

html[data-theme='layf-core'] .planner-warm-quickbar {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  box-shadow: 0 8px 22px rgba(17,24,39,.045) !important;
}

html[data-theme='layf-core'] .planner-warm-quickbar input,
html[data-theme='layf-core'] .planner-warm-quickbar select {
  border-color: var(--border) !important;
  background: var(--surface2) !important;
}

html[data-theme='layf-core'] .planner-warm-flow-card--visual {
  padding: 16px !important;
  border-radius: 22px !important;
}

html[data-theme='layf-core'] .planner-warm-flow-card--visual .planner-warm-flow-top {
  align-items: center !important;
  padding: 12px !important;
  border-color: var(--border) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--flow-color, var(--accent)) 8%, transparent), transparent 56%),
    var(--surface2) !important;
}

html[data-theme='layf-core'] .planner-warm-flow-title strong {
  font-size: clamp(19px, 2vw, 24px) !important;
  font-weight: 780 !important;
  line-height: 1.08 !important;
}

html[data-theme='layf-core'] .planner-warm-flow-title small {
  border: 1px solid color-mix(in srgb, var(--flow-color, var(--accent)) 18%, var(--border)) !important;
  background: color-mix(in srgb, var(--flow-color, var(--accent)) 9%, var(--surface)) !important;
  color: var(--ink2) !important;
}

html[data-theme='layf-core'] .planner-warm-flow-members span {
  border: 1px solid color-mix(in srgb, var(--flow-color, var(--accent)) 14%, var(--border));
  background: color-mix(in srgb, var(--flow-color, var(--accent)) 8%, var(--surface));
  color: var(--ink);
}

html[data-theme='layf-core'] .planner-warm-flow-meta {
  grid-template-columns: auto auto;
  align-items: center;
}

html[data-theme='layf-core'] .planner-warm-flow-menu {
  appearance: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  grid-row: span 2;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink2);
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

html[data-theme='layf-core'] .planner-warm-flow-menu:hover {
  border-color: var(--layf-accent-border);
  background: var(--layf-accent-soft-bg);
  color: var(--ink);
}

html[data-theme='layf-core'] .planner-warm-flow-meta span {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink2);
}

html[data-theme='layf-core'] .planner-warm-flow-meta strong {
  color: var(--ink);
  font-weight: 760;
}

html[data-theme='layf-core'] .planner-warm-visual-card-grid {
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto;
  padding: 2px 2px 12px;
  scroll-snap-type: x proximity;
}

html[data-theme='layf-core'] .planner-warm-visual-step {
  flex: 0 0 clamp(190px, 22vw, 240px);
  min-height: 176px !important;
  border-radius: 18px !important;
  border-color: color-mix(in srgb, var(--flow-color, var(--accent)) 14%, var(--border)) !important;
  box-shadow: 0 10px 24px rgba(17,24,39,.055) !important;
  scroll-snap-align: start;
}

html[data-theme='layf-core'] .planner-warm-visual-step:not(.has-image) {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--flow-color, var(--accent)) 8%, var(--surface)), var(--surface)) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-step:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 32px rgba(17,24,39,.08) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-step.has-image {
  background-size: cover !important;
  background-position: center !important;
  color: #fff !important;
}

html[data-theme='layf-core'] .planner-warm-visual-step-number,
html[data-theme='layf-core'] .planner-warm-visual-step-status {
  padding: 5px 9px !important;
  border: 1px solid color-mix(in srgb, var(--flow-color, var(--accent)) 16%, var(--border)) !important;
  background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
  color: var(--ink2) !important;
  font-size: 10px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-step.has-image .planner-warm-visual-step-number,
html[data-theme='layf-core'] .planner-warm-visual-step.has-image .planner-warm-visual-step-status {
  background: rgba(255,255,255,.82) !important;
  color: #111827 !important;
}

html[data-theme='layf-core'] .planner-warm-visual-step-content strong {
  font-size: 16px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

html[data-theme='layf-core'] .planner-warm-visual-step--add {
  border-style: dashed !important;
  background: color-mix(in srgb, var(--surface) 94%, var(--layf-accent-soft-bg)) !important;
  color: var(--ink2) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-step--add span {
  width: 42px !important;
  height: 42px !important;
  background: var(--layf-accent-soft-bg) !important;
  color: var(--ink) !important;
  font-size: 24px !important;
}

html[data-theme='layf-core'] .planner-warm-flow-progress {
  margin-top: 12px !important;
}

html[data-theme='layf-core'] .planner-warm-flow-progress div {
  height: 7px !important;
  border-radius: 999px;
  background: var(--surface2) !important;
  overflow: hidden;
}

html[data-theme='layf-core'] .planner-warm-flow-progress div span {
  background: var(--layf-accent-gradient) !important;
}

html[data-theme='layf-core'] .planner-warm-pinned-groups {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

html[data-theme='layf-core'] .planner-warm-pinned-group {
  border-radius: 22px !important;
  padding: 14px !important;
}

html[data-theme='layf-core'] .planner-warm-pinned-card {
  border-radius: 18px !important;
  box-shadow: none !important;
}

html[data-theme='layf-core'] .planner-warm-pinned-dot,
html[data-theme='layf-core'] .planner-warm-event-icon {
  border-color: var(--layf-accent-border) !important;
  background: var(--layf-accent-soft-bg) !important;
  color: var(--ink) !important;
}

html[data-theme='layf-core'] .planner-warm-day {
  min-height: clamp(235px, 31vh, 390px) !important;
  box-shadow: 0 8px 22px rgba(17,24,39,.045) !important;
}

html[data-theme='layf-core'] .planner-warm-day header {
  background: var(--surface) !important;
}

html[data-theme='layf-core'] .planner-warm-event {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

html[data-theme='layf-core'] .planner-warm-event:hover {
  border-color: var(--layf-accent-border) !important;
  background: color-mix(in srgb, var(--surface) 94%, var(--layf-accent-soft-bg)) !important;
  transform: none !important;
}

@media (max-width: 900px) {
  html[data-theme='layf-core'] .planner-warm-section-head {
    align-items: stretch !important;
    flex-direction: column;
  }

  html[data-theme='layf-core'] .planner-warm-week-nav {
    justify-content: flex-start;
  }

  html[data-theme='layf-core'] .planner-warm-visual-step {
    flex-basis: min(76vw, 220px);
    min-height: 164px !important;
  }
}

/* Planner Workflow slice: compact Layf Core list rows */
html[data-theme='layf-core'] .planner-warm-visual-workflow {
  background: var(--surface) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-section-head {
  min-height: 56px;
  margin-bottom: 12px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-workflow-list {
  gap: 12px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-flow-card--visual {
  display: grid !important;
  grid-template-columns: minmax(210px, .7fr) minmax(0, 2.4fr) minmax(82px, auto);
  gap: 18px;
  align-items: center;
  min-height: 104px;
  padding: 14px 16px !important;
  border-radius: 20px !important;
  background: var(--surface) !important;
  box-shadow: 0 8px 24px rgba(17,24,39,.045) !important;
}

html[data-theme='layf-core'] .planner-warm-flow-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

html[data-theme='layf-core'] .planner-warm-flow-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--flow-color, var(--accent)) 20%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--flow-color, var(--accent)) 10%, var(--surface));
  color: color-mix(in srgb, var(--flow-color, var(--accent)) 78%, var(--ink));
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -.02em;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-flow-title strong {
  overflow: hidden;
  color: var(--ink) !important;
  font-size: clamp(15px, 1.4vw, 18px) !important;
  font-weight: 780 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-flow-title small {
  margin-top: 5px !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-flow-members {
  margin-top: 8px;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-flow-members span {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-card-grid {
  min-width: 0;
  margin: 0 !important;
  padding: 2px 2px 4px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-step {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  flex: 0 0 clamp(144px, 15vw, 174px);
  min-height: 72px !important;
  padding: 11px 12px !important;
  border-radius: 15px !important;
  box-shadow: none !important;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-step-number {
  position: static !important;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  border-radius: 999px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-step-status {
  display: none !important;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-step-content {
  position: static !important;
  inset: auto !important;
  min-width: 0;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-step-content strong {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  font-size: 12px !important;
  font-weight: 780 !important;
  line-height: 1.18 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-step-content small {
  display: block;
  margin-top: 5px;
  color: var(--ink2);
  font-size: 10px;
  font-weight: 650;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-step.has-image {
  min-height: 76px !important;
  text-shadow: 0 1px 14px rgba(0,0,0,.34);
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-step.has-image .planner-warm-visual-step-content small {
  color: rgba(255,255,255,.82);
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-step--add {
  place-items: center;
  align-content: center;
  grid-template-columns: auto minmax(0, 1fr);
  border-style: dashed !important;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-step--add span {
  width: 28px !important;
  height: 28px !important;
  font-size: 18px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-step--add strong {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 760;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-step--add small {
  display: none;
}

html[data-theme='layf-core'] .planner-warm-flow-side {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 76px;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-flow-meta {
  display: grid;
  justify-items: end;
  gap: 2px;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-flow-progress {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  width: 70px;
  margin: 0 !important;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-flow-progress div span {
  background: color-mix(in srgb, var(--flow-color, var(--accent)) 82%, var(--layf-accent-violet)) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-flow-progress small {
  display: none;
}

html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-flow-menu {
  width: 32px;
  height: 32px;
}

@media (max-width: 1180px) {
  html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-flow-card--visual {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-card-grid {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* Planner Pinned slice: compact Layf Core columns */
html[data-theme='layf-core'] .planner-warm-visual-pinned {
  background: var(--surface) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-section-head {
  min-height: 56px;
  margin-bottom: 12px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar {
  display: grid !important;
  grid-template-columns: minmax(190px, .75fr) minmax(240px, 1.3fr) minmax(170px, .85fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 0 0 14px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(17,24,39,.045) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar > div:first-child strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.2;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar > div:first-child small {
  display: block;
  margin-top: 3px;
  color: var(--ink2);
  font-size: 11px;
  line-height: 1.25;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar input {
  min-width: 0;
  height: 42px;
  border-radius: 14px !important;
  font-size: 13px;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar .planner-warm-primary {
  min-height: 42px;
  padding-inline: 16px !important;
  border-radius: 14px !important;
  white-space: nowrap;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px !important;
  align-items: start;
  margin-top: 0 !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-group {
  gap: 12px;
  padding: 12px !important;
  border-color: var(--border) !important;
  border-radius: 20px !important;
  background: color-mix(in srgb, var(--surface) 96%, var(--bg)) !important;
  box-shadow: 0 8px 24px rgba(17,24,39,.04) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-group header {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-group h3 {
  overflow: hidden;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-group header span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 7px;
  border: 1px solid var(--layf-accent-border);
  border-radius: 999px;
  background: var(--layf-accent-soft-bg);
  color: var(--ink);
  font-size: 11px;
  font-weight: 760;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-list {
  gap: 8px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-card {
  gap: 10px;
  padding: 12px !important;
  border-color: var(--border) !important;
  border-radius: 16px !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-card-main {
  align-items: center;
  gap: 10px;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-dot {
  width: 34px;
  height: 34px;
  border-color: var(--layf-accent-border) !important;
  border-radius: 12px;
  background: var(--layf-accent-soft-bg) !important;
  color: var(--ink) !important;
  font-size: 10px;
  letter-spacing: -.01em;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-card-main strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 780 !important;
  line-height: 1.2 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-card-main small {
  margin-top: 5px;
  color: var(--ink2) !important;
  font-size: 11px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-actions .planner-warm-ghost,
html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-actions .planner-warm-danger {
  min-height: 30px;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-calendar.is-on {
  border-color: var(--layf-accent-border) !important;
  background: var(--layf-accent-soft-bg) !important;
  opacity: .82;
}

@media (max-width: 1120px) {
  html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar {
    grid-template-columns: minmax(0, 1fr) minmax(160px, .75fr) auto !important;
  }

  html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar {
    grid-template-columns: 1fr !important;
  }

  html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar .planner-warm-primary {
    width: 100%;
  }

  html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-groups {
    grid-template-columns: 1fr;
  }
}

/* Planner Pinned board: approved compact direction */
html[data-theme='layf-core'] .planner-warm-visual-pinned {
  padding: clamp(18px, 2.2vw, 28px) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(124,58,237,.035), transparent 28%),
    var(--surface) !important;
}

html[data-theme='layf-core'] .planner-warm-pinned-title {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}

html[data-theme='layf-core'] .planner-warm-pinned-title h2 {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: var(--ink);
  font-size: clamp(25px, 2.25vw, 34px);
  font-weight: 820;
  letter-spacing: -.03em;
  line-height: 1.05;
}

html[data-theme='layf-core'] .planner-warm-pinned-title h2 span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--layf-accent-border);
  border-radius: 9px;
  background: var(--layf-accent-soft-bg);
  color: var(--layf-accent-violet);
  font-size: 15px;
}

html[data-theme='layf-core'] .planner-warm-pinned-title p {
  margin: 9px 0 0;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.45;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar {
  grid-template-columns: minmax(240px, 1.8fr) minmax(190px, .9fr) minmax(116px, auto) !important;
  padding: 12px 14px !important;
  margin-bottom: 24px !important;
  border-radius: 22px !important;
  background: color-mix(in srgb, var(--surface) 98%, var(--bg)) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar > div:first-child {
  display: none !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar input {
  height: 48px;
  padding-inline: 16px;
  border-radius: 15px !important;
  background: var(--surface) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar .planner-warm-primary {
  min-height: 48px;
  padding-inline: 24px !important;
  border-radius: 15px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-groups {
  grid-template-columns: repeat(auto-fit, minmax(226px, 1fr));
  gap: 10px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-group {
  min-height: 330px;
  padding: 14px !important;
  border-color: color-mix(in srgb, var(--group-color, var(--accent)) 13%, var(--border)) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--group-color, var(--accent)) 4%, var(--surface)), var(--surface) 45%) !important;
  box-shadow: 0 14px 34px rgba(17,24,39,.035) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-group header {
  margin-bottom: 4px;
}

html[data-theme='layf-core'] .planner-warm-pinned-group-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

html[data-theme='layf-core'] .planner-warm-pinned-group-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid color-mix(in srgb, var(--group-color, var(--accent)) 18%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--group-color, var(--accent)) 12%, var(--surface));
  color: color-mix(in srgb, var(--group-color, var(--accent)) 78%, var(--ink));
  font-size: 14px;
  font-weight: 850;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-group h3 {
  font-size: 14px !important;
  font-weight: 780 !important;
}

html[data-theme='layf-core'] .planner-warm-pinned-group-count {
  min-width: 24px;
  height: 24px;
  border-color: color-mix(in srgb, var(--group-color, var(--accent)) 12%, var(--border)) !important;
  background: color-mix(in srgb, var(--group-color, var(--accent)) 8%, var(--surface2)) !important;
  color: var(--ink2) !important;
}

html[data-theme='layf-core'] .planner-warm-pinned-group-menu {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink2);
  cursor: default;
  font: inherit;
  font-weight: 900;
}

html[data-theme='layf-core'] .planner-warm-pinned-group-menu:hover {
  background: var(--surface2);
  color: var(--ink);
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-list {
  gap: 9px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 64px;
  padding: 10px 10px 10px 12px !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--surface) 98%, var(--bg)) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-card:hover {
  border-color: color-mix(in srgb, var(--group-color, var(--accent)) 18%, var(--border)) !important;
  transform: translateY(-1px);
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-card-main {
  min-width: 0;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-dot {
  width: 32px;
  height: 32px;
  border-color: color-mix(in srgb, var(--group-color, var(--accent)) 14%, var(--border)) !important;
  background: color-mix(in srgb, var(--group-color, var(--accent)) 11%, var(--surface)) !important;
  color: color-mix(in srgb, var(--group-color, var(--accent)) 68%, var(--ink)) !important;
  font-size: 10px;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-card-main strong {
  font-size: 12.5px !important;
  line-height: 1.18 !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-card-main small {
  margin-top: 5px;
  font-size: 11px !important;
}

html[data-theme='layf-core'] .planner-warm-pinned-card-tools {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

html[data-theme='layf-core'] .planner-warm-pinned-calendar-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--ink2);
  font-size: 12px;
}

html[data-theme='layf-core'] .planner-warm-pinned-menu {
  position: relative;
}

html[data-theme='layf-core'] .planner-warm-pinned-menu summary {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: var(--ink2);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

html[data-theme='layf-core'] .planner-warm-pinned-menu summary::-webkit-details-marker {
  display: none;
}

html[data-theme='layf-core'] .planner-warm-pinned-menu summary:hover,
html[data-theme='layf-core'] .planner-warm-pinned-menu[open] summary {
  background: var(--surface2);
  color: var(--ink);
}

html[data-theme='layf-core'] .planner-warm-pinned-menu > div {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 4px;
  min-width: 156px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 16px 36px rgba(17,24,39,.14);
}

html[data-theme='layf-core'] .planner-warm-pinned-menu button {
  justify-content: flex-start;
  width: 100%;
  min-height: 31px !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  text-align: left;
}

html[data-theme='layf-core'] .planner-warm-pinned-add-group {
  width: 100%;
  min-height: 42px;
  margin-top: 4px;
  border: 1px dashed var(--layf-accent-border);
  border-radius: 12px;
  background: transparent;
  color: var(--layf-accent-text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 720;
}

html[data-theme='layf-core'] .planner-warm-pinned-add-group:hover {
  background: var(--layf-accent-soft-bg);
  color: var(--ink);
}

html[data-theme='layf-core'] .planner-warm-pinned-legend {
  display: flex;
  gap: 8px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 16px auto 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 12px;
}

html[data-theme='layf-core'] .planner-warm-pinned-tip {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--layf-accent-border);
  border-radius: 16px;
  background: var(--layf-accent-soft-bg);
}

html[data-theme='layf-core'] .planner-warm-pinned-tip > div {
  display: flex;
  gap: 12px;
  align-items: center;
}

html[data-theme='layf-core'] .planner-warm-pinned-tip span {
  color: var(--layf-accent-violet);
  font-size: 24px;
}

html[data-theme='layf-core'] .planner-warm-pinned-tip strong {
  color: var(--ink);
  font-size: 14px;
}

html[data-theme='layf-core'] .planner-warm-pinned-tip p {
  margin: 3px 0 0;
  color: var(--ink2);
  font-size: 13px;
}

@media (min-width: 1380px) {
  html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-groups {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-groups {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  }
}

@media (max-width: 760px) {
  html[data-theme='layf-core'] .planner-warm-visual-pinned {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
  }

  html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-groups {
    grid-template-columns: 1fr;
  }

  html[data-theme='layf-core'] .planner-warm-pinned-legend {
    border-radius: 14px;
  }
}

/* Planner Pinned board polish: calmer color and balanced columns */
html[data-theme='layf-core'] .planner-warm-visual-pinned {
  background: var(--surface) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-groups {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-group {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  border-color: color-mix(in srgb, var(--group-color, var(--accent)) 9%, var(--border)) !important;
  background: color-mix(in srgb, var(--surface) 98.5%, var(--bg)) !important;
  box-shadow: 0 10px 26px rgba(17,24,39,.032) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-group::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: color-mix(in srgb, var(--group-color, var(--accent)) 42%, transparent);
}

html[data-theme='layf-core'] .planner-warm-pinned-group-title {
  grid-template-columns: auto minmax(0, max-content) auto;
  justify-content: start;
  max-width: calc(100% - 34px);
}

html[data-theme='layf-core'] .planner-warm-pinned-group-icon {
  border-color: color-mix(in srgb, var(--group-color, var(--accent)) 14%, var(--border));
  background: color-mix(in srgb, var(--group-color, var(--accent)) 8%, var(--surface));
  color: color-mix(in srgb, var(--group-color, var(--accent)) 62%, var(--ink));
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-group h3 {
  max-width: min(100%, 17ch);
  font-size: 14.5px !important;
  letter-spacing: -.01em;
  white-space: normal;
}

html[data-theme='layf-core'] .planner-warm-pinned-group-count {
  border-color: color-mix(in srgb, var(--group-color, var(--accent)) 10%, var(--border)) !important;
  background: color-mix(in srgb, var(--group-color, var(--accent)) 6%, var(--surface2)) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-card {
  border-color: color-mix(in srgb, var(--border) 88%, var(--group-color, var(--accent))) !important;
  background: var(--surface) !important;
  box-shadow: 0 3px 12px rgba(17,24,39,.025) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-card:hover {
  border-color: color-mix(in srgb, var(--group-color, var(--accent)) 14%, var(--border)) !important;
  box-shadow: 0 8px 18px rgba(17,24,39,.045) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-dot {
  border-color: color-mix(in srgb, var(--group-color, var(--accent)) 11%, var(--border)) !important;
  background: color-mix(in srgb, var(--group-color, var(--accent)) 7%, var(--surface)) !important;
  color: color-mix(in srgb, var(--group-color, var(--accent)) 58%, var(--ink)) !important;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-card-main small {
  color: color-mix(in srgb, var(--ink2) 88%, var(--ink3)) !important;
  font-weight: 560;
}

html[data-theme='layf-core'] .planner-warm-pinned-add-group {
  border-color: color-mix(in srgb, var(--group-color, var(--accent)) 13%, var(--border));
  color: color-mix(in srgb, var(--group-color, var(--accent)) 50%, var(--ink2));
}

html[data-theme='layf-core'] .planner-warm-pinned-add-group:hover {
  background: color-mix(in srgb, var(--group-color, var(--accent)) 5%, var(--surface));
}

html[data-theme='layf-core'] .planner-warm-pinned-tip {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface) 96%, var(--bg));
}

html[data-theme='layf-core'] .planner-warm-pinned-tip span {
  color: var(--ink2);
}

@media (min-width: 1500px) {
  html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-groups {
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  }
}

@media (max-width: 980px) {
  html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-pinned-groups {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  }
}

/* Planner Calendar MVP: task images, priority accents and today gradient */
html[data-theme='layf-core'] .planner-warm-days {
  padding-top: 8px !important;
  scroll-padding-left: 0 !important;
}

html[data-theme='layf-core'] .planner-warm-day.is-today {
  position: relative;
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient) border-box !important;
  box-shadow: 0 10px 28px rgba(124,58,237,.075) !important;
}

html[data-theme='layf-core'] .planner-warm-day.is-today header {
  background: color-mix(in srgb, var(--surface) 92%, var(--layf-accent-soft-bg)) !important;
  border-bottom-color: color-mix(in srgb, var(--layf-accent-violet) 12%, var(--border)) !important;
}

html[data-theme='layf-core'] .planner-warm-event {
  position: relative;
  overflow: hidden;
  padding-left: 12px !important;
}

html[data-theme='layf-core'] .planner-warm-event::before {
  content: '';
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--priority-color, #f59e0b) 62%, transparent);
}

html[data-theme='layf-core'] .planner-warm-event.is-high {
  --priority-color: #ef4444;
  background: color-mix(in srgb, #ef4444 4%, var(--surface)) !important;
}

html[data-theme='layf-core'] .planner-warm-event.is-medium {
  --priority-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 4%, var(--surface)) !important;
}

html[data-theme='layf-core'] .planner-warm-event.is-low {
  --priority-color: #3b82f6;
  background: color-mix(in srgb, #3b82f6 4%, var(--surface)) !important;
}

html[data-theme='layf-core'] .planner-warm-event-attachment {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 11px;
}

html[data-theme='layf-core'] .planner-warm-task-attachments {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 96%, var(--bg));
}

html[data-theme='layf-core'] .planner-warm-task-attachments-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

html[data-theme='layf-core'] .planner-warm-task-attachments-head strong {
  color: var(--ink);
  font-size: 13px;
}

html[data-theme='layf-core'] .planner-warm-task-attachments-head small {
  color: var(--ink2);
  font-size: 11px;
}

html[data-theme='layf-core'] .planner-warm-task-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

html[data-theme='layf-core'] .planner-warm-task-images.is-empty {
  display: block;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--ink2);
  font-size: 12px;
}

html[data-theme='layf-core'] .planner-warm-task-images figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface2);
}

html[data-theme='layf-core'] .planner-warm-task-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

html[data-theme='layf-core'] .planner-warm-task-images button {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  background: rgba(17,24,39,.62);
  color: #fff;
  cursor: pointer;
}

html[data-theme='layf-core'] .planner-warm-task-pending-images {
  display: grid;
  gap: 7px;
}

html[data-theme='layf-core'] .planner-warm-task-pending-images small {
  color: var(--ink2);
  font-size: 11px;
}

html[data-theme='layf-core'] .planner-warm-task-image-upload {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px dashed var(--layf-accent-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 720;
}

html[data-theme='layf-core'] .planner-warm-task-image-upload input {
  display: none;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar input[name="pinnedGroup"] {
  border-color: var(--border) !important;
  background:
    linear-gradient(45deg, transparent 50%, var(--ink2) 50%) calc(100% - 17px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--ink2) 50%, transparent 50%) calc(100% - 12px) 50% / 6px 6px no-repeat,
    var(--surface) !important;
  color: var(--ink);
}

html[data-theme='layf-core'] .planner-warm-group-combobox {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

html[data-theme='layf-core'] .planner-warm-visual-pinned .planner-warm-quickbar .planner-warm-group-combobox input[name="pinnedGroup"] {
  padding-right: 46px;
  background: var(--surface) !important;
}

html[data-theme='layf-core'] .planner-warm-group-combobox [data-planner-group-toggle] {
  position: absolute;
  right: 8px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  transform: translateY(-50%);
  font: inherit;
}

html[data-theme='layf-core'] .planner-warm-group-combobox [data-planner-group-toggle]:hover,
html[data-theme='layf-core'] .planner-warm-group-combobox.is-open [data-planner-group-toggle] {
  background: var(--surface2);
  color: var(--ink);
}

html[data-theme='layf-core'] .planner-warm-group-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: none;
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(17,24,39,.12);
}

html[data-theme='layf-core'] .planner-warm-group-combobox.is-open .planner-warm-group-menu {
  display: grid;
  gap: 4px;
}

html[data-theme='layf-core'] .planner-warm-group-menu button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

html[data-theme='layf-core'] .planner-warm-group-menu button:hover {
  background: var(--surface2);
}

html[data-theme='layf-core'] .planner-warm-group-menu button span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--group-color, var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--group-color, var(--accent)) 10%, transparent);
}

html[data-theme='layf-core'] .planner-warm-pinned-card[role="button"] {
  cursor: pointer;
}

html[data-theme='layf-core'] .planner-warm-pinned-card[role="button"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--layf-accent-border) !important;
}

html[data-theme='layf-core'] .planner-warm-pinned-card-more {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: var(--ink2);
  font-weight: 800;
}

html[data-theme='layf-core'] .planner-warm-pinned-card:hover .planner-warm-pinned-card-more {
  background: var(--surface2);
  color: var(--ink);
}

html[data-theme='layf-core'] .planner-warm-group-sheet {
  max-width: 520px;
}

html[data-theme='layf-core'] .planner-warm-group-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

html[data-theme='layf-core'] .planner-warm-group-color-picker button {
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--swatch) 18%, var(--border));
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.75), transparent 34%),
    var(--swatch);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--swatch) 13%, transparent);
  cursor: pointer;
}

html[data-theme='layf-core'] .planner-warm-group-color-picker button.is-active {
  box-shadow:
    0 0 0 3px var(--surface),
    0 0 0 5px color-mix(in srgb, var(--swatch) 45%, var(--layf-accent-border)),
    0 10px 24px color-mix(in srgb, var(--swatch) 18%, transparent);
}

@media (max-width: 760px) {
  html[data-theme='layf-core'] .planner-warm-task-attachments-head {
    display: grid;
  }

  html[data-theme='layf-core'] .planner-warm-task-image-upload {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 680px) {
  html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-flow-card--visual {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  html[data-theme='layf-core'] .planner-warm-flow-side {
    grid-template-columns: auto 1fr auto;
    justify-items: stretch;
    align-items: center;
  }

  html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-flow-meta {
    justify-items: start;
  }

  html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-flow-progress {
    width: 100%;
  }

  html[data-theme='layf-core'] .planner-warm-visual-workflow .planner-warm-visual-step {
    flex-basis: min(72vw, 170px);
  }
}

/* Family Calendar foundation: separate shared calendar module */
.family-calendar-page {
  max-width: 1420px;
  color: var(--ink);
}

.family-calendar-page .module-header {
  margin-bottom: 12px;
  padding: 0 2px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.family-calendar-page .module-header .page-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.02;
}

.family-calendar-page .module-header .page-sub {
  max-width: 640px;
  margin-top: 8px;
  color: var(--ink2);
  font-size: 15px;
  font-weight: 430;
  line-height: 1.45;
}

.family-calendar-page .module-header .eyebrow {
  color: var(--ink2);
  font-size: 10px;
  letter-spacing: .08em;
}

/* App update prompt: code/service-worker refresh, separate from data sync */
.layf-update-banner {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 220;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 20px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient, linear-gradient(135deg, var(--accent), var(--accent))) border-box;
  box-shadow: 0 18px 52px rgba(17, 24, 56, .16);
  transform: translateX(-50%);
}

.layf-update-banner[hidden] {
  display: none !important;
}

body.has-app-update-banner .content {
  scroll-padding-bottom: 170px;
}

.layf-update-banner-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  border: 1px solid var(--layf-accent-border, var(--border));
}

.layf-update-banner-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.layf-update-banner-copy strong {
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.2;
}

.layf-update-banner-copy span {
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.3;
}

.layf-update-banner-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  body.has-app-update-banner .content {
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
  }

  .layf-update-banner {
    align-items: stretch;
    display: grid;
    grid-template-columns: auto 1fr;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 34;
  }

  .layf-update-banner-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .layf-update-banner-actions .btn {
    flex: 1 1 0;
  }
}

.family-calendar-share,
.family-calendar-toolbar,
.family-calendar-board,
.family-calendar-panel,
.family-calendar-form {
  border: 1px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--surface) 96%, white), color-mix(in srgb, var(--surface) 96%, white)) padding-box,
    var(--family-calendar-hairline, var(--layf-accent-gradient)) border-box;
  box-shadow: 0 18px 44px rgba(17, 24, 56, .06);
}

.family-calendar-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(14px, 1.8vw, 20px);
  border-radius: 22px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}

.family-calendar-share::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--layf-accent-gradient);
  opacity: .75;
}

.family-calendar-share-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.family-calendar-share-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 15px;
  border: 1px solid var(--layf-accent-border);
  background: var(--layf-accent-soft-bg);
}

.family-calendar-kicker {
  margin: 0 0 5px;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.family-calendar-share h2,
.family-calendar-board h2,
.family-calendar-panel h3,
.family-calendar-form h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 760;
  letter-spacing: 0;
}

.family-calendar-share h2 {
  font-size: clamp(17px, 1.8vw, 21px);
}

.family-calendar-share p {
  margin: 4px 0 0;
  color: var(--ink2);
  max-width: 680px;
  line-height: 1.45;
}

.family-calendar-share-side {
  display: grid;
  justify-items: end;
  gap: 9px;
  flex: 0 0 auto;
}

.family-calendar-avatars {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 5px;
}

.family-calendar-avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 0;
  overflow: hidden;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--layf-accent-gradient-soft);
  color: var(--ink);
  font-size: 11px;
  font-weight: 760;
}

.family-calendar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-calendar-avatar.is-you {
  background: var(--layf-accent-gradient-soft);
}

.family-calendar-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
}

.family-calendar-status.is-active {
  border-color: color-mix(in srgb, #22c55e 22%, var(--border));
  background: color-mix(in srgb, #22c55e 9%, var(--surface));
  color: color-mix(in srgb, #15803d 82%, var(--ink));
}

.family-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.family-calendar-page {
  --family-calendar-hairline: var(--layf-accent-gradient, linear-gradient(135deg, var(--accent), var(--accent-lt)));
  --family-calendar-hairline-soft: color-mix(in srgb, var(--accent) 14%, var(--border));
}

.family-calendar-view-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(var(--surface2), var(--surface2)) padding-box,
    var(--family-calendar-hairline, var(--layf-accent-gradient)) border-box;
}

.family-calendar-view-switch button {
  align-items: center;
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink2);
  display: inline-flex;
  font: 760 13px/1 var(--sans);
  gap: 8px;
  cursor: pointer;
}

.family-calendar-view-switch button span {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 999px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 820;
  padding: 4px 7px;
}

.family-calendar-view-switch button.is-active {
  background: var(--layf-accent-soft-bg);
  box-shadow: inset 0 0 0 1px var(--layf-accent-border);
  color: var(--ink);
}

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

.family-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
  gap: 14px;
}

.family-calendar-board,
.family-calendar-panel {
  border-radius: 22px;
}

.family-calendar-board {
  padding: clamp(14px, 1.8vw, 20px);
  min-width: 0;
}

.family-calendar-board-head,
.family-calendar-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.family-calendar-month-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.family-calendar-month-nav h2 {
  min-width: min(42vw, 210px);
  text-align: center;
  text-transform: capitalize;
}

.family-calendar-weekdays,
.family-calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.family-calendar-weekdays span {
  padding: 0 8px 8px;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 780;
  text-align: center;
}

.family-calendar-month-grid {
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--family-calendar-hairline, var(--layf-accent-gradient)) border-box;
}

.family-calendar-day {
  position: relative;
  min-height: 118px;
  padding: 8px;
  border-right: 1px solid var(--family-calendar-hairline-soft, var(--border));
  border-bottom: 1px solid var(--family-calendar-hairline-soft, var(--border));
  background: var(--surface);
}

.family-calendar-day:nth-child(7n) {
  border-right: 0;
}

.family-calendar-day.is-muted {
  background: color-mix(in srgb, var(--surface2) 55%, var(--surface));
  color: color-mix(in srgb, var(--ink3) 72%, transparent);
}

.family-calendar-day:not(.is-muted) { cursor: pointer; }

.family-calendar-day.is-today {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient) border-box;
  border: 1px solid transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.76);
}

.family-calendar-day-add {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--layf-accent-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 15px;
  font-weight: 760;
  opacity: .54;
  transform: translateY(3px);
  transition: opacity .16s ease, transform .16s ease;
  cursor: pointer;
}

.family-calendar-day:not(.is-muted):hover .family-calendar-day-add,
.family-calendar-day-add:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.family-calendar-day-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink2);
  font-weight: 760;
  cursor: pointer;
}

.fh-auth-actions [data-fh-auth-action="signin"]::after {
  content: "→";
  float: right;
  font-size: 1.35rem;
  line-height: 1;
  margin-left: 10px;
}

.family-calendar-day.is-today .family-calendar-day-number {
  background: var(--layf-accent-soft-bg);
  color: var(--ink);
}

.family-calendar-day-events {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.family-calendar-event {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.25;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.family-calendar-event span {
  color: var(--ink2);
  margin-right: 4px;
}

.family-calendar-event em {
  display: inline-flex;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--ink2);
  font-size: 9px;
  font-style: normal;
  font-weight: 760;
  vertical-align: 1px;
}

.family-calendar-event.is-family,
.family-calendar-list-row.is-family,
.family-calendar-side-event.is-family {
  border-color: color-mix(in srgb, var(--calendar-family-accent) 18%, var(--border));
  background: color-mix(in srgb, var(--calendar-family-accent) 7%, var(--surface));
}

.family-calendar-event.is-private,
.family-calendar-list-row.is-private,
.family-calendar-side-event.is-private {
  border-color: color-mix(in srgb, var(--calendar-private-accent) 20%, var(--border));
  background: color-mix(in srgb, var(--calendar-private-accent) 8%, var(--surface));
}

.family-calendar-event.is-shared,
.family-calendar-list-row.is-shared,
.family-calendar-side-event.is-shared {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient) border-box;
  border-color: transparent;
}

.family-calendar-more {
  color: var(--ink2);
  font-size: 11px;
  font-weight: 700;
}

.family-calendar-side {
  display: grid;
  gap: 14px;
  align-content: start;
}

.family-calendar-panel {
  padding: 15px;
}

.family-calendar-panel h3 {
  font-size: 15px;
  line-height: 1.2;
}

.family-calendar-panel-head span {
  color: var(--ink2);
  font-size: 11.5px;
  font-weight: 700;
}

.family-calendar-side-event,
.family-calendar-list-row {
  display: grid;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.family-calendar-side-event {
  grid-template-columns: 46px 1fr;
  gap: 6px 10px;
  padding: 9px;
  border-radius: 14px;
  margin-top: 7px;
}

.family-calendar-side-event span {
  grid-row: span 2;
  color: var(--ink2);
  font-size: 12px;
  font-weight: 760;
}

.family-calendar-side-event strong,
.family-calendar-list-row strong {
  color: var(--ink);
  font-size: 13px;
}

.family-calendar-side-event small,
.family-calendar-list-row small {
  color: var(--ink2);
}

.family-calendar-plans-board {
  display: grid;
  gap: 14px;
  align-content: start;
}

.family-calendar-plans-intro,
.family-calendar-plans-note {
  color: var(--ink2);
  font-size: 13px;
  margin: -4px 0 0;
}

.family-calendar-plans-note {
  align-items: center;
  background: var(--surface2);
  border: 1px dashed var(--layf-accent-border, var(--border));
  border-radius: 14px;
  display: flex;
  padding: 11px 12px;
}

.family-calendar-plans-grid {
  display: grid;
  gap: 10px;
}

.family-calendar-plan-row {
  align-items: center;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--family-calendar-hairline, var(--layf-accent-gradient)) border-box;
  border: 1px solid transparent;
  border-radius: 18px;
  display: grid;
  gap: 12px;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  padding: 12px;
}

.family-calendar-plan-row.is-compact {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  margin-top: 8px;
  padding: 10px;
}

.family-calendar-plan-row.is-compact .family-calendar-plan-actions {
  display: none;
}

.family-calendar-plan-icon {
  align-items: center;
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 14px;
  color: var(--ink);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.family-calendar-plan-row.is-compact .family-calendar-plan-icon {
  height: 36px;
  width: 36px;
}

.family-calendar-plan-icon svg {
  display: block;
  fill: none;
  flex: 0 0 auto;
  height: 19px !important;
  max-height: 19px;
  max-width: 19px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 19px !important;
}

.family-calendar-plan-icon svg path,
.family-calendar-plan-icon svg circle {
  fill: none;
}

.family-calendar-plan-main {
  min-width: 0;
}

.family-calendar-plan-titleline {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.family-calendar-plan-titleline strong {
  color: var(--ink);
  font-size: 13.5px;
}

.family-calendar-plan-main p {
  color: var(--ink2);
  font-size: 13px;
  margin: 4px 0 2px;
}

.family-calendar-plan-main small {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 720;
}

.family-calendar-plan-status {
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 820;
  padding: 4px 8px;
  white-space: nowrap;
}

.family-calendar-plan-status.is-idea {
  background: color-mix(in srgb, #60a5fa 10%, var(--surface));
  border-color: color-mix(in srgb, #60a5fa 22%, var(--border));
  color: color-mix(in srgb, #2563eb 74%, var(--ink));
}

.family-calendar-plan-status.is-discuss {
  background: color-mix(in srgb, #fb923c 12%, var(--surface));
  border-color: color-mix(in srgb, #fb923c 24%, var(--border));
  color: color-mix(in srgb, #c2410c 78%, var(--ink));
}

.family-calendar-plan-status.is-confirmed {
  background: color-mix(in srgb, #22c55e 10%, var(--surface));
  border-color: color-mix(in srgb, #22c55e 24%, var(--border));
  color: color-mix(in srgb, #15803d 78%, var(--ink));
}

.family-calendar-plan-status.is-moved {
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  border-color: var(--layf-accent-border, var(--border));
  color: var(--ink);
}

.family-calendar-plan-avatars {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
}

.family-calendar-plan-avatars .family-calendar-avatar {
  box-shadow: 0 0 0 2px var(--surface);
  margin-left: 0;
}

.family-calendar-plan-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.family-calendar-plan-add-link {
  margin-top: 10px;
  width: 100%;
}

.family-calendar-legend {
  display: grid;
  gap: 9px;
  color: var(--ink2);
  font-size: 13px;
  font-weight: 700;
}

.family-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.family-calendar-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.family-calendar-legend i.is-family {
  background: var(--calendar-family-accent);
}

.family-calendar-legend i.is-private {
  background: var(--calendar-private-accent);
}

.family-calendar-week-list,
.family-calendar-event-list {
  display: grid;
  gap: 10px;
}

.family-calendar-week-day,
.family-calendar-list-row {
  display: grid;
  grid-template-columns: minmax(110px, .25fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.family-calendar-week-day.is-today {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient) border-box;
  border: 1px solid transparent;
}

.family-calendar-list-date {
  display: grid;
  gap: 3px;
  color: var(--ink2);
  font-size: 12px;
  font-weight: 760;
}

.family-calendar-visibility {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 11px;
  font-weight: 760;
}

.family-calendar-shared-preview {
  max-width: 620px;
}

.family-calendar-shared-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.family-calendar-shared-meta span,
.family-calendar-readonly-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 760;
}

.family-calendar-shared-note {
  padding: 14px;
  border: 1px solid var(--layf-accent-border);
  border-radius: 16px;
  background: var(--layf-accent-soft-bg);
  color: var(--ink);
  line-height: 1.55;
}

.family-calendar-empty,
.family-calendar-empty-inline {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: var(--surface2);
  color: var(--ink2);
}

.family-calendar-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
}

.family-calendar-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, .26);
  backdrop-filter: blur(12px);
}

.family-calendar-form {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(88vh, 820px);
  overflow: auto;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 24px;
}

.family-calendar-form-head,
.family-calendar-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.family-calendar-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.family-calendar-invite-form {
  width: min(700px, 100%);
}

.family-calendar-invite-preview {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--layf-accent-border);
  border-radius: 18px;
  background: var(--layf-accent-soft-bg);
}

.family-calendar-invite-preview strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.family-calendar-invite-preview p,
.family-calendar-invite-note {
  margin: 5px 0 0;
  color: var(--ink2);
  line-height: 1.45;
}

.family-calendar-invite-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--layf-accent-gradient-soft);
  color: var(--ink);
  font-weight: 800;
}

.family-calendar-invite-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-calendar-invite-note {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface2);
  font-size: 13px;
}

.family-calendar-invite-section {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 900;
  margin: 18px 0 0;
}

.family-calendar-access-list,
.family-calendar-send-options {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.family-calendar-access-row {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 180px);
  padding: 10px;
}

.family-calendar-access-row label,
.family-calendar-send-options label {
  align-items: center;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.family-calendar-access-row input,
.family-calendar-send-options input {
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.family-calendar-access-row strong,
.family-calendar-send-options strong {
  color: var(--ink);
  display: block;
  font-size: 0.9rem;
}

.family-calendar-access-row small,
.family-calendar-send-options small {
  color: var(--ink2);
  display: block;
  font-size: 0.76rem;
  line-height: 1.35;
  margin-top: 2px;
}

.family-calendar-send-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.family-calendar-send-options label {
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 13px;
}

.family-calendar-send-options label.is-active {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient, linear-gradient(135deg, var(--accent), var(--accent))) border-box;
  border-color: transparent;
}

.family-calendar-mail-draft {
  background: var(--surface2);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 18px;
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
}

.family-calendar-mail-draft strong {
  color: var(--ink);
}

.family-calendar-mail-draft p {
  color: var(--ink2);
  line-height: 1.45;
  margin: 4px 0 0;
}

.family-calendar-span {
  grid-column: 1 / -1;
  margin-top: 14px;
}

.family-calendar-visibility-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.family-calendar-visibility-options label,
.family-calendar-participant {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
}

.family-calendar-visibility-options label {
  padding: 12px;
}

.family-calendar-visibility-options label.is-active {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient) border-box;
  border: 1px solid transparent;
}

.family-calendar-visibility-options input,
.family-calendar-participant input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.family-calendar-visibility-options span {
  color: var(--ink2);
  font-size: 12px;
}

.family-calendar-participants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.family-calendar-participant {
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 720;
}

.family-calendar-participant:has(input:checked) {
  background: var(--layf-accent-soft-bg);
  border-color: var(--layf-accent-border);
}

.family-calendar-form-actions {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

@media (max-width: 1080px) {
  .family-calendar-layout {
    grid-template-columns: 1fr;
  }

  .family-calendar-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .family-calendar-share,
  .family-calendar-toolbar,
  .family-calendar-board-head,
  .family-calendar-form-head,
  .family-calendar-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .family-calendar-share-side {
    justify-items: start;
  }

  /* Subtitle wastes 2 lines on mobile — hide it */
  .family-calendar-page .module-header .page-sub { display: none; }

  /* View switch stays full-width; action buttons go side-by-side (not stacked) */
  .family-calendar-view-switch { width: 100%; }
  .family-calendar-toolbar-actions { flex-direction: row; }
  .family-calendar-toolbar-actions .btn { flex: 1; }

  /* Hide the duplicate Dzisiaj inside the calendar board head */
  .family-calendar-board-head > .btn { display: none; }

  .family-calendar-view-switch button {
    flex: 1 1 0;
    justify-content: center;
    padding-inline: 10px;
  }

  .family-calendar-plan-row,
  .family-calendar-plan-row.is-compact {
    align-items: start;
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .family-calendar-plan-avatars,
  .family-calendar-plan-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .family-calendar-side {
    grid-template-columns: 1fr;
  }

  .family-calendar-board {
    overflow-x: auto;
  }

  .family-calendar-weekdays,
  .family-calendar-month-grid {
    min-width: 680px;
  }

  .family-calendar-weekdays {
    display: grid;
  }

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

  .family-calendar-day {
    min-height: 96px;
    padding: 6px;
  }

  .family-calendar-day.is-muted {
    display: block;
  }
}

/* Phone: fluid 7-column grid that fits without horizontal scroll */
@media (max-width: 480px) {
  .family-calendar-board { overflow-x: unset; }

  .family-calendar-weekdays,
  .family-calendar-month-grid { min-width: 0; }

  .family-calendar-day {
    min-height: 68px;
    padding: 3px 2px;
  }

  .family-calendar-day-number {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .family-calendar-day-events { margin-top: 4px; gap: 3px; }

  .family-calendar-event {
    font-size: 9px;
    padding: 1px 3px;
    border-radius: 4px;
  }

  .family-calendar-event span { display: none; }

  .family-calendar-day-add { display: none; }

  .family-calendar-weekdays span { font-size: 9px; padding: 0 2px 6px; }
}

@media (max-width: 760px) {
  .family-calendar-form-grid,
  .family-calendar-visibility-options,
  .family-calendar-send-options,
  .family-calendar-access-row,
  .family-calendar-week-day,
  .family-calendar-list-row {
    grid-template-columns: 1fr;
  }

  .family-calendar-modal {
    place-items: end center;
    padding: 10px;
  }

  .family-calendar-form {
    max-height: 92vh;
    border-radius: 22px 22px 16px 16px;
  }
}

/* Properties / Nieruchomosci MVP */
.properties-page {
  display: grid;
  gap: 18px;
}

.properties-page .module-header {
  align-items: center;
}

.properties-stats {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  padding: 10px 4px;
}

.properties-stat {
  align-items: center;
  display: flex;
  gap: 13px;
  min-width: 0;
  padding: 12px 18px;
  position: relative;
}

.properties-stat:not(:last-child)::after {
  background: var(--border);
  bottom: 12px;
  content: '';
  position: absolute;
  right: 0;
  top: 12px;
  width: 1px;
}

.properties-stat-icon,
.properties-list-thumb,
.properties-hero-mark,
.properties-hero-photo.is-fallback {
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--ink2);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 800;
  justify-content: center;
}

.properties-stat-icon {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  height: 36px;
  width: 36px;
}

.properties-stat-icon svg,
.properties-metrics em svg {
  fill: none;
  height: 28px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 28px;
}

.properties-stat strong {
  color: var(--ink);
  display: block;
  font-size: clamp(1.05rem, 1.32vw, 1.42rem);
  line-height: 1.05;
  margin-top: 3px;
}

.properties-stat div > span {
  color: var(--ink2);
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0;
}

.properties-stat small {
  color: var(--ink3);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Per-tone strong icon colours — frameless */
.properties-stat-icon[data-tone="value"]      { color: #7c3aed; }
.properties-stat-icon[data-tone="properties"] { color: #2563eb; }
.properties-stat-icon[data-tone="income"]     { color: #16a34a; }
.properties-stat-icon[data-tone="cost"]       { color: #ef4444; }
.properties-stat-icon[data-tone="next"]       { color: #f59e0b; }

.properties-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: start;
}

/* Property picker — compact dropdown to switch between properties */
.properties-picker {
  position: relative;
}

.properties-picker-btn {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}

.properties-picker-btn:hover,
.properties-picker.is-open .properties-picker-btn {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.properties-picker-name {
  flex: 1;
  min-width: 0;
}

.properties-picker-name strong {
  display: block;
  font-size: .95rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.properties-picker-name small {
  color: var(--ink2);
  display: block;
  font-size: .78rem;
}

.properties-picker-caret {
  color: var(--ink2);
  flex-shrink: 0;
  transition: transform .2s;
}

.properties-picker.is-open .properties-picker-caret {
  transform: rotate(180deg);
}

.properties-picker-dropdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 36px color-mix(in srgb, var(--ink) 12%, transparent);
  display: none;
  flex-direction: column;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
}

.properties-picker.is-open .properties-picker-dropdown {
  display: flex;
}

.properties-picker-search {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}

.properties-picker-search input {
  width: 100%;
}

.properties-picker-list {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
}

.properties-picker-item {
  align-items: center;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  text-align: left;
  transition: background .1s;
}

.properties-picker-item:hover {
  background: var(--surface2);
}

.properties-picker-item.is-active {
  background: var(--accent-lt);
}

.properties-picker-item-name {
  flex: 1;
  min-width: 0;
}

.properties-picker-item-name strong {
  display: block;
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.properties-picker-item-name small {
  color: var(--ink2);
  display: block;
  font-size: .76rem;
}

.properties-picker-footer {
  border-top: 1px solid var(--border);
  padding: 10px 12px;
}

/* Hero stats strip — compact key metrics inline */
.properties-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 10px;
}

.properties-hero-stats span {
  display: flex;
  flex-direction: column;
}

.properties-hero-stats em {
  color: var(--ink3);
  font-size: .7rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.properties-hero-stats strong {
  color: var(--ink);
  font-size: .92rem;
  font-weight: 700;
}

.properties-list,
.properties-detail {
  border-color: var(--border);
}

.properties-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.properties-list-head,
.properties-section-head,
.properties-form-head,
.properties-form-actions,
.properties-hero {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.properties-list-head h2,
.properties-section-head h3,
.properties-panel h3 {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

.properties-list-head p,
.properties-section-head p,
.properties-panel p {
  color: var(--ink2);
  margin: 4px 0 0;
}

.properties-filters {
  display: grid;
  gap: 10px;
}

.properties-filters input,
.properties-filters select,
.properties-form input,
.properties-form select,
.properties-form textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--ink);
  font: inherit;
  outline: none;
  padding: 11px 12px;
  width: 100%;
}

.properties-filters input:focus,
.properties-filters select:focus,
.properties-form input:focus,
.properties-form select:focus,
.properties-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lt);
}

.properties-list-search {
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--border);
}

.properties-list-search input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface2, #f8fafc);
  color: var(--ink);
}

.properties-list-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lt);
}

.properties-list-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.properties-list-item {
  align-items: center;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 52px minmax(0, 1fr);
  padding: 10px 12px;
  text-align: left;
  transition: background .15s;
}
.properties-list-item:last-child { border-bottom: none; }

.properties-list-item:hover {
  background: var(--surface2, #f8fafc);
}

.properties-list-item.is-active {
  background: var(--accent-lt, #f3f0ff);
}

.properties-list-thumb {
  border-radius: 10px;
  height: 52px;
  overflow: hidden;
  width: 52px;
  flex-shrink: 0;
}

.properties-list-thumb img,
.properties-hero-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.properties-list-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.properties-list-main strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.properties-list-main small {
  display: block;
  font-size: 11.5px;
  color: var(--ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.properties-list-main em {
  display: inline-block;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  color: var(--ink2);
  background: var(--surface2, #f1f5f9);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  margin-top: 2px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.properties-list-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}

.properties-list-value {
  font-weight: 700;
  white-space: nowrap;
}

.properties-detail {
  overflow: hidden;
  padding: 0;
}

.properties-hero {
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr) auto;
  padding: 20px;
}

.properties-hero-mark,
.properties-hero-photo.is-fallback {
  border-radius: 22px;
  font-size: 1.35rem;
  height: 84px;
  width: 84px;
}

.properties-hero-photo {
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--ink) 8%, transparent);
  height: 220px;
  width: 100%;
  flex-shrink: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.properties-hero-photo.is-fallback {
  box-shadow: none;
  height: 150px;
  width: auto;
}

.properties-hero-photo figcaption {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 999px;
  bottom: 10px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  left: 10px;
  max-width: calc(100% - 20px);
  overflow: hidden;
  padding: 5px 9px;
  position: absolute;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.properties-hero-main {
  flex: 1 1 auto;
  min-width: 0;
}

.properties-breadcrumb,
.properties-item-kicker {
  color: var(--ink3);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.properties-hero h2 {
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.05;
  margin: 6px 0;
}

.properties-hero p {
  color: var(--ink2);
  margin: 0;
}

.properties-hero-next {
  font-size: 0.85rem;
  margin-top: 12px !important;
}

.properties-hero-next strong {
  color: var(--ink);
}

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

.properties-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.properties-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 10px;
}

.properties-chip-strong {
  background: var(--accent-lt);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
}

.properties-metrics {
  background: color-mix(in srgb, var(--surface) 88%, var(--surface2));
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px 16px;
}

.properties-metrics div {
  align-items: center;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 7%, var(--border));
  border-radius: 18px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 5%, transparent);
  display: grid;
  gap: 2px 11px;
  grid-template-columns: 38px minmax(0, 1fr);
  padding: 12px 13px;
}

.properties-metrics span {
  color: var(--ink3);
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.properties-metrics em {
  align-items: center;
  background: var(--accent-lt);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 14px;
  color: var(--ink);
  grid-row: span 2;
  display: inline-flex;
  font-style: normal;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  margin: 0;
  width: 38px;
}

.properties-metrics strong {
  color: var(--ink);
  display: block;
  font-size: 1.04rem;
  line-height: 1.12;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.properties-tabs {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 16px 0;
}

.properties-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink2);
  cursor: pointer;
  font: inherit;
  font-size: 0.81rem;
  font-weight: 500;
  padding: 8px 10px;
  white-space: nowrap;
}

.properties-tabs button.is-active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.properties-tab-panel {
  padding: 20px;
}

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

.properties-panel,
.properties-item-card,
.properties-soft-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
}

.properties-panel-wide {
  grid-column: 1 / -1;
}

.properties-notes-editable-panel {
  display: flex;
  flex-direction: column;
}

.properties-inline-textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink);
  flex: 1;
  font-family: var(--sans);
  font-size: .9rem;
  line-height: 1.6;
  margin-top: 10px;
  padding: 12px 14px;
  resize: vertical;
  width: 100%;
}

.properties-inline-textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.properties-inline-save-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.properties-location-card {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(150px, 0.75fr) minmax(0, 1fr);
}

.properties-map-visual {
  align-items: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-lt) 75%, transparent), transparent 68%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--border) 55%, transparent) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--border) 45%, transparent) 0 1px, transparent 1px 28px),
    var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--accent);
  display: flex;
  justify-content: center;
  min-height: 128px;
  overflow: hidden;
  position: relative;
}

.properties-map-visual span {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--ink) 8%, transparent);
  display: inline-flex;
  font-size: 1.4rem;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.properties-map-visual iframe {
  border: 0;
  display: block;
  filter: saturate(0.92) contrast(0.96);
  height: 100%;
  min-height: 180px;
  width: 100%;
}

.properties-map-visual::after {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.properties-location-body {
  align-content: center;
  display: grid;
  gap: 8px;
}

.properties-location-body .btn {
  justify-self: start;
}

.properties-compact-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.properties-compact-list div {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 3px;
  padding-top: 10px;
}

.properties-compact-list strong {
  color: var(--ink);
}

.properties-compact-list span {
  color: var(--ink2);
  font-size: 0.82rem;
}

.properties-info-row {
  align-items: center;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 11px 0;
}

.properties-info-row:first-of-type {
  margin-top: 10px;
}

.properties-info-row span,
.properties-next span,
.properties-soft-empty span,
.properties-item-card p,
.properties-item-card small {
  color: var(--ink2);
}

.properties-info-row strong {
  color: var(--ink);
  text-align: right;
}

.properties-next {
  display: grid;
  gap: 5px;
  margin: 12px 0;
}

.properties-next strong,
.properties-soft-empty strong,
.properties-item-card h4 {
  color: var(--ink);
}

.properties-list-grid {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.properties-work-toolbar {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 0.9fr) minmax(180px, 0.45fr) minmax(0, 1fr);
  margin-top: 14px;
  padding: 12px;
}

.properties-work-toolbar input,
.properties-work-toolbar select,
.properties-contact-toolbar select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--ink);
  font: inherit;
  outline: none;
  padding: 11px 12px;
  width: 100%;
}

.properties-work-toolbar input:focus,
.properties-work-toolbar select:focus,
.properties-contact-toolbar select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lt);
}

.properties-work-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 14px;
}

.properties-work-summary article {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 9%, var(--border));
  border-radius: 17px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 4%, transparent);
  padding: 13px 14px;
}

.properties-work-summary span {
  color: var(--ink2);
  display: block;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.properties-work-summary strong {
  color: var(--ink);
  display: block;
  font-size: 1.1rem;
  line-height: 1.1;
  margin-top: 5px;
}

.properties-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.properties-filter-chips button {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink2);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 8px 11px;
}

.properties-filter-chips button.is-active {
  background: var(--accent-lt);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  color: var(--ink);
}

.properties-work-grid,
.properties-contact-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 14px;
}

.properties-work-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 16px 38px color-mix(in srgb, var(--ink) 5%, transparent);
  margin-top: 14px;
  overflow-x: auto;
  overflow-y: hidden;
}

.properties-work-head,
.properties-work-row {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(230px, 1.45fr) minmax(92px, 0.55fr) minmax(88px, 0.55fr) minmax(120px, 0.75fr) minmax(110px, 0.62fr) minmax(92px, 0.55fr) minmax(96px, 0.58fr) minmax(70px, 0.38fr) minmax(150px, 0.85fr);
}

.properties-work-head {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  color: var(--ink3);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  padding: 11px 14px;
  text-transform: uppercase;
}

.properties-work-row {
  align-items: center;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  cursor: pointer;
  padding: 13px 14px;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.properties-work-row:last-child {
  border-bottom: 0;
}

.properties-work-row:hover,
.properties-work-row:focus {
  background: color-mix(in srgb, var(--accent-lt) 24%, var(--surface));
  outline: none;
}

.properties-work-cell {
  color: var(--ink2);
  font-size: 0.84rem;
  min-width: 0;
}

.properties-work-task {
  align-items: center;
  color: var(--ink);
  display: grid;
  gap: 10px;
  grid-template-columns: 38px minmax(0, 1fr);
}

.properties-work-task strong {
  color: var(--ink);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.properties-work-task small {
  color: var(--ink2);
  display: block;
  margin-top: 2px;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.properties-work-icon {
  align-items: center;
  background: var(--accent-lt);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 13px;
  color: var(--ink);
  display: inline-flex;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.properties-work-photo-cell {
  align-items: center;
  display: flex;
  gap: 6px;
}

.properties-work-photo-cell img {
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 34px;
  object-fit: cover;
  width: 42px;
}

.properties-work-photo-cell strong {
  color: var(--ink);
}

.properties-work-actions {
  justify-content: flex-end;
}

.properties-upcoming-work {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  margin-top: 14px;
  padding: 16px;
}

.properties-upcoming-work h4 {
  color: var(--ink);
  margin: 0 0 12px;
}

.properties-upcoming-work > div {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.properties-upcoming-work article {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.properties-upcoming-work span,
.properties-upcoming-work small {
  color: var(--ink2);
  font-size: 0.78rem;
}

.properties-upcoming-work strong {
  color: var(--ink);
}

.properties-work-card,
.properties-contact-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-lt) 24%, transparent), transparent 62%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 5%, transparent);
  display: grid;
  gap: 14px;
  padding: 16px;
}

.properties-work-card-main,
.properties-contact-main {
  display: grid;
  gap: 10px;
}

.properties-contact-main {
  align-items: start;
  grid-template-columns: 48px minmax(0, 1fr);
}

.properties-contact-avatar {
  align-items: center;
  background: var(--accent-lt);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 16px;
  color: var(--ink);
  display: inline-flex;
  font-weight: 900;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.properties-work-topline {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.properties-work-priority,
.properties-work-status {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 900;
  padding: 5px 9px;
}

.properties-work-task .properties-work-priority {
  display: inline-flex;
  margin-top: 6px;
}

.properties-work-priority {
  background: var(--accent-lt);
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

.properties-work-status {
  background: var(--surface2);
}

.properties-work-card h4,
.properties-contact-card h4 {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 0;
}

.properties-work-card p,
.properties-contact-card p {
  color: var(--ink2);
  margin: 0;
}

.properties-work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.properties-work-meta span {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink2);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 9px;
}

.properties-work-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.properties-work-photos img,
.properties-form-preview img {
  border: 1px solid var(--border);
  border-radius: 12px;
  height: 58px;
  object-fit: cover;
  width: 72px;
}

.properties-work-photos span {
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink2);
  display: inline-flex;
  font-weight: 900;
  height: 58px;
  justify-content: center;
  width: 58px;
}

.properties-form-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.properties-item-card {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.properties-item-card h4 {
  font-size: 1rem;
  margin: 4px 0;
}

.properties-item-card p,
.properties-item-card small {
  display: block;
  margin: 3px 0 0;
}

.properties-item-actions,
.properties-section-head .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.properties-empty {
  padding: 44px 20px;
}

.properties-mini-empty {
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--ink2);
  padding: 18px;
  text-align: center;
}

.properties-modal {
  align-items: center;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 90;
}

.properties-modal-backdrop {
  inset: 0;
  position: absolute;
}

.properties-form {
  max-height: min(92vh, 920px);
  max-width: 920px;
  overflow: auto;
  padding: 20px;
  position: relative;
  width: min(920px, 100%);
  z-index: 1;
}

.properties-form-small {
  max-width: 620px;
}

.properties-form h2 {
  color: var(--ink);
  font-family: var(--sans);
  margin: 0;
}

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

.properties-form label {
  color: var(--ink2);
  display: grid;
  font-size: 0.82rem;
  font-weight: 800;
  gap: 6px;
}

.properties-form label.properties-check {
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  padding: 11px 12px;
}

.properties-form label.properties-check input {
  width: auto;
}

.properties-work-form {
  max-width: 760px;
}

.properties-advanced {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 18px;
  grid-column: 1 / -1;
  padding: 0;
}

.properties-advanced summary {
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  padding: 14px 16px;
}

.properties-advanced .properties-form-grid {
  border-top: 1px solid var(--border);
  margin: 0;
  padding: 14px;
}

.properties-span {
  grid-column: 1 / -1;
}

.properties-form-actions {
  border-top: 1px solid var(--border);
  margin-top: 18px;
  padding-top: 14px;
}

html[data-theme='layf-core'] .properties-page .btn-primary {
  background: var(--layf-accent-gradient-soft);
  border-color: var(--layf-accent-border);
  color: var(--ink);
}

html[data-theme='layf-core'] .properties-list-thumb,
html[data-theme='layf-core'] .properties-hero-mark,
html[data-theme='layf-core'] .properties-hero-photo.is-fallback {
  background: var(--layf-accent-gradient-soft);
  border-color: var(--layf-accent-border);
}

@media (max-width: 1180px) {
  .properties-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .properties-stat:nth-child(3)::after {
    display: none;
  }

  .properties-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mid breakpoint: sidebar (260px) + gap (16px) + ~650px content = ~926px.
   At this width the 3-column hero (photo | info | buttons) becomes too cramped.
   Collapse to 2 columns: photo left (smaller), info+actions stacked right. */
@media (max-width: 1020px) {
  .properties-hero {
    grid-template-columns: minmax(160px, 240px) 1fr;
    grid-template-rows: auto auto;
  }

  .properties-hero-photo {
    grid-row: 1 / 3;
    height: min(200px, 36vw);
    width: 100%;
  }

  .properties-hero-main {
    grid-column: 2;
    grid-row: 1;
  }

  .properties-hero-actions {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-content: flex-start;
  }

  .properties-hero h2 {
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  }
}

@media (max-width: 720px) {
  .properties-stats,
  .properties-metrics,
  .properties-overview-grid,
  .properties-work-toolbar,
  .properties-work-head,
  .properties-work-row,
  .properties-form-grid {
    grid-template-columns: 1fr;
  }

  .properties-stat::after {
    display: none;
  }

  .properties-work-head {
    display: none;
  }

  .properties-work-row {
    align-items: stretch;
    gap: 10px;
  }

  .properties-work-cell {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .properties-work-cell::before {
    color: var(--ink3);
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .properties-work-task::before,
  .properties-work-actions::before {
    display: none;
  }

  .properties-page .module-header,
  .properties-list-head,
  .properties-section-head,
  .properties-form-head,
  .properties-form-actions,
  .properties-item-card {
    align-items: stretch;
    flex-direction: column;
  }

  .properties-shell {
    grid-template-columns: 1fr;
  }

  .properties-hero {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .properties-hero-photo {
    width: 100%;
    height: min(220px, 52vw);
  }

  .properties-location-card {
    grid-template-columns: 1fr;
  }

  .properties-hero-actions,
  .properties-item-actions,
  .properties-section-head .btn-row {
    justify-content: stretch;
  }

  .properties-filter-chips {
    justify-content: flex-start;
  }

  .properties-hero-actions .btn,
  .properties-item-actions .btn,
  .properties-section-head .btn,
  .properties-form-actions .btn {
    width: 100%;
  }

  .properties-metrics div {
    margin: 0;
  }
}

/* Module header rule enforcement: only Dashboard keeps a briefing-style card. */
.planner-weather-hero {
  display: none !important;
}

.dashboard-warm-hero {
  align-items: center !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--ink) 7%, transparent) !important;
  color: var(--ink) !important;
  display: flex !important;
  gap: 16px !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 14px !important;
  position: relative !important;
}

.dashboard-warm-hero::before {
  background: var(--layf-accent-gradient, linear-gradient(90deg, var(--accent), var(--accent))) !important;
  content: '' !important;
  height: 3px !important;
  inset: 0 0 auto !important;
  opacity: .9 !important;
  position: absolute !important;
}

.dashboard-warm-hero-main {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.dashboard-warm-hero h1 {
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: clamp(20px, 2vw, 28px) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  margin: 0 !important;
}

.dashboard-warm-hero .planner-warm-badge {
  width: fit-content !important;
}

.dashboard-warm-hero-meta {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

.dashboard-warm-hero-meta span {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  color: var(--ink2) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  padding: 7px 9px !important;
}

.dashboard-warm-hero-meta .is-urgent {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--danger) 20%, var(--border)) !important;
  color: var(--danger) !important;
}

.dashboard-warm-weather {
  align-items: center !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  color: var(--ink) !important;
  display: grid !important;
  flex: 0 0 min(190px, 28vw) !important;
  gap: 4px !important;
  max-width: 190px !important;
  padding: 10px 12px !important;
}

.dashboard-warm-weather-top,
.dashboard-warm-weather-metrics,
.dashboard-warm-weather-actions {
  display: none !important;
}

.dashboard-warm-weather-main {
  align-items: center !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

.dashboard-warm-weather-main strong {
  color: var(--ink) !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.dashboard-warm-weather-main span {
  font-size: 21px !important;
  line-height: 1 !important;
}

.dashboard-warm-weather p {
  color: var(--ink2) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .dashboard-warm-hero {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .dashboard-warm-weather {
    flex-basis: auto !important;
    max-width: none !important;
    width: 100% !important;
  }

  .dashboard-warm-weather-main,
  .dashboard-warm-weather p {
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* Final module header normalization: modules use compact title/subtitle
   headers only. Dashboard owns the only briefing/hero-style header. */
.module-header .eyebrow,
.pets-module-header .eyebrow {
  display: none !important;
}

.module-header .page-title,
.pets-module-header h1 {
  color: var(--ink) !important;
  font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif) !important;
  font-size: var(--type-page-title) !important;
  font-weight: var(--weight-page-title) !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  margin: 0 !important;
}

.module-header .page-sub,
.pets-module-header p {
  color: var(--ink2) !important;
  font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

/* Dashboard Daily Briefing and compact dashboard cards.
   Base layout is theme-safe; themes only change tokens/accents. */
.dashboard-page .module-page-content {
  display: grid !important;
  gap: 18px !important;
  margin-top: 0 !important;
}

.dashboard-briefing-card {
  align-items: center !important;
  background: var(--dashboard-weather-bg, color-mix(in srgb, var(--surface) 84%, #eef5ff)) !important;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
  border-radius: 30px !important;
  box-shadow: 0 28px 70px color-mix(in srgb, var(--ink) 8%, transparent) !important;
  color: var(--ink) !important;
  display: grid !important;
  gap: 28px !important;
  grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr) !important;
  margin: 0 !important;
  min-height: clamp(320px, 28vw, 380px) !important;
  overflow: hidden !important;
  padding: clamp(30px, 3vw, 44px) clamp(36px, 4vw, 56px) !important;
  position: relative !important;
  transition: background .65s ease !important;
}

.dashboard-briefing-card::before {
  display: none !important;
}

.dashboard-briefing-card::after {
  background: var(--dashboard-weather-layer, transparent) !important;
  content: '' !important;
  inset: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 0 !important;
}

.dashboard-briefing-left,
.dashboard-briefing-right {
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.dashboard-briefing-left {
  align-content: center !important;
  display: grid !important;
  gap: 12px !important;
  max-width: 650px !important;
}


.dashboard-briefing-date {
  display: block !important;
}

.dashboard-briefing-date span {
  color: var(--ink2) !important;
  font-size: 13px !important;
  font-weight: 440 !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
}

.dashboard-briefing-left h1 {
  color: var(--ink) !important;
  font-family: var(--font-body, var(--sans)) !important;
  font-size: clamp(22px, 2vw, 26px) !important;
  font-weight: 760 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08 !important;
  margin: 16px 0 0 !important;
}

.dashboard-briefing-time {
  color: var(--ink) !important;
  font-family: var(--font-body, var(--sans)) !important;
  font-size: clamp(72px, 7vw, 96px) !important;
  font-weight: 790 !important;
  letter-spacing: -0.08em !important;
  line-height: .92 !important;
  margin: 0 !important;
}

.dashboard-briefing-message {
  color: var(--ink2) !important;
  font-size: clamp(18px, 1.45vw, 21px) !important;
  font-weight: 650 !important;
  line-height: 1.38 !important;
  margin: 4px 0 12px !important;
  max-width: 590px !important;
}

.dashboard-briefing-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.dashboard-briefing-chip {
  align-items: center !important;
  background: rgba(255, 255, 255, .24) !important;
  backdrop-filter: blur(10px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3) !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  border-radius: 18px !important;
  color: var(--ink) !important;
  display: inline-grid !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  gap: 2px !important;
  justify-items: center !important;
  min-width: 150px !important;
  padding: 13px 16px !important;
}

.dashboard-briefing-chip strong {
  color: var(--ink) !important;
  font-size: 24px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
}

.dashboard-briefing-chip.is-urgent {
  background: rgba(239, 68, 68, .20) !important;
  border-color: rgba(239, 68, 68, .32) !important;
}

.dashboard-briefing-chip.is-urgent strong {
  color: var(--danger) !important;
}

.dashboard-briefing-chip.is-overdue {
  background: rgba(245, 158, 11, .18) !important;
  border-color: rgba(245, 158, 11, .30) !important;
}

.dashboard-briefing-chip.is-overdue strong {
  color: #d97706 !important;
}

/* Night / storm / dark mode chips */
.dashboard-weather-night .dashboard-briefing-chip,
.dashboard-weather-storm .dashboard-briefing-chip,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-chip {
  background: rgba(0, 0, 0, .32) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: #f8fafc !important;
}

.dashboard-weather-night .dashboard-briefing-chip strong,
.dashboard-weather-storm .dashboard-briefing-chip strong,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-chip strong {
  color: #f8fafc !important;
}

.dashboard-weather-night .dashboard-briefing-chip.is-urgent,
.dashboard-weather-storm .dashboard-briefing-chip.is-urgent,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-chip.is-urgent {
  background: rgba(239, 68, 68, .22) !important;
  border-color: rgba(239, 68, 68, .36) !important;
}

.dashboard-weather-night .dashboard-briefing-chip.is-overdue,
.dashboard-weather-storm .dashboard-briefing-chip.is-overdue,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-chip.is-overdue {
  background: rgba(251, 191, 36, .18) !important;
  border-color: rgba(251, 191, 36, .30) !important;
}

.dashboard-weather-night .dashboard-briefing-chip.is-overdue strong,
.dashboard-weather-storm .dashboard-briefing-chip.is-overdue strong,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-chip.is-overdue strong {
  color: #fbbf24 !important;
}

.dashboard-briefing-right {
  align-content: center !important;
  display: grid !important;
  gap: 18px !important;
  height: 100% !important;
  justify-self: stretch !important;
}

.dashboard-briefing-weather-main {
  align-items: center !important;
  display: grid !important;
  gap: clamp(22px, 3vw, 38px) !important;
  grid-template-columns: minmax(185px, .78fr) minmax(210px, 280px) !important;
  justify-content: end !important;
  min-height: 205px !important;
}

.dashboard-briefing-weather-info {
  display: grid !important;
  gap: 8px !important;
}

.dashboard-briefing-weather-info > span {
  color: var(--ink2) !important;
  font-size: 22px !important;
  font-weight: 720 !important;
  line-height: 1.1 !important;
}

.dashboard-briefing-weather-info strong {
  color: var(--ink) !important;
  font-size: clamp(64px, 5.4vw, 92px) !important;
  font-weight: 820 !important;
  letter-spacing: -0.07em !important;
  line-height: .96 !important;
}

.dashboard-briefing-weather-info p {
  color: var(--ink2) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.dashboard-briefing-weather-actions {
  display: none !important;
}

.dashboard-briefing-weather-metrics {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  justify-content: flex-start !important;
}

.dashboard-briefing-weather-metrics span {
  color: var(--ink2) !important;
  display: grid !important;
  font-size: 12px !important;
  font-weight: 620 !important;
  gap: 3px !important;
}

.dashboard-briefing-weather-metrics strong {
  color: var(--ink) !important;
  display: block !important;
  font-size: 16px !important;
  font-weight: 780 !important;
}

.dashboard-briefing-card .dashboard-weather-visual {
  height: clamp(190px, 15vw, 260px) !important;
  justify-self: end !important;
  position: relative !important;
  width: clamp(190px, 15vw, 260px) !important;
}

.dashboard-weather-haze {
  display: none !important;
}

.dashboard-forecast-strip {
  align-items: stretch !important;
  background: color-mix(in srgb, var(--surface) 44%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 42px color-mix(in srgb, var(--ink) 5%, transparent) !important;
  display: grid !important;
  gap: 0 !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  overflow: hidden !important;
  justify-self: stretch !important;
  padding: 9px !important;
  width: 100% !important;
}

.dashboard-forecast-strip.is-empty {
  backdrop-filter: blur(16px) !important;
  color: var(--ink2) !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
  max-width: 560px !important;
  padding: 14px 18px !important;
}

.dashboard-forecast-item {
  align-items: center !important;
  border-radius: 14px !important;
  color: var(--ink2) !important;
  display: grid !important;
  gap: 4px !important;
  justify-items: center !important;
  min-width: 0 !important;
  padding: 10px 8px !important;
  position: relative !important;
}

.dashboard-forecast-item + .dashboard-forecast-item::before {
  background: color-mix(in srgb, var(--border) 70%, transparent) !important;
  content: '' !important;
  height: 68% !important;
  left: 0 !important;
  position: absolute !important;
  top: 16% !important;
  width: 1px !important;
}

.dashboard-forecast-item.is-today {
  background: var(--layf-accent-gradient-soft, var(--accent-lt)) !important;
}

.dashboard-forecast-item strong {
  color: var(--ink2) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.dashboard-forecast-item span {
  font-size: 23px !important;
  line-height: 1 !important;
}

.dashboard-forecast-item em {
  color: var(--ink) !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 820 !important;
}

.dashboard-forecast-item small {
  color: var(--ink2) !important;
  font-size: 12px !important;
  font-weight: 680 !important;
}

.dashboard-daily-briefing.dashboard-warm-hero {
  align-items: center !important;
  animation: none !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 28px !important;
  box-shadow: 0 22px 54px color-mix(in srgb, var(--ink) 7%, transparent) !important;
  color: var(--ink) !important;
  display: grid !important;
  gap: 32px !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr) !important;
  margin: 0 !important;
  min-height: 240px !important;
  overflow: hidden !important;
  padding: 32px 36px !important;
  position: relative !important;
}

.dashboard-daily-briefing.dashboard-warm-hero::before {
  background:
    var(--dashboard-weather-accent, var(--layf-accent-gradient, linear-gradient(90deg, var(--accent), var(--accent)))) !important;
  content: '' !important;
  height: 2px !important;
  inset: 0 0 auto !important;
  opacity: .85 !important;
  position: absolute !important;
  z-index: 1 !important;
}

.dashboard-daily-briefing.dashboard-warm-hero::after {
  background: var(--dashboard-weather-layer, transparent) !important;
  content: '' !important;
  inset: 2px 0 0 !important;
  opacity: var(--dashboard-weather-layer-opacity, .86) !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 0 !important;
}

.dashboard-daily-briefing .dashboard-warm-hero-main {
  align-content: center !important;
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.dashboard-daily-briefing .planner-warm-badge {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  color: var(--ink2) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  letter-spacing: .035em !important;
  line-height: 1 !important;
  padding: 10px 14px !important;
  text-transform: uppercase !important;
  width: fit-content !important;
}

.dashboard-daily-briefing h1 {
  color: var(--ink) !important;
  font-family: var(--font-body, var(--sans)) !important;
  font-size: clamp(22px, 2.1vw, 26px) !important;
  font-weight: 760 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.06 !important;
  margin: 0 !important;
}

.dashboard-daily-briefing .dashboard-warm-clock {
  color: var(--ink) !important;
  font-family: var(--font-body, var(--sans)) !important;
  font-size: clamp(72px, 7vw, 88px) !important;
  font-weight: 760 !important;
  letter-spacing: -0.075em !important;
  line-height: .88 !important;
  margin: 2px 0 0 !important;
}

.dashboard-daily-briefing .dashboard-warm-briefing-copy {
  color: var(--ink2) !important;
  font-size: clamp(17px, 1.35vw, 19px) !important;
  font-weight: 520 !important;
  line-height: 1.42 !important;
  margin: 0 !important;
  max-width: 520px !important;
}

.dashboard-daily-briefing .dashboard-warm-hero-meta {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

.dashboard-daily-briefing .dashboard-warm-hero-meta span {
  background: color-mix(in srgb, var(--surface) 72%, transparent) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  color: var(--ink2) !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  line-height: 1.15 !important;
  min-width: 128px !important;
  padding: 14px 16px !important;
  text-align: center !important;
}

.dashboard-daily-briefing .dashboard-warm-hero-meta .is-urgent {
  background: color-mix(in srgb, var(--danger) 9%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--danger) 24%, var(--border)) !important;
  color: var(--danger) !important;
}

.dashboard-daily-briefing .dashboard-warm-hero-meta .is-overdue {
  background: color-mix(in srgb, #f59e0b 11%, var(--surface)) !important;
  border-color: color-mix(in srgb, #f59e0b 28%, var(--border)) !important;
  color: color-mix(in srgb, #b45309 86%, var(--ink)) !important;
}

.dashboard-daily-briefing .dashboard-warm-weather {
  align-content: center !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 180px) !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
  max-width: none !important;
  min-height: 190px !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: relative !important;
  text-align: left !important;
  width: 100% !important;
  z-index: 2 !important;
}

.dashboard-daily-briefing .dashboard-warm-weather-actions {
  display: none !important;
}

.dashboard-daily-briefing .dashboard-warm-weather-info {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
  order: 1 !important;
}

.dashboard-daily-briefing .dashboard-warm-weather-top {
  align-items: center !important;
  display: flex !important;
  justify-content: space-between !important;
  margin: 0 !important;
}

.dashboard-daily-briefing .dashboard-warm-weather-top span {
  color: var(--ink2) !important;
  font-size: 22px !important;
  font-weight: 690 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.dashboard-daily-briefing .dashboard-warm-weather-main {
  align-items: center !important;
  display: flex !important;
  gap: 0 !important;
  justify-content: flex-start !important;
  margin: 0 !important;
}

.dashboard-daily-briefing .dashboard-warm-weather-main strong {
  color: var(--ink) !important;
  font-size: clamp(56px, 6vw, 92px) !important;
  font-weight: 780 !important;
  letter-spacing: -0.065em !important;
  line-height: 1 !important;
}

.dashboard-daily-briefing .dashboard-warm-weather-main span {
  display: none !important;
}

.dashboard-daily-briefing .dashboard-warm-weather p {
  color: var(--ink2) !important;
  font-size: 20px !important;
  font-weight: 620 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.dashboard-daily-briefing .dashboard-warm-weather-metrics {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  grid-column: 1 / -1 !important;
  order: 3 !important;
}

.dashboard-daily-briefing .dashboard-warm-weather-metrics span {
  align-items: center !important;
  background: color-mix(in srgb, var(--surface) 58%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent) !important;
  border-radius: 999px !important;
  color: var(--ink2) !important;
  display: inline-flex !important;
  font-size: 13px !important;
  font-weight: 660 !important;
  gap: 5px !important;
  line-height: 1 !important;
  padding: 9px 11px !important;
}

.dashboard-daily-briefing .dashboard-warm-weather-metrics strong {
  color: var(--ink) !important;
  font-weight: 760 !important;
}

.dashboard-weather-visual {
  height: clamp(140px, 13vw, 180px) !important;
  justify-self: end !important;
  margin: 0 !important;
  order: 2 !important;
  position: relative !important;
  width: clamp(140px, 13vw, 180px) !important;
}

.dashboard-weather-sun,
.dashboard-weather-cloud,
.dashboard-weather-fall {
  pointer-events: none !important;
  position: absolute !important;
}

/* ── Sun: bright core + concentric atmospheric glow rings ─────────────── */
.dashboard-weather-sun {
  background:
    radial-gradient(circle at 42% 36%, rgba(255, 255, 255, .96) 0%, transparent 14%),
    radial-gradient(circle, #fffde0 0%, #ffe066 20%, #ffc200 42%, #ff8c00 68%, rgba(255, 100, 0, .28) 84%, transparent 96%) !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 0 10px rgba(255, 200, 50, .12),
    0 0 0 24px rgba(255, 180, 30, .07),
    0 0 0 46px rgba(255, 150, 0, .04),
    0 0 90px rgba(255, 200, 60, .44),
    0 0 160px rgba(255, 150, 30, .22) !important;
  height: 88px !important;
  right: 0 !important;
  top: 0 !important;
  width: 88px !important;
  animation: layf-sun-pulse 6.5s ease-in-out infinite !important;
}

/* ── Cloud: fluffy 3D shape with proper bumps ─────────────────────────── */
.dashboard-weather-cloud {
  background:
    radial-gradient(circle at 22% 52%, rgba(255, 255, 255, 1) 0 26%, transparent 27%),
    radial-gradient(circle at 44% 34%, rgba(255, 255, 255, 1) 0 34%, transparent 35%),
    radial-gradient(circle at 67% 34%, rgba(255, 255, 255, .98) 0 28%, transparent 29%),
    radial-gradient(circle at 84% 52%, rgba(255, 255, 255, .96) 0 22%, transparent 23%),
    linear-gradient(180deg, rgba(255, 255, 255, .94) 30%, rgba(222, 232, 248, .82) 100%) !important;
  border-radius: 999px !important;
  box-shadow:
    0 14px 36px rgba(71, 85, 105, .14),
    inset 0 -4px 12px rgba(180, 196, 224, .22) !important;
  height: 78px !important;
  right: 18px !important;
  top: 58px !important;
  width: 174px !important;
  animation: layf-cloud-drift 11.7s ease-in-out infinite !important;
}

.dashboard-weather-cloud::after {
  background: rgba(255, 255, 255, .38) !important;
  border-radius: inherit !important;
  content: '' !important;
  inset: 46% 10% 14% !important;
  position: absolute !important;
}

.dashboard-weather-cloud--two {
  opacity: .44 !important;
  right: 104px !important;
  top: 86px !important;
  animation: layf-cloud-drift-sm 16.9s ease-in-out infinite reverse !important;
}

/* Rain: dark gray clouds; rain drops */
.dashboard-weather-rain .dashboard-weather-cloud,
.dashboard-weather-storm .dashboard-weather-cloud {
  background:
    radial-gradient(circle at 22% 52%, rgba(100, 114, 138, 1) 0 26%, transparent 27%),
    radial-gradient(circle at 44% 34%, rgba(90, 104, 128, 1) 0 34%, transparent 35%),
    radial-gradient(circle at 67% 34%, rgba(100, 114, 138, .96) 0 28%, transparent 29%),
    radial-gradient(circle at 84% 52%, rgba(110, 124, 148, .94) 0 22%, transparent 23%),
    linear-gradient(180deg, rgba(105, 118, 140, .96) 30%, rgba(75, 88, 110, .88) 100%) !important;
  box-shadow: 0 14px 36px rgba(20, 30, 50, .22), inset 0 -4px 12px rgba(40, 50, 80, .18) !important;
  filter: none !important;
}

/* Night: very dark cloud against the sky */
.dashboard-weather-night .dashboard-weather-cloud {
  background:
    radial-gradient(circle at 22% 52%, rgba(28, 36, 58, 1) 0 26%, transparent 27%),
    radial-gradient(circle at 44% 34%, rgba(22, 30, 52, 1) 0 34%, transparent 35%),
    radial-gradient(circle at 67% 34%, rgba(28, 36, 58, .96) 0 28%, transparent 29%),
    radial-gradient(circle at 84% 52%, rgba(34, 42, 66, .94) 0 22%, transparent 23%),
    linear-gradient(180deg, rgba(30, 38, 62, .90) 30%, rgba(18, 24, 44, .80) 100%) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .36) !important;
  filter: none !important;
  opacity: .72 !important;
}

/* ── Rain drop streak ─────────────────────────────────────────────────── */
.dashboard-weather-fall {
  background: linear-gradient(180deg, rgba(147, 197, 253, .92), rgba(96, 165, 250, .18)) !important;
  border-radius: 2px 2px 999px 999px !important;
  height: 48px !important;
  opacity: 0 !important;
  top: 136px !important;
  transform: rotate(16deg) !important;
  width: 3px !important;
}

.dashboard-weather-fall--one { right: 80px !important; }
.dashboard-weather-fall--two { right: 46px !important; top: 144px !important; }
.dashboard-weather-fall--three { right: 118px !important; top: 142px !important; }

.dashboard-briefing-card .dashboard-weather-sun {
  height: 128px !important;
  right: 8px !important;
  top: 4px !important;
  width: 128px !important;
}

.dashboard-briefing-card .dashboard-weather-cloud {
  box-shadow:
    0 24px 52px rgba(71, 85, 105, .16),
    inset 0 18px 30px rgba(255, 255, 255, .58) !important;
  height: 114px !important;
  right: 6px !important;
  top: 92px !important;
  width: 256px !important;
}

.dashboard-briefing-card .dashboard-weather-cloud--two {
  right: 152px !important;
  top: 136px !important;
}

.dashboard-briefing-card .dashboard-weather-fall {
  height: 62px !important;
  top: 196px !important;
  width: 5px !important;
}

.dashboard-briefing-card .dashboard-weather-fall--one { right: 116px !important; }
.dashboard-briefing-card .dashboard-weather-fall--two { right: 72px !important; top: 208px !important; }
.dashboard-briefing-card .dashboard-weather-fall--three { right: 164px !important; top: 206px !important; }

/* Storm + night text must be light regardless of theme */
.dashboard-weather-storm.dashboard-briefing-card,
.dashboard-weather-night.dashboard-briefing-card {
  color: #f8fafc !important;
}

.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-date span,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-left h1,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-time,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-weather-info strong,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-date span,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-left h1,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-time,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-weather-info strong {
  color: #f8fafc !important;
}

.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-message,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-weather-info > span,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-weather-info p,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-weather-metrics span,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-message,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-weather-info > span,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-weather-info p,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-weather-metrics span {
  color: rgba(248, 250, 252, .74) !important;
}

.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-weather-metrics strong,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-weather-metrics strong {
  color: rgba(248, 250, 252, .92) !important;
}

/* Dark theme: all weather conditions need light text */
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-date span,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-left h1,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-time,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-weather-info strong {
  color: #f8fafc !important;
}

html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-message,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-weather-info > span,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-weather-info p,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-weather-metrics span {
  color: rgba(248, 250, 252, .70) !important;
}

html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-weather-metrics strong {
  color: rgba(248, 250, 252, .90) !important;
}

/* Dark theme: forecast strip + weather panel glass */
html[data-dark='true'] .dashboard-briefing-card .dashboard-forecast-strip,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-weather-panel {
  background: rgba(0, 0, 0, .30) !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

html[data-dark='true'] .dashboard-briefing-card .dashboard-forecast-item,
html[data-dark='true'] .dashboard-briefing-card .dashboard-forecast-item strong,
html[data-dark='true'] .dashboard-briefing-card .dashboard-forecast-item em,
html[data-dark='true'] .dashboard-briefing-card .dashboard-forecast-item small {
  color: rgba(248, 250, 252, .90) !important;
}

html[data-dark='true'] .dashboard-briefing-card .dashboard-forecast-item + .dashboard-forecast-item::before {
  background: rgba(255, 255, 255, .08) !important;
}

/* ── Weather conditions: immersive sky gradients ───────────────────────── */

.dashboard-weather-clear {
  --dashboard-weather-accent: linear-gradient(90deg, #f59e0b, #fb7185, #a78bfa);
  --dashboard-weather-bg:
    linear-gradient(160deg, #fef3c7 0%, #fed7aa 20%, #bfdbfe 58%, #ddd6fe 100%);
  --dashboard-weather-layer:
    radial-gradient(ellipse at 84% 18%, rgba(251, 191, 36, .36) 0%, transparent 34%),
    radial-gradient(ellipse at 20% 80%, rgba(251, 113, 133, .10) 0%, transparent 40%),
    linear-gradient(90deg, rgba(255, 251, 235, .22) 0%, transparent 48%);
}

.dashboard-weather-clear .dashboard-weather-cloud,
.dashboard-weather-clear .dashboard-weather-fall {
  display: none !important;
}

.dashboard-weather-partly {
  --dashboard-weather-accent: linear-gradient(90deg, #fb923c, #f9a8d4, #93c5fd);
  --dashboard-weather-bg:
    linear-gradient(155deg, #fffbeb 0%, #fde68a 16%, #bfdbfe 54%, #e0e7ff 100%);
  --dashboard-weather-layer:
    radial-gradient(ellipse at 84% 18%, rgba(251, 191, 36, .26) 0%, transparent 32%),
    radial-gradient(ellipse at 60% 82%, rgba(147, 197, 253, .22) 0%, transparent 38%);
}

.dashboard-weather-partly .dashboard-weather-fall {
  display: none !important;
}

.dashboard-weather-cloudy {
  --dashboard-weather-accent: linear-gradient(90deg, #94a3b8, #93c5fd, #c4b5fd);
  --dashboard-weather-bg:
    linear-gradient(152deg, #f1f5f9 0%, #e2e8f0 36%, #cbd5e1 66%, #dbeafe 100%);
  --dashboard-weather-layer:
    radial-gradient(ellipse at 72% 28%, rgba(226, 232, 240, .56) 0%, transparent 42%),
    radial-gradient(ellipse at 24% 72%, rgba(219, 234, 254, .28) 0%, transparent 40%);
}

.dashboard-weather-cloudy .dashboard-weather-sun,
.dashboard-weather-fog .dashboard-weather-sun {
  display: none !important;
}

.dashboard-weather-cloudy .dashboard-weather-fall,
.dashboard-weather-fog .dashboard-weather-fall {
  display: none !important;
}

.dashboard-weather-cloudy .dashboard-weather-cloud,
.dashboard-weather-fog .dashboard-weather-cloud {
  opacity: .78 !important;
}

.dashboard-weather-rain {
  --dashboard-weather-accent: linear-gradient(90deg, #60a5fa, #94a3b8, #818cf8);
  --dashboard-weather-bg:
    linear-gradient(152deg, #dbeafe 0%, #bfdbfe 26%, #94a3b8 60%, #64748b 100%);
  --dashboard-weather-layer:
    radial-gradient(ellipse at 78% 22%, rgba(191, 219, 254, .44) 0%, transparent 34%),
    radial-gradient(ellipse at 20% 80%, rgba(100, 116, 139, .18) 0%, transparent 36%);
}

.dashboard-weather-rain .dashboard-weather-sun {
  display: none !important;
}

.dashboard-weather-rain .dashboard-weather-fall {
  opacity: .82 !important;
  animation: layf-weather-drop 1.95s linear infinite !important;
}

.dashboard-weather-rain .dashboard-weather-fall--two {
  animation-delay: .28s !important;
}

.dashboard-weather-rain .dashboard-weather-fall--three {
  animation-delay: .62s !important;
}

/* Rain: add 2 extra virtual drops per fall element via pseudo-elements */
.dashboard-weather-rain .dashboard-weather-fall::before,
.dashboard-weather-rain .dashboard-weather-fall::after {
  background: inherit !important;
  border-radius: inherit !important;
  content: '' !important;
  height: 100% !important;
  position: absolute !important;
  width: 100% !important;
}

.dashboard-weather-rain .dashboard-weather-fall::before {
  animation: layf-weather-drop 1.95s linear infinite .19s !important;
  left: -18px !important;
  top: 0 !important;
}

.dashboard-weather-rain .dashboard-weather-fall::after {
  animation: layf-weather-drop 1.95s linear infinite .41s !important;
  left: 18px !important;
  top: 0 !important;
}

.dashboard-weather-storm {
  --dashboard-weather-accent: linear-gradient(90deg, #334155, #6366f1, #fef3c7);
  --dashboard-weather-bg:
    linear-gradient(148deg, #1e293b 0%, #334155 30%, #475569 58%, #374151 100%);
  --dashboard-weather-layer:
    radial-gradient(circle at 80% 16%, rgba(254, 243, 199, .16) 0%, transparent 18%),
    radial-gradient(ellipse at 64% 56%, rgba(99, 102, 241, .12) 0%, transparent 36%),
    linear-gradient(90deg, rgba(15, 23, 42, .28) 0%, transparent 50%);
}

.dashboard-weather-storm .dashboard-weather-sun {
  background:
    radial-gradient(circle, rgba(254, 243, 199, .44), transparent 64%) !important;
  box-shadow: 0 0 48px rgba(254, 243, 199, .14) !important;
  opacity: .58 !important;
}

.dashboard-weather-storm .dashboard-weather-cloud {
  filter: saturate(.6) brightness(.78) !important;
  opacity: .88 !important;
}

.dashboard-weather-storm .dashboard-weather-fall {
  opacity: .32 !important;
}

.dashboard-weather-snow {
  --dashboard-weather-accent: linear-gradient(90deg, #7dd3fc, #e0f2fe, #c4b5fd);
  --dashboard-weather-bg:
    linear-gradient(152deg, #f0f9ff 0%, #e0f2fe 36%, #e0e7ff 68%, #f5f3ff 100%);
  --dashboard-weather-layer:
    radial-gradient(ellipse at 82% 20%, rgba(255, 255, 255, .58) 0%, transparent 34%),
    radial-gradient(ellipse at 22% 70%, rgba(224, 231, 255, .22) 0%, transparent 40%);
}

.dashboard-weather-snow .dashboard-weather-sun {
  display: none !important;
}

.dashboard-weather-snow .dashboard-weather-fall {
  background: rgba(255, 255, 255, .92) !important;
  border-radius: 999px !important;
  height: 9px !important;
  opacity: .88 !important;
  transform: none !important;
  width: 9px !important;
  animation: layf-weather-snowflake 4.94s ease-in-out infinite !important;
}

.dashboard-weather-snow .dashboard-weather-fall--two {
  animation-delay: .9s !important;
}

.dashboard-weather-snow .dashboard-weather-fall--three {
  animation-delay: 1.6s !important;
}

.dashboard-weather-fog {
  --dashboard-weather-accent: linear-gradient(90deg, #a8a29e, #e7e5e4, #93c5fd);
  --dashboard-weather-bg:
    linear-gradient(152deg, #fafaf9 0%, #f5f5f4 30%, #e7e5e4 58%, #eff6ff 100%);
  --dashboard-weather-layer:
    linear-gradient(0deg, rgba(255, 255, 255, .36) 0%, transparent 28%),
    radial-gradient(ellipse at 64% 40%, rgba(231, 229, 228, .58) 0%, transparent 48%);
}

/* ── Night mode: deep sky with stars ──────────────────────────────────── */

.dashboard-weather-night {
  --dashboard-weather-accent: linear-gradient(90deg, #1e3a5f, #4c1d95, #7c3aed);
  --dashboard-weather-bg:
    linear-gradient(155deg, #0f172a 0%, #1e1b4b 38%, #312e81 66%, #1e293b 100%);
  --dashboard-weather-layer:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 54% 14%, rgba(255, 255, 255, .60) 0 1.5px, transparent 2px),
    radial-gradient(circle at 18% 44%, rgba(255, 255, 255, .50) 0 1px, transparent 1.5px),
    radial-gradient(circle at 44% 60%, rgba(255, 255, 255, .44) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 10%, rgba(255, 255, 255, .66) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 78%, rgba(255, 255, 255, .34) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 20%, rgba(167, 139, 250, .22) 0%, transparent 24%),
    radial-gradient(ellipse at 30% 72%, rgba(99, 102, 241, .08) 0%, transparent 38%),
    linear-gradient(90deg, rgba(15, 23, 42, .30) 0%, transparent 50%);
}

.dashboard-weather-night .dashboard-weather-sun {
  /* Moon: realistic lunar disc — warm cream with subtle surface shading + lavender atmosphere */
  background:
    radial-gradient(circle at 40% 32%, rgba(255, 255, 255, .82) 0%, transparent 12%),
    radial-gradient(circle at 66% 64%, rgba(165, 155, 120, .20) 0%, transparent 10%),
    radial-gradient(circle at 28% 60%, rgba(150, 140, 110, .14) 0%, transparent 8%),
    radial-gradient(circle, #f8f4e0 0%, #ede8c4 28%, #d8d0a4 52%, #c4ba8c 68%, rgba(180, 168, 120, .5) 82%, transparent 96%) !important;
  box-shadow:
    0 0 0 6px rgba(245, 238, 205, .08),
    0 0 0 16px rgba(220, 210, 165, .04),
    0 0 48px rgba(245, 238, 205, .34),
    0 0 96px rgba(167, 139, 250, .20),
    0 0 180px rgba(99, 102, 241, .08) !important;
  height: 96px !important;
  opacity: 1 !important;
  width: 96px !important;
  animation: layf-moon-pulse 7.8s ease-in-out infinite !important;
}

/* Night default: hide clouds entirely (no "ghost pill" shapes against the sky) */
.dashboard-weather-night .dashboard-weather-cloud {
  display: none !important;
}

.dashboard-weather-night .dashboard-weather-fall {
  display: none !important;
}

/* Night + cloud-requiring conditions: re-enable with dim treatment */
.dashboard-weather-night.dashboard-weather-partly .dashboard-weather-cloud,
.dashboard-weather-night.dashboard-weather-cloudy .dashboard-weather-cloud,
.dashboard-weather-night.dashboard-weather-rain .dashboard-weather-cloud,
.dashboard-weather-night.dashboard-weather-storm .dashboard-weather-cloud {
  display: block !important;
  filter: brightness(.38) saturate(.4) !important;
  opacity: .42 !important;
}

/* ── Dark theme overrides: all conditions get deep dark sky ───────────── */

html[data-dark='true'] .dashboard-weather-clear {
  --dashboard-weather-bg:
    linear-gradient(160deg, #1c1a0a 0%, #261e06 24%, #0f1929 58%, #16122a 100%);
  --dashboard-weather-layer:
    radial-gradient(ellipse at 84% 18%, rgba(251, 191, 36, .14) 0%, transparent 34%),
    radial-gradient(ellipse at 20% 80%, rgba(251, 113, 133, .06) 0%, transparent 40%);
}

html[data-dark='true'] .dashboard-weather-partly {
  --dashboard-weather-bg:
    linear-gradient(155deg, #111827 0%, #1c1a38 36%, #1e293b 64%, #0f172a 100%);
  --dashboard-weather-layer:
    radial-gradient(ellipse at 84% 18%, rgba(251, 191, 36, .12) 0%, transparent 32%),
    radial-gradient(ellipse at 60% 82%, rgba(147, 197, 253, .10) 0%, transparent 38%);
}

html[data-dark='true'] .dashboard-weather-cloudy {
  --dashboard-weather-bg:
    linear-gradient(152deg, #111827 0%, #1f2937 38%, #1e293b 64%, #111827 100%);
}

html[data-dark='true'] .dashboard-weather-rain {
  --dashboard-weather-bg:
    linear-gradient(152deg, #0c1a30 0%, #0f2444 26%, #162032 58%, #090e1a 100%);
}

html[data-dark='true'] .dashboard-weather-storm {
  --dashboard-weather-bg:
    linear-gradient(148deg, #050a0f 0%, #0d1117 30%, #1a1128 58%, #080b14 100%);
}

html[data-dark='true'] .dashboard-weather-snow {
  --dashboard-weather-bg:
    linear-gradient(152deg, #0f172a 0%, #1e293b 36%, #1a1f40 66%, #111827 100%);
}

html[data-dark='true'] .dashboard-weather-fog {
  --dashboard-weather-bg:
    linear-gradient(152deg, #111827 0%, #1f2937 40%, #1e293b 66%, #111827 100%);
}

html[data-dark='true'] .dashboard-weather-night {
  --dashboard-weather-bg:
    linear-gradient(155deg, #020408 0%, #080b14 36%, #100c22 64%, #050810 100%);
}

.dashboard-weather-night.dashboard-daily-briefing,
.dashboard-weather-storm.dashboard-daily-briefing {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
}

.dashboard-weather-night.dashboard-daily-briefing h1,
.dashboard-weather-night.dashboard-daily-briefing .dashboard-warm-clock,
.dashboard-weather-night.dashboard-daily-briefing .dashboard-warm-briefing-copy,
.dashboard-weather-night.dashboard-daily-briefing .planner-warm-badge,
.dashboard-weather-night.dashboard-daily-briefing .dashboard-warm-hero-meta span,
.dashboard-weather-night.dashboard-daily-briefing .dashboard-warm-weather,
.dashboard-weather-night.dashboard-daily-briefing .dashboard-warm-weather strong,
.dashboard-weather-night.dashboard-daily-briefing .dashboard-warm-weather span,
.dashboard-weather-night.dashboard-daily-briefing .dashboard-warm-weather p {
  color: #f8fafc !important;
}

.dashboard-weather-night.dashboard-daily-briefing .planner-warm-badge,
.dashboard-weather-night.dashboard-daily-briefing .dashboard-warm-hero-meta span,
.dashboard-weather-night.dashboard-daily-briefing .dashboard-warm-weather {
  background-color: rgba(15, 23, 42, .34) !important;
  border-color: rgba(226, 232, 240, .18) !important;
}

@keyframes layf-weather-drop {
  from {
    opacity: 0;
    transform: translateY(-14px) rotate(18deg);
  }
  18% { opacity: .82; }
  82% { opacity: .70; }
  to {
    opacity: 0;
    transform: translateY(42px) rotate(18deg);
  }
}

@keyframes layf-weather-snowflake {
  from {
    opacity: 0;
    transform: translateY(-12px) translateX(-6px) rotate(0deg);
  }
  22% { opacity: .90; }
  78% { opacity: .74; }
  to {
    opacity: 0;
    transform: translateY(38px) translateX(10px) rotate(180deg);
  }
}

@keyframes layf-sun-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 10px rgba(255, 200, 50, .12),
      0 0 0 24px rgba(255, 180, 30, .07),
      0 0 0 46px rgba(255, 150, 0, .04),
      0 0 90px rgba(255, 200, 60, .44),
      0 0 160px rgba(255, 150, 30, .22);
  }
  50% {
    box-shadow:
      0 0 0 14px rgba(255, 200, 50, .18),
      0 0 0 32px rgba(255, 180, 30, .10),
      0 0 0 60px rgba(255, 150, 0, .06),
      0 0 120px rgba(255, 200, 60, .58),
      0 0 220px rgba(255, 150, 30, .30);
  }
}

@keyframes layf-moon-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 6px rgba(245, 238, 205, .08),
      0 0 0 16px rgba(220, 210, 165, .04),
      0 0 48px rgba(245, 238, 205, .34),
      0 0 96px rgba(167, 139, 250, .20);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(245, 238, 205, .12),
      0 0 0 24px rgba(220, 210, 165, .07),
      0 0 72px rgba(245, 238, 205, .48),
      0 0 140px rgba(167, 139, 250, .30),
      0 0 220px rgba(99, 102, 241, .10);
  }
}

@keyframes layf-cloud-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-10px); }
}

@keyframes layf-cloud-drift-sm {
  0%, 100% { transform: scale(.66) translateX(0); }
  50% { transform: scale(.66) translateX(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-weather-rain .dashboard-weather-fall,
  .dashboard-weather-snow .dashboard-weather-fall,
  .dashboard-weather-sun,
  .dashboard-weather-cloud,
  .dashboard-weather-night .dashboard-weather-sun {
    animation: none !important;
  }
}

.dashboard-briefing-card .dashboard-weather-visual {
  height: clamp(210px, 17vw, 290px) !important;
  justify-self: end !important;
  margin: 0 !important;
  order: initial !important;
  width: clamp(210px, 17vw, 290px) !important;
}

.dashboard-briefing-weather-metrics span {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ink2) !important;
  display: grid !important;
  font-size: 12px !important;
  font-weight: 620 !important;
  gap: 3px !important;
  line-height: 1.2 !important;
  padding: 0 !important;
}

.dashboard-briefing-weather-metrics strong {
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 780 !important;
}

.layf-dash-overview-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .95fr) minmax(280px, .95fr);
}

.layf-dash-module-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.layf-dash-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--ink) 5%, transparent) !important;
  padding: 18px !important;
}

.layf-dash-card-head h2 {
  color: var(--ink) !important;
  font-family: var(--font-body, var(--sans)) !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  letter-spacing: -0.025em !important;
}

.layf-dash-card-head p,
.layf-dash-muted {
  color: var(--ink2) !important;
}

.layf-dash-today-card .layf-event-list {
  position: relative;
}

.layf-dash-today-card .layf-event-row {
  border-color: transparent !important;
  background: transparent !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  min-height: 46px !important;
  padding: 7px 4px !important;
}

.layf-dash-today-card .layf-event-icon {
  background: var(--layf-accent-gradient-soft, var(--accent-lt)) !important;
  border: 1px solid var(--layf-accent-border, var(--border)) !important;
  color: var(--accent) !important;
  height: 26px !important;
  width: 26px !important;
}

.layf-dash-task-list {
  display: grid;
  gap: 8px;
}

.layf-dash-task-row {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 13px;
  color: var(--ink);
  display: grid;
  gap: 10px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  min-height: 44px;
  padding: 7px 4px;
  text-align: left;
}

.layf-dash-task-row:hover {
  background: var(--surface2);
}

.layf-dash-task-check {
  border: 1px solid var(--border);
  border-radius: 6px;
  height: 16px;
  width: 16px;
}

.layf-dash-task-row strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  font-weight: 720;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layf-dash-task-row small,
.layf-dash-task-row em {
  color: var(--ink2);
  font-size: 12px;
  font-style: normal;
}

.layf-dash-task-row.is-high .layf-dash-task-check { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.layf-dash-task-row.is-medium .layf-dash-task-check { border-color: color-mix(in srgb, #f59e0b 48%, var(--border)); }
.layf-dash-task-row.is-low .layf-dash-task-check { border-color: color-mix(in srgb, #60a5fa 48%, var(--border)); }

.layf-dash-property-mini {
  align-items: center;
  display: flex;
  gap: 12px;
  margin: 4px 0 14px;
}

.layf-dash-property-mark {
  align-items: center;
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 16px;
  color: var(--ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 800;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.layf-dash-property-mini strong {
  color: var(--ink);
  display: block;
  font-weight: 760;
}

.layf-dash-property-mini small {
  color: var(--ink2);
}

@media (max-width: 1180px) {
  .dashboard-daily-briefing.dashboard-warm-hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr) !important;
    min-height: 250px !important;
  }

  .layf-dash-overview-grid,
  .layf-dash-module-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 760px) {
  .dashboard-daily-briefing.dashboard-warm-hero,
  .layf-dash-overview-grid,
  .layf-dash-module-grid {
    grid-template-columns: 1fr !important;
  }

  .dashboard-daily-briefing.dashboard-warm-hero {
    gap: 18px !important;
    min-height: 0 !important;
    padding: 22px !important;
  }

  .dashboard-daily-briefing .dashboard-warm-clock {
    font-size: clamp(50px, 18vw, 74px) !important;
  }

  .dashboard-daily-briefing .dashboard-warm-hero-meta span {
    min-width: 0 !important;
    padding: 11px 13px !important;
  }

  .dashboard-daily-briefing .dashboard-warm-weather {
    gap: 14px !important;
    grid-template-columns: minmax(0, 1fr) minmax(104px, 130px) !important;
    justify-self: stretch !important;
    max-width: none !important;
    min-height: 170px !important;
    width: 100% !important;
  }

  .dashboard-weather-visual {
    height: 130px !important;
    width: 130px !important;
  }

  .dashboard-weather-sun {
    height: 58px !important;
    width: 58px !important;
  }

  .dashboard-weather-cloud {
    height: 56px !important;
    right: 8px !important;
    top: 48px !important;
    width: 128px !important;
  }

  .dashboard-weather-cloud--two {
    right: 72px !important;
    top: 68px !important;
  }

  .dashboard-weather-fall {
    height: 30px !important;
    top: 104px !important;
  }

  .dashboard-weather-fall--one { right: 58px !important; }
  .dashboard-weather-fall--two { right: 34px !important; top: 110px !important; }
  .dashboard-weather-fall--three { right: 86px !important; top: 108px !important; }

  .dashboard-daily-briefing .dashboard-warm-weather-main strong {
    font-size: clamp(52px, 16vw, 68px) !important;
  }

  .dashboard-daily-briefing .dashboard-warm-weather-top span,
  .dashboard-daily-briefing .dashboard-warm-weather p {
    font-size: 16px !important;
  }

  .dashboard-daily-briefing .dashboard-warm-weather-metrics {
    gap: 7px !important;
  }

  .dashboard-daily-briefing .dashboard-warm-weather-metrics span {
    font-size: 12px !important;
    padding: 8px 9px !important;
  }

  .layf-dash-card {
    padding: 16px !important;
  }
}

.dashboard-weather-night.dashboard-briefing-card,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-date span,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-left h1,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-time,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-message,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-weather-info > span,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-weather-info strong,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-weather-info p,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-weather-metrics span,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-weather-metrics strong {
  color: #f8fafc !important;
}

.dashboard-weather-night.dashboard-briefing-card .dashboard-forecast-strip {
  background: rgba(15, 23, 42, .34) !important;
  border-color: rgba(226, 232, 240, .18) !important;
}

/* Forecast strip + weather panel: dark glass on night/storm sky */
.dashboard-weather-night.dashboard-briefing-card .dashboard-forecast-strip,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-forecast-strip,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-weather-panel,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-weather-panel {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

.dashboard-weather-night.dashboard-briefing-card .dashboard-forecast-item,
.dashboard-weather-night.dashboard-briefing-card .dashboard-forecast-item strong,
.dashboard-weather-night.dashboard-briefing-card .dashboard-forecast-item em,
.dashboard-weather-night.dashboard-briefing-card .dashboard-forecast-item small,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-forecast-item,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-forecast-item strong,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-forecast-item em,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-forecast-item small {
  color: rgba(248, 250, 252, .90) !important;
}

.dashboard-weather-night.dashboard-briefing-card .dashboard-forecast-item + .dashboard-forecast-item::before,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-forecast-item + .dashboard-forecast-item::before {
  background: rgba(255, 255, 255, .12) !important;
}

/* Night + partly: clouds visible (re-enabled above), but no precipitation */
.dashboard-weather-night.dashboard-weather-partly .dashboard-weather-fall {
  display: none !important;
}

@media (max-width: 1180px) {
  .dashboard-briefing-card {
    grid-template-columns: minmax(330px, .9fr) minmax(420px, 1.1fr) !important;
    padding: 32px !important;
  }

  .dashboard-briefing-weather-main {
    grid-template-columns: minmax(170px, .85fr) minmax(170px, 230px) !important;
  }

  .dashboard-briefing-card .dashboard-weather-visual {
    height: clamp(170px, 17vw, 230px) !important;
    width: clamp(170px, 17vw, 230px) !important;
  }
}

@media (max-width: 760px) {
  .dashboard-briefing-card {
    border-radius: 24px !important;
    gap: 20px !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 22px !important;
  }

  .dashboard-briefing-left {
    gap: 10px !important;
  }

  .dashboard-briefing-left h1 {
    margin-top: 8px !important;
  }

  .dashboard-briefing-time {
    font-size: clamp(52px, 18vw, 64px) !important;
  }

  .dashboard-briefing-message {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }

  .dashboard-briefing-chips {
    order: 4 !important;
  }

  .dashboard-briefing-chip {
    flex: 1 1 130px !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
  }

  .dashboard-briefing-right {
    gap: 14px !important;
  }

  .dashboard-briefing-weather-main {
    align-items: center !important;
    gap: 14px !important;
    grid-template-columns: minmax(0, 1fr) minmax(116px, 142px) !important;
    min-height: 132px !important;
  }

  .dashboard-briefing-card .dashboard-weather-visual {
    height: 142px !important;
    width: 142px !important;
  }

  .dashboard-briefing-card .dashboard-weather-sun {
    height: 66px !important;
    right: 0 !important;
    top: 0 !important;
    width: 66px !important;
  }

  .dashboard-briefing-card .dashboard-weather-cloud {
    height: 60px !important;
    right: 2px !important;
    top: 50px !important;
    width: 136px !important;
  }

  .dashboard-briefing-card .dashboard-weather-cloud--two {
    right: 78px !important;
    top: 76px !important;
  }

  .dashboard-briefing-card .dashboard-weather-fall {
    height: 34px !important;
    top: 108px !important;
    width: 4px !important;
  }

  .dashboard-briefing-card .dashboard-weather-fall--one { right: 56px !important; }
  .dashboard-briefing-card .dashboard-weather-fall--two { right: 32px !important; top: 114px !important; }
  .dashboard-briefing-card .dashboard-weather-fall--three { right: 84px !important; top: 112px !important; }

  .dashboard-briefing-weather-info > span,
  .dashboard-briefing-weather-info p {
    font-size: 16px !important;
  }

  .dashboard-briefing-weather-info strong {
    font-size: clamp(52px, 16vw, 64px) !important;
  }

  .dashboard-forecast-strip {
    display: flex !important;
    overflow-x: auto !important;
    padding: 8px !important;
    scrollbar-width: none !important;
  }

  .dashboard-forecast-strip.is-empty {
    max-width: none !important;
    width: auto !important;
  }

  .dashboard-forecast-item {
    flex: 0 0 72px !important;
  }
}

/* Final Daily Briefing weather-widget layout.
   This intentionally uses dashboard-briefing-* classes only, so legacy
   dashboard-warm-weather rules cannot distort the hero again. */
.dashboard-briefing-card {
  grid-template-columns: minmax(200px, .75fr) minmax(280px, 1.25fr) !important;
  gap: clamp(16px, 2.5vw, 40px) !important;
  min-height: clamp(150px, 11vw, 205px) !important;
  padding: clamp(20px, 1.8vw, 28px) clamp(22px, 2.4vw, 36px) !important;
}

.dashboard-briefing-card::after {
  background: var(--dashboard-weather-layer, transparent) !important;
}

.dashboard-briefing-left {
  gap: 3px !important;
  max-width: 560px !important;
}

.dashboard-briefing-date span {
  font-size: 13px !important;
  font-weight: 440 !important;
  letter-spacing: .01em !important;
}

.dashboard-briefing-left h1 {
  font-size: clamp(15px, 1.25vw, 18px) !important;
  font-weight: 440 !important;
  letter-spacing: -.01em !important;
  margin-top: 4px !important;
}

.dashboard-briefing-time {
  font-size: clamp(36px, 3.6vw, 52px) !important;
  font-weight: 240 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "kern" 1 !important;
  letter-spacing: -.04em !important;
  line-height: .94 !important;
}

.dashboard-briefing-message {
  font-size: clamp(12px, .95vw, 14px) !important;
  font-weight: 380 !important;
  line-height: 1.32 !important;
  margin: 2px 0 5px !important;
  max-width: 500px !important;
}

.dashboard-briefing-chips {
  flex-wrap: nowrap !important;
  gap: 6px !important;
}

.dashboard-briefing-chip {
  border-radius: 12px !important;
  font-size: 10px !important;
  font-weight: 460 !important;
  min-width: 108px !important;
  padding: 6px 10px !important;
}

.dashboard-briefing-chip strong {
  font-size: 17px !important;
  font-weight: 520 !important;
}

.dashboard-briefing-right {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  min-height: 0 !important;
  position: relative !important;
  width: 100% !important;
}

.dashboard-briefing-bottom-row {
  grid-column: 1 / -1 !important;
  align-items: stretch !important;
  display: flex !important;
  flex-direction: row !important;
  gap: clamp(10px, 1.5vw, 16px) !important;
  min-width: 0 !important;
}

.dashboard-briefing-right::before {
  display: none !important;
}

.dashboard-briefing-right.is-loading {
  align-content: center !important;
  max-width: 680px !important;
}

.dashboard-briefing-card .dashboard-weather-visual {
  align-self: flex-start !important;
  flex-shrink: 0 !important;
}

.dashboard-briefing-weather-panel {
  align-items: center !important;
  backdrop-filter: blur(16px) !important;
  background: color-mix(in srgb, var(--surface) 44%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 13px !important;
  padding: 9px 14px !important;
  position: relative !important;
  z-index: 2 !important;
}

.dashboard-briefing-weather-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.dashboard-briefing-weather-info > span {
  font-size: 11px !important;
  font-weight: 440 !important;
}

.dashboard-briefing-weather-info strong {
  font-size: clamp(28px, 2.5vw, 39px) !important;
  font-weight: 240 !important;
  letter-spacing: -0.04em !important;
}

.dashboard-briefing-weather-info p {
  font-size: 10px !important;
  font-weight: 430 !important;
}

.dashboard-briefing-right.is-loading .dashboard-briefing-weather-panel {
  opacity: .6 !important;
}

.dashboard-briefing-right.is-loading .dashboard-briefing-weather-info strong {
  display: none !important;
}

.dashboard-briefing-right.is-loading .dashboard-briefing-weather-info p {
  color: var(--ink2) !important;
  font-size: 15px !important;
  max-width: 160px !important;
}

.dashboard-briefing-card .dashboard-weather-visual {
  align-self: start !important;
  height: clamp(120px, 10vw, 180px) !important;
  justify-self: end !important;
  margin: -8px -2px 0 0 !important;
  opacity: .94 !important;
  position: relative !important;
  transform: none !important;
  width: clamp(150px, 13vw, 230px) !important;
  z-index: 1 !important;
}

/* Metrics: vertical column inside frosted weather panel */
.dashboard-briefing-weather-metrics {
  align-items: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  justify-content: center !important;
  min-width: 54px !important;
  position: relative !important;
  z-index: 2 !important;
}

.dashboard-briefing-weather-metrics span {
  font-size: 10px !important;
}

.dashboard-briefing-weather-metrics strong {
  font-size: 10px !important;
  font-weight: 560 !important;
}

.dashboard-briefing-right.is-loading .dashboard-briefing-weather-metrics {
  display: none !important;
}

/* Forecast slot: takes remaining width right of weather panel */
[data-dashboard-forecast-slot] {
  align-self: stretch !important;
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.dashboard-forecast-strip {
  align-self: center !important;
  justify-self: stretch !important;
  margin-left: 0 !important;
  max-width: none !important;
  width: 100% !important;
  border-radius: 16px !important;
  padding: 5px !important;
  position: relative !important;
  z-index: 2 !important;
}

.dashboard-forecast-item {
  gap: 2px !important;
  border-radius: 11px !important;
  padding: 4px 5px !important;
}

.dashboard-forecast-item strong {
  font-size: 11px !important;
}

.dashboard-forecast-item span {
  font-size: 17px !important;
}

.dashboard-forecast-item em {
  font-size: 13px !important;
}

.dashboard-forecast-item small {
  font-size: 10px !important;
}

.dashboard-forecast-strip.is-empty {
  max-width: 520px !important;
  text-align: left !important;
}

@media (max-width: 1180px) {
  .dashboard-briefing-card {
    grid-template-columns: minmax(180px, .75fr) minmax(240px, 1.25fr) !important;
  }

  .dashboard-briefing-right::before {
    inset: 2px 0 0 8% !important;
  }

  .dashboard-briefing-weather-main {
    grid-template-columns: minmax(100px, 150px) minmax(130px, 200px) !important;
  }

  .dashboard-briefing-card .dashboard-weather-visual {
    height: clamp(110px, 12vw, 160px) !important;
    width: clamp(130px, 14vw, 190px) !important;
  }

  .dashboard-briefing-weather-metrics {
    min-width: 70px !important;
  }
}

@media (max-width: 860px) {
  .dashboard-briefing-card {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 22px !important;
  }

  .dashboard-briefing-left,
  .dashboard-briefing-right {
    max-width: none !important;
  }

  .dashboard-briefing-left {
    gap: 5px !important;
  }

  .dashboard-briefing-left h1 {
    font-size: 24px !important;
  }

  .dashboard-briefing-time {
    font-size: clamp(58px, 17vw, 86px) !important;
    line-height: .94 !important;
  }

  .dashboard-briefing-message {
    font-size: 16px !important;
    line-height: 1.32 !important;
    margin-bottom: 8px !important;
  }

  .dashboard-briefing-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-briefing-chip {
    min-width: 0 !important;
  }

  .dashboard-briefing-chip.is-overdue {
    grid-column: 1 / -1 !important;
  }

  .dashboard-briefing-right {
    justify-content: flex-end !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .dashboard-briefing-card .dashboard-weather-visual {
    height: 108px !important;
    margin: 0 !important;
    opacity: .82 !important;
    width: 128px !important;
  }

  /* Bottom row: panel + forecast side by side, stacks on very small screens */
  .dashboard-briefing-bottom-row {
    align-items: stretch !important;
    gap: 10px !important;
  }

  .dashboard-briefing-weather-panel {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 14px !important;
  }

  .dashboard-briefing-weather-info > span {
    font-size: 12px !important;
  }

  .dashboard-briefing-weather-info strong {
    font-size: 32px !important;
  }

  .dashboard-briefing-weather-info p {
    font-size: 11px !important;
  }

  .dashboard-briefing-weather-metrics {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
    min-width: 0 !important;
  }

  .dashboard-briefing-weather-metrics span {
    display: flex !important;
    flex-direction: row !important;
    font-size: 10px !important;
    gap: 3px !important;
  }

  .dashboard-briefing-weather-metrics strong {
    font-size: 10px !important;
    font-weight: 560 !important;
  }

  [data-dashboard-forecast-slot] {
    overflow: hidden !important;
  }

  .dashboard-forecast-strip {
    box-sizing: border-box !important;
    display: flex !important;
    gap: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    padding: 5px !important;
    scrollbar-width: none !important;
    width: 100% !important;
  }

  .dashboard-forecast-strip::-webkit-scrollbar {
    display: none !important;
  }

  .dashboard-forecast-item {
    flex: 0 0 72px !important;
    min-width: 72px !important;
  }

  .dashboard-forecast-item + .dashboard-forecast-item::before {
    height: 58% !important;
    top: 21% !important;
  }
}

@media (max-width: 520px) {
  .dashboard-briefing-card {
    border-radius: 24px !important;
    gap: 8px !important;
    grid-template-columns: 1fr auto !important;
    padding: 14px !important;
  }

  .dashboard-briefing-card .dashboard-weather-visual {
    height: 64px !important;
    opacity: .78 !important;
    width: 78px !important;
  }

  .dashboard-briefing-date span {
    font-size: 11px !important;
  }

  .dashboard-briefing-left h1 {
    font-size: 17px !important;
  }

  .dashboard-briefing-time {
    font-size: clamp(38px, 12vw, 48px) !important;
  }

  .dashboard-briefing-message {
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 0 4px !important;
    max-width: none !important;
  }

  .dashboard-briefing-message::before {
    color: var(--ink2) !important;
    content: "Spokojna niedziela. Przygotuj tydzień bez pośpiechu." !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.28 !important;
  }

  .dashboard-briefing-chips {
    gap: 6px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .dashboard-briefing-chip {
    border-radius: 12px !important;
    font-size: 10px !important;
    gap: 1px !important;
    padding: 5px 4px !important;
  }

  .dashboard-briefing-chip strong {
    font-size: 15px !important;
  }

  .dashboard-briefing-chip.is-overdue {
    grid-column: auto !important;
  }

  .dashboard-briefing-right {
    gap: 6px !important;
  }

  .dashboard-briefing-right::before {
    opacity: .24 !important;
  }

  /* Compact weather panel on mobile: narrow so forecast gets space */
  .dashboard-briefing-weather-panel {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 8px 10px !important;
  }

  .dashboard-briefing-weather-info > span {
    font-size: 10px !important;
  }

  .dashboard-briefing-weather-info strong {
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: -.02em !important;
  }

  .dashboard-briefing-weather-info p {
    display: none !important;
  }

  .dashboard-briefing-weather-metrics {
    display: none !important;
  }

  .dashboard-briefing-weather-metrics strong {
    font-size: 11px !important;
  }

  [data-dashboard-forecast-slot] {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .dashboard-forecast-strip {
    border-radius: 10px !important;
    padding: 2px !important;
  }

  .dashboard-forecast-item {
    border-radius: 8px !important;
    flex-basis: 52px !important;
    gap: 0 !important;
    min-width: 52px !important;
    padding: 2px !important;
  }

  .dashboard-forecast-item strong,
  .dashboard-forecast-item small {
    font-size: 8px !important;
  }

  .dashboard-forecast-item span {
    font-size: 11px !important;
  }

  .dashboard-forecast-item em {
    font-size: 10px !important;
  }
}

/* ── Dashboard Hero: full-card drifting cloud layer (SVG paths) ───────────── */

/* Containing layer — sits over the sky gradient, under all card content */
.db-cloud-layer {
  border-radius: inherit !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 1 !important;
}

/* Solar layer — cloud A lives here, above the sun (z-index 3 > right-col z-index 2) */
.db-cloud-solar {
  border-radius: inherit !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 3 !important;
}

/* Ensure briefing content zones stay above the cloud layer */
.dashboard-briefing-left,
.dashboard-briefing-right,
.dashboard-briefing-bottom-row {
  position: relative !important;
  z-index: 2 !important;
}

/* Cloud base: hidden by default; SVG child fills the div */
.db-cloud {
  display: none !important;
  position: absolute !important;
}

.db-cloud svg {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
}

/* ── Variant A: large, slow — upper right, near the sun ─ */
.db-cloud--a {
  animation: db-drift-a 30s ease-in-out infinite !important;
  height: 66px !important;
  right: 5% !important;
  top: 8% !important;
  width: 220px !important;
}

/* ── Variant B: medium, faster — upper center-left ────── */
.db-cloud--b {
  animation: db-drift-b 19s ease-in-out infinite !important;
  height: 48px !important;
  left: 20% !important;
  top: 14% !important;
  width: 144px !important;
}

/* ── Variant C: small — mid-card, only heavy conditions ─ */
.db-cloud--c {
  animation: db-drift-c 42s ease-in-out infinite !important;
  height: 36px !important;
  left: 38% !important;
  top: 42% !important;
  width: 100px !important;
}

/* ── Drift keyframes ────────────────────────────── */
@keyframes db-drift-a {
  0%, 100% { transform: translateX(0px); }
  50%       { transform: translateX(44px); }
}
@keyframes db-drift-b {
  0%, 100% { transform: translateX(0px); }
  50%       { transform: translateX(-26px); }
}
@keyframes db-drift-c {
  0%, 100% { transform: translateX(0px); }
  50%       { transform: translateX(22px); }
}

/* ── Show clouds per weather condition ─────────── */

/* Partly cloudy: one light cloud (A only, near sun) */
.dashboard-weather-partly .db-cloud--a {
  color: rgba(255, 255, 255, .82) !important;
  display: block !important;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .10)) !important;
}

/* Overcast: A + B, heavier white */
.dashboard-weather-cloudy .db-cloud--a,
.dashboard-weather-cloudy .db-cloud--b {
  display: block !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .10)) !important;
}
.dashboard-weather-cloudy .db-cloud--a { color: rgba(255, 255, 255, .90) !important; }
.dashboard-weather-cloudy .db-cloud--b { color: rgba(255, 255, 255, .76) !important; }

/* Fog: A + B, very diffuse / blurred */
.dashboard-weather-fog .db-cloud--a,
.dashboard-weather-fog .db-cloud--b {
  color: rgba(255, 255, 255, .38) !important;
  display: block !important;
  filter: blur(4px) !important;
}

/* Rain: all three, grey */
.dashboard-weather-rain .db-cloud--a,
.dashboard-weather-rain .db-cloud--b,
.dashboard-weather-rain .db-cloud--c {
  display: block !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .20)) !important;
}
.dashboard-weather-rain .db-cloud--a { color: rgba(100, 115, 135, .72) !important; }
.dashboard-weather-rain .db-cloud--b { color: rgba(88,  104, 122, .62) !important; }
.dashboard-weather-rain .db-cloud--c { color: rgba(76,   92, 110, .48) !important; }

/* Storm: all three, dark / near-black */
.dashboard-weather-storm .db-cloud--a,
.dashboard-weather-storm .db-cloud--b,
.dashboard-weather-storm .db-cloud--c {
  display: block !important;
  filter: drop-shadow(0 5px 18px rgba(0, 0, 0, .32)) !important;
}
.dashboard-weather-storm .db-cloud--a { color: rgba(50, 60, 78, .84) !important; }
.dashboard-weather-storm .db-cloud--b { color: rgba(42, 52, 68, .72) !important; }
.dashboard-weather-storm .db-cloud--c { color: rgba(36, 46, 62, .58) !important; }

/* Night: A + B, dark translucent */
.dashboard-weather-night .db-cloud--a,
.dashboard-weather-night .db-cloud--b {
  display: block !important;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .26)) !important;
}
.dashboard-weather-night .db-cloud--a { color: rgba(28, 36, 60, .56) !important; }
.dashboard-weather-night .db-cloud--b { color: rgba(24, 32, 52, .40) !important; }

/* Snow: A + B + C, pale blue-white */
.dashboard-weather-snow .db-cloud--a,
.dashboard-weather-snow .db-cloud--b,
.dashboard-weather-snow .db-cloud--c {
  display: block !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .10)) !important;
}
.dashboard-weather-snow .db-cloud--a { color: rgba(228, 237, 255, .86) !important; }
.dashboard-weather-snow .db-cloud--b { color: rgba(218, 228, 250, .72) !important; }
.dashboard-weather-snow .db-cloud--c { color: rgba(208, 220, 244, .56) !important; }

/* Hide old small weather-visual cloud pills (replaced by full-card layer) */
.dashboard-briefing-card .dashboard-weather-cloud {
  display: none !important;
}

/* Pause drift for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .db-cloud--a,
  .db-cloud--b,
  .db-cloud--c {
    animation: none !important;
  }
}

/* Desktop: enlarge the main cloud (A) next to the sun */
@media (min-width: 860px) {
  .db-cloud--a {
    height: 82px !important;
    width: 282px !important;
  }
}

/* Mobile: shrink clouds so they don't crowd the compact card */
@media (max-width: 520px) {
  .db-cloud--a {
    height: 40px !important;
    right: 2% !important;
    top: 6% !important;
    width: 134px !important;
  }

  .db-cloud--b {
    height: 28px !important;
    left: 16% !important;
    top: 12% !important;
    width: 90px !important;
  }

  .db-cloud--c {
    height: 22px !important;
    width: 66px !important;
  }
}

/* ── Hero card: GPU layer for smooth anti-aliased border-radius ─────────── */
/* Sub-pixel box-shadow rings removed — they caused jagged corner rendering. */
/* transform: translateZ(0) forces a compositor layer which anti-aliases the */
/* rounded corners properly on all devices.                                  */
.dashboard-briefing-card {
  transform: translateZ(0) !important;
}

/* ── Hero card: smart text — dark on light sky, off-white on dark sky ──────── */

/* Default: graphite — works on clear, partly, cloudy, fog, snow */
.dashboard-briefing-card .dashboard-briefing-left h1,
.dashboard-briefing-card .dashboard-briefing-time {
  color: rgba(17, 24, 56, .82) !important;
}

.dashboard-briefing-card .dashboard-briefing-date span {
  color: rgba(17, 24, 56, .50) !important;
}

/* Off-white for dark sky conditions: rain, storm, night */
.dashboard-weather-rain.dashboard-briefing-card .dashboard-briefing-left h1,
.dashboard-weather-rain.dashboard-briefing-card .dashboard-briefing-time,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-left h1,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-time,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-left h1,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-time {
  color: rgba(248, 250, 252, .92) !important;
}

.dashboard-weather-rain.dashboard-briefing-card .dashboard-briefing-date span,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-date span,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-date span {
  color: rgba(248, 250, 252, .62) !important;
}

/* Dark mode always needs off-white (already handled above, reinforce) */
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-left h1,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-time {
  color: rgba(248, 250, 252, .92) !important;
}

html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-date span {
  color: rgba(248, 250, 252, .60) !important;
}

/* ── Hero sun: toned down — less saturated, less neon ───────────────────────── */
.dashboard-briefing-card .dashboard-weather-sun {
  filter: saturate(.65) brightness(1.08) !important;
  opacity: .88 !important;
}


/* ── Module Briefs: mockup paste zone ───────────────────────────────────────── */
.module-brief-mockup-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 88px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: var(--surface2);
  padding: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  outline: none;
}
.module-brief-mockup-zone:focus,
.module-brief-mockup-zone:focus-within {
  border-color: var(--accent);
  background: var(--accent-lt);
}
.module-brief-mockup-zone.has-image {
  min-height: unset;
  border: none;
  padding: 0;
  background: transparent;
  cursor: default;
  gap: 6px;
  align-items: flex-start;
}
.module-brief-mockup-zone.has-image:focus,
.module-brief-mockup-zone.has-image:focus-within {
  border: none;
  background: transparent;
}
.module-brief-mockup-zone .module-brief-mockup-open {
  width: 100%;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface2);
}
.module-brief-mockup-hint {
  font-size: 12px;
  color: var(--ink2);
  text-align: center;
  line-height: 1.4;
}
.module-brief-mockup-img {
  width: 100%;
  max-height: 280px;
  border-radius: 0;
  display: block;
  object-fit: contain;
  background: var(--surface2);
}
.module-brief-mockup-clear {
  margin-top: 0;
  font-size: 11px;
  align-self: flex-start;
}
.module-brief-mockup-pick {
  cursor: pointer;
}

/* Detail panel mockup thumbnail */
.module-brief-detail-mockup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.module-brief-mockup-open.module-brief-mockup-thumb-wrap {
  width: 100%;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  max-height: 220px;
}
.module-brief-mockup-thumb {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 0;
  border: none;
}

/* ── Module Briefs: lightbox image viewer ───────────────────────────────────── */
.module-brief-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.module-brief-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .86);
  cursor: zoom-out;
}
.module-brief-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.module-brief-lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, .6);
  display: block;
}
.module-brief-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(30, 30, 40, .92);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.module-brief-lightbox-close:hover {
  background: rgba(60, 60, 80, .98);
}
.module-brief-mockup-open {
  background: none;
  border: none;
  padding: 0;
  cursor: zoom-in;
  display: block;
}
.module-brief-mockup-open:hover .module-brief-mockup-thumb,
.module-brief-mockup-open:hover .module-brief-mockup-img {
  opacity: .85;
}

/* ── Dashboard Hero Phase 2: neutral card, weather bg scoped to right zone ── */

/* Card: always neutral surface, no full-card sky gradient */
.dashboard-briefing-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

/* Right zone: weather sky gradient as a soft ::before layer */
.dashboard-briefing-right::before {
  background: var(--dashboard-weather-bg, transparent) !important;
  border-radius: 22px !important;
  content: '' !important;
  display: block !important;
  inset: -32px -40px !important;
  opacity: .20 !important;
  pointer-events: none !important;
  position: absolute !important;
  transition: background .65s ease, opacity .4s ease !important;
  z-index: 0 !important;
}

/* No weather bg when toggled off */
.dashboard-briefing-card.weather-bg-off .dashboard-briefing-right::before {
  opacity: 0 !important;
}

/* Right zone: flex column with weather-main area + toggle button */
.dashboard-briefing-right {
  align-items: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  justify-content: center !important;
}

/* Inner row: weather info + visual side by side */
.dashboard-briefing-weather-main {
  align-items: center !important;
  display: flex !important;
  flex: 1 !important;
  gap: clamp(14px, 2vw, 28px) !important;
  grid-template-columns: unset !important;
  justify-content: flex-end !important;
  min-height: 0 !important;
}

/* Weather info column */
.dashboard-briefing-weather-info {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

/* Location row: city name + edit/GPS buttons */
.dashboard-weather-location-row {
  align-items: center !important;
  display: flex !important;
  gap: 6px !important;
  justify-content: space-between !important;
}

.dashboard-weather-location-row > span {
  color: var(--ink2) !important;
  font-size: 12px !important;
  font-weight: 540 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.dashboard-weather-city-actions {
  display: flex !important;
  flex-shrink: 0 !important;
  gap: 4px !important;
}

.dashboard-weather-city-actions button {
  align-items: center !important;
  background: color-mix(in srgb, var(--surface2) 80%, transparent) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--ink2) !important;
  cursor: pointer !important;
  display: flex !important;
  height: 22px !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 22px !important;
}

.dashboard-weather-city-actions button:hover {
  color: var(--ink) !important;
}

/* Temperature: large display */
.dashboard-briefing-weather-info > strong[data-dashboard-weather-temp] {
  color: var(--ink) !important;
  font-size: clamp(42px, 4vw, 62px) !important;
  font-weight: 240 !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
}

/* Condition text */
.dashboard-briefing-weather-info > p[data-dashboard-weather-summary] {
  color: var(--ink2) !important;
  font-size: 12px !important;
  font-weight: 480 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* Glass weather-bg toggle button — top-right of hero */
.dashboard-hero-bg-toggle {
  align-items: center !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  background: color-mix(in srgb, var(--surface) 64%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent) !important;
  border-radius: 10px !important;
  color: var(--ink2) !important;
  cursor: pointer !important;
  display: flex !important;
  height: 32px !important;
  justify-content: center !important;
  padding: 0 !important;
  position: absolute !important;
  right: 14px !important;
  top: 14px !important;
  transition: background .15s, color .15s !important;
  width: 32px !important;
  z-index: 10 !important;
}

.dashboard-hero-bg-toggle:hover {
  background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
  color: var(--ink) !important;
}

/* Forecast toggle button at bottom of right zone */
.dashboard-forecast-toggle-btn {
  align-items: center !important;
  background: none !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  color: var(--ink2) !important;
  cursor: pointer !important;
  display: flex !important;
  font-size: 11px !important;
  font-weight: 560 !important;
  gap: 5px !important;
  justify-content: center !important;
  padding: 8px 0 0 !important;
  position: relative !important;
  width: 100% !important;
  z-index: 2 !important;
}

.dashboard-forecast-toggle-btn:hover {
  color: var(--ink) !important;
}

/* Collapsible forecast panel: grid-template-rows animation trick */
.dashboard-forecast-panel {
  display: grid !important;
  overflow: hidden !important;
  transition: grid-template-rows .32s cubic-bezier(.22, 1, .36, 1) !important;
}

.dashboard-forecast-inner {
  min-height: 0 !important;
  overflow: hidden !important;
  padding-top: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-forecast-panel {
    transition: none !important;
  }
}

/* Stat cards: replace chips */
.dashboard-briefing-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

.dashboard-stat-card {
  align-items: flex-start !important;
  background: color-mix(in srgb, var(--surface2) 35%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  border-radius: 10px !important;
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
  padding: 5px 8px !important;
}

.dashboard-stat-icon {
  color: var(--ink2) !important;
  line-height: 1 !important;
  margin-bottom: 1px !important;
  opacity: .65 !important;
}

.dashboard-stat-card > strong {
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}

.dashboard-stat-card > span:last-child {
  color: var(--ink2) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.dashboard-stat-card.is-urgent {
  background: color-mix(in srgb, var(--danger) 5%, transparent) !important;
  border-color: color-mix(in srgb, var(--danger) 14%, var(--border)) !important;
}

.dashboard-stat-card.is-urgent > strong {
  color: color-mix(in srgb, var(--danger) 80%, var(--ink)) !important;
}

.dashboard-stat-card.is-overdue {
  background: color-mix(in srgb, #f59e0b 5%, transparent) !important;
  border-color: color-mix(in srgb, #f59e0b 14%, var(--border)) !important;
}

.dashboard-stat-card.is-overdue > strong {
  color: color-mix(in srgb, #d97706 70%, var(--ink)) !important;
}

/* Neutralize left-zone smart-text: left zone is always on neutral card now */
.dashboard-weather-rain.dashboard-briefing-card .dashboard-briefing-left h1,
.dashboard-weather-rain.dashboard-briefing-card .dashboard-briefing-time,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-left h1,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-time,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-left h1,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-time {
  color: var(--ink) !important;
}

.dashboard-weather-rain.dashboard-briefing-card .dashboard-briefing-date span,
.dashboard-weather-storm.dashboard-briefing-card .dashboard-briefing-date span,
.dashboard-weather-night.dashboard-briefing-card .dashboard-briefing-date span {
  color: var(--ink2) !important;
}

html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-left h1,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-time {
  color: var(--ink) !important;
}

html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-date span {
  color: var(--ink2) !important;
}

/* Mobile: stack right zone below left on small screens */
@media (max-width: 860px) {
  .dashboard-briefing-right {
    flex-direction: row !important;
    gap: 12px !important;
  }

  .dashboard-briefing-weather-main {
    flex: 1 !important;
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: flex-start !important;
  }

  .dashboard-forecast-toggle-btn {
    align-self: flex-end !important;
    border-left: 1px solid var(--border) !important;
    border-top: none !important;
    flex-direction: column !important;
    font-size: 10px !important;
    padding: 0 0 0 10px !important;
    width: auto !important;
  }
}

@media (max-width: 520px) {
  .dashboard-briefing-right {
    flex-direction: row !important;
    gap: 8px !important;
  }

  .dashboard-briefing-weather-main {
    align-items: flex-start !important;
    flex-direction: row !important;
    flex: 1 !important;
    gap: 8px !important;
  }

  .dashboard-briefing-weather-info > strong[data-dashboard-weather-temp] {
    font-size: 28px !important;
  }

  .dashboard-briefing-stats {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  .dashboard-stat-card {
    min-width: 0 !important;
    padding: 6px 8px !important;
  }

  .dashboard-stat-card > strong {
    font-size: 16px !important;
  }

  .dashboard-stat-card > span:last-child {
    font-size: 10px !important;
  }
}

/* ── Planner calendar: overflow "+N więcej" pill ────────────────────────── */

.planner-warm-day-overflow {
  appearance: none;
  background: color-mix(in srgb, var(--accent-lt, var(--surface2)) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--border)) 28%, var(--border));
  border-radius: 8px;
  color: var(--accent, var(--ink2));
  cursor: pointer;
  display: block;
  font-size: 11px;
  font-weight: 640;
  margin-top: 4px;
  padding: 5px 8px;
  text-align: center;
  width: 100%;
}

.planner-warm-day-overflow:hover {
  background: color-mix(in srgb, var(--accent-lt, var(--surface2)) 100%, transparent);
}

.planner-warm-day-overflow.is-collapse {
  background: transparent;
  border-color: var(--border);
  color: var(--ink2);
  font-size: 10px;
}

.planner-warm-day-overflow.is-collapse:hover {
  color: var(--ink);
}

html[data-theme='layf-core'] .planner-warm-day-overflow {
  background: var(--layf-accent-soft-bg, color-mix(in srgb, var(--accent-lt) 80%, transparent));
  border-color: var(--layf-accent-border, color-mix(in srgb, var(--accent) 28%, var(--border)));
  color: var(--layf-accent-text, var(--ink));
}

html[data-theme='layf-core'] .planner-warm-day-overflow:hover {
  background: var(--layf-accent-soft-bg-hover, var(--accent-lt));
}

/* ── Dashboard Hero: polish pass ────────────────────────────────────────────── */

/* Hero-section wrapper: zero gap between hero card and forecast panel */
.dashboard-hero-section {
  display: flex !important;
  flex-direction: column !important;
}

/* Hero: tighter vertical padding, add radius-morph transition */
.dashboard-briefing-card {
  min-height: clamp(118px, 8vw, 158px) !important;
  padding: clamp(14px, 1.3vw, 20px) clamp(20px, 2.2vw, 30px) !important;
  transition:
    border-bottom-left-radius .32s cubic-bezier(.22, 1, .36, 1),
    border-bottom-right-radius .32s cubic-bezier(.22, 1, .36, 1),
    background .65s ease !important;
}

/* Hero: flatten bottom corners when forecast is open */
.dashboard-briefing-card.forecast-open {
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

/* Forecast panel: attached glass sheet — no gap, continues hero surface */
.dashboard-forecast-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 28px 28px !important;
  transition: grid-template-rows .32s cubic-bezier(.22, 1, .36, 1) !important;
}

/* Inner: fade + slide-up reveal */
.dashboard-forecast-inner {
  opacity: 0 !important;
  padding: 0 clamp(20px, 2.2vw, 30px) !important;
  transform: translateY(-10px) !important;
  transition:
    opacity .26s cubic-bezier(.22, 1, .36, 1),
    transform .32s cubic-bezier(.22, 1, .36, 1) !important;
}

.dashboard-forecast-panel[aria-hidden='false'] .dashboard-forecast-inner {
  opacity: 1 !important;
  padding-bottom: 16px !important;
  padding-top: 12px !important;
  transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-briefing-card {
    transition: background .65s ease !important;
  }
  .dashboard-forecast-inner {
    transform: none !important;
    transition: opacity .15s ease !important;
  }
  .dashboard-forecast-panel[aria-hidden='false'] .dashboard-forecast-inner {
    transform: none !important;
  }
}

/* Sun: reduced size, glow and opacity */
.dashboard-briefing-card .dashboard-weather-visual {
  height: clamp(66px, 5.5vw, 98px) !important;
  opacity: .74 !important;
  width: clamp(82px, 7.5vw, 130px) !important;
}

.dashboard-briefing-card .dashboard-weather-sun {
  filter: saturate(.40) brightness(.85) !important;
  height: 56px !important;
  opacity: .62 !important;
  width: 56px !important;
}

/* Unified glass control family: bg-toggle + forecast-toggle */
.dashboard-hero-bg-toggle,
.dashboard-forecast-toggle-btn {
  align-items: center !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  background: color-mix(in srgb, var(--surface) 62%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent) !important;
  border-radius: 10px !important;
  color: var(--ink2) !important;
  cursor: pointer !important;
  display: flex !important;
  font-size: 11px !important;
  font-weight: 560 !important;
  gap: 5px !important;
  height: 30px !important;
  justify-content: center !important;
  padding: 0 9px !important;
  transition: background .15s ease, color .15s ease !important;
}

.dashboard-hero-bg-toggle:hover,
.dashboard-forecast-toggle-btn:hover {
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  color: var(--ink) !important;
}

/* bg-toggle: icon-only, absolute top-right */
.dashboard-hero-bg-toggle {
  height: 30px !important;
  padding: 0 !important;
  position: absolute !important;
  right: 14px !important;
  top: 14px !important;
  width: 30px !important;
  z-index: 10 !important;
}

/* forecast-toggle: compact pill, bottom of right zone */
.dashboard-forecast-toggle-btn {
  align-self: flex-end !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent) !important;
  margin-top: 0 !important;
  width: auto !important;
}

/* Weather meta row */
.dashboard-weather-meta {
  align-items: baseline !important;
  color: var(--ink2) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  font-size: 11px !important;
  font-weight: 460 !important;
  gap: 3px 5px !important;
  line-height: 1 !important;
  margin-top: 3px !important;
  opacity: .72 !important;
}

.dashboard-weather-meta strong {
  font-size: 11px !important;
  font-weight: 620 !important;
}

.dashboard-weather-meta [aria-hidden='true'] {
  opacity: .45 !important;
}

/* Stat cards: lighter, more compact */
.dashboard-stat-card {
  padding: 6px 9px !important;
}

.dashboard-stat-card.is-urgent {
  background: color-mix(in srgb, var(--danger) 5%, transparent) !important;
  border-color: color-mix(in srgb, var(--danger) 14%, var(--border)) !important;
}

.dashboard-stat-card.is-urgent > strong {
  color: color-mix(in srgb, var(--danger) 80%, var(--ink)) !important;
}

.dashboard-stat-card.is-overdue {
  background: color-mix(in srgb, #f59e0b 5%, transparent) !important;
  border-color: color-mix(in srgb, #f59e0b 14%, var(--border)) !important;
}

.dashboard-stat-card.is-overdue > strong {
  color: color-mix(in srgb, #d97706 70%, var(--ink)) !important;
}

.dashboard-stat-card.is-events {
  background: color-mix(in srgb, var(--layf-accent-lavender, #c084fc) 5%, transparent) !important;
  border-color: color-mix(in srgb, var(--layf-accent-lavender, #c084fc) 14%, var(--border)) !important;
}

.dashboard-stat-card.is-events > strong {
  color: color-mix(in srgb, var(--layf-accent-violet, #7c3aed) 70%, var(--ink)) !important;
}

/* Right zone: tighter gap */
.dashboard-briefing-right {
  gap: 8px !important;
}

/* Mobile: keep forecast readable when stacked */
@media (max-width: 860px) {
  .dashboard-forecast-panel {
    border-radius: 0 0 20px 20px !important;
  }

  .dashboard-forecast-inner {
    padding: 0 18px !important;
  }

  .dashboard-forecast-panel[aria-hidden='false'] .dashboard-forecast-inner {
    padding-bottom: 14px !important;
    padding-top: 10px !important;
  }

  .dashboard-forecast-toggle-btn {
    align-self: center !important;
    width: auto !important;
  }
}

@media (max-width: 520px) {
  .dashboard-forecast-inner {
    padding: 0 12px !important;
  }

  .dashboard-forecast-panel[aria-hidden='false'] .dashboard-forecast-inner {
    padding-bottom: 10px !important;
    padding-top: 8px !important;
  }
}

/* ── Dashboard Hero: single-column stacking fix ──────────────────────────── */
/* Root cause: minmax(360px,…) minmax(520px,…) requires ≥908px; anything     */
/* narrower overflows and the right zone covers the left zone content.         */
/* Fix: at ≤960px collapse to a single grid column (left above right).        */

@media (max-width: 960px) {
  .dashboard-briefing-card {
    gap: 14px !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 18px clamp(18px, 4vw, 28px) clamp(16px, 2vw, 24px) !important;
  }

  /* Left zone: full width, remove desktop max-width cap */
  .dashboard-briefing-left {
    gap: 8px !important;
    max-width: none !important;
  }

  /* Clock: scale down for narrower width */
  .dashboard-briefing-time {
    font-size: clamp(44px, 8vw, 68px) !important;
  }

  /* Right zone: full width, vertical stack */
  .dashboard-briefing-right {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: auto !important;
    justify-content: flex-start !important;
  }

  /* Weather main: info and visual side by side within right zone */
  .dashboard-briefing-weather-main {
    align-items: center !important;
    flex: 0 1 auto !important;
    flex-direction: row !important;
    gap: 14px !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
  }

  /* Weather visual: smaller, fixed size */
  .dashboard-briefing-card .dashboard-weather-visual {
    flex-shrink: 0 !important;
    height: 44px !important;
    width: 44px !important;
  }

  /* Temperature: smaller */
  .dashboard-briefing-weather-info > strong[data-dashboard-weather-temp] {
    font-size: clamp(30px, 5vw, 46px) !important;
  }

  /* Forecast toggle: compact pill, aligned right, no side border from 860px rule */
  .dashboard-forecast-toggle-btn {
    align-self: flex-end !important;
    border-left: none !important;
    border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent) !important;
    flex-direction: row !important;
    font-size: 11px !important;
    gap: 5px !important;
    padding: 6px 9px !important;
    width: auto !important;
  }

  /* Weather bg: constrain to right zone — prevent bleed into left zone above */
  .dashboard-briefing-right::before {
    inset: -12px -20px !important;
    opacity: .13 !important;
  }
}

/* Mobile: tighter padding and smaller type */
@media (max-width: 520px) {
  .dashboard-briefing-card {
    gap: 10px !important;
    padding: 14px 16px !important;
  }

  .dashboard-briefing-left {
    gap: 6px !important;
  }

  .dashboard-briefing-time {
    font-size: clamp(36px, 10vw, 52px) !important;
  }

  .dashboard-briefing-card .dashboard-weather-visual {
    height: 40px !important;
    width: 40px !important;
  }

  .dashboard-briefing-weather-info > strong[data-dashboard-weather-temp] {
    font-size: 28px !important;
  }

  .dashboard-briefing-stats {
    gap: 5px !important;
  }

  .dashboard-stat-card {
    min-width: 0 !important;
    padding: 5px 7px !important;
  }

  .dashboard-stat-card > strong {
    font-size: 15px !important;
  }

  .dashboard-stat-card > span:last-child {
    font-size: 9px !important;
  }
}

/* ── Dashboard Hero: visual design v2 ────────────────────────────────────── */

/* Left zone: flex column so stat cards can fill remaining space */
.dashboard-briefing-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Stat cards: 3-col grid, pushed to bottom via margin-top: auto */
.dashboard-briefing-stats {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: repeat(3, 1fr) !important;
  margin-top: auto !important;
}

/* Stat card: flex column, tall enough to breathe */
.dashboard-stat-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 14px 14px !important;
}

/* Stat number: large */
.dashboard-stat-card > strong {
  font-size: clamp(24px, 2.4vw, 34px) !important;
  font-weight: 740 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  margin-top: auto !important;
}

/* Main label line */
.dashboard-stat-card > .dashboard-stat-text {
  color: var(--ink) !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  line-height: 1.25 !important;
  margin-top: 4px !important;
}

/* Sub label line (e.g. "dziś", "zadań") */
.dashboard-stat-card > .dashboard-stat-sub {
  color: var(--ink2) !important;
  font-size: 11px !important;
  font-weight: 440 !important;
  line-height: 1.2 !important;
}

/* SVG weather illustration container — small app-icon size */
.dashboard-weather-icon-display {
  align-items: center !important;
  display: flex !important;
  flex-shrink: 0 !important;
  height: 52px !important;
  justify-content: center !important;
  width: 52px !important;
}

.dashboard-weather-icon-display svg {
  height: 100% !important;
  overflow: visible !important;
  width: 100% !important;
}

/* Weather bg right zone: more visible (was 0.13–0.20, now stronger) */
.dashboard-briefing-right::before {
  opacity: .40 !important;
}

/* City name: slightly larger label above temp */
.dashboard-weather-location-row > span {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* City action buttons: hidden, fade in on hover/focus */
.dashboard-weather-city-actions {
  opacity: 0 !important;
  transition: opacity .18s ease !important;
}

.dashboard-weather-location-row:hover .dashboard-weather-city-actions,
.dashboard-weather-location-row:focus-within .dashboard-weather-city-actions {
  opacity: 1 !important;
}

/* Meta row: flex with icon+text spans */
.dashboard-weather-meta {
  column-gap: 14px !important;
  flex-wrap: wrap !important;
  row-gap: 3px !important;
}

.dashboard-weather-meta > span {
  align-items: center !important;
  display: inline-flex !important;
  gap: 4px !important;
}

.dashboard-weather-meta > span svg {
  flex-shrink: 0 !important;
  opacity: .60 !important;
}

/* Forecast panel header: title + external link */
.dashboard-forecast-header {
  align-items: center !important;
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

.dashboard-forecast-header > span {
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 620 !important;
}

.dashboard-forecast-full-link {
  background: none !important;
  border: none !important;
  color: var(--ink2) !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  transition: color .15s ease !important;
}

.dashboard-forecast-full-link:hover {
  color: var(--ink) !important;
}

/* Responsive: compact stat cards + smaller icon on single-column layout */
@media (max-width: 960px) {
  .dashboard-briefing-stats {
    margin-top: 8px !important;
  }

  .dashboard-stat-card {
    padding: 10px 10px !important;
  }

  .dashboard-stat-card > strong {
    font-size: clamp(20px, 4.5vw, 28px) !important;
  }

  .dashboard-weather-icon-display {
    height: 44px !important;
    width: 44px !important;
  }

  /* Always show city action buttons on touch (no hover state) */
  .dashboard-weather-city-actions {
    opacity: 1 !important;
  }
}

@media (max-width: 520px) {
  .dashboard-stat-card {
    padding: 8px 8px !important;
  }

  .dashboard-stat-card > strong {
    font-size: 20px !important;
  }

  .dashboard-weather-icon-display {
    height: 58px !important;
    width: 58px !important;
  }
}

/* ── Dashboard Hero: atmospheric sky redesign ────────────────────────────── */
/* Photographic radial-glow gradients per weather condition.                  */
/* --dashboard-weather-bg: applied to full .dashboard-briefing-card           */
/* --dashboard-weather-glow: illustration drop-shadow colour per condition    */

/* Hero height: tall enough to breathe like the mockup */
.dashboard-briefing-card {
  min-height: clamp(240px, 22vw, 320px) !important;
}

/* Hide daily message text — not in the mockup */
.dashboard-briefing-message {
  display: none !important;
}

/* Illustration: small app-icon sized, subtle glow matching sky condition */
.dashboard-weather-icon-display {
  filter:
    drop-shadow(0 2px 8px var(--dashboard-weather-glow, rgba(251,146,60,.35))) !important;
  transition: filter .65s ease !important;
}

/* ── Per-condition atmospheric gradients ─────────────────────────────────── */

/* Sunny / Clear day: warm golden radial glow from upper-right */
.dashboard-weather-clear {
  --dashboard-weather-bg:
    radial-gradient(ellipse 90% 110% at 82% 18%,
      #fef08a 0%, #fbbf24 12%, #fb923c 26%,
      #fdba74 46%, #fff7ed 70%, #fef3c7 88%, transparent 100%);
  --dashboard-weather-glow: rgba(251, 146, 60, .62);
}

/* Partly cloudy: warm sun glow softened by lighter cloud tones */
.dashboard-weather-partly {
  --dashboard-weather-bg:
    radial-gradient(ellipse 80% 100% at 76% 22%,
      #fef9c3 0%, #fde68a 14%, #fcd34d 28%,
      #fed7aa 50%, #fef9f0 72%, #f0f9ff 100%);
  --dashboard-weather-glow: rgba(252, 211, 77, .55);
}

/* Cloudy: cool diffuse light, no clear sun source */
.dashboard-weather-cloudy {
  --dashboard-weather-bg:
    radial-gradient(ellipse 100% 80% at 50% 0%,
      #e2e8f0 0%, #cbd5e1 22%, #94a3b8 58%, #64748b 100%);
  --dashboard-weather-glow: rgba(148, 163, 184, .45);
}

/* Rain: steel-grey, cool, desaturated, slight blue tinge top */
.dashboard-weather-rain {
  --dashboard-weather-bg:
    radial-gradient(ellipse 100% 90% at 40% 0%,
      #bfdbfe 0%, #93c5fd 12%, #64748b 38%,
      #475569 65%, #334155 100%);
  --dashboard-weather-glow: rgba(147, 197, 253, .45);
}

/* Storm: very dark, dramatic, edge-lit blue-grey */
.dashboard-weather-storm {
  --dashboard-weather-bg:
    radial-gradient(ellipse 70% 60% at 60% 10%,
      #334155 0%, #1e293b 28%, #0f172a 62%, #020617 100%);
  --dashboard-weather-glow: rgba(148, 163, 184, .35);
}

/* Snow: bright diffuse white, cool lavender tinge */
.dashboard-weather-snow {
  --dashboard-weather-bg:
    radial-gradient(ellipse 100% 80% at 50% 0%,
      #f8fafc 0%, #e2e8f0 24%, #bfdbfe 56%, #ddd6fe 82%, #f5f3ff 100%);
  --dashboard-weather-glow: rgba(221, 214, 254, .55);
}

/* Fog: flat luminous mist, near-white */
.dashboard-weather-fog {
  --dashboard-weather-bg:
    radial-gradient(ellipse 100% 70% at 50% 30%,
      #f8fafc 0%, #e2e8f0 30%, #cbd5e1 65%, #94a3b8 100%);
  --dashboard-weather-glow: rgba(203, 213, 225, .40);
}

/* Night: deep indigo with soft violet-purple glow from moon position */
.dashboard-weather-night {
  --dashboard-weather-bg:
    radial-gradient(ellipse 60% 70% at 72% 14%,
      #312e81 0%, #1e1b4b 22%, #0f172a 50%, #020617 100%);
  --dashboard-weather-glow: rgba(167, 139, 250, .50);
}

/* Right-zone sky: stronger opacity per condition */
.dashboard-weather-clear .dashboard-briefing-right::before,
.dashboard-weather-partly .dashboard-briefing-right::before {
  opacity: .62 !important;
}

.dashboard-weather-cloudy .dashboard-briefing-right::before,
.dashboard-weather-fog .dashboard-briefing-right::before,
.dashboard-weather-snow .dashboard-briefing-right::before {
  opacity: .45 !important;
}

.dashboard-weather-rain .dashboard-briefing-right::before,
.dashboard-weather-storm .dashboard-briefing-right::before {
  opacity: .50 !important;
}

.dashboard-weather-night .dashboard-briefing-right::before {
  opacity: .42 !important;
}

/* Dark mode: deepen sky, keep glow readable */
html[data-dark='true'] .dashboard-weather-clear {
  --dashboard-weather-bg:
    radial-gradient(ellipse 80% 90% at 78% 18%,
      #92400e 0%, #b45309 15%, #d97706 32%,
      #78350f 55%, #1c1917 80%, transparent 100%);
  --dashboard-weather-glow: rgba(217, 119, 6, .55);
}

html[data-dark='true'] .dashboard-weather-partly {
  --dashboard-weather-bg:
    radial-gradient(ellipse 70% 80% at 72% 22%,
      #78350f 0%, #92400e 18%, #b45309 36%,
      #1c1917 65%, #0c0a09 100%);
  --dashboard-weather-glow: rgba(180, 83, 9, .50);
}

html[data-dark='true'] .dashboard-weather-night {
  --dashboard-weather-bg:
    radial-gradient(ellipse 55% 65% at 70% 12%,
      #4c1d95 0%, #1e1b4b 24%, #030712 55%, #000000 100%);
  --dashboard-weather-glow: rgba(167, 139, 250, .55);
}

/* Mobile: keep icon small, lighter shadow */
@media (max-width: 520px) {
  .dashboard-weather-icon-display {
    filter:
      drop-shadow(0 2px 5px var(--dashboard-weather-glow, rgba(251,146,60,.28))) !important;
    height: 40px !important;
    width: 40px !important;
  }

  /* At ≤960px the weather bg is already constrained; reset opacity override */
  .dashboard-weather-clear .dashboard-briefing-right::before,
  .dashboard-weather-partly .dashboard-briefing-right::before,
  .dashboard-weather-cloudy .dashboard-briefing-right::before,
  .dashboard-weather-fog .dashboard-briefing-right::before,
  .dashboard-weather-snow .dashboard-briefing-right::before,
  .dashboard-weather-rain .dashboard-briefing-right::before,
  .dashboard-weather-storm .dashboard-briefing-right::before,
  .dashboard-weather-night .dashboard-briefing-right::before {
    opacity: .13 !important;
  }
}

/* ── Dashboard Hero: unified panel layout (replaces two-column grid) ─────── */

/* One flex row. No grid. Both zones stretch full card height. */
.dashboard-briefing-card {
  align-items: stretch !important;
  display: flex !important;
  gap: 0 !important;
  grid-template-columns: none !important;
  justify-content: space-between !important;
  padding: clamp(24px, 2.8vw, 40px) clamp(28px, 3.5vw, 48px) !important;
}

/* Background photo — z-index 1: above ::after overlay (0), below content (2) */
/* inset: -2px bleeds under the border so no hairline gap at corners */
.dashboard-briefing-bg {
  height: calc(100% + 4px) !important;
  inset: -2px !important;
  object-fit: cover !important;
  object-position: center right !important;
  position: absolute !important;
  width: calc(100% + 4px) !important;
  z-index: 1 !important;
}

/* Both zones above photo */
.dashboard-briefing-left,
.dashboard-briefing-right {
  position: relative !important;
  z-index: 2 !important;
}

/* Left: grows, vertically stacks date/greeting/clock/stats */
.dashboard-briefing-left {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  justify-content: center !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Right: fixed width, vertically centered, forecast toggle pinned to bottom */
.dashboard-briefing-right {
  align-items: flex-start !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 180px !important;
  padding-left: clamp(16px, 2vw, 32px) !important;
  width: auto !important;
}

/* Forecast toggle pushed to bottom of right zone */
.dashboard-forecast-toggle-btn {
  margin-top: auto !important;
}

/* Kill old right-zone sky gradient pseudo-element */
.dashboard-briefing-right::before {
  content: none !important;
  display: none !important;
}

/* Stat cards: glass treatment so they work on any photo background */
.dashboard-stat-card {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

/* Forecast header: link right-aligned, no title */
.dashboard-forecast-header {
  justify-content: flex-end !important;
  margin-bottom: 6px !important;
}

/* Mobile (≤640px): flex row stays side-by-side, stats ~50% smaller */
@media (max-width: 640px) {
  .dashboard-briefing-card {
    min-height: 0 !important;
    padding: 16px 18px !important;
  }

  .dashboard-briefing-left {
    gap: 4px !important;
  }

  .dashboard-briefing-date { font-size: 11px !important; }
  .dashboard-briefing-card h1 { font-size: clamp(16px, 4vw, 22px) !important; }
  .dashboard-briefing-time { font-size: clamp(32px, 8vw, 48px) !important; }

  .dashboard-briefing-stats {
    gap: 5px !important;
    grid-template-columns: repeat(3, 1fr) !important;
    margin-top: 8px !important;
  }

  /* Stat card: icon + number on same row, label + sub below */
  .dashboard-stat-card {
    align-content: flex-start !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 2px 4px !important;
    padding: 6px 8px !important;
  }

  .dashboard-stat-card > .dashboard-stat-icon {
    flex: 0 0 auto !important;
    order: 1 !important;
  }

  .dashboard-stat-card > strong {
    flex: 0 0 auto !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    order: 2 !important;
  }

  .dashboard-stat-card > .dashboard-stat-text {
    flex: 1 1 100% !important;
    font-size: 9px !important;
    margin-top: 2px !important;
    order: 3 !important;
  }

  .dashboard-stat-card > .dashboard-stat-sub {
    flex: 1 1 100% !important;
    font-size: 8px !important;
    order: 4 !important;
  }

  .dashboard-briefing-right {
    min-width: 110px !important;
    padding-left: 12px !important;
  }

  .dashboard-weather-icon-display {
    height: 36px !important;
    width: 36px !important;
  }

  .dashboard-briefing-weather-info > strong[data-dashboard-weather-temp] {
    font-size: 22px !important;
  }

  .dashboard-weather-location-row > span { font-size: 11px !important; }
  .dashboard-weather-meta { display: none !important; }
}

@media (max-width: 380px) {
  .dashboard-briefing-right { min-width: 90px !important; }
  .dashboard-briefing-weather-main { flex-direction: column !important; gap: 4px !important; }
}

/* ── Forecast strip: icon right of temps, items centred ─────────────────── */

.dashboard-forecast-item {
  align-items: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-items: unset !important;
}

/* Temps + icon together, centred, icon stays tight to the temps */
.dashboard-forecast-body {
  align-items: center !important;
  display: inline-flex !important;
  gap: 6px !important;
  justify-content: center !important;
}

.dashboard-forecast-temps {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

/* Icon: Meteocons SVG img */
.dashboard-forecast-icon {
  display: block !important;
  flex-shrink: 0 !important;
  height: 28px !important;
  width: 28px !important;
}

/* ── Prognoza toggle: glass pill on all sizes ──────────────────────────── */
.dashboard-forecast-toggle-btn {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 20px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 11px !important;
  padding: 5px 14px !important;
  width: auto !important;
  align-self: flex-end !important;
  border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
}

.dashboard-forecast-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}

/* On light sky conditions (clear/partly/cloudy/fog/snow) darken the pill slightly */
.dashboard-weather-clear .dashboard-forecast-toggle-btn,
.dashboard-weather-partly .dashboard-forecast-toggle-btn,
.dashboard-weather-cloudy .dashboard-forecast-toggle-btn,
.dashboard-weather-fog .dashboard-forecast-toggle-btn,
.dashboard-weather-snow .dashboard-forecast-toggle-btn {
  background: rgba(17, 24, 56, 0.08) !important;
  border-color: rgba(17, 24, 56, 0.14) !important;
  color: rgba(17, 24, 56, 0.55) !important;
}

.dashboard-weather-clear .dashboard-forecast-toggle-btn:hover,
.dashboard-weather-partly .dashboard-forecast-toggle-btn:hover,
.dashboard-weather-cloudy .dashboard-forecast-toggle-btn:hover,
.dashboard-weather-fog .dashboard-forecast-toggle-btn:hover,
.dashboard-weather-snow .dashboard-forecast-toggle-btn:hover {
  background: rgba(17, 24, 56, 0.14) !important;
  color: rgba(17, 24, 56, 0.80) !important;
}

/* ── FINAL: stat chips — compact, left-aligned, ink numbers ─────────────── */
/* Overrides all earlier conflicting blocks (v2 design, responsive, glass).  */

.dashboard-briefing-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  grid-template-columns: none !important;
  justify-content: flex-start !important;
  margin-top: auto !important;
}

.dashboard-stat-card {
  align-items: flex-start !important;
  backdrop-filter: none !important;
  background: color-mix(in srgb, var(--surface2) 35%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  border-radius: 8px !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: 1px !important;
  padding: 5px 9px !important;
  width: auto !important;
}

.dashboard-stat-card > .dashboard-stat-icon {
  opacity: .55 !important;
  order: unset !important;
}

.dashboard-stat-card > strong {
  color: var(--ink) !important;
  flex: unset !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  margin-top: 0 !important;
  order: unset !important;
}

.dashboard-stat-card > .dashboard-stat-text {
  color: var(--ink2) !important;
  flex: unset !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  margin-top: 0 !important;
  order: unset !important;
}

.dashboard-stat-card > .dashboard-stat-sub {
  color: var(--ink2) !important;
  flex: unset !important;
  font-size: 8px !important;
  order: unset !important;
}

/* All chip numbers: always ink, never tinted */
.dashboard-stat-card.is-urgent > strong,
.dashboard-stat-card.is-overdue > strong,
.dashboard-stat-card.is-events > strong {
  color: var(--ink) !important;
}

/* Chip tints: just a very faint background hint */
.dashboard-stat-card.is-urgent {
  background: color-mix(in srgb, var(--danger) 6%, transparent) !important;
  border-color: color-mix(in srgb, var(--danger) 16%, var(--border)) !important;
}

.dashboard-stat-card.is-overdue {
  background: color-mix(in srgb, #f59e0b 6%, transparent) !important;
  border-color: color-mix(in srgb, #f59e0b 16%, var(--border)) !important;
}

.dashboard-stat-card.is-events {
  background: color-mix(in srgb, var(--layf-accent-lavender, #c084fc) 6%, transparent) !important;
  border-color: color-mix(in srgb, var(--layf-accent-lavender, #c084fc) 16%, var(--border)) !important;
}

/* Mobile: same compact size, stay in a row */
@media (max-width: 640px) {
  .dashboard-briefing-stats {
    gap: 5px !important;
  }

  .dashboard-stat-card {
    padding: 4px 7px !important;
  }

  .dashboard-stat-card > strong {
    font-size: 12px !important;
  }
}

/* Right-align weather block within its grid column */
.dashboard-briefing-right {
  justify-items: end !important;
}

.dashboard-briefing-weather-main {
  width: fit-content !important;
}

/* Force weather block to right edge via auto margin */
.dashboard-briefing-weather-main {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  width: auto !important;
}

/* Card: flex row so right side naturally hugs the right edge */
.dashboard-briefing-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

.dashboard-briefing-left {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.dashboard-briefing-right {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  height: auto !important;
}

.dashboard-briefing-weather-main {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  width: auto !important;
}

/* Stack weather metrics vertically so block stays narrow */
.dashboard-weather-meta {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
}

/* Forecast panel: extend hero sky background from bottom */
.dashboard-forecast-panel {
  background-image: var(--dashboard-weather-bg) !important;
  background-size: cover !important;
  background-position: bottom center !important;
  background-color: transparent !important;
}

.dashboard-forecast-panel .dashboard-forecast-inner {
  background: color-mix(in srgb, var(--surface) 55%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 0 0 24px 24px !important;
}

/* Forecast panel: extend hero sky photo from bottom, seamless edges */
.dashboard-briefing-card.forecast-open {
  border-radius: 30px 30px 0 0 !important;
  border-bottom-color: transparent !important;
}

.dashboard-forecast-panel {
  background-image: var(--forecast-bg-url, none) !important;
  background-size: cover !important;
  background-position: bottom center !important;
  background-color: var(--surface) !important;
  border-radius: 0 0 30px 30px !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
}

.dashboard-forecast-inner {
  background: color-mix(in srgb, var(--surface) 52%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Remove frosted glass from forecast inner — sky shows clean */
.dashboard-forecast-inner {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Remove frosted glass from forecast strip — sky shows clean through */
.dashboard-forecast-strip {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
}

/* Kill surface color overlay on forecast panel — photo only */
.dashboard-forecast-panel {
  background-color: transparent !important;
}

/* Hero section: photo spans both hero card and forecast panel */
.dashboard-hero-section {
  background-size: cover !important;
  background-position: center !important;
  border-radius: 30px !important;
  overflow: hidden !important;
}

.dashboard-briefing-card {
  background-color: transparent !important;
  background-image: none !important;
}

.dashboard-forecast-panel {
  background-image: none !important;
  background-color: transparent !important;
}

/* Remove border framing the forecast panel */
.dashboard-forecast-panel {
  border: none !important;
}

/* Kill frost on forecast inner — matched specificity */
.dashboard-forecast-panel .dashboard-forecast-inner {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dashboard-forecast-strip {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Continuous sky: photo anchored to top so hero flows into forecast */
.dashboard-hero-section {
  background-position: top center !important;
}

/* Hide per-card bg img — section background-image does the work for both */
.dashboard-briefing-bg {
  display: none !important;
}

/* No gap between hero and forecast — remove card bottom border when open */
.dashboard-hero-section {
  gap: 0 !important;
}

.dashboard-briefing-card.forecast-open {
  border-bottom: none !important;
  border-radius: 30px 30px 0 0 !important;
}

.dashboard-forecast-panel[aria-hidden='false'] {
  border-top: none !important;
}

/* Forecast strip: fix separators, heights and today centering on sky bg */
.dashboard-forecast-strip {
  align-items: stretch !important;
}

.dashboard-forecast-item {
  align-items: center !important;
  align-self: stretch !important;
  justify-items: center !important;
}

.dashboard-forecast-item + .dashboard-forecast-item::before {
  background: rgba(255, 255, 255, 0.28) !important;
}

.dashboard-forecast-item.is-today {
  align-self: stretch !important;
  align-items: center !important;
  justify-items: center !important;
}

/* ── Hero text: weather-condition contrast — explicit values, high specificity  */
/* Compound selector (.card.condition) = (0,3,0,x) beats any (0,2,0,x) rule.  */
/* Both light-mode and html[data-dark] variants included to kill dark-mode ink. */

/* ·· BRIGHT SKY (clear/partly/cloudy/fog/snow) → dark graphite text ·········· */
.dashboard-briefing-card.dashboard-weather-clear .dashboard-briefing-left h1,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-briefing-left h1,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-briefing-left h1,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-briefing-left h1,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-briefing-left h1,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-briefing-time,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-briefing-time,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-briefing-time,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-briefing-time,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-briefing-time,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-briefing-chip strong,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-briefing-chip strong,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-briefing-chip strong,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-briefing-chip strong,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-briefing-chip strong,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-briefing-weather-info strong,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-briefing-weather-info strong,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-briefing-weather-info strong,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-briefing-weather-info strong,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-briefing-weather-info strong,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-weather-meta strong,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-weather-meta strong,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-weather-meta strong,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-weather-meta strong,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-weather-meta strong,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-stat-text,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-stat-text,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-stat-text,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-stat-text,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-stat-text,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-clear .dashboard-briefing-left h1,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-partly .dashboard-briefing-left h1,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-cloudy .dashboard-briefing-left h1,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-fog .dashboard-briefing-left h1,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-snow .dashboard-briefing-left h1,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-clear .dashboard-briefing-time,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-partly .dashboard-briefing-time,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-cloudy .dashboard-briefing-time,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-fog .dashboard-briefing-time,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-snow .dashboard-briefing-time,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-clear .dashboard-briefing-weather-info strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-partly .dashboard-briefing-weather-info strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-cloudy .dashboard-briefing-weather-info strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-fog .dashboard-briefing-weather-info strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-snow .dashboard-briefing-weather-info strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-clear .dashboard-weather-meta strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-partly .dashboard-weather-meta strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-cloudy .dashboard-weather-meta strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-fog .dashboard-weather-meta strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-snow .dashboard-weather-meta strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-clear .dashboard-stat-text,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-partly .dashboard-stat-text,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-cloudy .dashboard-stat-text,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-fog .dashboard-stat-text,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-snow .dashboard-stat-text {
  color: #1e293b !important;
}

.dashboard-briefing-card.dashboard-weather-clear .dashboard-briefing-date span,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-briefing-date span,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-briefing-date span,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-briefing-date span,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-briefing-date span,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-briefing-message,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-briefing-message,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-briefing-message,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-briefing-message,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-briefing-message,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-briefing-chip,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-briefing-chip,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-briefing-chip,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-briefing-chip,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-briefing-chip,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-weather-location-row span,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-weather-location-row span,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-weather-location-row span,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-weather-location-row span,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-weather-location-row span,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-briefing-weather-info p,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-briefing-weather-info p,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-briefing-weather-info p,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-briefing-weather-info p,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-briefing-weather-info p,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-weather-meta span,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-weather-meta span,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-weather-meta span,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-weather-meta span,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-weather-meta span,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-forecast-item small,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-forecast-item small,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-forecast-item small,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-forecast-item small,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-forecast-item small,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-stat-sub,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-stat-sub,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-stat-sub,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-stat-sub,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-stat-sub,
.dashboard-briefing-card.dashboard-weather-clear .dashboard-forecast-full-link,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-forecast-full-link,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-forecast-full-link,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-forecast-full-link,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-forecast-full-link,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-clear .dashboard-briefing-date span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-partly .dashboard-briefing-date span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-cloudy .dashboard-briefing-date span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-fog .dashboard-briefing-date span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-snow .dashboard-briefing-date span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-clear .dashboard-briefing-message,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-partly .dashboard-briefing-message,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-cloudy .dashboard-briefing-message,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-fog .dashboard-briefing-message,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-snow .dashboard-briefing-message,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-clear .dashboard-briefing-chip,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-partly .dashboard-briefing-chip,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-cloudy .dashboard-briefing-chip,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-fog .dashboard-briefing-chip,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-snow .dashboard-briefing-chip,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-clear .dashboard-weather-location-row span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-partly .dashboard-weather-location-row span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-cloudy .dashboard-weather-location-row span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-fog .dashboard-weather-location-row span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-snow .dashboard-weather-location-row span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-clear .dashboard-weather-meta span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-partly .dashboard-weather-meta span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-cloudy .dashboard-weather-meta span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-fog .dashboard-weather-meta span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-snow .dashboard-weather-meta span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-clear .dashboard-stat-sub,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-partly .dashboard-stat-sub,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-cloudy .dashboard-stat-sub,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-fog .dashboard-stat-sub,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-snow .dashboard-stat-sub {
  color: rgba(30, 41, 59, 0.70) !important;
}

/* ·· DARK SKY (rain/storm/night) → light text ································ */
.dashboard-briefing-card.dashboard-weather-rain .dashboard-briefing-left h1,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-briefing-left h1,
.dashboard-briefing-card.dashboard-weather-night .dashboard-briefing-left h1,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-briefing-time,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-briefing-time,
.dashboard-briefing-card.dashboard-weather-night .dashboard-briefing-time,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-briefing-chip strong,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-briefing-chip strong,
.dashboard-briefing-card.dashboard-weather-night .dashboard-briefing-chip strong,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-briefing-weather-info strong,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-briefing-weather-info strong,
.dashboard-briefing-card.dashboard-weather-night .dashboard-briefing-weather-info strong,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-weather-meta strong,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-weather-meta strong,
.dashboard-briefing-card.dashboard-weather-night .dashboard-weather-meta strong,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-night .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-stat-text,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-stat-text,
.dashboard-briefing-card.dashboard-weather-night .dashboard-stat-text,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-rain .dashboard-briefing-left h1,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-storm .dashboard-briefing-left h1,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-night .dashboard-briefing-left h1,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-rain .dashboard-briefing-time,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-storm .dashboard-briefing-time,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-night .dashboard-briefing-time,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-rain .dashboard-briefing-weather-info strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-storm .dashboard-briefing-weather-info strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-night .dashboard-briefing-weather-info strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-rain .dashboard-weather-meta strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-storm .dashboard-weather-meta strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-night .dashboard-weather-meta strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-rain .dashboard-stat-text,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-storm .dashboard-stat-text,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-night .dashboard-stat-text {
  color: #f8fafc !important;
}

.dashboard-briefing-card.dashboard-weather-rain .dashboard-briefing-date span,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-briefing-date span,
.dashboard-briefing-card.dashboard-weather-night .dashboard-briefing-date span,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-briefing-message,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-briefing-message,
.dashboard-briefing-card.dashboard-weather-night .dashboard-briefing-message,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-briefing-chip,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-briefing-chip,
.dashboard-briefing-card.dashboard-weather-night .dashboard-briefing-chip,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-weather-location-row span,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-weather-location-row span,
.dashboard-briefing-card.dashboard-weather-night .dashboard-weather-location-row span,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-briefing-weather-info p,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-briefing-weather-info p,
.dashboard-briefing-card.dashboard-weather-night .dashboard-briefing-weather-info p,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-weather-meta span,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-weather-meta span,
.dashboard-briefing-card.dashboard-weather-night .dashboard-weather-meta span,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-night .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-night .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-forecast-item small,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-forecast-item small,
.dashboard-briefing-card.dashboard-weather-night .dashboard-forecast-item small,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-stat-sub,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-stat-sub,
.dashboard-briefing-card.dashboard-weather-night .dashboard-stat-sub,
.dashboard-briefing-card.dashboard-weather-rain .dashboard-forecast-full-link,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-forecast-full-link,
.dashboard-briefing-card.dashboard-weather-night .dashboard-forecast-full-link,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-rain .dashboard-briefing-date span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-storm .dashboard-briefing-date span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-night .dashboard-briefing-date span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-rain .dashboard-briefing-message,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-storm .dashboard-briefing-message,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-night .dashboard-briefing-message,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-rain .dashboard-briefing-chip,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-storm .dashboard-briefing-chip,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-night .dashboard-briefing-chip,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-rain .dashboard-weather-location-row span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-storm .dashboard-weather-location-row span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-night .dashboard-weather-location-row span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-rain .dashboard-weather-meta span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-storm .dashboard-weather-meta span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-night .dashboard-weather-meta span,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-rain .dashboard-stat-sub,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-storm .dashboard-stat-sub,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-night .dashboard-stat-sub {
  color: rgba(248, 250, 252, 0.74) !important;
}

/* Urgent/overdue chip strongs — semantic colors restored at higher specificity */
.dashboard-briefing-card .dashboard-briefing-chip.is-urgent strong,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-chip.is-urgent strong {
  color: var(--danger) !important;
}
.dashboard-briefing-card .dashboard-briefing-chip.is-overdue strong,
html[data-dark='true'] .dashboard-briefing-card .dashboard-briefing-chip.is-overdue strong {
  color: #d97706 !important;
}

/* ── Stat card count number: bare <strong> inside .dashboard-stat-card ────── */
/* Bright sky */
.dashboard-briefing-card.dashboard-weather-clear .dashboard-stat-card strong,
.dashboard-briefing-card.dashboard-weather-partly .dashboard-stat-card strong,
.dashboard-briefing-card.dashboard-weather-cloudy .dashboard-stat-card strong,
.dashboard-briefing-card.dashboard-weather-fog .dashboard-stat-card strong,
.dashboard-briefing-card.dashboard-weather-snow .dashboard-stat-card strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-clear .dashboard-stat-card strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-partly .dashboard-stat-card strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-cloudy .dashboard-stat-card strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-fog .dashboard-stat-card strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-snow .dashboard-stat-card strong {
  color: #1e293b !important;
}
/* Dark sky */
.dashboard-briefing-card.dashboard-weather-rain .dashboard-stat-card strong,
.dashboard-briefing-card.dashboard-weather-storm .dashboard-stat-card strong,
.dashboard-briefing-card.dashboard-weather-night .dashboard-stat-card strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-rain .dashboard-stat-card strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-storm .dashboard-stat-card strong,
html[data-dark='true'] .dashboard-briefing-card.dashboard-weather-night .dashboard-stat-card strong {
  color: #f8fafc !important;
}

/* ── Forecast strip: larger on desktop only ─────────────────────────────── */
@media (min-width: 900px) {
  .dashboard-forecast-item {
    padding: 12px 14px !important;
    gap: 5px !important;
  }
  .dashboard-forecast-item strong { font-size: 13px !important; }
  .dashboard-forecast-item em { font-size: 19px !important; }
  .dashboard-forecast-item small { font-size: 13px !important; }
  .dashboard-forecast-icon { width: 34px !important; height: 34px !important; }
}

/* ── Dashboard hero: continuous frame and calmer weather alignment ─────── */
.dashboard-hero-section {
  isolation: isolate !important;
  position: relative !important;
}

.dashboard-hero-section::after {
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: inherit;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 8;
}

.dashboard-hero-section > .dashboard-briefing-card,
.dashboard-hero-section > .dashboard-forecast-panel {
  border-color: transparent !important;
}

.dashboard-briefing-right {
  align-self: stretch !important;
  gap: 5px !important;
  justify-content: flex-end !important;
  min-height: 190px !important;
}

.dashboard-briefing-right > .dashboard-weather-location-row {
  align-items: flex-end !important;
  align-self: flex-end !important;
  flex-direction: column !important;
  gap: 0 !important;
  justify-content: flex-end !important;
  min-height: 44px !important;
  width: 100% !important;
}

.dashboard-briefing-right > .dashboard-weather-location-row .dashboard-weather-city-actions {
  align-self: flex-end !important;
  opacity: 1 !important;
}

.dashboard-briefing-right > .dashboard-weather-location-row > [data-dashboard-weather-location] {
  align-self: flex-end !important;
  line-height: 1.15 !important;
  text-align: right !important;
}

.dashboard-briefing-right > .dashboard-weather-location-row .dashboard-weather-city-actions button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: currentColor !important;
  height: 28px !important;
  opacity: .82 !important;
  transition: color .16s ease, opacity .16s ease, transform .16s ease !important;
  width: 28px !important;
}

.dashboard-briefing-right > .dashboard-weather-location-row .dashboard-weather-city-actions button:hover {
  background: transparent !important;
  opacity: 1 !important;
  transform: translateY(-1px) !important;
}

.dashboard-briefing-right > .dashboard-weather-location-row .dashboard-weather-city-actions button:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 1px !important;
}

.dashboard-briefing-weather-main {
  align-self: flex-end !important;
  justify-content: flex-end !important;
}

.dashboard-forecast-toggle-btn {
  align-self: flex-end !important;
  border-radius: 14px !important;
  font-size: 9px !important;
  margin-top: 4px !important;
  padding: 3px 10px !important;
}

@media (max-width: 640px) {
  .dashboard-briefing-right {
    gap: 3px !important;
    min-height: 150px !important;
  }

  .dashboard-briefing-right > .dashboard-weather-location-row {
    gap: 0 !important;
    min-height: 42px !important;
  }

  .dashboard-briefing-weather-main {
    margin-left: auto !important;
  }

  .dashboard-forecast-toggle-btn {
    margin-top: 3px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENTS MODULE  (modules/events.js)  — Stage 1 styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* Events module page background — light lavender tint test */
.content:has(.ev-module) {
  background: var(--bg);
}

.ev-module {
  width: 100%;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.ev-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 24px 20px;
}
.ev-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.2;
}
.ev-page-sub {
  font-size: 13px;
  color: var(--ink2);
  margin: 0;
}

/* ── Tabs bar ────────────────────────────────────────────────────────────── */
.ev-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.ev-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
.ev-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.ev-tab:hover { background: var(--surface2); color: var(--ink); }
.ev-tab.is-active {
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  color: var(--ink);
  font-weight: 600;
}
.ev-tab-count {
  font-size: 11px;
  font-weight: 600;
  background: var(--surface2);
  color: var(--ink2);
  border-radius: 99px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}
.ev-tab.is-active .ev-tab-count {
  background: var(--layf-accent-border, var(--border));
  color: var(--ink);
}
.ev-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink2);
  cursor: pointer;
  white-space: nowrap;
}
.ev-filter-btn:hover { background: var(--surface2); color: var(--ink); }

/* ── Main layout (list + sidebar) ──────────────────────────────────────── */
.ev-main-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  padding: 20px 24px 0;
  align-items: start;
}
@media (max-width: 1024px) {
  .ev-main-layout { grid-template-columns: 1fr; }
  .ev-sidebar { display: none; }
}

/* ── Section ─────────────────────────────────────────────────────────────── */
.ev-section { margin-bottom: 24px; }
.ev-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ev-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink2);
  margin: 0;
}
.ev-section-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink3, var(--ink2));
  background: var(--surface2);
  border-radius: 99px;
  padding: 1px 7px;
}

/* ── Event cards list ────────────────────────────────────────────────────── */
.ev-cards-list { display: flex; flex-direction: column; gap: 8px; }

.ev-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: box-shadow .15s, background .12s;
  position: relative;
  text-align: left;
}
.ev-card-row:hover { background: var(--surface2); box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.ev-card-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ev-card-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  flex-shrink: 0;
}
/* scoped to list card rows only — avoids polluting status/budget card body */
.ev-card-row .ev-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ev-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ev-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}
.ev-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ev-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--ink2);
}
.ev-card-countdown {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--layf-accent-soft-bg, var(--accent-lt, #ede9fe));
  color: var(--layf-accent-text, var(--accent, #7c3aed));
  white-space: nowrap;
}
.ev-card-prog-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.ev-card-prog {
  flex: 1;
  max-width: 220px;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.ev-card-prog-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .3s;
}
.ev-card-prog-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink2);
  white-space: nowrap;
}

/* RSVP breakdown (right side of card) */
.ev-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  min-width: 90px;
}
.ev-card-guests-lbl {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink2);
}
.ev-crsvp-row { display: flex; gap: 4px; }
.ev-crsvp {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  min-width: 26px;
  justify-content: center;
}
.ev-crsvp--ok      { background: #dcfce7; color: #16a34a; }
.ev-crsvp--pending { background: #fef3c7; color: #d97706; }
.ev-crsvp--muted   { background: var(--surface2); color: var(--ink2); }
.ev-crsvp--decline { background: #fee2e2; color: #ef4444; }
.ev-crsvp-empty    { font-size: 11px; color: var(--ink3, var(--ink2)); }

@media (max-width: 680px) {
  .ev-card-row { padding: 10px 12px; gap: 10px; }
  .ev-card-thumb { width: 50px; height: 50px; border-radius: 8px; }
  .ev-card-right { display: none; }
  .ev-card-name { max-width: 220px; font-size: 14px; }
}

/* ── Status/budget badges ────────────────────────────────────────────────── */
.ev-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.ev-badge--upcoming   { background: #dbeafe; color: #1d4ed8; }
.ev-badge--progress   { background: #fef3c7; color: #92400e; }
.ev-badge--done       { background: #dcfce7; color: #15803d; }
.ev-badge--draft      { background: var(--surface2); color: var(--ink2); }
.ev-badge--archived   { background: var(--surface2); color: var(--ink3, var(--ink2)); }
.ev-badge--hero {
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(6px);
}
html[data-dark='true'] .ev-badge--upcoming   { background: rgba(29,78,216,.25); color: #93c5fd; }
html[data-dark='true'] .ev-badge--progress   { background: rgba(146,64,14,.25); color: #fcd34d; }
html[data-dark='true'] .ev-badge--done       { background: rgba(21,128,61,.25); color: #86efac; }

.ev-bud-badge {
  display: inline-flex;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  margin-top: 2px;
}
.ev-bud-badge--ok   { background: #dcfce7; color: #15803d; }
.ev-bud-badge--over { background: #fee2e2; color: #dc2626; }

/* ── RSVP badges ─────────────────────────────────────────────────────────── */
.ev-rsvp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
}
.ev-rsvp--link    { background: #dcfce7; color: #15803d; }
.ev-rsvp--manual  { background: #d1fae5; color: #065f46; }
.ev-rsvp--pending { background: #fef3c7; color: #92400e; }
.ev-rsvp--declined{ background: #fee2e2; color: #dc2626; }
.ev-rsvp--none    { background: var(--surface2); color: var(--ink2); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.ev-sidebar { display: flex; flex-direction: column; gap: 14px; }
.ev-sidebar-card { padding: 16px; }
.ev-sidebar-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink2);
  margin: 0 0 12px;
}
.ev-sidebar-sub { font-size: 12px; color: var(--ink2); margin: -6px 0 10px; }
.ev-summary-rows { display: flex; flex-direction: column; gap: 6px; }
.ev-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink);
}
.ev-summary-row strong { font-weight: 700; color: var(--ink); }
.ev-quick-list { display: flex; flex-direction: column; gap: 6px; }
.ev-quick-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.ev-quick-btn:hover { background: var(--surface2); }
.ev-tpl-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ev-tpl-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.ev-tpl-btn:hover { background: var(--surface2); }
.ev-see-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
}
.ev-see-all:hover { opacity: .75; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ev-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 24px;
  text-align: center;
  gap: 8px;
}
.ev-empty-icon { font-size: 40px; margin-bottom: 4px; }
.ev-empty h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; }
.ev-empty p  { font-size: 13px; color: var(--ink2); margin: 0 0 12px; }

/* ── DETAIL VIEW ─────────────────────────────────────────────────────────── */

/* Back bar */
.ev-back-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 12px;
  gap: 12px;
}
.ev-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
}
.ev-back-btn:hover { color: var(--ink); }
.ev-back-actions { display: flex; align-items: center; gap: 8px; }
.ev-more-btn { font-size: 18px; letter-spacing: 2px; }

/* Hero */
.ev-hero {
  position: relative;
  margin: 0 24px;
  border-radius: 16px;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
}
.ev-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
}
.ev-hero-content {
  position: relative;
  z-index: 1;
  padding: 24px;
  width: 100%;
}
.ev-hero-title {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin: 8px 0 10px;
  line-height: 1.2;
}
.ev-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  margin-bottom: 14px;
}
.ev-hero-meta span { display: flex; align-items: center; gap: 5px; }
.ev-hero-org-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ev-hero-org-label { font-size: 12px; color: rgba(255,255,255,.7); }
.ev-org-avatars { display: flex; gap: -4px; }
.ev-org-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  border: 2px solid rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -6px;
}
.ev-org-avatar:first-child { margin-left: 0; }
.ev-org-more { background: rgba(0,0,0,.35); font-size: 10px; }
.ev-org-btn { color: rgba(255,255,255,.8) !important; font-size: 12px !important; }
.ev-org-btn:hover { color: #fff !important; }

/* Status + Budget row */
.ev-status-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px 24px 0;
}
@media (max-width: 640px) {
  .ev-status-row { grid-template-columns: 1fr; }
}

/* Planner row (task planner + budget/shopping planner side by side) */
.ev-planner-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 24px 0;
}
@media (max-width: 640px) {
  .ev-planner-row { grid-template-columns: 1fr; }
}

/* Detail grid (notes / guests) */
.ev-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 24px 0;
}
@media (max-width: 640px) {
  .ev-detail-grid { grid-template-columns: 1fr; }
}

/* Cards */
.ev-status-card,
.ev-budget-card,
.ev-detail-card { padding: 18px; }
.ev-status-card,
.ev-budget-card { display: flex; flex-direction: column; position: relative; }
.ev-card-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink2);
  margin: 0 0 14px;
}
.ev-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.ev-card-title-row .ev-card-title { margin-bottom: 0; }
.ev-card-title-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  padding: 2px 10px;
  height: 22px;
  opacity: .65;
}
.ev-card-title-btn:hover { opacity: 1; }
.ev-card-body { flex: 1; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 16px; }
.ev-donut { flex-shrink: 0; }
.ev-no-budget {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--ink3, var(--ink2));
  border: 2px solid var(--border);
  border-radius: 50%;
}
.ev-card-cta { width: 100%; justify-content: center; }
.ev-card-cta-full { width: 100%; justify-content: center; margin-top: 10px; }

/* Task stats */
.ev-task-stats { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.ev-task-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink2);
}
.ev-task-row strong { color: var(--ink); font-weight: 700; }
.ev-task-row--done { color: #15803d; }
.ev-task-row--prog { color: #92400e; }
.ev-task-row--over { color: #dc2626; }
.ev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ev-dot--amber { background: #f59e0b; }
.ev-dot--muted { background: var(--border); }

/* Budget details */
.ev-budget-details { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ev-budget-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink2);
}
.ev-budget-row strong { font-weight: 700; color: var(--ink); }
.ev-budget-row--rem strong { color: #15803d; }
.ev-budget-row--over strong { color: var(--danger, #ef4444); }
.ev-budget-val--pending { color: #ea6c00 !important; }

/* Detail card head */
.ev-detail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.ev-detail-card-head .ev-card-title { margin-bottom: 0; }

/* Progress bar */
.ev-progress-bar-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink2);
  margin-bottom: 6px;
  margin-top: 10px;
}
.ev-progress-label { font-weight: 500; }
.ev-progress-fraction { font-weight: 600; color: var(--ink); }
.ev-progress-track {
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 14px;
}
.ev-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .4s ease;
}

/* Task list */
.ev-task-list-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink3, var(--ink2));
  margin-bottom: 6px;
}
.ev-task-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 252px; overflow-y: auto;
  padding-right: 2px;
}
.ev-task-list::-webkit-scrollbar { width: 5px; }
.ev-task-list::-webkit-scrollbar-track { background: transparent; }
.ev-task-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.ev-task-item {
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  gap: 6px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ev-task-item:last-child { border-bottom: none; }
.ev-task-item.is-done .ev-task-title {
  text-decoration: line-through;
  color: var(--ink2);
}
.ev-task-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink2);
  flex-shrink: 0;
}
.ev-task-check.is-checked {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}
.ev-task-title { font-size: 13px; color: var(--ink); }
.ev-task-assignee {
  font-size: 11px;
  color: var(--ink2);
  background: var(--surface2);
  padding: 2px 6px;
  border-radius: 5px;
}
.ev-task-due { font-size: 11px; color: var(--ink3, var(--ink2)); white-space: nowrap; }
.ev-detail-empty { font-size: 13px; color: var(--ink2); padding: 10px 0 4px; }

/* Notes */
.ev-notes-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink3, var(--ink2));
  margin-bottom: 8px;
  margin-top: 10px;
}
.ev-note-item {
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--surface2);
  margin-bottom: 8px;
}
.ev-note-pinned { border-left: 3px solid var(--accent); }
.ev-note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.ev-note-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-lt, var(--surface));
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ev-note-head strong { font-size: 12px; font-weight: 600; color: var(--ink); }
.ev-note-time { font-size: 11px; color: var(--ink2); margin-left: 4px; }
.ev-note-body { font-size: 13px; color: var(--ink); line-height: 1.45; }
.ev-note-meta { font-size: 11px; color: var(--ink2); margin-top: 5px; }
.ev-note-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.ev-note-react {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink2);
}
.ev-see-all-notes {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0 2px;
}
.ev-see-all-notes:hover { color: var(--ink); }

/* ── Guests — full redesign ─────────────────────────────────────────────── */

/* Full-width wrapper below planner row */
.ev-guests-full { padding: 16px 24px 0; }

/* Card header */
.ev-guests-card { overflow: visible; }
.ev-guests-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ev-guests-header-left  { display: flex; align-items: center; gap: 8px; }
.ev-guests-header-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ev-guests-entries { font-weight: 400; opacity: .7; font-size: 10px; }
.ev-dup-warn {
  margin-top: 5px;
  font-size: 12px;
  color: #d97706;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 6px 10px;
  background: #fef3c7;
  border-radius: 6px;
  border-left: 3px solid #f59e0b;
}
.ev-guests-total-badge {
  background: var(--accent-lt, #ede9fe);
  color: var(--accent, #7c3aed);
  font-size: 11px; font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* 4 clickable stat cards */
.ev-gsc-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.ev-gsc-spacer { flex: 1; }
.ev-gsc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s;
  min-width: 70px;
}
.ev-gsc:hover { border-color: var(--accent); background: var(--accent-lt, #ede9fe); }
.ev-gsc-num { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.ev-gsc-lbl { font-size: 11px; color: var(--ink2); white-space: nowrap; }

.ev-gsc--ok.is-active      { background: #dcfce7; border-color: #16a34a; }
.ev-gsc--ok.is-active .ev-gsc-num,
.ev-gsc--ok.is-active .ev-gsc-lbl   { color: #16a34a; }
.ev-gsc--amber.is-active   { background: #fef3c7; border-color: #d97706; }
.ev-gsc--amber.is-active .ev-gsc-num,
.ev-gsc--amber.is-active .ev-gsc-lbl { color: #d97706; }
.ev-gsc--muted.is-active   { background: var(--surface2); border-color: var(--ink2); }
.ev-gsc--muted.is-active .ev-gsc-num { color: var(--ink); }
.ev-gsc--danger.is-active  { background: #fee2e2; border-color: #ef4444; }
.ev-gsc--danger.is-active .ev-gsc-num,
.ev-gsc--danger.is-active .ev-gsc-lbl { color: #ef4444; }

.ev-plusones-lbl {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink2);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}

/* Search row */
.ev-guests-controls {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.ev-guests-search {
  height: 30px; padding: 0 10px;
  min-width: 180px; max-width: 280px; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface2, #f3f4f6);
  font-size: 12px; color: var(--ink); outline: none;
}
.ev-guests-search:focus { border-color: var(--accent); }

/* Bulk select bar */
.ev-guests-select-bar {
  display: flex; gap: 8px; align-items: center;
  padding: 6px 0 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.ev-sel-count { font-size: 12px; font-weight: 600; color: var(--accent); }
.ev-invite-warn { color: var(--danger, #ef4444); font-size: 12px; }

/* Guest row table — scrollable */
.ev-guests-table {
  display: flex; flex-direction: column; gap: 1px;
  max-height: 380px; overflow-y: auto;
  padding-right: 2px;  /* avoid clipping scrollbar */
}
.ev-guests-table::-webkit-scrollbar { width: 5px; }
.ev-guests-table::-webkit-scrollbar-track { background: transparent; }
.ev-guests-table::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.ev-grow {
  display: grid;
  grid-template-columns: 30px 1fr 1fr auto auto;
  align-items: center;
  gap: 8px; padding: 6px 4px;
  cursor: pointer;
  border-radius: 8px; transition: background .1s;
}
.ev-grow:hover { background: var(--surface2, #f9fafb); }
.ev-grow--couple {
  background: color-mix(in srgb, var(--accent-lt, #ede9fe) 35%, transparent);
}
.ev-grow--couple:hover {
  background: color-mix(in srgb, var(--accent-lt, #ede9fe) 60%, transparent);
}

/* Select mode: prepend checkbox column */
.ev-grow:has(.ev-grow-sel) {
  grid-template-columns: 18px 30px 1fr 1fr auto auto;
}
.ev-grow-sel { display: flex; align-items: center; }
.ev-grow-check { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }

/* Avatar */
.ev-grow-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  background: var(--accent-lt, #ede9fe);
  color: var(--accent, #7c3aed);
}
.ev-grow-avatar--confirmed   { background: #dcfce7; color: #16a34a; }
.ev-grow-avatar--pending     { background: #fef3c7; color: #d97706; }
.ev-grow-avatar--declined    { background: #fee2e2; color: #ef4444; }
.ev-grow-avatar--unconfirmed { background: var(--accent-lt, #ede9fe); color: var(--accent, #7c3aed); }

/* Name + partner */
.ev-grow-info { min-width: 0; }
.ev-grow-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-grow-partner {
  font-size: 11px; color: var(--ink2);
  display: flex; align-items: center; gap: 3px;
  margin-top: 2px;
}
.ev-plus-badge {
  background: var(--accent-lt, #ede9fe); color: var(--accent, #7c3aed);
  font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 10px; flex-shrink: 0;
}
.ev-invite-sent {
  color: #16a34a; display: flex; align-items: center; flex-shrink: 0;
}

/* Contact */
.ev-grow-contact {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ev-grow-email, .ev-grow-phone {
  font-size: 11px; color: var(--ink2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 0;
}
.ev-grow-no-contact {
  font-size: 11px; color: var(--ink3, var(--ink2)); opacity: .5;
}
.ev-grow-note {
  font-size: 11px; color: var(--ink2);
  font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
  opacity: .85;
}

/* 4 RSVP status circles */
.ev-grow-status { display: flex; gap: 4px; flex-shrink: 0; }
.ev-srsvp {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: 11px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink2); transition: all .12s; padding: 0;
}
.ev-srsvp:hover { transform: scale(1.15); }
.ev-srsvp--confirmed   { border-color: #16a34a; color: #16a34a; }
.ev-srsvp--pending     { border-color: #d97706; color: #d97706; }
.ev-srsvp--declined    { border-color: #ef4444; color: #ef4444; }
.ev-srsvp--unconfirmed { border-color: #94a3b8; color: #94a3b8; }
.ev-srsvp--confirmed.is-active,   .ev-srsvp--confirmed:hover   { background: #16a34a; color: #fff; border-color: #16a34a; }
.ev-srsvp--pending.is-active,     .ev-srsvp--pending:hover     { background: #d97706; color: #fff; border-color: #d97706; }
.ev-srsvp--declined.is-active,    .ev-srsvp--declined:hover    { background: #ef4444; color: #fff; border-color: #ef4444; }
.ev-srsvp--unconfirmed.is-active, .ev-srsvp--unconfirmed:hover { background: #94a3b8; color: #fff; border-color: #94a3b8; }

/* ⋮ menu button */
.ev-grow-menu {
  padding: 4px 8px; font-size: 15px;
  letter-spacing: 2px; flex-shrink: 0;
  opacity: 0.3; transition: opacity .12s;
}
.ev-grow:hover .ev-grow-menu { opacity: 1; }

/* Guest actions modal */
.ev-guest-actions-who { display: flex; align-items: center; gap: 10px; }
.ev-guest-actions-list {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 0;
}
.ev-guest-action-btn {
  width: 100%; text-align: left; padding: 10px 14px;
  border-radius: 8px; font-size: 13px;
  display: flex; align-items: center; gap: 9px; justify-content: flex-start;
}
.ev-guest-action-btn:hover { background: var(--surface2); }
.ev-guest-action-btn--danger { color: var(--danger, #ef4444) !important; }

/* Invite compose + CSV panels */
.ev-modal-body-pad { padding: 0 20px 20px; }
.ev-invite-meta {
  font-size: 13px; color: var(--ink2);
  background: var(--surface2); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 14px;
}
.ev-invite-meta strong { color: var(--accent); font-size: 16px; }

/* Guest form extras */
.ev-form-check-group { margin: 2px 0 6px; }
.ev-form-check-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink); cursor: pointer;
}

/* Responsive: hide contact on narrow screens */
@media (max-width: 680px) {
  .ev-grow { grid-template-columns: 30px 1fr auto auto; }
  .ev-grow:has(.ev-grow-sel) { grid-template-columns: 16px 30px 1fr auto auto; }
  .ev-grow-contact { display: none; }
}

/* Photos */
.ev-photos-card { padding: 18px; }
.ev-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.ev-photo-thumb {
  aspect-ratio: 1;
  border-radius: 9px;
  min-height: 80px;
}
.ev-photo-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1;
  min-height: 80px;
  border: 2px dashed var(--border);
  border-radius: 9px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  padding: 8px;
  transition: border-color .15s, color .15s;
}
.ev-photo-add:hover { border-color: var(--accent); color: var(--ink); }

/* ── Events Stage 2 additions ───────────────────────────────────────────── */

/* Modal backdrop + box */
/* Aligned with the shared modal helper (.lf-modal-*) so Event Planner modals look
   identical to the rest of the app (behaviour is already unified via
   modal-behaviors.js). */
.ev-modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, #000 30%, transparent);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.ev-modal-box {
  background: var(--surface);
  color: var(--ink);
  border: var(--layf-border);
  border-radius: var(--layf-modal-radius);
  width: 100%;
  max-width: 600px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
@media (max-width: 560px) {
  .ev-modal-backdrop { align-items: end; padding: 0; }
  .ev-modal-box {
    max-height: 92dvh;
    border-radius: var(--layf-modal-radius) var(--layf-modal-radius) 0 0;
  }
}
.ev-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0;
  gap: 12px;
  flex-shrink: 0;
}
.ev-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.ev-modal-close {
  font-size: 16px;
  color: var(--ink2) !important;
  padding: 4px 8px !important;
}
.ev-modal-body { padding: 16px 20px; }
.ev-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  margin-top: auto;
}
.ev-confirm-msg { font-size: 14px; color: var(--ink); line-height: 1.5; margin: 0; }

/* Form layout */
.ev-modal-form { padding: 16px 20px 0; display: flex; flex-direction: column; gap: 14px; }
.ev-form-group { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.ev-form-row   { display: flex; gap: 12px; flex-wrap: wrap; }
.ev-form-row .ev-form-group { min-width: 120px; }
.ev-form-label { font-size: 12px; font-weight: 600; color: var(--ink2); }
.ev-form-req   { color: var(--danger); }
.ev-form-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s;
  box-sizing: border-box;
}
.ev-form-input:focus { outline: none; border-color: var(--accent); }
.ev-form-select { cursor: pointer; }
.ev-form-textarea { resize: vertical; min-height: 80px; }
.ev-form-emoji { width: 60px; text-align: center; font-size: 22px; padding: 4px; }

/* Cover gradient pickers */
.ev-form-cover-row { display: flex; gap: 14px; align-items: flex-start; }
.ev-form-emoji-wrap { display: flex; flex-direction: column; gap: 5px; }
.ev-cover-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.ev-cover-pick {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
  flex-shrink: 0;
}
.ev-cover-pick:hover { transform: scale(1.1); }
.ev-cover-pick.is-selected { border-color: var(--ink); transform: scale(1.1); }

/* Task delete button */
.ev-task-del-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 5px;
  border: none;
  background: transparent;
  color: var(--ink3, var(--ink2));
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s;
  flex-shrink: 0;
}
.ev-task-item:hover .ev-task-del-btn { opacity: 1; }
.ev-task-del-btn:hover { color: var(--danger); background: #fee2e2; }

/* Note delete button */
.ev-note-del-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 5px;
  border: none;
  background: transparent;
  color: var(--ink3, var(--ink2));
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
  flex-shrink: 0;
  margin-left: auto;
}
.ev-note-item:hover .ev-note-del-btn { opacity: 1; }
.ev-note-del-btn:hover { color: var(--danger); background: #fee2e2; }

/* Notes whiteboard */
.ev-notes-card { display: flex; flex-direction: column; }
.ev-note-wb {
  flex: 1;
  width: 100%;
  min-height: 160px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-size: 13px;
  font-family: var(--sans, inherit);
  color: var(--ink);
  line-height: 1.55;
  padding: 2px 0 4px;
  box-sizing: border-box;
}
.ev-note-wb::placeholder { color: var(--ink3, #9ca3af); }

/* Photo lightbox */
#ev-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ev-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(4px);
}
.ev-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 1100px);
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ev-lightbox-img {
  max-width: 100%;
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  object-fit: contain;
}
.ev-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.ev-lightbox-close:hover { background: rgba(255,255,255,.28); }

/* Guest delete button — legacy, kept for compat */
.ev-guest-del-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border: none;
  background: transparent;
  color: var(--ink3, var(--ink2));
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
  flex-shrink: 0;
}
.ev-guest-row:hover .ev-guest-del-btn { opacity: 1; }
.ev-guest-del-btn:hover { color: var(--danger); background: #fee2e2; }

/* Photo grid (Stage 2 — real images + delete) */
.ev-photo-thumb-wrap {
  position: relative;
  aspect-ratio: 1;
  border-radius: 9px;
  overflow: hidden;
  min-height: 80px;
}
.ev-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ev-photo-del {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.ev-photo-thumb-wrap:hover .ev-photo-del { opacity: 1; }

/* Photo add label (file input overlay) */
.ev-photo-add {
  position: relative;
  overflow: hidden;
}

/* Cover mode tabs */
.ev-cover-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface2);
  border-radius: 8px;
  padding: 3px;
  width: fit-content;
  margin-bottom: 10px;
}
.ev-cover-tab {
  padding: 5px 14px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.ev-cover-tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* Drop zone */
.ev-cover-drop-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 12px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: center;
  overflow: hidden;
}
.ev-cover-drop-zone:hover,
.ev-cover-drop-zone.is-drag-over {
  border-color: var(--accent);
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  color: var(--ink);
}
.ev-cover-drop-zone.is-uploading { opacity: .6; }

/* Cover photo preview */
.ev-cover-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.ev-cover-photo-preview {
  width: 64px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* URL row */
.ev-form-url-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.ev-form-url-row .ev-form-input { flex: 1; font-size: 12px; }

/* Task check button (Stage 2 — interactive) */
.ev-task-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.8px solid rgba(17,24,56,0.32);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink2);
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  padding: 0;
}
.ev-task-check:hover { border-color: var(--accent); }
.ev-task-check.is-checked {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}

/* Budget planner — extended item (link, note, qty) */
.ev-bi-item { align-items: flex-start; }
.ev-bi-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-bi-item-main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ev-bi-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  opacity: .7;
  flex-shrink: 0;
  transition: opacity .15s;
}
.ev-bi-link:hover { opacity: 1; }
.ev-bi-cost { font-size: 11px; color: var(--ink2); white-space: nowrap; }
.ev-bi-note { font-size: 11px; color: var(--ink2); line-height: 1.4; }

/* Budget item form — live total row */
.ev-bi-total-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--layf-accent-soft-bg, #f5f3ff);
  border: 1px solid var(--layf-accent-border, #e0d9ff);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
}
.ev-bi-total-label { color: var(--ink2); }
.ev-bi-total-val { font-weight: 600; }
.ev-form-textarea { resize: vertical; min-height: 56px; }

/* ── Documents tab — Dokumenty ──────────────────────────────────────────── */

/* Filter pill row */
.docs-doc-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.docs-doc-filter-pill {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink2);
  cursor: pointer;
  transition: background .13s, border-color .13s, color .13s;
  line-height: 1.5;
}
.docs-doc-filter-pill:hover {
  background: var(--accent-lt);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--ink);
}
.docs-doc-filter-pill.is-active {
  background: var(--accent-lt);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--ink);
  font-weight: 600;
}
html[data-theme='layf-core'] .docs-doc-filter-pill.is-active {
  background: var(--layf-accent-soft-bg);
  border-color: var(--layf-accent-border);
}

/* Document type badge */
.docs-doc-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.docs-doc-type-badge.is-blue   { background: #dbeafe; color: #1d4ed8; }
.docs-doc-type-badge.is-violet { background: #ede9fe; color: #6d28d9; }
.docs-doc-type-badge.is-green  { background: #dcfce7; color: #15803d; }
.docs-doc-type-badge.is-amber  { background: #fef3c7; color: #b45309; }
.docs-doc-type-badge.is-indigo { background: #e0e7ff; color: #4338ca; }
.docs-doc-type-badge.is-muted  { background: var(--surface2); color: var(--ink2); }

/* File type badge (small) */
.docs-file-type-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--surface2);
  color: var(--ink2);
}

/* Document list container */
.docs-doc-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Compact document row */
.docs-doc-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  transition: background .13s;
}
.docs-doc-row:last-child { border-bottom: none; }
.docs-doc-row:hover { background: var(--surface2); }

/* Clickable main area */
.docs-doc-row-clickable {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 10px 0 10px 16px;
  cursor: pointer;
}
.docs-doc-row-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Row icon — generic */
.docs-doc-row-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--surface2);
  overflow: hidden;
}
/* Image thumbnail */
.docs-doc-row-icon.is-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
/* File-type colored icons */
.docs-doc-row-icon.is-xlsx { background: #dcfce7; }
.docs-doc-row-icon.is-csv  { background: #dbeafe; }
.docs-doc-row-icon.is-pdf  { background: #fee2e2; }
html[data-dark='true'] .docs-doc-row-icon.is-xlsx { background: rgba(21,128,61,.25); }
html[data-dark='true'] .docs-doc-row-icon.is-csv  { background: rgba(29,78,216,.25); }
html[data-dark='true'] .docs-doc-row-icon.is-pdf  { background: rgba(185,28,28,.25); }

.docs-doc-row-icon-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink2);
}
.docs-doc-row-icon.is-xlsx .docs-doc-row-icon-label { color: #15803d; }
.docs-doc-row-icon.is-csv  .docs-doc-row-icon-label { color: #1d4ed8; }
.docs-doc-row-icon.is-pdf  .docs-doc-row-icon-label { color: #b91c1c; }

.docs-doc-row-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.docs-doc-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.docs-doc-row-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docs-doc-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--ink2);
}
.docs-doc-row-date {
  font-size: 11px;
  color: var(--ink2);
}

/* Row edit button (right side) */
.docs-doc-row-actions {
  display: flex;
  align-items: center;
  padding: 0 10px 0 4px;
  flex-shrink: 0;
}
.docs-doc-row-edit {
  opacity: 0;
  transition: opacity .13s;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.docs-doc-row:hover .docs-doc-row-edit,
.docs-doc-row-edit:focus-visible { opacity: 1; }

/* Viewer modal overlay */
.docs-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.docs-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 18, 0.72);
  backdrop-filter: blur(8px);
}

/* Viewer modal card */
.docs-viewer-card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  width: min(880px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Viewer header */
.docs-viewer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.docs-viewer-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.docs-viewer-header-info h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docs-viewer-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.docs-viewer-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .13s;
  flex-shrink: 0;
}
.docs-viewer-close:hover { background: var(--border); color: var(--ink); }

/* Viewer slim meta strip */
.docs-viewer-meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 7px 16px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink2);
  flex-shrink: 0;
}

/* Viewer body */
.docs-viewer-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Image viewer */
.docs-viewer-img-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--surface2);
  overflow: auto;
  min-height: 0;
}
.docs-viewer-img-wrap img {
  max-width: 100%;
  max-height: 65vh;
  border-radius: 8px;
  object-fit: contain;
}

/* PDF iframe */
.docs-viewer-iframe {
  width: 100%;
  height: 70vh;
  border: none;
  display: block;
  background: var(--surface2);
}

/* XLSX / CSV table */
.docs-xlsx-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  overflow-x: auto;
}
.docs-xlsx-tab {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 8px 8px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  transition: background .13s, color .13s;
  white-space: nowrap;
}
.docs-xlsx-tab:hover { background: var(--surface2); color: var(--ink); }
.docs-xlsx-tab.is-active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
  font-weight: 600;
}

.docs-xlsx-table-wrap {
  flex: 1;
  overflow: auto;
  padding: 8px;
  background: var(--surface2);
  min-height: 0;
}
.docs-xlsx-table {
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
}
.docs-xlsx-table table {
  border-collapse: collapse;
  font-size: 12px;
  color: var(--ink);
  width: 100%;
}
.docs-xlsx-table th,
.docs-xlsx-table td {
  padding: 5px 10px;
  border: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.docs-xlsx-table th {
  background: var(--surface2);
  font-weight: 600;
  color: var(--ink2);
}
.docs-xlsx-table td { min-width: 56px; }
/* SheetJS sheet_to_html emits all <td> (no <th>) — treat the first row as a
   sticky header and zebra-stripe the rest so the preview reads like a grid. */
.docs-xlsx-table tr:first-child td {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface2);
  font-weight: 700;
  color: var(--ink);
}
.docs-xlsx-table tr:nth-child(even) td { background: color-mix(in srgb, var(--ink) 3%, var(--surface)); }
.docs-xlsx-table tr:hover td { background: var(--accent-lt); }

/* Preview bar: read-only note + download for the full file. */
.docs-xlsx-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.docs-xlsx-bar-note { font-size: 12px; color: var(--ink2); line-height: 1.4; }
.docs-xlsx-bar .btn { flex: none; }
.docs-xlsx-bar .btn svg { width: 14px; height: 14px; }
@media (max-width: 560px) {
  .docs-xlsx-bar { flex-direction: column; align-items: stretch; }
}

/* Viewer metadata / notes / empty */
.docs-viewer-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink2);
  background: var(--surface);
  flex-shrink: 0;
}
.docs-viewer-notes {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.55;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
  white-space: pre-wrap;
  font-style: italic;
}
.docs-viewer-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
  color: var(--ink2);
  background: var(--surface2);
}
.docs-viewer-empty-icon {
  font-size: 36px;
  opacity: .5;
}
/* The empty state renders a raw <svg> icon (ICONS.upload / ICONS.file) directly,
   so constrain it — otherwise it stretches to fill the flex:1 viewer area. */
.docs-viewer-empty > svg {
  width: 44px;
  height: 44px;
  flex: none;
  opacity: .45;
}
.docs-viewer-empty p {
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}
/* Inline "add file" dropzone in the reader's empty state. */
.docs-viewer-dropzone {
  cursor: pointer;
  gap: 12px;
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  margin: 18px;
  transition: border-color .15s ease, background .15s ease;
}
.docs-viewer-dropzone:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface2));
}
.docs-viewer-dropzone-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.docs-viewer-dropzone small { font-size: 12px; color: var(--ink3, var(--muted)); }
.docs-viewer-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--ink2);
  font-size: 13px;
}

/* Doc summary in Dokumenty tab header */
.docs-doc-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.docs-doc-summary-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink2);
}
.docs-doc-summary-stat strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* Dark mode adjustments for doc type badges */
html[data-dark='true'] .docs-doc-type-badge.is-blue   { background: rgba(30, 64, 175, .25); color: #93c5fd; }
html[data-dark='true'] .docs-doc-type-badge.is-violet { background: rgba(109, 40, 217, .25); color: #c4b5fd; }
html[data-dark='true'] .docs-doc-type-badge.is-green  { background: rgba(21, 128, 61, .25);  color: #86efac; }
html[data-dark='true'] .docs-doc-type-badge.is-amber  { background: rgba(180, 83, 9, .25);   color: #fcd34d; }
html[data-dark='true'] .docs-doc-type-badge.is-indigo { background: rgba(67, 56, 202, .25);  color: #a5b4fc; }

/* Document link / powiązanie field */
.docs-link-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.docs-link-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.docs-link-selects {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.docs-link-select {
  width: 100%;
  height: var(--control-height, 38px);
  border: 1px solid var(--border);
  border-radius: var(--control-radius, 8px);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  padding: 0 12px;
  cursor: pointer;
  transition: border-color .13s, box-shadow .13s;
  appearance: auto;
}
.docs-link-select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.docs-link-select[hidden] { display: none; }

/* Reverse-linked docs section (Pets + Properties) */
.pets-linked-docs,
.properties-linked-docs {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.pets-linked-docs-header,
.properties-linked-docs-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface2);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.pets-linked-docs-list,
.properties-linked-docs-list {
  display: flex;
  flex-direction: column;
}
.pets-linked-doc-row,
.properties-linked-doc-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.pets-linked-doc-row:last-child,
.properties-linked-doc-row:last-child { border-bottom: none; }

.pets-linked-doc-badge,
.properties-linked-doc-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-lt);
  color: var(--ink2);
  white-space: nowrap;
  flex-shrink: 0;
}
.pets-linked-doc-title,
.properties-linked-doc-title {
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pets-linked-doc-date,
.properties-linked-doc-date,
.properties-linked-doc-expiry {
  font-size: 12px;
  color: var(--ink2);
  white-space: nowrap;
  flex-shrink: 0;
}
.pets-linked-doc-open {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  flex-shrink: 0;
  font-weight: 500;
}
.pets-linked-doc-open:hover { text-decoration: underline; }
.pets-linked-doc-open.is-muted { color: var(--ink3, var(--muted)); cursor: default; }
.pets-linked-doc-open.is-muted:hover { text-decoration: none; }

/* ─── Properties – Podsumowanie redesign ──────────────────────────────────── */

.properties-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

/* Key facts block */
.properties-keyblock {
  padding: 0;
  overflow: hidden;
}

.properties-keyrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.properties-keyrow:last-child { border-bottom: none; }

.properties-keylabel {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink2);
  min-width: 110px;
  flex-shrink: 0;
}

.properties-keyvalue {
  font-size: 14px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}

.properties-keyvalue-grow {
  flex: 1;
  min-width: 0;
}

.properties-keylink {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.properties-keylink:hover { text-decoration: underline; }

.properties-keyrow-owners {
  align-items: flex-start;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Ownership bar */
.properties-owners-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.properties-owners-segments {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  gap: 1px;
}

.properties-owners-segments div {
  transition: width .3s ease;
}

.properties-owners-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.properties-owners-labels span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink2);
}

.properties-owners-labels em {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  font-style: normal;
}

.properties-owners-labels strong {
  color: var(--ink);
  font-weight: 600;
}

/* Finance strip */
.properties-finance-strip {
  display: flex;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  overflow: hidden;
}

.properties-finance-strip span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  flex: 1;
  border-right: 1px solid var(--border);
}
.properties-finance-strip span:last-child { border-right: none; }

.properties-finance-strip em {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.properties-finance-strip strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.properties-finance-result.is-positive strong { color: #16a34a; }
.properties-finance-result.is-negative strong { color: var(--danger, #e11d48); }

/* Next service alert */
.properties-next-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius, 12px);
}

.properties-next-kicker {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.properties-next-block strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.properties-next-block small {
  font-size: 12px;
  color: var(--ink2);
}

.properties-next-block .btn {
  align-self: flex-start;
  margin-top: 6px;
}

/* Summary sections (services, docs) */
.properties-summary-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  overflow: hidden;
}

.properties-summary-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 10px 18px 8px;
  border-bottom: 1px solid var(--border);
}

.properties-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.properties-summary-row:last-of-type { border-bottom: none; }
.properties-summary-row:hover { background: var(--accent-lt, var(--surface2)); }

.properties-summary-row-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.properties-summary-row-meta {
  font-size: 12px;
  color: var(--ink2);
  white-space: nowrap;
  flex-shrink: 0;
}

.properties-doc-open {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.properties-doc-open:hover { text-decoration: underline; }

.properties-summary-more {
  align-self: flex-start;
  margin: 8px 14px 10px;
  font-size: 12px;
  color: var(--ink2);
}

/* Inline empty states */
.properties-inline-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  font-size: 13px;
  color: var(--ink2);
}

/* Notes block */
.properties-notes-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
}

.properties-notes-block p {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
  white-space: pre-wrap;
  margin: 0;
}

/* Owners form section */
.properties-owners-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 4px;
  grid-column: 1 / -1;
}

.properties-owners-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.properties-owner-row {
  display: grid;
  grid-template-columns: 1fr 80px 32px;
  gap: 6px;
  align-items: center;
}

.properties-owner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.properties-owners-total {
  font-size: 12px;
  color: var(--ink2);
}

/* 2-column overview layout */
.properties-overview-2col {
  display: grid;
  grid-template-columns: 1fr 270px;
  gap: 16px;
  align-items: start;
}

.properties-summary {
  min-width: 0;
}

.properties-summary-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Sidebar */
.properties-overview-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Najbliższe działania panel */
.prop-actions-panel {
  padding: 0;
  overflow: hidden;
}

.prop-actions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
}

.prop-actions-header > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.prop-actions-list { display: flex; flex-direction: column; }

.prop-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.prop-action-row:last-child { border-bottom: none; }
.prop-action-row:hover { background: var(--surface2, #f8fafc); }

.prop-action-row--suggestion { opacity: .8; }

.prop-action-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.prop-action-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.prop-action-body strong {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prop-action-body small {
  font-size: 11px;
  color: var(--ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prop-action-chev {
  color: var(--ink2);
  flex-shrink: 0;
  opacity: .5;
}

/* Lokalizacja panel */
.prop-location-panel {
  padding: 0;
  overflow: hidden;
}

.prop-map-embed {
  height: 130px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.prop-map-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.prop-maps-btn {
  display: block;
  margin: 10px 14px 12px;
  text-align: center;
  text-decoration: none;
}

/* Szybkie linki panel */
.prop-quick-links {
  padding: 0;
  overflow: hidden;
}

.prop-quick-links .properties-summary-label {
  border-bottom: 1px solid var(--border);
}

.prop-quick-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  font-size: 12.5px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.prop-quick-link:hover { background: var(--surface2, #f8fafc); color: var(--accent); }
.prop-quick-link svg { color: var(--ink2); flex-shrink: 0; }

.prop-quick-links-empty {
  display: block;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--ink2);
  border-bottom: 1px solid var(--border);
}

.prop-quick-links-add {
  margin: 8px 12px 10px;
  font-size: 12px;
  color: var(--ink2);
}

/* Keyrow icons */
.properties-keylabel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.properties-keylabel svg { color: var(--ink2); flex-shrink: 0; }

/* Mobile */
@media (max-width: 900px) {
  .properties-overview-2col {
    grid-template-columns: 1fr;
  }
  .properties-overview-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .prop-actions-panel { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .properties-summary { max-width: 100%; }
  .properties-finance-strip { flex-wrap: wrap; }
  .properties-finance-strip span { min-width: 50%; }
  .properties-keyrow { padding: 10px 14px; }
  .properties-keylabel { min-width: 90px; }
  .properties-summary-bottom { grid-template-columns: 1fr; }
  .properties-overview-sidebar { grid-template-columns: 1fr; }
}

/* Mobile responsive for viewer */
@media (max-width: 600px) {
  .docs-viewer-card {
    width: 100%;
    max-height: 95dvh;
    border-radius: 20px 20px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .docs-viewer-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .docs-viewer-iframe { height: 55vh; }
  .docs-viewer-img-wrap img { max-height: 52vh; }
  .docs-doc-row { padding: 10px 12px; }
  .docs-doc-filter-row { padding: 8px 12px; }
}

/* ══════════════════════════════════════════════════════════════
   HEALTH MODULE (medical.js) — Stage 1
   ══════════════════════════════════════════════════════════════ */

.health-wrap {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  align-items: start;
}

.health-rail {
  position: sticky;
  top: 76px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.health-current-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.health-user-initial {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--layf-accent-soft-bg);
  border: 1px solid var(--layf-accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}

.health-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health-nav-btn {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: left;
  font-size: 14px;
  color: var(--ink2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.health-nav-btn:hover { background: var(--surface2); color: var(--ink); }

.health-nav-btn.is-active {
  background: var(--layf-accent-soft-bg);
  border-color: var(--layf-accent-border);
  color: var(--ink);
  font-weight: 600;
}

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

.health-tab-content { display: flex; flex-direction: column; gap: 16px; }

.health-tab-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.health-tab-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.health-tab-sub { margin: 2px 0 0; font-size: 13px; }

/* ── Medical ID Card ── */
.health-id-card { padding: 20px; }

.health-id-top {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.health-id-fact { display: flex; flex-direction: column; gap: 6px; }

.health-id-fact > span {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink2);
}

.health-blood-chip {
  display: inline-flex;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
}

.health-id-dash {
  font-size: 18px;
  color: var(--ink2);
  line-height: 1.4;
}

.health-id-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.health-id-contacts {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.health-id-contact { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }

.health-id-contact > span {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink2);
}

.health-id-contact > strong {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.health-contact-empty {
  color: var(--ink2) !important;
  font-weight: 400 !important;
  font-style: italic;
}

.health-tag {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}

.health-tag--danger {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}

.health-tag--warning {
  background: color-mix(in srgb, #f59e0b 10%, var(--surface));
  color: #92400e;
  border-color: color-mix(in srgb, #f59e0b 20%, transparent);
}

html[data-dark='true'] .health-tag--warning { color: #fbbf24; }

.health-tag-empty { font-size: 13px; color: var(--ink2); font-style: italic; }

/* ── Overview bottom 2-col ── */
.health-overview-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Strip cards ── */
.health-strip-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.health-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.health-strip-head h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.health-strip-list { display: flex; flex-direction: column; gap: 8px; }

.health-strip-row {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
}

.health-strip-row.is-urgent {
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 18%, transparent);
}

.health-strip-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 64px;
  flex-shrink: 0;
}

.health-strip-date strong { font-size: 12px; font-weight: 700; color: var(--ink); }
.health-strip-date span { font-size: 11px; color: var(--ink2); }

.health-strip-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.health-strip-main strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.health-strip-main span { font-size: 12px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-strip-empty { font-size: 13px; margin: 0; }

/* ── Metric chips ── */
.health-metric-strip { display: flex; gap: 16px; flex-wrap: wrap; }

.health-metric-chip { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 56px; }
.health-metric-chip span { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); }
.health-metric-chip strong { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.1; }

.health-metric-latest { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.health-metric-latest-label { font-size: 12px; display: block; }
.health-metric-date { font-size: 12px; margin: 0; }

/* ── Filter strip ── */
.health-filter-strip { display: flex; gap: 6px; flex-wrap: wrap; }

.health-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.health-filter-btn.is-active {
  background: var(--layf-accent-soft-bg);
  border-color: var(--layf-accent-border);
  color: var(--ink);
  font-weight: 600;
}

.health-filter-count { font-size: 11px; font-weight: 700; opacity: .6; }

/* ── Generic list & rows ── */
.health-list { display: flex; flex-direction: column; gap: 8px; }

.health-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.health-row.is-urgent {
  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
  background: color-mix(in srgb, #f59e0b 5%, var(--surface));
}

.health-row.is-overdue {
  border-color: color-mix(in srgb, var(--danger) 25%, transparent);
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}

.health-row.is-low { border-color: color-mix(in srgb, #f59e0b 30%, transparent); }

.health-row-date { display: flex; flex-direction: column; gap: 4px; min-width: 90px; flex-shrink: 0; }
.health-row-date strong { font-size: 13px; font-weight: 600; color: var(--ink); }

.health-row-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.health-row-main strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.health-row-main span { font-size: 13px; color: var(--ink2); }
.health-row-main .muted { font-size: 12px; }

.health-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.health-row-actions { flex-shrink: 0; align-self: center; }

/* ── Badges ── */
.health-row-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface2);
  color: var(--ink2);
  border: 1px solid var(--border);
}

.health-row-badge.is-done {
  background: color-mix(in srgb, #22c55e 10%, var(--surface));
  color: #15803d;
  border-color: color-mix(in srgb, #22c55e 20%, transparent);
}

.health-row-badge.is-rx {
  background: color-mix(in srgb, var(--layf-accent-violet, #7c3aed) 10%, var(--surface));
  color: var(--layf-accent-violet, #7c3aed);
  border-color: color-mix(in srgb, var(--layf-accent-violet, #7c3aed) 20%, transparent);
}

.health-row-badge.is-low {
  background: color-mix(in srgb, #f59e0b 10%, var(--surface));
  color: #92400e;
  border-color: color-mix(in srgb, #f59e0b 20%, transparent);
}

.health-row-badge.is-danger {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}

.health-row-badge.is-warning {
  background: color-mix(in srgb, #f59e0b 10%, var(--surface));
  color: #92400e;
  border-color: color-mix(in srgb, #f59e0b 20%, transparent);
}

.health-row-badge.is-info {
  background: color-mix(in srgb, #3b82f6 10%, var(--surface));
  color: #1d4ed8;
  border-color: color-mix(in srgb, #3b82f6 20%, transparent);
}

html[data-dark='true'] .health-row-badge.is-done { color: #4ade80; }
html[data-dark='true'] .health-row-badge.is-low { color: #fbbf24; }
html[data-dark='true'] .health-row-badge.is-warning { color: #fbbf24; }
html[data-dark='true'] .health-row-badge.is-info { color: #60a5fa; }

/* ── Do kupienia strip ── */
.health-buy-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, #f59e0b 8%, var(--surface));
  border: 1px solid color-mix(in srgb, #f59e0b 22%, transparent);
  flex-wrap: wrap;
}

.health-buy-label { font-size: 12px; font-weight: 600; color: #92400e; }
html[data-dark='true'] .health-buy-label { color: #fbbf24; }

.health-buy-chip {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: color-mix(in srgb, #f59e0b 15%, var(--surface));
  color: var(--ink);
  border: 1px solid color-mix(in srgb, #f59e0b 25%, transparent);
}

/* ── Vaccinations ── */
.health-vax-groups { display: flex; flex-direction: column; gap: 12px; }
.health-vax-group { padding: 16px; }

.health-vax-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.health-vax-group-head h3 { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; }
.health-vax-group-meta { display: flex; align-items: center; gap: 8px; }

.health-vax-list { display: flex; flex-direction: column; gap: 0; }

.health-vax-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.health-vax-row:last-child { border-bottom: none; padding-bottom: 0; }

.health-vax-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid var(--border);
  color: var(--ink2);
  flex-shrink: 0;
  margin-top: 1px;
}

.health-vax-check.is-done {
  background: color-mix(in srgb, #22c55e 15%, var(--surface));
  border-color: #22c55e;
  color: #15803d;
}

html[data-dark='true'] .health-vax-check.is-done { color: #4ade80; }

.health-vax-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.health-vax-main strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.health-vax-main span { font-size: 12px; color: var(--ink2); }
.health-vax-empty { font-size: 13px; padding: 8px 0; margin: 0; }

/* ── History ── */
.health-history-row { align-items: flex-start; }
.health-history-year { min-width: 48px; flex-shrink: 0; padding-top: 2px; }
.health-history-year strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.health-history-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

/* ── Setup / empty invitation card ── */
.health-id-card--setup {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.health-setup-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.health-setup-text { flex: 1; min-width: 0; }
.health-setup-text h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.health-setup-text .muted { font-size: 13px; margin: 0; }

.health-setup-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--surface2);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.health-setup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink2);
}

.health-setup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.health-setup-dot--blood      { background: #ef4444; }
.health-setup-dot--allergy    { background: #f59e0b; }
.health-setup-dot--condition  { background: #8b5cf6; }
.health-setup-dot--doctor     { background: #3b82f6; }
.health-setup-dot--emergency  { background: #22c55e; }

/* ── Quiet inline "Dodaj" link ── */
.health-add-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink2);
  background: transparent;
  border: 1px dashed var(--border);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.health-add-link:hover {
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  border-color: var(--layf-accent-border, var(--accent));
  color: var(--ink);
}

/* ── Strip invite (no appointments empty state) ── */
.health-strip-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.health-strip-invite .muted { font-size: 13px; margin: 0; flex: 1; min-width: 0; }

/* ── Ghost metric chips (preview when no data) ── */
.health-metric-strip--ghost { opacity: 1; }

.health-metric-chip.is-ghost span {
  color: var(--ink3, var(--muted, #9ca3af));
}

.health-metric-chip.is-ghost strong {
  color: var(--border);
  font-size: 20px;
  font-weight: 700;
}

.health-metric-invite {
  font-size: 12px;
  margin: 0;
  font-style: italic;
}

/* ── ID card edit actions row ── */
.health-id-card { position: relative; overflow: hidden; }
.health-id-card-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* ── Today's meds strip ── */
.health-today-meds-list { display: flex; flex-direction: column; gap: 6px; }

.health-today-med {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
}

.health-today-med-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 60%, transparent);
  flex-shrink: 0;
}

.health-today-med-dot.is-rx {
  background: var(--layf-accent-violet, #7c3aed);
}

.health-today-med-name { font-weight: 500; }
.health-today-med-dose { font-size: 12px; color: var(--ink2); }
.health-today-med-more { font-size: 12px; }

/* ── Modal overlay ── */
.health-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.health-modal-card {
  background: var(--surface);
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
  width: 100%;
  max-width: 480px;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.health-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.health-modal-head h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.health-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.health-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
}

.health-modal-foot-right { display: flex; gap: 8px; align-items: center; }

/* ── Form fields ── */
.health-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.health-form-label { font-size: 12px; font-weight: 600; color: var(--ink2); }
.health-form-input {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--ink);
  font-size: 14px;
  font-family: var(--sans);
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s, background .15s;
}
.health-form-input:focus {
  outline: none;
  border-color: var(--layf-accent-border, var(--accent));
  background: var(--surface);
}
textarea.health-form-input { resize: vertical; min-height: 72px; }
select.health-form-input { cursor: pointer; }
.health-form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink2);
  cursor: pointer;
  margin-bottom: 10px;
}
.health-form-check input { cursor: pointer; accent-color: var(--accent); width: 15px; height: 15px; }

/* ── Decorative card watermarks ── */
.health-id-card::after,
.health-id-card--setup::after {
  content: '';
  position: absolute;
  right: -12px;
  top: -8px;
  width: 110px;
  height: 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%23c084fc' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 8 C72 28 78 60 50 90 C22 60 28 28 50 8Z'/%3E%3Cpath d='M50 8 L50 92'/%3E%3Cpath d='M34 42 Q50 46 63 33'/%3E%3Cpath d='M33 57 Q50 62 65 50'/%3E%3Cpath d='M38 72 Q50 75 62 66'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .13;
  pointer-events: none;
}

.health-strip-card--upcoming { position: relative; overflow: hidden; }
.health-strip-card--upcoming::after {
  content: '';
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 80px;
  height: 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23c084fc' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='10' y='16' width='60' height='54' rx='6'/%3E%3Cpath d='M10 30 L70 30'/%3E%3Cpath d='M26 10 L26 22'/%3E%3Cpath d='M54 10 L54 22'/%3E%3Crect x='20' y='40' width='10' height='8' rx='2'/%3E%3Crect x='35' y='40' width='10' height='8' rx='2'/%3E%3Crect x='50' y='40' width='10' height='8' rx='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .11;
  pointer-events: none;
}

.health-strip-card--measurements { position: relative; overflow: hidden; }
.health-strip-card--measurements::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 100px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 50' fill='none' stroke='%23c084fc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 25 L28 25 L36 8 L44 42 L52 18 L60 25 L140 25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .15;
  pointer-events: none;
}

.health-strip-card--meds { position: relative; overflow: hidden; }
.health-strip-card--meds::after {
  content: '';
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 70px;
  height: 70px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23c084fc' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='40' cy='40' rx='16' ry='28' transform='rotate(-45 40 40)'/%3E%3Cline x1='16' y1='64' x2='64' y2='16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .12;
  pointer-events: none;
}

/* ── Health Score Ring ── */
.health-score-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.health-score-wrap {
  position: relative;
  width: 86px;
  height: 86px;
  flex-shrink: 0;
}
.health-score-svg {
  width: 86px;
  height: 86px;
  display: block;
}
.health-score-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.health-score-center strong {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.health-score-center span {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── Smart Insights Strip ── */
.health-insights-strip {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.health-insights-strip-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
}
.health-insight-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--ink);
  border: 1px solid transparent;
}
.health-insight-icon {
  font-size: 15px;
  flex-shrink: 0;
  line-height: 1;
}
.health-insight-text { line-height: 1.35; }

/* ── Daily Medication Check-off ── */
.health-daily-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.health-daily-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.health-daily-count {
  font-size: 12px;
  color: var(--ink2);
}
.health-daily-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin-bottom: 12px;
  overflow: hidden;
}
.health-daily-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--layf-accent-lavender, #c084fc);
  transition: width .35s ease;
}
.health-daily-bar-fill.is-done {
  background: #22c55e;
}
.health-daily-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.health-daily-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--surface2, #f7f8fc);
  border: 1px solid var(--border);
  transition: background .2s, opacity .2s;
  cursor: pointer;
}
.health-daily-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--layf-accent-lavender, #c084fc);
  cursor: pointer;
  flex-shrink: 0;
}
.health-daily-item.is-taken {
  opacity: .55;
  text-decoration: line-through;
  text-decoration-color: var(--ink2);
}
.health-daily-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
}
.health-daily-dose {
  font-size: 12px;
  color: var(--ink2);
}
.health-daily-all-done {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 9px;
  background: color-mix(in srgb, #22c55e 10%, transparent);
  border: 1px solid color-mix(in srgb, #22c55e 25%, transparent);
  font-size: 13px;
  font-weight: 500;
  color: #15803d;
}

/* ── Measurement Sparklines ── */
.health-sparkline {
  display: inline-block;
  vertical-align: middle;
  opacity: .85;
}

/* ── Wide + Emergency Modal ── */
.health-modal-card--wide {
  max-width: 600px;
}
.health-emergency-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 2px;
}
.health-emergency-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.health-emergency-person {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.health-emergency-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.health-emergency-blood-block,
.health-emergency-contact-block {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2, #f7f8fc);
}
.health-emergency-blood-block {
  background: color-mix(in srgb, #ef4444 8%, transparent);
  border-color: color-mix(in srgb, #ef4444 25%, transparent);
}
.health-emergency-block-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink2);
  margin-bottom: 4px;
}
.health-emergency-blood-value {
  font-size: 32px;
  font-weight: 800;
  color: #dc2626;
  line-height: 1;
}
.health-emergency-contact-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.health-emergency-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.health-emergency-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink2);
}
.health-emergency-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.health-emergency-tag {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  background: var(--surface2, #f1f5f9);
  border: 1px solid var(--border);
  color: var(--ink);
}
.health-emergency-tag--danger {
  background: color-mix(in srgb, #ef4444 12%, transparent);
  border-color: color-mix(in srgb, #ef4444 30%, transparent);
  color: #dc2626;
}
.health-emergency-none {
  font-size: 13px;
  color: var(--ink2);
  font-style: italic;
}
.health-emergency-meds {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.health-emergency-med {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
}
.health-emergency-med-dose {
  font-size: 12px;
  color: var(--ink2);
}
.health-emergency-print-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}
@media print {
  .health-modal-overlay { position: fixed; inset: 0; display: block !important; }
  .health-modal-card { box-shadow: none; max-height: none; overflow: visible; }
  .health-modal-card--wide { max-width: 100%; }
  .health-modal-header-close,
  .health-emergency-print-row { display: none !important; }
}

/* ── Sport v2 — Personal bests strip ── */
.sv2-personal-bests {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.sv2-pb-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2, #f3f4f8);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 12px 7px 10px;
  min-width: 0;
}
.sv2-pb-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.sv2-pb-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sv2-pb-label { font-size: 10px; font-weight: 500; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.sv2-pb-val   { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ── Sport v2 — Monthly grouping ── */
.sv2-month-group { margin-bottom: 4px; }
.sv2-month-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0 6px;
}
.sv2-month-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-transform: capitalize;
}
.sv2-month-summary {
  font-size: 12px;
  color: var(--ink2);
  font-weight: 400;
}

/* ── Sport v2 — Goals ── */
.sv2-goals-panel .sport-goal-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.sv2-goal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px 12px;
  cursor: pointer;
  transition: box-shadow .15s, transform .12s;
}
.sv2-goal-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.08); transform: translateY(-1px); }
.sv2-goal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.sv2-goal-main { min-width: 0; flex: 1; }
.sv2-goal-title-row { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.sv2-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border);
}
.sv2-dot--active  { background: #10b981; }
.sv2-dot--planned { background: #6366f1; }
.sv2-dot--done    { background: var(--ink2); }
.sv2-goal-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.sv2-goal-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--surface2, #f3f4f8);
  color: var(--ink2);
  border: 1px solid var(--border);
}
.sv2-goal-chip--done    { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.sv2-goal-chip--overdue { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.sv2-goal-chip--today   { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.sv2-goal-chip--soon    { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.sv2-goal-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.sv2-goal-bar {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.sv2-goal-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .3s ease;
}
.sv2-fill--done  { background: #10b981; }
.sv2-fill--near  { background: #f59e0b; }
.sv2-goal-pct { font-size: 11px; font-weight: 600; color: var(--ink2); min-width: 30px; text-align: right; }
.sv2-goals-section { margin-bottom: 12px; }
.sv2-goals-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink2);
  padding: 2px 0 6px;
}

/* ── Sport v2 — Week chip & service summary ── */
.sv2-week-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--accent-lt, #ede9fe);
  color: var(--accent, #7c3aed);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  margin-top: 4px;
}
.sv2-service-summary {
  font-size: 13px;
  color: var(--ink2);
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.sv2-service-summary strong { color: var(--ink); font-weight: 700; }

/* ── Sport v2 — Integrations tab ── */
.sv2-int-intro {
  font-size: 14px;
  color: var(--ink2);
  margin: 0 0 16px;
  line-height: 1.5;
}
.sv2-int-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sv2-int-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface2, #f3f4f8);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.sv2-int-logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 20px;
  color: #fff;
}
.sv2-int-logo--strava  { background: #fc4c02; }
.sv2-int-logo--garmin  { background: #007cc3; }
.sv2-int-logo--komoot  { background: #6cc04a; color: #1a3000; }
.sv2-int-info { flex: 1; min-width: 0; }
.sv2-int-info strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.sv2-int-info p { font-size: 13px; color: var(--ink2); margin: 0; }
.sv2-int-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink2);
  white-space: nowrap;
  flex-shrink: 0;
}
/* connected state — warm orange left-border accent */
.sv2-int-card--connected {
  background: var(--surface);
  border-color: rgba(252, 76, 2, 0.35);
  border-left: 3px solid #fc4c02;
}
/* disconnected state — neutral, slight background */
.sv2-int-card--disconnected {
  background: var(--surface2, #f3f4f8);
}
/* coming-soon state — muted look */
.sv2-int-card--soon {
  opacity: 0.65;
}
/* action buttons row */
.sv2-int-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.sv2-int-actions .btn {
  font-size: 12px;
  padding: 5px 10px;
  white-space: nowrap;
}
/* small sync timestamp */
.sv2-int-sync-time {
  font-size: 11px;
  color: var(--ink3, var(--ink2));
  margin: 2px 0 0;
}

@media (max-width: 640px) {
  .sv2-personal-bests { gap: 6px; }
  .sv2-pb-chip { padding: 6px 10px 6px 8px; }
  .sv2-pb-val  { font-size: 14px; }
  .sv2-goals-panel .sport-goal-grid { grid-template-columns: 1fr; }
  .sv2-int-card { gap: 10px; padding: 12px; }
  .sv2-int-logo { width: 38px; height: 38px; font-size: 17px; }
}

/* ── Mobile ── */
@media (max-width: 700px) {
  .health-wrap { grid-template-columns: 1fr; gap: 12px; }
  .health-score-hero { flex-direction: row; }
  .health-emergency-top-grid { grid-template-columns: 1fr; }

  .health-rail {
    position: static;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0;
    gap: 4px;
    scrollbar-width: none;
    border-radius: 12px;
  }

  .health-rail::-webkit-scrollbar { display: none; }

  .health-current-user {
    flex-shrink: 0;
    flex-direction: row;
    padding: 4px 10px 4px 6px;
    margin-bottom: 0;
    border-bottom: none;
    border-right: 1px solid var(--border);
    padding-right: 12px;
    margin-right: 2px;
  }

  .health-user-initial { width: 26px; height: 26px; font-size: 11px; }
  .health-user-name { font-size: 13px; max-width: 90px; }

  .health-nav {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 4px;
  }

  .health-nav-btn {
    display: inline-flex;
    align-items: center;
    width: auto;
    white-space: nowrap;
    padding: 7px 12px;
    font-size: 13px;
    flex-shrink: 0;
    text-align: center;
  }

  .health-id-top { grid-template-columns: auto 1fr; }
  .health-id-contacts { gap: 16px; }
  .health-overview-bottom { grid-template-columns: 1fr; }
  .health-metric-chip strong { font-size: 17px; }

  .health-modal-overlay { align-items: flex-end; padding: 0; }
  .health-modal-card { max-width: 100%; border-radius: 20px 20px 0 0; max-height: 92dvh; }
}

/* ═══════════════════════════════════════════════════════════════
   Sport v2 redesign — discipline pills, tab bar, overview, cards
   ═══════════════════════════════════════════════════════════════ */

/* Page shell */
.sv2-page .module-page-content { padding-bottom: 80px; }

/* ── Discipline pills strip ── */
.sv2-disc-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.sv2-disc-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.sv2-disc-pill:hover { background: var(--surface2); }
.sv2-disc-pill.is-active {
  font-weight: 600;
  /* color/bg/border driven by inline style vars set in JS */
}
.sv2-disc-pill--add {
  border-style: dashed;
  color: var(--ink3);
  font-size: 12px;
}
.sv2-disc-pill--add:hover { color: var(--ink2); border-color: var(--ink3); }

.sv2-pill-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink2);
  font-size: 14px;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.sv2-pill-edit-btn:hover { background: var(--surface2); }

/* ── Tab bar ── */
.sv2-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 8px;
}
.sv2-tab-bar::-webkit-scrollbar { display: none; }

.sv2-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  flex-shrink: 0;
}
.sv2-tab:hover { color: var(--ink); }
.sv2-tab.is-active {
  color: var(--sv2-tab-active-color, var(--accent));
  border-bottom-color: var(--sv2-tab-active-color, var(--accent));
  font-weight: 600;
}

/* ── Content area ── */
.sv2-content { padding: 0; }
.sv2-tab-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 0; }

/* All primary/outline buttons in sport tabs use the disc colour */
.sv2-content .btn-primary,
.sv2-content .btn-outline {
  --accent:                var(--sv2-disc-color);
  --accent-lt:             color-mix(in srgb, var(--sv2-disc-color) 12%, transparent);
  --layf-accent-soft-bg:   color-mix(in srgb, var(--sv2-disc-color) 10%, transparent);
  --layf-accent-soft-bg-hover: color-mix(in srgb, var(--sv2-disc-color) 17%, transparent);
  --layf-accent-border:    color-mix(in srgb, var(--sv2-disc-color) 32%, transparent);
  --layf-accent-text:      var(--sv2-disc-color);
}
.sv2-tab-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.sv2-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink3);
  margin-top: 4px;
}

/* ── FAB ── */
.sv2-fab {
  position: fixed;
  bottom: calc(var(--mobile-nav-h, 64px) + 14px);
  right: 18px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 24px;
  border: none;
  background: var(--sv2-fab-color, var(--accent));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  cursor: pointer;
  transition: box-shadow .2s, transform .15s;
}
.sv2-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.sv2-fab:active { transform: scale(.97); }

/* On desktop where sidebar is visible, FAB stays at bottom-right of content */
@media (min-width: 769px) {
  .sv2-fab { bottom: 24px; }
}

/* ── Discipline photo header ── */
.sv2-disc-header {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sv2-disc-header--photo {
  /* background-image set via inline style — direct url() avoids CSS var/url() compat issues */
  background-size: cover;
  background-position: center;
}
.sv2-disc-header--gradient {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--sv2-disc-color, var(--accent)) 18%, var(--bg)) 0%,
    color-mix(in srgb, var(--sv2-disc-color, var(--accent)) 8%, var(--bg)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--sv2-disc-color, var(--accent)) 22%, transparent);
}

.sv2-disc-header-glass {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.sv2-disc-header--photo .sv2-disc-header-glass {
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.sv2-disc-header--gradient .sv2-disc-header-glass {
  background: transparent;
}

.sv2-disc-header-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }

.sv2-disc-header-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}
.sv2-disc-header--photo .sv2-disc-header-name { color: #fff; }
.sv2-disc-header--gradient .sv2-disc-header-name { color: var(--ink); }

.sv2-disc-header-stats {
  font-size: 13px;
  margin-top: 2px;
}
.sv2-disc-header--photo .sv2-disc-header-stats { color: rgba(255,255,255,.82); }
.sv2-disc-header--gradient .sv2-disc-header-stats { color: var(--ink2); }

/* Upload / change photo button */
.sv2-disc-header-upload-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.sv2-disc-header--gradient .sv2-disc-header-upload-btn {
  background: color-mix(in srgb, var(--sv2-disc-color, var(--accent)) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--sv2-disc-color, var(--accent)) 30%, transparent);
  color: var(--sv2-disc-color, var(--accent));
}
.sv2-disc-header-upload-btn:hover { background: rgba(0,0,0,.48); }
.sv2-disc-header--gradient .sv2-disc-header-upload-btn:hover {
  background: color-mix(in srgb, var(--sv2-disc-color, var(--accent)) 20%, var(--surface));
}

/* ── Week hero card ── */
.sv2-week-hero {
  background: var(--sv2-disc-bg, var(--surface2));
  border: 1px solid color-mix(in srgb, var(--sv2-disc-color, var(--accent)) 20%, transparent);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sv2-week-hero-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.sv2-week-hero-left { flex: 1; min-width: 0; }
.sv2-week-hero-chart { flex-shrink: 0; display: flex; align-items: flex-end; }

.sv2-week-hero-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sv2-disc-color, var(--accent));
  margin-bottom: 6px;
}

.sv2-week-stats-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sv2-week-stat { display: flex; align-items: baseline; gap: 3px; }
.sv2-week-stat-val { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1; }
.sv2-week-stat-unit { font-size: 12px; color: var(--ink2); }
.sv2-week-stat-sep { width: 1px; height: 18px; background: var(--border); }

.sv2-week-chart { display: block; overflow: visible; }

.sv2-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sv2-streak-color, var(--accent)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sv2-streak-color, var(--accent)) 25%, transparent);
  color: var(--sv2-streak-color, var(--accent));
  font-size: 12px;
  font-weight: 600;
}

/* ── Alert chips (service warnings) ── */
.sv2-alerts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sv2-alert-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink2);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s;
}
.sv2-alert-chip:hover { background: var(--surface2); }
.sv2-alert-chip--warn {
  background: #fef9ec;
  border-color: #fde68a;
  color: #92400e;
}
.sv2-alert-chip--danger {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

/* ── Recent / activity cards ── */
.sv2-recent-acts { display: flex; flex-direction: column; gap: 6px; }
.sv2-act-list { display: flex; flex-direction: column; gap: 6px; }

.sv2-act-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.sv2-act-card:hover { background: var(--surface2); box-shadow: 0 2px 8px rgba(0,0,0,.06); }

.sv2-act-disc-chip {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.sv2-act-body { flex: 1; min-width: 0; }
.sv2-act-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sv2-act-meta { font-size: 12px; color: var(--ink2); margin-top: 1px; }
.sv2-act-stats { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.sv2-act-stat {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  background: var(--surface2);
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}

/* ── Heatmap ── */
.sv2-heatmap-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 4px;
}
.sv2-heatmap-wrap::-webkit-scrollbar { display: none; }
.sv2-heatmap-months { position: relative; overflow: hidden; margin-bottom: 4px; }
.sv2-heatmap-month {
  position: absolute;
  font-size: 9px;
  font-weight: 600;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.sv2-heatmap-svg { display: block; }

/* ── Route map placeholders (sv2 context) ── */

/* Landscape photo backgrounds for routes without a map link,
   mirroring the data-route-index cycle used in renderRouteCard */
.sport-route-card[data-route-index="0"] .sv2-map-placeholder--empty {
  background: url('../assets/sport-route-coast-clean.jpg') center / cover no-repeat;
}
.sport-route-card[data-route-index="1"] .sv2-map-placeholder--empty {
  background: url('../assets/sport-route-valley-clean.jpg') center / cover no-repeat;
}
.sport-route-card[data-route-index="2"] .sv2-map-placeholder--empty {
  background: url('../assets/sport-route-mountain-clean.jpg') center / cover no-repeat;
}
.sport-route-card[data-route-index="3"] .sv2-map-placeholder--empty {
  background: url('../assets/sport-route-sunset-clean.jpg') center / cover no-repeat;
}

/* Gradient overlay on all empty placeholders so text stays readable */
.sv2-map-placeholder--empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.10) 45%,
    rgba(0,0,0,.52) 100%
  );
  border-radius: inherit;
  pointer-events: none;
}

.sv2-map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 16px;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}
.sv2-map-placeholder--empty {
  position: relative;          /* for ::after overlay */
  background: var(--surface2); /* fallback if photo doesn't load */
  color: rgba(255,255,255,.85);
  justify-content: flex-end;   /* push text to bottom like a map legend */
  padding-bottom: 14px;
}
/* text nodes sit on top of the gradient ::after */
.sv2-map-placeholder--empty > * { position: relative; z-index: 1; }
.sv2-map-placeholder--link {
  background: linear-gradient(145deg, var(--surface2) 0%, color-mix(in srgb, var(--accent) 6%, var(--surface2)) 100%);
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.sv2-map-placeholder--link:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface2));
}
.sv2-map-ph-icon { font-size: 28px; line-height: 1; }
.sv2-map-ph-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
}
.sv2-map-ph-hint {
  font-size: 11px;
  color: var(--ink3);
  max-width: 160px;
}
.sv2-map-ph-open {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 2px;
}

/* ── Gear cards (v2 merged) ── */
.sv2-gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.sv2-gear-card {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.sv2-gear-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Gear photo background — direct inline background-image, no CSS-var-url workaround */
.sv2-gear-card.has-photo {
  position: relative;
  min-height: 200px;
  overflow: hidden;
  border-color: rgba(255,255,255,.3) !important;
}
.sv2-gear-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sv2-gear-photo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.04) 0%,
    rgba(0,0,0,.20) 40%,
    rgba(0,0,0,.72) 100%
  );
}
/* All card content above the photo */
.sv2-gear-card.has-photo .sv2-gear-card-top,
.sv2-gear-card.has-photo .sv2-gear-km,
.sv2-gear-card.has-photo .sv2-service-history,
.sv2-gear-card.has-photo .sport-health-bar-wrap,
.sv2-gear-card.has-photo .sv2-gear-svc-chip {
  position: relative;
  z-index: 1;
}
/* White text when photo is present */
.sv2-gear-card.has-photo .sv2-gear-name { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.45); font-size: 16px; }
.sv2-gear-card.has-photo .sv2-gear-meta,
.sv2-gear-card.has-photo .sv2-gear-km  { color: rgba(255,255,255,.82) !important; }
.sv2-gear-card.has-photo .sv2-gear-edit-btn { color: rgba(255,255,255,.9) !important; }
.sv2-gear-card.has-photo .sv2-service-history { border-top-color: rgba(255,255,255,.2); }
.sv2-gear-card.has-photo .sv2-service-history-summary { color: rgba(255,255,255,.8); }
.sv2-gear-card.has-photo .sport-health-bar-track { background: rgba(255,255,255,.25) !important; }
.sv2-gear-card.has-photo .sport-health-pct { color: rgba(255,255,255,.85) !important; }
.sv2-gear-card.has-photo .sv2-gear-svc-chip { background: rgba(0,0,0,.32); border-color: rgba(255,255,255,.2); color: #fff; }

.sv2-gear-icon-chip {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.sv2-gear-icon-chip--overlay { color: rgba(255,255,255,.9); }
.sv2-gear-info { flex: 1; min-width: 0; }
.sv2-gear-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.sv2-gear-meta { font-size: 12px; color: var(--ink2); margin-top: 1px; }
.sv2-gear-edit-btn { flex-shrink: 0; }
.sv2-gear-km { font-size: 13px; color: var(--ink2); }

.sv2-gear-svc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--ink2);
}
.sv2-gear-svc-chip--planned {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #5b21b6;
}
.sv2-gear-svc-chip--warn {
  background: #fef9ec;
  border-color: #fde68a;
  color: #92400e;
}

/* ── Service history (details element) ── */
.sv2-service-history {
  border-top: 1px solid var(--border);
  margin-top: 2px;
  padding-top: 8px;
}
.sv2-service-history-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  list-style: none;
  gap: 8px;
  user-select: none;
}
.sv2-service-history-summary::-webkit-details-marker { display: none; }
.sv2-service-history > summary { outline: none; }
.sv2-add-svc-inline { margin-left: auto; flex-shrink: 0; }
.sv2-svc-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

/* ── Goals tab (v2 ring style) ── */
.sv2-goal-list { display: flex; flex-direction: column; gap: 8px; }

/* Override the old progress-bar goal card for ring design */
.sv2-goal-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.sv2-goal-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.08); transform: translateY(-1px); }
.sv2-goal-ring { flex-shrink: 0; display: block; }
.sv2-goal-content { flex: 1; min-width: 0; }
.sv2-goal-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.sv2-goal-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.sv2-goal-notes { font-size: 12px; color: var(--ink2); margin: 4px 0 0; line-height: 1.4; }

/* ── Goals status dots (re-declared here for ring version context) ── */
.sv2-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.sv2-dot--active  { background: #10b981; }
.sv2-dot--planned { background: #6366f1; }
.sv2-dot--done    { background: var(--ink2); }

/* ── Wishlist head spacing ── */
.sv2-wishlist-head { margin-top: 12px; }

/* ── Dark mode adjustments ── */
html[data-dark='true'] .sv2-alert-chip--warn {
  background: rgba(245,158,11,.15);
  border-color: rgba(245,158,11,.35);
  color: #fbbf24;
}
html[data-dark='true'] .sv2-alert-chip--danger {
  background: rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.35);
  color: #f87171;
}
html[data-dark='true'] .sv2-gear-svc-chip--planned {
  background: rgba(139,92,246,.15);
  border-color: rgba(139,92,246,.35);
  color: #a78bfa;
}
html[data-dark='true'] .sv2-gear-svc-chip--warn {
  background: rgba(245,158,11,.15);
  border-color: rgba(245,158,11,.35);
  color: #fbbf24;
}
html[data-dark='true'] .sv2-goal-chip--done {
  background: rgba(16,185,129,.15);
  border-color: rgba(16,185,129,.35);
  color: #34d399;
}
html[data-dark='true'] .sv2-goal-chip--overdue {
  background: rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.35);
  color: #f87171;
}
html[data-dark='true'] .sv2-goal-chip--today {
  background: rgba(245,158,11,.15);
  border-color: rgba(245,158,11,.35);
  color: #fbbf24;
}
html[data-dark='true'] .sv2-goal-chip--soon {
  background: rgba(139,92,246,.15);
  border-color: rgba(139,92,246,.35);
  color: #a78bfa;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .sv2-disc-pills { padding: 8px 12px 6px; gap: 5px; }
  .sv2-disc-pill { padding: 5px 10px; font-size: 12px; }
  .sv2-tab { padding: 9px 11px; font-size: 12px; }
  .sv2-tab-body { padding: 12px 12px 0; }
  .sv2-week-hero { padding: 12px; }
  .sv2-week-stat-val { font-size: 18px; }
  .sv2-gear-grid { grid-template-columns: 1fr; }
  .sv2-act-stats { display: none; } /* hide stat badges on very small screens */
  .sv2-fab { right: 14px; padding: 10px 15px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════
   Sport v2 — Discipline photo card switcher
   ═══════════════════════════════════════════════════════ */

.sv2-disc-cards {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 14px 16px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--surface);
}
.sv2-disc-cards::-webkit-scrollbar { display: none; }

/* Base card */
.sv2-disc-card {
  position: relative;
  flex: 0 0 112px;
  width: 112px;
  height: 112px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  background: var(--surface2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.sv2-disc-card:hover { transform: scale(1.04); }
.sv2-disc-card:focus-visible {
  box-shadow: 0 0 0 3px var(--accent);
}

/* Active ring — soft 1.5px border, no double ring */
.sv2-disc-card.is-active {
  border-width: 1.5px;
  border-color: var(--sv2-card-ring, var(--accent));
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
  transform: scale(1.04);
}

/* Big icon — shown on gradient-only (no photo) cards */
.sv2-disc-card-big-icon {
  font-size: 40px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding-bottom: 24px; /* leave room for footer */
}

/* Frosted glass footer strip */
.sv2-disc-card-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 6px 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sv2-disc-card.has-photo .sv2-disc-card-foot {
  background: rgba(0,0,0,.40);
}

/* Small icon in footer (only shown when card has a photo) */
.sv2-disc-card-icon {
  font-size: 12px;
  line-height: 1;
  flex: 0 0 auto;
}

/* Card label */
.sv2-disc-card-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 0;
  min-width: 0;
}
.sv2-disc-card.has-photo .sv2-disc-card-name {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* Edit pencil button — absolute, top-right of active card */
.sv2-disc-card-edit {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.85);
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: background .15s;
  z-index: 2;
}
.sv2-disc-card-edit:hover { background: #fff; }
html[data-dark='true'] .sv2-disc-card-edit {
  background: rgba(30,30,40,.85);
  color: var(--ink);
}

/* Add discipline card — dashed placeholder */
.sv2-disc-card.sv2-disc-card--add {
  border: 2px dashed var(--border);
  background: transparent;
  color: var(--ink2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: border-color .15s, color .15s;
}
.sv2-disc-card--add:hover { border-color: var(--accent); color: var(--accent); }
.sv2-disc-card-plus {
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
}
.sv2-disc-card-add-label {
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  padding: 0 4px;
}

/* Dark mode adjustments */
html[data-dark='true'] .sv2-disc-cards { background: var(--surface); }
html[data-dark='true'] .sv2-disc-card { background: var(--surface2); }
html[data-dark='true'] .sv2-disc-card-foot { background: rgba(15,15,20,.55); }
html[data-dark='true'] .sv2-disc-card.has-photo .sv2-disc-card-foot { background: rgba(0,0,0,.55); }
html[data-dark='true'] .sv2-disc-card-name { color: var(--ink); }

/* ── Discipline modal — photo upload preview ── */

.sv2-disc-modal-photo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.sv2-disc-modal-preview {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.sv2-disc-modal-preview-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sv2-disc-modal-preview-icon {
  line-height: 1;
}

.sv2-disc-modal-photo-btns {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sv2-disc-modal-upload-btn {
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sv2-disc-modal-upload-btn input[type="file"] { display: none; }

/* ── Strava connection bar ── */

.sv2-strava-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  margin-top: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.sv2-strava-bar--on {
  border-color: color-mix(in srgb, #fc4c02 20%, var(--border));
  background: color-mix(in srgb, #fc4c02 5%, var(--surface));
}
.sv2-strava-icon {
  color: #fc4c02;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.sv2-strava-icon--muted { color: var(--ink3); }
.sv2-strava-athlete {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.sv2-strava-sync-time {
  font-size: 12px;
  color: var(--ink2);
  flex: 1 1 auto;
}
.sv2-strava-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.sv2-strava-sync-btn { background: #fc4c02; color: #fff; border-color: #fc4c02; }
.sv2-strava-sync-btn:hover { background: #e04000; border-color: #e04000; }
.sv2-strava-bar-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; }
.sv2-strava-bar-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.sv2-strava-bar-hint  { font-size: 11.5px; color: var(--ink2); }
.sv2-strava-connect-btn { background: #fc4c02; color: #fff; border-color: #fc4c02; margin-left: auto; flex-shrink: 0; }
.sv2-strava-connect-btn:hover { background: #e04000; border-color: #e04000; }

/* "Push to Strava" checkbox row in activity modal */
.sv2-strava-push-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, #fc4c02 6%, var(--surface));
  border: 1px solid color-mix(in srgb, #fc4c02 20%, var(--border));
  margin-top: 4px;
}
.sv2-strava-push-icon { color: #fc4c02; display: flex; align-items: center; flex: 0 0 auto; }
.sv2-strava-imported-note {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink2);
  padding: 6px 0 0;
}
.sv2-strava-imported-note svg { color: #fc4c02; }

html[data-dark='true'] .sv2-strava-bar--on {
  border-color: color-mix(in srgb, #fc4c02 30%, var(--border));
  background: color-mix(in srgb, #fc4c02 8%, var(--surface));
}

/* ── Leaflet map stacking context fix ──
   Leaflet creates positioned panes (tile-pane z:200, shadow-pane z:500, etc.)
   that would escape into the page stacking context and bleed over modals.
   `isolation: isolate` confines those panes inside each map container. */
.sv2-leaflet-map {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* ── Mobile — disc card strip ── */
@media (max-width: 640px) {
  .sv2-disc-cards { padding: 10px 12px 8px; gap: 8px; }
  .sv2-disc-card { flex: 0 0 92px; width: 92px; height: 92px; border-radius: 13px; }
  .sv2-disc-card-big-icon { font-size: 32px; }
  .sv2-disc-card-name { font-size: 11px; }
}

/* ── Sport type icon chips ── */
.sv2-sport-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sv2-sport-icon svg { display: block; }

/* ── Sport type picker grid (discipline modal) ── */
.sv2-sport-type-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 4px;
}
.sv2-sport-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sv2-sport-type-btn:hover {
  background: var(--stype-bg, var(--surface2));
  border-color: var(--stype-color, var(--border));
}
.sv2-sport-type-btn.is-active {
  background: var(--stype-bg, var(--accent-lt));
  border-color: var(--stype-color, var(--accent));
}
.sv2-sport-type-icon { display: flex; align-items: center; justify-content: center; }
.sv2-sport-type-label { font-size: 14px; line-height: 1; }

@media (max-width: 480px) {
  .sv2-sport-type-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Sport V2 — Recurring Trainings ────────────────────────────────────── */

/* "Today's training" banner — Strava-branded */
.sv2-today-rt-banner {
  background: rgba(252,76,2,.06);
  border: 1px solid rgba(252,76,2,.22);
  border-left: 3px solid #fc4c02;
  border-radius: 14px;
  padding: 14px 16px 12px;
  margin-bottom: 16px;
}
.sv2-today-rt-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.sv2-today-rt-strava-logo {
  display: flex;
  color: #fc4c02;
  flex-shrink: 0;
}
.sv2-today-rt-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fc4c02;
}
.sv2-today-rt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(252,76,2,.12);
}
.sv2-today-rt-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; }
.sv2-today-rt-title { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv2-today-rt-meta { font-size: 12px; color: var(--ink2); }

/* Ghost pill Strava action button */
.sv2-strava-rt-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 8px;
  border-radius: 99px;
  border: 1.5px solid rgba(252,76,2,.4);
  background: transparent;
  color: rgba(252,76,2,.65);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease;
  white-space: nowrap;
}
.sv2-strava-rt-btn:hover {
  border-color: #fc4c02;
  color: #fc4c02;
  background: rgba(252,76,2,.06);
  transform: scale(1.03);
}
.sv2-strava-rt-btn:active { transform: scale(.97); }

/* Recurring trainings list section in Activities tab */
.sv2-rt-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.sv2-rt-section-title { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0; }
.sv2-rt-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.sv2-rt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  transition: background .12s;
}
.sv2-rt-row:hover { background: var(--surface2); }
.sv2-rt-row--inactive { opacity: .5; }
.sv2-rt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sv2-rt-body { flex: 1 1 0; min-width: 0; }
.sv2-rt-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.sv2-rt-meta { font-size: 11px; color: var(--ink2); margin-top: 1px; }
.sv2-rt-empty { font-size: 13px; color: var(--ink2); padding: 8px 4px; }

/* Day-of-week circular button picker */
.sv2-day-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sv2-day-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .12s, border-color .12s, color .12s;
}
.sv2-day-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast, #fff);
}
.sv2-day-btn:hover:not(.is-active) {
  background: var(--accent-lt);
  border-color: var(--accent);
}

/* ── Sport V2 — Overview redesign grid ──────────────────────────────────── */

.sv2-overview-layout { padding: 0 !important; }

.sv2-overview-grid {
  display: grid;
  grid-template-columns: 1fr 288px;
  gap: 20px;
  align-items: start;
  padding: 0 4px 32px;
}
.sv2-overview-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sv2-overview-sidebar { display: flex; flex-direction: column; gap: 14px; }

.sv2-overview-hero {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.sv2-overview-hero-inner { display: flex; gap: 16px; align-items: flex-start; }
.sv2-overview-hero-left { flex: 1 1 0; min-width: 0; }
.sv2-overview-hero-chart { flex-shrink: 0; display: flex; align-items: flex-end; }

.sv2-overview-disc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.sv2-overview-disc-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.sv2-overview-month-label { font-size: 12px; color: var(--ink2); margin-left: 2px; }

.sv2-overview-stats-row { gap: 20px !important; margin-bottom: 14px; }
.sv2-overview-stats-row .sv2-week-stat-lbl {
  font-size: 10px;
  color: var(--ink2);
  display: block;
  margin-top: 2px;
}

.sv2-month-goal { margin-top: 10px; margin-bottom: 6px; }
.sv2-month-goal-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}
.sv2-month-goal-text {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex-wrap: wrap;
}
.sv2-month-goal-of {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink2);
}
.sv2-month-goal-name {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink2);
  margin-left: 2px;
}
.sv2-goal-pct {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.sv2-month-goal-track {
  height: 10px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.sv2-month-goal-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.sv2-month-goal-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 100%);
  border-radius: inherit;
}
.sv2-month-goal-sub {
  font-size: 11px;
  color: var(--ink2);
  margin-top: 5px;
}

.sv2-overview-streak-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.sv2-motivation-msg { font-size: 12px; color: var(--ink2); }

.sv2-overview-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink2);
  margin-bottom: -4px;
}
.sv2-overview-section-label--withlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sv2-lat-act-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px;
  cursor: pointer;
  transition: box-shadow .15s;
}
.sv2-lat-act-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.sv2-lat-act-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.sv2-lat-act-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sv2-lat-act-meta { font-size: 12px; color: var(--ink2); margin-top: 2px; }
.sv2-lat-act-sport-chip {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sv2-lat-act-map-wrap { border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.sv2-lat-act-map { width: 100%; height: 180px; }
.sv2-lat-act-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 8px;
}
.sv2-lat-act-stat { display: flex; flex-direction: column; gap: 2px; }
.sv2-lat-act-stat-val { font-size: 14px; font-weight: 700; color: var(--ink); }
.sv2-lat-act-stat-lbl { font-size: 10px; color: var(--ink2); }

/* Activity chips — Strava feeling tags */
.sv2-lat-act-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.sv2-lat-act-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 500;
  background: var(--surface2);
  color: var(--ink2);
  border: 1px solid var(--border);
  letter-spacing: .02em;
  line-height: 1;
}
.sv2-lat-act-chip.is-strava {
  background: rgba(252,76,2,.08);
  color: #fc4c02;
  border-color: rgba(252,76,2,.25);
}
.sv2-lat-act-chip.is-sport {
  background: var(--sv2-chip-bg, var(--surface2));
  color: var(--sv2-chip-color, var(--ink));
  border-color: color-mix(in srgb, var(--sv2-chip-color, var(--border)) 30%, transparent);
  font-weight: 600;
}

.sv2-recent-act-list { display: flex; flex-direction: column; gap: 2px; }
.sv2-recent-act-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s;
}
.sv2-recent-act-row:hover { background: var(--surface2); }
.sv2-recent-act-chip {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sv2-recent-act-body { flex: 1 1 0; min-width: 0; }
.sv2-recent-act-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv2-recent-act-date { font-size: 11px; color: var(--ink2); }
.sv2-recent-act-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--ink2); }
.sv2-recent-act-arrow { color: var(--ink3); font-size: 18px; flex-shrink: 0; }

.sv2-sidebar-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px 16px;
}
.sv2-sidebar-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sv2-sidebar-card-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.sv2-sidebar-empty { font-size: 12px; color: var(--ink2); }
.sv2-sidebar-more { font-size: 11px; color: var(--ink2); margin-top: 6px; }
.sv2-sidebar-add-svc-btn { font-size: 12px; margin-top: 4px; width: 100%; justify-content: flex-start; padding-left: 0; }

.sv2-sidebar-goal-row { display: flex; align-items: center; gap: 12px; }
.sv2-sidebar-goal-info { flex: 1 1 0; min-width: 0; }
.sv2-sidebar-goal-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.sv2-sidebar-goal-type { font-size: 11px; color: var(--ink2); margin-top: 2px; }
.sv2-sidebar-goal-bar-track { height: 4px; background: var(--border); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.sv2-sidebar-goal-bar-fill { height: 100%; border-radius: 99px; }

.sv2-sidebar-gear-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.sv2-sidebar-gear-thumb {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sv2-sidebar-gear-info { flex: 1 1 0; min-width: 0; }
.sv2-sidebar-gear-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.sv2-sidebar-gear-meta { font-size: 11px; color: var(--ink2); margin-bottom: 6px; }
.sv2-sidebar-health-bar { margin-top: 0 !important; }
.sv2-sidebar-gear-svc { font-size: 11px; color: var(--ink2); margin-top: 4px; }

.sv2-sidebar-int-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.sv2-sidebar-int-logo {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv2-sidebar-int-logo--strava { color: #fc4c02; }
.sv2-sidebar-int-logo--garmin { font-size: 13px; font-weight: 800; color: #0076b4; }
.sv2-sidebar-int-name { font-size: 12px; font-weight: 600; color: var(--ink); flex: 1 1 0; }
.sv2-sidebar-int-status {
  font-size: 11px;
  color: var(--ink2);
  display: flex;
  align-items: center;
  gap: 4px;
}
.sv2-sidebar-int-status.is-connected { color: #16a34a; }
.sv2-sidebar-int-status.is-off { color: var(--ink3); }
.sv2-sidebar-int-status.is-soon { color: var(--ink3); font-style: italic; }
.sv2-int-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Sidebar "next goal / upcoming service" card */
.sv2-sidebar-next-card { padding: 14px 16px; }
.sv2-sidebar-next-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.sv2-sidebar-next-item + .sv2-sidebar-next-item {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
}
.sv2-sidebar-next-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sv2-sidebar-next-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sv2-sidebar-next-label { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.sv2-sidebar-next-sub { font-size: 11px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sv2-bests-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.sv2-bests-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--sv2-disc-color, var(--accent));
  border-radius: 12px;
}
.sv2-bests-icon { flex-shrink: 0; margin-top: 1px; display: flex; opacity: .7; }
.sv2-bests-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv2-bests-label { font-size: 10px; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; }
.sv2-bests-val { font-size: 16px; font-weight: 700; line-height: 1.1; }
.sv2-bests-sub { font-size: 11px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

.sv2-clickable-card { cursor: pointer; }

@media (max-width: 900px) {
  .sv2-overview-grid { grid-template-columns: 1fr; gap: 14px; }
  .sv2-overview-sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
  }
}
@media (max-width: 640px) {
  .sv2-overview-grid { padding: 0 0 24px; }
  .sv2-overview-sidebar { grid-template-columns: 1fr; }
  .sv2-overview-hero { padding: 14px; }
  .sv2-overview-hero-inner { flex-direction: column; }
  .sv2-lat-act-map { height: 140px; }
  .sv2-bests-strip { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Sport v2 — Match tab (football team picker + payments)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Match tab layout ─────────────────────────────────────────────────────── */
/* Desktop: Players (left) + Payments (right) side by side, Teams full-width below.
   Mobile: single column, reflowed to Players → Teams → Payments so the primary
   pre-match flow (mark presence → generate teams) never has the Payments card
   (a post-match task) sitting in between. Markup order is Players/Teams/Payments;
   grid-template-areas places them regardless of DOM order. */
.sv2-match-tab {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-areas:
    "timer   timer"
    "players payments"
    "teams   teams";
  gap: 8px;
  padding: 10px 0;
  align-items: start;
}
.sv2-match-tab > .sv2-match-timer-card    { grid-area: timer; }
.sv2-match-tab > .sv2-match-card--players { grid-area: players; }
.sv2-match-tab > .sv2-match-teams-card    { grid-area: teams; }
.sv2-match-tab > .sv2-match-card--pay     { grid-area: payments; }

@media (max-width: 600px) {
  .sv2-match-tab {
    grid-template-columns: 1fr;
    grid-template-areas:
      "timer"
      "players"
      "teams"
      "payments";
  }
}

/* Card shells */
.sv2-match-card { padding: 9px 12px; }

/* Goalkeeper rotation timer */
.sv2-match-timer-card {
  --sv2-timer-accent: var(--layf-accent-coral, #fb6b5b);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-color: color-mix(in srgb, var(--sv2-timer-accent) 28%, var(--border));
  background:
    linear-gradient(115deg, color-mix(in srgb, #fff 92%, #dff8f4) 0%, color-mix(in srgb, #fff 91%, #fce7f3) 52%, color-mix(in srgb, #fff 91%, #ede9fe) 100%);
  overflow: hidden;
}
html[data-dark='true'] .sv2-match-timer-card {
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--surface) 90%, #0f766e) 0%, color-mix(in srgb, var(--surface) 91%, #be185d) 54%, color-mix(in srgb, var(--surface) 90%, #6d28d9) 100%);
}
.sv2-match-timer-card.is-boundary {
  animation: sv2-match-timer-boundary .8s ease;
}
@keyframes sv2-match-timer-boundary {
  0%, 100% { box-shadow: var(--shadow-card, 0 8px 24px rgba(17,24,39,.07)); }
  42% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--sv2-timer-accent) 20%, transparent), 0 12px 34px color-mix(in srgb, var(--sv2-timer-accent) 24%, transparent); }
}
.sv2-match-timer-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sv2-match-timer-ring {
  --sv2-match-timer-progress: 360deg;
  width: 112px;
  aspect-ratio: 1;
  flex: 0 0 112px;
  border-radius: 50%;
  padding: 7px;
  background: conic-gradient(
    from -90deg,
    var(--sv2-timer-accent) 0 var(--sv2-match-timer-progress),
    color-mix(in srgb, var(--border) 70%, transparent) var(--sv2-match-timer-progress) 360deg
  );
}
.sv2-match-timer-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent);
}
.sv2-match-timer-ring strong {
  color: var(--ink);
  font-size: 32px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.sv2-match-timer-ring span {
  margin-top: 6px;
  color: var(--ink2);
  font-size: 10px;
  font-weight: 750;
}
.sv2-match-timer-copy {
  min-width: 0;
}
.sv2-match-timer-kicker {
  display: block;
  color: var(--sv2-timer-accent);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0;
}
.sv2-match-timer-copy h3 {
  margin: 3px 0 8px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0;
}
.sv2-match-timer-signal {
  max-width: 260px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink2);
  font-size: 12px;
}
.sv2-match-timer-signal svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--sv2-disc-color, var(--accent));
}
.sv2-match-timer-signal span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv2-match-timer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.sv2-match-timer-actions button,
.sv2-match-timer-upload {
  min-height: 42px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}
.sv2-match-timer-actions svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}
.sv2-match-timer-primary,
.sv2-match-timer-secondary,
.sv2-match-timer-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.sv2-match-timer-primary {
  min-width: 104px;
  padding: 0 18px;
  border: 0;
  background: linear-gradient(100deg, #14b8a6 0%, #fb7185 55%, #8b5cf6 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(139,92,246,.18);
}
.sv2-match-timer-card.is-running .sv2-match-timer-primary {
  background: var(--ink);
}
.sv2-match-timer-secondary {
  padding: 0 13px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink);
}
.sv2-match-timer-icon-btn {
  width: 42px;
  padding: 0;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink2);
}
.sv2-match-timer-primary:hover,
.sv2-match-timer-secondary:hover,
.sv2-match-timer-icon-btn:hover {
  transform: translateY(-1px);
}
.sv2-match-timer-upload {
  user-select: none;
}
.sv2-match-timer-settings {
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.sv2-match-timer-settings summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink2);
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sv2-match-timer-settings summary::-webkit-details-marker {
  display: none;
}
.sv2-match-timer-settings summary svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--sv2-disc-color, var(--accent));
}
.sv2-match-timer-settings summary small {
  margin-left: auto;
  color: var(--ink3, var(--ink2));
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sv2-match-timer-settings summary::after {
  content: '›';
  color: var(--ink3, var(--ink2));
  font-size: 17px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .18s ease;
}
.sv2-match-timer-settings[open] summary::after {
  transform: rotate(-90deg);
}
.sv2-match-timer-settings-body {
  display: grid;
  gap: 10px;
  padding-top: 12px;
}
.sv2-match-timer-setting-row {
  display: grid;
  grid-template-columns: 132px minmax(120px, 1fr) 54px;
  align-items: center;
  gap: 12px;
}
.sv2-match-timer-setting-row label {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 760;
}
.sv2-match-timer-setting-row input {
  width: 100%;
  margin: 0;
  accent-color: var(--sv2-disc-color, var(--accent));
  cursor: pointer;
}
.sv2-match-timer-setting-row output {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Payments card — subtle green financial tint */
.sv2-match-card--pay {
  border-left: 3px solid #16a34a;
}
html[data-dark='true'] .sv2-match-card--pay { border-left-color: #22c55e; }

/* Payments collapse toggle */
button.sv2-match-pay-toggle,
button.sv2-match-players-toggle {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.sv2-match-players-subhead {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  padding-bottom: 4px;
  flex-wrap: nowrap;
  flex-wrap: wrap;
}
button.sv2-match-pay-toggle:hover { background: none; }
.sv2-match-pay-chevron {
  margin-left: auto;
  font-size: 18px;
  color: var(--ink2);
  transition: transform .2s ease;
  flex-shrink: 0;
  padding-left: 8px;
}
.sv2-match-pay-chevron.is-open { transform: rotate(180deg); }


/* Section header row */
.sv2-match-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  flex-wrap: wrap;
  min-height: 36px;
}
.sv2-match-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink2);
  flex-shrink: 0;
}

.sv2-match-playing-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink2);
  flex-shrink: 0;
}
.sv2-match-search-input {
  flex: 1;
  min-width: 0;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  font-family: inherit;
  outline: none;
}
.sv2-match-search-input:focus { border-color: var(--layf-accent-coral, #fb923c); }

/* Match command bar: one primary action, quiet supporting controls. */
.sv2-match-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.sv2-match-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, var(--surface2));
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(15,23,42,.035);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
}
.sv2-match-pill-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--ink2);
}
.sv2-match-pill-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft, #ede9fe));
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
  transform: translateY(-1px);
}

.sv2-match-newmatch-btn svg {
  color: #64748b;
}
.sv2-match-addplayer-btn svg {
  color: #0f9f8f;
}
.sv2-match-addplayer-btn.is-on {
  border-color: color-mix(in srgb, #0f9f8f 48%, var(--border));
  background: color-mix(in srgb, #0f9f8f 9%, var(--surface));
}

/* Player rows — ultra-compact single line */
.sv2-match-players-list { display: flex; flex-direction: column; }
.sv2-match-player-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
  border-bottom: 1px solid var(--border);
}
.sv2-match-player-row:last-child { border-bottom: none; }

/* Name as ghost button (tap to edit) */
.sv2-match-player-name-btn {
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  padding: 3px 4px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .12s;
}
.sv2-match-player-name-btn:hover { background: var(--surface2); }
.sv2-match-player-name-btn.is-absent {
  color: var(--ink2);
  font-weight: 400;
  opacity: .6;
}

/* Compact four-attribute player profile with a separate derived overall. */
.sv2-match-skill-summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-shrink: 0;
}
.sv2-match-skill-profile {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(25px, 1fr));
  align-items: center;
  min-width: 126px;
  padding: 3px 5px;
  border: 1px solid color-mix(in srgb, var(--sv2-disc-color, var(--accent)) 14%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--sv2-disc-color, var(--accent)) 4%, var(--surface));
  flex-shrink: 0;
}
.sv2-match-skill-profile > span {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.sv2-match-skill-profile > span:last-child { border-right: 0; }
.sv2-match-skill-profile i,
.sv2-match-team-attrs i {
  color: var(--ink3, var(--ink2));
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.sv2-match-skill-profile b {
  color: var(--ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sv2-match-skill-overall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sv2-disc-color, var(--accent));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Skill trend arrow */
.sv2-match-skill-trend {
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  margin-left: -2px;
  align-self: center;
}
.sv2-match-skill-trend--up   { color: #10b981; }
.sv2-match-skill-trend--down { color: #ef4444; }

/* Players card header row — toggle button + Poziomy + chevron always visible */
.sv2-match-players-header-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  min-height: 36px;
}
.sv2-match-players-header-row .sv2-match-players-toggle {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.sv2-match-chevron-btn {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sv2-match-skills-btn svg {
  color: var(--layf-accent-coral, #fb6b5b);
}
.sv2-match-skills-btn.is-on {
  border-color: color-mix(in srgb, var(--layf-accent-coral, #fb6b5b) 45%, var(--border));
  background: color-mix(in srgb, var(--layf-accent-coral, #fb6b5b) 8%, var(--surface));
}

/* Skill badge (used in edit row) */
.sv2-match-skill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  border-radius: 99px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Present toggle — tiny circle */
.sv2-match-toggle {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--ink3, var(--ink2));
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sv2-match-toggle.is-on {
  border-color: var(--mt-color, var(--sv2-disc-color, var(--accent)));
  background: var(--mt-bg, color-mix(in srgb, var(--sv2-disc-color, var(--accent)) 12%, transparent));
  color: var(--mt-color, var(--sv2-disc-color, var(--accent)));
}

/* Edit button per row */
.sv2-match-edit-btn {
  flex-shrink: 0;
  color: var(--ink3, var(--ink2));
  opacity: 0;
  padding: 2px 4px;
  border-radius: 5px;
  transition: opacity .15s;
}
.sv2-match-player-row:hover .sv2-match-edit-btn,
.sv2-match-edit-btn:focus { opacity: .7; }

/* Inline edit row */
.sv2-match-player-row--editing {
  flex-wrap: wrap;
  gap: 5px;
  background: var(--surface2);
  border-radius: 7px;
  padding: 6px 8px;
  margin: 2px 0;
  border-bottom: none;
}
.sv2-match-edit-input {
  flex: 1 1 100px;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-family: inherit;
}
.sv2-match-edit-input:focus { outline: none; border-color: var(--sv2-disc-color, var(--accent)); }
.sv2-match-skill-editor {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--sv2-disc-color, var(--accent)) 16%, var(--border));
  border-radius: 7px;
  background: var(--surface);
}
.sv2-match-skill-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--ink2);
  font-size: 10px;
  font-weight: 650;
}
.sv2-match-skill-editor-head strong {
  color: var(--ink);
  font-size: 10px;
}
.sv2-match-skill-editor-head output {
  color: var(--sv2-disc-color, var(--accent));
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.sv2-match-skill-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 14px;
}
.sv2-match-skill-editor-row {
  display: grid;
  grid-template-columns: 62px minmax(70px, 1fr) 18px;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ink2);
  font-size: 10px;
}
.sv2-match-skill-editor-row input {
  width: 100%;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}
.sv2-match-skill-editor-row output {
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sv2-match-edit-actions { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.sv2-match-edit-actions .btn { padding: 3px 7px; font-size: 11px; }
.sv2-match-delete-btn { opacity: .5; }
.sv2-match-delete-btn:hover { opacity: 1; color: var(--danger); }

/* Inline add form */
.sv2-match-add-form {
  background: var(--surface2);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sv2-match-add-input {
  width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-family: inherit;
  box-sizing: border-box;
}
.sv2-match-add-input:focus { outline: none; border-color: var(--sv2-disc-color, var(--accent)); }
.sv2-match-add-input.sv2-add-error { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }
.sv2-add-error-msg {
  font-size: 11px;
  color: var(--danger, #ef4444);
  margin: 3px 0 0;
}
@keyframes sv2-add-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(3px); }
}
.sv2-add-shake { animation: sv2-add-shake .35s ease; }
.sv2-match-add-actions { display: flex; justify-content: flex-end; gap: 5px; }
.sv2-match-add-actions .btn { padding: 3px 9px; font-size: 11px; }

/* Losuj drużyny is the primary command; inline reshuffle stays secondary. */
.sv2-match-generate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--layf-accent-coral, #fb6b5b) 40%, var(--border));
  background: color-mix(in srgb, var(--layf-accent-coral, #fb6b5b) 8%, var(--surface));
  color: var(--layf-accent-coral, #fb923c);
  font-size: 12px;
  font-weight: 760;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
  white-space: nowrap;
}
.sv2-match-generate-btn:hover {
  background: color-mix(in srgb, var(--layf-accent-coral, #fb6b5b) 14%, var(--surface));
  transform: translateY(-1px);
}
.sv2-match-pill-btn.sv2-match-generate-btn {
  border-color: transparent;
  background: linear-gradient(100deg, #14b8a6 0%, #fb7185 55%, #8b5cf6 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(139,92,246,.16);
}
.sv2-match-pill-btn.sv2-match-generate-btn svg {
  color: #fff;
}
.sv2-match-pill-btn.sv2-match-generate-btn:hover {
  border-color: transparent;
  background: linear-gradient(100deg, #0f9f90 0%, #f45f78 55%, #7c4ee5 100%);
  box-shadow: 0 10px 24px rgba(139,92,246,.22);
}
/* Inline reshuffle in teams card header */
.sv2-match-generate-btn--inline {
  padding: 3px 10px;
  border-radius: 7px;
  font-size: 11px;
  margin-left: auto;
}

/* Delta badge — shown when imbalance > 2 */
.sv2-match-team-delta {
  font-size: 10px;
  font-weight: 700;
  color: #d97706;
  background: rgba(217,119,6,.10);
  border: 1px solid rgba(217,119,6,.30);
  border-radius: 99px;
  padding: 1px 7px;
  flex-shrink: 0;
}

/* Teams grid */
.sv2-match-teams-card { padding: 9px 12px; }
.sv2-match-teams-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.sv2-match-team { border-radius: 8px; padding: 8px 10px; }

/* Czarni — genuinely dark */
.sv2-match-team--black {
  background: #1e293b;
  border: 1px solid #334155;
  color: #f1f5f9;
}
.sv2-match-team--black .sv2-match-team-name,
.sv2-match-team--black .sv2-match-team-player { color: #f1f5f9; }
.sv2-match-team--black .sv2-match-team-player {
  border-bottom-color: rgba(241,245,249,.10);
}
.sv2-match-team--black .sv2-match-team-sum { color: rgba(241,245,249,.6); }

/* Biali — clean white */
.sv2-match-team--white {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--ink);
}
html[data-dark='true'] .sv2-match-team--white {
  background: #cbd5e1;
  border-color: #94a3b8;
  color: #0f172a;
}
html[data-dark='true'] .sv2-match-team--white .sv2-match-team-name,
html[data-dark='true'] .sv2-match-team--white .sv2-match-team-player { color: #0f172a; }
html[data-dark='true'] .sv2-match-team--white .sv2-match-team-player { border-bottom-color: rgba(15,23,42,.12); }

.sv2-match-team-name {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sv2-match-team-player {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  font-size: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.sv2-match-team-player:last-child { border-bottom: none; }
.sv2-match-team-skill {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sv2-match-team-skill.is-black { color: rgba(241,245,249,.7); }
.sv2-match-team-sum {
  font-size: 9px;
  text-align: right;
  margin-top: 5px;
  opacity: .7;
}

/* Payment rows — financial colour coding */
.sv2-match-payment-list { display: flex; flex-direction: column; }
.sv2-match-payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 0;
  border-bottom: 1px solid var(--border);
}
.sv2-match-payment-row:last-child { border-bottom: none; }
.sv2-match-payment-name {
  font-size: 12px;
  font-weight: 500;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv2-match-payment-name.is-paid   { color: var(--ink); }
.sv2-match-payment-name.is-unpaid { color: var(--ink2); }

/* Payment circle button — compact, same size as present toggle */
.sv2-match-pay-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.sv2-match-pay-btn.is-paid {
  border-color: #16a34a;
  background: rgba(22,163,74,.12);
  color: #16a34a;
}
/* Neutral (unpaid default) — calm grey, no alarm */
.sv2-match-pay-btn.is-neutral {
  border-color: var(--border);
  background: transparent;
  color: var(--ink3, var(--ink2));
  font-size: 13px;
}
html[data-dark='true'] .sv2-match-pay-btn.is-neutral {
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.35);
}

/* Team name inline strength badge */
.sv2-match-team-name {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sv2-match-team-count {
  font-size: 11px;
  font-weight: 500;
  opacity: .55;
  margin-left: 6px;
  white-space: nowrap;
  align-self: center;
}
.sv2-match-team-name-strength {
  font-size: 12px;
  font-weight: 700;
  opacity: .9;
  margin-left: auto;
  line-height: 1;
}
.sv2-match-team-attrs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 2px 0 7px;
  padding: 5px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
}
.sv2-match-team--white .sv2-match-team-attrs {
  background: color-mix(in srgb, var(--surface2) 78%, transparent);
}
.sv2-match-team-attrs > span {
  display: grid;
  justify-items: center;
  gap: 2px;
  border-right: 1px solid currentColor;
  border-right-color: rgba(148, 163, 184, .2);
}
.sv2-match-team-attrs > span:last-child { border-right: 0; }
.sv2-match-team-attrs i {
  color: inherit;
  opacity: .58;
  letter-spacing: 0;
  white-space: nowrap;
}
.sv2-match-team-attrs b {
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sv2-match-team-strength-label {
  font-size: 18px;
  font-weight: 800;
  opacity: .75;
  margin-left: auto;
  white-space: nowrap;
  line-height: 1;
}

/* Drag handle in team player rows */
.sv2-match-team-drag-handle {
  font-size: 11px;
  opacity: .35;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  margin-right: 2px;
}
.sv2-match-team-player {
  cursor: grab;
}
.sv2-match-team-player.is-dragging {
  opacity: .4;
  cursor: grabbing;
}
.sv2-match-team-player.is-swap-selected {
  background: color-mix(in srgb, var(--layf-accent-coral, #fb923c) 14%, transparent);
  border-radius: 6px;
  outline: 1.5px solid var(--layf-accent-coral, #fb923c);
  outline-offset: -1px;
}
/* Inline hint below selected player */
.sv2-match-swap-hint {
  font-size: 10px;
  color: var(--layf-accent-coral, #fb923c);
  padding: 2px 0 4px 18px;
  font-weight: 500;
}
/* Idle tip below teams grid */
.sv2-match-swap-tip {
  font-size: 10px;
  color: var(--ink2);
  text-align: center;
  margin: 6px 0 0;
  opacity: .7;
}
.sv2-match-team-player-name {
  flex: 1;
}
[data-sv2-match-drop-zone].is-drag-over {
  box-shadow: 0 0 0 2px #fb923c, 0 0 8px rgba(236,72,153,.3);
  border-radius: 10px;
  outline: none;
}
/* White team: match player name color for all labels */
.sv2-match-team--white .sv2-match-team-skill { color: inherit !important; opacity: .75; }
.sv2-match-team--white .sv2-match-team-count { opacity: .65; color: inherit; }
.sv2-match-team--white .sv2-match-team-name-strength { color: inherit; }

/* Strength split bar */
.sv2-match-strength-bar-wrap {
  position: relative;
  padding: 12px 0 10px;
}
.sv2-match-strength-bar {
  display: flex;
  height: 5px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--border);
}
.sv2-match-strength-bar__ball {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
}
.sv2-match-strength-bar__black {
  background: #334155;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  transition: width .4s ease;
  min-width: 8px;
}
.sv2-match-strength-bar__white {
  background: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  transition: width .4s ease;
  min-width: 8px;
  opacity: .75;
}
.sv2-match-strength-bar__label {
  position: absolute;
  top: 10px;
  font-size: 9px;
  font-weight: 700;
  color: var(--ink2);
  white-space: nowrap;
}
.sv2-match-strength-bar__label { left: 0; }
.sv2-match-strength-bar__label--right { left: auto; right: 0; }

/* Pay summary badge */
.sv2-match-pay-summary {
  font-size: 10px;
  font-weight: 600;
  margin-left: auto;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
}
.sv2-match-pay-summary.is-all-paid { color: #16a34a; }

/* Empty state */
.sv2-match-empty {
  padding: 6px 0;
  font-size: 11px;
  color: var(--ink2);
  text-align: center;
}

/* Stage note */
.sv2-match-stage-note {
  font-size: 10px;
  color: var(--ink3, var(--ink2));
  text-align: center;
  margin: 0;
  opacity: .55;
}

@media (max-width: 600px) {
  .sv2-match-teams-grid { grid-template-columns: 1fr; }
  .sv2-match-player-row--editing { flex-direction: column; align-items: stretch; }
  .sv2-match-edit-actions { justify-content: flex-end; }
  .sv2-match-skill-editor-grid { grid-template-columns: 1fr; }
}

/* ── Mecz mobile readability (must be after base styles to win cascade) ── */
@media (max-width: 640px) {
  .sv2-match-timer-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }
  .sv2-match-timer-main {
    gap: 13px;
  }
  .sv2-match-timer-ring {
    width: 96px;
    flex-basis: 96px;
    padding: 6px;
  }
  .sv2-match-timer-ring strong {
    font-size: 29px;
  }
  .sv2-match-timer-copy h3 {
    font-size: 19px;
  }
  .sv2-match-timer-actions {
    display: grid;
    grid-template-columns: minmax(94px, 1.35fr) 44px 44px minmax(64px, .8fr);
    gap: 6px;
  }
  .sv2-match-timer-primary {
    min-width: 0;
    padding: 0 12px;
  }
  .sv2-match-timer-secondary {
    min-width: 0;
    padding: 0 9px;
  }
  .sv2-match-timer-upload {
    grid-column: 1 / -1;
  }
  .sv2-match-timer-card.has-custom-signal .sv2-match-timer-upload {
    grid-column: 1 / 4;
  }
  .sv2-match-timer-clear {
    grid-column: 4;
  }
  .sv2-match-timer-actions button,
  .sv2-match-timer-upload {
    min-height: 44px;
  }
  .sv2-match-timer-settings {
    padding-top: 9px;
  }
  .sv2-match-timer-settings summary {
    min-height: 32px;
  }
  .sv2-match-timer-settings-body {
    padding-top: 9px;
  }
  .sv2-match-timer-setting-row {
    grid-template-columns: 1fr auto;
    gap: 7px 10px;
  }
  .sv2-match-timer-setting-row input {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 28px;
  }
  .sv2-match-timer-setting-row output {
    grid-column: 2;
    grid-row: 1;
  }
  .sv2-match-player-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 5px 8px;
    padding: 8px 0;
  }
  .sv2-match-player-name-btn {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    font-size: 14px;
    padding: 2px 4px;
  }
  .sv2-match-skill-summary {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    max-width: 100%;
  }
  .sv2-match-skill-profile { min-width: 116px; padding-inline: 3px; }
  .sv2-match-skill-profile i { font-size: 7px; }
  .sv2-match-skill-overall { width: 26px; height: 26px; font-size: 10px; }

  /* Presence "+" toggle — the single most-used control in this tab.
     Bumped well past the generic 36px pass to a full 44px tap target. */
  .sv2-match-toggle {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    font-size: 19px;
    border-width: 2px;
    align-self: center;
  }
  .sv2-match-player-row--editing {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .sv2-match-skill-num { font-size: 16px; }
  .sv2-match-team-player { padding: 8px 0; font-size: 14px; cursor: pointer; }
  .sv2-match-team-drag-handle { font-size: 13px; cursor: pointer; }
  .sv2-match-card { padding: 10px 14px; }

  .sv2-match-action-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sv2-match-pill-btn { padding: 0 10px; font-size: 12px; min-height: 44px; }
  .sv2-match-search-input { padding: 8px 10px; font-size: 14px; }

  /* Inline reshuffle in the Teams card stays a smaller secondary action. */
  .sv2-match-generate-btn--inline { padding: 6px 14px; font-size: 12px; }
}

/* ── Forecast panel sibling fix ───────────────────────────────────────────────
   .dashboard-forecast-panel is a SIBLING of .dashboard-briefing-card, not a
   child, so the existing child selectors never apply to it.
   These sibling (~) rules fix forecast text color for dark-sky conditions.    */

/* Dark sky → light text on forecast temps */
.dashboard-briefing-card.dashboard-weather-night ~ .dashboard-forecast-panel .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-night ~ .dashboard-forecast-panel .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-night ~ .dashboard-forecast-panel .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-night ~ .dashboard-forecast-panel .dashboard-forecast-item small,
.dashboard-briefing-card.dashboard-weather-rain  ~ .dashboard-forecast-panel .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-rain  ~ .dashboard-forecast-panel .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-rain  ~ .dashboard-forecast-panel .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-rain  ~ .dashboard-forecast-panel .dashboard-forecast-item small,
.dashboard-briefing-card.dashboard-weather-storm ~ .dashboard-forecast-panel .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-storm ~ .dashboard-forecast-panel .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-storm ~ .dashboard-forecast-panel .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-storm ~ .dashboard-forecast-panel .dashboard-forecast-item small {
  color: rgba(248, 250, 252, .90) !important;
}

/* Separator lines between forecast items on dark sky */
.dashboard-briefing-card.dashboard-weather-night ~ .dashboard-forecast-panel .dashboard-forecast-item + .dashboard-forecast-item::before,
.dashboard-briefing-card.dashboard-weather-rain  ~ .dashboard-forecast-panel .dashboard-forecast-item + .dashboard-forecast-item::before,
.dashboard-briefing-card.dashboard-weather-storm ~ .dashboard-forecast-panel .dashboard-forecast-item + .dashboard-forecast-item::before {
  background: rgba(255, 255, 255, .15) !important;
}

/* Light sky (clear/partly/cloudy/fog/snow) → ensure readable dark text */
.dashboard-briefing-card.dashboard-weather-clear  ~ .dashboard-forecast-panel .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-clear  ~ .dashboard-forecast-panel .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-clear  ~ .dashboard-forecast-panel .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-clear  ~ .dashboard-forecast-panel .dashboard-forecast-item small,
.dashboard-briefing-card.dashboard-weather-partly ~ .dashboard-forecast-panel .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-partly ~ .dashboard-forecast-panel .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-partly ~ .dashboard-forecast-panel .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-partly ~ .dashboard-forecast-panel .dashboard-forecast-item small,
.dashboard-briefing-card.dashboard-weather-cloudy ~ .dashboard-forecast-panel .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-cloudy ~ .dashboard-forecast-panel .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-cloudy ~ .dashboard-forecast-panel .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-cloudy ~ .dashboard-forecast-panel .dashboard-forecast-item small,
.dashboard-briefing-card.dashboard-weather-fog   ~ .dashboard-forecast-panel .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-fog   ~ .dashboard-forecast-panel .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-fog   ~ .dashboard-forecast-panel .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-fog   ~ .dashboard-forecast-panel .dashboard-forecast-item small,
.dashboard-briefing-card.dashboard-weather-snow  ~ .dashboard-forecast-panel .dashboard-forecast-item,
.dashboard-briefing-card.dashboard-weather-snow  ~ .dashboard-forecast-panel .dashboard-forecast-item strong,
.dashboard-briefing-card.dashboard-weather-snow  ~ .dashboard-forecast-panel .dashboard-forecast-item em,
.dashboard-briefing-card.dashboard-weather-snow  ~ .dashboard-forecast-panel .dashboard-forecast-item small {
  color: rgba(15, 23, 42, .80) !important;
}

/* ── Post-login brand transition ──────────────────────────────────────────────
   Plays once after a successful sign-in. Skipped on refresh (sessionStorage).
   Skipped entirely when prefers-reduced-motion is set.                        */

#layf-login-transition {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: llt-reveal-app 440ms cubic-bezier(.22, 1, .36, 1) 1780ms both;
}

/* Quiet white field with a restrained Layf aura. */
.llt-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(139, 124, 246, .09), transparent 34%),
    radial-gradient(circle at 44% 52%, rgba(249, 168, 212, .08), transparent 42%),
    #fbfbfd;
}

.llt-aura {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 69%);
  opacity: 0;
  transform: scale(.72);
  animation: llt-aura-in 900ms cubic-bezier(.22, 1, .36, 1) 80ms both;
}

/* Content wrapper */
.llt-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Canonical Layf mark: the L draws first, then the dot lands once. */
.llt-icon-wrap {
  width: 112px;
  height: 112px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 24, 39, .045);
  box-shadow:
    0 24px 70px rgba(93, 75, 160, .11),
    0 4px 16px rgba(17, 24, 39, .055);
  animation: llt-icon-in 520ms cubic-bezier(.22, 1, .36, 1) 80ms both;
}

.llt-icon-mark {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.llt-icon-path {
  fill: none;
  stroke: #111827;
  stroke-width: 5.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 74;
  stroke-dashoffset: 74;
  animation: llt-draw-mark 560ms cubic-bezier(.65, 0, .35, 1) 260ms forwards;
}

.llt-icon-dot {
  fill: #8b7cf6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: llt-dot-land 560ms cubic-bezier(.2, .9, .25, 1.25) 720ms both;
}

/* Text */
.llt-text {
  text-align: center;
  color: #111827;
}

.llt-name {
  margin: 0;
  font-size: clamp(25px, 4vw, 31px);
  font-weight: 620;
  letter-spacing: -.035em;
  line-height: 1.2;
  opacity: 0;
  animation: llt-text-in 420ms cubic-bezier(.22, 1, .36, 1) 900ms both;
}

.llt-sub {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 430;
  color: #73798a;
  opacity: 0;
  animation: llt-text-in 420ms cubic-bezier(.22, 1, .36, 1) 1040ms both;
}

/* ── Keyframes ── */

@keyframes llt-reveal-app {
  from { opacity: 1; filter: blur(0); }
  to   { opacity: 0; filter: blur(5px); pointer-events: none; }
}

@keyframes llt-icon-in {
  from { opacity: 0; transform: translateY(8px) scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes llt-draw-mark {
  to { stroke-dashoffset: 0; }
}

@keyframes llt-dot-land {
  0%   { opacity: 0; transform: translateY(-22px) scale(.72); }
  48%  { opacity: 1; transform: translateY(3px) scale(1.12); }
  68%  { opacity: 1; transform: translateY(-2px) scale(.97); }
  84%  { opacity: 1; transform: translateY(1px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes llt-text-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes llt-aura-in {
  from { opacity: 0; transform: scale(.72); }
  to   { opacity: 1; transform: scale(1); }
}

#layf-login-transition.is-reduced-motion {
  animation: llt-reveal-app 220ms ease 100ms both;
}

#layf-login-transition.is-reduced-motion .llt-aura,
#layf-login-transition.is-reduced-motion .llt-icon-wrap,
#layf-login-transition.is-reduced-motion .llt-icon-path,
#layf-login-transition.is-reduced-motion .llt-icon-dot,
#layf-login-transition.is-reduced-motion .llt-name,
#layf-login-transition.is-reduced-motion .llt-sub {
  animation: none;
  opacity: 1;
  transform: none;
  stroke-dashoffset: 0;
}

/* ── Dashboard customize bar & modal ─────────────────────────────────────────*/

.dash-customize-bar {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

.dash-customize-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink3, #9ca3af);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 6px 12px;
  border-radius: 20px;
  transition: color .15s, background .15s;
}

.dash-customize-btn:hover {
  color: var(--ink2);
  background: var(--surface2, rgba(0,0,0,.04));
}

/* Customize modal content */
.dash-cust-hint {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.5;
}

.dash-cust-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-cust-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}

.dash-cust-row:last-child {
  border-bottom: none;
}

.dash-cust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface2, rgba(0,0,0,.04));
  color: var(--ink2);
  flex-shrink: 0;
}

.dash-cust-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

/* Toggle switch */
.dash-toggle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.dash-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.dash-toggle-track {
  display: flex;
  align-items: center;
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: var(--border, #e5e7eb);
  transition: background .2s;
  padding: 2px;
}

.dash-toggle-input:checked + .dash-toggle-track {
  background: var(--accent, #7c5cfc);
}

.dash-toggle-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: transform .2s cubic-bezier(.34,1.4,.64,1);
}

.dash-toggle-input:checked + .dash-toggle-track .dash-toggle-thumb {
  transform: translateX(18px);
}

.dash-toggle-input:focus-visible + .dash-toggle-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Push notifications — Settings section ───────────────────────────────── */

.settings-push-panel {}

.settings-push-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 6px;
}

.settings-push-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.settings-push-status {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--surface2, #f3f4f6);
}

.settings-push-status--granted {
  color: #166534;
  background: #dcfce7;
}

html[data-dark='true'] .settings-push-status--granted {
  color: #86efac;
  background: rgba(134, 239, 172, .12);
}

.settings-push-status--denied {
  color: #991b1b;
  background: #fee2e2;
}

html[data-dark='true'] .settings-push-status--denied {
  color: #fca5a5;
  background: rgba(252, 165, 165, .12);
}

.settings-push-denied-hint {
  font-size: 12px;
  color: var(--ink2);
  margin-top: 4px;
}

.settings-push-body {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-push-sub-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink2);
  margin: 0;
}

.settings-push-modules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.settings-push-module-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}

.settings-push-module-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ─── Push notifications — In-app slide-in banner ────────────────────────── */

#layf-push-banners {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
  width: calc(100vw - 32px);
}

.layf-push-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(17,24,56,.08));
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.14);
  pointer-events: all;
  animation: layf-banner-in .28s cubic-bezier(.34,1.4,.64,1);
  cursor: pointer;
}

html[data-dark='true'] .layf-push-banner {
  background: var(--surface, #1e1e2e);
  border-color: var(--border, rgba(255,255,255,.1));
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

.layf-push-banner--exit {
  animation: layf-banner-out .25s ease forwards;
}

@keyframes layf-banner-in {
  from { opacity: 0; transform: translateX(40px) scale(.95); }
  to   { opacity: 1; transform: translateX(0)   scale(1); }
}

@keyframes layf-banner-out {
  from { opacity: 1; transform: translateX(0)   scale(1); }
  to   { opacity: 0; transform: translateX(40px) scale(.95); }
}

@media (prefers-reduced-motion: reduce) {
  .layf-push-banner { animation: none; }
  .layf-push-banner--exit { animation: none; opacity: 0; }
}

.layf-push-banner__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
}

.layf-push-banner__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.layf-push-banner__content {
  flex: 1;
  min-width: 0;
}

.layf-push-banner__title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layf-push-banner__body {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.layf-push-banner__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.layf-push-banner__close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface2, #f3f4f6);
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--ink2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s;
}

.layf-push-banner__close:hover {
  background: var(--accent-lt, rgba(124,92,252,.1));
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES MODULE (modules/services.js) — Stage 1 Draft UI
   ═══════════════════════════════════════════════════════════════════════════ */

.svc-page {
  width: 100%;
}

/* Header */
.svc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 0;
  flex-wrap: wrap;
}
.svc-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.svc-page-title { margin: 0 0 2px; }
.svc-subtitle { margin: 0; font-size: 13px; color: var(--ink2); }

/* Module-level tabs */
.svc-module-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 20px;
}
.svc-module-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  font-size: .83rem;
  font-weight: 500;
  color: var(--ink2);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.svc-module-tab:hover { background: var(--surface); border-color: var(--ink3); color: var(--ink); }
.svc-module-tab.is-active {
  background: color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 58%, var(--border));
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 3px 9px color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 14%, transparent);
}
.svc-tab-body { padding: 0; }

/* Property filter chips */
.svc-prop-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.svc-prop-chip {
  background: var(--surface2, #f3f4f6);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink2);
  cursor: pointer;
  transition: all .15s;
}
.svc-prop-chip:hover { color: var(--ink); border-color: var(--accent); }
.svc-prop-chip.is-active {
  background: var(--layf-accent-soft-bg, rgba(124,92,252,.08));
  border-color: var(--layf-accent-border, rgba(124,92,252,.25));
  color: var(--ink);
  font-weight: 600;
}

/* Type filter tabs */
.svc-type-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; }
.svc-type-tab {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink2);
  cursor: pointer;
  transition: all .15s;
}
.svc-type-tab:hover { background: var(--surface2, #f3f4f6); color: var(--ink); }
.svc-type-tab.is-active {
  background: var(--layf-accent-soft-bg, rgba(124,92,252,.08));
  border-color: var(--layf-accent-border, rgba(124,92,252,.25));
  color: var(--ink);
  font-weight: 600;
}

/* Stats grid */
.svc-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 900px) { .svc-stats-grid { grid-template-columns: repeat(2, 1fr); } }

.svc-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.svc-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.svc-stat-icon--info    { background: #e0f2fe; color: #0ea5e9; }
.svc-stat-icon--warn    { background: #fef3c7; color: #d97706; }
.svc-stat-icon--ok      { background: #f0fdf4; color: #16a34a; }
.svc-stat-icon--neutral { background: #ede9fe; color: #8b5cf6; }
.svc-stat-urgent        { color: var(--danger, #ef4444); font-weight: 600; }
.svc-stat-label {
  font-size: 10.5px;
  color: var(--ink2);
  font-weight: 600;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.svc-stat-value { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.svc-stat-sub   { font-size: 11px; color: var(--ink2); margin-top: 2px; }

/* List header */
.svc-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
  flex-wrap: wrap;
}
.svc-list-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.svc-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2, #f3f4f6);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  flex: 0 1 280px;
  min-width: 160px;
  color: var(--ink2);
}
.svc-search-icon { flex-shrink: 0; opacity: .6; }
.svc-search-input { border: none; background: none; outline: none; font-size: 13px; color: var(--ink); width: 100%; }
.svc-search-input::placeholder { color: var(--ink3, var(--ink2)); opacity: .7; }

/* Service table */
.svc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 28px;
  -webkit-overflow-scrolling: touch;
}
.svc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 860px;
}
.svc-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--surface2, #f8f9fa);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.svc-table thead th:first-child { border-radius: 10px 0 0 0; }
.svc-table thead th:last-child  { border-radius: 0 10px 0 0; }
.svc-table tbody tr { border-bottom: 1px solid var(--border); }
.svc-table tbody tr:last-child { border-bottom: none; }
.svc-table td { padding: 12px 14px; vertical-align: middle; }
.svc-row { cursor: pointer; transition: background .12s; }
.svc-row:hover { background: var(--surface2, #f8f9fa); }
.svc-row.is-done { background: #f0fdf4; }
.svc-row.is-done:hover { background: #dcfce7; }
.svc-row.is-high { background: #fffbeb; }
.svc-row.is-high:hover { background: #fef3c7; }
.svc-row.is-urgent { background: #fff1f2; }
.svc-row.is-urgent:hover { background: #ffe4e6; }

html[data-dark='true'] .svc-page .svc-row.is-high {
  background: color-mix(in srgb, #c68a27 16%, var(--surface)) !important;
  border-bottom-color: color-mix(in srgb, #c68a27 24%, var(--border)) !important;
}

html[data-dark='true'] .svc-page .svc-row.is-high:hover {
  background: color-mix(in srgb, #c68a27 24%, var(--surface)) !important;
}

html[data-dark='true'] .svc-page .svc-row.is-high td,
html[data-dark='true'] .svc-page .svc-row.is-high .svc-row-name,
html[data-dark='true'] .svc-page .svc-row.is-high .svc-prop-name {
  color: var(--ink) !important;
}

html[data-dark='true'] .svc-page .svc-row.is-high .svc-cell-contractor,
html[data-dark='true'] .svc-page .svc-row.is-high .svc-cell-date,
html[data-dark='true'] .svc-page .svc-row.is-high .svc-settlement-cell,
html[data-dark='true'] .svc-page .svc-row.is-high .svc-settlement-cell small,
html[data-dark='true'] .svc-page .svc-row.is-high .svc-area-name,
html[data-dark='true'] .svc-page .svc-row.is-high .svc-no-val {
  color: var(--ink2) !important;
}

/* Priority rows must stay legible in dark mode. The light danger background
   is intentionally used only by the daylight theme. */
html[data-dark='true'] .svc-row.is-urgent {
  background: color-mix(in srgb, #dc2626 15%, var(--surface));
}

html[data-dark='true'] .svc-row.is-urgent:hover {
  background: color-mix(in srgb, #dc2626 23%, var(--surface));
}

html[data-dark='true'] .svc-row.is-urgent td { color: var(--ink); }

/* Name column: auto layout naturally gives it the most space because other
   columns have short content (dates, short labels). We just prevent the
   short columns from expanding and let the name take what's left.
   white-space: nowrap on data cells of secondary columns keeps them tight. */
.svc-table td:nth-child(2),
.svc-table td:nth-child(6),
.svc-table td:nth-child(7),
.svc-table td:nth-child(8) { white-space: nowrap; }

.svc-settlement-cell { display: grid; gap: 2px; min-width: 138px; }
.svc-settlement-cell span { color: var(--ink2); font-size: 11px; }
.svc-settlement-cell strong { color: var(--ink); font-weight: 750; }
.svc-settlement-cell small { color: var(--ink3, var(--ink2)); font-size: 10px; }
.svc-settlement-cell.is-empty { opacity: .72; }

.svc-settlement-draft {
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--surface) 94%, var(--accent-lt));
  border-radius: 8px;
}
.svc-settlement-draft-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.svc-draft-kicker { display: block; color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.svc-settlement-draft h2 { margin: 4px 0 2px; font-size: 17px; line-height: 1.2; }
.svc-settlement-draft p { margin: 0; color: var(--ink2); font-size: 12px; }
.svc-draft-badge { display: inline-flex; align-items: center; white-space: nowrap; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: 999px; color: var(--accent); font-size: 10px; font-weight: 750; }
.svc-settlement-draft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.svc-settlement-draft-item { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.svc-settlement-draft-item span { display: block; color: var(--ink2); font-size: 11px; }
.svc-settlement-draft-item strong { display: block; margin-top: 5px; color: var(--ink); font-size: 18px; line-height: 1.1; }
.svc-settlement-draft-item small { display: block; margin-top: 5px; color: var(--ink3, var(--ink2)); font-size: 10px; }
.svc-settlement-draft-item.is-paid strong { color: #15803d; }
.svc-settlement-draft-item.is-due strong { color: #b45309; }

.svc-cell-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 200px;   /* floor so column never collapses below a readable width */
}
/* Name text: 3-line clamp so even very long service descriptions stay compact.
   Works correctly because auto table layout gives this column 300-500px. */
.svc-row-name {
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  /* Fallback for non-webkit (shows all text, still fine) */
}
.svc-type-chip {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.svc-row-name { font-weight: 500; color: var(--ink); }
.svc-pri-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.svc-pri-urgent { background: #fee2e2; color: #dc2626; }
.svc-pri-high   { background: #fef3c7; color: #d97706; }
html[data-dark='true'] .svc-pri-urgent { background: rgba(220, 38, 38, .22); color: #fecaca; }
html[data-dark='true'] .svc-pri-high   { background: rgba(198, 138, 39, .2); color: #f6cf8a; }
.svc-type-label { font-size: 12px; font-weight: 500; white-space: nowrap; }
.svc-cell-location { display: flex; flex-direction: column; gap: 1px; }
.svc-prop-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.svc-area-name { font-size: 11.5px; color: var(--ink2); }
.svc-cell-contractor { color: var(--ink2); font-size: 12.5px; }
.svc-cell-date { color: var(--ink2); font-size: 12px; white-space: nowrap; }
.svc-no-val { color: var(--ink3, var(--ink2)); opacity: .5; }

.svc-status-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.svc-row-menu { opacity: 0; transition: opacity .12s; }
.svc-row:hover .svc-row-menu { opacity: 1; }

/* ── Services: mobile card view ─────────────────────────────────────────────
   Converts table rows into compact cards. Name (key info) gets full width at
   top. Type + location + status appear inline below. Actions always visible.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .svc-table-wrap {
    overflow: visible;
    border: none;
    border-radius: 0;
    margin-bottom: 12px;
  }
  .svc-table         { display: block; min-width: 0; width: 100%; }
  .svc-table thead   { display: none; }
  .svc-table tbody   { display: flex; flex-direction: column; gap: 8px; }

  /* Card layout: flex-wrap lets row-1 (name) and row-2 (meta) sit on separate lines */
  .svc-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background .12s;
    gap: 0;
  }
  .svc-table tbody tr.is-done   { background: #f0fdf4; border-color: #bbf7d0; }
  .svc-table tbody tr.is-high   { background: #fffbeb; border-color: #fde68a; }
  .svc-table tbody tr.is-urgent { background: #fff1f2; border-color: #fca5a5; }
  .svc-table tbody tr:hover     { background: var(--surface2); }

  /* Row 1: name cell — takes full width minus action buttons */
  .svc-table td:nth-child(1) {
    order: 1;
    flex: 0 0 calc(100% - 56px);
    max-width: calc(100% - 56px);
    padding: 0 0 6px 0;
  }
  .svc-cell-title { flex-wrap: wrap; row-gap: 3px; min-width: 0; }
  .svc-row-name   { -webkit-line-clamp: unset; white-space: normal; }

  /* Actions: absolute top-right */
  .svc-table td:nth-child(9) {
    order: 2;
    position: absolute;
    top: 8px; right: 6px;
    display: flex;
    gap: 2px;
    padding: 0;
  }
  .svc-row-menu { opacity: 1 !important; }

  /* Row 2: type label */
  .svc-table td:nth-child(3) {
    order: 3;
    flex: 0 0 auto;
    padding: 0 4px 0 0;
  }
  .svc-type-label { font-size: 11px; }

  /* Row 2: separator + location */
  .svc-table td:nth-child(4) {
    order: 4;
    flex: 0 0 auto;
    padding: 0;
  }
  .svc-table td:nth-child(4)::before {
    content: '·';
    margin: 0 5px;
    opacity: .35;
    color: var(--ink2);
  }
  .svc-prop-name  { font-size: 11px; }
  .svc-area-name  { display: none; }

  /* Row 2: status badge pushed to right */
  .svc-table td:nth-child(6) {
    order: 5;
    flex: 1 0 auto;
    text-align: right;
    padding: 0;
  }
  .svc-status-badge { font-size: 11px; padding: 2px 7px; }

  /* Hide: contractor, due date, next review */
  .svc-table td:nth-child(2) {
    order: 6;
    flex: 1 0 100%;
    padding: 7px 0 0;
  }
  .svc-settlement-cell { min-width: 0; grid-template-columns: auto 1fr; column-gap: 6px; align-items: baseline; }
  .svc-settlement-cell small { grid-column: 1 / -1; }

  .svc-table td:nth-child(5),
  .svc-table td:nth-child(7),
  .svc-table td:nth-child(8) { display: none; }
}

/* ── Services: compact filters on mobile ── */
@media (max-width: 680px) {
  .svc-prop-filter { gap: 5px; margin-bottom: 10px; }
  .svc-prop-chip   { padding: 3px 10px; font-size: 11.5px; }
  .svc-type-tabs   { gap: 3px; margin-bottom: 14px; }
  .svc-type-tab    { padding: 4px 9px; font-size: 11.5px; }
  .svc-tab-body    { padding: 14px 0 0; }
  .svc-stats-grid  { gap: 8px; margin-bottom: 16px; }
  .svc-stat        { padding: 10px 12px; gap: 10px; }
  .svc-stat-value  { font-size: 18px; }
  .svc-list-header { flex-direction: column; align-items: stretch; }
  .svc-search-wrap { flex: none; width: 100%; max-width: none; box-sizing: border-box; }
  .svc-settlement-draft { padding: 14px; }
  .svc-settlement-draft-heading { gap: 10px; }
  .svc-settlement-draft h2 { font-size: 16px; }
  .svc-settlement-draft-grid { grid-template-columns: 1fr; gap: 7px; }
  .svc-settlement-draft-item { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; padding: 10px 11px; }
  .svc-settlement-draft-item strong { margin: 0; font-size: 16px; text-align: right; }
  .svc-settlement-draft-item small { grid-column: 1 / -1; margin-top: 0; }
  .svc-settlement-mini-grid { grid-template-columns: 1fr; gap: 5px; }
  .svc-settlement-mini-grid > div { display: flex; justify-content: space-between; gap: 12px; }
  .svc-settlement-mini-grid strong { margin-top: 0; }
  .svc-settlement-detail-head { align-items: flex-start; }
  .svc-settlement-history-row { align-items: flex-start; }
}

/* ── Upcoming strip */
.svc-upcoming-section { margin-top: 4px; }
.svc-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink2);
  margin-bottom: 12px;
}
.svc-upcoming-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.svc-upcoming-item {
  flex-shrink: 0;
  min-width: 148px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.svc-upcoming-item.is-overdue { border-color: #fca5a5; background: #fff8f8; }
.svc-upcoming-date { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.svc-upcoming-title { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.svc-upcoming-sub { font-size: 11px; color: var(--ink2); }
.svc-upcoming-days { font-size: 11px; font-weight: 600; color: var(--ink2); margin-top: 4px; }
.svc-upcoming-days.is-overdue { color: #dc2626; }

/* Empty state */
.svc-empty { text-align: center; padding: 48px 24px; }
.svc-empty-icon  { font-size: 36px; margin-bottom: 12px; }
.svc-empty-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.svc-empty-sub   { font-size: 13px; color: var(--ink2); max-width: 360px; margin: 0 auto 16px; }

/* Placeholder tabs */
.svc-placeholder-tab { padding: 8px 0; }

/* Areas tab */
.svc-areas-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.svc-areas-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.svc-area-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 14px !important;
}
.svc-area-row-hint { opacity: .5; }
.svc-area-type-chip {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.svc-area-type-apartment { background: #e0f2fe; color: #0ea5e9; }
.svc-area-type-utility   { background: #fef3c7; color: #d97706; }
.svc-area-type-common    { background: #f0fdf4; color: #16a34a; }
.svc-area-type-outdoor   { background: #ede9fe; color: #8b5cf6; }
.svc-area-row-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.svc-area-row-prop { font-size: 11.5px; color: var(--ink2); margin-left: auto; }

/* Sharing preview */
.svc-sharing-preview { display: flex; gap: 20px; align-items: flex-start; max-width: 560px; }
.svc-sharing-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--layf-accent-soft-bg, rgba(124,92,252,.08));
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.svc-sharing-body { flex: 1; }
.svc-sharing-features { display: flex; flex-direction: column; gap: 6px; }
.svc-sharing-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink2);
}
.svc-sharing-feature svg { color: #16a34a; flex-shrink: 0; }

/* ── Stage 2a: Modal overlay ─────────────────────────────────────────────── */
.svc-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.svc-modal {
  background: var(--surface);
  border-radius: 16px;
  width: 100%; max-width: 640px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  position: relative;
}
.svc-modal-detail { max-width: 700px; }
.svc-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.svc-modal-title { font-size: 16px; font-weight: 650; color: var(--ink); margin: 0; }
.svc-detail-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.svc-modal-body {
  flex: 1; overflow-y: auto;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.svc-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Stage 2a: Form elements ─────────────────────────────────────────────── */
.svc-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.svc-field { display: flex; flex-direction: column; gap: 4px; }
.svc-field-full { grid-column: 1 / -1; }
.svc-label {
  font-size: 11.5px; font-weight: 600; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .04em;
}
.svc-input, .svc-select, .svc-textarea {
  background: var(--surface2, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13.5px;
  color: var(--ink);
  font-family: var(--sans);
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s;
}
.svc-input:focus, .svc-select:focus, .svc-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--layf-accent-soft-bg, rgba(124,92,252,.09));
}
.svc-textarea { resize: vertical; min-height: 70px; }
.svc-form-section-title {
  font-size: 12px; font-weight: 700; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.svc-avail-title { color: #0ea5e9; border-color: #bae6fd; }
.svc-form-hint { font-size: 12px; color: var(--ink2); margin: -2px 0 8px; }

/* Date + time paired inputs */
.svc-date-time-pair {
  display: flex; gap: 6px; align-items: center;
}
.svc-date-time-pair .svc-input { margin: 0; }
.svc-time-input { max-width: 96px; flex-shrink: 0; }
.svc-file-input {
  font-size: 12.5px; color: var(--ink2);
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.svc-file-input:hover { border-color: var(--accent); }

/* Existing photo strip in form */
.svc-existing-photos {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
}
.svc-existing-photo {
  position: relative; width: 72px; height: 72px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
}
.svc-existing-photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-photo-remove {
  position: absolute; top: 3px; right: 3px;
  background: rgba(0,0,0,.55); color: #fff;
  border: none; border-radius: 50%;
  width: 18px; height: 18px;
  font-size: 10px; line-height: 18px; text-align: center;
  cursor: pointer; padding: 0;
}
.svc-photo-remove:hover { background: rgba(239,68,68,.85); }

/* ── Stage 2a: Detail overlay ────────────────────────────────────────────── */
.svc-detail-body { gap: 16px; }
.svc-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.svc-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.svc-detail-section {
  background: var(--surface2, var(--bg));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.svc-settlement-detail { grid-column: span 2; }
.svc-settlement-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.svc-settlement-detail-head .svc-section-label { margin-bottom: 0; }
.svc-settlement-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.svc-settlement-mini-grid > div { min-width: 0; }
.svc-settlement-mini-grid span { display: block; color: var(--ink2); font-size: 10px; }
.svc-settlement-mini-grid strong { display: block; margin-top: 3px; font-size: 13px; color: var(--ink); }
.svc-settlement-draft-copy { margin: 10px 0 0; color: var(--ink2); font-size: 11px; line-height: 1.45; }
.svc-settlement-history { display: grid; gap: 6px; margin-top: 11px; }
.svc-settlement-history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.svc-settlement-history-row > div:first-child { min-width: 0; display: grid; gap: 2px; }
.svc-settlement-history-row > div:first-child strong { font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-settlement-history-row > div:first-child span { color: var(--ink2); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-settlement-history-value { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.svc-settlement-history-value strong { margin: 0; font-size: 12px; }
.svc-detail-avail {
  border-color: #bae6fd;
  background: #f0f9ff;
}
html[data-dark='true'] .svc-detail-avail { background: rgba(14,165,233,.08); border-color: rgba(14,165,233,.25); }
.svc-detail-value { font-size: 13.5px; color: var(--ink); }
.svc-detail-sub   { font-size: 12px; color: var(--ink2); }
.svc-detail-notes {
  background: var(--surface2, var(--bg));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.svc-detail-notes p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink); line-height: 1.55; }
.svc-detail-photos { display: flex; flex-direction: column; gap: 8px; }
.svc-photo-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-photo-thumb {
  width: 80px; height: 80px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
  display: block;
}
.svc-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ── Stage 2a: Contractors ───────────────────────────────────────────────── */
.svc-contractors-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.svc-contractors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.svc-contractor-card { display: flex; flex-direction: column; gap: 10px; }
.svc-contractor-top { display: flex; align-items: flex-start; gap: 10px; }
.svc-contractor-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--layf-accent-soft-bg, rgba(124,92,252,.1));
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  flex-shrink: 0;
}
.svc-contractor-info { flex: 1; min-width: 0; }
.svc-contractor-name    { font-size: 14px; font-weight: 650; color: var(--ink); }
.svc-contractor-company { font-size: 12.5px; color: var(--ink2); }
.svc-contractor-specialty {
  display: inline-block;
  font-size: 11px; color: var(--accent);
  background: var(--layf-accent-soft-bg, rgba(124,92,252,.08));
  border-radius: 20px; padding: 2px 8px; margin-top: 3px;
}
.svc-contractor-actions { display: flex; gap: 2px; flex-shrink: 0; }
.svc-contractor-contacts { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-contact-link {
  display: flex; align-items: center; gap: 4px;
  font-size: 12.5px; color: var(--ink2);
  text-decoration: none;
}
.svc-contact-link:hover { color: var(--accent); }
.svc-contractor-stats {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink2);
  padding-top: 6px; border-top: 1px solid var(--border);
}
.svc-ctr-stat strong { color: var(--ink); font-weight: 650; }
.svc-ctr-sep { opacity: .4; }
.svc-contractor-notes { font-size: 12.5px; color: var(--ink2); line-height: 1.5; }

/* ── Stage 2a: Row actions ───────────────────────────────────────────────── */
.svc-row-actions { display: flex; gap: 2px; align-items: center; justify-content: flex-end; }
.svc-btn-danger:hover { color: #ef4444 !important; }

/* ── Stage 2a: Areas ─────────────────────────────────────────────────────── */
.svc-areas-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 18px; gap: 12px;
}
.svc-area-group { margin-bottom: 20px; }
.svc-area-group-label {
  font-size: 12px; font-weight: 700; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px;
}
.svc-areas-list { display: flex; flex-direction: column; gap: 6px; }
.svc-area-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px !important;
}
.svc-area-row-btns { display: flex; gap: 2px; margin-left: auto; flex-shrink: 0; }

/* ── Stage 2a: Misc ──────────────────────────────────────────────────────── */
.svc-list-title { font-size: 15px; font-weight: 650; color: var(--ink); }
.svc-avail-dot { font-size: 11px; margin-left: 4px; }

/* ── Stage 2b: Settlements ───────────────────────────────────────────────── */
.svc-modal-wide { max-width: 860px; }

/* Contractor card footer */
.svc-contractor-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.svc-contractor-settle-btn {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px;
}
.svc-settle-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--layf-accent-soft-bg, rgba(124,92,252,.1));
  color: var(--accent);
  border-radius: 99px;
  font-size: 10.5px; font-weight: 700;
  min-width: 18px; height: 18px;
  padding: 0 5px;
}
.svc-settle-total-preview {
  font-size: 12px; font-weight: 600; color: var(--ink2);
  white-space: nowrap;
}

/* Settlements table */
.svc-settle-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.svc-settle-table {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px;
  min-width: 640px;
}
.svc-settle-table thead tr {
  background: var(--surface2, var(--bg));
  border-bottom: 1px solid var(--border);
}
.svc-settle-table th {
  padding: 8px 10px;
  font-size: 11px; font-weight: 700; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .04em;
  text-align: left; white-space: nowrap;
}
.svc-settle-row {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.svc-settle-row:last-child { border-bottom: none; }
.svc-settle-row:hover { background: var(--surface2, var(--bg)); }
.svc-settle-row td { padding: 8px 10px; vertical-align: middle; }
.svc-settle-desc { font-weight: 500; color: var(--ink); max-width: 220px; }
.svc-settle-date { white-space: nowrap; color: var(--ink2); }
.svc-settle-num  { white-space: nowrap; color: var(--ink2); text-align: right; }
.svc-settle-gross-cell { color: var(--ink); text-align: right; }
.svc-settle-note { font-size: 11.5px; color: var(--ink2); max-width: 140px; }

/* Totals bar */
.svc-settle-totals {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--surface2, var(--bg));
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
}
.svc-settle-total-label { color: var(--ink2); }
.svc-settle-total-val   { color: var(--ink); font-weight: 500; }
.svc-settle-total-gross { color: var(--ink); }
.svc-settle-total-sep   { color: var(--border); }

/* Empty state */
.svc-settle-empty {
  font-size: 13px; color: var(--ink2);
  padding: 16px 0;
  text-align: center;
}

/* Add-item form panel */
.svc-settle-form-wrap {
  background: var(--surface2, var(--bg));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.svc-settle-form-wrap .svc-form-section-title { margin: 0 0 6px; border-bottom: none; }

/* Live calculation preview */
.svc-settle-calc-preview {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--layf-accent-soft-bg, rgba(124,92,252,.06));
  border: 1px solid var(--layf-accent-border, rgba(124,92,252,.15));
  border-radius: 8px;
  font-size: 13px;
}
.svc-settle-calc-label { color: var(--ink2); }
.svc-settle-calc-val   { font-weight: 600; color: var(--ink); }
.svc-settle-calc-gross { color: var(--accent); }
.svc-settle-calc-sep   { color: var(--ink2); opacity: .5; }

/* Form actions */
.svc-settle-form-btns {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 6px;
}

/* Mobile */
@media (max-width: 640px) {
  .svc-header { padding-left: 16px; padding-right: 16px; }
  .svc-module-tabs { padding: 12px 0 0; }
  .svc-module-tab  { padding: 7px 10px 9px; font-size: 13px; }
  .svc-sharing-preview { flex-direction: column; }
  .svc-overlay { align-items: flex-end; padding: 0; }
  .svc-modal { border-radius: 16px 16px 0 0; max-height: 92vh; max-width: 100%; }
  .svc-modal-wide { max-width: 100%; }
  .svc-contractors-grid { grid-template-columns: 1fr; }
  .svc-detail-grid { grid-template-columns: 1fr 1fr; }
  .svc-form-row { grid-template-columns: 1fr; }
  .svc-settle-totals { gap: 6px; font-size: 12px; }
}

/* ── Stage 3: Share link management UI ──────────────────────────────────── */
.svc-links-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.svc-links-list { display: flex; flex-direction: column; gap: 10px; }
.svc-link-empty {
  display: flex; flex-direction: column; gap: 4px;
  max-width: 480px;
}
.svc-link-card { display: flex; flex-direction: column; }
.svc-link-top  { display: flex; align-items: flex-start; gap: 12px; }
.svc-link-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.svc-link-label { font-size: 14px; font-weight: 650; color: var(--ink); }
.svc-link-meta  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.svc-link-badge {
  font-size: 11px; background: var(--layf-accent-soft-bg, rgba(124,92,252,.08));
  color: var(--accent); border-radius: 99px; padding: 2px 8px;
  font-weight: 500; display: inline-flex; align-items: center; gap: 3px;
}
.svc-link-date  { font-size: 11.5px; color: var(--ink2); }
.svc-link-url {
  font-size: 11px; color: var(--ink2); font-family: monospace;
  word-break: break-all;
  background: var(--surface2, var(--bg));
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; max-width: 100%;
}
.svc-link-actions { display: flex; gap: 4px; flex-shrink: 0; }
.svc-link-info-box {
  background: var(--surface2, var(--bg));
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: 13px; color: var(--ink2);
  line-height: 2.2; margin-top: 12px;
}
.svc-link-info-box svg { color: #16a34a; vertical-align: text-bottom; }

/* ── Stage 3: Public share view (svc-public-mode) ────────────────────────── */
body.svc-public-mode { background: #f7f8fc !important; }
body.svc-public-mode .app-sidebar,
body.svc-public-mode #sidebar,
body.svc-public-mode .app-topbar,
body.svc-public-mode #topbar,
body.svc-public-mode .topbar,
body.svc-public-mode [data-app-nav] { display: none !important; }
body.svc-public-mode main,
body.svc-public-mode [data-app-view],
body.svc-public-mode #app-view {
  margin: 0 !important; padding: 0 !important;
  width: 100% !important; max-width: 100% !important;
  min-height: 100vh; overflow-y: auto;
}

.svc-public-wrap {
  max-width: 680px; margin: 0 auto;
  padding: 28px 16px 60px;
  font-family: 'Geist', 'Segoe UI', system-ui, sans-serif;
}
.svc-pub-brand {
  font-size: 18px; font-weight: 700; color: #111827;
  letter-spacing: -.02em; margin-bottom: 4px;
}
.svc-pub-dot { color: #8b7cf6; }
.svc-pub-header {
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 22px;
}
.svc-pub-title { font-size: 22px; font-weight: 720; color: #111827; margin: 6px 0 4px; letter-spacing: -.02em; }
.svc-pub-contractor { font-size: 13.5px; color: #6b7280; margin-top: 3px; }
.svc-pub-contractor a { color: inherit; }
.svc-pub-count { font-size: 12.5px; color: #9ca3af; margin-top: 5px; }
.svc-pub-cards { display: flex; flex-direction: column; gap: 12px; }
.svc-pub-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.svc-pub-card.is-urgent { border-color: #fca5a5; background: #fff5f5; }
.svc-pub-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svc-pub-card-title { font-size: 15px; font-weight: 650; color: #111827; flex: 1; min-width: 0; }
.svc-pub-card-loc   { font-size: 13px; color: #6b7280; }
.svc-pub-card-date  { font-size: 13px; color: #374151; }
.svc-pub-avail {
  background: #f0f9ff; border: 1px solid #bae6fd;
  border-radius: 8px; padding: 8px 10px;
  font-size: 12.5px; color: #0369a1;
  display: flex; flex-direction: column; gap: 3px;
}
.svc-pub-notes {
  font-size: 13px; color: #6b7280;
  background: #f9fafb; border-radius: 8px;
  padding: 8px 10px; line-height: 1.55;
}
.svc-pub-photos { display: flex; flex-direction: column; gap: 6px; }
.svc-pub-photos-label {
  font-size: 10.5px; font-weight: 700; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .06em;
}
.svc-pub-photo-row { display: flex; gap: 6px; flex-wrap: wrap; }
.svc-pub-photo-row a {
  display: block; width: 72px; height: 72px;
  border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb;
}
.svc-pub-photo-row img { width: 100%; height: 100%; object-fit: cover; }
.svc-pub-empty  { text-align: center; padding: 36px; color: #9ca3af; font-size: 14px; }
.svc-pub-footer {
  text-align: center; margin-top: 40px;
  font-size: 12px; color: #d1d5db;
  border-top: 1px solid #f3f4f6; padding-top: 16px;
}
.svc-public-loading { text-align: center; padding: 60px; font-size: 15px; color: #9ca3af; }
.svc-public-error   { text-align: center; padding: 60px 24px; }

/* ═══════════════════════════════════════════════════════════════
   INSPECTIONS MODULE
   ═══════════════════════════════════════════════════════════════ */

/* ── Tabs ── */
.insp-tabs {
  display: flex;
  gap: 6px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  margin-bottom: 20px;
  width: auto;
  max-width: 100%;
  flex-wrap: wrap;
}
/* Mobile: full-width scrollable strip — never wider than viewport */
@media (max-width: 560px) {
  .insp-tabs {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 14px;
  }
  .insp-tabs::-webkit-scrollbar { display: none; }
  .insp-tab { flex-shrink: 0; }
}
.insp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.insp-tab:hover  { background: var(--surface); border-color: var(--ink3); color: var(--ink); }
.insp-tab.is-active {
  background: color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 58%, var(--border));
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 3px 9px color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 14%, transparent);
}

/* ── Section header shared ── */
.insp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* ── Round banner ── */
.insp-round-banner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 20px 14px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.insp-round-left   { flex: 1; min-width: 0; }
.insp-round-right  { text-align: right; flex-shrink: 0; }
.insp-round-name   { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.insp-round-meta   { display: flex; gap: 8px; flex-wrap: wrap; }
.insp-meta-chip {
  font-size: .75rem;
  color: var(--ink2);
  background: var(--surface2);
  border-radius: 20px;
  padding: 2px 10px;
}
.insp-meta-chip--warn { background: #fef3c7; color: #92400e; }
.insp-meta-chip--next { background: color-mix(in srgb,var(--accent) 12%,var(--surface2)); color: var(--accent); font-weight: 500; }
.insp-round-fraction { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--ink); }
.insp-round-total    { font-size: 1.1rem; font-weight: 500; color: var(--ink2); }
.insp-round-label    { font-size: .75rem; color: var(--ink2); margin-top: 2px; }
.insp-round-issues   { font-size: .75rem; color: #b45309; margin-top: 4px; }
.insp-overall-bar-wrap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--surface2);
}
.insp-overall-bar-fill {
  height: 100%;
  background: var(--layf-accent-gradient, linear-gradient(90deg,#fb923c,#ec4899,#c084fc,#7c3aed));
  border-radius: 0 2px 2px 0;
  transition: width .4s ease;
}

/* ── Apartment grid ── */
.insp-apt-grid {
  display: grid;
  /* minmax(0,1fr) prevents column blowout from long text/chips */
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
/* Tablets: always 3 cols */
@media (max-width: 860px) {
  .insp-apt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Mobile: exactly 2 cols, no overflow */
@media (max-width: 560px) {
  .insp-apt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .insp-apt-card { padding: 10px; min-width: 0; overflow: hidden; }
  .insp-apt-number { font-size: .9rem; }
}

/* ── Apartment card ── */
.insp-apt-card {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow .15s;
  min-width: 0;   /* prevent grid blowout */
  overflow: hidden;
}
.insp-apt-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.insp-apt-card--done     { border-color: color-mix(in srgb,#22c55e 30%,var(--border)); background: color-mix(in srgb,#22c55e 10%,var(--surface)); }
.insp-apt-card--progress { border-color: color-mix(in srgb,var(--accent) 30%,var(--border)); background: color-mix(in srgb,var(--accent) 8%,var(--surface)); }
.insp-apt-card--pending  { border-color: var(--border); }
/* Issue warning border — overrides status border */
.insp-apt-card--has-issues {
  border-color: color-mix(in srgb,#ef4444 40%,var(--border)) !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,.15);
}
.insp-apt-card--critical {
  border-color: color-mix(in srgb, #ef4444 68%, var(--border)) !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,.2), 0 0 20px rgba(239,68,68,.16);
  animation: insp-critical-pulse 2.2s ease-in-out infinite;
}
html[data-dark='true'] .inspections-page .insp-apt-card--critical {
  background: color-mix(in srgb, #ef4444 12%, var(--surface)) !important;
  border-color: color-mix(in srgb, #f87171 62%, var(--border)) !important;
}
@keyframes insp-critical-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(239,68,68,.18), 0 0 12px rgba(239,68,68,.10); }
  50% { box-shadow: 0 0 0 4px rgba(239,68,68,.28), 0 0 28px rgba(239,68,68,.22); }
}
@media (prefers-reduced-motion: reduce) {
  .insp-apt-card--critical { animation: none; }
}

.insp-apt-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.insp-apt-number { font-size: 1rem; font-weight: 700; color: var(--ink); }

.insp-apt-done-badge { font-size: .7rem; color: color-mix(in srgb,#22c55e 80%,var(--ink)); background: color-mix(in srgb,#22c55e 18%,var(--surface)); border-radius: 20px; padding: 1px 7px; margin-left: auto; }
.insp-apt-prog-badge { font-size: .7rem; color: var(--accent); background: color-mix(in srgb,var(--accent) 14%,var(--surface)); border-radius: 20px; padding: 1px 7px; margin-left: auto; }
.insp-apt-pend-badge { font-size: .7rem; color: var(--ink2); background: var(--surface2); border-radius: 20px; padding: 1px 7px; margin-left: auto; }
.insp-apt-issue-chip { font-size: .7rem; color: color-mix(in srgb,#f59e0b 90%,var(--ink)); background: color-mix(in srgb,#f59e0b 16%,var(--surface)); border-radius: 20px; padding: 1px 7px; }
.insp-apt-critical-chip { font-size: .68rem; color: #fff; background: #dc2626; border-radius: 20px; padding: 2px 7px; }
html[data-dark='true'] .inspections-page .insp-apt-critical-chip {
  background: color-mix(in srgb, #ef4444 34%, var(--surface));
  border: 1px solid color-mix(in srgb, #fca5a5 44%, transparent);
  color: #fecaca;
}
.insp-tpl-edit-critical { display: inline-flex; width: fit-content; margin-top: 3px; color: #b91c1c; font-size: .7rem; font-weight: 700; }
.insp-form-row--critical { align-items: end; }
.insp-critical-check-label { align-items: flex-start; min-height: 54px; }
.insp-critical-check-label span { display: grid; gap: 2px; }
.insp-critical-check-label small { color: var(--ink2); font-size: .72rem; line-height: 1.35; }
html[data-dark='true'] .insp-tpl-edit-critical { color: #fca5a5; }

.insp-apt-bar-wrap {
  height: 5px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}
.insp-apt-bar-fill {
  height: 100%;
  background: var(--layf-accent-gradient, linear-gradient(90deg,#fb923c,#7c3aed));
  border-radius: 3px;
  transition: width .3s ease;
}
.insp-apt-card--done .insp-apt-bar-fill { background: #22c55e; }

.insp-apt-fraction { font-size: .75rem; color: var(--ink2); }
.insp-apt-notes {
  font-size: .7rem;
  color: var(--ink2);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.insp-apt-footer { margin-top: 4px; }
.insp-apt-done-footer {
  display: flex; flex-direction: column; gap: 4px;
}
.insp-apt-done-date { font-size: .72rem; color: #166534; }
.insp-reinspect-btn {
  font-size: .7rem; padding: 2px 6px; width: 100%;
  justify-content: center; color: var(--ink2);
}
.insp-reinspect-btn:hover { color: var(--ink); }
.insp-apt-btn { width: 100%; justify-content: center; }

/* ── Frequency / due badges (config card) ── */
.insp-freq-label {
  font-size: .68rem; font-weight: 500;
  color: var(--ink2); background: var(--surface2);
  border-radius: 20px; padding: 1px 7px;
  margin-left: 6px; white-space: nowrap;
}
.insp-due-badge {
  font-size: .68rem; font-weight: 600;
  border-radius: 20px; padding: 1px 7px;
  margin-left: 4px; white-space: nowrap;
}
.insp-due--overdue { color: #991b1b; background: #fee2e2; }
.insp-due--soon    { color: #92400e; background: #fef3c7; }
.insp-due--ok      { color: #166534; background: #dcfce7; }

/* ── Overdue notice in new-round modal ── */
.insp-overdue-notice {
  margin: 4px 0 8px;
  padding: 10px 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  font-size: .82rem;
  color: #92400e;
  line-height: 1.4;
}
.insp-overdue-list {
  margin: 6px 0 0 0;
  padding-left: 18px;
  font-size: .8rem;
}
.insp-overdue-list li { margin: 2px 0; }

/* ── Reference photo in guided step ── */
.insp-item-photo {
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface2);
  border: 1px solid var(--border);
  margin: 4px 0;
}
.insp-item-photo img {
  width: 100%; max-height: 220px;
  object-fit: cover; display: block;
}
.insp-item-photo-label {
  font-size: .7rem; color: var(--ink2);
  padding: 4px 8px; text-align: center;
}

/* ── Template item photo preview (edit modal) ── */
.insp-tpl-photo-preview {
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 6px; max-width: 280px;
}
.insp-tpl-photo-preview img {
  width: 100%; max-height: 160px; object-fit: cover; display: block;
}

/* ── Apt quick-summary modal ── */
.insp-modal--apt-summary { max-width: 420px; }
.insp-apt-summary-body {
  padding: 14px 20px 20px;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
}

.insp-summary-progress-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 0 6px;
}
.insp-summary-progress-top {
  display: flex; align-items: baseline; justify-content: space-between;
}
.insp-summary-big-count {
  font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1;
}
.insp-summary-big-count .insp-summary-total {
  font-size: 1.1rem; font-weight: 400; color: var(--ink2);
}
.insp-summary-progress-bar-wrap {
  width: 100%; height: 7px;
  background: var(--surface2); border-radius: 8px; overflow: hidden;
}
.insp-summary-progress-fill {
  height: 100%; background: var(--layf-accent-gradient, linear-gradient(90deg,#fb923c,#7c3aed));
  border-radius: 8px; transition: width .4s;
}
.insp-summary-progress-fill.is-done  { background: #22c55e; }
.insp-summary-progress-fill.has-issues { background: #f59e0b; }
.insp-summary-pct-label { font-size: .78rem; color: var(--ink2); }

.insp-summary-section {
  border-radius: 8px; padding: 10px 12px;
  background: var(--surface2);
}
.insp-summary-section--issues  { background: #fff7ed; }
.insp-summary-section--clean   { background: #f0fdf4; }
.insp-summary-section--skipped { background: var(--surface2); }
.insp-summary-section--recurring { background: #fff1f2; }
html[data-dark='true'] .inspections-page .insp-summary-section--issues {
  background: color-mix(in srgb, #f59e0b 14%, var(--surface));
  border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--border));
}
html[data-dark='true'] .inspections-page .insp-summary-section--clean {
  background: color-mix(in srgb, #22c55e 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #22c55e 26%, var(--border));
}
html[data-dark='true'] .inspections-page .insp-summary-section--recurring {
  background: color-mix(in srgb, #ef4444 13%, var(--surface));
  border: 1px solid color-mix(in srgb, #ef4444 28%, var(--border));
}

.insp-summary-section-title {
  font-size: .78rem; font-weight: 600; color: var(--ink);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .02em;
}
.insp-summary-issue-row { margin-bottom: 6px; }
.insp-summary-issue-row:last-child { margin-bottom: 0; }
.insp-summary-issue-label { font-size: .85rem; font-weight: 500; color: var(--ink); }
.insp-summary-issue-note  { font-size: .78rem; color: var(--ink2); margin-top: 2px; }
.insp-summary-skip-list   { font-size: .8rem; color: var(--ink2); line-height: 1.5; }
.insp-summary-done-row    {
  font-size: .82rem; color: #166534;
  padding: 8px 0 0; text-align: center;
}


/* ── Guided overlay ── */
.insp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 16px;
}
.insp-modal {
  background: var(--surface);
  border-radius: 18px;
  width: 100%;
  max-width: 520px;
  max-height: 92dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
}
.insp-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 0;
}
.insp-modal-apt-label   { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.insp-modal-round-label { font-size: .8rem; color: var(--ink2); margin-top: 2px; }
.insp-modal-close {
  background: var(--surface2);
  border: none;
  border-radius: 50%;
  width: 30px; height: 30px;
  font-size: .9rem;
  cursor: pointer;
  color: var(--ink2);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.insp-modal-apt-notes {
  margin: 12px 20px 0;
  background: #fefce8;
  border: 1px solid #fef08a;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .8rem;
  color: #713f12;
  line-height: 1.4;
}
.insp-modal-progress    { padding: 16px 20px 0; }
.insp-modal-progress-bar {
  height: 5px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.insp-modal-progress-fill {
  height: 100%;
  background: var(--layf-accent-gradient, linear-gradient(90deg,#fb923c,#7c3aed));
  border-radius: 3px;
  transition: width .3s ease;
}
.insp-modal-step-label { font-size: .75rem; color: var(--ink2); text-align: right; }
.insp-modal-item { padding: 20px 20px 0; }
.insp-modal-cat  { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); margin-bottom: 6px; }
.insp-modal-item-label { font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 8px; }
.insp-modal-item-desc  { font-size: .85rem; color: var(--ink2); line-height: 1.5; }
.insp-modal-note {
  margin: 14px 20px 0;
  width: calc(100% - 40px);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .85rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface2);
  resize: none;
  box-sizing: border-box;
}
.insp-modal-note:focus { outline: none; border-color: var(--accent); }
.insp-modal-actions {
  display: flex;
  gap: 8px;
  padding: 14px 20px 0;
}
.insp-btn-done  { flex: 1; background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; font-weight: 600; }
.insp-btn-done:hover   { background: #bbf7d0; }
.insp-btn-issue { flex: 1; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; font-weight: 600; }
.insp-btn-issue:hover  { background: #fde68a; }
.insp-btn-skip  { flex: 1; background: var(--surface2); color: var(--ink2); border: 1px solid var(--border); }
.insp-btn-skip:hover   { background: var(--border); }
.insp-btn-icon { margin-right: 4px; }
.insp-modal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 20px;
}
.insp-modal-nav-dots { display: flex; gap: 5px; align-items: center; }
.insp-nav-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background .2s, transform .2s;
}
.insp-nav-dot.is-active { background: var(--accent); transform: scale(1.3); }
.insp-nav-dot.is-done   { background: #22c55e; }

/* ── Summary modal ── */
.insp-modal--summary {
  text-align: center;
  padding: 40px 32px;
  gap: 12px;
}
.insp-summary-icon   { font-size: 2.8rem; line-height: 1; }
.insp-summary-title  { font-size: 1.4rem; font-weight: 800; color: var(--ink); }
.insp-summary-sub    { font-size: .85rem; color: var(--ink2); }
.insp-summary-chips  { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0; }
.insp-chip           { font-size: .8rem; border-radius: 20px; padding: 4px 12px; }
.insp-chip--done  { background: #dcfce7; color: #166534; }
.insp-chip--issue { background: #fef3c7; color: #92400e; }
.insp-chip--skip  { background: var(--surface2); color: var(--ink2); }
.insp-summary-hint   { font-size: .78rem; color: var(--ink2); max-width: 320px; margin: 0 auto; line-height: 1.5; }

/* ── History table ── */
.insp-history-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.insp-history-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: .82rem;
}
.insp-history-table thead th {
  background: var(--surface2);
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.insp-hist-apt-col { width: 80px; }
.insp-hist-current { position: relative; }
.insp-hist-badge--active {
  display: inline-block;
  margin-left: 8px;
  font-size: .65rem;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 20px;
  padding: 1px 7px;
  vertical-align: middle;
}
.insp-history-table tbody tr:hover td { background: var(--surface2); }
.insp-history-table tbody td:first-child { background: var(--surface2); font-size: .85rem; }
.insp-hist-cell   { padding: 9px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.insp-hist-apt-num { padding: 9px 14px; border-bottom: 1px solid var(--border); }
.insp-hist-done   { color: #166534; }
.insp-hist-prog   { color: #1e40af; }
.insp-hist-pend   { color: #9ca3af; }
/* Column header with delete button */
.insp-hist-col-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.insp-hist-del-round { opacity: 0; font-size: .75rem; padding: 1px 5px; color: var(--ink2); flex-shrink: 0; }
th:hover .insp-hist-del-round { opacity: 1; }
/* Next scheduled chips */
.insp-hist-next-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--accent);
  background: color-mix(in srgb,var(--accent) 10%,var(--surface));
  border: 1px solid color-mix(in srgb,var(--accent) 20%,var(--border));
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 10px;
}
.insp-hist-next-chip--warn { color: #b45309; background: #fef3c7; border-color: #fde68a; }

/* ── Apartment history ledger ── */
.insp-ledger { min-width: 0; }
.insp-ledger-heading { align-items: flex-start; margin-bottom: 12px; }
.insp-ledger-heading .section-title { margin-bottom: 4px; }
.insp-ledger-subtitle { margin: 0; color: var(--ink2); font-size: .84rem; }
.insp-ledger-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.insp-ledger-select-label { display: grid; gap: 4px; min-width: 178px; color: var(--ink2); font-size: .72rem; font-weight: 650; }
.insp-ledger-select {
  min-height: 32px;
  color: var(--ink2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font: inherit;
}
.insp-ledger-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.insp-ledger-filter {
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink2);
  background: transparent;
  font-size: .74rem;
  font-weight: 650;
  cursor: pointer;
}
.insp-ledger-filter:hover { color: var(--ink); background: var(--surface2); }
.insp-ledger-filter.is-active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.insp-ledger-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.insp-ledger-metrics > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px; min-width: 0; }
.insp-ledger-metrics > div + div { border-left: 1px solid var(--border); }
.insp-ledger-metrics span { overflow: hidden; color: var(--ink2); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.insp-ledger-metrics strong { color: var(--ink); font-size: 1.05rem; }
.insp-ledger-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(250px, .9fr); align-items: start; gap: 12px; }
.insp-ledger-layout--single { grid-template-columns: 1fr; }
.insp-ledger-timeline, .insp-ledger-recent { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.insp-ledger-list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--border); }
.insp-ledger-list-head h3 { margin: 0; color: var(--ink); font-size: .9rem; }
.insp-ledger-list-head span { color: var(--ink2); font-size: .73rem; white-space: nowrap; }
.insp-ledger-event { display: grid; grid-template-columns: 84px minmax(0, 1fr) 125px; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border); }
.insp-ledger-event:last-child { border-bottom: 0; }
.insp-ledger-event > time { color: var(--ink2); font-size: .75rem; line-height: 1.45; }
.insp-ledger-event-main { min-width: 0; }
.insp-ledger-event-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.insp-ledger-apartment { color: var(--ink); font-size: .75rem; font-weight: 750; }
.insp-ledger-type { color: var(--ink2); background: var(--surface2); border-radius: 999px; font-size: .68rem; padding: 2px 7px; }
.insp-ledger-event h4 { margin: 0 0 3px; color: var(--ink); font-size: .88rem; }
.insp-ledger-event p { margin: 0; color: var(--ink2); font-size: .76rem; line-height: 1.45; }
.insp-ledger-event-aside { display: grid; align-content: start; gap: 4px; color: var(--ink2); font-size: .7rem; }
.insp-ledger-status { width: fit-content; border-radius: 999px; padding: 2px 7px; color: #166534; background: #dcfce7; font-weight: 700; }
.insp-ledger-status.is-open { color: #991b1b; background: #fee2e2; }
.insp-ledger-status.is-progress { color: #92400e; background: #fef3c7; }
.insp-ledger-source { color: var(--ink2); border-left: 1px solid var(--border); padding-left: 6px; font-size: .68rem; }
.insp-ledger-photos { display: flex; gap: 6px; margin-top: 8px; }
.insp-ledger-photos button { width: 42px; height: 34px; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 5px; background: var(--surface2); cursor: pointer; }
.insp-ledger-photos img { width: 100%; height: 100%; object-fit: cover; }
.insp-ledger-resolve { width: fit-content; min-height: 27px; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-radius: 5px; background: transparent; color: var(--accent); cursor: pointer; font: inherit; font-size: .7rem; font-weight: 700; }
.insp-ledger-resolve:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.insp-ledger-notice, .insp-ledger-empty { padding: 11px 12px; color: var(--ink2); font-size: .78rem; line-height: 1.45; }
.insp-ledger-notice { margin: -2px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.insp-ledger-notice.is-error { color: #b91c1c; border-color: #fecaca; background: #fff7f7; }
.insp-ledger-recent-row { display: flex; justify-content: space-between; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--border); }
.insp-ledger-recent-row:last-child { border-bottom: 0; }
.insp-ledger-recent-row div { display: grid; gap: 3px; min-width: 0; }
.insp-ledger-recent-row strong { color: var(--ink); font-size: .78rem; }
.insp-ledger-recent-row span { overflow: hidden; color: var(--ink2); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.insp-ledger-recent-row time { flex: 0 0 auto; color: var(--ink2); font-size: .7rem; }
html[data-dark='true'] .insp-ledger-status { color: #bbf7d0; background: rgba(22, 101, 52, .34); }
html[data-dark='true'] .insp-ledger-status.is-open { color: #fecaca; background: rgba(153, 27, 27, .38); }
html[data-dark='true'] .insp-ledger-status.is-progress { color: #fde68a; background: rgba(146, 64, 14, .34); }
html[data-dark='true'] .insp-ledger-notice.is-error { color: #fecaca; border-color: rgba(248,113,113,.38); background: rgba(127,29,29,.26); }
@media (max-width: 760px) {
  .insp-ledger-toolbar { align-items: stretch; flex-direction: column; }
  .insp-ledger-select-label { width: 100%; }
  .insp-ledger-filters { justify-content: flex-start; }
  .insp-ledger-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .insp-ledger-heading { gap: 8px; }
  .insp-ledger-metrics { grid-template-columns: 1fr; }
  .insp-ledger-metrics > div + div { border-top: 1px solid var(--border); border-left: 0; }
  .insp-ledger-event { grid-template-columns: 1fr; gap: 7px; }
  .insp-ledger-event > time { order: 0; }
  .insp-ledger-event-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insp-ledger-event-aside > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── Templates ── */
.insp-template-card { margin-bottom: 16px; }
.insp-tpl-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.insp-tpl-header-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.insp-tpl-delete-btn { color: var(--ink2); opacity: .55; }
.insp-tpl-delete-btn:hover { opacity: 1; color: var(--danger); }
.insp-tpl-name { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.insp-tpl-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.insp-tpl-chip-meta {
  font-size: .74rem;
  color: var(--ink2);
  background: var(--surface2);
  border-radius: 20px;
  padding: 2px 9px;
}
.insp-tpl-cats { display: flex; flex-direction: column; gap: 10px; }
.insp-tpl-cat-block {}
.insp-tpl-cat-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink2);
  margin-bottom: 5px;
}
.insp-tpl-items-row { display: flex; flex-wrap: wrap; gap: 6px; }
.insp-tpl-item-chip {
  font-size: .76rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
  color: var(--ink);
  cursor: default;
}

/* ── Template edit list ── */
.insp-tpl-edit-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.insp-tpl-edit-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  font-size: .83rem;
}
.insp-tpl-edit-row:last-child { border-bottom: none; }
.insp-tpl-edit-cat {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.insp-tpl-edit-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.insp-tpl-edit-desc {
  font-size: .75rem;
  white-space: normal;
  line-height: 1.4;
}
.insp-tpl-edit-apts {
  font-size: .74rem;
  color: var(--accent);
  font-weight: 500;
  white-space: normal;
  line-height: 1.4;
  margin-top: 2px;
}
.insp-tpl-apts--all {
  font-size: .74rem;
  color: var(--accent);
  font-weight: 500;
  opacity: .75;
  margin-top: 2px;
}
.insp-tpl-edit-actions { display: flex; gap: 4px; }

/* ── Template item modal ── */
.insp-modal--tpl-item { max-width: 560px; }
.insp-form-row {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 12px;
}
.insp-form-field--grow { flex: 1; }
.insp-form-field--cat {}
.insp-form-apt-hint { font-size: .75rem; margin-bottom: 8px; }
.insp-apt-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}
.insp-apt-check-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  cursor: pointer;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  user-select: none;
  transition: background .15s;
}
.insp-apt-check-label:has(input:checked) {
  background: var(--accent-lt);
  border-color: var(--accent);
  color: var(--ink);
}
.insp-apt-check-label input { width: 14px; height: 14px; accent-color: var(--accent); }
@media (max-width: 540px) {
  .insp-form-row { grid-template-columns: 1fr; }
  .insp-tpl-edit-row { grid-template-columns: 60px 1fr auto; }
}

/* ── Config ── */
.insp-config-list { display: flex; flex-direction: column; gap: 8px; }
.insp-config-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px !important;
}
.insp-config-num { font-size: .9rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.insp-config-notes { flex: 1; font-size: .8rem; line-height: 1.3; }
.insp-config-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Mobile ── */
/* Stage 2 additions */
.insp-round-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.insp-round-freq-btn { font-size: .75rem; padding: 3px 10px; white-space: nowrap; flex-shrink: 0; }

/* Recurring issue chips on apt cards */
.insp-apt-recurring { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.insp-recurring-chip {
  font-size: .68rem; padding: 2px 7px;
  background: #fff7ed; color: #92400e;
  border: 1px solid #fcd34d; border-radius: 20px;
  white-space: nowrap;
}

/* Guided modal: split layout with mini-agenda */
.insp-modal--guided { max-width: 780px; width: 92vw; padding: 0; }
.insp-modal-body-split {
  display: flex; gap: 0; overflow: hidden;
  border-top: 1px solid var(--border);
  min-height: 320px; max-height: 52vh;
}
.insp-agenda {
  width: 220px; min-width: 160px; max-width: 240px;
  overflow-y: auto; flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface2);
  display: flex; flex-direction: column;
}
.insp-agenda-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border: none; background: transparent;
  cursor: pointer; text-align: left; border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.insp-agenda-row:hover { background: var(--surface); }
.insp-agenda-row.is-current {
  background: var(--layf-accent-soft-bg, rgba(124,92,252,.07));
  border-left: 3px solid var(--accent);
}
.insp-agenda-row.is-done   { opacity: .6; }
.insp-agenda-row.is-issue  { border-left: 3px solid #f59e0b; }
.insp-agenda-row.is-skip   { opacity: .45; }
.insp-agenda-icon {
  font-size: .82rem; width: 18px; text-align: center; flex-shrink: 0;
  color: var(--ink2);
}
.insp-agenda-row.is-current .insp-agenda-icon { color: var(--accent); }
.insp-agenda-row.is-done   .insp-agenda-icon  { color: #22c55e; }
.insp-agenda-row.is-issue  .insp-agenda-icon  { color: #f59e0b; }
.insp-agenda-label {
  font-size: .78rem; color: var(--ink); line-height: 1.3;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.insp-agenda-cat {
  font-size: .65rem; color: var(--ink2); white-space: nowrap;
}

/* Item panel (right side of split) */
.insp-modal-item-panel {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  padding: 0;
}
.insp-modal-item-panel .insp-modal-item { padding: 16px 20px 8px; }
.insp-modal-item-panel .insp-modal-note { margin: 0 20px 12px; }
.insp-modal-item-panel .insp-modal-actions { padding: 0 20px 8px; }
.insp-modal-item-panel .insp-modal-nav { padding: 8px 20px 16px; }

/* Nav count + agenda toggle */
.insp-modal-nav-count { font-size: .8rem; color: var(--ink2); }
.insp-modal-nav-right { display: flex; align-items: center; gap: 10px; }
.insp-agenda-toggle-btn { display: none; font-size: .78rem; padding: 4px 10px; }

/* Selected state on action buttons */
.insp-btn-done.is-selected  { background: #bbf7d0; box-shadow: inset 0 0 0 2px #22c55e; }
.insp-btn-issue.is-selected { background: #fde68a; box-shadow: inset 0 0 0 2px #f59e0b; }
.insp-btn-skip.is-selected  { background: var(--border); box-shadow: inset 0 0 0 2px var(--ink2); }

/* Form modals */
.insp-modal--form { max-width: 440px; padding: 0; }
.insp-form { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.insp-form-field { display: flex; flex-direction: column; gap: 4px; }
.insp-form-label { font-size: .8rem; font-weight: 600; color: var(--ink2); }
.insp-form-input, .insp-form-textarea {
  width: 100%; padding: 8px 12px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--ink); font-size: .9rem; font-family: inherit;
  box-sizing: border-box;
}
.insp-form-input:focus, .insp-form-textarea:focus {
  outline: none; border-color: var(--accent);
}
.insp-form-textarea { resize: vertical; min-height: 64px; }
.insp-form-note { font-size: .78rem; color: var(--ink2); }
.insp-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* Recurring issue tag editor */
.insp-issues-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 28px; padding: 4px 0;
}
.insp-issue-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .8rem; padding: 3px 10px 3px 10px;
  background: #fff7ed; color: #92400e;
  border: 1px solid #fcd34d; border-radius: 20px;
}
.insp-issue-remove {
  background: none; border: none; cursor: pointer;
  color: #b45309; font-size: .75rem; padding: 0 0 0 2px; line-height: 1;
}
.insp-issue-remove:hover { color: #92400e; }
.insp-issue-add-row { display: flex; gap: 6px; margin-top: 6px; }
.insp-issue-input { flex: 1; }

/* Config notes-wrap with recurring under notes */
.insp-config-notes-wrap { flex: 1; min-width: 0; }
.insp-config-recurring { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* History issue chip */
.insp-hist-issue-chip {
  display: inline-block; font-size: .7rem;
  background: #fef3c7; color: #92400e;
  border-radius: 10px; padding: 1px 5px; margin-left: 4px;
}

@media (max-width: 600px) {
  .insp-round-banner { flex-direction: column; gap: 12px; }
  .insp-round-right  { text-align: left; }
  /* Centered pop-out on mobile (not bottom sheet) */
  .insp-modal        { border-radius: 18px; max-height: 88dvh; }
  .insp-overlay      { align-items: center; padding: 16px; }
  .insp-modal-actions { flex-direction: column; }
  .insp-btn-done, .insp-btn-issue, .insp-btn-skip { width: 100%; }
  .insp-modal--summary { padding: 32px 20px 40px; }
  /* Guided modal: centered pop-out, agenda hidden by default */
  .insp-modal--guided { width: 100%; border-radius: 18px; max-height: 88dvh; }
  .insp-modal-body-split { flex-direction: column; overflow: visible; min-height: 0; max-height: none; }
  /* Agenda hidden by default on mobile — shown via toggle */
  .insp-agenda { display: none; }
  .insp-modal-body-split.agenda-open .insp-agenda {
    display: flex;
    width: 100%; max-width: 100%; max-height: 130px;
    border-right: none; border-bottom: 1px solid var(--border);
    flex-direction: row; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
  }
  .insp-modal-body-split.agenda-open .insp-agenda-row {
    flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 10px; min-width: 76px;
    border-bottom: none; border-right: 1px solid var(--border);
  }
  .insp-modal-body-split.agenda-open .insp-agenda-cat { display: none; }
  .insp-modal-body-split.agenda-open .insp-agenda-label {
    font-size: .62rem; text-align: center; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .insp-modal-item-panel { overflow-y: auto; flex: 1; }
  /* Action buttons — taller for easy tapping on mobile */
  .insp-btn-done, .insp-btn-issue, .insp-btn-skip { min-height: 48px; font-size: .95rem; }
  /* Show agenda toggle button on mobile */
  .insp-agenda-toggle-btn { display: inline-flex; }
  .insp-form-actions { flex-direction: column-reverse; }
}
.svc-public-err-msg { font-size: 15px; color: #6b7280; margin-top: 12px; }

/* ─── Admin Panel / Ops Console ─────────────────────────────────────────────── */
.adm-console {
  --adm-accent-border: color-mix(in srgb, var(--accent) 26%, transparent);
  --adm-accent-soft: color-mix(in srgb, var(--accent) 8%, var(--surface));
  --adm-grid-line: color-mix(in srgb, var(--ink) 5%, transparent);
  display: grid;
  gap: 18px;
}

.adm-access-denied { text-align: center; padding: 48px; max-width: 360px; margin: 48px auto; }
.adm-loading { display: flex; flex-direction: column; align-items: center; padding: 64px; }
.adm-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: adm-spin .7s linear infinite;
}
@keyframes adm-spin { to { transform: rotate(360deg); } }
.adm-error { text-align: center; padding: 32px; max-width: 340px; margin: 48px auto; }

.adm-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); flex-shrink: 0;
}
.adm-live-dot--ok  { background: #22c55e; animation: adm-pulse 2s ease-in-out infinite; box-shadow: 0 0 0 4px rgba(34,197,94,.12); }
.adm-live-dot--err { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.12); }
@keyframes adm-pulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }

.adm-console-tabs {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0;
  padding: 5px;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface2) 80%, #fff 20%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 26px rgba(15,23,42,.045);
}

.adm-console-tabs button {
  min-height: 34px;
  padding: 7px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink2);
  font-weight: 750;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.adm-console-tabs button:hover {
  background: color-mix(in srgb, var(--surface) 72%, var(--accent) 8%);
  color: var(--ink);
}

.adm-console-tabs button.active {
  color: var(--ink);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient, linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #fff))) border-box;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(124,92,252,.10), inset 0 0 0 1px rgba(255,255,255,.72);
}

.adm-console-tabs button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 36%, transparent);
  outline-offset: 2px;
}

.adm-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--adm-accent-border);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 32px rgba(15,23,42,.045);
}
.adm-status-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: .76rem;
  font-weight: 750;
}

.adm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 0;
}
.adm-tiles--compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.adm-tiles--integrations {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.adm-tiles--operations {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.adm-tiles--operations .adm-tile {
  padding: 12px 14px;
}
.adm-tiles--operations .adm-tile-head {
  margin-bottom: 6px;
}
.adm-tiles--operations .adm-tile > div:nth-child(2) {
  font-size: 1.2rem !important;
}
.adm-tiles--operations .adm-tile > .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-user-filters {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 12px;
  overflow-x: auto;
}

.adm-user-filters button {
  white-space: nowrap;
}

.adm-tile {
  min-width: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--adm-accent-border);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
}

.adm-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--layf-accent-gradient, var(--accent));
  opacity: .7;
}

.adm-tile--warn { border-color: rgba(251, 146, 60, .36); background: linear-gradient(180deg, #fffaf3, var(--surface)); }
.adm-tile--dim  { opacity: .72; filter: saturate(.8); }

.adm-tile-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.adm-tile-icon {
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border-radius: 10px;
  background: var(--adm-accent-soft);
  border: 1px solid var(--adm-accent-border);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  font-weight: 850;
  flex-shrink: 0;
}
.adm-tile-icon--github { color: #111827; }
.adm-tile-icon--supabase { color: #16a34a; }
.adm-tile-icon--dim { color: var(--ink2); }
.adm-brand-mark {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--adm-accent-border);
  background: var(--surface);
  color: var(--ink);
  flex-shrink: 0;
}
.adm-brand-mark svg {
  display: block;
}
.adm-brand-mark--github { color: #111827; background: #fff; }
.adm-brand-mark--supabase { background: #ecfdf5; border-color: #bbf7d0; }
.adm-brand-mark--vercel { color: #000; background: #fff; }
.adm-tile-label { font-size: .88rem; font-weight: 850; color: var(--ink); flex: 1; }
.adm-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--border);
}
.adm-status-dot--ok  { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.10); }
.adm-status-dot--err { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.10); }
.adm-status-dot--dim { background: #d1d5db; }

.adm-tile-name { font-size: .78rem; color: var(--ink2); margin-bottom: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.adm-tile-rows { display: flex; flex-direction: column; gap: 7px; }
.adm-tile-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .8rem; gap: 10px;
}
.adm-tile-row span:first-child { color: var(--ink2); }
.adm-tile-row span:last-child  { color: var(--ink); font-weight: 750; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.adm-tile-row--muted { opacity: .62; }
.adm-tile-err  { font-size: .8rem; }
.adm-tile-hint { font-size: .8rem; line-height: 1.55; }
.adm-tile-hint code { background: var(--surface2); border-radius: 6px; padding: 2px 5px; font-size: .76rem; }

.adm-connections-section {
  --conn-ok: #10b981;
  --conn-warn: #f59e0b;
  --conn-missing: #ef4444;
}

.adm-connection-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.adm-connection-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, .22);
  background: rgba(16, 185, 129, .08);
  color: #047857;
  font-size: .78rem;
  font-weight: 800;
}

.adm-connection-summary span.is-warn {
  border-color: rgba(245, 158, 11, .26);
  background: rgba(245, 158, 11, .10);
  color: #b45309;
}

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

.adm-connection-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  box-shadow: 0 18px 42px rgba(15, 23, 42, .055);
}

.adm-connection-main,
.adm-connection-title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.adm-connection-main {
  justify-content: space-between;
}

.adm-connection-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #cbd5e1;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, .12);
}

.adm-connection-dot.is-ok { background: var(--conn-ok); box-shadow: 0 0 0 4px rgba(16, 185, 129, .12); }
.adm-connection-dot.is-warn { background: var(--conn-warn); box-shadow: 0 0 0 4px rgba(245, 158, 11, .12); }
.adm-connection-dot.is-missing { background: var(--conn-missing); box-shadow: 0 0 0 4px rgba(239, 68, 68, .12); }

.adm-connection-title {
  color: var(--ink);
  font-size: .92rem;
  font-weight: 880;
  line-height: 1.25;
}

.adm-connection-meta {
  margin-top: 3px;
  color: var(--ink2);
  font-size: .74rem;
  font-weight: 650;
}

.adm-connection-status {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: .7rem;
  font-weight: 850;
  border: 1px solid rgba(148, 163, 184, .24);
  background: var(--surface2);
  color: var(--ink2);
}

.adm-connection-status.is-ok {
  border-color: rgba(16, 185, 129, .24);
  background: rgba(16, 185, 129, .10);
  color: #047857;
}

.adm-connection-status.is-warn {
  border-color: rgba(245, 158, 11, .28);
  background: rgba(245, 158, 11, .10);
  color: #b45309;
}

.adm-connection-status.is-missing {
  border-color: rgba(239, 68, 68, .24);
  background: rgba(239, 68, 68, .08);
  color: #dc2626;
}

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

.adm-connection-fact {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 76%, transparent);
}

.adm-connection-fact span {
  color: var(--ink2);
  font-size: .68rem;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.adm-connection-fact code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  font-size: .73rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}

.adm-connection-note {
  margin: 0;
  color: var(--ink2);
  font-size: .8rem;
  line-height: 1.45;
}

.adm-env-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.adm-env-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--ink2);
  font-size: .68rem;
  font-weight: 780;
}

.adm-env-chip.is-ok {
  border-color: rgba(16, 185, 129, .22);
  background: rgba(16, 185, 129, .08);
  color: #047857;
}

.adm-env-chip.is-missing {
  border-color: rgba(239, 68, 68, .22);
  background: rgba(239, 68, 68, .08);
  color: #dc2626;
}

.adm-section-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.adm-connection-notes {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: var(--ink2);
  font-size: .78rem;
  line-height: 1.45;
}
.adm-latest-commit {
  display: grid;
  gap: 4px;
  margin: 8px 0 12px;
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 72%, transparent);
}
.adm-latest-commit code {
  width: fit-content;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--layf-accent-gradient-soft, var(--adm-accent-soft));
  color: var(--ink);
  font-size: .72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.adm-latest-commit strong {
  color: var(--ink);
  font-size: .82rem;
  line-height: 1.35;
}
.adm-latest-commit span {
  color: var(--ink2);
  font-size: .72rem;
}

.adm-deploy-state { font-size: .72rem; border-radius: 999px; padding: 2px 8px; font-weight: 750; }
.adm-deploy-state--ready    { background: #dcfce7; color: #166534; }
.adm-deploy-state--building { background: #dbeafe; color: #1e40af; }
.adm-deploy-state--error    { background: #fee2e2; color: #991b1b; }
.adm-deploy-state--canceled { background: var(--surface2); color: var(--ink2); }

.adm-section {
  margin-bottom: 0;
}
.adm-section-head {
  margin-bottom: 12px;
}

.adm-commit-list { display: flex; flex-direction: column; gap: 8px; }
.adm-commit {
  display: grid; grid-template-columns: 64px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--adm-accent-border);
  border-radius: 14px;
  font-size: .82rem;
}
.adm-commit-sha { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--accent); font-size: .78rem; }
.adm-commit-msg { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.adm-commit-meta { font-size: .72rem; white-space: nowrap; }

.adm-user-list { display: flex; flex-direction: column; gap: 12px; }
.adm-user-row {
  border: 1px solid var(--adm-accent-border);
  background:
    linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.88)),
    repeating-linear-gradient(90deg, transparent 0 18px, var(--adm-grid-line) 18px 19px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .045);
}
.adm-user-row.is-selected {
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  box-shadow: 0 18px 50px rgba(124, 92, 252, .10), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.adm-user-row.is-admin-user {
  border-color: transparent;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.9)) padding-box,
    var(--layf-accent-gradient, linear-gradient(135deg, #fb923c, #ec4899, #7c3aed)) border-box;
  box-shadow: 0 18px 52px rgba(124, 92, 252, .12);
}
.adm-user-row.is-deleted-user {
  border-color: color-mix(in srgb, #ef4444 34%, var(--border));
  background:
    radial-gradient(circle at top right, rgba(239, 68, 68, .10), transparent 34%),
    color-mix(in srgb, #fee2e2 30%, var(--surface));
}
.adm-user-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.adm-user-main.has-selection {
  grid-template-columns: 28px 42px minmax(0, 1fr) auto;
}
.adm-invite-check {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.adm-invite-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.adm-invite-check span {
  width: 18px;
  height: 18px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  background: var(--surface);
  box-shadow: inset 0 0 0 3px var(--surface);
}
.adm-invite-check input:checked + span {
  background: var(--layf-accent-gradient, var(--accent));
  border-color: transparent;
}
.adm-invite-check input:focus-visible + span {
  outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 2px;
}
.adm-invite-bulk {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 4px;
}
.adm-user-avatar {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--adm-accent-soft);
  border: 1px solid var(--adm-accent-border);
  color: var(--accent);
  font-weight: 850;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.adm-user-avatar.is-admin {
  color: #111827;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient, var(--accent)) border-box;
}
.adm-user-avatar.is-deleted {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fecaca;
}
.adm-user-ident { min-width: 0; }
.adm-user-email { font-size: .9rem; font-weight: 850; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); margin-bottom: 3px; }
.adm-user-id { font-size: .72rem; color: var(--ink2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-plan-btn { justify-self: end; }
.adm-user-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.adm-user-stats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.adm-stat-chip {
  font-size: .75rem;
  padding: 3px 9px;
  background: color-mix(in srgb, var(--surface2) 86%, var(--accent) 14%);
  border: 1px solid color-mix(in srgb, var(--border) 76%, var(--accent) 24%);
  border-radius: 999px;
  color: var(--ink2);
  line-height: 1.3;
}
.adm-stat-chip.is-admin { background: var(--layf-accent-gradient-soft, var(--adm-accent-soft)); color: var(--ink); }
.adm-stat-chip.is-ok { background: #ecfdf5; border-color: #bbf7d0; color: #047857; }
.adm-stat-chip.is-warn { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.adm-stat-chip.is-deleted { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.adm-stat-chip.is-shared { background: var(--layf-accent-gradient-soft, var(--adm-accent-soft)); border-color: var(--adm-accent-border); color: var(--ink); }
.adm-stat-chip.is-neutral { background: var(--surface2); border-color: var(--border); color: var(--ink2); }
.adm-push-devices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.adm-device-chip {
  font-size: .72rem; padding: 3px 8px;
  background: #eff6ff; color: #1e40af; border: 1px solid #dbeafe; border-radius: 999px;
}

.adm-empty-users {
  color: var(--ink2);
  font-size: .86rem;
  border: 1px dashed var(--adm-accent-border);
  background: rgba(255,255,255,.64);
}

.adm-user-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.adm-user-detail-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface2) 78%, transparent);
}

.adm-user-detail-card--wide {
  grid-column: 1 / -1;
}

.adm-user-detail-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 900;
}

.adm-user-detail-card p {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
}

.adm-detail-rows,
.adm-access-table {
  display: grid;
  gap: 7px;
}

.adm-detail-rows > div,
.adm-access-table > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  min-width: 0;
  font-size: .76rem;
}

.adm-detail-rows span,
.adm-access-table span {
  color: var(--ink2);
}

.adm-detail-rows strong,
.adm-access-table strong {
  margin: 0;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-access-table em {
  font-style: normal;
  color: var(--ink2);
  font-size: .7rem;
}

.adm-access-table--admin {
  gap: 9px;
}

.adm-access-row {
  display: grid !important;
  grid-template-columns: minmax(160px, 1fr) 110px 82px minmax(240px, auto);
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.adm-access-row:last-child {
  border-bottom: 0;
}

.adm-access-row span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.adm-access-row span:first-child strong {
  font-family: inherit;
  font-size: .78rem;
}

.adm-access-row small {
  color: var(--ink2);
  font-size: .66rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-access-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.btn.btn-xs {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .7rem;
  line-height: 1;
}
.adm-deleted-notice {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #fecaca;
  background: color-mix(in srgb, #fee2e2 46%, var(--surface));
  color: #991b1b;
}
.adm-deleted-notice strong {
  font-size: .82rem;
  color: #7f1d1d;
}
.adm-deleted-notice span {
  font-size: .76rem;
  line-height: 1.45;
  color: #991b1b;
}

.adm-delete-plan {
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 30%),
    var(--surface);
}
.adm-delete-plan.is-protected { border-color: rgba(251, 146, 60, .42); }
.adm-delete-plan.is-error { border-color: rgba(239, 68, 68, .35); color: #991b1b; display: grid; gap: 4px; }
.adm-delete-plan-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.adm-delete-plan-title {
  color: var(--ink);
  font-weight: 900;
  letter-spacing: 0;
}
.adm-plan-loading {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--ink2);
  font-size: .86rem;
}
.adm-plan-loading .adm-spinner {
  width: 22px;
  height: 22px;
  border-width: 2px;
}
.adm-plan-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.adm-plan-metrics > div {
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.adm-plan-metrics strong {
  display: block;
  color: var(--ink);
  font-size: 1.08rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.adm-plan-metrics span {
  display: block;
  margin-top: 2px;
  color: var(--ink2);
  font-size: .72rem;
}
.adm-plan-warning {
  display: grid;
  gap: 5px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(251, 146, 60, .28);
  background: #fff7ed;
  color: #9a3412;
  font-size: .78rem;
  line-height: 1.45;
}
.adm-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}
.adm-plan-section {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}
.adm-plan-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.adm-plan-section-head strong {
  font-size: .8rem;
}
.adm-plan-section-head span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 900;
}
.adm-plan-action {
  margin-top: 4px;
  color: var(--ink2);
  font-size: .7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.adm-plan-samples {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.adm-plan-samples code {
  display: block;
  padding: 4px 6px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: .68rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-plan-next {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--ink2);
  font-size: .76rem;
}
.adm-plan-next strong {
  color: var(--ink);
}
.adm-plan-next span {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface2);
}
.adm-delete-final {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.adm-delete-final > div:first-child {
  display: grid;
  gap: 3px;
}
.adm-delete-final strong {
  color: var(--ink);
  font-weight: 900;
}
.adm-delete-final span {
  color: var(--ink2);
  font-size: .78rem;
  line-height: 1.45;
}
.adm-delete-final.is-protected,
.adm-delete-final.is-done {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface2) 78%, transparent);
}
.adm-delete-final.is-done {
  border-color: color-mix(in srgb, #22c55e 26%, var(--border));
  background: color-mix(in srgb, #22c55e 7%, var(--surface));
}
.adm-delete-final.is-deleted {
  border: 1px solid #fecaca;
  border-radius: 14px;
  padding: 12px;
  background: color-mix(in srgb, #fee2e2 40%, var(--surface));
}
.adm-delete-final.is-deleted strong,
.adm-delete-final.is-deleted span {
  color: #991b1b;
}
.adm-predelete-chip {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #22c55e 24%, var(--border));
  background: color-mix(in srgb, #22c55e 7%, var(--surface));
}
.adm-delete-actions {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.adm-delete-confirm {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.adm-delete-confirm span {
  font-size: .72rem;
  font-weight: 750;
  color: var(--ink2);
}
.adm-delete-confirm input {
  min-height: 36px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .82rem;
  padding: 0 11px;
}
.adm-delete-confirm input:focus {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 11%, transparent);
  outline: 0;
}
.adm-delete-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.adm-usage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 12px;
  margin: 12px 0;
}
.adm-usage-card {
  border: 1px solid var(--adm-accent-border);
}
.adm-usage-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.adm-usage-card-head strong {
  color: var(--ink);
}
.adm-usage-card-head span {
  color: var(--ink2);
  font-size: .75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.adm-key-list {
  display: grid;
  gap: 6px;
}
.adm-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.adm-key-row:first-child {
  border-top: 0;
}
.adm-key-row code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  font-size: .78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.adm-key-row span {
  color: var(--ink2);
  font-size: .72rem;
  white-space: nowrap;
}

.adm-usage-users {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .03);
}

.adm-usage-users-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.adm-usage-users-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 820;
}

.adm-usage-users-head p {
  margin: 3px 0 0;
  color: var(--ink2);
  font-size: .72rem;
  line-height: 1.4;
}

.adm-usage-users-head > span {
  flex: none;
  color: var(--ink2);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

.adm-usage-table-shell {
  max-height: 420px;
  overflow: auto;
}

.adm-usage-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.adm-usage-table th,
.adm-usage-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.adm-usage-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface2);
  color: var(--ink2);
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.adm-usage-table td {
  color: var(--ink2);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.adm-usage-table th:first-child,
.adm-usage-table td:first-child {
  width: 34%;
}

.adm-usage-table td:first-child {
  overflow: hidden;
  color: var(--ink);
  font-weight: 720;
  text-overflow: ellipsis;
}

.adm-usage-table tbody tr:last-child td {
  border-bottom: 0;
}

.adm-usage-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 3%, var(--surface));
}

.adm-usage-table-empty {
  padding: 24px !important;
  color: var(--muted) !important;
  text-align: center !important;
}

@media (max-width: 700px) {
  .adm-tiles { grid-template-columns: 1fr; }
  .adm-tiles--operations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-tiles--operations .adm-tile { padding: 10px 11px; }
  .adm-user-details { grid-template-columns: 1fr; }
  .adm-detail-rows > div,
  .adm-access-table > div { align-items: flex-start; }
  .adm-access-row {
    grid-template-columns: 1fr;
    gap: 7px !important;
  }
  .adm-access-actions {
    justify-content: flex-start;
  }
  .adm-console-tabs { width: 100%; overflow-x: auto; }
  .adm-status-strip { width: 100%; }
  .adm-user-main { grid-template-columns: 38px minmax(0, 1fr); }
  .adm-user-actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .adm-plan-btn { justify-self: stretch; }
  .adm-plan-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-usage-grid { grid-template-columns: 1fr; }
  .adm-connection-list { grid-template-columns: 1fr; }
  .adm-connection-main { align-items: flex-start; }
  .adm-connection-grid { grid-template-columns: 1fr; }
  .adm-connection-fact code { white-space: normal; overflow-wrap: anywhere; }
  .adm-connection-summary { justify-content: flex-start; }
  .adm-key-row { grid-template-columns: 1fr; gap: 2px; }
  .adm-key-row span { white-space: normal; }
  .adm-usage-users-head { align-items: flex-start; }
  .adm-usage-table-shell { max-height: 480px; }
  .adm-usage-table,
  .adm-usage-table tbody,
  .adm-usage-table tr,
  .adm-usage-table td {
    display: block;
    width: 100%;
  }
  .adm-usage-table thead { display: none; }
  .adm-usage-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
  }
  .adm-usage-table tbody tr:last-child { border-bottom: 0; }
  .adm-usage-table td,
  .adm-usage-table td:first-child {
    width: auto;
    padding: 4px 0;
    border: 0;
  }
  .adm-usage-table td:first-child {
    grid-column: 1 / -1;
    margin-bottom: 3px;
  }
  .adm-usage-table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 1px;
    color: var(--muted);
    font-size: .58rem;
    font-weight: 760;
    text-transform: uppercase;
  }
  .adm-usage-table-empty { grid-column: 1 / -1 !important; }
  .adm-commit { grid-template-columns: 56px 1fr; }
  .adm-commit-meta { display: none; }
  .adm-delete-actions { grid-template-columns: 1fr; }
  .adm-delete-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── Admin panel Stage 1 information architecture ─────────────────────── */

.adm-console {
  --adm-row-columns: minmax(220px, 1.45fr) 128px 150px 130px 142px minmax(112px, auto);
}

.adm-console-tabs {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.adm-console-tabs button {
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: .78rem;
}

.adm-console-tabs button.active {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, var(--border));
}

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

.adm-overview-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .035);
}

.adm-overview-panel--wide {
  grid-column: 1 / -1;
}

.adm-overview-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.adm-overview-panel-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: .92rem;
}

.adm-overview-panel-head p {
  margin: 3px 0 0;
  color: var(--ink2);
  font-size: .72rem;
}

.adm-overview-count {
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: .76rem;
  font-weight: 850;
}

.adm-overview-count.is-warn {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.adm-overview-count.is-ok {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #047857;
}

.adm-overview-list,
.adm-overview-activity {
  display: grid;
  gap: 0;
}

.adm-overview-action {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--border);
}

.adm-overview-action:first-child {
  border-top: 0;
}

.adm-overview-action > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.adm-overview-action i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #f59e0b;
}

.adm-overview-action strong,
.adm-overview-action b {
  color: var(--ink);
  font-size: .76rem;
}

.adm-overview-action b {
  font-variant-numeric: tabular-nums;
}

.adm-overview-action button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--accent);
  font-size: .9rem;
  cursor: pointer;
}

.adm-overview-action button:hover {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.adm-overview-clear {
  min-height: 112px;
  display: grid;
  place-items: center;
  color: #047857;
  font-size: .78rem;
  text-align: center;
}

.adm-overview-activity {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 8px;
}

.adm-overview-activity > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 11px;
  border-left: 1px solid var(--border);
}

.adm-overview-activity > div:first-child {
  border-left: 0;
}

.adm-overview-activity span,
.adm-overview-safety span {
  color: var(--ink2);
  font-size: .66rem;
  font-weight: 750;
}

.adm-overview-activity strong,
.adm-overview-safety strong {
  overflow: hidden;
  color: var(--ink);
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-overview-activity small,
.adm-overview-safety small {
  color: var(--ink2);
  font-size: .66rem;
  line-height: 1.4;
}

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

.adm-overview-safety > div {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.adm-overview-safety > div::before {
  content: "";
  position: absolute;
  top: 11px;
  right: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
}

.adm-overview-safety > div.is-ok::before { background: #16a34a; }
.adm-overview-safety > div.is-warn::before { background: #f59e0b; }

.adm-people-workspace {
  display: grid;
  gap: 14px;
}

.adm-workspace-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.adm-workspace-head .section-title {
  margin: 0;
  font-size: 1.08rem;
}

.adm-workspace-head p {
  margin: 4px 0 0;
  font-size: .8rem;
}

.adm-people-switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
}

.adm-people-switch button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink2);
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
  cursor: pointer;
}

.adm-people-switch button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}

.adm-people-switch button span {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: .68rem;
}

.adm-directory {
  display: grid;
  gap: 12px;
}

.adm-directory-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.adm-directory-summary-item {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-content: center;
  padding: 9px 12px;
  border-left: 1px solid var(--border);
}

.adm-directory-summary-item:first-child {
  border-left: 0;
}

.adm-directory-summary-item > strong {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.adm-directory-summary-item > span {
  overflow: hidden;
  color: var(--ink2);
  font-size: .7rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-directory-summary-item > small {
  color: var(--ink2);
  font-size: .62rem;
}

.adm-directory-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(130px, auto)) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.adm-directory-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.adm-directory-search .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.adm-directory-search svg {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink2);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}

.adm-directory-search input,
.adm-directory-select select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .78rem;
  outline: 0;
}

.adm-directory-search input {
  padding: 0 12px 0 36px;
}

.adm-directory-select {
  display: grid;
  gap: 4px;
}

.adm-directory-select > span {
  color: var(--ink2);
  font-size: .66rem;
  font-weight: 750;
}

.adm-directory-select select {
  padding: 0 28px 0 10px;
}

.adm-directory-search input:focus,
.adm-directory-select select:focus {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent);
}

.adm-directory-count {
  align-self: center;
  padding: 0 4px;
  color: var(--ink2);
  font-size: .72rem;
  white-space: nowrap;
}

.adm-invites-directory {
  display: grid;
  gap: 10px;
}

.adm-invite-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.adm-invite-controls .adm-user-filters {
  margin: 0;
}

.adm-icon-action {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink2);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.adm-icon-action:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--ink);
}

.adm-icon-action:disabled {
  opacity: .45;
  cursor: default;
}

.adm-icon-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adm-invite-selection-bar {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 6px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.adm-invite-selection-bar > span {
  color: var(--ink2);
  font-size: .72rem;
}

.adm-invite-selection-bar > span strong {
  color: var(--ink);
}

.adm-invite-selection-bar > div {
  display: flex;
  gap: 7px;
}

.adm-invite-selection-bar .btn {
  min-height: 34px;
  border-radius: 7px;
  font-size: .7rem;
}

.adm-user-table-shell {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .035);
}

.adm-user-table-head,
.adm-user-row {
  display: grid;
  grid-template-columns: var(--adm-row-columns);
  gap: 12px;
  align-items: center;
}

.adm-user-table-head {
  min-height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 74%, var(--surface));
  color: var(--ink2);
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.adm-user-list {
  display: block;
}

.adm-user-row {
  min-height: 62px;
  padding: 9px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.adm-user-row:last-child {
  border-bottom: 0;
}

.adm-user-row:hover,
.adm-user-row.is-selected {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  box-shadow: none;
}

.adm-user-row.is-admin-user {
  border: 0;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 42%);
}

.adm-user-row.is-deleted-user {
  opacity: .74;
  background: color-mix(in srgb, #fee2e2 18%, var(--surface));
}

.adm-user-identity {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.adm-user-row .adm-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: .74rem;
}

.adm-user-row .adm-user-email {
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-user-secondary {
  overflow: hidden;
  margin-top: 2px;
  color: var(--ink2);
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-user-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--ink2);
  font-size: .74rem;
}

.adm-user-cell strong {
  overflow: hidden;
  color: var(--ink);
  font-size: .75rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-user-cell small {
  overflow: hidden;
  color: var(--ink2);
  font-size: .66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-status-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  color: var(--ink2);
  font-size: .72rem;
  font-weight: 750;
  white-space: nowrap;
}

.adm-status-label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
}

.adm-status-label.is-ok i { background: #16a34a; }
.adm-status-label.is-warn i { background: #f59e0b; }
.adm-status-label.is-deleted i { background: #ef4444; }
.adm-status-label.is-admin i { background: var(--accent); }

.adm-user-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.adm-user-row-actions .btn {
  min-height: 32px;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: .7rem;
  white-space: nowrap;
}

.adm-empty-users {
  min-height: 120px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 0;
  background: var(--surface);
  color: var(--ink2);
  font-size: .8rem;
  text-align: center;
}

.adm-user-drawer-layer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
}

.adm-user-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, .38);
  backdrop-filter: blur(2px);
  cursor: default;
}

.adm-user-drawer {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--surface);
  box-shadow: -18px 0 46px rgba(15, 23, 42, .18);
}

.adm-user-drawer-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 36px;
  gap: 11px;
  align-items: center;
  min-height: 72px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.adm-user-drawer-head > div:nth-child(2) {
  min-width: 0;
}

.adm-user-drawer-head > div:nth-child(2) > strong,
.adm-user-drawer-head > div:nth-child(2) > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-user-drawer-head > div:nth-child(2) > strong {
  color: var(--ink);
  font-size: .88rem;
}

.adm-user-drawer-head > div:nth-child(2) > span {
  margin-top: 3px;
  color: var(--ink2);
  font-size: .72rem;
}

.adm-drawer-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.adm-drawer-close:hover {
  color: var(--ink);
  background: var(--surface2);
}

.adm-user-drawer-body {
  overflow-y: auto;
  padding: 16px;
}

.adm-user-drawer .adm-user-details {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.adm-user-drawer .adm-user-detail-card {
  border-radius: 8px;
  background: var(--surface);
}

.adm-user-drawer .adm-delete-plan,
.adm-user-drawer .adm-plan-section,
.adm-user-drawer .adm-plan-metrics > div,
.adm-user-drawer .adm-delete-final {
  border-radius: 8px;
}

.adm-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, #ef4444 22%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, #fee2e2 18%, var(--surface));
}

.adm-danger-zone > div:first-child {
  display: grid;
  gap: 3px;
}

.adm-danger-zone strong {
  color: var(--ink);
  font-size: .8rem;
}

.adm-danger-zone span {
  color: var(--ink2);
  font-size: .7rem;
  line-height: 1.4;
}

.adm-danger-actions {
  display: flex;
  flex: none;
  gap: 7px;
}

@media (max-width: 1050px) {
  .adm-console {
    --adm-row-columns: minmax(210px, 1.35fr) 120px 140px 120px minmax(112px, auto);
  }
  .adm-user-table-head span:nth-child(5),
  .adm-user-row > .adm-user-cell:nth-child(5) {
    display: none;
  }
  .adm-directory-toolbar {
    grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(122px, auto));
  }
  .adm-directory-count {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

@media (max-width: 700px) {
  .adm-overview-grid {
    grid-template-columns: 1fr;
  }
  .adm-overview-panel--wide {
    grid-column: auto;
  }
  .adm-overview-activity {
    grid-template-columns: 1fr;
  }
  .adm-overview-activity > div {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
  .adm-overview-activity > div:first-child {
    border-top: 0;
  }
  .adm-overview-safety {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .adm-console-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .adm-console-tabs button {
    white-space: normal;
  }
  .adm-workspace-head {
    align-items: stretch;
    flex-direction: column;
  }
  .adm-people-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .adm-people-switch button {
    justify-content: center;
  }
  .adm-directory-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .adm-directory-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .adm-directory-summary-item:nth-child(3) {
    border-left: 0;
  }
  .adm-directory-summary-item:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
  .adm-invite-controls {
    align-items: stretch;
  }
  .adm-invite-controls .adm-user-filters {
    flex: 1;
  }
  .adm-invite-selection-bar {
    align-items: stretch;
    flex-direction: column;
  }
  .adm-invite-selection-bar > div {
    justify-content: flex-end;
  }
  .adm-directory-search {
    grid-column: 1 / -1;
  }
  .adm-directory-select:last-of-type {
    grid-column: 1 / -1;
  }
  .adm-directory-count {
    grid-column: 1 / -1;
  }
  .adm-user-table-shell {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .adm-user-table-head {
    display: none;
  }
  .adm-user-list {
    display: grid;
    gap: 8px;
  }
  .adm-user-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .adm-user-row:last-child,
  .adm-user-row.is-admin-user {
    border: 1px solid var(--border);
  }
  .adm-user-identity {
    grid-column: 1 / -1;
  }
  .adm-user-cell {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--border);
  }
  .adm-user-cell::before {
    content: attr(data-label);
    color: var(--ink2);
    font-size: .66rem;
  }
  .adm-user-cell--status {
    grid-column: 1 / -1;
  }
  .adm-user-row > .adm-user-cell:nth-child(4),
  .adm-user-row > .adm-user-cell:nth-child(5) {
    display: none;
  }
  .adm-user-row-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .adm-user-row-actions .btn {
    flex: 1;
  }
  .adm-user-drawer {
    width: 100%;
  }
  .adm-user-drawer-body {
    padding: 12px;
  }
  .adm-user-drawer .adm-user-details {
    grid-template-columns: 1fr;
  }
  .adm-danger-zone,
  .adm-danger-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .adm-danger-actions .btn {
    width: 100%;
  }
}

.adm-user-row.adm-invite-record {
  display: block;
  min-height: 0;
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.adm-user-row.adm-invite-record .adm-user-main {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.adm-user-row.adm-invite-record .adm-user-main.has-selection {
  grid-template-columns: 28px 42px minmax(0, 1fr) auto;
}

.adm-user-row.adm-invite-record .adm-user-stats {
  display: flex;
}

@media (max-width: 700px) {
  .adm-user-row.adm-invite-record {
    display: block;
  }
  .adm-user-row.adm-invite-record .adm-user-main {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .adm-user-row.adm-invite-record .adm-user-main.has-selection {
    grid-template-columns: 28px 38px minmax(0, 1fr);
  }
}

/* ─── Access Control module ──────────────────────────────────────────────── */

/* Expiry banner */
.ac-expiry-banner {
  background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 12px; padding: 12px 16px; margin-bottom: 16px;
}
.ac-banner-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.ac-banner-title { font-size: .85rem; font-weight: 700; color: #b45309; }
.ac-banner-count {
  font-size: .75rem; background: #f97316; color: #fff;
  border-radius: 20px; padding: 1px 7px; font-weight: 700;
}
.ac-banner-list { display: flex; flex-direction: column; gap: 8px; }
.ac-banner-item {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.6); border-radius: 8px; padding: 8px 10px;
}
.ac-banner-item-icon { font-size: 1.1rem; flex-shrink: 0; }
.ac-banner-item-info { flex: 1; min-width: 0; }
.ac-banner-item-label { font-size: .85rem; font-weight: 600; color: var(--ink); display: block; }
.ac-banner-item-prop  { font-size: .75rem; color: var(--ink2); }
.ac-banner-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ac-expiry-pill {
  font-size: .72rem; border-radius: 20px; padding: 2px 8px; font-weight: 600;
}
.ac-expiry-pill--expired { background: #fee2e2; color: #b91c1c; }
.ac-expiry-pill--soon    { background: #fff7ed; color: #b45309; }

/* Property filter pills */
.ac-prop-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ac-prop-pill {
  font-size: .8rem; padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--ink2); cursor: pointer; font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
}
.ac-prop-pill.is-active,
.ac-prop-pill:hover {
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  border-color: var(--layf-accent-border, var(--accent));
  color: var(--ink);
}

/* Featured strip */
.ac-featured-section { margin-bottom: 20px; }
.ac-featured-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink2); margin-bottom: 8px;
}
.ac-featured-strip {
  display: flex; gap: 12px; overflow-x: auto;
  padding-bottom: 4px; scrollbar-width: none;
}
.ac-featured-strip::-webkit-scrollbar { display: none; }
.ac-featured-card {
  flex-shrink: 0; width: 200px; background: var(--surface);
  border: 1.5px solid var(--border); border-radius: 14px;
  padding: 14px; display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
}
.ac-featured-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--cat-color, var(--accent));
}
.ac-featured-top {
  display: flex; align-items: center; gap: 8px;
}
.ac-featured-icon { font-size: 1.1rem; }
.ac-featured-name { font-size: .85rem; font-weight: 700; color: var(--ink); }
.ac-featured-prop { font-size: .72rem; color: var(--ink2); }
.ac-featured-expiry { font-size: .72rem; color: var(--ink2); margin-top: 2px; }
.ac-featured-expiry--expired { color: #b91c1c; font-weight: 600; }

/* PIN chip (featured + list) */
.ac-pin-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 5px 10px; cursor: pointer;
  font-size: .85rem; font-family: monospace; letter-spacing: .08em;
  font-weight: 700; color: var(--ink2); transition: background .15s;
  user-select: none;
}
.ac-pin-chip.is-revealed { background: #f0fdf4; border-color: #86efac; color: #166534; }
.ac-pin-chip--sm { font-size: .78rem; padding: 3px 8px; }
.ac-pin-copy { font-size: .8rem; cursor: pointer; opacity: .6; }
.ac-pin-copy:hover { opacity: 1; }
.ac-card-chip {
  font-size: .78rem; background: var(--surface2); border-radius: 6px;
  padding: 3px 8px; color: var(--ink2);
}
.ac-card-num { font-size: .82rem; font-family: monospace; color: var(--ink2); }

/* Rotation bar */
.ac-rot-bar-wrap {
  height: 4px; background: var(--border); border-radius: 4px;
  overflow: hidden; margin-top: 2px;
}
.ac-rot-bar-fill { height: 100%; border-radius: 4px; transition: width .3s; }
.ac-rot-label { font-size: .72rem; color: var(--ink2); margin-top: 2px; }
.ac-copy-btn { font-size: .8rem; padding: 2px 6px; }

/* Stats grid */
.ac-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 20px;
}
.ac-stat-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 12px; display: flex;
  flex-direction: column; align-items: flex-start; gap: 4px;
}
.ac-stat-icon { font-size: 1.1rem; }
.ac-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--ink); line-height: 1; }
.ac-stat-label { font-size: .72rem; color: var(--ink2); }
.ac-stat-card--positive { border-color: #bbf7d0; background: #f0fdf4; }
.ac-stat-card--warning  { border-color: #fed7aa; background: #fff7ed; }
.ac-stat-card--danger   { border-color: #fecaca; background: #fef2f2; }
.ac-stat-card--info     { }

/* Type tabs */
.ac-type-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px;
  border-bottom: 1.5px solid var(--border); padding-bottom: 0;
}
.ac-type-tab {
  font-size: .82rem; padding: 7px 14px; border: none; background: none;
  cursor: pointer; color: var(--ink2); font-weight: 500;
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
  border-radius: 4px 4px 0 0; transition: color .15s;
}
.ac-type-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 700; }
.ac-type-tab:hover:not(.is-active) { color: var(--ink); background: var(--surface2); }

/* Code list */
.ac-code-list { display: flex; flex-direction: column; gap: 6px; }
.ac-code-row {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
  transition: box-shadow .15s;
}
.ac-code-row--emergency { border-color: #fecaca; background: #fef2f2; }
.ac-code-row--inactive  { opacity: .6; }
.ac-row-left { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.ac-cat-badge {
  width: 30px; height: 30px; border-radius: 8px; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ac-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ac-row-label {
  font-size: .88rem; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ac-row-company { font-size: .75rem; color: var(--ink2); font-weight: 400; }
.ac-row-meta {
  font-size: .75rem; color: var(--ink2);
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.ac-row-sep { opacity: .4; }
.ac-row-indicators { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ac-row-indicator {
  font-size: .72rem; padding: 2px 8px; border-radius: 20px;
  background: var(--surface2); color: var(--ink2);
}
.ac-row-indicator--danger { background: #fee2e2; color: #b91c1c; }
.ac-row-indicator--warn   { background: #fff7ed; color: #b45309; }
.ac-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }

/* Status badges */
.ac-status { font-size: .72rem; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.ac-status--active    { background: #dcfce7; color: #166534; }
.ac-status--suspended { background: #f3f4f6; color: #6b7280; }
.ac-status--expired   { background: #fee2e2; color: #b91c1c; }
.ac-status--revoked   { background: #f3f4f6; color: #9ca3af; text-decoration: line-through; }

/* Empty state */
.ac-empty { text-align: center; padding: 48px 24px; color: var(--ink2); }
.ac-empty-icon { font-size: 2.2rem; margin-bottom: 10px; }
.ac-empty-title { font-size: 1rem; font-weight: 700; color: var(--ink); }
.ac-empty-sub   { font-size: .85rem; margin-top: 4px; }

/* Row actions + code area */
.ac-row-right      { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.ac-row-code-area  { display: flex; align-items: center; gap: 4px; }
.ac-row-actions    { display: flex; align-items: center; gap: 2px; }
.ac-featured-tag   { font-size: .7rem; color: #d97706; margin-left: 4px; }
.ac-featured-edit-btn { margin-left: auto; opacity: 0; transition: opacity .15s; }
.ac-featured-card:hover .ac-featured-edit-btn { opacity: 1; }

/* Search */
.ac-search-row   { margin-bottom: 10px; }
.ac-search-input {
  width: 100%; padding: 8px 14px;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font-size: .9rem; font-family: var(--sans, sans-serif);
  outline: none; transition: border-color .15s;
}
.ac-search-input:focus { border-color: var(--accent, #7c5cfc); }

/* Revoke button in banner */
.ac-revoke-btn { color: #b91c1c !important; }
.ac-revoke-btn:hover { background: #fee2e2 !important; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.ac-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ac-modal-card {
  background: var(--surface); border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  width: 100%; max-width: 560px;
  max-height: 92vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.ac-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
  border-radius: 20px 20px 0 0;
}
.ac-modal-title { font-size: 1rem; font-weight: 700; color: var(--ink); }
.ac-modal-body  { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.ac-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface); border-radius: 0 0 20px 20px;
  position: sticky; bottom: 0; z-index: 1;
}

/* ── Form elements ───────────────────────────────────────────────────────── */
.ac-form-row {
  display: flex; gap: 10px; align-items: flex-start;
}
.ac-form-group {
  display: flex; flex-direction: column; gap: 4px;
}
.ac-form-group--grow { flex: 1; min-width: 0; }
.ac-form-label {
  font-size: .78rem; font-weight: 600; color: var(--ink2);
  display: block;
}
.ac-form-input {
  padding: 8px 10px;
  border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--surface2); color: var(--ink);
  font-size: .88rem; font-family: var(--sans, sans-serif);
  outline: none; transition: border-color .15s;
  width: 100%; box-sizing: border-box;
}
.ac-form-input:focus { border-color: var(--accent, #7c5cfc); background: var(--surface); }
.ac-form-input--mono { font-family: monospace; letter-spacing: .06em; font-size: .92rem; }
textarea.ac-form-input { resize: vertical; min-height: 56px; }
select.ac-form-input   { cursor: pointer; }

/* Toggle checkbox row */
.ac-form-toggle {
  display: flex; align-items: center; gap: 8px;
  font-weight: 500; color: var(--ink); cursor: pointer;
  padding: 6px 0;
}
.ac-form-toggle input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }

/* Last-changed meta row in edit modal */
.ac-form-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface2); border-radius: 8px; padding: 8px 12px;
  font-size: .8rem; color: var(--ink2);
}

/* Mobile */
@media (max-width: 768px) {
  .ac-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .ac-form-row   { flex-direction: column; }
}
@media (max-width: 480px) {
  .ac-stats-grid  { grid-template-columns: repeat(2, 1fr); }
  .ac-featured-card { width: 170px; }
  .ac-type-tab    { font-size: .78rem; padding: 6px 10px; }
  .ac-modal-backdrop { align-items: flex-end; padding: 0; }
  .ac-modal-card  { border-radius: 20px 20px 0 0; max-height: 95vh; }
}

/* ─── Cleaning Schedule module ───────────────────────────────────────────── */

/* Shared sync pill (used in stats bar) */
.cs-sync-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; color: var(--ink2);
  background: var(--surface2); border-radius: 99px;
  padding: 4px 10px; border: 1px solid var(--border);
}
.cs-sync-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cs-sync-dot--ok     { background: #22c55e; }
.cs-sync-dot--error  { background: #ef4444; }
.cs-sync-dot--sample { background: #f59e0b; }
.cs-sync-dot--live   { background: #22c55e; }
.cs-sync-pill--live  { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }

/* ── 7-day date strip ── */
/* overflow-x:auto would also clip overflow-y, cutting the pill top on hover/transform.
   Scroll on a wrapper div; strip itself stays overflow:visible. */
.cs-date-strip-scroll {
  overflow-x: auto; overflow-y: visible;
  scrollbar-width: none; margin-bottom: 16px;
}
.cs-date-strip-scroll::-webkit-scrollbar { display: none; }
.cs-date-strip {
  display: flex; gap: 8px;
  padding: 4px 0 4px; /* top padding so translateY(-1px) + box-shadow aren't clipped */
  width: max-content; min-width: 100%;
}

.cs-date-pill {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px; padding: 10px 14px; border-radius: 14px; min-width: 72px;
  border: 1.5px solid var(--border); background: var(--surface);
  cursor: pointer; transition: all .15s; text-align: center; flex-shrink: 0;
}
.cs-date-pill:hover {
  border-color: var(--layf-accent-border, var(--accent));
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  transform: translateY(-1px);
}
/* Today pill — Layf gradient border only, no colored background.
   NOTE: solid fill must be a linear-gradient() not a bare <color>,
   because <color> in a non-final background layer cannot be per-layer clipped. */
.cs-date-pill--active {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface2), var(--surface2)) padding-box,
    linear-gradient(135deg, #fb923c, #ec4899, #c084fc, #7c3aed) border-box;
  box-shadow: 0 2px 10px rgba(251,146,60,.13);
}
.cs-date-pill--empty { opacity: .55; }

.cs-date-pill-day {
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink2);
}
.cs-date-pill-num  { font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1.05; }
.cs-date-pill-mon  { font-size: .65rem; color: var(--ink3); margin-bottom: 3px; }
.cs-date-pill-count {
  font-size: .68rem; font-weight: 700; color: var(--ink2);
  background: var(--surface2); border-radius: 99px; padding: 1px 7px;
}
.cs-date-pill-free  { font-size: .65rem; color: var(--ink3); font-style: italic; }

/* ── Today stats bar ── */
.cs-stats-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
  padding: 12px 16px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px;
}
.cs-stats-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.cs-stat-chip {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 14px; border-radius: 10px; min-width: 60px;
  background: var(--surface2); border: 1px solid var(--border);
  text-align: center;
}
.cs-stat-chip--money {
  background: color-mix(in srgb, #22c55e 8%, var(--surface));
  border-color: color-mix(in srgb, #22c55e 20%, var(--border));
}
.cs-stat-chip--alert {
  background: #fff5f5; border-color: #fca5a5;
}
html[data-dark='true'] .cs-stat-chip--alert { background: rgba(220,38,38,.10); border-color: #dc2626; }

.cs-stat-chip-val  { font-size: 1.1rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.cs-stat-chip-lbl  { font-size: .62rem; font-weight: 500; color: var(--ink2); white-space: nowrap; }
.cs-stat-chip--money .cs-stat-chip-val { color: #15803d; }
.cs-stat-chip--alert .cs-stat-chip-val { color: #dc2626; }
.cs-stats-right    { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Two-column body layout ── */
.cs-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 20px;
  align-items: start;
}
.cs-main   { min-width: 0; }
.cs-sidebar { display: flex; flex-direction: column; gap: 14px; }

/* ── Schedule: day sections ── */
.cs-schedule { display: flex; flex-direction: column; gap: 10px; }

/* Collapsible day section */
.cs-day-section {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 16px; overflow: hidden;
}
.cs-day-section--empty { opacity: .6; }

/* Future days (not today, not past): subtle but visible gray border */
.cs-day-section:not(.cs-day-section--today):not(.cs-day-section--past) {
  border-color: rgba(17,24,56,.12);
}
html[data-dark='true'] .cs-day-section:not(.cs-day-section--today):not(.cs-day-section--past) {
  border-color: rgba(255,255,255,.12);
}

/* Today highlight — thicker Layf gradient left bar + gradient border all around.
   Solid fill via linear-gradient(color, color) so padding-box clip applies correctly. */
.cs-day-section--today {
  border: 1.5px solid transparent;
  border-left-width: 4px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(to bottom, #fb923c, #ec4899, #c084fc, #7c3aed) border-box;
  box-shadow: 0 4px 16px rgba(251,146,60,.08);
}
/* Header stays neutral — no accent tint */
.cs-day-section--today .cs-day-header-row { background: var(--surface2); }
.cs-day-section--today .cs-day-header-row:hover { background: var(--surface); }
.cs-day-section--today .cs-day-header { background: transparent; }
.cs-day-section--today .cs-day-name { color: var(--ink); }

/* .cs-day-body is hidden when section NOT open */
.cs-day-body { display: none; }
.cs-day-section--open .cs-day-body { display: block; }

/* Row wrapping the toggle header + inline "Dodaj zadanie" button */
.cs-day-header-row {
  display: flex; align-items: stretch;
  background: var(--surface2);
}
.cs-day-header-row:hover { background: var(--surface); }

/* Collapsed header shows chevron pointing right; open rotates it down */
.cs-day-header {
  display: flex; align-items: center; gap: 10px;
  flex: 1; padding: 12px 16px;
  background: transparent; border: none; cursor: pointer;
  text-align: left; transition: background .12s;
}
.cs-day-header:hover { background: transparent; }

/* Compact read-only/call-to-action controls pinned to the right of a day header. */
.cs-day-inline-action {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
  padding: 0 14px;
  font-size: .75rem; font-weight: 600;
  color: var(--ink2);
  border: none; border-left: 1px solid var(--border);
  background: transparent; cursor: pointer; white-space: nowrap;
  transition: color .12s, background .12s;
}
.cs-day-inline-action:hover {
  color: var(--accent); background: var(--layf-accent-soft-bg, var(--accent-lt));
}
.cs-day-inline-action svg { flex-shrink: 0; }
.cs-day-copy { color: var(--ink3); }

@media (max-width: 700px) {
  .cs-day-header { min-width: 0; gap: 6px; padding-inline: 10px; }
  .cs-day-inline-action { min-width: 38px; justify-content: center; padding-inline: 10px; }
  .cs-day-action-label { display: none; }
  .cs-day-meta { gap: 3px; }
  .cs-day-tag { padding-inline: 5px; }
}

.cs-day-chevron {
  flex-shrink: 0; color: var(--ink3);
  transform: rotate(-90deg); transition: transform .2s;
}
.cs-day-section--open .cs-day-chevron { transform: rotate(0deg); }

.cs-day-name  { font-size: .87rem; font-weight: 700; color: var(--ink); }
.cs-day-meta  { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; flex-wrap: wrap; }
.cs-day-tag   {
  font-size: .68rem; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; padding: 2px 8px; color: var(--ink2);
}
.cs-day-tag--wp { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
/* cs-day-sep / cs-day-total removed — price no longer shown in header */
.cs-day-free  { font-size: .75rem; color: var(--ink3); font-style: italic; }
/* cs-day-newdot removed — NOWE badge on each row is enough */

/* ── Table layout ── */
/* Columns: Apt | Checkout | WPchip | Checkin | Price | Action */
.cs-thead,
.cs-trow {
  display: grid;
  grid-template-columns: 1fr 72px 52px 72px 64px 38px;
  align-items: center;
  gap: 0;
  padding: 0 4px;
}
.cs-thead {
  padding: 7px 4px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.cs-trow {
  border-bottom: 1px solid var(--border);
  transition: background .1s; min-height: 42px;
}
.cs-trow:last-child { border-bottom: none; }
.cs-trow:hover { background: var(--surface2); }

/* Row state variants — left bar removed (W/P chip + NOWE badge + issue icon already signal these) */
.cs-trow--issue      { /* no left bar — issue icon + inline text already visible */ }
.cs-trow--lastminute { background: #fffbeb; }
.cs-trow--moved { background: #f7f5ff; }
html[data-dark='true'] .cs-trow--lastminute { background: rgba(245,158,11,.10); }
html[data-dark='true'] .cs-trow--moved { background: rgba(124,92,252,.10); }

/* Table cells */
.cs-tcell {
  padding: 9px 6px; font-size: .8rem; color: var(--ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-thead .cs-tcell {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink3);
}
.cs-tcell--apt    { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.cs-tcell--price  { color: var(--ink); text-align: right; } /* not bold — total in footer is enough */
.cs-tcell--menu   { display: flex; justify-content: center; }
.cs-tcell--wpchip { display: flex; align-items: center; }

.cs-apt-num    { font-size: .85rem; font-weight: 700; color: var(--ink); }
.cs-cell-dash  { color: var(--ink3); }

/* Issue triangle icon + inline text — same line as apt number, wraps naturally */
.cs-issue-triangle { flex-shrink: 0; }
.cs-issue-inline-text {
  font-size: .75rem; color: #dc2626; font-weight: 500;
  line-height: 1.3;
}

/* NOWE badge (last-minute) */
.cs-nowe-badge {
  display: inline-flex; align-items: center;
  font-size: .58rem; font-weight: 800; letter-spacing: .06em;
  background: #f59e0b; color: #fff;
  border-radius: 5px; padding: 1px 5px; flex-shrink: 0;
}
.cs-moved-badge {
  display: inline-flex;
  align-items: center;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #5b3fd1;
  background: #ede9fe;
  border: 1px solid #c4b5fd;
  border-radius: 5px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.cs-row-action {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #ddd6fe;
  border-radius: 6px;
  background: #f5f3ff;
  color: #6d4aff;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.cs-row-action:hover { background: #ede9fe; border-color: #a78bfa; transform: translateY(-1px); }
.cs-row-action--undo { color: #7c3aed; }
.cs-past-apt-moved { color: #6d4aff; font-weight: 800; }

.cs-modal.cs-move-modal { max-width: 440px; }
.cs-move-modal-heading { display: grid; gap: 3px; min-width: 0; }
.cs-move-modal-eyebrow {
  color: #6d4aff;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cs-move-modal-date { margin: 0; color: var(--ink3); font-size: .72rem; }
.cs-move-modal .cs-modal-body { gap: 12px; }
.cs-move-modal .cs-input--textarea { min-height: 76px; }
.cs-move-optional { color: var(--ink3); font-weight: 500; }

/* Priority badge — W/P rows: just the lightning bolt, no text */
.cs-priority-badge {
  display: inline-flex; align-items: center;
  font-size: .8rem; flex-shrink: 0; line-height: 1;
}

/* Inline-editable time cell */
.cs-time-cell {
  background: none; border: none; padding: 0;
  font-size: .8rem; color: var(--ink2); cursor: pointer;
  border-radius: 6px; transition: background .12s, color .12s;
  width: 100%; text-align: center;
}
.cs-time-cell:hover {
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  color: var(--ink);
}
.cs-time-input {
  width: 64px; font-size: .78rem; color: var(--ink);
  background: var(--surface2); border: 1.5px solid var(--accent);
  border-radius: 6px; padding: 2px 4px; text-align: center;
  outline: none;
}

/* W/P chip */
.cs-wp-chip {
  display: inline-flex; align-items: center;
  font-size: .64rem; font-weight: 800; letter-spacing: .03em;
  background: #fef3c7; color: #b45309;
  border-radius: 6px; padding: 2px 6px;
}

/* Notes icon button — column removed; keeping stub in case re-added later */
.cs-notes-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; border: none;
  background: transparent; color: var(--ink3); cursor: pointer;
  transition: background .12s, color .12s;
}
.cs-notes-btn:hover { background: var(--surface2); color: var(--ink2); }

/* Row menu button */
.cs-menu-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; border: none;
  background: transparent; color: var(--ink3); cursor: pointer;
  transition: background .12s;
}
.cs-menu-btn:hover { background: var(--surface2); color: var(--ink); }

/* Day footer */
.cs-day-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  font-size: .78rem; color: var(--ink2);
  border-top: 1px solid var(--border);
  background: var(--surface2);
}
.cs-day-footer strong { color: var(--ink); }
.cs-day-footer-meta   { color: var(--ink3); margin-left: auto; }

.cs-day-empty {
  padding: 14px 16px; font-size: .8rem; color: var(--ink3); font-style: italic;
}

/* ── Additional tasks block inside a day section ── */
.cs-day-extra-tasks {
  margin: 0 12px 10px;
  border: 1.5px solid color-mix(in srgb, #f97316 68%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, #f97316 7%, var(--surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, #f97316 86%, transparent);
  padding: 6px 12px 8px;
}
.cs-day-extra-label {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: #c2410c;
  margin-bottom: 4px;
}
html[data-dark='true'] .cs-day-extra-tasks {
  border-color: color-mix(in srgb, #fb923c 58%, var(--border));
  background: color-mix(in srgb, #f97316 12%, var(--surface));
}
html[data-dark='true'] .cs-day-extra-label { color: #fdba74; }
.cs-extra-task-row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  font-size: .82rem;
}
.cs-extra-task-row:last-child { border-bottom: none; }
.cs-extra-task-check { display: flex; align-items: center; flex-shrink: 0; color: var(--ink3); }
.cs-extra-task-check--done { color: #16a34a; }
.cs-extra-task-title { flex: 1; color: var(--ink); }
.cs-extra-task-title--done { text-decoration: line-through; color: var(--ink3); }
.cs-extra-task-apt   { font-size: .73rem; color: var(--ink2); background: var(--surface2); border-radius: 6px; padding: 1px 7px; flex-shrink: 0; }
.cs-extra-task-price { font-size: .73rem; font-weight: 600; color: var(--ink2); flex-shrink: 0; }
.cs-extra-task-edit  { opacity: 0; flex-shrink: 0; }
.cs-extra-task-row:hover .cs-extra-task-edit { opacity: 1; }

/* ══ Pralnia: Washer widget ══════════════════════════════════════════════════ */
.cs-washer-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 20px 20px 20px 20px;
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 16px; position: relative;
}
.cs-washer-card--warning { border-color: rgba(245,158,11,.40); }
.cs-washer-card--overflow {
  border-color: rgba(220,38,38,.40);
  animation: cs-washer-card-pulse 1.4s ease-in-out infinite;
}
@keyframes cs-washer-card-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.0); }
  50%      { box-shadow: 0 0 0 6px rgba(220,38,38,.12); }
}

/* Machine body */
.cs-washer-machine {
  width: 116px; flex-shrink: 0;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 8px 10px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.cs-washer-machine--warning { border-color: rgba(245,158,11,.40); }
.cs-washer-machine--overflow { border-color: rgba(220,38,38,.40); }

/* Top control panel */
.cs-washer-panel {
  display: flex; align-items: center; gap: 4px; width: 100%;
}

/* Indicator dots */
.cs-washer-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.cs-washer-dot--coral { background: #fb923c; }
.cs-washer-dot--pink  { background: #ec4899; }
.cs-washer-dot--gray  { background: var(--border); }

/* Gear button inside panel */
.cs-washer-gear {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--ink2); padding: 2px; border-radius: 5px;
  display: flex; align-items: center;
  transition: background .12s, color .12s;
}
.cs-washer-gear:hover { background: var(--surface); color: var(--ink); }

/* Porthole drum */
.cs-washer-drum {
  width: 88px; height: 88px; border-radius: 50%;
  border: 3px solid var(--border); background: var(--surface2);
  overflow: hidden; position: relative;
}
/* Porthole inner ring */
.cs-washer-drum::before {
  content: ''; position: absolute; inset: 9px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25); z-index: 2; pointer-events: none;
}
.cs-washer-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: var(--fill, 0%);
  background: linear-gradient(to top, #fb923c 0%, #ec4899 40%, #c084fc 70%, #7c3aed 100%);
  transition: height 1.2s cubic-bezier(.4,0,.2,1);
}
.cs-washer-fill--warning {
  background: linear-gradient(to top, #f59e0b, #fbbf24, #fde68a);
}
.cs-washer-fill--overflow {
  background: linear-gradient(to top, #b91c1c, #dc2626, #ef4444);
  animation: cs-washer-fill-pulse 1.2s ease-in-out infinite;
}
@keyframes cs-washer-fill-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .65; }
}

.cs-washer-pct-label {
  font-size: .72rem; font-weight: 800; color: var(--ink2); letter-spacing: .03em;
}
.cs-washer-pct-label--overflow { color: #dc2626; }

/* Stats */
.cs-washer-info { flex: 1; min-width: 0; }
.cs-washer-title {
  font-size: .68rem; font-weight: 700; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px;
}
.cs-washer-count { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; flex-wrap: wrap; }
.cs-washer-pieces { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1; }
.cs-washer-sep { color: var(--ink3); font-size: .85rem; }
.cs-washer-kg { font-size: .88rem; color: var(--ink2); }
.cs-washer-meta { font-size: .76rem; color: var(--ink2); margin-bottom: 3px; }
.cs-washer-urgent { color: #f59e0b; font-weight: 700; }
.cs-washer-deadline { font-size: .78rem; color: var(--ink); }

/* Pickup button row */
.cs-washer-actions {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.cs-washer-pickup-btn {
  font-size: .75rem; font-weight: 700; padding: 5px 12px; flex-shrink: 0;
}
.cs-washer-last-pickup {
  font-size: .72rem; color: var(--ink2);
}
.cs-washer-last-pickup--none {
  font-style: italic; opacity: .65;
}

/* ══ Pralnia: two-column row (washer + next-pickup) ═══════════════════════════ */
.cs-washer-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px;
}
/* washer card inside the row shouldn't have its own bottom margin */
.cs-washer-row .cs-washer-card { margin-bottom: 0; height: 100%; box-sizing: border-box; }
.cs-washer-row .cs-next-pickup-card { height: 100%; box-sizing: border-box; }

/* Stack on narrow screens */
@media (max-width: 560px) {
  .cs-washer-row { grid-template-columns: 1fr; }
}

/* ══ Pralnia: Next-pickup prediction card ═════════════════════════════════════ */
.cs-next-pickup-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.cs-next-pickup-hd {
  display: flex; align-items: center; gap: 6px;
  font-size: .68rem; font-weight: 700; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .07em;
}
.cs-next-pickup-hd svg { flex-shrink: 0; opacity: .55; }
.cs-next-pickup-date {
  font-size: 1.25rem; font-weight: 800; color: var(--ink); line-height: 1.1;
}
.cs-next-pickup-date--overdue { color: #dc2626; }
.cs-next-pickup-date--ok      { font-size: .95rem; color: var(--ink2); font-weight: 600; }
.cs-next-pickup-sub {
  font-size: .74rem; color: var(--ink2); line-height: 1.3;
}

/* ══ Pralnia: apt profiles table ══════════════════════════════════════════════ */
.cs-apt-profiles-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; overflow: hidden; margin-bottom: 16px;
}
.cs-apt-profiles-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.cs-apt-profiles-title { font-size: .82rem; font-weight: 700; color: var(--ink); }
.cs-apt-profiles-note  { font-size: .70rem; color: var(--ink2); margin-left: auto; font-style: italic; }

.cs-apt-profile-row {
  display: grid; grid-template-columns: 56px 1fr 48px 54px;
  padding: 6px 14px; border-bottom: 1px solid var(--border);
  align-items: center; gap: 4px;
}
.cs-apt-profile-row:last-child { border-bottom: none; }
.cs-apt-profile-head {
  font-size: .67rem; font-weight: 700; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface2); padding-top: 7px; padding-bottom: 7px;
}
.cs-apt-profile-apt       { font-size: .78rem; font-weight: 600; color: var(--ink); }
.cs-apt-profile-textiles  { font-size: .73rem; color: var(--ink2); }
.cs-apt-right             { text-align: right; }
.cs-apt-profile-pcs       { font-size: .78rem; font-weight: 600; color: var(--ink); }
.cs-apt-profile-kg        { font-size: .73rem; color: var(--ink2); }

/* Clickable apt row */
.cs-apt-profile-row--btn {
  all: unset; display: grid; grid-template-columns: 56px 1fr 48px 54px;
  width: 100%; box-sizing: border-box;
  padding: 6px 14px; border-bottom: 1px solid var(--border);
  align-items: center; gap: 4px;
  cursor: pointer; transition: background .12s;
}
.cs-apt-profile-row--btn:last-child { border-bottom: none; }
.cs-apt-profile-row--btn:hover { background: var(--surface2); }
.cs-apt-profile-row--custom .cs-apt-profile-apt::after {
  content: '✓'; font-size: .6rem; color: var(--accent); margin-left: 4px; vertical-align: middle;
}

/* Cennik edit-mode input */
.cs-textile-row--edit .cs-input--narrow {
  width: 62px; text-align: right; padding: 3px 6px;
  font-size: .78rem; margin: 0;
}
.cs-input--narrow {
  width: 70px; padding: 4px 8px; font-size: .80rem;
  border: 1.5px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--ink);
  text-align: right;
}
.cs-input--narrow:focus { outline: none; border-color: var(--accent); }

/* ══ Pralnia: Pickup history ══════════════════════════════════════════════════ */
.cs-ph-details {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; overflow: hidden; margin-bottom: 16px;
}
.cs-ph-summary {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; cursor: pointer; list-style: none;
  font-size: .78rem; font-weight: 600; color: var(--ink);
  background: var(--surface2);
  user-select: none;
}
.cs-ph-summary::-webkit-details-marker { display: none; }
.cs-ph-summary svg { flex-shrink: 0; opacity: .55; }
.cs-ph-badge {
  margin-left: auto; font-size: .68rem; font-weight: 700;
  background: var(--accent-lt); color: var(--accent);
  border-radius: 99px; padding: 1px 8px;
}
.cs-ph-details[open] .cs-ph-summary { border-bottom: 1px solid var(--border); }
.cs-ph-list { padding: 0; }
.cs-ph-row {
  display: grid; grid-template-columns: 1fr 56px 56px 60px;
  padding: 7px 14px; border-bottom: 1px solid var(--border);
  align-items: center; font-size: .76rem; color: var(--ink);
}
.cs-ph-row:last-child { border-bottom: none; }
.cs-ph-head {
  font-size: .65rem; font-weight: 700; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface2); padding-top: 7px; padding-bottom: 7px;
}
.cs-ph-stat { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink2); }
.cs-ph-kg   { color: var(--ink2); }
.cs-ph-date { font-weight: 600; color: var(--ink); }

/* ══ Pralnia: form hint ═══════════════════════════════════════════════════════ */
.cs-form-hint {
  display: block; font-size: .71rem; color: var(--ink2);
  margin-top: 3px; line-height: 1.4;
}

/* ══ Pralnia: apt profile form — inline label/input rows ═════════════════════ */
.cs-form-group--inline {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.cs-form-group--inline:last-of-type { border-bottom: none; }
.cs-form-group--inline .cs-form-label {
  margin: 0; font-size: .79rem; color: var(--ink);
}

/* ══ Pralnia: 3-column form row ══════════════════════════════════════════════ */
.cs-form-row--3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* ══ Pralnia: Zaopatrzenie ═══════════════════════════════════════════════════ */
.cs-supplies-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 16px; overflow: hidden; margin-bottom: 16px;
}
.cs-supplies-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.cs-supplies-hd-left { display: flex; align-items: center; gap: 8px; }
.cs-supplies-title   { font-size: .88rem; font-weight: 700; color: var(--ink); }
.cs-supplies-alert   {
  font-size: .68rem; font-weight: 700; color: #b45309;
  background: #fef3c7; border-radius: 99px; padding: 1px 8px;
}

.cs-supply-forecast {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: .78rem;
}
.cs-supply-forecast--ok {
  background: rgba(34,197,94,.06);
  color: #15803d;
}
.cs-supply-forecast--warn {
  background: rgba(245,158,11,.08);
  color: var(--ink);
}
.cs-supply-forecast strong { display: block; font-size: .84rem; color: var(--ink); }
.cs-supply-forecast span { color: var(--ink2); }
.cs-supply-forecast-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.cs-supply-forecast-list { display: flex; flex-direction: column; gap: 5px; }
.cs-supply-forecast-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  padding: 6px 8px; border: 1px solid rgba(245,158,11,.22); border-radius: 10px;
  background: rgba(255,255,255,.55);
}
.cs-supply-forecast-row span { font-weight: 650; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-supply-forecast-row strong { font-size: .75rem; color: #b45309; white-space: nowrap; }
.cs-supply-forecast-row em { font-size: .72rem; color: var(--ink3); font-style: normal; white-space: nowrap; }

/* Category chips */
.cs-supply-cats {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.cs-supply-cat-chip {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 99px;
  border: 1.5px solid var(--border); background: var(--surface2);
  font-size: .73rem; font-weight: 600; color: var(--ink2);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.cs-supply-cat-chip:hover { background: var(--surface); color: var(--ink); }
.cs-supply-cat-chip--active {
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  border-color: var(--layf-accent-border, var(--accent));
  color: var(--ink);
}
.cs-supply-cat-cnt {
  font-size: .65rem; font-weight: 700; color: var(--ink2);
  background: var(--surface2); border-radius: 99px; padding: 0 5px;
}
.cs-supply-cat-chip--active .cs-supply-cat-cnt { background: transparent; }

/* Empty states */
.cs-supply-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px 20px; text-align: center;
}
.cs-supply-empty-emoji { font-size: 2rem; }
.cs-supply-empty-title { font-size: .88rem; font-weight: 700; color: var(--ink); }
.cs-supply-empty-sub   { font-size: .76rem; color: var(--ink2); max-width: 240px; line-height: 1.4; }
.cs-supply-empty-cat   { padding: 18px 16px; font-size: .78rem; color: var(--ink2); text-align: center; }

/* Supply list */
.cs-supply-list { display: flex; flex-direction: column; }

/* Supply item */
.cs-supply-item {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center; gap: 12px;
}
.cs-supply-item:last-child { border-bottom: none; }
.cs-supply-item--low { background: rgba(245,158,11,.04); }
.cs-supply-item--out { background: rgba(220,38,38,.04); }
.cs-supply-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cs-supply-item-photo {
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--ink3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.cs-supply-item-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.cs-supply-item-photo:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  transform: translateY(-1px);
}
.cs-supply-item-photo.is-empty {
  border-style: dashed;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.cs-supply-item-photo.is-empty:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
}

.cs-supply-item-row1 {
  display: flex; align-items: center; gap: 8px;
}
.cs-supply-cat-icon { font-size: 1rem; flex-shrink: 0; }
.cs-supply-name     { flex: 1; font-size: .82rem; font-weight: 600; color: var(--ink); }
.cs-supply-status {
  font-size: .65rem; font-weight: 800; border-radius: 99px; padding: 2px 8px;
  text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0;
}
.cs-supply-status--ok  { background: rgba(34,197,94,.15); color: #15803d; }
.cs-supply-status--low { background: rgba(245,158,11,.18); color: #b45309; }
.cs-supply-status--out { background: rgba(220,38,38,.15); color: #dc2626; }
.cs-supply-status--reported { background: rgba(124,92,252,.14); color: var(--accent); }
.cs-supply-edit-btn {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--ink2); padding: 4px; border-radius: 6px;
  display: flex; align-items: center;
  transition: background .12s, color .12s;
}
.cs-supply-edit-btn:hover { background: var(--surface2); color: var(--ink); }

/* Progress bar */
.cs-supply-bar-wrap {
  height: 4px; background: var(--surface2); border-radius: 99px; overflow: hidden;
}
.cs-supply-bar {
  height: 100%; border-radius: 99px; transition: width .4s ease;
}
.cs-supply-bar--ok  { background: linear-gradient(to right, #4ade80, #22c55e); }
.cs-supply-bar--low { background: linear-gradient(to right, #fbbf24, #f59e0b); }
.cs-supply-bar--out { background: #ef4444; }

/* Row 2: adj buttons + labels */
.cs-supply-item-row2 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cs-supply-adj {
  display: flex; align-items: center; gap: 6px;
}
.cs-supply-adj-btn {
  width: 26px; height: 26px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--surface2);
  font-size: 1rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink);
  transition: background .12s;
}
.cs-supply-adj-btn:hover:not(:disabled) { background: var(--surface); border-color: var(--accent); }
.cs-supply-adj-btn:disabled { opacity: .35; cursor: default; }
.cs-supply-stock-now { font-size: .88rem; font-weight: 700; color: var(--ink); min-width: 28px; text-align: center; }
.cs-supply-unit      { font-size: .72rem; color: var(--ink2); font-weight: 400; }
.cs-supply-minmax    { font-size: .70rem; color: var(--ink2); margin-left: auto; }
.cs-supply-restock-btn { font-size: .70rem !important; padding: 3px 9px !important; }
.cs-supply-report-btn { font-size: .70rem !important; padding: 3px 9px !important; }
.cs-supply-report-btn:disabled { opacity: .55; cursor: default; }

.cs-supply-report-history {
  border-top: 1px solid var(--border);
  background: var(--surface2);
}
.cs-supply-report-history-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 6px;
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink3);
}
.cs-supply-report-history-hd small { font: inherit; color: var(--ink2); text-transform: none; letter-spacing: 0; }
.cs-supply-report-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 16px; border-top: 1px solid var(--border);
  font-size: .76rem; color: var(--ink2);
}
.cs-supply-report-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-supply-report-row strong { color: var(--ink); }
.cs-supply-report-row em { color: #b45309; font-style: normal; line-height: 1.35; }
.cs-supply-report-actions {
  align-items: flex-end;
  flex: 0 0 auto;
}
.cs-supply-report-actions > span {
  align-self: flex-end; border-radius: 999px; padding: 2px 8px;
  background: var(--surface); color: var(--ink3); white-space: nowrap;
}
.cs-supply-report-row--open .cs-supply-report-actions > span { background: rgba(220,38,38,.12); color: #dc2626; }
.cs-supply-report-actions .btn { min-height: 26px; }

.cs-service-supply-backdrop {
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.cs-supply-kiosk {
  position: relative;
  width: min(920px, calc(100% - 24px));
  min-height: calc(100dvh - var(--topbar-height, 64px) - 32px);
  margin: 16px auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 22px;
  background: var(--surface2);
  box-shadow: var(--shadow-lg);
}

html.layf-warehouse-entry,
html.layf-warehouse-entry body {
  min-height: 100%;
  overflow: hidden;
  background: var(--surface2);
}
html.layf-warehouse-entry #app { height: 100dvh; }
html.layf-warehouse-entry .topbar,
html.layf-warehouse-entry .sidebar,
html.layf-warehouse-entry .sidebar-overlay,
html.layf-warehouse-entry .bottom-nav,
html.layf-warehouse-entry .more-drawer,
html.layf-warehouse-entry .ms-host {
  display: none !important;
}
html.layf-warehouse-entry .shell {
  display: block;
  min-height: 100dvh;
  overflow: hidden;
}
html.layf-warehouse-entry .content {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow-y: auto;
  background: var(--surface2);
}
html.layf-warehouse-entry .cs-supply-kiosk {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html.layf-kiosk-locked,
html.layf-kiosk-locked body {
  overflow: hidden;
}
html.layf-kiosk-locked .topbar,
html.layf-kiosk-locked .sidebar,
html.layf-kiosk-locked .sidebar-overlay,
html.layf-kiosk-locked .bottom-nav,
html.layf-kiosk-locked .more-drawer,
html.layf-kiosk-locked .ms-host {
  display: none !important;
}
html.layf-kiosk-locked .shell {
  display: block;
  min-height: 100dvh;
  overflow: hidden;
}
html.layf-kiosk-locked .content {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow-y: auto;
  background: var(--surface2);
}
html.layf-kiosk-locked .cs-supply-kiosk {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.cs-supply-kiosk .cs-service-supply-body { flex: 1; }
.cs-supply-kiosk .cs-service-supply-footer { z-index: 2; }
.cs-service-supply-tile.is-reported {
  border-color: color-mix(in srgb, #16a34a 26%, var(--border));
  background: color-mix(in srgb, #dcfce7 55%, var(--surface));
}
.cs-service-supply-tile.is-reported .cs-service-supply-check {
  border-color: #16a34a;
  background: #16a34a;
}
.cs-service-supply-tile.is-reported .cs-service-supply-check::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cs-supply-kiosk-option { justify-content: flex-end; }
.cs-checkbox-line {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink2);
  font-size: .86rem;
}
.cs-service-supply-panel {
  width: min(760px, 100%);
  max-height: min(86vh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--layf-accent-border, var(--border));
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.cs-service-supply-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 0%, rgba(124,92,252,.34), transparent 38%),
    linear-gradient(135deg, #111827 0%, #2d1b59 100%);
}
.cs-service-supply-top > div { min-width: 0; }
.cs-supply-kiosk-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cs-supply-kiosk-language {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  background: rgba(255,255,255,.1);
}
.cs-supply-kiosk-language button {
  min-width: 34px;
  min-height: 30px;
  padding: 5px 7px;
  border-radius: 7px;
  color: rgba(255,255,255,.72);
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}
.cs-supply-kiosk-language button:hover { color: #fff; }
.cs-supply-kiosk-language button.is-active {
  background: #fff;
  color: #24194f;
  box-shadow: 0 3px 12px rgba(17,24,39,.16);
}
.cs-supply-kiosk-language button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.cs-supply-kiosk-lock {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  background: rgba(255,255,255,.1);
  color: #fff;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.cs-supply-kiosk-lock:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.18);
}
.cs-supply-kiosk-lock.is-locked {
  border-color: rgba(255,255,255,.72);
  background: #fff;
  color: #24194f;
}
.cs-supply-kiosk-lock:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.cs-supply-kiosk-exit {
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.cs-supply-kiosk-exit:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.18);
}
.cs-supply-kiosk-exit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.cs-supply-kiosk-exit span {
  font-size: 1.05rem;
  line-height: 1;
}
.cs-kiosk-pin-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, .62);
  backdrop-filter: blur(8px);
}
.cs-kiosk-pin-modal {
  width: min(340px, 100%);
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.cs-kiosk-pin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.cs-kiosk-pin-header h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  letter-spacing: 0;
}
.cs-kiosk-pin-header p {
  margin: 5px 0 0;
  color: var(--ink2);
  font-size: .82rem;
  line-height: 1.4;
}
.cs-kiosk-pin-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface2);
  color: var(--ink2);
  font: inherit;
  font-size: 1.15rem;
  cursor: pointer;
}
.cs-kiosk-pin-dots {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 22px 0 16px;
}
.cs-kiosk-pin-dots span {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 50%;
  background: transparent;
  transition: transform .12s ease, background .12s ease;
}
.cs-kiosk-pin-dots span.is-filled {
  transform: scale(1.08);
  border-color: var(--accent);
  background: var(--accent);
}
.cs-kiosk-pin-error {
  margin: -6px 0 12px;
  color: var(--danger, #dc2626);
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
}
.cs-kiosk-pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  justify-content: center;
  gap: 9px;
}
.cs-kiosk-pin-keypad button {
  width: 54px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface2);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 780;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.cs-kiosk-pin-keypad button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.cs-kiosk-pin-confirm {
  width: 100%;
  min-height: 42px;
  margin-top: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--ink);
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  cursor: pointer;
}
.cs-kiosk-pin-confirm:disabled {
  opacity: .42;
  cursor: default;
}
.cs-open-supply-kiosk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cs-service-supply-kicker {
  display: block;
  margin-bottom: 6px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
}
.cs-service-supply-top h3 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.08;
  letter-spacing: 0;
}
.cs-service-supply-top p {
  max-width: 520px;
  margin: 8px 0 0;
  color: rgba(255,255,255,.72);
  line-height: 1.45;
}
.cs-service-supply-body {
  overflow: auto;
  padding: 16px 18px 28px;
  background: var(--surface2);
}
.cs-service-supply-sent {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(34,197,94,.18);
  background: rgba(34,197,94,.08);
  color: #15803d;
}
.cs-service-supply-sent strong { color: #166534; }
.cs-service-supply-sent span {
  font-size: .82rem;
  color: color-mix(in srgb, #15803d 76%, var(--ink2));
}
.cs-service-supply-group + .cs-service-supply-group { margin-top: 14px; }
.cs-service-supply-group h4 {
  margin: 0 0 8px;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink3);
}
.cs-service-supply-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cs-service-supply-tile {
  position: relative;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 12px 12px 12px 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.cs-service-supply-tile:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--layf-accent-border, var(--accent));
  box-shadow: 0 14px 34px rgba(17,24,39,.08);
}
.cs-service-supply-tile:disabled {
  cursor: default;
  opacity: .72;
}
.cs-service-supply-tile.is-selected {
  border-color: var(--accent);
  background: var(--layf-accent-soft-bg, rgba(124,92,252,.08));
  box-shadow: inset 0 0 0 1px var(--layf-accent-border, var(--accent));
}
.cs-service-supply-tile.has-photo { padding-left: 76px; }
.cs-service-supply-photo {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface2);
}
.cs-service-supply-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.cs-service-supply-tile.has-photo .cs-service-supply-check {
  left: auto;
  right: 8px;
  top: 8px;
  width: 19px;
  height: 19px;
  transform: none;
}
.cs-service-supply-tile.has-photo .cs-service-supply-check::after {
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
}
.cs-service-supply-tile strong {
  font-size: .92rem;
  line-height: 1.22;
}
.cs-service-supply-tile small {
  color: var(--ink2);
  font-size: .72rem;
}
.cs-service-supply-tile em {
  display: inline-flex;
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(124,92,252,.12);
  color: var(--accent);
  font-size: .7rem;
  font-style: normal;
  font-weight: 800;
}
.cs-service-supply-check {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  border: 2px solid var(--border);
  border-radius: 9px;
  background: var(--surface2);
}
.cs-service-supply-tile.is-saving .cs-service-supply-check {
  border-color: transparent;
  border-top-color: var(--accent);
  border-radius: 50%;
  background: transparent;
  animation: cs-supply-spin .7s linear infinite;
}
@keyframes cs-supply-spin { to { transform: translateY(-50%) rotate(360deg); } }
.cs-service-supply-tile.has-photo.is-saving .cs-service-supply-check {
  animation-name: cs-supply-spin-corner;
}
@keyframes cs-supply-spin-corner { to { transform: rotate(360deg); } }
.cs-service-supply-tile.is-selected .cs-service-supply-check {
  border-color: var(--accent);
  background: var(--accent);
}
.cs-service-supply-tile.is-selected .cs-service-supply-check::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cs-service-supply-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
}
.cs-service-supply-footer span {
  color: var(--ink2);
  font-weight: 750;
}
.cs-service-supply-empty {
  padding: 28px 20px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  color: var(--ink2);
  text-align: center;
  background: var(--surface);
}

@media (max-width: 560px) {
  .cs-supplies-hd { align-items: center; gap: 8px; }
  .cs-supplies-hd-left { min-width: 0; }
  .cs-supplies-actions { justify-content: flex-end; flex-wrap: nowrap; gap: 6px; }
  .cs-supply-forecast-row { grid-template-columns: 1fr; gap: 2px; }
  .cs-supply-forecast-row span { white-space: normal; }
  .cs-supply-item { grid-template-columns: minmax(0, 1fr) 46px; gap: 9px; padding: 10px 12px; }
  .cs-supply-item-photo { width: 46px; height: 46px; border-radius: 9px; }
  .cs-supply-minmax { width: 100%; margin-left: 0; }
  .cs-service-supply-backdrop { padding: 0; align-items: stretch; }
  .cs-service-supply-panel {
    width: 100%;
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0;
  }
  .cs-service-supply-top { padding: 12px 14px 11px; }
  .cs-service-supply-kicker { margin-bottom: 3px; font-size: .66rem; }
  .cs-service-supply-top h3 { font-size: 1.08rem; line-height: 1.15; white-space: nowrap; }
  .cs-supply-kiosk-tools { gap: 6px; }
  .cs-supply-kiosk-language { padding: 2px; }
  .cs-supply-kiosk-language button { min-width: 31px; min-height: 28px; padding: 4px 6px; }
  .cs-supply-kiosk-lock { width: 34px; height: 34px; border-radius: 9px; }
  .cs-supply-kiosk-exit { padding-inline: 10px; }
  .cs-kiosk-pin-backdrop { padding: 12px; }
  .cs-kiosk-pin-modal { padding: 18px; border-radius: 18px; }
  .cs-service-supply-body {
    padding: 12px 10px calc(84px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .cs-service-supply-grid { grid-template-columns: 1fr; }
  .cs-service-supply-tile { min-height: 96px; border-radius: 16px; }
  .cs-service-supply-footer {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }
  .cs-supply-kiosk {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .cs-supply-kiosk .cs-service-supply-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-supply-kiosk .cs-service-supply-tile {
    min-height: 84px;
    padding: 11px 9px 11px 39px;
    border-radius: 13px;
  }
  .cs-supply-kiosk .cs-service-supply-tile.has-photo { min-height: 96px; padding-left: 66px; }
  .cs-supply-kiosk .cs-service-supply-photo { left: 8px; width: 50px; height: 50px; border-radius: 9px; }
  .cs-supply-kiosk .cs-service-supply-tile strong { font-size: .84rem; }
  .cs-supply-kiosk .cs-service-supply-tile small { font-size: .66rem; line-height: 1.25; }
  .cs-supply-kiosk .cs-service-supply-check {
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
  }
  .cs-supply-kiosk .cs-service-supply-tile.has-photo .cs-service-supply-check {
    left: auto;
    right: 6px;
    top: 6px;
    transform: none;
    width: 18px;
    height: 18px;
  }
  .cs-supply-kiosk .cs-service-supply-footer { position: sticky; }
}

.cs-supply-photo-current {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.cs-supply-photo-current img {
  width: 72px;
  height: 72px;
  display: block;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.cs-supply-paste-capture {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 9px;
  padding: 9px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
  color: var(--ink2);
  cursor: text;
}

.cs-supply-paste-capture > span {
  display: grid;
  gap: 2px;
}

.cs-supply-paste-capture strong {
  color: var(--ink);
  font-size: 12px;
}

.cs-supply-paste-capture small {
  color: var(--ink3, var(--muted));
  font-size: 11px;
}

.cs-supply-paste-capture svg { color: var(--accent); }

.cs-supply-paste-capture.has-image {
  border-style: solid;
  border-color: color-mix(in srgb, var(--success, #16866f) 48%, var(--border));
  background: color-mix(in srgb, var(--success, #16866f) 8%, var(--surface));
}

.cs-supply-paste-capture.has-image svg { color: var(--success, #16866f); }

.cs-supply-paste-capture:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .cs-supply-paste-capture { display: none; }
}

/* ══ Pralnia: Stage 2 placeholder card ════════════════════════════════════════ */
.cs-pranie-stage2-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface2); border: 1.5px dashed var(--border);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
  opacity: .75;
}
.cs-pranie-stage2-icon  { font-size: 1.3rem; flex-shrink: 0; }
.cs-pranie-stage2-title { font-size: .80rem; font-weight: 600; color: var(--ink); }
.cs-pranie-stage2-sub   { font-size: .72rem; color: var(--ink2); margin-top: 2px; }

.cs-pranie-section-divider {
  height: 1px; background: var(--border); margin: 4px 0 20px;
}

/* ── Cennik prania tekstyliów ── */
.cs-lp-card--textiles { margin-bottom: 16px; }
.cs-textile-table { padding: 0 0 4px; }
.cs-textile-row {
  display: grid; grid-template-columns: 1fr 80px 68px;
  padding: 7px 14px; border-bottom: 1px solid var(--border);
  align-items: center; gap: 4px;
}
.cs-textile-row:last-child { border-bottom: none; }
.cs-textile-head {
  font-size: .67rem; font-weight: 700; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface2); padding-top: 8px; padding-bottom: 8px;
}
.cs-textile-label  { font-size: .78rem; color: var(--ink); }
.cs-textile-right  { text-align: right; }
.cs-textile-price  { font-size: .78rem; font-weight: 600; color: var(--ink); }
.cs-textile-weight { font-size: .73rem; color: var(--ink2); }

/* ── Konfiguracja apt — collapsible details ── */
.cs-apt-config-details {
  margin-top: 20px;
  border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden;
}
.cs-apt-config-summary {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; cursor: pointer;
  background: var(--surface2); list-style: none;
  font-size: .80rem; font-weight: 600; color: var(--ink2);
  user-select: none;
}
.cs-apt-config-summary::-webkit-details-marker { display: none; }
.cs-apt-config-summary svg { flex-shrink: 0; opacity: .6; }
.cs-apt-config-note {
  font-size: .68rem; color: var(--ink3); margin-left: auto; font-style: italic;
}
.cs-apt-config-details[open] .cs-apt-config-summary {
  border-bottom: 1px solid var(--border);
}
.cs-apt-config-details .cs-apt-profiles-card {
  border: none; border-radius: 0; margin-bottom: 0;
}

/* ── Sidebar cards ── */
.cs-side-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
/* Coloured accent cards — tinted border only, no thick top bar */
.cs-side-card--issues { border: 2px solid rgba(239, 68, 68, .35); }
.cs-side-card--import { border: 2px solid rgba(245, 158, 11, .35); }
.cs-side-card--legend { border: 2px solid rgba(99, 102, 241, .35); }
.cs-side-card-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--surface2); border-bottom: 1px solid var(--border);
}
.cs-side-card-title { font-size: .82rem; font-weight: 700; color: var(--ink); }
.cs-side-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; border-radius: 99px;
  font-size: .64rem; font-weight: 800; padding: 0 5px;
}
.cs-side-badge--red { background: #fee2e2; color: #b91c1c; }
.cs-side-card-hd .btn { margin-left: auto; }

/* Usterki rows */
.cs-iss-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
}
.cs-iss-row:last-child { border-bottom: none; }
.cs-iss-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444; flex-shrink: 0; margin-top: 5px;
}
.cs-iss-body { display: flex; flex-direction: column; gap: 1px; }
.cs-iss-apt  { font-size: .72rem; font-weight: 700; color: var(--ink2); }
.cs-iss-desc { font-size: .8rem; color: var(--ink); }

.cs-side-empty {
  padding: 12px 14px; font-size: .8rem; color: #15803d; font-style: italic; margin: 0;
}

/* Import history rows */
.cs-import-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
}
.cs-import-row:last-of-type { border-bottom: none; }
.cs-import-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cs-import-dot--ok    { background: #22c55e; }
.cs-import-dot--error { background: #ef4444; }
.cs-import-dot--prev  { background: #d1d5db; }
.cs-import-latest { display: flex; align-items: flex-start; gap: 8px; padding: 8px 14px; }
.cs-import-prev   { padding: 0 14px 8px; display: flex; flex-direction: column; gap: 4px; }
.cs-import-prev-row { display: flex; align-items: center; gap: 6px; font-size: .68rem; color: var(--ink2); }
.cs-import-xlsx-label { cursor: pointer; }
.cs-import-body { flex: 1; min-width: 0; }
.cs-import-label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink); }
.cs-import-meta  { display: block; font-size: .7rem; color: var(--ink2); }
.cs-import-meta--err { color: #dc2626; }
.cs-import-dl {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--ink2); cursor: pointer;
  flex-shrink: 0; transition: background .12s;
}
.cs-import-dl:hover { background: var(--accent-lt); color: var(--accent); }
.cs-import-note {
  padding: 8px 14px; font-size: .68rem; color: var(--ink3);
  font-style: italic; border-top: 1px solid var(--border); margin: 0;
}

/* ── Import status (morning/evening slots) ───────────────────────────────── */
.cs-imp-today {
  padding: 8px 14px 4px;
  display: flex; flex-direction: column; gap: 4px;
}
.cs-imp-today--warn { background: #fff7ed; border-radius: 6px; }
.cs-imp-alert {
  font-size: .7rem; font-weight: 600; color: #c2410c;
  padding: 4px 0 4px; letter-spacing: .01em;
}
.cs-imp-slot {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 0; font-size: .73rem;
}
.cs-imp-slot-ic {
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 700; flex-shrink: 0;
  background: #f3f4f6; color: var(--ink3);
}
.cs-imp-slot-ic--ok   { background: #dcfce7; color: #15803d; }
.cs-imp-slot-ic--warn { background: #fee2e2; color: #b91c1c; }
.cs-imp-slot-ic--dim  { background: #f3f4f6; color: #9ca3af; }
.cs-imp-slot-lb { font-weight: 600; color: var(--ink); min-width: 44px; display: inline-block; }
.cs-imp-slot-mt { color: var(--ink2); font-size: .68rem; margin-left: 4px; }
.cs-imp-slot-mt--warn { color: #dc2626; }
.cs-imp-slot--ok .cs-imp-slot-lb      { color: var(--ink); }
.cs-imp-slot--missing .cs-imp-slot-lb { color: #b91c1c; }
.cs-imp-slot--pending .cs-imp-slot-lb { color: var(--ink3); }
.cs-imp-hist {
  padding: 6px 14px 8px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px;
}
.cs-imp-hist-list {
  max-height: 122px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 3px;
}
.cs-imp-hist-title {
  font-size: .62rem;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 2px 13px;
}
.cs-imp-row {
  display: flex; align-items: center; gap: 7px;
  min-height: 24px;
  font-size: .68rem; color: var(--ink2);
}
.cs-imp-row--latest { color: var(--ink); font-weight: 500; }
.cs-imp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #d1d5db; flex-shrink: 0;
}
.cs-imp-dot--ok { background: #22c55e; }
.cs-imp-when { flex: 1; }
.cs-imp-cnt  { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.cs-imp-day-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
  min-width: 0;
}
.cs-imp-mini {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 5px;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: #f3f4f6;
  color: var(--ink3);
}
.cs-imp-mini--ok { background: #dcfce7; color: #166534; }
.cs-imp-mini--warn { background: #fee2e2; color: #991b1b; }
.cs-imp-mini--retry { background: #ede9fe; color: #6d28d9; }
.cs-imp-mini--empty { background: #f3f4f6; color: #9ca3af; font-weight: 500; }

.cs-canonical-status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-top: 1px solid var(--border);
  font-size: .67rem;
  color: var(--ink2);
  background: color-mix(in srgb, #ecfeff 55%, transparent);
}
.cs-canonical-status--warn {
  color: #92400e;
  background: color-mix(in srgb, #fff7ed 72%, transparent);
}
.cs-canonical-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #d1d5db;
}
.cs-canonical-dot--ok { background: #14b8a6; }
.cs-canonical-dot--warn { background: #f59e0b; }
.cs-canonical-dot--idle { background: #c4b5fd; }

/* ── Notification settings (details/summary inside import card) ──────────── */
.cs-notif-details {
  border-top: 1px solid var(--border);
  margin: 0;
}
.cs-notif-summary {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: .73rem; font-weight: 600; color: var(--ink2);
  cursor: pointer; list-style: none; user-select: none;
  transition: color .12s;
}
.cs-notif-summary::-webkit-details-marker { display: none; }
.cs-notif-summary:hover { color: var(--ink); }
.cs-notif-details[open] .cs-notif-summary { color: var(--ink); }
.cs-notif-cnt {
  margin-left: auto; background: var(--accent); color: #fff;
  font-size: .6rem; font-weight: 700; border-radius: 10px;
  padding: 1px 6px; line-height: 1.5;
}
.cs-notif-body {
  padding: 4px 14px 12px;
  display: flex; flex-direction: column; gap: 0;
}
.cs-notif-lbl {
  font-size: .66rem; font-weight: 700; color: var(--ink3);
  text-transform: uppercase; letter-spacing: .04em;
  margin: 6px 0 4px;
}
.cs-notif-r {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; font-size: .73rem;
}
.cs-notif-r--off { opacity: .45; }
.cs-notif-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid #d1d5db; background: transparent;
  flex-shrink: 0; cursor: pointer; transition: all .12s;
  padding: 0;
}
.cs-notif-dot--on { background: #22c55e; border-color: #22c55e; }
.cs-notif-r-txt { flex: 1; min-width: 0; }
.cs-notif-r-name { display: block; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-notif-r-email { display: block; font-size: .65rem; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-notif-empty { font-size: .7rem; color: var(--ink3); margin: 2px 0 4px; font-style: italic; }
.cs-notif-add-form {
  flex-direction: column; gap: 5px;
  margin: 4px 0 6px;
}
.cs-notif-inp {
  font-size: .75rem !important;
  padding: 5px 8px !important;
  height: auto !important;
}
.cs-notif-form-btns {
  display: flex; gap: 6px; justify-content: flex-end;
}
.cs-notif-add-btn {
  font-size: .72rem; padding: 3px 8px;
  align-self: flex-start; margin-top: 2px;
  color: var(--accent);
}
.cs-notif-types { display: flex; flex-direction: column; gap: 3px; }
.cs-notif-type {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem; color: var(--ink); cursor: pointer;
  padding: 2px 0;
}
.cs-notif-type input[type=checkbox] { accent-color: var(--accent); flex-shrink: 0; }

.cs-notif-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1080px;
}
.cs-notif-hero,
.cs-notif-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.cs-notif-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 111, 97, .12), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(124, 92, 252, .16), transparent 34%),
    var(--surface);
}
.cs-notif-hero h3 {
  margin: 4px 0 8px;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
}
.cs-notif-hero p {
  max-width: 680px;
  margin: 0;
  color: var(--ink2);
  line-height: 1.45;
}
.cs-notif-monitor {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 18px;
  background: rgba(255,255,255,.62);
}
.cs-notif-monitor span,
.cs-notif-card-hd span {
  font-size: .72rem;
  font-weight: 800;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cs-notif-monitor strong {
  font-size: 1.25rem;
  color: var(--ink);
}
.cs-notif-monitor small {
  color: var(--ink2);
  font-size: .78rem;
}
.cs-notif-grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr);
  gap: 14px;
  align-items: start;
}
.cs-notif-card {
  padding: 16px;
  overflow: hidden;
}
.cs-notif-card--compact { padding: 14px 16px; }
.cs-notif-card.cs-notif-delivery-card {
  padding: 0;
  border-radius: 8px;
}
.cs-notif-delivery-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.cs-notif-delivery-head .cs-kicker { display: block; margin-bottom: 4px; }
.cs-notif-delivery-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
}
.cs-notif-delivery-head p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: .78rem;
  line-height: 1.4;
}
.cs-notif-delivery-summary {
  display: grid;
  min-width: 56px;
  justify-items: end;
  gap: 1px;
  padding-top: 2px;
}
.cs-notif-delivery-summary strong { color: var(--accent); font-size: .9rem; }
.cs-notif-delivery-summary span { color: var(--ink3); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.cs-notif-delivery-note {
  margin: -3px 0 12px;
  color: var(--ink2);
  font-size: .78rem;
  line-height: 1.4;
}
.cs-notif-delivery-list {
  display: grid;
  border-top: 0;
}
.cs-notif-delivery-row {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(250px, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.cs-notif-delivery-row:last-child { border-bottom: 0; }
.cs-notif-delivery-row.is-disabled { opacity: .48; }
.cs-notif-delivery-title { min-width: 0; }
.cs-notif-delivery-title strong {
  display: block;
  color: var(--ink);
  font-size: .82rem;
}
.cs-notif-delivery-title small {
  display: block;
  margin-top: 3px;
  color: var(--ink2);
  font-size: .72rem;
  line-height: 1.35;
}
.cs-notif-delivery-recipients { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.cs-notif-delivery-recipient {
  max-width: 100%;
  overflow: hidden;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  font-size: .7rem;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-notif-delivery-recipient.is-empty { color: var(--ink3); border-color: var(--border); background: var(--surface2); }
.cs-notif-delivery-status {
  color: #187447;
  font-size: .68rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.cs-notif-delivery-status.is-empty { color: #9a6700; }
.cs-notif-delivery-foot { padding: 14px 20px; background: var(--surface2); border-top: 1px solid var(--border); }
.cs-notif-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.cs-notif-card-hd strong {
  font-size: .82rem;
  color: var(--accent);
  white-space: nowrap;
}
.cs-notif-settings-wrap .cs-notif-details {
  border: 1px solid var(--border);
  border-radius: 16px;
  margin: 0;
}
.cs-notif-settings-wrap .cs-notif-summary { padding: 11px 12px; }
.cs-notif-settings-wrap .cs-notif-body { padding: 4px 12px 12px; }
.cs-notif-matrix {
  overflow-x: auto;
  padding-bottom: 2px;
}
.cs-notif-matrix-head,
.cs-notif-matrix-row {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(260px, 1.2fr);
  gap: 12px;
  min-width: 560px;
}
.cs-notif-matrix-head {
  align-items: end;
  padding: 0 2px 8px;
  color: var(--ink3);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cs-notif-matrix-head > div,
.cs-notif-matrix-recipients {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
}
.cs-notif-recipient-head {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.cs-notif-recipient-head small {
  display: block;
  color: var(--ink3);
  font-weight: 600;
}
.cs-notif-recipient-head.is-muted { opacity: .45; }
.cs-notif-matrix-row {
  align-items: center;
  padding: 10px 2px;
  border-top: 1px solid var(--border);
}
.cs-notif-matrix-row.is-disabled { opacity: .48; }
.cs-notif-matrix-type strong {
  display: block;
  color: var(--ink);
  font-size: .88rem;
}
.cs-notif-matrix-type small {
  display: block;
  margin-top: 3px;
  color: var(--ink2);
  font-size: .76rem;
  line-height: 1.35;
}
.cs-notif-matrix-cell {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft, #f8fafc);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.cs-notif-matrix-cell input { accent-color: var(--accent); }
.cs-notif-matrix-cell.is-muted {
  opacity: .45;
  cursor: not-allowed;
}
.cs-notif-alerts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.cs-notif-alert-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 14px;
  background: #fff7ed;
  color: #9a3412;
}
.cs-notif-alert-row--sent {
  background: #ecfdf5;
  color: #047857;
}
.cs-notif-alert-row span { font-weight: 800; }
.cs-notif-alert-row strong { margin-left: auto; }
.cs-notif-alert-row small { color: inherit; opacity: .72; }
.cs-email-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.cs-email-preview {
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  min-height: 252px;
  display: flex;
  flex-direction: column;
}
.cs-email-preview.is-disabled { opacity: .58; }
.cs-email-preview-top,
.cs-email-preview-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  font-size: .74rem;
}
.cs-email-preview-top {
  border-bottom: 1px solid var(--border);
  background: #fbf7ff;
}
.cs-email-preview--ok .cs-email-preview-top { background: #ecfdf5; color: #047857; }
.cs-email-preview--warn .cs-email-preview-top { background: #fff7ed; color: #9a3412; }
.cs-email-preview--danger .cs-email-preview-top { background: #fef2f2; color: #b91c1c; }
.cs-email-preview-top span,
.cs-email-preview-top em {
  font-style: normal;
  font-weight: 800;
}
.cs-email-preview-body {
  flex: 1;
  padding: 20px 18px 18px;
}
.cs-email-logo {
  margin-bottom: 12px;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink);
}
.cs-email-logo span { color: var(--accent); }
.cs-email-preview-body small {
  display: block;
  color: var(--ink3);
  font-size: .72rem;
  margin-bottom: 10px;
}
.cs-email-preview-body h4 {
  margin: 0 0 9px;
  color: var(--ink);
  font-size: 1.12rem;
}
.cs-email-preview-body p {
  margin: 0;
  color: var(--ink2);
  line-height: 1.45;
  font-size: .88rem;
}
.cs-email-preview-foot {
  border-top: 1px solid var(--border);
  color: var(--ink2);
}
.cs-email-preview-foot span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-email-preview-foot strong {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-lt);
  color: var(--accent);
  font-size: .68rem;
}

@media (max-width: 820px) {
  .cs-notif-hero { flex-direction: column; padding: 18px; }
  .cs-notif-monitor { min-width: 0; }
  .cs-notif-grid { grid-template-columns: 1fr; }
  .cs-notif-card { padding: 13px; }
  .cs-notif-delivery-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; }
  .cs-notif-delivery-recipients { grid-column: 1 / -1; }
  .cs-notif-matrix-head,
  .cs-notif-matrix-row {
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .cs-notif-matrix-head > span { display: none; }
  .cs-notif-matrix-head > div,
  .cs-notif-matrix-recipients {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  }
}

/* Legend */
.cs-side-card--legend .cs-side-card-hd { border-bottom: none; }
.cs-legend-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 6px 14px; font-size: .78rem; color: var(--ink);
}
.cs-legend-item:last-child { padding-bottom: 12px; }
.cs-legend-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0; margin-top: 4px;
}
/* Chip-style legend markers */
.cs-legend-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .58rem; font-weight: 800; letter-spacing: .04em;
  border-radius: 5px; padding: 2px 6px; flex-shrink: 0; margin-top: 1px;
}
.cs-legend-chip--wp   { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; } /* matches .cs-wp-chip */
.cs-legend-chip--w    { background: var(--surface2); color: var(--ink2); border: 1.5px solid var(--border); }
.cs-legend-chip--nowe { background: #f59e0b; color: #fff; border: none; } /* matches NOWE badge */

/* ── Mobile responsive ── */
@media (max-width: 860px) {
  .cs-body {
    grid-template-columns: 1fr;
  }
  /* sidebar follows main content on mobile: schedule first, then usterki/import/legenda */
}
@media (max-width: 640px) {
  /* Guests + notes columns already removed; tighten grid */
  .cs-thead,
  .cs-trow {
    grid-template-columns: 1fr 60px 44px 60px 56px 34px;
  }
}
@media (max-width: 480px) {
  .cs-stats-bar { padding: 10px 12px; }
  .cs-stat-chip { padding: 5px 10px; }
  .cs-date-pill { min-width: 62px; padding: 8px 10px; }
  .cs-date-pill-num { font-size: 1.15rem; }
}

/* ── Date pill: color tiers by cleaning count ──────────────────────────────
   tier-blue  : 1–3  → light blue
   tier-yellow: 4–6  → light amber/yellow
   tier-red   : 7+   → light red + stronger border
   Text (day/num/mon) stays system ink — only bg, border and count badge tinted.
   ────────────────────────────────────────────────────────────────────────── */
.cs-date-pill--tier-blue   { background: #eff6ff; border-color: #93c5fd; }
.cs-date-pill--tier-yellow { background: #fefce8; border-color: #fcd34d; }
.cs-date-pill--tier-red    { background: #fef2f2; border-color: #fca5a5; }

/* count badges */
.cs-date-pill--tier-blue   .cs-date-pill-count { background: #bfdbfe; color: #1e40af; }
.cs-date-pill--tier-yellow .cs-date-pill-count { background: #fde68a; color: #92400e; }
.cs-date-pill--tier-red    .cs-date-pill-count { background: #fecaca; color: #b91c1c; }

/* Tier + active: keep tier background, Layf gradient border.
   Must use linear-gradient(color,color) for the solid fill so padding-box clip works. */
.cs-date-pill--tier-blue.cs-date-pill--active {
  background:
    linear-gradient(#eff6ff, #eff6ff) padding-box,
    linear-gradient(135deg, #fb923c, #ec4899, #c084fc, #7c3aed) border-box;
  border: 2px solid transparent;
}
.cs-date-pill--tier-yellow.cs-date-pill--active {
  background:
    linear-gradient(#fefce8, #fefce8) padding-box,
    linear-gradient(135deg, #fb923c, #ec4899, #c084fc, #7c3aed) border-box;
  border: 2px solid transparent;
}
.cs-date-pill--tier-red.cs-date-pill--active {
  background:
    linear-gradient(#fef2f2, #fef2f2) padding-box,
    linear-gradient(135deg, #fb923c, #ec4899, #c084fc, #7c3aed) border-box;
  border: 2px solid transparent; box-shadow: 0 2px 10px rgba(251,146,60,.13);
}

/* dark mode */
html[data-dark='true'] .cs-date-pill--tier-blue   { background: rgba(59,130,246,.13); border-color: rgba(59,130,246,.40); }
html[data-dark='true'] .cs-date-pill--tier-yellow { background: rgba(234,179,8,.12);  border-color: rgba(234,179,8,.45); }
html[data-dark='true'] .cs-date-pill--tier-red    { background: rgba(220,38,38,.13);  border-color: rgba(220,38,38,.40); }
html[data-dark='true'] .cs-date-pill--tier-blue   .cs-date-pill-count { background: rgba(59,130,246,.25); color: #93c5fd; }
html[data-dark='true'] .cs-date-pill--tier-yellow .cs-date-pill-count { background: rgba(234,179,8,.25);  color: #fcd34d; }
html[data-dark='true'] .cs-date-pill--tier-red    .cs-date-pill-count { background: rgba(220,38,38,.25);  color: #fca5a5; }

/* ── Past date pills ── */
.cs-date-pill--past {
  opacity: .5;
  filter: saturate(.6);
}
.cs-date-pill--past .cs-date-pill-day,
.cs-date-pill--past .cs-date-pill-num,
.cs-date-pill--past .cs-date-pill-mon { color: var(--ink2); }

/* ── Past/today separator ── */
.cs-past-now-separator {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 4px; color: var(--ink3); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
}
.cs-past-now-separator::before,
.cs-past-now-separator::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── Past day section — ultra-compact, minimal height ── */
.cs-day-section--past {
  opacity: .7;
  filter: saturate(.6);
  border-color: transparent; /* no visible border to avoid visual weight */
}
.cs-day-section--past .cs-day-header-row { background: transparent; }
.cs-day-section--past .cs-day-header-row:hover { background: var(--surface2); }
.cs-day-section--past .cs-day-header {
  padding: 6px 12px; /* much smaller than normal 12px 16px */
}
.cs-day-section--past .cs-day-name {
  font-size: .8rem; font-weight: 500; color: var(--ink2);
}
.cs-day-section--past .cs-day-tag,
.cs-day-section--past .cs-day-free { font-size: .7rem; }
.cs-day-section--past .cs-day-chevron { width: 12px; height: 12px; }
.cs-day-section--past .cs-day-add-task { display: none; }

/* ── Past compact body (review-only) ── */
.cs-past-body {
  padding: 8px 14px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.cs-past-apt-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.cs-past-apt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 99px;
  font-size: .73rem; font-weight: 600; color: var(--ink);
  background: var(--surface2); border: 1px solid var(--border);
  line-height: 1.2;
}
.cs-past-apt-chip--wp {
  background: rgba(59,130,246,.07);
  border-color: rgba(59,130,246,.22);
}
.cs-past-apt-type {
  font-size: .64rem; font-weight: 500;
  color: var(--ink3); margin-left: 1px;
}
.cs-past-apt-nowe {
  font-size: .55rem; color: #dc2626; line-height: 1;
}
.cs-past-footer {
  font-size: .73rem; color: var(--ink2);
  padding-left: 1px;
}
.cs-past-tasks {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.cs-past-task-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 99px;
  font-size: .7rem; color: var(--ink2);
  background: var(--surface2); border: 1px dashed var(--border);
}
.cs-past-task-chip--done { opacity: .6; text-decoration: line-through; }

html[data-dark='true'] .cs-past-apt-chip { background: rgba(255,255,255,.05); }
html[data-dark='true'] .cs-past-apt-chip--wp { background: rgba(59,130,246,.12); }

/* ── Tab bar ── */
.cs-tabs-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.cs-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface2);
  cursor: pointer; font-size: .83rem; font-weight: 500; color: var(--ink2);
  transition: background .12s, border-color .12s, color .12s;
}
.cs-tab:hover { background: var(--surface); border-color: var(--ink3); color: var(--ink); }
.cs-tab--active {
  background: color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 58%, var(--border));
  color: var(--ink); font-weight: 700;
  box-shadow: 0 3px 9px color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 14%, transparent);
}
.cs-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 99px;
  background: #fee2e2; color: #b91c1c;
  font-size: .6rem; font-weight: 800; padding: 0 4px;
}

/* ── Task chip (Zadanie dodatkowe in history) ── */
.cs-t-chip {
  display: inline-flex; align-items: center;
  font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  background: #ede9fe; color: #6d28d9;
  border: 1px solid #c4b5fd;
  border-radius: 6px; padding: 2px 6px;
}
.cs-task-label {
  font-size: .8rem; color: var(--ink2); font-style: italic;
  white-space: normal; word-break: break-word;
}
.cs-task-details {
  font-size: .8rem; color: var(--ink2); font-style: italic;
}
.cs-task-details summary {
  cursor: pointer; list-style: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-task-details summary::-webkit-details-marker { display: none; }
.cs-task-details div {
  margin-top: 4px; white-space: normal; word-break: break-word;
}
.cs-task-details[open] summary { white-space: normal; }

/* ── Shared: small chips for W (history) ── */
.cs-w-chip {
  display: inline-flex; align-items: center;
  font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  background: var(--surface2); color: var(--ink2);
  border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 6px;
}

/* ── Shared: status badges ── */
.cs-side-badge--amber { background: #fef3c7; color: #92400e; }
.cs-side-badge--green { background: #dcfce7; color: #15803d; }

/* ── Shared: empty note ── */
.cs-empty-note {
  padding: 24px 16px; font-size: .82rem; color: var(--ink3);
  font-style: italic; text-align: center; margin: 0;
}

/* ── Shared: cs-select ── */
.cs-select {
  height: 34px; padding: 0 10px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--ink); font-size: .82rem; cursor: pointer;
  font-family: var(--sans);
}
.cs-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ═══ TAB: HISTORIA ═══════════════════════════════════════════════════════════ */

.cs-historia { display: flex; flex-direction: column; gap: 16px; }

.cs-historia-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cs-historia-summary { font-size: .82rem; color: var(--ink2); }
.cs-historia-summary strong { color: var(--ink); }

.cs-hist-table-wrap {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; overflow: hidden;
}

/* History table grid: Date | Apt/Task | Status | Checkout | Checkin | Guests | Price */
.cs-hist-head,
.cs-hist-row {
  display: grid;
  grid-template-columns: 72px 1fr 80px 68px 68px 56px 68px;
  align-items: start;
}
.cs-hcell--apt { white-space: normal; word-break: break-word; }
.cs-hist-head {
  padding: 7px 4px; background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.cs-hist-row {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.cs-hist-row:last-of-type { border-bottom: none; }
.cs-hist-row:hover { background: var(--surface2); }
.cs-hist-row--change {
  background: color-mix(in srgb, var(--surface2) 78%, var(--accent) 6%);
}
.cs-hist-row--change-removed {
  background: color-mix(in srgb, #fee2e2 54%, var(--surface) 46%);
}
.cs-hist-row--change-added {
  background: color-mix(in srgb, #dcfce7 42%, var(--surface) 58%);
}
.cs-hist-row--change-changed {
  background: color-mix(in srgb, #ede9fe 50%, var(--surface) 50%);
}
.cs-hist-row--change .cs-hcell {
  color: var(--ink2);
  font-style: italic;
}
.cs-change-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 22px; padding: 2px 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; font-style: normal;
  white-space: nowrap;
}
.cs-change-chip--removed { background: #fee2e2; color: #b91c1c; }
.cs-change-chip--added { background: #dcfce7; color: #15803d; }
.cs-change-chip--changed { background: #ede9fe; color: #6d28d9; }
.cs-history-changes-toggle.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.cs-hcell {
  padding: 9px 8px; font-size: .8rem; color: var(--ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-hist-head .cs-hcell {
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink3);
}
.cs-hcell--apt   { font-weight: 700; color: var(--ink); }
.cs-hcell--price { font-weight: 700; color: var(--ink); text-align: right; }
.cs-hcell--date  { color: var(--ink2); }
.cs-history-move-note {
  display: block;
  margin-top: 2px;
  color: #6d4aff;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.25;
}

.cs-hist-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; font-size: .8rem; color: var(--ink2);
  border-top: 1.5px solid var(--border); background: var(--surface2);
}
.cs-hist-footer strong { color: var(--ink); font-size: .88rem; }

@media (max-width: 600px) {
  .cs-hist-head,
  .cs-hist-row {
    grid-template-columns: 60px 70px 56px 60px 56px 50px;
  }
  .cs-hcell--guests { display: none; }
  .cs-task-details:not([open]) summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
  .cs-task-details:not([open]) div { display: none; }
}

/* ═══ TAB: ROZLICZENIA ════════════════════════════════════════════════════════ */

.cs-rozliczenia { display: flex; flex-direction: column; gap: 18px; }

.cs-rozl-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.cs-rozl-title    { font-size: 1.15rem; font-weight: 800; color: var(--ink); margin: 0 0 2px; }
.cs-rozl-subtitle { font-size: .8rem; color: var(--ink2); margin: 0; }

/* Periodic settlement flow — server creates the immutable settlement snapshot. */
.cs-settlement-draft {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 8px;
  background: var(--surface);
}
.cs-settlement-draft-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cs-settlement-draft-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .07em;
}
.cs-settlement-draft-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.25;
}
.cs-settlement-draft-head p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: .78rem;
  line-height: 1.45;
}
.cs-settlement-draft-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--accent);
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  border: 1px solid var(--layf-accent-border, var(--border));
  font-size: .68rem;
  font-weight: 750;
}
.cs-settlement-draft-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  max-width: 480px;
}
.cs-settlement-draft-range label { display: grid; gap: 5px; min-width: 0; }
.cs-settlement-draft-range label > span { color: var(--ink2); font-size: .72rem; font-weight: 650; }
.cs-settlement-draft-range-arrow { padding-bottom: 9px; color: var(--ink3); font-size: .94rem; }
.cs-settlement-draft-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .44fr); gap: 12px; }
.cs-settlement-draft-breakdown,
.cs-settlement-draft-total { border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.cs-settlement-draft-breakdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: .76rem;
}
.cs-settlement-draft-breakdown-head span { color: var(--ink2); font-size: .69rem; }
.cs-settlement-draft-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 10px 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  font-size: .78rem;
}
.cs-settlement-draft-row:last-child { border-bottom: 0; }
.cs-settlement-draft-row span:nth-child(2) { color: var(--ink2); font-size: .7rem; white-space: nowrap; }
.cs-settlement-draft-row strong { white-space: nowrap; font-size: .8rem; }
.cs-settlement-draft-total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  background: var(--layf-accent-soft-bg, var(--surface2));
}
.cs-settlement-draft-total > span { color: var(--ink2); font-size: .72rem; font-weight: 650; }
.cs-settlement-draft-total > strong { margin-top: 5px; color: var(--ink); font-size: 1.5rem; line-height: 1.1; }
.cs-settlement-draft-total > small { margin-top: 7px; color: var(--ink2); font-size: .69rem; line-height: 1.4; }
.cs-settlement-draft-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--ink2);
  font-size: .72rem;
  line-height: 1.4;
}
.cs-settlement-draft-foot > span { max-width: 590px; }
.cs-settlement-draft-foot > .btn:only-child { margin-left: auto; }
.cs-settlement-draft-foot .btn[disabled] { cursor: not-allowed; opacity: .55; }
.cs-periodic-history {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.cs-periodic-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.cs-periodic-history-head h3 { margin: 0; color: var(--ink); font-size: .9rem; }
.cs-periodic-history-head p { margin: 4px 0 0; color: var(--ink2); font-size: .72rem; line-height: 1.4; }
.cs-periodic-history-head > span {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: var(--ink2);
  background: var(--surface2);
  font-size: .7rem;
  font-weight: 750;
}
.cs-periodic-history-list { display: grid; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.cs-periodic-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.cs-periodic-history-row:last-child { border-bottom: 0; }
.cs-periodic-history-row--approved {
  background: #f1fbf5;
  box-shadow: inset 3px 0 0 #46a86d;
}
.cs-periodic-history-row--approved .cs-periodic-history-main strong { color: #17663d; }
.cs-periodic-history-row--approved .cs-periodic-history-main span { color: #397b56; }
.cs-periodic-history-row--pending {
  background: #fff9eb;
  box-shadow: inset 3px 0 0 #d7a33f;
}
.cs-periodic-history-row--pending .cs-periodic-history-main strong { color: #7e560d; }
.cs-periodic-history-row--pending .cs-periodic-history-main > span { color: #86672c; }
.cs-periodic-history-main { display: grid; gap: 3px; min-width: 0; }
.cs-periodic-history-main strong { color: var(--ink); font-size: .78rem; }
.cs-periodic-history-main span { color: var(--ink2); font-size: .7rem; }
.cs-periodic-invoice-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin-top: 2px;
  color: var(--ink2);
  font-size: .68rem;
  line-height: 1.35;
}
.cs-periodic-invoice-line b { color: inherit; font-weight: 750; }
.cs-periodic-invoice-line.is-empty { color: var(--ink3); }
.cs-periodic-invoice-edit {
  min-height: 22px;
  padding: 2px 7px;
  font-size: .64rem;
}
.cs-periodic-invoice-badge {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 750;
  white-space: nowrap;
}
.cs-periodic-invoice-badge--match { color: #17663d; border-color: #a9dfc0; background: #effaf3; }
.cs-periodic-invoice-badge--diff { color: #9a6700; border-color: #f3d28d; background: #fff8e4; }
.cs-periodic-history-events { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 3px; }
.cs-periodic-history-event { color: var(--ink2); font-size: .66rem; line-height: 1.35; }
.cs-periodic-history-event b { color: inherit; font-weight: 700; }
.cs-periodic-history-event.is-complete { color: #397b56; }
.cs-periodic-history-event.is-pending { color: #9a6a0a; }
.cs-periodic-history-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cs-periodic-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink2);
  background: var(--surface2);
  font-size: .66rem;
  font-weight: 750;
  white-space: nowrap;
}
.cs-periodic-status.is-draft { color: #9a6700; border-color: #f3d28d; background: #fff8e4; }
.cs-periodic-status.is-service-confirmed { color: #28598b; border-color: #bbd8f4; background: #eef7ff; }
.cs-periodic-status.is-owner-approved { color: #187447; border-color: #a9dfc0; background: #effaf3; }
.cs-periodic-status.is-cancelled { color: var(--ink2); background: var(--surface2); }

@media (max-width: 680px) {
  .cs-settlement-draft { padding: 14px; }
  .cs-settlement-draft-grid { grid-template-columns: 1fr; }
  .cs-settlement-draft-foot { align-items: flex-start; flex-direction: column; }
  .cs-periodic-history-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cs-periodic-history-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 460px) {
  .cs-settlement-draft-head { display: grid; }
  .cs-settlement-draft-status { justify-self: start; }
  .cs-settlement-draft-range { grid-template-columns: 1fr; gap: 8px; max-width: none; }
  .cs-settlement-draft-range-arrow { display: none; }
  .cs-settlement-draft-row { grid-template-columns: 1fr auto; gap: 3px 10px; }
  .cs-settlement-draft-row span:nth-child(2) { grid-column: 1; }
  .cs-settlement-draft-row strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .cs-periodic-history-row { grid-template-columns: 1fr; gap: 8px; }
  .cs-periodic-history-actions { grid-column: auto; }
}

/* Period tab pills */
.cs-ptabs {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.cs-ptab {
  padding: 6px 16px; border-radius: 99px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: .8rem; font-weight: 500; color: var(--ink2); cursor: pointer;
  transition: all .12s;
}
.cs-ptab:hover { border-color: var(--accent); color: var(--ink); }
.cs-ptab--active {
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  border-color: var(--layf-accent-border, var(--accent));
  color: var(--ink); font-weight: 700;
}

/* ── Invoice-style renderer (netto / VAT / brutto) ─────────────────────────── */
.cs-invoice {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.cs-inv-head,
.cs-inv-row,
.cs-inv-info-row {
  display: grid;
  grid-template-columns: 1fr 60px 100px 110px;
  align-items: center;
}
.cs-inv-head {
  padding: 8px 4px;
  background: var(--surface2);
  border-bottom: 1.5px solid var(--border);
}
.cs-inv-head .cs-inv-cell {
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink3);
}
.cs-inv-row {
  border-bottom: 1px solid var(--border);
}
.cs-inv-row:last-child { border-bottom: none; }
.cs-inv-row--muted { opacity: .55; }

.cs-inv-info-row {
  padding: 7px 12px;
  font-size: .76rem; color: var(--ink2);
  border-top: 1px dashed var(--border);
  border-bottom: 1px solid var(--border);
  grid-template-columns: 1fr;   /* full-width info row */
}

.cs-inv-cell {
  padding: 11px 12px; font-size: .84rem; color: var(--ink);
}
.cs-inv-cell--lp    { font-weight: 500; }
.cs-inv-cell--qty   { text-align: center; color: var(--ink2); }
.cs-inv-cell--unit  { text-align: right; color: var(--ink2); }
.cs-inv-cell--amount{ text-align: right; font-weight: 600; }
.cs-cell-dash       { color: var(--ink3); }

/* W / W/P status chips inside invoice info row */
.cs-inv-info-row .cs-w-chip,
.cs-inv-info-row .cs-wp-chip {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 6px;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
}
.cs-inv-info-row .cs-w-chip  { background: #d1fae5; color: #065f46; }
.cs-inv-info-row .cs-wp-chip { background: #fef3c7; color: #92400e; }

/* VAT summary block */
.cs-inv-vat {
  display: flex; flex-direction: column; gap: 0;
  border-top: 2px solid var(--border);
  background: var(--surface2);
}
.cs-inv-vat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  font-size: .85rem; color: var(--ink2);
}
.cs-inv-vat-row:last-child { border-bottom: none; }
.cs-inv-vat-row--brutto {
  font-size: .96rem; font-weight: 800; color: var(--ink);
  background: var(--layf-accent-soft-bg, var(--accent-lt));
}
.cs-inv-vat-lbl { font-size: inherit; }
.cs-inv-vat-val { font-weight: 600; letter-spacing: -.01em; }
.cs-inv-brutto  { font-size: 1.1rem; font-weight: 800; color: var(--ink); }

/* Empty note inside invoice */
.cs-empty-note {
  padding: 24px; text-align: center; font-size: .84rem; color: var(--ink3);
}

@media (max-width: 520px) {
  .cs-inv-head,
  .cs-inv-row {
    grid-template-columns: 1fr 44px 80px 88px;
  }
  .cs-inv-cell { padding: 9px 8px; font-size: .79rem; }
  .cs-inv-vat-row { padding: 8px 12px; }
}

/* Rozliczenia table: Apt | W | W/P | Total (legacy, kept for reference) */
.cs-rozl-table {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.cs-rozl-head,
.cs-rozl-row,
.cs-rozl-footer {
  display: grid;
  grid-template-columns: 120px 1fr 1fr 120px;
  align-items: center;
}
.cs-rozl-head   { padding: 7px 4px; background: var(--surface2); border-bottom: 1px solid var(--border); }
.cs-rozl-row    { border-bottom: 1px solid var(--border); transition: background .1s; }
.cs-rozl-row:last-child { border-bottom: none; }
.cs-rozl-row:hover { background: var(--surface2); }
.cs-rozl-footer {
  border-top: 1.5px solid var(--border); background: var(--surface2);
}

.cs-rcell {
  padding: 10px 12px; font-size: .82rem; color: var(--ink2);
}
.cs-rozl-head .cs-rcell {
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink3);
}
.cs-rcell--apt   { font-weight: 700; color: var(--ink); }
.cs-rcell--total { font-weight: 700; color: var(--ink); text-align: right; }
.cs-rcell--w,
.cs-rcell--wp    { text-align: center; }
.cs-rozl-grand   { font-size: 1rem; color: var(--ink); }

@media (max-width: 500px) {
  .cs-rozl-head,
  .cs-rozl-row,
  .cs-rozl-footer { grid-template-columns: 90px 1fr 1fr 90px; }
}

/* ═══ TAB: ZADANIA ════════════════════════════════════════════════════════════ */

.cs-zadania {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.cs-zadania-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

.cs-zadania-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
  max-width: 100%;
  min-width: 0;
}

.cs-zadania-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cs-zadania-aside { position: sticky; top: 16px; min-width: 0; }

/* ── History separator ──────────────────────────────────────────────────── */
.cs-history-separator {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 2px;
}
.cs-history-separator::before,
.cs-history-separator::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.cs-history-separator-label {
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink3); white-space: nowrap;
  padding: 0 4px;
}

/* Day groups */
.cs-zadania-group {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
/* Past task groups — grayed out */
.cs-zadania-group--past {
  opacity: .6;
  background: var(--surface2);
}
.cs-zadania-group-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.cs-zadania-group-date { font-size: .8rem; font-weight: 700; color: var(--ink); }
.cs-zadania-group-sum  { font-size: .8rem; font-weight: 600; color: var(--ink2); }

/* Task rows */
.cs-zadania-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.cs-zadania-row:last-child { border-bottom: none; }
.cs-zadania-row:hover { background: var(--surface2); }
.cs-zadania-row-left  { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.cs-zadania-row-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; min-width: 0; }

/* Task info */
.cs-zadania-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cs-zadania-title {
  font-size: .84rem; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-zadania-apt { font-size: .72rem; color: var(--ink3); }
.cs-zadania-price { font-size: .84rem; font-weight: 700; color: var(--ink); min-width: 60px; text-align: right; }
.cs-zadania-edit, .cs-zadania-del { opacity: .4; transition: opacity .12s; }
.cs-zadania-row:hover .cs-zadania-edit,
.cs-zadania-row:hover .cs-zadania-del { opacity: 1; }

/* Empty state */
.cs-zadania-empty {
  padding: 32px 20px; text-align: center;
  font-size: .88rem; color: var(--ink2);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px;
}

/* Cennik sidebar */
.cs-cennik-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: .78rem;
}
.cs-cennik-row:last-child { border-bottom: none; }
.cs-cennik-desc { color: var(--ink); flex: 1; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.cs-cennik-price { color: var(--ink2); font-weight: 600; flex-shrink: 0; white-space: nowrap; }

/* Task modal */
.cs-modal-backdrop {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.cs-modal {
  background: var(--surface);
  border-radius: 16px;
  width: 100%; max-width: 560px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
}
.cs-modal--narrow { max-width: 400px; }
.cs-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border);
}
.cs-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.cs-modal-title { font-size: 1rem; font-weight: 700; color: var(--ink); }
.cs-modal-close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; border: none;
  background: transparent; color: var(--ink2); cursor: pointer;
}
.cs-modal-close:hover { background: var(--surface2); }
.cs-modal-body {
  overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.cs-modal-ft {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0;
}

/* Form elements inside modal */
.cs-form-group { display: flex; flex-direction: column; gap: 5px; }
.cs-form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-form-label { font-size: .75rem; font-weight: 600; color: var(--ink2); }
.cs-input {
  padding: 8px 10px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: .88rem; color: var(--ink); width: 100%; box-sizing: border-box;
}
.cs-input:focus { outline: none; border-color: var(--accent); }
.cs-input--price { max-width: 120px; }
.cs-form-radio-row { display: flex; gap: 16px; }
.cs-radio-label { display: flex; align-items: center; gap: 5px; font-size: .84rem; color: var(--ink); cursor: pointer; }

/* Cennik quick-pick inside modal */
.cs-modal-cennik { background: var(--surface2); border-radius: 10px; padding: 12px; }
.cs-modal-cennik-hd { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); margin: 0 0 8px; }
.cs-cennik-chips { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.cs-cennik-chip {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-radius: 8px; gap: 8px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: .78rem; color: var(--ink); cursor: pointer; text-align: left;
  transition: all .1s;
}
.cs-cennik-chip:hover { border-color: var(--accent); background: var(--layf-accent-soft-bg, var(--accent-lt)); }
.cs-cennik-chip-price { font-weight: 700; color: var(--ink2); flex-shrink: 0; }

/* Invoice task-apt label */
.cs-inv-task-apt {
  display: block; font-size: .7rem; color: var(--ink3); margin-top: 1px;
}

@media (max-width: 860px) {
  .cs-zadania-body { grid-template-columns: 1fr; }
  .cs-zadania-aside { position: static; }
}
@media (max-width: 560px) {
  .cs-zadania-actions-bar { gap: 8px; }
  .cs-zadania-actions-bar .btn { flex: 1 1 auto; min-width: 0; }
  .cs-zadania-row { align-items: flex-start; gap: 8px; }
  .cs-zadania-row-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 112px;
  }
  .cs-zadania-price { min-width: 100%; }
  .cs-zadania-edit,
  .cs-zadania-del { opacity: .75; }
}
@media (max-width: 480px) {
  .cs-form-row--2 { grid-template-columns: 1fr; }
  .cs-modal { border-radius: 12px; }
}

/* ═══ TAB: KAMPANIE (sub-tab of Zadania) ══════════════════════════════════════ */

/* Sub-tab bar within Zadania */
.cs-subtabs-bar {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
}
.cs-subtab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface2);
  cursor: pointer; font-size: .8rem; font-weight: 500; color: var(--ink2);
  transition: all .12s;
}
.cs-subtab:hover { border-color: var(--ink3); color: var(--ink); }
.cs-subtab--active {
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  border-color: var(--layf-accent-border, var(--accent));
  color: var(--ink); font-weight: 600;
}

/* Actions bar (button + summary) */
.cs-zadania-actions-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}

.cs-supplies-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .cs-supplies-actions { justify-content: flex-end; }
}

.cs-kampanie { display: flex; flex-direction: column; gap: 16px; }
.cs-kampanie-section { display: flex; flex-direction: column; gap: 10px; }
.cs-kampanie-section--history { gap: 6px; opacity: .7; }

/* ── Campaign history card (compact, grayed) ─────────────────────────────── */
.cs-campaign-history-card {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
}
.cs-campaign-history-hd {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.cs-campaign-history-title {
  font-size: .85rem; font-weight: 700; color: var(--ink);
}
.cs-campaign-history-meta {
  font-size: .75rem; color: var(--ink3); flex: 1;
}
.cs-campaign-history-actions { margin-left: auto; }
.cs-campaign-history-apts {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cs-campaign-history-apt {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .73rem; color: var(--ink2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 2px 8px;
}
.cs-campaign-history-apt-date { color: var(--ink3); font-size: .68rem; }

/* Campaign card */
.cs-campaign-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow .15s;
}
.cs-campaign-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.cs-campaign-card--done { opacity: .7; }

.cs-campaign-card-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.cs-campaign-card-info { display: flex; flex-direction: column; gap: 2px; }
.cs-campaign-title { font-size: .94rem; font-weight: 700; color: var(--ink); }
.cs-campaign-meta  { font-size: .75rem; color: var(--ink3); }
.cs-campaign-card-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cs-campaign-done-badge {
  font-size: .72rem; font-weight: 700; color: #16a34a;
  background: #dcfce7; border-radius: 999px; padding: 2px 8px;
}

/* Progress bar */
.cs-campaign-progress {
  display: flex; align-items: center; gap: 10px;
}
.cs-campaign-bar {
  flex: 1; height: 6px; border-radius: 99px;
  background: var(--border); overflow: hidden;
}
.cs-campaign-bar-fill {
  height: 100%; border-radius: 99px;
  background: var(--layf-accent-gradient, var(--accent));
  transition: width .3s ease;
}
.cs-campaign-bar-fill--done { background: #16a34a; }
.cs-campaign-progress-label {
  font-size: .78rem; font-weight: 600; color: var(--ink2); white-space: nowrap;
}

/* Apt grid inside campaign card */
.cs-campaign-apt-grid {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.cs-camp-apt {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 8px; font-size: .73rem;
  border: 1.5px solid var(--border);
}
.cs-camp-apt--done {
  background: #f0fdf4; border-color: #bbf7d0; color: #15803d;
}
.cs-camp-apt--pending {
  background: var(--surface2); color: var(--ink2);
}
.cs-camp-apt-num  { font-weight: 600; }
.cs-camp-apt-date { font-size: .68rem; color: #15803d; }
.cs-camp-apt-next { font-size: .68rem; color: var(--ink3); }
.cs-camp-apt-done-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px;
  background: transparent; border: 1.5px solid var(--border);
  font-size: .65rem; color: var(--ink3); cursor: pointer;
  transition: all .1s; padding: 0; line-height: 1;
}
.cs-camp-apt-done-btn:hover { background: #16a34a; border-color: #16a34a; color: #fff; }

/* Campaign summary line */
.cs-campaign-summary {
  font-size: .78rem; color: var(--ink2); border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* Campaign modal: apt selector */
.cs-campaign-apt-select { display: flex; flex-direction: column; gap: 8px; }
.cs-check-all-label {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600; color: var(--ink2); cursor: pointer;
}
.cs-campaign-apt-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 5px;
  max-height: 180px; overflow-y: auto; padding: 4px;
  border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface2);
}
.cs-apt-check-label {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 4px; border-radius: 8px; font-size: .78rem;
  border: 1.5px solid var(--border); background: var(--surface);
  cursor: pointer; transition: all .1s; text-align: center;
  gap: 4px;
}
.cs-apt-check-label input[type="checkbox"] { display: none; }
.cs-apt-check-label.is-checked {
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  border-color: var(--layf-accent-border, var(--accent));
  color: var(--ink); font-weight: 600;
}
.cs-modal--wide { max-width: 640px; }

@media (max-width: 640px) {
  .cs-campaign-apt-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
}

/* ═══ TAB: USTERKI ════════════════════════════════════════════════════════════ */

.cs-usterki { display: flex; flex-direction: column; gap: 16px; }

.cs-usterki-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cs-usterki-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.cs-iss-group { display: flex; flex-direction: column; gap: 8px; }
.cs-iss-group-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0;
}
.cs-iss-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cs-iss-dot--red   { background: #ef4444; }
.cs-iss-dot--amber { background: #f59e0b; }
.cs-iss-dot--green { background: #22c55e; }

.cs-iss-group-title { font-size: .8rem; font-weight: 700; color: var(--ink2); }
.cs-iss-group-count {
  font-size: .7rem; font-weight: 700; color: var(--ink3);
  background: var(--surface2); border-radius: 99px; padding: 1px 7px;
  border: 1px solid var(--border);
}
.cs-iss-cards { display: flex; flex-direction: column; gap: 8px; }

.cs-iss-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.cs-iss-card-top {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cs-iss-status {
  font-size: .68rem; font-weight: 700; border-radius: 99px;
  padding: 2px 9px;
}
.cs-iss-s--open   { background: #fee2e2; color: #b91c1c; }
.cs-iss-s--prog   { background: #fef3c7; color: #92400e; }
.cs-iss-s--closed { background: #dcfce7; color: #15803d; }

.cs-iss-card-date  { font-size: .72rem; color: var(--ink3); margin-left: auto; }
.cs-iss-card-desc  { font-size: .85rem; color: var(--ink); margin: 0; }
.cs-iss-card-actions { display: flex; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.cs-iss-card.is-saving { opacity: .68; pointer-events: none; }

/* Priority badges */
.cs-iss-priority {
  font-size: .65rem; font-weight: 700; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 999px;
}
.cs-iss-priority--high   { background: #fef3c7; color: #92400e; }
.cs-iss-priority--urgent { background: #fee2e2; color: #b91c1c; }

/* Linked to properties chip */
.cs-iss-linked-chip {
  font-size: .72rem; color: #15803d; font-weight: 600;
  margin-bottom: 2px;
}

/* Empty state */
.cs-iss-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 36px 20px; color: var(--ink3); font-size: .85rem; text-align: center;
}
.cs-iss-empty p { margin: 0; color: var(--ink2); }

/* textarea variant of cs-input */
.cs-input--textarea {
  resize: vertical; min-height: 72px; font-family: inherit;
}

/* Property picker list */
.cs-prop-picker-list {
  display: flex; flex-direction: column; gap: 8px;
}
.cs-prop-picker-btn {
  width: 100%; text-align: left; justify-content: flex-start;
}

/* ─── Rozliczenia: approval bar ─────────────────────────────────────────────── */

.cs-approval-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 12px;
  margin-top: 12px;
  font-size: .85rem;
}
.cs-approval-bar--pending {
  background: #f0f9ff;
  border: 1.5px solid #bae6fd;
  color: var(--ink);
}
.cs-approval-bar--approved {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  color: #14532d;
}
.cs-approval-bar--corrected {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  color: #78350f;
}
.cs-approval-bar--service {
  background: #f5f3ff;
  border: 1.5px solid #ddd6fe;
  color: #4c1d95;
}
.cs-approval-bar--service-stale {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}
.cs-approval-bar-left {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}
.cs-approval-bar-left svg { flex-shrink: 0; }
.cs-approval-bar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cs-approval-meta { font-size: .75rem; opacity: .7; }

/* ═══ TAB: CENNIK SPRZĄTAŃ ═══════════════════════════════════════════════════ */

.cs-cennik-apts {
  display: flex; flex-direction: column; gap: 16px;
}
.cs-cennik-apts-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.cs-cennik-apts-title {
  font-size: .95rem; font-weight: 700; color: var(--ink);
}
.cs-cennik-apts-custom-badge {
  display: inline-block; margin-left: 8px;
  font-size: .65rem; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--layf-accent-soft-bg, #f3f0ff);
  color: var(--layf-accent-text, #6d28d9);
}
.cs-cennik-apts-hint {
  font-size: .75rem; color: var(--ink3); margin: 3px 0 0;
}
.cs-cennik-apts-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Grid of apt price rows */
.cs-apt-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.cs-apt-price-row {
  display: grid; grid-template-columns: 52px 1fr 28px;
  align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 10px;
}
.cs-apt-price-row--custom {
  border-color: var(--layf-accent-border, #c4b5fd);
  background: var(--layf-accent-soft-bg, #f5f3ff);
}
.cs-apt-price-label {
  font-size: .8rem; font-weight: 700; color: var(--ink2); white-space: nowrap;
}
.cs-apt-price-input-wrap {
  display: flex; align-items: center; gap: 4px;
}
.cs-apt-price-input {
  width: 64px; text-align: right; padding: 4px 6px;
  font-size: .85rem; font-weight: 600;
}
.cs-apt-price-unit {
  font-size: .75rem; color: var(--ink3); white-space: nowrap;
}
.cs-apt-price-reset {
  font-size: .9rem; padding: 2px 4px; opacity: .5;
  color: var(--accent);
}
.cs-apt-price-reset:hover { opacity: 1; }

/* neutral tab badge (for count changes) */
.cs-tab-badge--neutral {
  background: var(--surface2, #f1f5f9);
  color: var(--ink2);
}

@media (max-width: 480px) {
  .cs-apt-price-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ═══ TAB: PRANIE ════════════════════════════════════════════════════════════ */

.cs-pranie { display: flex; flex-direction: column; gap: 18px; }

.cs-pranie-info {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 12px;
}
.cs-pranie-info-text {
  display: flex; flex-direction: column; gap: 2px;
  font-size: .82rem; color: var(--ink2);
}
.cs-pranie-info-text strong { color: var(--ink); }

/* Group legend cards */
.cs-pranie-groups {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.cs-pranie-group-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 3px solid var(--gc, var(--accent));
}
.cs-pranie-group-badge {
  display: inline-flex; align-items: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  background: color-mix(in srgb, var(--gc, var(--accent)) 12%, transparent);
  color: var(--gc, var(--accent));
  border: 1px solid color-mix(in srgb, var(--gc, var(--accent)) 30%, transparent);
  border-radius: 6px; padding: 2px 8px; align-self: flex-start;
}
.cs-pranie-apts {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.cs-pranie-apt {
  font-size: .72rem; color: var(--ink2);
  background: var(--surface2); border-radius: 6px;
  padding: 2px 7px; border: 1px solid var(--border);
}

/* Weekly delivery table */
.cs-pranie-table-wrap {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
/* Cols: Date | G1 | G2 | G3 | G4 | Total */
.cs-pranie-head,
.cs-pranie-row {
  display: grid;
  grid-template-columns: 110px repeat(4, 1fr) 70px;
  align-items: center;
}
.cs-pranie-head {
  padding: 7px 4px; background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.cs-pranie-row {
  border-bottom: 1px solid var(--border); transition: background .1s;
}
.cs-pranie-row:last-child { border-bottom: none; }
.cs-pranie-row:hover { background: var(--surface2); }
.cs-pranie-row--today {
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  font-weight: 600;
}
.cs-pranie-row--today:hover { background: var(--layf-accent-soft-bg, var(--accent-lt)); }
.cs-pranie-row--free { opacity: .55; }

.cs-pcell {
  padding: 10px 10px; font-size: .82rem; color: var(--ink2);
  text-align: center;
}
.cs-pranie-head .cs-pcell {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink3);
}
.cs-pcell--date {
  display: flex; flex-direction: column; align-items: flex-start;
  padding-left: 14px; text-align: left; gap: 1px;
}
.cs-pcell-day   { font-size: .68rem; font-weight: 700; color: var(--ink2); text-transform: uppercase; }
.cs-pcell-date  { font-size: .78rem; color: var(--ink); }
.cs-pcell--total { font-weight: 700; color: var(--ink); }

.cs-pranie-sets {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 700;
  color: var(--gc, var(--accent));
  background: color-mix(in srgb, var(--gc, var(--accent)) 10%, transparent);
  border-radius: 8px; padding: 3px 10px; gap: 2px;
}
.cs-pranie-sets--urgent {
  background: color-mix(in srgb, var(--gc, var(--accent)) 16%, transparent);
  outline: 1.5px solid color-mix(in srgb, var(--gc, var(--accent)) 40%, transparent);
}

.cs-pranie-note {
  display: flex; align-items: flex-start; gap: 4px;
  font-size: .78rem; color: var(--ink3); font-style: italic;
  padding: 4px 0; margin: 0; line-height: 1.5;
}

@media (max-width: 600px) {
  .cs-pranie-head,
  .cs-pranie-row {
    grid-template-columns: 90px repeat(4, 1fr) 52px;
  }
  .cs-pcell { padding: 8px 6px; font-size: .75rem; }
}
@media (max-width: 420px) {
  /* On very small screens stack G-labels */
  .cs-pranie-groups { grid-template-columns: 1fr 1fr; }
}

/* ══ Module Invite Modal (ms-im-*) ══════════════════════════════════════════ */

#ms-invite-modal-root {
  inset: 0;
  position: fixed;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ms-im-fadein .18s ease;
}
#ms-invite-modal-root.ms-im--closing {
  animation: ms-im-fadeout .22s ease forwards;
}
/* Prevent CSS display:flex from fighting [hidden] attribute */
#ms-invite-modal-root [hidden] { display: none !important; }

@keyframes ms-im-fadein  { from { opacity: 0 } to { opacity: 1 } }
@keyframes ms-im-fadeout { from { opacity: 1 } to { opacity: 0 } }

.ms-im-backdrop {
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(3px);
  inset: 0;
  position: fixed;
  z-index: 0;
}

.ms-im-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  position: relative;
  width: 400px;
  max-width: calc(100vw - 32px);
  z-index: 1;
  animation: ms-im-popIn .22s cubic-bezier(.34,1.3,.64,1);
}
.ms-im-card--wide { width: 460px; }
@keyframes ms-im-popIn {
  from { opacity: 0; transform: scale(.93) translateY(8px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.ms-im-head {
  align-items: center;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.07));
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  padding: 14px 16px 13px;
}
.ms-im-title {
  color: var(--ink, #111827);
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}
.ms-im-close,
.ms-im-back {
  align-items: center;
  background: none;
  border: none;
  border-radius: 7px;
  color: var(--ink2, #6b7280);
  cursor: pointer;
  display: flex;
  height: 28px;
  justify-content: center;
  padding: 0;
  width: 28px;
}
.ms-im-close:hover,
.ms-im-back:hover { background: var(--surface2, #f0f0f5); color: var(--ink, #111827); }

/* ── Body ───────────────────────────────────────────────────────────────── */
.ms-im-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}

/* ── Type selection step ────────────────────────────────────────────────── */
.ms-im-step-hint {
  color: var(--ink2, #6b7280);
  font-size: 13px;
  margin: 0 0 14px;
}
.ms-im-type-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ms-im-type-card {
  background: var(--surface2, #f7f8fc);
  border: 1.5px solid var(--border, rgba(0,0,0,.09));
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ms-im-type-card:hover {
  background: #fff;
  border-color: #a78bfa;
  box-shadow: 0 2px 10px rgba(124,92,252,.12);
}
.ms-im-type-icon { font-size: 22px; line-height: 1; }
.ms-im-type-icon svg {
  display: block;
  height: 22px;
  width: 22px;
}
.ms-im-type-card strong { color: var(--ink, #111827); display: block; font-size: 13px; }
.ms-im-type-card span   { color: var(--ink2, #6b7280); font-size: 11.5px; line-height: 1.4; }
.ms-im-type-card em     { color: #7c5cfc; font-style: normal; font-weight: 500; }

/* ── Form fields ────────────────────────────────────────────────────────── */
.ms-im-form { display: flex; flex-direction: column; gap: 12px; }
.ms-im-field { display: flex; flex-direction: column; gap: 4px; }
.ms-im-label {
  color: var(--ink2, #6b7280);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.ms-im-input,
.ms-im-select,
.ms-im-textarea {
  background: var(--surface2, #f7f8fc);
  border: 1px solid var(--border, rgba(0,0,0,.10));
  border-radius: 9px;
  color: var(--ink, #111827);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  padding: 9px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}
.ms-im-input:focus,
.ms-im-select:focus,
.ms-im-textarea:focus {
  border-color: #7c5cfc;
  box-shadow: 0 0 0 3px rgba(124,92,252,.12);
}
.ms-im-textarea { resize: vertical; }

/* ── Module checkboxes ──────────────────────────────────────────────────── */
.ms-im-modules-list {
  background: var(--surface2, #f7f8fc);
  border: 1px solid var(--border, rgba(0,0,0,.09));
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ms-im-module-row {
  align-items: center;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.06));
  display: flex;
  gap: 8px;
  padding: 9px 12px;
}
.ms-im-module-row:last-child { border-bottom: none; }
.ms-im-module-check-lbl {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex: 1;
  gap: 7px;
  font-size: 13px;
  color: var(--ink, #111827);
}
.ms-im-module-check-lbl input[type="checkbox"] {
  accent-color: #7c5cfc;
  cursor: pointer;
  flex-shrink: 0;
  height: 15px;
  width: 15px;
}
.ms-im-module-ico { font-size: 15px; flex-shrink: 0; }
.ms-im-module-name { flex: 1; }
.ms-im-perm-sel {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.10));
  border-radius: 6px;
  color: var(--ink2, #6b7280);
  font-family: inherit;
  font-size: 11px;
  outline: none;
  padding: 4px 6px;
}
.ms-im-perm-sel:disabled { opacity: .4; }
.ms-im-perm-sel:not(:disabled):focus { border-color: #7c5cfc; }

/* ── Tree sharing section ───────────────────────────────────────────────── */
.ms-im-tree-section {
  background: rgba(124,92,252,.05);
  border: 1px solid rgba(124,92,252,.15);
  border-radius: 10px;
  padding: 12px 14px;
}
.ms-im-tree-section--info {
  background: rgba(16,185,129,.05);
  border-color: rgba(16,185,129,.2);
}
.ms-im-tree-section--info .ms-im-tree-hd { color: #065f46; }
.ms-im-person-card {
  background: var(--surface2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
}
.ms-im-person-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #111827);
}
.ms-im-person-card-email {
  font-size: 12px;
  color: var(--ink2, #6b7280);
  margin-top: 2px;
}
.ms-im-tree-hd {
  align-items: center;
  color: #6d4fba;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 5px;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ms-im-tree-desc {
  color: var(--ink2, #6b7280);
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 10px;
}
.ms-im-tree-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ms-im-tree-opt {
  align-items: center;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, rgba(0,0,0,.09));
  border-radius: 8px;
  color: var(--ink2, #6b7280);
  cursor: pointer;
  display: flex;
  font-size: 12.5px;
  gap: 8px;
  padding: 7px 10px;
  transition: border-color .14s, color .14s;
}
.ms-im-tree-opt input[type="radio"] {
  accent-color: #7c5cfc;
  cursor: pointer;
  flex-shrink: 0;
}
.ms-im-tree-opt.is-active {
  border-color: #a78bfa;
  color: var(--ink, #111827);
  font-weight: 500;
}

/* ── Collapsible message ────────────────────────────────────────────────── */
.ms-im-msg-details summary {
  color: var(--ink2, #6b7280);
  cursor: pointer;
  font-size: 12px;
  list-style: none;
  padding: 4px 0;
  user-select: none;
}
.ms-im-msg-details summary::-webkit-details-marker { display: none; }
.ms-im-msg-details summary::before { content: '+ '; }
.ms-im-msg-details[open] summary::before { content: '− '; }
.ms-im-msg-ta { margin-top: 6px; }

/* ── Guest notice ───────────────────────────────────────────────────────── */
.ms-im-guest-notice {
  align-items: flex-start;
  background: rgba(239,68,68,.06);
  border: 1px solid rgba(239,68,68,.20);
  border-radius: 10px;
  display: flex;
  font-size: 12.5px;
  gap: 8px;
  line-height: 1.5;
  margin-bottom: 14px;
  padding: 10px 12px;
  color: #7f1d1d;
}
.ms-im-guest-notice svg { color: #dc2626; flex-shrink: 0; margin-top: 2px; }
.ms-im-guest-notice strong { color: #991b1b; }

/* ── Error ──────────────────────────────────────────────────────────────── */
.ms-im-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  color: #b91c1c;
  display: none;
  font-size: 12px;
  padding: 8px 11px;
}

/* ── Actions ────────────────────────────────────────────────────────────── */
.ms-im-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
.ms-im-btn-cancel {
  background: none;
  border: 1px solid var(--border, rgba(0,0,0,.10));
  border-radius: 8px;
  color: var(--ink2, #6b7280);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
}
.ms-im-btn-cancel:hover { background: var(--surface2, #f0f0f5); }
.ms-im-btn-send {
  align-items: center;
  background: linear-gradient(135deg, #fb923c, #ec4899, #a855f7);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  padding: 8px 16px;
  transition: filter .15s ease;
}
.ms-im-btn-send:hover:not(:disabled) { filter: brightness(1.07); }
.ms-im-btn-send:disabled { cursor: not-allowed; filter: brightness(.85); }

/* ── Success state ──────────────────────────────────────────────────────── */
.ms-im-success {
  align-items: center;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  text-align: center;
  /* display:flex applied inline via JS to avoid conflict with style.display */
}
.ms-im-success svg { color: #16a34a; }
.ms-im-success p              { color: var(--ink, #111827); font-size: 15px; font-weight: 600; margin: 0; }
.ms-im-success .ms-im-success-email { color: var(--ink2, #6b7280); font-size: 13px; }

/* ── Dark mode ──────────────────────────────────────────────────────────── */
html[data-dark='true'] .ms-im-card {
  background: var(--surface, #1e1e2e);
  border-color: rgba(255,255,255,.08);
}
html[data-dark='true'] .ms-im-input,
html[data-dark='true'] .ms-im-select,
html[data-dark='true'] .ms-im-textarea,
html[data-dark='true'] .ms-im-perm-sel {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  color: #f8fafc;
  /* Tell the browser to render native dropdown list in dark OS mode */
  color-scheme: dark;
}
html[data-dark='true'] .ms-im-type-card { background: rgba(255,255,255,.04); }
html[data-dark='true'] .ms-im-modules-list { background: rgba(255,255,255,.03); }
html[data-dark='true'] .ms-im-tree-section { background: rgba(124,92,252,.08); }

@media (max-width: 480px) {
  .ms-im-card,
  .ms-im-card--wide { border-radius: 16px 16px 0 0; align-self: flex-end; width: 100%; max-width: 100%; }
  #ms-invite-modal-root { align-items: flex-end; }
  #ms-manage-modal-root { align-items: flex-end; }
  .ms-im-type-grid { grid-template-columns: 1fr; }
}

/* ─── Manage access modal (ms-ma-*) ─────────────────────────────────────── */

#ms-manage-modal-root {
  position: fixed; inset: 0; z-index: 1600;
  display: flex; align-items: center; justify-content: center;
}

.ms-ma-list {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 60px;
}

.ms-ma-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(17,24,56,.08));
  border-radius: 10px;
}

.ms-ma-person { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ms-ma-name  { font-size: 14px; font-weight: 600; color: var(--ink, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-ma-email { font-size: 12px; color: var(--ink2, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ms-ma-perm-sel {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border, rgba(17,24,56,.1));
  border-radius: 6px;
  background: var(--surface2, #f7f8fc);
  color: var(--ink, #111827);
  cursor: pointer;
}
.ms-ma-perm-placeholder { width: 80px; }

.ms-ma-revoke {
  color: var(--danger, #dc2626);
  opacity: .65;
  padding: 4px 6px;
  border-radius: 6px;
}
.ms-ma-revoke:hover { opacity: 1; background: #fef2f2; }

.ms-ma-empty {
  display: flex; align-items: center; gap: 10px;
  padding: 20px; color: var(--ink2, #6b7280); font-size: 14px;
  background: var(--surface2, #f7f8fc); border-radius: 10px;
}
.ms-ma-empty svg { opacity: .4; flex-shrink: 0; }

.ms-ma-error {
  display: none;
  font-size: 13px; color: var(--danger, #dc2626);
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 8px; padding: 8px 12px; margin-bottom: 10px;
}

.ms-ma-hint {
  font-size: 13px; color: var(--ink2, #6b7280);
  margin-top: 14px; text-align: center;
}
.ms-ma-invite-link {
  background: none; border: none; padding: 0;
  color: var(--accent, #7c5cfc); text-decoration: underline;
  cursor: pointer; font-size: inherit;
}
.ms-ma-invite-link:hover { color: var(--accent, #7c5cfc); opacity: .75; }

@media (max-width: 600px) {
  .ms-ma-row {
    grid-template-columns: 32px 1fr auto auto;
    flex-wrap: wrap;
  }
  .ms-ma-perm-sel { display: none; } /* permission change via full modal on mobile */
}

html[data-dark='true'] .ms-ma-perm-sel { background: #2a2d3a; border-color: rgba(255,255,255,.1); color: #f1f5f9; }
html[data-dark='true'] .ms-ma-row { background: var(--surface, #1e2130); border-color: rgba(255,255,255,.07); }
html[data-dark='true'] .ms-ma-empty { background: rgba(255,255,255,.04); }
html[data-dark='true'] .ms-ma-revoke:hover { background: rgba(220,38,38,.15); }
html[data-dark='true'] .ms-ma-error { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.3); }

/* ─── Settings: sharing section ─────────────────────────────────────────── */

.settings-sharing-panel { margin-top: 0; }

.settings-sharing-list {
  display: flex; flex-direction: column; gap: 10px; margin-top: 6px;
}

.settings-sharing-card {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(17,24,56,.08));
  border-radius: 10px;
}

.settings-sharing-icon { font-size: 20px; line-height: 1; }

.settings-sharing-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.settings-sharing-name { font-size: 14px; font-weight: 600; color: var(--ink, #111827); }
.settings-sharing-state {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--ink2, #6b7280);
}
.settings-sharing-state.st-shared  { color: #16a34a; }
.settings-sharing-state.st-pending { color: #ca8a04; }
.settings-sharing-state.st-private { color: var(--ink2, #6b7280); }
.settings-sharing-state svg { flex-shrink: 0; }

.settings-sharing-actions {
  display: flex; gap: 6px; align-items: center; flex-shrink: 0;
}

@media (max-width: 600px) {
  .settings-sharing-card {
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
  }
  .settings-sharing-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

html[data-dark='true'] .settings-sharing-card {
  background: var(--surface, #1e2130);
  border-color: rgba(255,255,255,.07);
}

/* ═══ PRANIE — Laundry pricing sections ══════════════════════════════════════ */

.cs-laundry-pricing { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }

/* Two-column grid for cennik + monthly stats */
.cs-lp-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 700px) { .cs-lp-grid { grid-template-columns: 1fr; } }

/* Generic laundry pricing card */
.cs-lp-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; overflow: hidden;
  min-width: 0;
}
.cs-lp-card-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.cs-lp-card-title { font-size: .82rem; font-weight: 700; color: var(--ink); }
.cs-lp-provider   { font-size: .72rem; color: var(--ink3); margin-left: auto; }

/* Current contract bar */
.cs-lp-contract-bar {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 12px 14px 8px; border-bottom: 1px solid var(--border);
}
.cs-lp-price-big  { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.cs-lp-price-lbl  { font-size: .78rem; color: var(--ink2); }
.cs-lp-valid      { font-size: .7rem; color: var(--ink3); margin-left: auto; }

/* Item rows */
.cs-lp-items { display: flex; flex-direction: column; }
.cs-lp-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px; border-bottom: 1px solid var(--border);
  font-size: .8rem;
}
.cs-lp-item:last-child { border-bottom: none; }
.cs-lp-item-label { color: var(--ink2); }
.cs-lp-item-price { font-weight: 700; color: var(--ink); }

.cs-lp-note {
  font-size: .72rem; color: var(--ink3); font-style: italic;
  padding: 8px 14px; margin: 0; border-top: 1px solid var(--border);
  background: var(--surface2);
}

/* Monthly stats card */
.cs-lp-card--stats { }
.cs-lp-stat-rows { display: flex; flex-direction: column; }
.cs-lp-stat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.cs-lp-stat:last-of-type { border-bottom: none; }
.cs-lp-stat-lbl { color: var(--ink2); }
.cs-lp-stat-val { font-weight: 700; color: var(--ink); }
.cs-lp-stat--total .cs-lp-stat-lbl { font-weight: 700; color: var(--ink); }
.cs-lp-stat--total .cs-lp-stat-val { font-size: 1.05rem; color: var(--ink); }

.cs-lp-saving {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 9px 14px; font-size: .78rem; color: #15803d;
  background: #f0fdf4; border-top: 1px solid #bbf7d0;
}
.cs-lp-saving strong { font-weight: 700; }

/* Price history table */
/* Cols: Date | Price | Change | Note */
.cs-lp-hist-table { display: flex; flex-direction: column; }
.cs-lp-hist-head,
.cs-lp-hist-row {
  display: grid;
  grid-template-columns: 100px 100px 90px 1fr;
  align-items: center;
}
.cs-lp-hist-head { padding: 6px 4px; background: var(--surface2); border-bottom: 1px solid var(--border); }
.cs-lp-hist-row  { border-bottom: 1px solid var(--border); transition: background .1s; }
.cs-lp-hist-row:last-child { border-bottom: none; }
.cs-lp-hist-row:hover { background: var(--surface2); }
.cs-lp-hist-row--current { background: var(--layf-accent-soft-bg, var(--accent-lt)); }
.cs-lp-hist-row--current:hover { background: var(--layf-accent-soft-bg, var(--accent-lt)); }

.cs-lph-cell {
  padding: 9px 10px; font-size: .8rem; color: var(--ink2);
}
.cs-lp-hist-head .cs-lph-cell {
  font-size: .63rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink3);
}
.cs-lph-price strong { color: var(--ink); }
.cs-lph-note  { color: var(--ink3); font-size: .75rem; }

.cs-lp-change { font-size: .78rem; font-weight: 700; border-radius: 6px; padding: 1px 7px; }
.cs-lp-change--up   { background: #fee2e2; color: #b91c1c; }
.cs-lp-change--down { background: #dcfce7; color: #15803d; }

/* Competitor comparison table */
/* Cols: Name | Price | Date | Note */
.cs-lp-compare-table { display: flex; flex-direction: column; }
.cs-lp-comp-head,
.cs-lp-comp-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px 1fr;
  align-items: center;
}
.cs-lp-comp-head { padding: 6px 4px; background: var(--surface2); border-bottom: 1px solid var(--border); }
.cs-lp-comp-row  { border-bottom: 1px solid var(--border); transition: background .1s; }
.cs-lp-comp-row:last-child { border-bottom: none; }
.cs-lp-comp-row:hover { background: var(--surface2); }
.cs-lp-comp-row--current {
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  font-weight: 600;
}
.cs-lp-comp-row--current:hover { background: var(--layf-accent-soft-bg, var(--accent-lt)); }

.cs-lpc-cell {
  padding: 9px 10px; font-size: .8rem; color: var(--ink2);
  overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.cs-lp-comp-head .cs-lpc-cell {
  font-size: .63rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink3);
}
.cs-lpc-name  { display: flex; align-items: center; gap: 6px; color: var(--ink); }
.cs-lpc-price { font-weight: 700; color: var(--ink); }
.cs-lpc-note  { font-size: .75rem; color: var(--ink3); }

.cs-lp-current-badge {
  display: inline-flex; font-size: .6rem; font-weight: 800; letter-spacing: .04em;
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  color: var(--accent); border: 1px solid var(--layf-accent-border, var(--accent));
  border-radius: 5px; padding: 1px 6px; flex-shrink: 0;
}
.cs-lp-best-price { color: #15803d; }
.cs-lp-offer-delete {
  margin-left: 6px;
  padding-inline: 8px;
}

@media (max-width: 580px) {
  .cs-lp-hist-head,
  .cs-lp-hist-row   { grid-template-columns: 88px 80px 76px 1fr; }
  .cs-lp-comp-head,
  .cs-lp-comp-row   { grid-template-columns: 1fr 70px 80px; }
  .cs-lpc-note      { display: none; }
  .cs-lpc-name      { flex-wrap: wrap; }
}

/* ── Global z-index stacking order (final enforcement) ──────────────────────
   fh-dialog-layer (openConfirm/openAlert) must sit above ALL module modals.
   Module backdrops: 900–1000. Dialog layer: 10000. Topbar: no fixed z-index.
   ─────────────────────────────────────────────────────────────────────────── */
.fh-dialog-layer {
  z-index: 10000 !important;
}

/* Layf shell proportion contract.
   This final layer normalizes legacy module-level max-width overrides so
   laptop views share one centered rhythm while Dashboard keeps its briefing
   canvas exception. */
.page-wrap.module-page:not(.dashboard-page) {
  --layf-page-max: var(--layf-page-max-standard);
  box-sizing: border-box !important;
  width: min(100%, var(--layf-page-max-standard)) !important;
  max-width: var(--layf-page-max-standard) !important;
  margin-inline: auto !important;
  padding: var(--layf-page-gutter) !important;
}

.dashboard-page {
  --layf-page-max: var(--layf-page-max-dashboard);
  width: min(100%, var(--layf-page-max-dashboard)) !important;
  max-width: var(--layf-page-max-dashboard) !important;
  margin-inline: auto !important;
}

.page-wrap.module-page > .module-header,
.page-wrap.module-page > .module-action-bar,
.page-wrap.module-page > .module-page-content {
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 860px) {
  .page-wrap.module-page:not(.dashboard-page) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Sprint 14: typography and mobile module-header enforcement.
   This closes legacy pockets where embedded modules used serif/heavy local
   headers or mobile media queries pushed module titles into a different rhythm. */
.page-wrap.module-page :where(
  [class$='-title'],
  [class*='-title '],
  [class*='-title--'],
  .page-title,
  .module-hero-title,
  .ftree-title,
  .ftree-empty h2,
  .ev-page-title,
  .svc-page-title,
  .agreements-title-copy h1,
  .health-tab-title,
  .insp-round-name,
  .sprint-editor h2,
  .sprints-empty h2
) {
  font-family: var(--font-body) !important;
  letter-spacing: 0 !important;
}

.page-wrap.module-page :where(
  [class$='-title'],
  [class*='-title '],
  [class*='-title--']
) {
  font-weight: var(--weight-section-title) !important;
}

.page-wrap.module-page :where(.page-title, .ftree-title) {
  font-size: var(--type-page-title) !important;
  font-weight: var(--weight-page-title) !important;
  line-height: 1.08 !important;
}

.dashboard-page :where(h1, .page-title) {
  letter-spacing: 0 !important;
}

.page-wrap.module-page :where(
  h1,
  .ev-page-title,
  .ev-hero-title,
  .svc-page-title,
  .agreements-title-copy h1
) {
  font-size: var(--type-page-title) !important;
  font-weight: var(--weight-page-title) !important;
  line-height: 1.08 !important;
}

.page-wrap.module-page :where(
  h2,
  h3,
  .section-title,
  .ev-section-title,
  .ev-modal-title,
  .svc-list-title,
  .svc-modal-title,
  .svc-form-section-title,
  .planner-section-title,
  .planner-warm-section-head h2,
  .planner-warm-pinned-title h2,
  .health-tab-title,
  .people-side-title,
  .ftree-panel-name,
  .insp-round-name,
  .insp-modal-apt-label,
  .insp-modal-item-label,
  .insp-summary-title,
  .insp-tpl-name,
  .cs-modal-title,
  .cs-side-card-title,
  .cs-lp-card-title,
  .sprint-editor h2,
  .sprints-empty h2
) {
  font-family: var(--font-body) !important;
  font-weight: var(--weight-section-title) !important;
  letter-spacing: 0 !important;
}

.page-wrap.module-page :where(
  .ftree-card-name,
  .ev-card-title,
  .ev-task-title,
  .svc-cell-title,
  .svc-upcoming-title,
  .agreement-item-title,
  .docs-doc-row-title,
  .docs-mvp-file-title,
  .pet-tl-title,
  .sv2-disc-header-name,
  .sv2-rt-title,
  .sv2-goal-title,
  .sv2-sidebar-card-title,
  .insp-apt-number,
  .cs-extra-task-title,
  .cs-campaign-title,
  .cs-zadania-title,
  .sprint-row strong
) {
  font-family: var(--font-body) !important;
  font-weight: var(--weight-card-title) !important;
  letter-spacing: 0 !important;
}

.family-page .family-embedded-view .page-wrap.module-page {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.family-page .family-embedded-view .module-header {
  display: none !important;
}

/* Family module — prevent mobile horizontal overflow.
   Grid children default to min-width:auto which can expand the track beyond
   the container. overflow:hidden on the rail sets min-width:0 (CSS spec) and
   clips any tab button content that would otherwise push the page wider. */
.family-warm-page .family-layout > * {
  min-width: 0;
}

.family-warm-page .family-rail {
  overflow: hidden;
}

.family-page .ftree-outer {
  background: transparent !important;
}

.family-page .ftree-header {
  padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.6vw, 34px) 16px !important;
}

.ftree-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ftree-recipient-note {
  font-size: 12.5px;
  color: var(--ink2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* ── Pets — unified health timeline (Stage 1 redesign) ─────────────────────── */
.pets-page .pet-tl-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Pastel icon chip leading each timeline entry (the dot is hidden in this module) */
.pets-page .pet-tl-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pets-page .pet-tl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.pets-page .pet-tl-icon.is-danger  { background: color-mix(in srgb, var(--danger) 14%, transparent);  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.pets-page .pet-tl-icon.is-warning { background: color-mix(in srgb, var(--warning) 16%, transparent); border-color: color-mix(in srgb, var(--warning) 32%, transparent); }
.pets-page .pet-tl-icon.is-ok,
.pets-page .pet-tl-icon.is-done    { background: color-mix(in srgb, var(--positive) 13%, transparent); border-color: color-mix(in srgb, var(--positive) 28%, transparent); }
.pets-page .pet-tl-title { flex: 1; min-width: 0; }

/* Done (history) entries read as muted/completed */
.pets-warm-page .pet-tl-entry.is-done { border-left-color: color-mix(in srgb, var(--positive) 55%, var(--border)); opacity: .92; }
.pets-page .pet-days-badge.is-done {
  background: color-mix(in srgb, var(--positive) 14%, transparent);
  color: color-mix(in srgb, var(--positive) 78%, var(--ink));
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10.5px;
  white-space: nowrap;
}
.pets-page .pet-tl-note { color: var(--ink2); }

/* ── Pets timeline compact refinements ────────────────────────────────── */

/* 1. Lighten shadow on active entries (main.css had 0 10px 24px = too heavy) */
.pets-warm-page .pet-tl-entry {
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 5%, transparent);
}

/* 2. Done/history entries: flat, muted, tighter padding */
.pets-warm-page .pet-tl-entry.is-done {
  box-shadow: none;
  opacity: .82;
  padding: 9px 14px;
}

.pets-warm-page .pet-tl-entry.is-done .pet-tl-title {
  font-size: 13px;
  font-weight: 700;
}

/* 3. Actions hidden by default, smooth-reveal on hover / keyboard focus */
.pets-warm-page .pet-tl-actions {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height .2s ease, opacity .15s ease, margin-top .18s ease;
}

.pets-warm-page .pet-tl-entry:hover .pet-tl-actions,
.pets-warm-page .pet-tl-entry:focus-within .pet-tl-actions {
  margin-top: 10px;
  max-height: 60px;
  opacity: 1;
  pointer-events: auto;
}

/* "Dziś" divider between future and past */
.pets-page .pet-tl-today {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pets-page .pet-tl-today::before,
.pets-page .pet-tl-today::after {
  content: '';
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.pets-page .pet-tl-today span { white-space: nowrap; }
.pets-page .pet-tl-emptyline { padding: 6px 2px 2px; font-size: 13px; }

/* Identity card: subtle microchip line + per-pet ghost actions */
.pets-page .pet-profile-foot { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.pets-page .pet-chip-line { margin: 0; font-size: 12px; color: var(--ink3, var(--muted)); }
.pets-page .pet-chip-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink2); letter-spacing: .02em; }
.pets-page .pet-profile-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.pets-page .pet-profile-actions .pet-action-danger { color: var(--danger); }
.pets-page .pet-profile-actions .pet-action-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.pets-page .pet-profile-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.pets-page .pet-profile-actions .pet-action-ico { font-size: 13px; line-height: 1; }

/* Pet edit modal: trim the crop editor so the form isn't unnecessarily tall */
.pets-form-card .pet-crop-frame { width: min(100%, 270px) !important; }
.pets-form-card .pet-photo-crop-editor { padding: 14px !important; gap: 10px !important; }
.pets-form-card .pet-crop-stage { gap: 8px; }

/* ── Pets unified health-event modal — type chips ───────────────────────────── */
.pet-event-type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 4px;
}
.pet-event-type-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink2);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  user-select: none;
  white-space: nowrap;
}
.pet-event-type-chip input[type="radio"] { display: none; }
.pet-event-type-chip:has(input:checked) {
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  border-color: var(--layf-accent-border, var(--accent));
  color: var(--ink);
  font-weight: 650;
}
.pet-event-date-hint {
  color: var(--ink3, var(--muted));
  font-size: 11.5px;
  line-height: 1.4;
  margin-top: -4px;
}

/* ── Pets term modal — intent-based (one-off vs recurring) ─────────────────── */
.pet-term-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pet-term-mode-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
.pet-term-mode-opt span { display: flex; flex-direction: column; line-height: 1.25; }
.pet-term-mode-opt span strong { font-size: 13.5px; color: var(--ink); }
.pet-term-mode-opt span small { font-size: 11.5px; color: var(--ink3, var(--muted)); }
.pet-term-mode-opt input { accent-color: var(--accent); flex-shrink: 0; }
.pet-term-mode-opt:has(input:checked) {
  border-color: var(--layf-accent-border, var(--accent));
  background: var(--layf-accent-soft-bg, var(--accent-lt));
}
.pet-term-cyclic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pet-field-hint { margin: 6px 0 0; font-size: 12px; color: var(--ink3, var(--muted)); }
.pet-term-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }

/* ── Pets module header: plain title (no card bg/border) like other modules ─── */
.pets-page .pets-module-header {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 2px 0 14px !important;
  align-items: start;
}

/* ── Pets profile card: per-pet actions as a horizontal ghost row ──────────── */
.pets-page .pets-overview-profile-card .pet-profile-actions {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.pets-page .pets-overview-profile-card .pet-profile-actions .btn {
  width: auto;
}
.pets-page .pets-overview-profile-card .pet-profile-foot { margin-top: 10px; }

/* ── Pets profile card — large photo left column + content right ──────────── */
.pets-page .pets-overview-profile-card {
  display: grid !important;
  grid-template-columns: 200px 1fr;
  align-items: stretch;
  padding: 0 !important;
  gap: 0;
  overflow: hidden;
  min-height: 200px;
}

/* Full-height photo column */
.pets-page .pets-overview-profile-card .pet-profile-avatar {
  position: relative;
  width: 200px;
  min-height: 200px;
  border-radius: 0;
  overflow: hidden;
  flex-shrink: 0;
  align-self: stretch;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface2, #f0f1f5));
  display: flex;
  align-items: center;
  justify-content: center;
}
.pets-page .pets-overview-profile-card .pet-profile-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pet-photo-x, 50%) var(--pet-photo-y, 50%);
  border-radius: 0;
}
.pets-page .pets-overview-profile-card .pet-avatar-emoji {
  font-size: 72px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

/* Right column: stack name → breed → foot → stats → actions */
.pets-page .pets-overview-profile-card .pet-profile-main {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  gap: 0;
  min-width: 0;
}
.pets-page .pets-overview-profile-card .pet-profile-name {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
}
.pets-page .pets-overview-profile-card .pet-profile-foot { margin-top: 8px; }
.pets-page .pets-overview-profile-card .pet-profile-actions { margin-top: auto; padding-top: 12px; }

/* Stats — compact inline row inside the right column */
.pets-page .pet-profile-stats {
  display: flex;
  gap: 0;
  margin-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  padding: 10px 0;
}
.pets-page .pet-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 14px 0 0;
  text-align: left;
}
.pets-page .pet-stat-tile + .pet-stat-tile {
  border-left: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  padding-left: 14px;
}
.pets-page .pet-stat-tile strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 850;
  line-height: 1;
}
.pets-page .pet-stat-tile small {
  color: var(--ink2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
}

/* ── Pets Stage 2: one card language across all tabs ───────────────────────── */
.pets-page .pet-doc-card,
.pets-page .pet-vet-clinic-card,
.pets-page .pet-contact-card,
.pets-page .pet-vet-doctor-card,
.pets-page .pet-notes {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pets-page .pet-doc-card:hover,
.pets-page .pet-vet-clinic-card:hover,
.pets-page .pet-contact-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border)) !important;
  box-shadow: 0 8px 22px rgba(17, 24, 56, 0.07);
}

/* Clickable cover thumb (button variant) */
button.pet-doc-card-thumb {
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
button.pet-doc-card-thumb img { transition: transform .2s ease; }
button.pet-doc-card-thumb:hover img { transform: scale(1.04); }

/* Pets booklet — paged reader */
.pets-booklet-viewer {
  max-width: min(500px, 92vw) !important;
  width: min(500px, 92vw) !important;
  align-self: center !important; /* override mobile align-items:stretch so card doesn't fill full viewport */
}
.pets-booklet-page-view {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111827;
  overflow: hidden;
  /* Square container — guarantees any image fits at any rotation (0°/90°/180°/270°) with no clipping.
     All pages render at the same size regardless of photo aspect ratio. */
  aspect-ratio: 1;
  width: 100%;
  max-height: min(56vh, 420px);
}
.pets-booklet-page-view img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pets-booklet-page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px 2px;
  gap: 12px;
}
.pets-booklet-page-count {
  color: var(--ink2);
  font-size: 13px;
  font-weight: 500;
}
.pets-booklet-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pets-booklet-nav-btn:hover:not(:disabled) {
  background: var(--surface2);
  border-color: var(--accent);
}
.pets-booklet-nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.pets-booklet-nav-center {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pets-booklet-rotate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 16px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  flex-shrink: 0;
}
.pets-booklet-rotate-btn:hover {
  background: var(--surface2);
  border-color: var(--accent);
  color: var(--ink);
}

/* Consistent pastel icon chips (thumbs / avatars) */
.pets-page .pet-doc-card-thumb,
.pets-page .pet-vet-clinic-icon,
.pets-page .pet-contact-avatar {
  background: var(--layf-accent-soft-bg, color-mix(in srgb, var(--accent) 10%, transparent)) !important;
  color: var(--accent);
  border-radius: 12px;
}

/* Consistent empty state across tabs */
.pets-page .pet-doc-empty {
  background: var(--surface) !important;
  border: 1px dashed var(--border) !important;
  border-radius: 14px !important;
  text-align: center;
  padding: 32px 20px;
}
.pets-page .pet-doc-empty-icon { font-size: 38px; opacity: .85; }

/* Section heads: same rhythm everywhere */
.pets-page .pets-panel-head h3 { font-weight: 800; }
.pets-page .pets-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.pet-care-head-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* Status card tone colors — override main.css accent-for-all */
.pets-warm-page .pet-status-card.is-danger strong { color: var(--danger) !important; -webkit-text-fill-color: var(--danger) !important; }
.pets-warm-page .pet-status-card.is-warning strong {
  background: var(--layf-accent-gradient, linear-gradient(90deg,#fb923c,#ec4899,#7c3aed)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ── Pets — Care tab ──────────────────────────────────────────────────────── */
.pets-warm-page .pets-care-wrap { display: flex; flex-direction: column; gap: 0; }
.pets-warm-page .pet-care-readiness { font-size: 12px; color: var(--ink2); margin: 2px 0 0; }
.pets-warm-page .pet-care-ready-badge { color: var(--positive); font-weight: 700; margin-left: 4px; }

/* Grid of cards */
.pets-warm-page .pet-care-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.pets-warm-page .pet-care-card {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 14px;
  padding: 16px;
}
.pets-warm-page .pet-care-card--wide {
  grid-column: 1 / -1;
}

/* Card header */
.pets-warm-page .pet-care-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.pets-warm-page .pet-care-card-head strong { font-size: 13px; font-weight: 700; color: var(--ink); }
.pets-warm-page .pet-care-card-spacer { flex: 1; }
.pets-warm-page .pet-care-icon { font-size: 15px; line-height: 1; }
.pets-warm-page .pet-care-section-count {
  font-size: 10px; color: var(--ink2); background: var(--surface2);
  padding: 1px 6px; border-radius: 10px; font-weight: 600;
}

/* Info lines inside cards — no box, just label+value rows */
.pets-warm-page .pet-care-lines { display: flex; flex-direction: column; gap: 10px; }
.pets-warm-page .pet-care-line { display: flex; flex-direction: column; }
.pets-warm-page .pet-care-line span {
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink2); margin-bottom: 2px;
}
.pets-warm-page .pet-care-line strong {
  font-size: 13px; font-weight: 400; color: var(--ink); line-height: 1.4; white-space: pre-wrap;
}
.pets-warm-page .pet-care-line.is-strong strong { font-weight: 600; color: var(--ink); }

.pets-warm-page .pet-care-missing {
  font-size: 12px; color: var(--ink3); display: flex; align-items: center; gap: 8px; margin: 0;
}
.pets-warm-page .pet-care-missing-btn {
  font-size: 11px; color: var(--accent); background: none; border: none;
  padding: 0; cursor: pointer; text-decoration: underline; flex-shrink: 0;
}
.pets-warm-page .pet-care-gear-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pets-warm-page .pet-care-gear-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  padding: 4px 10px; background: var(--surface2); border-radius: 20px; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.pets-warm-page .pet-care-gear-chip img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.pets-warm-page .pet-care-food-photo { margin-top: 10px; max-width: 110px; border-radius: 8px; }
@media (max-width: 600px) {
  .pets-warm-page .pet-care-grid { grid-template-columns: 1fr; }
  .pets-warm-page .pet-care-card--wide { grid-column: 1; }
}

/* ── Pets — photo edit button: white icon only, no background ───────────────── */
.pets-warm-page .pet-photo-edit {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* ── Pets — hero card: absolute edit pill (inside pet-profile-main) ─────────── */
.pets-warm-page .pets-overview-profile-card .pet-profile-main {
  position: relative;
}
.pets-warm-page .pet-hero-edit-pill {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 5px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pets-warm-page .pet-hero-edit-pill:hover {
  background: var(--surface2);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 20%, transparent);
}

/* ── Pets — hero meta row (owner + chip as subtle pills) ───────────────────── */
.pets-warm-page .pet-profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.pets-warm-page .pet-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  color: var(--ink2);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pets-warm-page .pet-meta-chip--mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: .03em;
}

/* ── Pets — stat tile sub-label (birth date under age) ─────────────────────── */
.pets-warm-page .pet-stat-tile .pet-stat-sub {
  display: block;
  font-size: 11px;
  color: var(--ink2);
  line-height: 1.3;
  margin-top: 1px;
}

/* ── Pets — tab bar: horizontal scroll on mobile ───────────────────────────── */
.pets-warm-page .pet-tab-bar {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pets-warm-page .pet-tab-bar::-webkit-scrollbar { display: none; }
.pets-warm-page .pet-tab-chip { flex-shrink: 0; }

/* ── Pets — Zdrowie full-width add bar ─────────────────────────────────────── */
.pets-warm-page .pet-tl-add-bar {
  padding: 12px 16px;
}
.pets-warm-page .pet-tl-add-bar .btn {
  width: 100%;
}

/* ── Pets — edit modal danger zone ────────────────────────────────────────── */
.pet-danger-zone {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
}

/* ── Pets — mobile readability (compact profile + reachable timeline) ──────── */
@media (max-width: 640px) {
  /* Header: title left, primary action top-right (app-wide pattern) */
  .pets-page .pets-module-header {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }
  .pets-page .pets-module-header-main { flex: 1; min-width: 0; }
  .pets-page .pets-module-header-actions { flex-shrink: 0; }

  /* Profile card: same two-column layout, just smaller photo column */
  .pets-page .pets-overview-profile-card {
    grid-template-columns: 120px 1fr;
    min-height: 0;
  }
  .pets-page .pets-overview-profile-card .pet-profile-avatar {
    width: 120px;
    min-height: 160px;
  }
  .pets-page .pets-overview-profile-card .pet-profile-main { padding: 14px 14px 12px; }
  .pets-page .pets-overview-profile-card .pet-profile-name { font-size: clamp(20px, 6vw, 26px); }
  .pets-page .pets-overview-profile-card .pet-profile-actions { padding-top: 8px; margin-top: 0; }
  .pets-page .pet-profile-stats { margin-top: 10px; }
  .pets-page .pet-stat-tile strong { font-size: 14px; }

  /* Status cards: compact 3-up row instead of three full-screen tiles, so the
     health timeline is reachable without scrolling past a wall of stats. */
  .pets-page .pet-status-cards { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
  .pets-page .pet-status-card {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 0;
    padding: 10px 10px 12px;
  }
  .pets-page .pet-status-card .pet-status-icon { grid-row: auto; width: 28px; height: 28px; font-size: 13px; }
  .pets-page .pet-status-card .pet-status-label { font-size: 10.5px; line-height: 1.2; }
  .pets-page .pet-status-card strong { font-size: 16px; line-height: 1.1; }
  .pets-page .pet-status-card small { display: none; }


  /* Tabs + timeline filters: one swipeable row instead of an uneven wrap */
  .pets-page .pet-tab-bar,
  .pets-page .pets-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .pets-page .pet-tab-bar::-webkit-scrollbar,
  .pets-page .pets-filters::-webkit-scrollbar { display: none; }
  .pets-page .pet-tab-bar .pet-tab-chip,
  .pets-page .pets-filters .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .pets-page .pets-filters { padding-right: 12px; }

  /* On mobile: actions always visible — no hover state on touch screens */
  .pets-warm-page .pet-tl-actions {
    margin-top: 10px;
    max-height: none;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    transition: none;
  }
}

/* One-off mode: hide the recurrence-only fields entirely */
.pets-form-card[data-pet-form="term"]:has(input[name="termMode"][value="once"]:checked) .pet-term-cyclic,
.pets-form-card[data-pet-form="health-event"]:has(input[name="termMode"][value="once"]:checked) .pet-term-cyclic {
  display: none;
}

@media (max-width: 560px) {
  .pet-term-mode,
  .pet-term-cyclic-grid,
  .pet-term-checks { grid-template-columns: 1fr; }
}

/* ── Pamiątki rodzinne (heritage tab) — lightweight Layf layout ──────────────── */
.keepsakes { padding: 0; }
.keepsakes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.keepsakes-intro {
  margin: 0;
  font-size: 14px;
  max-width: 60ch;
}
.keepsakes-toolbar {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.keepsakes-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 12px;
  height: 38px;
  color: var(--ink3, var(--muted));
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 320px;
}
.keepsakes-search input {
  border: 0;
  background: transparent;
  outline: none;
  width: 100%;
  font: inherit;
  color: var(--ink);
}
.keepsakes-search svg { flex-shrink: 0; }
.keepsakes-cats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.keepsakes-cat {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink2);
  font: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.keepsakes-cat:hover { border-color: var(--accent); color: var(--ink); }
.keepsakes-cat.is-active {
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  border-color: var(--layf-accent-border, var(--accent));
  color: var(--ink);
  font-weight: 600;
}
.keepsakes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.keepsakes-card {
  appearance: none;
  text-align: left;
  cursor: pointer;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.keepsakes-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 8px 22px rgba(17, 24, 56, 0.08);
}
.keepsakes-card-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.keepsakes-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.keepsakes-card-glyph { font-size: 38px; opacity: .8; }
.keepsakes-card-year {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(17, 24, 56, 0.66);
  border-radius: 999px;
  padding: 2px 9px;
  backdrop-filter: blur(4px);
}
.keepsakes-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.keepsakes-card-cat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  font-weight: 600;
}
.keepsakes-card-title { font-size: 15px; color: var(--ink); line-height: 1.3; }
.keepsakes-card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.keepsakes-card-meta { font-size: 12px; color: var(--ink3, var(--muted)); }
.keepsakes-nomatch {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink2);
  padding: 28px 16px;
}
.keepsakes-empty {
  text-align: center;
  padding: 44px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.keepsakes-empty-icon { font-size: 44px; margin-bottom: 4px; }
.keepsakes-empty h2 { margin: 0; font-size: 18px; color: var(--ink); }
.keepsakes-empty p { margin: 0 0 12px; color: var(--ink2); max-width: 42ch; }

/* Detail modal */
.keepsakes-detail-card { max-width: 560px; width: 100%; }
.keepsakes-detail-body { display: flex; gap: 18px; padding: 4px 0 8px; flex-wrap: wrap; }
.keepsakes-detail-photo {
  flex: 0 0 180px;
  aspect-ratio: 4 / 3;
  background: var(--surface2);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keepsakes-detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.keepsakes-detail-info { flex: 1 1 220px; min-width: 200px; }
.keepsakes-detail-desc { margin: 0 0 12px; color: var(--ink); line-height: 1.5; }
.keepsakes-detail-meta { margin: 0; display: grid; gap: 8px; }
.keepsakes-detail-meta > div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.keepsakes-detail-meta dt { color: var(--ink2); font-size: 13px; }
.keepsakes-detail-meta dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 500; text-align: right; }

@media (max-width: 560px) {
  .keepsakes-detail-photo { flex-basis: 100%; }
}

.family-page .ftree-title {
  margin: 0 !important;
}

.family-page .ftree-subtitle {
  color: var(--ink2) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  margin: 6px 0 0 !important;
}

@media (max-width: 760px) {
  .page-wrap.module-page:not(.dashboard-page) > .module-header {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .page-wrap.module-page:not(.dashboard-page) > .module-header .module-header-main {
    width: 100% !important;
  }

  .page-wrap.module-page:not(.dashboard-page) > .module-header .module-header-actions {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .page-wrap.module-page:not(.dashboard-page) > .module-header .module-header-actions .btn {
    width: auto !important;
  }

  .family-page .ftree-header {
    align-items: flex-start !important;
    flex-direction: column !important;
    text-align: left !important;
  }

  /* Zoom controls: move below the (now-taller) column header so they don't
     overlap the "Dodaj osobę" button. Bottom-right corner above the legend.
     Legend wraps to 2 rows on narrow screens (~60px), so 80px clears it. */
  .family-page .ftree-controls {
    top: auto;
    bottom: 80px;
  }

  /* Family tabs: equal-width pills so all 3 labels are visible without scrolling.
     Text wraps to 2 lines on the widest labels ("Pamiątki rodzinne"). */
  .family-warm-page .family-tabs {
    overflow-x: visible;
  }

  .family-warm-page .family-tabs button {
    flex: 1;
    min-width: 0;
    padding: 7px 6px;
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: center;
  }

  .page-wrap.module-page :where(
    .ev-page-header,
    .svc-header,
    .agreements-topbar,
    .health-tab-head,
    .pets-module-header
  ) {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .page-wrap.module-page :where(.ev-page-header, .svc-header, .agreements-topbar) {
    justify-content: flex-start !important;
  }
}

.sprints-page .module-page-content {
  display: grid;
  gap: 18px;
}

.sprints-layout {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

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

.sprint-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--layf-card-radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--layf-card-shadow);
}

.sprint-row:hover,
.sprint-row.is-active {
  border-color: var(--layf-accent-border, var(--border));
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
}

.sprint-row-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sprint-row-main strong,
.sprint-row-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sprint-row-main small {
  color: var(--ink2);
  font-size: 13px;
}

.sprint-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.sprint-status.is-active {
  border-color: var(--layf-accent-border, var(--border));
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  color: var(--ink);
}

.sprint-status.is-blocked {
  border-color: color-mix(in srgb, #f59e0b 34%, var(--border));
  background: color-mix(in srgb, #f59e0b 12%, var(--surface));
  color: #92400e;
}

.sprint-status.is-done {
  border-color: color-mix(in srgb, #22c55e 30%, var(--border));
  background: color-mix(in srgb, #22c55e 10%, var(--surface));
  color: #166534;
}

.sprint-editor {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.sprint-editor-head,
.sprint-editor-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sprint-editor-head h2,
.sprints-empty h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.16;
}

.sprint-editor-head span {
  color: var(--ink3);
  font-size: 12px;
  white-space: nowrap;
}

.sprint-kicker {
  margin: 0 0 4px;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}

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

.sprints-empty {
  padding: 28px;
}

.sprints-empty p {
  max-width: 560px;
  margin: 8px 0 0;
  color: var(--ink2);
}

.sprints-templates {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.sprints-templates-head {
  display: grid;
  gap: 4px;
}

.sprints-templates-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: var(--weight-section-title);
  letter-spacing: 0;
}

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

.sprints-template {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--layf-card-radius-sm);
  background: var(--surface2);
}

.sprints-template strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .94rem;
  font-weight: var(--weight-card-title);
  letter-spacing: 0;
}

.sprints-template p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: .86rem;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .sprints-layout {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 560px) {
  .sprint-row,
  .sprint-editor-head,
  .sprint-editor-actions {
    grid-template-columns: 1fr;
  }

  .sprint-row,
  .sprint-editor-head,
  .sprint-editor-actions {
    display: grid;
  }

  .sprint-editor-grid {
    grid-template-columns: 1fr;
  }
}

.wa-finance-page .module-page-content {
  display: grid;
  gap: 18px;
}

.wa-finance-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}

.wa-finance-switch,
.wa-finance-months {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 86%, var(--surface2));
  box-shadow: var(--layf-card-shadow);
}

.wa-finance-switch--wide {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.wa-finance-switch button,
.wa-finance-months button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ink2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0;
  cursor: pointer;
}

.wa-finance-switch button {
  padding: 6px 16px;
}

.wa-finance-months {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.wa-finance-months button {
  min-width: 54px;
  padding: 6px 10px;
}

.wa-finance-switch button.is-active,
.wa-finance-months button.is-active {
  border-color: var(--layf-accent-border, var(--border));
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  color: var(--ink);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--layf-accent-violet) 10%, transparent);
}

.wa-finance-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.wa-finance-kpi {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  min-height: 118px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--layf-card-radius);
  background: var(--surface);
  box-shadow: var(--layf-card-shadow);
}

.wa-finance-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--layf-accent-gradient, var(--accent));
  opacity: .72;
}

.wa-finance-kpi.is-danger::before { background: var(--danger); opacity: .45; }
.wa-finance-kpi.is-warning::before { background: var(--warning); opacity: .6; }
.wa-finance-kpi.is-positive::before { background: var(--positive); opacity: .55; }
.wa-finance-kpi.is-info::before { background: var(--info); opacity: .55; }

.wa-finance-kpi span {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 560;
}

.wa-finance-kpi strong {
  color: var(--ink);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: var(--weight-card-title);
  line-height: 1.08;
}

.wa-finance-kpi small {
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.35;
}

.wa-kpi-meter {
  display: block;
  height: 7px;
  overflow: hidden;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--surface2);
}

.wa-kpi-meter span {
  display: block;
  width: calc(var(--meter) * 100%);
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 62%, var(--surface));
}

.wa-finance-kpi.is-danger .wa-kpi-meter span { background: color-mix(in srgb, var(--danger) 52%, var(--surface)); }
.wa-finance-kpi.is-warning .wa-kpi-meter span { background: color-mix(in srgb, var(--warning) 58%, var(--surface)); }
.wa-finance-kpi.is-positive .wa-kpi-meter span { background: color-mix(in srgb, var(--positive) 54%, var(--surface)); }
.wa-finance-kpi.is-info .wa-kpi-meter span { background: color-mix(in srgb, var(--info) 54%, var(--surface)); }

.wa-executive-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: var(--layf-card-radius);
  background: color-mix(in srgb, var(--surface) 88%, var(--layf-accent-soft-bg, var(--accent-lt)));
  box-shadow: var(--layf-card-shadow);
}

.wa-executive-summary span {
  display: block;
  margin-bottom: 6px;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.wa-executive-summary strong {
  display: block;
  color: var(--ink);
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: var(--weight-page-title);
  line-height: 1.18;
}

.wa-executive-summary p {
  margin: 7px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
}

.wa-finance-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .9fr);
  gap: 16px;
}

.wa-month-process {
  padding: 18px;
  border-color: color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 18%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--layf-accent-lavender, var(--accent)) 4%), var(--surface));
}

.wa-month-process-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.wa-month-process-item {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 13px 13px 13px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface2));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.wa-month-process-item::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--warning);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 14%, transparent);
}

.wa-month-process-item.is-ready::before {
  background: var(--positive);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--positive) 12%, transparent);
}

.wa-month-process-item.is-missing::before {
  background: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 13%, transparent);
}

.wa-month-process-item.is-pending::before,
.wa-month-process-item.is-warn::before {
  background: var(--warning);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 14%, transparent);
}

.wa-month-process-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 28%, var(--border));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--ink) 7%, transparent);
}

.wa-month-process-item span {
  max-width: calc(100% - 18px);
  color: var(--ink3);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.wa-month-process-item strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: var(--weight-card-title);
  line-height: 1.12;
}

.wa-month-process-item small {
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.35;
}

.wa-finance-performance-grid {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(260px, .9fr) minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: stretch;
}

.wa-waterfall {
  grid-column: span 4;
}

.wa-finance-alerts {
  grid-column: 2;
}

.wa-year-performance,
.wa-finance-reco,
.wa-finance-alerts,
.wa-cash-gap,
.wa-occupancy-card,
.wa-breakdown,
.wa-channel-card,
.wa-waterfall,
.wa-month-main,
.wa-month-side,
.wa-table-section,
.wa-setting-card {
  padding: 18px;
}

.wa-year-performance {
  min-width: 0;
}

.wa-finance-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.wa-finance-section-head h2,
.wa-month-side h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: var(--weight-section-title);
  line-height: 1.16;
}

.wa-finance-section-head p,
.wa-month-side p,
.wa-setting-card p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
}

.wa-finance-section-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.wa-finance-section-head > span.is-warning { color: var(--danger); }
.wa-finance-section-head > span.is-positive { color: var(--positive); }

.wa-year-performance svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 244px;
  overflow: visible;
}

.wa-year-performance .wa-axis {
  stroke: var(--border);
  stroke-width: 1;
}

.wa-year-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wa-year-line.is-previous {
  stroke: color-mix(in srgb, var(--ink3) 48%, transparent);
  stroke-width: 3;
}

.wa-year-line.is-plan {
  stroke: color-mix(in srgb, var(--accent) 34%, transparent);
  stroke-width: 3;
  stroke-dasharray: 5 8;
}

.wa-year-performance .wa-active-month {
  stroke: color-mix(in srgb, var(--accent) 28%, transparent);
  stroke-width: 22;
}

.wa-year-performance circle {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2;
}

.wa-year-performance circle.is-active {
  fill: var(--accent);
}

.wa-year-hover-layer {
  pointer-events: all;
}

.wa-year-hover-point {
  outline: none;
}

.wa-year-hover-point rect {
  fill: transparent;
  stroke: none;
}

.wa-hover-guide,
.wa-hover-dot,
.wa-year-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}

.wa-hover-guide {
  stroke: color-mix(in srgb, var(--accent) 24%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

.wa-hover-dot {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 3;
}

.wa-year-tooltip .wa-tooltip-bg {
  fill: #fff !important;
  stroke: var(--layf-accent-border, #ded8ff) !important;
  stroke-width: 1;
  filter: drop-shadow(0 14px 26px rgba(15,23,42,.13));
}

.wa-year-tooltip text {
  fill: #111827;
  fill: var(--ink);
  font-family: var(--font-body);
  letter-spacing: 0;
}

.wa-tooltip-month {
  fill: var(--ink2);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.wa-tooltip-main {
  font-size: 14px;
  font-weight: 800;
}

.wa-tooltip-muted {
  fill: var(--ink2);
  font-size: 11px;
  font-weight: 650;
}

.wa-year-hover-point:hover .wa-hover-guide,
.wa-year-hover-point:focus .wa-hover-guide,
.wa-year-hover-point:hover .wa-hover-dot,
.wa-year-hover-point:focus .wa-hover-dot,
.wa-year-hover-point:hover .wa-year-tooltip,
.wa-year-hover-point:focus .wa-year-tooltip {
  opacity: 1;
}

.wa-year-legend,
.wa-year-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.wa-year-legend span,
.wa-year-summary span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink2);
  font-size: 12px;
}

.wa-year-legend i {
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.wa-year-legend i.is-previous {
  background: color-mix(in srgb, var(--ink3) 60%, transparent);
}

.wa-year-legend i.is-plan {
  background: color-mix(in srgb, var(--accent) 42%, transparent);
}

.wa-year-summary {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.wa-year-summary div {
  display: grid;
  gap: 2px;
}

.wa-year-summary strong {
  color: var(--ink);
  font-size: 13px;
}

.wa-finance-chart-months {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
  color: var(--ink3);
  font-size: 11px;
  text-align: center;
}

.wa-finance-chart-months .is-active {
  color: var(--ink);
  font-weight: 700;
}

.wa-reco-formula {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.wa-reco-formula div {
  display: grid;
  gap: 4px;
  min-height: 70px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--layf-card-radius-sm);
  background: var(--surface2);
  text-align: center;
}

.wa-reco-formula span,
.wa-reco-row span {
  color: var(--ink2);
  font-size: 12px;
}

.wa-reco-formula strong,
.wa-reco-row strong {
  color: var(--ink);
  font-size: 14px;
}

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

.wa-reco-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.wa-reco-row:last-child {
  border-bottom: 0;
}

.wa-reco-row em {
  color: var(--positive);
  font-style: normal;
  font-weight: 700;
}

.wa-reco-row em.is-warning {
  color: var(--danger);
}

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

.wa-alert-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--border));
  border-radius: var(--layf-card-radius-sm);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.wa-alert-list span {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--warning);
}

.wa-alert-list p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.wa-cash-meter {
  position: relative;
  height: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface2));
}

.wa-cash-meter span {
  display: block;
  width: calc(var(--cash-ratio) * 100%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--positive), color-mix(in srgb, var(--positive) 60%, var(--accent)));
}

.wa-cash-scale,
.wa-gauge-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.wa-cash-scale div {
  display: grid;
  gap: 3px;
}

.wa-cash-scale small,
.wa-gauge-meta span,
.wa-channel-list span,
.wa-breakdown-row span {
  color: var(--ink2);
  font-size: 12px;
}

.wa-cash-scale strong,
.wa-gauge-meta strong,
.wa-channel-list strong,
.wa-breakdown-row strong {
  color: var(--ink);
  font-size: 13px;
}

.wa-gauge {
  display: grid;
  place-items: center;
  width: 158px;
  aspect-ratio: 1;
  margin: 8px auto 10px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, var(--surface) 0 58%, transparent 59%),
    conic-gradient(var(--accent) calc(var(--gauge) * 100%), color-mix(in srgb, var(--border) 72%, transparent) 0);
  box-shadow: inset 0 0 0 1px var(--border), 0 16px 36px color-mix(in srgb, var(--accent) 10%, transparent);
}

.wa-gauge div {
  display: grid;
  gap: 3px;
  text-align: center;
}

.wa-gauge strong {
  color: var(--ink);
  font-size: 30px;
  font-weight: var(--weight-card-title);
  line-height: 1;
}

.wa-gauge span {
  color: var(--ink2);
  font-size: 12px;
}

.wa-breakdown-list,
.wa-channel-list {
  display: grid;
  gap: 10px;
}

.wa-breakdown-row {
  display: grid;
  gap: 7px;
}

.wa-breakdown-row div,
.wa-channel-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wa-breakdown-row i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface2);
}

.wa-breakdown-row i span {
  display: block;
  width: calc(var(--share) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--layf-accent-gradient, var(--accent));
}

.wa-channel-stack {
  display: flex;
  height: 18px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
}

.wa-channel-stack span {
  flex: calc(var(--share) * 100) 1 0;
  min-width: 4px;
  background: var(--layf-accent-gradient, var(--accent));
}

.wa-channel-stack span:nth-child(2) { filter: hue-rotate(38deg) saturate(.86); }
.wa-channel-stack span:nth-child(3) { filter: hue-rotate(78deg) saturate(.78); }
.wa-channel-stack span:nth-child(4) { filter: hue-rotate(128deg) saturate(.8); }
.wa-channel-stack span:nth-child(5) { filter: hue-rotate(190deg) saturate(.72); }

.wa-waterfall-bars {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  min-height: 190px;
  padding-top: 12px;
}

.wa-waterfall-step {
  display: grid;
  grid-template-rows: minmax(18px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.wa-waterfall-step i {
  display: block;
  width: 100%;
  height: calc(var(--bar) * 148px);
  min-height: 12px;
  border-radius: 12px 12px 6px 6px;
  background: var(--positive);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--positive) 14%, transparent);
}

.wa-waterfall-step.is-negative i {
  background: color-mix(in srgb, var(--danger) 82%, var(--surface));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--danger) 12%, transparent);
}

.wa-waterfall-step.is-sensitive i {
  background: color-mix(in srgb, var(--accent) 72%, var(--danger));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 16%, transparent);
}

.wa-waterfall-step span {
  overflow: hidden;
  color: var(--ink2);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-waterfall-step strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}

.wa-finance-month-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 16px;
}

.wa-edit-form {
  display: grid;
  gap: 16px;
}

.wa-close-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 18%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, var(--layf-accent-soft-bg, var(--surface2)));
}

.wa-close-hero span {
  display: block;
  margin-bottom: 6px;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.wa-close-hero h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: var(--weight-page-title);
  line-height: 1.08;
}

.wa-close-hero p {
  margin: 8px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
}

.wa-close-score {
  display: grid;
  min-width: 116px;
  justify-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.wa-close-score strong {
  color: var(--ink);
  font-size: 26px;
  font-weight: var(--weight-card-title);
  line-height: 1;
}

.wa-close-score span {
  margin: 7px 0 0;
  color: var(--ink2);
  font-size: 12px;
  text-transform: none;
}

.wa-close-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 86%, var(--surface2));
}

.wa-close-section-head {
  margin-bottom: 0;
  padding-top: 4px;
}

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

.wa-input-grid label,
.wa-field-wide {
  display: grid;
  gap: 7px;
}

.wa-input-grid span,
.wa-field-wide span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.wa-input-grid input,
.wa-field-wide textarea,
.wa-settings-form input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  outline: none;
  padding: 10px 12px;
}

.wa-field-wide textarea {
  min-height: 82px;
  resize: vertical;
}

.wa-input-grid input:focus,
.wa-field-wide textarea:focus,
.wa-settings-form input:focus {
  border-color: var(--layf-accent-border, var(--accent));
  box-shadow: 0 0 0 3px var(--layf-accent-soft-bg, var(--accent-lt));
}

.wa-input-grid input:disabled,
.wa-field-wide textarea:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: .72;
}

.wa-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wa-locked-note,
.wa-empty-note {
  border: 1px dashed var(--layf-accent-border, var(--border));
  border-radius: 14px;
  background: var(--layf-accent-soft-bg, var(--surface-2));
  color: var(--ink2);
  font-size: 13px;
  margin: 0;
  padding: 12px 14px;
}

.wa-settings-form {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}

.wa-status {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
}

.wa-status.is-closed { background: color-mix(in srgb, var(--positive) 12%, var(--surface)); color: var(--positive); }
.wa-status.is-review { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); color: #92400e; }

.wa-close-list,
.wa-month-side {
  display: grid;
  gap: 10px;
}

.wa-close-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.wa-close-list > div:last-child {
  border-bottom: 1px solid var(--border);
}

.wa-close-list span {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
}

.wa-close-list .is-done span {
  border-color: color-mix(in srgb, var(--positive) 40%, var(--border));
  background: var(--positive);
}

.wa-close-list .is-done {
  border-color: color-mix(in srgb, var(--positive) 18%, var(--border));
  background: color-mix(in srgb, var(--positive) 5%, var(--surface));
}

.wa-close-list p {
  margin: 0;
  color: var(--ink);
  font-weight: 560;
}

.wa-close-list strong {
  color: var(--ink2);
  font-size: 12px;
}

.wa-month-side .btn {
  justify-content: center;
}

.wa-annual-workspace {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.wa-annual-workspace-head,
.wa-monthly-finance-focus,
.wa-annual-overview-summary {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 0;
}

.wa-annual-workspace-head > div:first-child,
.wa-monthly-finance-focus > div,
.wa-annual-overview-summary > div:first-child {
  min-width: 0;
}

.wa-annual-workspace-head span,
.wa-monthly-finance-focus > div > span,
.wa-annual-overview-summary > div > span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 740;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wa-annual-workspace-head h2,
.wa-monthly-finance-focus h2,
.wa-annual-overview-summary h2 {
  margin: 0;
  color: var(--ink);
  font-size: 25px;
  font-weight: var(--weight-page-title);
  line-height: 1.1;
}

.wa-annual-workspace-head p,
.wa-monthly-finance-focus p,
.wa-annual-overview-summary p {
  max-width: 690px;
  margin: 7px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
}

.wa-annual-view-switch {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.wa-annual-view-switch button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.wa-annual-view-switch button.is-active {
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}

.wa-monthly-finance-focus,
.wa-annual-overview-summary {
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--layf-accent-soft-bg, var(--surface2)));
}

.wa-monthly-finance-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.wa-monthly-finance-metrics article,
.wa-annual-overview-metrics article {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 106px;
  padding: 16px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--wa-finance-metric, var(--accent));
  border-radius: 8px;
  background: var(--surface);
}

.wa-monthly-finance-metrics article.is-revenue { --wa-finance-metric: #2054ad; }
.wa-monthly-finance-metrics article.is-cost { --wa-finance-metric: #7e1b34; }
.wa-monthly-finance-metrics article.is-positive,
.wa-annual-overview-metrics article.is-positive { --wa-finance-metric: #149863; }
.wa-monthly-finance-metrics article.is-negative,
.wa-annual-overview-metrics article.is-negative { --wa-finance-metric: #c23a4f; }

.wa-monthly-finance-metrics span,
.wa-monthly-finance-metrics small,
.wa-annual-overview-metrics span {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 680;
  line-height: 1.3;
}

.wa-monthly-finance-metrics strong,
.wa-annual-overview-metrics strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 22px;
  font-weight: var(--weight-metric);
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-monthly-finance-metrics small.is-negative,
.wa-monthly-finance-section strong.is-negative,
.wa-monthly-finance-delta.is-negative { color: var(--danger); }

.wa-monthly-finance-stack {
  display: grid;
  gap: 12px;
}

.wa-monthly-finance-section {
  overflow: hidden;
  padding: 0;
  border-radius: 8px;
}

.wa-monthly-finance-section--costs { --wa-monthly-accent: #7e1b34; }
.wa-monthly-finance-section--revenues { --wa-monthly-accent: #2054ad; }
.wa-monthly-finance-section--inflows { --wa-monthly-accent: #d47824; }

.wa-monthly-finance-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 15px 18px;
  border-top: 3px solid var(--wa-monthly-accent);
  background: color-mix(in srgb, var(--wa-monthly-accent) 7%, var(--surface));
}

.wa-monthly-finance-section-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: var(--weight-section-title);
}

.wa-monthly-finance-section-head p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.35;
}

.wa-monthly-finance-section-head > div:last-child {
  display: grid;
  gap: 3px;
  text-align: right;
}

.wa-monthly-finance-section-head small,
.wa-monthly-finance-section-foot span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 720;
  text-transform: uppercase;
}

.wa-monthly-finance-section-head strong {
  color: var(--ink);
  font-size: 16px;
  white-space: nowrap;
}

.wa-monthly-finance-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.wa-monthly-finance-table {
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
}

.wa-monthly-finance-table th,
.wa-monthly-finance-table td {
  padding: 9px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  text-align: right;
  vertical-align: middle;
}

.wa-monthly-finance-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--surface2, var(--surface)) 84%, var(--surface));
  color: var(--ink3);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.wa-monthly-finance-table th:first-child {
  width: 44%;
  text-align: left;
}

.wa-monthly-finance-table tbody th span {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 690;
  line-height: 1.25;
}

.wa-monthly-finance-table tbody th em {
  display: inline-flex;
  margin-top: 3px;
  color: var(--ink3);
  font-size: 10px;
  font-style: normal;
}

.wa-monthly-finance-table td { min-width: 118px; }

.wa-monthly-finance-table .wa-table-money-input { min-width: 104px; }

.wa-monthly-finance-year,
.wa-monthly-finance-delta {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
}

.wa-monthly-finance-note {
  width: 100%;
  min-width: 180px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent));
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.wa-monthly-finance-empty {
  padding: 22px !important;
  color: var(--ink3);
  text-align: center !important;
}

.wa-monthly-finance-section-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: color-mix(in srgb, var(--wa-monthly-accent) 4%, var(--surface));
}

.wa-monthly-finance-section-foot strong { color: var(--ink); font-size: 12px; }

.wa-annual-overview-summary { align-items: center; }

.wa-annual-overview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(145px, 1fr));
  gap: 10px;
}

.wa-annual-overview-metrics article { min-height: 96px; }

.wa-annual-month-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.wa-annual-month-card {
  display: grid;
  gap: 7px;
  min-height: 145px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.wa-annual-month-card:hover,
.wa-annual-month-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--layf-accent-soft-bg, var(--surface2));
}

.wa-annual-month-card > span {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 740;
}

.wa-annual-month-card > strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 19px;
  font-weight: var(--weight-metric);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-annual-month-card > small {
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.35;
}

.wa-annual-month-card > small i { margin: 0 3px; color: var(--accent); font-style: normal; }

.wa-annual-month-card > b {
  margin-top: auto;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.wa-annual-month-card.is-negative > strong { color: var(--danger); }

@media (max-width: 900px) {
  .wa-annual-workspace-head,
  .wa-monthly-finance-focus,
  .wa-annual-overview-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .wa-monthly-finance-metrics,
  .wa-annual-month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-annual-overview-metrics { width: 100%; }
}

@media (max-width: 620px) {
  .wa-annual-workspace { gap: 12px; }

  .wa-annual-workspace-head h2,
  .wa-monthly-finance-focus h2,
  .wa-annual-overview-summary h2 { font-size: 22px; }

  .wa-annual-view-switch {
    width: 100%;
  }

  .wa-annual-view-switch button {
    flex: 1;
    padding: 0 7px;
    font-size: 11px;
  }

  .wa-monthly-finance-focus,
  .wa-annual-overview-summary { padding: 16px; }

  .wa-monthly-finance-metrics,
  .wa-annual-month-grid,
  .wa-annual-overview-metrics { grid-template-columns: 1fr; }

  .wa-monthly-finance-metrics article,
  .wa-annual-overview-metrics article { min-height: 84px; }

  .wa-monthly-finance-section-head { padding: 13px 14px; }

  .wa-monthly-finance-section-head > div:last-child {
    display: none;
  }
}

.wa-finance-table-stack {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.wa-table-section {
  min-width: 0;
  overflow: hidden;
}

.wa-finance-table-stack .wa-table-section {
  padding: 0;
  border-radius: 8px;
}

.wa-table-section-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  font: inherit;
  gap: 18px;
  align-items: center;
  padding: 15px 18px;
  border: 0;
  border-top: 3px solid var(--wa-table-accent, var(--accent));
  background: var(--wa-table-soft, var(--surface));
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

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

.wa-derived-finance-grid > div {
  display: grid;
  gap: 3px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 95%, var(--accent));
}

.wa-derived-finance-grid span,
.wa-derived-finance-grid small {
  color: var(--text-muted);
  font-size: .76rem;
}

.wa-derived-finance-grid strong {
  color: var(--text);
  font-size: 1.18rem;
}

.wa-table-section--costs {
  --wa-table-accent: #7e1b34;
  --wa-table-soft: color-mix(in srgb, #7e1b34 8%, var(--surface));
}

.wa-table-section--revenues {
  --wa-table-accent: #2054ad;
  --wa-table-soft: color-mix(in srgb, #2054ad 8%, var(--surface));
}

.wa-table-section--inflows {
  --wa-table-accent: #d47824;
  --wa-table-soft: color-mix(in srgb, #d47824 10%, var(--surface));
}

.wa-table-section-toggle:hover {
  filter: brightness(.99);
}

.wa-table-section-copy,
.wa-table-section-totals,
.wa-table-section-totals > span {
  min-width: 0;
}

.wa-table-section-copy {
  display: grid;
  gap: 4px;
}

.wa-table-section-copy > strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: var(--weight-section-title);
  line-height: 1.15;
}

.wa-table-section-copy > small {
  overflow: hidden;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-table-section-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(118px, auto)) 32px;
  gap: 12px;
  align-items: center;
}

.wa-table-section-totals > span {
  display: grid;
  gap: 3px;
  text-align: right;
}

.wa-table-section-totals small {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 700;
}

.wa-table-section-totals b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}

.wa-table-section-totals i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--wa-table-accent, var(--accent)) 34%, var(--border));
  border-radius: 50%;
  color: var(--wa-table-accent, var(--accent));
  font-size: 18px;
  font-style: normal;
  line-height: 1;
}

.wa-finance-table-stack .wa-table-section > .wa-table-scroll {
  padding: 14px 16px 10px;
}

.wa-table-help {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-width: 0;
}

.wa-table-help > div:first-child {
  min-width: 0;
}

.wa-table-help > div:first-child > span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.wa-table-help strong {
  color: var(--ink);
  display: block;
  font-size: 24px;
  font-weight: var(--weight-page-title);
  line-height: 1.08;
}

.wa-table-help p {
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
  margin: 7px 0 0;
}

.wa-table-hero {
  border-color: color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 16%, var(--border));
  background: color-mix(in srgb, var(--surface) 94%, var(--layf-accent-soft-bg, var(--surface2)));
}

.wa-table-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(128px, 1fr));
  gap: 10px;
}

.wa-table-hero-metrics article {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 90%, white);
}

.wa-table-hero-metrics span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

.wa-table-hero-metrics strong {
  margin-top: 5px;
  font-size: 17px;
  font-weight: var(--weight-card-title);
}

.wa-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 8px;
  scrollbar-gutter: stable;
}

.wa-finance-table {
  border-collapse: separate;
  border-spacing: 0 2px;
  min-width: 1420px;
  table-layout: fixed;
  width: max-content;
}

.wa-finance-table th,
.wa-finance-table td {
  padding: 7px 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

.wa-finance-table thead th {
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 78%, var(--surface));
  color: var(--ink3);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  text-transform: uppercase;
}

.wa-finance-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 360px;
  width: 360px;
  background: var(--surface);
  text-align: left;
  white-space: normal;
  box-shadow: 12px 0 22px color-mix(in srgb, var(--surface) 82%, transparent);
}

.wa-finance-table thead th:first-child {
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 78%, var(--surface));
}

.wa-finance-table tbody th span {
  display: block;
  color: var(--ink);
  max-width: 332px;
  overflow-wrap: anywhere;
  font-size: 11px;
  font-weight: 720;
  line-height: 1.25;
}

.wa-finance-table tbody th em {
  display: inline-flex;
  margin-top: 4px;
  color: var(--ink3);
  font-size: 11px;
  font-style: normal;
}

.wa-finance-table td {
  color: var(--ink2);
  font-size: 13px;
  min-width: 86px;
  width: 86px;
}

.wa-finance-table td.is-active {
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  color: var(--ink);
  font-weight: 700;
}

.wa-finance-table input {
  width: 100%;
  min-width: 70px;
  border: 1px solid color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 16%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 82%, var(--surface2));
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  outline: none;
  padding: 7px 8px;
  text-align: right;
}

.wa-finance-table input:hover {
  border-color: var(--border);
  background: var(--surface);
}

.wa-finance-table input:focus {
  border-color: var(--layf-accent-border, var(--accent));
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--layf-accent-soft-bg, var(--accent-lt));
}

.wa-finance-table input:disabled {
  color: var(--ink3);
  cursor: not-allowed;
  opacity: .58;
}

.wa-table-money-input {
  position: relative;
  display: block;
  min-width: 78px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 16%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, var(--surface2));
}

.wa-table-money-input.is-heat,
.wa-table-money-input.is-heat-strong {
  background: var(--wa-cell-heat);
  border-color: color-mix(in srgb, var(--wa-table-accent, var(--accent)) 28%, var(--border));
}

.wa-table-money-input input,
.wa-finance-table .wa-table-money-input input:hover,
.wa-finance-table .wa-table-money-input input:focus {
  min-width: 0;
  margin: 0;
  padding: 7px 22px 7px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.wa-table-money-input:focus-within {
  border-color: var(--layf-accent-border, var(--accent));
  box-shadow: 0 0 0 3px var(--layf-accent-soft-bg, var(--accent-lt));
}

.wa-table-money-input small {
  position: absolute;
  top: 50%;
  right: 7px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
  transform: translateY(-50%);
}

.wa-table-money-input.is-heat-strong input,
.wa-table-money-input.is-heat-strong small {
  color: white;
}

.wa-finance-table .wa-table-note-cell {
  min-width: 220px;
  width: 220px;
}

.wa-table-note-cell input {
  min-width: 200px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
}

.wa-finance-table--reco {
  min-width: 1240px;
}

.wa-finance-table--reco th:first-child {
  min-width: 260px;
  width: 260px;
}

.wa-finance-table--reco td:nth-child(2) {
  color: var(--ink2);
  min-width: 105px;
  text-align: left;
  width: 105px;
}

.wa-finance-table tr.is-estimate th:first-child,
.wa-finance-table tr.is-override th:first-child,
.wa-finance-table tr.is-sensitive th:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

.wa-finance-table tr.is-sensitive th:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}

/* WA Finance: versioned recurring line items */
.wa-table-section-topline {
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: var(--wa-table-soft, var(--surface));
}

.wa-finance-add-year {
  border-style: dashed !important;
  color: var(--ink2) !important;
}

.wa-finance-add-year:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.wa-table-section-topline .wa-table-section-toggle {
  flex: 1 1 auto;
}

.wa-table-section-topline > .btn {
  align-self: center;
  flex: 0 0 auto;
  margin-right: 16px;
}

.wa-finance-line-period {
  display: block;
  margin-top: 3px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
}

.wa-finance-line-period.is-inactive { color: var(--danger); }

.wa-finance-line-tools {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}

.wa-finance-line-manage {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wa-finance-line-manage:hover { color: var(--ink); }

.wa-finance-table tr.is-inactive td,
.wa-monthly-finance-table tr.is-inactive td { opacity: .62; }

.wa-table-note-cell > span,
.wa-monthly-finance-note {
  display: block;
  min-width: 180px;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.wa-monthly-finance-section-actions {
  display: flex !important;
  align-items: center;
  gap: 12px;
  text-align: right;
}

.wa-monthly-finance-section-actions > div {
  display: grid;
  gap: 3px;
}

.wa-finance-line-modal .module-form-modal-card { width: min(680px, calc(100vw - 28px)); }

.wa-finance-line-form { display: grid; gap: 16px; }

.wa-finance-line-form-intro {
  margin: 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
}

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

.wa-finance-line-form-wide { grid-column: 1 / -1; }

.wa-finance-line-apply {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.4;
}

.wa-finance-line-apply input { margin-top: 2px; }

.wa-finance-line-history {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
}

.wa-finance-line-history > span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wa-finance-line-history p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--ink2);
  font-size: 12px;
}

.wa-finance-line-history strong { color: var(--ink); }
.wa-finance-line-history small { color: var(--ink3); text-align: right; }
.wa-finance-line-modal-spacer { flex: 1 1 auto; }
.wa-finance-line-end { color: var(--danger); }

@media (max-width: 900px) {
  .wa-table-section-topline { display: grid; gap: 0; }
  .wa-table-section-topline > .btn { justify-self: stretch; margin: 0 14px 14px; }
  .wa-monthly-finance-section-head { grid-template-columns: 1fr; }
  .wa-monthly-finance-section-head > .wa-monthly-finance-section-actions {
    display: flex !important;
    justify-content: space-between;
    text-align: left;
  }
}

@media (max-width: 620px) {
  .wa-monthly-finance-section-actions { align-items: flex-end; }
  .wa-monthly-finance-section-actions .btn { white-space: nowrap; }
  .wa-finance-line-form-grid { grid-template-columns: 1fr; }
  .wa-finance-line-history p { display: grid; gap: 2px; }
  .wa-finance-line-history small { text-align: left; }
  .wa-finance-line-modal .module-form-modal-foot { flex-wrap: wrap; }
  .wa-finance-line-modal .module-form-modal-foot .wa-finance-line-end { order: 2; width: 100%; text-align: left; }
}

.wa-reservations-stage {
  display: grid;
  gap: 16px;
}

.wa-reservations-shell,
.wa-live-ledger-stage {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.wa-reservation-modebar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(320px, 100%);
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface2) 74%, var(--surface));
}

.wa-reservation-modebar button {
  min-height: 36px;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}

.wa-reservation-modebar button:hover {
  color: var(--ink);
}

.wa-reservation-modebar button.is-active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--ink) 10%, transparent);
}

.wa-ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--surface) 93%, var(--accent-lt)), var(--surface) 58%) !important;
}

.wa-ledger-head-copy > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.wa-ledger-head-copy h2,
.wa-ledger-panel-head h2 {
  margin: 4px 0 3px;
  color: var(--ink);
  font-size: 21px;
  font-weight: var(--weight-section-title);
  letter-spacing: 0;
}

.wa-ledger-head-copy p,
.wa-ledger-panel-head p {
  margin: 0;
  color: var(--ink2);
  font-size: 12px;
}

.wa-ledger-source-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 205px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.wa-ledger-source-status > i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 14%, transparent);
}

.wa-ledger-source-status.is-connected {
  border-color: color-mix(in srgb, var(--positive) 38%, var(--border));
  background: color-mix(in srgb, var(--positive) 8%, var(--surface));
}

.wa-ledger-source-status.is-connected > i {
  background: var(--positive);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--positive) 14%, transparent);
}

.wa-ledger-source-status.is-error {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

.wa-ledger-source-status.is-error > i {
  background: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 12%, transparent);
}

.wa-ledger-source-status.is-loading > i {
  background: #3978df;
  box-shadow: 0 0 0 4px color-mix(in srgb, #3978df 12%, transparent);
  animation: wa-ledger-status-pulse 1.2s ease-in-out infinite;
}

@keyframes wa-ledger-status-pulse {
  50% { opacity: .42; }
}

.wa-ledger-source-status strong,
.wa-ledger-source-status small {
  display: block;
}

.wa-ledger-source-status strong {
  color: var(--ink);
  font-size: 12px;
}

.wa-ledger-source-status small {
  margin-top: 2px;
  color: var(--ink3);
  font-size: 10px;
}

.wa-ledger-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.wa-ledger-coverage-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, #f59e0b 34%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, #fff7db 74%, var(--surface));
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

.wa-ledger-coverage-warning strong {
  flex: 0 0 auto;
}

.wa-ledger-coverage-warning span {
  color: var(--text-muted);
}

.wa-ledger-metric {
  min-width: 0;
  min-height: 88px;
  padding: 14px 15px;
  box-shadow: none !important;
}

.wa-ledger-metric span,
.wa-ledger-metric small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-ledger-metric span {
  color: var(--ink2);
  font-size: 11px;
  font-weight: 700;
}

.wa-ledger-metric strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--ink);
  font-size: 19px;
}

.wa-ledger-metric small {
  color: var(--ink3);
  font-size: 10px;
}

.wa-ledger-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 12px;
}

.wa-ledger-forecast,
.wa-ledger-change-journal {
  min-width: 0;
  padding: 16px 18px;
  overflow: hidden;
}

.wa-ledger-forecast {
  border-color: color-mix(in srgb, var(--positive) 18%, var(--border)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--positive) 6%, var(--surface)), var(--surface) 62%) !important;
}

.wa-ledger-change-journal {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
}

.wa-ledger-source-contract {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, var(--accent-lt)), var(--surface) 68%) !important;
}

.wa-ledger-source-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.wa-ledger-source-flow article {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, white);
  overflow: hidden;
}

.wa-ledger-source-flow article::after {
  content: "";
  position: absolute;
  inset: auto 12px 12px 12px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink3) 28%, transparent);
}

.wa-ledger-source-flow i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ink3);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ink3) 12%, transparent);
}

.wa-ledger-source-flow strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.wa-ledger-source-flow small {
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.35;
}

.wa-ledger-source-flow .is-live {
  border-color: color-mix(in srgb, var(--positive) 34%, var(--border));
}

.wa-ledger-source-flow .is-live i,
.wa-ledger-source-flow .is-live::after {
  background: var(--positive);
}

.wa-ledger-source-flow .is-ready {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.wa-ledger-source-flow .is-ready i,
.wa-ledger-source-flow .is-ready::after {
  background: var(--accent);
}

.wa-ledger-source-flow .is-next {
  border-color: color-mix(in srgb, #0ea5e9 30%, var(--border));
}

.wa-ledger-source-flow .is-next i,
.wa-ledger-source-flow .is-next::after {
  background: #0ea5e9;
}

.wa-ledger-source-flow .is-fallback {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border));
}

.wa-ledger-source-flow .is-fallback i,
.wa-ledger-source-flow .is-fallback::after {
  background: var(--warning);
}

.wa-ledger-contract-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-lt) 34%, transparent);
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.45;
}

.wa-ledger-contract-note strong {
  flex: 0 0 auto;
  color: var(--ink);
}

.wa-ledger-annual-compare {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border-color: color-mix(in srgb, #0ea5e9 18%, var(--border)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, #0ea5e9 5%, var(--surface)), var(--surface) 70%) !important;
}

.wa-ledger-annual-compare .wa-finance-section-head > span.is-ok {
  color: var(--positive);
}

.wa-ledger-annual-compare .wa-finance-section-head > span.is-warn {
  color: var(--warning);
}

.wa-ledger-annual-compare .wa-finance-section-head > span.is-attention {
  color: var(--danger);
}

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

.wa-ledger-compare-main article {
  min-width: 0;
  padding: 13px;
  border: 1px solid color-mix(in srgb, #0ea5e9 16%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 90%, white);
}

.wa-ledger-compare-main span,
.wa-ledger-compare-main small {
  display: block;
  color: var(--ink3);
}

.wa-ledger-compare-main span {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.wa-ledger-compare-main strong {
  display: block;
  margin: 7px 0 4px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 850;
}

.wa-ledger-compare-main small {
  font-size: 10px;
}

.wa-ledger-compare-main article.is-positive strong,
.wa-ledger-compare-channel .is-positive {
  color: var(--positive);
}

.wa-ledger-compare-main article.is-negative strong,
.wa-ledger-compare-channel .is-negative {
  color: var(--danger);
}

.wa-ledger-compare-main article.is-neutral strong,
.wa-ledger-compare-channel .is-neutral {
  color: var(--ink2);
}

.wa-ledger-compare-channels {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--border);
}

.wa-ledger-compare-table-head,
.wa-ledger-compare-channel {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) repeat(3, minmax(96px, .8fr));
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px 12px;
  background: var(--surface);
}

.wa-ledger-compare-table-head {
  background: color-mix(in srgb, var(--surface2) 74%, var(--surface));
  color: var(--ink3);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.wa-ledger-compare-channel strong,
.wa-ledger-compare-channel span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-ledger-compare-channel strong {
  color: var(--ink);
  font-size: 12px;
}

.wa-ledger-compare-channel span {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 750;
}

.wa-ledger-compare-channels p,
.wa-ledger-compare-note {
  margin: 0;
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.45;
}

.wa-ledger-compare-channels p {
  padding: 12px;
  background: var(--surface);
}

.wa-ledger-channel-quality {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border-color: color-mix(in srgb, var(--warning) 20%, var(--border)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--warning) 5%, var(--surface)), var(--surface) 70%) !important;
}

.wa-ledger-channel-quality .wa-finance-section-head > span.is-ok {
  color: var(--positive);
}

.wa-ledger-channel-quality .wa-finance-section-head > span.is-attention {
  color: var(--danger);
}

.wa-ledger-channel-quality-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.wa-ledger-channel-quality-kpis article {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 14%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 90%, white);
}

.wa-ledger-channel-quality-kpis article.is-warning {
  border-color: color-mix(in srgb, var(--danger) 24%, var(--border));
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}

.wa-ledger-channel-quality-kpis article.is-ok {
  border-color: color-mix(in srgb, var(--positive) 22%, var(--border));
}

.wa-ledger-channel-quality-kpis span,
.wa-ledger-channel-quality-kpis small {
  display: block;
  color: var(--ink3);
  font-size: 10px;
}

.wa-ledger-channel-quality-kpis span {
  font-weight: 850;
  text-transform: uppercase;
}

.wa-ledger-channel-quality-kpis strong {
  display: block;
  margin: 5px 0 2px;
  overflow: hidden;
  color: var(--ink);
  font-size: 20px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-ledger-channel-quality-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--border);
}

.wa-ledger-channel-quality-head,
.wa-ledger-channel-quality-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.35fr) minmax(160px, 1fr) 86px 120px 112px;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px 12px;
  background: var(--surface);
}

.wa-ledger-channel-quality-head {
  background: color-mix(in srgb, var(--surface2) 74%, var(--surface));
  color: var(--ink3);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.wa-ledger-channel-quality-row strong,
.wa-ledger-channel-quality-row span,
.wa-ledger-channel-quality-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-ledger-channel-quality-row strong {
  color: var(--ink);
  font-size: 12px;
}

.wa-ledger-channel-quality-row span {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 750;
}

.wa-ledger-channel-quality-row em {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--positive) 10%, var(--surface));
  color: var(--positive);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.wa-ledger-channel-quality-row.is-unknown em,
.wa-ledger-channel-quality-row.is-missing em {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  color: var(--danger);
}

.wa-ledger-channel-quality-list p,
.wa-ledger-channel-quality-note {
  margin: 0;
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.45;
}

.wa-ledger-channel-quality-list p {
  padding: 12px;
  background: var(--surface);
}

.wa-ledger-forecast-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.wa-ledger-forecast-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, white);
}

.wa-ledger-forecast-grid article.is-primary {
  border-color: color-mix(in srgb, var(--positive) 28%, var(--border));
  background: color-mix(in srgb, var(--positive) 8%, var(--surface));
}

.wa-ledger-forecast-grid article.is-warning {
  border-color: color-mix(in srgb, var(--danger) 24%, var(--border));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}

.wa-ledger-forecast-grid article.is-ok {
  border-color: color-mix(in srgb, var(--positive) 24%, var(--border));
}

.wa-ledger-forecast-grid span,
.wa-ledger-forecast-grid small {
  display: block;
  overflow: hidden;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-ledger-forecast-grid strong {
  display: block;
  margin: 5px 0 2px;
  color: var(--ink);
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.05;
}

.wa-ledger-channel-forecast {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.wa-ledger-channel-forecast > p {
  margin: 0;
  color: var(--ink3);
  font-size: 12px;
}

.wa-ledger-channel-forecast div {
  display: grid;
  gap: 5px;
}

.wa-ledger-channel-forecast span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink2);
  font-size: 11px;
}

.wa-ledger-channel-forecast b,
.wa-ledger-channel-forecast em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-ledger-channel-forecast b {
  color: var(--ink);
}

.wa-ledger-channel-forecast em {
  flex: 0 0 auto;
  font-style: normal;
  font-weight: 800;
}

.wa-ledger-channel-forecast i {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface2));
  overflow: hidden;
}

.wa-ledger-channel-forecast i::before {
  content: "";
  display: block;
  width: var(--wa-ledger-channel);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--positive), var(--accent));
}

.wa-ledger-change-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.wa-ledger-change-summary span {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 10px;
  font-weight: 800;
}

.wa-ledger-change-summary span.is-inserted,
.wa-ledger-change-summary span.is-reactivated {
  border-color: color-mix(in srgb, var(--positive) 26%, var(--border));
  color: color-mix(in srgb, var(--positive) 74%, var(--ink));
}

.wa-ledger-change-summary span.is-inactivated {
  border-color: color-mix(in srgb, var(--danger) 22%, var(--border));
  color: var(--danger);
}

.wa-ledger-journal-list {
  display: grid;
  gap: 7px;
  max-height: 338px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.wa-ledger-journal-list li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.wa-ledger-journal-list li > i {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--accent);
}

.wa-ledger-journal-list li.is-inserted > i,
.wa-ledger-journal-list li.is-reactivated > i {
  background: var(--positive);
}

.wa-ledger-journal-list li.is-inactivated > i {
  background: var(--danger);
}

.wa-ledger-journal-list strong,
.wa-ledger-journal-list span,
.wa-ledger-journal-list small {
  display: block;
  min-width: 0;
}

.wa-ledger-journal-list strong {
  color: var(--ink);
  font-size: 12px;
}

.wa-ledger-journal-list span {
  margin-top: 2px;
  color: var(--ink2);
  font-size: 11px;
}

.wa-ledger-journal-list small,
.wa-ledger-journal-list time {
  color: var(--ink3);
  font-size: 10px;
}

.wa-ledger-journal-list time {
  white-space: nowrap;
}

.wa-ledger-journal-empty {
  display: grid;
  gap: 3px;
  padding: 18px 0 4px;
  color: var(--ink2);
  font-size: 12px;
}

.wa-ledger-journal-empty strong {
  color: var(--ink);
}

.wa-ledger-panel {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.wa-ledger-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px 14px;
  border-bottom: 1px solid var(--border);
}

.wa-ledger-panel-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.wa-ledger-readonly-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}

.wa-ledger-refresh-note {
  margin: 0;
  padding: 9px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  color: var(--ink2);
  font-size: 11px;
  font-weight: 700;
}

.wa-ledger-refresh-note.is-success {
  background: color-mix(in srgb, var(--positive) 8%, var(--surface));
  color: color-mix(in srgb, var(--positive) 80%, var(--ink));
}

.wa-ledger-refresh-note.is-error {
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  color: var(--danger);
}

.wa-ledger-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) repeat(5, minmax(108px, .68fr));
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 42%, var(--surface));
}

.wa-ledger-tools label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.wa-ledger-tools label > span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 750;
}

.wa-ledger-tools :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 36px !important;
  opacity: .68;
}

.wa-ledger-table-scroll {
  max-width: 100%;
  overflow: auto;
  outline: none;
}

.wa-ledger-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: fixed;
}

.wa-ledger-table th {
  padding: 9px 9px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 58%, var(--surface));
  color: var(--ink3);
  font-size: 9px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.wa-ledger-table th:nth-child(1) { width: 92px; }
.wa-ledger-table th:nth-child(2) { width: 86px; }
.wa-ledger-table th:nth-child(3) { width: 136px; }
.wa-ledger-table th:nth-child(4) { width: 108px; }
.wa-ledger-table th:nth-child(5) { width: 46px; }
.wa-ledger-table th:nth-child(6) { width: 122px; }
.wa-ledger-table th:nth-child(7),
.wa-ledger-table th:nth-child(8),
.wa-ledger-table th:nth-child(9) { width: 105px; }
.wa-ledger-table th:nth-child(10) { width: 96px; }
.wa-ledger-table th:nth-child(11) { width: 112px; }

.wa-ledger-data-row td {
  padding: 10px 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  color: var(--ink2);
  font-size: 11px;
  vertical-align: middle;
}

.wa-ledger-id {
  display: grid;
  gap: 3px;
  align-items: start;
}

.wa-ledger-id > span:first-child {
  display: inline-flex;
  align-items: center;
}

.wa-ledger-data-row:hover td,
.wa-ledger-data-row.is-expanded td {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.wa-ledger-data-row td:first-child {
  color: var(--ink);
  font-weight: 750;
  white-space: nowrap;
}

.wa-ledger-data-row td:nth-child(5),
.wa-ledger-data-row td:nth-child(7),
.wa-ledger-data-row td:nth-child(8),
.wa-ledger-data-row td:nth-child(9) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wa-ledger-expand {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.wa-ledger-expand:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.wa-ledger-guest {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-ledger-stay {
  white-space: nowrap;
}

.wa-ledger-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.wa-ledger-status--inline {
  width: fit-content;
  min-height: 18px;
  padding: 2px 6px;
  font-size: 8px;
}

.wa-ledger-payment {
  display: inline-flex;
  width: fit-content;
  min-height: 17px;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface2) 72%, var(--surface));
  color: var(--ink3);
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.wa-ledger-payment.is-paid {
  background: color-mix(in srgb, var(--positive) 9%, var(--surface));
  color: color-mix(in srgb, var(--positive) 78%, #10251d);
}

.wa-ledger-payment.is-underpaid,
.wa-ledger-payment.is-unpaid,
.wa-ledger-payment.is-zero_price {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface));
  color: color-mix(in srgb, var(--warning) 72%, #5d2a00);
}

.wa-ledger-control-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--accent)) 0%, var(--surface) 72%),
    var(--surface);
}

.wa-ledger-control-strip article {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface2));
}

.wa-ledger-control-strip article.is-warning {
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.wa-ledger-control-strip article.is-ok {
  border-color: color-mix(in srgb, var(--positive) 20%, var(--border));
}

.wa-ledger-control-strip article.is-muted {
  opacity: .86;
}

.wa-ledger-control-strip span,
.wa-ledger-control-strip small {
  display: block;
  overflow: hidden;
  color: var(--ink3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-ledger-control-strip span {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.wa-ledger-control-strip strong {
  display: block;
  margin: 4px 0 2px;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-ledger-control-strip small {
  font-size: 9px;
}

.wa-ledger-status.is-reserved,
.wa-ledger-status.is-checked_in {
  border-color: color-mix(in srgb, #3978df 28%, var(--border));
  background: color-mix(in srgb, #3978df 7%, var(--surface));
  color: #2459ac;
}

.wa-ledger-status.is-checked_out {
  border-color: color-mix(in srgb, var(--positive) 28%, var(--border));
  background: color-mix(in srgb, var(--positive) 7%, var(--surface));
  color: color-mix(in srgb, var(--positive) 82%, #143026);
}

.wa-ledger-status.is-cancelled,
.wa-ledger-status.is-no_show {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  color: var(--danger);
}

.wa-ledger-status.is-inactive {
  opacity: .66;
}

.wa-ledger-detail-row[hidden],
.wa-ledger-data-row[hidden] {
  display: none;
}

.wa-ledger-detail-row td {
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 42%, var(--surface));
}

.wa-ledger-detail {
  display: grid;
  grid-template-columns: minmax(340px, .8fr) minmax(420px, 1.2fr);
  gap: 22px;
  padding: 16px 20px 18px 44px;
}

.wa-ledger-detail dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 0;
}

.wa-ledger-detail dl > div {
  min-width: 0;
}

.wa-ledger-detail dt {
  color: var(--ink3);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.wa-ledger-detail dd {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-ledger-change-history > strong {
  color: var(--ink);
  font-size: 11px;
}

.wa-ledger-change-history > p {
  margin: 7px 0 0;
  color: var(--ink3);
  font-size: 10px;
}

.wa-ledger-change-history ul {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.wa-ledger-change-history li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.wa-ledger-change-history li > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.wa-ledger-change-history li > i.is-inserted,
.wa-ledger-change-history li > i.is-reactivated {
  background: var(--positive);
}

.wa-ledger-change-history li > i.is-inactivated {
  background: var(--danger);
}

.wa-ledger-change-history li span,
.wa-ledger-change-history li strong,
.wa-ledger-change-history li small {
  display: block;
  min-width: 0;
}

.wa-ledger-change-history li strong {
  color: var(--ink);
  font-size: 10px;
}

.wa-ledger-change-history li small,
.wa-ledger-change-history li time {
  color: var(--ink3);
  font-size: 9px;
}

.wa-ledger-empty-row td {
  padding: 0;
}

.wa-ledger-empty-state {
  display: grid;
  justify-items: center;
  min-height: 250px;
  padding: 42px 18px;
  text-align: center;
}

.wa-ledger-empty-state > i {
  width: 28px;
  height: 28px;
  margin-bottom: 13px;
  border: 2px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 50%;
  box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.wa-ledger-empty-state strong {
  color: var(--ink);
  font-size: 14px;
}

.wa-ledger-empty-state span {
  margin-top: 5px;
  color: var(--ink3);
  font-size: 11px;
}

.wa-ledger-empty-state .btn {
  margin-top: 14px;
}

.wa-reservations-import,
.wa-reservations-empty,
.wa-reservation-card,
.wa-reservation-metric {
  padding: 18px;
}

.wa-reservations-import .wa-finance-section-head > span {
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  border-color: var(--layf-accent-border, var(--border));
  color: var(--ink);
}

.wa-reservation-workflow-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  border-color: var(--layf-accent-border, var(--border)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--layf-accent-soft-bg, var(--surface2))), var(--surface));
}

.wa-reservation-workflow-hero span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.wa-reservation-workflow-hero h2 {
  margin: 5px 0 4px;
  color: var(--ink);
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: var(--weight-page-title);
  letter-spacing: 0;
}

.wa-reservation-workflow-hero p,
.wa-reservation-workflow-status small {
  margin: 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
}

.wa-reservation-workflow-status {
  min-width: 190px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  text-align: right;
}

.wa-reservation-workflow-status strong,
.wa-reservation-workflow-status span {
  display: block;
}

.wa-reservation-workflow-status strong {
  color: var(--ink);
  font-size: 15px;
}

.wa-reservation-workflow-status span {
  margin: 3px 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 780;
}

.wa-reservation-paste {
  display: grid;
  gap: 8px;
}

.wa-reservation-paste > span {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
}

.wa-reservation-file {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.wa-reservations-import .wa-reservation-file {
  margin-top: 0;
}

.wa-reservation-file span {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
}

.wa-reservation-file input {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px dashed var(--layf-accent-border, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, var(--layf-accent-soft-bg, var(--surface2)));
  color: var(--ink2);
}

.wa-reservation-paste textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface2));
  color: var(--ink);
  font: 12px/1.45 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

.wa-reservation-paste textarea:focus {
  outline: none;
  border-color: var(--layf-accent-border, var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 10%, transparent);
}

.wa-reservation-paste-details {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface2));
}

.wa-reservation-paste-details summary {
  padding: 10px 12px;
  cursor: pointer;
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
  list-style-position: inside;
}

.wa-reservation-paste-details[open] {
  padding-bottom: 12px;
}

.wa-reservation-paste-details[open] .wa-reservation-paste {
  padding: 0 12px;
}

.wa-reservations-empty {
  border-style: dashed;
  border-color: var(--layf-accent-border, var(--border));
  background: color-mix(in srgb, var(--surface) 88%, var(--layf-accent-soft-bg, var(--surface2)));
}

.wa-reservations-empty--workflow {
  min-height: 120px;
}

.wa-reservations-empty strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: var(--weight-section-title);
}

.wa-reservations-empty p {
  max-width: 760px;
  margin: 6px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.5;
}

.wa-reservation-summary,
.wa-reservation-status-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.wa-reservation-metric {
  display: grid;
  gap: 4px;
  min-height: 92px;
}

.wa-reservation-metric span {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 650;
}

.wa-reservation-metric strong {
  color: var(--ink);
  font-size: 22px;
  font-weight: var(--weight-card-title);
}

.wa-reservation-metric small {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 650;
}

.wa-reservation-metric.is-warning {
  border-color: color-mix(in srgb, var(--warning) 36%, var(--border)) !important;
  background: color-mix(in srgb, var(--warning) 8%, var(--surface)) !important;
}

.wa-reservation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  gap: 16px;
}

.wa-reservation-channel-list,
.wa-reservation-channel-accordion,
.wa-reservation-issues {
  display: grid;
  gap: 8px;
}

.wa-reservation-channel-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.wa-reservation-channel-list div:last-child {
  border-bottom: 0;
}

.wa-reservation-channel-list span,
.wa-reservation-table small {
  display: grid;
  gap: 2px;
}

.wa-reservation-channel-list small,
.wa-reservation-table small {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 600;
}

.wa-reservation-channel-list strong,
.wa-reservation-table td:nth-child(5) {
  color: var(--ink);
  font-weight: 750;
}

.wa-reservation-channel-list em {
  color: var(--ink3);
  font-size: 12px;
  font-style: normal;
}

.wa-reservation-channel-accordion details {
  border-bottom: 1px solid var(--border);
}

.wa-reservation-channel-accordion details:last-child {
  border-bottom: 0;
}

.wa-reservation-channel-accordion summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

.wa-reservation-channel-accordion summary::-webkit-details-marker {
  display: none;
}

.wa-reservation-channel-accordion summary span,
.wa-reservation-channel-rows article > div:first-child {
  display: grid;
  gap: 2px;
}

.wa-reservation-channel-accordion summary small,
.wa-reservation-channel-rows small {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 600;
}

.wa-reservation-channel-accordion summary strong,
.wa-reservation-channel-rows article > span {
  color: var(--ink);
  font-weight: 750;
}

.wa-reservation-channel-accordion summary em {
  color: var(--ink3);
  font-size: 12px;
  font-style: normal;
}

.wa-reservation-channel-rows {
  display: grid;
  gap: 8px;
  padding: 2px 0 12px;
}

.wa-reservation-channel-rows article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(280px, auto);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 90%, var(--surface2));
}

.wa-reservation-channel-rows article > span {
  display: grid;
  gap: 2px;
  text-align: right;
}

.wa-reservation-channel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.wa-reservation-transfer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 86%, var(--layf-accent-soft-bg, var(--surface2)));
}

.wa-reservation-transfer span {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 650;
}

.wa-reservation-issues p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.wa-reservation-issues p.is-ok {
  border-color: color-mix(in srgb, var(--positive) 32%, var(--border));
  background: color-mix(in srgb, var(--positive) 8%, var(--surface));
}

.wa-reservation-ready-panel {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--positive) 32%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--positive) 8%, var(--surface));
}

.wa-reservation-ready-panel strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.wa-reservation-ready-panel p {
  margin: 5px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
}

.wa-reservation-table-scroll {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.wa-reservation-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
}

.wa-reservation-table th,
.wa-reservation-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  color: var(--ink2);
  font-size: 12px;
}

.wa-reservation-table thead th {
  background: var(--surface2);
  color: var(--ink3);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.wa-reservation-table tbody tr:last-child td {
  border-bottom: 0;
}

.wa-reservation-table td:nth-child(3) {
  color: var(--ink);
  font-weight: 650;
}

.wa-reservation-table td:last-child .wa-review-chip,
.wa-reservation-table td:last-child em {
  display: inline-flex;
  margin: 0 4px 4px 0;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 12%, var(--surface2));
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
}

.wa-reservation-table td:last-child .wa-review-chip.is-ready {
  background: color-mix(in srgb, var(--positive) 10%, var(--surface2));
  color: var(--ink2);
}

.wa-reservation-decision {
  display: grid;
  justify-items: start;
  gap: 7px;
  min-width: 210px;
}

.wa-reservation-decision strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.wa-reservation-decision small {
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.35;
}

.wa-reservation-correction {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.wa-reservation-correction select,
.wa-reservation-correction input {
  min-height: 32px;
  max-width: 190px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.wa-reservation-correction input {
  width: 94px;
  padding: 0 10px;
}

.wa-reservation-correction.is-compact select {
  max-width: 150px;
}

.wa-reservation-booking-settlement {
  display: grid;
  grid-template-columns: repeat(2, minmax(88px, 1fr)) auto;
  gap: 7px;
  align-items: end;
  max-width: 360px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--warning) 26%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
}

.wa-reservation-booking-settlement > small {
  grid-column: 1 / -1;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 700;
}

.wa-reservation-booking-settlement label {
  display: grid;
  gap: 4px;
  margin: 0;
}

.wa-reservation-booking-settlement label span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.wa-reservation-booking-settlement input {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  padding: 0 10px;
}

.wa-booking-month-settlement {
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--warning) 5%, var(--surface)), var(--surface)) !important;
}

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

.wa-booking-settlement-grid label {
  display: grid;
  gap: 6px;
  margin: 0;
}

.wa-booking-settlement-grid label span {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.wa-booking-settlement-grid input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 8px 10px;
}

.wa-booking-settlement-grid small {
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.35;
}

.wa-booking-settlement-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface2));
}

.wa-booking-settlement-result span,
.wa-booking-settlement-result small {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 650;
}

.wa-booking-settlement-result strong {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 780;
}

.wa-easyjet-stage {
  display: grid;
  gap: 16px;
}

.wa-easyjet-hero {
  border-color: color-mix(in srgb, var(--info, #3b82f6) 26%, var(--border)) !important;
}

.wa-easyjet-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.wa-easyjet-form-grid label {
  display: grid;
  gap: 6px;
  margin: 0;
}

.wa-easyjet-form-grid label span {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.wa-easyjet-form-grid input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 8px 10px;
}

.wa-easyjet-wide {
  grid-column: span 2;
}

.wa-easyjet-row-list {
  display: grid;
  gap: 8px;
}

.wa-easyjet-row-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.wa-easyjet-row-list article:last-child {
  border-bottom: 0;
}

.wa-easyjet-row-list strong,
.wa-easyjet-row-list span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}

.wa-easyjet-row-list small {
  display: block;
  margin-top: 2px;
  color: var(--ink3);
  font-size: 11px;
}

.wa-reservation-table td:last-child em {
  background: color-mix(in srgb, var(--positive) 10%, var(--surface2));
  color: var(--ink2);
}

.wa-vcc-table {
  min-width: 920px;
}

.wa-vcc-table input,
.wa-vcc-table select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
}

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

.wa-vcc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  border-color: var(--layf-accent-border, var(--border)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--layf-accent-soft-bg, var(--surface2))), var(--surface));
}

.wa-vcc-hero span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.wa-vcc-hero h2 {
  margin: 5px 0 4px;
  color: var(--ink);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: var(--weight-page-title);
  letter-spacing: 0;
}

.wa-vcc-hero p {
  margin: 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
}

.wa-vcc-hero-total {
  min-width: 190px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  text-align: right;
}

.wa-vcc-hero-total strong {
  display: block;
  color: var(--ink);
  font-size: 22px;
  font-weight: 780;
}

.wa-vcc-hero-total small {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 650;
}

.wa-vcc-month {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}

.wa-vcc-month summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 12px 14px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 720;
}

.wa-vcc-month summary span {
  display: grid;
  gap: 2px;
}

.wa-vcc-month summary small {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 650;
}

.wa-vcc-month summary strong {
  font-size: 14px;
}

.wa-vcc-month summary em {
  color: var(--ink3);
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
}

.wa-vcc-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
}

.wa-vcc-status-strip article {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 90%, var(--surface2));
}

.wa-vcc-status-strip article.is-muted {
  opacity: .58;
}

.wa-vcc-status-strip span {
  display: block;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.wa-vcc-status-strip strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 16px;
}

.wa-vcc-worklist {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.wa-vcc-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.1fr) minmax(100px, .55fr) minmax(130px, .7fr) minmax(135px, .75fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface2));
}

.wa-vcc-row.is-ready {
  border-color: color-mix(in srgb, var(--positive) 30%, var(--border));
  background: color-mix(in srgb, var(--positive) 6%, var(--surface));
}

.wa-vcc-row-main {
  display: grid;
  gap: 3px;
}

.wa-vcc-row-main strong {
  color: var(--ink);
  font-size: 13px;
}

.wa-vcc-row-main small {
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.35;
}

.wa-vcc-status-chip {
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 12%, var(--surface2));
  color: var(--ink);
  font-size: 10px;
  font-weight: 750;
}

.wa-vcc-row.is-ready .wa-vcc-status-chip {
  background: color-mix(in srgb, var(--positive) 12%, var(--surface2));
}

.wa-vcc-row label {
  display: grid;
  gap: 4px;
  margin: 0;
}

.wa-vcc-row label span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.wa-vcc-row input,
.wa-vcc-row select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
}

.wa-reservation-analytics {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.wa-reservation-analytics-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.wa-reservation-analytics-kpis div {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 84%, var(--surface2));
}

.wa-reservation-analytics-kpis span,
.wa-reservation-analytics-kpis small {
  display: block;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 650;
}

.wa-reservation-analytics-kpis strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--ink);
  font-size: 20px;
  font-weight: var(--weight-card-title);
}

.wa-reservation-analytics-bars {
  display: grid;
  gap: 9px;
}

.wa-reservation-analytics-bars > div {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(160px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.wa-reservation-analytics-bars span,
.wa-reservation-analytics-foot span {
  color: var(--ink2);
  font-size: 12px;
}

.wa-reservation-analytics-bars small {
  display: block;
  color: var(--ink3);
  font-size: 11px;
}

.wa-reservation-analytics-bars i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface2);
}

.wa-reservation-analytics-bars b {
  display: block;
  width: calc(var(--share) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--layf-accent-gradient, var(--accent));
}

.wa-reservation-analytics-bars strong {
  color: var(--ink);
  font-size: 13px;
}

.wa-reservation-analytics-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wa-reservation-channel-list--compact {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.wa-reservation-save {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, var(--layf-accent-soft-bg, var(--surface2)));
}

.wa-reservation-save strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.wa-reservation-save p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.4;
}

.wa-reservation-import-list {
  display: grid;
  gap: 10px;
}

.wa-reservation-import-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.wa-reservation-import-list article:last-child {
  border-bottom: 0;
}

.wa-reservation-import-list strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.wa-reservation-import-list span,
.wa-reservation-import-list p {
  margin: 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.4;
}

.wa-reservation-import-list b {
  color: var(--ink);
  font-size: 14px;
}

.wa-reservation-card--warning {
  border-color: color-mix(in srgb, var(--warning) 32%, var(--border)) !important;
  background: color-mix(in srgb, var(--warning) 7%, var(--surface)) !important;
}

.wa-reservation-card--warning .wa-reservation-table-scroll {
  background: var(--surface);
}

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

.wa-setting-card {
  display: grid;
  gap: 8px;
}

.wa-setting-card span {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.wa-setting-card strong {
  color: var(--ink);
  font-size: 18px;
}

.wa-setting-card--wide {
  grid-column: span 2;
}

@media (max-width: 1120px) {
  .wa-ledger-insight-grid {
    grid-template-columns: 1fr;
  }

  .wa-ledger-forecast-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-ledger-source-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-ledger-compare-main {
    grid-template-columns: 1fr;
  }

  .wa-ledger-channel-quality-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-ledger-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-ledger-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-ledger-control-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wa-finance-kpis,
  .wa-reservation-summary,
  .wa-reservation-status-strip,
  .wa-reservation-analytics-kpis,
  .wa-month-process-grid,
  .wa-settings-grid,
  .wa-input-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wa-finance-dashboard-grid,
  .wa-finance-performance-grid,
  .wa-reservation-grid {
    grid-template-columns: 1fr;
  }

  .wa-finance-alerts {
    grid-column: auto;
  }

  .wa-waterfall {
    grid-column: auto;
  }

  .wa-waterfall-bars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .wa-ledger-head,
  .wa-ledger-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .wa-ledger-coverage-warning {
    flex-direction: column;
    gap: 3px;
  }

  .wa-ledger-head {
    padding: 17px;
  }

  .wa-ledger-source-status,
  .wa-reservation-modebar {
    width: 100%;
  }

  .wa-ledger-source-status {
    min-width: 0;
  }

  .wa-ledger-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-ledger-metric {
    min-height: 82px;
    padding: 12px;
  }

  .wa-ledger-forecast,
  .wa-ledger-change-journal,
  .wa-ledger-source-contract,
  .wa-ledger-annual-compare,
  .wa-ledger-channel-quality {
    padding: 14px;
  }

  .wa-ledger-forecast-grid {
    grid-template-columns: 1fr;
  }

  .wa-ledger-source-flow {
    grid-template-columns: 1fr;
  }

  .wa-ledger-contract-note {
    flex-direction: column;
    gap: 4px;
  }

  .wa-ledger-compare-channels {
    overflow-x: auto;
  }

  .wa-ledger-compare-table-head,
  .wa-ledger-compare-channel {
    min-width: 560px;
  }

  .wa-ledger-channel-quality-list {
    overflow-x: auto;
  }

  .wa-ledger-channel-quality-head,
  .wa-ledger-channel-quality-row {
    min-width: 720px;
  }

  .wa-ledger-journal-list {
    max-height: none;
  }

  .wa-ledger-journal-list li {
    grid-template-columns: 8px minmax(0, 1fr);
  }

  .wa-ledger-journal-list time {
    grid-column: 2;
  }

  .wa-ledger-tools {
    grid-template-columns: 1fr;
    padding: 13px;
  }

  .wa-ledger-control-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 13px;
  }

  .wa-ledger-panel-head {
    padding: 15px 14px 12px;
  }

  .wa-ledger-panel-actions {
    width: 100%;
    justify-content: space-between;
  }

  .wa-ledger-empty-state {
    justify-items: start;
    min-height: 210px;
    padding: 34px 16px;
    text-align: left;
  }

  .wa-ledger-detail {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .wa-finance-toolbar,
  .wa-executive-summary,
  .wa-close-hero,
  .wa-table-help,
  .wa-finance-month-grid {
    grid-template-columns: 1fr;
  }

  .wa-executive-summary {
    display: grid;
  }

  .wa-close-score {
    justify-items: start;
  }

  .wa-finance-switch,
  .wa-finance-months {
    width: 100%;
  }

  .wa-finance-months {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .wa-finance-months button {
    min-width: 0;
  }

  .wa-table-hero-metrics {
    grid-template-columns: 1fr;
  }

  .wa-table-section-toggle {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .wa-derived-finance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-table-section-copy > small {
    white-space: normal;
  }

  .wa-table-section-totals {
    grid-template-columns: 1fr 1fr 30px;
    gap: 8px;
  }

  .wa-finance-table-stack .wa-table-section > .wa-table-scroll {
    padding: 12px 10px 8px;
  }

  .wa-finance-kpis,
  .wa-reservation-summary,
  .wa-reservation-status-strip,
  .wa-reservation-analytics-kpis,
  .wa-month-process-grid,
  .wa-settings-grid,
  .wa-input-grid {
    grid-template-columns: 1fr;
  }

  .wa-setting-card--wide {
    grid-column: auto;
  }

  .wa-reco-formula {
    grid-template-columns: 1fr;
  }

  .wa-reco-formula > span {
    display: none;
  }

  .wa-reco-row {
    grid-template-columns: 1fr;
  }

  .wa-reservation-save,
  .wa-reservation-workflow-hero,
  .wa-vcc-hero,
  .wa-vcc-row,
  .wa-reservation-analytics-bars > div,
  .wa-reservation-channel-rows article,
  .wa-reservation-transfer,
  .wa-reservation-import-list article {
    display: grid;
    grid-template-columns: 1fr;
  }

  .wa-reservation-channel-actions {
    justify-content: flex-start;
  }

  .wa-reservation-channel-rows article > span {
    text-align: left;
  }

  .wa-reservation-workflow-status {
    min-width: 0;
    text-align: left;
  }

  .wa-vcc-hero-total {
    min-width: 0;
    text-align: left;
  }

  .wa-vcc-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-booking-settlement-grid {
    grid-template-columns: 1fr;
  }

  .wa-easyjet-form-grid,
  .wa-easyjet-row-list article {
    grid-template-columns: 1fr;
  }

  .wa-easyjet-wide {
    grid-column: auto;
  }

  .wa-booking-settlement-result {
    display: grid;
    grid-template-columns: 1fr;
  }

  .wa-reservation-booking-settlement {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .wa-waterfall-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Layf component polish contract: cards, forms and tables.
   Scoped to module pages so navigation, auth and share chrome keep their own
   behavior while module interiors inherit the same premium-light treatment. */
.page-wrap.module-page :where(
  .card,
  [class$='-card'],
  [class*='-card '],
  .shopping-sidebar,
  .shopping-head,
  .shopping-quick-add,
  .shopping-toolbar,
  .shopping-board,
  .shopping-stat,
  .shopping-no-list
) {
  border: 1px solid var(--border) !important;
  border-radius: var(--layf-card-radius) !important;
  color: var(--ink);
  box-shadow: var(--layf-card-shadow) !important;
}

.page-wrap.module-page :where(.card, .summary-card) {
  background: var(--surface) !important;
}

.page-wrap.module-page :where(
  .card,
  [class$='-card'],
  [class*='-card '],
  .shopping-sidebar,
  .shopping-head,
  .shopping-quick-add,
  .shopping-toolbar,
  .shopping-board,
  .shopping-stat,
  .shopping-no-list
):where(:hover, .is-active, .is-selected) {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border)) !important;
  box-shadow: var(--layf-card-shadow-hover) !important;
}

.page-wrap.module-page :where(.card, [class$='-card'], [class*='-card ']) :where(.card, [class$='-card'], [class*='-card ']) {
  box-shadow: none !important;
}

.page-wrap.module-page :where(
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
  select,
  textarea,
  .field-input,
  .planner-qm-input,
  .planner-qm-title-input,
  .planner-qm-textarea,
  .fh-dialog-input,
  .svc-input,
  .svc-select,
  .svc-textarea,
  .insp-form-input,
  .insp-form-textarea,
  .cs-input,
  .cs-select,
  .ac-form-input,
  .ev-form-input,
  .health-form-input
) {
  box-sizing: border-box;
  min-height: var(--control-height);
  border: 1px solid var(--layf-control-border) !important;
  border-radius: var(--layf-control-radius) !important;
  background: var(--layf-control-bg) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.page-wrap.module-page :where(
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
  select,
  textarea,
  .field-input,
  .planner-qm-input,
  .planner-qm-title-input,
  .planner-qm-textarea,
  .fh-dialog-input,
  .svc-input,
  .svc-select,
  .svc-textarea,
  .insp-form-input,
  .insp-form-textarea,
  .cs-input,
  .cs-select,
  .ac-form-input,
  .ev-form-input,
  .health-form-input
):focus {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border)) !important;
  background: var(--surface) !important;
  box-shadow: var(--layf-focus-ring) !important;
}

.page-wrap.module-page :where(textarea, .field-input:is(textarea), .planner-qm-textarea, .fh-dialog-input--textarea, .svc-textarea, .insp-form-textarea, .cs-input--textarea) {
  line-height: var(--line-normal);
  resize: vertical;
}

:where(.module-form-modal, .fh-dialog-layer, [class$='-modal'], [class*='-modal ']) :where(
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
  select,
  textarea,
  .field-input,
  .planner-qm-input,
  .planner-qm-title-input,
  .planner-qm-textarea,
  .fh-dialog-input,
  .svc-input,
  .svc-select,
  .svc-textarea,
  .insp-form-input,
  .insp-form-textarea,
  .cs-input,
  .cs-select,
  .ac-form-input,
  .ev-form-input,
  .health-form-input
) {
  box-sizing: border-box;
  min-height: var(--control-height);
  border: 1px solid var(--layf-control-border) !important;
  border-radius: var(--layf-control-radius) !important;
  background: var(--layf-control-bg) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

:where(.module-form-modal, .fh-dialog-layer, [class$='-modal'], [class*='-modal ']) :where(
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
  select,
  textarea,
  .field-input,
  .planner-qm-input,
  .planner-qm-title-input,
  .planner-qm-textarea,
  .fh-dialog-input,
  .svc-input,
  .svc-select,
  .svc-textarea,
  .insp-form-input,
  .insp-form-textarea,
  .cs-input,
  .cs-select,
  .ac-form-input,
  .ev-form-input,
  .health-form-input
):focus {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border)) !important;
  background: var(--surface) !important;
  box-shadow: var(--layf-focus-ring) !important;
}

:where(.module-form-modal-card, .fh-dialog-card, [class$='-modal-card'], [class*='-modal-card '], [class$='-modal-panel'], [class*='-modal-panel ']) {
  border: 1px solid var(--border) !important;
  border-radius: var(--layf-modal-radius) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-lg) !important;
}

.page-wrap.module-page :where(table, .svc-table, .svc-settle-table, .insp-history-table, .medical-table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
}

.page-wrap.module-page :where(thead th, .svc-table thead th, .svc-settle-table th, .insp-history-table thead th, .medical-table-head) {
  background: color-mix(in srgb, var(--surface2) 82%, var(--accent-lt)) !important;
  color: var(--ink2) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: var(--weight-section-title) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
}

.page-wrap.module-page :where(tbody tr, .svc-table tbody tr, .insp-history-table tbody tr) {
  transition: background .16s ease, border-color .16s ease;
}

.page-wrap.module-page :where(tbody tr:hover, .svc-table tbody tr:hover, .insp-history-table tbody tr:hover) {
  background: color-mix(in srgb, var(--surface2) 72%, var(--accent-lt)) !important;
}

.page-wrap.module-page :where(
  .svc-module-tab,
  .svc-prop-chip,
  .svc-type-tab,
  .insp-tab,
  .ac-prop-pill,
  .ac-type-tab,
  .cs-ptab,
  .shopping-list-tab
) {
  font-family: var(--font-body) !important;
  letter-spacing: 0 !important;
}

html[data-theme='layf-core'] .page-wrap.module-page :where(
  .svc-module-tab.is-active,
  .svc-prop-chip.is-active,
  .svc-type-tab.is-active,
  .insp-tab.is-active,
  .ac-prop-pill.is-active,
  .ac-type-tab.is-active,
  .cs-ptab--active,
  .shopping-list-tab.is-active
) {
  border-color: color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 58%, var(--border)) !important;
  background: color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 22%, var(--surface)) !important;
  color: var(--ink) !important;
  box-shadow: 0 3px 9px color-mix(in srgb, var(--layf-accent-violet, var(--accent)) 14%, transparent) !important;
}

.page-wrap.module-page :where(
  .svc-empty,
  .cs-zadania-empty,
  .cs-supply-empty,
  .ac-empty,
  .docs-mvp-empty,
  .properties-empty,
  .packing-empty-state,
  .pets-empty-state,
  .shopping-no-list
) {
  border: 1px solid var(--layf-accent-border, var(--border)) !important;
  border-radius: var(--layf-card-radius) !important;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent-lt)) !important;
}

.page-wrap.module-page :where(
  .svc-empty-icon,
  .cs-supply-empty-emoji,
  .ac-empty-icon,
  .ev-empty-icon,
  .pet-doc-empty-icon,
  .docs-viewer-empty-icon
) {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-inline: auto;
  border: 1px solid var(--layf-accent-border, var(--border));
  border-radius: 16px;
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  color: var(--ink);
  font-size: 20px !important;
  line-height: 1;
}

/* Sprint 8: visible-module active-state QA coverage.
   This covers all production module surfaces and hidden embedded dependencies
   that users can reach through production flows. Semantic status chips keep
   their domain colours; navigation/tabs/filters/list selections use Layf. */
.page-wrap.module-page :where(
  .family-calendar-view-switch button,
  .docs-mvp-tabs button,
  .docs-doc-filter-pill,
  .docs-xlsx-tab,
  .family-tabs button,
  .agreements-view-toggle button,
  .properties-tabs button,
  .properties-filter-chips button,
  .pet-tab-chip,
  .pets-tabs button,
  .health-nav-btn,
  .health-filter-btn,
  .medical-tabs button,
  .medical-filter button,
  .sv2-tab,
  .sv2-disc-pill,
  .sv2-sport-type-btn,
  .sv2-day-btn,
  .ev-tab,
  .ev-cover-tab,
  .packing-trip,
  .module-brief-row,
  .adm-console-tabs button,
  .people-person-card,
  .heritage-card,
  .ftree-card,
  .family-tree-member-card,
  .family-tree-warm-person,
  .settings-theme-tile,
  .settings-backup-row
) {
  letter-spacing: 0 !important;
}

html[data-theme='layf-core'] .page-wrap.module-page :where(
  .family-calendar-view-switch button.is-active,
  .docs-mvp-tabs button.is-active,
  .docs-doc-filter-pill.is-active,
  .docs-xlsx-tab.is-active,
  .family-tabs button.is-active,
  .agreements-view-toggle button.is-active,
  .properties-filter-chips button.is-active,
  .pet-tab-chip.is-active,
  .pets-tabs button.is-active,
  .health-nav-btn.is-active,
  .health-filter-btn.is-active,
  .medical-tabs button.is-active,
  .medical-filter button.is-active,
  .sv2-tab.is-active,
  .sv2-disc-pill.is-active,
  .sv2-sport-type-btn.is-active,
  .sv2-day-btn.is-active,
  .ev-tab.is-active,
  .ev-cover-tab.is-active,
  .packing-trip.is-active,
  .module-brief-row.is-active,
  .adm-console-tabs button.active,
  .people-person-card.is-active,
  .heritage-card.is-selected,
  .ftree-card.is-selected,
  .family-tree-member-card.is-active,
  .family-tree-warm-person.is-active,
  .settings-theme-tile.is-active,
  .settings-backup-row.is-active
) {
  border-color: var(--layf-accent-border, var(--border)) !important;
  background: var(--layf-accent-gradient-soft, var(--accent-lt)) !important;
  color: var(--ink) !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--layf-accent-violet) 10%, transparent) !important;
}

html[data-theme='layf-core'] .page-wrap.module-page :where(
  .family-calendar-view-switch button.is-active *,
  .docs-mvp-tabs button.is-active *,
  .docs-doc-filter-pill.is-active *,
  .docs-xlsx-tab.is-active *,
  .family-tabs button.is-active *,
  .agreements-view-toggle button.is-active *,
  .properties-filter-chips button.is-active *,
  .pet-tab-chip.is-active *,
  .pets-tabs button.is-active *,
  .health-nav-btn.is-active *,
  .health-filter-btn.is-active *,
  .medical-tabs button.is-active *,
  .medical-filter button.is-active *,
  .sv2-tab.is-active *,
  .sv2-disc-pill.is-active *,
  .sv2-sport-type-btn.is-active *,
  .sv2-day-btn.is-active *,
  .ev-tab.is-active *,
  .ev-cover-tab.is-active *,
  .packing-trip.is-active *,
  .module-brief-row.is-active *,
  .adm-console-tabs button.active *,
  .people-person-card.is-active *,
  .heritage-card.is-selected *,
  .ftree-card.is-selected *,
  .family-tree-member-card.is-active *,
  .family-tree-warm-person.is-active *,
  .settings-theme-tile.is-active *,
  .settings-backup-row.is-active *
) {
  color: inherit !important;
}

.page-wrap.module-page :where(
  .family-calendar-view-switch button,
  .docs-mvp-tabs button,
  .docs-doc-filter-pill,
  .docs-xlsx-tab,
  .family-tabs button,
  .agreements-view-toggle button,
  .properties-tabs button,
  .properties-filter-chips button,
  .health-nav-btn,
  .health-filter-btn,
  .medical-tabs button,
  .medical-filter button,
  .sv2-tab,
  .sv2-disc-pill,
  .ev-tab,
  .ev-cover-tab,
  .adm-console-tabs button
):focus-visible {
  outline: 2px solid var(--layf-accent-lavender, var(--accent)) !important;
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   THERMAL FLUSH — Płukania termiczne (Legionella)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Flush tab — subtle temperature tint to distinguish from inspection tabs */
.insp-tab--flush { font-weight: 500; }
.insp-tab--flush.is-active { color: var(--ink) !important; }

/* ── Info card ── */
.insp-flush-info-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.insp-flush-info-icon  { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
.insp-flush-info-title { font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.insp-flush-info-sub   { font-size: .82rem; color: var(--ink2); line-height: 1.5; }

/* ── Level 1: apartment grid ── */
.insp-flush-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.insp-flush-apt-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
  user-select: none;
}
.insp-flush-apt-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.insp-flush-apt-card:active { transform: translateY(0); }
.insp-flush-apt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.insp-flush-apt-name        { font-size: .93rem; font-weight: 600; color: var(--ink); }
.insp-flush-apt-meta        { display: flex; gap: 8px; flex-wrap: wrap; }
.insp-flush-meta-chip       { font-size: .76rem; color: var(--ink2); background: var(--surface2); border-radius: 6px; padding: 2px 8px; }
.insp-flush-apt-points-count{ font-size: .8rem; color: var(--ink3, var(--ink2)); }
.insp-flush-apt-footer      { margin-top: auto; padding-top: 4px; }

/* ── Status badges ── */
.insp-flush-status           { font-size: .74rem; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.insp-flush-status--pending  { background: var(--surface2); color: var(--ink2); }
.insp-flush-status--active   { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #92400e; }
.insp-flush-status--done     { background: color-mix(in srgb, #22c55e 15%, transparent); color: #166534; }
.insp-flush-status--fail     { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.insp-flush-status--overdue  { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }

/* ── Session banner ── */
.insp-flush-session-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 10px;
  margin-bottom: 20px;
  position: relative;
}
.insp-flush-session-left  { grid-column: 1; }
.insp-flush-session-right { grid-column: 2; grid-row: 1; display: flex; align-items: center; }
.insp-flush-session-bar-wrap { grid-column: 1 / -1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.insp-flush-session-bar-fill { height: 100%; background: var(--layf-accent-gradient, var(--accent)); border-radius: 2px; transition: width .4s ease; }
.insp-flush-session-name  { font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.insp-flush-session-meta  { display: flex; gap: 8px; flex-wrap: wrap; }
.insp-flush-session-pct   { font-size: 1.6rem; font-weight: 700; color: var(--ink); }

/* ── Apt progress bar ── */
.insp-flush-apt-bar-wrap  { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin: 2px 0; }
.insp-flush-apt-bar-fill  { height: 100%; background: var(--layf-accent-gradient, var(--accent)); border-radius: 2px; transition: width .3s ease; }
.insp-flush-apt-fraction  { font-size: .76rem; color: var(--ink2); }

/* ── Breadcrumb nav ── */
.insp-flush-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.insp-flush-breadcrumb { font-size: .88rem; font-weight: 600; color: var(--ink); }

/* ── Level 2: apartment detail ── */
.insp-flush-apt-header    { margin-bottom: 20px; }
.insp-flush-detail-title  { font-size: 1.1rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.insp-flush-detail-meta   { font-size: .82rem; color: var(--ink2); }
.insp-flush-section-label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); margin-bottom: 10px; }
.insp-flush-points-section { margin-top: 4px; }
.insp-flush-points-list   { display: flex; flex-direction: column; gap: 8px; }

.insp-flush-point-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  transition: box-shadow .15s;
}
.insp-flush-point-row--done    { border-color: color-mix(in srgb, #22c55e 30%, var(--border)); }
.insp-flush-point-row:hover    { box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.insp-flush-point-icon         { font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.insp-flush-point-icon svg     { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink2); }
.insp-flush-point-name         { font-size: .88rem; font-weight: 600; color: var(--ink); }
.insp-flush-point-loc          { font-size: .76rem; color: var(--ink2); margin-top: 1px; }
.insp-flush-point-temps        { font-size: .76rem; color: var(--ink2); margin-top: 3px; display: flex; gap: 4px; align-items: center; }
.insp-flush-pt-arrow           { color: var(--ink3, var(--ink2)); }
.insp-flush-temp-warn          { color: #b45309; font-weight: 600; }

/* ── New session modal helpers ── */
.insp-flush-apt-checks   { display: flex; flex-direction: column; gap: 8px; }
.insp-flush-check-label  { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink); cursor: pointer; }

/* ── Level 3: step wizard ── */
.insp-flush-wizard-wrap { max-width: 540px; }

.insp-flush-step-nav {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 28px;
  position: relative;
}
.insp-flush-step-nav::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 9px;
  right: 9px;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.insp-flush-step-pip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 1;
}
.insp-flush-step-pip-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--border);
  transition: background .2s;
}
.insp-flush-step-pip.is-active .insp-flush-step-pip-dot {
  background: var(--layf-accent-violet, var(--accent));
  box-shadow: 0 0 0 2px var(--layf-accent-violet, var(--accent));
}
.insp-flush-step-pip.is-done .insp-flush-step-pip-dot {
  background: #22c55e;
  box-shadow: 0 0 0 2px #22c55e;
}
.insp-flush-step-pip-label {
  font-size: .68rem;
  color: var(--ink2);
  text-align: center;
  font-weight: 500;
  white-space: nowrap;
}
.insp-flush-step-pip.is-active .insp-flush-step-pip-label { color: var(--ink); font-weight: 600; }
.insp-flush-step-pip.is-done   .insp-flush-step-pip-label { color: #166534; }

.insp-flush-wizard-card { max-width: 540px; }
.insp-flush-wizard-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 0 20px;
  gap: 12px;
  min-height: 200px;
}
.insp-flush-wizard-icon  { font-size: 2.4rem; }
.insp-flush-wizard-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.insp-flush-wizard-sub   { font-size: .84rem; color: var(--ink2); line-height: 1.5; max-width: 360px; }
.insp-flush-wizard-hint  { font-size: .76rem; color: var(--ink3, var(--ink2)); margin-top: -4px; }
.insp-flush-wizard-warn  { font-size: .82rem; color: #b45309; background: color-mix(in srgb, #f59e0b 12%, transparent); border-radius: 8px; padding: 6px 14px; }

.insp-flush-wizard-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  max-width: 220px;
}
.insp-flush-wizard-label      { font-size: .8rem; font-weight: 600; color: var(--ink2); }
.insp-flush-wizard-temp-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s;
}
.insp-flush-wizard-temp-input:focus { border-color: var(--layf-accent-border, var(--accent)); outline: none; }

.insp-flush-timer-ring {
  --flush-timer-pct: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    var(--layf-accent-violet, var(--accent)) calc(var(--flush-timer-pct) * 360deg),
    var(--border) 0
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 4px 0;
  transition: background .5s;
}
.insp-flush-timer-ring::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--surface);
}
.insp-flush-timer-ring.is-done {
  background: conic-gradient(#22c55e 360deg, transparent 0);
}
.insp-flush-timer-value {
  position: relative; z-index: 1;
  font-size: 1.6rem; font-weight: 700; color: var(--ink); letter-spacing: .04em;
}
.insp-flush-timer-label {
  position: relative; z-index: 1;
  font-size: .65rem; color: var(--ink2); font-weight: 500; margin-top: 1px;
}
.insp-flush-wizard-done-chip {
  font-size: .84rem; font-weight: 600;
  color: #166534;
  background: color-mix(in srgb, #22c55e 15%, transparent);
  border-radius: 999px; padding: 6px 16px;
}
.insp-flush-wizard-actions-right { display: flex; align-items: center; gap: 8px; }

.insp-flush-wizard-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 280px;
  background: var(--surface2);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: .85rem;
}
.insp-flush-wizard-summary-key { color: var(--ink2); }
.insp-flush-wizard-summary-val { font-weight: 600; color: var(--ink); }
.insp-flush-summary-warn       { color: #b45309; }

.insp-flush-wizard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Dark mode */
html[data-dark='true'] {
  .insp-flush-status--active { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #fcd34d; }
  .insp-flush-status--done   { background: color-mix(in srgb, #22c55e 20%, transparent); color: #86efac; }
  .insp-flush-wizard-warn    { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #fcd34d; }
  .insp-flush-summary-warn   { color: #fcd34d; }
  .insp-flush-step-pip.is-done .insp-flush-step-pip-label { color: #86efac; }
}

/* Mobile */
@media (max-width: 560px) {
  .insp-flush-grid { grid-template-columns: 1fr; }
  .insp-flush-point-row { grid-template-columns: 28px 1fr; gap: 8px 10px; }
  .insp-flush-point-right { grid-column: 2; }
  .insp-flush-step-pip-label { font-size: .6rem; }
}

/* ── Apt card — refreshed structure ── */

/* Equal-height cards in grid */
.insp-flush-grid {
  align-items: stretch;
}
.insp-flush-apt-card {
  padding: 14px 16px;
  gap: 8px;
  cursor: pointer;
}
.insp-flush-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.insp-flush-card-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.insp-flush-card-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.insp-flush-card-bar-wrap {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.insp-flush-card-bar-fill {
  height: 100%;
  background: var(--layf-accent-gradient, var(--accent));
  border-radius: 2px;
  transition: width .3s ease;
  min-width: 0;
}
.insp-flush-card-fraction {
  font-size: .74rem;
  color: var(--ink2);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.insp-flush-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  font-size: .74rem;
  color: var(--ink2);
  min-height: 1.2em; /* prevent height jump when dates absent */
}
.insp-flush-due-warn { color: var(--danger); font-weight: 600; }
.insp-flush-card-footer {
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.insp-flush-card-footer .btn {
  width: 100%;
  border-radius: 10px;
  font-size: .82rem;
  padding: 7px 12px;
}

/* ── Point row — right panel ── */
.insp-flush-point-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* ── Centered pop-out modal (was: drawer) ── */
.insp-flush-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 300;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.insp-flush-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  z-index: 301;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.insp-flush-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.insp-flush-drawer-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.insp-flush-drawer-title       { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.insp-flush-drawer-meta        { font-size: .8rem; color: var(--ink2); }
.insp-flush-drawer-point-name  { font-size: .82rem; color: var(--ink2); margin-top: 2px; }
.insp-flush-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.insp-flush-drawer-apt-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.insp-flush-no-session-note { text-align: center; }

/* ── Wizard inside modal — layout overrides ── */
.insp-flush-wizard-step-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.insp-flush-wizard-step-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}
.insp-flush-timer-controls { display: flex; justify-content: center; margin: 4px 0; }
.insp-flush-wizard-safety  { font-size: .78rem; line-height: 1.4; text-align: center; }

/* In modal: wizard body is left-aligned, not centered */
.insp-flush-modal .insp-flush-wizard-body {
  align-items: flex-start;
  text-align: left;
  min-height: unset;
  padding: 0;
}
.insp-flush-modal .insp-flush-timer-ring,
.insp-flush-modal .insp-flush-wizard-safety,
.insp-flush-modal .insp-flush-wizard-done-chip,
.insp-flush-modal .insp-flush-timer-controls { align-self: center; }
.insp-flush-modal .insp-flush-wizard-input-group { align-items: flex-start; max-width: 100%; }
.insp-flush-modal .insp-flush-wizard-temp-input  { max-width: 180px; text-align: left; font-size: 1.2rem; }

.insp-flush-wizard-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.insp-flush-modal .insp-flush-wizard-summary-row { max-width: 100%; }

/* Dark mode */
html[data-dark='true'] {
  .insp-flush-modal-bg { background: rgba(0,0,0,.55); }
  .insp-flush-modal { background: var(--surface); }
}

/* Mobile — centered pop-out (not bottom sheet) */
@media (max-width: 560px) {
  .insp-flush-modal {
    width: min(560px, calc(100vw - 32px));
    max-height: 88dvh;
    border-radius: 18px;
  }
  .insp-flush-drawer-header { padding: 14px 16px 12px; }
  .insp-flush-drawer-body   { padding: 16px; }
}

/* ── Legionella reference card (collapsible <details>) ── */
.insp-flush-legionella-card {
  display: block;
  padding: 0;
  overflow: hidden;
}
.insp-flush-legionella-card > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.insp-flush-legionella-card > summary::-webkit-details-marker { display: none; }
.insp-flush-legionella-card > summary::marker { display: none; }
.insp-flush-legionella-header-text { flex: 1; min-width: 0; }
.insp-flush-legionella-chevron {
  font-size: 1.1rem;
  color: var(--ink2);
  transition: transform .2s ease;
  flex-shrink: 0;
  line-height: 1;
}
.insp-flush-legionella-card[open] > summary .insp-flush-legionella-chevron {
  transform: rotate(90deg);
}
.insp-flush-legionella-card > .insp-flush-legionella-table,
.insp-flush-legionella-card > .insp-flush-legionella-footer {
  padding: 0 16px;
}
.insp-flush-legionella-card > .insp-flush-legionella-footer {
  padding-bottom: 14px;
  padding-top: 10px;
}
.insp-flush-legionella-card > .insp-flush-legionella-table {
  margin-bottom: 0;
}
.insp-flush-legionella-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
.insp-flush-legionella-title { font-size: .92rem; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.insp-flush-legionella-sub   { font-size: .76rem; }

.insp-flush-legionella-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.insp-flush-legionella-row {
  display: grid;
  grid-template-columns: 90px 90px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  font-size: .8rem;
  border-bottom: 1px solid var(--border);
}
.insp-flush-legionella-row:last-child { border-bottom: none; }
.insp-flush-legionella-temp { font-weight: 700; font-size: .85rem; }
.insp-flush-legionella-time { color: var(--ink2); }
.insp-flush-legionella-risk { }

.insp-flush-legionella-row--danger { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.insp-flush-legionella-row--warn   { background: color-mix(in srgb, #f59e0b 8%, transparent); }
.insp-flush-legionella-row--ok     { background: color-mix(in srgb, #22c55e 6%, transparent); }
.insp-flush-legionella-row--best   { background: color-mix(in srgb, #16a34a 8%, transparent); }

.insp-flush-legionella-footer {
  font-size: .78rem;
  line-height: 1.5;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* ── Validation / required ── */
.insp-flush-required { color: var(--danger); font-size: .85em; margin-left: 2px; }
.insp-flush-input-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent);
}
.insp-flush-wizard-error {
  font-size: .82rem;
  color: var(--danger);
  font-weight: 600;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-radius: 8px;
}

/* ── Duration chip in point row ── */
.insp-flush-pt-dur { font-size: .75rem; }

/* ── Manage-mode ── */
.insp-flush-manage-hint { font-size: .75rem; font-weight: 400; }
.insp-flush-pt-delete {
  color: var(--danger) !important;
  opacity: .75;
  font-size: .9rem;
  padding: 2px 6px !important;
}
.insp-flush-pt-delete:hover { opacity: 1; }
.insp-flush-pt-done-lock { font-size: .85rem; padding: 4px 6px; }

/* ── Cycle progress bar (replaces big session banner) ── */
.insp-flush-cycle-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 4px;
}
.insp-flush-cycle-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.insp-flush-cycle-name { font-size: .82rem; font-weight: 600; color: var(--ink); }
.insp-flush-cycle-prog { font-size: .76rem; }
.insp-flush-cycle-track {
  height: 5px;
  background: var(--surface2, var(--border));
  border-radius: 99px;
  overflow: hidden;
}
.insp-flush-cycle-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .4s ease;
}

/* ── Apt card meta — date + countdown ── */
.insp-flush-card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: .78rem;
}
.insp-flush-card-done { color: var(--ink2); }
.insp-flush-card-next { color: var(--ink2); }
.insp-flush-card-next--overdue { color: var(--danger); font-weight: 600; }

/* ── Timer controls — start + pause side by side ── */
.insp-flush-timer-btn-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Flush — device card
   ══════════════════════════════════════════════════════════════════════════════ */

.insp-flush-device-card {
  margin-bottom: 12px;
}
.insp-flush-device-card--empty {
  border: 1.5px dashed var(--border);
  background: var(--surface2);
}
.insp-flush-device-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.insp-flush-device-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.insp-flush-device-body { flex: 1; min-width: 0; }
.insp-flush-device-name {
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
}
.insp-flush-device-empty-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.insp-flush-device-cert {
  display: inline-block;
  font-size: .76rem;
  font-weight: 500;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 20px;
}
.insp-flush-device-cert--ok {
  background: color-mix(in srgb, #22c55e 12%, var(--surface));
  color: #166534;
}
html[data-dark='true'] .insp-flush-device-cert--ok { color: #86efac; background: rgba(34,197,94,.15); }
.insp-flush-device-cert--warn {
  background: color-mix(in srgb, #f59e0b 14%, var(--surface));
  color: #92400e;
}
html[data-dark='true'] .insp-flush-device-cert--warn { color: #fcd34d; background: rgba(245,158,11,.15); }
.insp-flush-device-cert--expired {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger);
}

/* ── Wizard — photo section ── */
.insp-flush-wizard-photo-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.insp-flush-wizard-photo-label {
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.insp-flush-wizard-photo-hint {
  font-size: .78rem;
  margin-bottom: 10px;
}
.insp-flush-wizard-photo-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.insp-flush-wizard-photo-preview {
  margin-bottom: 10px;
}
.insp-flush-wizard-photo-preview img {
  max-width: 100%;
  max-height: 180px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
}
.insp-flush-wizard-photo-remove { display: block; }

/* ── Point row — photo thumbnail ── */
.insp-flush-pt-photo-thumb {
  display: block;
  margin-top: 6px;
}
.insp-flush-pt-photo-thumb img {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border);
  transition: opacity .15s;
}
.insp-flush-pt-photo-thumb:hover img { opacity: .85; }

/* ══════════════════════════════════════════════════════════════════════════════
   Chimney inspection tab (przeglądy kominiarskie)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Tab pill — subtle smoke-grey tint */
.insp-tab--chimney { font-weight: 500; }
.insp-tab--chimney.is-active { color: var(--ink) !important; }

/* Banner — reuses flush cycle bar styles; eligible state turns fill accent */
.insp-chimney-banner { margin-bottom: 16px; }
.insp-chimney-fill--eligible { background: var(--accent) !important; }
.insp-chimney-banner-actions { margin-top: 10px; display: flex; justify-content: flex-end; }

/* Apt card chips — each vent grille as a compact chip */
.insp-chimney-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.insp-chimney-pt-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: .78rem;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--ink2);
}
.insp-chimney-pt-chip svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.insp-chimney-pt-chip--done {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  color: var(--ink);
  font-weight: 500;
}

/* Add-point inline form inside drawer */
.insp-chimney-add-point-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.insp-chimney-add-input { flex: 1; min-width: 0; }

/* Vent SVG icon in point rows — inherits ink2 stroke */
.insp-flush-point-icon svg {
  width: 22px;
  height: 22px;
  color: var(--ink2);
}
/* First-login tutorial. Completion state stays local and per authenticated user. */
.settings-onboarding-draft {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    var(--surface);
}

.settings-onboarding-draft-icon,
.layf-onboarding-aside-icon {
  display: grid;
  place-items: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
}

.settings-onboarding-draft-icon {
  width: 52px;
  height: 52px;
  border-radius: 17px;
}

.settings-onboarding-draft-icon svg,
.layf-onboarding-aside-icon svg {
  width: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-onboarding-draft-copy {
  min-width: 0;
}

.settings-onboarding-draft-copy .section-title,
.settings-onboarding-draft-copy .settings-copy {
  margin: 0;
}

.settings-onboarding-draft-copy .settings-copy {
  margin-top: 4px;
}

.settings-onboarding-draft-badge,
.layf-onboarding-draft-badge {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.layf-onboarding-layer {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  padding: 24px;
}

.layf-onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 33, .58);
  backdrop-filter: blur(10px);
}

.layf-onboarding-card {
  position: relative;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  width: min(900px, 100%);
  min-height: 590px;
  max-height: min(760px, calc(100dvh - 48px));
  overflow: hidden;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 28px;
  box-shadow: 0 28px 90px rgba(15, 18, 33, .28);
}

.layf-onboarding-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 36%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--surface2)), var(--surface2));
  border-right: 1px solid color-mix(in srgb, var(--accent) 13%, var(--border));
}

.layf-wordmark--onboarding .layf-wordmark-text {
  font-size: 27px;
}

.layf-onboarding-aside-icon {
  width: 88px;
  height: 88px;
  margin-top: auto;
  border-radius: 28px;
}

.layf-onboarding-aside-icon svg {
  width: 42px;
}

.layf-onboarding-aside p {
  margin: 22px 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.65;
}

.layf-onboarding-dots {
  display: flex;
  gap: 7px;
}

.layf-onboarding-dots span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink3) 32%, transparent);
  transition: width .2s ease, background .2s ease;
}

.layf-onboarding-dots span.is-done {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}

.layf-onboarding-dots span.is-active {
  width: 25px;
  background: var(--accent);
}

.layf-onboarding-main {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}

.layf-onboarding-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--ink2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
}

.layf-onboarding-close svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.layf-onboarding-content {
  padding: 64px 58px 28px;
  overflow-y: auto;
}

.layf-onboarding-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.layf-onboarding-content h2 {
  max-width: 580px;
  margin: 0;
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.layf-onboarding-lead {
  max-width: 610px;
  margin: 16px 0 28px;
  color: var(--ink2);
  font-size: 15px;
  line-height: 1.65;
}

.layf-onboarding-feature-list,
.layf-onboarding-rules {
  display: grid;
  gap: 12px;
}

.layf-onboarding-feature-list > span {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 2px 13px;
  padding: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.layf-onboarding-feature-list i {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-radius: 13px;
}

.layf-onboarding-feature-list svg,
.layf-onboarding-ready svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.layf-onboarding-feature-list small,
.layf-onboarding-rules small,
.layf-onboarding-profile-preview small,
.layf-onboarding-ready small,
.layf-onboarding-module-copy small {
  color: var(--ink2);
  line-height: 1.45;
}

.layf-onboarding-preview-note {
  margin-bottom: 12px;
  padding: 10px 12px;
  color: var(--ink2);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface2));
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.5;
}

.layf-onboarding-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.layf-onboarding-module-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 15px;
}

.layf-onboarding-module-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-radius: 12px;
}

.layf-onboarding-module-icon svg {
  width: 21px;
  height: 21px;
}

.layf-onboarding-module-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.layf-onboarding-module-copy strong,
.layf-onboarding-module-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layf-onboarding-rules {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.layf-onboarding-rules > span {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.layf-onboarding-rules b {
  color: var(--accent);
}

.layf-onboarding-profile-preview,
.layf-onboarding-ready {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.layf-onboarding-profile-preview > span:nth-child(2),
.layf-onboarding-ready > div {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}

.layf-onboarding-avatar,
.layf-onboarding-ready > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  color: var(--accent);
  font-weight: 800;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 17px;
}

.layf-onboarding-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  background: color-mix(in srgb, var(--surface2) 78%, var(--surface));
  border-top: 1px solid var(--border);
}

.layf-onboarding-footer .btn:last-child {
  justify-self: end;
}

.layf-onboarding-step-label {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 720px) {
  .settings-onboarding-draft {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .settings-onboarding-draft > .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .layf-onboarding-layer {
    padding: 0;
  }

  .layf-onboarding-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .layf-onboarding-aside {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 18px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .layf-onboarding-aside-icon,
  .layf-onboarding-aside p {
    display: none;
  }

  .layf-onboarding-draft-badge {
    justify-self: end;
    margin: 0 46px 0 0;
  }

  .layf-onboarding-dots {
    grid-column: 1 / -1;
    margin-top: 13px;
  }

  .layf-onboarding-close {
    top: 13px;
    right: 14px;
  }

  .layf-onboarding-content {
    padding: 34px 20px 20px;
  }

  .layf-onboarding-content h2 {
    font-size: 29px;
  }

  .layf-onboarding-lead {
    margin-bottom: 20px;
  }

  .layf-onboarding-module-grid,
  .layf-onboarding-rules {
    grid-template-columns: 1fr;
  }

  .layf-onboarding-profile-preview {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .layf-onboarding-profile-preview .btn {
    width: 100%;
  }

  .layf-onboarding-footer {
    grid-template-columns: 1fr 1fr;
    padding: 14px 16px max(14px, env(safe-area-inset-bottom));
  }

  .layf-onboarding-step-label {
    display: none;
  }

  .layf-onboarding-footer .btn {
    width: 100%;
  }
}

/* ── Dark mode: native <select> dropdown colour-scheme fix ────────────────
   Browsers render the native dropdown list using OS chrome. Without
   color-scheme: dark the OS draws a white popup even when the <select>
   itself has a dark background. This one rule fixes all selects globally. */
html[data-dark='true'] select,
html[data-dark='true'] .field-input:is(select) {
  color-scheme: dark;
}

/* ── Inwentaryzacja (Inventory) — Stage 1 Draft UI ─────────────────────────── */
.inventory-page .inv-draft-banner {
  margin: 0 0 16px;
  padding: 9px 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 12px;
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  color: var(--ink2);
  font-size: 12.5px;
}

/* Level 1 — warehouses */
.inventory-page .inv-wh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.inventory-page .inv-wh-card {
  appearance: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.inventory-page .inv-wh-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 8px 22px rgba(17, 24, 56, 0.08);
}
.inventory-page .inv-wh-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 22px;
  border-radius: 13px;
  background: var(--layf-accent-soft-bg, color-mix(in srgb, var(--accent) 10%, transparent));
}
.inventory-page .inv-wh-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inventory-page .inv-wh-name { font-size: 15px; color: var(--ink); line-height: 1.25; }
.inventory-page .inv-wh-count { font-size: 12.5px; color: var(--ink3, var(--muted)); }

/* Level 2 — items */
.inventory-page .inv-items-toolbar {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.inventory-page .inv-back { margin-right: auto; }
.inventory-page .inv-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink3, var(--muted));
  min-width: 200px;
  flex: 1 1 220px;
  max-width: 320px;
}
.inventory-page .inv-search input { border: 0; background: transparent; outline: none; width: 100%; font: inherit; color: var(--ink); }

.inventory-page .inv-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.inventory-page .inv-item-tile {
  appearance: none;
  cursor: pointer;
  text-align: left;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.inventory-page .inv-item-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow: 0 8px 22px rgba(17, 24, 56, 0.07);
}
.inventory-page .inv-item-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--surface2);
}
.inventory-page .inv-item-glyph { font-size: 40px; opacity: .85; }
.inventory-page .inv-item-qty {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(17, 24, 56, 0.66);
  border-radius: 999px;
  padding: 2px 9px;
  backdrop-filter: blur(4px);
}
.inventory-page .inv-item-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.inventory-page .inv-item-title { font-size: 14px; color: var(--ink); line-height: 1.3; }
.inventory-page .inv-item-desc {
  font-size: 12px; color: var(--ink2);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.inventory-page .inv-item-meta { font-size: 11px; color: var(--ink3, var(--muted)); }
.inventory-page .inv-nomatch { padding: 20px 4px; }

/* Item modal — prominent photo dropzone (the "add photo right away" emphasis) */
.inv-item-modal .inv-photo-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.inv-item-modal .inv-photo-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 22px 16px;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 14px;
  background: var(--surface2);
  text-align: center;
  color: var(--ink2);
}
.inv-item-modal .inv-photo-plus { font-size: 22px; }
.inv-item-modal .inv-photo-drop small { font-size: 12px; color: var(--ink3, var(--muted)); max-width: 38ch; }
.inv-item-modal .inv-photo-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.inv-item-modal .inv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inv-item-modal .inv-form-grid .is-wide { grid-column: 1 / -1; }
.inventory-page .inv-form-note,
.inv-item-modal .inv-form-note { margin: 12px 0 0; font-size: 12px; color: var(--ink3, var(--muted)); }

@media (max-width: 640px) {
  .inventory-page .inv-item-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .inv-item-modal .inv-form-grid { grid-template-columns: 1fr; }
}

/* ── Sidebar: no flash of the full module list on hard reset ───────────────── */
/* Nav items stay invisible until app.js confirms visibility is trustworthy
   (admin known, or the access fetch resolved) and sets body.nav-ready. */
body:not(.nav-ready) .sidebar [data-nav] { visibility: hidden; }

/* ── Inventory: larger, clearer "back to warehouses" control ──────────────── */
.inventory-page .inv-back {
  font-size: 14.5px;
  font-weight: 650;
  padding: 8px 14px 8px 8px;
  color: var(--ink);
  gap: 4px;
}
.inventory-page .inv-back:hover { background: var(--surface2); }

/* ── Inventory Stage 2 additions ──────────────────────────────────────────── */
.inventory-page .inv-wh-card-wrap { position: relative; }
.inventory-page .inv-wh-card { width: 100%; }
.inventory-page .inv-wh-icon { overflow: hidden; }
.inventory-page .inv-wh-icon img { width: 100%; height: 100%; object-fit: cover; }
.inventory-page .inv-wh-edit {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink2);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease;
}
.inventory-page .inv-wh-card-wrap:hover .inv-wh-edit,
.inventory-page .inv-wh-edit:focus-visible { opacity: 1; }
.inventory-page .inv-item-photo img { width: 100%; height: 100%; object-fit: cover; }
.inventory-page .inv-item-multi {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(17, 24, 56, 0.6);
  border-radius: 999px;
  padding: 2px 8px;
  backdrop-filter: blur(4px);
}

/* Item modal: existing-photo thumbnails with remove */
.inv-item-modal .inv-photo-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.inv-item-modal .inv-photo-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.inv-item-modal .inv-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.inv-item-modal .inv-photo-cover {
  position: absolute;
  left: 0; bottom: 0; right: 0;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: rgba(17,24,56,.62);
  padding: 1px 0;
}
.inv-item-modal .inv-photo-x {
  position: absolute;
  top: 3px; right: 3px;
  width: 18px; height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(17,24,56,.7);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

/* Detail modal */
.inv-detail-card { max-width: 600px; width: 100%; }
.inv-detail-body { padding: 4px 0 6px; }
.inv-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.inv-gallery.is-empty { place-items: center; min-height: 120px; background: var(--surface2); border-radius: 12px; }
.inv-gallery.is-empty .inv-item-glyph { font-size: 38px; opacity: .7; }
.inv-gallery-item { display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.inv-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.inv-detail-desc { margin: 0 0 14px; color: var(--ink); line-height: 1.5; }
.inv-detail-meta { margin: 0; display: grid; gap: 8px; }
.inv-detail-meta > div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.inv-detail-meta dt { color: var(--ink2); font-size: 13px; }
.inv-detail-meta dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 500; text-align: right; }

/* ── Global instant preview for image file inputs (Audit G) ───────────────── */
.lf-file-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lf-file-preview-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 76px; }
.lf-file-preview-item img {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
}
.lf-file-preview-item small {
  font-size: 10px;
  color: var(--ink3, var(--muted));
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── PhotoPickerField — shared camera/gallery widget ──────────────────────── */
.lf-photo-picker { display: flex; flex-direction: column; gap: 6px; }
.lf-pp-label { font-size: 13px; font-weight: 500; color: var(--ink2); }
.lf-pp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.lf-pp-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.lf-pp-icon { width: 15px; height: 15px; flex-shrink: 0; }
.lf-pp-hint { font-size: 12px; color: var(--ink3, var(--muted)); }
/* CSS-hidden file input — keeps capture="environment" readable by iOS (display:none breaks it) */
.lf-pp-file { position: absolute; width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; pointer-events: none; }
/* Existing photo preview inside edit modal (tyres / issues) */
.veh-item-photo-link { display: block; margin-bottom: 12px; border-radius: 10px; overflow: hidden; }
.veh-item-photo-preview { display: block; width: 100%; max-height: 200px; object-fit: cover; }

/* ── Global toast (Audit H) ───────────────────────────────────────────────── */
.lf-toast-host {
  position: fixed;
  z-index: 9999;
  bottom: max(18px, env(safe-area-inset-bottom));
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
/* Delicate toast: white card, status-coloured left bar + very faint tint, glyph
   in a soft tinted circle, X to dismiss. --tone carries the status colour. */
.lf-toast {
  --tone: var(--accent);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 11px;
  pointer-events: auto;
  cursor: pointer;
  min-width: 220px;
  max-width: min(380px, calc(100vw - 32px));
  padding: 12px 14px 12px 17px;
  border-radius: 13px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tone) 8%, var(--surface)), var(--surface) 62%);
  border: 1px solid color-mix(in srgb, var(--tone) 22%, var(--border));
  box-shadow: 0 10px 26px rgba(17, 24, 56, 0.12);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
}
/* Status left bar. */
.lf-toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--tone);
}
.lf-toast.is-success { --tone: var(--positive); }
.lf-toast.is-error   { --tone: var(--danger); }
.lf-toast.is-warning { --tone: #f59e0b; }
.lf-toast.is-info    { --tone: var(--accent); }
.lf-toast.is-in { opacity: 1; transform: translateY(0); }
/* Glyph in a soft tinted circle. */
.lf-toast-ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 15%, var(--surface));
}
.lf-toast-msg { flex: 1 1 auto; min-width: 0; }
.lf-toast-x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink3, var(--ink2));
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lf-toast-x:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
@media (max-width: 560px) {
  .lf-toast-host { left: 12px; right: 12px; bottom: max(74px, env(safe-area-inset-bottom)); align-items: stretch; }
  .lf-toast { max-width: none; }
}

/* ── Modal open: lock background scroll (Audit J) ─────────────────────────── */
body.lf-modal-open { overflow: hidden; }

/* ── Shared modal helper (shared/ui/modal.js) — ONE modal system ──────────── */
.lf-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 18px;
  background: color-mix(in srgb, #000 30%, transparent);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
}
.lf-modal-backdrop.is-in { opacity: 1; }
.lf-modal-card {
  position: relative;
  cursor: auto;
  display: flex;
  flex-direction: column;
  width: min(600px, calc(100vw - 28px));
  max-height: calc(100dvh - 40px);
  border: var(--layf-border);
  border-radius: var(--layf-modal-radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  transform: translateY(10px) scale(.98);
  transition: transform .22s cubic-bezier(.2,.9,.3,1.15);
}
.lf-modal-backdrop.is-in .lf-modal-card { transform: translateY(0) scale(1); }
.lf-modal-sm { width: min(440px, calc(100vw - 28px)); }
.lf-modal-lg { width: min(760px, calc(100vw - 28px)); }
.lf-modal-card.is-busy { pointer-events: none; opacity: .8; }
.lf-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 0;
}
.lf-modal-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-section-title);
  font-weight: var(--weight-section-title);
  line-height: 1.16;
}
.lf-modal-subtitle { margin: 4px 0 0; color: var(--ink2); font-size: 13px; }
.lf-modal-x {
  flex: none;
  width: 34px;
  height: 34px;
  border: var(--layf-border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lf-modal-x:hover { background: var(--surface2); color: var(--ink); }
.lf-modal-form { display: flex; flex-direction: column; min-height: 0; }
.lf-modal-body { padding: 16px 20px; overflow-y: auto; }
.lf-modal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: var(--layf-border);
}
.lf-modal-foot-spacer { flex: 1; }
/* Module form bodies migrated into the shared modal keep their own descendant
   styling (labels/inputs/grid) via their wrapper class, but the helper already
   owns the card chrome, padding and scrolling — so neutralise the wrapper's own
   sizing/padding to avoid double padding and nested scrollbars. */
.lf-modal-body > .properties-form {
  max-height: none;
  max-width: none;
  width: auto;
  padding: 0;
  overflow: visible;
}
@media (max-width: 560px) {
  .lf-modal-backdrop { place-items: end center; padding: 0; }
  .lf-modal-card {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--layf-modal-radius) var(--layf-modal-radius) 0 0;
    transform: translateY(100%);
  }
  .lf-modal-backdrop.is-in .lf-modal-card { transform: translateY(0); }
}

/* ── Shared lightbox (Audit D) ────────────────────────────────────────────── */
.lf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lf-lightbox[hidden] { display: none; }
.lf-lightbox-backdrop { position: absolute; inset: 0; background: rgba(8, 10, 24, 0.86); backdrop-filter: blur(3px); }
.lf-lightbox-stage {
  position: relative;
  margin: 0;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.lf-lightbox-stage img {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lf-lightbox-count { color: rgba(255, 255, 255, 0.82); font-size: 13px; }
.lf-lightbox-btn {
  position: relative;
  z-index: 1;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  width: 46px;
  height: 46px;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background .15s ease;
}
.lf-lightbox-btn:hover { background: rgba(255, 255, 255, 0.24); }
.lf-lightbox-close { position: absolute; top: 16px; right: 16px; font-size: 18px; }
.lf-lightbox-prev { margin-right: 12px; }
.lf-lightbox-next { margin-left: 12px; }
@media (max-width: 560px) {
  .lf-lightbox-prev, .lf-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); }
  .lf-lightbox-prev { left: 8px; margin: 0; }
  .lf-lightbox-next { right: 8px; margin: 0; }
}

/* ── Inventory: camera-first photo add (mobile opens camera, gallery optional) */
.inv-item-modal .inv-photo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.inv-item-modal .inv-photo-pick { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.inv-item-modal .inv-photo-pick input[type="file"] { display: none; }
.inv-item-modal .inv-photo-hint { display: block; font-size: 12px; color: var(--ink3, var(--muted)); }

/* ── Sprint D — Mobile simplification (2026-06-11) ──────────────────────────
   1. Cleaning-schedule tabs → horizontal scroll instead of wrap
   2. Services type-tabs    → horizontal scroll instead of wrap
   3. Properties stats      → 2-column grid on mobile instead of 1 vertical
   4. Event Planner tabs    → horizontal scroll instead of wrap
   5. Event form rows       → stack to 1 column on narrow screens
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. Harmonogram sprzątań — tabbar horizontal scroll */
@media (max-width: 640px) {
  .cs-tabs-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .cs-tabs-bar::-webkit-scrollbar { display: none; }
  .cs-tab { flex-shrink: 0; }
}

/* 2. Serwisy i remonty — type-tabs horizontal scroll */
@media (max-width: 640px) {
  .svc-type-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .svc-type-tabs::-webkit-scrollbar { display: none; }
  .svc-type-tab { flex-shrink: 0; }
}

/* 3. Nieruchomości — stats 2 kolumny na mobile zamiast 1 pionowej */
@media (max-width: 720px) {
  .properties-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 4. Event Planner — tabs horizontal scroll */
@media (max-width: 640px) {
  .ev-tabs-bar {
    flex-wrap: nowrap;
    gap: 0;
  }
  .ev-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
  }
  .ev-tabs::-webkit-scrollbar { display: none; }
  .ev-tab { flex-shrink: 0; }
}

/* 5. Event Planner — formularz 2-3 inputy obok siebie → stack na wąskich */
@media (max-width: 560px) {
  .ev-form-row {
    flex-direction: column;
  }
  .ev-form-row .ev-form-group {
    min-width: 0;
  }
}

/* ── Module Briefs — active brief row: gradient border via CSS class ── */
.module-brief-row.is-active {
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--surface), var(--surface)),
    var(--layf-accent-gradient, linear-gradient(135deg, #fb923c, #ec4899, #c084fc, #7c3aed));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* ── Finanse — private Stage 2 decision cockpit ── */
html[data-theme='layf-core'] [data-nav='personalFinance'] .nav-icon {
  color: #7c5cfc !important;
}

.personal-finance-page {
  --pf-ink: var(--ink, #111827);
  --pf-muted: var(--ink3, #6b7280);
  --pf-border: color-mix(in srgb, var(--accent, #7c5cfc) 14%, var(--border, #e5e7eb));
  --pf-soft: color-mix(in srgb, var(--accent, #7c5cfc) 7%, var(--surface, #fff));
}

.personal-finance-page .module-action-bar {
  padding: 0;
  border: 0;
  background: transparent;
}
.personal-finance-page .module-page-content {
  margin-top: 18px;
}

.pf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.pf-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--pf-border);
  border-radius: 14px;
  background: var(--surface2, #f3f4f6);
}

.pf-tab {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pf-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.pf-tab.is-active {
  background: var(--surface, #fff);
  color: var(--pf-ink);
  box-shadow: 0 4px 14px rgba(17, 24, 56, .08);
}

.pf-draft-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid var(--pf-border);
  border-radius: 14px;
  background: var(--pf-soft);
  color: var(--pf-ink);
}

.pf-draft-icon {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--accent, #7c5cfc);
}

.pf-draft-icon svg,
.pf-insight-icon svg,
.pf-text-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf-draft-notice strong { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 600; }
.pf-draft-notice p { margin: 0; color: var(--pf-muted); font-size: 12px; line-height: 1.5; }
.pf-view { display: grid; gap: 16px; }

.pf-balance-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
  gap: 16px 24px;
  padding: 22px 28px 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 12%, rgba(139, 92, 246, .34), transparent 32%),
    linear-gradient(145deg, #111827, #17152d 68%, #241a4a);
  color: #fff;
  box-shadow: 0 18px 44px rgba(17, 24, 56, .17);
}

.pf-balance-main,
.pf-balance-side { position: relative; z-index: 1; }
.pf-eyebrow,
.pf-section-kicker { display: block; color: #9b8ec4; font-size: 10px; font-weight: 600; letter-spacing: .09em; }
.pf-balance-main > strong { display: block; margin: 6px 0 8px; color: #fff; font-size: clamp(34px, 5vw, 46px); font-weight: 500; letter-spacing: -.04em; }
.pf-balance-main p { max-width: 600px; margin: 8px 0 0; color: rgba(255, 255, 255, .68); font-size: 11px; line-height: 1.45; }
.pf-balance-split {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 620px;
}
.pf-balance-split span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .74);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.pf-balance-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin-top: 12px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.pf-balance-action:hover { background: rgba(255, 255, 255, .14); }
.pf-balance-side { align-self: center; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .13); }
.pf-balance-side span,
.pf-balance-side small { display: block; color: rgba(255, 255, 255, .63); font-size: 11px; }
.pf-balance-side strong { display: block; margin: 6px 0; color: #fff; font-size: 25px; font-weight: 500; letter-spacing: -.025em; }
.pf-balance-side small { color: #a7f3d0; }
.pf-health { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; }
.pf-health > div:last-child strong { margin: 3px 0; font-size: 15px; }
.pf-health-ring {
  --pf-health-color: #a78bfa;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--pf-health-color) calc(var(--pf-health) * 1%), rgba(255, 255, 255, .12) 0);
  color: #fff;
}
.pf-health-ring::before { content: ''; grid-area: 1 / 1; width: 40px; height: 40px; border-radius: 50%; background: #19172d; }
.pf-health-ring span { position: relative; grid-area: 1 / 1; color: #fff; font-size: 13px; font-weight: 500; }
.pf-health-ring.is-good { --pf-health-color: #34d399; }
.pf-health-ring.is-medium { --pf-health-color: #fbbf24; }
.pf-health-ring.is-low { --pf-health-color: #fb7185; }
.pf-health-ring.is-empty { --pf-health-color: rgba(255, 255, 255, .18); }
.pf-forecast-inline { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .13); }
.pf-forecast-inline strong { margin-bottom: 0; font-size: 19px; }
.pf-balance-progress { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .13); }
.pf-balance-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fb7185, #c084fc, #8b5cf6); }
.pf-balance-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; color: rgba(255, 255, 255, .58); font-size: 11px; }

.pf-metric-grid,
.pf-month-summary,
.pf-position-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pf-metric,
.pf-month-summary > div,
.pf-position-grid > article {
  padding: 16px 18px;
  border: 1px solid var(--pf-border);
  border-radius: 16px;
  background: var(--surface, #fff);
}

.pf-metric span,
.pf-month-summary span,
.pf-position-grid span { display: block; color: var(--pf-muted); font-size: 11px; }
.pf-metric strong,
.pf-month-summary strong,
.pf-position-grid strong { display: block; margin: 5px 0 3px; color: var(--pf-ink); font-size: 21px; font-weight: 500; letter-spacing: -.025em; }
.pf-metric small { color: var(--pf-muted); font-size: 11px; }
.personal-finance-page .field-label em { color: var(--pf-muted); font-style: normal; font-weight: 400; }
.pf-position-grid > article:last-child { background: linear-gradient(145deg, var(--pf-soft), var(--surface, #fff)); }
.pf-month-summary > div {
  border-color: rgba(255, 255, 255, .1);
  background:
    radial-gradient(circle at 88% 8%, rgba(139, 92, 246, .32), transparent 36%),
    linear-gradient(145deg, #12192a, #17152d 68%, #261b4f);
  box-shadow: 0 14px 30px rgba(17, 24, 56, .12);
}
.pf-month-summary span { color: rgba(255, 255, 255, .6); }
.pf-month-summary strong { color: #fff; }

/* Bieżące wydatki spend levels */
.pf-metric--spend strong { transition: color 0.4s; }
.pf-metric--spend[data-spend-level="safe"] strong { color: #10b981; }
.pf-metric--spend[data-spend-level="warning"] strong { color: #f59e0b; }
.pf-metric--spend[data-spend-level="danger"] strong { color: #ef4444; }
.pf-metric--spend[data-spend-level="fire"] {
  position: relative;
  overflow: hidden;
  border-color: rgba(239, 68, 68, 0.45);
  animation: pf-fire-glow 1.1s ease-in-out infinite alternate;
}
.pf-metric--spend[data-spend-level="fire"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 140%, rgba(249,115,22,0.22) 0%, rgba(239,68,68,0.12) 45%, transparent 70%);
  animation: pf-fire-bg 0.55s ease-in-out infinite alternate;
  pointer-events: none;
}
.pf-metric--spend[data-spend-level="fire"] strong {
  animation: pf-fire-text 0.45s ease-in-out infinite alternate;
}
@keyframes pf-fire-glow {
  from { box-shadow: 0 0 8px 2px rgba(239,68,68,0.25), 0 0 24px 4px rgba(249,115,22,0.12); }
  to   { box-shadow: 0 0 20px 7px rgba(239,68,68,0.45), 0 0 48px 14px rgba(249,115,22,0.22); }
}
@keyframes pf-fire-bg {
  from { transform: scaleY(1) scaleX(0.9); opacity: 0.7; }
  to   { transform: scaleY(1.2) scaleX(1.05); opacity: 1; }
}
@keyframes pf-fire-text {
  from { color: #dc2626; }
  to   { color: #f97316; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-metric--spend[data-spend-level="fire"],
  .pf-metric--spend[data-spend-level="fire"] strong,
  .pf-metric--spend[data-spend-level="fire"]::before { animation: none; }
  .pf-metric--spend[data-spend-level="fire"] strong { color: #ef4444; }
}

.pf-two-col,
.pf-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pf-three-compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.pf-compact-card {
  padding: 14px 16px !important;
}

.pf-compact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.pf-compact-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 5px;
}
.pf-compact-head h3 svg { width: 14px; height: 14px; }

.pf-compact-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-compact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border-radius: 6px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink);
  transition: background .12s;
}
.pf-compact-row:hover { background: var(--surface2, #f7f8fc); }
.pf-compact-row time {
  flex-shrink: 0;
  width: 22px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink2);
}
.pf-compact-row > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-compact-row > strong { flex-shrink: 0; font-size: 12px; }

.pf-compact-empty {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink2);
}
.pf-inline-action {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.pf-compact-insight-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.35;
}
.pf-compact-insight-text {
  margin: 0;
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.45;
}

.pf-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--pf-border);
  border-radius: 18px;
  background: var(--surface, #fff);
}

.pf-current-expenses {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, #7c5cfc) 5%, var(--surface, #fff)), var(--surface, #fff) 46%);
}

.pf-current-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.pf-current-summary > div {
  padding: 12px 14px;
  border: 1px solid var(--pf-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
}

.pf-current-summary span,
.pf-current-summary strong {
  display: block;
}

.pf-current-summary span {
  color: var(--pf-muted);
  font-size: 10px;
}

.pf-current-summary strong {
  margin-top: 4px;
  color: var(--pf-ink);
  font-size: 17px;
  font-weight: 550;
}

.pf-current-list {
  display: grid;
}
.pf-current-list.is-long {
  max-height: 530px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.pf-current-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  border-top: 1px solid var(--border, #eceef3);
}

.pf-current-row:first-child {
  border-top: 0;
}

.pf-current-row > strong {
  color: var(--pf-ink);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}

.pf-current-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pf-current-main strong,
.pf-current-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-current-main strong {
  color: var(--pf-ink);
  font-size: 12px;
  font-weight: 550;
}

.pf-current-main small {
  margin-top: 3px;
  color: var(--pf-muted);
  font-size: 10px;
}

.pf-receipt-thumb {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--pf-border);
  border-radius: 12px;
  background: var(--pf-soft);
  color: var(--accent, #7c5cfc);
}

.pf-receipt-thumb svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf-receipt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-match-chip {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--surface2, #f3f4f6);
  color: var(--pf-muted);
  font-size: 9px;
  font-weight: 650;
}

.pf-match-chip.is-suggested {
  background: color-mix(in srgb, #f59e0b 12%, var(--surface, #fff));
  color: #a16207;
}

.pf-match-chip.is-matched {
  background: color-mix(in srgb, #10b981 11%, var(--surface, #fff));
  color: #047857;
}

.pf-match-action {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--pf-border);
  border-radius: 9px;
  background: var(--surface, #fff);
  color: var(--accent, #7c5cfc);
  font: inherit;
  font-size: 9px;
  font-weight: 650;
  cursor: pointer;
}

.pf-receipt-preview {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--pf-border);
  border-radius: 15px;
  background: var(--pf-soft);
}

.pf-receipt-preview img {
  width: 112px;
  height: 128px;
  object-fit: cover;
  border-radius: 11px;
  background: #fff;
}

.pf-receipt-preview strong,
.pf-receipt-preview span {
  display: block;
}

.pf-receipt-preview strong {
  color: var(--pf-ink);
  font-size: 13px;
}

.pf-receipt-preview span {
  margin-top: 5px;
  color: var(--pf-muted);
  font-size: 10px;
  line-height: 1.5;
}

.pf-closed-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 8px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, #10b981 28%, var(--pf-border));
  border-radius: 999px;
  background: color-mix(in srgb, #10b981 9%, var(--surface, #fff));
  color: #047857;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
}

.pf-locked-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--pf-border);
  border-radius: 12px;
  background: var(--pf-soft);
  color: var(--pf-muted);
  font-size: 12px;
  line-height: 1.5;
}

.pf-import-intro {
  padding: 12px 14px;
  border: 1px solid var(--pf-border);
  border-radius: 12px;
  background: var(--pf-soft);
}
.pf-import-intro strong { color: var(--pf-ink); font-size: 13px; }
.pf-import-intro p { margin: 4px 0 0; color: var(--pf-muted); font-size: 12px; line-height: 1.5; }
.pf-import-error { color: #b91c1c; font-size: 12px; }
.pf-import-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11px; }
.pf-import-summary > * { padding: 5px 9px; border-radius: 999px; background: var(--surface2, #f3f4f6); }
.pf-import-summary strong { background: color-mix(in srgb, #10b981 12%, var(--surface, #fff)); color: #047857; }
.pf-import-table { display: grid; max-height: 320px; overflow: auto; border: 1px solid var(--pf-border); border-radius: 12px; }
.pf-import-row {
  display: grid;
  grid-template-columns: 32px 92px minmax(130px, 1fr) 90px minmax(130px, .7fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border-bottom: 1px solid var(--pf-border);
  font-size: 11px;
}
.pf-import-row:last-child { border-bottom: 0; }
.pf-import-row > span,
.pf-import-row time,
.pf-import-row small { color: var(--pf-muted); }
.pf-import-row b { text-align: right; color: var(--pf-ink); }
.pf-import-row.is-invalid,
.pf-import-row.is-outside,
.pf-import-row.is-duplicate { opacity: .62; }
.pf-report-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.pf-range-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}
.pf-range-switch button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.pf-range-switch button.is-active {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}
.pf-business-submit { display: flex; align-items: flex-end; }
.pf-business-card a { color: var(--accent, #7c5cfc); }
.pf-brand-icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--pf-border);
  border-radius: 11px;
  background: #fff;
  color: var(--pf-muted);
  font-size: 13px;
  font-weight: 600;
}
.pf-brand-icon { position: relative; }
.pf-brand-icon img { position: absolute; width: 24px; height: 24px; object-fit: contain; background: #fff; }
.pf-inline-status { display: inline-flex; width: fit-content; margin-top: 4px; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 600; }
.pf-inline-status.is-positive { background: rgba(16, 185, 129, .1); color: #047857; }
.pf-inline-status.is-warning { background: rgba(245, 158, 11, .12); color: #b45309; }
.pf-inline-status.is-info { background: var(--pf-soft); color: var(--accent, #7c5cfc); }
.pf-inline-status.is-muted { background: var(--surface2, #f3f4f6); color: var(--pf-muted); }
.pf-carryover-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; margin: 0 0 2px;
  border-radius: 10px;
  background: var(--layf-accent-soft-bg, rgba(124,92,252,.07));
  border: 1px solid var(--layf-accent-border, rgba(124,92,252,.16));
  font-size: 12px; color: var(--ink2, #4b5563); line-height: 1.4;
}
.pf-carryover-icon { font-size: 14px; flex-shrink: 0; }
.pf-carryover-banner strong { color: var(--ink, #111827); }
.pf-carryover-banner .pf-text-action { margin-left: auto; font-size: 11px; white-space: nowrap; }

.pf-closed-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; color: var(--ink2, #6b7280);
  background: var(--surface2, #f3f4f6); border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px; padding: 1px 7px; vertical-align: middle; margin-left: 8px;
}

.pf-close-month-btn { font-size: 12px; }

.pf-close-month-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border, #e5e7eb); border-radius: 10px; overflow: hidden;
  margin-bottom: 18px;
}
.pf-close-month-summary > div {
  background: var(--surface, #fff); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.pf-close-month-summary span { font-size: 10px; color: var(--ink2, #6b7280); text-transform: uppercase; letter-spacing: .04em; }
.pf-close-month-summary strong { font-size: 17px; font-weight: 600; color: var(--ink, #111827); }
.pf-close-month-balance strong.is-positive { color: #059669; }
.pf-close-month-balance strong.is-negative { color: #dc2626; }

.pf-carryover-check {
  display: flex !important; flex-direction: row !important; align-items: center !important;
  gap: 8px; padding: 10px 12px;
  background: var(--surface2, #f9fafb); border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; cursor: pointer;
}
.pf-carryover-check input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }

.pf-close-month-hint { margin: 0; padding: 0 2px; font-size: 11px; color: var(--ink2, #6b7280); line-height: 1.5; }

.pf-income-warning { display: flex; gap: 8px; align-items: baseline; padding: 11px 14px; border: 1px solid rgba(245,158,11,.25); border-radius: 13px; background: rgba(245,158,11,.08); color: #92400e; font-size: 11px; line-height: 1.45; }
.pf-income-warning--stacked { align-items: flex-start; flex-direction: column; gap: 6px; }
.pf-warning-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-warning-actions button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(146, 64, 14, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #7c2d12;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.pf-business-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr);
  gap: 24px;
  padding: 24px 26px;
  border-radius: 20px;
  background: linear-gradient(145deg, #111827, #211747);
  color: #fff;
}
.pf-business-hero h2 { margin: 8px 0 4px; color: #fff; font-size: 36px; font-weight: 500; }
.pf-business-hero p { margin: 0; color: rgba(255,255,255,.65); font-size: 12px; }
.pf-business-hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-self: center; }
.pf-business-hero-grid span { padding: 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: rgba(255,255,255,.62); font-size: 10px; }
.pf-business-hero-grid strong { display: block; margin-top: 5px; color: #fff; font-size: 15px; font-weight: 500; }
.pf-source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-source-card { padding: 16px; border: 1px solid var(--pf-border); border-radius: 14px; background: var(--surface, #fff); color: var(--pf-ink); text-align: left; cursor: pointer; }
.pf-source-card > span,
.pf-source-card small { display: block; color: var(--pf-muted); font-size: 10px; }
.pf-source-card strong { display: block; margin: 5px 0; font-size: 15px; }
.pf-invoice-list { display: grid; }
.pf-invoice-row { display: grid; grid-template-columns: 86px minmax(0, 1fr) 110px 100px; gap: 12px; align-items: center; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--pf-border); background: transparent; color: var(--pf-ink); text-align: left; cursor: pointer; }
.pf-invoice-row > span:nth-child(2) strong,
.pf-invoice-row > span:nth-child(2) small { display: block; }
.pf-invoice-row > span:nth-child(2) small,
.pf-invoice-row > small { color: var(--pf-muted); font-size: 10px; }
.pf-invoice-status { width: fit-content; padding: 4px 8px; border-radius: 999px; background: rgba(245,158,11,.12); color: #b45309; font-size: 9px; font-weight: 600; }
.pf-invoice-status.is-paid { background: rgba(16,185,129,.1); color: #047857; }
.pf-invoice-status.is-overdue { background: rgba(239,68,68,.1); color: #b91c1c; }
.personal-finance-page .is-hidden { display: none !important; }

@media print {
  body:has(.personal-finance-page) header,
  body:has(.personal-finance-page) aside,
  body:has(.personal-finance-page) .module-action-bar,
  body:has(.personal-finance-page) .pf-draft-notice,
  body:has(.personal-finance-page) .pf-report-actions .btn {
    display: none !important;
  }
  body:has(.personal-finance-page) .personal-finance-page {
    color: #111827;
    background: #fff;
  }
  body:has(.personal-finance-page) .pf-card,
  body:has(.personal-finance-page) .pf-report-hero {
    break-inside: avoid;
    box-shadow: none;
  }
}

@media (max-width: 760px) {
  .pf-business-hero { grid-template-columns: 1fr; padding: 20px; }
  .pf-business-hero-grid { grid-template-columns: 1fr; }
  .pf-source-grid { grid-template-columns: 1fr; }
  .pf-invoice-row { grid-template-columns: 80px minmax(0, 1fr); }
  .pf-invoice-row > strong,
  .pf-invoice-row > small { text-align: right; }
  .pf-current-summary { grid-template-columns: 1fr; }
  .pf-current-row { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 0; }
  .pf-current-row .pf-match-action { grid-column: 1 / -1; justify-self: end; }
  .pf-receipt-preview { grid-template-columns: 82px minmax(0, 1fr); }
  .pf-receipt-preview img { width: 82px; height: 104px; }
}

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

.pf-card-head h2,
.pf-insight h2 { margin: 4px 0 0; color: var(--pf-ink); font-size: 17px; font-weight: 500; line-height: 1.25; }
.pf-card-head-total { display: block; margin-top: 3px; color: var(--pf-muted); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; }

.pf-current-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; flex-wrap: nowrap; }
.pf-current-head h2 { margin: 0; color: var(--pf-ink); font-size: 17px; font-weight: 500; line-height: 1.25; flex-shrink: 1; min-width: 0; }
.pf-current-head-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pf-scan-action { color: var(--pf-muted) !important; font-size: 11px; opacity: 0.7; }
.pf-add-expense-btn { min-height: 40px; padding: 0 18px; font-size: 14px; font-weight: 600; border-radius: 10px; white-space: nowrap; }
@media (max-width: 640px) {
  .pf-current-head h2 { font-size: 15px; }
  .pf-scan-action { font-size: 10px; }
  .pf-add-expense-btn { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
}
.pf-text-action { display: inline-flex; align-items: center; gap: 5px; padding: 3px; border: 0; background: transparent; color: var(--accent, #7c5cfc); font: inherit; font-size: 11px; cursor: pointer; }
.pf-text-action svg { width: 14px; height: 14px; }
.pf-text-action.is-disabled { opacity: .55; cursor: default; }

.pf-payment-list { display: grid; }
.pf-payment-row { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 50px; border-top: 1px solid var(--border, #eceef3); }
.pf-payment-row:first-child { border-top: 0; }
.pf-payment-row time { color: var(--pf-muted); font-size: 11px; }
.pf-payment-row time.is-danger { color: #b42318; }
.pf-payment-row time.is-warning { color: #9a6700; }
.pf-payment-row span { color: var(--pf-ink); font-size: 13px; }
.pf-payment-row strong { color: var(--pf-ink); font-size: 13px; font-weight: 500; }
.pf-payment-button,
.pf-goal-button {
  width: 100%;
  padding: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pf-payment-button:hover,
.pf-goal-button:hover { background: var(--pf-soft); }

.pf-insight { position: relative; overflow: hidden; background: linear-gradient(145deg, var(--pf-soft), var(--surface, #fff)); }
.pf-insight::after { content: ''; position: absolute; right: -34px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; background: color-mix(in srgb, var(--accent, #7c5cfc) 11%, transparent); }
.pf-insight-icon { display: grid; width: 36px; height: 36px; margin-bottom: 20px; place-items: center; border-radius: 12px; background: var(--surface, #fff); color: var(--accent, #7c5cfc); box-shadow: 0 8px 18px rgba(17, 24, 56, .08); }
.pf-insight p { position: relative; z-index: 1; margin: 12px 0; color: var(--pf-muted); font-size: 12px; line-height: 1.6; }
.pf-insight small { position: relative; z-index: 1; color: var(--pf-muted); font-size: 10px; }

.pf-goal-list { display: grid; gap: 16px; }
.pf-goal-row { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(180px, 1fr) 42px; gap: 14px; align-items: center; }
.pf-goal-copy strong,
.pf-goal-copy span { display: block; }
.pf-goal-copy strong { color: var(--pf-ink); font-size: 13px; font-weight: 500; }
.pf-goal-copy span { margin-top: 3px; color: var(--pf-muted); font-size: 10px; }
.pf-goal-track { height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface2, #f1f2f6); }
.pf-goal-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ec4899, #8b5cf6); }
.pf-goal-percent { color: var(--pf-ink); font-size: 12px; font-weight: 500; text-align: right; }
.pf-goal-button { border: 0; border-radius: 12px; padding: 8px; }

.pf-plan-table { overflow: hidden; border: 1px solid var(--border, #eceef3); border-radius: 14px; }
.pf-plan-row { display: grid; grid-template-columns: 140px minmax(220px, 1fr) 110px 126px; min-height: 48px; align-items: center; border-top: 1px solid var(--border, #eceef3); }
.pf-plan-row:first-child { border-top: 0; }
.pf-plan-row > * { padding: 10px 13px; color: var(--pf-ink); font-size: 12px; }
.pf-plan-row > span:first-child { display: flex; align-items: center; gap: 8px; }
.pf-plan-row > span:nth-child(2) { color: var(--pf-muted); }
.pf-plan-row > span:nth-child(2) strong,
.pf-plan-row > span:nth-child(2) small { display: block; text-align: left; }
.pf-plan-row > span:nth-child(2) small { margin-top: 3px; font-size: 10px; }
.pf-plan-row strong { font-weight: 500; text-align: right; }
.pf-plan-row.is-head { min-height: 36px; background: var(--surface2, #f5f6f8); }
.pf-plan-row.is-head span { color: var(--pf-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pf-plan-row.is-head span:nth-child(n+3) { text-align: right; }
.pf-plan-group-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 13px; background: var(--surface2, #f5f6f8); border-top: 1px solid var(--border, #eceef3); }
.pf-plan-group:first-child .pf-plan-group-head { border-top: 0; }
.pf-plan-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pf-muted); }
.pf-plan-group-total { font-size: 11px; font-weight: 600; color: var(--pf-ink); }
.pf-estimated { font-size: 12px; font-weight: 500; color: var(--pf-muted); text-align: right; display: block; }
.pf-plan-group .pf-plan-row:first-child { border-top: 0; }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.pf-dot.is-income { background: #10b981; }
.pf-dot.is-expense { background: #ef4444; }
.pf-dot.is-obligation { background: #f59e0b; }
.pf-dot.is-saving { background: #7c5cfc; }
.pf-row-actions { display: flex; justify-content: flex-end; gap: 7px; }
.pf-status-button,
.pf-edit-button {
  min-height: 30px;
  border: 1px solid var(--pf-border);
  border-radius: 9px;
  background: var(--surface, #fff);
  color: var(--pf-muted);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.pf-status-button { width: 32px; padding: 0; font-size: 15px; }
.pf-status-button.is-paid { color: #0f9f6e; background: color-mix(in srgb, #10b981 8%, var(--surface, #fff)); }
.pf-status-button.is-readonly { cursor: default; pointer-events: none; opacity: .6; }
.pf-edit-button { padding: 0 10px; }
.pf-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.pf-action-label-short { display: none; }
.pf-budget-head { align-items: center; }
.pf-budget-head > div:first-child { min-width: 0; }
.pf-budget-head .pf-card-actions { align-items: center; flex-wrap: nowrap; }
.pf-budget-head .btn { white-space: nowrap; }
.pf-plan-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, .35fr);
  gap: 10px;
  margin-bottom: 12px;
}
.pf-plan-filters label { display: grid; gap: 4px; color: var(--pf-muted); font-size: 10px; }
.pf-plan-filters input,
.pf-plan-filters select {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--pf-border);
  border-radius: 11px;
  background: var(--surface, #fff);
  color: var(--pf-ink);
  font: inherit;
  font-size: 12px;
}

.pf-entity-list { display: grid; }
.pf-entity-row,
.pf-loan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  border-top: 1px solid var(--border, #eceef3);
}
.pf-entity-row:first-child,
.pf-loan-row:first-child { border-top: 0; }
.pf-entity-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pf-entity-main > span:last-child { min-width: 0; }
.pf-entity-main strong,
.pf-entity-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-entity-main strong { color: var(--pf-ink); font-size: 12px; font-weight: 500; }
.pf-entity-main small { margin-top: 3px; color: var(--pf-muted); font-size: 10px; }
.pf-entity-icon {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--pf-border);
  border-radius: 10px;
  background: var(--pf-soft);
  color: var(--accent, #7c5cfc);
  font-size: 11px;
  font-weight: 500;
}
.pf-entity-row > strong { color: var(--pf-ink); font-size: 12px; font-weight: 500; white-space: nowrap; }
.pf-loan-row { grid-template-columns: minmax(0, 1fr) minmax(70px, .35fr) auto auto; }
.pf-loan-progress,
.pf-limit-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface2, #eef0f4); }
.pf-loan-progress span,
.pf-limit-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ec4899, #8b5cf6); }
.pf-loan-balance { color: var(--pf-muted); font-size: 10px; white-space: nowrap; }
.pf-loan-action { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.pf-loan-confirmed-amount { font-size: 11px; font-weight: 600; color: var(--pf-positive, #16a34a); white-space: nowrap; }
.pf-loan-pending-chip { font-size: 10px; color: var(--pf-muted); background: var(--surface2); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.pf-loan-settle-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: transparent; border: 1.5px solid var(--border); color: var(--ink3, #aaa); cursor: pointer; flex-shrink: 0; transition: border-color .15s, background .15s, color .15s; }
.pf-loan-settle-btn:hover { border-color: var(--layf-accent-border, rgba(124,92,252,.5)); background: var(--layf-accent-soft-bg, rgba(124,92,252,.08)); color: var(--accent); }
.pf-plan-row.is-loan-pending .pf-loan-pending-amount { color: var(--pf-muted); font-style: italic; }
.pf-inline-status.pf-status-pending { color: var(--pf-muted); font-style: normal; }

.pf-limit-list { display: grid; gap: 4px; }
.pf-limit-row {
  display: grid;
  grid-template-columns: minmax(160px, .6fr) minmax(180px, 1fr) 50px;
  gap: 14px;
  align-items: center;
  min-height: 54px;
  padding: 7px 9px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pf-limit-row:hover { background: var(--pf-soft); }
.pf-limit-row > span:first-child strong,
.pf-limit-row > span:first-child small { display: block; }
.pf-limit-row > span:first-child strong { color: var(--pf-ink); font-size: 12px; font-weight: 500; }
.pf-limit-row > span:first-child small { margin-top: 3px; color: var(--pf-muted); font-size: 10px; }
.pf-limit-row > strong { color: var(--pf-ink); font-size: 11px; font-weight: 500; text-align: right; }
.pf-limit-track.is-over i { background: #ef4444; }
.pf-disabled-cta { opacity: .55; cursor: default; }

.pf-rule-list { display: grid; gap: 14px; }
.pf-rule-list > div { display: flex; gap: 11px; }
.pf-rule-check { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: var(--pf-soft); color: var(--accent, #7c5cfc); font-size: 11px; font-weight: 600; }
.pf-rule-list p { margin: 0; }
.pf-rule-list strong,
.pf-rule-list small { display: block; }
.pf-rule-list strong { color: var(--pf-ink); font-size: 12px; font-weight: 500; }
.pf-rule-list small { margin-top: 3px; color: var(--pf-muted); font-size: 10px; line-height: 1.45; }
.pf-chip-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.pf-chip-cloud span { padding: 7px 10px; border: 1px solid var(--pf-border); border-radius: 999px; background: var(--pf-soft); color: var(--pf-ink); font-size: 10px; }
.pf-stage-map p { margin: 16px 0 0; color: var(--pf-muted); font-size: 11px; line-height: 1.55; }

.pf-category-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; align-items: center; }
.pf-donut { position: relative; width: 170px; height: 170px; }
.pf-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pf-donut circle { fill: none; stroke-width: 5; }
.pf-donut-base { stroke: var(--surface2, #eef0f4); }
.pf-donut-segment { transition: stroke-dasharray .2s ease; }
.pf-donut > div { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; pointer-events: none; }
.pf-donut strong { color: var(--pf-ink); font-size: 17px; font-weight: 500; }
.pf-donut span { color: var(--pf-muted); font-size: 9px; }
.pf-category-legend { display: grid; gap: 4px; }
.pf-category-legend > div { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto 30px; gap: 8px; align-items: center; min-height: 32px; }
.pf-category-legend i { width: 7px; height: 7px; border-radius: 50%; }
.pf-category-legend span,
.pf-category-legend strong,
.pf-category-legend small { font-size: 10px; }
.pf-category-legend span { color: var(--pf-muted); }
.pf-category-legend strong { color: var(--pf-ink); font-weight: 500; text-align: right; }
.pf-category-legend small { color: var(--pf-muted); text-align: right; }
.pf-category-legend-item {
  position: relative;
  border-radius: 8px;
  outline: 0;
}
.pf-category-legend-item:is(:hover, :focus-visible)::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;
  right: 44px;
  top: 50%;
  min-width: 240px;
  max-width: min(380px, 70vw);
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #7c5cfc) 24%, var(--border, #e5e7eb));
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 42px rgba(17, 24, 56, .14);
  color: var(--pf-ink);
  font-size: 10px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-line;
  transform: translateY(-50%);
}
.pf-category-legend-item:is(:hover, :focus-visible)::before {
  content: "";
  position: absolute;
  z-index: 21;
  right: 37px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 1px solid color-mix(in srgb, var(--accent, #7c5cfc) 24%, var(--border, #e5e7eb));
  border-right: 1px solid color-mix(in srgb, var(--accent, #7c5cfc) 24%, var(--border, #e5e7eb));
  background: rgba(255, 255, 255, .98);
  transform: translateY(-50%) rotate(45deg);
}

.pf-forecast-chart { display: flex; align-items: flex-end; gap: 8px; height: 168px; padding: 14px 8px 0; border-bottom: 1px solid var(--border, #e5e7eb); background: linear-gradient(to top, var(--pf-soft), transparent 74%); }
.pf-forecast-chart span { flex: 1; min-width: 5px; border-radius: 5px 5px 0 0; background: color-mix(in srgb, var(--accent, #7c5cfc) 78%, #fff); }
.pf-forecast-chart span.is-forecast { opacity: .38; background: repeating-linear-gradient(135deg, var(--accent, #7c5cfc) 0 4px, transparent 4px 7px); border: 1px solid color-mix(in srgb, var(--accent, #7c5cfc) 50%, transparent); }
.pf-chart-axis { display: flex; justify-content: space-between; margin-top: 7px; color: var(--pf-muted); font-size: 9px; }
.pf-forecast-result { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border, #e5e7eb); }
.pf-forecast-result span { color: var(--pf-muted); font-size: 11px; }
.pf-forecast-result strong { color: var(--pf-ink); font-size: 17px; font-weight: 500; }

.pf-signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pf-signal-grid article { padding: 15px; border: 1px solid var(--border, #e5e7eb); border-radius: 14px; background: var(--surface2, #f8f9fb); }
.pf-signal-grid article.is-warning { background: color-mix(in srgb, #f59e0b 7%, var(--surface, #fff)); }
.pf-signal-grid article.is-positive { background: color-mix(in srgb, #10b981 7%, var(--surface, #fff)); }
.pf-signal-grid article.is-info { background: color-mix(in srgb, #3b82f6 7%, var(--surface, #fff)); }
.pf-signal-grid strong { display: block; color: var(--pf-ink); font-size: 12px; font-weight: 500; line-height: 1.4; }
.pf-signal-grid p { margin: 8px 0 12px; color: var(--pf-muted); font-size: 10px; line-height: 1.5; }
.pf-signal-grid span { color: var(--accent, #7c5cfc); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.pf-cashflow-card .pf-card-head > strong { color: var(--pf-ink); font-size: 16px; font-weight: 500; }
.pf-cashflow-chart { height: 175px; padding-top: 8px; }
.pf-cashflow-chart svg { display: block; width: 100%; height: 150px; overflow: visible; }
.pf-cashflow-axis { stroke: var(--border, #e5e7eb); stroke-width: 1; }
.pf-cashflow-line {
  fill: none;
  stroke: var(--accent, #7c5cfc);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pf-cashflow-days { display: flex; justify-content: space-between; color: var(--pf-muted); font-size: 9px; }
.pf-cashflow-events { display: grid; margin-top: 12px; }
.pf-cashflow-events > div {
  display: grid;
  grid-template-columns: 30px 7px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  border-top: 1px solid var(--border, #eceef3);
}
.pf-cashflow-events > div:first-child { border-top: 0; }
.pf-cashflow-events time,
.pf-cashflow-events span,
.pf-cashflow-events strong { font-size: 10px; }
.pf-cashflow-events time,
.pf-cashflow-events span { color: var(--pf-muted); }
.pf-cashflow-events strong { font-weight: 500; }
.pf-cashflow-events i,
.pf-trend-legend i { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; }
.pf-cashflow-events i.is-income,
.pf-trend-legend i.is-income { background: #10b981; }

.pf-trend-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(28px, 1fr));
  gap: 8px;
  height: 190px;
  padding: 10px 4px 0;
  align-items: end;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: linear-gradient(to top, var(--pf-soft), transparent 72%);
}
.pf-trend-month { display: grid; height: 100%; grid-template-rows: minmax(0, 1fr) 24px; gap: 5px; align-items: end; }
.pf-trend-month > span { color: var(--pf-muted); font-size: 9px; text-align: center; }
.pf-trend-bars { display: flex; height: 100%; align-items: end; justify-content: center; gap: 3px; }
.pf-trend-bars i { width: min(12px, 38%); min-height: 2px; border-radius: 4px 4px 0 0; background: #10b981; }
.pf-trend-bars i.is-outflow { background: color-mix(in srgb, var(--accent, #7c5cfc) 68%, #fff); }
.pf-trend-legend { display: flex; justify-content: center; gap: 18px; margin-top: 12px; }
.pf-trend-legend span { display: flex; align-items: center; gap: 6px; color: var(--pf-muted); font-size: 9px; }
.pf-trend-legend i.is-outflow { background: color-mix(in srgb, var(--accent, #7c5cfc) 68%, #fff); }

.pf-anomaly-card {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(220px, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 17px 19px;
  border: 1px solid color-mix(in srgb, #f59e0b 28%, var(--border, #e5e7eb));
  border-radius: 16px;
  background: color-mix(in srgb, #f59e0b 7%, var(--surface, #fff));
}
.pf-anomaly-card h2 { margin: 4px 0 0; color: var(--pf-ink); font-size: 15px; font-weight: 500; }
.pf-anomaly-card p { margin: 0; color: var(--pf-muted); font-size: 11px; line-height: 1.55; }
.pf-anomaly-card button { border: 0; background: transparent; color: var(--accent, #7c5cfc); font: inherit; font-size: 10px; cursor: pointer; }

.pf-empty {
  display: grid;
  justify-items: center;
  min-height: 190px;
  padding: 28px 18px;
  align-content: center;
  text-align: center;
}
.pf-empty-mark {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 14px;
  background: var(--pf-soft);
  color: var(--accent, #7c5cfc);
  font-size: 17px;
  font-weight: 600;
}
.pf-empty h3 { margin: 0; color: var(--pf-ink); font-size: 15px; font-weight: 550; }
.pf-empty p { max-width: 430px; margin: 7px 0 16px; color: var(--pf-muted); font-size: 11px; line-height: 1.55; }
.pf-month-controls {
  display: flex; align-items: center; gap: 6px; margin-left: auto;
}
.pf-month-close-btn { font-size: 12px; white-space: nowrap; }

.pf-month-input {
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--pf-border);
  border-radius: 11px;
  background: var(--surface, #fff);
  color: var(--pf-ink);
  font: inherit;
  font-size: 13px;
  align-self: center;
}
.pf-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pf-form-grid .is-wide { grid-column: 1 / -1; }
.pf-check-field { display: flex; align-items: center; align-self: end; min-height: 42px; gap: 9px; color: var(--pf-muted); font-size: 12px; }
.pf-check-field input { accent-color: var(--accent, #7c5cfc); }
.pf-field-hint { display: block; margin-top: 7px; color: var(--pf-muted); font-size: 10px; line-height: 1.5; }
.pf-form-modal .module-form-modal-foot { display: flex; justify-content: flex-end; gap: 8px; }
.pf-form-modal .btn-danger:first-child { margin-right: auto; }
.pf-flow-summary { display: grid; gap: 2px; }
.pf-flow-summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border, #eceef3); }
.pf-flow-summary span { color: var(--pf-muted); font-size: 12px; }
.pf-flow-summary strong { color: var(--pf-ink); font-size: 13px; font-weight: 550; }
.pf-top-list { display: grid; gap: 10px; }
.pf-top-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #eceef3);
}
.pf-top-list > div:last-child { border-bottom: 0; }
.pf-top-list span { min-width: 0; }
.pf-top-list strong,
.pf-top-list small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-top-list strong { color: var(--pf-ink); font-size: 13px; font-weight: 550; }
.pf-top-list small { margin-top: 3px; color: var(--pf-muted); font-size: 10px; }
.pf-top-list em { font-style: normal; font-size: 12px; font-weight: 600; }
.pf-top-list i {
  grid-column: 1 / -1;
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface2, #eef0f4);
}
.pf-top-list b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--accent, #7c5cfc) 62%, #fff);
}
.pf-top-list em.is-positive + i b,
.pf-top-list .is-positive ~ i b { background: #10b981; }
.pf-muted-copy { margin: 14px 0 0; color: var(--pf-muted); font-size: 11px; line-height: 1.55; }
.pf-donut-empty { display: grid; width: 170px; height: 170px; place-items: center; border: 10px solid var(--surface2, #eef0f4); border-radius: 50%; color: var(--pf-muted); font-size: 10px; text-align: center; }
.is-positive { color: #0f9f6e !important; }
.is-negative { color: #ef4444 !important; }

.pf-report-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  padding: 26px 28px;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 0%, rgba(139, 92, 246, .36), transparent 34%),
    linear-gradient(145deg, #111827, #17152d 68%, #241a4a);
  color: #fff;
}
.pf-report-hero h2 { margin: 7px 0 5px; color: #fff; font-size: 25px; font-weight: 500; letter-spacing: -.025em; }
.pf-report-hero p { margin: 0; color: rgba(255, 255, 255, .64); font-size: 12px; }
.pf-report-status {
  align-self: start;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .78);
  font-size: 10px;
}
.pf-report-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
}
.pf-report-grid > div { padding: 13px 15px; background: rgba(17, 24, 39, .46); }
.pf-report-grid span { display: block; color: rgba(255, 255, 255, .55); font-size: 9px; }
.pf-report-grid strong { display: block; margin-top: 5px; color: #fff; font-size: 16px; font-weight: 500; }
.pf-comparison-list { display: grid; }
.pf-comparison-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 92px;
  gap: 12px;
  align-items: center;
  min-height: 50px;
  border-top: 1px solid var(--border, #eceef3);
}
.pf-comparison-list > div:first-child { border-top: 0; }
.pf-comparison-list span { color: var(--pf-ink); font-size: 12px; }
.pf-comparison-list span small { display: block; margin-top: 2px; color: var(--pf-muted); font-size: 9px; }
.pf-comparison-list strong { color: var(--pf-ink); font-size: 12px; font-weight: 500; }
.pf-comparison-list em { font-size: 10px; font-style: normal; text-align: right; }
.pf-report-readiness { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-report-readiness > div { padding: 13px; border-radius: 12px; background: var(--surface2, #f5f6f8); text-align: center; }
.pf-report-readiness span { display: block; color: var(--pf-muted); font-size: 9px; }
.pf-report-readiness strong { display: block; margin-top: 5px; color: var(--pf-ink); font-size: 19px; font-weight: 500; }

@media (max-width: 900px) {
  .pf-balance-card,
  .pf-two-col,
  .pf-analysis-grid,
  .pf-three-compact { grid-template-columns: 1fr; }
  .pf-balance-card { gap: 13px; }
  .pf-balance-main p { display: none; }
  .pf-balance-action {
    position: absolute;
    top: 17px;
    right: 18px;
    min-height: 29px;
    margin-top: 0;
    padding: 0 10px;
    font-size: 11px;
  }
  .pf-balance-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, .72fr);
    gap: 14px;
    align-items: center;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .13);
    border-left: 0;
  }
  .pf-forecast-inline { margin-top: 0; padding-top: 0; border-top: 0; }
  .pf-balance-progress { margin-top: 2px; }
  .pf-budget-head {
    align-items: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .pf-budget-head > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  .pf-budget-head .pf-card-actions {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 6px;
  }
  .pf-budget-head .btn {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
  }
  .pf-plan-table { overflow-x: auto; }
  .pf-plan-row { min-width: 640px; }
}

@media (max-width: 640px) {
  .pf-toolbar { flex-wrap: nowrap; gap: 8px; }
  .pf-tabs { flex: 1; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pf-tabs::-webkit-scrollbar { display: none; }
  .pf-tab { flex: 0 0 auto; padding-inline: 12px; font-size: 12px; min-height: 34px; }
  .pf-month-input { flex-shrink: 0; height: 34px; font-size: 12px; padding: 0 8px; }
  /* Hero: compress height on mobile */
  .personal-finance-page .module-page-content { margin-top: 14px; }
  .pf-balance-card { padding: 17px 18px 15px; border-radius: 18px; }
  .pf-balance-main > strong { font-size: 28px; }
  .pf-balance-action { top: 14px; right: 14px; min-height: 28px; padding: 0 9px; font-size: 10px; }
  .pf-balance-split {
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
  }
  .pf-balance-split span {
    flex: 0 1 auto;
    min-height: 26px;
    padding: 0 6px;
    font-size: clamp(8px, 2.45vw, 10px);
  }
  .pf-health-ring { width: 42px; height: 42px; }
  .pf-health-ring::before { width: 32px; height: 32px; }
  .pf-health-ring span { font-size: 11px; }
  .pf-forecast-inline strong { font-size: 17px; }
  /* Overview metrics: keep two compact rows of three cards on mobile */
  .pf-metric-grid,
  .pf-position-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .pf-month-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .pf-signal-grid { grid-template-columns: 1fr; }
  .pf-month-summary > div { min-height: 64px; padding: 8px 8px 7px; border-radius: 12px; }
  .pf-month-summary span { font-size: 9px; line-height: 1.25; }
  .pf-month-summary strong { font-size: clamp(13px, 3.7vw, 17px); margin: 4px 0 0; line-height: 1.08; }
  .pf-metric,
  .pf-position-grid > article { min-height: 64px; padding: 8px 8px 7px; border-radius: 12px; }
  .pf-metric span,
  .pf-position-grid span { font-size: 9px; line-height: 1.25; }
  .pf-metric strong,
  .pf-position-grid strong { font-size: clamp(13px, 3.7vw, 17px); margin: 4px 0 2px; line-height: 1.08; }
  .pf-metric small { display: none; }
  .pf-card { padding: 17px; }
  .pf-card-head { align-items: flex-start; }
  .pf-budget-card { padding-top: 18px; }
  .pf-budget-head .pf-section-kicker { font-size: 9px; }
  .pf-budget-head h2 { font-size: 14px; }
  .pf-budget-head .btn { min-height: 31px; padding: 0 8px; font-size: 11px; }
  .pf-budget-head .btn .pf-action-label-long { display: none; }
  .pf-budget-head .btn .pf-action-label-short { display: inline; }
  /* Bieżące wydatki — compact on mobile */
  .pf-current-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pf-current-summary > div { padding: 8px 10px; border-radius: 10px; }
  .pf-current-summary strong { font-size: 14px; margin-top: 2px; }
  .pf-current-row { gap: 6px; padding: 8px 0; }
  .pf-current-main { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; }
  .pf-receipt-thumb { width: 32px; height: 32px; border-radius: 8px; }
  .pf-receipt-thumb svg { width: 14px; height: 14px; }
  .pf-goal-row { grid-template-columns: minmax(0, 1fr) 38px; }
  .pf-goal-track { grid-column: 1 / -1; grid-row: 2; }
  .pf-goal-percent { grid-column: 2; grid-row: 1; }
  .pf-category-layout { grid-template-columns: 1fr; justify-items: center; }
  .pf-category-legend { width: 100%; }
  .pf-category-legend-item:is(:hover, :focus-visible)::after {
    right: 0;
    top: calc(100% + 8px);
    transform: none;
  }
  .pf-category-legend-item:is(:hover, :focus-visible)::before {
    right: 18px;
    top: calc(100% + 3px);
    transform: rotate(-45deg);
  }
  .pf-card-head { flex-wrap: nowrap; align-items: center; }
  .pf-card-head > div:first-child { flex-shrink: 1; min-width: 0; }
  .pf-card-head h2 { font-size: 15px; }
  .pf-card-actions { flex-shrink: 0; gap: 4px; }
  .pf-budget-head { align-items: flex-start; gap: 8px; }
  .pf-budget-head h2 { font-size: 14px; }
  .pf-budget-head .pf-card-actions { display: grid; grid-template-columns: repeat(3, auto); gap: 4px; }
  .pf-budget-head .btn { min-width: 0; min-height: 31px; padding: 0 7px; font-size: 11px; }
  .pf-form-grid { grid-template-columns: 1fr; }
  .pf-plan-filters { grid-template-columns: 1fr; }
  .pf-form-grid .is-wide { grid-column: auto; }
  .pf-form-modal .module-form-modal-foot { flex-wrap: wrap; }
  .pf-form-modal .module-form-modal-foot .btn { flex: 1; }
  .pf-form-modal .btn-danger:first-child { flex-basis: 100%; margin-right: 0; }
  .pf-loan-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pf-loan-progress { grid-column: 1 / -1; grid-row: 2; }
  .pf-loan-balance { grid-column: 2; grid-row: 1; }
  .pf-loan-action { grid-column: 3; grid-row: 1; }
  .pf-limit-row { grid-template-columns: minmax(0, 1fr) 44px; gap: 9px; }
  .pf-limit-track { grid-column: 1 / -1; grid-row: 2; }
  .pf-limit-row > strong { grid-column: 2; grid-row: 1; }
  .pf-report-hero { grid-template-columns: 1fr; padding: 22px 20px; }
  .pf-report-status { position: absolute; top: 18px; right: 18px; }
  .pf-report-hero > div:first-child { padding-right: 68px; }
  .pf-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-report-actions {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pf-report-actions::-webkit-scrollbar { display: none; }
  .pf-range-switch {
    flex: 0 0 auto;
    width: auto;
    overflow: visible;
    justify-content: flex-start;
  }
  .pf-range-switch button { flex: 0 0 auto; }
  .pf-report-actions > .btn {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    white-space: nowrap;
  }
  .pf-comparison-list > div { grid-template-columns: minmax(0, 1fr) auto; }
  .pf-comparison-list em { grid-column: 2; }
  .pf-report-readiness { grid-template-columns: 1fr; }
  .pf-anomaly-card { grid-template-columns: 1fr; gap: 9px; }
  .pf-anomaly-card button { width: fit-content; padding: 0; }
  .pf-cashflow-events > div { grid-template-columns: 26px 7px minmax(0, 1fr); }
  .pf-cashflow-events strong { grid-column: 3; padding-bottom: 7px; }
}

@media (max-width: 480px) {
  .pf-balance-side { grid-template-columns: 1fr; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RECIPES — compact redesign + cookbook view + cook mode
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stats strip (replaces big 3-box grid) */
.recipes-stats-strip {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1;
}
.recipes-stats-strip strong {
  color: var(--ink);
  font-weight: 700;
}

/* Header actions row */
.recipes-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Overflow menu */
.recipes-overflow-wrap {
  position: relative;
}
.recipes-overflow-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 120;
  min-width: 210px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 12%, transparent);
}
.recipes-overflow-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.recipes-overflow-item:hover { background: var(--surface2); }

/* Toolbar row */
.recipes-toolbar-row.card {
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Search + view toggle row */
.recipes-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.recipes-search-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--ink);
  font-size: 14px;
}
.recipes-search-input:focus { outline: none; border-color: var(--accent); }
.recipes-search-input::placeholder { color: var(--ink3); }

/* View toggle */
.recipes-view-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
}
.recipes-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.recipes-view-btn.is-active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 8%, transparent);
}

/* Category chips */
.recipes-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.recipes-cat-chip {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--ink2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
  white-space: nowrap;
}
.recipes-cat-chip:hover { border-color: var(--accent); color: var(--ink); }
.recipes-cat-chip.is-active {
  border-color: var(--accent);
  background: var(--accent-lt);
  color: var(--ink);
  font-weight: 600;
}

/* Favorite button */
.recipe-fav-btn {
  position: absolute !important;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
  z-index: 2;
}
.recipe-fav-btn:hover { color: #f59e0b; background: var(--surface); }
.recipe-fav-btn.is-fav { color: #f59e0b; }

/* Recipe card (lista view) — make card position relative for fav btn */
.recipe-card {
  position: relative !important;
  overflow: visible !important;
}

/* Servings scaler */
.recipe-servings-scaler {
  display: flex;
  align-items: center;
  gap: 6px;
}
.recipe-scale-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface2);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s;
}
.recipe-scale-btn:hover { background: var(--accent-lt); border-color: var(--accent); }
.recipe-scale-val { font-weight: 700; min-width: 20px; text-align: center; }
.recipe-scaled-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-lt);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 4px;
}

/* Detail CTA row */
.recipe-detail-cta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.recipe-cook-btn {
  flex: 1;
}
.recipe-detail-actions--secondary {
  gap: 6px;
  margin-top: 0;
  margin-bottom: 14px;
}

/* Step timer hint in detail */
.recipe-step-body { flex: 1; }
.recipe-step-timer-hint {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}

/* ── Cookbook view ────────────────────────────────────────────────────────── */

/* Chapter header */
.recipes-chapter-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.recipes-chapter-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.recipes-chapter-count {
  font-size: 13px;
  color: var(--ink3);
  font-weight: 500;
}

/* Cookbook grid */
.view-cookbook .recipes-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Cookbook card */
.recipe-card--cookbook {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--ink) 10%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
  border: none;
  background: none;
}
.recipe-card--cookbook:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 16%, transparent);
}
.recipe-card--cookbook.is-selected {
  box-shadow: 0 0 0 3px var(--accent), 0 10px 30px color-mix(in srgb, var(--accent) 20%, transparent);
}
.recipe-card--cookbook .recipe-card-main {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* Portrait photo cover */
.recipe-photo-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface2);
}
.recipe-photo-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.recipe-card--cookbook:hover .recipe-photo-cover img {
  transform: scale(1.04);
}
.recipe-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: var(--surface2);
  color: var(--ink3);
}

/* Gradient scrim overlay */
.recipe-cover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 45%, transparent 70%);
}

/* Text overlay on photo */
.recipe-cover-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 14px 14px;
}
.recipe-cover-category {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 4px;
}
.recipe-cover-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -0.01em;
}
.recipe-cover-meta {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  font-weight: 500;
}

/* Fav btn on cookbook card */
.recipe-card--cookbook .recipe-fav-btn {
  top: 10px;
  right: 10px;
}

/* ── Cook mode — open cookbook layout ────────────────────────────────────── */

.recipe-cook-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.recipe-cook-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.recipe-cook-book {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  overflow: hidden;
}

/* LEFT PAGE */
.recipe-cook-book-left {
  width: 38%;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1.5px solid var(--border);
  padding: 20px;
  background: var(--surface2, #f7f8fc);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.recipe-cook-book-left-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.recipe-cook-book-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  flex: 1;
}

.recipe-cook-close-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50% !important;
  font-size: 13px;
  color: var(--ink2) !important;
}

.recipe-cook-book-photo {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}
.recipe-cook-book-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recipe-cook-book-section-label {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink3, #9ca3af);
}

/* Ingredient checklist */
.recipe-cook-book-ing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.recipe-cook-book-ing-item {
  display: flex;
  align-items: center;
  gap: 9px;
}

.recipe-cook-book-ing-check {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.recipe-cook-book-ing-checkmark {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  transition: background .15s, border-color .15s;
  position: relative;
  flex-shrink: 0;
}

.recipe-cook-book-ing-item.is-checked .recipe-cook-book-ing-checkmark {
  background: var(--accent);
  border-color: var(--accent);
}
.recipe-cook-book-ing-item.is-checked .recipe-cook-book-ing-checkmark::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 3px;
  width: 9px;
  height: 5px;
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

.recipe-cook-book-ing-text {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
  transition: opacity .15s;
}
.recipe-cook-book-ing-item.is-checked .recipe-cook-book-ing-text {
  opacity: .4;
  text-decoration: line-through;
}
.recipe-cook-book-ing-text strong {
  color: var(--ink2);
  font-weight: 600;
}

/* Steps mini-list */
.recipe-cook-book-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recipe-cook-book-step-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  border-radius: 8px;
  padding: 5px 6px;
  transition: background .12s;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
}
.recipe-cook-book-step-item:hover { background: var(--accent-lt, rgba(124,92,252,.06)); }
.recipe-cook-book-step-item.is-active { background: var(--layf-accent-soft-bg, rgba(124,92,252,.08)); }
.recipe-cook-book-step-item.is-done { opacity: .42; }

.recipe-cook-book-step-num {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink2);
  margin-top: 1px;
}
.recipe-cook-book-step-item.is-active .recipe-cook-book-step-num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.recipe-cook-book-step-snip {
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.4;
}
.recipe-cook-book-step-item.is-active .recipe-cook-book-step-snip {
  color: var(--ink);
  font-weight: 500;
}

.recipe-cook-book-note {
  margin: 0;
  font-size: 12px;
  color: var(--ink2);
  font-style: italic;
  line-height: 1.5;
  background: var(--layf-accent-soft-bg, rgba(124,92,252,.06));
  padding: 8px 10px;
  border-radius: 8px;
  border-left: 2px solid var(--accent);
}

/* RIGHT PAGE */
.recipe-cook-book-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 20px;
  overflow-y: auto;
}

.recipe-cook-book-step-label {
  margin: 0 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}

.recipe-cook-book-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  padding: 16px 0;
}

.recipe-cook-book-step-text {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  max-width: 500px;
  margin: 0;
}

.recipe-cook-book-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

/* Timer — reuses existing .recipe-cook-timer-* classes */
.recipe-cook-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.recipe-cook-timer-ring {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recipe-cook-timer-track { stroke: var(--border); }
.recipe-cook-timer-circle {
  stroke: var(--accent);
  transition: stroke-dashoffset .5s linear;
}
.recipe-cook-timer-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.recipe-cook-timer-display {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.recipe-cook-timer-unit {
  font-size: 10px;
  color: var(--ink3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 2px;
}
.recipe-cook-timer-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mobile: stack pages vertically */
@media (max-width: 680px) {
  .recipe-cook-book {
    flex-direction: column;
    max-height: 95vh;
    border-radius: 20px;
  }
  .recipe-cook-book-left {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 44vh;
    gap: 10px;
  }
  .recipe-cook-book-photo { aspect-ratio: 21 / 9; }
  .recipe-cook-book-right { padding: 16px 16px 14px; }
  .recipe-cook-book-step-text { font-size: 18px; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .view-cookbook .recipes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipes-chapter-title { font-size: 32px; }
}

@media (max-width: 600px) {
  .view-cookbook .recipes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .recipe-photo-cover { aspect-ratio: 3 / 4; }
  .recipe-cook-step-text { font-size: 18px; }
  .recipe-cook-timer-display { font-size: 24px; }
  .recipes-cat-chip { font-size: 12px; padding: 4px 10px; }
}

/* ── Recipes polish — cascade corrections (must come last) ────────────────
   Fixes specificity races with legacy main.css recipe blocks.
   ──────────────────────────────────────────────────────────────────────── */

/* 1. Header actions: force inline flex so + Dodaj and ⋯ sit side-by-side */
.recipes-page .module-header-actions { display: flex; align-items: center; gap: 8px; }
.recipes-page .module-header-actions .recipes-header-actions { display: contents; }

/* 2. Star button: ensure absolute positioning over the card photo */
.recipes-grid .recipe-card { position: relative; overflow: visible; }
.recipes-grid .recipe-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  color: var(--ink3);
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  transition: color .15s, background .15s, transform .15s;
}
.recipes-grid .recipe-fav-btn:hover { color: #f59e0b; background: #fff; transform: scale(1.15); }
.recipes-grid .recipe-fav-btn.is-fav { color: #f59e0b; }

/* 3. Category chips: visible border + subtle bg (var(--border) is near-invisible in Layf Core) */
.recipes-cat-chip {
  border-color: rgba(17,24,56,.14) !important;
  background: var(--surface) !important;
}
.recipes-cat-chip:hover { border-color: var(--accent) !important; background: var(--accent-lt) !important; color: var(--ink) !important; }
.recipes-cat-chip.is-active {
  border-color: var(--accent) !important;
  background: var(--accent-lt) !important;
  color: var(--ink) !important;
}

/* 4. Search row: force flex so input and toggle sit on same line */
.recipes-toolbar-row .recipes-search-row { display: flex !important; align-items: center !important; gap: 8px !important; }
.recipes-toolbar-row .recipes-search-input { flex: 1 !important; min-width: 0 !important; }

/* 5. Grid: cap at 4 columns on desktop (auto-fit minmax(250px) gives 5+ on wide) */
.recipes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1200px) { .recipes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 800px)  { .recipes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 480px)  { .recipes-grid { grid-template-columns: 1fr !important; } }

/* 6. Toolbar card: visible surface + gentle shadow */
.recipes-toolbar-row.card {
  background: var(--surface) !important;
  border: 1px solid rgba(17,24,56,.08) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.04) !important;
  border-radius: 16px !important;
}

/* 7. Card photo: standardise height */
.recipes-grid .recipe-photo { height: 160px; }

/* 8. Recipe name: slightly more weight */
.recipes-grid .recipe-card h2 { font-size: 17px; font-weight: 700; line-height: 1.2; }

/* 9. Cookbook grid override (separate from lista grid) */
.view-cookbook .recipes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 900px)  { .view-cookbook .recipes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 480px)  { .view-cookbook .recipes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* 10. Cookbook card: recipe title must be white on photo */
.recipe-card--cookbook .recipe-cover-title { color: #fff !important; }
.recipe-card--cookbook .recipe-cover-meta  { color: rgba(255,255,255,.75) !important; }
/* force against .recipe-card h2 specificity in main.css */
.recipe-card--cookbook h2.recipe-cover-title { color: #fff !important; }

/* 11. Category label in detail panel: muted ink, not accent */
.recipe-category-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink3);
  margin-bottom: 4px;
}

/* 12. Detail panel: compact meta strip instead of big tiles */
.recipe-meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--ink2);
  padding: 8px 0 0;
}
.recipe-meta-sep { color: var(--ink3); }
.recipe-detail-desc {
  font-size: 13px;
  color: var(--ink2);
  margin: 4px 0 0;
  line-height: 1.5;
}
/* Hide old big tile recipe-meta if it appears (fallback safety) */
.recipe-detail-panel .recipe-meta { display: none; }

/* 13. Compact add/edit form: 2-column grid */
.recipe-form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 14px !important;
}
.recipe-form-grid .field.is-wide,
.recipe-form-grid > div.field.is-wide { grid-column: 1 / -1 !important; }
/* name, tags, desc, steps, notes, ingredient block all get full width */
.recipe-form-grid [name="name"],
.recipe-form-grid [name="tags"],
.recipe-form-grid [name="desc"],
.recipe-form-grid [name="steps"],
.recipe-form-grid [name="notes"],
.recipe-form-grid textarea { font-size: 13px !important; }
.recipe-form { max-width: 680px !important; }
.recipe-form-head { padding-bottom: 12px !important; }
.recipe-form-head h2 { font-size: 17px !important; }

/* 14. Dynamic ingredient list */
.recipe-ing-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}
.recipe-ing-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.recipe-ing-input {
  flex: 1;
  font-size: 13px !important;
}
.recipe-ing-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink3);
  font-size: 13px;
}
.recipe-ing-remove:hover { color: var(--danger, #ef4444); }
.recipe-ing-add {
  font-size: 12px;
  padding: 4px 10px;
  color: var(--accent);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.recipe-ing-add:hover { background: var(--accent-lt); }
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  margin-bottom: 6px;
}

/* 15. Recipe detail — modal overlay */
.recipe-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
}
.recipe-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
/* Card: centered via translate — works regardless of parent flex/grid */
.recipe-detail-overlay .recipes-detail {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: min(560px, calc(100vw - 32px));
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.22) !important;
  padding: 16px 52px 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Compact detail header row */
.recipe-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
/* Close button: pinned to card corner, never overlaps content */
.recipe-detail-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 3;
}
.recipe-detail-title {
  font-size: 20px !important;
  font-family: var(--sans, system-ui) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 0 3px !important;
  line-height: 1.2 !important;
}

/* Meta strip — fix scaler inline */
.recipe-meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--ink2);
  padding: 6px 0 0;
}
.recipe-scaler-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.recipe-meta-sep { color: var(--ink3); }

/* Secondary actions row */
.recipe-detail-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 8px 0 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.recipe-detail-secondary .btn { font-size: 12px; padding: 4px 10px; }
.recipe-detail-delete-btn { color: var(--danger, #ef4444) !important; }

/* Scrollable body */
.recipe-detail-body { flex: 1; }

/* Step circles: subtle surface2 instead of violet accent */
.recipe-detail-overlay .recipe-step strong {
  background: var(--surface2) !important;
  color: var(--ink2) !important;
  font-weight: 700 !important;
}

/* Compact sections */
.recipe-detail-overlay .recipe-section { margin-top: 10px !important; }
.recipe-detail-overlay .recipe-section h3 {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: var(--ink2) !important;
  margin: 0 0 6px !important;
}
/* Ingredient rows — compact, amount muted not violet */
.recipe-detail-overlay .recipe-ingredient {
  min-height: 28px !important;
  padding: 5px 6px !important;
}
.recipe-detail-overlay .recipe-ingredient strong {
  color: var(--ink2) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.recipe-detail-overlay .recipe-ingredient span { font-size: 13px !important; }

/* Steps compact */
.recipe-detail-overlay .recipe-step { margin-bottom: 6px !important; }
.recipe-detail-overlay .recipe-step p { font-size: 13px !important; color: var(--ink) !important; }

/* Sticky footer with CTAs */
.recipe-detail-footer {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 0 14px;
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.recipe-detail-footer .btn { flex: 1; }

/* 16. Form tabs */
.recipe-form-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  padding-bottom: 0;
}
.recipe-form-tab {
  padding: 7px 18px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  transition: color .12s, border-color .12s;
}
.recipe-form-tab:hover { color: var(--ink); }
.recipe-form-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.recipe-form-tab-panel { display: none; }
.recipe-form-tab-panel.is-active { display: block; }

/* ────────────────────────────────────────────────────────────────────────────
   Health — Stage 1 Draft UI
   Render-only concept cockpit; no persistence or production medical advice.
   ─────────────────────────────────────────────────────────────────────────── */
.health-draft-page {
  --health-accent: #ef4d86;
  --health-violet: #7c3aed;
  --health-teal: #14b8a6;
  --health-amber: #f59e0b;
  --health-ink: var(--ink, #111827);
  --health-muted: var(--ink2, #6b7280);
  max-width: none;
}

.health-draft-page .module-page-content {
  display: grid;
  gap: 18px;
  padding-bottom: 86px;
}

.health-draft-page .module-header-actions .btn,
.health-draft-hero-actions .btn,
.health-draft-inline-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
}

.health-draft-page .btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.health-draft-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid color-mix(in srgb, var(--health-violet) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface2) 76%, #fff);
  box-shadow: 0 14px 38px rgba(76, 29, 149, .05);
}

.health-draft-tabs::-webkit-scrollbar {
  display: none;
}

.health-draft-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--health-muted);
  font: 700 13px/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
}

.health-draft-tab.is-active {
  background: #fff;
  color: var(--health-ink);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}

.health-draft-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .58fr);
  gap: 16px;
  align-items: stretch;
}

.health-draft-cockpit {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr);
  gap: 16px;
  align-items: stretch;
  min-height: 334px;
  padding: clamp(18px, 2.2vw, 24px);
  border: 1px solid color-mix(in srgb, var(--health-violet) 14%, var(--border));
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,255,255,.86)),
    radial-gradient(circle at 8% 8%, rgba(239,77,134,.13), transparent 28%),
    radial-gradient(circle at 82% 76%, rgba(124,58,237,.16), transparent 32%),
    radial-gradient(circle at 62% 24%, rgba(20,184,166,.09), transparent 25%);
  box-shadow: 0 26px 72px rgba(76, 29, 149, .1);
}

.health-draft-cockpit::after {
  content: '';
  position: absolute;
  inset: auto -70px -115px auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, .16), transparent 68%);
  pointer-events: none;
}

.health-draft-cockpit-main,
.health-draft-cockpit-side,
.health-draft-map-widget,
.health-draft-next-card {
  position: relative;
  z-index: 1;
}

.health-draft-cockpit-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.health-draft-cockpit-main h2 {
  max-width: 760px;
  margin: 0;
  color: var(--health-ink);
  font-size: clamp(44px, 4.4vw, 64px);
  font-weight: 760;
  line-height: .98;
  letter-spacing: 0;
}

.health-draft-cockpit-main p {
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--health-muted);
  font-size: 16px;
  line-height: 1.5;
}

.health-draft-cockpit-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
}

.health-draft-map-widget,
.health-draft-next-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--health-violet) 12%, var(--border));
  border-radius: 22px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 18px 48px rgba(76, 29, 149, .07);
  backdrop-filter: blur(14px);
}

.health-draft-map-widget {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 222px;
  padding: 15px;
}

.health-draft-map-widget .health-draft-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin-bottom: 4px;
}

.health-draft-map-widget h2 {
  font-size: 22px;
  line-height: 1.08;
}

.health-draft-map-widget .health-draft-body-visual {
  min-height: 152px;
}

.health-draft-map-widget .health-draft-human {
  width: min(136px, 68%);
}

.health-draft-map-widget .health-draft-human circle,
.health-draft-map-widget .health-draft-human path {
  stroke: url(#healthBodyGradientMini);
}

.health-draft-next-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.health-draft-next-card h3 {
  margin: 0;
  color: var(--health-ink);
  font-size: 18px;
  line-height: 1.2;
}

.health-draft-next-card p,
.health-draft-next-meta strong {
  margin: 5px 0 0;
  color: var(--health-muted);
  font-size: 12px;
  line-height: 1.35;
}

.health-draft-next-meta {
  min-width: 118px;
  padding: 10px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--health-accent) 10%, #fff);
  text-align: right;
}

.health-draft-next-meta span {
  display: block;
  color: #be123c;
  font-size: 12px;
  font-weight: 900;
}

.health-draft-command,
.health-draft-card,
.health-draft-area-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--health-violet) 13%, var(--border));
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.84)),
    radial-gradient(circle at top left, rgba(239,77,134,.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(20,184,166,.13), transparent 32%);
  box-shadow: 0 24px 70px rgba(76, 29, 149, .09);
}

.health-draft-command {
  min-height: 246px;
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.health-draft-command::after {
  content: '';
  position: absolute;
  inset: auto -60px -90px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, .18), transparent 68%);
  pointer-events: none;
}

.health-draft-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--health-violet) 72%, var(--ink2));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.health-draft-command h2,
.health-draft-card h2,
.health-draft-section h2 {
  margin: 0;
  color: var(--health-ink);
  font-weight: 760;
  letter-spacing: 0;
}

.health-draft-command h2 {
  max-width: 720px;
  font-size: clamp(42px, 4vw, 56px);
  line-height: 1;
}

.health-draft-command p {
  max-width: 680px;
  margin: 12px 0 0;
  color: var(--health-muted);
  font-size: 15px;
  line-height: 1.48;
}

.health-draft-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.health-draft-insight {
  min-height: 62px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}

.health-draft-insight span,
.health-draft-dose span,
.health-draft-result span,
.health-draft-emergency-grid span {
  display: block;
  color: var(--health-muted);
  font-size: 12px;
  font-weight: 700;
}

.health-draft-insight strong {
  display: block;
  margin-top: 6px;
  color: var(--health-ink);
  font-size: 14px;
  line-height: 1.25;
}

.health-draft-insight.is-risk { border-color: color-mix(in srgb, #ef4444 20%, var(--border)); background: color-mix(in srgb, #ef4444 7%, #fff); }
.health-draft-insight.is-warn { border-color: color-mix(in srgb, #f59e0b 22%, var(--border)); background: color-mix(in srgb, #f59e0b 8%, #fff); }
.health-draft-insight.is-good { border-color: color-mix(in srgb, #10b981 22%, var(--border)); background: color-mix(in srgb, #10b981 8%, #fff); }

.health-draft-hero-actions,
.health-draft-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.health-draft-card {
  padding: 18px;
}

.health-draft-card-head,
.health-draft-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.health-draft-link {
  color: var(--health-violet);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.health-draft-soft-pill,
.health-draft-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--health-violet) 9%, #fff);
  color: var(--health-violet);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.health-draft-status.is-warn {
  background: color-mix(in srgb, var(--health-amber) 12%, #fff);
  color: #b45309;
}

.health-draft-body-map {
  min-height: 246px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.health-draft-body-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 172px;
  overflow: hidden;
}

.health-draft-body-glow {
  position: absolute;
  width: 178px;
  height: 178px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, .12), rgba(124, 58, 237, .08) 48%, transparent 70%);
  filter: blur(2px);
}

.health-draft-human {
  position: relative;
  z-index: 1;
  width: min(154px, 72%);
  height: auto;
}

.health-draft-human circle,
.health-draft-human path {
  fill: none;
  stroke: url(#healthBodyGradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}

.health-draft-map-dot {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 12px 28px rgba(76, 29, 149, .13);
  color: var(--health-ink);
  font-size: 10px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.health-draft-plan {
  display: grid;
  gap: 4px;
}

.health-draft-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(320px, .66fr);
  gap: 16px;
  align-items: start;
}

.health-draft-dashboard-main,
.health-draft-dashboard-side {
  display: grid;
  gap: 16px;
}

.health-draft-dashboard-wide {
  grid-column: 1 / -1;
}

.health-draft-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr);
  gap: 16px;
  align-items: start;
}

.health-draft-workspace-primary,
.health-draft-workspace-secondary {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.health-draft-workspace-wide {
  grid-column: 1 / -1;
  min-width: 0;
}

.health-draft-workspace-secondary .health-draft-results {
  grid-template-columns: 1fr;
}

.health-draft-workspace-secondary .health-draft-result {
  display: grid;
  grid-template-columns: minmax(0, .9fr) auto;
  align-items: center;
  gap: 6px 10px;
}

.health-draft-workspace-secondary .health-draft-result strong {
  margin-top: 0;
  text-align: right;
  font-size: 16px;
}

.health-draft-workspace-secondary .health-draft-result .health-draft-spark {
  grid-column: 1 / -1;
  height: 22px;
  margin-top: 0;
}

.health-draft-workspace-secondary .health-draft-result small {
  grid-column: 1 / -1;
  margin-top: 0;
}

.health-draft-workspace-secondary .health-draft-emergency-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.health-draft-dose-grid,
.health-draft-results,
.health-draft-emergency-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.health-draft-dose,
.health-draft-result,
.health-draft-emergency-grid > div {
  min-width: 0;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--health-violet) 12%, var(--border));
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}

.health-draft-dose strong {
  display: block;
  margin-top: 5px;
  color: var(--health-ink);
  font-size: 14px;
  line-height: 1.25;
}

.health-draft-dose small {
  display: block;
  margin-top: 7px;
  color: #be123c;
  font-size: 12px;
  font-weight: 800;
}

.health-draft-dose.is-next {
  background: linear-gradient(135deg, color-mix(in srgb, var(--health-accent) 11%, #fff), #fff);
}

.health-draft-inline-actions {
  margin-top: 12px;
}

.health-draft-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 0;
  overflow-x: auto;
  padding: 10px 2px 6px;
}

.health-draft-timeline-item {
  position: relative;
  min-width: 150px;
  padding: 0 16px 10px 0;
}

.health-draft-timeline-item::before {
  content: '';
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  height: 2px;
  background: color-mix(in srgb, var(--health-violet) 18%, var(--border));
}

.health-draft-timeline-date {
  display: block;
  margin-bottom: 16px;
  color: var(--health-muted);
  font-size: 12px;
  font-weight: 800;
}

.health-draft-timeline-dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 18px;
  height: 18px;
  margin-bottom: 14px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--health-violet);
  box-shadow: 0 10px 22px rgba(124, 58, 237, .2);
}

.health-draft-timeline-item.is-badania .health-draft-timeline-dot { background: var(--health-teal); }
.health-draft-timeline-item.is-foto .health-draft-timeline-dot { background: var(--health-accent); }
.health-draft-timeline-item.is-dentysta .health-draft-timeline-dot { background: var(--health-amber); }

.health-draft-timeline-item strong,
.health-draft-area-card h3 {
  display: block;
  color: var(--health-ink);
  font-size: 15px;
  line-height: 1.25;
}

.health-draft-timeline-item small,
.health-draft-area-card p,
.health-draft-area-card small,
.health-draft-result small {
  display: block;
  margin-top: 6px;
  color: var(--health-muted);
  font-size: 12px;
  line-height: 1.45;
}

.health-draft-section {
  display: grid;
  gap: 14px;
}

.health-draft-area-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.health-draft-area-card {
  padding: 14px;
}

.health-draft-area-image {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 96px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 28% 34%, rgba(239,77,134,.22), transparent 24%),
    radial-gradient(circle at 72% 68%, rgba(20,184,166,.2), transparent 28%),
    linear-gradient(135deg, rgba(124,58,237,.13), rgba(255,255,255,.76));
}

.health-draft-area-image span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: var(--health-violet);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.health-draft-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 18px;
}

.health-draft-dashboard-side .health-draft-results {
  grid-template-columns: 1fr;
}

.health-draft-dashboard-side .health-draft-result {
  display: grid;
  grid-template-columns: minmax(0, .9fr) auto;
  align-items: center;
  gap: 6px 10px;
}

.health-draft-dashboard-side .health-draft-result strong {
  margin-top: 0;
  text-align: right;
  font-size: 16px;
}

.health-draft-dashboard-side .health-draft-result .health-draft-spark {
  grid-column: 1 / -1;
  height: 22px;
  margin-top: 0;
}

.health-draft-dashboard-side .health-draft-result small {
  grid-column: 1 / -1;
  margin-top: 0;
}

.health-draft-dashboard-side .health-draft-emergency-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.health-draft-result strong,
.health-draft-emergency-grid strong {
  display: block;
  margin-top: 7px;
  color: var(--health-ink);
  font-size: 18px;
}

.health-draft-spark {
  width: 100%;
  height: 34px;
  margin-top: 8px;
}

.health-draft-spark path {
  fill: none;
  stroke: var(--health-teal);
  stroke-width: 3;
  stroke-linecap: round;
}

.health-draft-emergency {
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.86)),
    radial-gradient(circle at top right, rgba(239,68,68,.13), transparent 36%);
}

.health-draft-emergency-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1120px) {
  .health-draft-hero,
  .health-draft-cockpit,
  .health-draft-workspace,
  .health-draft-dashboard-grid,
  .health-draft-bottom-grid {
    grid-template-columns: 1fr;
  }

  .health-draft-cockpit {
    min-height: 0;
  }

  .health-draft-cockpit-side {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .62fr);
    grid-template-rows: auto;
  }

  .health-draft-workspace-wide {
    grid-column: auto;
  }

  .health-draft-dashboard-wide {
    grid-column: auto;
  }

  .health-draft-command {
    min-height: auto;
  }
}

@media (max-width: 820px) {
  .health-draft-page .module-header {
    gap: 12px;
  }

  .health-draft-page .module-header-actions {
    width: 100%;
  }

  .health-draft-page .module-header-actions .btn {
    width: 100%;
  }

  .health-draft-tabs {
    width: 100%;
    border-radius: 18px;
  }

  .health-draft-insights,
  .health-draft-dose-grid,
  .health-draft-results,
  .health-draft-area-grid {
    grid-template-columns: 1fr;
  }

  .health-draft-card-head,
  .health-draft-section-head {
    flex-direction: column;
  }

  .health-draft-link,
  .health-draft-status,
  .health-draft-soft-pill {
    white-space: normal;
  }

  .health-draft-command,
  .health-draft-cockpit,
  .health-draft-card {
    border-radius: 20px;
  }

  .health-draft-cockpit {
    gap: 14px;
    padding: 17px;
  }

  .health-draft-cockpit-main h2 {
    font-size: 39px;
  }

  .health-draft-cockpit-main p {
    font-size: 14px;
  }

  .health-draft-cockpit-side {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
    gap: 10px;
  }

  .health-draft-map-widget {
    min-height: 190px;
    padding: 13px;
  }

  .health-draft-map-widget h2 {
    font-size: 19px;
  }

  .health-draft-map-widget .health-draft-body-visual {
    min-height: 134px;
  }

  .health-draft-map-widget .health-draft-human {
    width: 118px;
  }

  .health-draft-next-card {
    grid-template-columns: 1fr;
    align-content: space-between;
  }

  .health-draft-next-meta {
    min-width: 0;
    text-align: left;
  }

  .health-draft-hero {
    gap: 12px;
  }

  .health-draft-command {
    min-height: 0;
    padding: 18px;
  }

  .health-draft-command h2 {
    font-size: 36px;
  }

  .health-draft-insights {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 16px 0;
  }

  .health-draft-insight {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }

  .health-draft-insight strong {
    margin-top: 0;
    text-align: right;
  }

  .health-draft-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .health-draft-body-map {
    min-height: 0;
    padding: 18px;
  }

  .health-draft-body-map .health-draft-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    margin-bottom: 8px;
  }

  .health-draft-body-map h2 {
    font-size: 27px;
    line-height: 1.08;
  }

  .health-draft-body-visual {
    min-height: 178px;
  }

  .health-draft-body-glow {
    width: 174px;
    height: 174px;
  }

  .health-draft-human {
    width: 148px;
  }

  .health-draft-map-dot {
    min-height: 24px;
    padding: 0 9px;
    font-size: 10px;
  }

  .health-draft-plan .health-draft-card-head {
    margin-bottom: 10px;
  }

  .health-draft-plan h2 {
    font-size: 26px;
    line-height: 1.12;
  }

  .health-draft-dashboard-main,
  .health-draft-workspace-primary,
  .health-draft-workspace-secondary,
  .health-draft-dashboard-side {
    gap: 12px;
  }

  .health-draft-workspace-secondary .health-draft-results,
  .health-draft-workspace-secondary .health-draft-emergency-grid,
  .health-draft-dashboard-side .health-draft-results,
  .health-draft-dashboard-side .health-draft-emergency-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .health-draft-page .module-page-content {
    gap: 14px;
    padding-bottom: 18px;
  }

  .health-draft-command,
  .health-draft-cockpit,
  .health-draft-card {
    padding: 15px;
  }

  .health-draft-cockpit {
    gap: 12px;
  }

  .health-draft-cockpit-main h2 {
    font-size: 32px;
  }

  .health-draft-cockpit-side {
    grid-template-columns: 1fr;
  }

  .health-draft-map-widget {
    min-height: 0;
    padding: 13px;
  }

  .health-draft-map-widget .health-draft-card-head {
    margin-bottom: 0;
  }

  .health-draft-map-widget .health-draft-body-visual {
    min-height: 126px;
  }

  .health-draft-map-widget .health-draft-body-glow {
    width: 132px;
    height: 132px;
  }

  .health-draft-map-widget .health-draft-human {
    width: 108px;
  }

  .health-draft-next-card {
    padding: 12px;
  }

  .health-draft-command h2 {
    font-size: 29px;
  }

  .health-draft-command p {
    font-size: 14px;
    margin-top: 10px;
  }

  .health-draft-tabs {
    padding: 4px;
  }

  .health-draft-tab {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .health-draft-body-map {
    padding: 16px;
  }

  .health-draft-body-map h2 {
    font-size: 23px;
  }

  .health-draft-body-visual {
    min-height: 150px;
  }

  .health-draft-body-glow {
    width: 148px;
    height: 148px;
  }

  .health-draft-human {
    width: 122px;
  }

  .health-draft-map-dot {
    min-height: 22px;
    padding: 0 8px;
    font-size: 9px;
    box-shadow: 0 8px 20px rgba(76, 29, 149, .11);
  }

  .health-draft-dose,
  .health-draft-result,
  .health-draft-emergency-grid > div {
    padding: 11px 12px;
    border-radius: 14px;
  }

  .health-draft-dose strong {
    font-size: 13px;
  }

  .health-draft-area-image {
    min-height: 86px;
  }

  .health-draft-emergency-grid {
    grid-template-columns: 1fr;
  }

}

/* Health — Stage 1.4 visual polish layer */
.health-draft-cockpit {
  grid-template-columns: minmax(0, 1.05fr) minmax(410px, .95fr);
  min-height: 376px;
  padding: clamp(22px, 2.8vw, 34px);
  border-color: color-mix(in srgb, var(--health-violet) 18%, transparent);
  background:
    radial-gradient(circle at 5% 0%, rgba(239,77,134,.16), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(20,184,166,.13), transparent 28%),
    radial-gradient(circle at 82% 88%, rgba(124,58,237,.20), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.88));
  box-shadow: 0 28px 82px rgba(76, 29, 149, .12);
}

.health-draft-cockpit-main h2 {
  font-size: clamp(54px, 5.6vw, 78px);
  max-width: 860px;
}

.health-draft-cockpit-main p {
  max-width: 760px;
  font-size: 17px;
}

.health-draft-cockpit .health-draft-insights {
  max-width: 880px;
  margin: 24px 0;
}

.health-draft-insight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 78px;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.76), 0 14px 34px rgba(76, 29, 149, .08);
}

.health-draft-icon-chip,
.health-draft-dose-icon {
  display: inline-grid !important;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(255,255,255,.74);
  color: var(--health-violet);
  box-shadow: 0 12px 28px rgba(76, 29, 149, .10);
}

.health-draft-insight .health-draft-icon-chip {
  margin: 0;
  padding: 0;
  font-size: 0;
}

.health-draft-icon-chip svg,
.health-draft-dose-icon svg,
.health-draft-result-label svg,
.health-draft-area-icon svg {
  width: 18px;
  height: 18px;
}

.health-draft-insight.is-risk .health-draft-icon-chip { color: #e11d48; }
.health-draft-insight.is-good .health-draft-icon-chip { color: #0f9f8e; }
.health-draft-insight.is-warn .health-draft-icon-chip { color: #b45309; }

.health-draft-map-widget {
  min-height: 284px;
  padding: 18px;
  border: 0;
  background:
    radial-gradient(circle at 50% 54%, rgba(124,58,237,.14), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.74), rgba(255,255,255,.50));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 22px 55px rgba(76, 29, 149, .08);
}

.health-draft-map-widget h2 {
  font-size: 27px;
}

.health-draft-map-widget .health-draft-body-visual {
  min-height: 210px;
}

.health-draft-map-widget .health-draft-body-glow {
  width: 248px;
  height: 248px;
  background:
    radial-gradient(circle, rgba(236, 72, 153, .16), rgba(124, 58, 237, .10) 45%, rgba(20, 184, 166, .08) 63%, transparent 76%);
  filter: blur(4px);
}

.health-draft-map-widget .health-draft-human {
  width: min(196px, 74%);
  filter: drop-shadow(0 28px 34px rgba(124,58,237,.15));
}

.health-draft-map-orbit {
  position: absolute;
  z-index: 0;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(124,58,237,.13);
  border-radius: 999px;
  transform: rotate(-18deg);
}

.health-draft-map-orbit.is-two {
  width: 154px;
  height: 154px;
  border-color: rgba(20,184,166,.16);
  transform: rotate(24deg);
}

.health-draft-map-dot {
  min-height: 28px;
  padding: 0 11px;
  border: 0;
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 34px rgba(76, 29, 149, .16);
  font-size: 11px;
}

.health-draft-next-card,
.health-draft-card,
.health-draft-area-card {
  border-color: color-mix(in srgb, var(--health-violet) 10%, transparent);
}

.health-draft-next-card {
  border: 0;
  background: rgba(255,255,255,.7);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.76), 0 18px 45px rgba(76, 29, 149, .07);
}

.health-draft-workspace {
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  gap: 18px;
}

.health-draft-card {
  border: 0;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.78)),
    radial-gradient(circle at top right, rgba(124,58,237,.06), transparent 32%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--health-violet) 9%, transparent), 0 22px 58px rgba(76, 29, 149, .075);
}

.health-draft-plan {
  padding: 20px;
}

.health-draft-dose,
.health-draft-result,
.health-draft-emergency-grid > div {
  border: 0;
  background: rgba(255,255,255,.74);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--health-violet) 9%, transparent);
}

.health-draft-dose {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  align-items: start;
}

.health-draft-dose > span:not(.health-draft-dose-icon),
.health-draft-dose strong,
.health-draft-dose small {
  grid-column: 2;
}

.health-draft-result-label {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

.health-draft-result-label svg {
  color: var(--health-teal);
  flex: 0 0 auto;
}

.health-draft-area-grid {
  gap: 18px;
}

.health-draft-area-card {
  padding: 16px;
  border: 0;
}

.health-draft-area-image {
  position: relative;
  min-height: 126px;
  overflow: hidden;
  align-items: flex-start;
  justify-content: space-between;
  background:
    radial-gradient(circle at 28% 30%, rgba(239,77,134,.28), transparent 28%),
    radial-gradient(circle at 72% 68%, rgba(20,184,166,.26), transparent 34%),
    linear-gradient(135deg, rgba(124,58,237,.14), rgba(255,255,255,.78));
}

.health-draft-area-image .health-draft-area-icon {
  display: grid !important;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.76);
  color: var(--health-violet);
  box-shadow: 0 14px 30px rgba(76,29,149,.10);
}

@media (max-width: 1120px) {
  .health-draft-cockpit {
    grid-template-columns: 1fr;
  }

  .health-draft-cockpit-side {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .6fr);
  }

  .health-draft-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .health-draft-cockpit {
    padding: 18px;
  }

  .health-draft-cockpit-main h2 {
    font-size: 43px;
  }

  .health-draft-cockpit .health-draft-insights {
    margin: 18px 0;
  }

  .health-draft-map-widget .health-draft-body-visual {
    min-height: 170px;
  }

  .health-draft-map-widget .health-draft-human {
    width: 146px;
  }
}

@media (max-width: 560px) {
  .health-draft-cockpit {
    border-radius: 22px;
    padding: 17px;
  }

  .health-draft-cockpit-main h2 {
    font-size: 34px;
  }

  .health-draft-cockpit-side {
    grid-template-columns: 1fr;
  }

  .health-draft-insight {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .health-draft-insight strong {
    text-align: left;
  }

  .health-draft-map-widget {
    min-height: 0;
  }

  .health-draft-map-widget .health-draft-card-head {
    grid-template-columns: minmax(0, 1fr) auto;
    display: grid;
  }

  .health-draft-map-widget .health-draft-body-visual {
    min-height: 164px;
  }

  .health-draft-map-widget .health-draft-human {
    width: 134px;
  }

  .health-draft-map-widget .health-draft-body-glow {
    width: 180px;
    height: 180px;
  }

  .health-draft-map-orbit {
    width: 150px;
    height: 150px;
  }

  .health-draft-map-orbit.is-two {
    width: 112px;
    height: 112px;
  }

  .health-draft-dose {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

/* Health — Stage 1.5 mockup convergence */
.health-draft-page .module-page-content {
  gap: 16px;
}

.health-draft-cockpit {
  grid-template-columns: minmax(0, 1.02fr) minmax(460px, .98fr);
  min-height: 342px;
  padding: clamp(24px, 2.5vw, 32px);
  border-radius: 28px;
}

.health-draft-cockpit-main {
  justify-content: flex-start;
}

.health-draft-cockpit-main h2 {
  font-size: clamp(50px, 5.25vw, 72px);
  line-height: .96;
}

.health-draft-cockpit-main p {
  max-width: 700px;
  margin-top: 12px;
}

.health-draft-cockpit .health-draft-insights {
  max-width: 720px;
  margin: clamp(34px, 4vw, 54px) 0 18px;
}

.health-draft-hero-actions {
  margin-top: 0;
}

.health-draft-cockpit-side {
  gap: 10px;
}

.health-draft-map-widget {
  min-height: 264px;
  padding: 18px 18px 14px;
  border-radius: 24px;
}

.health-draft-map-widget .health-draft-card-head {
  margin-bottom: 0;
}

.health-draft-map-widget .health-draft-body-visual {
  min-height: 202px;
  transform: translateY(-4px);
}

.health-draft-map-widget .health-draft-body-glow {
  width: 284px;
  height: 284px;
}

.health-draft-map-widget .health-draft-human {
  width: min(224px, 80%);
}

.health-draft-map-orbit {
  width: 242px;
  height: 242px;
}

.health-draft-map-orbit.is-two {
  width: 182px;
  height: 182px;
}

.health-draft-next-card {
  min-height: 62px;
  padding: 12px 14px;
}

.health-draft-workspace {
  grid-template-columns: minmax(0, 1.22fr) minmax(345px, .78fr);
  gap: 16px;
}

.health-draft-workspace-primary,
.health-draft-workspace-secondary {
  gap: 14px;
}

.health-draft-card {
  border-radius: 18px;
}

.health-draft-card-head,
.health-draft-section-head {
  margin-bottom: 13px;
}

.health-draft-plan {
  padding: 18px;
}

.health-draft-dose-grid {
  gap: 10px;
}

.health-draft-dose {
  min-height: 94px;
}

.health-draft-timeline-card {
  padding-bottom: 14px;
}

.health-draft-timeline {
  padding-top: 4px;
}

.health-draft-workspace-wide {
  margin-top: 14px;
}

.health-draft-area-grid {
  gap: 16px;
}

.health-draft-area-image {
  min-height: 110px;
}

@media (max-width: 1120px) {
  .health-draft-cockpit {
    grid-template-columns: 1fr;
  }

  .health-draft-cockpit-side {
    grid-template-columns: minmax(0, 1fr) minmax(270px, .5fr);
  }
}

@media (max-width: 820px) {
  .health-draft-cockpit {
    min-height: 0;
  }

  .health-draft-cockpit .health-draft-insights {
    margin: 20px 0 14px;
  }

  .health-draft-map-widget .health-draft-body-visual {
    min-height: 170px;
    transform: none;
  }

  .health-draft-map-widget .health-draft-human {
    width: 160px;
  }

  .health-draft-map-widget .health-draft-body-glow {
    width: 210px;
    height: 210px;
  }

  .health-draft-map-orbit {
    width: 180px;
    height: 180px;
  }

  .health-draft-map-orbit.is-two {
    width: 136px;
    height: 136px;
  }
}

@media (max-width: 560px) {
  .health-draft-cockpit-main h2 {
    font-size: 33px;
  }

  .health-draft-cockpit .health-draft-insights {
    margin: 16px 0 12px;
  }

  .health-draft-map-widget .health-draft-body-visual {
    min-height: 154px;
  }

  .health-draft-map-widget .health-draft-human {
    width: 128px;
  }
}

/* Health — Stage 1.6 mockup structure */
.health-draft-tabs {
  width: min(100%, 980px);
  justify-self: start;
  gap: 2px;
  padding: 5px 9px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
}

.health-draft-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 13px;
  position: relative;
}

.health-draft-tab svg {
  width: 17px;
  height: 17px;
  color: color-mix(in srgb, var(--health-violet) 48%, var(--health-muted));
}

.health-draft-tab.is-active {
  color: var(--health-ink);
  box-shadow: none;
}

.health-draft-tab.is-active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -5px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--health-accent), var(--health-violet));
}

.health-draft-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(430px, .78fr);
  gap: 16px;
  align-items: stretch;
}

.health-draft-hero-panel,
.health-draft-map-panel {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 0%, rgba(239,77,134,.15), transparent 32%),
    radial-gradient(circle at 90% 90%, rgba(124,58,237,.13), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--health-violet) 12%, transparent), 0 24px 66px rgba(76,29,149,.09);
}

.health-draft-hero-panel {
  min-height: 310px;
  padding: clamp(26px, 3vw, 42px);
}

.health-draft-hero-panel::after {
  content: '';
  position: absolute;
  right: 34px;
  top: 42px;
  width: 108px;
  height: 138px;
  opacity: .34;
  background:
    radial-gradient(ellipse at 50% 100%, transparent 41%, rgba(239,77,134,.45) 42%, transparent 44%),
    radial-gradient(ellipse at 20% 55%, transparent 45%, rgba(20,184,166,.3) 46%, transparent 48%),
    radial-gradient(ellipse at 80% 42%, transparent 43%, rgba(239,77,134,.35) 44%, transparent 46%);
  transform: rotate(-10deg);
  pointer-events: none;
}

.health-draft-hero-panel h2 {
  max-width: 620px;
  margin: 0;
  color: var(--health-ink);
  font-size: clamp(44px, 4.6vw, 68px);
  font-weight: 760;
  line-height: .98;
}

.health-draft-hero-panel p {
  max-width: 640px;
  margin: 12px 0 0;
  color: var(--health-muted);
  font-size: 16px;
  line-height: 1.45;
}

.health-draft-hero-panel .health-draft-insights {
  max-width: 820px;
  margin: clamp(34px, 4vw, 58px) 0 22px;
}

.health-draft-map-panel {
  min-height: 310px;
  padding: 0;
}

.health-draft-map-panel .health-draft-map-widget {
  height: 100%;
  min-height: 310px;
  border-radius: inherit;
  box-shadow: none;
  background:
    radial-gradient(circle at 52% 56%, rgba(124,58,237,.16), transparent 42%),
    radial-gradient(circle at 84% 12%, rgba(20,184,166,.13), transparent 27%),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.66));
}

.health-draft-map-panel .health-draft-body-visual {
  min-height: 238px;
}

.health-draft-map-panel .health-draft-human {
  width: min(250px, 82%);
}

.health-draft-map-panel .health-draft-body-glow {
  width: 310px;
  height: 310px;
}

.health-draft-map-panel .health-draft-map-orbit {
  width: 268px;
  height: 268px;
}

.health-draft-map-panel .health-draft-map-orbit.is-two {
  width: 204px;
  height: 204px;
}

.health-draft-workspace {
  grid-template-columns: minmax(0, 1.22fr) minmax(385px, .78fr);
  align-items: start;
}

.health-draft-workspace-wide {
  display: none;
}

.health-draft-workspace-primary > .health-draft-card,
.health-draft-workspace-secondary > .health-draft-card {
  border-radius: 20px;
}

.health-draft-workspace-primary > .health-draft-card {
  padding: 20px;
}

.health-draft-workspace-primary > .health-draft-card .health-draft-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.health-draft-workspace-primary > .health-draft-card .health-draft-result {
  min-height: 136px;
  align-content: start;
}

.health-draft-workspace-primary > .health-draft-card .health-draft-result strong {
  font-size: 28px;
  color: var(--health-teal);
}

.health-draft-active-list {
  padding: 18px;
}

.health-draft-active-list-items {
  display: grid;
  gap: 10px;
}

.health-draft-active-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 88px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--health-violet) 9%, transparent);
}

.health-draft-active-row .health-draft-area-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--health-violet) 10%, #fff);
  color: var(--health-violet);
}

.health-draft-active-row h3 {
  margin: 0;
  color: var(--health-ink);
  font-size: 15px;
}

.health-draft-active-row p,
.health-draft-active-row small {
  display: block;
  margin-top: 4px;
  color: var(--health-muted);
  font-size: 12px;
  line-height: 1.35;
}

.health-draft-active-status {
  align-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--health-violet) 10%, #fff);
  color: var(--health-violet);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.health-draft-timeline {
  grid-template-columns: repeat(6, minmax(120px, 1fr));
}

.health-draft-timeline-item:last-child::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--health-violet) 18%, var(--border)), transparent);
}

@media (max-width: 1180px) {
  .health-draft-top-grid,
  .health-draft-workspace {
    grid-template-columns: 1fr;
  }

  .health-draft-map-panel .health-draft-body-visual {
    min-height: 220px;
  }
}

@media (max-width: 820px) {
  .health-draft-tabs {
    width: 100%;
    border-radius: 18px;
  }

  .health-draft-tab {
    min-height: 38px;
    padding: 0 13px;
  }

  .health-draft-hero-panel,
  .health-draft-map-panel {
    border-radius: 22px;
  }

  .health-draft-hero-panel {
    min-height: 0;
    padding: 20px;
  }

  .health-draft-hero-panel h2 {
    font-size: 38px;
  }

  .health-draft-hero-panel .health-draft-insights {
    margin: 20px 0 14px;
  }

  .health-draft-map-panel .health-draft-map-widget {
    min-height: 0;
  }

  .health-draft-workspace-primary > .health-draft-card .health-draft-results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .health-draft-tab svg {
    display: none;
  }

  .health-draft-hero-panel h2 {
    font-size: 32px;
  }

  .health-draft-map-panel .health-draft-body-visual {
    min-height: 168px;
  }

  .health-draft-map-panel .health-draft-human {
    width: 140px;
  }

  .health-draft-map-panel .health-draft-body-glow {
    width: 190px;
    height: 190px;
  }

  .health-draft-active-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .health-draft-active-status {
    grid-column: 2;
    justify-self: start;
  }
}

/* Health — Stage 1.7 color language and human map */
.health-draft-page {
  --health-accent: #ff4f7d;
  --health-violet: #6b6ff6;
  --health-teal: #18c7b7;
  --health-amber: #ff8a3d;
  --health-sky: #78c7ff;
  --health-rose-soft: rgba(255, 79, 125, .13);
  --health-teal-soft: rgba(24, 199, 183, .13);
  --health-sky-soft: rgba(120, 199, 255, .15);
}

.health-draft-page .module-page-content {
  background:
    radial-gradient(circle at 10% 10%, rgba(255,79,125,.06), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(24,199,183,.07), transparent 28%),
    radial-gradient(circle at 55% 70%, rgba(120,199,255,.06), transparent 32%);
}

.health-draft-tabs {
  border-color: color-mix(in srgb, var(--health-sky) 28%, var(--border));
  box-shadow: 0 16px 44px rgba(86, 111, 246, .07);
}

.health-draft-tab.is-active::after {
  background: linear-gradient(90deg, var(--health-accent), var(--health-amber));
}

.health-draft-hero-panel {
  background:
    radial-gradient(circle at 4% 0%, rgba(255,79,125,.18), transparent 34%),
    radial-gradient(circle at 78% 16%, rgba(24,199,183,.10), transparent 31%),
    radial-gradient(circle at 88% 86%, rgba(107,111,246,.11), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(255,255,255,.84));
  box-shadow: inset 0 0 0 1px rgba(255,79,125,.13), 0 26px 72px rgba(255,79,125,.08);
}

.health-draft-map-panel {
  background:
    radial-gradient(circle at 12% 14%, rgba(24,199,183,.16), transparent 32%),
    radial-gradient(circle at 76% 72%, rgba(107,111,246,.16), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,253,255,.78));
  box-shadow: inset 0 0 0 1px rgba(24,199,183,.13), 0 26px 72px rgba(24,199,183,.08);
}

.health-draft-map-panel .health-draft-map-widget {
  background:
    radial-gradient(circle at 52% 50%, rgba(120,199,255,.18), transparent 33%),
    radial-gradient(circle at 50% 62%, rgba(255,79,125,.13), transparent 42%),
    radial-gradient(circle at 84% 14%, rgba(24,199,183,.13), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(247,253,255,.66));
}

.health-draft-kicker,
.health-draft-link {
  color: color-mix(in srgb, var(--health-violet) 68%, var(--health-accent));
}

.health-draft-soft-pill,
.health-draft-active-status {
  background: linear-gradient(135deg, rgba(255,79,125,.10), rgba(107,111,246,.10));
  color: #6658e8;
}

.health-draft-insight.is-risk {
  background: linear-gradient(135deg, rgba(255,79,125,.12), rgba(255,255,255,.78));
}

.health-draft-insight.is-good {
  background: linear-gradient(135deg, rgba(24,199,183,.13), rgba(255,255,255,.78));
}

.health-draft-insight.is-warn {
  background: linear-gradient(135deg, rgba(255,138,61,.13), rgba(255,255,255,.78));
}

.health-draft-icon-chip,
.health-draft-dose-icon,
.health-draft-active-row .health-draft-area-icon {
  background: rgba(255,255,255,.82);
}

.health-draft-human-soft {
  width: min(276px, 84%);
  overflow: visible;
  filter: drop-shadow(0 30px 38px rgba(107,111,246,.12));
}

.health-draft-human-soft .health-draft-hotspot {
  fill: rgba(120,199,255,.72);
  stroke: rgba(255,255,255,.92);
  stroke-width: 4;
  filter: drop-shadow(0 0 12px rgba(24,199,183,.5));
}

.health-draft-human-soft circle,
.health-draft-human-soft ellipse,
.health-draft-human-soft path {
  vector-effect: non-scaling-stroke;
}

.health-draft-map-panel .health-draft-human {
  width: min(292px, 88%);
}

.health-draft-body-glow,
.health-draft-map-panel .health-draft-body-glow {
  background:
    radial-gradient(circle, rgba(255,255,255,.62) 0 16%, rgba(120,199,255,.20) 17% 42%, rgba(255,79,125,.14) 43% 58%, rgba(24,199,183,.12) 59% 70%, transparent 74%);
}

.health-draft-map-orbit {
  border-color: rgba(120,199,255,.28);
}

.health-draft-map-orbit.is-two {
  border-color: rgba(255,79,125,.22);
}

.health-draft-map-dot {
  color: #172033;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(74, 103, 176, .16);
}

.health-draft-map-dot.is-teeth {
  color: #e11d48;
}

.health-draft-map-dot.is-skin,
.health-draft-map-dot.is-blood {
  color: #008f82;
}

.health-draft-map-dot.is-shoulder,
.health-draft-map-dot.is-gut {
  color: #6254df;
}

.health-draft-card,
.health-draft-active-row,
.health-draft-dose,
.health-draft-result,
.health-draft-emergency-grid > div {
  box-shadow: inset 0 0 0 1px rgba(120,199,255,.11), 0 22px 58px rgba(74,103,176,.055);
}

.health-draft-result-label svg,
.health-draft-spark path {
  stroke: var(--health-teal);
}

@media (max-width: 820px) {
  .health-draft-map-panel .health-draft-human {
    width: 190px;
  }
}

@media (max-width: 560px) {
  .health-draft-human-soft {
    width: min(162px, 74%);
  }

  .health-draft-map-panel .health-draft-human {
    width: 154px;
  }
}

/* ===== Health module — Codex mockup layout (hdx-) ===== */
.hdx-page {
  --hdx-ink: var(--ink, #111827);
  --hdx-muted: var(--ink2, #6b7280);
  --hdx-accent: #D4537E;
  max-width: none;
}

.hdx-page .module-page-content {
  display: grid;
  gap: 12px;
}

.hdx-page .module-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdx-report {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border-radius: 22px;
}

.hdx-report svg { width: 16px; height: 16px; }

.hdx-icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hdx-icon-btn svg { width: 18px; height: 18px; color: var(--hdx-muted); }

/* Tabs — underline style */
.hdx-tabs {
  display: flex;
  gap: 2px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.hdx-tabs::-webkit-scrollbar { display: none; }

.hdx-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--hdx-muted);
  font: 600 13px/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
}

.hdx-tab svg { width: 16px; height: 16px; }

.hdx-tab.is-active {
  color: var(--hdx-accent);
  border-bottom-color: var(--hdx-accent);
}

/* Two-column grid */
.hdx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 12px;
  align-items: start;
}

.hdx-main,
.hdx-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}

/* Cards */
.hdx-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 16px;
}

.hdx-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hdx-card-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--hdx-ink);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
}

.hdx-title-ic { display: inline-flex; color: var(--hdx-muted); }
.hdx-title-ic svg { width: 16px; height: 16px; }
.hdx-info { display: inline-flex; color: var(--hdx-muted); }
.hdx-info svg { width: 14px; height: 14px; }

.hdx-see {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--hdx-accent);
  font: 600 12px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
}

.hdx-see svg { width: 13px; height: 13px; }

.hdx-see-block {
  margin-top: 12px;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.hdx-muted { color: var(--hdx-muted); }

/* Icon chip */
.hdx-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cb);
  color: var(--c);
}

.hdx-chip svg { width: 54%; height: 54%; }

/* Hero */
.hdx-hero {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.hdx-hero-deco {
  position: absolute;
  top: -6px;
  right: 14px;
  width: 92px;
  height: 104px;
  pointer-events: none;
}

.hdx-hero-deco svg { width: 100%; height: 100%; }

.hdx-hero-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--hdx-ink);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
}

.hdx-hero-spark { display: inline-flex; color: #993556; }
.hdx-hero-spark svg { width: 17px; height: 17px; }

.hdx-hero-sub {
  margin: 4px 0 14px;
  color: color-mix(in srgb, var(--accent) 75%, var(--ink2));
  font-size: 12.5px;
  font-weight: 500;
}

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

.hdx-ins {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.hdx-ins-body { min-width: 0; flex: 1; }

.hdx-ins-t {
  display: block;
  color: var(--hdx-ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
}

.hdx-ins-v {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.25;
}

.hdx-ins-arr { flex: 0 0 auto; color: var(--hdx-muted); display: inline-flex; }
.hdx-ins-arr svg { width: 13px; height: 13px; }

/* Plan na dziś */
.hdx-plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px;
  gap: 8px;
}

.hdx-dose {
  padding: 10px 11px;
  border-radius: 12px;
  background: var(--surface2);
}

.hdx-dose-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: var(--hdx-muted);
  font-size: 11px;
  font-weight: 600;
}

.hdx-dose-hd svg { width: 13px; height: 13px; }

.hdx-dose-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}

.hdx-dose-name { color: var(--hdx-ink); font-weight: 600; }
.hdx-dose-amt { color: var(--hdx-muted); }

.hdx-chk {
  margin-left: auto;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #EAF3DE;
  color: #3B6D11;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hdx-chk svg { width: 11px; height: 11px; }

.hdx-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  cursor: pointer;
}

.hdx-copy-ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #534AB7;
}

.hdx-copy-ic svg { width: 15px; height: 15px; }

.hdx-copy-t {
  color: #3C3489;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

.hdx-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: #854F0B;
  font-size: 11.5px;
}

.hdx-warn svg { width: 14px; height: 14px; }

/* Timeline */
.hdx-tl-tools { display: flex; align-items: center; gap: 6px; }

.hdx-tl-sel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--hdx-ink);
  font-size: 11.5px;
  font-weight: 500;
}

.hdx-tl-sel svg { width: 13px; height: 13px; color: var(--hdx-muted); }

.hdx-tl-nav { display: inline-flex; gap: 4px; }

.hdx-tl-nav button {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hdx-muted);
  cursor: pointer;
}

.hdx-tl-nav svg { width: 13px; height: 13px; }

.hdx-tl-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}

.hdx-tl {
  display: flex;
  align-items: flex-start;
  min-width: 520px;
}

.hdx-ev {
  flex: 1;
  min-width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.hdx-ev:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 35px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  border-top: 1.5px dashed var(--border);
}

.hdx-ev-date {
  margin-bottom: 9px;
  color: var(--hdx-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}

.hdx-ev .hdx-chip,
.hdx-ev-add {
  z-index: 1;
}

.hdx-ev-add {
  width: 38px;
  height: 38px;
  border: 1.5px dashed var(--border);
  border-radius: 50%;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hdx-muted);
  cursor: pointer;
}

.hdx-ev-add svg { width: 15px; height: 15px; }

.hdx-ev-name {
  margin-top: 8px;
  color: var(--hdx-ink);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
}

.hdx-ev-days {
  margin-top: 2px;
  color: var(--hdx-accent);
  font-size: 10px;
  font-weight: 600;
}

/* Results */
.hdx-res-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hdx-res {
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--surface2);
  min-width: 0;
}

.hdx-res-name {
  color: var(--hdx-muted);
  font-size: 10.5px;
  margin-bottom: 4px;
}

.hdx-res-trend {
  font-size: 10.5px;
  font-weight: 600;
  margin-bottom: 3px;
}

.hdx-res-val {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.hdx-res-unit { font-size: 11px; font-weight: 500; }

.hdx-res-range {
  margin-top: 4px;
  color: var(--hdx-muted);
  font-size: 9.5px;
}

.hdx-spark {
  width: 100%;
  height: 30px;
  margin-top: 6px;
}

.hdx-spark path {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Map */
.hdx-map-stage {
  display: flex;
  justify-content: center;
}

.hdx-map-svg { width: 100%; height: auto; max-width: 320px; }

.hdx-mlbl-n { fill: var(--hdx-ink); font: 600 11px var(--sans); }
.hdx-mlbl-v { font: 500 9.5px var(--sans); }

/* Active areas */
.hdx-areas { display: grid; gap: 2px; }

.hdx-area {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 2px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.hdx-area:last-child { border-bottom: 0; }

.hdx-area-b { flex: 1; min-width: 0; }

.hdx-area-t {
  display: block;
  color: var(--hdx-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.hdx-area-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--cb);
  color: var(--c);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: 1px;
}

.hdx-area-d {
  display: block;
  margin-top: 2px;
  color: var(--hdx-muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.hdx-area-n {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  line-height: 1.3;
}

.hdx-area-arr { flex: 0 0 auto; color: var(--hdx-muted); display: inline-flex; padding-top: 2px; }
.hdx-area-arr svg { width: 13px; height: 13px; }

/* Emergency card */
.hdx-ec { border-color: color-mix(in srgb, #A32D2D 22%, var(--border)); }
.hdx-ec-title { color: #791F1F; }

.hdx-ec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.hdx-ec-rows { min-width: 0; }

.hdx-ec-r {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
}

.hdx-ec-r:last-child { border-bottom: 0; }
.hdx-ec-k { color: var(--hdx-muted); }
.hdx-ec-v { color: var(--hdx-ink); font-weight: 600; text-align: right; }

.hdx-ec-cross {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #FCEBEB;
  color: #A32D2D;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.hdx-ec-cross svg { width: 24px; height: 24px; }

/* Quick action bar */
.hdx-quickbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.hdx-qchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  color: var(--hdx-ink);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.hdx-qchip svg { width: 16px; height: 16px; }

/* Heading weight overrides — the global `.module-page [class$="-title"]` !important
   rule unintentionally catches these classes; match specificity + !important to win. */
.hdx-page .hdx-hero-title { font-weight: 700 !important; }
.hdx-page .hdx-card-title { font-weight: 650 !important; }
.hdx-page .hdx-ec-title { font-weight: 650 !important; }

/* Responsive */
@media (max-width: 1080px) {
  .hdx-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hdx-insights { grid-template-columns: 1fr; }
  .hdx-plan-grid { grid-template-columns: 1fr; }
  .hdx-res-grid { grid-template-columns: 1fr; }
  .hdx-page .module-header-actions .hdx-report { flex: 1; }
}

/* Health — Stage 1.11 final mockup push */
.hdx-page {
  --hdx-accent: #f04473;
  --hdx-coral: #ff7a59;
  --hdx-mint: #16bfae;
  --hdx-sky: #77bdfb;
  --hdx-indigo: #6366f1;
  --hdx-card-shadow: 0 24px 72px rgba(40, 55, 95, .075);
}

.hdx-page .module-page-content {
  gap: 18px;
  background:
    radial-gradient(circle at 8% 3%, rgba(240, 68, 115, .055), transparent 27%),
    radial-gradient(circle at 84% 12%, rgba(22, 191, 174, .06), transparent 28%),
    radial-gradient(circle at 58% 78%, rgba(119, 189, 251, .05), transparent 32%);
}

.hdx-tabs {
  width: min(100%, 1120px);
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid rgba(91, 106, 140, .13);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hdx-tab {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 0;
  color: #576179;
}

.hdx-tab.is-active {
  color: var(--hdx-accent);
  background: transparent;
}

.hdx-tab.is-active::after {
  height: 3px;
  left: 10px;
  right: 10px;
  bottom: -1px;
  background: linear-gradient(90deg, var(--hdx-accent), #ff8f6d);
}

.hdx-grid {
  grid-template-columns: minmax(0, 1.16fr) minmax(380px, .84fr);
  gap: 18px;
}

.hdx-main,
.hdx-side {
  gap: 18px;
}

.hdx-card {
  border: 0;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.84)),
    radial-gradient(circle at top right, rgba(119,189,251,.075), transparent 36%);
  box-shadow: inset 0 0 0 1px rgba(95, 111, 150, .08), var(--hdx-card-shadow);
  padding: 20px;
}

.hdx-hero {
  min-height: 192px;
  padding: 26px 28px;
  background:
    radial-gradient(circle at 3% 0%, rgba(240,68,115,.18), transparent 34%),
    radial-gradient(circle at 78% 24%, rgba(22,191,174,.095), transparent 30%),
    radial-gradient(circle at 88% 86%, rgba(99,102,241,.11), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(255,255,255,.84));
  box-shadow: inset 0 0 0 1px rgba(240,68,115,.11), 0 28px 78px rgba(240,68,115,.075);
}

.hdx-hero-title {
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: 0;
}

.hdx-hero-sub {
  margin-top: 7px;
  margin-bottom: 28px;
  color: #686f86;
  font-size: 15px;
}

.hdx-hero-deco {
  top: 4px;
  right: 42px;
  width: 116px;
  height: 134px;
  opacity: .9;
}

.hdx-insights {
  gap: 12px;
}

.hdx-ins {
  min-height: 62px;
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 1px rgba(95, 111, 150, .08), 0 15px 36px rgba(40,55,95,.05);
}

.hdx-card-title {
  font-size: 17px;
  letter-spacing: 0;
}

.hdx-plan-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px;
  gap: 12px;
}

.hdx-dose,
.hdx-res {
  border-radius: 16px;
  background: rgba(246, 248, 252, .86);
}

.hdx-map-stage {
  min-height: 274px;
  align-items: center;
}

.hdx-map-svg {
  max-width: 390px;
  filter: drop-shadow(0 22px 38px rgba(59, 91, 158, .10));
}

.hdx-body {
  opacity: .72;
}

.hdx-map-svg line,
.hdx-map-svg path[stroke="#cdd3e3"] {
  stroke: rgba(124, 139, 170, .44);
}

.hdx-dot circle:first-child {
  opacity: .18;
}

.hdx-mlbl-n {
  fill: #141c33;
  font-size: 12px;
  font-weight: 750;
}

.hdx-mlbl-v {
  font-size: 10px;
  font-weight: 650;
}

.hdx-see-block {
  min-height: 42px;
  border: 1px solid rgba(95, 111, 150, .13);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  color: var(--hdx-accent);
}

.hdx-area {
  min-height: 72px;
  padding: 12px 4px;
}

.hdx-ec {
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.86)),
    radial-gradient(circle at 88% 72%, rgba(240,68,115,.11), transparent 34%);
}

.hdx-quickbar {
  display: none;
}

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

  .hdx-map-svg {
    max-width: 430px;
  }
}

@media (max-width: 720px) {
  .hdx-tabs {
    overflow-x: auto;
  }

  .hdx-hero {
    padding: 22px;
  }

  .hdx-hero-title {
    font-size: 31px;
  }

  .hdx-plan-grid {
    grid-template-columns: 1fr;
  }

  .hdx-map-stage {
    min-height: 220px;
  }
}

/* ===== Samochody (Vehicles) — Stage 1a cockpit (veh-) ===== */
.veh-page {
  --veh-ink: var(--ink, #111827);
  --veh-muted: var(--ink2, #6b7280);
  --veh-faint: var(--ink3, #9aa3b2);
  --veh-icon: #5b6472;
  --veh-accent: #7c3aed;
  --veh-line: color-mix(in srgb, var(--veh-ink) 7%, transparent);
  max-width: none;
  container-type: inline-size;
  container-name: veh;
}
.veh-page .module-page-content { display: grid; gap: 14px; }
.veh-page .lucide { flex-shrink: 0; }
.veh-add-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; border-radius: 24px; font-weight: 550; }

.veh-card {
  border: 1px solid var(--veh-line);
  border-radius: 22px;
  background: var(--surface);
  padding: 20px;
  box-shadow: 0 1px 2px rgba(17,24,56,.04), 0 8px 24px rgba(17,24,56,.03);
}
.veh-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.veh-card-title { margin: 0; color: var(--veh-ink); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.veh-link { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--veh-accent); font: 550 13px var(--sans); cursor: pointer; white-space: nowrap; padding: 0; }

/* Selector strip */
.veh-selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.veh-pick {
  position: relative; display: flex; align-items: center; gap: 11px; padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--veh-ink) 8%, transparent); border-radius: 18px;
  background: var(--surface); cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s, background .15s;
}
.veh-pick:hover { border-color: color-mix(in srgb, var(--veh-ink) 16%, transparent); }
.veh-pick.is-active {
  border-color: color-mix(in srgb, var(--veh-accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--veh-accent) 55%, transparent), 0 10px 26px color-mix(in srgb, var(--veh-accent) 14%, transparent);
}
.veh-pick-check {
  position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--veh-accent); color: #fff; display: flex; align-items: center; justify-content: center;
}
/* photo thumbnail = the picture slot, not an icon chip — neutral light */
.veh-pick-thumb {
  width: 50px; height: 38px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #fbfbfd, #eef0f4);
  border: 1px solid color-mix(in srgb, var(--veh-ink) 6%, transparent); color: var(--veh-faint);
}
.veh-pick-b { min-width: 0; }
.veh-pick-n { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--veh-ink); }
.veh-pick-main { font-size: 10.5px; font-weight: 600; color: var(--veh-accent); background: color-mix(in srgb, var(--veh-accent) 9%, transparent); border-radius: 6px; padding: 1px 7px; }
.veh-pick-meta { display: block; font-size: 11.5px; color: var(--veh-muted); margin-top: 2px; }
.veh-pick-add {
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  border-style: dashed; border-color: color-mix(in srgb, var(--veh-ink) 14%, transparent);
  background: color-mix(in srgb, var(--veh-ink) 2%, transparent); color: var(--veh-muted);
}
.veh-pick-add:hover { background: color-mix(in srgb, var(--veh-accent) 4%, transparent); border-color: color-mix(in srgb, var(--veh-accent) 30%, transparent); }
.veh-pick-add-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--veh-accent); box-shadow: 0 1px 3px rgba(17,24,56,.06); }
.veh-pick-add-t { font-size: 12.5px; font-weight: 550; }

/* Hero — full-bleed photo with left gradient overlay */
.veh-hero {
  position: relative; padding: 0; overflow: hidden;
  min-height: 250px; background: var(--surface);
}
/* Photo background layer — absolutely fills the card */
.veh-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-repeat: no-repeat; background-color: #18181f;
  transform-origin: center center;
}
/* Content overlay sits above bg */
.veh-hero-overlay {
  position: relative; z-index: 1;
  display: flex; align-items: stretch; min-height: 250px;
}
/* Gradient: dark left → transparent right (only when photo present) */
.veh-hero.has-photo .veh-hero-overlay {
  background: linear-gradient(
    to right,
    rgba(8,8,16,.85) 0%,
    rgba(8,8,16,.65) 28%,
    rgba(8,8,16,.28) 56%,
    transparent 76%
  );
}
/* Left panel — metrics and title */
.veh-hero-left {
  padding: 22px 26px 22px; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  max-width: 400px;
}
/* Placeholder icon on right when no photo */
.veh-hero-no-photo {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--ink3); opacity: .15;
}
.veh-hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.veh-hero-n {
  margin: 0; font-size: 25px; font-weight: 650;
  letter-spacing: -.02em; color: var(--veh-ink); line-height: 1.12;
}
.veh-hero.has-photo .veh-hero-n { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.veh-edit {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  border: 1px solid color-mix(in srgb, var(--veh-ink) 12%, transparent); border-radius: 20px;
  background: var(--surface); color: var(--veh-ink); font-size: 12px; font-weight: 550; cursor: pointer;
}
.veh-hero.has-photo .veh-edit {
  background: rgba(0,0,0,.3); backdrop-filter: blur(8px);
  border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.9);
}
.veh-hero.has-photo .veh-edit:hover { background: rgba(0,0,0,.5); }
.veh-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.veh-chip { font-size: 11.5px; color: #475467; border: 1px solid var(--veh-line); border-radius: 8px; padding: 3px 10px; }
.veh-hero.has-photo .veh-chip-plate {
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.2);
}
.veh-metrics { display: grid; gap: 2px; }
.veh-metric { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.veh-metric-ic { color: var(--veh-icon); display: inline-flex; }
.veh-metric-tx { min-width: 0; display: flex; flex-direction: column; }
.veh-metric-v { font-size: 14.5px; font-weight: 600; color: var(--veh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veh-metric-l { font-size: 11px; color: var(--veh-muted); margin-top: 1px; }
.veh-hero.has-photo .veh-metric-ic { color: rgba(255,255,255,.6); }
.veh-hero.has-photo .veh-metric-v { color: rgba(255,255,255,.95); }
.veh-hero.has-photo .veh-metric-l { color: rgba(255,255,255,.55); }
/* Camera button — top-right corner */
.veh-hero-cam-btn {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 20px;
  font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
  background: rgba(0,0,0,.38); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.9);
  transition: background .15s;
}
.veh-hero-cam-btn:hover { background: rgba(0,0,0,.58); }
.veh-hero:not(.has-photo) .veh-hero-cam-btn {
  background: var(--surface2); border-color: var(--border); color: var(--ink2);
  backdrop-filter: none;
}
.veh-hero:not(.has-photo) .veh-hero-cam-btn:hover { background: color-mix(in srgb, var(--veh-accent) 7%, var(--surface)); }

/* Premium neutral photo placeholder */
.veh-photo {
  position: relative; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--veh-line);
  background: linear-gradient(158deg, #fcfcfe 0%, #f1f3f8 55%, #e9edf5 100%);
  display: flex; align-items: center; justify-content: center;
}
.veh-photo::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 16%, rgba(255,255,255,.7), transparent 60%);
  pointer-events: none;
}
.veh-photo-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #aab2c2; }
.veh-photo-car { display: inline-flex; }
.veh-photo-cta {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 550; color: var(--veh-muted);
  background: rgba(255,255,255,.74); border: 1px solid var(--veh-line);
  border-radius: 22px; padding: 7px 13px; backdrop-filter: blur(6px);
}

/* Two-column: history (main) + priorities (side) */
.veh-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.veh-col-main, .veh-col-side { min-width: 0; }

/* Priorytety auta — clean list, NO icon chips; colour only on status badge */
.veh-prio-list { display: grid; gap: 0; }
.veh-prio-row { display: flex; align-items: center; gap: 13px; padding: 13px 12px; margin: 0 -12px; border-bottom: 1px solid var(--veh-line); border-radius: 12px; }
.veh-prio-row:last-child { border-bottom: 0; }
.veh-prio-row.is-priority { background: color-mix(in srgb, #B42318 4%, transparent); border-bottom-color: transparent; }
.veh-prio-ic { color: var(--veh-icon); display: inline-flex; }
.veh-prio-row.is-priority .veh-prio-ic { color: #B42318; }
.veh-prio-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.veh-prio-t { font-size: 13.5px; font-weight: 600; color: var(--veh-ink); }
.veh-prio-s { font-size: 11.5px; color: var(--veh-muted); margin-top: 1px; }
.veh-prio-when { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.veh-prio-badge { font-size: 11px; font-weight: 650; border-radius: 7px; padding: 2px 8px; }
.veh-prio-date { font-size: 10.5px; color: var(--veh-muted); }

/* Add row */
.veh-add-row {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 12px;
  padding: 10px; border: 1px dashed color-mix(in srgb, var(--veh-ink) 14%, transparent); border-radius: 12px; background: none;
  color: var(--veh-accent); font-size: 12.5px; font-weight: 600; cursor: pointer;
}

/* Service history — neutral icons, NO chips */
.veh-tl { display: grid; gap: 0; }
.veh-tl-row { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--veh-line); }
.veh-tl-row:last-child { border-bottom: 0; }
.veh-tl-ic { color: var(--veh-icon); display: inline-flex; flex-shrink: 0; }
.veh-tl-date { display: flex; flex-direction: column; width: 76px; flex-shrink: 0; }
.veh-tl-date span:first-child { font-size: 11.5px; font-weight: 600; color: var(--veh-ink); }
.veh-tl-date span:last-child { font-size: 10.5px; color: var(--veh-muted); margin-top: 1px; }
.veh-tl-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.veh-tl-t { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--veh-ink); }
.veh-tl-done { display: inline-flex; }
.veh-tl-s { font-size: 11.5px; color: var(--veh-muted); margin-top: 2px; }
.veh-tl-cost { flex-shrink: 0; font-size: 14px; font-weight: 650; color: var(--veh-ink); }

/* Costs — slim, de-emphasized */
.veh-costs-slim { border: 1px solid var(--veh-line); border-radius: 16px; background: color-mix(in srgb, var(--veh-ink) 1.5%, var(--surface)); padding: 14px 18px; }
.veh-costs-row { display: flex; align-items: baseline; justify-content: space-between; }
.veh-costs-l { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--veh-ink); }
.veh-costs-l .lucide { color: var(--veh-icon); }
.veh-costs-total { font-size: 16px; font-weight: 650; color: var(--veh-ink); }
.veh-costs-bar { display: flex; height: 7px; border-radius: 5px; overflow: hidden; margin: 11px 0 9px; background: color-mix(in srgb, var(--veh-ink) 6%, transparent); }
.veh-costs-seg { display: block; }
.veh-costs-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 11.5px; color: var(--veh-muted); }
.veh-costs-leg span { display: inline-flex; align-items: center; gap: 6px; }
.veh-costs-dot { width: 8px; height: 8px; border-radius: 3px; }
.veh-costs-note { margin-left: auto; color: var(--veh-faint); }

/* Empty placeholder */
.veh-empty { text-align: center; }
.veh-empty .veh-photo--hero { height: 160px; min-height: 0; border: 1px solid var(--veh-line); border-radius: 14px; margin-bottom: 14px; }
.veh-empty h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--veh-ink); }
.veh-empty p { font-size: 13px; color: var(--veh-muted); }

/* Heading weight override — global .module-page [class$="-title"] !important rule */
.veh-page .veh-card-title, .veh-page .veh-hero-n { font-weight: 650 !important; }

/* (responsive handled by the @container veh rules at the end of this section) */

/* ---- Stage 1b: tyres / documents / quick access / issues ---- */
.veh-badge { font-size: 11px; font-weight: 650; border-radius: 7px; padding: 2px 8px; }
.veh-grid3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }

/* shared simple row list (tyres + documents) — neutral icon, no chip */
.veh-rowlist { display: grid; gap: 0; }
.veh-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--veh-line); }
.veh-row:last-child { border-bottom: 0; }
.veh-row-ic { color: var(--veh-icon); display: inline-flex; flex-shrink: 0; }
.veh-row-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.veh-row-t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--veh-ink); }
.veh-row-mm { font-size: 11px; font-weight: 600; color: var(--veh-muted); }
.veh-row-s { font-size: 11px; color: var(--veh-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* documents right side */
.veh-doc-r { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.veh-doc-kind { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--veh-muted); border: 1px solid var(--veh-line); border-radius: 5px; padding: 2px 6px; }
.veh-doc-dl { display: inline-flex; color: var(--veh-icon); cursor: pointer; }

/* quick access — plain list, neutral leading icon, no chips */

/* issues — photo cards (placeholder photo, NOT an icon chip) + status badge */
.veh-issues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.veh-issue { display: flex; flex-direction: column; gap: 9px; border: 1px solid var(--veh-line); border-radius: 14px; padding: 10px; background: var(--surface); }
.veh-issue-photo { height: 84px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #aab2c2; background: linear-gradient(158deg, #fcfcfe, #eef0f5); border: 1px solid var(--veh-line); }
.veh-issue-b { display: flex; flex-direction: column; gap: 6px; }
.veh-issue-t { font-size: 12px; font-weight: 600; color: var(--veh-ink); line-height: 1.3; }
.veh-issue-m { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.veh-issue-date { font-size: 10.5px; color: var(--veh-muted); }
.veh-issue-add { align-items: center; justify-content: center; gap: 9px; border-style: dashed; border-color: color-mix(in srgb, var(--veh-ink) 14%, transparent); background: color-mix(in srgb, var(--veh-ink) 1.5%, transparent); cursor: pointer; }
.veh-issue-add-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--veh-accent); box-shadow: 0 1px 3px rgba(17,24,56,.06); }
.veh-issue-add-t { font-size: 12px; font-weight: 550; color: var(--veh-muted); text-align: center; }

/* (grid3 / issues responsive handled by the @container veh rules above) */

/* ---- Calm premium colour refinement (status = text + dot, fewer pills/borders) ---- */
/* status indicator: small dot + coloured text, never a filled pill */
.veh-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.veh-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.veh-when-txt { font-size: 12px; font-weight: 600; color: var(--veh-muted); }

/* priorities: neutral rows; top priority only very faintly warm (no pink) */
.veh-prio-row.is-priority { background: color-mix(in srgb, #C2410C 3%, var(--surface)); border-bottom-color: transparent; }
.veh-prio-row.is-priority .veh-prio-ic { color: #C2410C; }

/* "Dodaj…" inline rows become quiet text actions — no dashed purple borders */
.veh-add-row {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px;
  width: auto; margin-top: 12px; padding: 4px 2px;
  border: 0; border-radius: 0; background: none;
  color: var(--veh-muted); font-size: 12.5px; font-weight: 550; cursor: pointer;
}
.veh-add-row:hover { color: var(--veh-ink); }
.veh-add-row .lucide { color: var(--veh-icon); }

/* hero overrides */
.veh-photo { background: linear-gradient(162deg, #fcfcfe 0%, #f4f5f9 60%, #eef0f5 100%); }
.veh-photo-inner { gap: 9px; color: #b3bac8; }
.veh-photo-cta { font-size: 11.5px; padding: 6px 12px; }
.veh-metric-v { font-size: 15px; }
.veh-chip-plate { font-weight: 600; letter-spacing: .03em; color: var(--veh-ink); }

/* costs: quieter, not a finance module — muted segments, lighter card */
.veh-costs-slim { background: color-mix(in srgb, var(--veh-ink) 1%, var(--surface)); padding: 12px 16px; }
.veh-costs-total { font-size: 14.5px; font-weight: 600; }
.veh-costs-l { font-size: 12.5px; }
.veh-costs-bar { height: 5px; margin: 9px 0 8px; }
.veh-costs-leg { font-size: 11px; }

/* empty states / form */
.veh-muted { color: var(--veh-muted); }
button.veh-photo { width: 100%; cursor: pointer; font: inherit; text-align: inherit; }
button.veh-photo:hover { background: linear-gradient(162deg, #fbfbfe 0%, #eef1f7 60%, #e7ebf3 100%); }

/* ─── Photo position editor modal ──────────────────────────────── */
.veh-pe-wrap { display: flex; flex-direction: column; gap: 14px; }
.veh-pe-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 6;
  border-radius: 12px; overflow: hidden;
  background: #18181f; user-select: none; touch-action: none;
  cursor: default;
}
.veh-pe-frame.has-photo { cursor: grab; }
.veh-pe-frame.has-photo:active { cursor: grabbing; }
.veh-pe-bg {
  position: absolute; inset: 0;
  background-size: 120% auto; background-repeat: no-repeat; background-color: #18181f;
}
.veh-pe-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(8,8,16,.82) 0%, rgba(8,8,16,.6) 30%, rgba(8,8,16,.25) 58%, transparent 78%);
  display: flex; align-items: flex-end; padding: 14px 18px;
}
.veh-pe-left { display: flex; flex-direction: column; gap: 3px; }
.veh-pe-name { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.2; }
.veh-pe-plate {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.12); border-radius: 6px;
  padding: 2px 7px; display: inline-block; width: fit-content;
}
.veh-pe-drag-hint {
  position: absolute; top: 10px; right: 10px;
  font-size: 11px; color: rgba(255,255,255,.82);
  background: rgba(0,0,0,.42); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: 4px 10px; pointer-events: none;
}
.veh-pe-no-photo {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: rgba(255,255,255,.22); font-size: 13px;
}
.veh-pe-controls { display: flex; flex-direction: column; gap: 10px; }
.veh-pe-zoom-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--ink2); cursor: default;
}
.veh-pe-zoom-row input[type=range] { flex: 1; cursor: pointer; accent-color: var(--veh-accent); }
.veh-pe-zoom-val { min-width: 36px; text-align: right; font-size: 12px; color: var(--ink3); }
.veh-pe-file-row { display: flex; align-items: center; gap: 10px; }
.veh-pe-file-name { font-size: 12px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* compact in-section empty lines */
.veh-empty-line { font-size: 12.5px; color: var(--veh-muted); padding: 12px 2px; }

/* full-module empty state */
.veh-empty-module { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 22px 26px; gap: 4px; }
.veh-empty-module .veh-empty-photo { width: 100%; max-width: 360px; height: 168px; border-radius: 16px; margin-bottom: 16px; }
.veh-empty-module h3 { margin: 0; font-size: 18px; font-weight: 650; color: var(--veh-ink); }
.veh-empty-module p { font-size: 13px; color: var(--veh-muted); max-width: 420px; margin: 0 0 14px; }

/* car add/edit form */
.veh-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.veh-form-grid .veh-field-wide { grid-column: 1 / -1; }
.veh-check { flex-direction: row; align-items: center; gap: 9px; }
.veh-check input { width: 17px; height: 17px; flex-shrink: 0; }
.veh-check span { font-size: 13px; color: var(--veh-ink); }
@media (max-width: 560px) { .veh-form-grid { grid-template-columns: 1fr; } }

/* clickable item rows (edit on click) */
.veh-prio-row[data-veh-item], .veh-tl-row[data-veh-item], .veh-row[data-veh-item] { cursor: pointer; }
.veh-prio-row[data-veh-item]:hover { background: color-mix(in srgb, var(--veh-ink) 2.5%, transparent); }
.veh-prio-row.is-priority[data-veh-item]:hover { background: color-mix(in srgb, #C2410C 6%, var(--surface)); }
.veh-tl-row[data-veh-item]:hover, .veh-row[data-veh-item]:hover { background: color-mix(in srgb, var(--veh-ink) 2.5%, transparent); }
.veh-tl-row[data-veh-item], .veh-row[data-veh-item] { margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 10px; }
[data-veh-item]:focus-visible { outline: 2px solid color-mix(in srgb, var(--veh-accent) 55%, transparent); outline-offset: -2px; }
.veh-issue[data-veh-item] { cursor: pointer; }
.veh-issue[data-veh-item]:hover { border-color: color-mix(in srgb, var(--veh-ink) 16%, transparent); }
.veh-issue-photo.has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.veh-doc-dl { cursor: pointer; }
.veh-doc-dl:hover { color: var(--veh-ink); }

/* tyre photo thumbnail in row */
.veh-tyre-thumb {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--veh-line);
}

/* "Odnów" button for overdue yearly reminders */
.veh-renew-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--veh-accent);
  background: none;
  border: 1px solid color-mix(in srgb, var(--veh-accent) 45%, transparent);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 3px;
  transition: background .15s, border-color .15s;
}
.veh-renew-btn:hover {
  background: color-mix(in srgb, var(--veh-accent) 8%, transparent);
  border-color: var(--veh-accent);
}

/* ---- Responsive: container queries (module reacts to its OWN width, not the
   viewport — the sidebar narrows content, so a half-screen window left the
   module cramped). Placed last so they override the base grid definitions.
   .veh-page is the query container (container-type: inline-size). ---- */
@container veh (max-width: 880px) {
  .veh-grid { grid-template-columns: 1fr; }
  .veh-grid3 { grid-template-columns: 1fr; }
  .veh-hero { min-height: 210px; }
  .veh-hero-overlay { min-height: 210px; }
  .veh-hero.has-photo .veh-hero-overlay {
    background: linear-gradient(
      to right,
      rgba(8,8,16,.88) 0%,
      rgba(8,8,16,.72) 40%,
      rgba(8,8,16,.38) 68%,
      rgba(8,8,16,.12) 100%
    );
  }
  .veh-hero-left { max-width: 100%; padding: 18px 20px 20px; }
  .veh-issues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container veh (max-width: 620px) {
  .veh-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .veh-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
}
/* Vehicles custom header — always inline title + add button */
.veh-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px 12px;
}
.veh-hd .page-title { margin: 0; }

/* Phone hero — media query (guaranteed by viewport width, not container size) */
@media (max-width: 640px) {
  /* Icon-only add button in header on mobile */
  .veh-hd .veh-add-btn span { display: none; }
  .veh-hd { padding: 12px 16px 10px; }
  /* Taller hero so flex-end leaves visible space above car name */
  .veh-hero { min-height: 240px !important; }
  /* Gradient bottom-to-top so text reads over dark bottom */
  .veh-hero-overlay { align-items: flex-end !important; min-height: 240px !important; }
  .veh-hero.has-photo .veh-hero-overlay {
    background: linear-gradient(to top, rgba(8,8,16,.93) 0%, rgba(8,8,16,.62) 40%, rgba(8,8,16,.14) 66%, transparent 100%) !important;
  }
  /* align-self ensures veh-hero-left sticks to bottom even when overlay stretches */
  .veh-hero-left { padding: 0 18px 14px !important; justify-content: flex-end !important; align-self: flex-end !important; }
  /* Text ~25% smaller — each element has its own px, must override individually */
  .veh-hero-n { font-size: 19px !important; }
  .veh-metric { padding: 4px 0 !important; gap: 7px !important; }
  .veh-metric-v { font-size: 11px !important; }
  .veh-metric-l { font-size: 8px !important; }
  .veh-chip { font-size: 9px !important; padding: 2px 7px !important; }
  .veh-hero-no-photo { margin-top: auto !important; }
  /* Both buttons: ~30% smaller, same size */
  .veh-hero .veh-edit,
  .veh-hero .veh-hero-cam-btn { padding: 4px 9px !important; font-size: 9px !important; gap: 4px !important; }
  .veh-hero .veh-edit svg,
  .veh-hero .veh-hero-cam-btn svg { width: 11px !important; height: 11px !important; }
  /* Edytuj → top-right; Zmień zdjęcie → bottom-right */
  .veh-hero .veh-edit { position: absolute !important; top: 10px !important; right: 10px !important; z-index: 2 !important; }
  .veh-hero-cam-btn { top: auto !important; bottom: 10px !important; }
}
@container veh (max-width: 420px) {
  .veh-selector { grid-template-columns: 1fr; }
  .veh-issues { grid-template-columns: 1fr; }
  .veh-metrics { grid-template-columns: 1fr; }
}
/* Cleaning Schedule: external service read-only pilot */
.cs-service-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cs-service-hero {
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: 24px;
  padding: 26px;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 139, 91, .18), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(127, 92, 255, .18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,246,255,.92));
  box-shadow: 0 24px 70px rgba(31, 24, 60, .08);
}
.cs-service-kicker,
.cs-service-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.cs-service-hero h2 {
  margin: 8px 0;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: .98;
  letter-spacing: 0;
  color: var(--ink);
}
.cs-service-hero p {
  max-width: 720px;
  margin: 0;
  color: var(--ink2);
  line-height: 1.55;
}
.cs-service-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.cs-service-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: var(--ink2);
  font-size: .86rem;
}
.cs-service-stats strong { color: var(--ink); font-size: 1rem; }
.cs-service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.cs-service-main,
.cs-service-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-service-day,
.cs-service-card,
.cs-service-error,
.cs-service-loading {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 14px 38px rgba(18, 24, 40, .06);
}
.cs-service-day { overflow: hidden; }
.cs-service-day--today { border-color: color-mix(in srgb, var(--accent) 36%, var(--border)); }
.cs-service-day-hd {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface2));
  border-bottom: 1px solid var(--border);
}
.cs-service-day-hd h3 {
  margin: 4px 0 0;
  font-size: 1.2rem;
  line-height: 1.15;
  color: var(--ink);
}
.cs-service-day-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cs-service-tag,
.cs-service-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink2);
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}
.cs-service-tag--wp,
.cs-service-chip { background: #fef3c7; color: #b45309; }
.cs-service-table {
  display: flex;
  flex-direction: column;
}
.cs-service-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 70px 56px 70px 56px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}
.cs-service-row:last-child { border-bottom: 0; }
.cs-service-row--new { background: #fff9e6; }
.cs-service-row strong { color: var(--ink); }
.cs-service-row span { color: var(--ink2); }
.cs-service-row em {
  color: #f59e0b;
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}
.cs-service-tasks {
  margin: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.cs-service-tasks > span,
.cs-service-card-hd span {
  display: block;
  margin-bottom: 8px;
  color: var(--ink3);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.cs-service-task,
.cs-service-issue {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.cs-service-task:first-of-type,
.cs-service-issue:first-of-type { border-top: 0; }
.cs-service-task strong,
.cs-service-issue strong { color: var(--ink); }
.cs-service-task small,
.cs-service-issue span {
  color: var(--ink2);
  line-height: 1.35;
}
.cs-service-card { padding: 16px; }
.cs-service-card-hd {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}
.cs-service-card-hd strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
}
.cs-service-card--muted p {
  margin: 0;
  color: var(--ink2);
  font-size: .86rem;
  line-height: 1.55;
}
.cs-service-settlements { margin-top: 2px; }
.cs-service-settlements-copy {
  margin: 0 0 12px;
  color: var(--ink2);
  font-size: .78rem;
  line-height: 1.45;
}
.cs-service-settlement-range {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 10px 0 13px;
  border-bottom: 1px solid var(--border);
}
.cs-service-settlement-range label { display: grid; gap: 4px; color: var(--ink2); font-size: .68rem; font-weight: 700; }
.cs-service-settlement-list { display: grid; }
.cs-service-settlement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.cs-service-settlement-row:last-child { border-bottom: 0; }
.cs-service-settlement-row > div { display: grid; gap: 3px; min-width: 0; }
.cs-service-settlement-row strong { color: var(--ink); font-size: .78rem; }
.cs-service-settlement-row span:not(.cs-periodic-status) { color: var(--ink2); font-size: .69rem; }
.cs-service-empty {
  margin: 0;
  padding: 18px 20px;
  color: var(--ink3);
}
.cs-service-error,
.cs-service-loading {
  padding: 34px 22px;
  text-align: center;
}
.cs-service-error h3 { margin: 0 0 8px; color: var(--ink); }
.cs-service-error p,
.cs-service-loading p {
  margin: 0 0 14px;
  color: var(--ink2);
}
@media (max-width: 900px) {
  .cs-service-grid { grid-template-columns: 1fr; }
  .cs-service-row {
    grid-template-columns: minmax(96px, 1fr) 54px 48px 54px 44px;
    padding: 10px 14px;
    gap: 8px;
    font-size: .9rem;
  }
  .cs-service-hero { padding: 22px; }
}
@media (max-width: 560px) {
  .cs-service-day-hd { flex-direction: column; }
  .cs-service-row { grid-template-columns: minmax(86px, 1fr) 48px 44px 48px; }
  .cs-service-row em { grid-column: 1 / -1; }
  .cs-service-settlement-range { grid-template-columns: 1fr 1fr; }
  .cs-service-settlement-range .btn { grid-column: 1 / -1; width: 100%; }
  .cs-service-settlement-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cs-service-settlement-row .btn { grid-column: 1 / -1; width: 100%; }
}

/* ==========================================================================
   Gifts module (Prezenty) — Stage 1 Draft UI Checkpoint
   ========================================================================== */
.gifts-people-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-bottom: 16px;
}
.gifts-people-scroll {
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  flex: 1;
  padding-bottom: 2px;
}
.gifts-person-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 8px 14px 8px 8px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gifts-person-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.gifts-person-chip.is-active {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient, var(--accent)) border-box;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.gifts-person-chip--add {
  border-style: dashed;
  color: var(--ink2);
}
.gifts-add-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--border);
  font-size: 18px;
  line-height: 1;
}
.gifts-person-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
}
.gifts-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gifts-avatar-fallback {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink2);
}
.gifts-person-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.gifts-person-meta strong {
  font-size: .88rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.gifts-person-meta small { font-size: .74rem; color: var(--ink3); }
.gifts-edit-people-link {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--ink2);
  font-size: .82rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 8px;
}
.gifts-edit-people-link:hover { color: var(--accent); }

.gifts-table-wrap {
  overflow-x: auto;
  padding: 0;
  margin-bottom: 16px;
}
.gifts-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.gifts-table thead th {
  text-align: left;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.gifts-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.gifts-table tbody tr:last-child td { border-bottom: none; }
.gifts-table tbody tr.is-bought .gifts-cell-gift strong { text-decoration: line-through; color: var(--ink3); }

.gifts-cell-gift {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: default;
  min-width: 220px;
}
.gifts-cell-gift--hidden { cursor: pointer; }
.gifts-thumb {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.gifts-thumb--hidden { filter: blur(.5px); opacity: .7; }
.gifts-gift-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gifts-gift-text strong { font-size: .92rem; color: var(--ink); }
.gifts-gift-text small { font-size: .78rem; color: var(--ink2); }
.gifts-store-link {
  display: inline-block;
  font-size: .76rem;
  color: var(--accent);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gifts-store-link:hover { text-decoration: underline; }
.gifts-price-cell { white-space: nowrap; }

.gifts-occasion-pill {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .76rem;
  background: var(--surface2);
  color: var(--ink2);
  white-space: nowrap;
}

.gifts-hearts {
  display: inline-flex;
  gap: 1px;
}
.gifts-heart {
  border: none;
  background: none;
  padding: 1px;
  margin: 0;
  cursor: pointer;
  color: var(--ink3);
  font-size: .95rem;
  line-height: 1;
}
.gifts-heart:hover { transform: scale(1.15); }
/* Filled hearts progress across the Layf logo gradient (coral → pink →
   lavender → violet) instead of a flat color — a small brand-matching touch
   on the desire-level meter. Falls back to --accent on non-Layf-Core themes. */
.gifts-heart.is-filled:nth-child(1) { color: var(--layf-accent-coral, var(--accent)); }
.gifts-heart.is-filled:nth-child(2) { color: var(--layf-accent-pink, var(--accent)); }
.gifts-heart.is-filled:nth-child(3) { color: color-mix(in srgb, var(--layf-accent-pink, var(--accent)) 50%, var(--layf-accent-lavender, var(--accent)) 50%); }
.gifts-heart.is-filled:nth-child(4) { color: var(--layf-accent-lavender, var(--accent)); }
.gifts-heart.is-filled:nth-child(5) { color: var(--layf-accent-violet, var(--accent)); }
.gifts-desire-label {
  display: block;
  color: var(--ink3);
  font-size: .72rem;
}

.gifts-status {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: .84rem;
}
.gifts-status--idea { color: var(--ink2); }
.gifts-status--bought { color: #16a34a; }
.gifts-status--bought small { color: var(--ink3); font-size: .72rem; }
.gifts-status--hidden { color: var(--ink3); cursor: default; }

.gifts-row-actions { display: flex; gap: 4px; }
.gifts-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink2);
}
.gifts-icon-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--ink); }
.gifts-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.gifts-icon-btn--danger:hover { border-color: #ef4444; color: #ef4444; }

.gifts-ai-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--layf-accent-soft-bg, var(--surface2));
  border: 1px solid var(--layf-accent-border, var(--border));
}
.gifts-ai-icon { font-size: 20px; flex-shrink: 0; }
.gifts-ai-text strong { display: block; font-size: .9rem; color: var(--ink); margin-bottom: 2px; }
.gifts-ai-text p { margin: 0; font-size: .82rem; color: var(--ink2); }

.gifts-santa-card {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.gifts-santa-summary { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; }
.gifts-santa-icon { font-size: 22px; }
.gifts-santa-summary-text strong { display: block; font-size: .94rem; color: var(--ink); }
.gifts-santa-summary-text p { margin: 2px 0 0; font-size: .8rem; color: var(--ink2); }
.gifts-santa-summary-meta {
  display: flex;
  gap: 14px;
  font-size: .8rem;
  color: var(--ink2);
  flex-wrap: wrap;
}

.gifts-santa-card--expanded { flex-direction: column; align-items: stretch; }
.gifts-santa-expanded-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.gifts-santa-expanded-head p { margin: 4px 0; font-size: .84rem; color: var(--ink2); }
.gifts-santa-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .68rem;
  background: var(--layf-accent-soft-bg, var(--accent-lt));
  color: var(--accent);
  vertical-align: middle;
}
.gifts-link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: .8rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.gifts-santa-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 14px;
}
.gifts-santa-participants-head { font-size: .8rem; color: var(--ink2); margin-bottom: 8px; }
.gifts-santa-participants-list { display: flex; flex-direction: column; gap: 8px; }
.gifts-santa-participant-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.gifts-santa-participant-meta { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gifts-santa-participant-meta strong { font-size: .86rem; color: var(--ink); }
.gifts-santa-participant-meta small { font-size: .74rem; color: var(--ink3); }

.gifts-santa-results {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: var(--surface2);
}
.gifts-santa-secondary-actions {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.gifts-santa-secondary-actions .btn { flex: 0 1 auto; }
.gifts-santa-results-lock { display: flex; flex-direction: column; gap: 2px; }
.gifts-santa-results-lock strong { font-size: .88rem; color: var(--ink); }
.gifts-santa-results-lock p { margin: 0; font-size: .78rem; color: var(--ink2); }
.gifts-santa-draw-btn { width: 100%; }
.gifts-santa-email-status { margin: -2px 0 0; font-size: .78rem; color: var(--ink2); text-align: center; }
.gifts-santa-results-list { margin: 0; padding-left: 18px; font-size: .84rem; color: var(--ink); }

.gifts-modal-hint { font-size: .84rem; color: var(--ink2); margin: 0 0 12px; }
.gifts-people-modal-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.gifts-people-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 10px;
  cursor: pointer;
}
.gifts-people-modal-row:hover { background: var(--surface2); }
.gifts-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gifts-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.gifts-add-row td { padding: 4px 16px 12px !important; border-bottom: none !important; }
.gifts-add-idea-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px dashed var(--border);
  background: none;
  color: var(--ink3);
  font-size: .84rem;
  cursor: pointer;
  text-align: left;
}
.gifts-add-idea-btn:hover {
  color: var(--ink2);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--surface2);
}

.gifts-thumb--image { padding: 0; overflow: hidden; }
.gifts-thumb--image img { width: 100%; height: 100%; object-fit: cover; }

.gifts-image-field { display: flex; flex-direction: column; gap: 8px; }
.gifts-image-preview {
  width: 100%;
  height: 96px;
  border-radius: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 26px;
}
.gifts-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.gifts-image-preview--dropzone {
  border: 1.5px dashed var(--border);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.gifts-image-preview--dropzone:hover,
.gifts-image-preview--dropzone:focus-visible {
  border-color: var(--accent);
  background: var(--layf-accent-soft-bg, var(--surface2));
  outline: none;
}
.gifts-image-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.gifts-image-preview-empty small {
  font-size: .72rem;
  font-weight: 500;
  color: var(--ink3);
}
.gifts-image-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gifts-image-upload-btn { cursor: pointer; }
.gifts-image-url-field { margin-top: 2px; }
.gifts-image-hint { color: var(--ink3); font-size: .74rem; }

@media (max-width: 860px) {
  .gifts-santa-body { grid-template-columns: 1fr; }
  .gifts-people-strip { flex-direction: column; align-items: stretch; }
  .gifts-edit-people-link { align-self: flex-end; }
}

@media (max-width: 640px) {
  .gifts-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .gifts-santa-secondary-actions { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Admin-only deployed-version badge (sidebar footer)
   ========================================================================== */
.sidebar-version-badge {
  margin: 14px 6px 2px;
  padding: 5px 8px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--ink3);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  text-align: left;
  cursor: pointer;
  opacity: .65;
  transition: opacity .15s ease, background .15s ease;
}
.sidebar-version-badge:hover {
  opacity: 1;
  background: var(--surface2);
}

/* ==========================================================================
   KickBox Arena (Emocje) — Stage 1 Draft UI checkpoint
   Deliberately its own dark "game skin", independent of the active Layf theme
   (light/dark toggle, Layf Core vs Energy OS) — a game cartridge keeps its own
   look regardless of the console skin. Scoped entirely to .kb-* / .kb-frame.
   ========================================================================== */
.kickbox-mod-page .module-page-content { display: flex; justify-content: center; }
.kb-frame {
  --kb-bg: #14121f;
  --kb-panel: #1d1a2e;
  --kb-panel2: #262140;
  --kb-ink: #f5f3ff;
  --kb-ink2: #b8b3d6;
  --kb-accent: #8b5cf6;
  --kb-accent2: #ec4899;
  --kb-border: #34305a;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: var(--kb-bg);
  border: 1px solid var(--kb-border);
  border-radius: 22px;
  padding: 16px;
  color: var(--kb-ink);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 24px 60px rgba(20, 18, 31, .35);
}

/* ---- Mode select ---- */
.kb-select-lede { margin: 0 0 12px; color: var(--kb-ink2); font-size: .86rem; line-height: 1.4; }
.kb-daily-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--kb-panel);
  border: 1px solid var(--kb-border);
  margin-bottom: 14px;
}
.kb-daily-card strong { font-size: .92rem; }
.kb-daily-card span { font-size: .84rem; color: var(--kb-ink2); }
.kb-daily-card small { font-size: .74rem; color: var(--kb-accent2); }

.kb-mode-list { display: flex; flex-direction: column; gap: 10px; }
.kb-mode-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1.5px solid var(--kb-border);
  background: var(--kb-panel);
  color: var(--kb-ink);
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.kb-mode-card:hover { transform: translateY(-1px); border-color: var(--kb-accent); }
.kb-mode-card--quick { border-left: 4px solid #8b5cf6; }
.kb-mode-card--technique { border-left: 4px solid #38bdf8; }
.kb-mode-card--rage { border-left: 4px solid #f97316; }
.kb-mode-icon { font-size: 26px; flex-shrink: 0; }
.kb-mode-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kb-mode-text strong { font-size: .94rem; }
.kb-mode-text small { font-size: .78rem; color: var(--kb-ink2); }
.kb-mode-duration { font-size: .8rem; color: var(--kb-ink2); font-weight: 700; flex-shrink: 0; }

/* ---- Arena ---- */
.kb-stats-row { display: flex; gap: 8px; margin-bottom: 10px; }
.kb-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 12px;
  background: var(--kb-panel);
  border: 1px solid var(--kb-border);
}
.kb-stat small { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kb-ink2); }
.kb-stat strong { font-size: 1.1rem; }

.kb-arena {
  position: relative;
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--kb-border);
  background: linear-gradient(180deg, #1a1730 0%, #100e1c 70%, #0a0912 100%);
}
.kb-arena-bg { position: absolute; inset: 0; }
.kb-poster {
  position: absolute;
  top: 14px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(245, 243, 255, .28);
  border: 1px solid rgba(245, 243, 255, .18);
  padding: 4px 6px;
  line-height: 1.3;
  text-align: center;
}
.kb-poster--left { left: 14px; }
.kb-poster--right { right: 14px; }

.kb-bag { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.kb-bag-chain { width: 3px; height: 26px; background: repeating-linear-gradient(180deg, #6b6690 0 4px, transparent 4px 8px); }
.kb-bag-body {
  width: 96px;
  height: 150px;
  border-radius: 40px 40px 46px 46px;
  background: linear-gradient(180deg, #3a3560 0%, #221f3d 100%);
  border: 2px solid #4c4680;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 243, 255, .35);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1em;
  transform-origin: top center;
}
.kb-bag.is-hit .kb-bag-body { animation: kb-shake .32s ease; }

.kb-feedback {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.3rem;
  font-weight: 900;
  color: #fde047;
  text-shadow: 0 2px 0 #b45309, 0 0 18px rgba(253, 224, 71, .5);
  animation: kb-pop .7s ease forwards;
  pointer-events: none;
  white-space: nowrap;
}

.kb-glove {
  position: absolute;
  bottom: -6px;
  font-size: 64px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
  transform-origin: bottom center;
}
.kb-glove--left { left: -10px; transform: rotate(-8deg); }
.kb-glove--right { right: -10px; transform: rotate(8deg) scaleX(-1); }
.kb-glove--left.is-swinging { animation: kb-punch-left .28s ease; }
.kb-glove--right.is-swinging { animation: kb-punch-right .28s ease; }

.kb-bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.kb-bar-label { display: flex; justify-content: space-between; font-size: .74rem; color: var(--kb-ink2); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .03em; }
.kb-bar-label b { color: var(--kb-ink); font-weight: 800; }
.kb-bar-track { height: 8px; border-radius: 999px; background: var(--kb-panel2); overflow: hidden; }
.kb-bar-fill { height: 100%; border-radius: 999px; transition: width .25s ease; }
.kb-bar-fill--tension { background: linear-gradient(90deg, #f97316, #ef4444); }
.kb-bar-fill--energy { background: linear-gradient(90deg, #38bdf8, #8b5cf6); }

.kb-moves-label { font-size: .76rem; color: var(--kb-ink2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; text-align: center; }
.kb-moves-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kb-move-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px;
  border-radius: 14px;
  border: 1.5px solid var(--kb-border);
  background: var(--kb-panel);
  color: var(--kb-ink);
  cursor: pointer;
  transition: transform .08s ease;
}
.kb-move-btn:active { transform: scale(.94); }
.kb-move-icon { font-size: 22px; }
.kb-move-label { font-size: .68rem; font-weight: 700; text-align: center; line-height: 1.2; }
.kb-move-btn--jab { background: color-mix(in srgb, #22c55e 20%, var(--kb-panel)); border-color: #22c55e; }
.kb-move-btn--cross { background: color-mix(in srgb, #38bdf8 20%, var(--kb-panel)); border-color: #38bdf8; }
.kb-move-btn--hook { background: color-mix(in srgb, #c084fc 20%, var(--kb-panel)); border-color: #c084fc; }
.kb-move-btn--uppercut { background: color-mix(in srgb, #f97316 20%, var(--kb-panel)); border-color: #f97316; }
.kb-move-btn--lowKick { background: color-mix(in srgb, #fbbf24 20%, var(--kb-panel)); border-color: #fbbf24; }
.kb-move-btn--middleKick { background: color-mix(in srgb, #2dd4bf 20%, var(--kb-panel)); border-color: #2dd4bf; }
.kb-hint { margin: 10px 0 0; text-align: center; font-size: .76rem; color: var(--kb-ink2); }

/* ---- Breathing overlay ---- */
.kb-breathing { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 30px 10px; text-align: center; }
.kb-breathing-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--kb-accent), var(--kb-accent2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .9rem;
  animation: kb-breathe-pulse 6s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(139, 92, 246, .5);
}
.kb-breathing p { color: var(--kb-ink2); font-size: .84rem; margin: 0; }

/* ---- Summary ---- */
.kb-summary { text-align: center; padding: 6px 2px; }
.kb-summary-trophy { font-size: 48px; margin-bottom: 6px; }
.kb-summary-title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 800; background: linear-gradient(90deg, var(--kb-accent), var(--kb-accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kb-summary-sub { margin: 0 0 16px; color: var(--kb-ink2); font-size: .84rem; }
.kb-summary-stats { display: flex; flex-direction: column; gap: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--kb-border); margin-bottom: 16px; text-align: left; }
.kb-summary-row { display: flex; justify-content: space-between; padding: 10px 14px; background: var(--kb-panel); font-size: .84rem; }
.kb-summary-row:nth-child(even) { background: var(--kb-panel2); }
.kb-summary-row span { color: var(--kb-ink2); }
.kb-summary-row strong { color: var(--kb-ink); }
.kb-summary-actions { display: flex; flex-direction: column; gap: 8px; }
.kb-btn { border-radius: 12px; padding: 12px; font-weight: 800; font-size: .86rem; cursor: pointer; border: none; }
.kb-btn--breathe { background: linear-gradient(90deg, var(--kb-accent), var(--kb-accent2)); color: #fff; }
.kb-btn--outline { background: transparent; border: 1.5px solid var(--kb-border); color: var(--kb-ink); }
.kb-btn--replay { background: #fbbf24; color: #241d05; }

@keyframes kb-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-6px) rotate(-3deg); }
  75% { transform: translateX(6px) rotate(3deg); }
}
@keyframes kb-pop {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -55%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(1); }
}
@keyframes kb-punch-left {
  0% { transform: rotate(-8deg) translate(0, 0); }
  50% { transform: rotate(-8deg) translate(30px, -18px) scale(1.05); }
  100% { transform: rotate(-8deg) translate(0, 0); }
}
@keyframes kb-punch-right {
  0% { transform: rotate(8deg) scaleX(-1) translate(0, 0); }
  50% { transform: rotate(8deg) scaleX(-1) translate(30px, -18px) scale(1.05); }
  100% { transform: rotate(8deg) scaleX(-1) translate(0, 0); }
}
@keyframes kb-breathe-pulse {
  0%, 100% { transform: scale(.85); }
  50% { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .kb-bag.is-hit .kb-bag-body,
  .kb-feedback,
  .kb-glove--left.is-swinging,
  .kb-glove--right.is-swinging,
  .kb-breathing-circle {
    animation: none !important;
  }
}

@media (max-width: 480px) {
  .kickbox-mod-page .module-page-content { display: block; }
  .kb-frame { max-width: 100%; border-radius: 16px; }
  .kb-glove { font-size: 52px; }
  .kb-arena { height: 230px; }
}

/* Health private MVP */
.health1-page {
  --health1-accent: color-mix(in srgb, var(--accent) 72%, #0f766e);
  --health1-teal: #0f766e;
  --health1-amber: #b45309;
  --health1-red: #b91c1c;
  --health1-lavender: #eeeaff;
  --health1-blush: #fff0f3;
  --health1-coral: #ef6a73;
  --health1-mint: #e8f7f1;
  --health1-blue: #edf6ff;
  --health1-cream: #fff8e9;
  --health1-success: #16876c;
  --health1-warning: #c87908;
  --health1-danger: #d94b66;
  --health1-info: #5578b8;
  --health1-soft-success: #eef9f5;
  --health1-soft-warning: #fff8e8;
  --health1-soft-danger: #fff1f4;
  --health1-soft-info: #f1f6ff;
  min-width: 0;
}

.health1-page .module-page-content {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.health1-page .module-header-actions .btn svg,
.health1-copy-btn svg,
.health1-tab svg,
.health1-card-head svg,
.health1-row-mark svg,
.health1-link-btn svg,
.health1-check svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.health1-copy-label-mobile {
  display: none;
}

.health1-tab-label-mobile {
  display: none;
}

.health1-module-header {
  position: relative;
}

.health1-module-header .page-title {
  color: var(--ink);
}

.health1-module-header .page-sub {
  max-width: 760px;
}

.health1-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-padding-inline: 2px;
  overscroll-behavior-inline: contain;
  padding: 0 2px 8px;
  scrollbar-width: none;
}

.health1-tabs::-webkit-scrollbar {
  display: none;
}

.health1-tab {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--ink2);
  font: 650 13px/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
}

.health1-tab.is-active {
  border-color: color-mix(in srgb, var(--health1-accent) 42%, var(--border));
  background: color-mix(in srgb, var(--health1-accent) 9%, var(--surface));
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--health1-accent);
}

.health1-notice,
.health1-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft, 0 14px 34px rgba(15, 23, 42, .06));
}

.health1-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  color: var(--ink2);
}

.health1-notice > span {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--health1-teal) 11%, var(--surface));
  color: var(--health1-teal);
}

.health1-notice svg {
  width: 16px;
  height: 16px;
}

.health1-notice strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 13px;
}

.health1-notice p,
.health1-muted {
  margin: 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.55;
}

.health1-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 14px;
}

.health1-dashboard {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.health1-dashboard .health1-card {
  box-shadow: 0 10px 26px rgba(39, 45, 67, .045);
}

.health1-history-view {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 14px;
  align-items: start;
}

.health1-upcoming-card.is-full {
  min-height: 0;
}

.health1-dashboard-top {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(390px, 1.45fr) minmax(280px, .95fr);
  gap: 14px;
  align-items: stretch;
}

.health1-dashboard-focus {
  display: grid;
  grid-template-columns: minmax(330px, .82fr) minmax(0, 1.38fr);
  gap: 14px;
  align-items: stretch;
}

.health1-dashboard-details {
  display: grid;
  grid-template-columns: minmax(330px, .9fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: stretch;
}

.health1-profile-card,
.health1-attention-card,
.health1-upcoming-card {
  min-height: 218px;
}

.health1-profile-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border-color: color-mix(in srgb, var(--health1-accent) 24%, var(--border));
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--health1-lavender) 72%, var(--surface)) 0%,
      color-mix(in srgb, var(--health1-blush) 38%, var(--surface)) 62%,
      var(--surface) 100%);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--health1-accent) 8%, transparent);
}

.health1-profile-ring {
  width: 108px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--health1-accent) var(--health1-score-angle), color-mix(in srgb, var(--border) 70%, transparent) 0);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--health1-accent) 12%, transparent);
}

.health1-profile-card.is-complete .health1-profile-ring {
  background: conic-gradient(#15946b var(--health1-score-angle), color-mix(in srgb, var(--border) 70%, transparent) 0);
  box-shadow: 0 10px 24px rgba(21, 148, 107, .14);
}

.health1-profile-card.is-low .health1-profile-ring {
  background: conic-gradient(#e2556f var(--health1-score-angle), color-mix(in srgb, var(--border) 70%, transparent) 0);
  box-shadow: 0 10px 24px rgba(226, 85, 111, .14);
}

.health1-profile-ring > span {
  width: 82px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: var(--surface);
}

.health1-profile-ring strong,
.health1-profile-ring small {
  display: block;
}

.health1-profile-ring strong {
  color: var(--ink);
  font-size: 25px;
  line-height: 1;
}

.health1-profile-ring small {
  margin-top: 4px;
  color: var(--ink3);
  font-size: 9px;
  font-weight: 700;
}

.health1-profile-copy {
  min-width: 0;
}

.health1-profile-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  letter-spacing: 0;
}

.health1-profile-copy > p {
  margin: 5px 0 10px;
  color: var(--ink2);
  font-size: 11px;
  line-height: 1.45;
}

.health1-profile-todos {
  display: grid;
  gap: 4px;
}

.health1-profile-todos button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  border: 0;
  padding: 3px 0;
  background: transparent;
  color: var(--ink2);
  font: 650 10px/1.3 var(--sans);
  text-align: left;
  cursor: pointer;
}

.health1-profile-todos button:hover {
  color: var(--health1-accent);
}

.health1-profile-todos svg {
  width: 14px;
  height: 14px;
  color: var(--health1-accent);
}

.health1-section-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--health1-danger) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
}

.health1-attention-card {
  border-color: color-mix(in srgb, var(--health1-coral) 22%, var(--border));
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--health1-cream) 68%, var(--surface)) 0%,
      color-mix(in srgb, var(--health1-blush) 35%, var(--surface)) 100%);
  box-shadow: 0 14px 32px rgba(210, 96, 83, .07);
}

.health1-attention-card .health1-card-head {
  align-items: center;
}

.health1-attention-count {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--health1-coral) 24%, var(--border));
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--health1-soft-danger) 76%, var(--surface));
  color: #aa3950;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.health1-attention-count.is-clear {
  border-color: color-mix(in srgb, var(--health1-success) 22%, var(--border));
  background: color-mix(in srgb, var(--health1-soft-success) 80%, var(--surface));
  color: var(--health1-success);
}

.health1-upcoming-card {
  border-color: color-mix(in srgb, var(--health1-info) 18%, var(--border));
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--health1-blue) 66%, var(--surface)) 0%,
      color-mix(in srgb, var(--health1-mint) 34%, var(--surface)) 100%);
  box-shadow: 0 14px 32px rgba(76, 111, 153, .06);
}

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

.health1-dashboard-action,
.health1-upcoming-item {
  min-width: 0;
  display: grid;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #fff);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.health1-dashboard-action {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  min-height: 62px;
  padding: 8px 10px;
}

.health1-dashboard-action > span,
.health1-upcoming-item > span,
.health1-shortcut > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.health1-dashboard-action > span {
  width: 36px;
  height: 36px;
}

.health1-dashboard-action svg,
.health1-upcoming-item > span svg,
.health1-shortcut > span svg {
  width: 18px;
  height: 18px;
}

.health1-dashboard-action strong,
.health1-dashboard-action small,
.health1-upcoming-item strong,
.health1-upcoming-item small,
.health1-shortcut strong,
.health1-shortcut small {
  display: block;
}

.health1-dashboard-action strong,
.health1-upcoming-item strong,
.health1-shortcut strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
}

.health1-dashboard-action small,
.health1-upcoming-item small,
.health1-shortcut small {
  margin-top: 2px;
  color: var(--ink3);
  font-size: 10px;
  line-height: 1.3;
}

.health1-dashboard-action:hover,
.health1-upcoming-item:hover,
.health1-shortcut:hover {
  border-color: color-mix(in srgb, var(--health1-accent) 30%, var(--border));
  background: color-mix(in srgb, var(--health1-accent) 4%, var(--surface));
  transform: translateY(-1px);
}

.health1-dashboard-action.is-pending {
  border-left: 3px solid color-mix(in srgb, var(--health1-warning) 78%, transparent);
  background: color-mix(in srgb, var(--health1-soft-warning) 72%, var(--surface));
}

.health1-dashboard-action.is-pending > span {
  background: #fff4d8;
  color: #c87908;
}

.health1-dashboard-action.is-alert,
.health1-dashboard-action.is-condition {
  border-left: 3px solid color-mix(in srgb, var(--health1-danger) 78%, transparent);
  background: color-mix(in srgb, var(--health1-soft-danger) 72%, var(--surface));
}

.health1-dashboard-action.is-alert > span,
.health1-dashboard-action.is-condition > span {
  background: #fff0f3;
  color: #e2556f;
}

.health1-dashboard-action.is-visit {
  border-left: 3px solid color-mix(in srgb, var(--health1-accent) 70%, transparent);
  background: color-mix(in srgb, var(--health1-lavender) 32%, var(--surface));
}

.health1-dashboard-action.is-visit > span {
  background: #f2efff;
  color: #6d5dd3;
}

.health1-all-current {
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #15946b;
}

.health1-all-current > svg {
  width: 32px;
  height: 32px;
}

.health1-all-current strong,
.health1-all-current p {
  display: block;
  margin: 0;
}

.health1-all-current strong {
  color: var(--ink);
  font-size: 13px;
}

.health1-all-current p {
  margin-top: 3px;
  color: var(--ink3);
  font-size: 11px;
}

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

.health1-upcoming-item {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 42px;
  padding: 6px 8px;
}

.health1-upcoming-item:hover {
  background: color-mix(in srgb, var(--health1-blue) 54%, var(--surface));
}

.health1-upcoming-item > span {
  width: 32px;
  height: 32px;
  background: #f2efff;
  color: #6d5dd3;
}

.health1-upcoming-item.is-vaccination > span {
  background: #f0edff;
  color: #7458d6;
}

.health1-upcoming-item.is-lab > span {
  background: #eaf8f3;
  color: #16876c;
}

.health1-upcoming-item em {
  max-width: 78px;
  color: var(--health1-accent);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.2;
  text-align: right;
}

.health1-upcoming-item em small {
  margin-top: 3px;
}

.health1-text-link {
  min-height: 28px;
  border: 0;
  padding: 0 2px;
  background: transparent;
  color: var(--health1-accent);
  font: 750 11px/1 var(--sans);
  cursor: pointer;
}

.health1-text-link:hover {
  color: var(--ink);
}

.health1-quiet-state {
  min-height: 130px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: var(--ink3);
  font-size: 11px;
  text-align: center;
}

.health1-quiet-state svg {
  width: 30px;
  height: 30px;
}

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

.health1-shortcut {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 15px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.health1-shortcut > span {
  width: 36px;
  height: 36px;
}

.health1-shortcut > svg {
  width: 14px;
  height: 14px;
  color: var(--ink3);
}

.health1-shortcut.is-vaccination > span {
  background: #f0edff;
  color: #7458d6;
}

.health1-shortcut.is-treatment > span {
  background: #fff3e8;
  color: #d97731;
}

.health1-shortcut.is-document > span {
  background: #eef4fa;
  color: #55728f;
}

.health1-shortcut.is-emergency > span {
  background: #fff0f3;
  color: #e2556f;
}

.health1-dashboard-focus .health1-history-card {
  border-color: color-mix(in srgb, var(--health1-info) 13%, var(--border));
  background: color-mix(in srgb, var(--health1-blue) 16%, var(--surface));
}

.health1-dashboard-focus .health1-areas-card {
  border-color: color-mix(in srgb, var(--health1-accent) 16%, var(--border));
  background: color-mix(in srgb, var(--health1-lavender) 14%, var(--surface));
}

.health1-dashboard-details .health1-today-card {
  border-color: color-mix(in srgb, var(--health1-success) 14%, var(--border));
  background: color-mix(in srgb, var(--health1-mint) 16%, var(--surface));
}

.health1-dashboard-details .health1-results-card {
  border-color: color-mix(in srgb, var(--health1-warning) 13%, var(--border));
  background: color-mix(in srgb, var(--health1-cream) 18%, var(--surface));
}

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

.health1-two-col.is-wide-main {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
}

.health1-card {
  padding: 16px;
  min-width: 0;
}

.health1-today-card,
.health1-areas-card {
  min-height: 390px;
  max-height: 430px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.health1-dashboard-details .health1-today-card,
.health1-dashboard-details .health1-results-card {
  min-height: 360px;
  max-height: 400px;
}

.health1-dose-progress {
  display: grid;
  gap: 7px;
  margin: -2px 0 10px;
}

.health1-dose-progress > span {
  color: var(--ink3);
  font-size: 10px;
}

.health1-dose-progress > span strong {
  color: var(--ink);
  font-size: 12px;
}

.health1-dose-progress > div {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 72%, transparent);
}

.health1-dose-progress i {
  width: var(--health1-dose-progress);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #15946b;
  transition: width .2s ease;
}

.health1-card-scroll {
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.health1-hero {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
  gap: 20px;
  align-items: center;
  overflow: hidden;
  min-height: 210px;
  border-color: color-mix(in srgb, var(--health1-teal) 18%, var(--border));
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, #f59e0b 13%, transparent) 0 20%, transparent 42%),
    radial-gradient(circle at 70% 90%, color-mix(in srgb, var(--health1-teal) 17%, transparent) 0 24%, transparent 48%),
    linear-gradient(135deg, color-mix(in srgb, var(--health1-teal) 12%, var(--surface)) 0%, color-mix(in srgb, #eef7f6 48%, var(--surface)) 50%, var(--surface) 100%);
}

.health1-hero::before {
  content: '';
  position: absolute;
  inset: 16px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--health1-teal) 10%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--health1-teal) 7%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--health1-teal) 7%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(110deg, transparent 0 18%, #000 42%, transparent 100%);
  opacity: .72;
}

.health1-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--health1-teal);
  font-size: 12px;
  font-weight: 750;
}

.health1-hero h2,
.health1-card-head h2,
.health1-thread h3,
.health1-dose-group h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 750;
  letter-spacing: 0;
}

.health1-hero h2 {
  max-width: 520px;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.05;
}

.health1-hero p {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.55;
}

.health1-hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--health1-teal) 18%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(10px);
}

.health1-hero-metrics > div {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--health1-teal) 12%, var(--border));
  border-radius: 8px;
  padding: 11px;
  background: color-mix(in srgb, #fff 56%, transparent);
}

.health1-hero-metrics > div.is-alert {
  border-color: color-mix(in srgb, #fb7185 24%, var(--border));
  background: color-mix(in srgb, #fff1f2 66%, var(--surface));
}

.health1-hero-metrics > div.is-pending {
  border-color: color-mix(in srgb, #f59e0b 24%, var(--border));
  background: color-mix(in srgb, #fffbeb 72%, var(--surface));
}

.health1-hero-metrics strong {
  color: var(--ink);
  font-size: 22px;
}

.health1-hero-metrics span {
  color: var(--ink2);
  font-size: 11px;
  line-height: 1.35;
}

.health1-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.health1-card-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.25;
}

.health1-card-head > div > p {
  margin: 3px 0 0;
  color: var(--ink3);
  font-size: 10px;
  line-height: 1.35;
}

.health1-card-head span {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 650;
  text-align: right;
}

.health1-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 24%, var(--border));
  border-radius: 8px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--health1-accent) 6%, var(--surface));
  color: var(--ink);
  font: 750 12px/1 var(--sans);
  cursor: pointer;
}

.health1-link-btn:hover {
  border-color: color-mix(in srgb, var(--health1-accent) 42%, var(--border));
  background: color-mix(in srgb, var(--health1-accent) 10%, var(--surface));
}

.health1-list,
.health1-thread-list,
.health1-dose-groups,
.health1-results {
  display: grid;
  gap: 8px;
}

.health1-row,
.health1-thread,
.health1-dose-group,
.health1-result,
.health1-doc-row,
.health1-dose-item,
.health1-emergency-grid > div {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, #fff);
}

.health1-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
}

.health1-row-body,
.health1-thread button,
.health1-timeline-item button,
.health1-doc-row button:not(.health1-link-btn),
.health1-lab-name,
.health1-lab-row-main,
.health1-visit-row {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.health1-row-body:focus-visible,
.health1-thread button:focus-visible,
.health1-timeline-item button:focus-visible,
.health1-doc-row button:focus-visible,
.health1-visit-row:focus-visible,
.health1-link-btn:focus-visible,
.health1-check:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--health1-accent) 55%, transparent);
  outline-offset: 2px;
}

.health1-row-mark {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
}

.health1-row.is-good .health1-row-mark {
  background: color-mix(in srgb, var(--health1-teal) 12%, var(--surface));
  color: var(--health1-teal);
}

.health1-row.is-warn .health1-row-mark {
  background: color-mix(in srgb, var(--health1-amber) 12%, var(--surface));
  color: var(--health1-amber);
}

.health1-row small,
.health1-thread small,
.health1-result small,
.health1-emergency-grid small,
.health1-timeline-item small {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 650;
}

.health1-row strong,
.health1-doc-row strong,
.health1-dose-item strong,
.health1-emergency-grid strong,
.health1-timeline-item strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.health1-row p,
.health1-thread p,
.health1-doc-row p,
.health1-result p,
.health1-timeline-item p {
  margin: 3px 0 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.45;
}

.health1-thread,
.health1-dose-group,
.health1-result {
  padding: 12px;
}

.health1-mini-section {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.health1-mini-section > strong {
  color: var(--ink);
  font-size: 12px;
}

.health1-visit-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surface) 86%, #fff);
}

.health1-visit-row + .health1-visit-row {
  margin-top: 6px;
}

.health1-thread strong {
  display: block;
  margin-top: 8px;
  color: var(--health1-teal);
  font-size: 12px;
  line-height: 1.4;
}

.health1-tags,
.health1-principles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.health1-tags span,
.health1-principles span {
  border: 1px solid color-mix(in srgb, var(--health1-accent) 18%, var(--border));
  border-radius: 999px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--health1-accent) 6%, var(--surface));
  color: var(--ink2);
  font-size: 11px;
  font-weight: 650;
}

.health1-condition-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.health1-condition-summary span {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--health1-teal) 13%, var(--border));
  border-radius: 8px;
  padding: 7px 8px;
  background: color-mix(in srgb, var(--health1-teal) 5%, var(--surface));
  color: var(--ink2);
  font-size: 10px;
  font-weight: 650;
}

.health1-condition-summary strong {
  margin: 0 0 2px;
  color: var(--ink);
  font-size: 12px;
}

.health1-thread-empty {
  margin: 10px 0 0;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surface) 80%, #eef2f7);
  color: var(--ink3);
  font-size: 12px;
}

.health1-thread-course {
  margin-top: 10px;
}

.health1-thread-entry-list {
  display: grid;
  grid-template-columns: repeat(8, minmax(86px, 1fr));
  gap: 8px;
}

.health1-thread-entry {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--health1-teal) 12%, var(--border));
  border-radius: 8px;
  padding: 7px;
  background: color-mix(in srgb, var(--surface) 88%, #fff);
}

.health1-thread-entry,
.health1-thread-add-tile {
  min-height: 154px;
}

.health1-thread-entry.is-flare {
  border-color: color-mix(in srgb, #fb7185 26%, var(--border));
  background: color-mix(in srgb, #fff1f2 58%, var(--surface));
}

.health1-thread-entry.is-remission {
  border-color: color-mix(in srgb, var(--health1-teal) 24%, var(--border));
  background: color-mix(in srgb, var(--health1-teal) 7%, var(--surface));
}

.health1-thread-entry.is-treatment {
  border-color: color-mix(in srgb, #7c3aed 22%, var(--border));
  background: color-mix(in srgb, #ede9fe 50%, var(--surface));
}

.health1-thread-entry button {
  min-width: 0;
  margin: 0;
}

.health1-thread-entry strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 1px;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.2;
}

.health1-thread-entry p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.25;
}

.health1-thread-photo {
  width: 100%;
  aspect-ratio: 1 / .78;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--health1-teal) 10%, var(--surface));
  color: var(--health1-teal);
}

.health1-thread-photo.has-photo {
  border: 1px solid color-mix(in srgb, var(--health1-teal) 18%, var(--border));
  cursor: pointer;
}

.health1-thread-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.health1-thread-photo.is-empty {
  border: 1px dashed color-mix(in srgb, var(--health1-teal) 20%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--health1-teal) 9%, var(--surface)), color-mix(in srgb, #ede9fe 42%, var(--surface)));
  color: color-mix(in srgb, var(--health1-teal) 76%, var(--ink2));
}

.health1-thread-photo svg {
  width: 20px;
  height: 20px;
}

.health1-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.health1-entry-meta span {
  border: 1px solid color-mix(in srgb, var(--health1-accent) 16%, var(--border));
  border-radius: 999px;
  padding: 3px 6px;
  background: color-mix(in srgb, var(--surface) 84%, #fff);
  color: var(--ink2);
  font-size: 9px;
  font-weight: 750;
}

.health1-entry-meta .is-state {
  color: var(--health1-teal);
}

.health1-entry-intensity {
  height: 5px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, var(--surface));
}

.health1-entry-intensity span {
  display: block;
  width: var(--entry-intensity, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--health1-teal), #f59e0b, #fb7185);
}

.health1-thread-add-tile {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 1.5px dashed color-mix(in srgb, var(--health1-accent) 34%, var(--border));
  border-radius: 8px;
  padding: 10px 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--health1-accent) 9%, var(--surface)), color-mix(in srgb, #ede9fe 46%, var(--surface)));
  color: var(--ink);
  font: 750 11px/1.15 var(--sans);
  text-align: center;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.health1-thread-add-tile:hover,
.health1-thread-add-tile:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--health1-accent) 58%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--health1-accent) 14%, var(--surface)), color-mix(in srgb, #ede9fe 62%, var(--surface)));
  transform: translateY(-1px);
}

.health1-thread-add-tile span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--health1-accent) 38%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, #fff);
}

.health1-thread-add-tile strong,
.health1-thread-add-tile small {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  text-align: center;
}

.health1-thread-add-tile strong {
  top: calc(50% + 24px);
  color: var(--ink);
}

.health1-thread-add-tile svg {
  width: 15px;
  height: 15px;
}

.health1-thread-add-tile small {
  top: calc(50% + 46px);
  color: var(--ink3);
  font-size: 9px;
  line-height: 1.25;
}

.health1-thread-foot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}

.health1-thread .health1-thread-foot button {
  width: auto;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 750;
}

.health1-thread .health1-thread-foot button:first-child {
  color: var(--accent);
}

.health1-condition-detail {
  display: grid;
  gap: 14px;
}

.health1-condition-detail-head {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 18%, var(--border));
  border-radius: 8px;
  padding: 14px 16px 0;
  background: color-mix(in srgb, var(--health1-accent) 5%, var(--surface));
}

.health1-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.health1-back-btn svg {
  width: 15px;
  height: 15px;
}

.health1-condition-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
  padding-bottom: 14px;
}

.health1-condition-title > div:first-child {
  min-width: 0;
}

.health1-condition-title > div:first-child > span {
  color: var(--health1-teal);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.health1-condition-title h2 {
  margin: 4px 0 2px;
  color: var(--ink);
  font-size: 25px;
  font-weight: 560;
}

.health1-condition-title p {
  max-width: 760px;
  margin: 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.45;
}

.health1-condition-title > div:last-child {
  display: flex;
  gap: 7px;
  flex: 0 0 auto;
}

.health1-condition-title .btn svg {
  width: 15px;
  height: 15px;
}

.health1-condition-next {
  display: grid;
  grid-template-columns: 20px auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  margin-inline: -16px;
  padding: 9px 16px;
  border-top: 1px solid color-mix(in srgb, var(--health1-accent) 14%, var(--border));
  background: color-mix(in srgb, var(--health1-teal) 5%, var(--surface));
}

.health1-condition-next svg {
  width: 16px;
  height: 16px;
  color: var(--health1-teal);
}

.health1-condition-next span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 750;
}

.health1-condition-next strong {
  color: var(--ink);
  font-size: 12px;
}

.health1-condition-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.health1-condition-metrics > span {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 11px;
  background: var(--surface);
  color: var(--ink3);
  font-size: 10px;
  font-weight: 650;
}

.health1-condition-metrics strong {
  display: block;
  overflow: hidden;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-condition-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, .85fr);
  gap: 14px;
  align-items: start;
}

.health1-condition-side {
  display: grid;
  gap: 14px;
}

.health1-condition-course-card .health1-card-head p,
.health1-condition-connections .health1-card-head p {
  margin: 2px 0 0;
  color: var(--ink3);
  font-size: 11px;
}

.health1-condition-trend {
  height: 116px;
  display: flex;
  align-items: stretch;
  gap: 7px;
  overflow-x: auto;
  margin: 2px 0 14px;
  padding: 8px 4px 4px;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}

.health1-condition-trend > button {
  width: 42px;
  min-width: 42px;
  display: grid;
  grid-template-rows: 16px minmax(0, 1fr) 16px;
  gap: 3px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink3);
  cursor: pointer;
}

.health1-condition-trend > button strong {
  color: var(--ink2);
  font-size: 10px;
}

.health1-condition-trend > button > span {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 5px 5px 2px 2px;
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
}

.health1-condition-trend > button i {
  position: absolute;
  inset: auto 0 0;
  height: max(5%, var(--condition-level));
  border-radius: inherit;
  background: color-mix(in srgb, var(--health1-teal) 70%, #f59e0b);
}

.health1-condition-trend > button small {
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-condition-trend.is-empty {
  height: auto;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  color: var(--ink3);
  font-size: 11px;
}

.health1-condition-trend.is-empty svg {
  width: 20px;
  height: 20px;
}

.health1-condition-gallery .health1-card-head > span {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 750;
}

.health1-condition-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.health1-condition-photo-grid a {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1.2 / 1;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
}

.health1-condition-photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.health1-condition-photo-grid span {
  position: absolute;
  inset: auto 5px 5px;
  border-radius: 5px;
  padding: 3px 5px;
  background: rgba(255, 255, 255, .9);
  color: #1f2937;
  font-size: 8px;
  font-weight: 800;
}

.health1-condition-empty {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink3);
  font-size: 11px;
  text-align: center;
}

.health1-condition-empty svg {
  width: 18px;
  height: 18px;
}

.health1-condition-empty.is-compact {
  min-height: 58px;
}

.health1-condition-linked-list {
  display: grid;
  gap: 5px;
}

.health1-condition-linked-list > button {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 7px 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.health1-condition-linked-list > button:last-child {
  border-bottom: 0;
}

.health1-condition-linked-list > button > span {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #eef8f4;
  color: #247d64;
}

.health1-condition-linked-list > button > span.is-alert {
  background: #fff0f3;
  color: #c43e59;
}

.health1-condition-linked-list > button > span.is-visit {
  background: #f2efff;
  color: #6d5dd3;
}

.health1-condition-linked-list > button > span.is-document {
  background: #f1f4f7;
  color: #607589;
}

.health1-condition-linked-list svg {
  width: 15px;
  height: 15px;
}

.health1-condition-linked-list strong,
.health1-condition-linked-list small {
  display: block;
}

.health1-condition-linked-list strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-condition-linked-list small,
.health1-condition-linked-list em {
  color: var(--ink3);
  font-size: 9px;
  font-style: normal;
}

.health1-condition-linked-list em {
  border-radius: 999px;
  padding: 3px 6px;
  background: #eef8f4;
  color: #247d64;
  font-weight: 750;
}

.health1-condition-connection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.health1-condition-connection-group {
  min-width: 0;
}

.health1-condition-connection-group + .health1-condition-connection-group {
  border-left: 1px solid var(--border);
  padding-left: 16px;
}

.health1-condition-connection-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.health1-condition-connection-group h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--ink);
  font-size: 12px;
}

.health1-condition-connection-group h3 svg {
  width: 15px;
  height: 15px;
}

.health1-condition-connection-group > header button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink2);
  cursor: pointer;
}

.health1-condition-connection-group > header button svg {
  width: 14px;
  height: 14px;
}

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

.health1-vax-summary span {
  border: 1px solid color-mix(in srgb, var(--health1-teal) 14%, var(--border));
  border-radius: 8px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--health1-teal) 5%, var(--surface));
  color: var(--ink2);
  font-size: 11px;
  font-weight: 650;
}

.health1-vax-summary span.is-alert {
  border-color: color-mix(in srgb, #fb7185 24%, var(--border));
  background: color-mix(in srgb, #fff1f2 64%, var(--surface));
}

.health1-vax-summary strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
}

.health1-vax-list,
.health1-vax-reference {
  display: grid;
  gap: 8px;
}

.health1-vax-reference {
  max-height: 560px;
  overflow: auto;
  padding-right: 2px;
}

.health1-vax-row,
.health1-vax-ref {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, #fff);
}

.health1-vax-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
}

.health1-vax-row.is-planned {
  border-color: color-mix(in srgb, #f59e0b 30%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, #fffbeb 76%, var(--surface)), var(--surface));
  animation: health1-soft-pending 3.4s ease-in-out infinite;
}

.health1-vax-row > span {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--health1-teal) 10%, var(--surface));
  color: var(--health1-teal);
}

.health1-vax-row.is-planned > span {
  background: color-mix(in srgb, #f59e0b 12%, var(--surface));
  color: #d97706;
}

.health1-vax-row.is-overdue > span {
  background: color-mix(in srgb, #fb7185 12%, var(--surface));
  color: var(--health1-red);
}

.health1-vax-row > span svg {
  width: 16px;
  height: 16px;
}

.health1-vax-row button,
.health1-vax-ref button {
  min-width: 0;
}

.health1-vax-row > button {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.health1-vax-row small,
.health1-vax-ref small {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 700;
}

.health1-vax-row strong,
.health1-vax-ref strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 13px;
}

.health1-vax-row p,
.health1-vax-ref p {
  margin: 3px 0 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.45;
}

.health1-vax-ref {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

.health1-vax-ref.is-done {
  border-color: color-mix(in srgb, var(--health1-teal) 24%, var(--border));
  background: color-mix(in srgb, var(--health1-teal) 6%, var(--surface));
}

.health1-dose-group h3 {
  margin-bottom: 8px;
  font-size: 13px;
}

.health1-dose-item,
.health1-doc-row {
  display: grid;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

.health1-dose-item {
  grid-template-columns: 34px minmax(0, 1fr);
}

.health1-doc-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.health1-doc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.health1-dose-item + .health1-dose-item {
  margin-top: 6px;
}

.health1-check,
.health1-dose-item > span,
.health1-doc-row > span {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--health1-teal) 10%, var(--surface));
  color: var(--health1-teal);
  font-size: 11px;
  font-weight: 800;
}

.health1-check {
  border: 1px solid color-mix(in srgb, var(--health1-teal) 22%, var(--border));
  cursor: pointer;
}

.health1-check.is-on {
  background: var(--health1-teal);
  color: #fff;
}

.health1-dose-item svg {
  width: 15px;
  height: 15px;
}

.health1-dose-item em {
  display: block;
  margin-top: 2px;
  color: var(--ink3);
  font-size: 11px;
  font-style: normal;
}

.health1-copy-preview {
  max-height: 260px;
  overflow: auto;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 74%, #eef2f7);
  color: var(--ink);
  font: 12px/1.5 var(--mono, monospace);
  white-space: pre-wrap;
}

.health1-plan-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 14px;
  align-items: start;
}

.health1-medication-panel {
  border-color: color-mix(in srgb, var(--health1-accent) 16%, var(--border));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--health1-lavender) 12%, var(--surface)) 0,
      var(--surface) 170px);
}

.health1-consultation-card {
  position: sticky;
  top: 12px;
  border-color: color-mix(in srgb, var(--health1-info) 20%, var(--border));
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--health1-blue) 62%, var(--surface)) 0%,
      color-mix(in srgb, var(--health1-lavender) 24%, var(--surface)) 100%);
  box-shadow: 0 14px 30px rgba(76, 111, 153, .07);
}

.health1-consultation-hero {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 0;
  border-block: 1px solid color-mix(in srgb, var(--health1-info) 14%, var(--border));
}

.health1-consultation-hero > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 76%, var(--health1-blue));
  color: var(--health1-info);
}

.health1-consultation-hero svg {
  width: 18px;
  height: 18px;
}

.health1-consultation-hero strong,
.health1-consultation-hero small {
  display: block;
}

.health1-consultation-hero strong {
  color: var(--ink);
  font-size: 14px;
}

.health1-consultation-hero small {
  margin-top: 2px;
  color: var(--ink3);
  font-size: 10px;
}

.health1-consultation-details {
  margin: 12px 0;
  border-block: 1px solid color-mix(in srgb, var(--health1-info) 15%, var(--border));
}

.health1-consultation-details > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  list-style: none;
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.health1-consultation-details > summary::-webkit-details-marker {
  display: none;
}

.health1-consultation-details > summary em {
  color: var(--health1-info);
  font-size: 9px;
  font-style: normal;
}

.health1-consultation-details > summary svg {
  width: 15px;
  height: 15px;
  color: var(--ink3);
  transition: transform .18s ease;
}

.health1-consultation-details[open] > summary svg {
  transform: rotate(180deg);
}

.health1-consultation-details .health1-copy-preview {
  max-height: 230px;
  margin: 0 0 10px;
  background: color-mix(in srgb, var(--surface) 90%, var(--health1-blue));
  font-size: 10px;
}

.health1-consultation-copy {
  width: 100%;
  justify-content: center;
  border-color: color-mix(in srgb, var(--health1-info) 30%, var(--border)) !important;
  background: color-mix(in srgb, var(--surface) 76%, var(--health1-blue)) !important;
  color: color-mix(in srgb, var(--health1-info) 82%, var(--ink)) !important;
}

.health1-consultation-copy svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.health1-medication-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.health1-medication-summary > span {
  display: grid;
  gap: 2px;
  min-height: 52px;
  align-content: center;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 12%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--health1-lavender));
  color: var(--ink3);
  font-size: 11px;
}

.health1-medication-summary strong {
  color: var(--ink);
  font-size: 19px;
}

.health1-medication-summary > span.is-active {
  border-top: 2px solid color-mix(in srgb, var(--health1-accent) 66%, transparent);
}

.health1-medication-summary > span.is-monitored {
  border-top: 2px solid color-mix(in srgb, var(--health1-info) 72%, transparent);
  background: color-mix(in srgb, var(--health1-soft-info) 58%, var(--surface));
}

.health1-medication-summary > span.is-overdue {
  border-top: 2px solid color-mix(in srgb, var(--health1-danger) 24%, transparent);
}

.health1-medication-summary > span.is-stock {
  border-top: 2px solid color-mix(in srgb, var(--health1-warning) 24%, transparent);
}

.health1-medication-summary > span.is-alert {
  border-color: color-mix(in srgb, var(--health1-coral) 26%, var(--border));
  border-top-color: var(--health1-danger);
  background: color-mix(in srgb, var(--health1-soft-danger) 72%, var(--surface));
}

.health1-treatment-plan {
  margin: 0 0 12px;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 24%, var(--border));
  border-left: 3px solid color-mix(in srgb, var(--health1-accent) 78%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--health1-lavender) 48%, var(--surface)) 0%,
      color-mix(in srgb, var(--health1-blue) 28%, var(--surface)) 100%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--health1-accent) 6%, transparent);
}

.health1-treatment-plan > header,
.health1-treatment-plan > header > div:first-child,
.health1-treatment-plan-counts {
  display: flex;
  align-items: center;
}

.health1-treatment-plan > header {
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--health1-accent) 12%, var(--border));
}

.health1-treatment-plan > header > div:first-child {
  min-width: 0;
  gap: 7px;
}

.health1-treatment-plan > header > div:first-child > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--health1-lavender) 62%, var(--surface));
  color: var(--health1-accent);
}

.health1-treatment-plan > header svg {
  width: 14px;
  height: 14px;
}

.health1-treatment-plan > header strong,
.health1-treatment-plan > header small {
  display: block;
}

.health1-treatment-plan > header strong {
  color: var(--ink);
  font-size: 12px;
}

.health1-treatment-plan > header small {
  margin-top: 1px;
  color: var(--ink3);
  font-size: 10px;
}

.health1-treatment-plan-counts {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.health1-treatment-plan-counts em {
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.health1-treatment-plan-counts em.is-alert {
  color: #b74421;
}

.health1-treatment-plan-counts em.is-decision {
  color: var(--health1-accent);
}

.health1-treatment-plan-counts em.is-ok {
  color: var(--health1-teal);
}

.health1-treatment-plan-list {
  padding: 0 10px;
}

.health1-treatment-plan-row {
  display: grid;
  grid-template-columns: 28px minmax(150px, .7fr) minmax(340px, 1.3fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.health1-treatment-plan-row:last-child {
  border-bottom: 0;
}

.health1-treatment-plan-status {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--health1-blue) 32%, var(--surface));
  color: var(--health1-accent);
}

.health1-treatment-plan-row.is-alert .health1-treatment-plan-status {
  background: color-mix(in srgb, var(--health1-coral) 12%, var(--surface));
  color: #bd4827;
}

.health1-treatment-plan-row.is-positive .health1-treatment-plan-status {
  background: color-mix(in srgb, var(--health1-mint) 52%, var(--surface));
  color: var(--health1-teal);
}

.health1-treatment-plan-status svg {
  width: 14px;
  height: 14px;
}

.health1-treatment-plan-name {
  min-width: 0;
}

.health1-treatment-plan-name small,
.health1-treatment-plan-name strong,
.health1-treatment-plan-name span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-treatment-plan-name small {
  color: var(--health1-accent);
  font-size: 9px;
  font-weight: 800;
}

.health1-treatment-plan-name strong {
  margin-top: 1px;
  color: var(--ink);
  font-size: 12px;
}

.health1-treatment-plan-name span {
  margin-top: 1px;
  color: var(--ink3);
  font-size: 9px;
}

.health1-treatment-plan-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.health1-treatment-plan-values > span {
  min-width: 0;
  border-left: 1px solid var(--border);
  padding-left: 7px;
}

.health1-treatment-plan-values small,
.health1-treatment-plan-values strong,
.health1-treatment-plan-values em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-treatment-plan-values small {
  color: var(--ink3);
  font-size: 9px;
}

.health1-treatment-plan-values strong {
  margin-top: 1px;
  color: var(--ink2);
  font-size: 10px;
}

.health1-treatment-plan-values em {
  margin-top: 1px;
  color: var(--health1-teal);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.health1-treatment-plan-row > button {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 25%, var(--border));
  border-radius: 7px;
  padding: 4px 8px;
  background: var(--surface);
  color: var(--health1-accent);
  font: 750 10px/1.15 var(--sans);
  cursor: pointer;
  white-space: nowrap;
}

.health1-treatment-plan-row > button:hover {
  border-color: color-mix(in srgb, var(--health1-accent) 48%, var(--border));
  background: color-mix(in srgb, var(--health1-lavender) 38%, var(--surface));
}

.health1-medication-reminders {
  margin: 0 0 12px;
  border-block: 1px solid color-mix(in srgb, var(--health1-accent) 14%, var(--border));
  padding: 9px 0;
}

.health1-medication-reminders > header,
.health1-medication-reminders > header > div {
  display: flex;
  align-items: center;
}

.health1-medication-reminders > header {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.health1-medication-reminders > header > div {
  gap: 6px;
}

.health1-medication-reminders > header span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--health1-accent) 7%, var(--surface));
  color: var(--health1-accent);
}

.health1-medication-reminders > header svg {
  width: 13px;
  height: 13px;
}

.health1-medication-reminders > header strong {
  color: var(--ink);
  font-size: 11px;
}

.health1-medication-reminders > header small {
  color: var(--ink3);
  font-size: 9px;
  font-weight: 700;
}

.health1-medication-reminders > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.health1-medication-reminders button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 12%, var(--border));
  border-radius: 7px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--health1-blue) 22%, var(--surface));
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.health1-medication-reminders button:hover {
  border-color: color-mix(in srgb, var(--health1-accent) 30%, var(--border));
  background: color-mix(in srgb, var(--health1-lavender) 42%, var(--surface));
}

.health1-medication-reminders button.is-critical {
  border-color: color-mix(in srgb, var(--health1-coral) 25%, var(--border));
  background: color-mix(in srgb, #fff1f2 66%, var(--surface));
}

.health1-medication-reminders button.is-attention {
  border-color: color-mix(in srgb, #e8a52c 25%, var(--border));
  background: color-mix(in srgb, #fff8e8 67%, var(--surface));
}

.health1-medication-reminders button > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 86%, var(--health1-accent));
  color: var(--health1-accent);
}

.health1-medication-reminders button > span svg {
  width: 14px;
  height: 14px;
}

.health1-medication-reminders button > div {
  min-width: 0;
}

.health1-medication-reminders button strong,
.health1-medication-reminders button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-medication-reminders button strong {
  font-size: 10px;
  line-height: 1.3;
}

.health1-medication-reminders button small {
  margin-top: 2px;
  color: var(--ink3);
  font-size: 9px;
}

.health1-medication-reminders button em {
  color: var(--ink3);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

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

.health1-medication-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(190px, .42fr);
  gap: 10px;
  align-items: stretch;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 13%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, #fff 84%, var(--surface));
  box-shadow: 0 6px 16px rgba(39, 45, 67, .025);
  transition: border-color .18s ease, background .18s ease;
}

.health1-medication-card:hover {
  border-color: color-mix(in srgb, var(--health1-accent) 26%, var(--border));
  background: color-mix(in srgb, var(--health1-lavender) 10%, var(--surface));
}

.health1-medication-card.is-paused,
.health1-medication-card.is-archived {
  opacity: .76;
}

.health1-medication-image,
.health1-medication-main {
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.health1-medication-image {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 18%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--health1-lavender) 45%, var(--surface));
  color: var(--health1-accent);
}

.health1-medication-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.health1-medication-image svg {
  width: 22px;
  height: 22px;
}

.health1-medication-main {
  display: grid;
  align-content: center;
  gap: 3px;
}

.health1-medication-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--ink3);
  font-size: 10px;
}

.health1-medication-meta i {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px 7px;
  background: color-mix(in srgb, var(--health1-accent) 9%, var(--surface));
  color: color-mix(in srgb, var(--health1-accent) 78%, var(--ink));
  font-style: normal;
  font-weight: 750;
}

.health1-medication-main > strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.health1-medication-main > small {
  overflow-wrap: anywhere;
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.35;
}

.health1-medication-main > p {
  margin: 1px 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.4;
}

.health1-medication-monitor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--health1-teal);
  font-size: 11px;
  line-height: 1.35;
}

.health1-medication-monitor svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.health1-medication-supply {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 4px 0 4px 12px;
  border-left: 1px solid var(--border);
}

.health1-medication-supply > small,
.health1-medication-supply > span {
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.3;
}

.health1-medication-supply > strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.health1-medication-supply.is-low > strong,
.health1-medication-supply.is-empty > strong {
  color: #d85d38;
}

.health1-medication-supply > button {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--health1-accent);
  font: 750 10px/1.2 var(--sans);
  cursor: pointer;
}

.health1-medication-supply > button svg {
  width: 13px;
  height: 13px;
}

.health1-treatment-control {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 1px;
  border-top: 1px solid var(--border);
}

.health1-treatment-control > summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 18px;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 8px 2px 0;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.health1-treatment-control > summary::-webkit-details-marker {
  display: none;
}

.health1-treatment-control-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--health1-accent) 8%, var(--surface));
  color: var(--health1-accent);
}

.health1-treatment-control-icon svg,
.health1-treatment-control > summary > i svg {
  width: 14px;
  height: 14px;
}

.health1-treatment-control > summary > span:nth-child(2) {
  min-width: 0;
}

.health1-treatment-control > summary strong,
.health1-treatment-control > summary small {
  display: block;
}

.health1-treatment-control > summary strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
}

.health1-treatment-control > summary small {
  overflow: hidden;
  margin-top: 1px;
  color: var(--ink3);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-treatment-control > summary em {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 7px;
  background: color-mix(in srgb, var(--surface) 92%, #fff);
  color: var(--ink2);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.health1-treatment-control > summary > i {
  display: grid;
  place-items: center;
  color: var(--ink3);
  transition: transform .18s ease;
}

.health1-treatment-control[open] > summary > i {
  transform: rotate(180deg);
}

.health1-treatment-control.is-alert .health1-treatment-control-icon {
  background: color-mix(in srgb, #fb6a3d 10%, var(--surface));
  color: #c44f2d;
}

.health1-treatment-control.is-alert > summary em {
  border-color: color-mix(in srgb, #fb6a3d 28%, var(--border));
  background: color-mix(in srgb, #fb6a3d 7%, var(--surface));
  color: #b74421;
}

.health1-treatment-control.is-positive .health1-treatment-control-icon {
  background: color-mix(in srgb, var(--health1-teal) 10%, var(--surface));
  color: var(--health1-teal);
}

.health1-treatment-control.is-planned .health1-treatment-control-icon {
  background: color-mix(in srgb, var(--health1-blue) 40%, var(--surface));
  color: color-mix(in srgb, #3974d8 78%, var(--ink));
}

.health1-treatment-control.is-setup .health1-treatment-control-icon {
  background: color-mix(in srgb, #e8a52c 10%, var(--surface));
  color: #a86a00;
}

.health1-treatment-control-body {
  margin-top: 7px;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 12%, var(--border));
  border-radius: 8px;
  padding: 11px;
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--surface) 94%, var(--health1-blue)),
    color-mix(in srgb, var(--surface) 97%, var(--health1-lavender)));
}

.health1-treatment-axis {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.health1-treatment-axis::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 16.66%;
  right: 16.66%;
  height: 2px;
  background: color-mix(in srgb, var(--health1-accent) 20%, var(--border));
}

.health1-treatment-point {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: center;
}

.health1-treatment-point > span {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 auto 6px;
  border: 3px solid var(--surface);
  border-radius: 999px;
  background: var(--health1-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--health1-accent) 32%, var(--border));
}

.health1-treatment-point.is-baseline > span {
  background: #7c8798;
}

.health1-treatment-point.is-followup > span {
  background: var(--health1-teal);
}

.health1-treatment-point small,
.health1-treatment-point strong,
.health1-treatment-point time {
  display: block;
}

.health1-treatment-point small {
  color: var(--ink3);
  font-size: 9px;
  font-weight: 700;
}

.health1-treatment-point strong {
  margin-top: 2px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
}

.health1-treatment-point time {
  min-height: 12px;
  margin-top: 2px;
  color: var(--ink3);
  font-size: 9px;
}

.health1-treatment-control-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink2);
  font-size: 10px;
  line-height: 1.4;
}

.health1-treatment-control-empty svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--health1-accent);
}

.health1-treatment-control-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  padding-top: 9px;
}

.health1-treatment-control-note p {
  margin: 0;
  color: var(--ink2);
  font-size: 9px;
  line-height: 1.45;
}

.health1-treatment-control-note p strong {
  color: var(--ink);
}

.health1-treatment-control-note > div {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

.health1-treatment-control-note button {
  min-height: 26px;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 24%, var(--border));
  border-radius: 999px;
  padding: 0 8px;
  background: color-mix(in srgb, var(--health1-accent) 5%, var(--surface));
  color: var(--health1-accent);
  font: 750 9px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
}

.health1-medication-archive {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.health1-medication-archive summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 10px;
  color: var(--ink2);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.health1-medication-archive summary span {
  border-radius: 999px;
  padding: 3px 7px;
  background: color-mix(in srgb, var(--border) 64%, transparent);
  font-size: 10px;
}

.health1-history-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1.35fr) minmax(160px, 1fr) 128px auto auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 18px;
  padding: 12px;
  border-block: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 78%, var(--bg));
}

.health1-history-tools label {
  min-width: 0;
}

.health1-history-tools label > span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 750;
}

.health1-history-tools select {
  width: 100%;
  min-width: 0;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0 30px 0 10px;
  background: var(--surface);
  color: var(--ink);
  font: 650 12px/1 var(--sans);
}

.health1-important-filter {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, #e2556f 22%, var(--border));
  border-radius: 7px;
  padding: 0 11px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.health1-important-filter svg {
  width: 15px;
  height: 15px;
  color: #d94b66;
}

.health1-important-filter.is-active {
  border-color: color-mix(in srgb, #e2556f 45%, var(--border));
  background: color-mix(in srgb, #fff0f3 84%, var(--surface));
  color: #9f2940;
}

.health1-history-count {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--ink3);
  font-size: 10px;
  white-space: nowrap;
}

.health1-history-count strong {
  color: var(--ink);
  font-size: 15px;
}

.health1-history-count button,
.health1-filter-empty button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.health1-timeline-groups {
  display: grid;
  gap: 18px;
}

.health1-timeline-year > header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}

.health1-timeline-year > header strong {
  color: var(--ink);
  font-size: 18px;
}

.health1-timeline-year > header span {
  color: var(--ink3);
  font-size: 10px;
}

.health1-filter-empty {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink3);
  text-align: center;
}

.health1-filter-empty svg {
  width: 24px;
  height: 24px;
}

.health1-filter-empty strong {
  color: var(--ink);
}

.health1-timeline {
  position: relative;
  display: grid;
  gap: 0;
}

.health1-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 84px 38px minmax(0, 1fr);
  gap: 10px;
  min-height: 58px;
  padding: 0 0 12px;
}

.health1-timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 112px;
  top: 36px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.health1-timeline-item time {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.3;
}

.health1-timeline-icon {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, currentColor 12%, var(--border));
  border-radius: 8px;
  background: var(--surface);
}

.health1-timeline-icon svg {
  width: 18px;
  height: 18px;
}

.health1-timeline-item > button {
  min-width: 0;
  border-radius: 8px;
  padding: 2px 4px;
}

.health1-timeline-item > button:hover {
  background: color-mix(in srgb, var(--health1-accent) 4%, transparent);
}

.health1-timeline-item.is-lab .health1-timeline-icon {
  background: #eaf8f3;
  color: #16876c;
}

.health1-timeline-item.is-dental .health1-timeline-icon {
  background: #fff2e8;
  color: #df7740;
}

.health1-timeline-item.is-visit .health1-timeline-icon {
  background: #f2efff;
  color: #6d5dd3;
}

.health1-timeline-item.is-imaging .health1-timeline-icon {
  background: #edf5fb;
  color: #4f7ca5;
}

.health1-timeline-item.is-condition .health1-timeline-icon {
  background: #fff0f3;
  color: #e2556f;
}

.health1-timeline-item.is-treatment .health1-timeline-icon {
  background: #eef8f4;
  color: #247d64;
}

.health1-timeline-item.is-recommendation .health1-timeline-icon {
  background: #fff8e8;
  color: #b77716;
}

.health1-timeline-item.is-procedure .health1-timeline-icon {
  background: #edf5fb;
  color: #3f719f;
}

.health1-timeline-item.is-accident .health1-timeline-icon {
  background: #fff0f3;
  color: #c43e59;
}

.health1-timeline-item.is-vaccination .health1-timeline-icon {
  background: #f0edff;
  color: #7458d6;
}

.health1-timeline-item.is-document .health1-timeline-icon {
  background: #f1f4f7;
  color: #607589;
}

.health1-timeline-item > button > small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.health1-timeline-item > button > small em {
  border-radius: 999px;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--border) 58%, transparent);
  color: var(--ink2);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.health1-timeline-item.has-important > button > small em,
.health1-timeline-item.has-urgent > button > small em,
.health1-timeline-item.has-watch > button > small em {
  background: #fff0f3;
  color: #b73550;
}

.health1-timeline-item.has-urgent > button > small em {
  border: 1px solid color-mix(in srgb, #e2556f 35%, transparent);
  background: #ffe8ed;
}

.health1-history-head-actions {
  display: flex;
  gap: 7px;
}

.health1-timeline-item.has-positive > button > small em {
  background: #eaf8f3;
  color: #16876c;
}

.health1-history-card.is-overview,
.health1-areas-card.is-overview {
  min-height: 430px;
  max-height: 460px;
}

.health1-history-card.is-overview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.health1-history-card.is-overview .health1-timeline {
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.health1-result strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.1;
}

.health1-result span {
  display: inline-flex;
  margin-top: 8px;
  color: var(--health1-teal);
  font-size: 12px;
  font-weight: 700;
}

.health1-lab-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.health1-lab-sort {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.health1-lab-sort button {
  min-height: 26px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 9px;
  background: var(--surface);
  color: var(--ink2);
  font: 700 11px/1 var(--sans);
  cursor: pointer;
}

.health1-lab-sort button.is-active {
  border-color: color-mix(in srgb, var(--health1-accent) 38%, var(--border));
  background: color-mix(in srgb, var(--health1-accent) 9%, var(--surface));
  color: var(--ink);
}

.health1-lab-row {
  display: grid;
  grid-template-columns: 12px minmax(160px, 1fr) minmax(150px, .7fr) minmax(180px, .9fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.health1-results-card.is-compact {
  overflow: hidden;
}

.health1-results-card.is-compact .health1-card-head {
  align-items: center;
}

.health1-results-card.is-compact .health1-lab-sort {
  max-width: min(100%, 260px);
}

.health1-results-card.is-compact .health1-lab-row {
  grid-template-columns: 12px minmax(0, 1fr) auto;
  grid-template-areas:
    "dot main edit"
    ". range range"
    ". delta delta";
  gap: 6px 9px;
  width: 100%;
}

.health1-results-card.is-compact .health1-lab-dot {
  grid-area: dot;
}

.health1-results-card.is-compact .health1-lab-row-main {
  grid-area: main;
}

.health1-results-card.is-compact .health1-lab-range {
  grid-area: range;
}

.health1-results-card.is-compact .health1-lab-delta {
  grid-area: delta;
  max-width: 100%;
  white-space: normal;
}

.health1-results-card.is-compact .health1-lab-edit {
  grid-area: edit;
}

.health1-lab-row.is-high,
.health1-lab-row.is-low,
.health1-lab-card.is-high,
.health1-lab-card.is-low {
  border-color: color-mix(in srgb, #fb7185 26%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff1f2 72%, var(--surface)), var(--surface));
  animation: health1-soft-alert 3.8s ease-in-out infinite;
}

.health1-lab-row.is-pending,
.health1-lab-card.is-pending {
  border-color: color-mix(in srgb, #f59e0b 30%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, #fffbeb 76%, var(--surface)), var(--surface));
  animation: health1-soft-pending 3.4s ease-in-out infinite;
}

.health1-lab-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--health1-teal);
}

.health1-lab-row.is-high .health1-lab-dot,
.health1-lab-card.is-high .health1-lab-marker {
  background: #fb6a3d;
}

.health1-lab-row.is-low .health1-lab-dot,
.health1-lab-card.is-low .health1-lab-marker {
  background: var(--health1-amber);
}

.health1-lab-row.is-pending .health1-lab-dot {
  background: #f59e0b;
}

.health1-lab-row-main {
  min-width: 0;
}

.health1-lab-row-main strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.health1-lab-row-main small,
.health1-lab-range,
.health1-lab-date {
  color: var(--ink2);
  font-size: 12px;
}

.health1-lab-delta {
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--health1-teal) 22%, var(--border));
  border-radius: 999px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--health1-teal) 7%, var(--surface));
  color: var(--health1-teal);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

.health1-lab-delta.is-up {
  border-color: color-mix(in srgb, #fb6a3d 26%, var(--border));
  background: color-mix(in srgb, #fb6a3d 8%, var(--surface));
  color: #b74421;
}

.health1-lab-delta.is-down {
  border-color: color-mix(in srgb, var(--health1-teal) 26%, var(--border));
  background: color-mix(in srgb, var(--health1-teal) 8%, var(--surface));
  color: var(--health1-teal);
}

.health1-lab-delta.is-flat {
  border-color: var(--border);
  background: color-mix(in srgb, var(--ink) 3%, var(--surface));
  color: var(--ink2);
}

.health1-lab-delta.is-pending {
  border-color: color-mix(in srgb, #f59e0b 30%, var(--border));
  background: color-mix(in srgb, #f59e0b 9%, var(--surface));
  color: #9a5a00;
}

.health1-lab-edit {
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--surface) 84%, #fff);
  color: var(--ink2);
  font: 750 11px/1 var(--sans);
  cursor: pointer;
}

.health1-lab-edit:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--health1-accent) 28%, var(--border));
}

.health1-lab-card {
  padding: 12px 14px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.health1-lab-top,
.health1-lab-foot {
  display: grid;
  gap: 12px;
}

.health1-lab-top {
  grid-template-columns: minmax(180px, 1fr) auto minmax(110px, .35fr) minmax(150px, .45fr);
  align-items: flex-start;
  margin-bottom: 10px;
}

.health1-lab-foot {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.health1-lab-name span {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 700;
}

.health1-lab-name h3 {
  margin: 2px 0 1px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.health1-lab-name p {
  margin: 0;
  color: var(--ink2);
  font-size: 11px;
}

.health1-lab-value,
.health1-lab-ref {
  align-self: center;
}

.health1-lab-ref {
  text-align: right;
}

.health1-lab-value small,
.health1-lab-ref small {
  display: block;
  color: var(--ink2);
  font-size: 11px;
}

.health1-lab-value strong,
.health1-lab-ref strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.15;
}

.health1-lab-scale {
  position: relative;
  height: 30px;
  margin: 0 2px 8px;
}

.health1-lab-pending {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  border: 1px solid color-mix(in srgb, #f59e0b 22%, var(--border));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, #fffbeb 70%, var(--surface));
  color: #8a5600;
  font-size: 12px;
  font-weight: 650;
}

.health1-lab-pending svg {
  width: 16px;
  height: 16px;
}

.health1-lab-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      #fb6a3d 0 var(--norm-start),
      #0ec7b1 var(--norm-start) var(--norm-end),
      #fb6a3d var(--norm-end) 100%);
}

.health1-lab-marker,
.health1-lab-prev {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  width: 13px;
  height: 13px;
  border-radius: 999px;
}

.health1-lab-marker {
  left: var(--result-pos);
  border: 3px solid #fff;
  background: var(--health1-teal);
  box-shadow: 0 0 0 2px currentColor;
  color: #fb6a3d;
}

.health1-lab-card.is-ok .health1-lab-marker {
  color: var(--health1-teal);
}

.health1-lab-prev {
  left: var(--prev-pos);
  top: 6px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface);
  background: #8b95a7;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
}

.health1-lab-tick {
  position: absolute;
  top: 19px;
  transform: translateX(-50%);
  color: var(--ink3);
  font-size: 10px;
  white-space: nowrap;
}

.health1-lab-tick.is-min {
  left: var(--norm-start);
}

.health1-lab-tick.is-max {
  left: var(--norm-end);
}

.health1-lab-foot > span:last-child {
  text-align: right;
  line-height: 1.35;
  color: var(--ink3);
  font-size: 11px;
}

@keyframes health1-soft-alert {
  0%, 100% { box-shadow: 0 0 0 rgba(244, 63, 94, 0); }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, #fb7185 10%, transparent); }
}

@keyframes health1-soft-pending {
  0%, 100% { box-shadow: 0 0 0 rgba(245, 158, 11, 0); }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 12%, transparent); }
}

.health1-emergency {
  border-color: color-mix(in srgb, var(--health1-red) 22%, var(--border));
}

.health1-emergency .health1-card-head h2 {
  color: var(--health1-red);
}

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

.health1-emergency-grid > div {
  padding: 10px;
}

.health1-empty-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink2);
  font-size: 12px;
}

.health1-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
}

.health1-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .34);
  backdrop-filter: blur(3px);
}

.health1-modal-card {
  position: relative;
  width: min(720px, 100%);
  max-height: min(86vh, 820px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}

.health1-modal-card header,
.health1-modal-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.health1-modal-card footer {
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.health1-modal-card footer > div {
  display: flex;
  gap: 8px;
}

.health1-modal-card footer .btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.health1-modal-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}

.health1-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: auto;
  padding: 16px;
}

.health1-form-grid .field.is-wide {
  grid-column: 1 / -1;
}

.health1-modal-card.is-medication {
  width: min(820px, 100%);
}

.health1-modal-card.is-resultPanel {
  width: min(980px, 100%);
}

.health1-form-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.health1-form-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.health1-form-section > div:first-child {
  display: grid;
  gap: 3px;
}

.health1-form-section > div:first-child > strong {
  color: var(--ink);
  font-size: 13px;
}

.health1-form-section > div:first-child > small {
  color: var(--ink3);
  font-size: 10px;
  line-height: 1.4;
}

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

.health1-form-section-grid > .is-wide {
  grid-column: 1 / -1;
}

.health1-result-definition-fields {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 16%, var(--border));
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--health1-lavender) 22%, var(--surface));
}

.health1-result-definition-fields[hidden] {
  display: none;
}

.health1-result-definition-fields > p {
  margin: 0;
  color: var(--ink3);
  font-size: 10px;
  line-height: 1.4;
}

.health1-result-definition-hint {
  min-height: 34px;
  display: flex;
  align-items: center;
  border-radius: 7px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--health1-blue) 34%, var(--surface));
  color: var(--ink2);
  font-size: 10px;
  line-height: 1.4;
}

.health1-result-definition-fields input[readonly] {
  background: color-mix(in srgb, var(--bg) 64%, var(--surface));
  color: var(--ink2);
}

.health1-result-panel-table {
  grid-column: 1 / -1;
  height: max-content;
  align-self: start;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 17%, var(--border));
  border-radius: 8px;
  background: var(--surface);
}

.health1-result-panel-table > header {
  padding: 11px 12px;
  background: color-mix(in srgb, var(--health1-lavender) 28%, var(--surface));
}

.health1-result-panel-table > header strong,
.health1-result-panel-table > header small,
.health1-result-panel-name strong,
.health1-result-panel-name small {
  display: block;
}

.health1-result-panel-table > header strong {
  color: var(--ink);
  font-size: 13px;
}

.health1-result-panel-table > header small,
.health1-result-panel-name small {
  margin-top: 2px;
  color: var(--ink3);
  font-size: 9px;
}

.health1-result-panel-rows {
  display: grid;
}

.health1-result-panel-row {
  display: grid;
  grid-template-columns: 28px minmax(180px, 1fr) minmax(84px, .65fr) minmax(90px, .7fr) minmax(76px, .55fr) minmax(76px, .55fr);
  gap: 8px;
  align-items: end;
  padding: 9px 10px;
  border-top: 1px solid var(--border);
}

.health1-result-panel-include {
  align-self: center;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.health1-result-panel-include input {
  width: 17px;
  height: 17px;
  accent-color: var(--health1-accent);
}

.health1-result-panel-name {
  min-width: 0;
  align-self: center;
}

.health1-result-panel-name strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-result-panel-row > label:not(.health1-result-panel-include) {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.health1-result-panel-row > label:not(.health1-result-panel-include) > span {
  color: var(--ink3);
  font-size: 8px;
  font-weight: 750;
  text-transform: uppercase;
}

.health1-result-panel-row .field-input {
  min-width: 0;
  height: 34px;
  padding: 6px 8px;
  font-size: 11px;
}

.health1-medication-photo {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 17%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--health1-lavender) 28%, var(--surface));
}

.health1-medication-photo-preview {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 20%, var(--border));
  border-radius: 8px;
  background: var(--surface);
  color: var(--health1-accent);
}

.health1-medication-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.health1-medication-photo-preview svg {
  width: 34px;
  height: 34px;
}

.health1-medication-photo > div:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.health1-medication-photo > div:last-child > strong,
.health1-medication-photo > div:last-child > small {
  width: 100%;
}

.health1-medication-photo > div:last-child > strong {
  color: var(--ink);
  font-size: 12px;
}

.health1-medication-photo > div:last-child > small {
  color: var(--ink3);
  font-size: 10px;
  line-height: 1.4;
}

.health1-file-btn,
.health1-paste-capture {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 24%, var(--border));
  border-radius: 8px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.health1-file-btn input {
  display: none;
}

.health1-file-btn svg,
.health1-paste-capture svg {
  width: 14px;
  height: 14px;
  color: var(--health1-accent);
}

.health1-paste-capture:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--health1-accent) 50%, transparent);
  outline-offset: 2px;
}

.health1-remove-photo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink2);
  font-size: 10px;
}

.health1-stock-history {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 78%, var(--bg));
}

.health1-stock-history > strong {
  color: var(--ink);
  font-size: 11px;
}

.health1-stock-history > span {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding-top: 5px;
  border-top: 1px solid var(--border);
}

.health1-stock-history b {
  color: var(--health1-teal);
  font-size: 11px;
}

.health1-stock-history small {
  color: var(--ink3);
  font-size: 10px;
}

.health1-reader {
  padding: 14px;
}

.health1-reader-card {
  position: relative;
  width: min(1120px, 100%);
  height: min(88vh, 900px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

.health1-reader-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.health1-reader-card header > div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.health1-reader-card h2,
.health1-reader-card p {
  margin: 0;
}

.health1-reader-card h2 {
  color: var(--ink);
  font-size: 16px;
}

.health1-reader-card p {
  margin-top: 2px;
  color: var(--ink2);
  font-size: 12px;
}

.health1-reader-body {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  background: color-mix(in srgb, var(--surface) 72%, #eef2f7);
}

.health1-reader-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.health1-reader-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.health1-reader-state {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 13px;
}

.health1-doctor-summary-card {
  position: relative;
  width: min(1040px, 100%);
  height: min(88vh, 860px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

.health1-doctor-summary-card > header,
.health1-doctor-summary-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.health1-doctor-summary-card > header span {
  color: var(--health1-teal);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.health1-doctor-summary-card h2,
.health1-doctor-summary-card p {
  margin: 0;
}

.health1-doctor-summary-card h2 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 18px;
}

.health1-doctor-summary-card p {
  margin-top: 2px;
  color: var(--ink2);
  font-size: 11px;
}

.health1-doctor-summary-tools {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: 12px;
  align-items: end;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--health1-accent) 4%, var(--surface));
}

.health1-doctor-summary-tools label > span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 750;
}

.health1-doctor-summary-tools select {
  width: 100%;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--ink);
  font: 650 12px/1 var(--sans);
}

.health1-doctor-summary-tools > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 9px;
  align-items: center;
}

.health1-doctor-summary-tools > div > span {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #eef8f4;
  color: #247d64;
}

.health1-doctor-summary-tools svg {
  width: 17px;
  height: 17px;
}

.health1-doctor-summary-tools strong,
.health1-doctor-summary-tools small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-doctor-summary-tools strong {
  color: var(--ink);
  font-size: 12px;
}

.health1-doctor-summary-tools small {
  color: var(--ink3);
  font-size: 9px;
}

.health1-doctor-summary-text {
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--surface) 84%, #f5f7fa);
  color: var(--ink);
  font: 12px/1.55 var(--mono, monospace);
  white-space: pre-wrap;
}

.health1-doctor-summary-card > footer {
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.health1-doctor-summary-card > footer .btn svg {
  width: 15px;
  height: 15px;
}

.health1-reader-state.is-error {
  border-color: color-mix(in srgb, var(--health1-red) 24%, var(--border));
  color: var(--health1-red);
}

/* Health cockpit visual polish: warm, private and calm without changing behavior. */
.health1-dashboard {
  gap: 12px;
}

.health1-dashboard .health1-card,
.health1-dashboard .health1-shortcut {
  border-color: color-mix(in srgb, var(--border) 62%, transparent);
  box-shadow: 0 12px 30px rgba(47, 45, 78, .055);
}

.health1-dashboard-top {
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 10%, var(--border));
  border-radius: 8px;
  padding: 10px;
  background: linear-gradient(118deg,
    color-mix(in srgb, var(--health1-lavender) 58%, var(--surface)),
    color-mix(in srgb, var(--health1-blush) 48%, var(--surface)) 46%,
    color-mix(in srgb, var(--health1-cream) 56%, var(--surface)));
}

.health1-dashboard-top .health1-card {
  box-shadow: 0 8px 22px rgba(55, 48, 88, .045);
}

.health1-profile-card {
  border-color: color-mix(in srgb, #8a74de 13%, var(--border));
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--surface) 74%, var(--health1-lavender)),
    color-mix(in srgb, var(--surface) 88%, var(--health1-blush)));
}

.health1-profile-ring {
  background: conic-gradient(
    #7862d8 0,
    #a577df,
    #ef7a8d,
    #f39a67 var(--health1-score-angle),
    color-mix(in srgb, var(--border) 54%, transparent) 0);
  box-shadow: 0 12px 28px rgba(112, 86, 191, .16);
}

.health1-profile-ring > span {
  background: color-mix(in srgb, var(--surface) 92%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 76%, transparent);
}

.health1-profile-copy > p {
  color: color-mix(in srgb, var(--ink2) 82%, #7862a3);
}

.health1-profile-todos button {
  border-radius: 6px;
  padding: 4px 5px;
}

.health1-profile-todos button:hover {
  background: color-mix(in srgb, #fff 50%, transparent);
}

.health1-attention-card {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--surface) 84%, var(--health1-blush)),
    color-mix(in srgb, var(--surface) 90%, var(--health1-cream)));
}

.health1-upcoming-card {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--surface) 82%, var(--health1-blue)),
    color-mix(in srgb, var(--surface) 90%, var(--health1-mint)));
}

.health1-dashboard-action,
.health1-upcoming-item {
  border-color: color-mix(in srgb, var(--border) 58%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, rgba(255, 255, 255, .7));
  box-shadow: 0 3px 10px rgba(47, 45, 78, .025);
}

.health1-dashboard-action:hover,
.health1-upcoming-item:hover {
  border-color: color-mix(in srgb, var(--health1-accent) 22%, var(--border));
  background: color-mix(in srgb, var(--surface) 80%, #fff);
  box-shadow: 0 7px 16px rgba(73, 60, 128, .07);
  transform: translateY(-1px);
}

.health1-dashboard-action,
.health1-upcoming-item,
.health1-shortcut {
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.health1-dashboard-action.is-pending > span {
  background: color-mix(in srgb, var(--health1-cream) 84%, #ffd979);
}

.health1-dashboard-action.is-alert > span,
.health1-dashboard-action.is-condition > span {
  background: color-mix(in srgb, var(--health1-blush) 82%, #ffc2cc);
  color: var(--health1-coral);
}

.health1-dashboard-action.is-visit > span,
.health1-upcoming-item > span {
  background: color-mix(in srgb, var(--health1-lavender) 82%, #d9d2ff);
  color: #6f5bc7;
}

.health1-dashboard-focus,
.health1-dashboard-details {
  gap: 12px;
}

.health1-history-card.is-overview {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 96%, #fff),
    color-mix(in srgb, var(--surface) 91%, var(--health1-blue)));
}

.health1-areas-card.is-overview {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--surface) 87%, var(--health1-lavender)),
    color-mix(in srgb, var(--surface) 95%, #fff));
}

.health1-areas-card.is-overview .health1-thread {
  border-color: color-mix(in srgb, #806bd2 13%, var(--border));
  background: color-mix(in srgb, var(--surface) 90%, #f7f4ff);
  box-shadow: 0 6px 18px rgba(83, 65, 145, .035);
}

.health1-areas-card.is-overview .health1-thread-photo.has-photo {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #e9e4fb, #f7e9ed);
}

.health1-areas-card.is-overview .health1-thread-photo.has-photo img {
  filter: blur(10px) saturate(.72);
  transform: scale(1.12);
  transition: filter .18s ease, transform .18s ease;
}

.health1-areas-card.is-overview .health1-thread-photo.has-photo::after {
  content: "Wrażliwe zdjęcie\A kliknij, aby pokazać";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  padding: 6px;
  background: color-mix(in srgb, #40385e 42%, transparent);
  color: #fff;
  font: 750 8px/1.35 var(--sans);
  text-align: center;
  white-space: pre-line;
}

.health1-areas-card.is-overview .health1-thread-photo.has-photo:hover img,
.health1-areas-card.is-overview .health1-thread-photo.has-photo:focus-visible img {
  filter: blur(7px) saturate(.86);
  transform: scale(1.08);
}

.health1-dashboard-details .health1-today-card {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--surface) 89%, var(--health1-blue)),
    color-mix(in srgb, var(--surface) 91%, var(--health1-mint)));
}

.health1-dashboard-details .health1-dose-group,
.health1-dashboard-details .health1-dose-item,
.health1-dashboard-details .health1-visit-row {
  border-color: color-mix(in srgb, #4d9e8b 11%, var(--border));
  background: color-mix(in srgb, var(--surface) 91%, #f2fbf8);
}

.health1-dashboard-details .health1-results-card {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--surface) 88%, var(--health1-cream)),
    color-mix(in srgb, var(--surface) 94%, #fff));
}

.health1-dashboard .health1-lab-row.is-high,
.health1-dashboard .health1-lab-row.is-low {
  border-color: color-mix(in srgb, var(--health1-coral) 22%, var(--border));
  background: color-mix(in srgb, var(--surface) 84%, #fff2f1);
  animation-duration: 5.4s;
}

.health1-dashboard .health1-lab-row.is-pending {
  border-color: color-mix(in srgb, #e8a52c 24%, var(--border));
  background: color-mix(in srgb, var(--surface) 82%, var(--health1-cream));
  animation-duration: 5s;
}

.health1-dashboard .health1-lab-row:not(.is-high):not(.is-low):not(.is-pending) {
  border-color: color-mix(in srgb, #2b9f7d 15%, var(--border));
  background: color-mix(in srgb, var(--surface) 91%, var(--health1-mint));
}

.health1-shortcuts {
  gap: 8px;
}

.health1-shortcut {
  border-color: transparent;
}

.health1-shortcut.is-vaccination {
  background: linear-gradient(140deg, color-mix(in srgb, var(--surface) 76%, var(--health1-lavender)), color-mix(in srgb, var(--surface) 94%, #fff));
}

.health1-shortcut.is-treatment {
  background: linear-gradient(140deg, color-mix(in srgb, var(--surface) 77%, var(--health1-cream)), color-mix(in srgb, var(--surface) 93%, #fff));
}

.health1-shortcut.is-document {
  background: linear-gradient(140deg, color-mix(in srgb, var(--surface) 78%, var(--health1-blue)), color-mix(in srgb, var(--surface) 93%, #fff));
}

.health1-shortcut.is-emergency {
  background: linear-gradient(140deg, color-mix(in srgb, var(--surface) 77%, var(--health1-blush)), color-mix(in srgb, var(--surface) 93%, #fff));
}

.health1-shortcut:hover {
  border-color: color-mix(in srgb, var(--health1-accent) 18%, var(--border));
  box-shadow: 0 9px 20px rgba(64, 48, 119, .07);
  transform: translateY(-1px);
}

.health1-emergency {
  border-color: color-mix(in srgb, var(--health1-coral) 15%, var(--border));
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--surface) 87%, var(--health1-blush)),
    color-mix(in srgb, var(--surface) 96%, #fff));
}

.health1-emergency .health1-card-head h2 {
  color: color-mix(in srgb, var(--health1-coral) 72%, var(--ink));
}

.health1-results-view {
  min-width: 0;
}

.health1-results-view .health1-results-card {
  width: 100%;
}

.health1-result-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.health1-result-overview > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--border);
  border-top: 2px solid color-mix(in srgb, var(--health1-accent) 48%, var(--border));
  border-radius: 8px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--surface) 96%, var(--health1-lavender));
}

.health1-result-overview strong {
  color: var(--ink);
  font-size: 21px;
  line-height: 1;
}

.health1-result-overview span {
  overflow: hidden;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-result-overview > .is-alert {
  border-top-color: #fb6a3d;
  background: color-mix(in srgb, var(--surface) 94%, #fff1f2);
}

.health1-result-overview > .is-pending {
  border-top-color: #e8a52c;
  background: color-mix(in srgb, var(--surface) 94%, var(--health1-cream));
}

.health1-result-overview > .is-ok {
  border-top-color: var(--health1-teal);
  background: color-mix(in srgb, var(--surface) 95%, var(--health1-mint));
}

.health1-result-groups,
.health1-result-series-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.health1-result-group,
.health1-result-series {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: clip;
}

.health1-result-group > summary,
.health1-result-series > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.health1-result-group > summary::-webkit-details-marker,
.health1-result-series > summary::-webkit-details-marker {
  display: none;
}

.health1-result-group > summary {
  display: grid;
  grid-template-columns: 34px minmax(180px, 1fr) minmax(200px, auto) 22px;
  gap: 10px;
  align-items: center;
  min-height: 60px;
  padding: 9px 12px;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--surface) 93%, var(--health1-lavender)),
    var(--surface));
}

.health1-result-group.has-attention > summary {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--surface) 93%, var(--health1-cream)),
    var(--surface));
}

.health1-result-group-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--health1-accent) 9%, var(--surface));
  color: var(--health1-accent);
}

.health1-result-group-icon svg,
.health1-result-chevron svg {
  width: 17px;
  height: 17px;
}

.health1-result-group-title {
  min-width: 0;
}

.health1-result-group-title strong,
.health1-result-group-title small {
  display: block;
}

.health1-result-group-title strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-result-group-title small {
  margin-top: 3px;
  color: var(--ink3);
  font-size: 11px;
}

.health1-result-group-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.health1-result-group-status em,
.health1-result-series-count,
.health1-result-mini-status,
.health1-result-history-row em {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 7px;
  background: color-mix(in srgb, var(--surface) 90%, #fff);
  color: var(--ink2);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.health1-result-group-status .is-alert,
.health1-result-history-row.is-high em,
.health1-result-history-row.is-low em {
  border-color: color-mix(in srgb, #fb6a3d 25%, var(--border));
  background: color-mix(in srgb, #fb6a3d 7%, var(--surface));
  color: #b74421;
}

.health1-result-group-status .is-pending,
.health1-result-mini-status.is-pending,
.health1-result-history-row.is-pending em {
  border-color: color-mix(in srgb, #e8a52c 28%, var(--border));
  background: color-mix(in srgb, #e8a52c 8%, var(--surface));
  color: #8a5600;
}

.health1-result-group-status .is-ok,
.health1-result-history-row.is-ok em {
  border-color: color-mix(in srgb, var(--health1-teal) 24%, var(--border));
  background: color-mix(in srgb, var(--health1-teal) 6%, var(--surface));
  color: var(--health1-teal);
}

.health1-result-chevron {
  display: grid;
  place-items: center;
  color: var(--ink3);
  transition: transform .18s ease;
}

.health1-result-group[open] > summary .health1-result-chevron,
.health1-result-series[open] > summary .health1-result-chevron {
  transform: rotate(180deg);
}

.health1-result-group > .health1-result-series-list {
  border-top: 1px solid var(--border);
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 97%, var(--health1-blue));
}

.health1-result-series {
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
}

.health1-result-series > summary {
  display: grid;
  grid-template-columns: 11px minmax(145px, 1fr) minmax(120px, .7fr) minmax(120px, .8fr) minmax(150px, 1fr) 82px auto 20px;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px 10px;
}

.health1-result-series.is-high > summary,
.health1-result-series.is-low > summary {
  background: color-mix(in srgb, var(--surface) 94%, #fff1f2);
}

.health1-result-series.is-pending > summary {
  background: color-mix(in srgb, var(--surface) 93%, var(--health1-cream));
}

.health1-result-series-name,
.health1-result-series-value {
  min-width: 0;
}

.health1-result-series-name strong,
.health1-result-series-name small,
.health1-result-series-value strong,
.health1-result-series-value small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-result-series-name strong {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.health1-result-series-name strong,
.health1-result-series-value strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}

.health1-result-series-name small,
.health1-result-series-value small,
.health1-result-series-date {
  margin-top: 2px;
  color: var(--ink3);
  font-size: 10px;
}

.health1-result-series-value strong {
  font-size: 14px;
}

.health1-result-mini-scale {
  position: relative;
  display: block;
  min-width: 80px;
  height: 18px;
}

.health1-result-mini-scale i {
  position: absolute;
  inset: 8px 0 auto;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    #fb6a3d 0 var(--norm-start),
    #0ec7b1 var(--norm-start) var(--norm-end),
    #fb6a3d var(--norm-end) 100%);
}

.health1-result-mini-scale b {
  position: absolute;
  top: 3px;
  left: var(--result-pos);
  width: 11px;
  height: 11px;
  transform: translateX(-50%);
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 26%, transparent);
}

.health1-result-series.is-high .health1-result-mini-scale b,
.health1-result-series.is-low .health1-result-mini-scale b {
  background: #fb6a3d;
}

.health1-result-series.is-high .health1-lab-dot,
.health1-result-series.is-low .health1-lab-dot {
  background: #fb6a3d;
}

.health1-result-series.is-pending .health1-lab-dot {
  background: #e8a52c;
}

.health1-result-series-change {
  overflow: hidden;
  color: var(--ink2);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-result-series-change.is-up {
  color: #b74421;
}

.health1-result-series-change.is-down {
  color: var(--health1-teal);
}

.health1-result-series-count {
  justify-self: end;
}

.health1-result-series-detail {
  border-top: 1px solid var(--border);
  padding: 10px 12px 12px;
  background: color-mix(in srgb, var(--surface) 97%, #fff);
}

.health1-result-expanded-scale {
  margin-bottom: 8px;
  padding: 5px 6px 0;
}

.health1-result-trend {
  margin: 10px 0;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 15%, var(--border));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 97%, var(--health1-blue));
}

.health1-result-trend > header,
.health1-result-trend > header > div,
.health1-result-trend > header > div > div {
  display: flex;
  align-items: center;
}

.health1-result-trend > header {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.health1-result-trend > header > div {
  gap: 7px;
}

.health1-result-trend > header > div > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--health1-lavender) 68%, var(--surface));
  color: var(--health1-accent);
}

.health1-result-trend > header svg {
  width: 14px;
  height: 14px;
}

.health1-result-trend > header > div > div {
  align-items: flex-start;
  flex-direction: column;
  gap: 1px;
}

.health1-result-trend > header strong {
  color: var(--ink);
  font-size: 12px;
}

.health1-result-trend > header small {
  color: var(--ink3);
  font-size: 9px;
}

.health1-result-trend > header em {
  border: 1px solid color-mix(in srgb, var(--health1-teal) 22%, var(--border));
  border-radius: 999px;
  padding: 4px 7px;
  background: color-mix(in srgb, var(--health1-mint) 45%, var(--surface));
  color: var(--ink2);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.health1-result-trend-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.health1-result-trend-metrics > div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--surface) 94%, #fff);
}

.health1-result-trend-metrics small,
.health1-result-trend-metrics strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-result-trend-metrics small {
  color: var(--ink3);
  font-size: 8px;
  font-weight: 700;
}

.health1-result-trend-metrics strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 12px;
}

.health1-result-trend-chart {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 11%, var(--border));
  border-radius: 7px;
  background: var(--surface);
}

.health1-result-trend-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.health1-result-trend-norm {
  fill: #e1f6ed;
  fill-opacity: .82;
}

.health1-result-trend-center {
  stroke: #68bfa4;
  stroke-dasharray: 5 5;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.health1-result-trend-grid {
  stroke: color-mix(in srgb, var(--border) 68%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.health1-result-trend-line {
  fill: none;
  stroke: var(--health1-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.health1-result-trend-point circle {
  fill: var(--health1-teal);
  stroke: var(--surface);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.health1-result-trend-point.is-high circle,
.health1-result-trend-point.is-low circle {
  fill: #fb6a3d;
}

.health1-result-trend-point-label {
  pointer-events: none;
}

.health1-result-trend-point-value,
.health1-result-trend-point-date {
  paint-order: stroke;
  stroke: var(--surface);
  stroke-linejoin: round;
  stroke-width: 4px;
  fill: var(--ink);
  font-family: inherit;
}

.health1-result-trend-point-value {
  font-size: 10px;
  font-weight: 850;
}

.health1-result-trend-point-date {
  fill: var(--ink3);
  font-size: 8px;
  font-weight: 700;
}

.health1-result-trend-marker line {
  stroke: color-mix(in srgb, var(--health1-accent) 46%, var(--border));
  stroke-dasharray: 4 4;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.health1-result-trend-marker circle {
  fill: color-mix(in srgb, var(--health1-lavender) 74%, var(--surface));
  stroke: var(--health1-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.health1-result-trend-marker.is-control circle {
  fill: color-mix(in srgb, var(--health1-cream) 72%, var(--surface));
  stroke: #d98b1d;
}

.health1-result-trend-marker text,
.health1-result-trend-date {
  fill: var(--ink2);
  font-family: inherit;
  font-size: 8px;
  font-weight: 800;
}

.health1-result-trend-date {
  fill: var(--ink3);
  font-weight: 650;
}

.health1-result-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 2px 0;
}

.health1-result-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink3);
  font-size: 8px;
}

.health1-result-trend-legend i {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 999px;
  background: var(--health1-accent);
}

.health1-result-trend-legend i.is-norm {
  background: var(--health1-mint);
}

.health1-result-trend-legend i.is-center {
  height: 0;
  border-top: 1px dashed #68bfa4;
  background: transparent;
}

.health1-result-trend-legend i.is-treatment {
  height: 8px;
  border-left: 1px dashed var(--health1-accent);
  border-radius: 0;
  background: transparent;
}

.health1-result-action {
  display: grid;
  gap: 7px;
  margin: 9px 0 2px;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 18%, var(--border));
  border-radius: 8px;
  padding: 9px;
  background: color-mix(in srgb, var(--health1-lavender) 20%, var(--surface));
}

.health1-result-action.is-active,
.health1-result-action.is-positive {
  border-color: color-mix(in srgb, var(--health1-teal) 26%, var(--border));
  background: color-mix(in srgb, var(--health1-mint) 20%, var(--surface));
}

.health1-result-action.is-planned {
  border-color: color-mix(in srgb, #5d79d8 24%, var(--border));
  background: color-mix(in srgb, #eef2ff 38%, var(--surface));
}

.health1-result-action.is-alert {
  border-color: color-mix(in srgb, var(--health1-coral) 30%, var(--border));
  background: color-mix(in srgb, var(--health1-blush) 30%, var(--surface));
}

.health1-result-action > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.health1-result-action > header > div {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}

.health1-result-action > header > div > span,
.health1-result-action-links button > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--health1-lavender) 58%, var(--surface));
  color: var(--health1-accent);
}

.health1-result-action > header svg,
.health1-result-action-links button svg {
  width: 14px;
  height: 14px;
}

.health1-result-action > header strong,
.health1-result-action > header small {
  display: block;
}

.health1-result-action > header strong {
  color: var(--ink);
  font-size: 10px;
}

.health1-result-action > header small {
  margin-top: 1px;
  color: var(--ink3);
  font-size: 8px;
}

.health1-result-action > header > em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.health1-result-action.is-alert > header > em {
  color: #b9382b;
}

.health1-result-action.is-active > header > em,
.health1-result-action.is-positive > header > em {
  color: var(--health1-teal);
}

.health1-result-action > p {
  margin: 0;
  color: var(--ink2);
  font-size: 9px;
  line-height: 1.45;
}

.health1-result-action-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.health1-result-action-links button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.health1-result-action-links button:hover {
  border-color: color-mix(in srgb, var(--health1-accent) 32%, var(--border));
  background: color-mix(in srgb, var(--health1-lavender) 36%, var(--surface));
}

.health1-result-action-links button > div {
  min-width: 0;
}

.health1-result-action-links button strong,
.health1-result-action-links button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-result-action-links button strong {
  font-size: 10px;
}

.health1-result-action-links button small {
  margin-top: 2px;
  color: var(--ink3);
  font-size: 8px;
}

.health1-result-action-links button em {
  border-radius: 999px;
  padding: 3px 6px;
  background: color-mix(in srgb, var(--health1-mint) 46%, var(--surface));
  color: var(--health1-teal);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.health1-result-action > footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 2px;
}

.health1-result-action > footer button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--health1-accent) 22%, var(--border));
  border-radius: 7px;
  padding: 4px 8px;
  background: var(--surface);
  color: var(--ink2);
  font: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.health1-result-action > footer button:hover {
  border-color: color-mix(in srgb, var(--health1-accent) 44%, var(--border));
  color: var(--health1-accent);
}

.health1-result-action > footer svg {
  width: 13px;
  height: 13px;
}

.health1-form-note {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: var(--ink3);
  font-size: 10px;
  line-height: 1.45;
}

.health1-decision-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--health1-teal) 20%, var(--border));
  border-radius: 8px;
  padding: 11px;
  background: color-mix(in srgb, var(--health1-mint) 24%, var(--surface));
}

.health1-decision-summary > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--health1-teal);
}

.health1-decision-summary svg {
  width: 16px;
  height: 16px;
}

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

.health1-decision-summary small {
  color: var(--ink3);
  font-size: 9px;
}

.health1-decision-summary strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 12px;
}

.health1-decision-summary p {
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 9px;
  line-height: 1.45;
}

.health1-decision-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.health1-decision-options legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--ink2);
  font-size: 10px;
  font-weight: 800;
}

.health1-decision-options label {
  min-width: 0;
  cursor: pointer;
}

.health1-decision-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.health1-decision-options label > span {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 2px 7px;
  align-items: center;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface);
}

.health1-decision-options label svg {
  grid-row: 1 / span 2;
  width: 17px;
  height: 17px;
  color: var(--health1-accent);
}

.health1-decision-options label strong,
.health1-decision-options label small {
  display: block;
}

.health1-decision-options label strong {
  color: var(--ink);
  font-size: 10px;
}

.health1-decision-options label small {
  color: var(--ink3);
  font-size: 9px;
}

.health1-decision-options input:checked + span {
  border-color: color-mix(in srgb, var(--health1-accent) 45%, var(--border));
  background: color-mix(in srgb, var(--health1-lavender) 32%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--health1-accent) 9%, transparent);
}

.health1-decision-field {
  min-width: 0;
}

.health1-decision-field[hidden] {
  display: none;
}

.health1-decision-field > .field {
  width: 100%;
}

.health1-result-trend-note {
  display: flex;
  gap: 5px;
  align-items: flex-start;
  margin: 8px 1px 0;
  color: var(--ink3);
  font-size: 8px;
  line-height: 1.4;
}

.health1-result-trend-direction {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  background: var(--surface);
}

.health1-result-trend-direction > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.health1-result-trend-direction svg {
  width: 15px;
  height: 15px;
}

.health1-result-trend-direction > div {
  min-width: 0;
}

.health1-result-trend-direction small,
.health1-result-trend-direction strong,
.health1-result-trend-direction p {
  display: block;
  margin: 0;
}

.health1-result-trend-direction small {
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.health1-result-trend-direction strong {
  margin-top: 1px;
  color: var(--ink);
  font-size: 11px;
}

.health1-result-trend-direction p {
  margin-top: 2px;
  color: var(--ink3);
  font-size: 9px;
  line-height: 1.35;
}

.health1-result-trend-direction.is-positive {
  border-color: color-mix(in srgb, var(--health1-teal) 20%, var(--border));
  background: color-mix(in srgb, var(--health1-mint) 52%, var(--surface));
}

.health1-result-trend-direction.is-positive > span {
  background: color-mix(in srgb, var(--health1-mint) 82%, var(--surface));
  color: var(--health1-teal);
}

.health1-result-trend-direction.is-positive small {
  color: var(--health1-teal);
}

.health1-result-trend-direction.is-attention {
  border-color: color-mix(in srgb, #e7773d 22%, var(--border));
  background: color-mix(in srgb, var(--health1-cream) 58%, var(--surface));
}

.health1-result-trend-direction.is-attention > span {
  background: color-mix(in srgb, #ffd8c2 55%, var(--surface));
  color: #b94d1e;
}

.health1-result-trend-direction.is-attention small {
  color: #b94d1e;
}

.health1-result-trend-direction.is-neutral > span {
  background: color-mix(in srgb, var(--health1-blue) 70%, var(--surface));
  color: var(--health1-accent);
}

.health1-result-trend-direction.is-neutral small {
  color: var(--ink3);
}

.health1-result-trend-note svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.health1-result-history {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.health1-result-history-head,
.health1-result-history-row {
  display: grid;
  grid-template-columns: 105px minmax(100px, .55fr) minmax(145px, .8fr) auto minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.health1-result-history-head {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--surface) 94%, var(--health1-blue));
}

.health1-result-history-head strong {
  color: var(--ink);
  font-size: 11px;
}

.health1-result-history-head span {
  color: var(--ink3);
  font-size: 10px;
}

.health1-result-history-row {
  min-height: 44px;
  padding: 7px 10px;
  border-top: 1px solid var(--border);
}

.health1-result-history-row time,
.health1-result-history-row > span,
.health1-result-history-row small {
  min-width: 0;
  color: var(--ink2);
  font-size: 10px;
}

.health1-result-history-row strong {
  color: var(--ink);
  font-size: 12px;
}

.health1-result-history-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health1-result-history-row small.is-up {
  color: #b74421;
}

.health1-result-history-row small.is-down {
  color: var(--health1-teal);
}

@media (max-width: 1100px) {
  .health1-result-series > summary {
    grid-template-columns: 11px minmax(150px, 1fr) minmax(120px, .7fr) minmax(130px, .8fr) 82px auto 20px;
  }

  .health1-result-series-change {
    display: none;
  }

  .health1-result-history-row {
    grid-template-columns: 95px minmax(95px, .55fr) minmax(130px, .8fr) auto minmax(140px, 1fr) auto;
  }
}

@media (max-width: 640px) {
  .health1-result-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .health1-result-group > summary {
    grid-template-columns: 32px minmax(0, 1fr) 20px;
    gap: 8px;
    padding: 9px 10px;
  }

  .health1-result-group-status {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  .health1-result-group > summary > .health1-result-chevron {
    grid-column: 3;
    grid-row: 1;
  }

  .health1-result-series > summary {
    grid-template-columns: 10px minmax(0, 1fr) auto 18px;
    grid-template-areas:
      "dot name value chevron"
      ". scale scale scale"
      ". date count count";
    gap: 6px 8px;
    padding: 9px;
  }

  .health1-result-series > summary > .health1-lab-dot {
    grid-area: dot;
  }

  .health1-result-series-name {
    grid-area: name;
  }

  .health1-result-series-value {
    grid-area: value;
    text-align: right;
  }

  .health1-result-mini-scale,
  .health1-result-mini-status {
    grid-area: scale;
  }

  .health1-result-series-change {
    display: none;
  }

  .health1-result-series-date {
    grid-area: date;
  }

  .health1-result-series-count {
    grid-area: count;
    justify-self: end;
  }

  .health1-result-series > summary > .health1-result-chevron {
    grid-area: chevron;
  }

  .health1-result-history-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "date value edit"
      "range status status"
      "delta delta delta";
    gap: 5px 8px;
    padding: 9px;
  }

  .health1-result-history-row time {
    grid-area: date;
  }

  .health1-result-history-row strong {
    grid-area: value;
  }

  .health1-result-history-row > span {
    grid-area: range;
  }

  .health1-result-history-row em {
    grid-area: status;
    justify-self: end;
  }

  .health1-result-history-row small {
    grid-area: delta;
    white-space: normal;
  }

  .health1-result-history-row button {
    grid-area: edit;
  }

  .health1-result-trend {
    padding: 8px;
  }

  .health1-result-trend > header {
    align-items: flex-start;
  }

  .health1-result-trend > header em {
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .health1-result-trend-metrics {
    gap: 4px;
  }

  .health1-result-trend-metrics > div {
    padding: 5px 6px;
  }

  .health1-result-trend-metrics strong {
    font-size: 10px;
  }

  .health1-result-trend-legend {
    gap: 7px;
  }

  .health1-result-action-links {
    grid-template-columns: 1fr;
  }

  .health1-result-action > header {
    align-items: flex-start;
  }

  .health1-result-action > header > em {
    max-width: 48%;
    text-align: right;
  }

  .health1-result-action > footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .health1-result-action > footer button {
    justify-content: center;
  }

  .health1-dashboard-top {
    padding: 7px;
  }

  .health1-dashboard-action:hover,
  .health1-upcoming-item:hover,
  .health1-shortcut:hover {
    transform: none;
  }
}

@media (max-width: 960px) {
  .health1-grid,
  .health1-two-col,
  .health1-two-col.is-wide-main,
  .health1-plan-layout {
    grid-template-columns: 1fr;
  }

  .health1-consultation-card {
    position: static;
  }

  .health1-dashboard-top {
    grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr);
  }

  .health1-upcoming-card {
    grid-column: 1 / -1;
  }

  .health1-dashboard-focus,
  .health1-dashboard-details,
  .health1-history-view {
    grid-template-columns: 1fr;
  }

  .health1-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .health1-hero {
    grid-template-columns: 1fr;
  }

  .health1-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .health1-hero-metrics span {
    margin-bottom: 0;
  }

  .health1-lab-row {
    grid-template-columns: 12px minmax(0, 1fr) auto;
  }

  .health1-doc-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .health1-doc-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .health1-thread-entry-list {
    grid-template-columns: repeat(4, minmax(86px, 1fr));
  }

  .health1-condition-detail-grid {
    grid-template-columns: 1fr;
  }

  .health1-condition-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .health1-condition-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .health1-condition-connection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .health1-condition-connection-group:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .health1-condition-connection-group:nth-child(n + 3) {
    border-top: 1px solid var(--border);
    padding-top: 12px;
  }

  .health1-lab-range,
  .health1-lab-delta {
    grid-column: 2;
  }

  .health1-lab-edit {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 640px) {
  .health1-page .module-page-content {
    gap: 10px;
  }

  .health1-module-header {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .health1-module-header .page-title {
    font-size: 27px;
  }

  .health1-module-header .page-sub {
    display: none;
  }

  .health1-page .module-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    box-sizing: border-box;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
  }

  .health1-page .module-header-actions .health1-copy-btn {
    width: auto;
    min-width: 0;
    justify-content: center;
  }

  .health1-copy-label-full {
    display: none;
  }

  .health1-copy-label-mobile {
    display: inline;
  }

  .health1-tab-label-full {
    display: none;
  }

  .health1-tab-label-mobile {
    display: inline;
  }

  .health1-page .module-header-actions .health1-quick-add {
    width: 40px !important;
    min-width: 40px;
    padding-inline: 0;
    justify-content: center;
  }

  .health1-quick-add span {
    display: none;
  }

  .health1-card,
  .health1-notice {
    padding: 12px;
  }

  .health1-tabs {
    position: sticky;
    top: 0;
    z-index: 8;
    margin-inline: -2px;
    padding: 4px 2px 7px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
  }

  .health1-tab {
    min-height: 36px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .health1-history-tools {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    margin-inline: -12px;
    padding-inline: 12px;
  }

  .health1-history-tools label:first-child,
  .health1-history-count {
    grid-column: 1 / -1;
  }

  .health1-condition-detail-head {
    padding: 12px 12px 0;
  }

  .health1-condition-title {
    display: grid;
    gap: 12px;
  }

  .health1-condition-title > div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .health1-condition-title > div:last-child .btn:first-child {
    grid-column: 1 / -1;
  }

  .health1-condition-title .btn {
    width: 100%;
  }

  .health1-condition-title h2 {
    font-size: 21px;
  }

  .health1-condition-next {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  .health1-condition-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .health1-condition-side,
  .health1-condition-connection-grid {
    grid-template-columns: 1fr;
  }

  .health1-history-head-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .health1-history-head-actions .health1-link-btn {
    width: 100%;
  }

  .health1-condition-connection-group + .health1-condition-connection-group {
    border-top: 1px solid var(--border);
    border-left: 0;
    padding-top: 12px;
    padding-left: 0;
  }

  .health1-condition-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .health1-history-count {
    justify-content: flex-start;
    min-height: 24px;
  }

  .health1-dashboard-top {
    grid-template-columns: 1fr;
  }

  .health1-upcoming-card {
    grid-column: auto;
  }

  .health1-profile-card {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    min-height: 158px;
  }

  .health1-profile-ring {
    width: 82px;
  }

  .health1-profile-ring > span {
    width: 62px;
  }

  .health1-profile-ring strong {
    font-size: 21px;
  }

  .health1-profile-copy > p {
    margin-bottom: 7px;
  }

  .health1-attention-list {
    grid-template-columns: 1fr;
  }

  .health1-profile-card,
  .health1-attention-card,
  .health1-upcoming-card {
    min-height: 0;
  }

  .health1-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .health1-shortcut {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
  }

  .health1-shortcut > span {
    width: 32px;
    height: 32px;
  }

  .health1-shortcut > svg {
    display: none;
  }

  .health1-history-card.is-overview,
  .health1-areas-card.is-overview,
  .health1-dashboard-details .health1-today-card,
  .health1-dashboard-details .health1-results-card {
    min-height: 0;
    max-height: none;
  }

  .health1-history-card.is-overview .health1-timeline {
    max-height: 360px;
  }

  .health1-modal {
    align-items: end;
    padding: 0;
  }

  .health1-modal-card {
    width: 100%;
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
  }

  .health1-reader {
    align-items: stretch;
    padding: 0;
  }

  .health1-reader-card {
    height: 100vh;
    border-radius: 0;
  }

  .health1-doctor-summary-card {
    width: 100%;
    height: 100vh;
    border-radius: 0;
  }

  .health1-doctor-summary-tools {
    grid-template-columns: 1fr;
  }

  .health1-doctor-summary-text {
    padding: 14px;
    font-size: 11px;
  }

  .health1-doctor-summary-card > footer {
    display: grid;
  }

  .health1-doctor-summary-card > footer .btn {
    width: 100%;
  }

  .health1-reader-card header {
    display: grid;
  }

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

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

  .health1-result-panel-row {
    grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "include name name"
      ". value unit"
      ". ref-min ref-max";
    gap: 8px;
    align-items: end;
    padding: 10px;
  }

  .health1-result-panel-include {
    grid-area: include;
    align-self: center;
  }

  .health1-result-panel-name {
    grid-area: name;
  }

  .health1-result-panel-name strong {
    white-space: normal;
  }

  .health1-result-panel-row .is-value {
    grid-area: value;
  }

  .health1-result-panel-row .is-unit {
    grid-area: unit;
  }

  .health1-result-panel-row .is-ref-min {
    grid-area: ref-min;
  }

  .health1-result-panel-row .is-ref-max {
    grid-area: ref-max;
  }

  .health1-medication-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .health1-treatment-plan > header {
    align-items: flex-start;
  }

  .health1-treatment-plan-counts {
    max-width: 44%;
  }

  .health1-treatment-plan-row {
    grid-template-columns: 26px minmax(0, 1fr) auto;
  }

  .health1-treatment-plan-values {
    grid-column: 2 / -1;
  }

  .health1-treatment-plan-row > button {
    grid-column: 3;
    grid-row: 1;
  }

  .health1-decision-options {
    grid-template-columns: 1fr;
  }

  .health1-medication-reminders > div {
    grid-template-columns: 1fr;
  }

  .health1-medication-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .health1-medication-image {
    width: 58px;
    height: 58px;
  }

  .health1-medication-supply {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 9px 0 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .health1-medication-supply > small,
  .health1-medication-supply > strong {
    grid-column: 1;
  }

  .health1-medication-supply > span {
    grid-column: 1;
  }

  .health1-medication-supply > button {
    grid-column: 2;
    grid-row: 1 / span 3;
    justify-self: end;
    margin: 0;
  }

  .health1-treatment-control > summary {
    grid-template-columns: 26px minmax(0, 1fr) 18px;
  }

  .health1-treatment-control > summary em {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
  }

  .health1-treatment-control > summary > i {
    grid-column: 3;
    grid-row: 1;
  }

  .health1-treatment-axis {
    gap: 7px;
  }

  .health1-treatment-point strong {
    font-size: 10px;
  }

  .health1-treatment-control-note {
    display: grid;
  }

  .health1-treatment-control-note > div {
    flex-wrap: wrap;
  }

  .health1-medication-photo {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .health1-medication-photo-preview {
    width: 76px;
    height: 76px;
  }

  .health1-modal-card footer {
    display: grid;
  }

  .health1-modal-card footer > div,
  .health1-modal-card footer .btn {
    width: 100%;
  }

  .health1-card-head {
    display: grid;
    gap: 4px;
  }

  .health1-attention-card .health1-card-head,
  .health1-medication-panel > .health1-card-head {
    display: flex;
    align-items: flex-start;
  }

  .health1-attention-count {
    margin-top: 1px;
  }

  .health1-medication-panel > .health1-card-head > div {
    min-width: 0;
  }

  .health1-medication-panel > .health1-card-head .health1-link-btn {
    flex: 0 0 auto;
    width: auto;
  }

  .health1-card-head span {
    text-align: left;
  }

  .health1-hero h2 {
    font-size: 25px;
  }

  .health1-hero-metrics,
  .health1-emergency-grid,
  .health1-vax-summary {
    grid-template-columns: 1fr;
  }

  .health1-vax-ref {
    grid-template-columns: 1fr;
  }

  .health1-thread-entry-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .health1-lab-top,
  .health1-lab-foot {
    display: grid;
  }

  .health1-lab-top {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .health1-lab-ref,
  .health1-lab-foot > span:last-child {
    text-align: left;
  }

  .health1-lab-scale {
    margin-top: 10px;
  }

  .health1-timeline-item {
    grid-template-columns: 60px 36px minmax(0, 1fr);
    gap: 8px;
  }

  .health1-timeline-item:not(:last-child)::after {
    left: 86px;
  }
}

@media (max-width: 420px) {
  .health1-shortcuts {
    grid-template-columns: 1fr;
  }

  .health1-profile-card {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .health1-profile-ring {
    width: 78px;
  }

  .health1-profile-ring > span {
    width: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .health1-lab-row.is-high,
  .health1-lab-row.is-low,
  .health1-lab-row.is-pending,
  .health1-lab-card.is-high,
  .health1-lab-card.is-low,
  .health1-lab-card.is-pending {
    animation: none;
  }
}

/* WA Finanse - Stage 1 read-only analysis */
.wa-analysis-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .48fr);
  gap: 16px;
  align-items: stretch;
  padding: 20px;
  border: 1px solid color-mix(in srgb, #7657df 17%, var(--border));
  border-radius: 8px;
  background: linear-gradient(112deg, color-mix(in srgb, #f4efff 74%, var(--surface)), var(--surface) 64%, color-mix(in srgb, #e4f7f1 46%, var(--surface)));
}

.wa-analysis-hero > div:first-child {
  display: grid;
  align-content: center;
}

.wa-analysis-hero > div:first-child > span {
  color: #6248ca;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
}

.wa-analysis-hero h2 {
  margin: 7px 0 6px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.12;
}

.wa-analysis-hero p {
  margin: 0;
  color: var(--ink2);
  font-size: 13px;
}

.wa-analysis-hero-result {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, #7657df 18%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 88%, white);
}

.wa-analysis-hero-result > span,
.wa-analysis-hero-result small,
.wa-analysis-metric > span,
.wa-analysis-metric small,
.wa-analysis-cash > div > span {
  color: var(--ink2);
  font-size: 11px;
}

.wa-analysis-hero-result strong {
  color: #5d44ca;
  font-size: 30px;
  line-height: 1.1;
}

.wa-analysis-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.wa-analysis-metric {
  display: grid;
  gap: 5px;
  min-height: 116px;
  padding: 15px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--wa-analysis-accent);
  border-radius: 8px;
  background: var(--surface);
}

.wa-analysis-metric strong {
  align-self: center;
  color: var(--ink);
  font-size: 23px;
  line-height: 1.05;
}

.wa-analysis-metric.is-mint { --wa-analysis-accent: #10a88b; }
.wa-analysis-metric.is-sky { --wa-analysis-accent: #3478d1; }
.wa-analysis-metric.is-violet { --wa-analysis-accent: #7657df; }
.wa-analysis-metric.is-green { --wa-analysis-accent: #159b63; }
.wa-analysis-metric.is-coral { --wa-analysis-accent: #ef6357; }

.wa-analysis-decision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 14px;
}

.wa-analysis-insights,
.wa-analysis-compare,
.wa-analysis-trend,
.wa-analysis-list-card,
.wa-analysis-cash,
.wa-analysis-empty {
  padding: 18px;
  border-radius: 8px;
}

.wa-analysis-insight-list {
  display: grid;
  gap: 8px;
}

.wa-analysis-insight-list article {
  padding: 10px 12px;
  border-left: 3px solid #8c79e9;
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, #7657df 5%, var(--surface));
}

.wa-analysis-insight-list article.is-positive {
  border-left-color: #10a88b;
  background: color-mix(in srgb, #10a88b 6%, var(--surface));
}

.wa-analysis-insight-list article.is-warning {
  border-left-color: #ef7755;
  background: color-mix(in srgb, #ef7755 7%, var(--surface));
}

.wa-analysis-insight-list strong {
  color: var(--ink);
  font-size: 13px;
}

.wa-analysis-insight-list p {
  margin: 3px 0 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.45;
}

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

.wa-analysis-compare-grid > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-muted) 62%, var(--surface));
}

.wa-analysis-compare-grid span,
.wa-analysis-compare-grid strong {
  font-size: 11px;
}

.wa-analysis-compare-grid span { color: var(--ink2); }
.wa-analysis-compare-grid strong { color: var(--ink); font-size: 15px; }
.wa-analysis-trend-table { display: grid; gap: 2px; }

.wa-analysis-trend-row {
  display: grid;
  grid-template-columns: 64px 90px minmax(170px, 1fr) 110px 72px;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 6px 8px;
  border-radius: 5px;
  color: var(--ink2);
  font-size: 12px;
}

.wa-analysis-trend-row:not(.is-head):nth-child(even) { background: color-mix(in srgb, var(--surface-muted) 48%, var(--surface)); }
.wa-analysis-trend-row.is-head { min-height: 28px; color: var(--ink3); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.wa-analysis-trend-row strong { color: var(--ink); }
.wa-analysis-value-bar { position: relative; display: grid; min-height: 19px; align-items: center; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, #10a88b 8%, var(--surface-muted)); }
.wa-analysis-value-bar b { width: var(--wa-analysis-bar); height: 100%; border-radius: inherit; background: color-mix(in srgb, #10a88b 46%, transparent); }
.wa-analysis-value-bar em { position: absolute; right: 7px; color: var(--ink); font-size: 11px; font-style: normal; font-weight: 760; }
.wa-analysis-trend-row .is-positive,
.wa-analysis-compare-grid .is-positive { color: #078260; }
.wa-analysis-trend-row .is-negative,
.wa-analysis-compare-grid .is-negative { color: #d84848; }

.wa-analysis-list { display: grid; gap: 5px; }

.wa-analysis-channel-row,
.wa-analysis-cost-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 4px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.wa-analysis-channel-row:last-child,
.wa-analysis-cost-row:last-child { border-bottom: 0; }
.wa-analysis-channel-row > span:not(.wa-analysis-brand-mark),
.wa-analysis-cost-row > span { overflow: hidden; color: var(--ink2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.wa-analysis-channel-row strong,
.wa-analysis-cost-row strong { color: var(--ink); font-size: 12px; }
.wa-analysis-channel-row small,
.wa-analysis-cost-row small { grid-column: 2 / -1; margin-top: -5px; color: var(--ink3); font-size: 10px; }

.wa-analysis-cost-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  row-gap: 2px;
  padding: 7px 2px;
}

.wa-analysis-cost-row > span {
  overflow: visible;
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
}

.wa-analysis-cost-row small {
  grid-column: 1 / -1;
  margin-top: -2px;
}

.wa-analysis-brand-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  overflow: hidden;
  border-radius: 6px;
  background: color-mix(in srgb, #7657df 10%, var(--surface-muted));
  color: var(--ink);
  font-size: 9px;
  font-weight: 800;
}

.wa-analysis-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.wa-analysis-cash { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-color: color-mix(in srgb, #3478d1 17%, var(--border)); background: color-mix(in srgb, #eaf2ff 45%, var(--surface)); }
.wa-analysis-cash h2 { margin: 4px 0; color: var(--ink); font-size: 18px; }
.wa-analysis-cash p { margin: 0; color: var(--ink2); font-size: 12px; }
.wa-analysis-empty { display: grid; justify-items: start; gap: 9px; max-width: 720px; }
.wa-analysis-empty > span { color: #6248ca; font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.wa-analysis-empty h2 { margin: 0; color: var(--ink); }
.wa-analysis-empty p { margin: 0; color: var(--ink2); line-height: 1.5; }

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

@media (max-width: 680px) {
  .wa-analysis-hero { grid-template-columns: 1fr; padding: 16px; }
  .wa-analysis-hero h2 { font-size: 21px; }
  .wa-analysis-hero-result strong { font-size: 26px; }
  .wa-analysis-metric { min-height: 104px; padding: 13px; }
  .wa-analysis-metric strong { font-size: 20px; }
  .wa-analysis-trend { overflow: hidden; }
  .wa-analysis-trend-table { overflow-x: auto; padding-bottom: 2px; }
  .wa-analysis-trend-row { min-width: 520px; }
  .wa-analysis-cash { align-items: flex-start; flex-direction: column; }
}

/* Wine Apartments - Rezerwacje source module */
.wa-res-page {
  container: wa-res / inline-size;
  display: grid;
  gap: 18px;
}

.wa-res-source {
  align-items: center;
  background:
    radial-gradient(circle at 88% 28%, rgba(139,92,246,.13), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, #f7f5ff 72%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(17,24,39,.07);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 18px;
}

.wa-res-source h2 {
  color: var(--ink);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  margin: 0 0 5px;
}

.wa-res-source p {
  color: var(--ink2);
  line-height: 1.45;
  margin: 0;
}

.wa-res-source-actions {
  align-items: end;
  display: grid;
  gap: 10px;
  min-width: min(100%, 260px);
}

.wa-res-health,
.wa-res-refresh {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink2);
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  gap: 8px;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  text-align: center;
}

.wa-res-health i {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.wa-res-health.is-ok i { background: #059669; }
.wa-res-health.is-loading i,
.wa-res-health.is-waiting i { background: #8b5cf6; }
.wa-res-health.is-error i { background: #dc2626; }
.wa-res-refresh.is-success { border-color: color-mix(in srgb, #059669 32%, var(--border)); color: #047857; }
.wa-res-refresh.is-error { border-color: color-mix(in srgb, #dc2626 28%, var(--border)); color: #b91c1c; }
.wa-res-refresh.is-loading { border-color: color-mix(in srgb, #8b5cf6 32%, var(--border)); color: #6d28d9; }

.wa-res-kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.wa-res-kpis article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(17,24,39,.055);
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 13px 14px;
}

.wa-res-kpis span {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.wa-res-kpis strong {
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 2.05rem);
  font-weight: 760;
  line-height: 1;
}

.wa-res-kpis small {
  color: var(--ink2);
  font-size: 12px;
}

.wa-res-filters {
  align-items: end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(17,24,39,.045);
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(100px, .74fr)) minmax(140px, 1.18fr) repeat(3, minmax(100px, .8fr)) minmax(120px, .92fr);
  padding: 14px;
}

.wa-res-runs {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.wa-res-runs h2 {
  color: var(--ink);
  font-size: 18px;
  margin: 0 0 4px;
}

.wa-res-runs p {
  color: var(--ink2);
  margin: 0;
}

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

.wa-res-run-list article {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  gap: 3px;
  padding: 11px;
}

.wa-res-run-list article.is-success { border-color: color-mix(in srgb, #16a34a 26%, var(--border)); }
.wa-res-run-list article.is-failed { border-color: color-mix(in srgb, #dc2626 26%, var(--border)); }
.wa-res-run-list strong { color: var(--ink); font-size: 13px; text-transform: uppercase; }
.wa-res-run-list span,
.wa-res-run-list small { color: var(--ink2); font-size: 12px; }
.wa-res-run-list em {
  color: #b91c1c;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.wa-res-filters label {
  color: var(--ink3);
  display: grid;
  font-size: 11px;
  font-weight: 800;
  gap: 6px;
  letter-spacing: .035em;
  min-width: 0;
  text-transform: uppercase;
}

.wa-res-filters input,
.wa-res-filters select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-sizing: border-box;
  color: var(--ink);
  font: inherit;
  min-height: 42px;
  min-width: 0;
  padding: 9px 12px;
  width: 100%;
}

.wa-res-list {
  display: grid;
  gap: 9px;
}

.wa-res-row {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(17,24,39,.045);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(210px, 1.35fr) minmax(110px, .7fr) minmax(100px, .65fr) minmax(100px, .65fr) minmax(100px, .6fr) minmax(100px, .72fr) auto;
  min-height: 68px;
  padding: 11px 14px;
}

.wa-res-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wa-res-main strong {
  color: var(--ink);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-res-main span,
.wa-res-row > span {
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.35;
}

.wa-res-main small {
  color: #9a5b00;
  font-size: 11px;
  font-weight: 720;
  line-height: 1.35;
}

.wa-res-row.is-operationally-excluded {
  background: color-mix(in srgb, #fff7ed 48%, var(--surface));
  border-color: color-mix(in srgb, #d97706 30%, var(--border));
}

.wa-res-row.is-room-block {
  background: color-mix(in srgb, #fef3c7 32%, var(--surface));
  border-color: color-mix(in srgb, #b45309 28%, var(--border));
}

.wa-res-actions {
  display: flex;
  justify-content: flex-end;
}

.wa-res-pill.is-excluded {
  background: color-mix(in srgb, #fff4cc 72%, var(--surface));
  border-color: color-mix(in srgb, #d97706 34%, var(--border));
  color: #9a5b00;
}

.wa-res-pill.is-room_block {
  background: color-mix(in srgb, #fef3c7 76%, var(--surface));
  border-color: color-mix(in srgb, #b45309 30%, var(--border));
  color: #92400e;
}

.wa-res-pill {
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink2);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: center;
  min-height: 28px;
  padding: 6px 10px;
  text-align: center;
}

.wa-res-pill.is-paid,
.wa-res-pill.is-checked_in,
.wa-res-pill.is-checked_out {
  background: color-mix(in srgb, #dcfce7 70%, var(--surface));
  border-color: color-mix(in srgb, #16a34a 26%, var(--border));
  color: #047857;
}

.wa-res-pill.is-underpaid,
.wa-res-pill.is-reserved {
  background: color-mix(in srgb, #fff7ed 76%, var(--surface));
  border-color: color-mix(in srgb, #f97316 26%, var(--border));
  color: #c2410c;
}

.wa-res-pill.is-unpaid,
.wa-res-pill.is-cancelled,
.wa-res-pill.is-no_show,
.wa-res-pill.is-inactive {
  background: color-mix(in srgb, #fee2e2 68%, var(--surface));
  border-color: color-mix(in srgb, #dc2626 24%, var(--border));
  color: #b91c1c;
}

.wa-res-pill.is-zero,
.wa-res-pill.is-unknown {
  background: color-mix(in srgb, #f3f4f6 72%, var(--surface));
  color: var(--ink3);
}

.wa-res-empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--ink2);
  padding: 24px;
  text-align: center;
}

.wa-res-operation-toast {
  align-items: center;
  background: color-mix(in srgb, #ecfdf5 94%, var(--surface));
  border: 1px solid color-mix(in srgb, #16a34a 34%, var(--border));
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
  color: #047857;
  display: flex;
  font-size: 13px;
  font-weight: 750;
  gap: 9px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  position: fixed;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 1001;
}

.wa-res-operation-toast::before {
  align-items: center;
  background: #16a34a;
  border-radius: 50%;
  color: #fff;
  content: "✓";
  display: inline-flex;
  flex: 0 0 18px;
  font-size: 12px;
  font-weight: 850;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.wa-res-operation-backdrop {
  align-items: center;
  background: color-mix(in srgb, #0f172a 48%, transparent);
  backdrop-filter: blur(5px);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 1100;
}

.wa-res-operation-modal {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
  max-width: 520px;
  overflow: hidden;
  width: 100%;
}

.wa-res-operation-modal header,
.wa-res-operation-modal footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 16px 18px;
}

.wa-res-operation-modal header { border-bottom: 1px solid var(--border); }
.wa-res-operation-modal footer { border-top: 1px solid var(--border); gap: 9px; justify-content: flex-end; }
.wa-res-operation-modal header > div { display: grid; gap: 3px; }
.wa-res-operation-modal header span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.wa-res-operation-modal h2 { color: var(--ink); font-size: 18px; margin: 0; }
.wa-res-operation-close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  font-size: 24px;
  height: 32px;
  justify-content: center;
  line-height: 1;
  width: 32px;
}
.wa-res-operation-close:hover { background: var(--surface2); color: var(--ink); }
.wa-res-operation-close:disabled { cursor: wait; opacity: .55; }
.wa-res-operation-body { display: grid; gap: 14px; padding: 18px; }
.wa-res-operation-body > p { color: var(--ink2); font-size: 13px; line-height: 1.5; margin: 0; }
.wa-res-operation-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.wa-res-operation-summary div {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
}
.wa-res-operation-summary dt {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wa-res-operation-summary dd { color: var(--ink); font-size: 12px; font-weight: 720; margin: 0; overflow-wrap: anywhere; }
.wa-res-operation-field { color: var(--ink); display: grid; font-size: 12px; font-weight: 750; gap: 7px; }
.wa-res-operation-field textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  line-height: 1.45;
  padding: 10px 11px;
  resize: vertical;
}
.wa-res-operation-field textarea:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 22%, transparent); outline-offset: 1px; }
.wa-res-operation-field small { color: var(--ink3); font-size: 11px; font-weight: 500; line-height: 1.4; }
.wa-res-operation-note { background: color-mix(in srgb, #2563eb 7%, var(--surface)); border: 1px solid color-mix(in srgb, #2563eb 22%, var(--border)); border-radius: 10px; padding: 10px 11px; }
.wa-res-operation-error { background: color-mix(in srgb, #dc2626 10%, var(--surface)); border: 1px solid color-mix(in srgb, #dc2626 28%, var(--border)); border-radius: 10px; color: #b91c1c !important; font-weight: 700; padding: 10px 11px; }
.wa-res-operation-submit { min-width: 178px; }

@media (max-width: 560px) {
  .wa-res-operation-toast {
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 14px;
    max-width: none;
    right: 14px;
  }
  .wa-res-operation-backdrop { padding: 14px; }
  .wa-res-operation-modal { max-height: calc(100dvh - 28px); overflow-y: auto; }
  .wa-res-operation-summary { grid-template-columns: 1fr; }
  .wa-res-operation-modal footer { flex-direction: column-reverse; }
  .wa-res-operation-modal footer .btn { width: 100%; }
}

/* Wine access management. Server data is loaded after the settings shell renders. */
.wa-access-draft {
  display: grid;
  gap: 16px;
}

.wa-access-draft-head,
.wa-access-draft-section-head,
.wa-access-draft-module,
.wa-access-draft-metrics,
.wa-access-draft-grid {
  display: grid;
}

.wa-access-draft-head {
  align-items: start;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.wa-access-draft-head .section-title,
.wa-access-draft-section-head h3,
.wa-access-draft-section-head p {
  margin: 0;
}

.wa-access-draft-kicker {
  color: var(--accent);
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.wa-access-draft-notice {
  background: color-mix(in srgb, #f59e0b 10%, var(--surface));
  border: 1px solid color-mix(in srgb, #f59e0b 27%, var(--border));
  border-radius: 8px;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
}

.wa-access-draft-notice strong { color: var(--ink); }

.wa-access-draft-metrics {
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wa-access-draft-metrics article {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 12px;
}

.wa-access-draft-metrics strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.wa-access-draft-metrics span,
.wa-access-draft-section-head p,
.wa-access-draft-empty span {
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.45;
}

.wa-access-account-approvals {
  background: color-mix(in srgb, #f59e0b 7%, var(--surface));
  border: 1px solid color-mix(in srgb, #f59e0b 26%, var(--border));
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.wa-access-account-approval-list {
  display: grid;
  gap: 8px;
}

.wa-access-account-approval {
  align-items: center;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, #f59e0b 20%, var(--border));
  border-radius: 7px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px;
}

.wa-access-account-approval > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.wa-access-account-approval strong {
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.wa-access-account-approval span {
  color: var(--ink2);
  font-size: 11px;
}

.wa-access-draft-grid {
  align-items: start;
  gap: 14px;
  grid-template-columns: minmax(280px, .95fr) minmax(0, 1.35fr);
}

.wa-access-draft-invite,
.wa-access-draft-list {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.wa-access-draft-section-head {
  align-items: start;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.wa-access-draft-section-head h3 {
  color: var(--ink);
  font-size: 14px;
}

.wa-access-draft-chip,
.wa-access-draft-module em {
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  padding: 5px 7px;
}

.wa-access-draft-chip {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
}

.wa-access-draft-module-picker {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.wa-access-draft-module-picker summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
  min-height: 42px;
  padding: 10px 12px;
}

.wa-access-draft-module-picker summary::-webkit-details-marker { display: none; }

.wa-access-draft-module-picker summary span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.wa-access-draft-module-picker summary small {
  color: var(--ink2);
  font-size: 11px;
}

.wa-access-draft-module-picker summary::after {
  color: var(--ink2);
  content: "⌄";
  font-size: 16px;
  line-height: 1;
}

.wa-access-draft-module-picker[open] summary::after { transform: rotate(180deg); }

.wa-access-draft-modules {
  border-top: 1px solid var(--border);
  display: grid;
  max-height: 360px;
  overflow: auto;
  padding: 0 12px;
}

.wa-access-draft-module {
  align-items: center;
  border-bottom: 1px solid var(--border);
  gap: 9px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 38px;
  padding: 7px 0;
}

.wa-access-draft-module input { accent-color: var(--accent); }
.wa-access-draft-module span { color: var(--ink); font-size: 12px; }
.wa-access-draft-module em.is-view { background: color-mix(in srgb, #2563eb 10%, var(--surface)); color: #1d4ed8; }
.wa-access-draft-module em.is-edit { background: color-mix(in srgb, #16a34a 10%, var(--surface)); color: #15803d; }

.wa-access-draft-module select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  min-height: 30px;
  padding: 4px 7px;
}

.wa-access-draft-module select:disabled {
  color: var(--ink3);
  cursor: not-allowed;
}

.wa-access-form-error {
  background: color-mix(in srgb, #ef4444 10%, var(--surface));
  border: 1px solid color-mix(in srgb, #ef4444 24%, var(--border));
  border-radius: 6px;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  padding: 9px 10px;
}

.wa-access-member-list {
  display: grid;
  gap: 9px;
}

.wa-access-member {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.wa-access-member-main,
.wa-access-member-footer,
.wa-access-member-actions,
.wa-access-member-scopes {
  align-items: center;
  display: flex;
  gap: 8px;
}

.wa-access-member-main,
.wa-access-member-footer {
  justify-content: space-between;
}

.wa-access-member-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.wa-access-member-title strong {
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.wa-access-member-title span,
.wa-access-member-footer > span:first-child {
  color: var(--ink2);
  font-size: 11px;
  line-height: 1.4;
}

.wa-access-member-status,
.wa-access-member-scope {
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  padding: 5px 7px;
  white-space: nowrap;
}

.wa-access-member-status.is-active {
  background: color-mix(in srgb, #16a34a 12%, var(--surface));
  color: #15803d;
}

.wa-access-member-status.is-pending {
  background: color-mix(in srgb, #d97706 12%, var(--surface));
  color: #a16207;
}

.wa-access-member-status.is-failed,
.wa-access-member-status.is-revoked {
  background: color-mix(in srgb, #ef4444 10%, var(--surface));
  color: #b91c1c;
}

.wa-access-member-scopes { flex-wrap: wrap; }

.wa-access-member-scope {
  background: color-mix(in srgb, #2563eb 9%, var(--surface));
  color: #1d4ed8;
}

.wa-access-member-scope.is-edit {
  background: color-mix(in srgb, #16a34a 10%, var(--surface));
  color: #15803d;
}

.wa-access-member-scope em {
  font-style: normal;
  font-weight: 600;
  opacity: .8;
}

.wa-access-revoke { color: #b91c1c; }

.wa-access-draft-empty {
  align-content: center;
  background: var(--surface);
  border: 1px dashed color-mix(in srgb, var(--border) 82%, var(--ink3));
  border-radius: 8px;
  display: grid;
  gap: 5px;
  min-height: 212px;
  padding: 20px;
  text-align: center;
}

.wa-access-draft-empty strong { color: var(--ink); font-size: 14px; }

.wa-activity-panel {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

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

.wa-activity-row {
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
}

.wa-activity-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.wa-activity-row > div:last-child {
  justify-items: end;
}

.wa-activity-row strong {
  color: var(--ink);
  font-size: 13px;
}

.wa-activity-row span,
.wa-activity-row time {
  color: var(--ink2);
  font-size: 11px;
}

.wa-activity-row em {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-radius: 999px;
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  padding: 5px 7px;
}

@media (max-width: 760px) {
  .wa-access-draft-head,
  .wa-access-draft-grid { grid-template-columns: 1fr; }

  .wa-access-account-approval {
    align-items: stretch;
    flex-direction: column;
  }

  .wa-access-account-approval .btn { width: 100%; }

  .wa-access-draft-head > .btn { width: 100%; }
  .wa-access-draft-metrics { grid-template-columns: 1fr; }
  .wa-access-draft-empty { min-height: 130px; }
  .wa-access-member-main,
  .wa-access-member-footer { align-items: flex-start; flex-direction: column; }
  .wa-access-member-actions { align-items: stretch; flex-wrap: wrap; width: 100%; }
  .wa-access-member-actions .btn { flex: 1 1 auto; }
  .wa-activity-row {
    align-items: start;
    grid-template-columns: 1fr;
  }
  .wa-activity-row > div:last-child { justify-items: start; }
}

@media (max-width: 1100px) {
  .wa-res-page { gap: 12px; }

  .wa-res-source {
    gap: 12px;
    padding: 14px;
  }

  .wa-res-source h2 {
    font-size: 1.15rem;
    margin-bottom: 3px;
  }

  .wa-res-source p {
    font-size: 13px;
    line-height: 1.35;
  }

  .wa-res-health {
    flex: 0 0 auto;
    font-size: 11px;
    min-height: 30px;
    padding: 6px 9px;
  }

  .wa-res-kpis {
    gap: 8px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .wa-res-kpis article {
    gap: 4px;
    min-height: 78px;
    padding: 10px 11px;
  }

  .wa-res-kpis span { font-size: 10px; }
  .wa-res-kpis strong { font-size: clamp(1.15rem, 2.25vw, 1.55rem); }
  .wa-res-kpis small {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wa-res-row {
    grid-template-columns: minmax(220px, 1.25fr) repeat(2, minmax(120px, .7fr));
  }

}

@container wa-res (max-width: 940px) {
  .wa-res-filters {
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .wa-res-filters label:nth-child(3) { grid-column: span 2; }
}

@container wa-res (max-width: 660px) {
  .wa-res-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-res-filters label:nth-child(3) { grid-column: span 2; }
}

@container wa-res (max-width: 430px) {
  .wa-res-filters,
  .wa-res-filters label:nth-child(3) { grid-column: auto; grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .wa-res-source {
    align-items: stretch;
    flex-direction: column;
  }

  .wa-res-source-actions {
    min-width: 0;
  }

  .wa-res-kpis,
  .wa-res-run-list,
  .wa-res-row {
    grid-template-columns: 1fr;
  }

  .wa-res-row {
    align-items: start;
  }

  .wa-res-actions,
  .wa-res-actions .btn { width: 100%; }
}

/* Final compact-phone auth guard. Kept last so legacy auth polish cannot
   reintroduce a fixed-width card after the responsive layout rules. */
@media (max-width: 540px) {
  .fh-auth-gate {
    align-items: start;
    box-sizing: border-box;
    max-width: 100vw;
    overflow-x: hidden;
    padding: 12px !important;
  }

  .fh-auth-shell {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    padding: 0 !important;
    width: calc(100vw - 24px) !important;
  }

  .fh-auth-card {
    box-sizing: border-box;
    min-width: 0 !important;
    padding: 22px 20px !important;
    width: 100% !important;
  }

  .fh-auth-card-logo,
  .fh-auth-form,
  .fh-auth-form label {
    min-width: 0;
    width: 100%;
  }

  .fh-auth-card-logo .wa-brand-text {
    font-size: clamp(2rem, 12vw, 2.8rem) !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .fh-auth-google,
  .fh-auth-form input,
  .fh-auth-actions button {
    box-sizing: border-box;
    min-width: 0;
    width: 100% !important;
  }
}

/* This non-media ceiling covers mobile browsers whose visible viewport is
   smaller than their reported layout viewport while browser chrome is open. */
.fh-auth-gate .fh-auth-shell {
  box-sizing: border-box;
  max-width: calc(100vw - 24px) !important;
  min-width: 0 !important;
}

.fh-auth-gate .fh-auth-card {
  box-sizing: border-box;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Wine Operations final ordering: legacy panel rules above must not reintroduce
   the oversized purple source and reservation surfaces. */
/* Gentle pink actions must come after the legacy global active-state rules. */
html[data-theme='wine-operations'] {
  --wa-cta-bg: var(--layf-accent-gradient-soft);
  --wa-cta-bg-hover: linear-gradient(135deg, rgba(251,146,60,.14) 0%, rgba(236,72,153,.14) 35%, rgba(192,132,252,.17) 70%, rgba(124,58,237,.17) 100%);
  --wa-cta-border: var(--layf-accent-border);
  --wa-cta-border-hover: rgba(192,132,252,.46);
  --wa-cta-text: var(--ink);
  --wa-cta-focus: #c084fc;
  --wa-active-bg: linear-gradient(135deg, rgba(236, 72, 153, .1), rgba(192, 132, 252, .12));
  --wa-active-border: rgba(224, 105, 157, .28);
}

html[data-theme='wine-operations'][data-dark='true'] {
  --wa-active-bg: linear-gradient(135deg, rgba(244, 114, 182, .18), rgba(167, 139, 250, .18));
  --wa-active-border: rgba(244, 114, 182, .38);
}

html[data-theme='wine-operations'] :is(
  .btn-primary,
  .fh-dialog-btn--primary,
  .planner-qm-btn-primary,
  .planner-warm-primary,
  .planner-warm-today-btn,
  .pet-action-btn--primary
) {
  background: var(--wa-cta-bg) !important;
  border-color: var(--wa-cta-border) !important;
  color: var(--wa-cta-text) !important;
  box-shadow: none !important;
}

html[data-theme='wine-operations'] :is(
  .btn-primary,
  .fh-dialog-btn--primary,
  .planner-qm-btn-primary,
  .planner-warm-primary,
  .planner-warm-today-btn,
  .pet-action-btn--primary
):hover {
  background: var(--wa-cta-bg-hover) !important;
  border-color: var(--wa-cta-border-hover) !important;
  color: var(--wa-cta-text) !important;
}

html[data-theme='wine-operations'] :is(
  .btn-primary,
  .fh-dialog-btn--primary,
  .planner-qm-btn-primary,
  .planner-warm-primary,
  .planner-warm-today-btn,
  .pet-action-btn--primary
):focus-visible {
  outline: 3px solid var(--wa-cta-focus);
  outline-offset: 2px;
}

html[data-theme='wine-operations'] :is(
  .nav-item.is-active,
  .nav-item.active,
  [data-nav].is-active,
  [data-nav].active,
  .bottom-nav .bn-tab.is-active,
  .bottom-nav .bn-tab.active,
  .btn.is-active,
  .btn-outline.is-active,
  .settings-share-pills .btn.is-active,
  .settings-page [data-lang].is-active,
  .settings-page [data-lang][aria-pressed='true']
) {
  background: var(--wa-active-bg) !important;
  border-color: var(--wa-active-border) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

html[data-theme='wine-operations'] :is(
  .nav-item.is-active,
  .nav-item.active,
  [data-nav].is-active,
  [data-nav].active
) :not(.nav-icon):not(.nav-icon *) {
  color: var(--ink) !important;
}

html[data-theme='wine-operations'] .topbar-logo.is-active,
html[data-theme='wine-operations'] .topbar-logo.active {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--ink) !important;
}

html[data-theme='wine-operations'] .topbar .topbar-logo[data-nav].is-active,
html[data-theme='wine-operations'] .topbar .topbar-logo[data-nav].active,
html[data-theme='wine-operations'] .topbar .topbar-logo[data-shared-state] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme='wine-operations'] .topbar .topbar-logo .nav-shared-indicator {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--accent) !important;
  margin-left: 4px;
  padding: 0;
}

/* Wine Operations navigation follows the compact Layf sidebar rhythm. */
html[data-theme='wine-operations'] {
  --sidebar-w: 232px;
}

html[data-theme='wine-operations'] .sidebar {
  padding: 8px 8px 20px;
}

html[data-theme='wine-operations'] .sidebar-section-label {
  padding: 11px 10px 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

html[data-theme='wine-operations'] .nav-item {
  min-height: 34px;
  margin: 1px 0;
  padding: 6px 10px;
  gap: 9px;
  border-radius: 10px;
  color: var(--ink2) !important;
  font-family: var(--sans);
  font-size: 13.5px !important;
  font-weight: 400;
  line-height: 1.35;
}

html[data-theme='wine-operations'] .nav-item.is-active,
html[data-theme='wine-operations'] .nav-item.active {
  font-weight: 600;
}

html[data-theme='wine-operations'] .nav-icon {
  width: 22px;
}

/* Cleaning Schedule has its own tab controls, so keep their selected state
   aligned with the same restrained Layf action treatment. */
html[data-theme='wine-operations'] :is(
  .cs-tab--active,
  .cs-subtab--active,
  .cs-ptab--active
) {
  background: var(--wa-cta-bg) !important;
  border-color: var(--wa-cta-border) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

html[data-theme='wine-operations'] :is(
  .cs-tab--active,
  .cs-subtab--active,
  .cs-ptab--active
):hover {
  background: var(--wa-cta-bg-hover) !important;
  border-color: var(--wa-cta-border-hover) !important;
}

.wa-dashboard-page .module-page-content { gap: 14px; }
.wa-dash-today-strip {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.15fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 96px;
  padding: 17px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 8px;
  color: #fbf8ef;
  background: linear-gradient(90deg, rgba(31, 35, 31, .94), rgba(31, 35, 31, .78)), url('/assets/wa-dashboard-hero-2026.png') center 54% / cover;
  box-shadow: var(--shadow-sm);
}
.wa-dash-today-main,
.wa-dash-today-status,
.wa-dash-today-count { min-width: 0; }
.wa-dash-today-main > span,
.wa-dash-today-main > small,
.wa-dash-today-count span,
.wa-dash-today-status small { display: block; color: rgba(251, 248, 239, .7); font-size: 11px; line-height: 1.35; }
.wa-dash-today-main > span,
.wa-dash-today-count span { margin-bottom: 3px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.wa-dash-today-main > strong { display: block; margin-bottom: 3px; font-size: 22px; line-height: 1.1; }
.wa-dash-today-status { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-left: 1px solid rgba(251, 248, 239, .25); }
.wa-dash-today-status i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #70c495; }
.wa-dash-today-status i.is-warn { background: #e5b36c; }
.wa-dash-today-status strong { display: block; font-size: 13px; line-height: 1.3; }
.wa-dash-today-count { min-width: 92px; padding-left: 18px; border-left: 1px solid rgba(251, 248, 239, .25); text-align: right; }
.wa-dash-today-count strong { display: block; font-size: 34px; line-height: .95; }
.wa-dash-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wa-dash-metric { min-height: 76px; padding: 11px 13px; border-radius: 7px; box-shadow: none; }
.wa-dash-metric strong { font-size: clamp(21px, 2vw, 29px); }
.wa-dash-metric.is-revenue,
.wa-dash-metric.is-info,
.wa-dash-metric.is-neutral { border-top-color: var(--accent); }
.wa-dash-priority { border-radius: 7px; box-shadow: none; }
.wa-dash-priority-list { grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); }
.wa-dash-priority-row { border-radius: 6px; background: var(--surface2); }
.wa-dash-work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.wa-dash-work-column { display: grid; gap: 9px; min-width: 0; }
.wa-dash-work-column > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 1px; }
.wa-dash-work-column > header h2 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 750; }
.wa-dash-work-column > header span { color: var(--ink2); font-size: 11px; text-align: right; }
.wa-dash-card { border-radius: 7px; box-shadow: none; }
.wa-dash-card header { padding: 12px 14px 9px; }
.wa-dash-card h2 { font-size: 15px; }
.wa-dash-card header p { font-size: 12px; }
.wa-dash-row { min-height: 47px; padding: 8px 14px; }
.wa-dash-source { padding: 5px 8px; font-size: 10px; }
.wa-dash-data-state { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.wa-dash-data-state summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 40px; padding: 0 13px; color: var(--ink); cursor: pointer; list-style: none; }
.wa-dash-data-state summary::-webkit-details-marker { display: none; }
.wa-dash-data-state summary span { font-size: 13px; font-weight: 700; }
.wa-dash-data-state summary small { color: var(--ink2); font-size: 11px; }
.wa-dash-data-state[open] summary { border-bottom: 1px solid var(--line2); }
.wa-dash-data-state .wa-dash-source-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wa-dash-data-state .wa-dash-source-list article { padding: 12px; }

.wa-res-page { gap: 12px; }
.wa-res-source { min-height: 52px; padding: 11px 14px; border-radius: 7px; background: var(--surface); box-shadow: none; }
.wa-res-source > div { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.wa-res-source > div > span { color: var(--accent); font-size: 12px; font-weight: 750; white-space: nowrap; }
.wa-res-source h2 { margin: 0; font-size: 14px; font-weight: 700; }
.wa-res-health { min-height: 28px; padding: 5px 9px; font-size: 11px; }
.wa-res-health.is-loading i,
.wa-res-health.is-waiting i { background: var(--warning); }
.wa-res-refresh.is-loading { border-color: color-mix(in srgb, var(--warning) 32%, var(--border)); color: var(--warning); }
.wa-res-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wa-res-kpis article { min-height: 76px; padding: 10px 12px; border-radius: 7px; box-shadow: none; }
.wa-res-kpis strong { font-size: clamp(20px, 2vw, 28px); }
.wa-res-filters { gap: 8px; padding: 11px 12px; border-radius: 7px; box-shadow: none; }
.wa-res-filters input,
.wa-res-filters select { min-height: 38px; border-radius: 6px; padding: 7px 9px; }
.wa-res-list { gap: 5px; }
.wa-res-row { min-height: 58px; padding: 9px 12px; border-radius: 6px; box-shadow: none; }
.wa-res-data-state { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.wa-res-data-state summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 13px; cursor: pointer; list-style: none; }
.wa-res-data-state summary::-webkit-details-marker { display: none; }
.wa-res-data-state summary > span { color: var(--ink); font-size: 13px; font-weight: 700; }
.wa-res-data-state summary > small { color: var(--ink2); font-size: 11px; text-align: right; }
.wa-res-data-state[open] summary { border-bottom: 1px solid var(--line2); }
.wa-res-data-state-body { display: grid; gap: 10px; padding: 12px 13px; }
.wa-res-data-state-body > p { margin: 0; color: var(--ink2); font-size: 12px; line-height: 1.45; }
.wa-res-data-state .wa-res-run-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.wa-res-data-state .wa-res-run-list article { padding: 8px; border-radius: 6px; }

.settings-tabs { gap: 7px; }
.settings-tab { min-height: 34px; padding-inline: 12px; border-radius: 999px; font-size: 12px; }
.settings-tab.is-active { box-shadow: none; }
.settings-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.settings-mode-choice { display: grid; gap: 3px; min-height: 64px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface2); color: var(--ink); text-align: left; cursor: pointer; }
.settings-mode-choice:hover { border-color: color-mix(in srgb, var(--accent) 46%, var(--border)); }
.settings-mode-choice.is-active { border-color: var(--accent); background: var(--accent-lt); }
.settings-mode-choice strong { font-size: 13px; }
.settings-mode-choice small { color: var(--ink2); font-size: 11px; line-height: 1.35; }
.settings-workspace .settings-backup-panel { border-radius: 7px; box-shadow: none; }

@media (max-width: 980px) {
  .wa-dash-work-grid { grid-template-columns: 1fr; }
  .wa-dash-today-strip { grid-template-columns: minmax(160px, .8fr) minmax(0, 1.2fr) auto; }
  .wa-res-data-state .wa-res-run-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .wa-dash-today-strip { grid-template-columns: 1fr auto; gap: 12px; min-height: 0; padding: 14px; }
  .wa-dash-today-status { grid-column: 1 / -1; padding: 9px 0 0; border-top: 1px solid rgba(251, 248, 239, .22); border-left: 0; }
  .wa-dash-today-count { padding-left: 12px; }
  .wa-dash-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-dash-work-column > header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .wa-dash-work-column > header span { text-align: left; }
  .wa-dash-data-state .wa-dash-source-list,
  .wa-res-data-state .wa-res-run-list { grid-template-columns: 1fr; }
  .wa-res-source { align-items: flex-start; gap: 8px; }
  .wa-res-source > div { align-items: flex-start; flex-direction: column; gap: 1px; }
  .wa-res-kpis { grid-template-columns: 1fr; }
  .wa-res-data-state summary { align-items: flex-start; flex-direction: column; justify-content: center; gap: 1px; padding-block: 8px; }
  .settings-mode-grid { grid-template-columns: 1fr; }
}

/* WA Finance workflow polish: period picker, close checklist and settings layout */
.wa-finance-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 560px) minmax(0, 1fr);
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.wa-finance-period-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--layf-card-radius);
  background: var(--surface);
  box-shadow: var(--layf-card-shadow);
}

.wa-finance-period-card > div:first-child,
.wa-finance-period-readout {
  display: grid;
  gap: 3px;
}

.wa-finance-period-card span,
.wa-finance-period-row label > span,
.wa-finance-period-selectors label > span,
.wa-finance-period-readout span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.wa-finance-period-card strong,
.wa-finance-period-readout strong {
  min-width: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: var(--weight-section-title);
  line-height: 1.1;
}

.wa-finance-period-row,
.wa-finance-period-selectors {
  display: flex;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.wa-finance-period-row label,
.wa-finance-period-selectors label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.wa-finance-period-row select,
.wa-finance-period-selectors select {
  min-height: 34px;
  min-width: 104px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 680;
  outline: none;
  padding: 6px 30px 6px 10px;
}

.wa-finance-period-selectors select {
  min-width: 146px;
}

.wa-finance-period-row select:focus,
.wa-finance-period-selectors select:focus {
  border-color: var(--layf-accent-border, var(--accent));
  box-shadow: 0 0 0 3px var(--layf-accent-soft-bg, var(--accent-lt));
}

.wa-period-step {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 18px;
  font-weight: 760;
  line-height: 1;
  cursor: pointer;
}

.wa-period-step:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: .48;
}

.wa-finance-nav-stack {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 0;
}

.wa-finance-switch--views {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.wa-finance-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.wa-finance-tools button {
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface2));
  color: var(--ink2);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 5px 10px;
  cursor: pointer;
}

.wa-finance-tools button.is-active {
  border-color: var(--layf-accent-border, var(--border));
  background: var(--layf-accent-gradient-soft, var(--accent-lt));
  color: var(--ink);
}

.wa-finance-month-grid--compact {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 290px);
}

.wa-close-hero--compact {
  padding: 15px 16px;
  border-radius: 14px;
}

.wa-close-actions--primary {
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  border-radius: 12px;
}

.wa-close-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -4px;
}

.wa-close-shortcuts button {
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink2);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 4px 10px;
  cursor: pointer;
}

.wa-close-shortcuts button:hover {
  border-color: var(--layf-accent-border, var(--border));
  color: var(--ink);
}

.wa-close-list--compact {
  gap: 7px;
}

.wa-close-list--compact > div {
  padding: 10px 12px;
  border-radius: 11px;
}

.wa-input-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wa-input-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wa-settings-form--modern {
  padding: 18px;
}

.wa-settings-panels {
  display: grid;
  gap: 12px;
}

.wa-settings-panels section {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
}

.wa-settings-panels h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--weight-section-title);
}

.wa-month-side--compact {
  align-content: start;
  padding: 16px;
}

.wa-month-side--compact > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.wa-month-side--compact > strong {
  color: var(--ink);
  font-size: 24px;
  font-weight: var(--weight-card-title);
  line-height: 1.1;
}

.wa-month-side--compact p {
  margin: 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1120px) {
  .wa-finance-toolbar {
    grid-template-columns: 1fr;
  }

  .wa-finance-nav-stack {
    justify-items: stretch;
  }

  .wa-finance-switch--views,
  .wa-finance-tools {
    justify-content: flex-start;
    width: 100%;
  }

  .wa-input-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-input-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .wa-finance-period-row {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .wa-finance-period-selectors {
    flex: 1 1 100%;
  }

  .wa-finance-period-selectors label,
  .wa-finance-period-selectors select {
    min-width: 0;
    width: 100%;
  }

  .wa-input-grid--two,
  .wa-input-grid--three {
    grid-template-columns: 1fr;
  }
}

.st54-shell .cs-tabs-bar {
  margin-bottom: 18px;
}

.st54-stats-bar .cs-stats-right {
  color: var(--ink3);
  font-size: .75rem;
}

.st54-body .cs-sidebar .btn {
  width: 100%;
  justify-content: center;
}

.st54-thead,
.st54-shell .cs-trow {
  grid-template-columns: minmax(150px, 1fr) 72px 58px 72px minmax(92px, .6fr) 24px;
}

.st54-workspace-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.st54-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.st54-panel-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: .98rem;
}

.st54-panel-head span {
  color: var(--ink3);
  font-size: .76rem;
}

.st54-inline-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

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

.st54-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface2);
}

.st54-row--with-actions {
  flex-wrap: wrap;
}

.st54-row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.st54-row-form {
  flex: 1 1 100%;
  grid-template-columns: 132px 150px minmax(180px, 1fr) 96px auto;
}

.st54-price-form {
  grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
}

.st54-laundry-price-form {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
}

.st54-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.st54-row strong {
  color: var(--ink);
  font-size: .88rem;
}

.st54-row span,
.st54-row small {
  color: var(--ink2);
  font-size: .76rem;
}

.st54-month-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.st54-month-summary article,
.st54-history-actions {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.st54-month-summary article {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.st54-month-summary span,
.st54-month-summary small,
.st54-history-actions span,
.st54-invoice-line span {
  color: var(--ink2);
  font-size: 12px;
}

.st54-month-summary strong {
  color: var(--ink);
  font-size: 24px;
}

.st54-history-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.st54-history-actions strong,
.st54-invoice-line strong {
  color: var(--ink);
}

.st54-invoice-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.st54-laundry-washer-row {
  margin-bottom: 0;
}

.st54-laundry-washer-row .cs-washer-card {
  gap: 14px;
  padding: 14px;
}

.st54-laundry-washer-row .cs-washer-machine {
  width: 92px;
  padding: 7px 8px 8px;
}

.st54-laundry-washer-row .cs-washer-drum {
  height: 68px;
  width: 68px;
}

.st54-laundry-washer-row .cs-washer-pieces {
  font-size: 1.28rem;
}

.st54-laundry-stock-card,
.st54-laundry-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.st54-laundry-stock-card {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.st54-laundry-stock-card div,
.st54-laundry-list div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.st54-laundry-stock-card span,
.st54-laundry-card header span,
.st54-laundry-list span,
.st54-laundry-list small {
  color: var(--ink2);
  font-size: 12px;
}

.st54-laundry-stock-card strong,
.st54-laundry-list strong {
  color: var(--ink);
  font-size: 19px;
  line-height: 1.1;
}

.st54-laundry-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, .92fr) minmax(320px, 1.08fr);
}

.st54-laundry-main-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(420px, 1.35fr) minmax(280px, .65fr);
}

.st54-laundry-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.st54-laundry-card header {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.st54-laundry-card h4 {
  color: var(--ink);
  font-size: 15px;
  margin: 0;
}

.st54-laundry-shelf-card header {
  align-items: center;
}

.st54-laundry-shelf-card header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.st54-laundry-shelf {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(248, 250, 252, .9)),
    var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px;
}

.st54-laundry-shelf-item {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82)),
    linear-gradient(135deg, rgba(124, 92, 255, .11), rgba(251, 113, 133, .05));
  border: 1px solid rgba(214, 220, 235, .9);
  border-left: 4px solid #8b5cf6;
  border-radius: 10px;
  display: grid;
  gap: 2px;
  min-height: 78px;
  padding: 10px;
}

.st54-laundry-shelf-item:nth-child(4n + 2) {
  border-left-color: #06b6d4;
}

.st54-laundry-shelf-item:nth-child(4n + 3) {
  border-left-color: #10b981;
}

.st54-laundry-shelf-item:nth-child(4n + 4) {
  border-left-color: #f59e0b;
}

.st54-laundry-shelf-item span,
.st54-laundry-shelf-note,
.st54-laundry-settings-stack p {
  color: var(--ink2);
  font-size: 12px;
}

.st54-laundry-shelf-item strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.st54-laundry-shelf-item small {
  color: var(--ink2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.st54-laundry-shelf-note {
  margin: 0;
}

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

.st54-laundry-capacity div {
  background: linear-gradient(135deg, rgba(16, 185, 129, .11), rgba(255, 255, 255, .85));
  border: 1px solid rgba(16, 185, 129, .24);
  border-radius: 12px;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
}

.st54-laundry-capacity div.is-low {
  background: linear-gradient(135deg, rgba(244, 63, 94, .11), rgba(255, 255, 255, .86));
  border-color: rgba(244, 63, 94, .24);
}

.st54-laundry-capacity span,
.st54-laundry-capacity small {
  color: var(--ink2);
  font-size: 12px;
}

.st54-laundry-capacity strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.st54-laundry-forecast {
  background: linear-gradient(135deg, rgba(124, 92, 255, .10), rgba(255, 255, 255, .88));
  border: 1px solid rgba(124, 92, 255, .22);
  border-radius: 12px;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
}

.st54-laundry-forecast.is-shortage {
  background: linear-gradient(135deg, rgba(244, 63, 94, .12), rgba(255, 255, 255, .88));
  border-color: rgba(244, 63, 94, .24);
}

.st54-laundry-forecast span,
.st54-laundry-forecast small {
  color: var(--ink2);
  font-size: 12px;
}

.st54-laundry-forecast strong {
  color: var(--ink);
  font-size: 15px;
}

.st54-laundry-settings-actions {
  display: grid;
  gap: 8px;
}

.st54-laundry-settings-modal form,
.st54-laundry-settings-stack,
.st54-laundry-settings-stack form {
  display: grid;
  gap: 12px;
}

.st54-laundry-settings-modal form > p,
.st54-laundry-settings-stack p {
  margin: 0;
}

.st54-laundry-settings-stack form {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.st54-laundry-form {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.st54-laundry-form--compact {
  gap: 6px 8px;
}

.st54-laundry-profile-form {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.st54-laundry-profile-form:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.st54-laundry-profile-form > strong,
.st54-laundry-form .btn,
.st54-laundry-form .is-wide {
  grid-column: 1 / -1;
}

.st54-laundry-form label {
  display: grid;
  gap: 3px;
}

.st54-laundry-form label span {
  color: var(--ink2);
  font-size: 11px;
  font-weight: 650;
}

.st54-laundry-compact-field {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
}

.st54-laundry-compact-field .field-input {
  min-height: 38px;
  padding-inline: 10px;
}

.st54-laundry-list {
  display: grid;
  gap: 6px;
}

.st54-laundry-list div {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 9px;
}

.st54-laundry-legacy summary {
  color: var(--ink2);
  cursor: pointer;
  font-weight: 700;
}

.st54-laundry-dirty-modal label small {
  color: var(--ink2);
  font-size: 11px;
  font-weight: 600;
}

.st54-laundry-grid--profiles {
  grid-template-columns: minmax(260px, .92fr) minmax(320px, 1.08fr);
}

.st54-period-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.st54-settlement-note {
  align-items: center;
  background: rgba(248, 250, 252, .78);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--ink2);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px 14px;
  justify-content: space-between;
  padding: 10px 12px;
}

.st54-settlement-note strong {
  color: var(--ink);
  font-weight: 750;
}

.st54-fin-page {
  display: grid;
  gap: 18px;
}

.st54-fin-kpis {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
}

.st54-fin-page .module-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.st54-fin-kpis article,
.st54-fin-split,
.st54-fin-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.st54-fin-kpis article {
  display: grid;
  align-content: center;
  border-left: 4px solid transparent;
  gap: 4px;
  min-height: 92px;
  padding: 12px 14px;
}

.st54-fin-kpis article.is-income {
  background: linear-gradient(135deg, rgba(59, 130, 246, .08), var(--surface) 62%);
  border-left-color: #3b82f6;
}

.st54-fin-kpis article.is-tax {
  background: linear-gradient(135deg, rgba(245, 158, 11, .12), var(--surface) 62%);
  border-left-color: #f59e0b;
}

.st54-fin-kpis article.is-net {
  background: linear-gradient(135deg, rgba(16, 185, 129, .11), var(--surface) 62%);
  border-left-color: #10b981;
}

.st54-fin-kpis article.is-cost {
  background: linear-gradient(135deg, rgba(244, 63, 94, .10), var(--surface) 62%);
  border-left-color: #f43f5e;
}

.st54-fin-kpis article.is-cleaning {
  background: linear-gradient(135deg, rgba(20, 184, 166, .10), var(--surface) 62%);
  border-left-color: #14b8a6;
}

.st54-fin-kpis article.is-laundry {
  background: linear-gradient(135deg, rgba(14, 165, 233, .10), var(--surface) 62%);
  border-left-color: #0ea5e9;
}

.st54-fin-kpis article.is-fixed {
  background: linear-gradient(135deg, rgba(217, 119, 6, .10), var(--surface) 62%);
  border-left-color: #d97706;
}

.st54-fin-kpis span,
.st54-fin-kpis small,
.st54-fin-panel p,
.st54-fin-cost span,
.st54-fin-cost small,
.st54-fin-line small {
  color: var(--ink2);
  font-size: 12px;
}

.st54-fin-kpis strong {
  color: var(--ink);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.05;
}

.st54-fin-kpis article.is-income strong { color: #1d4ed8; }
.st54-fin-kpis article.is-tax strong { color: #b45309; }
.st54-fin-kpis article.is-net strong { color: #047857; }
.st54-fin-kpis article.is-cost strong { color: #be123c; }
.st54-fin-kpis article.is-cleaning strong { color: #0f766e; }
.st54-fin-kpis article.is-laundry strong { color: #0369a1; }
.st54-fin-kpis article.is-fixed strong { color: #9a3412; }

.st54-fin-split {
  align-items: center;
  background: linear-gradient(135deg, rgba(16, 185, 129, .08), var(--surface) 48%, rgba(124, 58, 237, .07));
  display: grid;
  gap: 12px;
  grid-template-columns: 1.25fr repeat(2, minmax(0, 1fr)) auto;
  padding: 14px;
}

.st54-fin-split div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.st54-fin-split span {
  color: var(--ink2);
  font-size: 12px;
}

.st54-fin-split small {
  color: var(--ink2);
  font-size: 12px;
}

.st54-fin-split strong {
  color: var(--ink);
  font-size: 22px;
}

.st54-fin-split div:nth-child(2) strong {
  color: #0f766e;
}

.st54-fin-split div:nth-child(3) strong {
  color: #6d28d9;
}

.st54-fin-split-profit {
  background: rgba(236, 253, 245, .78);
  border: 1px solid rgba(16, 185, 129, .22);
  border-radius: 10px;
  box-shadow: inset 4px 0 0 rgba(16, 185, 129, .75);
  padding: 10px 12px;
}

.st54-fin-split-profit strong {
  color: #047857;
}

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

.st54-fin-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.st54-fin-panel--income {
  background: linear-gradient(180deg, rgba(16, 185, 129, .055), var(--surface) 34%);
}

.st54-fin-panel--cost,
.st54-fin-panel--costs-list {
  background: linear-gradient(180deg, rgba(244, 63, 94, .045), var(--surface) 34%);
}

.st54-fin-panel > header {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.st54-fin-panel h2 {
  color: var(--ink);
  font-size: 17px;
  margin: 0;
}

.st54-fin-panel p {
  line-height: 1.45;
  margin: 3px 0 0;
}

.st54-fin-line,
.st54-fin-cost {
  align-items: center;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 46px;
  position: relative;
  padding-top: 10px;
}

.st54-fin-line i {
  background: rgba(16, 185, 129, .18);
  border-radius: 999px;
  bottom: 0;
  display: block;
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.st54-fin-line i::after {
  background: #10b981;
  border-radius: inherit;
  content: "";
  display: block;
  height: 100%;
  width: var(--st54-share, 0%);
}

.st54-fin-panel--cost .st54-fin-line i {
  background: rgba(244, 63, 94, .15);
}

.st54-fin-panel--cost .st54-fin-line i::after {
  background: #f43f5e;
}

.st54-fin-line span,
.st54-fin-cost strong,
.st54-fin-cost b,
.st54-fin-line b {
  color: var(--ink);
}

.st54-fin-costs {
  display: grid;
  gap: 0;
}

.st54-fin-cost-summary {
  background: linear-gradient(135deg, rgba(244, 63, 94, .05), rgba(245, 158, 11, .04));
  border: 1px solid rgba(244, 63, 94, .13);
  border-radius: 12px;
  display: grid;
  margin-top: 12px;
  overflow: hidden;
}

.st54-fin-cost-summary-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 14px;
}

.st54-fin-cost-summary-head {
  align-items: center;
  background: rgba(255, 255, 255, .64);
  border-bottom: 1px solid rgba(244, 63, 94, .12);
  border-radius: 0;
  border-width: 0;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  font-weight: 750;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 14px;
  text-align: left;
  width: 100%;
}

.st54-fin-cost-summary:not(.is-open) .st54-fin-cost-summary-head {
  border-bottom: 0;
}

.st54-fin-cost-summary-head span {
  display: grid;
  gap: 2px;
}

.st54-fin-cost-summary-head small {
  color: var(--ink2);
  font-size: 11px;
  font-weight: 500;
}

.st54-fin-cost-summary-row {
  border-top: 1px solid rgba(15, 23, 42, .06);
}

.st54-fin-cost-summary-row:first-of-type {
  border-top: 0;
}

.st54-fin-cost-summary-row span {
  color: var(--ink);
  display: grid;
  gap: 2px;
  min-width: 0;
}

.st54-fin-cost-summary-row small {
  color: var(--ink2);
  font-size: 11px;
}

.st54-fin-cost-summary b {
  color: #be123c;
  white-space: nowrap;
}

.st54-fin-cost-adjust-btn {
  justify-self: start;
  margin: 10px 14px 12px;
}

.st54-fin-cost > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.st54-fin-cost > div:last-child {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.st54-fin-cost b {
  background: rgba(244, 63, 94, .08);
  border: 1px solid rgba(244, 63, 94, .16);
  border-radius: 999px;
  color: #be123c;
  padding: 6px 10px;
}

.st54-fin-empty {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 14px;
}

.st54-fin-backdrop {
  align-items: center;
  background: rgba(15, 23, 42, .28);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 10000;
}

.st54-fin-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
  display: grid;
  max-width: 620px;
  overflow: hidden;
  width: min(620px, 100%);
}

.st54-fin-modal header,
.st54-fin-modal footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.st54-fin-modal header {
  border-bottom: 1px solid var(--border);
  padding: 16px 18px;
}

.st54-fin-modal header h2 {
  color: var(--ink);
  font-size: 19px;
  margin: 0;
}

.st54-fin-modal header button {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink2);
  cursor: pointer;
  font-size: 22px;
  height: 38px;
  line-height: 1;
  width: 38px;
}

.st54-fin-modal form {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 18px;
}

.st54-fin-modal-subtitle {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  grid-column: 1 / -1;
  letter-spacing: .02em;
  margin-top: 4px;
  text-transform: uppercase;
}

.st54-fin-modal label {
  color: var(--ink2);
  display: grid;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
}

.st54-fin-modal label.is-wide,
.st54-fin-modal p,
.st54-fin-modal footer {
  grid-column: 1 / -1;
}

.st54-fin-modal p {
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.st54-fin-modal footer {
  border-top: 1px solid var(--border);
  gap: 8px;
  justify-content: flex-end;
  margin: 4px -18px -18px;
  padding: 14px 18px;
}

.wa-investments-page {
  display: grid;
  gap: 18px;
}

.wa-inv-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wa-inv-summary article,
.wa-inv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 5%, transparent);
}

.wa-inv-summary article {
  border-radius: 14px;
  display: grid;
  gap: 3px;
  min-height: 82px;
  padding: 16px;
}

.wa-inv-summary strong {
  color: var(--ink);
  font-size: 25px;
  font-weight: 650;
  line-height: 1;
}

.wa-inv-summary span {
  color: var(--ink2);
  font-size: 13px;
}

.wa-inv-list {
  min-width: 0;
}

.wa-inv-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.wa-inv-card {
  appearance: none;
  border-radius: 14px;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.wa-inv-card:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--accent) 10%, transparent);
  transform: translateY(-1px);
}

.wa-inv-card-photo,
.wa-inv-detail-cover,
.wa-inv-gallery-item,
.wa-inv-form-photo {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-lt) 55%, var(--surface)), color-mix(in srgb, #f59e0b 18%, var(--surface)));
  display: block;
  overflow: hidden;
}

.wa-inv-card-photo {
  aspect-ratio: 16 / 10;
}

.wa-inv-card-photo img,
.wa-inv-detail-cover img,
.wa-inv-gallery-item img,
.wa-inv-form-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.wa-inv-photo-empty {
  align-items: center;
  color: color-mix(in srgb, var(--accent) 70%, var(--ink2));
  display: flex;
  font-size: 34px;
  font-weight: 300;
  height: 100%;
  justify-content: center;
  min-height: 132px;
}

.wa-inv-card-body {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.wa-inv-card-body strong,
.wa-inv-detail-head h2 {
  color: var(--ink);
  font-weight: 650;
  letter-spacing: 0;
  margin: 0;
}

.wa-inv-card-body strong {
  font-size: 16px;
  line-height: 1.25;
}

.wa-inv-card-body small {
  color: var(--ink2);
  font-size: 12px;
}

.wa-inv-card-meta {
  align-items: center;
  color: var(--ink2);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.wa-inv-card-meta b {
  color: var(--ink);
  font-size: 13px;
}

.wa-inv-card-meta i {
  font-size: 12px;
  font-style: normal;
}

.wa-inv-status {
  align-self: start;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 999px;
  color: var(--accent);
  display: inline-flex;
  font-size: 11px;
  font-weight: 750;
  justify-self: start;
  padding: 4px 8px;
}

.wa-inv-status.is-in_progress {
  background: color-mix(in srgb, #14b8a6 14%, var(--surface));
  border-color: color-mix(in srgb, #14b8a6 38%, var(--border));
  color: color-mix(in srgb, #14b8a6 82%, var(--ink));
}

.wa-inv-status.is-done {
  background: color-mix(in srgb, #22c55e 13%, var(--surface));
  border-color: color-mix(in srgb, #22c55e 38%, var(--border));
  color: color-mix(in srgb, #16a34a 82%, var(--ink));
}

.wa-inv-status.is-on_hold {
  background: color-mix(in srgb, #f97316 14%, var(--surface));
  border-color: color-mix(in srgb, #f97316 36%, var(--border));
  color: color-mix(in srgb, #f97316 82%, var(--ink));
}

.wa-inv-detail {
  display: grid;
  gap: 16px;
  overflow: hidden;
}

.wa-inv-detail-cover {
  aspect-ratio: 16 / 9;
}

.wa-inv-detail-head,
.wa-inv-detail-grid,
.wa-inv-text,
.wa-inv-gallery {
  margin-left: 16px;
  margin-right: 16px;
}

.wa-inv-detail-head {
  display: grid;
  gap: 9px;
}

.wa-inv-detail-head h2 {
  font-size: 24px;
  line-height: 1.15;
}

.wa-inv-detail-head p,
.wa-inv-text p,
.wa-inv-gallery-empty {
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
}

.wa-inv-detail-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wa-inv-detail-grid div {
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px;
}

.wa-inv-detail-grid dt,
.wa-inv-text h3,
.wa-inv-gallery h3 {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .02em;
  margin: 0;
  text-transform: uppercase;
}

.wa-inv-detail-grid dd {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.wa-inv-text,
.wa-inv-gallery {
  display: grid;
  gap: 8px;
}

.wa-inv-gallery > div {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wa-inv-gallery-item,
.wa-inv-form-photo {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
}

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

.wa-inv-modal .field.is-wide {
  grid-column: 1 / -1;
}

.wa-inv-form-photos {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  margin-bottom: 10px;
}

.wa-inv-form-photo.is-cover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}

.wa-inv-form-photo button {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 7px;
  position: absolute;
  right: 6px;
  top: 6px;
}

.wa-inv-form-photo button[aria-label] {
  bottom: 6px;
  line-height: 1;
  min-height: 24px;
  min-width: 24px;
  padding: 0;
  top: auto;
}

.wa-inv-form-empty {
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--ink2);
  margin-bottom: 10px;
  padding: 14px;
}

.wa-inv-photo-pickers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wa-inv-photo-pickers input {
  display: none;
}

.wa-emergency-page {
  display: grid;
  gap: 18px;
}

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

.wa-em-status article,
.wa-em-card,
.wa-em-lock,
.wa-em-hero,
.wa-em-section {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 5%, transparent);
}

.wa-em-status article {
  border-radius: 14px;
  display: grid;
  gap: 4px;
  min-height: 78px;
  padding: 14px 16px;
}

.wa-em-status strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 760;
  line-height: 1.1;
}

.wa-em-status span {
  color: var(--ink2);
  font-size: 12px;
}

.wa-em-card,
.wa-em-lock,
.wa-em-hero {
  border-radius: 18px;
  padding: 24px;
}

.wa-em-card h2,
.wa-em-lock h2,
.wa-em-hero h2,
.wa-em-section h2 {
  color: var(--ink);
  letter-spacing: 0;
  margin: 0;
}

.wa-em-card p,
.wa-em-lock p,
.wa-em-hero p,
.wa-em-section p {
  color: var(--ink2);
  line-height: 1.55;
  margin: 0;
  white-space: pre-wrap;
}

.wa-em-card {
  display: grid;
  gap: 8px;
}

.wa-em-card.is-danger {
  background: color-mix(in srgb, #fee2e2 55%, var(--surface));
  border-color: color-mix(in srgb, #ef4444 38%, var(--border));
}

.wa-em-lock {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
}

.wa-em-lock > div,
.wa-em-lock form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.wa-em-lock > div > span,
.wa-em-hero > div > span {
  color: #dc2626;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wa-em-lock form {
  background: color-mix(in srgb, var(--surface2) 76%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
}

.wa-em-lock label {
  display: grid;
  gap: 7px;
}

.wa-em-lock label span {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 720;
}

.wa-em-hero {
  align-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, #fee2e2 46%, var(--surface)) 0%, var(--surface) 42%, color-mix(in srgb, #fef3c7 34%, var(--surface)) 100%);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.wa-em-hero > div {
  display: grid;
  gap: 8px;
}

.wa-em-hero aside {
  border: 1px solid color-mix(in srgb, #dc2626 24%, var(--border));
  border-radius: 14px;
  display: grid;
  gap: 4px;
  min-width: 180px;
  padding: 14px;
  text-align: right;
}

.wa-em-hero aside strong {
  color: #dc2626;
  font-size: 24px;
}

.wa-em-hero aside span {
  color: var(--ink2);
  font-size: 12px;
}

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

.wa-em-section {
  border-radius: 16px;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
}

.wa-em-section header {
  display: grid;
  gap: 5px;
}

.wa-em-section header span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wa-em-section h2 {
  font-size: 20px;
}

.wa-em-section p {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.wa-em-section p.is-empty {
  color: var(--ink3);
  font-style: italic;
}

.wa-em-section.is-danger {
  background: color-mix(in srgb, #fee2e2 56%, var(--surface));
  border-color: color-mix(in srgb, #dc2626 34%, var(--border));
}

.wa-em-section.is-danger header span,
.wa-em-section.is-danger h2 {
  color: #b91c1c;
}

.wa-em-section.is-warning {
  background: color-mix(in srgb, #fef3c7 52%, var(--surface));
  border-color: color-mix(in srgb, #f59e0b 36%, var(--border));
}

.wa-em-section.is-warning header span,
.wa-em-section.is-warning h2 {
  color: #92400e;
}

.wa-em-section.is-secret {
  background: color-mix(in srgb, #ede9fe 50%, var(--surface));
  border-color: color-mix(in srgb, #8b5cf6 34%, var(--border));
}

.wa-em-section.is-secret header span,
.wa-em-section.is-secret h2 {
  color: #6d28d9;
}

.wa-em-section.is-info {
  background: color-mix(in srgb, #e0f2fe 48%, var(--surface));
  border-color: color-mix(in srgb, #0284c7 28%, var(--border));
}

.wa-em-section.is-info header span,
.wa-em-section.is-info h2 {
  color: #0369a1;
}

.wa-em-modal textarea {
  min-height: 130px;
}

@media (max-width: 1020px) {
  .st54-body.cs-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .wa-inv-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-em-status,
  .wa-em-lock,
  .wa-em-hero,
  .wa-em-grid {
    grid-template-columns: 1fr;
  }

  .wa-em-hero aside {
    text-align: left;
  }

  .wa-inv-detail-grid,
  .wa-inv-modal form {
    grid-template-columns: 1fr;
  }

  .wa-inv-gallery > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .st54-fin-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .st54-fin-kpis article {
    min-height: 88px;
    padding: 11px 12px;
  }

  .st54-fin-grid,
  .st54-fin-split,
  .st54-laundry-main-grid,
  .st54-laundry-grid,
  .st54-fin-modal form {
    grid-template-columns: 1fr;
  }

  .st54-fin-page .module-header-actions .btn {
    flex: 1 1 30%;
    min-width: 0;
    width: auto !important;
  }

  .page-wrap.module-page.st54-fin-page .module-header-actions {
    display: flex !important;
    width: 100%;
  }

  .st54-fin-panel > header,
  .st54-fin-cost,
  .st54-fin-line {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .st54-fin-cost > div:last-child,
  .st54-fin-panel > header {
    justify-content: flex-start;
  }

  .st54-row-form,
  .st54-price-form {
    grid-template-columns: 1fr;
  }

  .st54-laundry-price-form {
    grid-template-columns: 1fr;
  }
}

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

  .wa-em-card,
  .wa-em-lock,
  .wa-em-hero,
  .wa-em-section {
    border-radius: 14px;
    padding: 16px;
  }

  .wa-em-status article {
    min-height: 68px;
    padding: 12px;
  }

  .st54-fin-kpis {
    grid-template-columns: 1fr;
  }

  .st54-fin-kpis article {
    min-height: 78px;
  }
}

@media (max-width: 560px) {
  .st54-month-summary {
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .st54-workspace-panel {
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
  }

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

  .st54-laundry-compact-field {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .st54-laundry-washer-row .cs-washer-card {
    align-items: center;
    padding: 12px;
  }

  .st54-laundry-stock-card,
  .st54-laundry-card {
    border-radius: 12px;
    padding: 12px;
  }

  .st54-laundry-card header {
    flex-direction: column;
  }

  .st54-laundry-shelf {
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
  }

  .st54-laundry-shelf-item {
    min-height: 68px;
    padding: 9px;
  }

  .st54-laundry-shelf-item strong {
    font-size: 22px;
  }

  .st54-laundry-capacity {
    grid-template-columns: 1fr;
  }

  .st54-month-summary article,
  .st54-history-actions {
    border-radius: 10px;
    padding: 9px 10px;
  }

  .st54-month-summary strong {
    font-size: 20px;
    line-height: 1.05;
  }

  .st54-history-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
  }

  .st54-panel-head,
  .st54-row {
    align-items: stretch;
    flex-direction: column;
  }

  .st54-shell .cs-thead {
    display: none;
  }

  .st54-shell .cs-day-section {
    border-radius: 12px;
  }

  .st54-shell .cs-date-strip-scroll {
    margin-bottom: 10px;
  }

  .st54-shell .cs-date-strip {
    gap: 6px;
  }

  .st54-shell .cs-date-pill {
    min-width: 56px;
    padding: 7px 8px;
  }

  .st54-shell .cs-date-pill-num {
    font-size: 1.05rem;
  }

  .st54-shell .cs-stats-bar {
    gap: 8px;
    margin-bottom: 12px;
    padding: 9px 10px;
  }

  .st54-shell .cs-stat-chip {
    min-width: 0;
    padding: 5px 9px;
  }

  .st54-shell .cs-stat-chip-val {
    font-size: 1rem;
  }

  .st54-shell .cs-day-header {
    gap: 7px;
    padding: 9px 10px;
  }

  .st54-shell .cs-day-name {
    font-size: .82rem;
  }

  .st54-shell .cs-day-tag,
  .st54-shell .cs-day-free {
    font-size: .64rem;
  }

  .st54-shell .cs-trow {
    grid-template-columns: minmax(104px, 1fr) 44px 34px 44px 48px;
    font-size: .75rem;
    min-height: 38px;
    padding: 6px 8px;
  }

  .st54-shell .cs-tcell {
    min-width: 0;
    padding-inline: 2px;
  }

  .st54-shell .cs-tcell--apt .cs-apt-num {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .st54-shell .cs-w-chip,
  .st54-shell .cs-wp-chip {
    font-size: .62rem;
    padding: 1px 6px;
  }

  .st54-shell .cs-tcell--menu {
    display: none;
  }

  .st54-shell .cs-day-empty {
    margin: 0;
    padding: 12px 14px;
  }
}