:root {
  /* Linear/Stripe design tokens */
  --green: #00c8b9;
  --green-bg: rgba(0, 200, 185, 0.08);
  --green-soft: #e8fbf8;
  --dark: #1b1f22;
  --gray: #6b7280;
  --muted: #6a7078;
  --border: #e5e7eb;
  --bg: #fafafa;
  --bg1: #f5f5f5;
  --bg2: #fafafa;
  --ink: #101114;
  --card: #ffffff;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.05);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-md: 7px;
  --radius-lg: 16px;
  --yazio-green: #00c8b9;
  --yazio-green-soft: rgba(0, 200, 185, 0.08);
  --yazio-dark: #1b1f22;
  --parent-a-color: #136f68;
  --parent-b-color: #4a47d1;
  --overlay: rgba(0, 0, 0, 0.5);
  --page-padding-inline: 24px;
  --page-padding-block: 64px;
  --page-padding-left: max(env(safe-area-inset-left), var(--page-padding-inline));
  --page-padding-right: max(env(safe-area-inset-right), var(--page-padding-inline));
  --page-max-width: 1024px;
  --prose-max-width: 624px;

  /* Modern design tokens */
  --bg-page: #f8f9fb;
  --bg-card: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;
  --text-muted: #b0b8c4;
  --border-input: rgba(0, 0, 0, 0.1);
  --border-hover: rgba(0, 0, 0, 0.12);
  /* Primary accent: trygg, dämpad indigo (mindre “tech-blå”) */
  --accent: #4553b3;
  --accent-bg: rgba(69, 83, 179, 0.12);
  --accent-text: #3341a6;

  /* Secondary warmth: sand/peach/soft green */
  --warm-sand: #f3e7d6;
  --warm-peach: #fde6d2;
  --warm-green: #e4f5e9;
  --warm-border: rgba(124, 73, 41, 0.12);
  --warm-ink: #6b4b35;
  --elin: #136f68;
  --elin-bg: rgba(19, 111, 104, 0.14);
  --daniel: #4a47d1;
  --daniel-bg: rgba(74, 71, 209, 0.14);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.2);
  --transition-fast: 0.12s ease;
  --transition-med: 0.15s ease;
}


* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow-x: hidden;
  /* Förhindra horisontellt skift vid skroll på mobil (viewport/scrollbar) */
}

body {
  height: 100%;
  margin: 0;
  font-family: "Inter Variable", "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  overflow-x: hidden;
  max-width: 100%;
  /* Lås bredd så innehållet inte skiftar åt höger vid skroll */
}

/* Se till att formkontroller ärver font (annars kan de bli Arial/system-default) */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Bakgrund för index.html */
.page-bg {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: -1;
}

/* Planeraren */
.planner-page .page-bg {
  background: #fff;
}

/* Inloggad i planeraren: dölj global toppmeny/navigation på denna sida. */
.planner-page.planner-page--logged-in .top,
.planner-page.planner-page--logged-in #menuOverlay {
  display: none !important;
}

/* Inloggad planner: subtil bakgrund */
.planner-page.planner-page--logged-in .page-bg {
  /* Varmare sidton, så kalender-canvas kan vara kallare och poppa */
  background: #f7f7f6;
}

/* Planeraren: fade innan footer */
.planner-page .planner-prefooter-fade {
  height: 1px;
  background: var(--border);
  pointer-events: none;
}

/* CLS guard: keep planner flow height reserved while auth/session shell initializes. */
.planner-page #planner.hidden {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
  min-height: 120vh;
}

/* HEADER - index.html stil */
.top {
  padding-top: 24px;
  padding-bottom: 10px;
  padding-left: var(--page-padding-left);
  padding-right: var(--page-padding-right);
  position: relative;
  z-index: 50;
  /* Högre än wizard overlay */
}

.top__inner {
  max-width: var(--page-max-width);
  width: 100%;
  margin: 0 auto;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
}

.nav {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.nav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.nav a:hover {
  opacity: 1;
}



/* Desktop header: Linear-lik layout (vit bakgrund, mörk text) */
@media (min-width: 901px) {
  .top {
    padding: 0;
  }

  .top::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100vw;
    height: 1px;
    background: rgba(0, 0, 0, 0.14);
  }

  .top__wrap {
    max-width: var(--page-max-width);
    width: min(var(--page-max-width),
        calc(100vw - var(--page-padding-left) - var(--page-padding-right)));
    padding: 0;
  }

  .top__inner {
    max-width: var(--page-max-width);
    width: min(var(--page-max-width),
        calc(100vw - var(--page-padding-left) - var(--page-padding-right)));
    min-height: 62px;
    padding: 10px 0;
    gap: 22px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .brand__logo-text {
    font-size: 30px;
  }

  .nav {
    gap: 34px;
  }

  .nav a {
    color: rgba(10, 12, 16, 0.72);
    opacity: 1;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0.01em;
    transition: color 0.18s ease;
  }

  .nav a:hover {
    color: #0b0d12;
  }

  .nav a[aria-current="page"] {
    color: #0b0d12;
    font-weight: 760;
    padding-bottom: 0;
  }

  .nav a[aria-current="page"]::after,
  .nav a[aria-current="page"]::before {
    content: none;
  }

  .nav-cta {
    color: #0d1016;
    background: #fff;
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
    transition: background 0.15s ease, color 0.15s ease,
      transform 0.08s ease;
  }

  .nav-cta:hover {
    color: #0b0d12;
    background: #f5f6f8;
  }

  .nav-cta:active {
    transform: translateY(1px);
  }

  .header-actions {
    gap: 14px;
  }

  #btn-upgrade.nav-cta {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(10, 12, 16, 0.72);
    font-size: 15px;
    font-weight: 650;
  }

  #btn-upgrade.nav-cta:hover {
    background: transparent;
    color: #0b0d12;
    box-shadow: none;
  }

  #btn-upgrade.nav-cta:active {
    transform: none;
  }
}

/* Rad: Lista|Månad + (mobil) ⋯ */
.plan-view-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 12px;
  flex-wrap: wrap;
}

/* Planera: linjera tab-rad med kalenderns vänsterkant */
.planner-page.planner-app[data-planner-section="planera"] .left-card--add-period .plan-view-row {

  padding-right: 18px;
  margin-bottom: 10px;
}

.plan-view-row .periods-view-toggle {
  margin: 0;
}

.planera-workspace {
  display: grid;
  align-items: start;
}

.planera-controls {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.07));
  border-radius: var(--radius-lg, 10px);
  padding: 16px 14px;
  align-self: start;
}

.planera-controls__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.planera-control-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.planera-control-row__label {
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary, #94a3b8);
}

.planera-control-row__control {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
}

.planera-controls__legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.planera-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  font-weight: 460;
}

.planera-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.planera-legend-dot--a {
  background: var(--elin, #0f766e);
}

.planera-legend-dot--b {
  background: var(--daniel, #4f46e5);
}

.planera-legend-dot--ab {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.4) 0%, rgba(79, 70, 229, 0.4) 100%);
}

.planera-controls__hint-wrap {
  margin: 0;
  margin-top: 14px;
  padding-top: 14px;
}

.planera-controls__hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #b0b8c4;
  font-weight: 420;
}

.planera-controls__meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.planera-controls__meta .planera-controls__hint {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(15, 23, 42, 0.52);
  font-weight: 520;
}

.planera-toolbox-context {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.planera-toolbox-context__text {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 560;
  color: rgba(15, 23, 42, 0.62);
}

.planera-toolbox-context__text strong {
  font-weight: 760;
  color: rgba(15, 23, 42, 0.78);
}

/* Legacy card (om används på mobil etc.) */
.planera-controls__card {
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}

.planera-controls__card--subtle {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.07);
}

.planera-controls__title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}

.planera-controls__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15, 23, 42, 0.68);
}

.planera-canvas {
  min-width: 0;
  position: relative;
}

/* Legend direkt ovanför kalendern — subtil, inte i kontrollzonen */
.planera-legend-row {
  padding: 0 18px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.planera-legend-row .planera-controls__legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.planera-legend-row .planera-legend-item {
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
}

.planera-legend-row .planera-legend-dot {
  width: 8px;
  height: 8px;
}

.planera-calendar-stage {
  position: relative;
  margin-bottom: 20px;
}

/* Planera (days-tab): EN toolbar — transparent, tight, horisontell rytm */
.planner-page.planner-app[data-planner-section="planera"] #planeraToolbox.planera-controls {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 18px 8px;
  margin: 0 0 0;
  min-height: 44px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.planner-page.planner-app[data-planner-section="planera"] #planeraToolbox #brushBar.planera-controls__panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  flex: 1 1 520px;
}

.planner-page.planner-app[data-planner-section="planera"] #planeraToolbox .planera-control-row {
  display: flex;
  align-items: left;
  gap: 12px;
}

/* Labels i vänster ställ: fast bredd så kontrollerna linjerar */
.planner-page.planner-app[data-planner-section="planera"] #planeraToolbox .planera-control-row__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #6B7280;
  margin: 0;
  min-width: 82px;
  flex-shrink: 0;
}

.planner-page.planner-app[data-planner-section="planera"] #planeraToolbox .planera-control-row__control {
  min-height: 32px;
}

.planner-page.planner-app[data-planner-section="planera"] #planeraToolbox .planera-controls__meta {
  flex-basis: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.planner-page.planner-app[data-planner-section="planera"] #planeraToolbox .planera-toolbox-context {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}



.planera-guidance {
  margin: 0 0 24px;
}

.planera-guidance__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(135deg,
      rgba(243, 231, 214, 0.72) 0%,
      rgba(253, 230, 210, 0.34) 44%,
      rgba(228, 245, 233, 0.42) 100%);
}

.planera-guidance__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.35;
  font-size: 13px;
  font-weight: 520;
  color: rgba(15, 23, 42, 0.78);
}

.planera-guidance__icon {
  width: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.planera-guidance__item--warn .planera-guidance__icon {
  color: #92400e;
}

.planera-guidance__item--ok .planera-guidance__icon {
  color: #065f46;
}

.planera-guidance__item--tip .planera-guidance__icon {
  color: var(--accent-text);
}

.planera-guidance__text {
  flex: 1;
  min-width: 0;
}

.planera-guidance__action {
  all: unset;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.planera-guidance__action:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.planera-guidance__action:active {
  transform: translateY(0);
}

.planera-guidance__action:focus-visible {
  outline: 2px solid rgba(69, 83, 179, 0.28);
  outline-offset: 2px;
}





.home-quickaction:focus-visible {
  outline: 2px solid rgba(69, 83, 179, 0.38);
  outline-offset: 3px;
}

.home-quickaction.home-quickaction--primary:focus-visible {
  outline-color: rgba(34, 197, 94, 0.42);
}

.home-quickaction--primary {
  border-color: rgba(34, 197, 94, 0.22) !important;
}

/* Plan-läge-tabs (Välj datum / Välj en längre period) — iOS segmented, flat */
.planner-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  border-radius: 8px;
  border: none;
  background: rgba(0, 0, 0, 0.04);
  margin-bottom: 16px;
  box-shadow: none;
}

.planner-tabs__btn {
  display: inline-flex;
  all: unset;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  transition: background 0.15s ease, color 0.15s ease;
}

.planner-tabs__btn[aria-selected="true"],
.planner-tabs__btn.is-active {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
  color: var(--text-primary, #0f172a);
  font-weight: 560;
}

.planner-tabs__btn:focus-visible {
  outline: 2px solid rgba(0, 178, 165, 0.35);
  outline-offset: 2px;
}

.planner-tabs__btn[aria-selected="false"]:hover {
  color: rgba(0, 0, 0, 0.78);
  background: rgba(0, 0, 0, 0.03);
}

.planner-tabs__btn[aria-selected="true"]:hover {
  transform: none;
}

.plan-tools-mobile {
  display: none;
}

/* Samma visuella familj som Lista/Månad-toggle – subtil, samma höjd */
.plan-tools-mobile__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.02);
  font-size: 18px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}

.plan-tools-mobile__trigger:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.02);
}

.plan-tools-mobile__trigger[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
}

.plan-tools-mobile__menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  min-width: 200px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  flex-direction: column;
  gap: 2px;
}

.plan-tools-mobile.is-open .plan-tools-mobile__menu {
  display: flex;
}

.plan-tools-mobile__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.plan-tools-mobile__item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.plan-tools-mobile__item--primary {
  font-weight: 700;
  color: var(--yazio-green, #00c8b9);
}

.periods-month {
  display: grid;
  gap: 12px;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}

.month-detail-overlay {
  align-items: flex-end;
  padding: 0 14px 14px;
}

.month-detail-overlay__content {
  max-height: calc(100vh - 20px);
}

.month-detail-sheet {
  border-radius: 20px;
}



/* CTA/actions längst till höger */
.top__inner>.nav-cta,
.top__inner>.header-actions {
  margin-left: auto;
}

.nav-cta {
  text-decoration: none;
  color: #fff;
  background: #1b1f22;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  box-shadow: none;
  transition: transform 0.08s ease, background 0.15s ease, opacity 0.2s ease;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
}

.nav-cta:hover {
  background: #2d3136;
}

.nav-cta:active {
  transform: translateY(1px);
}

/* HERO - index.html */
.hero {
  padding: 44px 18px 80px;
}

/* HERO - kalkylatorer.html */
.hero {
  text-align: center;
  margin-bottom: 50px;
}

.hero h1 {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--ink);
}

input,
select {
  width: 100%;
  padding: 12px 0;
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
  font-size: 28px;
  font-weight: 300;
  background: transparent;
  text-align: center;
  color: rgba(0, 0, 0, 0.4);
  transition: border-color 0.2s ease, color 0.2s ease;
  margin-bottom: 4px;
}

input:focus,
select:focus {
  outline: none;
  border-bottom-color: var(--green);
  color: var(--ink);
}

input::placeholder {
  color: rgba(0, 0, 0, 0.25);
  font-size: 28px;
  font-weight: 300;
}

select {
  font-size: 18px;
  padding: 12px 0;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 24px;
  font-weight: 400;
}

[hidden],
.hidden {
  display: none !important;
}

/* Utility classes */
.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.w-full {
  width: 100%;
}

.w-10 {
  width: 40px;
}

.h-10 {
  height: 40px;
}

.rounded-full {
  border-radius: 9999px;
}

.full {
  width: 100%;
}

.text-center {
  text-align: center;
}

.text-sm {
  font-size: 14px;
}

.text-xs {
  font-size: 12px;
}

/* Typography */
.h2 {
  font-family: "Inter Variable", "Inter", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
}

.h3 {
  font-family: "Inter Variable", "Inter", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
  margin: 0;
}

.h4 {
  font-family: "Inter Variable", "Inter", sans-serif;
  /* Rubriker */
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
  margin: 0 0 12px;
}

.lead {
  font-size: 17px;
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.5;
}

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

.small {
  font-size: 13px;
}

.hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.help {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.fineprint {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 24px;
}

.fineprint--spacious {
  margin-top: 48px;
}

/* Auth dropdown spacing (avoid inline styles) */
#authDropdownMsg {
  margin-top: 12px;
}

#dropdownLogin {
  margin-top: 0;
}

#dropdownForgot {
  margin-top: 10px;
}

#authChangePassword {
  margin-top: 12px;
}

#btn-reset {
  margin-top: 8px;
}

#dropdownLogout {
  margin-top: 12px;
}

/* Shared plan banner (avoid inline styles) */
.shared-plan-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

.shared-plan-banner__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.shared-plan-banner__left {
  min-width: 0;
}

.shared-plan-banner__title {
  font-weight: 900;
}

.shared-plan-banner__meta {
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shared-plan-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.label-strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 6px;
}

/* Layout (planeraren, index, etc) */
.container {
  max-width: var(--page-max-width);
  width: min(var(--page-max-width),
      calc(100vw - var(--page-padding-left) - var(--page-padding-right)));
  margin: 0 auto;

}

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

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.spacer {
  flex: 1;
}

/* INFO */
.info {
  margin-top: 10px;
}

/* Footer - Linear/Stripe style */
.footer {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 64px 0 48px;
  border-top: 1px solid var(--border);
  color: var(--ink);
}

/* Wave removed for clean Linear/Stripe look */
.footer::before {
  display: none;
}

/* Desktop: accordion-items visar som vanliga kolumner (öppet) */
@media (min-width: 769px) {}



/* Utility classes från style_new.css */
.spacer {
  flex: 1;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.full {
  width: 100%;
}

/* ---- Typografi från style_new.css (neutraliserad) ----
   Den här filen hade tidigare dubbla definitioner av .h2/.h3/.h4/.lead/.small/.hint
   som skapade inkonsekvent typografi. UI ska vara Inter; Inter (Variable) används bara i brand/landing.
*/

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid rgba(0, 200, 185, 0.35);
  background: rgba(0, 200, 185, 0.1);
}

/* Buttons från style_new.css */
.duo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  transition: transform 0.08s ease, background 0.15s ease,
    border-color 0.15s ease;
}

.duo-btn:hover {
  background: #f5f5f5;
}

.duo-btn:active {
  transform: translateY(1px);
}

.duo-btn-primary {
  background: var(--yazio-dark);
  color: #fff;
  border-color: transparent;
}

.duo-btn-primary:hover {
  background: #2d3136;
}

.duo-btn-ghost {
  background: #fff;
  border-color: var(--border);
}

.duo-btn-primary:active {
  transform: translateY(1px);
}

/* Cards */
.duo-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}

.duo-card.soft {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
}

.card-pad {
  padding: 22px;
}

.field {
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 2px solid var(--border);
  outline: none;
  font-size: 14px;
  background: #fff;
}

.field:focus {
  border-color: rgba(0, 200, 185, 0.7);
  box-shadow: 0 0 0 5px rgba(0, 200, 185, 0.12);
}

.field::placeholder {
  color: var(--muted);
  opacity: 0.7;
  font-weight: 400;
  font-size: 15px;
}

.field--compact::placeholder {
  color: var(--muted);
  opacity: 0.7;
  font-weight: 400;
  font-size: 15px;
}

.field--small {
  width: 92px;
}

/* Date input polish */
.field[type="date"],
.field--compact[type="date"] {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1.5A2.5 2.5 0 0 1 22 6.5v13A2.5 2.5 0 0 1 19.5 22h-15A2.5 2.5 0 0 1 2 19.5v-13A2.5 2.5 0 0 1 4.5 4H6V3a1 1 0 0 1 1-1Zm12.5 8h-15v9.5a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5V10Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.field[type="date"]::-webkit-calendar-picker-indicator,
.field--compact[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
  width: 24px;
  height: 24px;
}

/* Plan edit modal: use native picker icon only (avoid double icons in Firefox/WebKit mix) */
.field--date-native[type="date"] {
  background-image: none;
  padding-right: 14px;
}

.field--date-native[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
}

.label-strong {
  display: block;
  font-weight: 900;
  font-size: 19px;
  margin: 0 0 8px;
}

.help {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

/* Responsive */




/* ============================================
   PLANERAREN - Landing, Planner, Wizard
   ============================================ */

/* Header actions */
.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
}

/* Auth dropdown in header */
.auth-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.auth-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(440px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  padding: 14px;
  z-index: 1000;
}

.auth-dropdown__section {
  display: block;
}

.auth-dropdown__title {
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.auth-dropdown__subtitle {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 12px;
}

.auth-dropdown__fields {
  display: grid;
  gap: 12px;
}

.auth-dropdown__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.auth-dropdown__row:last-of-type {
  border-bottom: none;
}

.auth-dropdown__value {
  font-weight: 800;
  color: var(--ink);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-link {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--yazio-green);
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}

.auth-link[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Premium upgrade modal */
.overlay.premium-upgrade-overlay {
  z-index: 10050;
  padding: 8px;
  align-items: center;
  justify-content: center;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: premiumUpgradeOverlayIn 220ms ease both;
}

.premium-upgrade-overlay .overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.premium-upgrade-overlay .overlay__content {
  position: relative;
  z-index: 1;
  padding: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.premium-upgrade-modal {
  position: relative;
  width: 560px;
  max-width: min(92vw, 560px);
  max-height: min(92vh, 760px);
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05);
  animation: premiumUpgradeModalIn 450ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both;
}

.premium-upgrade-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: #f5f5f7;
  color: #8e8ea0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
}

.premium-upgrade-modal__close:hover {
  background: #eeeef0;
  color: #0f0f18;
}

.premium-upgrade-modal__close svg {
  width: 13px;
  height: 13px;
}

.premium-upgrade-modal__top {
  padding: 26px 28px 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(99, 91, 255, 0.03) 0%, transparent 100%);
}

.premium-upgrade-modal .premium-upgrade-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(99, 91, 255, 0.06);
  border: 1px solid rgba(99, 91, 255, 0.1);
  font-size: 10.5px;
  font-weight: 700;
  color: #635bff;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

.premium-upgrade-modal .premium-upgrade-modal__badge svg {
  width: 12px;
  height: 12px;
}

.premium-upgrade-modal__title {
  margin: 0 0 6px;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.15;
  color: #0f0f18;
}

.premium-upgrade-modal__subtitle {
  margin: 0 auto;
  max-width: 320px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #555568;
}

.premium-upgrade-context {
  display: none;
  margin: 10px auto 0;
  max-width: 360px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #f5f5f7;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 11.5px;
  color: #555568;
  line-height: 1.45;
}

.premium-upgrade-context:not(:empty) {
  display: block;
}

.premium-upgrade-modal__price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  margin-bottom: 2px;
}

.premium-upgrade-modal__price-now {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -2.4px;
  color: #0f0f18;
  line-height: 1;
}

.premium-upgrade-modal__price-now small {
  font-size: 18px;
  font-weight: 600;
  color: #555568;
  letter-spacing: 0;
  margin-left: 1px;
}

.premium-upgrade-modal__price-was {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: #8e8ea0;
  text-decoration: line-through;
}

.premium-upgrade-modal__price-meta {
  margin: 0;
  font-size: 12px;
  color: #8e8ea0;
}

.premium-upgrade-modal .premium-upgrade-features {
  padding: 16px 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.premium-upgrade-modal .premium-upgrade-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}

.premium-upgrade-modal .premium-upgrade-feature+.premium-upgrade-feature {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.premium-upgrade-modal .premium-upgrade-feature__icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(99, 91, 255, 0.06);
  color: #635bff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.premium-upgrade-modal .premium-upgrade-feature__icon svg {
  width: 12px;
  height: 12px;
}

.premium-upgrade-modal .premium-upgrade-feature span {
  font-size: 13.5px;
  color: #555568;
  line-height: 1.4;
}

.premium-upgrade-modal .premium-upgrade-feature strong {
  color: #0f0f18;
  font-weight: 600;
}

.premium-upgrade-modal__bottom {
  padding: 0 28px 24px;
}

.premium-upgrade-modal__legal {
  padding: 9px 10px;
  border-radius: 8px;
  background: #f5f5f7;
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

.premium-upgrade-modal__legal-note {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: #8e8ea0;
}

.premium-upgrade-modal__legal-meta {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #8e8ea0;
}

.premium-upgrade-modal__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 10px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #555568;
}

.premium-upgrade-modal__consent input {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  margin-top: 1px;
  border: 2px solid rgba(0, 0, 0, 0.14);
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 150ms ease;
}

.premium-upgrade-modal__consent input:checked {
  background-color: #635bff;
  border-color: #635bff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.premium-upgrade-modal__terms {
  margin: 0 0 12px;
  font-size: 10.5px;
  color: #8e8ea0;
  text-align: center;
}

.premium-upgrade-modal__terms a {
  color: #635bff;
  text-decoration: underline;
  text-underline-offset: 1px;
}

.premium-upgrade-modal__terms a:hover {
  color: #4f46e5;
}

.premium-upgrade-modal__cta {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  background: #0f0f18;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 200ms ease;
}

.premium-upgrade-modal__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}

.premium-upgrade-modal__cta:active {
  transform: translateY(0);
}

.premium-upgrade-modal__cta:disabled,
.premium-upgrade-modal__cta[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.premium-upgrade-modal__risk {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.premium-upgrade-modal__risk span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: #8e8ea0;
}

.premium-upgrade-modal__risk svg {
  width: 13px;
  height: 13px;
  color: #16a34a;
}

.premium-upgrade-modal__later {
  display: block;
  margin: 10px auto 0;
  background: none;
  border: none;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12.5px;
  color: #8e8ea0;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 120ms ease;
}

.premium-upgrade-modal__later:hover {
  color: #555568;
}

@keyframes premiumUpgradeModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes premiumUpgradeOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Mörkare overlay-bakgrund (alla overlays) */
.overlay {
  background: var(--overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Planner layout */
.planner {
  padding: 26px 0 50px;
}

.planner-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0 18px;
}

#plan-switcher-sheet-rename,
#plan-switcher-nav-dropdown-rename {
  display: none;
}

#warningsBadge {
  display: none;
}

.planner-card-home {
  padding: 0;
  border: none;
  background: transparent;
}

#topbarPlanPctBar {
  width: 0;
}

.planera-control-row__control--relative {
  position: relative;
}

#inlineMoreDropdown {
  display: none;
}

.planner-legal-banner {
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid rgba(69, 83, 179, 0.15);
  border-radius: 10px;
  background: rgba(69, 83, 179, 0.05);
}

.planner-legal-banner__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #303651;
}

.planner-legal-banner__meta {
  margin: 5px 0 0;
  font-size: 11.5px;
  color: #5a6285;
  font-weight: 520;
}

.planner-head__title {
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}

.planner-head__title:empty::before {
  content: "Min plan";
}

/* Title as control: tydlig titel – Inter (Variable), samma storlek som tidigare h2 */
.planner-head__title-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  margin: 0;
  border: none;
  background: transparent;
  font-family: "Inter Variable", "Inter", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.planner-head__title-trigger:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
}

.planner-head__title-trigger:focus-visible {
  outline: 2px solid var(--yazio-green);
  outline-offset: 2px;
}

.planner-head__title-text {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.planner-head__chev {
  font-size: 0.65em;
  font-weight: 600;
  color: var(--muted);
  opacity: 0.85;
  line-height: 1;
}

/* Plan-switcher dropdown (desktop): luft, stora klickytor, tydlig aktiv, inga hårda borders */
.plan-switcher-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 220px;
  max-width: 320px;
  padding: 8px 0;
  background: var(--card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 55;
  border: 1px solid var(--border);
}

.plan-switcher-dropdown[hidden] {
  display: none !important;
}

.plan-switcher-dropdown__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan-switcher-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s ease;
}

.plan-switcher-dropdown__item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.plan-switcher-dropdown__item.is-active {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink);
}

.plan-switcher-dropdown__item-check {
  flex-shrink: 0;
  width: 18px;
  font-size: 14px;
  color: var(--yazio-green);
}

.plan-switcher-dropdown__item-bullet {
  flex-shrink: 0;
  width: 18px;
  font-size: 12px;
  color: var(--muted);
}

.plan-switcher-dropdown__item-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-switcher-dropdown__item-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

.plan-switcher-dropdown__divider {
  height: 1px;
  margin: 6px 12px;
  background: rgba(0, 0, 0, 0.08);
}

.plan-switcher-dropdown__new {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--yazio-green);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s ease;
}

.plan-switcher-dropdown__new:hover {
  background: rgba(0, 200, 185, 0.08);
}

.plan-switcher-dropdown__rename {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s ease;
}

.plan-switcher-dropdown__rename:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
}

.planner-head__trigger-wrap {
  position: relative;
}

.planner-head__status {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.planner-head__status.hidden {
  display: none !important;
}

/* Plan toolbar */
.plan-toolbar {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 20px;
  margin-top: 0;
}

/* När toolbar är direkt i summary-card (inte standalone) */
.summary-card .plan-toolbar {
  padding: 0;
  margin-bottom: 20px;
  margin-top: 0;
}

.plan-toolbar__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.plan-toolbar__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  font-family: inherit;
}

.plan-toolbar__badge-header {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: var(--green-soft);
  color: var(--green);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.plan-toolbar__group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.plan-toolbar__group::-webkit-scrollbar {
  display: none;
}

.plan-toolbar__btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
  flex-shrink: 0;
}

.plan-toolbar__btn:hover {
  background: var(--bg);
  border-color: var(--green);
  color: var(--green);
}

.plan-toolbar__btn--secondary {
  background: #fff;
}

.plan-toolbar__btn--primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.plan-toolbar__btn--primary:hover {
  background: #00b6a9;
  border-color: #00b6a9;
  color: #fff;
}

.plan-toolbar__btn--primary:active {
  transform: translateY(1px);
}

.plan-toolbar__btn--premium:not(.plan-toolbar__btn--unlocked) {
  opacity: 0.7;
}

.plan-toolbar__btn--premium:not(.plan-toolbar__btn--unlocked):hover {
  opacity: 1;
  border-color: var(--green);
}

.plan-toolbar__btn--primary.plan-toolbar__btn--premium:not(.plan-toolbar__btn--unlocked):hover {
  background: #00b6a9;
  border-color: #00b6a9;
  color: #fff;
}

/* Verktyg i rubrikraden (planens namn) */
.plan-tools {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ⋯ + dropdown-meny */
.plan-tools__more {
  display: inline-flex;
  padding: 6px 10px;
  font-size: 18px;
  line-height: 1;
}

.plan-tools__menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 190px;
}

.plan-tools.is-open .plan-tools__menu {
  display: flex;
}

.plan-tools__menuitem {
  width: 100%;
  justify-content: center;
}

/* Mobil: samma scroll-beteende, men kan behöva mindre padding */


.planner-head__actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.planner-dashboard {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.planner-dashboard-main {
  min-width: 0;
  padding-top: 50px;
}

.planner-dashboard-nav {
  position: sticky;
  top: 78px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: #fff;
}

.planner-dashboard-nav__item {
  text-align: left;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 460;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.planner-dashboard-nav__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: 0.7;
}

.planner-dashboard-nav__item.is-active .planner-dashboard-nav__icon {
  opacity: 1;
}

.planner-dashboard-nav__icon svg {
  width: 100%;
  height: 100%;
}

.planner-dashboard-nav__badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  padding: 2px 7px;
  border-radius: 10px;
}

.planner-dashboard-nav__divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 10px 12px;
}

.planner-dashboard-nav__item--secondary {
  font-size: 13px;
  font-weight: 440;
  color: #60657d;
}

.planner-dashboard-nav__item--secondary .planner-dashboard-nav__icon {
  opacity: 0.55;
}

.planner-dashboard-nav__item--secondary:hover {
  color: #64748b;
}

.planner-dashboard-nav__item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #0f172a;
}

.planner-dashboard-nav__item.is-active {
  background: var(--accent-bg);
  color: var(--accent-text);
  font-weight: 560;
}

@media (min-width: 981px) {
  .planner-page.planner-app.planner-page--logged-in {
    --planner-left-nav-width: 276px;
    --planner-left-nav-gap: 30px;
  }

  /* Hem: ge heron status, flytta ner kontrollerna i vänsterkolumnen. */
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="home"] .left-column-stack {
    margin-top: 44px;
  }

  .planner-page.planner-app.planner-page--logged-in .planner {
    min-height: 100vh;
    padding-top: 0;
  }

  .planner-page.planner-app.planner-page--logged-in .planner>.container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: calc(var(--planner-left-nav-width) + var(--planner-left-nav-gap));
    padding-right: 28px;
    box-sizing: border-box;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-head {
    margin: 0;
    height: 0;
    min-height: 0;
    overflow: visible;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard {
    display: block;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-main {
    min-width: 0;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--planner-left-nav-width);
    height: 100vh;
    z-index: 35;
    align-self: stretch;
    gap: 2px;
    padding: 18px 10px 0;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    overflow-y: auto;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-head__trigger-wrap {
    position: fixed;
    top: 18px;
    left: 12px;
    width: calc(var(--planner-left-nav-width) - 24px);
    z-index: 36;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-head__title-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-head__status {
    display: block;
    padding-left: 12px;
    margin-top: 4px;
    font-size: 11px;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__item {
    border-radius: 7px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 460;
    color: #64748b;
    transition: all 0.12s ease;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #0f172a;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__item.is-active {
    background: var(--accent-bg);
    color: var(--accent-text);
    font-weight: 560;
  }
}

.planner-nav-hidden {
  display: none !important;
}

/* Sidebar plan switcher */
.planner-nav-plan-switcher {
  position: relative;
  padding: 16px 12px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.planner-nav-plan-switcher__btn {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.025);
  transition: background 0.12s ease;
  box-sizing: border-box;
}

.planner-nav-plan-switcher__btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.planner-nav-plan-switcher.is-open .planner-nav-plan-switcher__btn {
  background: rgba(0, 0, 0, 0.05);
}

.planner-nav-plan-switcher__head {
  min-width: 0;
  flex: 1;
}

.planner-nav-plan-switcher__name {
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -0.01em;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-nav-plan-switcher__status {
  font-size: 11px;
  color: #60657d;
  margin-top: 2px;
  font-weight: 440;
}

.planner-nav-plan-switcher__chev {
  color: #60657d;
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform 0.2s ease;
}

.planner-nav-plan-switcher.is-open .planner-nav-plan-switcher__chev {
  transform: rotate(180deg);
}

/* Sidebar plan switcher dropdown */
.planner-nav-plan-switcher__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 8px;
  min-width: calc(100% - 16px);
  width: max-content;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 100;
  padding: 6px;
  box-sizing: border-box;
}

.planner-nav-plan-switcher__dropdown[hidden] {
  display: none !important;
}

/* När planväljarens dropdown är öppen: nav ovanför innehållsytan och dropdownen klipps inte */
.planner-dashboard-nav.nav-dropdown-open,
.planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav.nav-dropdown-open {
  overflow: visible;
  z-index: 200;
}

.planner-nav-plan-switcher__dropdown-label {
  font-size: 11px;
  font-weight: 560;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px 6px;
}

.planner-nav-plan-switcher__dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: max-content;
  min-width: 100%;
}

.planner-nav-plan-switcher__dropdown-list .plan-switcher-dropdown__item {
  width: max-content;
  min-width: 100%;
  padding: 10px 10px;
  border-radius: 7px;
  align-items: flex-start;
}

.planner-nav-plan-switcher__dropdown-list .plan-switcher-dropdown__item .plan-switcher-dropdown__item-title {
  display: block;
  min-width: max-content;
}

.planner-nav-plan-switcher__dropdown-list .plan-switcher-dropdown__item.is-active {
  background: rgba(81, 97, 214, 0.06);
}

.planner-nav-plan-switcher__dropdown-list .plan-switcher-dropdown__item:hover {
  background: rgba(0, 0, 0, 0.03);
}

.planner-nav-plan-switcher__dropdown-list .plan-switcher-dropdown__item-check {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  background: transparent;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  color: transparent;
  font-size: 11px;
}

.planner-nav-plan-switcher__dropdown-list .plan-switcher-dropdown__item.is-active .plan-switcher-dropdown__item-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.planner-nav-plan-switcher__dropdown-list .plan-switcher-dropdown__item-bullet {
  display: none;
}

.planner-nav-plan-switcher__dropdown-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 4px 6px;
}

.planner-nav-plan-switcher__dropdown-action {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 480;
  color: #64748b;
  transition: all 0.1s ease;
  box-sizing: border-box;
}

.planner-nav-plan-switcher__dropdown-action:hover {
  background: rgba(0, 0, 0, 0.03);
  color: #0f172a;
}

.planner-nav-plan-switcher__dropdown-action--new {
  font-weight: 520;
  color: var(--accent);
}

.planner-nav-plan-switcher__dropdown-action--new:hover {
  background: rgba(81, 97, 214, 0.06);
  color: var(--accent);
}

/* Sidebar user info */
.planner-dashboard-nav__guest-upgrade {
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  margin-top: auto;
}

.planner-dashboard-nav__guest-upgrade-card {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  display: block;
  padding: 14px 14px 12px;
  border-radius: 10px;
  border: 1px solid rgba(99, 91, 255, 0.22);
  background: #f7f3ff;
  transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.planner-dashboard-nav__guest-upgrade-card:hover {
  border-color: rgba(99, 91, 255, 0.38);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(99, 91, 255, 0.14);
}

.planner-dashboard-nav__guest-upgrade-title {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #635bff;
  margin-bottom: 6px;
}

.planner-dashboard-nav__guest-upgrade-text {
  font-size: 10px;
  line-height: 1.45;
  color: #7f8598;
  margin-bottom: 10px;
}

.planner-dashboard-nav__guest-upgrade-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 11px;
  background: linear-gradient(135deg, #625cf4 0%, #5b55ee 100%);
  color: #f5f7ff;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 5px 14px rgba(98, 92, 244, 0.28);
}

.planner-dashboard-nav__guest-upgrade:not(.hidden)+.planner-dashboard-nav__user {
  margin-top: 0;
}

.planner-dashboard-nav__user {
  margin-top: auto;
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 14px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.12s ease;
  border-radius: 8px;
}

.planner-dashboard-nav__user:hover {
  background: rgba(0, 0, 0, 0.04);
}

.planner-dashboard-nav__user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, #6366f1, var(--accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 650;
  font-size: 12px;
  flex-shrink: 0;
}

.planner-dashboard-nav__user-details {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1;
}

.planner-dashboard-nav__user-email {
  font-size: 13px;
  font-weight: 540;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.planner-dashboard-nav__user-plan {
  font-size: 11px;
  color: #60657d;
  font-weight: 480;
}

/* Grid: main lite smalare så aside får mer luft; fokus vänster, support höger */
/* Aside ~80px smalare – proportion > styling; vänster känns viktigare, mer editorial */
.planner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
  width: 100%;
  max-width: 100%;
}

/* Vänsterkolumn: tre (fyra) kort i stället för ett monsterkort – mer rytm, modern app-känsla */
.left-column-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.left-card {
  margin: 0;

}

/* Hairline mellan "Lägg till period" och "Din plan" – separation inuti ett kort. Mer editorial. */
.left-column-divider {
  margin: 20px 0 16px;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Grunddata = metadata, inte feature – kompakt så "Lägg till period" blir startpunkten */
.left-column-stack>.left-card:first-child {
  padding: 17px 18px;
}

.left-column-stack>.left-card:first-child .summary-title {
  font-size: 15px;
  font-weight: 800;
  margin: 0;
}

.left-column-stack>.left-card:first-child .details__body {
  margin-top: 10px;
}

/* Aside = luftig informationspelare. Ingen mega-container. Fristående block med luft mellan. */
.planner-aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  border: none;

}

/* Ingen yttercontainer: div är bara injektionsmål, ritas inte som eget lager */
.planner-aside__stack {
  display: contents;
}

/* Aside-ordning: mobil = naturlig (upgrade sist), desktop = upgrade direkt under hero/macros */
.planner-aside .aside-card--hero {
  order: 1;
}

.planner-aside .aside-card--secondary:nth-child(2) {
  order: 2;
}

.planner-aside .aside-card--secondary:nth-child(3) {
  order: 3;
}

.planner-aside .aside-upgrade {
  order: 10;
}

/* Systemsektion (Viktig information + Regler & inställningar) alltid längst ner – en visuell enhet */
.planner-aside .aside-system-section {
  order: 20;
}

/* Desktop: Hero → Lås upp prognoser → Ekonomi → Föräldrar & överföringar → Regler & inställningar */
@media (min-width: 769px) {
  .planner-aside .aside-upgrade {
    order: 2;
  }

  .planner-aside .aside-card--secondary:nth-child(2) {
    order: 3;
  }

  .planner-aside .aside-card--secondary:nth-child(3) {
    order: 4;
  }
}

@media (min-width: 901px) {
  .aside-warnings-desktop #aside-warnings-slot {
    display: none;
  }

  /* Desktop: separat varningsflik använder vänsterkortet, inte aside-slot */
  .planner-aside .aside-warnings-desktop {
    display: none;
  }

  /* Visa varningskortet i vänsterkolumnen på desktop */
  .left-column-stack .left-card.warnings-desktop-card {
    display: block;
  }
}



