@keyframes premiumUpgradeModalIn {
      0% {
            opacity: 0;
            transform: translateY(12px) scale(.97)
      }

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

@keyframes premiumUpgradeOverlayIn {
      0% {
            opacity: 0
      }

      to {
            opacity: 1
      }
}

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

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

@keyframes modalIn {
      0% {
            opacity: 0;
            transform: scale(.97) translateY(4px)
      }

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

@keyframes slideDown {
      0% {
            opacity: 0;
            transform: translateY(-10px)
      }

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

@keyframes dayFlash {
      0% {
            box-shadow: 0 0 0 0 transparent;
            transform: translateZ(0)
      }

      25% {
            box-shadow: 0 0 0 4px rgba(0, 200, 185, .25)
      }

      to {
            box-shadow: 0 0 0 0 transparent
      }
}

@keyframes daySelectPulse {
      0% {
            transform: scale(.98);
            filter: saturate(.92)
      }

      to {
            transform: scale(1);
            filter: saturate(1)
      }
}

@keyframes gdv2FadeUp {
      0% {
            opacity: 0;
            transform: translateY(8px)
      }

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

@keyframes authDropdownFade {
      0% {
            opacity: 0
      }

      to {
            opacity: 1
      }
}

@keyframes parentsFadeUp {
      0% {
            opacity: 0;
            transform: translateY(8px)
      }

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

@keyframes warningsFadeUp {
      0% {
            opacity: 0;
            transform: translateY(8px)
      }

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

@keyframes pulse {

      0%,
      to {
            opacity: 1
      }

      50% {
            opacity: .4
      }
}

@keyframes fadeUp {
      0% {
            opacity: 0;
            transform: translateY(12px)
      }

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

:root {
      --green: #00c8b9;
      --green-bg: rgba(0, 200, 185, 0.08);
      --green-soft: #e8fbf8;
      --dark: #1b1f22;
      --gray: #6b7280;
      --muted: #6a7078;
      --border: #e5e7eb;
      --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;
      --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);
      --accent: #4553b3;
      --accent-bg: rgba(69, 83, 179, 0.12);
      --accent-text: #3341a6;
      --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
}

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box
}

html {
      scroll-behavior: smooth
}

.nav a,
body {
      font-size: 15px
}

body,
html {
      height: 100%;
      overflow-x: hidden
}

body {
      margin: 0;
      font-family: "Inter Variable", "Inter", system-ui, sans-serif;
      line-height: 1.5;
      max-width: 100%;
      font-family: var(--font);
      background: var(--bg);
      color: var(--text-1);
      -webkit-font-smoothing: antialiased
}

button,
input,
select {
      font-family: inherit
}

.page-bg {
      position: fixed;
      inset: 0;
      z-index: -1
}

.page-bg,
.planner-page .page-bg {
      background: #fff
}

.planner-page.planner-page--logged-in #menuOverlay,
.planner-page.planner-page--logged-in .top {
      display: none !important
}

.planner-page.planner-page--logged-in .page-bg {
      background: #f7f7f6
}

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

.planner-page #planner.hidden {
      display: block !important;
      visibility: hidden;
      pointer-events: none;
      min-height: 120vh
}

.top {
      padding-top: 24px;
      padding-bottom: 10px;
      padding-left: var(--page-padding-left);
      padding-right: var(--page-padding-right);
      position: relative;
      z-index: 50
}

.nav,
.top__inner {
      display: flex;
      align-items: center
}

.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;
      gap: 24px;
      position: relative
}

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

.nav a {
      text-decoration: none;
      color: var(--ink);
      font-weight: 700;
      opacity: .9;
      transition: opacity .2s ease
}

.nav a:hover {
      opacity: 1
}

@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, .14)
      }

      .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: 0 0;
            border: 0;
            border-radius: 0;
            box-shadow: none
      }

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

      .nav {
            gap: 34px
      }

      #btn-upgrade.nav-cta,
      .nav a {
            color: rgba(10, 12, 16, .72);
            font-size: 15px;
            font-weight: 650
      }

      .nav a {
            opacity: 1;
            letter-spacing: .01em;
            transition: color .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 .15s ease, color .15s ease, transform .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: 0;
            border-radius: 0;
            background: 0 0;
            box-shadow: none
      }

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

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

.plan-view-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 10px 0 12px;
      flex-wrap: wrap
}

.planner-page.planner-app[data-planner-section=planera] .left-card--add-period .plan-view-row {
      padding-right: 18px;
      margin-bottom: 10px
}

.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: .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, .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, .4)0, rgba(79, 70, 229, .4) 100%)
}

.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, .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, .52);
      font-weight: 520
}

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

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

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

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

.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,
.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: 10px 14px;
      margin: 0;
      padding: 0;
      border: 0;
      background: 0 0
}

.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
}

.planner-page.planner-app[data-planner-section=planera] #planeraToolbox.planera-controls {
      background: 0 0;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      padding: 0px 0px 0px;
      margin: 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 {
      gap: 6px;
      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
}

.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, .06)
}

.planner-page.planner-app[data-planner-section=planera] #planeraToolbox .planera-toolbox-context {
      margin-top: 0;
      padding: 0;
      border: 0;
      background: 0 0;
      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, .06);
      background: linear-gradient(135deg, rgba(243, 231, 214, .72)0, rgba(253, 230, 210, .34) 44%, rgba(228, 245, 233, .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, .78)
}

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

.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, .65);
      border: 1px solid rgba(0, 0, 0, .08);
      flex-shrink: 0;
      transition: background .12s ease, border-color .12s ease, transform .12s ease
}

.planera-guidance__action:hover {
      background: rgba(255, 255, 255, .85);
      border-color: rgba(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, .28);
      outline-offset: 2px
}

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

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

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

.planner-tabs,
.planner-tabs__btn {
      display: inline-flex;
      align-items: center;
      border: 0
}

.planner-tabs {
      gap: 0;
      padding: 2px;
      border-radius: 8px;
      background: rgba(0, 0, 0, .04);
      margin-bottom: 16px;
      box-shadow: none
}

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

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

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

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

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

.footer::before,
.plan-tools-mobile {
      display: none
}

.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, .06);
      border-radius: 8px;
      background: rgba(0, 0, 0, .02);
      font-size: 18px;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      line-height: 1;
      transition: background .15s ease, color .15s ease
}

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

.plan-tools-mobile__trigger[aria-expanded=true] {
      background: rgba(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, .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: 0;
      border-radius: 10px;
      background: 0 0;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      cursor: pointer;
      text-align: left
}

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

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

.periods-month {
      background: #fafafa;
      border: 1px solid var(--border);
      border-radius: var(--radius)
}

.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
}

.top__inner>.header-actions,
.top__inner>.nav-cta {
      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 .08s ease, background .15s ease, opacity .2s ease;
      white-space: nowrap;
      border: 0;
      cursor: pointer;
      display: inline-block;
      font-family: inherit
}

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

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

input {
      padding: 12px 0;
      font-size: 28px;
      font-weight: 300
}

input,
select {
      width: 100%;
      border: 0;
      border-bottom: 2px solid rgba(0, 0, 0, .15);
      background: 0 0;
      text-align: center;
      color: rgba(0, 0, 0, .4);
      transition: border-color .2s ease, color .2s ease;
      margin-bottom: 4px
}

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

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

select {
      font-size: 18px;
      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: 12px 24px 12px 0;
      font-weight: 400
}

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

.flex {
      display: flex
}

.flex-1 {
      flex: 1
}

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

.h3,
.h4 {
      font-size: 18px;
      line-height: 1.25
}

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

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

.hint,
.small {
      font-size: 13px
}

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

#authDropdownMsg {
      margin-top: 12px
}

#dropdownLogin {
      margin-top: 0
}

#authChangePassword {
      margin-top: 12px
}

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

#dropdownLogout {
      margin-top: 12px
}

.shared-plan-banner {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, .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
}

.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
}

.info {
      margin-top: 10px
}

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

.spacer {
      flex: 1
}

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

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

.full {
      width: 100%
}

.badge,
.duo-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px
}

.badge {
      padding: 7px 10px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 12px;
      border: 1px solid rgba(0, 200, 185, .35);
      background: rgba(0, 200, 185, .1)
}

.duo-btn {
      justify-content: center;
      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 .08s ease, background .15s ease, border-color .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)
}

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

.card-pad {
      padding: 22px
}

.field {
      outline: 0
}

.field:focus {
      border-color: rgba(0, 200, 185, .7)
}

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

.field--compact[type=date],
.field[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--compact[type=date]::-webkit-calendar-picker-indicator,
.field[type=date]::-webkit-calendar-picker-indicator {
      opacity: 0;
      cursor: pointer;
      width: 24px;
      height: 24px
}

.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)
}

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

.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, .1);
      z-index: 1000
}

.auth-dropdown__section {
      display: block
}

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

.overlay.premium-upgrade-overlay {
      z-index: 10050;
      padding: 8px;
      align-items: center;
      justify-content: center;
      background: 0 0;
      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, .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, .06);
      box-shadow: 0 32px 80px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .05);
      animation: premiumUpgradeModalIn 450ms cubic-bezier(.16, 1, .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: 0;
      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, .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, .06);
      border: 1px solid rgba(99, 91, 255, .1);
      font-size: 10.5px;
      font-weight: 700;
      color: #635bff;
      text-transform: uppercase;
      letter-spacing: .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: -.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, .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,
.premium-upgrade-modal__price-was {
      font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace
}

