*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent
    }

    button {
      cursor: pointer;
      border: none;
      background: none;
      font-family: inherit
    }

    :root {
      --orange: #FEF8E8;
      --orange-d: #E8E0CC;
      --orange-light: #FEF8E8;
      --orange-lt: rgba(254, 248, 232, .18);
      --orange-glow: rgba(254, 248, 232, .35);

      --blue-focus-lt: #5C89F9;
      --blue-focus-60: #5C89F9;
      --blue-focus-30: #5C89F9;
      --purple-12: rgba(50, 48, 100, .12);
      --purple-06: rgba(50, 48, 100, .06);
      --lav: #D3E4FB;
      --lav-bg: #D3E4FB;
      --lav-lt: rgba(211, 228, 251, .22);
      --cream: #FEF8E8;
      --cream-2: #E8F0DC;
      --seashell: rgba(254, 248, 232, .18);
      --cap: 'Capriola', system-ui, sans-serif;

      --fs-xs: 12px;
      --fs-sm: 16px;
      --fs-md: 24px;
      --fs-lg: 32px;
      --r: 18px;
      --r-sm: 10px;
      --r-lg: 26px;
      --r-xl: 40px;
      --sh: 0 4px 20px rgba(50, 48, 100, .08);
      --sh-md: 0 8px 30px rgba(50, 48, 100, .13);
      --col-insight: rgba(255, 189, 48, .25);
      --col-situation: rgba(211, 228, 251, .9);
      --insight-dot: #E77302;
      --situation-dot: #69ACCC;

      /* New welcome palette */
      --yellow: #FFDC64;
      --yellow-drk: #FFCE66;




      --welcome-bg: linear-gradient(180deg, #FEF8E8 0%, #D3E4FB 33.78%, #FFDC64 62.59%, #FFEAA6 100%);
      --purple: #323064;
      --blue-focus: #5C89F9;
      --welcome-amber: #FFBD30;
      --blue-lt: #A0BBFF;

      --col-activity: #D3E4FB;
    }

    html,
    body {
      height: 100%
    }

    html {
      overscroll-behavior: none
    }

    body {
      font-family: var(--cap);
      background: #D3E4FB;
      color: var(--purple);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      overflow: hidden;
      overscroll-behavior: none;
      padding: 0
    }

    /* App always fills the screen — no explicit height, inset:0 tracks visual viewport on all iOS */
    #app {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      background: var(--blue);
      display: flex;
      flex-direction: column
    }

    /* Mobile: safe-area insets */
    @media (max-width:430px) {
      .status {
        height: env(safe-area-inset-top, 0px);
        min-height: 12px
      }

      .bottom-nav {
        padding-bottom: max(28px, env(safe-area-inset-bottom, 28px))
      }
    }

    .screen {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transform: translateX(26px);
      transition: opacity .26s cubic-bezier(.4, 0, .2, 1), transform .26s cubic-bezier(.4, 0, .2, 1);
      will-change: opacity, transform
    }

    .screen.active {
      opacity: 1;
      pointer-events: all;
      transform: translateX(0)
    }

    .screen.exit {
      opacity: 0;
      transform: translateX(-26px);
      transition-duration: .20s
    }

    .screen.slide-up {
      transform: translateY(26px)
    }

    .screen.slide-up.active {
      transform: translateY(0)
    }

    .screen.slide-up.exit {
      transform: translateY(-16px)
    }

    .scroll-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding-bottom: 96px
    }

    ::-webkit-scrollbar {
      width: 2px
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(211, 228, 251, .2);
      border-radius: 2px
    }

    .status {
      height: 30px;
      flex-shrink: 0
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 26px 30px;
      flex-shrink: 0;
      position: relative;
      z-index: 5;
    }

    /* Gradient blur that fades in on scroll: strong at top edge, transparent at bottom */
    .topbar::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: -28px;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      mask-image: linear-gradient(to bottom, var(--cream) 40%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, var(--cream) 40%, transparent 100%);
      pointer-events: none;
      z-index: -1;
    }

    .brand {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--lav)
    }

    .back-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 16px;
      color: var(--purple);
      opacity: .55;
      transition: opacity .15s;
      padding: 4px 0
    }

    .back-btn:hover {
      opacity: 1
    }

    .profile-circle {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(211, 228, 251, .25);
      color: var(--lav);
      font-family: var(--cap);
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: box-shadow .18s;
      flex-shrink: 0
    }

    .profile-circle:hover {
      box-shadow: 0 0 0 2px var(--lav)
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 15px 28px;
      border-radius: var(--r-xl);
      font-family: var(--cap);
      font-size: 16px;
      transition: transform .12s, box-shadow .12s, background .15s, opacity .15s;
      text-decoration: none;
      white-space: nowrap;
      border: none
    }

    .btn:active {
      transform: scale(.96)
    }

    .btn-primary {
      background: var(--cream);
      color: var(--blue-focus);
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25)
    }

    .btn-primary:hover {
      background: #f0ead8
    }

    .btn-outlined {
      background: transparent;
      color: var(--cream);
      border: 1.5px solid rgba(254, 248, 232, .5)
    }

    .btn-outlined:hover {
      background: rgba(254, 248, 232, .08)
    }

    .btn-ghost {
      background: transparent;
      color: var(--lav);
      opacity: .7
    }

    .btn-ghost:hover {
      opacity: .75
    }

    .btn-full {
      width: 100%
    }

    .btn-sm {
      padding: 9px 18px;
      font-size: 12px
    }

    .btn-lg {
      padding: 18px 34px;
      font-size: 16px
    }

    .btn-disabled {
      opacity: .38;
      pointer-events: none
    }

    .progress-dots {
      display: flex;
      gap: 7px;
      align-items: center
    }

    .pdot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(254, 248, 232, .3);
      transition: background .3s, width .3s
    }

    .pdot.active {
      background: var(--cream);
      width: 20px;
      border-radius: 4px
    }

    .pdot.done {
      background: var(--cream);
      opacity: .5
    }

    .ta {
      width: 100%;
      background: var(--lav);
      border: none;
      border-radius: var(--r);
      padding: 16px 18px;
      font-family: var(--cap);
      font-size: 16px;
      color: #323064;
      line-height: 1.65;
      resize: none;
      outline: none;
      transition: box-shadow .18s
    }

    .ta:focus {
      box-shadow: 0 0 0 3px rgba(100, 100, 200, .2)
    }

    .ta::placeholder {
      color: rgba(80, 80, 140, .5);
      font-style: italic
    }

    /* Let textareas in step screens fill available vertical space */
    .step-body .ta {
      flex: 1;
      min-height: 120px
    }

    .bottom-nav {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 40px 40px max(40px, env(safe-area-inset-bottom, 20px));
      background: transparent;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 50;
    }

    .bottom-nav-blur {
      position: absolute;
      inset: 0;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      mask-image: linear-gradient(to bottom, transparent 0%, var(--cream) 40%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--cream) 40%);
      pointer-events: none;
    }

    .nav-pill {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: var(--lav);
      border-radius: 50px;
      box-shadow: 0 4px 4px rgba(50, 48, 100, 0.15);
    }

    .nav-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: 76px;
      height: 76px;
      color: var(--purple);
      opacity: .35;
      transition: opacity .2s;
      font-size: 12px;
      font-family: var(--cap);
      font-weight: 600;
      flex-shrink: 0;
    }

    .nav-tab:hover {
      opacity: .6
    }

    .nav-tab.active {
      opacity: 1;
      color: var(--purple);
      background: var(--cream);
      box-shadow: 0 4.67px 2.34px rgba(0, 0, 0, .25);
      border-radius: 50%;
    }

    .nav-tab svg,
    .nav-tab img {
      width: 28px;
      height: 28px;
      flex-shrink: 0
    }

    /* Active tab: no label, just icon */
    .nav-tab.active .nav-label {
      display: none
    }

    /* Inactive tabs always show label */
    .nav-tab .nav-label {
      display: block
    }


    /* ════ ONBOARDING + EXPLAINER ════ */
    #s-onboarding {
      background: var(--blue-focus)
    }

    #s-explainer {
      background: var(--yellow);
    }

    .expl-track {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      transition: transform .42s cubic-bezier(.4, 0, .2, 1);
      will-change: transform
    }

    .expl-slide {
      width: 100%;
      flex-shrink: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      position: relative
    }

    .expl-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 44px 0 36px;
      overflow: hidden
    }

    .expl-icon {
      flex-shrink: 0;
      margin-bottom: 28px;
      color: var(--blue-focus);
      position: relative;
    }

    .expl-icon::before {
      content: '';
      position: absolute;
      top: 40px;
      left: 80px;
      width: 150px;
      height: 150px;
      background: white;
      border-radius: 100% 100% 100% 0;
      filter: blur(30px);
      z-index: 0;
      pointer-events: none;
    }

    .expl-icon>svg {
      position: relative;
      z-index: 1;
      width: 100%;
      height: auto;
      max-height: 190px;
      display: block;
    }

    .expl-eyebrow {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--blue-focus);
      opacity: 1;
      font-family: var(--cap);
      margin-bottom: 12px;
      flex-shrink: 0;
      min-height: 16px
    }

    .expl-title {
      font-family: var(--cap);
      font-size: 32px;
      line-height: 1.2;
      color: var(--blue-focus);
      margin-bottom: 18px;
      flex-shrink: 0
    }

    .expl-body {
      font-family: var(--cap);
      font-size: 16px;
      line-height: 1.6;
      color: var(--blue-focus);
      opacity: 1;
      flex-shrink: 0
    }

    .expl-footer {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 44px;
      gap: 8px
    }

    .expl-step-label {
      font-family: var(--cap);
      font-size: 24px;
      color: var(--blue-focus);
      opacity: .65
    }

    .expl-arrow {
      color: var(--blue-focus);
      opacity: .55;
      animation: expl-bounce .9s ease-in-out infinite alternate
    }

    @keyframes expl-bounce {
      from {
        transform: translateY(0)
      }

      to {
        transform: translateY(6px)
      }
    }

    .expl-final {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 36px;
      gap: 26px
    }

    .expl-final-title {
      font-family: var(--cap);
      font-size: 24px;
      color: var(--blue-focus);
      text-align: center
    }

    .expl-logo {
      font-family: var(--cap);
      font-size: 64px;
      color: var(--blue-focus);
      text-align: center
    }

    .expl-new-session {
      background: var(--cream);
      border: none;
      border-radius: 40px;
      padding: 16px 32px;
      font-family: var(--cap);
      font-size: 16px;
      color: var(--blue-focus);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 4px 4px rgba(0, 0, 0, .15)
    }

    .expl-back {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--cap);
      font-size: 16px;
      color: var(--blue-focus);
      opacity: .7;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0
    }

    .expl-back-btn {
      position: absolute;
      top: 30px;
      left: 36px;
      z-index: 20;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--lav);
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      padding: 0 24px;
    }


    .expl-dots-bar {
      position: absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      pointer-events: none;
      z-index: 5;
      color: var(--blue-focus)
    }

    /* Onboarding overrides — lavender text on dark green */
    #s-onboarding .expl-icon {
      color: #D3E4FB;
    }

    #onboard-track>.expl-slide:first-child .expl-icon::before {
      display: none;
    }

    #s-onboarding .expl-eyebrow {
      color: #D3E4FB;
      opacity: .75
    }

    #s-onboarding .expl-title {
      color: #D3E4FB
    }

    #s-onboarding .expl-body {
      color: #D3E4FB;
      opacity: .8
    }

    #s-onboarding .expl-step-label {
      color: #D3E4FB;
      opacity: .8
    }

    #s-onboarding .expl-arrow {
      color: #D3E4FB;
      opacity: .65
    }

    #s-onboarding .expl-final-title {
      color: #D3E4FB
    }

    #s-onboarding .expl-back {
      color: #D3E4FB;
      opacity: .85
    }

    #toast {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%) translateY(12px);
      background: var(--purple);
      color: #fff;
      padding: 12px 22px;
      border-radius: var(--r);
      font-size: 12px;
      font-family: var(--cap);
      opacity: 0;
      transition: opacity .25s, transform .25s;
      pointer-events: none;
      white-space: nowrap;
      z-index: 200;
      box-shadow: var(--sh-md)
    }

    #toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0)
    }

    /* HOME CARD TOGGLE — segment control in account */
    .home-card-toggle {
      display: flex;
      background: rgba(211, 228, 251, .1);
      border-radius: 12px;
      padding: 3px;
      gap: 2px
    }

    .hct-btn {
      flex: 1;
      padding: 8px 10px;
      border-radius: 9px;
      font-family: var(--cap);
      font-size: 12px;
      color: var(--lav);
      opacity: .5;
      transition: background .18s, opacity .18s;
      text-align: center;
      cursor: pointer;
      border: none;
      background: none
    }

    .hct-btn.active {
      background: rgba(211, 228, 251, .18);
      opacity: 1
    }


    /* WELCOME TOPBAR DATE */
    .welcome-topbar-date {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      font-weight: 400;
      position: absolute;
      left: 50%;
      transform: translateX(-50%)
    }

    /* ACTIVITY CARD — welcome screen blue card */
    .w-act-card-wrap {
      background: #d3e4fb;
      border-radius: 24px;
      overflow: hidden;
      margin-bottom: 20px;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
    }

    .w-act-card {
      background: #5c89f9;
      border-radius: 24px;
      padding: 24px 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 16px;
      cursor: pointer;
      transition: transform .2s;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }

    .w-act-card::before {
      content: '';
      position: absolute;
      top: 40px;
      left: 16px;
      width: 100px;
      height: 100px;
      background: #d3e4fb;
      border-radius: 100% 100% 100% 0;
      filter: blur(40px);
      z-index: 0;
      pointer-events: none;
    }

    .w-act-card:active {
      transform: scale(.98)
    }

    .w-act-svg {
      flex-shrink: 0;
      width: 80px;
      height: 91px;
      position: relative;
      z-index: 1;
    }

    .w-act-text {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      z-index: 1;
    }

    .w-act-title {
      font-family: var(--cap);
      font-size: 32px;
      line-height: 1.1;
      color: #fef8e8;
      margin-bottom: 8px;
      font-weight: 500
    }

    .w-act-tag {
      font-family: var(--cap);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: #fef8e8;
    }

    .w-act-feedback-row {
      padding: 20px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
    }

    .w-act-feedback-row:active {
      opacity: .7;
    }

    /* NEW SESSION CARD */
    .w-new-session-card {
      background: var(--lav);
      border-radius: 24px;
      overflow: hidden;
      cursor: pointer;
      transition: transform .2s;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 20px;
      box-shadow: 0 4px 16px rgba(50, 48, 100, .13);
    }

    .w-new-session-card:active {
      transform: scale(.985)
    }

    .w-new-session-card-header {
      background: var(--cream);
      border-radius: 24px;
      padding: 28px 28px 32px;
    }

    .w-new-session-card-title {
      font-family: var(--cap);
      font-size: 44px;
      line-height: 1.0;
      color: var(--purple);
      margin-bottom: 10px;
      font-weight: 500
    }

    .w-new-session-card-sub {
      font-family: var(--cap);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--purple);
      font-weight: 600;
      opacity: .8
    }

    .w-new-session-card-footer {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 14px 20px 16px;
    }

    .w-new-session-card-coach-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .w-new-session-card-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(50, 48, 100, .12);
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--cap);
      font-size: 15px;
      font-weight: 500;
      /* color: var(--purple); */
    }

    .w-new-session-card-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .w-new-session-card-from {
      font-family: var(--cap);
      font-size: 14px;
      color: var(--purple);
      line-height: 1.3;
    }

    .w-new-session-card-from span {
      font-size: 18px;
      font-weight: 500;
    }

    .w-new-session-card-date {
      font-family: var(--cap);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--purple);
      opacity: .7;
      white-space: nowrap;
    }

    /* SESSION BOX */
    .w-session-box {
      background: rgba(255, 255, 255, 0.4);
      border-radius: 16px;
      padding: 20px 24px 18px;
      flex-shrink: 0;
    }

    .w-session-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px
    }

    .w-session-label {
      font-family: var(--cap);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--purple);
      font-weight: 600;
      opacity: .8
    }

    .w-session-date {
      font-family: var(--cap);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: #323064;
      font-weight: 600;
      opacity: .6
    }

    .w-card {
      border-radius: 20px;
      padding: 18px 20px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 14px;
      border: none;
    }

    .w-card.insight-card {
      background: #ffce66;
    }

    .w-card.situation-card {
      background: #D3E4FB;
      margin-bottom: 0;
    }

    .w-card-dot {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
    }

    .w-card-dot.insight {
      background: none
    }

    .w-card-dot.situation {
      background: #69ACCC
    }

    .w-card-text {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      line-height: 1.45;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      transition: none;
    }

    .w-card.expandable {
      cursor: pointer;
      align-items: flex-start;
    }

    .w-card.expandable.expanded .w-card-text {
      -webkit-line-clamp: unset;
    }


    /* WELCOME */
    #s-welcome {
      transition: background 0.4s ease;
    }

    #s-welcome.state-last-activity {
      background: linear-gradient(180deg, #E2EEFB 0%, #FDF2CB 50%);
    }

    #s-welcome.state-new-session {
      background: linear-gradient(180deg, var(--blue-lt) 0%, var(--blue-focus) 100%);
    }

    #s-welcome .topbar .brand {
      color: #323064;
    }

    #s-welcome .welcome-topbar-date {
      color: #323064;
      font-weight: 500;
      font-size: 12px;
    }

    #s-welcome .profile-circle {
      background: #A4BDFC;
      color: #323064;
      box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    #s-welcome .profile-circle:hover {
      box-shadow: 0 4px 10px rgba(0, 0, 0, .12), 0 0 0 2px rgba(50, 48, 100, 0.1);
    }

    .welcome-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 8px 24px 96px;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain
    }

    .welcome-headline {
      font-family: var(--cap);
      font-size: 32px;
      line-height: 1.12;
      color: #323064;
      margin-bottom: 18px;
      font-weight: 600
    }

    .welcome-headline .hl-name {
      color: #5C81F7;
      letter-spacing: -0.05em
    }

    /* FIX: reduced from 21px — was competing with headline */
    .welcome-sub {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      opacity: .58;
      line-height: 1.45;
      margin-bottom: 32px
    }

    .welcome-last {
      margin-top: 36px;
      padding-top: 24px;
      border-top: 1px solid var(--purple-06)
    }

    /* FIX: increased opacity from .32 — was nearly invisible */
    .welcome-last-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--purple);
      opacity: .52;
      font-family: var(--cap);
      margin-bottom: 12px
    }

    .recent-card {
      background: var(--seashell);
      border-radius: var(--r);
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 13px;
      cursor: pointer;
      transition: box-shadow .2s
    }

    .recent-card:hover {
      box-shadow: var(--sh)
    }

    .recent-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--lav);
      flex-shrink: 0
    }

    .recent-text {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      opacity: .68;
      line-height: 1.4;
      flex: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden
    }

    .recent-date {
      font-size: 12px;
      color: var(--purple);
      opacity: .28;
      font-family: var(--cap);
      flex-shrink: 0
    }

    /* STEPS + FEEDBACK share the same blue gradient layout */
    #s-step1,
    #s-step2,
    #s-feedback {
      background: linear-gradient(180deg, #a0bbff 0%, #5c89f9 52%);
      display: flex;
      flex-direction: column;
    }

    .step-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 36px 16px;
      flex-shrink: 0;
    }

    .step-circle-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #d3e4fb;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      cursor: pointer;
      flex-shrink: 0;
    }

    .step-circle-btn img {
      width: 22px;
      height: 22px;
    }

    .step-pill-btn img {
      width: 20px;
      height: 20px;
    }

    .step-circle-cream {
      background: #fef8e8;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
    }

    .step-pill-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 16px 24px;
      background: #fef8e8;
      border-radius: 40px;
      border: none;
      cursor: pointer;
      font-family: var(--cap);
      font-size: 16px;
      font-weight: 500;
      color: #323064;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
    }

    .step-heading {
      padding: 16px 24px 48px;
      flex-shrink: 0;
    }

    .step-q {
      font-family: var(--cap);
      font-size: 32px;
      font-weight: 500;
      color: #fef8e8;
      line-height: 1.22;
      margin: 0;
    }

    .step-q-sm {
      font-size: 32px;
    }

    .step-q-gold {
      color: #ffbd30;
    }

    .step-q-blue {
      color: #b4d6e6;
    }

    .step-q-icon {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      margin-right: 3px;
    }

    .step-q-icon img,
    .step-q-icon svg {
      height: 0.72em;
      width: auto;
      display: block;
    }

    .step-panel {
      flex: 1;
      background: #d3e4fb;
      border-radius: 26px 26px 0 0;
      border: 1.3px solid rgba(50, 48, 100, 0.12);
      border-bottom: none;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .step-ta {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      font-family: var(--cap);
      font-size: 24px;
      color: #323064;
      padding: 28px 36px 16px;
      resize: none;
      line-height: 1.5;
    }

    .step-ta::placeholder {
      color: rgba(50, 48, 100, 0.5);
    }

    .step-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 32px;
      flex-shrink: 0;
    }

    .step-dot {
      width: 7px;
      height: 7px;
      border-radius: 4px;
      background: #323064;
      opacity: 0.35;
      transition: width .2s;
    }

    .step-dot-active {
      width: 20px;
      opacity: 1;
    }

    /* GENERATING */
    #s-generating {
      background: var(--blue-focus-lt);
      align-items: center;
      justify-content: center;
      gap: 26px;
      padding: 40px 32px
    }

    .gen-drawing {
      position: relative;
      flex-shrink: 0;
    }

    .gen-drawing::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 180px;
      height: 180px;
      background: white;
      border-radius: 50%;
      filter: blur(40px);
      z-index: 0;
      pointer-events: none;
    }

    .gen-drawing img {
      position: relative;
      z-index: 1;
      width: 220px;
      height: auto;
      display: block;
    }

    .gen-title {
      font-family: var(--cap);
      font-size: 24px;
      color: var(--purple);
      text-align: center
    }

    .gen-sub {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      opacity: .7;
      text-align: center;
      line-height: 1.5;
      max-width: 250px
    }

    .gen-dots {
      display: flex;
      gap: 8px
    }

    .gen-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--purple);
      opacity: .35;
      animation: pulse 1.4s ease-in-out infinite
    }

    .gen-dot:nth-child(2) {
      animation-delay: .22s
    }

    .gen-dot:nth-child(3) {
      animation-delay: .44s
    }

    @keyframes pulse {

      0%,
      80%,
      100% {
        opacity: .22;
        transform: scale(1)
      }

      40% {
        opacity: 1;
        transform: scale(1.35)
      }
    }

    /* Generating screen cycling subtitle */
    @keyframes genSubFadeIn {
      from {
        opacity: 0;
        transform: translateY(6px)
      }

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

    .gen-sub-cycling {
      animation: genSubFadeIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both
    }

    /* Coach modal avatar */
    .coach-avatar-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 20px 0 16px
    }

    .coach-avatar-circle {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: rgba(211, 228, 251, .15);
      border: 1.5px solid rgba(211, 228, 251, .22);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .coach-avatar-name {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--cream);
      opacity: .9;
      text-align: center
    }

    /* ACTIVITIES */
    #s-activities {
      background: #d3e4fb;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* ── BROWSE topbar ── */
    .act-topbar {
      display: flex;
      align-items: center;
      padding: 56px 24px 40px;
      flex-shrink: 0;
      position: relative;
    }

    .act-topbar .act-select-label {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    /* .act-close-btn commented out
    .act-close-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #d3e4fb;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #323064;
      font-size: 16px;
      font-family: var(--cap);
    } */

    /* ── DETAIL topbar: ← | Reflect on this | ✓ ── */
    .act-detail-topbar {
      display: none;
      align-items: center;
      justify-content: space-between;
      padding: 0px 24px 40px;
      gap: 12px;
      flex-shrink: 0;
    }

    .act-detail-back-btn,
    .act-detail-done-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #d3e4fb;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    .act-detail-reflect-btn {
      flex: 1;
      padding: 16px 0;
      background: #fef8e8;
      color: #323064;
      font-family: var(--cap);
      font-size: 16px;
      font-weight: 500;
      border: none;
      border-radius: 40px;
      cursor: pointer;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.15);
    }

    /* ── In detail mode: swap topbars, hide bottom label ── */
    #s-activities.act-in-detail .act-topbar {
      display: none;
    }

    /* Keep act-bottom as invisible spacer so stack ends at same y as browse mode */
    #s-activities.act-in-detail .act-bottom {
      opacity: 0;
      pointer-events: none;
    }

    #s-activities.act-in-detail .act-detail-topbar {
      display: flex;
    }

    /* Non-selected cards vanish instantly */
    #s-activities.act-in-detail .act-stack-card:not(.act-selected) {
      opacity: 0;
      pointer-events: none;
    }

    /* Stack gets bottom breathing room in detail mode */
    #s-activities.act-in-detail .act-stack {
      margin-bottom: 0;
    }

    /* Selected card fills the stack container */
    #s-activities.act-in-detail .act-stack-card.act-selected {
      top: 0 !important;
      height: 100% !important;
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 20 !important;
      cursor: default;
    }

    /* Hide check button in detail mode */
    #s-activities.act-in-detail .act-check-btn {
      display: none;
    }

    /* Show ⓘ only in detail mode */
    #s-activities.act-in-detail .act-info-btn {
      display: block;
    }

    /* ── Stack container ── */
    .act-stack {
      position: relative;
      flex: 1;
      margin: 0 24px;
      min-height: 0;
    }

    /* ── Card base ── */
    .act-stack-card {
      position: absolute;
      left: 0;
      right: 0;
      border-radius: 50px;
      height: 380px;
      padding: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
      transition: top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.3s ease;
      cursor: pointer;
    }

    .act-stack-card[data-idx="0"] {
      top: 0;
      background: #a0bbff;
    }

    .act-stack-card[data-idx="1"] {
      top: 100px;
      background: #7fa3fc;
    }

    .act-stack-card[data-idx="2"] {
      top: 200px;
      background: #5c89f9;
    }

    /* Check button — absolute top-right, doesn't affect flow */
    .act-check-btn {
      position: absolute;
      top: 22px;
      right: 22px;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 2.5px solid rgba(254, 248, 232, 0.7);
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
      transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
    }

    /* Checkmark faint when unselected, solid when selected */
    .act-check-btn svg {
      opacity: 0.45;
      transition: opacity 0.2s;
    }

    .act-stack-card.act-selected .act-check-btn {
      background: #fef8e8;
      border-color: transparent;
      box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
    }

    .act-stack-card.act-selected .act-check-btn svg {
      opacity: 1;
    }

    /* ⓘ info button — absolute top-right, shown only in detail mode */
    .act-info-btn {
      display: none;
      position: absolute;
      top: 22px;
      right: 22px;
      width: 52px;
      height: 52px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 10px;
      z-index: 2;
    }

    .act-info-btn img {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Top zone — 100px fixed: shows ONLY number in peek-from-above */
    .act-card-top {
      flex-shrink: 0;
      height: 80px;
      display: flex;
      align-items: flex-end;
      /* number sits at bottom of zone = below check button */
      padding: 0 28px 10px;
    }

    .act-card-num {
      font-family: var(--cap);
      font-size: 32px;
      font-weight: 400;
      color: #fef8e8;
      line-height: 1;
    }

    .act-card-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 10px 28px 0;
      min-height: 0;
    }

    /* In detail mode the body shrinks to auto and steps fill the space */
    #s-activities.act-in-detail .act-stack-card .act-card-body {
      flex: 0 0 auto;
      justify-content: flex-start;
    }

    #s-activities.act-in-detail .act-stack-card .act-card-desc {
      display: none;
    }

    #s-activities.act-in-detail .act-stack-card .act-card-steps {
      flex: 0 0 auto;
    }

    .act-card-title {
      font-family: var(--cap);
      font-size: 24px;
      font-weight: 400;
      color: #fef8e8;
      line-height: 1.3;
      padding: 0;
      margin-bottom: 10px;
    }

    /* When showing about: hide all content, show only about panel */
    #s-activities.act-in-detail .act-showing-about .act-card-top {
      display: none;
    }

    #s-activities.act-in-detail .act-showing-about .act-card-body {
      display: none;
    }

    #s-activities.act-in-detail .act-showing-about .act-card-steps {
      display: none !important;
      flex: 0 !important;
    }

    #s-activities.act-in-detail .act-showing-about .act-card-footer {
      display: none;
    }

    #s-activities.act-in-detail .act-showing-about .act-card-about {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow-y: auto;
    }

    .act-card-desc {
      font-family: var(--cap);
      font-size: 16px;
      color: #fef8e8;
      line-height: 1.6;
      padding: 20px 20px 40px
    }

    /* Steps — hidden in browse, shown in detail */
    .act-card-steps {
      display: none;
      flex-direction: column;
      gap: 16px;
      padding: 40px 20px 20px;
    }

    #s-activities.act-in-detail .act-card-steps {
      display: flex;
    }

    .act-card-step {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      text-align: left;
    }

    .act-card-step-num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      color: #fef8e8;
      font-family: var(--cap);
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .act-card-step-text {
      font-family: var(--cap);
      font-size: 16px;
      color: #fef8e8;
      line-height: 1.55;
      flex: 1;
      padding-top: 4px;
    }

    /* About content inside card — shown when ⓘ toggled */
    .act-card-about {
      display: none;
      flex-direction: column;
      padding: 16px 28px 24px;
    }

    /* (about-state selectors consolidated above) */

    .act-about-heading {
      font-family: var(--cap);
      font-size: 24px;
      font-weight: 500;
      color: var(--cream);
      margin-bottom: 12px;
      margin-top: 40px;
    }

    .act-about-body {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--cream);
      opacity: 0.85;
      line-height: 1.6;
      margin-bottom: 24px;
    }

    .act-about-config-label {
      font-family: var(--cap);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--cream);
      opacity: 0.6;
      margin-bottom: 10px;
    }

    .act-about-cfg-row {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 14px;
      padding: 13px 16px;
      margin-bottom: 8px;
      display: flex;
      gap: 14px;
    }

    .act-about-cfg-key {
      font-family: var(--cap);
      font-size: 12px;
      color: var(--cream);
      opacity: 0.65;
      flex-shrink: 0;
      width: 76px;
    }

    .act-about-cfg-val {
      font-family: var(--cap);
      font-size: 12px;
      color: var(--cream);
      flex: 1;
    }

    /* Footer: 90px fixed zone — always anchored at card bottom, shows in below-peek */
    .act-card-footer {
      flex-shrink: 0;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .act-card-time {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--cream);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    #s-activities.act-in-detail .act-card-footer {
      display: none;
    }

    /* Bottom label */
    .act-bottom {
      padding: 16px 24px 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .act-select-label {
      font-family: var(--cap);
      font-size: 16px;
      font-weight: 500;
      color: #323064;
      opacity: 0.7;
    }

    /* About overlay removed — about now renders inside card */
    .act-about-overlay {
      display: none;
    }

    .act-about-overlay.active {
      pointer-events: all;
      transform: translateY(0);
    }

    .act-about-close {
      position: absolute;
      top: 18px;
      right: 22px;
      background: none;
      border: none;
      font-size: 24px;
      color: #fef8e8;
      opacity: 0.7;
      cursor: pointer;
      font-family: sans-serif;
    }

    .act-about-title {
      font-family: var(--cap);
      font-size: 24px;
      font-weight: 500;
      color: #fef8e8;
      margin-bottom: 16px;
    }

    .act-about-text {
      font-family: var(--cap);
      font-size: 16px;
      color: #fef8e8;
      opacity: 0.85;
      line-height: 1.6;
      margin-bottom: 32px;
    }

    .act-about-config-title {
      font-family: var(--cap);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #fef8e8;
      opacity: 0.55;
      margin-bottom: 12px;
    }

    .act-about-row {
      background: rgba(255, 255, 255, 0.12);
      border-radius: 14px;
      padding: 14px 16px;
      margin-bottom: 8px;
      display: flex;
      gap: 16px;
      align-items: center;
    }

    .act-about-row-label {
      font-family: var(--cap);
      font-size: 12px;
      color: #fef8e8;
      opacity: 0.7;
      flex-shrink: 0;
      width: 80px;
    }

    .act-about-row-value {
      font-family: var(--cap);
      font-size: 12px;
      color: #fef8e8;
      flex: 1;
    }

    /* ACTIVITY DETAIL */
    #s-activity-detail {
      background: var(--blue-focus-lt)
    }

    /* FIX: added position:relative so the absolute orange icon anchors here */
    .detail-card-inner {
      background: var(--blue-lt);
      border-radius: var(--r-lg);
      padding: 26px;
      margin-bottom: 32px;
      box-shadow: none;
      position: relative
    }

    .detail-type {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .09em;
      color: var(--cream);
      opacity: .7;
      font-family: var(--cap);
      margin-bottom: 10px;
      padding-right: 40px
    }

    /* FIX: added title element — previously a.body was shown without a.title */
    .detail-title {
      font-family: var(--cap);
      font-size: 24px;
      color: var(--lav);
      line-height: 1.3;
      margin-bottom: 8px
    }

    /* FIX: reduced from 19px, now serves as description under the title */
    .detail-question {
      font-family: var(--cap);
      font-size: 16px;
      line-height: 1.45;
      color: var(--purple);
      opacity: .72
    }

    .detail-bottom {
      flex: 1;
      overflow-y: auto;
      background: var(--blue-focus-lt) border-radius: 28px 28px 0 0;
      padding: 32px 26px 40px;
      display: flex;
      flex-direction: column
    }

    .detail-steps {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 32px;
      flex: 1
    }

    .detail-step {
      display: flex;
      gap: 14px;
      align-items: flex-start
    }

    .detail-step-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--cream);
      color: var(--purple);
      font-family: var(--cap);
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
      box-shadow: 0 2px 5px rgba(50, 48, 100, 0.05)
    }

    .detail-step-text {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      opacity: .85;
      line-height: 1.5;
      flex: 1
    }

    /* FEEDBACK */
    /* Heading wraps only the title — padding-top controls where the panel starts */
    #s-feedback .step-heading {
      padding: 28px 36px 150px;
      flex-shrink: 0;
      /* no position:relative — drawing is anchored to the screen, not the heading */
    }

    /* Drawing anchored to the screen itself — completely independent of heading padding */
    .fb-drawing {
      position: absolute;
      top: 145px;
      /* ← adjust this single value to move the drawing up/down */
      left: 50%;
      transform: translateX(-50%);
      width: 75%;
      z-index: 1;
      pointer-events: none;
    }

    .fb-drawing img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Panel fills remaining space and sits above the drawing */
    #s-feedback .step-panel {
      flex: 1;
      height: auto;
      position: relative;
      z-index: 2;
    }



    /* JOURNEY */
    #s-journey {
      background: var(--blue-focus)
    }

    .j-session-title {
      font-family: var(--cap);
      font-size: 32px;
      font-weight: 600;
      line-height: 1.12;
      color: #323064;
      margin-bottom: 6px;
    }

    .j-session-subtitle {
      font-family: var(--cap);
      font-size: 16px;
      color: #323064;
      opacity: 0.45;
      margin-bottom: 50px;
    }

    .journey-body {
      padding: 0 22px 16px
    }

    .j-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 32px;
      text-align: center;
      gap: 14px
    }

    .j-empty-icon {
      opacity: .2
    }

    .j-empty-title {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      opacity: .45
    }

    .j-empty-sub {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      opacity: .35;
      line-height: 1.5
    }

    .j-session {
      margin-bottom: 16px;
    }

    /* Date card — yellow border when collapsed, borderless when open */
    .j-date-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: transparent;
      border: 2px solid #ffce66;
      border-radius: 20px;
      padding: 16px 20px;
      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
      margin-bottom: 10px;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    /* Remove border when session is open — driven solely by .open class */
    .j-session.open .j-date-row {
      border-color: transparent;
      box-shadow: none;
    }

    .j-date {
      font-family: var(--cap);
      font-size: 16px;
      color: #323064;
      white-space: nowrap;
    }

    .j-badge {
      font-family: var(--cap);
      font-size: 24px;
      color: #323064;
      font-weight: 600;
      white-space: nowrap;
    }

    /* FIX: added display:flex flex-direction:column gap — was an undeclared class */
    .j-cards {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .j-card {
      background: var(--lav);
      border-radius: 18px;
      padding: 18px 20px;
      border: none;
      transition: box-shadow .18s, transform .18s;
      box-shadow: 0 4px 15px rgba(50, 48, 100, .04)
    }

    .j-card.done {
      background: rgba(254, 248, 232, .12)
    }

    .j-card.insight {
      background: var(--lav)
    }

    .j-card.situation {
      background: var(--lav)
    }

    .j-card-label {
      display: none;
      align-items: center;
      gap: 6px;
      font-size: 16px;
      font-weight: 700;
      text-transform: none;
      letter-spacing: normal;
      font-family: var(--cap);
      margin: 0;
    }

    .j-card.insight .j-card-label {
      color: #e77302;
    }

    .j-card.situation .j-card-label {
      color: #69ACCC;
    }

    .j-card.expandable.expanded .j-card-label {
      display: flex;
    }

    .j-card.expandable.expanded .j-card-title {
      display: none;
    }

    .j-card-row {
      align-items: center;
    }

    .j-card.expandable.expanded .j-card-row {
      align-items: flex-start;
    }

    .j-card-text {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      line-height: 1.5;
      opacity: .85;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden
    }

    /* FIX: expandable cards now have position:relative and show a visible expand hint */
    .j-card.expandable {
      cursor: pointer;
      position: relative
    }

    .j-card.expandable.expanded .j-card-text {
      -webkit-line-clamp: unset
    }

    .j-card.expandable.expanded .j-card-text-wrap {
      display: block !important;
    }

    #s-journey {
      background: linear-gradient(180deg, #FEF2CB 0%, #F6CF7A 100%);
    }

    /* Stacked circles on top right */
    .j-topbar-right {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-left: auto;
    }

    .j-topbar-right .profile-circle {
      background: #B4C7FA;
      color: #2B2866;
      box-shadow: 0 4px 12px rgba(180, 199, 250, 0.4);
      margin-bottom: 0;
    }

    .j-topbar-right .profile-circle:hover {
      box-shadow: 0 0 0 2px #2B2866;
    }

    /* FIX: visible tap-to-expand hint — previously had no affordance */
    .j-expand-hint {
      font-size: 12px;
      color: var(--purple);
      opacity: .4;
      font-family: var(--cap);
      display: block;
      margin-top: 7px;
      letter-spacing: .02em
    }

    .j-card.expandable.expanded .j-expand-hint {
      display: none
    }

    /* FIX: named class for journey activity buttons — was all inline styles */
    .j-act-btn {
      display: flex;
      align-items: flex-start;
      width: 100%;
      padding: 16px 20px;
      text-align: left;
      font-size: 16px;
      font-family: var(--cap);
      border-radius: 18px;
      color: var(--blue-focus);
      background: var(--cream);
      border: none;
      cursor: pointer;
      line-height: 1.45;
      transition: transform .12s, opacity .12s;
      opacity: 0.95
    }

    .j-act-btn:hover {
      opacity: 1
    }

    .j-act-btn:active {
      transform: scale(.97)
    }

    .j-session.old {
      opacity: 1
    }

    #j-search-container {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      position: relative;
      height: 48px;
      margin-left: auto;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
    }

    #j-search-container.closed {
      background: transparent;
      border: 1px solid transparent;
      border-radius: 0;
      width: auto;
      padding: 0
    }

    #j-search-container.open {
      background: rgba(243, 141, 39, .15);
      border: 1px solid rgba(50, 48, 100, 0.15);
      border-radius: 24px;
      width: 100%;
      padding: 0 16px;
      justify-content: space-between
    }

    /* FIX: was 24px Caveat — read as a heading, not a search control */
    .j-search-placeholder {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      opacity: 0.55;
      cursor: pointer;
      padding-right: 12px;
      white-space: nowrap;
      transition: opacity 0.2s
    }

    .j-search-placeholder:hover {
      opacity: 0.8
    }

    #j-search-container.open .j-search-placeholder {
      display: none
    }

    .j-search-input {
      border: none;
      background: transparent;
      outline: none;
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      width: 0;
      opacity: 0;
      padding: 0;
      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s
    }

    #j-search-container.open .j-search-input {
      width: 100%;
      opacity: 1;
      padding: 12px 0
    }

    #j-search-container.open .j-search-icon {
      opacity: 0.8;
      cursor: pointer
    }

    .j-search-icon {
      color: var(--purple);
      opacity: 0.8;
      cursor: pointer;
      flex-shrink: 0
    }

    /* LIBRARY */
    #s-library {
      background: linear-gradient(180deg, #A0BBFF 0%, #D3E4FB 75%, #FFEAA6 100%);
    }

    .lib-body {
      padding: 0 22px 16px
    }

    .lib-hero {
      background: var(--yellow);
      border-radius: var(--r-lg);
      padding: 26px;
      margin-bottom: 14px
    }

    .lib-hero-svg {
      /* flex-shrink: 0; */
      width: 300px;
      height: auto;
      position: relative;
      z-index: 2;
    }

    .lib-hero::before {
      content: '';
      position: absolute;
      top: 20%;
      left: 25px;
      transform: translateY(-50%);
      width: 100px;
      height: 100px;
      background: #FFFFFF;
      border-radius: 50%;
      filter: blur(20px);
      z-index: 0;
      pointer-events: none;
    }

    .lib-hero-title {
      font-family: var(--cap);
      font-size: 24px;
      color: var(--purple);
      line-height: 1.3;
      margin-bottom: 9px
    }

    /* .lib-hero-desc {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      opacity: 1;
      line-height: 1.5;
      margin-bottom: 14px
    } */

    .lib-hero-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--cap);
      font-family: 'Capriola', cursive;
      font-size: 16px;
      color: var(--purple);
      cursor: pointer;
      transition: opacity .15s
    }

    .lib-hero-link:hover {
      opacity: .75
    }

    #lib-cards {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .lib-cards-label {
      font-family: var(--cap);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--purple);
      font-weight: 600;
      opacity: .8;
      padding-top: 20px
    }

    .lib-card {
      background: transparent;
      border-radius: 26px;
      border: 2px solid #a0bbff;
      padding: 22px 26px;
      cursor: pointer;
      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: transform .18s;
    }

    .lib-card:active {
      transform: scale(.98)
    }

    .lib-card-cat {
      font-family: var(--cap);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--blue-focus);
    }

    .lib-card-title {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      line-height: 1.3;
    }

    /* .lib-card-desc {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      opacity: 1;
      line-height: 1.4
    } */

    .lib-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 24px;
      text-align: center;
      gap: 10px
    }

    .lib-empty-title {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      opacity: .4
    }

    .lib-empty-sub {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      opacity: .3;
      line-height: 1.5
    }

    /* LIBRARY DETAIL */
    .libdet-ctx-btns {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 18px
    }

    .libdet-ctx-btn {
      flex: 1;
      padding: 9px 12px;
      border-radius: var(--r-sm);
      font-family: var(--cap);
      font-size: 12px;
      color: var(--purple);
      cursor: pointer;
      border: none;
      text-align: center;
      opacity: .9;
      transition: opacity .15s, transform .12s
    }

    .libdet-ctx-btn:active {
      transform: scale(.96)
    }

    .libdet-ctx-btn.insight-btn {
      background: rgba(243, 141, 39, .18)
    }

    .libdet-ctx-btn.situation-btn {
      background: rgba(255, 89, 202, .14)
    }

    .libdet-ctx-panel {
      border-radius: var(--r-sm);
      padding: 13px 16px;
      margin-bottom: 14px;
      display: none
    }

    .libdet-ctx-panel.visible {
      display: block
    }

    .libdet-ctx-panel.insight-panel {
      background: rgba(243, 141, 39, .18)
    }

    .libdet-ctx-panel.situation-panel {
      background: rgba(255, 89, 202, .14)
    }

    .libdet-ctx-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--purple);
      opacity: .5;
      font-family: var(--cap);
      margin-bottom: 5px
    }

    .libdet-ctx-text {
      font-family: var(--cap);
      font-size: 12px;
      color: var(--purple);
      opacity: .82;
      line-height: 1.5
    }

    #s-lib-detail {
      background: var(--blue-lt);
      display: flex;
      flex-direction: column;
    }

    /* Always show the topbar in library detail */
    #s-lib-detail .act-detail-topbar {
      display: flex;
    }

    /* Full-screen card — same structure as expanded activity card */
    .ld-card {
      position: absolute;
      inset: 0;
      background: var(--blue-focus);
      border-radius: 50px;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 28px;
      padding-bottom: 10px;
      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    }

    /* ⓘ always visible in lib detail */
    .ld-card .act-info-btn {
      display: block;
    }

    /* About toggle */
    .ld-card.ld-about .ld-main {
      display: none;
    }

    .ld-card .ld-about-content {
      display: none;
    }

    .ld-card.ld-about .ld-about-content {
      display: flex;
      flex-direction: column;
    }


    /* ABOUT LAYER */
    /* FIX: added backdrop to allow close-on-outside-tap */
    .about-backdrop {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background: transparent
    }

    .about-backdrop.active {
      pointer-events: all
    }

    .about-modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      max-height: 88%;
      overflow-y: auto;
      background: var(--blue-focus);
      border-radius: 0 0 32px 32px;
      padding: 86px 24px 32px;
      z-index: 4;
      pointer-events: none;
      transform: translateY(-100%);
      transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease;
      box-shadow: none
    }

    .about-modal-overlay.active {
      pointer-events: all;
      transform: translateY(0);
      box-shadow: 0 16px 40px rgba(50, 48, 100, 0.12)
    }

    .about-modal {
      width: 100%
    }

    .about-modal-title {
      font-family: var(--cap);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--lav);
      ;
      opacity: 1;
      margin-bottom: 12px
    }

    .about-modal-text {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--lav);
      opacity: 0.85;
      line-height: 1.6
    }

    .libdet-cat {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .09em;
      color: var(--orange);
      font-family: var(--cap);
      margin-bottom: 10px
    }

    .libdet-title {
      font-family: var(--cap);
      font-size: 24px;
      color: var(--purple);
      line-height: 1.28;
      margin-bottom: 8px
    }

    .libdet-tagline {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--cream);
      opacity: .6;
      line-height: 1.45
    }

    .libdet-body {
      flex: 1;
      overflow-y: auto;
      padding: 22px 24px 32px
    }

    .libdet-section {
      margin-bottom: 22px
    }

    .libdet-section-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--cream);
      opacity: 1;
      font-family: var(--cap);
      margin-bottom: 8px
    }

    .libdet-text {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      opacity: .78;
      line-height: 1.6
    }

    .libdet-steps {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .libdet-step {
      display: flex;
      gap: 14px;
      align-items: flex-start
    }

    .libdet-step-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--cream);
      color: var(--purple);
      font-family: var(--cap);
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
      box-shadow: 0 2px 5px rgba(50, 48, 100, 0.05)
    }

    .libdet-step-text {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--cream);
      opacity: .85;
      line-height: 1.5;
      flex: 1
    }

    /* ACCOUNT */
    #s-account {
      background: var(--blue-focus)
    }

    .account-body {
      flex: 1;
      overflow-y: auto;
      padding: 0 24px 40px
    }

    .account-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 0 28px
    }

    .account-avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: rgba(211, 228, 251, .2);
      font-family: var(--cap);
      font-size: 32px;
      color: var(--lav);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      box-shadow: 0 4px 20px rgba(197, 191, 217, .5)
    }

    .account-name {
      font-family: var(--cap);
      font-size: 24px;
      color: var(--cream);
      margin-bottom: 4px
    }

    .account-role {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--lav);
      opacity: .7
    }

    .account-section {
      margin-bottom: 22px
    }

    .account-section-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--purple);
      opacity: .32;
      font-family: var(--cap);
      margin-bottom: 10px
    }

    .account-row {
      background: rgba(211, 228, 251, .1);
      border-radius: var(--r);
      padding: 15px 17px;
      margin-bottom: 7px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .account-row-label {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--cream)
    }

    .account-row-value {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--lav);
      opacity: .75;
      text-align: right
    }

    /* FIX: sessions nudge shown when count is 0 */
    .sessions-nudge {
      font-family: var(--cap);
      font-size: 12px;
      color: var(--orange);
      opacity: .75;
      padding: 4px 17px 10px;
      line-height: 1.4
    }

    .toggle {
      width: 44px;
      height: 25px;
      border-radius: 13px;
      background: var(--purple-12);
      position: relative;
      cursor: pointer;
      transition: background .22s;
      flex-shrink: 0
    }

    .toggle.on {
      background: var(--cream)
    }

    .toggle::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      background: var(--seashell);
      box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
      transition: left .22s cubic-bezier(.4, 0, .2, 1)
    }

    .toggle.on::after {
      left: 22px
    }

    /* ERROR */
    .gen-error {
      font-family: var(--cap);
      font-size: 16px;
      color: var(--purple);
      opacity: .65;
      text-align: center;
      max-width: 280px;
      line-height: 1.55
    }

    /* ═══ WALKTHROUGH TOUR ═══ */
    #wt-overlay {
      position: absolute;
      inset: 0;
      z-index: 100;
      pointer-events: all;
      background: transparent;
      transition: background 0.3s ease;
    }

    #wt-hole {
      position: absolute;
      background: transparent;
      box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.55);
      border-radius: 16px;
      transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease, opacity .2s ease;
      pointer-events: none;
    }

    .wt-tooltip {
      position: absolute;
      background: var(--blue-focus);
      border-radius: 20px;
      padding: 20px 20px 16px;
      left: 24px;
      right: 24px;
      box-shadow: 0 8px 32px rgba(50, 48, 100, 0.18);
      z-index: 1;
      transition: top .3s ease, opacity .2s ease;
    }

    .wt-title {
      font-family: var(--cap);
      font-size: 18px;
      font-weight: 700;
      color: var(--lav);
      margin: 0 0 8px;
    }

    .wt-text {
      font-family: var(--cap);
      font-size: 15px;
      color: var(--lav);
      opacity: 0.7;
      margin: 0 0 16px;
      line-height: 1.5;
    }

    .wt-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .wt-next-btn {
      background: var(--cream);
      color: var(--purple);
      border: none;
      border-radius: 50px;
      padding: 10px 22px;
      font-family: var(--cap);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      flex-shrink: 0;
    }

    .wt-skip-btn {
      position: absolute;
      top: 16px;
      right: 20px;
      background: none;
      border: none;
      padding: 0;
      font-family: var(--cap);
      font-size: 13px;
      color: var(--lav);
      cursor: pointer;
    }

    #wt-overlay.wt-dim {
      background: rgba(0, 0, 0, 0.45);
    }

    @keyframes wt-card-appear {
      from {
        opacity: 0;
        transform: translateY(14px);
      }

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

    .wt-card-appear {
      animation: wt-card-appear 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    }

    @keyframes wt-notif-enter {
      from {
        transform: translateY(-120%);
        opacity: 0;
      }

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

    @keyframes wt-pulse-ring {

      0%,
      100% {
        box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.55), 0 0 0 0px rgba(255, 255, 255, 0);
      }

      55% {
        box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.55), 0 0 0 12px rgba(255, 255, 255, 0.85);
      }
    }

    #wt-hole.wt-hole-pulse {
      animation: wt-pulse-ring 1.5s ease-in-out infinite;
      pointer-events: auto;
      cursor: pointer;
    }

    .wt-notif {
      position: absolute;
      left: 16px;
      right: 16px;
      background: var(--cream);
      border-radius: 20px;
      padding: 14px 16px 16px;
      box-shadow: 0 8px 32px rgba(20, 30, 80, 0.35);
      z-index: 1;
      display: none;
      flex-direction: column;
      gap: 10px;
    }

    .wt-notif.wt-notif-enter {
      animation: wt-notif-enter 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    }

    .wt-notif-app-row {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .wt-notif-app-label {
      font-family: var(--cap);
      font-size: 11px;
      font-weight: 600;
      color: var(--purple);
      opacity: 0.6;
      /* text-transform: uppercase; */
      letter-spacing: .07em;
      flex: 1;
    }

    .wt-notif-time {
      font-family: var(--cap);
      font-size: 11px;
      color: var(--purple);
      opacity: 0.45;
    }

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

    .wt-notif-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 245, 228, 0.2);
      color: var(--purple);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--cap);
      font-size: 18px;
      font-weight: 700;
      flex-shrink: 0;
      overflow: hidden;
    }

    .wt-notif-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex: 1;
    }

    .wt-notif-title {
      font-family: var(--cap);
      font-size: 15px;
      font-weight: 700;
      color: var(--purple);
      margin: 0;
      line-height: 1.3;
    }

    .wt-notif-sub {
      font-family: var(--cap);
      font-size: 13px;
      color: var(--purple);
      opacity: 0.65;
      margin: 0;
      line-height: 1.3;
    }

    /* ── Small-device layout adjustments ─────────────── */

    /* Activity cards: tighter stack for screens ≤ 700px tall */
    @media (max-width:430px) and (max-height:700px) {
      .act-topbar {
        padding-top: 20px;
        padding-bottom: 20px;
      }

      .act-stack-card {
        height: 320px;
      }

      .act-stack-card[data-idx="1"] {
        top: 80px;
      }

      .act-stack-card[data-idx="2"] {
        top: 160px;
      }

      .act-bottom {
        padding-top: 10px;
        padding-bottom: 20px;
      }
    }

    /* Onboarding & explainer slides: smaller illustrations and text on small screens */
    @media (max-width:430px) and (max-height:700px) {
      .expl-icon>svg {
        max-height: 130px;
      }

      .expl-icon {
        margin-bottom: 14px;
      }

      .expl-content {
        padding: 0 28px;
        padding-top: 6px;
        justify-content: flex-start;
      }

      .expl-title {
        font-size: 24px;
        margin-bottom: 10px;
      }

      .expl-body {
        font-size: 14px;
        line-height: 1.5;
      }

      .expl-eyebrow {
        margin-bottom: 6px;
      }
    }