/* Aside-kort lättare än vänster: mindre radius, tunnare border, mindre shadow */
.aside-card {
  background: var(--card);


}

/* Hero: lite större än övriga – mer padding, mer luft runt ringen */
/* Hero = egen zon – mer luft efter (fintech-trick: bryt rytmen medvetet) */
.aside-card--hero {
  padding: 0px 5px;
  background: transparent;
  margin-bottom: 12px;
}

/* Siffran = nästan headline – ögat landar på <0.2 sek */
.aside-card--hero .summary-circular-value,
.aside-card--hero .summary-stat-value {
  font-size: 36px;
  font-weight: 700;
}

/* "Kvar" = låg kontrast, stödtext */
.aside-card--hero .summary-circular-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.45);
}

/* Ringen ~18% större för mer pondus */
.aside-card--hero .summary-circular-progress {
  width: 180px;
  height: 180px;
  margin-bottom: 8px;
}

.aside-card--hero .summary-calorie-section .summary-circular-progress {
  margin: 0;
}

/* Desktop aside: hero-ring något mindre – får plats snyggt i kolumnen */
.planner-aside .aside-card--hero .summary-circular-progress {
  width: min(44vh, 260px);
  height: min(44vh, 260px);
}

.planner-aside .aside-card--hero .summary-calorie-section {
  gap: 8px;
}

.planner-aside .aside-card--hero .summary-circular-value {
  font-size: clamp(72px, 6.8vw, 88px);
  letter-spacing: -0.03em;
}

.planner-aside .aside-card--hero .summary-stat-value {
  font-size: 24px;
}

.planner-aside .aside-card--hero .summary-stat-label,
.planner-aside .aside-card--hero .summary-circular-label {
  font-size: 13px;
}

.planner-aside .aside-card--hero .summary-stat {
  min-width: 0;
}

@media (min-width: 981px) {

  /* Hem: hero ska dominera (ta bort sidostatistiken runt ringen, centrera ringen). */
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="home"] .planner-aside .aside-card--hero .summary-overview-desktop .summary-stat {
    display: none;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="home"] .planner-aside .aside-card--hero .summary-overview-desktop {
    justify-content: center;
    gap: 0;
    margin-bottom: 14px;
  }
}

/* Upgrade: feature highlight – inte kort, inte banner. Erbjudande med luft. */
.aside-upgrade {
  padding: 24px 5px 24px 5px;
  margin-bottom: -4px;
}

.aside-upgrade__head {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
}

.aside-upgrade__text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 0 16px;
}

.aside-upgrade__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aside-upgrade__login {
  font-size: 13px;
}

/* CTA ska inte skrika – samma färg, 88% opacity. När allt är premium ska inget skrika. */
.aside-upgrade .duo-btn-primary {
  background: rgba(27, 31, 34, 0.88);
}

.aside-upgrade .duo-btn-primary:hover {
  background: rgba(27, 31, 34, 0.92);
}

/* Sekundär: ekonomi, föräldrar – nästan flat, elevated surface */
.aside-card--secondary {

  background: transparent
}

.aside-card--secondary .summary-card,
.aside-card--secondary #summary-economy-anchor {
  margin-top: 0;
}

.aside-divider {
  margin: 8px 0 4px;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.section {
  margin-top: 18px;
}

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

.overview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 0.2s ease;
}

.overview-card:hover {
  border-color: #d1d5db;
}

.overview-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.overview-card__content {
  flex: 1;
  min-width: 0;
}

.overview-card__label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.overview-card__value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.info-box {
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fafafa;
}

.info-box .label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.info-box .value {
  margin-top: 6px;
  font-weight: 900;
  font-family: "Inter Variable", "Inter", sans-serif;
}

.wizard-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .wizard-summary-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

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

/* Period-form: mobil = stepper/segmented/slider (minimera tangentbord). Desktop = vanliga fält. */
.period-mobile-control {
  display: none;
}

.period-field-wrap {
  position: relative;
}

/* Period canvas: soft container (workspace-känsla) */
.period-form-mount {
  margin-top: 0;
}

.period-canvas {
  background: #F7F8FA;
  border-radius: 20px;
  padding: 24px;
}

.period-canvas__header {
  margin-bottom: 18px;
}

.period-canvas__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  margin: 0 0 4px 0;
  letter-spacing: -0.02em;
}

.period-canvas__sub {
  font-size: 13px;
  color: var(--muted, #64748b);
  margin: 0;
  line-height: 1.4;
}

/* Kompakt vertikal spacing (~15% mindre) */
.period-canvas .period-row-compact {
  margin-bottom: 10px;
}

.period-canvas .period-row-compact:last-of-type {
  margin-bottom: 0;
}

.period-canvas .summary-period-content {
  margin-top: 0;
}

/* Datumrad: Från → Till med visuell pil */
.period-range-row {
  grid-template-columns: 1fr;
}

.period-range-with-arrow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px 12px;
  align-items: end;
}

.period-range-arrow {
  display: none;
  align-self: center;
  padding-bottom: 8px;
  color: var(--muted, #64748b);
  font-size: 18px;
  font-weight: 600;
}

@media (min-width: 640px) {
  .period-range-with-arrow {
    grid-template-columns: 1fr auto 1fr;
  }

  .period-range-arrow {
    display: block;
  }

  .period-range-row.period-range-with-arrow {
    grid-template-columns: 1fr auto 1fr;
  }
}



/* Period (generator): veckodagar — subtila chips (inte knappkänsla) */
.period-weekdays__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.period-weekdays__list .check {
  position: relative;
  display: block;
  margin: 0;
}

.period-weekdays__list .check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.period-weekdays__list .check label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.period-canvas .period-weekdays__list .check label {
  border-radius: 8px;
  border: 1px solid transparent;
  background: #F3F4F6;
  color: #6b7280;
  font-weight: 500;
  font-size: 13px;
}

.period-canvas .period-weekdays__list .check input:focus-visible+label {
  outline: 2px solid rgba(15, 23, 42, 0.25);
  outline-offset: 2px;
}

.period-canvas .period-weekdays__list .check input:checked+label {
  background: #1F2937;
  border-color: #1F2937;
  color: #fff;
}

.period-weekdays__list .check input:focus-visible+label {
  outline: 2px solid rgba(15, 23, 42, 0.25);
  outline-offset: 2px;
}

.period-weekdays__list .check input:checked+label {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}

/* Live preview */
.period-live-preview {
  margin-top: 14px;
  margin-bottom: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.period-live-preview__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #64748b);
  margin-bottom: 6px;
}

.period-live-preview__text {
  font-size: 14px;
  color: var(--ink, #0f172a);
  margin: 0;
  line-height: 1.5;
}

.period-live-preview__text:empty::before {
  content: "Välj förälder, datum och veckodagar.";
  color: var(--muted, #64748b);
}

/* Avancerat: mindre, sekundär, tunn divider */
.period-canvas .period-advanced {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.period-canvas .period-advanced__summary {
  font-weight: 600;
  font-size: 13px;
  color: var(--muted, #64748b);
}

.period-canvas .period-advanced__summary .chev {
  opacity: 0.7;
}

/* CTA: medium bredd, luft runt (mer Apple än SAP) */
.period-cta-wrap {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.period-cta {
  min-width: 200px;
  max-width: 320px;
  width: 100%;
}

.period-canvas .period-cta-wrap {
  margin-top: 18px;
}

/* Sheet/mobil: CTA i footer kan behålla full width */
.add-period-sheet__footer .duo-btn-primary.full {
  width: 100%;
}

/* Period (generator): fallback när inte i canvas */
.period-range-row {
  grid-template-columns: 1fr;
}

.period-repeat select {
  width: 100%;
}

/* Custom date picker */
.date-picker {
  display: block;
}

.date-picker-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 380px;
  margin: 0 auto;
}

.date-picker-trigger {
  width: 100%;
  min-width: 320px;
  max-width: 380px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
}

/* Åsidosätt bredd för datumfält i "lägg till perioder" */
.summary-period-content .date-picker-trigger {
  min-width: auto;
  max-width: 100%;
}

.date-picker-trigger:hover {
  border-color: var(--yazio-green);
}

.date-picker-trigger:focus {
  outline: none;
  border-color: var(--yazio-green);
  box-shadow: 0 0 0 4px rgba(0, 200, 185, 0.12);
}

.date-picker-trigger__text {
  flex: 1;
  color: var(--ink);
}

.date-picker-trigger__text:empty::before {
  content: "Välj datum";
  color: var(--muted);
}

.date-picker-trigger__icon {
  flex-shrink: 0;
  color: var(--muted);
  width: 16px;
  height: 16px;
}

.mini-calendar {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 320px;
  max-width: 380px;
  width: max-content;
}

.mini-calendar.hidden {
  display: none;
}

.mini-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.mini-calendar__title {
  font-weight: 900;
  font-size: 14px;
  color: var(--ink);
  text-align: center;
  flex: 1;
}

.mini-calendar__nav {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.mini-calendar__nav:hover {
  background: rgba(0, 0, 0, 0.04);
}

.mini-calendar__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mini-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
  margin-bottom: 6px;
  padding: 0 2px;
}

.mini-calendar__weekdays span {
  padding: 4px 0;
}

.mini-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 0 4px;
}

.mini-calendar__day {
  min-width: 0;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.mini-calendar__day:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--border);
}

.mini-calendar__day.is-selected {
  background: var(--yazio-green);
  color: #fff;
  border-color: var(--yazio-green);
}

.mini-calendar__day.is-today:not(.is-selected) {
  border-color: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.10);
}

.mini-calendar__day.is-highlight:not(.is-selected) {
  border-color: var(--yazio-green);
  background: var(--yazio-green-soft);
}

.mini-calendar__day.is-disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.5;
}

.mini-calendar__day.is-empty {
  visibility: hidden;
}



.field--compact {
  padding: 10px 12px;
  font-size: 14px;
}

.label-strong.small {
  font-size: 12px;
  margin-bottom: 6px;
}

.details--compact {
  margin-top: 8px;
  margin-bottom: 8px;
}

.details__summary--compact {
  padding: 8px 0;
  font-size: 13px;
}

.details__body--compact {
  padding-top: 8px;
}

.empty {
  margin-top: 0;
  padding: 18px;
  border-radius: 18px;
  border: 2px dashed rgba(0, 0, 0, 0.14);
  color: var(--muted);
  text-align: center;
}

.summary-card .empty {
  margin-top: 16px;
}

.empty__title {
  margin: 0;
  font-weight: 900;
  color: var(--ink);
}

.empty__sub {
  margin: 6px 0 0;
  font-size: 13px;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 10px;

}

.summary-card .list {
  margin-top: 16px;
}

/* Varningar: tre nivåer – kritisk (alltid synlig), rekommendation (preview + expand), info (collapse) */
.warnings-empty {
  padding: 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.03);
  color: var(--muted);
  font-size: 14px;
}

/* Viktiga insikter – sektion utan kort, neutral, Linear/Stripe-känsla */
.insights-section {
  padding: 0;
  background: transparent;
  border: none;
}

.insights-section__title {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.insights-section__title::after {
  content: "";
  display: block;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin-top: 12px;
}

.insights-section__list {
  margin-top: 0;
}

.insights-section__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.insights-empty {
  margin: 0;
  padding: 16px 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}

.insight-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  background: transparent;
}

.insight-row__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 2px;
}

.insight-row__icon--warning {
  color: rgba(180, 83, 9, 0.9);
}

.insight-row__content {
  flex: 1;
  min-width: 0;
}

.insight-row__heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px 0;
}

.insight-row__text {
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.9;
}

.insight-row__text:last-child {
  margin-bottom: 0;
}

.insight-row__action {
  margin-top: 6px;
  font-size: 13px;
}

.insights-more {
  padding-top: 4px;
}

.insights-more__btn {
  font-size: 13px;
}

/* Planinställningar – wizardsammanställning i Hjälp & inställningar */
.plan-settings {
  padding: 0;
  background: transparent;
  border: none;
}

.plan-settings__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.plan-settings__status {
  margin: 14px 0 22px;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  background: rgba(245, 158, 11, 0.1);
  color: #92400e;
  font-size: 12px;
  font-weight: 590;
  letter-spacing: 0.01em;
}

.plan-settings__status--ok {
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(34, 197, 94, 0.1);
  color: #166534;
}

.plan-settings__block {
  margin-bottom: 56px;
}

.plan-settings__block:last-child {
  margin-bottom: 0;
}

.plan-settings__block-title {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.plan-settings__block-support {
  margin: 0 0 12px 0;
  font-size: 13px;
  opacity: 0.6;
  color: var(--ink);
  line-height: 1.4;
}

.plan-settings__subblock {
  margin: 10px 0 0 0;
  padding-left: 2px;
}

.plan-settings__info {
  margin: 12px 0 0 0;
  font-size: 13px;
  color: var(--muted);
}

.plan-settings__checkbox-row {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

.plan-settings__checkbox-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.plan-settings__consequence {
  margin: 12px 0 0 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  color: var(--ink);
}

.plan-settings__link {
  color: var(--ink);
  opacity: 0.8;
  text-decoration: underline;
}

.plan-settings__link:hover {
  opacity: 1;
}

/* Selection cards – hela kortet klickbart, ingen synlig radio */
.selection-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selection-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.selection-card:hover {
  background: rgba(0, 0, 0, 0.03);
}

.selection-card.is-selected {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

.selection-card__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.selection-card__mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.selection-card.is-selected .selection-card__mark {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 3px #fff;
}

.selection-card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.selection-card__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.selection-card__support {
  font-size: 13px;
  opacity: 0.6;
  color: var(--ink);
  line-height: 1.4;
}

/* Wizard-sammanställning i Hjälp & inställningar */
#regler-details-body {
  width: 100%;
}

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

.help-wizard-card {
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 14px;
  padding: 14px 14px 13px;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  align-self: start;
  display: flex;
  flex-direction: column;
}

.help-wizard-card:hover {
  border-color: rgba(69, 83, 179, 0.28);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.help-wizard-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.help-wizard-card__title {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 690;
  color: #475569;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.help-wizard-card__edit {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(69, 83, 179, 0.2);
  background: rgba(69, 83, 179, 0.08);
  color: #3341a6;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  line-height: 1;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.help-wizard-card__edit:hover {
  border-color: rgba(69, 83, 179, 0.3);
  background: rgba(69, 83, 179, 0.14);
  color: #2d3a96;
}

.help-wizard-card__edit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(69, 83, 179, 0.18);
}

.help-wizard-card__edit:active {
  transform: translateY(1px);
}

.help-wizard-card__value {
  margin: 0;
  font-size: 16px;
  font-weight: 680;
  color: #0f172a;
  line-height: 1.38;
  letter-spacing: -0.01em;
}

.help-wizard-card__sub {
  margin: 5px 0 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.45;
}

.help-wizard-card__summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.help-wizard-card:not(.is-editing) {
  height: 120px;
}

.help-wizard-card:not(.is-editing) .help-wizard-card__summary {
  flex: 1;
  overflow: hidden;
}

.help-wizard-card:not(.is-editing) .help-wizard-card__value,
.help-wizard-card:not(.is-editing) .help-wizard-card__sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.help-wizard-card:not(.is-editing) .help-wizard-card__value {
  -webkit-line-clamp: 2;
}

.help-wizard-card:not(.is-editing) .help-wizard-card__sub {
  -webkit-line-clamp: 3;
}

.help-wizard-card.is-editing {
  height: auto;
  border-color: rgba(69, 83, 179, 0.28);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
}

.help-wizard-edit {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 10px;
}

.help-wizard-edit[hidden] {
  display: none !important;
}

.help-wizard-edit__field {
  display: grid;
  gap: 6px;
}

.help-wizard-edit__field>span {
  font-size: 12px;
  font-weight: 610;
  color: #334155;
}

.help-wizard-edit__field input,
.help-wizard-edit__field select {
  width: 100%;
  min-height: 37px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 520;
  padding: 8px 10px;
  box-sizing: border-box;
  font-family: inherit;
}

.help-wizard-edit__field input:focus-visible,
.help-wizard-edit__field select:focus-visible {
  outline: none;
  border-color: rgba(69, 83, 179, 0.46);
  box-shadow: 0 0 0 3px rgba(69, 83, 179, 0.16);
}

.help-wizard-edit__option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 9px;
  padding: 8px 10px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 550;
  justify-content: start !important;
}

.help-wizard-edit__option input {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  margin: 0 !important;
  justify-self: start;
  align-self: center;
  box-sizing: border-box;
  accent-color: var(--accent);
}

.help-wizard-edit__option>span {
  margin: 0 !important;
  justify-self: start;
  text-align: left;
}

.help-wizard-edit__option--inline {
  grid-template-columns: 18px auto;
  width: auto;
  padding: 7px 9px;
}

.help-edit-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.help-edit-parent-block {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.02);
}

.help-edit-parent-title {
  font-size: 13px;
  font-weight: 650;
  color: #1e293b;
}

.help-edit-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.help-edit-weekday {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  min-height: 34px;
  padding: 0 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 560;
  color: #334155;
  cursor: pointer;
  transition: all 0.12s ease;
}

.help-edit-weekday input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.help-edit-weekday span {
  font-size: 13px;
  font-weight: 620;
  color: #475569;
  line-height: 1;
}

.help-edit-weekday:hover {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(15, 23, 42, 0.03);
}

.help-edit-weekday:has(input:checked) {
  border-color: rgba(69, 83, 179, 0.38);
  background: rgba(69, 83, 179, 0.11);
  box-shadow: inset 0 0 0 1px rgba(69, 83, 179, 0.08);
}

.help-edit-weekday:has(input:checked) span {
  color: #3341a6;
}

.help-wizard-edit__check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 9px;
  background: #fff;
  padding: 9px 11px;
  font-size: 12.5px;
  font-weight: 520;
  color: #334155;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.help-wizard-edit__check::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid rgba(15, 23, 42, 0.35);
  background: #fff;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: all 0.12s ease;
}

.help-wizard-edit__check input {
  position: absolute;
  opacity: 0;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  pointer-events: none;
}

.help-wizard-edit__check:hover {
  border-color: rgba(15, 23, 42, 0.18);
  background: rgba(15, 23, 42, 0.03);
}

.help-wizard-edit__check:has(input:checked) {
  border-color: rgba(69, 83, 179, 0.34);
  background: rgba(69, 83, 179, 0.08);
}

.help-wizard-edit__check:has(input:checked)::before {
  border-color: #3341a6;
  background: #3341a6;
  box-shadow: inset 0 0 0 2px #fff;
}

.help-wizard-edit__check>span {
  line-height: 1.35;
}

.help-wizard-edit__note {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

.help-wizard-edit__advanced {
  margin-top: 0;
}

.help-wizard-edit__advanced-summary {
  font-size: 13px;
}

.help-wizard-edit__advanced-body {
  display: grid;
  gap: 10px;
}

.help-wizard-edit__actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.help-wizard-edit__save,
.help-wizard-edit__cancel {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 9px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 620;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s ease;
}

.help-wizard-edit__save {
  border: 1px solid #3341a6;
  background: #3341a6;
  color: #fff;
}

.help-wizard-edit__save:hover {
  background: #2d3a96;
  border-color: #2d3a96;
}

.help-wizard-edit__cancel {
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #fff;
  color: #334155;
}

.help-wizard-edit__cancel:hover {
  border-color: rgba(15, 23, 42, 0.24);
  background: rgba(15, 23, 42, 0.04);
}

@keyframes helpOverviewFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] #plannerCardHelp .plan-settings__title {
  animation: helpOverviewFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] #plannerCardHelp .plan-settings__status {
  animation: helpOverviewFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.05s;
}

.planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] #plannerCardHelp .help-wizard-card {
  animation: helpOverviewFadeUp 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] #plannerCardHelp .help-wizard-card:nth-child(1) {
  animation-delay: 0.08s;
}

.planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] #plannerCardHelp .help-wizard-card:nth-child(2) {
  animation-delay: 0.12s;
}

.planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] #plannerCardHelp .help-wizard-card:nth-child(3) {
  animation-delay: 0.16s;
}

.planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] #plannerCardHelp .help-wizard-card:nth-child(4) {
  animation-delay: 0.2s;
}

.planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] #plannerCardHelp .help-wizard-card:nth-child(5) {
  animation-delay: 0.24s;
}

.planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] #plannerCardHelp .help-wizard-card:nth-child(6) {
  animation-delay: 0.28s;
}





@media (prefers-reduced-motion: reduce) {

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] #plannerCardHelp .plan-settings__title,
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] #plannerCardHelp .plan-settings__status,
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] #plannerCardHelp .help-wizard-card {
    animation: none;
  }
}

/* Gruppering: "Viktig information (N)" – expandable på mobil, osynlig rubrik på desktop */
.warnings-group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin: 0;
  padding: 0;
}

.warnings-group__summary {
  list-style: none;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.03);
}

.warnings-group__summary::-webkit-details-marker {
  display: none;
}

.warnings-group__summary::after {
  content: "▼";
  font-size: 10px;
  opacity: 0.6;
  margin-left: auto;
  transition: transform 0.2s ease;
}

.warnings-group:not([open]) .warnings-group__summary::after {
  transform: rotate(-90deg);
}

.warnings-group__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 6px;
}

.warnings-group__list>*:last-child {
  margin-bottom: 0;
}

/* Desktop: visa bara listan, ingen grupp-rubrik */
@media (min-width: 901px) {
  .warnings-group__list {
    margin-top: 0;
  }
}

/* Mobil: visa grupp-rubrik "Viktig information (N)" som expandable */


/* Hjälp & inställningar – samma kort-ram som Ekonomi och Föräldrar & överföringar */
.help-settings-card {
  margin-top: 0;
}

/* Hjälp & inställningar i vänsterkolumnen (desktop) – dölj på mobil */
.help-settings-desktop-left {
  margin-bottom: 16px;
}



/* Hjälp & inställningar – endast i mobil översikt (längst ner) */
.help-settings-mobile {
  display: none;
}

.help-settings-row--btn {
  appearance: none;
  -webkit-appearance: none;
}

.help-settings-card__inner {
  margin-top: 0;
  padding: 20px 20px 16px;
}

.help-settings-card .summary-header {
  margin-bottom: 6px;
}

.help-settings-card .summary-title {
  font-size: 18px;
  font-weight: 800;
}

.help-settings-microcopy {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.55);
}

.help-settings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.help-settings-list__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.help-settings-list__item:last-child {
  border-bottom: none;
}

.help-settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: "Inter Variable", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  list-style: none;
  transition: background 0.12s ease;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.help-settings-row:hover {
  background: rgba(0, 0, 0, 0.03);
}

.help-settings-row__icon {
  font-size: 1.1em;
  opacity: 0.75;
  flex-shrink: 0;
}

.help-settings-row__title {
  flex: 1;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: -0.02em;
}

.help-settings-row .chev {
  font-size: 12px;
  opacity: 0.5;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.help-settings-item[open] .help-settings-row .chev {
  transform: rotate(180deg);
}

.help-settings-item__body {
  padding: 0 0 12px 0;
  padding-left: calc(1em + 10px);
}

.help-settings-item__body .details__body {
  padding-left: 0;
}

.help-settings-item#regler-details .help-settings-item__body {
  padding-left: 0;
}

.help-settings-row--link .chev {
  opacity: 0.6;
}

/* Details marker döljs – vi använder egen chevron */
.help-settings-item summary.help-settings-row::-webkit-details-marker {
  display: none;
}

.help-settings-item summary.help-settings-row::marker {
  content: none;
}

/* Systemsektion: settings-style (legacy / mobil) */
.aside-system-section {
  margin-top: 0;
  border-radius: 12px;
  overflow: hidden;
  border: none;
  box-shadow: none;
}

/* Mobil: mer luft ovanför = byt mental zon (24–32px) */


.aside-system-section .details {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Mobil: systemrader i Inter Variable, 16px, subtil text – premium list/navigation */
.aside-system-section .details__summary {
  padding: 0px;
  min-height: 58px;
  font-family: "Inter Variable", "Inter", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.88);
  transition: background 0.12s ease;
}

.aside-system-section .details__summary:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* Ikon ~70% opacity; text 85–90% – inte fullsvart */
.aside-system-section .details__summary .details__summary-icon {
  font-size: 1.1em;
  opacity: 0.7;
  flex-shrink: 0;
}

.aside-system-section .details__summary .h3 {
  margin: 0;
  font-family: "Inter Variable", "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.88);
  flex: 1;
}

.info-hub-trigger {
  display: none;
  width: 100%;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 16px;
  border: none;
  background: transparent;
  font-family: "Inter Variable", "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.88);
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.12s ease;
}

.info-hub-trigger:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* Regler & inställningar: inline accordion (▼ visas och roterar) – ingen sheet */

/* Desktop: hub-rad dold (varningar i vänsterkolumn eller slot dold); grupp synlig i slot på desktop är redan dold (slot display:none) */
@media (min-width: 901px) {
  .warnings-aside-root .info-hub-trigger {
    display: none;
  }

  .warnings-aside-root .warnings-group {
    display: block;
  }
}

/* Mobil Översikt: visa endast hub-rad i slot, grupp öppnas i sheet */


/* Sheet: Bra att veta (mobil + desktop när "Bra att veta"-raden klickas) */
.info-hub-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.planner-page.planner-app .info-hub-sheet-backdrop.is-open {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.info-hub-sheet {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85vh;
  max-height: 85svh;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  z-index: 71;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.planner-page.planner-app .info-hub-sheet.is-open {
  display: flex;
  transform: translateY(0);
}

.info-hub-sheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.info-hub-sheet__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.info-hub-sheet__close {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
}

.info-hub-sheet__body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 24px;
}

.info-hub-sheet__body .warnings-group {
  display: block;
}

.info-hub-sheet__body .warnings-group__summary {
  display: none;
}

.info-hub-sheet__body .warnings-group__list {
  margin-top: 0;
}

/* ========== Desktop: Hjälp & inställningar – samma kort som Ekonomi/Föräldrar ========== */
@media (min-width: 901px) {

  .help-settings-card .summary-card,
  .planner-aside .help-settings-card__inner {
    background: #fff;
    border-radius: var(--radius, 16px);
    border: 2px solid var(--border, rgba(0, 0, 0, 0.1));
    box-shadow: var(--shadow-soft, 0 2px 12px rgba(0, 0, 0, 0.08));
  }

  .help-settings-card .help-settings-item#regler-details .help-settings-item__body {
    padding-top: 8px;
    padding-left: 0;
  }

  /* Högerspalt: mindre vertikal spacing */
  .planner-aside .aside-card--hero {
    margin-bottom: 8px;
  }

  .planner-aside .aside-card--secondary {
    margin-bottom: 10px;
  }

  .planner-aside .aside-upgrade {
    margin-bottom: 10px;
  }

  .planner-aside .aside-warnings-desktop {
    margin-bottom: 0;
  }
}

/* Sheet: Regler & inställningar (mobil) – samma stil som Bra att veta */
.regler-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.planner-page.planner-app .regler-sheet-backdrop.is-open {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.regler-sheet {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85vh;
  max-height: 85svh;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  z-index: 71;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.planner-page.planner-app .regler-sheet.is-open {
  display: flex;
  transform: translateY(0);
}

.regler-sheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.regler-sheet__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.regler-sheet__close {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
}

.regler-sheet__body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 24px;
}

/* Details (collapsible) */
.details {
  margin-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 12px;
}

.details__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.78);
  font-family: "Inter Variable", "Inter", sans-serif;
}

.details__summary::-webkit-details-marker {
  display: none;
}

.details[open] .chev {
  transform: rotate(180deg);
}

.chev {
  transition: transform 0.18s ease;
  opacity: 0.65;
}

.details__body {
  margin-top: 12px;
}

.details__body p {
  font-family: "Inter Variable", "Inter", sans-serif;
}

.details__body .label-strong {
  font-family: "Inter Variable", "Inter", sans-serif;
}

.wizard-economy-content p {
  font-family: "Inter Variable", "Inter", sans-serif;
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

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

.check.small {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* Period: Avancerat (dubbeldagar) */
.period-advanced {
  /* använder details-styling för nedfällning */
  margin-top: 10px;
}

.period-advanced__summary {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-weight: 800;
}

.period-advanced__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.period-advanced__lock {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}

.period-advanced__panel {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.02);
}

.period-advanced__panel--birth-window {
  display: grid;
  gap: 12px;
}

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

.period-advanced__help {
  margin-top: 6px;
  font-size: 13px;
}

.period-advanced__rule-note {
  display: block;
  margin-top: 6px;
  color: #5b5ed6;
}

.radio-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.radio {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 16px;
  border: 2px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.radio:hover {
  background: var(--bg);
  border-color: var(--yazio-green);
}

.radio input[type="radio"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  accent-color: var(--yazio-green);
  cursor: pointer;
}

.radio:has(input[type="radio"]:checked) {
  border-color: var(--yazio-green);
  background: var(--yazio-green-soft);
}

.radio strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  font-family: "Inter Variable", "Inter", sans-serif;
}

.radio em {
  display: block;
  font-style: normal;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
}

/* Wizard / Modal overlay - Yazio stil */
.overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 50px 20px 20px;
  /* Top padding for header */
  overflow-y: auto;
}

#setPasswordOverlay {
  /* Keep invite/recovery password modal above onboarding wizard screens. */
  z-index: 10010;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-top: clamp(22px, 7vh, 64px);
}

#setPasswordOverlay .overlay__content {
  max-width: 560px;
}

#setPasswordOverlay .duo-modal {
  border-radius: 18px;
  border: 1px solid rgba(69, 83, 179, 0.14);
  box-shadow:
    0 26px 80px rgba(15, 23, 42, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

#setPasswordOverlay .wizard__top {
  align-items: flex-start;
  padding: 20px 22px 14px;
  background: linear-gradient(180deg, #f4f7ff 0%, #ffffff 72%);
  border-bottom: 1px solid rgba(69, 83, 179, 0.12);
}

#setPasswordOverlay .wizard__top .h3 {
  margin-bottom: 5px;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0f172a;
}

#setPasswordOverlay .modal-subtitle {
  margin-top: 0;
  max-width: 38ch;
  color: #59627c;
  font-size: 14px;
  line-height: 1.45;
}

#setPasswordOverlay #setPasswordClose.duo-btn-ghost {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.9);
  color: #475569;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 620;
}

#setPasswordOverlay #setPasswordClose.duo-btn-ghost:hover {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.2);
}

#setPasswordOverlay .wizard__body {
  text-align: left;
  padding: 20px 22px 22px;
}

#setPasswordOverlay .stack.gap-14 {
  gap: 12px;
}

#setPasswordOverlay .label-strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #334155;
}

#setPasswordOverlay .field {
  height: 48px;
  border-radius: 12px;
  border-color: rgba(15, 23, 42, 0.14);
  background: #fff;
}

#setPasswordOverlay .field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(69, 83, 179, 0.14);
}

#setPasswordOverlay #setPasswordMsg {
  min-height: 20px;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 560;
}

#setPasswordOverlay #setPasswordSave {
  margin-top: 2px;
  height: 46px;
  border-radius: 12px;
  font-weight: 720;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 24px rgba(69, 83, 179, 0.24);
}

#setPasswordOverlay #setPasswordSave:hover {
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  #setPasswordOverlay {
    padding: 14px 12px 12px;
    align-items: flex-start;
  }

  #setPasswordOverlay .wizard__top {
    padding: 16px 16px 12px;
  }

  #setPasswordOverlay .wizard__top .h3 {
    font-size: 22px;
  }

  #setPasswordOverlay .wizard__body {
    padding: 16px;
  }
}

.overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.overlay__content {
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: calc(100vh - 140px);
  /* Leave space for header and padding */
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin: auto 0;
}

body.planner-page.planner-app.edit-period-open {
  overflow: hidden;
}

body.planner-page.planner-app.plan-edit-open {
  overflow: hidden;
}

.duo-modal {
  background: #fff;
  border: none;
  border-radius: 14px;
  box-shadow: var(--shadow-modal, 0 20px 60px rgba(0, 0, 0, 0.2));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  animation: modalIn 0.15s ease;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(4px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Wizard as page: max-width, luft, ingen modal-känsla */
.wizard-overlay__content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 20px 48px;
  overflow-y: auto;
}

.wizard-page {
  width: 100%;
  max-width: 780px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

.wizard-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-wrap: wrap;
}

.wizard-back-top {
  border: none;
  background: transparent;
  padding: 6px 0;
  font: inherit;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  text-decoration: none;
}

.wizard-back-top:hover {
  color: var(--ink);
  text-decoration: underline;
}

.wizard-back-top--hidden {
  visibility: hidden;
  pointer-events: none;
}

.wizard-progress-wrap {
  flex: 1;
  min-width: 0;
  max-width: 320px;
}

.wizard-progress__label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: -0.01em;
  margin: 0 0 6px 0;
}

.wizard-progress__track {
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.wizard-progress__bar {
  height: 100%;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.wizard-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.wizard-close-link {
  border: none;
  background: transparent;
  padding: 6px 8px;
  margin: 0;
  font: inherit;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.wizard-close-link:hover {
  color: rgba(0, 0, 0, 0.70);
  text-decoration: underline;
}

.wizard-close-link:focus-visible {
  outline: 2px solid rgba(0, 200, 185, 0.55);
  outline-offset: 2px;
  border-radius: 10px;
}

.wizard-auth-row {
  flex-shrink: 0;
  margin-top: 0;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.wizard-login-link {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--yazio-green);
  font-weight: 800;
  cursor: pointer;
}

.wizard-login-link:hover {
  text-decoration: underline;
}

.wizard-footer {
  display: flex;
  justify-content: center;
  padding: 24px 24px 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.wizard-footer .wizard-cta {
  min-width: 200px;
}

.wizard__top {
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.wizard__top .h3 {
  font-size: 16px;
  font-weight: 640;
  letter-spacing: -0.02em;
  margin: 0;
}

.modal-subtitle {
  font-size: 13px;
  color: var(--text-tertiary, #94a3b8);
  font-weight: 420;
  margin-top: 2px;
}

.wizard__body {
  padding: 20px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wizard__body .wizard-title {
  margin-bottom: 8px;
}

.wizard__body .wizard-subtitle {
  margin-bottom: 32px;
}

.wizard__bottom {
  padding: 14px 24px 20px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.modal-close {
  all: unset;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md, 7px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary, #94a3b8);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all var(--transition-fast, 0.12s ease);
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary, #64748b);
}

.modal-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.modal-field-label {
  font-size: 11px;
  font-weight: 560;
  color: var(--text-tertiary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

.modal-field-btn {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-md, 7px);
  border: 1px solid var(--border-input, rgba(0, 0, 0, 0.1));
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.modal-field-btn span {
  flex: 1;
}

.modal-info {
  font-size: 12px;
  color: var(--text-tertiary, #94a3b8);
  font-weight: 420;
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: var(--radius-md, 7px);
}

.wizard-reassurance {
  margin: 12px 0 0 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
}

.wizard-economy-reassurance {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.55);
}

.wizard-upgrade-price-note {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.wizard-upgrade-price-note span {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: line-through;
}

.wizard-premium-paywall {
  margin: 24px auto 0;
  max-width: 760px;
  text-align: left;
  border: 1px solid rgba(99, 91, 255, 0.16);
  background: linear-gradient(180deg, #ffffff 0%, #fafaff 100%);
  box-shadow: 0 14px 40px rgba(31, 32, 72, 0.08);
}

.wizard-premium-paywall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.wizard-premium-paywall__left {
  min-width: 0;
}

.wizard-premium-paywall__badge {
  margin-bottom: 12px;
}

.wizard-premium-paywall .premium-upgrade-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 14px;
  background: rgba(99, 91, 255, 0.07);
  border: 1px solid rgba(99, 91, 255, 0.12);
  font-size: 11px;
  font-weight: 700;
  color: #635bff;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.wizard-premium-paywall .premium-upgrade-modal__badge svg {
  width: 13px;
  height: 13px;
}

.wizard-premium-paywall__title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #0f0f18;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

.wizard-premium-paywall__lead {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #5c5c72;
}

.wizard-premium-paywall__divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}

.wizard-premium-paywall__features {
  gap: 12px;
}

.wizard-premium-paywall .premium-upgrade-features {
  padding: 0;
  border-top: 0;
}

.wizard-premium-paywall .premium-upgrade-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
}

.wizard-premium-paywall .premium-upgrade-feature+.premium-upgrade-feature {
  border-top: 0;
}

.wizard-premium-paywall .premium-upgrade-feature__icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(99, 91, 255, 0.07);
  color: #635bff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.wizard-premium-paywall .premium-upgrade-feature__icon svg {
  width: 12px;
  height: 12px;
}

.wizard-premium-paywall .premium-upgrade-feature strong {
  color: #0f0f18;
  font-weight: 600;
}

.wizard-premium-paywall__features .premium-upgrade-feature span {
  font-size: 14px;
}

.wizard-premium-paywall__right {
  min-width: 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  background: linear-gradient(180deg, #f7f8ff 0%, #f1f3fa 100%);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-premium-paywall__offer {
  text-align: center;
}

.wizard-premium-paywall__offer-label {
  font-size: 11px;
  font-weight: 700;
  color: #635bff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wizard-premium-paywall__offer-main {
  margin-top: 2px;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #0f0f18;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

.wizard-premium-paywall__offer-old {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  color: #8184a0;
  text-decoration: line-through;
}

.wizard-premium-paywall__offer-meta {
  margin-top: 4px;
  font-size: 13px;
  color: #8184a0;
}

.wizard-premium-paywall__preview {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(99, 91, 255, 0.12);
  background: linear-gradient(180deg, rgba(99, 91, 255, 0.08) 0%, rgba(99, 91, 255, 0.03) 100%);
}

.wizard-premium-paywall__preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #636782;
  letter-spacing: 0.01em;
}

.wizard-premium-paywall__preview-row:not(:last-child) {
  margin-bottom: 8px;
}

.wizard-premium-paywall__preview-row strong {
  font-size: 12.5px;
  font-weight: 700;
  color: #7f83a0;
  letter-spacing: 0.08em;
}

.wizard-premium-paywall__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.wizard-premium-paywall__actions .duo-btn {
  width: 100%;
  justify-content: center;
}

.wizard-premium-paywall__skip {
  border-color: rgba(15, 15, 24, 0.14);
  color: #50556d;
}

.wizard-premium-paywall__cta {
  background: linear-gradient(135deg, #625cf4 0%, #5b55ee 100%);
  border: none;
}

.wizard-premium-paywall__cta:hover {
  background: linear-gradient(135deg, #5a54ea 0%, #5450e3 100%);
}

.wizard-upgrade-price-note--inline {
  margin-top: 0;
}

.wizard-next-steps {
  margin-top: 40px;
  text-align: left;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.wizard-next-steps__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.wizard-next-steps__list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}

.wizard__body--left {
  text-align: left;
}

.duo-modal--w520 {
  max-width: 520px;
}

.duo-modal--w560 {
  max-width: 560px;
}

.duo-modal--w600 {
  max-width: 600px;
}

.duo-modal--w640 {
  max-width: 640px;
}

.duo-modal--w820 {
  max-width: 820px;
}

/* Small layout utilities (used to replace inline styles) */
.gap-10 {
  gap: 10px;
}

.gap-12 {
  gap: 12px;
}

.gap-14 {
  gap: 14px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-24 {
  margin-top: 24px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-10 {
  margin-bottom: 10px;
}

.text-13 {
  font-size: 13px;
}

.fineprint--left {
  text-align: left;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}



/* Economy modal spacing */
#economyUpgrade {
  margin-top: 16px;
}

#economyForm {
  gap: 24px;
}

#economySave {
  margin-top: 24px;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 16px;
}

/* Saved plans modal helpers */
.saved-plans-modal {
  border: 1px solid #cfd3da;
  border-radius: 20px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.14);
}

#savedPlansOverlay {
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

#savedPlansOverlay .overlay__content {
  max-width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  margin: 0;
}

#savedPlansOverlay .saved-plans-modal {
  width: 100%;
  margin-inline: auto;
}

#savedPlansOverlay .overlay__backdrop {
  background: rgba(15, 23, 42, 0.24);
}

.saved-plans-modal .saved-plans-modal__top {
  padding: 22px 30px 18px;
  border-bottom: 1px solid #e4e7ec;
  align-items: flex-start;
}

.saved-plans-modal #savedPlansHeaderTitle {
  margin: 0;
  font-size: 21px;
  line-height: 1.1;
  font-weight: 760;
  letter-spacing: -0.03em;
  color: #171923;
}

.saved-plans-modal #savedPlansHeaderSubtitle {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: #8c8fa5;
  font-weight: 520;
}

.saved-plans-modal .saved-plans-modal__close {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 1px solid #d7dbe2;
  background: #fff;
  color: #666a80;
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}

.saved-plans-modal .saved-plans-modal__close:hover {
  background: #f5f7fb;
  border-color: #cdd2dc;
  color: #4f5368;
}

.saved-plans-modal .wizard__body {
  padding: 22px 30px 26px;
}

.saved-plans-modal #savedPlansMsg {
  margin-bottom: 12px;
}

.saved-plans-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.saved-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
}

.saved-plan-row__left {
  min-width: 0;
  flex: 1;
}

.saved-plan-row__title-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.saved-plan-row__title {
  margin: 0;
  min-width: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 730;
  letter-spacing: -0.02em;
  color: #1a1d27;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saved-plan-row__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 9px;
  background: rgba(93, 91, 242, 0.12);
  color: #5d5bf2;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.saved-plan-row__date {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #8f93a8;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.saved-plan-row__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.saved-plan-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 98px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 620;
  transition: all 140ms ease;
}

.saved-plan-btn--open {
  background: #5d5bf2;
  border: 1px solid #5d5bf2;
  color: #fff;
  box-shadow: 0 4px 10px rgba(93, 91, 242, 0.2);
}

.saved-plan-btn--open:hover {
  background: #4f4de4;
  border-color: #4f4de4;
}

.saved-plan-btn--delete {
  background: #fff;
  border: 1px solid #d6dae2;
  color: #8f93a8;
}

.saved-plan-btn--delete:hover {
  background: #f7f8fb;
  border-color: #c9ced8;
  color: #707489;
}

.saved-plans-modal #savedPlansSaveSection {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e6e9f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfcff 0%, #f5f7fc 100%);
}

.saved-plans-modal #savedPlansSaveSection > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dfe4eb;
  border-radius: 12px;
  background: #fff;
}