.premium-upgrade-modal__price-now {
      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-size: 16px;
      font-weight: 500;
      letter-spacing: -.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, .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, .06)
}

.premium-upgrade-modal .premium-upgrade-feature__icon {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: rgba(99, 91, 255, .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
}

.grunddata-v2 .gdv2-activity-text strong,
.premium-upgrade-modal .premium-upgrade-feature strong,
.wizard-premium-paywall .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, .05);
      margin-bottom: 10px
}

.premium-upgrade-modal__legal-note {
      margin: 0;
      font-size: 10.5px;
      line-height: 1.5;
      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, .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: 0;
      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, .08), 0 4px 14px rgba(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, .14)
}

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

.premium-upgrade-modal__cta:disabled,
.premium-upgrade-modal__cta[aria-disabled=true] {
      opacity: .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: 0 0;
      border: 0;
      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
}

.overlay {
      background: var(--overlay);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px)
}

.planner {
      padding: 26px 0 50px
}

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

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

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

#topbarPlanPctBar {
      width: 0
}

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

#inlineMoreDropdown {
      display: none
}

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

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

.plan-switcher-dropdown__item.is-active {
      background: rgba(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-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 .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: .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
}

.plan-tools {
      position: relative;
      display: inline-flex;
      align-items: center
}

.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, .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
}

.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, .08);
      border-radius: 14px;
      background: #fff
}

.planner-dashboard-nav__item {
      text-align: left;
      border: 0;
      border-radius: 7px;
      background: 0 0;
      color: #64748b;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 460;
      cursor: pointer;
      font-family: inherit;
      transition: all .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: .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, .1);
      padding: 2px 7px;
      border-radius: 10px
}

.planner-dashboard-nav__divider {
      height: 1px;
      background: rgba(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: .55
}

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

.planner-dashboard-nav__item:hover {
      background: rgba(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
      }

      .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: 0;
            border-right: 1px solid rgba(0, 0, 0, .08);
            border-radius: 0;
            background: #fff;
            box-shadow: none;
            overflow-y: auto
      }

      .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 .12s ease
      }

      .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__item:hover {
            background: rgba(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
}

.planner-nav-plan-switcher {
      position: relative;
      padding: 16px 12px 12px;
      border-bottom: 1px solid rgba(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, .025);
      transition: background .12s ease;
      box-sizing: border-box
}

.planner-nav-plan-switcher.is-open .planner-nav-plan-switcher__btn,
.planner-nav-plan-switcher__btn:hover {
      background: rgba(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: -.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 .2s ease
}

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

.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, .1);
      border-radius: 10px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);
      z-index: 100;
      padding: 6px;
      box-sizing: border-box
}

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

.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: #60657d;
      text-transform: uppercase;
      letter-spacing: .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;
      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, .06)
}

.planner-nav-plan-switcher__dropdown-list .plan-switcher-dropdown__item:hover {
      background: rgba(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: 0 0;
      border: 1.5px solid rgba(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, .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 .1s ease;
      box-sizing: border-box
}

.planner-nav-plan-switcher__dropdown-action:hover {
      background: rgba(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, .06);
      color: var(--accent)
}

.planner-dashboard-nav__guest-upgrade {
      margin: auto 8px 8px
}

.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, .22);
      background: #f7f3ff;
      transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease
}

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

.planner-dashboard-nav__guest-upgrade-title {
      font-size: 15px;
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: -.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, .28)
}

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

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

.planner-dashboard-nav__user:hover {
      background: rgba(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
}

.planner-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
      align-items: start;
      width: 100%;
      max-width: 100%
}

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

.left-card {
      margin: 0
}

.left-column-stack>.left-card:first-child {
      padding: 17px 18px
}

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

.planner-aside {
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: 0 0;
      border: 0
}

.planner-aside__stack {
      display: contents
}

.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
}

@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,
      .planner-aside .aside-warnings-desktop {
            display: none
      }
}

.aside-card {
      background: var(--card)
}

.aside-upgrade {
      padding: 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
}

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

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

.aside-card--secondary {
      background: 0 0
}

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

.section {
      margin-top: 18px
}

.form-grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
}

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

.period-mobile-control {
      display: none
}

.period-field-wrap {
      position: relative
}

.period-form-mount {
      margin-top: 0
}

.period-canvas {
      background: #fff;
      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;
      letter-spacing: -.02em
}

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

.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
}

.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-row.period-range-with-arrow,
      .period-range-with-arrow {
            grid-template-columns: 1fr auto 1fr
      }

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

.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, .16);
      background: #fff;
      color: #0f172a;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background .14s ease, border-color .14s ease, color .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,
.period-weekdays__list .check input:focus-visible+label {
      outline: 2px solid rgba(15, 23, 42, .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:checked+label {
      background: #0f172a;
      border-color: #0f172a;
      color: #fff
}

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

.period-live-preview__label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .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)
}

.period-canvas .period-advanced {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(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: .7
}

.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
}

.add-period-sheet__footer .duo-btn-primary.full,
.period-repeat select {
      width: 100%
}

.period-range-row {
      grid-template-columns: 1fr
}

.date-picker {
      display: block
}

.date-picker-trigger,
.date-picker-wrapper {
      max-width: 380px;
      display: flex;
      align-items: center
}

.date-picker-wrapper {
      position: relative;
      flex-direction: column;
      margin: 0 auto
}

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

.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: 0;
      border-color: var(--yazio-green);
      box-shadow: 0 0 0 4px rgba(0, 200, 185, .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, .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 .2s ease, border-color .2s ease
}

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

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

.mini-calendar__grid,
.mini-calendar__weekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr)
}

.mini-calendar__weekdays {
      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 {
      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 .2s ease, border-color .2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0
}

.mini-calendar__day:hover {
      background: rgba(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, .22);
      box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .1)
}

.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: .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, .14);
      color: var(--muted);
      text-align: center
}

#economyUpgrade,
.summary-card .empty,
.summary-card .list {
      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
}

.plan-settings {
      padding: 0;
      background: 0 0;
      border: 0
}

.plan-settings__title {
      margin: 0;
      font-size: 22px;
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: -.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, .22);
      background: rgba(245, 158, 11, .1);
      color: #92400e;
      font-size: 12px;
      font-weight: 590;
      letter-spacing: .01em
}

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

.selection-cards {
      display: flex;
      flex-direction: column;
      gap: 8px
}

.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, #fff 0, #fcfdff 100%);
      border: 1px solid rgba(15, 23, 42, .09);
      border-radius: 14px;
      padding: 14px 14px 13px;
      box-shadow: 0 1px 2px rgba(2, 6, 23, .03);
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
      align-self: start;
      display: flex;
      flex-direction: column
}

.help-wizard-card:hover {
      border-color: rgba(69, 83, 179, .28);
      box-shadow: 0 6px 18px rgba(15, 23, 42, .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__edit {
      appearance: none;
      -webkit-appearance: none;
      border: 1px solid rgba(69, 83, 179, .2);
      background: rgba(69, 83, 179, .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 .12s ease, border-color .12s ease, color .12s ease, transform .12s ease
}

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

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

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

.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__sub {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 3
}

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

.help-wizard-edit {
      margin-top: 4px;
      padding-top: 12px;
      border-top: 1px solid rgba(15, 23, 42, .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, .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: 0;
      border-color: rgba(69, 83, 179, .46);
      box-shadow: 0 0 0 3px rgba(69, 83, 179, .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, .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-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, .08);
      background: rgba(15, 23, 42, .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, .12);
      border-radius: 8px;
      min-height: 34px;
      padding: 0 8px;
      background: #fff;
      font-size: 12px;
      font-weight: 560;
      color: #334155;
      cursor: pointer;
      transition: all .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, .2);
      background: rgba(15, 23, 42, .03)
}

.help-edit-weekday:has(input:checked) {
      border-color: rgba(69, 83, 179, .38);
      background: rgba(69, 83, 179, .11);
      box-shadow: inset 0 0 0 1px rgba(69, 83, 179, .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, .1);
      border-radius: 9px;
      background: #fff;
      padding: 9px 11px;
      font-size: 12.5px;
      font-weight: 520;
      color: #334155;
      transition: border-color .12s ease, background .12s ease
}

.help-wizard-edit__check::before {
      content: "";
      width: 16px;
      height: 16px;
      border-radius: 5px;
      border: 1.5px solid rgba(15, 23, 42, .35);
      background: #fff;
      box-sizing: border-box;
      flex-shrink: 0;
      transition: all .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, .18);
      background: rgba(15, 23, 42, .03)
}

.help-wizard-edit__check:has(input:checked) {
      border-color: rgba(69, 83, 179, .34);
      background: rgba(69, 83, 179, .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__cancel,
.help-wizard-edit__save {
      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 .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, .14);
      background: #fff;
      color: #334155
}

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

.planner-page.planner-app.planner-page--logged-in[data-planner-section=help] #plannerCardHelp .plan-settings__title {
      animation: helpOverviewFadeUp .35s cubic-bezier(.16, 1, .3, 1) both
}

.planner-page.planner-app.planner-page--logged-in[data-planner-section=help] #plannerCardHelp .plan-settings__status {
      animation: helpOverviewFadeUp .35s cubic-bezier(.16, 1, .3, 1) both;
      animation-delay: .05s
}

.planner-page.planner-app.planner-page--logged-in[data-planner-section=help] #plannerCardHelp .help-wizard-card {
      animation: helpOverviewFadeUp .38s cubic-bezier(.16, 1, .3, 1) both
}

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

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

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

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

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

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

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

      .planner-page.planner-app.planner-page--logged-in[data-planner-section=help] #plannerCardHelp .help-wizard-card,
      .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 .plan-settings__title {
            animation: none
      }
}