.saved-plans-modal #savedPlansSaveSection .label-strong {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 760;
  color: #7b8197;
}

.saved-plans-modal #savedPlansSaveSection #savedPlansTitle {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid #d4d9e4;
  background: #fff;
  font-size: 14px;
  padding: 0 12px;
}

.saved-plans-modal #savedPlansSaveSection #savedPlansTitle::placeholder {
  color: #9aa0b5;
  font-size: 13px;
  font-weight: 420;
}

.saved-plans-modal #savedPlansSaveSection #savedPlansTitle:focus {
  border-color: #5d5bf2;
  box-shadow: 0 0 0 3px rgba(93, 91, 242, 0.12);
}

.saved-plans-modal #savedPlansSaveSection .sparade_knappar1,
.saved-plans-modal #savedPlansSaveSection .sparade_knappar2 {
  margin: 0;
}

.saved-plans-modal #savedPlansSaveSection .sparade_knappar1 .flex,
.saved-plans-modal #savedPlansSaveSection .sparade_knappar2 .flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.saved-plans-modal #savedPlansSaveSection .duo-btn {
  min-height: 42px;
  border-radius: 10px;
  font-weight: 620;
  justify-content: center;
}

.saved-plans-modal #savedPlansSaveSection #savedPlansSaveUpdate:disabled {
  background: #f6f8fc;
  border-color: #d8dde7;
  color: #8f93a8;
  box-shadow: none;
  opacity: 1;
}

.saved-plans-empty {
  text-align: center;
  padding: 18px;
}

.saved-plans-confirm {
  position: relative;
  padding: 12px 14px 12px 28px;
  border: 1px solid #dfe4eb;
  border-radius: 12px;
  background: #fff;
}

.saved-plans-confirm::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5d5bf2;
  box-shadow: 0 0 0 4px rgba(93, 91, 242, 0.15);
}

.saved-plans-confirm__title {
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1a1d27;
}

.saved-plans-confirm__text {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: #6b7085;
}

.saved-plans-confirm-actions {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e6e9f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfcff 0%, #f5f7fc 100%);
}

.saved-plans-confirm-actions__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.saved-plans-confirm-actions .duo-btn {
  min-height: 42px;
  border-radius: 10px;
  font-weight: 620;
}

.saved-plans-confirm-actions__cancel {
  margin-top: 2px;
}

@media (max-width: 720px) {
  .saved-plans-modal #savedPlansSaveSection .sparade_knappar1 .flex,
  .saved-plans-modal #savedPlansSaveSection .sparade_knappar2 .flex {
    grid-template-columns: 1fr;
  }

  .saved-plans-confirm-actions__row {
    grid-template-columns: 1fr;
  }
}



/* Share modal helpers */
#shareUrlField {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-size: 13px;
}

/* Override for economy step */
.wizard__body .wizard-economy-content {
  text-align: left;
}

/* New Wizard Components - Linear style */
.wiz-selection-card {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 28px 24px;
  border-radius: 10px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  transition: all 0.15s ease;
  text-align: center;
  box-sizing: border-box;
  position: relative;
}

.wiz-selection-card:hover {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.015);
}

.wiz-selection-card--selected {
  border: 2px solid var(--accent);
  background: rgba(81, 97, 214, 0.04);
}

.wiz-selection-card__check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wiz-selection-card__title {
  font-size: 16px;
  font-weight: 620;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.wiz-selection-card__desc {
  font-size: 13px;
  color: #64748b;
  font-weight: 420;
  margin-top: 4px;
}

.wiz-field-input {
  width: 100%;
}

.wiz-field-input__label {
  display: block;
  font-size: 13px;
  font-weight: 560;
  color: #0f172a;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.wiz-field-input__input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  box-shadow: none;
  font-size: 15px;
  font-weight: 480;
  color: #0f172a;
  font-family: inherit;
  outline: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
  background: #fff;
}

.wiz-field-input__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(81, 97, 214, 0.1);
}

.wiz-field-input__input--salary::placeholder {
  font-size: 12px;
}

.wiz-field-input__hint {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 420;
  margin-top: 5px;
  line-height: 1.45;
}

.wiz-checkbox-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  max-width: 100%;
  font-size: 15px;
  font-weight: 560;
  color: #0f172a;
}

.wiz-checkbox-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
}

.wiz-checkbox-row span {
  margin: 0;
  flex: 0 0 auto;
}

.wiz-adoption-fields {
  display: grid;
  gap: 12px;
}

.wiz-microcopy--left {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  text-align: left;
}

.wiz-radio-card {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.wiz-radio-card:hover {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.015);
}

.wiz-radio-card--selected,
.wiz-radio-card[data-selected="true"] {
  border: 2px solid var(--accent);
  background: rgba(81, 97, 214, 0.04);
}

.wiz-radio-card__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.12s ease;
  box-sizing: border-box;
}

.wiz-radio-card--selected .wiz-radio-card__radio,
.wiz-radio-card[data-selected="true"] .wiz-radio-card__radio {
  border: 5px solid var(--accent);
}

.wiz-radio-card__title {
  font-size: 14px;
  font-weight: 560;
  color: #0f172a;
}

.wiz-radio-card__desc {
  font-size: 12px;
  color: #64748b;
  font-weight: 420;
  margin-top: 2px;
  line-height: 1.4;
}

.wiz-checkbox {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
}

.wiz-checkbox__box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
  flex-shrink: 0;
}

.wiz-checkbox--checked .wiz-checkbox__box {
  border: none;
  background: var(--accent);
}

.wiz-economy-box {
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.wiz-step-subtitle {
  font-size: 14px;
  color: #94a3b8;
  font-weight: 420;
  margin: 0 0 32px;
  text-align: center;
}

.wizard-rules-step {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.wizard-rules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
}

.wizard-rules-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: #fff;
  padding: 16px;
}

.wizard-rules-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.wizard-rules-card__name {
  margin: 0;
  font-size: 16px;
  font-weight: 620;
  color: #0f172a;
  letter-spacing: -0.015em;
}

.wizard-rules-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(99, 91, 255, 0.1);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.wizard-rules-group {
  margin-bottom: 14px;
}

.wizard-rules-group__label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}

.wizard-rules-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.wizard-rules-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9px;
  padding: 10px 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.wizard-rules-option:hover {
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.015);
}

.wizard-rules-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(81, 97, 214, 0.05);
}

.wizard-rules-option input {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  text-align: left !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: inherit !important;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.wizard-rules-option__text {
  font-size: 14px;
  font-weight: 520;
  color: #0f172a;
}

.wizard-rules-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.015);
  padding: 11px 12px;
  cursor: pointer;
}

.wizard-rules-check input {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  text-align: left !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: inherit !important;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.wizard-rules-check__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wizard-rules-check__title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
}

.wizard-rules-check__hint {
  font-size: 12px;
  color: #64748b;
  font-weight: 420;
  line-height: 1.4;
}

.wiz-step-note {
  font-size: 12px;
  color: #b0b8c4;
  font-weight: 420;
  margin: 0;
  text-align: center;
}

/* Premium-ekonomi i wizard: samma visuella språk som "Justera ekonomi" */
.wiz-economy-premium {
  width: 100%;
  text-align: left;
}

.wiz-economy-premium__subtitle {
  margin: 0 0 6px;
  text-align: center;
  color: #60657d;
}

.wiz-economy-premium__note {
  margin: 0 0 24px;
  text-align: center;
  color: #8f95aa;
}

.wiz-economy-premium__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.wiz-economy-premium__divider {
  display: none;
}

.wiz-economy-premium__column {
  min-width: 0;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(15, 15, 24, 0.1);
  background: #f5f5f7;
}

.wiz-economy-premium__column-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.wiz-economy-premium__column-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.wiz-economy-premium__column-name {
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.01em;
  color: #0f0f18;
}

.wiz-economy-premium__situation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.wiz-economy-premium .wiz-radio-card {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(15, 15, 24, 0.09);
  background: #fff;
  gap: 10px;
}

.wiz-economy-premium .wiz-radio-card:hover {
  border-color: rgba(15, 15, 24, 0.15);
  background: #fff;
}

.wiz-economy-premium .wiz-radio-card[data-selected="true"] {
  border-color: #635bff;
  background: rgba(99, 91, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.08);
}

.wiz-economy-premium .wiz-radio-card__radio {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 2px solid rgba(0, 0, 0, 0.14);
}

.wiz-economy-premium .wiz-radio-card[data-selected="true"] .wiz-radio-card__radio {
  border: 2px solid #635bff;
  background: #635bff;
  box-shadow: inset 0 0 0 4px #fff;
}

.wiz-economy-premium .wiz-radio-card__content {
  flex: 1;
  min-width: 0;
}

.wiz-economy-premium .wiz-radio-card__title {
  font-size: 13px;
  font-weight: 600;
  color: #0f0f18;
}

.wiz-economy-premium .wiz-radio-card__desc {
  font-size: 12px;
  color: #9494a8;
  line-height: 1.4;
}

.wiz-economy-premium .wiz-economy-box {
  padding: 14px;
  border: 1px solid rgba(15, 15, 24, 0.09);
  border-radius: 10px;
  background: #fff;
}

.wiz-economy-premium .wiz-field-input--spaced {
  margin-bottom: 14px;
}

.wiz-economy-premium .wiz-field-input__label {
  font-size: 13px;
  font-weight: 600;
  color: #0f0f18;
  margin-bottom: 6px;
}

.wiz-economy-premium .wiz-field-input__input {
  border: 1px solid rgba(15, 15, 24, 0.16);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 520;
  color: #0f0f18;
  background: #fff;
}

.wiz-economy-premium .wiz-field-input__input:focus {
  border-color: #635bff;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
}

.wiz-economy-premium .wiz-field-input__input::placeholder {
  font-size: 14px;
  font-weight: 450;
  color: rgba(15, 15, 24, 0.35);
  letter-spacing: 0;
  opacity: 1;
}

.wiz-economy-premium__field-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #666b80;
  line-height: 1.45;
}

.wiz-economy-premium__sgi-box {
  margin: 0 0 12px;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid rgba(99, 91, 255, 0.22);
  background: rgba(99, 91, 255, 0.08);
}

.wiz-economy-premium__sgi-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #1f2436;
}

.wiz-economy-premium__sgi-sub {
  font-size: 12px;
  color: #5f6480;
}

.wiz-economy-premium__details-summary {
  font-size: 13px;
  font-weight: 600;
  color: #1f2436;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wiz-economy-premium__details-chevron {
  flex-shrink: 0;
  margin-left: 8px;
  opacity: 0.65;
  transition: transform 0.18s ease;
}

.wiz-economy-premium__details-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 15, 24, 0.12);
}

.wiz-economy-premium__details-copy {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5166;
}

.wiz-economy-premium__sgi-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  cursor: pointer;
}

.wiz-economy-premium__sgi-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #635bff;
}

.wiz-economy-premium__sgi-check-label {
  font-size: 13px;
  color: #1f2436;
}

.wiz-economy-premium__parental-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f0f18;
  margin-bottom: 4px;
}

.wiz-economy-premium__parental-desc {
  font-size: 12px;
  line-height: 1.4;
  color: #7a8098;
  margin-bottom: 8px;
}

.wiz-economy-premium .wiz-checkbox--economy {
  font-size: 13px;
  font-weight: 600;
  color: #0f0f18;
}

.wiz-economy-premium .wiz-checkbox--economy .wiz-checkbox__box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border-color: rgba(15, 15, 24, 0.24);
}

.wiz-economy-premium .wiz-checkbox--economy.wiz-checkbox--checked .wiz-checkbox__box {
  border-color: #635bff;
  background: #635bff;
}

.wiz-economy-premium__parental-fields {
  margin-top: 12px;
  display: flex;
  gap: 12px;
}

.wiz-economy-premium__footer-note {
  margin-top: 20px;
  text-align: center;
}

@media (min-width: 900px) {
  .wiz-economy-premium__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (max-width: 899px) {
  .wiz-economy-premium__parental-fields {
    flex-direction: column;
  }
}

.wiz-section-title {
  font-size: 16px;
  font-weight: 620;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: #0f172a;
}

.wiz-section-desc {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 420;
  margin: 0 0 14px;
  line-height: 1.5;
}

.wiz-done-check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #00c8b9;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto;
  font-weight: 700;
}

.wiz-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.wiz-summary-row__label {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.wiz-summary-row__value {
  font-size: 14px;
  color: #0f172a;
  font-weight: 600;
}

.wizard-header {
  padding: 0 28px !important;
  height: 56px !important;
  min-height: 56px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.wizard-back-top {
  all: unset !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  font-weight: 520 !important;
  color: #64748b !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  transition: all 0.12s !important;
}

.wizard-back-top:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}

.wizard-progress-wrap {
  max-width: 400px !important;
}

.wizard-progress__label {
  font-size: 12px !important;
  font-weight: 480 !important;
  color: #94a3b8 !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.wizard-progress__label-time {
  font-size: 12px;
  font-weight: 420;
  color: #b0b8c4;
}

.wizard-progress__track {
  height: 4px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border-radius: 2px !important;
}

.wizard-progress__bar {
  background: var(--accent) !important;
  border-radius: 2px !important;
  transition: width 0.4s ease !important;
}

.wizard-auth-row {
  font-size: 13px !important;
  color: #94a3b8 !important;
  font-weight: 420 !important;
}

.wizard-login-link {
  all: unset !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  color: var(--accent) !important;
  transition: opacity 0.12s !important;
}

.wizard-login-link:hover {
  opacity: 0.7 !important;
}

.wizard-close-link {
  all: unset !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  transition: all 0.12s !important;
}

.wizard-close-link:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #64748b !important;
}

.wizard-footer {
  padding: 16px 28px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.wizard-footer .wizard-cta {
  all: unset !important;
  cursor: pointer !important;
  padding: 12px 40px !important;
  border-radius: 9px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  background: #0f172a !important;
  color: #fff !important;
  transition: all 0.15s ease !important;
  letter-spacing: -0.01em !important;
  display: inline-block !important;
  min-width: auto !important;
}

.wizard-footer .wizard-cta:hover {
  opacity: 0.88 !important;
}

.wizard__body {
  padding: 48px 32px 120px !important;
}

.wizard-title {
  font-size: 24px !important;
  font-weight: 660 !important;
  letter-spacing: -0.03em !important;
  text-align: center !important;
  margin: 0 0 8px !important;
}

/* Economy step specific styling */
.wizard-economy-content {
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* Kompaktare styling för ekonomi-modalen */
#economyForm .wizard-economy-content {
  max-width: 100%;
}

#economyForm .wizard-economy-section-title {
  font-size: 18px;
  margin-bottom: 12px;
}

#economyForm .wizard-economy-content .label-strong {
  font-size: 14px;
  margin-bottom: 8px;
}

#economyForm .radio {
  padding: 12px;
}

#economyForm .radio strong {
  font-size: 15px;
}

#economyForm .radio em {
  font-size: 13px;
}

#economyForm .wizard-economy-sgi-box {
  padding: 12px;
  margin-bottom: 12px;
}

#economyForm .wizard-economy-sgi-box p {
  font-size: 14px;
}

#economyForm .field {
  font-size: 15px;
  padding: 10px 12px;
}

#economyForm .details__summary {
  font-size: 13px;
}

#economyForm .details__body {
  font-size: 13px;
}

#economyForm .details__body p {
  font-size: 13px;
  margin-bottom: 10px;
}

#economyForm .check {
  font-size: 14px;
}

#economyForm .check span {
  font-size: 14px;
}

/* Minska padding i expanderade sektioner för modalen */
#economyForm .wizard-economy-content #economy-income-input-a:not(.hidden),
#economyForm .wizard-economy-content #economy-income-input-b:not(.hidden),
#economyForm .wizard-economy-content #economy-student-content-a:not(.hidden),
#economyForm .wizard-economy-content #economy-student-content-b:not(.hidden),
#economyForm .wizard-economy-content #economy-no-income-content-a:not(.hidden),
#economyForm .wizard-economy-content #economy-no-income-content-b:not(.hidden) {
  padding: 16px;
}

/* Föräldralön-sektion i modalen */
#economyForm #economy-parental-leave-section-a,
#economyForm #economy-parental-leave-section-b {
  margin-top: 16px;
  padding-top: 16px;
}

#economyForm #economy-parental-leave-section-a h4,
#economyForm #economy-parental-leave-section-b h4 {
  font-size: 15px;
  margin-bottom: 6px;
}

#economyForm #economy-parental-leave-section-a p,
#economyForm #economy-parental-leave-section-b p {
  font-size: 13px;
  margin-bottom: 12px;
}

/* Center title and subtitle in economy step */
.wizard-economy-content .wizard-title,
.wizard-economy-content .wizard-subtitle {
  text-align: center;
}

.wizard-economy-parents {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 5px;
}

@media (min-width: 768px) {
  .wizard-economy-parents {
    grid-template-columns: 1fr 1fr;
  }
}

.wizard-economy-section {
  margin-top: 0;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 16px;
}

.wizard-economy-section:first-of-type {
  margin-top: 0;
}

.wizard-economy-section:focus-within {
  background: rgba(0, 0, 0, 0.035);
}

.wizard-economy-section--separator {
  padding-top: 0;
  border-top: none;
}

.wizard-economy-section-title {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 16px;
  margin-top: 5px;
  color: var(--ink);
  display: block;
  font-family: "Inter Variable", "Inter", sans-serif;
}

.wizard-economy-decision__title {
  font-size: 14px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.70);
  margin: 0 0 10px;
}

.wizard-economy-content .label-strong {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--ink);
  font-family: "Inter Variable", "Inter", sans-serif;
}

.wizard-economy-sgi-box {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg);
  border-radius: 12px;
}

.wizard-economy-sgi-box p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  font-family: "Inter Variable", "Inter", sans-serif;
}

.wizard-economy-content .radio-stack {
  margin-top: 0;
}

.wizard-economy-content .radio {
  margin-bottom: 0;
}

.wizard-economy-content .wizard-economy-section,
.wizard-economy-content .wizard-economy-section * {
  min-width: 0;
}

/* Delete button styling för perioder */
.delete-btn:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #dc2626 !important;
}

/* Visuell feedback för nedfällbara fält i wizard */
.wizard-economy-content #income-input-a:not(.hidden),
.wizard-economy-content #income-input-b:not(.hidden),
.wizard-economy-content #student-content-a:not(.hidden),
.wizard-economy-content #student-content-b:not(.hidden),
.wizard-economy-content #no-income-content-a:not(.hidden),
.wizard-economy-content #no-income-content-b:not(.hidden) {
  margin-left: 0 !important;
  margin-top: 16px;
  padding: 20px;
  border-radius: 12px;
  background: var(--yazio-green-soft);
  border: 2px solid var(--yazio-green);
  transition: all 0.3s ease;
  animation: slideDown 0.3s ease;
}

/* Samma styling för ekonomi-modalen */
.wizard-economy-content #economy-income-input-a:not(.hidden),
.wizard-economy-content #economy-income-input-b:not(.hidden),
.wizard-economy-content #economy-student-content-a:not(.hidden),
.wizard-economy-content #economy-student-content-b:not(.hidden),
.wizard-economy-content #economy-no-income-content-a:not(.hidden),
.wizard-economy-content #economy-no-income-content-b:not(.hidden) {
  margin-left: 0 !important;
  margin-top: 16px;
  padding: 20px;
  border-radius: 12px;
  background: var(--yazio-green-soft);
  border: 2px solid var(--yazio-green);
  transition: all 0.3s ease;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Progress bar - Yazio stil */
.duo-track {
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.duo-bar {
  height: 4px;
  background: var(--yazio-green);
  border-radius: 999px;
  transition: width 0.25s ease;
}

/* Tiles: crisp, neutral selection (Stripe/Linear) */
.tile {
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.tile:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

.tile[data-active="true"] {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
  box-shadow: none;
}

.tile-emoji {
  font-size: 80px;
  line-height: 1;
  margin: 0;
  display: block;
}

.tile-label {
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
  font-family: "Inter Variable", "Inter", sans-serif;
}

.tile-sub {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.tile--compact {
  padding: 16px;
  gap: 6px;
}

.tile--compact .tile-label {
  font-size: 16px;
  font-family: "Inter Variable", "Inter", sans-serif;
}

.tile--compact .tile-sub {
  font-size: 13px;
}

/* Wizard title och text – premium typografi */
.wizard-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 5px;
  line-height: 1.25;
  font-family: "Inter Variable", "Inter", sans-serif;
}

.wizard-subtitle {
  font-size: 17px;
  color: var(--muted);
  margin: 0 0 0 0px;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.wizard-ten-days-sub {
  margin-top: 2px;
  margin-bottom: 12px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.5;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.wizard-ten-days-note {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.wizard-microcopy {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.5;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Wizard character (för steg med monster) */
.wizard-character {
  width: 140px;
  height: 140px;
  margin: 0 auto 28px;
  font-size: 100px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Speech bubble - Yazio stil */
.speech-bubble {
  background: #fff;
  border: none;
  border-radius: 24px;
  padding: 24px;
  margin: 0 auto 24px;
  max-width: 420px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  position: relative;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.speech-bubble::before {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 60px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid #fff;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 59px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid rgba(0, 0, 0, 0.12);
}

/* Wizard input fields */
.wizard-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 500px;
  margin: 0 auto;
  text-align: left;
}

.wizard-inputs .field {
  text-align: left;
}

.wizard-inputs .label-strong {
  font-family: "Inter Variable", "Inter", sans-serif;
}

/* När det bara finns ett fält, ta hela bredden */
.wizard-inputs>div:only-child {
  grid-column: 1 / -1;
}

/* Wizard date layout (som bilden) */
.wizard-date-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: 800px;
  margin: 0 auto;
}



.wizard-date-left {
  text-align: left;
}

.wizard-date-right {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.date-inputs {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.date-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.date-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.date-field {
  padding: 14px 16px;
  border-radius: 16px;
  border: 2px solid var(--border);
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  outline: none;
  cursor: pointer;
  min-width: 120px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.date-field:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

.date-field:focus {
  border-color: var(--yazio-green);
  box-shadow: 0 0 0 4px var(--yazio-green-soft);
}

/* Wizard completion screen */
.wizard-complete {
  text-align: center;
}

.wizard-complete-emoji {
  font-size: 120px;
  line-height: 1;
  margin: 0 0 24px;
}

.wizard-complete-title {
  font-size: 32px;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 16px;
  font-family: "Inter Variable", "Inter", sans-serif;
}

.wizard-complete-text {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 40px;
  line-height: 1.5;
}

/* Locked box */
.locked {
  border: 1px solid rgba(255, 193, 7, 0.45);
  background: rgba(255, 193, 7, 0.12);
  padding: 14px;
  border-radius: 18px;
  margin-bottom: 12px;
}

.locked__title {
  font-weight: 900;
  color: #7a5a00;
}

.locked__text {
  margin: 6px 0 0;
  color: #7a5a00;
  font-size: 13px;
}

.divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 8px 0;
}

.divider--spacious {
  margin: 24px 0;
}

/* Compare scenarios */
.compare-wrap .divider--spacious {
  margin: 18px 0;
}

.compare-header .h3 {
  margin: 0;
}

.compare-header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.compare-header-col {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.02);
}

.compare-header-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}

.compare-header-title {
  font-weight: 900;
  margin-top: 6px;
  color: var(--ink);
}

.compare-header-date {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.compare-winner__label {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}

.compare-winner__value {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
}

.compare-section-title {
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 10px;
}

.compare-table-wrap {
  overflow: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.compare-table th,
.compare-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.compare-table thead th {
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.compare-metric {
  font-weight: 800;
  color: var(--ink);
  width: 40%;
}

.compare-th-diff {
  width: 18%;
}

.compare-sub {
  margin-top: 4px;
  font-size: 12px;
}

.compare-diff {
  font-weight: 900;
  white-space: nowrap;
}

.compare-diff.diff-pos {
  color: #16a34a;
}

.compare-diff.diff-neg {
  color: #dc2626;
}

.compare-diff.diff-neutral {
  color: var(--muted);
}

.compare-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.compare-actions .duo-btn {
  flex: 1;
}

.compare-note {
  margin-top: 10px;
}



.nested {
  margin: 10px 0 0 28px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}

/* Wizard grid adjustments */
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Planner responsive */




/* Footer links */
.footer-link:hover {
  color: var(--ink) !important;
}

/* Delete button */
.delete-btn:hover {
  color: #dc2626 !important;
}

/* Tooltip */
.tooltip-container {
  position: relative;
  z-index: 1;
}

.tooltip-container:hover,
.tooltip-container:focus-within {
  z-index: 60;
}

.tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 12px;
  width: 280px;
  max-width: 90vw;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1200;
  white-space: normal;
  word-wrap: break-word;
  text-align: left;
}

.tooltip-container:hover .tooltip {
  display: block;
}

/* Summary Card - Linear style */
.summary-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: none;
  border: 1px solid rgba(0, 0, 0, 0.07);
  margin-bottom: 24px;
}

.summary-period-content {
  margin-top: 0;
}

#btn-add-period,
#add-period-sheet-submit {
  min-height: 44px;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
}

/* Period list (replace inline styles from renderPeriods) */
.period-row {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.07));
}

.period-row:first-child {
  border-radius: var(--radius-lg, 10px) var(--radius-lg, 10px) 0 0;
}

.period-row:last-child {
  border-radius: 0 0 var(--radius-lg, 10px) var(--radius-lg, 10px);
}

.period-row:not(:first-child) {
  border-top: none;
}

.period-row__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.period-row__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.period-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.period-row__top-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.period-row__dates {
  font-size: 13px;
  color: var(--text-primary, var(--ink));
  font-weight: 540;
  flex: 1;
}

.period-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
}

.period-row__info {
  font-size: 13px;
  font-weight: 540;
  color: var(--text-primary, var(--ink));
  flex: 1;
}

.period-row__detail {
  font-weight: 420;
  color: var(--text-secondary, #64748b);
}

.period-row__badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary, #94a3b8);
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
}

.period-row__edit {
  all: unset;
  cursor: pointer;
  font-size: 12px;
  font-weight: 520;
  color: var(--text-secondary, #64748b);
  padding: 4px 10px;
  border-radius: 5px;
  transition: all var(--transition-fast, 0.12s ease);
}

.period-row__edit:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary, var(--ink));
}

.delete-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink);
}

.delete-btn--period {
  margin-left: auto;
  padding: 4px;
}

.delete-btn--period svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Samma look som SGI-badgen – diskret, inte pillig */
.badge--ten-days {
  background: rgba(107, 114, 128, 0.1);
  border-color: rgba(107, 114, 128, 0.2);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 6px;
}

.period-auto {
  grid-column: 1 / -1;
}

.period-auto-box {
  font-size: 13px;
  color: var(--muted);
  padding: 0;
  background: transparent;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.period-auto-box svg {
  opacity: 0.6;
}

/* Kompakt period layout – rad1 stark, rad2 medium, metadata låg kontrast */
.period-row--compact {
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}

.period-row__swipe {
  position: relative;
  overflow: hidden;
}

.period-row__content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 100%;
  padding: 12px 16px;
  background: var(--card);
  box-sizing: border-box;
}

.period-row__delete-action {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dc2626;
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 0;
}

.period-row--compact .period-row__inner {
  gap: 4px;
}

/* Rad 1: stark – namn */
.period-row__title-line {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}

/* Rad 2: medium – datum */
.period-row__date-line {
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.3;
}

/* Rad 3: svag – metadata (SGI · d/v · dagar) */
.period-row__meta-line {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.35;
  margin-top: 2px;
}

.period-row__ten-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.period-row__ten-box .badge--ten-days {
  flex-shrink: 0;
}

.period-row__ten-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* Kalender-vy */
.periods-month {
  display: grid;
  gap: 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.calendar-month {
  --cal-gap: 1px;
  --cal-canvas: #f1f3f5;
  --cal-grid: #e6e8eb;
  background: var(--cal-canvas);
  border-radius: 16px;
  padding: 18px;
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  margin-bottom: 0;
}

.calendar-month__title {
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.015em;
  color: var(--text-primary, var(--ink));
  margin: 0;
  text-align: center;
  line-height: 1.1;
  font-family: "Inter Variable", "Inter", sans-serif;
}

.calendar-month__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 16px;
  padding: 0;
}

.calendar-nav {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md, 7px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  color: var(--text-secondary, #64748b);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast, 0.12s ease);
}

.calendar-nav:hover {
  background: rgba(0, 0, 0, 0.04);
}

.calendar-month__head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--cal-gap, 1px);
  margin-bottom: 0;
  background: var(--cal-grid);
  padding: 10px var(--cal-gap, 1px) var(--cal-gap, 1px);
}

.calendar-week-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--cal-gap, 1px);
  margin-bottom: 0;
  background: var(--cal-grid);
  padding: 0 var(--cal-gap, 1px) var(--cal-gap, 1px);
}

.calendar-week-row:last-child {
  padding-bottom: var(--cal-gap, 1px);
}

.calendar-weekday {
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  color: #6b7280;
  text-align: center;
  letter-spacing: 0.01em;
  padding: 10px 0 6px;
  background: var(--cal-canvas);
  border-radius: 6px;
}

.calendar-weekday--bulk {
  text-align: left;
  padding-left: 4px;
}

.calendar-week-bulk {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 4px 6px 4px 0;
}

.calendar-week-bulk__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.calendar-week-bulk__week {
  font-size: 12px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.6);
}

.calendar-week-bulk__label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}

.calendar-week-bulk__btns {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.calendar-week-bulk__btn {
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.calendar-week-bulk__btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.calendar-day {
  position: relative;
  aspect-ratio: 1.15;
  padding: 12px 6px 6px;
  border-radius: 6px;
  border: none;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  transition: all 0.1s ease;
  overflow: visible;
  isolation: isolate;
}

.calendar-day:hover:not(.calendar-day--outside):not(:disabled):not(.day--a):not(.day--b):not(.day--ab) {
  background: #f8fafc;
}

.calendar-day--outside {
  background: var(--cal-canvas);
  border: none;
  cursor: default;
  pointer-events: none;
  padding: 0;
}

/* Datum: mörkare, semibold — tydlig hierarki */
.calendar-day__num {
  position: absolute;
  top: 10px;
  left: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #243235;
  font-variant-numeric: tabular-nums;
}

.calendar-day.day--red-day:not(.day--a):not(.day--b):not(.day--ab) {
  background: #fff6f6;
}

.calendar-day.day--red-day:not(.day--a):not(.day--b):not(.day--ab) .calendar-day__num {
  color: #b42318;
}

.calendar-day.day--eve-day:not(.day--a):not(.day--b):not(.day--ab) {
  background: #fffaf0;
}

.calendar-day.day--eve-day:not(.day--a):not(.day--b):not(.day--ab) .calendar-day__num {
  color: #b45309;
}

.calendar-day__holiday-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
}

.calendar-day__holiday-badge.is-red {
  color: #b42318;
  background: rgba(180, 35, 24, 0.11);
}

.calendar-day__holiday-badge.is-eve {
  color: #b45309;
  background: rgba(180, 83, 9, 0.12);
}

/* Text direkt i blocket — ingen vit pill/kapsel */
.calendar-day__badge {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  top: auto;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

.calendar-day__badge-name {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-day__badge-meta {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-day__conflict {
  position: absolute;
  top: -7px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.92);
  color: #fff;
  font-weight: 900;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(239, 68, 68, 0.22);
}

.calendar-day.day--block {
  z-index: 2;
}

.calendar-day.day--block>* {
  position: relative;
  z-index: 2;
}

/* Num, badge och conflict ska alltid vara absolut (siffra uppe, text nere) — inte i flöde */
.calendar-day.day--block>.calendar-day__num,
.calendar-day.day--block>.calendar-day__badge,
.calendar-day.day--block>.calendar-day__conflict {
  position: absolute;
}

/* Keep holiday badge pinned in top-right even when day is selected/block. */
.calendar-day.day--block>.calendar-day__holiday-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
}

.calendar-day.day--block::before,
.calendar-day.day--block::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: var(--cal-gap, 1px);
  background: var(--day-fill, transparent);
  pointer-events: none;
  z-index: 1;
  display: none;
}

.calendar-day.day--block::before {
  left: calc(-1 * var(--cal-gap, 1px));
}

.calendar-day.day--block::after {
  right: calc(-1 * var(--cal-gap, 1px));
}

.calendar-day.day--cont-left::before {
  display: block;
}

.calendar-day.day--cont-right::after {
  display: block;
}

.calendar-day.day--cont-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.calendar-day.day--cont-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.calendar-day.day--cont-left.day--cont-right {
  border-radius: 0;
}

/* Subtil gradient — kuraterad, inte platt */
.calendar-day.day--a {
  --day-fill: linear-gradient(180deg,
      #6cfaec5f 0%,
      var(--parent-a-color) 80%);
  background: var(--day-fill);
}

.calendar-day.day--b {
  --day-fill: linear-gradient(180deg,
      #B5B4D4 0%,
      var(--daniel, #4f46e5) 80%);
  background: var(--day-fill);
}

.calendar-day.day--ab {
  --day-fill: linear-gradient(180deg,
      #B0BEC4 0%,
      #A2B1B8 100%);
  background: var(--day-fill);
}

.calendar-day.day--a .calendar-day__num,
.calendar-day.day--b .calendar-day__num,
.calendar-day.day--ab .calendar-day__num {
  color: #243235;
  font-weight: 600;
}

.calendar-day.day--a .calendar-day__badge-name,
.calendar-day.day--b .calendar-day__badge-name,
.calendar-day.day--ab .calendar-day__badge-name {
  color: #243235;
}

.calendar-day.day--a .calendar-day__badge-meta,
.calendar-day.day--b .calendar-day__badge-meta,
.calendar-day.day--ab .calendar-day__badge-meta {
  color: rgba(36, 50, 53, 0.6);
}

.calendar-day.day--conflict {
  outline: 2px solid rgba(239, 68, 68, 0.26);
  outline-offset: -2px;
}

.calendar-day.day--range {
  outline: 1px dashed rgba(15, 23, 42, 0.36);
  outline-offset: -1px;
}

.calendar-day.day--ten {
  background: rgba(0, 0, 0, 0.05);
}

.calendar-day.day--today {
  outline: 2px solid #4c7dff;
  outline-offset: -2px;
}

.calendar-day.day--today:not(.day--a):not(.day--b):not(.day--ab) {
  background: #f0f6ff;
}

.calendar-day:focus {
  outline: 2px solid #4c7dff;
  outline-offset: -2px;
}

.calendar-day:not(.day--a):not(.day--b):not(.day--ab):focus {
  background: #f0f6ff;
}

/* Dots for calendar-day when both parents have selected */
.calendar-day__both-dots {
  position: absolute;
  bottom: 3px;
  display: flex;
  gap: 2px;
}

.calendar-day__both-dots span {
  width: 4px;
  height: 4px;
  border-radius: 4px;
}

.calendar-day__both-dots .dot-a {
  background: var(--elin, #0f766e);
}

.calendar-day__both-dots .dot-b {
  background: var(--daniel, #4f46e5);
}

.calendar-day.day--flash {
  animation: dayFlash 1.1s ease both;
}

.calendar-day.day--select-pulse {
  animation: daySelectPulse 0.16s ease-out both;
}

@keyframes dayFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 200, 185, 0);
    transform: translateZ(0);
  }

  25% {
    box-shadow: 0 0 0 4px rgba(0, 200, 185, 0.25);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 200, 185, 0);
  }
}

@keyframes daySelectPulse {
  0% {
    transform: scale(0.98);
    filter: saturate(0.92);
  }

  100% {
    transform: scale(1);
    filter: saturate(1);
  }
}

/* Pensel (edit bar) */
.brush-bar {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
}

.brush-bar__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.brush-bar__title {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.brush-bar__chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
}

.brush-chip {
  height: auto;
  width: 100px;
  padding: 7px 10px;
  border-radius: var(--radius-md, 7px);
  border: 1px solid var(--border-input, rgba(0, 0, 0, 0.1));
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast, 0.12s ease);
}

.brush-chip--dropdown {
  min-width: 72px;
  border-radius: var(--radius-md, 7px);
  font-weight: 500;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-input, rgba(0, 0, 0, 0.1));
  color: #374151;
  font-size: 13px;
  justify-content: space-between;
  transition: all var(--transition-fast, 0.12s ease);
}

.brush-chip--dropdown:focus,
.brush-chip--dropdown.open {
  border-color: var(--accent, #4553b3);
  box-shadow: 0 0 0 2px rgba(69, 83, 179, 0.12);
}

.brush-chip--dropdown::after {
  content: "";
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6.5l3 3 3-3' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform var(--transition-med, 0.15s ease);
}

.brush-chip--dropdown.open::after {
  transform: rotate(180deg);
}

.brush-chip:hover {
  background: rgba(0, 0, 0, 0.02);
}

.brush-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.brush-chip--parent {
  border-width: 1px;
  background: rgba(0, 0, 0, 0.04);
  padding: 7px 0;
  border-radius: var(--radius-sm, 6px);
  font-size: 13px;
  font-weight: 560;
  color: var(--text-secondary, #64748b);
  transition: all var(--transition-fast, 0.12s ease);
  flex: 1;
  text-align: center;
  border-color: rgba(0, 0, 0, 0.08);
}

.brush-chip--parent[data-brush-parent="A"].is-active {
  border-color: transparent;
  background: var(--parent-a-color);
  color: #fff;
  box-shadow: none;
}

.brush-chip--parent[data-brush-parent="B"].is-active {
  border-color: transparent;
  background: var(--daniel, #4f46e5);
  color: #fff;
  box-shadow: none;
}



/* Kalender: snabbmeny (högerklick / long-press) */
.day-menu {
  position: absolute;
  z-index: 80;
  width: 180px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  display: grid;
  gap: 6px;
}

.day-menu__item {
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.day-menu__item:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
}

.day-menu__item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.day-menu__item--danger {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.18);
  color: #b91c1c;
}

.day-menu__item--danger:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.12);
}

/* Er plan just nu (list-like, Linear style) */
.plan-dates,
.periods-section {
  margin-top: 22px;
}

.plan-dates__title,
.periods-label {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 580;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary, #94a3b8);
  margin: 0 0 10px;
}

.plan-dates__months {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  overflow: hidden;
}

.plan-dates-month {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.plan-dates-month:last-child {
  border-bottom: none;
}

.plan-dates-month:first-child .plan-dates-month__summary {
  border-radius: 10px 10px 0 0;
}

.plan-dates-month:last-child .plan-dates-month__summary {
  border-radius: 0 0 10px 10px;
}

.plan-dates-month__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  cursor: pointer;
  list-style: none;
}

.plan-dates-month__summary::-webkit-details-marker {
  display: none;
}

.plan-dates-month__summary::marker {
  content: "";
}

.plan-dates-month__icon {
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23c0c7d1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

.plan-dates-month[open] .plan-dates-month__icon {
  transform: rotate(0deg);
}

.plan-dates-month:not([open]) .plan-dates-month__icon {
  transform: rotate(-90deg);
}

.plan-dates-month__left {
  flex: 1;
  min-width: 0;
}

.plan-dates-month__right {
  margin-left: auto;
  flex: 0 0 auto;
}

.plan-dates-month__edit {
  font-size: 12px;
  font-weight: 520;
  color: #64748b;
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s ease;
}

.plan-dates-month__edit:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #0f172a;
}

.plan-dates-month__name {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  line-height: 1.3;
}

.plan-dates-month__body {
  border-top: none;
  padding: 0 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Datumrader: referensdesign (period-row) – fortfarande sorterade per månad */
.plan-dates-month__body .plan-date-row.period-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.07));
  border-top: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
  width: 100%;
  box-sizing: border-box;
}

.plan-dates-month__body .plan-date-row.period-row:first-child {
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.07));
  border-radius: 0;
}

.plan-dates-month__body .plan-date-row.period-row:last-child {
  border-radius: 0 0 var(--radius-lg, 10px) var(--radius-lg, 10px);
}

.plan-dates-month__body .plan-date-row.period-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

.plan-dates-month__body .period-dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
}

.plan-dates-month__body .period-dot--a {
  background: var(--elin, #0f766e);
}

.plan-dates-month__body .period-dot--b {
  background: var(--daniel, #4f46e5);
}

.plan-dates-month__body .period-dot--both {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.4), rgba(79, 70, 229, 0.4));
}

.plan-dates-month__body .plan-date-row__info.period-info {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 540;
  color: var(--text-primary, #0f172a);
}

.plan-dates-month__body .period-info .detail {
  font-weight: 420;
  color: var(--text-secondary, #64748b);
}

.plan-dates-month__body .period-info .plan-date-pill {
  margin-left: 4px;
}

.plan-dates-month__body .period-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary, #94a3b8);
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
  flex-shrink: 0;
}

.plan-dates-month__body .plan-date-row__edit.period-edit {
  all: unset;
  cursor: pointer;
  font-size: 12px;
  font-weight: 520;
  color: var(--text-secondary, #64748b);
  padding: 4px 10px;
  border-radius: 5px;
  transition: all 0.12s ease;
  flex-shrink: 0;
}

.plan-dates-month__body .plan-date-row__edit.period-edit:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary, #0f172a);
}

.plan-date-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-radius: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid transparent;
  transition: background 0.1s ease;
}

.plan-date-row:hover {
  background: rgba(0, 0, 0, 0.03);
}

.plan-date-row:focus-visible {
  outline: 2px solid rgba(0, 178, 165, 0.35);
  outline-offset: 2px;
}

.plan-date-row__content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan-date-row__date {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, rgba(0, 0, 0, 0.78));
  line-height: 1.3;
}

.plan-date-row__meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.plan-date-row__edit {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 520;
  color: #64748b;
  background: transparent;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.12s ease;
}

.plan-date-row__edit:hover {
  color: var(--ink, rgba(0, 0, 0, 0.85));
}

.plan-date-pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 560;
  border: none;
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

.plan-date-pill--a {
  background: rgba(0, 178, 165, 0.12);
  color: #0d9488;
}

.plan-date-pill--b {
  background: rgba(88, 94, 214, 0.12);
  color: #3730a3;
}

.plan-date-pill--ten {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.68);
}

.plan-date-pill--conflict {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

/* Legacy (behåll för månadsvy etc.) */
.period-row__header-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.period-row__header-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.period-row__name-compact {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.period-row__date-range-compact {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.delete-btn--compact {
  padding: 4px;
  flex-shrink: 0;
}

.period-setup-compact__row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.period-setup-compact__row::-webkit-scrollbar {
  display: none;
}

.period-setup-compact__sep,
.period-setup-compact__pct,
.period-setup-compact__days {
  font-size: 13px;
}

.period-timeline-compact {
  display: flex;
  align-items: center;
  gap: 8px;
}

.period-timeline-compact__bar {
  flex: 1;
  height: 4px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
  min-width: 60px;
}

.period-timeline-compact__fill {
  height: 100%;
  background: var(--yazio-green);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.period-timeline-compact__label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

/* Kompakt "använder" (ingen stor box) */
.period-used-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}

.period-used-compact__label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.period-used-compact__value {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.summary-title {
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -0.01em;
  color: #0f172a;
  margin: 0;
  font-family: "Inter Variable", "Inter", system-ui, sans-serif;
}

/* Planner: gör "Välj datum" (rubriken över tabs/pensel) mindre och mindre tung */
.left-card--add-period .plan-desktop-header.summary-header {
  margin-bottom: 14px;
}

.left-card--add-period #plannerMainTitle.summary-title {
  font-size: 17px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.72);
}

.grunddata-panel {
  width: 100%;
  max-width: 1040px;
}

.grunddata-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.grunddata-page-head__left {
  min-width: 0;
}

.grunddata-page-head__title {
  margin: 0;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  font-weight: 700;
  color: #0f172a;
}

.grunddata-page-head__subtitle {
  margin: 0;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #94a3b8;
  font-weight: 400;
  max-width: 640px;
}

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

.grunddata-card {
  background: #fff;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
  min-height: 100%;
}

.grunddata-card--wide {
  grid-column: 1 / -1;
}

.grunddata-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.grunddata-card__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  color: #0f172a;
}

.grunddata-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #d3dceb;
  border-radius: 9px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.grunddata-icon-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.grunddata-icon-btn:hover {
  border-color: #9fb0ca;
  background: #f8fafc;
  color: #0f172a;
}

.grunddata-deflist {
  margin: 0;
  padding: 0;
}

.grunddata-deflist__row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid #eef2f7;
}

.grunddata-deflist__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.grunddata-deflist__label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.01em;
}

.grunddata-deflist__value {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #0f172a;
}

.grunddata-income-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grunddata-income-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #f8fafc;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.grunddata-income-row:hover {
  border-color: #d6deec;
  background: #fff;
}

.grunddata-income-row__left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.grunddata-income-row__initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #c7d2e5;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.grunddata-income-row__name {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.grunddata-income-row__right {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}

.grunddata-income-row__amount {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

.grunddata-card__hint {
  margin: 2px 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
}

.grunddata-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.grunddata-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #cfd8e6;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.grunddata-card__btn:hover {
  border-color: #9fb0ca;
  background: #f8fafc;
  color: #0f172a;
}

.grunddata-panel__section-title {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #0f172a;
  font-weight: 700;
}

/* New Grunddata Components - Linear style */
.grunddata-page-head__title {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
}

.grunddata-page-head__subtitle {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  color: #94a3b8 !important;
  margin: 0 0 24px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.grunddata-card__icon-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.grunddata-card__icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grunddata-card__title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.grunddata-icon-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: transparent !important;
  color: #94a3b8 !important;
}

.grunddata-icon-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #64748b !important;
}

.grunddata-data-rows {
  margin-top: 14px;
}

.grunddata-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.grunddata-data-row:last-child {
  border-bottom: none;
}

.grunddata-data-row__label {
  font-size: 13px;
  font-weight: 460;
  color: #64748b;
}

.grunddata-data-row__value {
  font-size: 14px;
  font-weight: 560;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.gd-card-parents {
  display: flex;
  flex-direction: column;
}

.gd-parents-income-list {
  flex: 1;
  margin-top: 16px;
}

.gd-parent-income-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: transparent;
  transition: background 0.1s ease;
  margin: 0 -14px;
}

.gd-parent-income-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

.gd-parent-income-row__avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.gd-parent-income-row__initial {
  font-size: 13px;
  font-weight: 650;
  position: relative;
}

.gd-parent-income-row__name {
  flex: 1;
  font-size: 14px;
  font-weight: 540;
  color: #0f172a;
}

.gd-parent-income-row__income {
  text-align: right;
}

.gd-parent-income-row__amount {
  font-size: 15px;
  font-weight: 620;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.gd-parent-income-row__period {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 420;
}

.gd-parent-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.04);
  margin: 4px 0;
}

.gd-total-income {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  margin-top: 16px;
}

.gd-total-income__label {
  font-size: 12px;
  font-weight: 480;
  color: #64748b;
}

.gd-total-income__value {
  font-size: 15px;
  font-weight: 640;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.gd-total-income__period {
  font-size: 11px;
  font-weight: 420;
  color: #94a3b8;
}

.gd-section-label {
  font-size: 11px;
  font-weight: 580;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 32px 0 10px;
}

.gd-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.gd-setting-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.gd-setting-item:last-child {
  border-right: none;
}

.gd-setting-item__icon {
  font-size: 16px;
  flex-shrink: 0;
}

.gd-setting-item__content {
  flex: 1;
  min-width: 0;
}

.gd-setting-item__label {
  font-size: 12px;
  font-weight: 460;
  color: #94a3b8;
  margin-bottom: 1px;
}

.gd-setting-item__value {
  font-size: 14px;
  font-weight: 560;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gd-setting-item__value--warning {
  color: #f59e0b;
}

.gd-setting-item__badge {
  font-size: 10px;
  font-weight: 580;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
}

.gd-setting-item__btn {
  all: unset;
  cursor: pointer;
  font-size: 12px;
  font-weight: 520;
  color: #64748b;
  padding: 4px 10px;
  border-radius: 5px;
  transition: all 0.12s;
  flex-shrink: 0;
}

.gd-setting-item__btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #0f172a;
}

.gd-activity-list {
  padding: 14px 22px;
  margin: -14px -22px;
}

.gd-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.gd-activity-row--last {
  border-bottom: none;
}

.gd-activity-row__icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: #94a3b8;
}

.gd-activity-row__content {
  flex: 1;
  min-width: 0;
}

.gd-activity-row__text {
  font-size: 13px;
  font-weight: 460;
  color: #475569;
  line-height: 1.45;
}

.gd-activity-row__time {
  font-size: 11px;
  font-weight: 420;
  color: #b0b8c4;
  margin-top: 2px;
}

.gd-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.gd-action-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 540;
  background: rgba(0, 0, 0, 0.04);
  color: #374151;
  transition: all 0.12s ease;
}

.gd-action-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

@media (min-width: 981px) {
  .planner-page.planner-app.planner-page--logged-in #plannerCardGrunddata {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
}



/* Grunddata v2 (matchar ny referenslayout) */
.planner-page.planner-app.planner-page--logged-in #plannerCardGrunddata>.section-page-header {
  display: none;
}

.grunddata-v2 {
  width: 100%;
  max-width: 100%;
}

.grunddata-v2 .gdv2-page-header {
  margin-bottom: 24px;
}

.grunddata-v2 .gdv2-page-title {
  margin: 0 0 4px;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #0f172a;
}

.grunddata-v2 .gdv2-page-subtitle {
  margin: 0;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #94a3b8;
  font-weight: 400;
}

.grunddata-v2 .gdv2-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 4px;
}

.grunddata-v2 .gdv2-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.grunddata-v2 .gdv2-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.grunddata-v2 .gdv2-card-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.grunddata-v2 .gdv2-card-head-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grunddata-v2 .gdv2-card-head-icon svg {
  width: 15px;
  height: 15px;
}

.grunddata-v2 .gdv2-card-head-icon--home {
  background: rgba(99, 91, 255, 0.07);
  color: #635bff;
}

.grunddata-v2 .gdv2-card-head-icon--income {
  background: rgba(13, 155, 122, 0.07);
  color: #0d9b7a;
}

.grunddata-v2 .gdv2-card-head-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f0f18;
}

.grunddata-v2 .gdv2-card-edit-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.09);
  color: #9494a8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
}

.grunddata-v2 .gdv2-card-edit-btn svg {
  width: 13px;
  height: 13px;
}

.grunddata-v2 .gdv2-card-edit-btn:hover {
  background: #f3f4f8;
  color: #0f0f18;
  border-color: rgba(0, 0, 0, 0.14);
}

.grunddata-v2 .gdv2-card-body {
  padding: 6px 0;
}

.grunddata-v2 .gdv2-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px;
}

.grunddata-v2 .gdv2-data-row+.gdv2-data-row {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.grunddata-v2 .gdv2-data-label {
  font-size: 13px;
  color: #5c5c72;
}

.grunddata-v2 .gdv2-data-value {
  font-size: 13px;
  font-weight: 600;
  color: #0f0f18;
}

.grunddata-v2 .gdv2-card-body--income {
  padding: 0;
}

.grunddata-v2 .gdv2-income-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}

.grunddata-v2 .gdv2-income-row+.gdv2-income-row {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.grunddata-v2 .gdv2-income-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.grunddata-v2 .gdv2-income-dot {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.grunddata-v2 .gdv2-income-dot--a {
  background: rgba(99, 91, 255, 0.13);
}

.grunddata-v2 .gdv2-income-dot--b {
  background: rgba(13, 155, 122, 0.13);
}

.grunddata-v2 .gdv2-income-name {
  font-size: 13.5px;
  font-weight: 500;
  color: #0f0f18;
}

.grunddata-v2 .gdv2-income-right {
  text-align: right;
}

.grunddata-v2 .gdv2-income-amount {
  font-size: 15px;
  font-weight: 700;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: -0.5px;
  color: #0f0f18;
}

.grunddata-v2 .gdv2-income-amount small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 1px;
}

.grunddata-v2 .gdv2-income-per {
  font-size: 11px;
  color: #9494a8;
}

.grunddata-v2 .gdv2-income-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #f3f4f7;
}

.grunddata-v2 .gdv2-income-total-label {
  font-size: 12.5px;
  color: #9494a8;
  font-weight: 500;
}

.grunddata-v2 .gdv2-income-total-val {
  font-size: 15px;
  font-weight: 700;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: -0.5px;
  color: #0f0f18;
}

.grunddata-v2 .gdv2-income-total-val small {
  font-size: 11px;
  font-weight: 500;
  color: #9494a8;
  letter-spacing: 0;
}

.grunddata-v2 .gdv2-card-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.grunddata-v2 .gdv2-card-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #635bff;
  cursor: pointer;
  background: none;
  border: none;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  transition: opacity 120ms ease;
  padding: 0;
}

.grunddata-v2 .gdv2-card-footer-btn:hover {
  opacity: 0.7;
}

.grunddata-v2 .gdv2-card-footer-btn svg {
  width: 13px;
  height: 13px;
}

.grunddata-v2 .gdv2-section-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #9494a8;
  margin-bottom: 12px;
  margin-top: 28px;
}

.grunddata-v2 .gdv2-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grunddata-v2 .gdv2-setting-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
}

.grunddata-v2 .gdv2-setting-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.grunddata-v2 .gdv2-setting-icon svg {
  width: 16px;
  height: 16px;
}

.grunddata-v2 .gdv2-setting-icon--indigo {
  background: rgba(99, 91, 255, 0.07);
  color: #635bff;
}

.grunddata-v2 .gdv2-setting-icon--amber {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}

.grunddata-v2 .gdv2-setting-body {
  flex: 1;
}

.grunddata-v2 .gdv2-setting-label {
  font-size: 11.5px;
  color: #9494a8;
  margin-bottom: 2px;
}

.grunddata-v2 .gdv2-setting-value {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f0f18;
}

.grunddata-v2 .gdv2-setting-value--warn {
  color: #d97706;
  display: flex;
  align-items: center;
  gap: 6px;
}

.grunddata-v2 .gdv2-setting-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}

.grunddata-v2 .gdv2-setting-action {
  font-size: 12.5px;
  font-weight: 500;
  color: #635bff;
  cursor: pointer;
  background: none;
  border: none;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  transition: opacity 120ms ease;
  flex-shrink: 0;
}

.grunddata-v2 .gdv2-setting-action:hover {
  opacity: 0.7;
}

.grunddata-v2 .gdv2-activity-list {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.grunddata-v2 .gdv2-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
}

.grunddata-v2 .gdv2-activity-item+.gdv2-activity-item {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.grunddata-v2 .gdv2-activity-dot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3px;
}

.grunddata-v2 .gdv2-activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.grunddata-v2 .gdv2-activity-dot--recent {
  background: #635bff;
}

.grunddata-v2 .gdv2-activity-dot--old {
  background: #eceef2;
}

.grunddata-v2 .gdv2-activity-body {
  flex: 1;
}

.grunddata-v2 .gdv2-activity-text {
  font-size: 13px;
  color: #5c5c72;
  line-height: 1.5;
}

.grunddata-v2 .gdv2-activity-text strong {
  color: #0f0f18;
  font-weight: 600;
}

.grunddata-v2 .gdv2-activity-time {
  font-size: 11px;
  color: #9494a8;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  margin-top: 2px;
}

@keyframes gdv2FadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grunddata-v2 .gdv2-anim {
  animation: gdv2FadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.grunddata-v2 .gdv2-d1 {
  animation-delay: 0.05s;
}

.grunddata-v2 .gdv2-d2 {
  animation-delay: 0.1s;
}

.grunddata-v2 .gdv2-d3 {
  animation-delay: 0.15s;
}



.summary-transfer-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 600px) {
  .summary-transfer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

.summary-transfer-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.summary-transfer-item:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--yazio-green);
}

.summary-transfer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.summary-transfer-label {
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
}

.summary-transfer-max {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.summary-transfer-input-wrapper {
  margin-top: 0;
}

.summary-transfer-input {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 700;
}

.summary-transfer-premium-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  text-align: center;
}

.summary-details-link {
  font-size: 15px;
  font-weight: 700;
  color: var(--yazio-green);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
  font-family: inherit;
}

.summary-details-link:hover {
  opacity: 0.8;
}

/* Calorie-style summary section */
.summary-calorie-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 24px;
}

.summary-stat {
  flex: 1;
  text-align: center;

}

.summary-stat-value {
  font-size: 28px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 4px;
}

.summary-stat-label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

/* Circular progress */
.summary-circular-progress {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}

.summary-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.summary-circle-bg {
  stroke: rgba(0, 0, 0, 0.1);
}

.summary-circle-progress {
  stroke: var(--yazio-green);
  transition: stroke-dashoffset 0.5s ease;
}

/* Tunn ring + knob i slutet (referensstil) */
.summary-circle--thin .summary-circle-bg {
  stroke: rgba(0, 0, 0, 0.04);
  /* mjuk – nästan smälter in, progress poppar */
}

.summary-circle-knob {
  display: none;
  /* borttagen – visualisering, inte kontroll */
}

/* Full cirkel med mjuka ändar (stroke-linecap: round) sätts i JS */
.summary-circle--thin .summary-circle-bg,
.summary-circle--thin .summary-circle-progress {
  stroke-linecap: round;
}

.summary-circular-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.summary-circular-value {
  font-size: 30px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 4px;
}

.summary-circular-label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

/* Macronutrient-style breakdown */
.summary-macros {
  display: flex;
  flex-direction: column;

}

.summary-macro-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-macro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-macro-label {
  font-size: 14px;
  font-weight: 560;
  color: #0f172a;
}

/* Ekonomi: gör "Utbetalning (per månad)" till sekundär label */
.summary-economy-section .summary-macro-label {
  font-size: 11px;
  font-weight: 580;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #60657d;
}

.summary-tooltip-icon {
  font-size: 14px;
  color: var(--muted);
  cursor: help;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;

  transition: all 0.2s ease;
}

.summary-tooltip-icon:hover {
  background: rgba(0, 200, 185, 0.1);
  color: var(--yazio-green);
}

.summary-macro-header .tooltip-container {
  position: relative;
}

.summary-macro-header .tooltip {
  bottom: auto;
  top: 100%;
  left: 0;
  transform: none;
  margin-top: 8px;
  white-space: normal;
  word-wrap: break-word;
  width: 280px;
  max-width: 90vw;
}

.summary-macro-values {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.summary-macro-bar {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.04);
  /* mjuk spår – progress poppar (SGI, lägsta, dubbeldagar) */
  border-radius: 999px;
  overflow: hidden;
}

.summary-macro-bar-fill {
  height: 100%;
  background: var(--yazio-green);
  border-radius: 999px;
  transition: width 0.5s ease;
}

/* Per förälder section */
.summary-parents-section {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  transition: all 0.3s ease;
  overflow: hidden;
}

.summary-parents-section.hidden {
  display: none;
}

/* Kompakt föräldrar-vy */
.summary-parents-compact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.summary-parents-compact__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
}

.summary-parents-compact__row--muted {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.summary-parents-compact__name {
  font-weight: 700;
  color: var(--ink);
}

.summary-parents-compact__label {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-parents-compact__value {
  font-weight: 700;
  color: var(--ink);
}

/* Kompakt överföringar – details/summary så "Överför dagar" kan vara collapse default */
.summary-transfers-compact-wrap {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.summary-transfers-compact-wrap .summary-transfers-compact__header {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  user-select: none;
}

.summary-transfers-compact-wrap .summary-transfers-compact__header::-webkit-details-marker {
  display: none;
}

.summary-transfers-compact-wrap .summary-transfers-compact__header .chev {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.summary-transfers-compact-wrap[open] .summary-transfers-compact__header .chev {
  transform: rotate(-180deg);
}

.summary-transfers-compact {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.summary-transfers-compact-wrap .summary-transfers-compact {
  margin-top: 12px;
  padding-top: 12px;
  border-top: none;
}

.summary-transfers-compact__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.summary-transfers-compact__label {
  font-weight: 700;
  color: var(--ink);
  font-size: 13px;
}

.summary-transfers-compact__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--green-soft);
  color: var(--green);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.summary-transfers-compact-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.summary-transfers-compact-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-transfers-compact-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  min-width: 100px;
  flex-shrink: 0;
}

.summary-transfers-compact-max {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.summary-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 20px;
}

.summary-parent-item {
  margin-bottom: 20px;
}

.summary-parent-item:last-of-type {
  margin-bottom: 0;
}

.summary-parent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.summary-parent-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.summary-parent-remaining {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.summary-parent-details {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.summary-parent-transfers {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}

.summary-parent-reserved {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}

.summary-parents-details {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  transition: all 0.3s ease;
}

.summary-parents-details.hidden {
  display: none;
}

.summary-card--parents {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.summary-header--parents {
  margin-bottom: 14px;
}

.summary-parents-details--premium {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.summary-parents-total {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-parents-total__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.58);
  font-weight: 600;
}

.summary-parents-total__value {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.summary-parents-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 760px) {
  .summary-parents-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-parents-grid.summary-parents-grid--single {
    grid-template-columns: minmax(0, 1fr);
  }
}

.summary-parent-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-parent-card__name {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
  font-weight: 600;
}

.summary-parent-card__hero {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.summary-parent-card__hero-value {
  font-size: 32px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.summary-parent-card__hero-label {
  margin-top: 2px;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.74);
  font-weight: 500;
}

.summary-parent-card__progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.1);
}

.summary-parent-card__progress-fill {
  height: 100%;
  border-radius: 999px;
  background: #4f88a3;
  transition: width 0.25s ease;
}

.summary-parent-card__meta {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(15, 23, 42, 0.6);
}

.summary-transfer-panel {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-transfer-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.summary-transfer-panel__title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.summary-transfer-stepper-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.summary-transfer-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.summary-transfer-stepper-row:first-child {
  border-top: 0;
  padding-top: 4px;
}

.summary-transfer-stepper-meta {
  min-width: 0;
}

.summary-transfer-stepper-label {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.summary-transfer-stepper-max {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(15, 23, 42, 0.56);
}

.summary-transfer-stepper-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.summary-transfer-stepper-btn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 9px;
  background: #fff;
  color: #0f172a;
  font-size: 19px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.summary-transfer-stepper-btn:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.04);
}

.summary-transfer-stepper-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.summary-transfer-stepper-value {
  min-width: 26px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.summary-transfer-premium-hint {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.6);
}

/* Sektionsrubrik (används på alla flikar utom Planera) */
.section-page-header,
.parents-page-header {
  margin-bottom: 40px;
}

.section-page-title,
.parents-page-title {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 4px;
  color: #0f172a;
}

.section-page-subtitle,
.parents-page-subtitle {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #60657d;
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
}

.section-page-meta {
  margin: 6px 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}

.planner-guide__header {
  margin-bottom: 24px;
}

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

.planner-guide__highlight {
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.96) 100%);
}

.planner-guide__highlight h2 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

.planner-guide__highlight p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #60657d;
}

.planner-guide__note {
  margin-bottom: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(15, 23, 42, 0.03));
  color: #1e293b;
  font-size: 14px;
  line-height: 1.6;
}

.planner-guide__note strong {
  color: #0f172a;
}

.planner-guide__prose {
  margin-top: 0;
}

.planner-guide__footer {
  margin-top: 28px;
}

.planera-page-header {
  margin-bottom: 18px;
}

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

#plannerCardGuide.planner-guide {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

#plannerCardGuide.planner-guide .planner-guide__header {
  margin-bottom: 20px;
}

#plannerCardGuide.planner-guide .planner-guide__highlights {
  margin-bottom: 18px;
}

#plannerCardGuide.planner-guide .planner-guide__highlight {
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

#plannerCardGuide.planner-guide .planner-guide__note {
  margin-bottom: 14px;
}

#plannerCardGuide.planner-guide .planner-guide__prose {
  margin-top: 0;
  display: grid;
  gap: 12px;
}

#plannerCardGuide.planner-guide .guide-section {
  margin-top: 0;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

#plannerCardGuide.planner-guide .guide-section__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

#plannerCardGuide.planner-guide .guide-section p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.62;
  color: #475569;
}

#plannerCardGuide.planner-guide .guide-section p:first-of-type {
  margin-top: 0;
}

#plannerCardGuide.planner-guide .guide-section ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

#plannerCardGuide.planner-guide .guide-section li {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.56;
  color: #475569;
}

#plannerCardGuide.planner-guide .guide-section strong {
  color: #0f172a;
  font-weight: 700;
}

#plannerCardGuide.planner-guide .planner-guide__footer {
  margin-top: 18px;
  display: flex;
  align-items: center;
}

#plannerCardGuide.planner-guide .planner-guide__footer .duo-btn {
  min-height: 40px;
  border-radius: 10px;
}

@media (max-width: 1200px) {
  #plannerCardGuide.planner-guide .planner-guide__highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #plannerCardGuide.planner-guide .planner-guide__header {
    margin-bottom: 14px;
  }

  #plannerCardGuide.planner-guide .section-page-meta {
    margin-top: 8px;
    font-size: 12.5px;
  }

  #plannerCardGuide.planner-guide .planner-guide__highlights {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }

  #plannerCardGuide.planner-guide .planner-guide__highlight {
    padding: 14px;
  }

  #plannerCardGuide.planner-guide .planner-guide__note {
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.55;
  }

  #plannerCardGuide.planner-guide .planner-guide__prose {
    gap: 10px;
  }

  #plannerCardGuide.planner-guide .guide-section {
    padding: 14px 14px;
  }

  #plannerCardGuide.planner-guide .guide-section__title {
    font-size: 15px;
  }

  #plannerCardGuide.planner-guide .guide-section p,
  #plannerCardGuide.planner-guide .guide-section li {
    font-size: 13.5px;
  }

  #plannerCardGuide.planner-guide .planner-guide__footer {
    margin-top: 14px;
  }

  #plannerCardGuide.planner-guide .planner-guide__footer .duo-btn {
    width: 100%;
    justify-content: center;
  }
}



/* Hero: dagar kvar som visuellt ankare + distribution inuti samma block */
.parents-hero {
  margin-bottom: 44px;
  padding: 28px 26px 24px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
}

.parents-hero__total {
  margin-bottom: 34px;
}

.parents-hero__value {
  display: block;
  font-size: clamp(3rem, 8vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}

.parents-hero__label {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: #64748b;
  margin-top: 6px;
}

.parents-hero__distribution {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.parents-hero__bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.parents-hero__bar {
  height: 12px;
  min-width: 4px;
  border-radius: 6px;
  transition: width 0.4s ease;
}

.parents-hero__bar-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 560;
  color: rgba(15, 23, 42, 0.78);
  font-variant-numeric: tabular-nums;
}

.parents-hero__bar-name {
  font-weight: 600;
  color: #0f172a;
}

.parents-hero__bar-value {
  font-weight: 600;
  color: rgba(15, 23, 42, 0.68);
}

.parents-cards-grid {
  display: flex;
  gap: 10px;
  margin-bottom: 44px;
}

/* Split/jämförelsekort — ingen top-accent, färg vid namn/dot/graf */
.parent-ring-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 12px 18px 10px;
  flex: 1;
  position: relative;
  overflow: hidden;
}

.parent-ring-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.parent-ring-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.parent-ring-card__name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.parent-ring-card__body {
  display: flex;
  align-items: center;
  gap: 16px;
}

.parent-ring-card__ring-wrap {
  position: relative;
  flex-shrink: 0;
}

.parent-ring-card__ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.parent-ring-card__ring-value {
  font-size: 20px;
  font-weight: 660;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1;
}

.parent-ring-card__ring-label {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 460;
  margin-top: 2px;
}

.parent-ring-card__stats {
  flex: 1;
  min-width: 0;
}

.parent-ring-card__stats-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 12px;
}

.parent-ring-card__stats-label {
  color: #64748b;
  font-weight: 460;
}

.parent-ring-card__stats-value {
  color: #0f172a;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
}

.parent-ring-card__segmented-bar {
  height: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.parent-ring-card__details {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.parent-ring-card__detail-box {
  flex: 1;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 7px;
}

.parent-ring-card__detail-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}

.parent-ring-card__detail-dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
}

.parent-ring-card__detail-label {
  font-size: 11px;
  font-weight: 520;
  color: #94a3b8;
}

.parent-ring-card__detail-value {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.parent-ring-card__detail-total {
  font-size: 11px;
  font-weight: 420;
  color: #94a3b8;
  margin-left: 2px;
}

.parents-transfer-section {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: 20px 24px;
}

.parents-transfer-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.parents-transfer-section__icon {
  color: #94a3b8;
  display: inline-flex;
}

.parents-transfer-section__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0f172a;
}

.parents-transfer-section__subtitle {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 420;
  margin: 0 0 4px;
  padding-left: 24px;
}

.parents-transfer-section__rows {
  margin-top: 8px;
}

.parent-transfer-row {
  display: flex;
  align-items: center;
  padding: 16px 0;
  gap: 16px;
}

.parent-transfer-row+.parent-transfer-row {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.parent-transfer-row__visual {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

.parent-transfer-row__avatar {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0.15;
}

.parent-transfer-row__avatar-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.parent-transfer-row__arrow {
  color: #cbd5e1;
}

.parent-transfer-row__labels {
  flex: 1;
  min-width: 0;
}

.parent-transfer-row__title {
  font-size: 14px;
  font-weight: 540;
  color: #0f172a;
}

.parent-transfer-row__subtitle {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 420;
  margin-top: 1px;
}

.parent-transfer-row__stepper {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.07);
}

.parent-transfer-row__stepper-btn {
  all: unset;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: all 0.1s;
  cursor: pointer;
}

.parent-transfer-row__stepper-btn:first-child {
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px 0 0 8px;
}

.parent-transfer-row__stepper-btn:last-child {
  border-left: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 0 8px 8px 0;
}

.parent-transfer-row__stepper-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
}

.parent-transfer-row__stepper-btn:disabled {
  color: #d1d5db;
  cursor: not-allowed;
}

.parent-transfer-row__stepper-value {
  width: 52px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  background: #fff;
}

.parent-transfer-row__stepper-value--empty {
  color: #94a3b8;
}

.parents-transfer-notice {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(81, 97, 214, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(81, 97, 214, 0.1);
  font-size: 13px;
  color: #475569;
  font-weight: 460;
  line-height: 1.5;
}

.parents-transfer-notice strong {
  font-weight: 620;
}

/* Segmented bar component */
.segmented-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  gap: 2px;
}

.segmented-bar__segment {
  transition: width 0.4s ease;
  min-width: 2px;
}

/* Economy Summary Cards (Total & Average) */
.economy-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}

.economy-summary-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: 20px 22px;
}

.economy-summary-card__label {
  font-size: 12px;
  font-weight: 480;
  color: #60657d;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

.economy-summary-card__value {
  font-size: 32px;
  font-weight: 680;
  letter-spacing: -0.035em;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}

.economy-summary-card__value--masked {
  letter-spacing: 0.08em;
  font-weight: 620;
}

.summary-economy-period-total__value--masked {
  letter-spacing: 0.08em;
  font-weight: 620;
}

.economy-mini-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  gap: 1px;
  margin-bottom: 8px;
}

.economy-mini-bar__segment {
  height: 100%;
  transition: width 0.4s ease;
  min-width: 3px;
}

.economy-mini-bar__segment--parent-a {
  background: var(--parent-a-color);
}

.economy-mini-bar__segment--parent-b {
  background: var(--parent-b-color);
}

.economy-summary-card__sublabel {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.62);
  margin-bottom: 16px;
}

.economy-summary-parents {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.economy-summary-parent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.economy-summary-parent__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.economy-summary-parent--a .economy-summary-parent__dot {
  background: var(--parent-a-color);
}

.economy-summary-parent--b .economy-summary-parent__dot {
  background: var(--parent-b-color);
}

.economy-summary-parent__amount {
  margin-left: 2px;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.62);
}

.economy-summary-parent__amount--masked {
  letter-spacing: 0.06em;
  font-weight: 620;
}

.economy-mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 74px;
  margin-top: 16px;
}

.economy-mini-chart__item {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.economy-mini-chart__bar {
  width: 100%;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
  transition: all 0.3s ease;
}

.economy-mini-chart__bar:hover {
  background: linear-gradient(180deg, rgba(0, 200, 185, 1) 0%, rgba(0, 200, 185, 0.7) 100%);
}

.economy-mini-chart__label {
  font-size: 10px;
  line-height: 1;
  font-family: var(--mono);
  font-weight: 500;
  color: rgba(15, 23, 42, 0.62);
  text-transform: capitalize;
}

.economy-legend {
  display: flex;
  gap: 16px;
}

.economy-legend__item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #64748b;
  font-weight: 460;
}

.economy-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}



/* Economy Summary Section */
.summary-economy-section {
  margin-bottom: 20px;
}

.summary-economy-months {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-economy-month {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  overflow: visible;
  transition: box-shadow 0.15s ease;
}

.summary-economy-detail-row .tooltip {
  left: 0;
  transform: none;
  max-width: min(360px, calc(100vw - 48px));
}

.summary-economy-month:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.summary-economy-month:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.summary-economy-month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s ease;
}

.summary-economy-month:nth-child(even) .summary-economy-month-header {
  background: transparent;
  border-radius: 0;
}

.summary-economy-month-header:hover {
  background: rgba(0, 0, 0, 0.015);
  border-radius: 0;
}

.summary-economy-month-name {
  font-size: 14px;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: #0f172a;
  text-transform: capitalize;
}