.help-settings-mobile,
.planner-page.planner-app.planner-page--logged-in #plannerCardGrunddata>.section-page-header {
      display: none
}

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

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

.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, .06)
}

.compare tr:last-child td,
.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: 0;
      background: 0 0;
      font-family: "Inter Variable", "Inter", sans-serif;
      font-size: 15px;
      font-weight: 500;
      color: rgba(0, 0, 0, .88);
      text-align: left;
      cursor: pointer;
      list-style: none;
      transition: background .12s ease;
      text-decoration: none;
      color: inherit;
      box-sizing: border-box
}

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

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

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

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

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

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

.info-hub-sheet-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(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, .12);
      z-index: 71;
      flex-direction: column;
      transform: translateY(100%);
      transition: transform 280ms cubic-bezier(.32, .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, .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: 0;
      background: 0 0;
      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
}

@media (min-width:901px) {
      .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))
      }

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

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

.regler-sheet-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(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, .12);
      z-index: 71;
      flex-direction: column;
      transform: translateY(100%);
      transition: transform 280ms cubic-bezier(.32, .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, .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: 0;
      background: 0 0;
      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 {
      margin-top: 10px;
      border-top: 1px solid rgba(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, .78);
      font-family: "Inter Variable", "Inter", sans-serif
}

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

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

.chev {
      transition: transform .18s ease;
      opacity: .65
}

.details__body {
      margin-top: 12px
}

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

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

.check input,
.radio input[type=radio] {
      width: 18px;
      height: 18px;
      accent-color: var(--yazio-green)
}

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

.period-advanced {
      margin-top: 10px
}

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

.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, .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 {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 16px;
      border-radius: 16px;
      border: 2px solid var(--border);
      background: #fff;
      cursor: pointer;
      transition: all .2s ease
}

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

.radio input[type=radio] {
      margin-top: 4px;
      min-width: 18px;
      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
}

.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;
      overflow-y: auto
}

#setPasswordOverlay {
      z-index: 10010
}

#setPasswordOverlay {
      background: rgba(15, 23, 42, .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, .14);
      box-shadow: 0 26px 80px rgba(15, 23, 42, .24), 0 1px 0 rgba(255, 255, 255, .75) inset
}

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

#setPasswordOverlay .wizard__top .h3 {
      margin-bottom: 5px;
      font-size: 26px;
      line-height: 1.1;
      letter-spacing: -.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, .12);
      background: rgba(255, 255, 255, .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, .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: .01em;
      color: #334155
}

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

#setPasswordOverlay .field:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(69, 83, 179, .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: .01em;
      box-shadow: 0 12px 24px rgba(69, 83, 179, .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, .3);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px)
}

.overlay__content {
      position: relative;
      width: 100%;
      max-width: 800px;
      max-height: calc(100vh - 140px);
      z-index: 1;
      display: flex;
      flex-direction: column;
      margin: auto 0
}

.duo-modal,
body.planner-page.planner-app.edit-period-open,
body.planner-page.planner-app.plan-edit-open {
      overflow: hidden
}

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

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

.wizard__top {
      padding: 20px 24px 16px;
      border-bottom: 1px solid rgba(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: -.02em;
      margin: 0
}

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

.wizard__body {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow-y: auto;
      flex: 1;
      min-height: 0;
      transition: opacity .2s ease, transform .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, .06);
      flex-shrink: 0
}

.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, .16);
      background: linear-gradient(180deg, #fff 0, #fafaff 100%);
      box-shadow: 0 14px 40px rgba(31, 32, 72, .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, .07);
      border: 1px solid rgba(99, 91, 255, .12);
      font-size: 11px;
      font-weight: 700;
      color: #635bff;
      text-transform: uppercase;
      letter-spacing: .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: -.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, .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, .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
}

#economyForm .wizard-economy-sgi-box p,
.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, .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: .08em
}

.wizard-premium-paywall__offer-main {
      margin-top: 2px;
      font-size: 44px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -.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, .12);
      background: linear-gradient(180deg, rgba(99, 91, 255, .08)0, rgba(99, 91, 255, .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: .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: .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, .14);
      color: #50556d
}

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

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

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

.wizard__body--left {
      text-align: left
}

.duo-modal--w520 {
      max-width: 520px
}

.duo-modal--w560 {
      max-width: 560px
}

.duo-modal--w640 {
      max-width: 640px
}

.duo-modal--w820 {
      max-width: 820px
}

.gap-10 {
      gap: 10px
}

.gap-12 {
      gap: 12px
}

.gap-14 {
      gap: 14px
}

.mb-12 {
      margin-bottom: 12px
}

.text-13 {
      font-size: 13px
}

.grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr
}

#economyForm {
      gap: 24px
}

#economySave {
      margin-top: 24px
}

.saved-plans-modal {
      border: 1px solid #cfd3da;
      border-radius: 20px;
      box-shadow: 0 18px 54px rgba(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, .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: -.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: -.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, .12);
      color: #5d5bf2;
      font-size: 11px;
      font-weight: 760;
      letter-spacing: .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, .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: .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, .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, .15)
}

.saved-plans-confirm__title {
      margin: 0;
      font-size: 14px;
      line-height: 1.25;
      font-weight: 700;
      letter-spacing: -.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-confirm-actions__row,
      .saved-plans-modal #savedPlansSaveSection .sparade_knappar1 .flex,
      .saved-plans-modal #savedPlansSaveSection .sparade_knappar2 .flex {
            grid-template-columns: 1fr
      }
}

#shareUrlField {
      font-family: "Inter Variable", "Inter", sans-serif;
      font-size: 13px
}

.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, .08);
      background: #fff;
      transition: all .15s ease;
      text-align: center;
      box-sizing: border-box;
      position: relative
}

.wiz-selection-card:hover {
      border-color: rgba(0, 0, 0, .15);
      background: rgba(0, 0, 0, .015)
}

.wiz-selection-card--selected {
      border: 2px solid var(--accent);
      background: rgba(81, 97, 214, .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: -.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: -.01em
}

.wiz-field-input__input {
      width: 100%;
      padding: 10px 14px;
      border-radius: 8px;
      border: 1.5px solid rgba(0, 0, 0, .1);
      box-shadow: none;
      font-size: 15px;
      font-weight: 480;
      color: #0f172a;
      font-family: inherit;
      outline: 0;
      transition: all .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, .1)
}

.wiz-field-input__input--salary::placeholder {
      font-size: 12px
}

.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, .08);
      background: #fff;
      transition: all .15s ease;
      box-sizing: border-box
}

.wiz-radio-card:hover {
      border-color: rgba(0, 0, 0, .15);
      background: rgba(0, 0, 0, .015)
}

.wiz-radio-card[data-selected=true] {
      border: 2px solid var(--accent);
      background: rgba(81, 97, 214, .04)
}

.wiz-radio-card__radio {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid rgba(0, 0, 0, .2);
      background: #fff;
      flex-shrink: 0;
      margin-top: 1px;
      transition: all .12s ease;
      box-sizing: border-box
}

.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, .2);
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .12s ease;
      flex-shrink: 0
}

.wiz-checkbox--checked .wiz-checkbox__box {
      border: 0;
      background: var(--accent)
}

.wiz-economy-box {
      padding: 16px 18px;
      background: rgba(0, 0, 0, .02);
      border-radius: 10px;
      border: 1px solid rgba(0, 0, 0, .06)
}

.wiz-step-subtitle {
      font-size: 14px;
      color: #60657d;
      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, .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: -.015em
}

.wizard-rules-card__badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(99, 91, 255, .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, .08);
      border-radius: 9px;
      padding: 10px 12px;
      background: #fff;
      cursor: pointer;
      transition: border-color .12s ease, background-color .12s ease
}

.wizard-rules-option:hover {
      border-color: rgba(0, 0, 0, .14);
      background: rgba(0, 0, 0, .015)
}

.wizard-rules-option:has(input:checked) {
      border-color: var(--accent);
      background: rgba(81, 97, 214, .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: 0 0 !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
}

.wiz-step-note {
      font-size: 12px;
      color: #b0b8c4;
      font-weight: 420;
      margin: 0;
      text-align: center
}

.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, .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: -.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, .09);
      background: #fff;
      gap: 10px
}

.wiz-economy-premium .wiz-radio-card:hover {
      border-color: rgba(15, 15, 24, .15);
      background: #fff
}

.wiz-economy-premium .wiz-radio-card[data-selected=true] {
      border-color: #635bff;
      background: rgba(99, 91, 255, .07);
      box-shadow: 0 0 0 3px rgba(99, 91, 255, .08)
}

.wiz-economy-premium .wiz-radio-card__radio {
      width: 18px;
      height: 18px;
      margin-top: 1px;
      border: 2px solid rgba(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, .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, .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, .12)
}

.wiz-economy-premium .wiz-field-input__input::placeholder {
      font-size: 14px;
      font-weight: 450;
      color: rgba(15, 15, 24, .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, .22);
      background: rgba(99, 91, 255, .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: .65;
      transition: transform .18s ease
}

.wiz-economy-premium__details-body {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(15, 15, 24, .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, .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: -.015em;
      margin: 0 0 6px;
      color: #0f172a
}

.wiz-section-desc {
      font-size: 13px;
      color: #60657d;
      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, .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__body {
      padding: 48px 32px 120px !important
}

.wizard-title {
      font-size: 24px !important;
      font-weight: 660 !important;
      letter-spacing: -.03em !important;
      text-align: center !important;
      margin: 0 0 8px !important
}

#economyForm .radio {
      padding: 12px
}

#economyForm .radio strong {
      font-size: 15px
}

#economyForm .wizard-economy-sgi-box {
      padding: 12px;
      margin-bottom: 12px
}