.summary-economy-month-amount {
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.02em;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.summary-economy-chevron {
  transition: transform 0.2s ease;
  opacity: 0.5;
  width: 14px;
  height: 14px;
  color: #c0c7d1;
}

.summary-economy-month-header:hover .summary-economy-chevron {
  opacity: 0.7;
}

.summary-economy-chevron.rotated {
  transform: rotate(180deg);
}

.summary-economy-month-details {
  padding: 0 20px 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin: 0;
  background: transparent;
}

.summary-economy-parent {
  margin-bottom: 0;
  padding-top: 16px;
  background: transparent;
  border-radius: 0;
  border: 0;
}

.summary-economy-parent+.summary-economy-parent {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  margin-top: 4px;
  padding-top: 16px;
}

.summary-economy-parent+.summary-economy-parent::before {
  content: none;
}

.summary-economy-parent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.summary-economy-parent-name {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-economy-parent-name::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.summary-economy-parent:nth-child(1) .summary-economy-parent-name {
  color: #0f766e;
}

.summary-economy-parent:nth-child(2) .summary-economy-parent-name {
  color: #6366f1;
}

.summary-economy-parent-subtotal {
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.summary-economy-parent:nth-child(1) .summary-economy-parent-subtotal {
  color: #0f766e;
}

.summary-economy-parent:nth-child(2) .summary-economy-parent-subtotal {
  color: #4f46e5;
}

.summary-economy-parent-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.summary-economy-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0 7px 14px;
  line-height: 1.4;
  gap: 12px;
}

.summary-economy-detail-text {
  font-size: 13px;
  font-weight: 420;
  color: #64748b;
}

.summary-economy-detail-amount {
  font-size: 13px;
  font-weight: 520;
  color: #475569;
  font-variant-numeric: tabular-nums;
}

.summary-economy-detail-row>*:first-child {
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
}

.summary-economy-detail-text {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-economy-detail-row--total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.summary-economy-detail-amount {
  font-weight: 400;
  color: var(--ink);
}

.summary-economy-detail-amount--positive {
  color: var(--yazio-green);
}

.summary-economy-baseline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-economy-baseline-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.summary-economy-baseline-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.summary-economy-baseline-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.summary-economy-period-total {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.summary-economy-period-total__label {
  font-size: 13px;
  font-weight: 600;
  color: #5f6b7b;
}

.summary-economy-period-total__value {
  margin-top: 4px;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

@media (min-width: 981px) {
  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor {
    background: #fff;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 26px rgba(15, 23, 42, 0.04);
    padding: 20px 22px;
    margin-bottom: 0;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-header {
    margin-bottom: 14px;
    align-items: center;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0f172a;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-details-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid #d1dae8;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-details-link:hover {
    border-color: #aebdd4;
    background: #f8fafc;
    color: #0f172a;
    opacity: 1;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-section {
    margin-bottom: 10px;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-macro-header {
    margin-bottom: 10px !important;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-section .summary-macro-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-tooltip-icon {
    width: 16px;
    height: 16px;
    font-size: 11px;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-months {
    gap: 14px;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-month {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-month:last-child {
    border-bottom: 1px solid #e2e8f0;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-month-header {
    padding: 0;
    border-radius: 0;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-month:nth-child(even) .summary-economy-month-header {
    background: transparent;
    border-radius: 12px;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-month-header:hover {
    background: #f8fafc;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-month-name {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-month-amount {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-chevron {
    opacity: 0.45;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-month-details {
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #e2e8f0;
    background: transparent;
    border-radius: 0;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-parent {
    margin-bottom: 0;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-parent-head {
    margin-bottom: 8px;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-parent-name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #64748b;
    opacity: 0.55;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-parent-subtotal {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-detail-row {
    font-size: 14px;
    font-weight: 400;
    padding: 4px 0;
    color: #334155;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-detail-amount {
    font-weight: 400;
    color: #0f172a;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-footer {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid #e2e8f0 !important;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-footer .summary-stat-label {
    font-size: 11px !important;
    color: #64748b !important;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-period-total {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-period-total__label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
  }

  .planner-page.planner-app.planner-page--logged-in #summary-economy-anchor .summary-economy-period-total__value {
    font-size: 32px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.012em;
  }

  /* Ekonomi-flik: visa ekonomi i vänster innehållsyta (inte i smal högerspalt) */
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] .planner-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] .planner-grid>section.planner-sheet {
    display: none;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] .planner-grid>aside.planner-aside {
    grid-column: 1;
    width: 100%;
    max-width: none;
  }

  /* Ekonomi-flik: ta bort "kortet" runt ekonomin */
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  /* Föräldrar-flik: samma vänsterställda fullbredd som Grunddata/Ekonomi */
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="parents"] .planner-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="parents"] .planner-grid>section.planner-sheet {
    display: none;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="parents"] .planner-grid>aside.planner-aside {
    grid-column: 1;
    width: 100%;
    max-width: none;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="parents"] #mobile-overview-rest {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="parents"] #mobile-overview-rest .summary-card--parents {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  /* Planera-flik: verktyg (smart topbar) + stor kalender + flytande toolbox */
  .planner-page.planner-app[data-planner-section="planera"] #plannerCardPlanera {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding-left: 12px;
    padding-right: 12px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-desktop-header.summary-header {
    margin-bottom: 12px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerMainTitle.summary-title {
    font-size: 15px;
    font-weight: 650;
    color: rgba(15, 23, 42, 0.68);
  }

  .planner-page.planner-app[data-planner-section="planera"] #planToolsRow #toolbar-saved-plans,
  .planner-page.planner-app[data-planner-section="planera"] #planToolsRow #toolbar-compare {
    display: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] #planToolsRow #toolbar-save {
    order: 1;
  }

  .planner-page.planner-app[data-planner-section="planera"] #planToolsRow #toolbar-new-plan {
    order: 2;
  }

  .planner-page.planner-app[data-planner-section="planera"] #planToolsRow #planToolsMore {
    order: 3;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-workspace {
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-controls {
    position: relative;
    width: 100%;
    max-height: none;
    overflow: visible;
    z-index: auto;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 18px 8px;
    margin-bottom: 0;
    min-height: 44px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-canvas {
    padding-top: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-month {
    --cal-gap: 1px;
    --cal-canvas: #f1f3f5;
    --cal-grid: #e6e8eb;
    background: var(--cal-canvas);
    border: 0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-month__title-row {
    margin-bottom: 12px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-controls #brushBar.planera-controls__panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 520px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    gap: 12px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-controls #brushBar.planera-controls__panel .planera-control-row {
    display: flex;
    align-items: left;
    gap: 12px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-controls #brushBar.planera-controls__panel .planera-control-row__label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #6B7280;
    margin: 0;
    min-width: 82px;
    flex-shrink: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-controls #brushBar.planera-controls__panel .planera-control-row__control {
    min-height: 32px;
    justify-content: flex-start;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-controls #brushBar.planera-controls__panel .brush-bar__chips {
    justify-content: flex-start;
  }

  /* Legend ligger i .planera-legend-row (ovanför kalender) */
  .planner-page.planner-app[data-planner-section="planera"] .planera-controls__meta {
    flex-basis: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-toolbox-context {
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-toolbox-context__text {
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.60);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-canvas #periods-empty {
    margin-bottom: 14px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-canvas .periods-month {
    border: 0;
    border-radius: 0;

    background: transparent;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-canvas .calendar-month {
    margin: 0;
  }
}

@media (min-width: 981px) and (max-height: 760px) {
  .planner-page.planner-app[data-planner-section="planera"] .planera-controls__meta {
    display: none;
  }
}

/* Dashboard översikt: desktop vs mobil – visa bara en layout */
.summary-overview-mobile {
  display: none;
  /* desktop: visa bara horisontell */
}

.summary-overview-desktop {
  display: flex;
}

/* Mobil: vertikal layout – stor ring, dagar kvar, använda • totalt (inga siffror på sidorna) */
.summary-overview-mobile__ring {
  width: 160px;
  height: 160px;
  margin: 0 auto 8px;
}

.summary-overview-mobile .summary-circular-value {
  font-size: 28px;
}

.summary-overview-mobile .summary-circular-label {
  font-size: 13px;
}

.summary-overview-mobile__meta {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}



/* ============================================
   GUIDE PAGES
   ============================================ */

/* Guide page layout */
.guide-page {
  padding-top: calc(var(--page-padding-block) * 0.625);
  padding-bottom: calc(var(--page-padding-block) + 16px);
  padding-left: var(--page-padding-left);
  padding-right: var(--page-padding-right);
}

.guide-container {
  max-width: var(--page-max-width);
  width: min(var(--page-max-width),
      calc(100vw - var(--page-padding-left) - var(--page-padding-right)));
  margin: 0 auto;
}

.guide-breadcrumb {
  font-size: 14px;
  margin-bottom: 24px;
  color: var(--muted);
}

.guide-breadcrumb a {
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}

.guide-breadcrumb a:hover {
  color: var(--ink);
}

.guide-breadcrumb span {
  margin: 0 8px;
}

.guide-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}



/* Guide article/card */
.guide-article,
.guide-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 32px;
}

.guide-card {
  margin-bottom: 24px;
}

.guide-article h1,
.guide-card h1 {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 900;
  margin: 16px 0 16px;
  line-height: 1.2;
  font-family: "Inter Variable", "Inter", sans-serif;
}

.guide-article .intro,
.guide-card p {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 32px;
}

.guide-card p {
  margin: 0 0 24px;
}

/* Guide prose content */
.guide-prose {
  max-width: var(--prose-max-width);
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
}

.guide-prose h2 {
  font-size: 20px;
  font-weight: 900;
  margin-top: 32px;
  margin-bottom: 16px;
  color: var(--ink);
  font-family: "Inter Variable", "Inter", sans-serif;
}

.guide-prose h3 {
  font-size: 18px;
  font-weight: 900;
  margin-top: 24px;
  margin-bottom: 12px;
  color: var(--ink);
  font-family: "Inter Variable", "Inter", sans-serif;
}

.guide-prose p {
  color: var(--muted);
  margin-top: 16px;
  line-height: 1.7;
}

.guide-prose ul {
  margin-top: 16px;
  padding-left: 24px;
  color: var(--ink);
}

.guide-prose li {
  margin-top: 8px;
  line-height: 1.6;
}

.guide-prose strong {
  color: var(--ink);
  font-weight: 800;
}

/* Guide-artikelsida: sektioner ska se ut som .guide-prose på desktop */
.guide-section {
  margin-top: 32px;
}

.guide-section__title {
  font-size: 20px;
  font-weight: 900;
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--ink);
  font-family: "Inter Variable", "Inter", sans-serif;
}

.guide-section ul,
.guide-rules-list {
  margin-top: 16px;
  padding-left: 24px;
  color: var(--ink);
}

.guide-section li,
.guide-rules-list li {
  margin-top: 8px;
  line-height: 1.6;
}

.guide-section p {
  color: var(--muted);
  margin-top: 16px;
  line-height: 1.7;
}

.guide-section strong,
.guide-rules-list strong {
  color: var(--ink);
  font-weight: 800;
}

/* Guide list (for guider.html) */
.guide-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}



.guide-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease;
  box-shadow: none;
}

.guide-item:hover {
  transform: translateY(-2px);
  border-color: #d1d5db;
}

.guide-item-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 8px;
  font-family: "Inter Variable", "Inter", sans-serif;
}

.guide-item-desc {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 12px;
  line-height: 1.5;
}

.guide-item-link {
  font-size: 14px;
  font-weight: 800;
  color: var(--yazio-green);
  margin: 0;
}

/* Guide sidebar */
.guide-sidebar {
  position: static;
  align-self: start;
}

.guide-sidebar-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 16px;
}

.guide-sidebar-card h3 {
  font-size: 16px;
  font-weight: 900;
  margin: 0 0 12px;
  font-family: "Inter Variable", "Inter", sans-serif;
}

.guide-sidebar-card p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

.guide-sidebar-card .duo-btn {
  width: 100%;
  margin-bottom: 8px;
}

.guide-sidebar-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.guide-sidebar-card li {
  margin-bottom: 8px;
}

.guide-sidebar-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.guide-sidebar-list li {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 8px;
}

.guide-sidebar-list li:last-child {
  margin-bottom: 0;
}

.guide-sidebar-card a {
  font-size: 14px;
  font-weight: 700;
  color: var(--yazio-green);
  text-decoration: none;
}

.guide-sidebar-card a:hover {
  text-decoration: underline;
  color: var(--ink);
}

.guide-sidebar-card--next .duo-btn {
  color: #fff;
}

.guide-sidebar-card a[target="_blank"] {
  color: var(--yazio-green);
  font-weight: 700;
}

.guide-sidebar-card a[target="_blank"]:hover {
  color: var(--yazio-green);
  opacity: 0.8;
}

.guide-prose blockquote {
  border-left: 3px solid var(--yazio-green);
  padding-left: 16px;
  margin: 16px 0;
  font-style: italic;
  color: var(--muted);
  line-height: 1.6;
}

/* Guider-sidan: mobil – featured hero, kategorier, ingen mega-container, sticky CTA */
.guide-cta-sticky {
  display: none;
}

.guide-intro-mobile {
  display: none;
}

.guide-category-title {
  display: none;
}

.guide-item-badge,
.guide-item-icon,
.guide-item-desc-mobile {
  display: none;
}

.guide-meta--mobile,
.guide-tldr {
  display: none;
}



/* --- Auth card polish (removed) ---
   Auth UI now lives in header dropdown. */

/* ============================================
   FAQ PAGE
   ============================================ */
.faq-page {
  /* Bakgrunden kommer från .page-bg (som i planeraren) */
  background: transparent;
  min-height: 100vh;
}

.faq-hero {
  padding: 72px 0 22px;
  background: transparent
}

.faq-hero__title {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #0b0f19;
  text-align: center;
  margin: 0;
}

.faq-hero__subtitle {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
  margin: 12px auto 0;
  max-width: 70ch;
}

.faq-content {
  padding: 0px 0 0px;
}

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-page {
  /* Bakgrunden kommer från .page-bg (som i planeraren) */
  background: transparent;
}

.contact-hero {
  padding: 72px 0 22px;

}

.contact-hero__title {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #0b0f19;
  text-align: center;
  margin: 0;
}

.contact-hero__subtitle {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
  margin: 12px auto 0;
  max-width: 70ch;
}

.contact-content {
  padding: 28px 0 96px;
}

.contact-card {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.contact-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 24px;
  display: grid;
  gap: 16px;
}

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

.contact-form__textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-status {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.contact-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 6px 0;
}

.contact-direct {
  margin: 0;
  text-align: center;
  color: var(--muted);
  line-height: 1.6;
}

.contact-direct__link {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.contact-direct__link:hover {
  text-decoration: underline;
}

.contact-note {
  margin: 0;
  text-align: center;
  color: var(--muted);
  line-height: 1.6;
}

.contact-form__hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
}



.faq-accordion {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  gap: 12px;
}

.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  overflow: hidden;
}

.faq-item__summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 18px;
  font-family: "Inter Variable", "Inter", sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.faq-item__summary::-webkit-details-marker {
  display: none;
}

.faq-item__summary::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  color: var(--muted);
}

.faq-item[open] .faq-item__summary::after {
  content: "–";
}

.faq-item__body {
  padding: 0 18px 18px;
  font-family: "Inter Variable", "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}



/* ------------------------------------------------------------
   Planner (mobile): "app-känsla" med dashboard + bottom tabs
   - Desktop behåller 2-kolumn (eller nuvarande responsiva grid)
   - Mobil (≤ 900px) gör vänster-kortet till bottom sheet
   ------------------------------------------------------------ */

/* Desktop/default: sheet-bar ska inte påverka layout */
.mobile-sheet-bar {
  display: none;
}

.mobile-sheet-body {
  display: contents;
}

.mobile-sheet-backdrop {
  display: none;
}

.mobile-tabs {
  display: none;
}

.mobile-segment-wrap {
  display: none;
}

/* Desktop: dölj hamburger, slide-in-meny, add-period-sheet-bar och plan-switcher sheet */
@media (min-width: 901px) {
  .top__hamburger {
    display: none !important;
  }

  .menu-overlay {
    display: none !important;
  }

  .add-period-sheet__bar {
    display: none;
  }

  .add-period-sheet--modal .add-period-sheet__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .add-period-sheet--modal .add-period-sheet__title {
    font-family: "Inter Variable", "Inter", sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
  }

  .add-period-sheet--modal .add-period-sheet__close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 8px;
  }

  .add-period-sheet--modal .add-period-sheet__close:hover {
    color: var(--ink);
    background: rgba(0, 0, 0, 0.04);
  }

  #add-period-sheet-reset,
  .add-period-sheet__footer {
    display: none;
  }

  .plan-switcher-sheet,
  .plan-switcher-sheet-backdrop {
    display: none !important;
  }

  .planner-page.planner-app .add-period-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 70;
  }

  .planner-page.planner-app .add-period-sheet-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .planner-page.planner-app .add-period-sheet {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.98);
    width: min(640px, calc(100vw - 40px));
    max-height: 80vh;
    overflow: auto;
    background: var(--card);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    z-index: 71;
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .planner-page.planner-app .add-period-sheet.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }

  .add-period-sheet--modal .add-period-sheet__body {
    padding: 18px 20px 20px;
  }
}



/* ── Auth Menu Items (modern design) ── */
.auth-menu-item {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  box-sizing: border-box;
  background: transparent;
  transition: all 0.1s ease;
}

.auth-menu-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.auth-menu-item--danger:hover {
  background: rgba(239, 68, 68, 0.06);
}

.auth-menu-item__icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #64748b;
}

.auth-menu-item__icon--danger {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

.auth-menu-item__content {
  flex: 1;
}

.auth-menu-item__label {
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
}

.auth-menu-item__label--danger {
  color: #dc2626;
}

.auth-menu-item__desc {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 420;
  margin-top: 1px;
}

/* Update auth-dropdown styling for new design */
.auth-dropdown {
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 0;
  overflow: hidden;
  animation: authDropdownFade 0.12s ease;
}

.auth-dropdown.auth-dropdown--sidebar {
  transform: none !important;
}

.auth-dropdown__section--guest {
  padding: 0 0 4px;
}

.auth-guest-head {
  padding: 16px 16px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-guest-head__avatar {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-guest-head__meta {
  flex: 1;
  min-width: 0;
}

.auth-guest-head__title {
  font-size: 14px;
  font-weight: 580;
  color: #0f172a;
}

.auth-guest-head__sub {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 420;
  margin-top: 1px;
}

.auth-guest-login-wrap {
  padding: 0 10px 6px;
}

.auth-guest-login-btn {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  background: #0f172a;
  color: #fff;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  transition: opacity 0.12s ease;
}

.auth-guest-login-btn:hover {
  opacity: 0.88;
}

.auth-upgrade-banner--guest {
  margin: 4px 10px 6px;
  width: calc(100% - 20px);
  box-sizing: border-box;
}

.auth-upgrade-banner {
  all: unset;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(59, 130, 246, 0.06) 100%);
  border: 1px solid rgba(139, 92, 246, 0.12);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.12s ease;
}

.auth-upgrade-banner:hover {
  border-color: rgba(139, 92, 246, 0.25);
}

.auth-upgrade-banner__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-upgrade-banner__copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.auth-upgrade-banner__title {
  font-size: 13px;
  font-weight: 580;
  color: #4c1d95;
}

.auth-upgrade-banner__sub {
  font-size: 11px;
  color: #7c3aed;
  font-weight: 420;
  margin-top: 1px;
}

.auth-upgrade-banner__chev {
  color: #a78bfa;
  flex-shrink: 0;
}

#authUpgradeBannerLoggedOut {
  width: calc(100% - 16px) !important;
  margin: 4px 8px 6px !important;
  box-sizing: border-box;
}

.auth-guest-actions {
  padding: 4px 6px;
}

.auth-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 6px 0;
}

.auth-divider--tight {
  margin: 2px 0;
}

.auth-guest-foot {
  padding: 10px 16px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #b0b8c4;
  font-weight: 420;
}

.auth-account-head {
  padding: 16px 16px 14px;
}

.auth-account-head__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-account-head__avatar {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, #6366f1, #4553b3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 660;
  flex-shrink: 0;
}

.auth-account-head__meta {
  flex: 1;
  min-width: 0;
}

.auth-account-head__email {
  font-size: 14px;
  font-weight: 580;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-account-head__plan-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.auth-account-head__plan {
  font-size: 11px;
  font-weight: 580;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 8px;
  border-radius: 4px;
}

.auth-upgrade-banner--account {
  margin: 0 10px 6px;
  width: calc(100% - 20px);
  box-sizing: border-box;
}

.auth-upgrade-banner__icon--account {
  background: linear-gradient(135deg, #7c3aed, #4553b3);
}

.auth-upgrade-banner__chev--account {
  color: #a78bfa;
}

.auth-divider--account {
  margin: 6px 0;
}

.auth-account-actions,
.auth-account-data-actions {
  padding: 4px 6px;
}

.auth-account-signout {
  padding: 4px 6px 6px;
}

@keyframes authDropdownFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ========================================
   Onboarding Screens (Entry, Login, Wizard)
   ======================================== */

.onboarding-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 9999;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.onboarding-screen.hidden {
  display: none;
}

/* Shared back button */
.onboarding-back {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 520;
  color: #64748b;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.15s ease;
}

.onboarding-back:hover {
  color: #0f172a;
}

/* Shared button */
.onboarding-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  transition: opacity 0.15s ease;
  letter-spacing: -0.01em;
}

.onboarding-btn--dark {
  background: #0f172a;
  color: #fff;
}

.onboarding-btn--dark:hover {
  opacity: 0.9;
}

/* ── Entry Screen ── */
.entry-screen-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 48px 32px;
}

.entry-logo {
  margin-bottom: 48px;
}

.entry-logo__text {
  font-size: 26px;
  font-weight: 760;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.entry-title {
  font-size: 30px;
  font-weight: 680;
  letter-spacing: -0.035em;
  text-align: center;
  margin: 0 0 8px;
  color: #0f172a;
  line-height: 1.15;
}

.entry-subtitle {
  font-size: 16px;
  color: #94a3b8;
  font-weight: 420;
  text-align: center;
  margin: 0 0 44px;
  max-width: 440px;
  line-height: 1.5;
}

/* Entry Cards — horizontal row */
.entry-cards {
  display: flex;
  gap: 16px;
  max-width: 760px;
  width: 100%;
}

.entry-card {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  border-radius: 12px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  transition: all 0.15s ease;
  flex: 1;
  position: relative;
  text-align: left;
  box-sizing: border-box;
}

.entry-card:hover {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.02);
}

.entry-card--primary {
  border: 2px solid var(--accent);
  background: rgba(81, 97, 214, 0.03);
}

.entry-card--primary:hover {
  border-color: var(--accent-text);
  background: rgba(81, 97, 214, 0.06);
}

.entry-card__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 600;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}

.entry-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.entry-card__icon--primary {
  background: rgba(81, 97, 214, 0.1);
}

.entry-card__title {
  font-size: 17px;
  font-weight: 620;
  color: #0f172a;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}

.entry-card__description {
  font-size: 13px;
  color: #64748b;
  font-weight: 420;
  line-height: 1.5;
  margin: 0 0 18px;
}

.entry-card__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 560;
  color: #475569;
  margin-top: auto;
}

.entry-card__action--primary {
  color: var(--accent-text);
}

.entry-card__action svg {
  transition: transform 0.15s ease;
}

.entry-card:hover .entry-card__action svg {
  transform: translateX(2px);
}

/* Fine print */
.entry-fine-print {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: #b0b8c4;
  font-weight: 420;
}

.entry-fine-print__item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.entry-fine-print__dot {
  color: #b0b8c4;
}

.entry-legal-note {
  margin: 14px 0 0;
  max-width: 760px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #58647a;
  text-align: center;
}

.entry-legal-meta {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: #7b879a;
  font-weight: 520;
  text-align: center;
}

/* ── Login Screen ── */
.login-screen-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 48px 32px;
}

.login-screen-inner>.onboarding-back {
  align-self: flex-start;
  max-width: 380px;
  width: 100%;
  margin: 0 auto 32px;
  padding-left: 0;
}

.login-title {
  font-size: 24px;
  font-weight: 660;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
  color: #0f172a;
  width: 100%;
  max-width: 380px;
}

.login-subtitle {
  font-size: 14px;
  color: #94a3b8;
  font-weight: 420;
  margin: 0 0 28px;
  width: 100%;
  max-width: 380px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 380px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.form-label {
  font-size: 13px;
  font-weight: 540;
  color: #0f172a;
}

.form-input {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 460;
  color: #0f172a;
  font-family: inherit;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: all 0.15s ease;
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(81, 97, 214, 0.1);
}

.form-input::placeholder {
  color: #94a3b8;
}

.login-form .onboarding-btn {
  width: 100%;
  margin-top: 8px;
}

.login-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.login-link {
  all: unset;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.login-link--muted {
  font-weight: 480;
  color: #64748b;
}

.login-link--muted:hover {
  color: #0f172a;
}

.login-link--blue {
  font-weight: 520;
  color: var(--accent);
}

.login-link--blue:hover {
  color: var(--accent-text);
}

/* ── Wizard (full-screen) ── */
.wizard-topbar {
  display: flex;
  align-items: center;
  padding: 0 28px;
  height: 56px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  gap: 20px;
  flex-shrink: 0;
}

.wizard-topbar .onboarding-back {
  margin-bottom: 0;
}

.wizard-progress-new {
  flex: 1;
  max-width: 400px;
}

.wizard-progress-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.wizard-progress-label {
  font-size: 12px;
  font-weight: 480;
  color: #94a3b8;
}

.wizard-progress-time {
  font-size: 12px;
  font-weight: 420;
  color: #b0b8c4;
}

.wizard-progress-track {
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.wizard-progress-bar {
  height: 100%;
  width: 14%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.wizard-topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.wizard-topbar__auth-hint {
  font-size: 13px;
  color: #94a3b8;
}

.wizard-topbar__login-link {
  all: unset;
  cursor: pointer;
  font-size: 13px;
  font-weight: 560;
  color: var(--accent);
}

.wizard-topbar__login-link:hover {
  color: var(--accent-text);
}

.wizard-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 32px 10px;
}

.wizard-body-new {
  width: 100%;
  max-width: 600px;
}

.wizard-legal-note {
  margin: 20px 0 0;
  max-width: 760px;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: #6b7280;
}

.wizard-footer-new {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding: 16px 28px;
  display: flex;
  justify-content: center;
  background: #fff;
  flex-shrink: 0;
}

.wizard-footer-new .onboarding-btn {
  width: auto;
}

/* ── Responsive ── */


/* ── PLANNER TOPBAR (for planera section) ── */
.visually-hidden {
  display: none !important;
}

.planner-topbar {
  height: 110px;
  min-height: 52px;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.07));
  background: var(--bg-card, #fff);
  flex-shrink: 0;
}

.planner-topbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 24px;
  gap: 20px;
}

.topbar-planheader {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 320px;
}

.topbar-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 260px;
}

.topbar-progress__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.topbar-progress__label {
  font-size: 11px;
  font-weight: 900;
  color: #94a3b8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar-progress__value {
  font-size: 15px;
  font-weight: 760;
  color: var(--text-primary, #0f172a);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.topbar-progress__bar {
  height: 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.topbar-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(99, 102, 241, 0.92) 100%);
  width: 0%;
  transition: width 0.35s ease;
}

.topbar-progress__micro {
  font-size: 12px;
  font-weight: 560;
  color: rgba(15, 23, 42, 0.62);
  line-height: 1.2;
}

/* Topbar knappar: Spara plan, + Ny plan, ⋯ (referensdesign) */
.planner-topbar .topbar-actions .btn-primary {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: var(--radius-md, 7px);
  font-family: inherit;
  font-size: 13px;
  font-weight: 560;
  background: var(--dark, #0f172a);
  color: #fff;
  transition: opacity 0.15s ease;
}

.planner-topbar .topbar-actions .btn-primary:hover {
  opacity: 0.85;
}

.planner-topbar .topbar-actions .btn-secondary {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: var(--radius-md, 7px);
  font-family: inherit;
  font-size: 13px;
  font-weight: 520;
  border: 1px solid var(--border-hover, rgba(0, 0, 0, 0.12));
  color: #374151;
  background: transparent;
  transition: background 0.15s ease;
}

.planner-topbar .topbar-actions .btn-secondary:hover {
  background: rgba(0, 0, 0, 0.03);
}

.planner-topbar .topbar-actions .btn-more {
  min-width: auto;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1;
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}



.topbar-more-menu {
  position: relative;
}

.btn-more {
  min-width: auto;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1;
}

.topbar-more-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--border-input, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown, 0 8px 24px rgba(0, 0, 0, 0.12));
  padding: 4px;
  min-width: 180px;
}

.topbar-more-item {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 480;
  color: #374151;
  transition: background 0.1s;
  text-align: left;
}

.topbar-more-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Brush dropdown styles */
.brush-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--border-input, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown, 0 8px 24px rgba(0, 0, 0, 0.12));
  padding: 4px;
  display: none;
}

.brush-dropdown-menu.open {
  display: block;
}

.brush-dropdown-option {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 480;
  color: #374151;
  transition: background 0.1s;
}

.brush-dropdown-option:hover {
  background: rgba(0, 0, 0, 0.04);
}

.brush-dropdown-option.selected {
  color: var(--accent, #4553b3);
  background: rgba(69, 83, 179, 0.06);
}

/* Hide topbar by default, show only when planera section is active */
.planner-topbar {
  display: none;
}

.planner-page.planner-app[data-planner-section="planera"] .planner-topbar {
  display: block;
}

/* Topbar sträcker sig hela vägen upp – ta bort mellanrum ovanför vid planera */
.planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-main {
  padding-top: 50px;
}

/* Topbar kant i kant: från sidopanelens högerkant till viewport höger (desktop, inloggad) */
@media (min-width: 981px) {
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="planera"] .planner-topbar {
    margin-left: calc(-1 * (var(--planner-left-nav-width) + var(--planner-left-nav-gap)));
    margin-right: -28px;
    width: calc(100% + (var(--planner-left-nav-width) + var(--planner-left-nav-gap)) + 28px);
    box-sizing: border-box;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="planera"] .planner-topbar__inner {
    padding-left: 300px;
    padding-right: 24px;
  }
}

/* -------------------------------------------------------------------------- */
/* Planera desktop redesign (reference matching) */
/* -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .planner-page.planner-app[data-planner-section="planera"] {
    --planera-bg-0: #f8f9fb;
    --planera-bg-1: #ffffff;
    --planera-bg-2: #f3f4f7;
    --planera-bg-3: #eceef2;
    --planera-border-1: rgba(0, 0, 0, 0.06);
    --planera-border-2: rgba(0, 0, 0, 0.09);
    --planera-border-3: rgba(0, 0, 0, 0.14);
    --planera-text-1: #0f0f18;
    --planera-text-2: #5c5c72;
    --planera-text-3: #60657d;
    --planera-indigo: #635bff;
    --planera-indigo-2: #4f46e5;
    --planera-indigo-bg: rgba(99, 91, 255, 0.07);
    --planera-indigo-bg-2: rgba(99, 91, 255, 0.13);
    --planera-teal: #0d9b7a;
    --planera-teal-bg: rgba(13, 155, 122, 0.08);
    --planera-amber: #d97706;
    --planera-amber-bg: rgba(217, 119, 6, 0.1);
    --planera-font: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --planera-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner {
    background: transparent;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav {
    background: var(--planera-bg-1);
    border-right: 1px solid var(--planera-border-2);
    border-left: 0;
    font-family: var(--planera-font);
    gap: 2px;
    padding-top: 14px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-nav-plan-switcher {
    padding: 6px 10px 12px;
    border-bottom: 1px solid var(--planera-border-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-nav-plan-switcher__btn {
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 8px 10px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-nav-plan-switcher__name {
    font-size: 14px;
    font-weight: 620;
    letter-spacing: -0.01em;
    color: var(--planera-text-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-nav-plan-switcher__status {
    font-size: 11.5px;
    color: var(--planera-text-3);
    margin-top: 2px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav__group-label {
    font-size: 10.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--planera-text-3);
    padding: 14px 10px 6px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav__item {
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--planera-text-2);
    padding: 8px 10px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav__item:hover {
    background: #f3f4f8;
    color: var(--planera-text-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav__item.is-active {
    background: var(--planera-indigo-bg);
    color: var(--planera-indigo-2);
    font-weight: 540;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav__item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 0 3px 3px 0;
    background: var(--planera-indigo);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav__badge {
    font-family: var(--planera-mono);
    font-size: 10.5px;
    font-weight: 600;
    background: var(--planera-amber-bg);
    color: var(--planera-amber);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav__divider {
    margin: 8px 10px;
    background: var(--planera-border-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav__item--secondary {
    color: var(--planera-text-2);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav__user {
    margin: auto 6px 8px;
    border-top: 1px solid var(--planera-border-1);
    border-radius: 8px;
    padding: 12px 10px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav__guest-upgrade {
    margin: auto 6px 8px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav__guest-upgrade:not(.hidden)+.planner-dashboard-nav__user {
    margin-top: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav__user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--planera-indigo), var(--planera-teal));
    font-size: 11px;
    font-weight: 650;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav__user-email {
    font-size: 12.5px;
    font-weight: 540;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-dashboard-nav__user-plan {
    font-size: 11px;
    color: var(--planera-text-3);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="planera"] .planner-topbar {
    margin-left: 0;
    margin-right: 0;
    width: auto;
    border-bottom: 1px solid var(--planera-border-1);
    background: var(--planera-bg-1);
    height: 56px;
    min-height: 56px;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="planera"] .planner-topbar__inner {
    padding: 0 28px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--planera-font);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-topbar__crumbs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--planera-text-3);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-topbar__crumb-current {
    color: var(--planera-text-1);
    font-weight: 530;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-topbar .topbar-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 8px;
    align-items: center;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-topbar .topbar-actions .btn-primary,
  .planner-page.planner-app[data-planner-section="planera"] .planner-topbar .topbar-actions .btn-secondary {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 13px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 560;
    font-family: var(--planera-font);
    transition: all 120ms ease;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-topbar .topbar-actions .btn-secondary {
    background: transparent;
    color: var(--planera-text-2);
    border: 1px solid var(--planera-border-2);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-topbar .topbar-actions .btn-secondary:hover {
    background: #f3f4f8;
    color: var(--planera-text-1);
    border-color: var(--planera-border-3);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-topbar .topbar-actions .btn-primary {
    background: var(--planera-indigo);
    color: #fff;
    box-shadow: 0 1px 3px rgba(99, 91, 255, 0.3), 0 0 0 1px rgba(99, 91, 255, 0.15);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-topbar .topbar-actions .btn-primary:hover {
    background: var(--planera-indigo-2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 91, 255, 0.35), 0 0 0 1px rgba(99, 91, 255, 0.2);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-topbar .btn-more {
    width: 30px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-topbar .topbar-more-dropdown {
    border: 1px solid var(--planera-border-2);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-topbar .topbar-more-item {
    font-family: var(--planera-font);
    font-size: 12.5px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-grid {
    margin-top: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerCardPlanera.left-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 44px 0 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] #planViewRow {
    margin: 0 0 20px;
    justify-content: flex-start;
    padding-left: 30px;
    padding-right: 30px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabs {
    margin-bottom: 0;
    background: var(--planera-bg-2);
    border-radius: 6px;
    padding: 3px;
    box-shadow: none;
    border: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabs .planner-tabs__btn {
    border-radius: 4px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 560;
    color: var(--planera-text-3);
    background: transparent;
    box-shadow: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabs .planner-tabs__btn:hover {
    color: var(--planera-text-2);
    background: transparent;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabs .planner-tabs__btn[aria-selected="true"],
  .planner-page.planner-app[data-planner-section="planera"] #plannerTabs .planner-tabs__btn.is-active {
    background: var(--planera-bg-1);
    color: var(--planera-text-1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--planera-border-2);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-status-bar {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--planera-border-2);
    border-radius: 14px;
    background: var(--planera-bg-1);
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-status-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--planera-indigo) 50%, transparent 100%);
    opacity: 0.2;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-status-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border-left: 1px solid var(--planera-border-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-status-section:first-child {
    border-left: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-status-section--progress {
    min-width: 172px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-status-label {
    font-size: 10.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--planera-text-3);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-status-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-family: var(--planera-mono);
    color: var(--planera-text-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-status-value small {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--planera-text-3);
    margin-left: 2px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-status-track {
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--planera-bg-3);
    margin-top: 3px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-status-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--planera-indigo), var(--planera-indigo-2));
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-status-tip {
    margin-left: auto;
    max-width: 320px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 16px;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid rgba(99, 91, 255, 0.12);
    background: var(--planera-indigo-bg);
    color: var(--planera-text-2);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 500;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-status-tip svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--planera-indigo);
    margin-top: 1px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
  }

  /* Period mode redesign */
  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod {
    background: var(--planera-bg-1);
    border: 1px solid var(--planera-border-2);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-canvas {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-canvas__header {
    margin-bottom: 24px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-canvas__title {
    font-size: 17px;
    font-weight: 620;
    letter-spacing: -0.02em;
    color: var(--planera-text-1);
    margin: 0 0 4px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-canvas__sub {
    margin: 0;
    font-size: 13.5px;
    color: var(--planera-text-3);
    font-weight: 450;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .summary-period-content {
    margin-top: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-range-row.period-range-with-arrow {
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: end;
    margin-bottom: 22px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-range-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    font-size: 18px;
    color: var(--planera-text-3);
    padding-bottom: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .label-strong.small {
    font-size: 12px;
    font-weight: 600;
    color: var(--planera-text-1);
    letter-spacing: 0.01em;
    margin-bottom: 6px;
    display: block;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .field.field--compact,
  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod #period-repeat {
    height: 42px;
    border-radius: 6px;
    border: 1px solid var(--planera-border-2);
    background: var(--planera-bg-1);
    color: var(--planera-text-1);
    font-size: 13.5px;
    font-weight: 450;
    padding: 10px 14px;
    transition: all 120ms ease;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .field.field--compact:hover,
  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod #period-repeat:hover {
    border-color: var(--planera-border-3);
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .field.field--compact:focus,
  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod #period-repeat:focus {
    outline: none;
    border-color: var(--planera-indigo);
    box-shadow: 0 0 0 3px var(--planera-indigo-bg);
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod #period-parent,
  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod #period-level,
  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod #period-day-type,
  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod #period-repeat {
    text-align: center;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .date-picker-wrapper {
    max-width: none;
    margin: 0;
    align-items: stretch;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .date-picker-trigger {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 42px;
    border-radius: 6px;
    border: 1px solid var(--planera-border-2);
    background: var(--planera-bg-1);
    font-size: 13.5px;
    font-weight: 450;
    color: var(--planera-text-1);
    padding: 10px 14px;
    justify-content: flex-start;
    box-shadow: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .date-picker-trigger:hover {
    border-color: var(--planera-border-3);
    transform: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .date-picker-trigger:focus-visible {
    outline: none;
    border-color: var(--planera-indigo);
    box-shadow: 0 0 0 3px var(--planera-indigo-bg);
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-weekdays-repeat-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 22px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-weekdays__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-weekdays__list .check label {
    height: auto;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--planera-border-2);
    background: var(--planera-bg-1);
    color: var(--planera-text-2);
    font-size: 12.5px;
    font-weight: 520;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-weekdays__list .check input:checked+label {
    background: var(--planera-indigo);
    border-color: var(--planera-indigo);
    color: #fff;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-weekdays__list .check input:not(:checked)+label {
    background: var(--planera-bg-2);
    border-color: transparent;
    color: var(--planera-text-3);
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-live-preview {
    background: var(--planera-bg-2);
    border: 1px solid var(--planera-border-1);
    border-radius: 6px;
    padding: 14px 18px;
    margin: 0 0 24px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-live-preview__label {
    font-size: 10.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--planera-text-3);
    margin-bottom: 4px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-live-preview__text {
    font-size: 14px;
    font-weight: 520;
    color: var(--planera-text-1);
    margin: 0;
    line-height: 1.4;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-advanced {
    margin-top: 0;
    margin-bottom: 22px;
    padding-top: 0;
    border-top: 1px solid var(--planera-border-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-advanced__summary {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 450;
    color: var(--planera-text-3);
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-advanced__summary .chev {
    width: 14px;
    text-align: center;
    opacity: 0.75;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-advanced__panel {
    background: transparent;
    border: 0;
    padding: 0 0 8px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-advanced__lock {
    font-size: 11px;
    color: var(--planera-text-3);
    background: var(--planera-bg-2);
    border: 1px solid var(--planera-border-1);
    border-radius: 999px;
    padding: 2px 8px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-advanced__help {
    font-size: 12px;
    color: var(--planera-text-3);
    margin-top: 6px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-cta-wrap {
    margin-top: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-cta {
    width: 100%;
    max-width: none;
    min-width: 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 620;
    padding: 12px 20px;
    background: var(--planera-indigo);
    border: 0;
    color: #fff;
    box-shadow: 0 1px 3px rgba(99, 91, 255, 0.3), 0 0 0 1px rgba(99, 91, 255, 0.15);
  }

  .planner-page.planner-app[data-planner-section="planera"] #plannerTabPeriod .period-cta:hover {
    background: var(--planera-indigo-2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 91, 255, 0.35), 0 0 0 1px rgba(99, 91, 255, 0.2);
  }

  .planner-page.planner-app[data-planner-section="planera"] #planeraToolbox.planera-controls {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar.planera-controls__panel {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    margin: 0;
    flex-wrap: wrap;
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .planera-control-row {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .planera-control-row__label {
    display: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-bar__chips {
    display: inline-flex;
    border: 1px solid var(--planera-border-2);
    border-radius: 6px;
    overflow: hidden;
    background: var(--planera-bg-1);
    min-height: 32px;
    gap: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--parent {
    border: 0;
    border-right: 0;
    border-radius: 0;
    min-width: 110px;
    padding: 6px 14px 6px 24px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--planera-text-2);
    background: transparent;
    text-align: left;
    position: relative;
    transition: all 120ms ease;
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--parent:not(.is-active):hover {
    background: #f3f4f8;
    color: var(--planera-text-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--parent[data-brush-parent="A"]::before,
  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--parent[data-brush-parent="B"]::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--parent[data-brush-parent="A"]::before {
    background: var(--planera-indigo);
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--parent[data-brush-parent="B"]::before {
    background: var(--planera-teal);
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--parent[data-brush-parent="A"].is-active {
    background: var(--planera-indigo);
    border-radius: 0;
    color: #fff;
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--parent[data-brush-parent="B"].is-active {
    background: var(--planera-teal);
    border-radius: 0;
    color: #fff;
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--parent.is-active::before {
    background: rgba(255, 255, 255, 0.9);
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--dropdown {
    min-width: 118px;
    height: 32px;
    border: 1px solid var(--planera-border-2);
    border-radius: 6px;
    background: var(--planera-bg-1);
    color: var(--planera-text-2);
    font-size: 12.5px;
    font-weight: 500;
    padding: 0 30px 0 11px;
    justify-content: flex-start;
    gap: 0;
    position: relative;
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--dropdown:hover {
    border-color: var(--planera-border-3);
    color: var(--planera-text-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--dropdown:focus,
  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--dropdown.open {
    border-color: var(--planera-indigo);
    box-shadow: 0 0 0 3px var(--planera-indigo-bg);
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--dropdown::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    margin-left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235e5e74' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 10px 6px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-chip--dropdown.open::after {
    transform: translateY(-50%);
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .brush-dropdown-menu {
    min-width: 132px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-toolbar>.planera-control-row--actions {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-toolbar>.planera-control-row--actions .planera-control-row__control {
    gap: 8px;
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .planera-legend-row {
    margin: 0 0 0 2px;
    padding: 0;
    min-width: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .planner-page.planner-app[data-planner-section="planera"] #brushBar .planera-controls__legend {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-inline-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    position: relative;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-inline-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: auto;
    min-width: max-content;
    padding: 0 13px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 560;
    white-space: nowrap;
    font-family: var(--planera-font);
    transition: all 120ms ease;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-inline-btn--secondary {
    background: transparent;
    color: var(--planera-text-2);
    border: 1px solid var(--planera-border-2);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-inline-btn--secondary:hover {
    background: #f3f4f8;
    color: var(--planera-text-1);
    border-color: var(--planera-border-3);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-inline-btn--primary {
    background: var(--planera-indigo);
    color: #fff;
    box-shadow: 0 1px 3px rgba(99, 91, 255, 0.3), 0 0 0 1px rgba(99, 91, 255, 0.15);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-inline-btn--primary:hover {
    background: var(--planera-indigo-2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 91, 255, 0.35), 0 0 0 1px rgba(99, 91, 255, 0.2);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-inline-btn--more {
    width: 30px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-inline-more {
    position: relative;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-inline-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 168px;
    background: #fff;
    border: 1px solid var(--planera-border-2);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 4px;
    z-index: 60;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-inline-item {
    all: unset;
    cursor: pointer;
    display: block;
    width: 100%;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--planera-text-2);
    font-family: var(--planera-font);
    transition: background 120ms ease, color 120ms ease;
    box-sizing: border-box;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-inline-item:hover {
    background: #f3f4f8;
    color: var(--planera-text-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planner-topbar .topbar-actions {
    display: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] #planeraToolbox .planera-controls__meta {
    display: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-legend-row {
    margin: 0;
    padding: 0;
    justify-content: flex-end;
    min-width: max-content;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-controls__legend {
    display: inline-flex;
    flex-direction: row;
    gap: 14px;
    align-items: center;
    border: 0;
    padding: 0;
    margin: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--planera-text-2);
    font-weight: 520;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-legend-dot--a {
    background: var(--planera-indigo);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-legend-dot--b {
    background: var(--planera-teal);
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-legend-dot--ab {
    background: var(--planera-amber);
  }

  .planner-page.planner-app[data-planner-section="planera"] .legend-count {
    font-family: var(--planera-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--planera-text-3);
  }

  .planner-page.planner-app[data-planner-section="planera"] #planeraGuidance {
    display: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] .planera-calendar-stage {
    margin-bottom: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] .periods-month {
    gap: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-month {
    background: var(--planera-bg-1);
    border: 1px solid var(--planera-border-2);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    padding: 0;
    overflow: hidden;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-month__title-row {
    margin: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--planera-border-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-nav {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--planera-border-2);
    background: transparent;
    color: var(--planera-text-2);
    font-size: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-nav svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-nav:hover {
    background: #f3f4f8;
    border-color: var(--planera-border-3);
    color: var(--planera-text-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-month__title {
    font-family: var(--planera-font);
    font-size: 15px;
    font-weight: 620;
    letter-spacing: -0.02em;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-month__title span {
    color: var(--planera-text-3);
    font-weight: 450;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-month__grid,
  .planner-page.planner-app[data-planner-section="planera"] .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    background: transparent;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-weekday,
  .planner-page.planner-app[data-planner-section="planera"] .cal-dow {
    padding: 9px 0;
    text-align: center;
    font-size: 10.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--planera-text-3);
    border-bottom: 1px solid var(--planera-border-1);
    border-radius: 0;
    background: transparent;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day {
    min-height: 82px;
    aspect-ratio: auto;
    padding: 7px 9px;
    border: 0;
    border-right: 1px solid var(--planera-border-1);
    border-bottom: 1px solid var(--planera-border-1);
    border-radius: 0;
    background: var(--planera-bg-1);
    transition: all 150ms ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    cursor: pointer;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-month__grid>.calendar-day:nth-child(7n),
  .planner-page.planner-app[data-planner-section="planera"] .cal-grid>.calendar-day:nth-child(7n) {
    border-right: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day:not(.calendar-day--outside):hover {
    background: #f3f4f8;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day--outside {
    background: var(--planera-bg-2);
    opacity: 0.5;
    border-right: 1px solid var(--planera-border-1);
    border-bottom: 1px solid var(--planera-border-1);
    cursor: default;
    pointer-events: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day__num {
    position: relative;
    top: auto;
    left: auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12.5px;
    font-weight: 560;
    color: var(--planera-text-2);
    line-height: 1;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--today .calendar-day__num {
    background: var(--planera-indigo);
    color: #fff;
    font-weight: 620;
    box-shadow: 0 2px 6px rgba(99, 91, 255, 0.2);
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--weekend .calendar-day__num {
    color: var(--planera-text-3);
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--red-day .calendar-day__num {
    color: #b42318;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--eve-day .calendar-day__num {
    color: #b45309;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--today.day--weekend .calendar-day__num {
    color: #fff;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--today.day--red-day .calendar-day__num,
  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--today.day--eve-day .calendar-day__num {
    color: #fff;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day__tags {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day__tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 120ms ease;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day__tag--a {
    background: var(--planera-indigo-bg);
    color: var(--planera-indigo);
    border: 1px solid rgba(99, 91, 255, 0.14);
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day__tag--b {
    background: var(--planera-teal-bg);
    color: var(--planera-teal);
    border: 1px solid rgba(13, 155, 122, 0.14);
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day:hover .calendar-day__tag--a {
    background: var(--planera-indigo-bg-2);
    border-color: rgba(99, 91, 255, 0.25);
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day:hover .calendar-day__tag--b {
    background: rgba(13, 155, 122, 0.14);
    border-color: rgba(13, 155, 122, 0.25);
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--selected,
  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--a,
  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--b,
  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--ab {
    background: var(--planera-indigo-bg);
    box-shadow: inset 0 0 0 1.5px rgba(99, 91, 255, 0.28);
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--selected .calendar-day__num {
    color: var(--planera-text-1);
    font-weight: 620;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--block::before,
  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--block::after {
    display: none !important;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--cont-left,
  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--cont-right,
  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--cont-left.day--cont-right {
    border-radius: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--today {
    outline: none;
  }

  /* Match reference: today's marker should be the circle, not a full cell tint. */
  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--today:not(.day--a):not(.day--b):not(.day--ab):not(.day--selected) {
    background: var(--planera-bg-1);
    box-shadow: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day:not(.day--a):not(.day--b):not(.day--ab):focus {
    background: var(--planera-bg-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--range {
    outline: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--conflict {
    outline: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day__tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background: var(--planera-text-1);
    color: #fff;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 11.5px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 30;
    transition: all 150ms ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day__tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--planera-text-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day:hover .calendar-day__tooltip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day__conflict {
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    font-size: 10px;
    box-shadow: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-dates {
    margin-top: 22px;
    background: var(--planera-bg-1);
    border: 1px solid var(--planera-border-2);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-dates__title {
    margin: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--planera-border-1);
    font-size: 13px;
    font-weight: 620;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--planera-text-2);
    font-family: var(--planera-font);
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-dates__months {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row {
    border-bottom: 1px solid var(--planera-border-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row:last-child {
    border-bottom: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row-header {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: background 120ms ease;
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row-header:hover {
    background: #f3f4f8;
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row-chevron {
    width: 16px;
    height: 16px;
    color: var(--planera-text-3);
    flex: 0 0 auto;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row.open .plan-row-chevron {
    transform: rotate(90deg);
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--planera-indigo);
    flex: 0 0 auto;
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--planera-text-2);
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row-text strong {
    color: var(--planera-text-1);
    font-weight: 560;
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row-right {
    margin-left: auto;
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row-action {
    font-size: 12px;
    font-weight: 560;
    color: var(--planera-indigo);
    border: 0;
    background: transparent;
    padding: 4px 10px;
    border-radius: 6px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row-action:hover {
    background: var(--planera-indigo-bg);
    color: var(--planera-indigo-2);
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .plan-row.open .plan-row-details {
    max-height: 1200px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list {
    padding: 0 0 6px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row {
    display: flex;
    align-items: center;
    padding: 8px 20px 8px 46px;
    gap: 0;
    cursor: pointer;
    transition: background 100ms ease;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row:hover {
    background: #f3f4f8;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row:focus-visible {
    outline: 2px solid rgba(99, 91, 255, 0.3);
    outline-offset: -2px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-date {
    width: 72px;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--planera-mono);
    color: var(--planera-text-1);
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-weekday {
    width: 40px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--planera-text-3);
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-parent-wrap {
    display: inline-flex;
    margin-right: 10px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-parent {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-parent.elin {
    background: var(--planera-indigo-bg);
    color: var(--planera-indigo);
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-parent.daniel {
    background: var(--planera-teal-bg);
    color: var(--planera-teal);
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-level {
    flex: 1;
    font-size: 12px;
    color: var(--planera-text-2);
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-edit {
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--planera-text-3);
    opacity: 0;
    transition: opacity 100ms ease, color 100ms ease;
    cursor: pointer;
    padding: 0;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-edit svg {
    width: 12px;
    height: 12px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row:hover .dl-edit {
    opacity: 1;
    color: var(--planera-indigo);
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row.is-ten .dl-edit {
    text-decoration: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row.editing {
    background: var(--planera-indigo-bg);
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row.editing .dl-edit {
    opacity: 0;
    pointer-events: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-inline-edit {
    display: none;
    align-items: center;
    gap: 8px;
    flex: 1;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row.editing .dl-inline-edit {
    display: flex;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row.editing .dl-level,
  .planner-page.planner-app[data-planner-section="planera"] .day-list-row.editing .dl-parent-wrap {
    display: none;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-inline-select {
    appearance: none;
    background: var(--planera-bg-1);
    border: 1px solid var(--planera-border-2);
    border-radius: 4px;
    color: var(--planera-text-1);
    font-size: 11.5px;
    font-weight: 500;
    font-family: var(--planera-font);
    padding: 4px 22px 4px 8px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%239494a8' fill='none' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    transition: all 100ms ease;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-inline-select:focus {
    outline: none;
    border-color: var(--planera-indigo);
    box-shadow: 0 0 0 2px var(--planera-indigo-bg);
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-inline-btn {
    border: 0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--planera-font);
    cursor: pointer;
    padding: 3px 10px;
    transition: all 100ms ease;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-inline-save {
    background: var(--planera-indigo);
    color: #fff;
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-inline-save:hover {
    background: var(--planera-indigo-2);
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-inline-cancel {
    background: transparent;
    border: 1px solid var(--planera-border-2);
    color: var(--planera-text-3);
  }

  .planner-page.planner-app[data-planner-section="planera"] .day-list-row .dl-inline-cancel:hover {
    background: #f3f4f8;
    color: var(--planera-text-1);
  }
}

/* -------------------------------------------------------------------------- */
/* Ekonomi redesign (desktop first)                                           */
/* -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] {
    --econ-bg-0: #f8f9fb;
    --econ-bg-1: #ffffff;
    --econ-bg-2: #f3f4f7;
    --econ-bg-3: #eceef2;
    --econ-border-1: rgba(0, 0, 0, 0.06);
    --econ-border-2: rgba(0, 0, 0, 0.09);
    --econ-border-3: rgba(0, 0, 0, 0.14);
    --econ-text-1: #0f0f18;
    --econ-text-2: #5c5c72;
    --econ-text-3: #60657d;
    --econ-indigo: #635bff;
    --econ-indigo-2: #4f46e5;
    --econ-indigo-bg: rgba(99, 91, 255, 0.07);
    --econ-teal: #0d9b7a;
    --econ-amber: #d97706;
    --econ-font: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --econ-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor {
    font-family: var(--econ-font);
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .section-page-header {
    margin: 0 0 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .section-page-header__main {
    min-width: 0;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .section-page-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--econ-text-1);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .section-page-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--econ-text-3);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-adjust-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 6px;
    border: 1px solid var(--econ-border-2);
    background: transparent;
    color: var(--econ-text-2);
    font-size: 12.5px;
    font-weight: 520;
    line-height: 1;
    transition: all 120ms ease;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-adjust-btn svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-adjust-btn:hover {
    background: var(--econ-bg-2);
    color: var(--econ-text-1);
    border-color: var(--econ-border-3);
    opacity: 1;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-card {
    position: relative;
    overflow: hidden;
    background: var(--econ-bg-1);
    border: 1px solid var(--econ-border-2);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    opacity: 0.24;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-card:first-child::before {
    background: linear-gradient(90deg, transparent, var(--econ-indigo), transparent);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-card:last-child::before {
    background: linear-gradient(90deg, transparent, var(--econ-teal), transparent);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-card__label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 620;
    color: var(--econ-text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-card__value {
    margin: 0 0 10px;
    font-family: var(--econ-mono);
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -1.2px;
    color: var(--econ-text-1);
    font-weight: 700;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-card__value small {
    font-size: 18px;
    font-weight: 520;
    letter-spacing: 0;
    margin-left: 2px;
    color: var(--econ-text-1);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-card__sublabel {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--econ-text-3);
    font-weight: 460;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-mini-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    gap: 0;
    margin-bottom: 12px;
    background: var(--econ-bg-2);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-mini-bar__segment {
    height: 100%;
    transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-mini-bar__segment--parent-a {
    background: var(--econ-indigo);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-mini-bar__segment--parent-b {
    background: var(--econ-teal);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-parents {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-parent {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--econ-text-2);
    font-weight: 470;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-parent__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-parent--a .economy-summary-parent__dot {
    background: var(--econ-indigo);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-parent--b .economy-summary-parent__dot {
    background: var(--econ-teal);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-summary-parent__amount {
    font-family: var(--econ-mono);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--econ-text-3);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 76px;
    margin-top: 10px;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-mini-chart__item {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-mini-chart__bar {
    width: 100%;
    min-width: 0;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--econ-indigo) 0%, var(--econ-indigo-2) 100%);
    opacity: 0.92;
    transition: height 800ms cubic-bezier(0.16, 1, 0.3, 1), opacity 140ms ease;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-mini-chart__bar:hover {
    opacity: 1;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-mini-chart__label {
    font-size: 10px;
    line-height: 1;
    font-family: var(--econ-mono);
    font-weight: 500;
    color: var(--econ-text-3);
    text-transform: capitalize;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-distribution-bar {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    gap: 3px;
    background: transparent;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-distribution-bar__seg {
    border-radius: 4px;
    transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-distribution-bar__seg--sgi {
    background: var(--econ-indigo);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-distribution-bar__seg--low {
    background: rgba(99, 91, 255, 0.35);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-distribution-bar__seg--other {
    background: var(--econ-bg-3);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-section {
    margin: 0;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .economy-months-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 620;
    color: var(--econ-text-1);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-tooltip-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--econ-text-3);
    font-size: 12px;
    line-height: 1;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-months {
    background: var(--econ-bg-1);
    border: 1px solid var(--econ-border-2);
    border-radius: 14px;
    overflow: visible;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-month {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--econ-border-1);
    border-radius: 0;
    box-shadow: none;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-month:last-child {
    border-bottom: 0;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-month-header {
    padding: 14px 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-month-header:hover {
    background: var(--econ-bg-2);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-month-name {
    font-size: 13.5px;
    font-weight: 520;
    color: var(--econ-text-1);
    text-transform: capitalize;
    letter-spacing: -0.01em;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-month-amount {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--econ-mono);
    color: var(--econ-text-1);
    letter-spacing: -0.5px;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-chevron {
    width: 16px;
    height: 16px;
    color: var(--econ-text-3);
    opacity: 1;
    transform: rotate(-90deg);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-chevron.rotated {
    transform: rotate(0deg);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-month-details {
    margin: 0;
    padding: 4px 20px 18px 46px;
    border-top: 1px solid var(--econ-border-1);
    background: transparent;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-parent {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-parent:last-child {
    margin-bottom: 0;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-parent+.summary-economy-parent {
    border-top: 1px solid var(--econ-border-1);
    margin-top: 8px;
    padding-top: 10px;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-parent-head {
    margin-bottom: 8px;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-parent-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 650;
    text-transform: none;
    letter-spacing: 0;
    color: var(--econ-text-2);
    opacity: 1;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-parent-name::before {
    width: 7px;
    height: 7px;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-parent-subtotal {
    font-family: var(--econ-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--econ-text-1);
    letter-spacing: -0.2px;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-parent-details {
    gap: 0;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-detail-row {
    padding: 5px 0;
    gap: 10px;
    font-size: 12.5px;
    color: var(--econ-text-2);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-detail-row span {
    font-size: 12.5px;
    color: var(--econ-text-2);
    font-weight: 450;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-detail-text {
    font-size: 12.5px;
    color: var(--econ-text-2);
    font-weight: 450;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-detail-amount {
    font-family: var(--econ-mono);
    font-size: 12.5px;
    font-weight: 520;
    color: var(--econ-text-2);
    white-space: nowrap;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-period-total {
    margin-top: 28px;
    padding: 22px 24px;
    background: var(--econ-bg-1);
    border: 1px solid var(--econ-border-2);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-period-total::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--econ-indigo), transparent);
    opacity: 0.2;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-period-total__label {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 620;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--econ-text-3);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-period-total__value {
    margin: 0 0 8px;
    font-family: var(--econ-mono);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--econ-text-1);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-period-total__value small {
    font-size: 16px;
    font-weight: 520;
    margin-left: 2px;
    letter-spacing: 0;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-period-total__note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--econ-text-3);
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-period-total__note svg {
    width: 13px;
    height: 13px;
    opacity: 0.55;
    flex: 0 0 auto;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor .summary-economy-footer {
    display: none;
  }
}



/* Global desktop sidebar visual language (match Planera across sections) */
@media (min-width: 981px) {
  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav {
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, 0.09);
    border-left: 0;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    gap: 2px;
    padding-top: 14px;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-nav-plan-switcher {
    padding: 6px 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .planner-page.planner-app.planner-page--logged-in .planner-nav-plan-switcher__btn {
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 8px 10px;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-nav-plan-switcher__name {
    font-size: 14px;
    font-weight: 620;
    letter-spacing: -0.01em;
    color: #0f0f18;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-nav-plan-switcher__status {
    font-size: 11.5px;
    color: #60657d;
    margin-top: 2px;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__group-label {
    font-size: 10.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #60657d;
    padding: 14px 10px 6px;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__item {
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #5c5c72;
    padding: 8px 10px;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__icon {
    opacity: 0.45;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__item:hover {
    background: #f3f4f8;
    color: #0f0f18;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__item.is-active {
    background: rgba(99, 91, 255, 0.07);
    color: #4f46e5;
    font-weight: 540;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 0 3px 3px 0;
    background: #635bff;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__badge {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__divider {
    margin: 8px 10px;
    background: rgba(0, 0, 0, 0.06);
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__item--secondary {
    color: #5c5c72;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__user {
    margin: auto 0px 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 12px 10px;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__guest-upgrade {
    margin: auto 6px 8px;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__guest-upgrade:not(.hidden)+.planner-dashboard-nav__user {
    margin-top: 0;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #635bff, #0d9b7a);
    font-size: 11px;
    font-weight: 650;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__user-email {
    font-size: 12.5px;
    font-weight: 540;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__user-plan {
    font-size: 11px;
    color: #60657d;
  }
}

/* Economy modal redesign */
#economyOverlay.economy-modal-overlay {
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}

#economyOverlay.economy-modal-overlay .overlay__backdrop {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#economyOverlay .overlay__content.economy-modal-host {
  max-width: min(680px, 94vw);
  max-height: 90vh;
  margin: 0;
}

#economyOverlay .economy-modal {
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

#economyOverlay .economy-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

#economyOverlay .economy-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #0f0f18;
}

#economyOverlay .economy-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.09);
  color: #5c5c72;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
}

#economyOverlay .economy-modal__close:hover {
  background: #f3f4f8;
  border-color: rgba(0, 0, 0, 0.14);
  color: #0f0f18;
}

#economyOverlay .economy-modal__close svg {
  width: 15px;
  height: 15px;
}

#economyOverlay .economy-modal__body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

#economyOverlay .economy-modal__body::-webkit-scrollbar {
  width: 5px;
}

#economyOverlay .economy-modal__body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}

#economyOverlay .economy-modal__footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

#economyOverlay .economy-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
  border: none;
  color: #fff;
  background: #635bff;
  box-shadow: 0 1px 3px rgba(99, 91, 255, 0.3);
  transition: all 150ms ease;
}

#economyOverlay .economy-save-btn:hover {
  background: #4f46e5;
  box-shadow: 0 2px 8px rgba(99, 91, 255, 0.35);
  transform: translateY(-1px);
}

#economyOverlay .economy-form-root {
  margin: 0;
  padding: 0;
}

#economyOverlay .ekon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

#economyOverlay .ekon-column {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

#economyOverlay .ekon-col-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: #0f0f18;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#economyOverlay .ekon-col-title .col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

#economyOverlay .ekon-col-title .col-dot.elin {
  background: #635bff;
}

#economyOverlay .ekon-col-title .col-dot.daniel {
  background: #0d9b7a;
}

#economyOverlay .radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  background: #fff;
  cursor: pointer;
  transition: all 150ms ease;
  margin-bottom: 8px;
}

#economyOverlay .radio-card:last-child {
  margin-bottom: 0;
}

#economyOverlay .radio-card:hover {
  border-color: rgba(0, 0, 0, 0.14);
}

#economyOverlay .radio-card.selected {
  border-color: #635bff;
  background: rgba(99, 91, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.08);
}

#economyOverlay .radio-card__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#economyOverlay .radio-outer {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.14);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
  margin-top: 1px;
}

#economyOverlay .radio-card.selected .radio-outer {
  border-color: #635bff;
  background: #635bff;
}

#economyOverlay .radio-inner {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity 150ms ease;
}

#economyOverlay .radio-card.selected .radio-inner {
  opacity: 1;
}

#economyOverlay .radio-content {
  flex: 1;
  min-width: 0;
}

#economyOverlay .radio-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #0f0f18;
  margin-bottom: 2px;
}

#economyOverlay .radio-desc {
  display: block;
  font-size: 12px;
  color: #9494a8;
  line-height: 1.4;
}

#economyOverlay .radio-expand {
  display: block;
  margin-top: 10px;
}

#economyOverlay .radio-expand.hidden {
  display: none;
}

#economyOverlay .ekon-info-box {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(99, 91, 255, 0.07);
  border: 1px solid rgba(99, 91, 255, 0.1);
  font-size: 12px;
  color: #5c5c72;
  line-height: 1.5;
  margin-bottom: 10px;
}

#economyOverlay .ekon-info-box strong {
  color: #0f0f18;
}

#economyOverlay .ekon-info-box .sub {
  display: block;
  color: #9494a8;
  font-style: italic;
}

#economyOverlay .ekon-field-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #0f0f18;
  margin-bottom: 5px;
  display: block;
}

#economyOverlay .ekon-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #0f0f18;
  transition: all 120ms ease;
  text-align: center;
}

#economyOverlay .ekon-input:hover {
  border-color: rgba(0, 0, 0, 0.14);
}

#economyOverlay .ekon-input:focus {
  outline: none;
  border-color: #635bff;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.07);
}

#economyOverlay .ekon-input::placeholder {
  font-size: 14px;
  font-weight: 450;
  color: rgba(15, 15, 24, 0.35);
  letter-spacing: 0;
  opacity: 1;
}

#economyOverlay .ekon-field-hint {
  font-size: 11px;
  color: #9494a8;
  margin-top: 4px;
}

#economyOverlay .ekon-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 10px;
  padding-top: 2px;
  cursor: pointer;
}

#economyOverlay .ekon-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #635bff;
  cursor: pointer;
}

#economyOverlay .ekon-check span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f0f18;
}

#economyOverlay .ekon-inline-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 6px;
}

#economyOverlay .ekon-inline-fields .ekon-field-label {
  font-size: 11.75px;
  line-height: 1.35;
  color: #3f4257;
  margin-bottom: 6px;
  min-height: 2.7em;
  display: flex;
  align-items: flex-end;
  text-wrap: balance;
}

#economyOverlay .ekon-accordion {
  margin-top: 10px;
}

#economyOverlay .ekon-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: #5c5c72;
  text-align: left;
}

#economyOverlay .ekon-accordion-toggle svg {
  width: 14px;
  height: 14px;
  color: #9494a8;
  transition: transform 200ms ease;
}

#economyOverlay .ekon-accordion-toggle.is-open svg {
  transform: rotate(180deg);
}

#economyOverlay .ekon-accordion-panel {
  margin-top: 8px;
}

#economyOverlay .ekon-accordion-panel.hidden {
  display: none;
}



/* Home v2 (Hem-fliken) */
#react-home-root .home-v2 {
  font-family: var(--font);
  color: #0f0f18;
  padding: 0px 100px 48px 20px;
}

#react-home-root .home-v2-greeting {
  margin-bottom: 24px;
}

#react-home-root .home-v2-greeting h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

#react-home-root .home-v2-greeting p {
  margin: 0;
  font-size: 14px;
  color: #9494a8;
  line-height: 1.5;
}

#react-home-root .home-v2-greeting p strong {
  color: #5c5c72;
  font-weight: 600;
}

#react-home-root .home-v2-hero {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
  margin-bottom: 24px;
}

#react-home-root .home-v2-hero-main,
#react-home-root .home-v2-hero-metrics,
#react-home-root .home-v2-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#react-home-root .home-v2-hero-main {
  padding: 24px;
  position: relative;
  overflow: hidden;
}

#react-home-root .home-v2-hero-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #635bff, transparent);
  opacity: 0.25;
}

#react-home-root .home-v2-hero-top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 16px;
}

#react-home-root .home-v2-number {
  font-size: 52px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: -3px;
  line-height: 1;
}

#react-home-root .home-v2-number-sub {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: #9494a8;
}

#react-home-root .home-v2-hero-copy h3 {
  margin: 6px 0 3px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

#react-home-root .home-v2-hero-copy p {
  margin: 0;
  font-size: 13.5px;
  color: #9494a8;
}

#react-home-root .home-v2-progress {
  margin-bottom: 18px;
}

#react-home-root .home-v2-progress-track {
  height: 6px;
  border-radius: 3px;
  background: #eceef2;
  overflow: hidden;
  margin-bottom: 6px;
}

#react-home-root .home-v2-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #635bff, #4f46e5);
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

#react-home-root .home-v2-progress-label {
  text-align: right;
  font-size: 11.5px;
  color: #9494a8;
  font-family: var(--mono);
  font-weight: 500;
}

#react-home-root .home-v2-next-step {
  background: rgba(99, 91, 255, 0.07);
  border: 1px solid rgba(99, 91, 255, 0.1);
  border-radius: 10px;
  padding: 14px 18px;
}

#react-home-root .home-v2-next-label {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #4f46e5;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

#react-home-root .home-v2-next-text {
  margin-bottom: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: #0f0f18;
}

#react-home-root .home-v2-next-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#react-home-root .home-v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  transition: all 120ms ease;
}

#react-home-root .home-v2-btn-primary {
  color: #fff;
  background: #635bff;
  box-shadow: 0 1px 3px rgba(99, 91, 255, 0.3);
}

#react-home-root .home-v2-btn-primary:hover {
  background: #4f46e5;
  transform: translateY(-1px);
}

#react-home-root .home-v2-btn-ghost {
  border: 1px solid rgba(0, 0, 0, 0.09);
  background: #fff;
  color: #5c5c72;
}

#react-home-root .home-v2-btn-ghost:hover {
  border-color: rgba(0, 0, 0, 0.14);
  background: #f3f4f8;
  color: #0f0f18;
}

#react-home-root .home-v2-hero-metrics {
  padding: 20px;
}

#react-home-root .home-v2-hero-metrics-title {
  margin-bottom: 14px;
  font-size: 10.5px;
  font-weight: 700;
  color: #9494a8;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

#react-home-root .home-v2-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
}

#react-home-root .home-v2-metric-row+.home-v2-metric-row {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

#react-home-root .home-v2-metric-row span {
  font-size: 12.5px;
  color: #5c5c72;
}

#react-home-root .home-v2-metric-row strong {
  font-size: 13px;
  color: #0f0f18;
  font-family: var(--mono);
  font-weight: 600;
}

#react-home-root .home-v2-metric-row strong small {
  color: #9494a8;
  font-weight: 400;
}

#react-home-root .home-v2-metric-row strong.is-warn {
  color: #d97706;
}

#react-home-root .home-v2-metric-note {
  margin: 4px 0 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #5b5ed6;
}

#react-home-root .home-v2-mid-grid,
#react-home-root .home-v2-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

#react-home-root .home-v2-mid-grid {
  margin-bottom: 24px;
}

#react-home-root .home-v2-card {
  padding: 20px 22px;
}

#react-home-root .home-v2-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

#react-home-root .home-v2-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

#react-home-root .home-v2-card-head button {
  border: 0;
  background: transparent;
  color: #635bff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

#react-home-root .home-v2-dist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#react-home-root .home-v2-dist-row span {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 12.5px;
  color: #5c5c72;
  font-weight: 500;
}

#react-home-root .home-v2-dist-track {
  flex: 1;
  min-width: 0;
  height: 8px;
  border-radius: 4px;
  background: #eceef2;
  overflow: hidden;
}

#react-home-root .home-v2-dist-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#react-home-root .home-v2-dist-fill.is-a {
  background: #635bff;
}

#react-home-root .home-v2-dist-fill.is-b {
  background: #0d9b7a;
}

#react-home-root .home-v2-dist-row strong {
  width: 70px;
  text-align: right;
  font-size: 12px;
  font-family: var(--mono);
  color: #5c5c72;
  font-weight: 500;
}

#react-home-root .home-v2-dist-row strong small {
  color: #9494a8;
  font-weight: 400;
}

#react-home-root .home-v2-dist-extra {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#react-home-root .home-v2-dist-extra span {
  font-size: 12px;
  color: #9494a8;
}

#react-home-root .home-v2-dist-extra strong {
  font-size: 13px;
  font-family: var(--mono);
}

#react-home-root .home-v2-econ-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

#react-home-root .home-v2-econ-stats label {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  color: #9494a8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}

#react-home-root .home-v2-econ-stats strong {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: -0.8px;
}

#react-home-root .home-v2-econ-stats strong small {
  font-size: 14px;
  font-weight: 500;
}

#react-home-root .home-v2-econ-bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 48px;
}

#react-home-root .home-v2-econ-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#react-home-root .home-v2-econ-bar {
  width: 100%;
  background: #635bff;
  border-radius: 4px 4px 0 0;
  transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#react-home-root .home-v2-econ-bar.is-mid {
  opacity: 0.72;
}

#react-home-root .home-v2-econ-bar.is-last {
  opacity: 0.28;
}

#react-home-root .home-v2-econ-bar-wrap span {
  font-size: 10px;
  color: #9494a8;
  font-weight: 500;
}

#react-home-root .home-v2-section-title {
  margin-bottom: 14px;
}

#react-home-root .home-v2-section-title h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

#react-home-root .home-v2-section-title p {
  margin: 0;
  font-size: 13px;
  color: #9494a8;
}

#react-home-root .home-v2-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

#react-home-root .home-v2-action-card {
  text-align: left;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  cursor: pointer;
  transition: all 150ms ease;
}

#react-home-root .home-v2-action-card:hover {
  border-color: rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

#react-home-root .home-v2-action-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#react-home-root .home-v2-action-icon svg {
  width: 18px;
  height: 18px;
}

#react-home-root .home-v2-action-icon.is-economy {
  background: rgba(99, 91, 255, 0.07);
  color: #635bff;
}

#react-home-root .home-v2-action-icon.is-planera {
  background: rgba(13, 155, 122, 0.07);
  color: #0d9b7a;
}

#react-home-root .home-v2-action-icon.is-transfer {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}

#react-home-root .home-v2-action-copy strong {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
}

#react-home-root .home-v2-action-copy span {
  font-size: 12px;
  color: #9494a8;
  line-height: 1.4;
}

#react-home-root .home-v2-bottom-grid {
  margin-bottom: 8px;
}

#react-home-root .home-v2-badge {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
  font-family: var(--mono);
}

#react-home-root .home-v2-warning-list {
  display: grid;
  gap: 6px;
}

#react-home-root .home-v2-warning-row {
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  color: #5c5c72;
}

#react-home-root .home-v2-warning-row:last-child {
  border-bottom: 0;
}

#react-home-root .home-v2-warning-row svg {
  width: 14px;
  height: 14px;
  color: #9494a8;
}

#react-home-root .home-v2-warning-row.is-error {
  color: #dc2626;
}

#react-home-root .home-v2-warning-row.is-warning {
  color: #d97706;
}

#react-home-root .home-v2-empty {
  font-size: 12.5px;
  color: #5c5c72;
  padding: 8px 0;
}

#react-home-root .home-v2-basic-list {
  display: grid;
}

#react-home-root .home-v2-basic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

#react-home-root .home-v2-basic-row+.home-v2-basic-row {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

#react-home-root .home-v2-basic-row span {
  font-size: 12.5px;
  color: #9494a8;
}

#react-home-root .home-v2-basic-row strong {
  font-size: 12.5px;
  color: #0f0f18;
  font-weight: 600;
}

#react-home-root .home-v2-basic-cta {
  margin-top: 10px;
}



/* Parents v2 (Föräldrar & överföringar) */
#mobile-overview-rest .summary-card--parents {
  --bg-0: #f8f9fb;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #f3f4f7;
  --bg-4: #eceef2;
  --bg-hover: #f3f4f8;
  --border-1: rgba(0, 0, 0, 0.06);
  --border-2: rgba(0, 0, 0, 0.09);
  --border-3: rgba(0, 0, 0, 0.14);
  --text-1: #0f0f18;
  --text-2: #5c5c72;
  --text-3: #60657d;
  --indigo: #635bff;
  --indigo-light: #4f46e5;
  --indigo-bg: rgba(99, 91, 255, 0.07);
  --indigo-bg2: rgba(99, 91, 255, 0.13);
  --teal: #0d9b7a;
  --teal-light: #0a7f64;
  --teal-bg: rgba(13, 155, 122, 0.07);
  --teal-bg2: rgba(13, 155, 122, 0.13);
  --amber: #d97706;
  --amber-bg: rgba(217, 119, 6, 0.1);
  --red: #dc2626;
  --red-bg: rgba(220, 38, 38, 0.1);
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;

  font-family: var(--font);
  color: var(--text-1);
}

#mobile-overview-rest .summary-card--parents .page-header {
  margin-bottom: 24px;
}

#mobile-overview-rest .summary-card--parents .page-header h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

#mobile-overview-rest .summary-card--parents .page-header p {
  margin: 0;
  font-size: 14px;
  color: var(--text-3);
}

#mobile-overview-rest .summary-card--parents .hero-card {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-l);
  padding: 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

#mobile-overview-rest .summary-card--parents .hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--indigo), transparent);
  opacity: 0.25;
}

#mobile-overview-rest .summary-card--parents .hero-big-number {
  font-size: 56px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: -3px;
  line-height: 1;
  color: var(--text-1);
}

#mobile-overview-rest .summary-card--parents .hero-big-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 24px;
}

#mobile-overview-rest .summary-card--parents .parent-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

#mobile-overview-rest .summary-card--parents .parent-bar-row:last-child {
  margin-bottom: 0;
}

#mobile-overview-rest .summary-card--parents .pb-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

#mobile-overview-rest .summary-card--parents .pb-track {
  flex: 1;
  min-width: 0;
  height: 10px;
  background: var(--bg-4);
  border-radius: 5px;
  overflow: hidden;
}

#mobile-overview-rest .summary-card--parents .pb-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-overview-rest .summary-card--parents .pb-fill.elin {
  background: linear-gradient(90deg, var(--indigo), var(--indigo-light));
}

#mobile-overview-rest .summary-card--parents .pb-fill.daniel {
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
}

#mobile-overview-rest .summary-card--parents .pb-count {
  font-size: 14px;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text-1);
  width: 36px;
  text-align: right;
}

#mobile-overview-rest .summary-card--parents .parent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

#mobile-overview-rest .summary-card--parents .parent-grid.parent-grid--single {
  grid-template-columns: 1fr;
}

#mobile-overview-rest .summary-card--parents .parent-card {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-l);
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#mobile-overview-rest .summary-card--parents .pc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

#mobile-overview-rest .summary-card--parents .pc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

#mobile-overview-rest .summary-card--parents .pc-dot.elin {
  background: var(--indigo);
}

#mobile-overview-rest .summary-card--parents .pc-dot.daniel {
  background: var(--teal);
}

#mobile-overview-rest .summary-card--parents .pc-name {
  font-size: 14px;
  font-weight: 600;
}

#mobile-overview-rest .summary-card--parents .pc-ring-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

#mobile-overview-rest .summary-card--parents .pc-ring {
  width: 100px;
  height: 100px;
  position: relative;
  flex-shrink: 0;
}

#mobile-overview-rest .summary-card--parents .pc-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

#mobile-overview-rest .summary-card--parents .pc-ring circle {
  fill: none;
  stroke-width: 5;
}

#mobile-overview-rest .summary-card--parents .pc-ring .track {
  stroke: var(--bg-4);
}

#mobile-overview-rest .summary-card--parents .pc-ring .fill-elin {
  stroke: var(--indigo);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-overview-rest .summary-card--parents .pc-ring .fill-daniel {
  stroke: var(--teal);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-overview-rest .summary-card--parents .pc-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#mobile-overview-rest .summary-card--parents .pc-ring-num {
  font-size: 19px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: -0.7px;
  line-height: 1;
}

#mobile-overview-rest .summary-card--parents .pc-ring-sub {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#mobile-overview-rest .summary-card--parents .pc-progress-area {
  flex: 1;
  min-width: 0;
}

#mobile-overview-rest .summary-card--parents .pc-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

#mobile-overview-rest .summary-card--parents .pc-progress-label span:first-child {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}

#mobile-overview-rest .summary-card--parents .pc-progress-label span:last-child {
  font-size: 12px;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text-2);
}

#mobile-overview-rest .summary-card--parents .pc-progress-track {
  height: 6px;
  background: var(--bg-4);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}

#mobile-overview-rest .summary-card--parents .pc-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-overview-rest .summary-card--parents .pc-progress-fill.elin {
  background: var(--indigo);
}

#mobile-overview-rest .summary-card--parents .pc-progress-fill.daniel {
  background: var(--teal);
}

#mobile-overview-rest .summary-card--parents .pc-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#mobile-overview-rest .summary-card--parents .pc-type {
  padding: 10px 12px;
  border-radius: var(--radius-s);
  background: var(--bg-3);
  border: 1px solid var(--border-1);
}

#mobile-overview-rest .summary-card--parents .pc-type-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

#mobile-overview-rest .summary-card--parents .pc-type-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

#mobile-overview-rest .summary-card--parents .pc-type-dot.indigo {
  background: var(--indigo);
}

#mobile-overview-rest .summary-card--parents .pc-type-dot.teal-d {
  background: var(--teal);
}

#mobile-overview-rest .summary-card--parents .pc-type-val {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: -0.5px;
}