#economyForm .field {
      font-size: 15px;
      padding: 10px 12px
}

#economyForm .details__body,
#economyForm .details__summary {
      font-size: 13px
}

#economyForm .details__body p {
      font-size: 13px;
      margin-bottom: 10px
}

#economyForm .check,
#economyForm .check span {
      font-size: 14px
}

.wizard-economy-sgi-box {
      margin-top: 16px;
      padding: 16px;
      background: var(--bg);
      border-radius: 12px
}

.wizard-economy-sgi-box p,
.wizard-title {
      color: var(--ink);
      font-family: "Inter Variable", "Inter", sans-serif
}

.wizard-economy-sgi-box p {
      font-size: 15px;
      line-height: 1.5
}

.wizard-title {
      line-height: 1.25
}

.wizard-subtitle {
      font-size: 17px;
      color: var(--muted);
      line-height: 1.6;
      max-width: 600px;
      margin: 0 auto
}

.locked {
      border: 1px solid rgba(255, 193, 7, .45);
      background: rgba(255, 193, 7, .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, .08);
      margin: 8px 0
}

.divider--spacious {
      margin: 24px 0
}

.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, .02)
}

.compare-header-label {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .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: .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 td,
.compare-table th {
      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: .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
}

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

.tooltip-container {
      position: relative;
      z-index: 1
}

.tooltip-container:focus-within,
.tooltip-container:hover {
      z-index: 60
}

.summary-card,
.tooltip {
      background: #fff;
      border-radius: 12px
}

.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);
      border: 1px solid var(--border);
      box-shadow: 0 4px 12px rgba(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 {
      padding: 24px;
      box-shadow: none;
      border: 1px solid rgba(0, 0, 0, .07);
      margin-bottom: 24px
}

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

#add-period-sheet-submit,
#btn-add-period {
      min-height: 44px;
      border-radius: 12px;
      padding: 0 16px;
      font-size: 14px;
      font-weight: 700
}

.periods-month {
      display: grid;
      gap: 12px;
      background: 0 0;
      border: 0;
      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, .6);
      margin-bottom: 0
}

.calendar-month__title {
      font-size: 15px;
      font-weight: 620;
      letter-spacing: -.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, .08);
      background: 0 0;
      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, .04)
}

.calendar-weekday {
      font-size: 13px;
      font-weight: 600;
      text-transform: none;
      color: #6b7280;
      text-align: center;
      letter-spacing: .01em;
      padding: 10px 0 6px;
      background: var(--cal-canvas);
      border-radius: 6px
}

.calendar-day {
      position: relative;
      aspect-ratio: 1.15;
      padding: 12px 6px 6px;
      border-radius: 6px;
      border: 0;
      background: #fff;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0;
      transition: all .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: 0;
      cursor: default;
      pointer-events: none;
      padding: 0
}

.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: .01em;
      z-index: 3;
      pointer-events: none;
      white-space: nowrap
}

.calendar-day__holiday-badge.is-red {
      color: #b42318;
      background: rgba(180, 35, 24, .11)
}

.calendar-day__holiday-badge.is-eve {
      color: #b45309;
      background: rgba(180, 83, 9, .12)
}

.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, .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, .22)
}

.calendar-day.day--block {
      z-index: 2
}

.calendar-day.day--block>* {
      position: relative;
      z-index: 2
}

.calendar-day.day--block>.calendar-day__conflict,
.calendar-day.day--block>.calendar-day__num {
      position: absolute
}

.calendar-day.day--block>.calendar-day__holiday-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 4
}

.calendar-day.day--block::after,
.calendar-day.day--block::before {
      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,
.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
}

.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--ab .calendar-day__num,
.calendar-day.day--b .calendar-day__num {
      color: #243235;
      font-weight: 600
}

.calendar-day.day--conflict {
      outline: 2px solid rgba(239, 68, 68, .26);
      outline-offset: -2px
}

.calendar-day.day--range {
      outline: 1px dashed rgba(15, 23, 42, .36);
      outline-offset: -1px
}

.calendar-day.day--ten {
      background: rgba(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
}

.calendar-day.day--flash {
      animation: dayFlash 1.1s ease both
}

.calendar-day.day--select-pulse {
      animation: daySelectPulse .16s ease-out both
}

.brush-bar__chips {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
      flex: 1;
      min-width: 0
}

.brush-chip,
.brush-chip--dropdown {
      border-radius: var(--radius-md, 7px);
      font-weight: 500;
      padding: 7px 10px;
      border: 1px solid var(--border-input, rgba(0, 0, 0, 0.1));
      font-size: 13px;
      transition: all var(--transition-fast, 0.12s ease)
}

.brush-chip {
      height: auto;
      width: 100px;
      background: #fff;
      color: var(--ink);
      cursor: pointer;
      white-space: nowrap
}

.brush-chip--dropdown {
      min-width: 72px;
      display: flex;
      align-items: center;
      gap: 2px;
      width: 100%;
      box-sizing: border-box;
      color: #374151;
      justify-content: space-between
}

.brush-chip--dropdown.open,
.brush-chip--dropdown:focus {
      border-color: var(--accent, #4553b3);
      box-shadow: 0 0 0 2px rgba(69, 83, 179, .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: 3px;
      transition: transform var(--transition-med, 0.15s ease)
}

.brush-chip--dropdown.open::after {
      transform: rotate(180deg)
}

.brush-chip:hover {
      background: rgba(0, 0, 0, .02)
}

.brush-chip:disabled {
      opacity: .45;
      cursor: not-allowed
}

.brush-chip--parent {
      border-width: 1px;
      background: rgba(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, .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
}

.day-menu,
.day-menu__item {
      border: 1px solid rgba(0, 0, 0, .08)
}

.day-menu {
      position: absolute;
      z-index: 80;
      width: 180px;
      padding: 8px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
      display: grid;
      gap: 6px
}

.day-menu__item {
      height: 36px;
      border-radius: 12px;
      background: rgba(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, .06)
}

.day-menu__item:disabled {
      opacity: .5;
      cursor: not-allowed
}

.day-menu__item--danger {
      background: rgba(220, 38, 38, .08);
      border-color: rgba(220, 38, 38, .18);
      color: #b91c1c
}

.day-menu__item--danger:hover:not(:disabled) {
      background: rgba(220, 38, 38, .12)
}

.plan-dates {
      margin-top: 22px
}

.plan-dates__title {
      font-family: "Inter Variable", "Inter", sans-serif;
      font-size: 11px;
      font-weight: 580;
      letter-spacing: .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, .07);
      border-radius: 10px;
      overflow: hidden
}

.grunddata-panel {
      width: 100%;
      max-width: 1040px
}

@media (min-width:981px) {
      .planner-page.planner-app.planner-page--logged-in #plannerCardGrunddata {
            background: 0 0;
            border: 0;
            box-shadow: none;
            border-radius: 0;
            padding: 0
      }
}

.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: -.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: #60657d;
      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, .09);
      border-radius: 14px;
      box-shadow: 0 1px 3px rgba(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, .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
}

#economyOverlay .economy-modal__close svg,
.grunddata-v2 .gdv2-card-head-icon svg {
      width: 15px;
      height: 15px
}

.grunddata-v2 .gdv2-card-head-icon--home {
      background: rgba(99, 91, 255, .07);
      color: #635bff
}

.grunddata-v2 .gdv2-card-head-icon--income {
      background: rgba(13, 155, 122, .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: 0 0;
      border: 1px solid rgba(0, 0, 0, .09);
      color: #60657d;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 120ms ease
}

.grunddata-v2 .gdv2-card-edit-btn svg,
.grunddata-v2 .gdv2-card-footer-btn svg {
      width: 13px;
      height: 13px
}

.grunddata-v2 .gdv2-card-edit-btn:hover {
      background: #f3f4f8;
      color: #0f0f18;
      border-color: rgba(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,
.grunddata-v2 .gdv2-income-row+.gdv2-income-row {
      border-top: 1px solid rgba(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-left {
      display: flex;
      align-items: center;
      gap: 10px
}

.grunddata-v2 .gdv2-income-dot {
      width: 28px;
      height: 28px;
      border-radius: 6px
}

.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: -.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: #60657d
}

.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, .06);
      background: #f3f4f7
}

.grunddata-v2 .gdv2-income-total-label {
      font-size: 12.5px;
      color: #60657d;
      font-weight: 500
}

.grunddata-v2 .gdv2-income-total-val {
      font-size: 15px;
      font-weight: 700;
      font-family: "JetBrains Mono", ui-monospace, monospace;
      letter-spacing: -.5px;
      color: #0f0f18
}

.grunddata-v2 .gdv2-income-total-val small {
      font-size: 11px;
      font-weight: 500;
      color: #60657d;
      letter-spacing: 0
}

.grunddata-v2 .gdv2-card-footer {
      padding: 12px 20px;
      border-top: 1px solid rgba(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: 0 0;
      border: 0;
      font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
      transition: opacity 120ms ease;
      padding: 0
}

.grunddata-v2 .gdv2-card-footer-btn:hover {
      opacity: .7
}

.grunddata-v2 .gdv2-section-label {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: #60657d;
      margin-bottom: 12px;
      margin-top: 28px
}

.grunddata-v2 .gdv2-activity-list {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .09);
      border-radius: 14px;
      box-shadow: 0 1px 3px rgba(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, .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-time {
      font-size: 11px;
      color: #60657d;
      font-family: "JetBrains Mono", ui-monospace, monospace;
      margin-top: 2px
}

.grunddata-v2 .gdv2-anim {
      animation: gdv2FadeUp .4s cubic-bezier(.16, 1, .3, 1) both
}

.grunddata-v2 .gdv2-d1 {
      animation-delay: .05s
}

.grunddata-v2 .gdv2-d3 {
      animation-delay: .15s
}

.summary-details-link {
      font-size: 15px;
      font-weight: 700;
      color: var(--yazio-green);
      text-decoration: none;
      background: 0 0;
      border: 0;
      padding: 0;
      cursor: pointer;
      transition: opacity .2s ease;
      font-family: inherit
}

.summary-details-link:hover {
      opacity: .8
}

.summary-stat-label {
      font-size: 14px;
      color: var(--muted);
      font-weight: 600
}

.summary-macro-header {
      display: flex;
      justify-content: space-between;
      align-items: center
}

.summary-macro-label {
      font-size: 14px;
      font-weight: 560;
      color: #0f172a
}

.summary-economy-section .summary-macro-label {
      font-size: 11px;
      font-weight: 580;
      letter-spacing: .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 .2s ease
}

.summary-tooltip-icon:hover {
      background: rgba(0, 200, 185, .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-card--parents {
      background: 0 0;
      border: 0;
      box-shadow: none;
      padding: 0
}

.section-page-header {
      margin-bottom: 40px
}

.section-page-subtitle,
.section-page-title {
      font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif
}

.section-page-title {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -.5px;
      margin: 0 0 4px;
      color: #0f172a
}

.section-page-subtitle {
      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, .08);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(248, 250, 252, .96) 100%)
}

.planner-guide__highlight h2 {
      margin: 0 0 8px;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -.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, .14);
      background: linear-gradient(135deg, rgba(37, 99, 235, .06), rgba(15, 23, 42, .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: 0 0;
      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, .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, .08);
      background: #fff
}

#plannerCardGuide.planner-guide .guide-section__title {
      margin: 0;
      font-size: 16px;
      line-height: 1.35;
      font-weight: 700;
      letter-spacing: -.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
      }
}

.parents-transfer-notice {
      margin-top: 12px;
      padding: 12px 14px;
      background: rgba(81, 97, 214, .04);
      border-radius: 8px;
      border: 1px solid rgba(81, 97, 214, .1);
      font-size: 13px;
      color: #475569;
      font-weight: 460;
      line-height: 1.5
}

.parents-transfer-notice strong {
      font-weight: 620
}

.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, .07);
      border-radius: 10px;
      padding: 20px 22px
}

.economy-summary-card__label {
      font-size: 12px;
      font-weight: 480;
      color: #60657d;
      margin-bottom: 4px;
      letter-spacing: .01em
}

.economy-summary-card__value {
      font-size: 32px;
      font-weight: 680;
      letter-spacing: -.035em;
      color: #0f172a;
      font-variant-numeric: tabular-nums;
      margin-bottom: 14px
}

.economy-summary-card__value--masked,
.summary-economy-period-total__value--masked {
      letter-spacing: .08em;
      font-weight: 620
}

.economy-mini-bar {
      display: flex;
      height: 6px;
      border-radius: 3px;
      overflow: hidden;
      background: rgba(0, 0, 0, .04);
      gap: 1px;
      margin-bottom: 8px
}

.economy-mini-bar__segment {
      height: 100%;
      transition: width .4s ease;
      min-width: 3px
}

.economy-mini-bar__segment--parent-a,
.economy-summary-parent--a .economy-summary-parent__dot {
      background: var(--parent-a-color)
}

.economy-mini-bar__segment--parent-b,
.economy-summary-parent--b .economy-summary-parent__dot {
      background: var(--parent-b-color)
}

.economy-summary-card__sublabel {
      font-size: 12px;
      color: rgba(15, 23, 42, .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__amount {
      margin-left: 2px;
      font-family: var(--mono, "JetBrains Mono", monospace);
      font-size: 11.5px;
      font-weight: 600;
      color: rgba(15, 23, 42, .62)
}

.economy-summary-parent__amount--masked {
      letter-spacing: .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 .3s ease
}

.economy-mini-chart__bar:hover {
      background: linear-gradient(180deg, #00c8b9 0, rgba(0, 200, 185, .7) 100%)
}

.economy-mini-chart__label {
      font-size: 10px;
      line-height: 1;
      font-family: var(--mono);
      font-weight: 500;
      color: rgba(15, 23, 42, .62);
      text-transform: capitalize
}

.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, .07);
      border-radius: 10px;
      overflow: visible;
      transition: box-shadow .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, .04)
}

.summary-economy-month:last-child {
      border-bottom: 1px solid rgba(0, 0, 0, .07)
}

.summary-economy-month-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 14px 20px;
      background: 0 0;
      border: 0;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      transition: background .12s ease
}

.summary-economy-month:nth-child(even) .summary-economy-month-header {
      background: 0 0;
      border-radius: 0
}

.summary-economy-month-header:hover {
      background: rgba(0, 0, 0, .015);
      border-radius: 0
}

.summary-economy-month-name {
      font-size: 14px;
      font-weight: 560;
      letter-spacing: -.01em;
      color: #0f172a;
      text-transform: capitalize
}

.summary-economy-month-amount {
      font-size: 15px;
      font-weight: 620;
      letter-spacing: -.02em;
      color: #0f172a;
      font-variant-numeric: tabular-nums
}

.summary-economy-chevron {
      transition: transform .2s ease;
      opacity: .5;
      width: 14px;
      height: 14px;
      color: #c0c7d1
}

.summary-economy-month-header:hover .summary-economy-chevron {
      opacity: .7
}

#economyOverlay .ekon-accordion-toggle.is-open svg,
.summary-economy-chevron.rotated {
      transform: rotate(180deg)
}

.summary-economy-month-details {
      padding: 0 20px 18px;
      border-top: 1px solid rgba(0, 0, 0, .05);
      margin: 0;
      background: 0 0
}

.summary-economy-parent {
      margin-bottom: 0;
      padding-top: 16px;
      background: 0 0;
      border-radius: 0;
      border: 0
}

.summary-economy-parent+.summary-economy-parent {
      border-top: 1px solid rgba(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: #60657d;
      letter-spacing: .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: -.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;
      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-amount {
      font-weight: 400;
      color: var(--ink)
}

.summary-economy-detail-amount--positive {
      color: var(--yazio-green)
}

.summary-economy-period-total {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(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: -.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, .05), 0 10px 26px rgba(15, 23, 42, .04);
            padding: 20px 22px;
            margin-bottom: 0
      }

      .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 .15s ease, background .15s ease, color .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: .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: #60657d;
            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: 0 0;
            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: .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: 0 0;
            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: 0 0
      }

      .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: .06em;
            color: #64748b;
            opacity: .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-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: -.012em
      }

      .planner-page.planner-app.planner-page--logged-in[data-planner-section=ekonomi] .planner-grid,
      .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=ekonomi] .planner-grid>section.planner-sheet,
      .planner-page.planner-app.planner-page--logged-in[data-planner-section=parents] .planner-grid>section.planner-sheet,
      .planner-page.planner-app[data-planner-section=planera] #planToolsRow #toolbar-compare,
      .planner-page.planner-app[data-planner-section=planera] #planToolsRow #toolbar-saved-plans {
            display: none
      }

      .planner-page.planner-app.planner-page--logged-in[data-planner-section=ekonomi] .planner-grid>aside.planner-aside,
      .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=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=parents] #mobile-overview-rest .summary-card--parents {
            background: 0 0;
            border: 0;
            box-shadow: none;
            border-radius: 0;
            padding: 0
      }

      .planner-page.planner-app[data-planner-section=planera] #plannerCardPlanera {
            background: 0 0;
            border: 0;
            box-shadow: none;
            border-radius: 0;
            padding-left: 12px;
            padding-right: 12px
      }

      .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: 0 0;
            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, .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: 0 0;
            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
      }

      .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, .06)
      }

      .planner-page.planner-app[data-planner-section=planera] .planera-toolbox-context {
            margin-top: 0;
            padding: 0;
            border: 0;
            background: 0 0;
            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, .6)
      }

      .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: 0 0
      }

      .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
      }
}

.mobile-sheet-bar {
      display: none
}

.mobile-sheet-body {
      display: contents
}

.mobile-segment-wrap,
.mobile-sheet-backdrop,
.mobile-tabs {
      display: none
}

@media (min-width:901px) {

      .menu-overlay,
      .top__hamburger {
            display: none !important
      }

      .add-period-sheet__bar,
      .add-period-sheet__footer {
            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, .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: 0 0;
            border: 0;
            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, .04)
      }

      .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(.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, .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-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: 0 0;
      transition: all .1s ease
}

.auth-menu-item:hover,
.auth-menu-item__icon {
      background: rgba(0, 0, 0, .04)
}

.auth-menu-item--danger:hover {
      background: rgba(239, 68, 68, .06)
}

.auth-menu-item__icon {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #64748b
}