#mobile-overview-rest .summary-card--parents .pc-type-val .of {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
}

#mobile-overview-rest .summary-card--parents .transfer-card {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-l);
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#mobile-overview-rest .summary-card--parents .tc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

#mobile-overview-rest .summary-card--parents .tc-header svg {
  width: 18px;
  height: 18px;
  color: var(--text-2);
}

#mobile-overview-rest .summary-card--parents .tc-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

#mobile-overview-rest .summary-card--parents .tc-sub {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 20px;
}

#mobile-overview-rest .summary-card--parents .transfer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}

#mobile-overview-rest .summary-card--parents .transfer-row+.transfer-row {
  border-top: 1px solid var(--border-1);
}

#mobile-overview-rest .summary-card--parents .tr-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#mobile-overview-rest .summary-card--parents .tr-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

#mobile-overview-rest .summary-card--parents .tr-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

#mobile-overview-rest .summary-card--parents .tr-dot.elin-c {
  background: var(--indigo-bg2);
}

#mobile-overview-rest .summary-card--parents .tr-dot.daniel-c {
  background: var(--teal-bg2);
}

#mobile-overview-rest .summary-card--parents .tr-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
}

#mobile-overview-rest .summary-card--parents .tr-hint {
  font-size: 11.5px;
  color: var(--text-3);
}

#mobile-overview-rest .summary-card--parents .tr-controls {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-s);
  overflow: hidden;
  flex-shrink: 0;
}

#mobile-overview-rest .summary-card--parents .tr-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: var(--bg-3);
  color: var(--text-2);
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font);
  transition: all 100ms ease;
}

#mobile-overview-rest .summary-card--parents .tr-btn:hover:not(:disabled) {
  background: var(--bg-4);
  color: var(--text-1);
}

#mobile-overview-rest .summary-card--parents .tr-btn:active:not(:disabled) {
  background: var(--indigo-bg);
  color: var(--indigo);
}

#mobile-overview-rest .summary-card--parents .tr-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#mobile-overview-rest .summary-card--parents .tr-val {
  width: 48px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border-1);
  border-right: 1px solid var(--border-1);
  background: var(--bg-1);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--text-1);
}

#mobile-overview-rest .summary-card--parents .transfer-card.transfer-locked {
  position: relative;
  overflow: hidden;
}

#mobile-overview-rest .summary-card--parents .transfer-card.transfer-locked .tl-content {
  filter: blur(2px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

#mobile-overview-rest .summary-card--parents .premium-tag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--indigo-bg);
  border: 1px solid rgba(99, 91, 255, 0.12);
  font-size: 11px;
  font-weight: 600;
  color: var(--indigo);
}

#mobile-overview-rest .summary-card--parents .premium-tag svg {
  width: 12px;
  height: 12px;
}

#mobile-overview-rest .summary-card--parents .tl-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.85) 45%,
      rgba(255, 255, 255, 0.95) 100%);
  z-index: 2;
}

#mobile-overview-rest .summary-card--parents .tl-overlay-inner {
  text-align: center;
  padding: 20px;
  max-width: 340px;
}

#mobile-overview-rest .summary-card--parents .tl-lock-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--indigo-bg);
  border: 1px solid rgba(99, 91, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

#mobile-overview-rest .summary-card--parents .tl-lock-icon svg {
  width: 20px;
  height: 20px;
  color: var(--indigo);
}

#mobile-overview-rest .summary-card--parents .tl-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-1);
  margin-bottom: 6px;
}

#mobile-overview-rest .summary-card--parents .tl-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0 auto 16px;
}

#mobile-overview-rest .summary-card--parents .tl-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
}

#mobile-overview-rest .summary-card--parents .tl-price strong {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 700;
}

#mobile-overview-rest .summary-card--parents .tl-price small {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  text-decoration: line-through;
}

#mobile-overview-rest .summary-card--parents .anim {
  animation: parentsFadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#mobile-overview-rest .summary-card--parents .d1 {
  animation-delay: 0.05s;
}

#mobile-overview-rest .summary-card--parents .d2 {
  animation-delay: 0.1s;
}

#mobile-overview-rest .summary-card--parents .d3 {
  animation-delay: 0.15s;
}

@keyframes parentsFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* Warnings v2 */
#plannerCardWarnings.warnings-v2 {
  --bg-0: #f8f9fb;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #f3f4f7;
  --bg-4: #eceef2;
  --bg-hover: #f3f4f8;
  --border-1: rgba(0, 0, 0, 0.06);
  --border-2: rgba(0, 0, 0, 0.09);
  --border-3: rgba(0, 0, 0, 0.14);
  --text-1: #0f0f18;
  --text-2: #5c5c72;
  --text-3: #9494a8;
  --indigo: #635bff;
  --indigo-light: #4f46e5;
  --indigo-bg: rgba(99, 91, 255, 0.07);
  --indigo-bg2: rgba(99, 91, 255, 0.13);
  --teal: #0d9b7a;
  --teal-light: #0b8b6d;
  --teal-bg: rgba(13, 155, 122, 0.07);
  --teal-bg2: rgba(13, 155, 122, 0.13);
  --amber: #d97706;
  --amber-bg: rgba(217, 119, 6, 0.1);
  --amber-bg2: rgba(217, 119, 6, 0.06);
  --red: #dc2626;
  --red-bg: rgba(220, 38, 38, 0.1);
  --green: #16a34a;
  --green-bg: rgba(22, 163, 74, 0.08);
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;

  max-width: 720px;
  font-family: var(--font);
  color: var(--text-1);
}

#plannerCardWarnings.warnings-v2 .page-header {
  margin-bottom: 8px;
}

#plannerCardWarnings.warnings-v2 .page-header h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#plannerCardWarnings.warnings-v2 .page-header p {
  font-size: 14px;
  color: var(--text-3);
  margin: 0;
}

#plannerCardWarnings.warnings-v2 .header-badge {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--amber-bg);
  color: var(--amber);
}

#plannerCardWarnings.warnings-v2 .status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 24px;
}

#plannerCardWarnings.warnings-v2 .status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--border-2);
  background: var(--bg-1);
}

#plannerCardWarnings.warnings-v2 .status-pill .sp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

#plannerCardWarnings.warnings-v2 .status-pill .sp-dot.amber {
  background: var(--amber);
}

#plannerCardWarnings.warnings-v2 .status-pill .sp-dot.green {
  background: var(--green);
}

#plannerCardWarnings.warnings-v2 .status-pill .sp-count {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
}

#plannerCardWarnings.warnings-v2 .insights-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#plannerCardWarnings.warnings-v2 .insight-card {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 150ms ease;
}

#plannerCardWarnings.warnings-v2 .insight-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

#plannerCardWarnings.warnings-v2 .insight-card.warning {
  border-left: 3px solid var(--amber);
}

#plannerCardWarnings.warnings-v2 .insight-card.info {
  border-left: 3px solid var(--indigo);
}

#plannerCardWarnings.warnings-v2 .insight-card.resolved {
  border-left: 3px solid var(--green);
  opacity: 0.65;
}

#plannerCardWarnings.warnings-v2 .insight-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
}

#plannerCardWarnings.warnings-v2 .insight-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-m);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

#plannerCardWarnings.warnings-v2 .insight-icon svg {
  width: 16px;
  height: 16px;
}

#plannerCardWarnings.warnings-v2 .insight-icon.warn-icon {
  background: var(--amber-bg);
  color: var(--amber);
}

#plannerCardWarnings.warnings-v2 .insight-icon.info-icon {
  background: var(--indigo-bg);
  color: var(--indigo);
}

#plannerCardWarnings.warnings-v2 .insight-icon.ok-icon {
  background: var(--green-bg);
  color: var(--green);
}

#plannerCardWarnings.warnings-v2 .insight-body {
  flex: 1;
  min-width: 0;
}

#plannerCardWarnings.warnings-v2 .insight-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

#plannerCardWarnings.warnings-v2 .insight-severity {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 7px;
  border-radius: 4px;
}

#plannerCardWarnings.warnings-v2 .insight-severity.warn {
  background: var(--amber-bg);
  color: var(--amber);
}

#plannerCardWarnings.warnings-v2 .insight-severity.info {
  background: var(--indigo-bg);
  color: var(--indigo);
}

#plannerCardWarnings.warnings-v2 .insight-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#plannerCardWarnings.warnings-v2 .insight-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-3);
  flex-shrink: 0;
  margin-top: 4px;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

#plannerCardWarnings.warnings-v2 .insight-card.open .insight-chevron {
  transform: rotate(90deg);
}

#plannerCardWarnings.warnings-v2 .insight-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

#plannerCardWarnings.warnings-v2 .insight-card.open .insight-details {
  max-height: min(72vh, 860px);
}

#plannerCardWarnings.warnings-v2 .insight-details-inner {
  padding: 0 20px 18px 68px;
}

#plannerCardWarnings.warnings-v2 .insight-explain {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--bg-3);
  border-radius: var(--radius-s);
  border: 1px solid var(--border-1);
}

#plannerCardWarnings.warnings-v2 .insight-explain strong {
  color: var(--text-1);
}

#plannerCardWarnings.warnings-v2 .insight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#plannerCardWarnings.warnings-v2 .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--radius-s);
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  border: 0;
  transition: all 120ms ease;
}

#plannerCardWarnings.warnings-v2 .btn-primary {
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 1px 3px rgba(99, 91, 255, 0.3);
}

#plannerCardWarnings.warnings-v2 .btn-primary:hover {
  background: var(--indigo-light);
  transform: translateY(-1px);
}

#plannerCardWarnings.warnings-v2 .btn-ghost {
  background: var(--bg-1);
  color: var(--text-2);
  border: 1px solid var(--border-2);
}

#plannerCardWarnings.warnings-v2 .btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}

#plannerCardWarnings.warnings-v2 .empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-3);
}

#plannerCardWarnings.warnings-v2 .empty-state svg {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  opacity: 0.3;
}

#plannerCardWarnings.warnings-v2 .empty-state p {
  font-size: 14px;
}

#plannerCardWarnings.warnings-v2 .anim {
  animation: warningsFadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#plannerCardWarnings.warnings-v2 .d1 {
  animation-delay: 0.05s;
}

#plannerCardWarnings.warnings-v2 .d2 {
  animation-delay: 0.1s;
}

#plannerCardWarnings.warnings-v2 .d3 {
  animation-delay: 0.15s;
}

#plannerCardWarnings.warnings-v2 .d4 {
  animation-delay: 0.2s;
}

@media (min-width: 981px) {
  .planner-page.planner-app.planner-page--logged-in {
    --planner-tab-gutter-left: 20px;
    --planner-tab-gutter-right: 100px;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="grunddata"] #plannerCardGrunddata>.section-page-header {
    display: none;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="grunddata"] #plannerCardGrunddata,
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="guide"] #plannerCardGuide,
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="ekonomi"] #summary-economy-anchor,
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="parents"] #mobile-overview-rest,
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] #plannerCardHelp,
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="warnings"] #plannerCardWarnings.warnings-v2 {
    padding-top: 44px;
    padding-left: var(--planner-tab-gutter-left);
    padding-right: var(--planner-tab-gutter-right);
    box-sizing: border-box;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="planera"] #plannerCardPlanera.left-card {
    padding-top: 44px;
    padding-left: var(--planner-tab-gutter-left);
    padding-right: var(--planner-tab-gutter-right);
    box-sizing: border-box;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="planera"] #planViewRow,
  .planner-page.planner-app.planner-page--logged-in[data-planner-section="planera"] .planera-workspace {
    padding-left: 0;
    padding-right: 0;
  }

  .planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] .help-settings-mobile .help-settings-card__inner {
    padding-top: 44px;
  }
}

@keyframes warningsFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   Hjälp & inställningar – redesign (matchar guider/index-stil)
   ========================================================= */
.planner-page.planner-app.planner-page--logged-in[data-planner-section="help"] #plannerCardHelp {
  max-width: 100%;
}

#plannerCardHelp.plan-settings {
  background: transparent;
  border: none;
  padding: 0;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

#plannerCardHelp .plan-settings__title {
  margin: 0 0 6px 0;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f0f18;
}

#plannerCardHelp .plan-settings__subtitle {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #8e8ea0;
}

#plannerCardHelp .plan-settings__status {
  position: relative;
  margin: 16px 0 22px;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(217, 119, 6, 0.2);
  background: rgba(217, 119, 6, 0.08);
  color: #b45309;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

#plannerCardHelp .plan-settings__status::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  background: rgba(217, 119, 6, 0.15);
  color: #b45309;
}

#plannerCardHelp .plan-settings__status--ok {
  border-color: rgba(22, 163, 74, 0.18);
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
}

#plannerCardHelp .plan-settings__status--ok::before {
  content: "✓";
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
}

#regler-details-body {
  width: 100%;
}

#regler-details-body .help-wizard-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

#regler-details-body .steps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#regler-details-body .help-wizard-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  padding: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

#regler-details-body .help-wizard-card:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transform: none;
}

#regler-details-body .help-wizard-card:not(.is-editing) {
  min-height: 122px;
  height: 122px;
}

#regler-details-body .help-wizard-card.is-editing {
  height: auto;
  border-color: rgba(69, 83, 179, 0.24);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

#regler-details-body .help-wizard-card__head {
  padding: 12px 14px 4px;
  margin: 0;
  display: block;
  cursor: default;
}

#regler-details-body .sc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

#regler-details-body .sc-step {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8e8ea0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#regler-details-body .sc-step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f5f5f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono);
  color: #555568;
}

#regler-details-body .help-wizard-card.complete .sc-step-num {
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
}

#regler-details-body .sc-toggle {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1;
}

#regler-details-body .help-wizard-card.is-editing .sc-toggle {
  background: rgba(99, 91, 255, 0.1);
  color: #4f46e5;
  border-color: rgba(99, 91, 255, 0.22);
}

#regler-details-body .help-wizard-card__title {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.9px;
  color: #8e8ea0;
  text-transform: uppercase;
}

#regler-details-body .help-wizard-card__edit {
  border: 1px solid rgba(99, 91, 255, 0.24);
  background: rgba(99, 91, 255, 0.08);
  color: #4f46e5;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}

#regler-details-body .help-wizard-card__edit:hover {
  border-color: rgba(99, 91, 255, 0.36);
  background: rgba(99, 91, 255, 0.14);
}

#regler-details-body .help-wizard-card__summary {
  padding: 0 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#regler-details-body .help-wizard-card__value {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f0f18;
}

#regler-details-body .help-wizard-card__sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.38;
  color: #8e8ea0;
}

#regler-details-body .help-wizard-card:not(.is-editing) .help-wizard-card__value,
#regler-details-body .help-wizard-card:not(.is-editing) .help-wizard-card__sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#regler-details-body .help-wizard-card:not(.is-editing) .help-wizard-card__value {
  -webkit-line-clamp: 2;
}

#regler-details-body .help-wizard-card:not(.is-editing) .help-wizard-card__sub {
  -webkit-line-clamp: 2;
}

#regler-details-body .help-wizard-edit {
  margin: 0;
  border-top: 0;
  padding: 0 20px;
  display: grid;
  gap: 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms cubic-bezier(0.16, 1, 0.3, 1), padding 180ms ease,
    border-top-color 180ms ease;
}

#regler-details-body .help-wizard-card.is-editing .help-wizard-edit {
  max-height: 900px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding: 16px 20px 20px;
}

#regler-details-body .help-wizard-edit__field {
  display: grid;
  gap: 6px;
}

#regler-details-body .help-wizard-edit__field>span {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #8e8ea0;
}

#regler-details-body .help-wizard-edit__field input,
#regler-details-body .help-wizard-edit__field select {
  width: 100%;
  min-height: 38px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: #0f0f18;
  font-size: 13.5px;
  font-weight: 520;
  padding: 8px 12px;
}

#regler-details-body .help-wizard-edit__field input:focus-visible,
#regler-details-body .help-wizard-edit__field select:focus-visible {
  outline: none;
  border-color: #635bff;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.1);
}

#regler-details-body .help-wizard-edit__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

#regler-details-body .help-wizard-edit__option:hover {
  border-color: rgba(0, 0, 0, 0.12);
  background: #f5f5f7;
}

#regler-details-body .help-wizard-edit__option input {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 !important;
  accent-color: #635bff;
}

#regler-details-body .help-wizard-edit__option>span {
  font-size: 13.5px;
  line-height: 1.35;
  color: #555568;
  font-weight: 500;
}

#regler-details-body .help-wizard-edit__option:has(input:checked) {
  border-color: #635bff;
  background: rgba(99, 91, 255, 0.06);
}

#regler-details-body .help-wizard-edit__option:has(input:checked)>span {
  color: #0f0f18;
  font-weight: 700;
}

#regler-details-body .help-wizard-edit__option--inline {
  padding: 8px 12px;
}

#regler-details-body .help-edit-parent-block {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}

#regler-details-body .help-edit-parent-title {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  color: #0f0f18;
}

#regler-details-body .help-edit-parent-help {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 600;
  color: #555568;
}

#regler-details-body .help-edit-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#regler-details-body .help-edit-inline--stack {
  display: grid;
  gap: 8px;
}

#regler-details-body .help-wizard-edit__option--stack {
  align-items: flex-start;
  gap: 9px;
}

#regler-details-body .help-wizard-edit__option-copy {
  display: grid;
  gap: 2px;
}

#regler-details-body .help-wizard-edit__option-title {
  font-size: 13.5px;
  line-height: 1.25;
  color: #0f0f18;
  font-weight: 700;
}

#regler-details-body .help-wizard-edit__option-desc {
  font-size: 12.5px;
  line-height: 1.35;
  color: #8e8ea0;
  font-weight: 500;
}

#regler-details-body .help-wizard-edit__option:has(input:checked) .help-wizard-edit__option-title {
  color: #0f0f18;
}

#regler-details-body .help-wizard-edit__option:has(input:checked) .help-wizard-edit__option-desc {
  color: #555568;
}

#regler-details-body .help-edit-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

#regler-details-body .help-edit-weekday {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #f5f5f7;
  color: #8e8ea0;
  cursor: pointer;
  position: relative;
}

#regler-details-body .help-edit-weekday input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

#regler-details-body .help-edit-weekday span {
  font-size: 12px;
  font-weight: 700;
  color: inherit;
}

#regler-details-body .help-edit-weekday:has(input:checked) {
  border-color: rgba(99, 91, 255, 0.2);
  background: rgba(99, 91, 255, 0.08);
  color: #4f46e5;
}

#regler-details-body .help-wizard-edit__check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: #555568;
}

#regler-details-body .help-wizard-edit__check::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid rgba(0, 0, 0, 0.28);
  background: #fff;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: all 120ms ease;
}

#regler-details-body .help-wizard-edit__check input {
  position: absolute;
  opacity: 0;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  pointer-events: none;
}

#regler-details-body .help-wizard-edit__check:has(input:checked)::before {
  border-color: #635bff;
  background: #635bff;
  box-shadow: inset 0 0 0 2px #fff;
}

#regler-details-body .help-wizard-edit__check>span {
  line-height: 1.35;
}

#regler-details-body .help-wizard-edit__note {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: #8e8ea0;
}

#regler-details-body .help-wizard-edit__actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

#regler-details-body .help-wizard-edit__save,
#regler-details-body .help-wizard-edit__cancel {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

#regler-details-body .help-wizard-edit__save {
  border: none;
  background: #0f0f18;
  color: #fff;
}

#regler-details-body .help-wizard-edit__save:hover {
  opacity: 0.86;
}

#regler-details-body .help-wizard-edit__cancel {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: #555568;
}

#regler-details-body .help-wizard-edit__cancel:hover {
  background: #f5f5f7;
  color: #0f0f18;
}

#regler-details-body #help-step-2 .help-wizard-card__summary {
  gap: 6px;
  padding-bottom: 14px;
}

#regler-details-body #help-step-2 .help-wizard-card__sub:last-child {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(79, 70, 229, 0.18);
  background: rgba(79, 70, 229, 0.08);
  color: #4338ca;
  font-weight: 600;
}

#regler-details-body #help-step-2 .help-wizard-edit {
  gap: 12px;
}

#regler-details-body #help-step-2 .help-wizard-edit__field {
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 15, 24, 0.07);
  background: linear-gradient(180deg, #fff 0%, #fcfcff 100%);
}

#regler-details-body #help-step-2 .help-wizard-edit__field>span {
  color: #74778f;
  letter-spacing: 0.45px;
}

#regler-details-body #help-step-2 .help-wizard-edit__field input,
#regler-details-body #help-step-2 .help-wizard-edit__field select {
  min-height: 44px;
  border-radius: 10px;
  border-color: rgba(15, 15, 24, 0.12);
  font-size: 15px;
  font-weight: 600;
}

#regler-details-body #help-step-2 .help-wizard-edit__field input::placeholder {
  color: #b3b6c4;
  font-weight: 500;
}

#regler-details-body #help-step-2 .help-wizard-edit__field select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, #6366f1 50%),
    linear-gradient(135deg, #6366f1 50%, transparent 50%);
  background-position:
    calc(100% - 19px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#regler-details-body #help-step-2 .help-wizard-edit__field--ten-days {
  border-color: rgba(79, 70, 229, 0.24);
  background: linear-gradient(180deg, rgba(99, 91, 255, 0.08) 0%, rgba(99, 91, 255, 0.03) 100%);
}

#regler-details-body #help-step-2 .help-wizard-edit__field--ten-days>span {
  color: #4f46e5;
}

#regler-details-body #help-step-2 .help-wizard-edit__note,
#regler-details-body #help-step-2 .help-wizard-edit__actions {
  grid-column: 1 / -1;
}

#regler-details-body #help-step-2 .help-wizard-edit__note--income {
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(79, 70, 229, 0.16);
  background: rgba(79, 70, 229, 0.05);
  color: #5f6280;
  font-size: 12.5px;
  line-height: 1.45;
}

@media (min-width: 901px) {
  #regler-details-body #help-step-2.is-editing .help-wizard-edit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 12px;
  }

  #regler-details-body #help-step-2 .help-wizard-edit__field--ten-days {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  #regler-details-body #help-step-2 .help-wizard-edit__field {
    padding: 8px 10px;
  }

  #regler-details-body #help-step-2 .help-wizard-edit__field input,
  #regler-details-body #help-step-2 .help-wizard-edit__field select {
    min-height: 42px;
    font-size: 14px;
  }
}





/* ===== Moved from guider.html on 2026-02-18 ===== */
:root {
  --bg: #fafafa;
  --bg-1: #ffffff;
  --bg-2: #f5f5f7;
  --bg-3: #eeeef0;
  --border: rgba(0, 0, 0, 0.06);
  --border-2: rgba(0, 0, 0, 0.1);
  --border-3: rgba(0, 0, 0, 0.14);
  --text-1: #0f0f18;
  --text-2: #555568;
  --text-3: #8e8ea0;
  --accent: #635bff;
  --accent-light: #4f46e5;
  --accent-bg: rgba(99, 91, 255, 0.06);
  --teal: #0d9b7a;
  --teal-bg: rgba(13, 155, 122, 0.06);
  --amber: #d97706;
  --amber-bg: rgba(217, 119, 6, 0.06);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(250, 250, 250, 0.8);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 28px
}

.logo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-1);
  text-decoration: none
}

.nav-links {
  display: flex;
  gap: 20px
}

.nav-links a {
  font-size: 13.5px;
  font-weight: 450;
  color: var(--text-3);
  text-decoration: none;
  transition: color 150ms
}

.nav-links a:hover {
  color: var(--text-1)
}

.nav-links a.active {
  color: var(--text-1);
  font-weight: 600
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px
}

.n-btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 150ms;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center
}

.n-btn.ghost {
  background: 0;
  color: var(--text-3)
}

.n-btn.ghost:hover {
  color: var(--text-1)
}

.n-btn.primary {
  background: var(--text-1);
  color: #fff
}

.n-btn.primary:hover {
  opacity: 0.85
}

/* ── BREADCRUMB ── */
.breadcrumb {
  max-width: 1080px;
  margin: 0 auto;
  padding: 76px 40px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
}

.breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
  transition: color 120ms
}

.breadcrumb a:hover {
  color: var(--text-1)
}

.breadcrumb .sep {
  color: var(--border-3)
}

.breadcrumb .current {
  color: var(--text-2);
  font-weight: 500
}

/* ── PAGE LAYOUT ── */
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 40px 80px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}

/* ── MAIN CONTENT ── */

.page-header {
  margin-bottom: 32px
}

.page-header h1 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 15.5px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 540px
}

/* ── GUIDE CARDS GRID ── */
.guides-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.guide-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  cursor: pointer;
  transition: all 200ms ease;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.guide-card:hover {
  border-color: var(--border-2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

.gc-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.gc-icon svg {
  width: 16px;
  height: 16px
}

.gc-icon.pu {
  background: var(--accent-bg);
  color: var(--accent)
}

.gc-icon.te {
  background: var(--teal-bg);
  color: var(--teal)
}

.gc-icon.am {
  background: var(--amber-bg);
  color: var(--amber)
}

.gc-icon.gr {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-2)
}

.gc-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
  color: var(--text-1);
  line-height: 1.3;
}

.gc-desc {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 14px;
}

.gc-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.gc-arrow {
  width: 20px;
  height: 20px;
  color: var(--text-3);
  opacity: 0;
  transition: all 200ms ease;
  transform: translateX(-4px);
}

.gc-arrow--corner {
  position: absolute;
  top: 24px;
  right: 24px;
}

.guide-card:hover .gc-arrow {
  opacity: 1;
  transform: translateX(0)
}

.gc-reading {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono);
  display: flex;
  align-items: center;
  gap: 4px;
}

.gc-reading svg {
  width: 12px;
  height: 12px;
  opacity: 0.5
}

/* ── SIDEBAR ── */
.sidebar {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sb-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}

/* CTA card */
.sb-cta {
  position: relative;
  overflow: hidden
}

.sb-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #8b5cf6);
}

.sb-cta h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 6px
}

.sb-cta p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 16px
}

.sb-btn {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  text-align: center;
  background: var(--text-1);
  color: #fff;
  transition: all 150ms;
  text-decoration: none;
}

.sb-btn:hover {
  opacity: 0.85
}

/* Tips card */
.sb-tips h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.sb-tips h3 svg {
  width: 15px;
  height: 15px;
  color: var(--accent)
}

.sb-tips p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55
}

/* Popular card */
.sb-popular h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin-bottom: 12px;
}

.pop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  transition: opacity 120ms;
  text-decoration: none;
}

.pop-item+.pop-item {
  border-top: 1px solid var(--border)
}

.pop-item:hover {
  opacity: 0.7
}

.pop-num {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--border-3);
  width: 20px;
}

.pop-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  flex: 1
}

.pop-arrow {
  width: 12px;
  height: 12px;
  color: var(--text-3);
  opacity: 0;
  transition: opacity 120ms
}

.pop-item:hover .pop-arrow {
  opacity: 1
}

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: 48px 40px 32px;
  max-width: 1080px;
  margin: 0 auto;
}

.fg {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px
}

.fb p {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 240px;
  margin-top: 8px
}

.fc-t {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-3);
  margin-bottom: 12px
}

.fc a {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 7px;
  transition: color 150ms
}

.fc a:hover {
  color: var(--text-1)
}

.fbot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border)
}

.fbot p {
  font-size: 11.5px;
  color: var(--text-3)
}

.fbot-l {
  display: flex;
  gap: 14px
}

.fbot-l a {
  font-size: 11.5px;
  color: var(--text-3);
  text-decoration: none
}

.fbot-l a:hover {
  color: var(--text-2)
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.fi {
  opacity: 0;
  animation: fadeUp .6s cubic-bezier(.16, 1, .3, 1) forwards
}

.fd1 {
  animation-delay: .05s
}

.fd2 {
  animation-delay: .1s
}

.fd3 {
  animation-delay: .15s
}

.fd4 {
  animation-delay: .2s
}

.fd5 {
  animation-delay: .25s
}

.fd6 {
  animation-delay: .3s
}

.fd7 {
  animation-delay: .35s
}

.fd8 {
  animation-delay: .4s
}



/* ===== End moved from guider.html ===== */


/* ===== Moved from pris.html on 2026-02-18 ===== */
:root {
  --bg: #fafafa;
  --bg-1: #ffffff;
  --bg-2: #f5f5f7;
  --bg-3: #eeeef0;
  --border: rgba(0, 0, 0, 0.06);
  --border-2: rgba(0, 0, 0, 0.1);
  --border-3: rgba(0, 0, 0, 0.14);
  --text-1: #0f0f18;
  --text-2: #555568;
  --text-3: #8e8ea0;
  --accent: #635bff;
  --accent-light: #4f46e5;
  --accent-bg: rgba(99, 91, 255, 0.06);
  --teal: #0d9b7a;
  --teal-bg: rgba(13, 155, 122, 0.06);
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(250, 250, 250, 0.8);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-1);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  font-size: 13.5px;
  font-weight: 450;
  color: var(--text-3);
  text-decoration: none;
  transition: color 150ms;
}

.nav-links a:hover {
  color: var(--text-1);
}

.nav-links a.active {
  color: var(--text-1);
  font-weight: 600;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.n-btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 150ms;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.n-btn.ghost {
  background: transparent;
  color: var(--text-3);
}

.n-btn.ghost:hover {
  color: var(--text-1);
}

.n-btn.primary {
  background: var(--text-1);
  color: #fff;
}

.n-btn.primary:hover {
  opacity: 0.85;
}

.breadcrumb {
  max-width: 1080px;
  margin: 0 auto;
  padding: 76px 40px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
}

.breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
  transition: color 120ms;
}

.breadcrumb a:hover {
  color: var(--text-1);
}

.breadcrumb .sep {
  color: var(--border-3);
}

.breadcrumb .current {
  color: var(--text-2);
  font-weight: 500;
}

.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 40px 20px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(30px, 4.5vw, 46px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 12px;
}

.hero p {
  margin: 0 auto;
  max-width: 620px;
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.6;
}

.plans {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 40px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.plan-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.plan-card.pro {
  border-color: rgba(99, 91, 255, 0.24);
  box-shadow: 0 8px 30px rgba(99, 91, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.03);
}

.plan-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid rgba(99, 91, 255, 0.2);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.plan-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}

.plan-price .num {
  font-family: var(--mono);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
}

.plan-price .unit {
  font-size: 15px;
  color: var(--text-2);
  font-weight: 600;
}

.plan-price-note {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 18px;
  min-height: 20px;
}

.plan-list {
  list-style: none;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.plan-list li {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.plan-list li svg {
  width: 15px;
  height: 15px;
  color: var(--teal);
  margin-top: 2px;
  flex-shrink: 0;
}

.plan-cta {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  padding: 11px 16px;
  border: 1px solid var(--border-2);
  background: #fff;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 150ms;
}

.plan-cta:hover {
  border-color: var(--border-3);
}

.plan-cta.pro {
  border-color: transparent;
  background: var(--text-1);
  color: #fff;
}

.plan-cta.pro:hover {
  opacity: 0.88;
}

.plan-cta--centered {
  max-width: 260px;
  margin: 0 auto;
}

.compare-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 40px 64px;
}

.compare-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.compare th,
.compare td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.compare th {
  background: var(--bg-2);
  font-size: 13px;
  color: var(--text-2);
  font-weight: 700;
}

.compare tr:last-child td {
  border-bottom: none;
}

.compare td:nth-child(2),
.compare td:nth-child(3),
.compare th:nth-child(2),
.compare th:nth-child(3) {
  width: 160px;
  text-align: center;
}

.ok {
  color: var(--teal);
  font-weight: 700;
}

.no {
  color: var(--text-3);
}

.page-cta {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px 72px;
  text-align: center;
}

.page-cta .box {
  border: 1px solid var(--border);
  background: var(--bg-1);
  border-radius: 14px;
  padding: 28px 22px;
}

.page-cta h2 {
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 800;
  letter-spacing: -0.8px;
  margin-bottom: 8px;
}

.page-cta p {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
}

footer {
  border-top: 1px solid var(--border);
  padding: 48px 40px 32px;
  max-width: 1080px;
  margin: 0 auto;
}

.fg {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.fb p {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 240px;
  margin-top: 8px;
}

.fc-t {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin-bottom: 12px;
}

.fc a {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 7px;
  transition: color 150ms;
}

.fc a:hover {
  color: var(--text-1);
}

.fbot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.fbot p {
  font-size: 11.5px;
  color: var(--text-3);
}

.fbot-l {
  display: flex;
  gap: 14px;
}

.fbot-l a {
  font-size: 11.5px;
  color: var(--text-3);
  text-decoration: none;
}

.fbot-l a:hover {
  color: var(--text-2);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fi {
  opacity: 0;
  animation: fadeUp .6s cubic-bezier(.16, 1, .3, 1) forwards;
}

.fd1 {
  animation-delay: .05s;
}

.fd2 {
  animation-delay: .1s;
}

.fd3 {
  animation-delay: .15s;
}

.fd4 {
  animation-delay: .2s;
}

.fd5 {
  animation-delay: .25s;
}

.fd6 {
  animation-delay: .3s;
}

@media (prefers-reduced-motion: reduce) {
  .fi {
    opacity: 1;
    animation: none;
  }
}



/* ===== End moved from pris.html ===== */


/* ===== Moved from kontakt.html on 2026-02-18 ===== */
:root {
  --bg: #fafafa;
  --bg-1: #ffffff;
  --bg-2: #f5f5f7;
  --border: rgba(0, 0, 0, 0.06);
  --border-2: rgba(0, 0, 0, 0.1);
  --border-3: rgba(0, 0, 0, 0.14);
  --text-1: #0f0f18;
  --text-2: #555568;
  --text-3: #8e8ea0;
  --accent: #635bff;
  --accent-bg: rgba(99, 91, 255, 0.06);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(250, 250, 250, 0.8);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-1);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  font-size: 13.5px;
  font-weight: 450;
  color: var(--text-3);
  text-decoration: none;
  transition: color 150ms;
}

.nav-links a:hover {
  color: var(--text-1);
}

.nav-links a.active {
  color: var(--text-1);
  font-weight: 600;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.n-btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.n-btn.ghost {
  background: transparent;
  color: var(--text-3);
}

.n-btn.ghost:hover {
  color: var(--text-1);
}

.n-btn.primary {
  background: var(--text-1);
  color: #fff;
}

.n-btn.primary:hover {
  opacity: 0.85;
}

.breadcrumb {
  max-width: 1080px;
  margin: 0 auto;
  padding: 76px 40px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
}

.breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--text-1);
}

.breadcrumb .sep {
  color: var(--border-3);
}

.breadcrumb .current {
  color: var(--text-2);
  font-weight: 500;
}

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 40px 80px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 15.5px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 58ch;
}

.form-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}

.field-wrap+.field-wrap {
  margin-top: 14px;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}

.field {
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: #fff;
  color: var(--text-1);
  font-family: var(--font);
  font-size: 14px;
}

.field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
}

textarea.field {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}

.submit-btn {
  margin-top: 16px;
  width: 100%;
  padding: 11px;
  border-radius: 8px;
  border: none;
  background: var(--text-1);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
}

.submit-btn:hover {
  opacity: 0.88;
}

.form-meta {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
}

.form-meta a {
  color: var(--text-2);
}

.contact-status {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-2);
  min-height: 20px;
}

.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sidebar {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sb-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}

.sb-cta {
  position: relative;
  overflow: hidden;
}

.sb-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #8b5cf6);
}

.sb-card h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
}

.sb-card p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}

.sb-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  text-align: center;
  background: var(--text-1);
  color: #fff;
  text-decoration: none;
}

.sb-links a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.8px;
  color: var(--text-2);
  text-decoration: none;
}

.sb-links a:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sb-links a:hover {
  color: var(--text-1);
}

footer {
  border-top: 1px solid var(--border);
  padding: 48px 40px 32px;
  max-width: 1080px;
  margin: 0 auto;
}

.fg {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.fb p {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 240px;
  margin-top: 8px;
}

.fc-t {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin-bottom: 12px;
}

.fc a {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 7px;
}

.fc a:hover {
  color: var(--text-1);
}

.fbot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.fbot p {
  font-size: 11.5px;
  color: var(--text-3);
}

.fbot-l {
  display: flex;
  gap: 14px;
}

.fbot-l a {
  font-size: 11.5px;
  color: var(--text-3);
  text-decoration: none;
}

.fbot-l a:hover {
  color: var(--text-2);
}



/* ===== End moved from kontakt.html ===== */


/* ===== Moved from sa-funkar.html on 2026-02-18 ===== */
:root {
  --bg: #fafafa;
  --bg-1: #ffffff;
  --bg-2: #f5f5f7;
  --border: rgba(0, 0, 0, 0.06);
  --border-2: rgba(0, 0, 0, 0.1);
  --border-3: rgba(0, 0, 0, 0.14);
  --text-1: #0f0f18;
  --text-2: #555568;
  --text-3: #8e8ea0;
  --accent: #635bff;
  --accent-bg: rgba(99, 91, 255, 0.06);
  --teal: #0d9b7a;
  --teal-bg: rgba(13, 155, 122, 0.06);
  --amber: #d97706;
  --amber-bg: rgba(217, 119, 6, 0.06);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(250, 250, 250, 0.8);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-1);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  font-size: 13.5px;
  font-weight: 450;
  color: var(--text-3);
  text-decoration: none;
  transition: color 150ms;
}

.nav-links a:hover {
  color: var(--text-1);
}

.nav-links a.active {
  color: var(--text-1);
  font-weight: 600;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.n-btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.n-btn.ghost {
  background: transparent;
  color: var(--text-3);
}

.n-btn.ghost:hover {
  color: var(--text-1);
}

.n-btn.primary {
  background: var(--text-1);
  color: #fff;
}

.n-btn.primary:hover {
  opacity: 0.85;
}

.breadcrumb {
  max-width: 1080px;
  margin: 0 auto;
  padding: 76px 40px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
}

.breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--text-1);
}

.breadcrumb .sep {
  color: var(--border-3);
}

.breadcrumb .current {
  color: var(--text-2);
  font-weight: 500;
}

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 40px 80px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}

.page-header {
  margin-bottom: 26px;
}

.page-header h1 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 15.5px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 58ch;
}

.step-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 18px 18px 70px;
  position: relative;
}

.step-num {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid rgba(99, 91, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: var(--mono);
  font-weight: 700;
}

.step-card h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}

.step-card p {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.6;
}

.result-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  margin-top: 12px;
}

.result-card h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
}

.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.result-item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
}

.sidebar {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sb-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}

.sb-cta {
  position: relative;
  overflow: hidden;
}

.sb-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #8b5cf6);
}

.sb-card h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
}

.sb-card p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}

.sb-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  text-align: center;
  background: var(--text-1);
  color: #fff;
  text-decoration: none;
}

.sb-links a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.8px;
  color: var(--text-2);
  text-decoration: none;
}

.sb-links a:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sb-links a:hover {
  color: var(--text-1);
}

footer {
  border-top: 1px solid var(--border);
  padding: 48px 40px 32px;
  max-width: 1080px;
  margin: 0 auto;
}

.fg {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.fb p {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 240px;
  margin-top: 8px;
}

.fc-t {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin-bottom: 12px;
}

.fc a {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 7px;
}

.fc a:hover {
  color: var(--text-1);
}

.fbot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.fbot p {
  font-size: 11.5px;
  color: var(--text-3);
}

.fbot-l {
  display: flex;
  gap: 14px;
}

.fbot-l a {
  font-size: 11.5px;
  color: var(--text-3);
  text-decoration: none;
}

.fbot-l a:hover {
  color: var(--text-2);
}



/* ===== End moved from sa-funkar.html ===== */


/* ===== Moved from integritetspolicy.html on 2026-02-18 ===== */
:root {
  --bg: #fafafa;
  --bg-1: #ffffff;
  --bg-2: #f5f5f7;
  --bg-3: #eeeef0;
  --border: rgba(0, 0, 0, 0.06);
  --border-2: rgba(0, 0, 0, 0.1);
  --border-3: rgba(0, 0, 0, 0.14);
  --text-1: #0f0f18;
  --text-2: #555568;
  --text-3: #8e8ea0;
  --accent: #635bff;
  --accent-bg: rgba(99, 91, 255, 0.06);
  --teal: #0d9b7a;
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(250, 250, 250, 0.8);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-1);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  font-size: 13.5px;
  font-weight: 450;
  color: var(--text-3);
  text-decoration: none;
  transition: color 150ms;
}

.nav-links a:hover {
  color: var(--text-1);
}

.nav-links a.active {
  color: var(--text-1);
  font-weight: 600;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.n-btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 150ms;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.n-btn.ghost {
  background: transparent;
  color: var(--text-3);
}

.n-btn.ghost:hover {
  color: var(--text-1);
}

.n-btn.primary {
  background: var(--text-1);
  color: #fff;
}

.n-btn.primary:hover {
  opacity: 0.85;
}

.breadcrumb {
  max-width: 1080px;
  margin: 0 auto;
  padding: 76px 40px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
}

.breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
  transition: color 120ms;
}

.breadcrumb a:hover {
  color: var(--text-1);
}

.breadcrumb .sep {
  color: var(--border-3);
}

.breadcrumb .current {
  color: var(--text-2);
  font-weight: 500;
}

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 40px 80px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 15.5px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 62ch;
}

.policy-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 24px;
}

.policy-updated {
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.prose h2 {
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -0.4px;
  margin-top: 28px;
  margin-bottom: 10px;
  color: var(--text-1);
}

.prose h2:first-of-type {
  margin-top: 0;
}

.prose p {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.68;
  margin-bottom: 10px;
}

.prose ul {
  list-style: none;
  padding-left: 0;
  margin: 6px 0 14px;
}

.prose li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 4px;
}

.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

.sidebar {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sb-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}

.sb-card h3 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-1);
  letter-spacing: -0.2px;
}

.toc-link {
  display: block;
  font-size: 12.8px;
  color: var(--text-2);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  transition: color 120ms;
}

.toc-link:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.toc-link:hover {
  color: var(--text-1);
}

.sb-help p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 12px;
}

.sb-btn {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  text-align: center;
  background: var(--text-1);
  color: #fff;
  transition: all 150ms;
  text-decoration: none;
}

.sb-btn:hover {
  opacity: 0.85;
}

footer {
  border-top: 1px solid var(--border);
  padding: 48px 40px 32px;
  max-width: 1080px;
  margin: 0 auto;
}

.fg {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.fb p {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 240px;
  margin-top: 8px;
}

.fc-t {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin-bottom: 12px;
}

.fc a {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 7px;
  transition: color 150ms;
}

.fc a:hover {
  color: var(--text-1);
}

.fbot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.fbot p {
  font-size: 11.5px;
  color: var(--text-3);
}

.fbot-l {
  display: flex;
  gap: 14px;
}

.fbot-l a {
  font-size: 11.5px;
  color: var(--text-3);
  text-decoration: none;
}

.fbot-l a:hover {
  color: var(--text-2);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fi {
  opacity: 0;
  animation: fadeUp .6s cubic-bezier(.16, 1, .3, 1) forwards;
}

.fd1 {
  animation-delay: .05s;
}

.fd2 {
  animation-delay: .1s;
}

.fd3 {
  animation-delay: .15s;
}

.fd4 {
  animation-delay: .2s;
}



/* ===== End moved from integritetspolicy.html ===== */


/* ===== Moved from index.html on 2026-02-18 ===== */
:root {
  --bg: #fafafa;
  --bg-1: #ffffff;
  --bg-2: #f5f5f7;
  --bg-3: #eeeef0;
  --surface: #fff;
  --border: rgba(0, 0, 0, 0.06);
  --border-2: rgba(0, 0, 0, 0.1);
  --border-3: rgba(0, 0, 0, 0.14);
  --text-1: #0f0f18;
  --text-2: #555568;
  --text-3: #8e8ea0;
  --accent: #635bff;
  --accent-light: #4f46e5;
  --accent-bg: rgba(99, 91, 255, 0.06);
  --accent-bg2: rgba(99, 91, 255, 0.1);
  --teal: #0d9b7a;
  --teal-bg: rgba(13, 155, 122, 0.06);
  --amber: #d97706;
  --amber-bg: rgba(217, 119, 6, 0.06);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(250, 250, 250, 0.8);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 28px
}

.logo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-1)
}

.nav-links {
  display: flex;
  gap: 20px
}

.nav-links a {
  font-size: 13.5px;
  font-weight: 450;
  color: var(--text-3);
  text-decoration: none;
  transition: color 150ms
}

.nav-links a:hover {
  color: var(--text-1)
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px
}

.n-btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 150ms;
  border: none
}

.n-btn.ghost {
  background: 0;
  color: var(--text-3)
}

.n-btn.ghost:hover {
  color: var(--text-1)
}

.n-btn.primary {
  background: var(--text-1);
  color: #fff
}

.n-btn.primary:hover {
  opacity: 0.85
}

/* ── HERO ── */
.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 140px 40px 60px;
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 20px;
  background: var(--accent-bg);
  border: 1px solid rgba(99, 91, 255, 0.12);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 24px;
}

.hero-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  animation: pulse 2s ease-in-out infinite
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .4
  }
}

.hero h1 {
  font-size: clamp(38px, 5.5vw, 62px);
  font-weight: 900;
  letter-spacing: -2.5px;
  line-height: 1.04;
  color: var(--text-1);
  margin-bottom: 20px;
}

.hero h1 .muted {
  color: var(--text-3)
}

.hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 520px;
  margin: 0 auto 32px;
}

.hero-checks {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.hero-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text-2);
  font-weight: 450;
}

.hero-check svg {
  width: 16px;
  height: 16px;
  color: var(--accent)
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px
}

.btn-h {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  text-decoration: none;
  text-align: center;
  transition: all 180ms;
}

.btn-h.dark {
  background: var(--text-1);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.btn-h.dark:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15)
}

.btn-h.outline {
  background: var(--bg-1);
  color: var(--text-2);
  border: 1px solid var(--border-2);
}

.btn-h.outline:hover {
  border-color: var(--border-3);
  color: var(--text-1)
}

.hero-note {
  font-size: 12.5px;
  color: var(--text-3)
}

/* ── APP PREVIEW ── */
.preview {
  max-width: 1080px;
  margin: 40px auto 0;
  padding: 0 40px;
}

.preview-frame {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--border);
}

.preview-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}

.pd {
  width: 9px;
  height: 9px;
  border-radius: 50%
}

.pd.r {
  background: #ff5f57
}

.pd.y {
  background: #febc2e
}

.pd.g {
  background: #28c840
}

.preview-inner {
  display: block;
}

.preview-tool-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Fake sidebar */
.pv-sb {
  border-right: 1px solid var(--border);
  padding: 14px 10px
}

.pv-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px
}

.pv-bm {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}

.pv-brand span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1)
}

.pv-ni {
  padding: 5px 8px;
  border-radius: 5px;
  margin-bottom: 1px;
  font-size: 11.5px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pv-ni.act {
  background: var(--accent-bg);
  color: var(--accent)
}

.pv-dot {
  width: 2.5px;
  height: 12px;
  border-radius: 2px;
  background: var(--accent)
}

/* Fake content area */
.pv-ct {
  padding: 16px 20px;
  overflow: hidden
}

.pv-home-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.pv-home-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 9px;
}

.pv-home-card__k {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 2px;
}

.pv-home-card__v {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.pv-home-card__v small {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0;
}

.pv-home-list {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

.pv-home-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
}

.pv-home-row:last-child {
  border-bottom: none;
}

.pv-home-row span:first-child {
  font-size: 8.5px;
  color: var(--text-2);
  font-weight: 600;
}

.pv-home-row span:last-child {
  font-size: 9px;
  color: var(--text-1);
  font-family: var(--mono);
  font-weight: 700;
}

.pv-home-mini-title {
  font-size: 7.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  margin-bottom: 5px;
}

.pv-home-progress {
  height: 4px;
  border-radius: 99px;
  background: var(--bg-3);
  overflow: hidden;
  margin-bottom: 4px;
}

.pv-home-progress>i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  width: 64%;
}

.pv-home-progress--teal>i {
  background: var(--teal);
  width: 52%;
}

.pv-home-mini-text {
  font-size: 8px;
  color: var(--text-3);
  font-weight: 600;
}

.pv-lbl {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-3);
  margin-bottom: 4px
}

.pv-tt {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 12px
}

.pv-ch {
  display: flex;
  gap: 2px;
  margin-bottom: 4px
}

.pv-ch span {
  flex: 1;
  text-align: center;
  font-size: 7px;
  font-weight: 600;
  color: var(--text-3)
}

.pv-cg {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px
}

.pv-cc {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 500;
  color: var(--text-3);
}

.pv-cc.e {
  background: var(--accent-bg2);
  color: var(--accent)
}

.pv-cc.t {
  background: var(--text-1);
  color: #fff
}

.pv-cc.d {
  background: var(--teal-bg);
  color: var(--teal)
}

/* Fake right panel */
.pv-rt {
  border-left: 1px solid var(--border);
  padding: 14px
}

.pv-sc {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px;
  margin-bottom: 6px;
}

.pv-sl {
  font-size: 7.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-3);
  margin-bottom: 3px
}

.pv-sv {
  font-size: 18px;
  font-weight: 800;
  font-family: var(--mono);
  letter-spacing: -1px;
  color: var(--text-1)
}

.pv-sv small {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3)
}

.pv-bar {
  height: 3px;
  background: var(--bg-3);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden
}

.pv-bf {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  width: 55%
}

.pv-bf2 {
  height: 100%;
  border-radius: 2px;
  background: var(--teal);
  width: 0%
}

.pv-mr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 9px
}

.pv-mn {
  color: var(--text-3);
  font-weight: 500
}

.pv-mv {
  color: var(--text-1);
  font-weight: 700;
  font-family: var(--mono)
}

/* ── STATS ── */
.stats {
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 40px 32px;
  display: flex;
  justify-content: center;
  gap: 48px;
}

.st {
  text-align: center
}

.st-n {
  font-size: 32px;
  font-weight: 800;
  font-family: var(--mono);
  letter-spacing: -2px;
  color: var(--text-1)
}

.st-l {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 4px
}

/* ── DIVIDER ── */
.full-divider {
  max-width: 1080px;
  margin: 32px auto;
  padding: 0 40px;
}

.full-divider div {
  height: 1px;
  background: var(--border)
}

/* ── SECTION COMMON ── */
.sec {
  max-width: 1080px;
  margin: 0 auto;
  padding: 80px 40px
}

.sec-l {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin-bottom: 12px
}

.sec-l--centered {
  text-align: center;
}

.sec-t {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 14px;
  max-width: 550px
}

.sec-t--centered-premium {
  text-align: center;
  margin: 0 auto 40px;
}

@media (min-width: 981px) {
  .pricing {
    max-width: 900px;
  }

  .sec-t--centered-premium {
    max-width: none;
    white-space: nowrap;
  }

  .pricing .pr-card {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

.sec-d {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 48px
}

/* ── FEATURES: ALTERNATING ROWS ── */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 80px;
}

.feature-row.reverse .fr-text {
  order: 2
}

.feature-row.reverse .fr-visual {
  order: 1
}


.fr-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.fr-icon svg {
  width: 18px;
  height: 18px
}

.fr-icon.pu {
  background: var(--accent-bg);
  color: var(--accent)
}

.fr-icon.te {
  background: var(--teal-bg);
  color: var(--teal)
}

.fr-icon.am {
  background: var(--amber-bg);
  color: var(--amber)
}

.fr-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.6px;
  margin-bottom: 8px;
  line-height: 1.2
}

.fr-desc {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.6
}

.fr-visual {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* Mini chart in feature */
.mini-bars {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 80px
}

.mini-bar {
  flex: 1;
  border-radius: 4px 4px 0 0
}

.mini-bar.b1 {
  background: var(--accent);
  height: 40%
}

.mini-bar.b2 {
  background: var(--accent);
  height: 72%;
  opacity: .75
}

.mini-bar.b3 {
  background: var(--accent);
  height: 56%;
  opacity: .55
}

.mini-bar.b4 {
  background: var(--teal);
  height: 32%
}

.mini-bar.b5 {
  background: var(--teal);
  height: 48%
}

.mini-bar.b6 {
  background: var(--bg-3);
  height: 20%
}

.mini-bar-labels {
  display: flex;
  gap: 5px;
  margin-top: 6px
}

.mini-bar-labels span {
  flex: 1;
  text-align: center;
  font-size: 9.5px;
  color: var(--text-3)
}

.feature-economy-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* Mini progress bars in feature */
.mini-prog {
  display: flex;
  flex-direction: column;
  gap: 10px
}

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

.mp-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  width: 42px
}

.mp-track {
  flex: 1;
  height: 7px;
  background: var(--bg-3);
  border-radius: 4px;
  overflow: hidden
}

.mp-fill {
  height: 100%;
  border-radius: 4px
}

.mp-fill.e {
  background: var(--accent)
}

.mp-fill.d {
  background: var(--teal)
}

.mp-val {
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text-2);
  width: 52px;
  text-align: right
}

/* Warning items in feature */
.warn-list {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.warn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
}

.warn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0
}

.warn-txt {
  font-size: 12.5px;
  color: var(--text-2);
  flex: 1
}

.warn-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--amber-bg);
  color: var(--amber)
}

/* ── MISTAKES ── */
.mistakes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.m-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  transition: box-shadow 200ms;
}

.m-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05)
}

.m-num {
  font-size: 44px;
  font-weight: 900;
  font-family: var(--mono);
  letter-spacing: -3px;
  color: var(--bg-3);
  line-height: 1;
  margin-bottom: 14px;
}

.m-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -.2px;
  line-height: 1.3
}

.m-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5
}

/* ── PRICING ── */
.pricing {
  padding: 80px 40px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}

.pr-card {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.pr-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #8b5cf6, var(--accent));
}

.pr-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 6px
}

.pr-title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: -.4px
}

.pr-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.05
}

.pr-price-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--accent)
}

.pr-price-main {
  font-size: 56px;
  font-weight: 900;
  font-family: var(--mono);
  letter-spacing: -2px;
  color: var(--text-1);
  line-height: 1
}

.pr-price small {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0;
  text-decoration: line-through
}

.pr-period {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 4px;
  margin-bottom: 28px
}



.pr-features {
  list-style: none;
  text-align: left;
  margin-bottom: 28px
}

.pr-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-2);
}

.pr-features li:last-child {
  border-bottom: none
}

.pr-features li svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0
}

.pr-btn {
  display: block;
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  text-decoration: none;
  text-align: center;
  background: var(--text-1);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: all 200ms;
}

.pr-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15)
}

.pr-note {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 12px
}

/* ── CTA BOTTOM ── */
.bottom-cta {
  text-align: center;
  padding: 80px 40px 60px;
  max-width: 700px;
  margin: 0 auto;
}

.bottom-cta h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 14px;
}

.bottom-cta p {
  font-size: 16px;
  color: var(--text-2);
  margin-bottom: 28px;
  line-height: 1.6
}

.bottom-cta-btns {
  display: flex;
  gap: 10px;
  justify-content: center
}

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: 48px 40px 32px;
  max-width: 1080px;
  margin: 0 auto;
}

.fg {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px
}

.fb p {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 240px;
  margin-top: 8px
}

.fc-t {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-3);
  margin-bottom: 12px
}

.fc a {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 7px;
  transition: color 150ms
}

.fc a:hover {
  color: var(--text-1)
}

.fbot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border)
}

.fbot p {
  font-size: 11.5px;
  color: var(--text-3)
}

.fbot-l {
  display: flex;
  gap: 14px
}

.fbot-l a {
  font-size: 11.5px;
  color: var(--text-3);
  text-decoration: none
}

.fbot-l a:hover {
  color: var(--text-2)
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.fi {
  opacity: 0;
  animation: fadeUp .7s cubic-bezier(.16, 1, .3, 1) forwards
}

.fd1 {
  animation-delay: .1s
}

.fd2 {
  animation-delay: .15s
}

.fd3 {
  animation-delay: .2s
}

.fd4 {
  animation-delay: .3s
}

.fd5 {
  animation-delay: .4s
}

.fd6 {
  animation-delay: .5s
}



/* ===== End moved from index.html ===== */


/* ===== Moved from faq.html on 2026-02-18 ===== */
:root {
  --bg: #fafafa;
  --bg-1: #ffffff;
  --bg-2: #f5f5f7;
  --bg-3: #eeeef0;
  --border: rgba(0, 0, 0, 0.06);
  --border-2: rgba(0, 0, 0, 0.1);
  --border-3: rgba(0, 0, 0, 0.14);
  --text-1: #0f0f18;
  --text-2: #555568;
  --text-3: #8e8ea0;
  --accent: #635bff;
  --accent-bg: rgba(99, 91, 255, 0.06);
  --teal: #0d9b7a;
  --teal-bg: rgba(13, 155, 122, 0.06);
  --amber: #d97706;
  --amber-bg: rgba(217, 119, 6, 0.06);
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(250, 250, 250, 0.8);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-1);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  font-size: 13.5px;
  font-weight: 450;
  color: var(--text-3);
  text-decoration: none;
  transition: color 150ms;
}

.nav-links a:hover {
  color: var(--text-1);
}

.nav-links a.active {
  color: var(--text-1);
  font-weight: 600;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.n-btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 150ms;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.n-btn.ghost {
  background: transparent;
  color: var(--text-3);
}

.n-btn.ghost:hover {
  color: var(--text-1);
}

.n-btn.primary {
  background: var(--text-1);
  color: #fff;
}

.n-btn.primary:hover {
  opacity: 0.85;
}

.breadcrumb {
  max-width: 1080px;
  margin: 0 auto;
  padding: 76px 40px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
}

.breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
  transition: color 120ms;
}

.breadcrumb a:hover {
  color: var(--text-1);
}

.breadcrumb .sep {
  color: var(--border-3);
}

.breadcrumb .current {
  color: var(--text-2);
  font-weight: 500;
}

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 40px 80px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}

.page-header {
  margin-bottom: 28px;
}

.page-header h1 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 15.5px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 58ch;
}

.faq-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px;
  font-size: 15px;
  font-weight: 620;
  color: var(--text-1);
  transition: background 120ms;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  background: var(--bg-2);
}

.faq-item__arrow {
  width: 18px;
  height: 18px;
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 180ms ease, color 180ms ease;
}

.faq-item[open] .faq-item__arrow {
  transform: rotate(180deg);
  color: var(--text-2);
}

.faq-item__body {
  padding: 0 18px 18px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.65;
  border-top: 1px solid var(--border);
  margin-top: -1px;
}

.faq-item__body p+p {
  margin-top: 10px;
}

.sidebar {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sb-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}

.sb-cta {
  position: relative;
  overflow: hidden;
}

.sb-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #8b5cf6);
}

.sb-cta h3,
.sb-help h3,
.sb-guides h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
}

.sb-cta p,
.sb-help p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 14px;
}

.sb-btn {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  text-align: center;
  background: var(--text-1);
  color: #fff;
  transition: all 150ms;
  text-decoration: none;
}

.sb-btn:hover {
  opacity: 0.85;
}

.help-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

.help-row+.help-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.help-row svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  margin-top: 2px;
  flex-shrink: 0;
}

.sb-guides a {
  display: block;
  font-size: 12.8px;
  color: var(--text-2);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  transition: color 120ms;
}

.sb-guides a:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sb-guides a:hover {
  color: var(--text-1);
}

footer {
  border-top: 1px solid var(--border);
  padding: 48px 40px 32px;
  max-width: 1080px;
  margin: 0 auto;
}

.fg {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.fb p {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 240px;
  margin-top: 8px;
}

.fc-t {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin-bottom: 12px;
}

.fc a {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 7px;
  transition: color 150ms;
}

.fc a:hover {
  color: var(--text-1);
}

.fbot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.fbot p {
  font-size: 11.5px;
  color: var(--text-3);
}

.fbot-l {
  display: flex;
  gap: 14px;
}

.fbot-l a {
  font-size: 11.5px;
  color: var(--text-3);
  text-decoration: none;
}

.fbot-l a:hover {
  color: var(--text-2);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fi {
  opacity: 0;
  animation: fadeUp .6s cubic-bezier(.16, 1, .3, 1) forwards;
}

.fd1 {
  animation-delay: .05s;
}

.fd2 {
  animation-delay: .1s;
}

.fd3 {
  animation-delay: .15s;
}

.fd4 {
  animation-delay: .2s;
}



/* ===== End moved from faq.html ===== */


/* ===== Moved from anvandarvillkor.html on 2026-02-18 ===== */
:root {
  --bg: #fafafa;
  --bg-1: #ffffff;
  --bg-2: #f5f5f7;
  --bg-3: #eeeef0;
  --border: rgba(0, 0, 0, 0.06);
  --border-2: rgba(0, 0, 0, 0.1);
  --border-3: rgba(0, 0, 0, 0.14);
  --text-1: #0f0f18;
  --text-2: #555568;
  --text-3: #8e8ea0;
  --accent: #635bff;
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(250, 250, 250, 0.8);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-1);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  font-size: 13.5px;
  font-weight: 450;
  color: var(--text-3);
  text-decoration: none;
  transition: color 150ms;
}

.nav-links a:hover {
  color: var(--text-1);
}

.nav-links a.active {
  color: var(--text-1);
  font-weight: 600;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.n-btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 150ms;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.n-btn.ghost {
  background: transparent;
  color: var(--text-3);
}

.n-btn.ghost:hover {
  color: var(--text-1);
}

.n-btn.primary {
  background: var(--text-1);
  color: #fff;
}

.n-btn.primary:hover {
  opacity: 0.85;
}

.breadcrumb {
  max-width: 1080px;
  margin: 0 auto;
  padding: 76px 40px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
}

.breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
  transition: color 120ms;
}

.breadcrumb a:hover {
  color: var(--text-1);
}

.breadcrumb .sep {
  color: var(--border-3);
}

.breadcrumb .current {
  color: var(--text-2);
  font-weight: 500;
}

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 40px 80px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 15.5px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 62ch;
}

.terms-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 24px;
}

.terms-updated {
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.prose h2 {
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -0.4px;
  margin-top: 28px;
  margin-bottom: 10px;
  color: var(--text-1);
}

.prose h2:first-of-type {
  margin-top: 0;
}

.prose p {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.68;
  margin-bottom: 10px;
}

.prose ul {
  list-style: none;
  padding-left: 0;
  margin: 6px 0 14px;
}

.prose li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 4px;
}

.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

.sidebar {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sb-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}

.sb-card h3 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-1);
  letter-spacing: -0.2px;
}

.toc-link {
  display: block;
  font-size: 12.8px;
  color: var(--text-2);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  transition: color 120ms;
}

.toc-link:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.toc-link:hover {
  color: var(--text-1);
}

.sb-help p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 12px;
}

.sb-btn {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  text-align: center;
  background: var(--text-1);
  color: #fff;
  transition: all 150ms;
  text-decoration: none;
}

.sb-btn:hover {
  opacity: 0.85;
}

footer {
  border-top: 1px solid var(--border);
  padding: 48px 40px 32px;
  max-width: 1080px;
  margin: 0 auto;
}

.fg {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.fb p {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 240px;
  margin-top: 8px;
}

.fc-t {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin-bottom: 12px;
}

.fc a {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 7px;
  transition: color 150ms;
}

.fc a:hover {
  color: var(--text-1);
}

.fbot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.fbot p {
  font-size: 11.5px;
  color: var(--text-3);
}

.fbot-l {
  display: flex;
  gap: 14px;
}

.fbot-l a {
  font-size: 11.5px;
  color: var(--text-3);
  text-decoration: none;
}

.fbot-l a:hover {
  color: var(--text-2);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fi {
  opacity: 0;
  animation: fadeUp .6s cubic-bezier(.16, 1, .3, 1) forwards;
}

.fd1 {
  animation-delay: .05s;
}

.fd2 {
  animation-delay: .1s;
}

.fd3 {
  animation-delay: .15s;
}

.fd4 {
  animation-delay: .2s;
}



/* ===== End moved from anvandarvillkor.html ===== */


/* ===== Moved from om.html on 2026-02-18 ===== */
:root {
  --bg: #fafafa;
  --bg-1: #ffffff;
  --bg-2: #f5f5f7;
  --border: rgba(0, 0, 0, 0.06);
  --border-2: rgba(0, 0, 0, 0.1);
  --border-3: rgba(0, 0, 0, 0.14);
  --text-1: #0f0f18;
  --text-2: #555568;
  --text-3: #8e8ea0;
  --accent: #635bff;
  --accent-bg: rgba(99, 91, 255, 0.06);
  --teal: #0d9b7a;
  --teal-bg: rgba(13, 155, 122, 0.06);
  --amber: #d97706;
  --amber-bg: rgba(217, 119, 6, 0.06);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(250, 250, 250, 0.8);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-1);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  font-size: 13.5px;
  font-weight: 450;
  color: var(--text-3);
  text-decoration: none;
  transition: color 150ms;
}

.nav-links a:hover {
  color: var(--text-1);
}

.nav-links a.active {
  color: var(--text-1);
  font-weight: 600;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.n-btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.n-btn.ghost {
  background: transparent;
  color: var(--text-3);
}

.n-btn.ghost:hover {
  color: var(--text-1);
}

.n-btn.primary {
  background: var(--text-1);
  color: #fff;
}

.n-btn.primary:hover {
  opacity: 0.85;
}

.breadcrumb {
  max-width: 1080px;
  margin: 0 auto;
  padding: 76px 40px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
}

.breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--text-1);
}

.breadcrumb .sep {
  color: var(--border-3);
}

.breadcrumb .current {
  color: var(--text-2);
  font-weight: 500;
}

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 40px 80px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}

.page-header {
  margin-bottom: 26px;
}

.page-header h1 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 15.5px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 58ch;
}

.content-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}

.card h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}

.card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
}

.card p+p {
  margin-top: 10px;
}

.about-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.point {
  padding: 12px 13px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.45;
}

.sidebar {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sb-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}

.sb-cta {
  position: relative;
  overflow: hidden;
}

.sb-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #8b5cf6);
}

.sb-card h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
}

.sb-card p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}

.sb-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  text-align: center;
  background: var(--text-1);
  color: #fff;
  text-decoration: none;
}

.sb-links a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.8px;
  color: var(--text-2);
  text-decoration: none;
}

.sb-links a:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sb-links a:hover {
  color: var(--text-1);
}

footer {
  border-top: 1px solid var(--border);
  padding: 48px 40px 32px;
  max-width: 1080px;
  margin: 0 auto;
}

.fg {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.fb p {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 240px;
  margin-top: 8px;
}

.fc-t {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin-bottom: 12px;
}

.fc a {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 7px;
}

.fc a:hover {
  color: var(--text-1);
}

.fbot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.fbot p {
  font-size: 11.5px;
  color: var(--text-3);
}

.fbot-l {
  display: flex;
  gap: 14px;
}

.fbot-l a {
  font-size: 11.5px;
  color: var(--text-3);
  text-decoration: none;
}

.fbot-l a:hover {
  color: var(--text-2);
}



/* ===== End moved from om.html ===== */

/* Planner legal text in page bottom */
.planner-legal-footer {
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 16px var(--page-padding-right) calc(20px + env(safe-area-inset-bottom));
}

.planner-legal-footer__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
}

.planner-legal-footer__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #334155;
}

.planner-legal-footer__meta {
  margin: 5px 0 0;
  font-size: 11.5px;
  font-weight: 520;
  color: #64748b;
}

@media (max-width: 980px) {
  .planner-page .planner-legal-footer {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 981px) {
  .planner-page .planner-legal-footer {
    padding-left: 0;
    padding-right: 0;
  }

  .planner-page .planner-legal-footer__inner {
    max-width: 1440px;
    width: min(1440px, calc(100vw - 48px));
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
}

@media (min-width: 981px) {
  .planner-page.planner-app.planner-page--logged-in .planner-legal-footer {
    padding-left: calc(var(--planner-left-nav-width) + var(--planner-left-nav-gap));
    padding-right: 28px;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-legal-footer__inner {
    max-width: none;
    width: 100%;
    margin: 0;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-legal-footer__inner.planner-legal-footer--variant-c {
    max-width: 760px;
    width: min(760px, calc(100% - 24px));
    margin: 0 auto;
    padding: 16px 20px;
    text-align: center;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-legal-footer__divider {
    width: 32px;
    height: 2px;
    border-radius: 1px;
    background: #eeeef0;
    margin: 0 auto 12px;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-legal-footer__text {
    margin: 0;
    font-size: 12px;
    color: #8e8ea0;
    line-height: 1.55;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-legal-footer__link {
    color: #6b7280;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .planner-page.planner-app.planner-page--logged-in .planner-legal-footer__meta {
    margin: 4px 0 0;
    font-size: 11px;
    color: #a8adba;
    font-family: "JetBrains Mono", monospace;
    opacity: 0.8;
  }
}

/* Calendar refresh (reference-inspired, no legend/footer add-ons) */
.planner-page.planner-app[data-planner-section="planera"] .periods-month {
  gap: 16px;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-month {
  --fkcal-bg: #fafafa;
  --fkcal-bg-1: #ffffff;
  --fkcal-bg-2: #f5f5f7;
  --fkcal-border: rgba(0, 0, 0, 0.06);
  --fkcal-border-2: rgba(0, 0, 0, 0.1);
  --fkcal-text-1: #0f0f18;
  --fkcal-text-2: #555568;
  --fkcal-text-3: #8e8ea0;
  --fkcal-text-4: #c0c0cc;
  --fkcal-accent: #635bff;
  --fkcal-accent-bg: rgba(99, 91, 255, 0.08);
  --fkcal-teal: #0d9b7a;
  --fkcal-teal-bg: rgba(13, 155, 122, 0.08);

  background: var(--fkcal-bg-1);
  border: 1px solid var(--fkcal-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.03),
    0 6px 24px rgba(0, 0, 0, 0.03);
  padding: 0;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-month__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--fkcal-border);
  margin: 0;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-nav {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--fkcal-border-2);
  background: var(--fkcal-bg-1);
  color: var(--fkcal-text-3);
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-nav:hover {
  background: var(--fkcal-bg-2);
  color: var(--fkcal-text-1);
  border-color: var(--fkcal-border);
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-month__title {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--fkcal-text-1);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-month__title span {
  color: var(--fkcal-text-3);
  font-weight: 500;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-month__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-left: 1px solid var(--fkcal-border);
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-weekday {
  padding: 10px 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fkcal-text-4);
  border-right: 1px solid var(--fkcal-border);
  border-bottom: 1px solid var(--fkcal-border);
  background: var(--fkcal-bg-1);
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-weekday:nth-child(6),
.planner-page.planner-app[data-planner-section="planera"] .calendar-weekday:nth-child(7) {
  opacity: 0.65;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day {
  min-height: 100px;
  aspect-ratio: auto;
  padding: 8px;
  border-radius: 0;
  border-right: 1px solid var(--fkcal-border);
  border-bottom: 1px solid var(--fkcal-border);
  background: var(--fkcal-bg-1);
  box-shadow: none;
  transition: background 120ms ease;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-month__grid>.calendar-day:nth-child(7n) {
  border-right: 0;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day:not(.calendar-day--outside):hover {
  background: rgba(0, 0, 0, 0.01);
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--weekend {
  background: var(--fkcal-bg-2);
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day.calendar-day--outside {
  background: var(--fkcal-bg);
  opacity: 1;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--selected,
.planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--a,
.planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--b,
.planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--ab {
  box-shadow: none;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--a {
  background: rgba(99, 91, 255, 0.02);
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--b {
  background: rgba(13, 155, 122, 0.03);
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--ab {
  background: rgba(99, 91, 255, 0.03);
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--block::before,
.planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--block::after {
  display: none !important;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day__num {
  position: static;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--fkcal-text-2);
  margin: 0 0 6px;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--weekend .calendar-day__num {
  color: var(--fkcal-text-4);
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day.day--today .calendar-day__num {
  background: var(--fkcal-text-1);
  color: #fff;
  font-weight: 700;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day__tags {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day__tag {
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  border-left-width: 2.5px;
  border-left-style: solid;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day__tag--a {
  background: var(--fkcal-accent-bg);
  color: var(--fkcal-accent);
  border-left-color: var(--fkcal-accent);
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day__tag--b {
  background: var(--fkcal-teal-bg);
  color: var(--fkcal-teal);
  border-left-color: var(--fkcal-teal);
}

.planner-page.planner-app[data-planner-section="planera"] .calendar-day__conflict {
  top: 8px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--fkcal-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  box-shadow: none;
}

@media (max-width: 700px) {
  .planner-page.planner-app[data-planner-section="planera"] .calendar-month__title-row {
    padding: 14px 16px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day {
    min-height: 70px;
    padding: 4px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day__num {
    width: 22px;
    height: 22px;
    font-size: 11px;
    margin-bottom: 4px;
  }

  .planner-page.planner-app[data-planner-section="planera"] .calendar-day__tag {
    font-size: 9px;
    padding: 2px 5px;
  }
}

/* ===== Shared Mobile Menu (non-planner pages) ===== */
.site-nav .site-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.site-nav .site-menu-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}

.site-nav .site-menu-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #111;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}

.site-nav .site-menu-toggle.is-open .site-menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-nav .site-menu-toggle.is-open .site-menu-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.site-nav .site-menu-toggle.is-open .site-menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  visibility: hidden;
  pointer-events: none;
}

.site-mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}

.site-mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

.site-mobile-menu__panel {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-mobile-menu.is-open .site-mobile-menu__panel {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.site-mobile-menu__head {
  display: none;
}

.site-mobile-menu__nav {
  flex: 1;
  padding: 8px 0;
  position: static;
  top: auto;
  right: auto;
  left: auto;
  height: auto;
  display: block;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-mobile-menu__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  color: #111;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.site-mobile-menu__nav a::after {
  content: "›";
  color: #c9c9c9;
  font-size: 20px;
  line-height: 1;
}

.site-mobile-menu__nav a+a {
  border-top: 1px solid #f0f0f0;
}

.site-mobile-menu__nav a:active {
  background: #f7f7f7;
}

.site-mobile-menu__nav a.active,
.site-mobile-menu__nav a[aria-current="page"] {
  background: #f7f7f7;
}

.site-mobile-menu__actions {
  padding: 16px 20px calc(36px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #f0f0f0;
}

.site-mobile-menu__actions .n-btn {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  border-radius: 10px;
  font-size: 15px;
}

body.site-mobile-menu-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .site-nav {
    padding: 0 12px;
    gap: 8px;
  }

  .site-nav .nav-left {
    gap: 0;
    min-width: 0;
    flex: 1 1 auto;
  }

  .site-nav .logo {
    font-size: 16px;
    white-space: nowrap;
  }

  .site-nav .nav-links {
    display: none;
  }

  .site-nav .nav-right {
    gap: 6px;
    flex: 0 0 auto;
  }

  .site-nav .nav-right .n-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .site-nav .site-menu-toggle {
    display: inline-flex;
  }

  .site-mobile-menu__actions {
    display: none;
  }
}

/* ===== Home feature cards mobile fix ===== */
@media (max-width: 980px) {
  #features .feature-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 40px;
    align-items: start;
  }

  #features .feature-row.reverse .fr-text,
  #features .feature-row.reverse .fr-visual {
    order: initial;
  }

  #features .fr-visual {
    padding: 16px;
  }

  #features .warn-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
  }

  #features .warn-txt {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #features .warn-badge {
    justify-self: end;
    white-space: nowrap;
  }

  #mistakes .mistakes-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #mistakes .m-card {
    padding: 20px 18px;
  }

  #mistakes .m-num {
    font-size: 34px;
    letter-spacing: -1.8px;
    margin-bottom: 10px;
  }

  #mistakes .m-title {
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
  }

  #mistakes .m-desc {
    font-size: 15px;
    line-height: 1.55;
  }
}

@media (max-width: 700px) {
  #mistakes .m-title {
    font-size: 17px;
  }

  #mistakes .m-desc {
    font-size: 14px;
  }
}

/* ===== Guides page hardening (mobile/tablet) ===== */
.guides-page .page {
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}

.guides-page .main-content {
  min-width: 0;
}

.guides-page .sidebar {
  min-width: 0;
}

@media (max-width: 980px) {
  .guides-page .breadcrumb,
  .guides-page .page {
    padding-left: 20px;
    padding-right: 20px;
  }

  .guides-page .page {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .guides-page .sidebar {
    position: static;
    top: auto;
    order: 2;
    gap: 12px;
  }

  .guides-page .sb-card {
    padding: 16px;
  }

  .guides-page .guides-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .guides-page .guide-card {
    padding: 18px;
  }

  .guides-page .gc-arrow--corner {
    top: 18px;
    right: 18px;
    opacity: 1;
    transform: none;
  }
}

/* ===== Pricing page hardening (mobile/tablet) ===== */
@media (max-width: 980px) {
  .pricing-page .breadcrumb,
  .pricing-page .hero,
  .pricing-page .plans,
  .pricing-page .compare-wrap,
  .pricing-page .page-cta {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pricing-page .plans {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .pricing-page .plan-card {
    padding: 22px 18px;
  }

  .pricing-page .plan-badge {
    top: 14px;
    right: 14px;
    font-size: 10px;
    padding: 3px 9px;
  }

  .pricing-page .compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 44px;
  }

  .pricing-page .compare {
    min-width: 640px;
  }
}

@media (max-width: 700px) {
  .pricing-page .hero {
    padding-top: 22px;
    padding-bottom: 14px;
  }

  .pricing-page .hero h1 {
    font-size: clamp(28px, 8.2vw, 36px);
  }

  .pricing-page .hero p {
    font-size: 15px;
  }

  .pricing-page .plan-card {
    padding: 20px 16px;
  }

  .pricing-page .plan-price .num {
    font-size: 40px;
    letter-spacing: -1.4px;
  }

  .pricing-page .plan-price-note {
    margin-bottom: 14px;
  }

  .pricing-page .plan-list {
    margin-bottom: 16px;
  }

  .pricing-page .compare th,
  .pricing-page .compare td {
    padding: 11px 12px;
    font-size: 13.5px;
  }

  .pricing-page .page-cta {
    padding-bottom: 48px;
  }
}

/* ===== FAQ page hardening (mobile/tablet) ===== */
.faq-page .page {
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}

.faq-page .main-content,
.faq-page .sidebar {
  min-width: 0;
}

.faq-page .sb-guides a,
.faq-page .help-row span {
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .faq-page .breadcrumb,
  .faq-page .page {
    padding-left: 20px;
    padding-right: 20px;
  }

  .faq-page .page {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-top: 22px;
    padding-bottom: 50px;
  }

  .faq-page .page-header {
    margin-bottom: 18px;
  }

  .faq-page .sidebar {
    position: static;
    top: auto;
    order: 2;
    gap: 12px;
  }

  .faq-page .sb-card {
    padding: 18px;
  }

  .faq-page .faq-item summary {
    padding: 16px;
  }

  .faq-page .faq-item__body {
    padding: 0 16px 16px;
  }
}

@media (max-width: 700px) {
  .faq-page .page-header h1 {
    font-size: clamp(30px, 9vw, 36px);
  }

  .faq-page .page-header p {
    font-size: 15px;
  }

  .faq-page .faq-item summary {
    font-size: 16px;
    line-height: 1.35;
  }

  .faq-page .sb-btn {
    min-height: 44px;
    font-size: 14.5px;
  }
}