.auth-menu-item__icon--danger {
      background: rgba(239, 68, 68, .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: #60657d;
      font-weight: 420;
      margin-top: 1px
}

.auth-dropdown {
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);
      padding: 0;
      overflow: hidden;
      animation: authDropdownFade .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, .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: #60657d;
      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 .12s ease
}

.auth-guest-login-btn:hover {
      opacity: .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, .06)0, rgba(59, 130, 246, .06) 100%);
      border: 1px solid rgba(139, 92, 246, .12);
      display: flex;
      align-items: center;
      gap: 10px;
      transition: all .12s ease
}

.auth-upgrade-banner:hover {
      border-color: rgba(139, 92, 246, .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, .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: #60657d;
      background: rgba(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
}

.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
}

.onboarding-back,
.onboarding-btn {
      all: unset;
      display: inline-flex;
      align-items: center;
      cursor: pointer
}

.onboarding-back {
      gap: 5px;
      font-size: 13px;
      font-weight: 520;
      color: #64748b;
      padding: 6px 10px;
      border-radius: 6px;
      transition: color .15s ease
}

.onboarding-back:hover {
      color: #0f172a
}

.onboarding-btn {
      box-sizing: border-box;
      justify-content: center;
      padding: 12px 40px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 9px;
      transition: opacity .15s ease;
      letter-spacing: -.01em
}

.onboarding-btn--dark {
      background: #0f172a;
      color: #fff
}

.onboarding-btn--dark:hover {
      opacity: .9
}

.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,
.entry-title {
      font-size: 26px;
      font-weight: 760;
      letter-spacing: -.03em;
      color: #0f172a
}

.entry-title {
      font-size: 30px;
      font-weight: 680;
      letter-spacing: -.035em;
      text-align: center;
      margin: 0 0 8px;
      line-height: 1.15
}

.entry-subtitle {
      font-size: 16px;
      color: #60657d;
      font-weight: 420;
      text-align: center;
      margin: 0 0 44px;
      max-width: 440px;
      line-height: 1.5
}

.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, .08);
      background: #fff;
      transition: all .15s ease;
      flex: 1;
      position: relative;
      text-align: left;
      box-sizing: border-box
}

.entry-card:hover {
      border-color: rgba(0, 0, 0, .15);
      background: rgba(0, 0, 0, .02)
}

.entry-card--primary {
      border: 2px solid var(--accent);
      background: rgba(81, 97, 214, .03)
}

.entry-card--primary:hover {
      border-color: var(--accent-text);
      background: rgba(81, 97, 214, .06)
}

.entry-card__badge {
      position: absolute;
      top: 14px;
      right: 14px;
      font-size: 10px;
      font-weight: 600;
      color: #22c55e;
      background: rgba(34, 197, 94, .08);
      padding: 2px 8px;
      border-radius: 5px;
      letter-spacing: .02em
}

.entry-card__icon {
      width: 44px;
      height: 44px;
      border-radius: 11px;
      background: rgba(0, 0, 0, .04);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px
}

.entry-card__icon--primary {
      background: rgba(81, 97, 214, .1)
}

.entry-card__title {
      font-size: 17px;
      font-weight: 620;
      color: #0f172a;
      letter-spacing: -.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 .15s ease
}

.entry-card:hover .entry-card__action svg {
      transform: translateX(2px)
}

.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
}

.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: -.03em;
      margin: 0 0 6px;
      color: #0f172a;
      width: 100%;
      max-width: 380px
}

.login-subtitle {
      font-size: 14px;
      color: #60657d;
      font-weight: 420;
      margin: 0 0 28px;
      width: 100%;
      max-width: 380px
}

.form-field,
.login-form {
      display: flex;
      flex-direction: column;
      width: 100%
}

.login-form {
      gap: 16px;
      max-width: 380px
}

.form-field {
      gap: 6px
}

.form-input,
.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;
      font-family: inherit;
      background: #fff;
      border: 1.5px solid rgba(0, 0, 0, .1);
      border-radius: 8px;
      transition: all .15s ease
}

.form-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(81, 97, 214, .1)
}

.form-input::placeholder {
      color: #60657d
}

.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 .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-topbar {
      display: flex;
      align-items: center;
      padding: 0 28px;
      height: 56px;
      border-bottom: 1px solid rgba(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: #60657d
}

.wizard-progress-time {
      font-size: 12px;
      font-weight: 420;
      color: #b0b8c4
}

.wizard-progress-track {
      height: 4px;
      background: rgba(0, 0, 0, .06);
      border-radius: 2px;
      overflow: hidden
}

.wizard-progress-bar {
      height: 100%;
      width: 14%;
      background: var(--accent);
      border-radius: 2px;
      transition: width .4s ease
}

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

.wizard-topbar__auth-hint {
      font-size: 13px;
      color: #60657d
}

.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, .07);
      padding: 16px 28px;
      display: flex;
      justify-content: center;
      background: #fff;
      flex-shrink: 0
}

.wizard-footer-new .onboarding-btn {
      width: auto
}

.visually-hidden {
      display: none !important
}

.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 .1s
}

.brush-dropdown-option:hover {
      background: rgba(0, 0, 0, .04)
}

.brush-dropdown-option.selected {
      color: var(--accent, #4553b3);
      background: rgba(69, 83, 179, .06)
}

.planner-page.planner-app[data-planner-section=planera] .planner-dashboard-main {
      padding-top: 50px
}

@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: 0 0
      }

      .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: 0 0;
            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: -.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: .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[data-planner-section=planera] .planner-grid {
            margin-top: 0
      }

      .planner-page.planner-app[data-planner-section=planera] #plannerCardPlanera.left-card {
            background: 0 0;
            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: 0 0;
            box-shadow: none
      }

      .planner-page.planner-app[data-planner-section=planera] #plannerTabs .planner-tabs__btn:hover {
            color: var(--planera-text-2);
            background: 0 0
      }

      .planner-page.planner-app[data-planner-section=planera] #plannerTabs .planner-tabs__btn.is-active,
      .planner-page.planner-app[data-planner-section=planera] #plannerTabs .planner-tabs__btn[aria-selected=true] {
            background: var(--planera-bg-1);
            color: var(--planera-text-1);
            box-shadow: 0 1px 3px rgba(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, .04), 0 1px 2px rgba(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: .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: .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: -.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(.16, 1, .3, 1)
      }

      .planner-page.planner-app[data-planner-section=planera] .planner-status-tip {
            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, .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
      }

      .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, .04), 0 1px 2px rgba(0, 0, 0, .02)
      }

      .planner-page.planner-app[data-planner-section=planera] #plannerTabPeriod .period-canvas {
            background: 0 0;
            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: -.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: .01em;
            margin-bottom: 6px;
            display: block
      }

      .planner-page.planner-app[data-planner-section=planera] #plannerTabPeriod #period-repeat,
      .planner-page.planner-app[data-planner-section=planera] #plannerTabPeriod .field.field--compact {
            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 #period-repeat:hover,
      .planner-page.planner-app[data-planner-section=planera] #plannerTabPeriod .field.field--compact:hover {
            border-color: var(--planera-border-3)
      }

      .planner-page.planner-app[data-planner-section=planera] #plannerTabPeriod #period-repeat:focus,
      .planner-page.planner-app[data-planner-section=planera] #plannerTabPeriod .field.field--compact:focus {
            outline: 0;
            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-day-type,
      .planner-page.planner-app[data-planner-section=planera] #plannerTabPeriod #period-level,
      .planner-page.planner-app[data-planner-section=planera] #plannerTabPeriod #period-parent,
      .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: 0;
            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: .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: .75
      }

      .planner-page.planner-app[data-planner-section=planera] #plannerTabPeriod .period-advanced__panel {
            background: 0 0;
            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, .3), 0 0 0 1px rgba(99, 91, 255, .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, .35), 0 0 0 1px rgba(99, 91, 255, .2)
      }

      .planner-page.planner-app[data-planner-section=planera] #planeraToolbox.planera-controls {
            border: 0;
            background: 0 0;
            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: 0 0;
            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, .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.open,
      .planner-page.planner-app[data-planner-section=planera] #brushBar .brush-chip--dropdown:focus {
            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: 0 0;
            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, .3), 0 0 0 1px rgba(99, 91, 255, .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, .35), 0 0 0 1px rgba(99, 91, 255, .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, .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] #planeraGuidance,
      .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] .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, .04), 0 1px 2px rgba(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: 0 0;
            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: -.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] .cal-grid,
      .planner-page.planner-app[data-planner-section=planera] .calendar-month__grid {
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
            gap: 0;
            padding: 0;
            background: 0 0
      }

      .planner-page.planner-app[data-planner-section=planera] .cal-dow,
      .planner-page.planner-app[data-planner-section=planera] .calendar-weekday {
            padding: 9px 0;
            text-align: center;
            font-size: 10.5px;
            font-weight: 650;
            text-transform: uppercase;
            letter-spacing: .07em;
            color: var(--planera-text-3);
            border-bottom: 1px solid var(--planera-border-1);
            border-radius: 0;
            background: 0 0
      }

      .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] .cal-grid>.calendar-day:nth-child(7n),
      .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: #f3f4f8
      }

      .planner-page.planner-app[data-planner-section=planera] .calendar-day--outside {
            background: var(--planera-bg-2);
            opacity: .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, .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--eve-day .calendar-day__num,
      .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--weekend .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: .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, .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, .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, .25)
      }

      .planner-page.planner-app[data-planner-section=planera] .calendar-day:hover .calendar-day__tag--b {
            background: rgba(13, 155, 122, .14);
            border-color: rgba(13, 155, 122, .25)
      }

      .planner-page.planner-app[data-planner-section=planera] .calendar-day.day--a,
      .planner-page.planner-app[data-planner-section=planera] .calendar-day.day--ab,
      .planner-page.planner-app[data-planner-section=planera] .calendar-day.day--b,
      .planner-page.planner-app[data-planner-section=planera] .calendar-day.day--selected {
            background: var(--planera-indigo-bg);
            box-shadow: inset 0 0 0 1.5px rgba(99, 91, 255, .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::after,
      .planner-page.planner-app[data-planner-section=planera] .calendar-day.day--block::before {
            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-left.day--cont-right,
      .planner-page.planner-app[data-planner-section=planera] .calendar-day.day--cont-right {
            border-radius: 0
      }

      .planner-page.planner-app[data-planner-section=planera] .calendar-day.day--conflict,
      .planner-page.planner-app[data-planner-section=planera] .calendar-day.day--range,
      .planner-page.planner-app[data-planner-section=planera] .calendar-day.day--today {
            outline: 0
      }

      .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__tooltip {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) scale(.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, .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, .04), 0 1px 2px rgba(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: .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: 0 0
      }

      .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(.16, 1, .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: 0 0;
            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(.16, 1, .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, .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: 0 0;
            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: 0;
            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: 0 0;
            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)
      }

      .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: 0 0;
            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: -.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: 0 0;
            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, .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: .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: .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(.16, 1, .3, 1)
      }

      .planner-page.planner-app.planner-page--logged-in[data-planner-section=ekonomi] #summary-economy-anchor .economy-mini-bar__segment--parent-a,
      .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-mini-bar__segment--parent-b,
      .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-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__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: .92;
            transition: height 800ms cubic-bezier(.16, 1, .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 .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: 0 0;
            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, .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: 0 0;
            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: 0 0
      }

      .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: -.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: -.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(.16, 1, .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: 0 0
      }

      .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: -.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,
      .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, .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: .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: .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: .55;
            flex: 0 0 auto
      }

      .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav {
            background: #fff;
            border-right: 1px solid rgba(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, .06)
      }

      .planner-page.planner-app.planner-page--logged-in .planner-nav-plan-switcher__btn {
            background: 0 0;
            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: -.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: .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: .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, .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, .1);
            color: #d97706
      }

      .planner-page.planner-app.planner-page--logged-in .planner-dashboard-nav__divider {
            margin: 8px 10px;
            background: rgba(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 0 8px;
            border-top: 1px solid rgba(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
      }
}

#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, .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, .09);
      border-radius: 14px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, .12), 0 0 0 1px rgba(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, .06);
      flex-shrink: 0
}

#economyOverlay .economy-modal__title {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -.3px;
      color: #0f0f18
}

#economyOverlay .economy-modal__close {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      background: 0 0;
      border: 1px solid rgba(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, .14);
      color: #0f0f18
}

#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, .12);
      border-radius: 3px
}

#economyOverlay .economy-modal__footer {
      padding: 16px 24px;
      border-top: 1px solid rgba(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: 0;
      color: #fff;
      background: #635bff;
      box-shadow: 0 1px 3px rgba(99, 91, 255, .3);
      transition: all 150ms ease
}

#economyOverlay .economy-save-btn:hover {
      background: #4f46e5;
      box-shadow: 0 2px 8px rgba(99, 91, 255, .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: -.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, .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, .14)
}

#economyOverlay .radio-card.selected {
      border-color: #635bff;
      background: rgba(99, 91, 255, .07);
      box-shadow: 0 0 0 3px rgba(99, 91, 255, .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, .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: #60657d;
      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, .07);
      border: 1px solid rgba(99, 91, 255, .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: #60657d;
      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, .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, .14)
}

#economyOverlay .ekon-input:focus {
      outline: 0;
      border-color: #635bff;
      box-shadow: 0 0 0 3px rgba(99, 91, 255, .07)
}

#economyOverlay .ekon-input::placeholder {
      font-size: 14px;
      font-weight: 450;
      color: rgba(15, 15, 24, .35);
      letter-spacing: 0;
      opacity: 1
}

#economyOverlay .ekon-field-hint {
      font-size: 11px;
      color: #60657d;
      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: -.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: 0 0;
      font-size: 12.5px;
      font-weight: 600;
      color: #5c5c72;
      text-align: left
}

#economyOverlay .ekon-accordion-toggle svg {
      width: 14px;
      height: 14px;
      color: #60657d;
      transition: transform 200ms ease
}

#economyOverlay .ekon-accordion-panel {
      margin-top: 8px
}

#economyOverlay .ekon-accordion-panel.hidden {
      display: none
}

#react-home-root .home-v2 {
      font-family: var(--font);
      color: #0f0f18;
      padding: 0 100px 48px 20px
}

#react-home-root .home-v2-greeting {
      margin-bottom: 24px
}

#mobile-overview-rest .summary-card--parents .page-header h2,
#react-home-root .home-v2-greeting h2 {
      margin: 0 0 4px;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -.5px
}

#react-home-root .home-v2-greeting p {
      margin: 0;
      font-size: 14px;
      color: #60657d;
      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-card,
#react-home-root .home-v2-hero-main,
#react-home-root .home-v2-hero-metrics {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .09);
      border-radius: 14px;
      box-shadow: 0 1px 3px rgba(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: .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: #60657d
}

#react-home-root .home-v2-hero-copy h3 {
      margin: 6px 0 3px;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -.3px
}

#react-home-root .home-v2-hero-copy p {
      margin: 0;
      font-size: 13.5px;
      color: #60657d
}

#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(.16, 1, .3, 1)
}

#react-home-root .home-v2-progress-label {
      text-align: right;
      font-size: 11.5px;
      color: #60657d;
      font-family: var(--mono);
      font-weight: 500
}

#react-home-root .home-v2-next-step {
      background: rgba(99, 91, 255, .07);
      border: 1px solid rgba(99, 91, 255, .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: .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, .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, .09);
      background: #fff;
      color: #5c5c72
}

#react-home-root .home-v2-btn-ghost:hover {
      border-color: rgba(0, 0, 0, .14);
      background: #f3f4f8;
      color: #0f0f18
}

#react-home-root .home-v2-hero-metrics {
      padding: 20px
}

#react-home-root .home-v2-econ-stats label,
#react-home-root .home-v2-hero-metrics-title {
      margin-bottom: 14px;
      font-size: 10.5px;
      font-weight: 700;
      color: #60657d;
      text-transform: uppercase;
      letter-spacing: .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, .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-dist-row strong small,
#react-home-root .home-v2-metric-row strong small {
      color: #60657d;
      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-bottom-grid,
#react-home-root .home-v2-mid-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
}

#mobile-overview-rest .summary-card--parents .tc-header h3,
#react-home-root .home-v2-card-head h3,
#react-home-root .home-v2-section-title h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -.3px
}

#react-home-root .home-v2-card-head button {
      border: 0;
      background: 0 0;
      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 .8s cubic-bezier(.16, 1, .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-extra {
      margin-top: 4px;
      padding-top: 10px;
      border-top: 1px solid rgba(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: #60657d
}

#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;
      letter-spacing: .4px;
      font-weight: 600
}

#react-home-root .home-v2-econ-stats strong {
      font-size: 22px;
      font-weight: 700;
      font-family: var(--mono);
      letter-spacing: -.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 .8s cubic-bezier(.16, 1, .3, 1)
}

#react-home-root .home-v2-econ-bar.is-mid {
      opacity: .72
}

#react-home-root .home-v2-econ-bar.is-last {
      opacity: .28
}

#react-home-root .home-v2-econ-bar-wrap span {
      font-size: 10px;
      color: #60657d;
      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
}

#react-home-root .home-v2-section-title p {
      margin: 0;
      font-size: 13px;
      color: #60657d
}

#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, .09);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(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, .14);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(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, .07);
      color: #635bff
}

#react-home-root .home-v2-action-icon.is-planera {
      background: rgba(13, 155, 122, .07);
      color: #0d9b7a
}

#react-home-root .home-v2-action-icon.is-transfer {
      background: rgba(217, 119, 6, .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: #60657d;
      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, .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: 0 0;
      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, .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: #60657d
}

#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, .06)
}

#react-home-root .home-v2-basic-row span {
      font-size: 12.5px;
      color: #60657d
}

#react-home-root .home-v2-basic-row strong {
      font-size: 12.5px;
      color: #0f0f18;
      font-weight: 600
}

#react-home-root .home-v2-basic-cta,
.card p+p {
      margin-top: 10px
}

#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 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, .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: .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(.16, 1, .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, .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-daniel,
#mobile-overview-rest .summary-card--parents .pc-ring .fill-elin {
      stroke: var(--indigo);
      stroke-linecap: round;
      transition: stroke-dashoffset 1s cubic-bezier(.16, 1, .3, 1)
}

#mobile-overview-rest .summary-card--parents .pc-ring .fill-daniel {
      stroke: var(--teal)
}

#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: -.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: .5px
}

#mobile-overview-rest .summary-card--parents .pc-progress-area {
      flex: 1;
      min-width: 0
}

#mobile-overview-rest .summary-card--parents .pc-progress-label,
#mobile-overview-rest .summary-card--parents .pc-stat-row {
      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-stat-label {
      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-stat-val {
      font-size: 12px;
      font-family: var(--mono);
      font-weight: 600;
      color: var(--text-2)
}

#mobile-overview-rest .summary-card--parents .pc-stat-val small {
      font-size: 12px;
      font-weight: 400;
      color: var(--text-3)
}

#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(.16, 1, .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,
#mobile-overview-rest .summary-card--parents .pc-chips {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
}

#mobile-overview-rest .summary-card--parents .pc-type,
#mobile-overview-rest .summary-card--parents .pc-chip {
      padding: 3px 7px;
      border-radius: var(--radius-s);
      background: var(--bg-3);
      border: 1px solid var(--border-1)
}

#mobile-overview-rest .summary-card--parents .pc-type-label,
#mobile-overview-rest .summary-card--parents .pc-chip-label {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-bottom: 4px
}

#mobile-overview-rest .summary-card--parents .pc-type-dot,
#mobile-overview-rest .summary-card--parents .pc-chip-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%
}

#mobile-overview-rest .summary-card--parents .pc-type-dot.indigo,
#mobile-overview-rest .summary-card--parents .pc-chip-dot.sgi {
      background: var(--indigo)
}

#mobile-overview-rest .summary-card--parents .pc-type-dot.teal-d,
#mobile-overview-rest .summary-card--parents .pc-chip-dot.lag {
      background: var(--teal)
}

#mobile-overview-rest .summary-card--parents .pc-type-val,
#mobile-overview-rest .summary-card--parents .pc-chip-val {
      font-size: 16px;
      font-weight: 700;
      font-family: var(--mono);
      letter-spacing: -.5px
}

#mobile-overview-rest .summary-card--parents .pc-type-val .of,
#mobile-overview-rest .summary-card--parents .pc-chip-val .of,
#mobile-overview-rest .summary-card--parents .pc-chip-val small {
      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, .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-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: .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 .anim {
      animation: parentsFadeUp .4s cubic-bezier(.16, 1, .3, 1) both
}

#mobile-overview-rest .summary-card--parents .d1 {
      animation-delay: .05s
}

#mobile-overview-rest .summary-card--parents .d2 {
      animation-delay: .1s
}

#mobile-overview-rest .summary-card--parents .d3 {
      animation-delay: .15s
}

#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: #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: #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: -.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-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, .04);
      transition: box-shadow 150ms ease
}

#plannerCardWarnings.warnings-v2 .insight-card:hover {
      box-shadow: 0 4px 12px rgba(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-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-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: .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(.16, 1, .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(.16, 1, .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, .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: .3
}

#plannerCardWarnings.warnings-v2 .empty-state p {
      font-size: 14px
}

#plannerCardWarnings.warnings-v2 .anim {
      animation: warningsFadeUp .4s cubic-bezier(.16, 1, .3, 1) both
}

#plannerCardWarnings.warnings-v2 .d1 {
      animation-delay: .05s
}

#plannerCardWarnings.warnings-v2 .d2 {
      animation-delay: .1s
}

#plannerCardWarnings.warnings-v2 .d3 {
      animation-delay: .15s
}

#plannerCardWarnings.warnings-v2 .d4 {
      animation-delay: .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=ekonomi] #summary-economy-anchor,
      .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=help] #plannerCardHelp,
      .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=planera] #plannerCardPlanera.left-card,
      .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] #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
      }
}

.planner-page.planner-app.planner-page--logged-in[data-planner-section=help] #plannerCardHelp {
      max-width: 100%
}

#plannerCardHelp.plan-settings {
      background: 0 0;
      border: 0;
      padding: 0;
      font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif
}

#plannerCardHelp .plan-settings__title {
      margin: 0 0 6px;
      font-size: clamp(26px, 3.2vw, 34px);
      line-height: 1.12;
      font-weight: 800;
      letter-spacing: -.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, .2);
      background: rgba(217, 119, 6, .08);
      color: #b45309;
      font-size: 12.5px;
      font-weight: 650;
      letter-spacing: .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, .15);
      color: #b45309
}

#plannerCardHelp .plan-settings__status--ok {
      border-color: rgba(22, 163, 74, .18);
      background: rgba(22, 163, 74, .08);
      color: #15803d
}

#plannerCardHelp .plan-settings__status--ok::before {
      content: "✓";
      background: rgba(22, 163, 74, .14);
      color: #15803d
}

#regler-details-body {
      width: 100%
}

#regler-details-body .help-wizard-overview {
      align-items: start
}

#regler-details-body .help-wizard-overview,
#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, .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, .12);
      box-shadow: 0 4px 16px rgba(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, .24);
      box-shadow: 0 8px 22px rgba(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, .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, .1);
      color: #4f46e5;
      border-color: rgba(99, 91, 255, .22)
}

#regler-details-body .help-wizard-card__edit {
      border: 1px solid rgba(99, 91, 255, .24);
      background: rgba(99, 91, 255, .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, .36);
      background: rgba(99, 91, 255, .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__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__sub {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -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(.16, 1, .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, .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: .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, .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: 0;
      border-color: #635bff;
      box-shadow: 0 0 0 3px rgba(99, 91, 255, .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, .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, .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, .06)
}

#regler-details-body .help-wizard-edit__option:has(input:checked)>span {
      color: #0f0f18;
      font-weight: 700
}

#regler-details-body .help-edit-parent-block {
      display: grid;
      gap: 8px;
      padding: 12px;
      border-radius: 10px;
      border: 1px solid rgba(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, .2);
      background: rgba(99, 91, 255, .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: 0;
      background: 0 0;
      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, .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;
      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__cancel,
#regler-details-body .help-wizard-edit__save {
      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: 0;
      background: #0f0f18;
      color: #fff
}

#regler-details-body .help-wizard-edit__save:hover {
      opacity: .86
}

#regler-details-body .help-wizard-edit__cancel {
      border: 1px solid rgba(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, .18);
      background: rgba(79, 70, 229, .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, .07);
      background: linear-gradient(180deg, #fff 0%, #fcfcff 100%)
}

#regler-details-body #help-step-2 .help-wizard-edit__field>span {
      color: #74778f;
      letter-spacing: .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, .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, .24);
      background: linear-gradient(180deg, rgba(99, 91, 255, .08) 0%, rgba(99, 91, 255, .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, .16);
      background: rgba(79, 70, 229, .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
      }
}

.compare td,
.compare th,
nav {
      border-bottom: 1px solid var(--border)
}

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, .8);
      backdrop-filter: blur(16px) saturate(180%)
}

.page-header h1 {
      font-size: clamp(28px, 4vw, 38px);
      font-weight: 800;
      letter-spacing: -1.2px;
      line-height: 1.1;
      margin-bottom: 10px
}

footer {
      border-top: 1px solid var(--border);
      padding: 48px 40px 32px
}

.compare-wrap,
.plans,
footer {
      max-width: 1080px;
      margin: 0 auto
}

.plans {
      padding: 18px 40px 14px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px
}

.compare-wrap {
      padding: 12px 40px 64px
}

.compare {
      width: 100%;
      border-collapse: collapse;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden
}

.compare td,
.compare th {
      text-align: left;
      padding: 12px 14px
}

.compare th {
      background: var(--bg-2);
      font-size: 13px;
      color: var(--text-2);
      font-weight: 700
}

.compare td {
      font-size: 14px
}

.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)
}

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: 0;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(99, 91, 255, .12)
}

.step-card {
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px 18px 18px 70px;
      position: relative
}

.step-card h2 {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -.3px;
      margin-bottom: 6px
}

.page-header p,
.step-card p {
      font-size: 14.5px;
      color: var(--text-2);
      line-height: 1.6
}

.page-header p {
      font-size: 15.5px;
      max-width: 58ch
}

:root {
      --surface: #fff;
      --accent-light: #4f46e5;
      --accent-bg2: rgba(99, 91, 255, 0.1)
}

.preview,
.stats {
      max-width: 1080px;
      margin: 40px auto 0;
      padding: 0 40px
}

.stats {
      margin: 0 auto;
      padding: 72px 40px 32px;
      display: flex;
      justify-content: center;
      gap: 48px
}

.st {
      text-align: center
}

:root {
      --mono: "JetBrains Mono", monospace;
      --bg-3: #eeeef0;
      --font: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
      --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
}

.logo {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -.5px;
      color: var(--text-1);
      text-decoration: none
}

.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
}

.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: -.3px;
      margin-bottom: 8px
}

.card p {
      font-size: 14.5px;
      line-height: 1.65;
      color: var(--text-2)
}

.sidebar {
      position: sticky;
      top: 76px;
      display: flex;
      flex-direction: column;
      gap: 16px
}

.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: .8
      }
}

.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, .03), 0 6px 24px rgba(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: -.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: .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, .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--a,
.planner-page.planner-app[data-planner-section=planera] .calendar-day.day--ab,
.planner-page.planner-app[data-planner-section=planera] .calendar-day.day--b,
.planner-page.planner-app[data-planner-section=planera] .calendar-day.day--selected {
      box-shadow: none
}

.planner-page.planner-app[data-planner-section=planera] .calendar-day.day--a {
      background: rgba(99, 91, 255, .02)
}

.planner-page.planner-app[data-planner-section=planera] .calendar-day.day--b {
      background: rgba(13, 155, 122, .03)
}

.planner-page.planner-app[data-planner-section=planera] .calendar-day.day--ab {
      background: rgba(99, 91, 255, .03)
}

.planner-page.planner-app[data-planner-section=planera] .calendar-day.day--block::after,
.planner-page.planner-app[data-planner-section=planera] .calendar-day.day--block::before {
      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
      }
}