/* /Components/Dashboard/CalendarTimeline.razor.rz.scp.css */
.ct-container[b-k8o1nwu6qg] {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 18px rgba(59, 107, 93, 0.06);
    border: 1px solid rgba(118, 183, 169, 0.15);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: #1A332B;
}

.ct-header[b-k8o1nwu6qg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ct-nav-btn[b-k8o1nwu6qg] {
    background: none;
    border: none;
    cursor: pointer;
    color: #5A7068;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s;
}

.ct-nav-btn:hover[b-k8o1nwu6qg] {
    background: rgba(118, 183, 169, 0.15);
    color: #1A332B;
}

.ct-month[b-k8o1nwu6qg] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.ct-calendar[b-k8o1nwu6qg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ct-weekdays[b-k8o1nwu6qg] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #5A7068;
    margin-bottom: 0.5rem;
}

.ct-days[b-k8o1nwu6qg] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.ct-day[b-k8o1nwu6qg] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    color: #1A332B;
    cursor: pointer;
    transition: all 0.2s;
}

.ct-day-empty[b-k8o1nwu6qg] {
    aspect-ratio: 1;
}

.ct-intensity-0[b-k8o1nwu6qg] { background: rgba(118, 183, 169, 0.10); }
.ct-intensity-1[b-k8o1nwu6qg] { background: rgba(118, 183, 169, 0.40); }
.ct-intensity-2[b-k8o1nwu6qg] { background: rgba(118, 183, 169, 0.70); color: #fff; }
.ct-intensity-3[b-k8o1nwu6qg] { background: rgba(59, 107, 93, 0.90); color: #fff; }

.ct-day:hover[b-k8o1nwu6qg] {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(59, 107, 93, 0.2);
}

.ct-selected[b-k8o1nwu6qg] {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3B6B5D;
}

.ct-today[b-k8o1nwu6qg] {
    font-weight: 800;
    text-decoration: underline;
}

.ct-stats[b-k8o1nwu6qg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.ct-stat-card[b-k8o1nwu6qg] {
    background: #F3F7F5;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    border: 1px solid rgba(118, 183, 169, 0.15);
}

.ct-stat-bio[b-k8o1nwu6qg] {
    background: rgba(118, 183, 169, 0.1);
    border-color: rgba(118, 183, 169, 0.3);
}

.ct-stat-bio .ct-stat-icon[b-k8o1nwu6qg] {
    color: #2E7D5B;
}

.ct-stat-icon[b-k8o1nwu6qg] {
    color: #3B6B5D;
    flex-shrink: 0;
}

.ct-stat-content[b-k8o1nwu6qg] {
    display: flex;
    flex-direction: column;
}

.ct-stat-label[b-k8o1nwu6qg] {
    font-size: 0.8rem;
    color: #5A7068;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.ct-stat-value[b-k8o1nwu6qg] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1A332B;
}

.ct-timeline[b-k8o1nwu6qg] {
    margin-top: 1rem;
}

.ct-timeline-title[b-k8o1nwu6qg] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: #1A332B;
}

.ct-session-list[b-k8o1nwu6qg] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ct-session-card[b-k8o1nwu6qg] {
    display: flex;
    gap: 1rem;
    background: #fff;
    padding: 1.2rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(59, 107, 93, 0.05);
    border: 1px solid rgba(118, 183, 169, 0.15);
}

.ct-session-icon[b-k8o1nwu6qg] {
    color: #76B7A9;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.ct-session-details[b-k8o1nwu6qg] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ct-session-header[b-k8o1nwu6qg] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.ct-session-type[b-k8o1nwu6qg] {
    font-weight: 600;
    font-size: 1rem;
    color: #1A332B;
}

.ct-session-time[b-k8o1nwu6qg] {
    font-size: 0.85rem;
    color: #5A7068;
}

.ct-session-badge[b-k8o1nwu6qg] {
    align-self: flex-start;
    font-size: 0.75rem;
    background: rgba(118, 183, 169, 0.2);
    color: #3B6B5D;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: 600;
}

.ct-session-weather[b-k8o1nwu6qg] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: #3B6B5D;
    background: rgba(240, 246, 244, 0.8);
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    align-self: flex-start;
}

.ct-session-desc[b-k8o1nwu6qg] {
    margin: 0.4rem 0 0 0;
    font-size: 0.95rem;
    color: #4A6B62;
    line-height: 1.5;
}

.ct-no-sessions[b-k8o1nwu6qg] {
    padding: 2rem;
    text-align: center;
    background: #F3F7F5;
    border-radius: 12px;
    color: #5A7068;
    font-style: italic;
}
/* /Components/Dashboard/GardenExplorer.razor.rz.scp.css */
.garden-explorer[b-w58h67jly5] {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #d9ede5;
    color: #17352c;
}

.garden-explorer-stage[b-w58h67jly5] {
    position: absolute;
    inset: 0;
}

.garden-explorer-stage canvas[b-w58h67jly5] {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.garden-explorer-topbar[b-w58h67jly5] {
    position: absolute;
    top: max(1.15rem, env(safe-area-inset-top));
    left: max(1.15rem, env(safe-area-inset-left));
    right: max(1.15rem, env(safe-area-inset-right));
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    pointer-events: none;
}

.garden-explorer-title-block[b-w58h67jly5],
.garden-explorer-detail[b-w58h67jly5],
.garden-explorer-help[b-w58h67jly5] {
    background: rgba(250, 255, 252, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 50px rgba(23, 53, 44, 0.16);
    backdrop-filter: blur(18px);
}

.garden-explorer-title-block[b-w58h67jly5] {
    max-width: min(28rem, calc(100vw - 7rem));
    padding: 0.95rem 1.1rem;
    border-radius: 12px;
    pointer-events: auto;
}

.garden-explorer-kicker[b-w58h67jly5],
.garden-explorer-count[b-w58h67jly5],
.garden-explorer-detail-kicker[b-w58h67jly5] {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #55756b;
}

.garden-explorer-kicker[b-w58h67jly5],
.garden-explorer-detail-kicker[b-w58h67jly5] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.garden-explorer-title-block h3[b-w58h67jly5] {
    margin: 0.12rem 0 0.08rem;
    font-size: clamp(1rem, 2.6vw, 1.35rem);
    line-height: 1.1;
}

.garden-explorer-close[b-w58h67jly5],
.garden-explorer-help-toggle[b-w58h67jly5],
.garden-explorer-help button[b-w58h67jly5],
.garden-explorer-detail-actions button[b-w58h67jly5],
.pad-btn[b-w58h67jly5] {
    border: 1px solid rgba(255, 255, 255, 0.66);
    background: rgba(250, 255, 252, 0.82);
    color: #17352c;
    box-shadow: 0 12px 34px rgba(23, 53, 44, 0.14);
    backdrop-filter: blur(18px);
    cursor: pointer;
}

.garden-explorer-close[b-w58h67jly5] {
    min-height: 2.8rem;
    padding: 0 1rem;
    border-radius: 999px;
    font-weight: 800;
    pointer-events: auto;
}

.garden-explorer-help-toggle[b-w58h67jly5] {
    position: absolute;
    top: calc(max(1.15rem, env(safe-area-inset-top)) + 4.4rem);
    left: max(1.15rem, env(safe-area-inset-left));
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 999px;
    font-weight: 900;
}

.garden-explorer-help[b-w58h67jly5] {
    position: absolute;
    top: calc(max(1.15rem, env(safe-area-inset-top)) + 7.45rem);
    left: max(1.15rem, env(safe-area-inset-left));
    max-width: min(20rem, calc(100vw - 2rem));
    padding: 0.95rem 1rem;
    border-radius: 12px;
}

.garden-explorer-help strong[b-w58h67jly5] {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}

.garden-explorer-help p[b-w58h67jly5] {
    margin: 0.25rem 0;
    color: #406159;
    font-size: 0.84rem;
    line-height: 1.4;
}

.garden-explorer-help button[b-w58h67jly5] {
    margin-top: 0.7rem;
    padding: 0.45rem 0.72rem;
    border-radius: 999px;
    font-weight: 700;
}

.garden-explorer-detail[b-w58h67jly5] {
    position: absolute;
    right: max(1.15rem, env(safe-area-inset-right));
    bottom: max(1.15rem, env(safe-area-inset-bottom));
    width: min(24rem, calc(100vw - 2rem));
    max-height: min(48vh, 28rem);
    overflow: auto;
    padding: 1.05rem 1.1rem;
    border-radius: 14px;
}

.garden-explorer-detail h4[b-w58h67jly5] {
    margin: 0.2rem 0 0.35rem;
    font-size: 1.05rem;
    line-height: 1.2;
}

.garden-explorer-detail p[b-w58h67jly5] {
    margin: 0.75rem 0 0;
    color: #36584f;
    font-size: 0.9rem;
    line-height: 1.45;
}

.garden-explorer-detail-meta[b-w58h67jly5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.garden-explorer-detail-meta span[b-w58h67jly5] {
    border-radius: 999px;
    background: rgba(118, 183, 169, 0.14);
    padding: 0.25rem 0.5rem;
    color: #406159;
    font-size: 0.74rem;
    font-weight: 700;
}

.garden-explorer-detail ul[b-w58h67jly5] {
    margin: 0.8rem 0 0;
    padding-left: 1.1rem;
    color: #36584f;
    font-size: 0.86rem;
    line-height: 1.45;
}

.garden-explorer-detail-actions[b-w58h67jly5] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.garden-explorer-detail-actions button[b-w58h67jly5] {
    flex: 1;
    min-height: 2.2rem;
    border-radius: 999px;
    font-weight: 800;
}

.garden-explorer-pad[b-w58h67jly5] {
    position: absolute;
    left: max(1.15rem, env(safe-area-inset-left));
    bottom: max(1.15rem, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, 3rem);
    grid-template-rows: repeat(2, 3rem);
    gap: 0.45rem;
}

.pad-btn[b-w58h67jly5] {
    border-radius: 14px;
    font-size: 1.2rem;
    font-weight: 900;
    touch-action: none;
    user-select: none;
}

.pad-up[b-w58h67jly5] { grid-column: 2; grid-row: 1; }
.pad-left[b-w58h67jly5] { grid-column: 1; grid-row: 2; }
.pad-right[b-w58h67jly5] { grid-column: 3; grid-row: 2; }
.pad-down[b-w58h67jly5] { grid-column: 2; grid-row: 2; }

.pad-btn:active[b-w58h67jly5],
.garden-explorer-close:hover[b-w58h67jly5],
.garden-explorer-help-toggle:hover[b-w58h67jly5],
.garden-explorer-detail-actions button:hover[b-w58h67jly5] {
    background: rgba(255, 255, 255, 0.96);
    transform: translateY(-1px);
}

@media (min-width: 780px) {
    .garden-explorer-pad[b-w58h67jly5] {
        opacity: 0.58;
    }
}

@media (max-width: 720px) {
    .garden-explorer-topbar[b-w58h67jly5] {
        align-items: stretch;
    }

    .garden-explorer-title-block[b-w58h67jly5] {
        max-width: calc(100vw - 6.2rem);
    }

    .garden-explorer-close[b-w58h67jly5] {
        padding: 0 0.85rem;
    }

    .garden-explorer-detail[b-w58h67jly5] {
        left: max(1.15rem, env(safe-area-inset-left));
        right: max(1.15rem, env(safe-area-inset-right));
        bottom: calc(max(1.15rem, env(safe-area-inset-bottom)) + 7rem);
        width: auto;
        max-height: 34vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .garden-explorer-close[b-w58h67jly5],
    .garden-explorer-help-toggle[b-w58h67jly5],
    .garden-explorer-detail-actions button[b-w58h67jly5],
    .pad-btn[b-w58h67jly5] {
        transition: none;
    }
}
/* /Components/Dashboard/LivingGarden.razor.rz.scp.css */
/* LivingGarden — fits inside the Dashboard journey card.
   The SVG uses preserveAspectRatio="xMidYMid meet" so the full
   scene is always visible without clipping on any viewport width. */

.lg-wrap[b-1dmpvr41u7] {
    width: 100%;
    aspect-ratio: 700 / 400;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #D7EBE5 0%, #E9F1E3 55%, #F5E6CF 85%);
    box-shadow: inset 0 0 0 1px rgba(118, 183, 169, 0.18),
                0 4px 18px rgba(59, 107, 93, 0.08);
    position: relative;
}

.lg-svg[b-1dmpvr41u7] {
    display: block;
    width: 100%;
    height: 100%;
}

/* Shimmering sun — the halo softly breathes, the core pulses & scales. */
.lg-sun-halo[b-1dmpvr41u7] {
    animation: lg-sun-breathe-b-1dmpvr41u7 6s ease-in-out infinite;
}

.lg-sun-core[b-1dmpvr41u7] {
    transform-box: view-box;
    transform-origin: 546px 86px;
    animation: lg-sun-shimmer-b-1dmpvr41u7 4.5s ease-in-out infinite;
}

@keyframes lg-sun-breathe-b-1dmpvr41u7 {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

@keyframes lg-sun-shimmer-b-1dmpvr41u7 {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.10); }
}

@media (prefers-reduced-motion: reduce) {
    .lg-sun-halo[b-1dmpvr41u7], .lg-sun-core[b-1dmpvr41u7] { animation: none; }
}

/* Warm light motes — pollen drifting up through the sun, fading in and out. */
.lg-mote[b-1dmpvr41u7] {
    transform-box: view-box;
    animation-name: lg-mote-drift-b-1dmpvr41u7;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    opacity: 0;
}

@keyframes lg-mote-drift-b-1dmpvr41u7 {
    0%   { opacity: 0;    transform: translateY(0); }
    25%  { opacity: 0.7; }
    75%  { opacity: 0.7; }
    100% { opacity: 0;    transform: translateY(-28px); }
}

@media (prefers-reduced-motion: reduce) {
    .lg-mote[b-1dmpvr41u7] { animation: none; opacity: 0.35; }
}

/* Gentle wake-up animation for the seedling on empty state */
.lg-seedling[b-1dmpvr41u7] {
    transform-origin: 5px 0;
    animation: lg-seedling-sway-b-1dmpvr41u7 4.5s ease-in-out infinite alternate;
}

@keyframes lg-seedling-sway-b-1dmpvr41u7 {
    from { transform: rotate(-3deg); }
    to   { transform: rotate(3deg); }
}

/* Butterflies and birds drift; flowers/trees stay rooted */
.lg-el-butterfly[b-1dmpvr41u7] {
    transform-origin: center;
    animation: lg-flutter-b-1dmpvr41u7 6s ease-in-out infinite alternate;
}
.lg-el-bird[b-1dmpvr41u7] {
    animation: lg-drift-b-1dmpvr41u7 18s linear infinite;
}

@keyframes lg-flutter-b-1dmpvr41u7 {
    0%   { transform: translateY(0) rotate(-2deg); }
    50%  { transform: translateY(-4px) rotate(2deg); }
    100% { transform: translateY(0) rotate(-2deg); }
}

@keyframes lg-drift-b-1dmpvr41u7 {
    from { transform: translateX(0); }
    to   { transform: translateX(8px); }
}

/* Subtle hover lift on the whole scene */
.lg-wrap:hover[b-1dmpvr41u7] {
    box-shadow: inset 0 0 0 1px rgba(118, 183, 169, 0.32),
                0 6px 22px rgba(59, 107, 93, 0.12);
    transition: box-shadow 240ms ease;
}
/* /Components/Dashboard/MoodHeatmap.razor.rz.scp.css */
/* MoodHeatmap — full-width card on the Dashboard, below the journey card */

.mh-card[b-qqwitx5tny] {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    padding: 1.4rem 1.5rem 1.25rem;
    box-shadow: 0 4px 18px rgba(59, 107, 93, 0.06);
    border: 1px solid rgba(118, 183, 169, 0.15);
}

.mh-header[b-qqwitx5tny] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.mh-title-block[b-qqwitx5tny] {
    flex: 1;
    min-width: 0;
}

.mh-title[b-qqwitx5tny] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1A332B;
    letter-spacing: -0.01em;
}

.mh-sub[b-qqwitx5tny] {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: #5A7068;
    font-weight: 400;
}

.mh-stat[b-qqwitx5tny] {
    text-align: right;
    flex-shrink: 0;
}

.mh-stat-num[b-qqwitx5tny] {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    color: #3B6B5D;
    line-height: 1;
}

.mh-stat-label[b-qqwitx5tny] {
    font-size: 0.7rem;
    color: #5A7068;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mh-grid-wrap[b-qqwitx5tny] {
    width: 100%;
    max-width: 620px;
    overflow-x: auto;
    padding: 0.3rem 0 0.4rem;
}

.mh-svg[b-qqwitx5tny] {
    display: block;
    width: 100%;
    height: auto;
    min-width: 360px; /* keeps cells readable on narrow viewports */
}

.mh-cell[b-qqwitx5tny] {
    transition: opacity 160ms ease, transform 160ms ease;
    /* Without fill-box, transform-origin: center refers to the SVG viewport
       center, which makes the cell fly off on hover and flicker. fill-box
       anchors the origin to the rect's own bounding box. */
    transform-box: fill-box;
    transform-origin: center;
    cursor: default;
}

.mh-cell-filled:hover[b-qqwitx5tny] {
    opacity: 0.9;
    transform: scale(1.15);
}

.mh-cell-empty:hover[b-qqwitx5tny] {
    fill: rgba(118, 183, 169, 0.22);
}

.mh-legend[b-qqwitx5tny] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: #5A7068;
}

.mh-legend-label[b-qqwitx5tny] {
    margin: 0 0.2rem;
    text-transform: lowercase;
}

.mh-swatch[b-qqwitx5tny] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.mh-empty[b-qqwitx5tny] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.2rem 0.4rem;
    color: #5A7068;
    font-size: 0.88rem;
    font-style: italic;
}

.mh-empty-dot[b-qqwitx5tny] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #76B7A9;
    opacity: 0.5;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .mh-card[b-qqwitx5tny] {
        padding: 1.1rem 1rem 1rem;
    }
    .mh-title[b-qqwitx5tny] {
        font-size: 0.98rem;
    }
    .mh-stat-num[b-qqwitx5tny] {
        font-size: 1.2rem;
    }
}

.mh-stat-score-wrap[b-qqwitx5tny] {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.2rem;
}

.mh-stat-max[b-qqwitx5tny] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #3B6B5D;
}

.mh-custom-tooltip[b-qqwitx5tny] {
    position: fixed;
    background: rgba(26, 51, 43, 0.95);
    color: #fff;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 140px;
}

.mh-tooltip-header[b-qqwitx5tny] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.2rem;
}

.mh-tooltip-date[b-qqwitx5tny] {
    font-weight: 600;
    color: #A8C887;
}

.mh-tooltip-score[b-qqwitx5tny] {
    font-weight: 600;
}

.mh-tooltip-note[b-qqwitx5tny] {
    font-style: italic;
    color: rgba(255,255,255,0.8);
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}
/* /Components/Layout/DashboardLayout.razor.rz.scp.css */
.dashboard-layout[b-qgnjcr0nl4] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background-color: #F8FBFA;
    font-family: 'Inter', sans-serif;
}

/* ===== UNIFIED TOPBAR ===== */
.topbar[b-qgnjcr0nl4] {
    position: relative;
    height: 56px;
    min-height: 56px;
    background-color: #FFFFFF;
    border-bottom: 1px solid rgba(118, 183, 169, 0.10);
    display: flex;
    align-items: center;
    padding: 0 32px 0 0; /* No left padding so the brand section matches the sidebar edge */
    gap: 0;
    z-index: 1000;
}

.topbar-brand[b-qgnjcr0nl4] {
    width: 261px; /* 260px sidebar width + 1px right border = 261px total */
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-right: none;
    height: 100%;
    padding: 0 24px;
}

.topbar-brand h3[b-qgnjcr0nl4] {
    margin: 0;
    font-size: 26px;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Chrome wipe shimmer effect */
.brand-text[b-qgnjcr0nl4] {
    background-color: #76B7A9;
    background-image: linear-gradient(-40deg, transparent 0%, transparent 40%, #FFFFFF 50%, transparent 60%, transparent 100%);
    background-size: 200px;
    background-repeat: no-repeat;
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    
    animation: brandShine-b-qgnjcr0nl4 25s infinite;
}

@keyframes brandShine-b-qgnjcr0nl4 {
    0%, 5% { background-position: -200px; }
    15% { background-position: 300px; }
    100% { background-position: 300px; }
}

.topbar-title[b-qgnjcr0nl4] {
    flex: 1;
    padding-left: 32px;
}

.topbar-title h2[b-qgnjcr0nl4] {
    margin: 0;
    font-size: 16px;
    color: #1A332B;
    font-weight: 600;
}

.topbar-actions[b-qgnjcr0nl4] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

/* ===== LAYOUT BODY (sidebar + main) ===== */
.layout-body[b-qgnjcr0nl4] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ===== SIDEBAR ===== */
.sidebar[b-qgnjcr0nl4] {
    width: 260px;
    background-color: #FFFFFF;
    border-right: 1px solid rgba(118, 183, 169, 0.2);
    display: flex;
    flex-direction: column;
}

.nav-menu[b-qgnjcr0nl4] {
    flex: 1;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.nav-item[b-qgnjcr0nl4] {
    padding: 11px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: #4A6B62;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-icon[b-qgnjcr0nl4] {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.nav-item:hover[b-qgnjcr0nl4] {
    background-color: rgba(118, 183, 169, 0.1);
    color: #1A332B;
}

.nav-item.active[b-qgnjcr0nl4] {
    background: linear-gradient(135deg, rgba(118, 183, 169, 0.2), rgba(74, 139, 122, 0.1));
    color: #1A332B;
    border: 1px solid rgba(118, 183, 169, 0.3);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ===== COLLAPSIBLE NAV GROUP (Admin submenu) ===== */
.nav-group[b-qgnjcr0nl4] {
    margin-top: 4px;
    border-top: 1px solid rgba(118, 183, 169, 0.12);
    padding-top: 8px;
}

.nav-group-header[b-qgnjcr0nl4] {
    width: 100%;
    justify-content: flex-start;
    position: relative;
}

.nav-group-chevron[b-qgnjcr0nl4] {
    margin-left: auto;
    display: flex;
    align-items: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(74, 107, 98, 0.5);
}

.nav-group-chevron.expanded[b-qgnjcr0nl4] {
    transform: rotate(90deg);
}

.nav-group-header:hover .nav-group-chevron[b-qgnjcr0nl4] {
    color: #1A332B;
}

.nav-group-children[b-qgnjcr0nl4] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
    opacity: 0;
    padding-left: 12px;
}

.nav-group-children.expanded[b-qgnjcr0nl4] {
    max-height: 800px;
    opacity: 1;
}

.nav-group-children .nav-item[b-qgnjcr0nl4] {
    padding: 9px 16px 9px 28px;
    font-size: 14px;
}

.nav-group-children .nav-item.active[b-qgnjcr0nl4] {
    background: linear-gradient(90deg, rgba(118, 183, 169, 0.12) 0%, transparent 100%);
    border: none;
    border-left: 3px solid #76B7A9;
    border-radius: 0 8px 8px 0;
    box-shadow: none;
    padding-left: 25px;
}

.bottom-menu[b-qgnjcr0nl4] {
    padding: 24px 12px;
    border-top: 1px solid rgba(118, 183, 169, 0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.logout-btn[b-qgnjcr0nl4] {
    width: 100%;
    color: #EF7B7B;
}

.logout-btn:hover[b-qgnjcr0nl4] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #F87171;
}

/* ===== MAIN CONTENT ===== */
.main-content[b-qgnjcr0nl4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* ===== CONTENT AREA ===== */
.content-area[b-qgnjcr0nl4] {
    padding: 40px;
    flex: 1;
}

/* Language Dropdown */
.lang-dropdown-wrapper[b-qgnjcr0nl4] {
    position: relative;
    outline: none;
}

.lang-dropdown-btn[b-qgnjcr0nl4] {
    background: rgba(118, 183, 169, 0.1);
    border: 1px solid rgba(118, 183, 169, 0.15);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #A7D8CB;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.lang-dropdown-btn:hover[b-qgnjcr0nl4] {
    background: rgba(118, 183, 169, 0.18);
}

.dropdown-arrow[b-qgnjcr0nl4] {
    font-size: 10px;
    color: rgba(167, 216, 203, 0.5);
    transition: transform 0.2s ease;
}

.dropdown-arrow.open[b-qgnjcr0nl4] {
    transform: rotate(180deg);
}

.lang-dropdown-menu[b-qgnjcr0nl4] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #162220;
    border: 1px solid rgba(118, 183, 169, 0.15);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    padding: 6px;
    display: flex;
    flex-direction: column;
    min-width: 140px;
    z-index: 100;
}

.lang-item[b-qgnjcr0nl4] {
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: rgba(167, 216, 203, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-item:hover:not(:disabled)[b-qgnjcr0nl4] {
    background: rgba(118, 183, 169, 0.1);
    color: #A7D8CB;
}

.lang-item.active[b-qgnjcr0nl4] {
    background: rgba(118, 183, 169, 0.12);
    color: #76B7A9;
    font-weight: 500;
}

.lang-item:disabled[b-qgnjcr0nl4] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Avatar */
.avatar[b-qgnjcr0nl4] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(118, 183, 169, 0.35) 0%, rgba(118, 183, 169, 0.55) 100%);
    border: 1px solid rgba(167, 216, 203, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E6F5F0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
                0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.avatar:hover[b-qgnjcr0nl4] {
    background: linear-gradient(135deg, rgba(118, 183, 169, 0.55) 0%, rgba(118, 183, 169, 0.75) 100%);
    border-color: rgba(167, 216, 203, 0.8);
    transform: translateY(-1px);
}

.avatar svg[b-qgnjcr0nl4] {
    stroke: #E6F5F0;
    width: 20px;
    height: 20px;
}

/* Welcome card (used on Settings page etc.) */
[b-qgnjcr0nl4] .welcome-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(118, 183, 169, 0.1);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
}

[b-qgnjcr0nl4] .welcome-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #FFFFFF;
    font-size: 24px;
}

[b-qgnjcr0nl4] .welcome-card p {
    margin: 0;
    color: rgba(230, 245, 240, 0.8);
    font-size: 16px;
}

/* ===== MOBILE RESPONSIVENESS ===== */
.mobile-menu-toggle[b-qgnjcr0nl4] {
    display: none;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: #A7D8CB;
    cursor: pointer;
    padding: 0;
    margin-right: 8px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mobile-menu-toggle:hover[b-qgnjcr0nl4] {
    background: rgba(118, 183, 169, 0.1);
    color: #72CDB8;
}

.mobile-menu-toggle.open[b-qgnjcr0nl4] {
    background:
        radial-gradient(circle at 50% 28%, rgba(178, 244, 228, 0.22), transparent 62%),
        rgba(118, 183, 169, 0.11);
    color: #58B9A5;
    box-shadow: 0 0 0 1px rgba(118, 183, 169, 0.12) inset;
}

.mobile-menu-toggle:active[b-qgnjcr0nl4] {
    transform: scale(0.96);
}

.mobile-menu-toggle:focus-visible[b-qgnjcr0nl4] {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(118, 183, 169, 0.20),
        0 0 0 1px rgba(118, 183, 169, 0.18) inset;
}

.mountain-toggle-mark[b-qgnjcr0nl4] {
    position: relative;
    display: block;
    width: 28px;
    height: 24px;
    filter: drop-shadow(0 4px 8px rgba(82, 160, 143, 0.16));
}

.mountain-toggle-mark[b-qgnjcr0nl4]::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 7px;
    width: 20px;
    height: 13px;
    background: linear-gradient(135deg, rgba(162, 217, 206, 0.42), rgba(82, 160, 143, 0.10));
    clip-path: polygon(0 100%, 44% 8%, 58% 44%, 100% 100%);
    opacity: 0;
    transform: translateY(4px) scale(0.68);
    transform-origin: 50% 100%;
    transition: opacity 0.32s ease, transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

.mountain-stroke[b-qgnjcr0nl4] {
    position: absolute;
    left: 5px;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 1px 5px rgba(82, 160, 143, 0.20);
    transform-origin: center;
    transition:
        top 0.54s cubic-bezier(0.16, 1, 0.3, 1),
        left 0.54s cubic-bezier(0.16, 1, 0.3, 1),
        width 0.54s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.22s ease,
        transform 0.54s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.25s ease;
}

.stroke-top[b-qgnjcr0nl4] {
    top: 5px;
}

.stroke-mid[b-qgnjcr0nl4] {
    top: 11px;
}

.stroke-bottom[b-qgnjcr0nl4] {
    top: 17px;
}

.mountain-summit[b-qgnjcr0nl4] {
    position: absolute;
    left: 12px;
    top: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #F8FFFC;
    box-shadow:
        0 0 0 3px rgba(162, 217, 206, 0.12),
        0 0 12px rgba(162, 217, 206, 0.75);
    opacity: 0;
    transform: scale(0.35);
    transition: opacity 0.22s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu-toggle.open .mountain-toggle-mark[b-qgnjcr0nl4]::before {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.mobile-menu-toggle.open .stroke-top[b-qgnjcr0nl4] {
    top: 16px;
    left: 5px;
    width: 14px;
    transform: rotate(-52deg);
    transform-origin: left center;
}

.mobile-menu-toggle.open .stroke-mid[b-qgnjcr0nl4] {
    top: 6px;
    left: 12px;
    width: 15px;
    transform: rotate(52deg);
    transform-origin: left center;
}

.mobile-menu-toggle.open .stroke-bottom[b-qgnjcr0nl4] {
    top: 18px;
    left: 5px;
    width: 18px;
    opacity: 0.92;
    transform: translateY(-1px) scaleX(0.86);
    background: linear-gradient(90deg, rgba(167, 216, 203, 0.20), currentColor 24%, currentColor 76%, rgba(167, 216, 203, 0.20));
}

.mobile-menu-toggle.open .mountain-summit[b-qgnjcr0nl4] {
    opacity: 1;
    transform: scale(1);
    animation: summitBlink-b-qgnjcr0nl4 1.8s ease-in-out infinite;
}

@keyframes summitBlink-b-qgnjcr0nl4 {
    0%, 100% {
        transform: scale(0.86);
        opacity: 0.72;
    }
    45% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mountain-toggle-mark[b-qgnjcr0nl4]::before,
    .mountain-stroke[b-qgnjcr0nl4],
    .mountain-summit[b-qgnjcr0nl4] {
        transition-duration: 0.01ms;
        animation: none;
    }
}

.sidebar-overlay[b-qgnjcr0nl4] {
    display: none;
}

@media (max-width: 768px) {
    .mobile-menu-toggle[b-qgnjcr0nl4] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .topbar-brand[b-qgnjcr0nl4] {
        width: auto;
        border-right: none;
        padding: 0 16px;
    }

    .topbar-title[b-qgnjcr0nl4] {
        padding-left: 16px;
    }

    .sidebar[b-qgnjcr0nl4] {
        position: fixed;
        top: 56px;
        left: -260px;
        height: calc(100vh - 56px);
        z-index: 50;
        transition: left 0.3s ease;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3);
    }

    .sidebar.open[b-qgnjcr0nl4] {
        left: 0;
    }

    .sidebar-overlay[b-qgnjcr0nl4] {
        display: block;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 40;
        backdrop-filter: blur(2px);
    }
    
    .content-area[b-qgnjcr0nl4] {
        padding: 20px;
    }
}

/* Refreshed shell contrast */
.dashboard-layout[b-qgnjcr0nl4] {
    background: #F8FBFA;
    color: #1A332B;
}

.topbar[b-qgnjcr0nl4] {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(118, 183, 169, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.topbar-brand[b-qgnjcr0nl4] {
    background: #FFFFFF;
}

.brand-text[b-qgnjcr0nl4] {
    background-color: #3B6B5D;
    background-image: linear-gradient(-40deg, transparent 0%, transparent 38%, rgba(255,255,255,0.8) 50%, transparent 62%, transparent 100%);
    text-shadow: none;
}

.topbar-title h2[b-qgnjcr0nl4] {
    color: #1A332B;
    text-shadow: none;
}

.sidebar[b-qgnjcr0nl4] {
    background: #FFFFFF;
    border-right: 1px solid rgba(118, 183, 169, 0.2);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.03);
}

.nav-item[b-qgnjcr0nl4] {
    color: #4A6B62;
}

.nav-item:hover[b-qgnjcr0nl4] {
    background-color: rgba(118, 183, 169, 0.1);
    color: #1A332B;
}

.nav-item.active[b-qgnjcr0nl4] {
    background: linear-gradient(135deg, rgba(118, 183, 169, 0.2), rgba(74, 139, 122, 0.1));
    border-color: rgba(118, 183, 169, 0.3);
    color: #1A332B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.bottom-menu[b-qgnjcr0nl4] {
    border-top: 1px solid rgba(118, 183, 169, 0.2);
}

.bottom-menu .nav-group[b-qgnjcr0nl4] {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.main-content[b-qgnjcr0nl4] {
    background: transparent;
}

.content-area[b-qgnjcr0nl4] {
    padding: 42px 48px;
}

.lang-dropdown-btn[b-qgnjcr0nl4] {
    background: #FFFFFF;
    border-color: rgba(118, 183, 169, 0.3);
    color: #1A332B;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.lang-dropdown-btn:hover[b-qgnjcr0nl4] {
    background: rgba(118, 183, 169, 0.05);
}

.lang-dropdown-btn .dropdown-arrow[b-qgnjcr0nl4] {
    color: rgba(26, 51, 43, 0.6);
}

.lang-dropdown-menu[b-qgnjcr0nl4] {
    background: #FFFFFF;
    border-color: rgba(118, 183, 169, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.lang-dropdown-menu .lang-item[b-qgnjcr0nl4] {
    color: #4A6B62;
}

.lang-dropdown-menu .lang-item:hover:not(:disabled)[b-qgnjcr0nl4] {
    background: rgba(118, 183, 169, 0.1);
    color: #1A332B;
}

.lang-dropdown-menu .lang-item.active[b-qgnjcr0nl4] {
    background: rgba(118, 183, 169, 0.12);
    color: #1A332B;
    font-weight: 600;
}

.avatar[b-qgnjcr0nl4] {
    background: linear-gradient(135deg, #E6F5F0, #A7D8CB);
    border-color: rgba(118, 183, 169, 0.4);
    color: #1A332B;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
}

@media (max-width: 768px) {
    .content-area[b-qgnjcr0nl4] {
        padding: 20px;
    }
}

/* ===== PROFILE POPOVER ===== */
.user-profile[b-qgnjcr0nl4] {
    position: relative;
}

.profile-trigger[b-qgnjcr0nl4] {
    padding: 0;
    appearance: none;
}

.profile-trigger.open[b-qgnjcr0nl4],
.profile-trigger:focus-visible[b-qgnjcr0nl4] {
    outline: none;
    border-color: rgba(203, 248, 236, 0.95);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.28),
        0 0 0 3px rgba(128, 214, 195, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

.avatar-emoji[b-qgnjcr0nl4] {
    font-size: 1.72rem;
    line-height: 1;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.24));
}

.profile-popover[b-qgnjcr0nl4] {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: min(360px, calc(100vw - 32px));
    padding: 1rem;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1px solid rgba(118, 183, 169, 0.2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 1100;
    animation: profilePop-b-qgnjcr0nl4 0.18s ease-out;
}

.profile-popover[b-qgnjcr0nl4]::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: #FFFFFF;
    border-left: 1px solid rgba(118, 183, 169, 0.2);
    border-top: 1px solid rgba(118, 183, 169, 0.2);
    transform: rotate(45deg);
}

@keyframes profilePop-b-qgnjcr0nl4 {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.profile-popover-head[b-qgnjcr0nl4] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(118, 183, 169, 0.15);
}

.profile-close-btn[b-qgnjcr0nl4] {
    margin-left: auto;
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: all 0.2s;
}

.profile-close-btn:hover[b-qgnjcr0nl4] {
    background: rgba(118, 183, 169, 0.1);
    color: #1A332B;
}

.profile-preview[b-qgnjcr0nl4] {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #E6F5F0, #A7D8CB);
    border: 1px solid rgba(118, 183, 169, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.profile-preview .avatar-emoji[b-qgnjcr0nl4] {
    font-size: 2.48rem;
}

.profile-title-block[b-qgnjcr0nl4] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.profile-title-block span[b-qgnjcr0nl4],
.profile-section-label[b-qgnjcr0nl4],
.profile-field label[b-qgnjcr0nl4] {
    color: #4A6B62;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.profile-title-block strong[b-qgnjcr0nl4] {
    color: #1A332B;
    font-size: 1.05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-field[b-qgnjcr0nl4],
.profile-section[b-qgnjcr0nl4] {
    margin-top: 1rem;
}

.profile-field[b-qgnjcr0nl4] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.profile-name-row[b-qgnjcr0nl4] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.55rem;
}

.profile-name-row input[b-qgnjcr0nl4] {
    min-width: 0;
    border: 1px solid rgba(118, 183, 169, 0.3);
    border-radius: 12px;
    padding: 0.72rem 0.85rem;
    background: #FFFFFF;
    color: #1A332B;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.profile-name-row input[b-qgnjcr0nl4]::placeholder {
    color: rgba(74, 107, 98, 0.5);
}

.profile-name-row input:focus[b-qgnjcr0nl4] {
    border-color: #76B7A9;
    background: #F8FBFA;
    box-shadow: 0 0 0 3px rgba(118, 183, 169, 0.15);
}

.profile-save-btn[b-qgnjcr0nl4] {
    border: none;
    border-radius: 12px;
    padding: 0 0.95rem;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    background: linear-gradient(135deg, #72CDB8 0%, #4F9D8F 52%, #3D7F73 100%);
    cursor: pointer;
    box-shadow:
        0 12px 26px rgba(75, 170, 151, 0.24),
        0 1px 0 rgba(255, 255, 255, 0.20) inset;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.profile-save-btn:hover[b-qgnjcr0nl4] {
    transform: translateY(-1px);
    box-shadow:
        0 16px 30px rgba(75, 170, 151, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.22) inset;
}

.profile-section[b-qgnjcr0nl4] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.emoji-grid[b-qgnjcr0nl4] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.emoji-choice[b-qgnjcr0nl4] {
    aspect-ratio: 1;
    border: 1px solid rgba(118, 183, 169, 0.2);
    border-radius: 14px;
    background: #F8FBFA;
    cursor: pointer;
    font-size: 1.78rem;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.emoji-choice:hover[b-qgnjcr0nl4] {
    transform: translateY(-2px);
    border-color: rgba(118, 183, 169, 0.4);
    background: #FFFFFF;
}

.emoji-choice.selected[b-qgnjcr0nl4] {
    border-color: #76B7A9;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.05),
        0 0 0 3px rgba(118, 183, 169, 0.15);
}

.profile-status[b-qgnjcr0nl4] {
    margin-top: 0.85rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.35;
}

.profile-status.success[b-qgnjcr0nl4] {
    background: rgba(128, 214, 195, 0.13);
    color: #A8F0DE;
    border: 1px solid rgba(128, 214, 195, 0.18);
}

.profile-status.error[b-qgnjcr0nl4] {
    background: rgba(239, 123, 123, 0.12);
    color: #FFB1B1;
    border: 1px solid rgba(239, 123, 123, 0.22);
}

/* Mobile Profile Language Selector */
.lang-selector-mobile[b-qgnjcr0nl4] {
    display: none;
    margin-bottom: 1.25rem;
}

.lang-btn-row[b-qgnjcr0nl4] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.lang-btn[b-qgnjcr0nl4] {
    flex: 1;
    padding: 0.65rem;
    border-radius: 12px;
    border: 1px solid rgba(118, 183, 169, 0.3);
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4A6B62;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.lang-btn:hover[b-qgnjcr0nl4] {
    background: rgba(118, 183, 169, 0.08);
}

.lang-btn.active[b-qgnjcr0nl4] {
    background: rgba(118, 183, 169, 0.15);
    border-color: #3B6B5D;
    color: #1A332B;
    font-weight: 600;
}

@media (max-width: 768px) {
    .profile-popover[b-qgnjcr0nl4] {
        position: fixed;
        top: 66px;
        right: 12px;
        width: min(360px, calc(100vw - 24px));
    }
    
    .lang-dropdown-wrapper[b-qgnjcr0nl4] {
        display: none;
    }
    
    .lang-selector-mobile[b-qgnjcr0nl4] {
        display: block;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-r229ija28m] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-r229ija28m] {
    flex: 1;
}

.sidebar[b-r229ija28m] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-r229ija28m] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-r229ija28m]  a, .top-row[b-r229ija28m]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-r229ija28m]  a:hover, .top-row[b-r229ija28m]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-r229ija28m]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-r229ija28m] {
        justify-content: space-between;
    }

    .top-row[b-r229ija28m]  a, .top-row[b-r229ija28m]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-r229ija28m] {
        flex-direction: row;
    }

    .sidebar[b-r229ija28m] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-r229ija28m] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-r229ija28m]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-r229ija28m], article[b-r229ija28m] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-r229ija28m] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-r229ija28m] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-q4f6sb4056],
.components-reconnect-repeated-attempt-visible[b-q4f6sb4056],
.components-reconnect-failed-visible[b-q4f6sb4056],
.components-pause-visible[b-q4f6sb4056],
.components-resume-failed-visible[b-q4f6sb4056],
.components-rejoining-animation[b-q4f6sb4056] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-q4f6sb4056],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-q4f6sb4056],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-q4f6sb4056],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-q4f6sb4056],
#components-reconnect-modal.components-reconnect-retrying[b-q4f6sb4056],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-q4f6sb4056],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-q4f6sb4056],
#components-reconnect-modal.components-reconnect-failed[b-q4f6sb4056],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-q4f6sb4056] {
    display: block;
}


#components-reconnect-modal[b-q4f6sb4056] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-q4f6sb4056 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-q4f6sb4056 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-q4f6sb4056 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-q4f6sb4056]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-q4f6sb4056 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-q4f6sb4056 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-q4f6sb4056 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-q4f6sb4056 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-q4f6sb4056] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-q4f6sb4056] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-q4f6sb4056] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-q4f6sb4056] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-q4f6sb4056] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-q4f6sb4056] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-q4f6sb4056] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-q4f6sb4056 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-q4f6sb4056] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-q4f6sb4056 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
.about-content[b-s3myo4p9nm] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1180px;
    margin: 0 auto;
}

.about-hero[b-s3myo4p9nm] {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr);
    gap: 2rem;
    align-items: center;
    min-height: 380px;
}

.about-hero-copy[b-s3myo4p9nm] {
    max-width: 720px;
}

.about-eyebrow[b-s3myo4p9nm],
.about-section-kicker[b-s3myo4p9nm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #3E7F70;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-eyebrow[b-s3myo4p9nm]::before,
.about-section-kicker[b-s3myo4p9nm]::before {
    content: "";
    width: 0.54rem;
    height: 0.54rem;
    border-radius: 50%;
    background: #72CDB8;
    box-shadow: 0 0 18px rgba(114, 205, 184, 0.56);
}

.about-hero h1[b-s3myo4p9nm] {
    max-width: 680px;
    margin: 0.7rem 0 1rem;
    color: #14362E;
    font-size: clamp(2.5rem, 6vw, 5.15rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.about-hero p[b-s3myo4p9nm],
.about-story-main p[b-s3myo4p9nm],
.about-ai-band p[b-s3myo4p9nm],
.about-data-copy p[b-s3myo4p9nm],
.about-ending p[b-s3myo4p9nm] {
    color: #435F58;
    font-size: 1.03rem;
    line-height: 1.72;
}

.about-hero p[b-s3myo4p9nm] {
    max-width: 620px;
    margin: 0;
    font-size: 1.12rem;
}

.about-signal[b-s3myo4p9nm] {
    position: relative;
    min-height: 330px;
    display: grid;
    place-items: center;
}

.about-signal-ring[b-s3myo4p9nm] {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(79, 157, 143, 0.20);
}

.ring-one[b-s3myo4p9nm] {
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,0.80), rgba(180, 236, 223, 0.18), transparent 68%);
}

.ring-two[b-s3myo4p9nm] {
    width: 182px;
    height: 182px;
    border-style: dashed;
    animation: aboutSpin-b-s3myo4p9nm 18s linear infinite;
}

.about-signal-core[b-s3myo4p9nm] {
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    border-radius: 36px;
    color: #FFFFFF;
    font-size: 4.2rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(145deg, #80D6C3, #3E8C7E);
    box-shadow:
        0 24px 52px rgba(74, 139, 122, 0.22),
        0 1px 0 rgba(255,255,255,0.38) inset;
    transform: rotate(-8deg);
    animation: aboutCoreFloat-b-s3myo4p9nm 7s ease-in-out infinite;
    will-change: transform;
}

.about-signal-note[b-s3myo4p9nm] {
    position: absolute;
    padding: 0.42rem 0.68rem;
    border-radius: 999px;
    color: #37695F;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(118, 183, 169, 0.20);
    box-shadow: 0 10px 24px rgba(74, 139, 122, 0.10);
    font-size: 0.78rem;
    font-weight: 800;
}

.note-one[b-s3myo4p9nm] { top: 46px; left: 52px; }
.note-two[b-s3myo4p9nm] { right: 28px; top: 118px; }
.note-three[b-s3myo4p9nm] { bottom: 56px; left: 86px; }

.about-pillars[b-s3myo4p9nm] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.about-pillar[b-s3myo4p9nm],
.about-steps li[b-s3myo4p9nm] {
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 22px;
    box-shadow:
        0 16px 40px rgba(74, 139, 122, 0.08),
        0 1px 0 rgba(255,255,255,0.55) inset;
    backdrop-filter: blur(22px);
}

.about-pillar[b-s3myo4p9nm] {
    padding: 1.1rem;
}

.pillar-icon[b-s3myo4p9nm] {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 16px;
    margin-bottom: 0.8rem;
    background: rgba(118, 183, 169, 0.13);
    font-size: 1.35rem;
}

.about-pillar h2[b-s3myo4p9nm] {
    margin: 0 0 0.45rem;
    color: #173B31;
    font-size: 1.05rem;
    line-height: 1.25;
}

.about-pillar p[b-s3myo4p9nm] {
    margin: 0;
    color: #526F67;
    line-height: 1.55;
}

.about-story[b-s3myo4p9nm],
.about-data[b-s3myo4p9nm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    gap: 1.2rem;
    align-items: start;
    padding: 1.5rem;
    border-radius: 30px;
    background:
        radial-gradient(ellipse at 82% 18%, rgba(114, 205, 184, 0.17), transparent 45%),
        rgba(255,255,255,0.36);
    border: 1px solid rgba(255,255,255,0.62);
}

.about-story-main h2[b-s3myo4p9nm],
.about-ai-band h2[b-s3myo4p9nm],
.about-data-copy h2[b-s3myo4p9nm],
.about-ending h2[b-s3myo4p9nm] {
    margin: 0.55rem 0 0.75rem;
    color: #173B31;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.about-story-main p[b-s3myo4p9nm],
.about-ai-band p[b-s3myo4p9nm],
.about-data-copy p[b-s3myo4p9nm],
.about-ending p[b-s3myo4p9nm] {
    margin: 0 0 0.9rem;
}

.about-steps[b-s3myo4p9nm] {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-steps li[b-s3myo4p9nm] {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 0.78rem;
    align-items: start;
    padding: 0.95rem;
}

.about-steps li > span[b-s3myo4p9nm] {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    color: #FFFFFF;
    background: linear-gradient(135deg, #72CDB8, #4F9D8F);
    font-weight: 900;
}

.about-steps strong[b-s3myo4p9nm] {
    display: block;
    color: #173B31;
    margin-bottom: 0.2rem;
}

.about-steps p[b-s3myo4p9nm] {
    margin: 0;
    color: #526F67;
    line-height: 1.5;
}

.about-ai-band[b-s3myo4p9nm],
.about-ending[b-s3myo4p9nm] {
    padding: 1.5rem;
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(18, 54, 45, 0.94), rgba(47, 110, 96, 0.88)),
        #173B31;
    box-shadow: 0 22px 46px rgba(20, 54, 46, 0.18);
}

.about-ai-band[b-s3myo4p9nm] {
    display: grid;
    grid-template-columns: minmax(220px, 0.68fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.about-ai-band h2[b-s3myo4p9nm] {
    font-size: clamp(1.45rem, 2.45vw, 2.05rem);
}

.about-ai-band .about-section-kicker[b-s3myo4p9nm],
.about-ending .about-section-kicker[b-s3myo4p9nm] {
    color: #BFEDE1;
}

.about-ai-band h2[b-s3myo4p9nm],
.about-ai-band p[b-s3myo4p9nm],
.about-ending h2[b-s3myo4p9nm],
.about-ending p[b-s3myo4p9nm] {
    color: #F5FFFC;
}

.about-ai-band p[b-s3myo4p9nm],
.about-ending p[b-s3myo4p9nm] {
    opacity: 0.84;
}

.about-data-list[b-s3myo4p9nm] {
    display: grid;
    gap: 0.7rem;
}

.about-data-list div[b-s3myo4p9nm] {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0.7rem;
    align-items: center;
    padding: 0.82rem;
    border-radius: 18px;
    color: #345F56;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(118, 183, 169, 0.16);
}

.about-data-list span[b-s3myo4p9nm] {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: #FFFFFF;
    background: #4F9D8F;
    font-weight: 900;
}

.about-ending[b-s3myo4p9nm] {
    max-width: 860px;
}

.about-ending p[b-s3myo4p9nm] {
    max-width: 740px;
}

@keyframes aboutSpin-b-s3myo4p9nm {
    to { transform: rotate(360deg); }
}

@keyframes aboutCoreFloat-b-s3myo4p9nm {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-8deg);
    }
    28% {
        transform: translate3d(4px, -7px, 0) rotate(-6deg);
    }
    58% {
        transform: translate3d(-3px, 5px, 0) rotate(-10deg);
    }
    78% {
        transform: translate3d(3px, -3px, 0) rotate(-7deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-signal-core[b-s3myo4p9nm] {
        animation: none;
    }
}

@media (max-width: 900px) {
    .about-hero[b-s3myo4p9nm],
    .about-story[b-s3myo4p9nm],
    .about-data[b-s3myo4p9nm],
    .about-ai-band[b-s3myo4p9nm] {
        grid-template-columns: 1fr;
    }

    .about-signal[b-s3myo4p9nm] {
        min-height: 260px;
        order: -1;
    }

    .about-pillars[b-s3myo4p9nm] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .about-content[b-s3myo4p9nm] {
        gap: 1rem;
    }

    .about-hero[b-s3myo4p9nm] {
        gap: 1rem;
        min-height: auto;
    }

    .about-hero h1[b-s3myo4p9nm] {
        font-size: 2.55rem;
    }

    .about-signal[b-s3myo4p9nm] {
        min-height: 220px;
    }

    .ring-one[b-s3myo4p9nm] {
        width: 210px;
        height: 210px;
    }

    .ring-two[b-s3myo4p9nm] {
        width: 148px;
        height: 148px;
    }

    .about-signal-core[b-s3myo4p9nm] {
        width: 86px;
        height: 86px;
        border-radius: 30px;
        font-size: 3.45rem;
    }

    /* Keep the lyssna / reflektera / nästa steg pills visible on mobile
       too — they're part of what makes the hero feel alive. The desktop
       absolute-pixel positions don't fit the smaller mobile circle
       (210×210 ring + 86×86 core), so we re-anchor them using percentages
       relative to the signal box and shrink the pill slightly. */
    .about-signal-note[b-s3myo4p9nm] {
        font-size: 0.7rem;
        padding: 0.32rem 0.6rem;
    }
    .note-one[b-s3myo4p9nm]   { top: 14%; left: 8%;  right: auto; bottom: auto; }
    .note-two[b-s3myo4p9nm]   { top: 44%; right: 6%; left: auto;  bottom: auto; }
    .note-three[b-s3myo4p9nm] { bottom: 12%; left: 16%; top: auto; right: auto; }

    .about-story[b-s3myo4p9nm],
    .about-data[b-s3myo4p9nm],
    .about-ai-band[b-s3myo4p9nm],
    .about-ending[b-s3myo4p9nm] {
        padding: 1.05rem;
        border-radius: 24px;
    }
}
/* /Components/Pages/AiConfigWizard.razor.rz.scp.css */
/* Wizard Layout */
.wizard-container[b-r0vmdhi9jd] {
    max-width: 700px;
    margin: 2rem auto;
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(44, 62, 80, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 600px;
    border: 1px solid rgba(162, 217, 206, 0.3);
}

/* Header */
.wizard-header[b-r0vmdhi9jd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #F1F5F9;
}

.btn-back[b-r0vmdhi9jd], .btn-close[b-r0vmdhi9jd] {
    background: none;
    border: none;
    color: #64748B;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
}

.btn-back:hover:not(:disabled)[b-r0vmdhi9jd], .btn-close:hover[b-r0vmdhi9jd] {
    color: #2C3E50;
}

.btn-back:disabled[b-r0vmdhi9jd] {
    opacity: 0.3;
    cursor: default;
}

.progress-indicator[b-r0vmdhi9jd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-grow: 1;
    max-width: 300px;
}

.progress-bar[b-r0vmdhi9jd] {
    width: 100%;
    height: 6px;
    background: #F1F5F9;
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill[b-r0vmdhi9jd] {
    height: 100%;
    background: linear-gradient(90deg, #A2D9CE 0%, #76B7A9 100%);
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 10px;
}

.progress-text[b-r0vmdhi9jd] {
    font-size: 0.8rem;
    color: #94A3B8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Body */
.wizard-body[b-r0vmdhi9jd] {
    flex-grow: 1;
    padding: 3rem 4rem;
}

.step-content[b-r0vmdhi9jd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fade-in[b-r0vmdhi9jd] {
    animation: fadeInStep-b-r0vmdhi9jd 0.4s ease forwards;
}

@keyframes fadeInStep-b-r0vmdhi9jd {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-icon[b-r0vmdhi9jd] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.step-content h2[b-r0vmdhi9jd] {
    color: #2C3E50;
    font-weight: 700;
    font-size: 1.8rem;
    margin: 0 0 1rem 0;
}

.step-desc[b-r0vmdhi9jd] {
    color: #64748B;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 500px;
}

/* Options Grid (Step 1) */
.options-grid[b-r0vmdhi9jd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
}

.option-card[b-r0vmdhi9jd] {
    background: #F8FAFC;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 1.5rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.option-card:hover[b-r0vmdhi9jd] {
    background: #F1F5F9;
    transform: translateY(-2px);
}

.option-card.selected[b-r0vmdhi9jd] {
    background: rgba(118, 183, 169, 0.1);
    border-color: #76B7A9;
    box-shadow: 0 4px 15px rgba(118, 183, 169, 0.2);
}

.opt-icon[b-r0vmdhi9jd] {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.option-card h4[b-r0vmdhi9jd] {
    color: #2C3E50;
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
}

.option-card p[b-r0vmdhi9jd] {
    color: #64748B;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* Pills (Step 2) */
.pillars-container[b-r0vmdhi9jd] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    max-width: 550px;
}

.pillar-pill[b-r0vmdhi9jd] {
    background: #F1F5F9;
    border: 2px solid transparent;
    border-radius: 30px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    color: #475569;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pillar-pill:hover[b-r0vmdhi9jd] {
    background: #E2E8F0;
}

.pillar-pill.selected[b-r0vmdhi9jd] {
    background: #76B7A9;
    color: white;
    box-shadow: 0 4px 12px rgba(118, 183, 169, 0.3);
}

.check[b-r0vmdhi9jd] {
    font-weight: bold;
}

.error-text[b-r0vmdhi9jd] {
    color: #EF4444;
    margin-top: 1.5rem;
    font-weight: 500;
}

/* Integration Cards (Step 4) */
.integration-cards[b-r0vmdhi9jd] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 500px;
    margin-bottom: 2rem;
}

.integration-card[b-r0vmdhi9jd] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.2rem 1.5rem;
    position: relative;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.integration-card:hover[b-r0vmdhi9jd] {
    background: #F1F5F9;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(118, 183, 169, 0.15);
    border-color: #76B7A9;
}

.integration-card.disabled[b-r0vmdhi9jd] {
    opacity: 0.7;
    cursor: not-allowed;
}

.integration-card.disabled:hover[b-r0vmdhi9jd] {
    transform: none;
    box-shadow: none;
    border-color: #E2E8F0;
    background: #F8FAFC;
}

.integration-icon[b-r0vmdhi9jd] {
    font-size: 2.5rem;
}

.integration-info[b-r0vmdhi9jd] {
    text-align: left;
    flex-grow: 1;
}

.integration-info h4[b-r0vmdhi9jd] {
    margin: 0 0 0.25rem 0;
    color: #2C3E50;
    font-size: 1.1rem;
}

.integration-info p[b-r0vmdhi9jd] {
    margin: 0;
    color: #64748B;
    font-size: 0.9rem;
}

.badge-connect[b-r0vmdhi9jd] {
    background: rgba(118, 183, 169, 0.15);
    color: #3B6B5D;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
    transition: all 0.2s;
}

.integration-card:hover .badge-connect[b-r0vmdhi9jd] {
    background: #76B7A9;
    color: white;
}

.badge-soon[b-r0vmdhi9jd] {
    position: absolute;
    top: -10px;
    right: 20px;
    background: #2C3E50;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    text-transform: uppercase;
}

.info-box[b-r0vmdhi9jd] {
    display: flex;
    gap: 1rem;
    background: rgba(162, 217, 206, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: left;
    max-width: 500px;
    color: #2E7D5B;
    align-items: flex-start;
}

.info-box p[b-r0vmdhi9jd] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.info-box.warning[b-r0vmdhi9jd] {
    background: #FFFBEB;
    color: #B45309;
    margin-top: 2rem;
}

/* Consent (Step 4) */
.consent-box[b-r0vmdhi9jd] {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.5rem;
    width: 100%;
    max-width: 550px;
    text-align: left;
}

.checkbox-container[b-r0vmdhi9jd] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    cursor: pointer;
    position: relative;
}

.checkbox-container input[b-r0vmdhi9jd] {
    opacity: 0;
    position: absolute;
}

.checkmark[b-r0vmdhi9jd] {
    min-width: 24px;
    height: 24px;
    background: #FFFFFF;
    border: 2px solid #CBD5E1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-top: 2px;
}

.checkbox-container input:checked ~ .checkmark[b-r0vmdhi9jd] {
    background: #76B7A9;
    border-color: #76B7A9;
}

.checkbox-container input:checked ~ .checkmark[b-r0vmdhi9jd]:after {
    content: "✓";
    color: white;
    font-weight: bold;
}

.checkbox-text[b-r0vmdhi9jd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.checkbox-text strong[b-r0vmdhi9jd] {
    color: #2C3E50;
    font-size: 1.05rem;
}

.checkbox-text span[b-r0vmdhi9jd] {
    color: #64748B;
    font-size: 0.9rem;
    line-height: 1.4;
}

.settings-hint[b-r0vmdhi9jd] {
    font-size: 0.85rem;
    color: #94A3B8;
    margin-top: 2.5rem;
    max-width: 500px;
}

/* Footer */
.wizard-footer[b-r0vmdhi9jd] {
    padding: 1.5rem 2rem;
    border-top: 1px solid #F1F5F9;
    display: flex;
    justify-content: flex-end;
}

.btn-primary[b-r0vmdhi9jd] {
    background: linear-gradient(135deg, #A2D9CE 0%, #76B7A9 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0.85rem 2rem;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(118, 183, 169, 0.25);
}

.btn-primary:hover:not(:disabled)[b-r0vmdhi9jd] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(118, 183, 169, 0.4);
}

.btn-primary:disabled[b-r0vmdhi9jd] {
    background: #E2E8F0;
    color: #94A3B8;
    box-shadow: none;
    cursor: not-allowed;
}

.btn-primary.success[b-r0vmdhi9jd] {
    background: #2C3E50;
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);
}

.btn-primary.success:hover[b-r0vmdhi9jd] {
    background: #1A252F;
    box-shadow: 0 6px 20px rgba(44, 62, 80, 0.4);
}

/* ──────────────────────────────────────────────────────────
   Voice Picker (Step 2)
   ────────────────────────────────────────────────────────── */
.voice-system-note[b-r0vmdhi9jd] {
    width: 100%;
    max-width: 600px;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: #F0F9FF;
    border-left: 3px solid #76B7A9;
    border-radius: 0.5rem;
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.5;
}

.voice-system-note.warning[b-r0vmdhi9jd] {
    background: #FFFBEB;
    border-left-color: #E0A458;
    color: #78350F;
}

.voice-system-note.success[b-r0vmdhi9jd] {
    background: #F0FDF4;
    border-left-color: #22C55E;
    color: #166534;
}

.voice-system-note strong[b-r0vmdhi9jd] {
    display: block;
    color: #1E293B;
    margin-bottom: 0.25rem;
}

.voice-system-note.warning strong[b-r0vmdhi9jd] {
    color: #92400E;
}

/* Expandable platform-specific install help */
.voice-help-block[b-r0vmdhi9jd] {
    width: 100%;
    max-width: 600px;
    margin-bottom: 1.25rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #FAFBFC;
}

.voice-help-toggle[b-r0vmdhi9jd] {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    text-align: left;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: #2C3E50;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s;
}

.voice-help-toggle:hover[b-r0vmdhi9jd] { background: #F1F5F9; }

.voice-help-icon[b-r0vmdhi9jd] {
    color: #76B7A9;
    font-size: 0.85rem;
    width: 0.9rem;
    display: inline-block;
}

.voice-help-content[b-r0vmdhi9jd] {
    padding: 0.25rem 1rem 1rem 2.4rem;
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.55;
    border-top: 1px solid #E2E8F0;
    background: #fff;
}

.voice-help-content ol[b-r0vmdhi9jd],
.voice-help-content ul[b-r0vmdhi9jd] {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

.voice-help-content li[b-r0vmdhi9jd] { margin-bottom: 0.4rem; }
.voice-help-content strong[b-r0vmdhi9jd] { color: #1E293B; }
.voice-help-content code[b-r0vmdhi9jd] {
    background: #F1F5F9;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.82rem;
    color: #475569;
}

.voice-help-extra[b-r0vmdhi9jd],
.voice-help-tip[b-r0vmdhi9jd] {
    margin-top: 0.85rem;
    padding: 0.55rem 0.75rem;
    background: #F0F9FF;
    border-left: 2px solid #76B7A9;
    border-radius: 0 0.4rem 0.4rem 0;
    font-size: 0.82rem;
    color: #475569;
}


.voice-grid[b-r0vmdhi9jd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
    max-width: 600px;
}

.voice-card[b-r0vmdhi9jd] {
    position: relative;
    background: #F8FAFC;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 1.1rem 1.1rem 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 180px;
}

.voice-card:hover[b-r0vmdhi9jd] {
    background: #F1F5F9;
    transform: translateY(-2px);
}

.voice-card.selected[b-r0vmdhi9jd] {
    background: rgba(118, 183, 169, 0.10);
    border-color: #76B7A9;
    box-shadow: 0 4px 15px rgba(118, 183, 169, 0.20);
}

.voice-avatar[b-r0vmdhi9jd] {
    font-size: 1.8rem;
    line-height: 1;
}

.voice-meta[b-r0vmdhi9jd] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.voice-meta h4[b-r0vmdhi9jd] {
    color: #2C3E50;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.voice-tags[b-r0vmdhi9jd] {
    color: #94A3B8;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.voice-desc[b-r0vmdhi9jd] {
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0;
    flex: 1;
}

.voice-actions[b-r0vmdhi9jd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.25rem;
}

.voice-preview-btn[b-r0vmdhi9jd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

.voice-preview-btn:hover[b-r0vmdhi9jd] {
    background: #76B7A9;
    border-color: #76B7A9;
    color: #fff;
    transform: translateY(-1px);
}

.voice-preview-btn.playing[b-r0vmdhi9jd] {
    background: linear-gradient(135deg, #E5734F 0%, #E0A458 100%);
    border-color: transparent;
    color: #fff;
    animation: voice-preview-pulse-b-r0vmdhi9jd 1.4s ease-in-out infinite;
}

@keyframes voice-preview-pulse-b-r0vmdhi9jd {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229, 115, 79, 0.45); }
    50% { box-shadow: 0 0 0 6px rgba(229, 115, 79, 0); }
}

.voice-default-badge[b-r0vmdhi9jd] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #76B7A9;
    background: rgba(118, 183, 169, 0.12);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.voice-ai-badge[b-r0vmdhi9jd] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
    margin-right: auto;
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .options-grid[b-r0vmdhi9jd],
    .voice-grid[b-r0vmdhi9jd] {
        grid-template-columns: 1fr;
    }

    .wizard-body[b-r0vmdhi9jd] {
        padding: 2rem 1.5rem;
    }

    .voice-card[b-r0vmdhi9jd] {
        min-height: auto;
    }
}
/* /Components/Pages/ConfirmEmail.razor.rz.scp.css */
.confirm-page[b-qvxagwwke7] {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0F172A; /* Fallback */
}

#neural-canvas[b-qvxagwwke7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.confirm-card[b-qvxagwwke7] {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 48px;
    width: 100%;
    max-width: 480px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-qvxagwwke7 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp-b-qvxagwwke7 {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

.confirm-card h2[b-qvxagwwke7] {
    color: #0F172A;
    font-size: 28px;
    font-weight: 700;
    margin-top: 16px;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
}

.message[b-qvxagwwke7] {
    color: #475569;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.error-text[b-qvxagwwke7] {
    color: #EF4444;
}

.redirect-hint[b-qvxagwwke7] {
    color: #94A3B8;
    font-size: 14px;
    margin-bottom: 32px;
}

.icon-success[b-qvxagwwke7] {
    font-size: 64px;
    margin-bottom: 16px;
    animation: popIn-b-qvxagwwke7 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.icon-error[b-qvxagwwke7] {
    font-size: 64px;
    margin-bottom: 16px;
}

@keyframes popIn-b-qvxagwwke7 {
    0% { transform: scale(0); }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.btn-primary[b-qvxagwwke7] {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    background: #76B7A9;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(118, 183, 169, 0.3);
}

.btn-primary:hover[b-qvxagwwke7] {
    background: #5A9A8C;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(118, 183, 169, 0.4);
}

.spinner-wrapper[b-qvxagwwke7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 0;
}

.spinner-large[b-qvxagwwke7] {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(118, 183, 169, 0.2);
    border-top: 4px solid #76B7A9;
    border-radius: 50%;
    animation: spin-b-qvxagwwke7 1s linear infinite;
}

@keyframes spin-b-qvxagwwke7 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Dashboard Container */
.dash-container[b-oedw388uu3] {
    position: relative;
    min-height: calc(100vh - 80px);
    margin: -40px;
    overflow: hidden;
}

/* ===== ANIMATED BACKGROUND ===== */
.dash-bg[b-oedw388uu3] {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #162A24 0%, #1A302A 25%, #1E352F 50%, #223A34 75%, #1A2E28 100%);
    z-index: 0;
    overflow: hidden;
}

/* Mesh texture overlay */
.bg-mesh[b-oedw388uu3] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(118, 183, 169, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(167, 216, 203, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(232, 213, 196, 0.05) 0%, transparent 50%);
    animation: meshShift-b-oedw388uu3 30s ease-in-out infinite;
}

@keyframes meshShift-b-oedw388uu3 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Gradient Orbs — Flowing Mesh */
.bg-orb[b-oedw388uu3] {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    will-change: transform;
}

.bg-orb-1[b-oedw388uu3] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(118, 183, 169, 0.35) 0%, transparent 70%);
    top: -15%;
    right: -10%;
    animation: drift1-b-oedw388uu3 25s ease-in-out infinite;
}

.bg-orb-2[b-oedw388uu3] {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(74, 139, 122, 0.30) 0%, transparent 70%);
    bottom: -10%;
    left: -8%;
    animation: drift2-b-oedw388uu3 30s ease-in-out infinite;
}

.bg-orb-3[b-oedw388uu3] {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(232, 213, 196, 0.20) 0%, transparent 70%);
    top: 35%;
    left: 45%;
    animation: drift3-b-oedw388uu3 22s ease-in-out infinite;
}

.bg-orb-4[b-oedw388uu3] {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(100, 200, 180, 0.18) 0%, transparent 70%);
    top: 60%;
    right: 15%;
    animation: drift4-b-oedw388uu3 28s ease-in-out infinite;
}

.bg-orb-5[b-oedw388uu3] {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(118, 183, 169, 0.15) 0%, transparent 70%);
    top: 10%;
    left: 20%;
    animation: drift5-b-oedw388uu3 35s ease-in-out infinite;
}

@keyframes drift1-b-oedw388uu3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-40px, 30px) scale(1.08); }
    50% { transform: translate(20px, -20px) scale(0.95); }
    75% { transform: translate(35px, 45px) scale(1.05); }
}

@keyframes drift2-b-oedw388uu3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    30% { transform: translate(50px, -25px) scale(1.1); }
    60% { transform: translate(-30px, 35px) scale(0.9); }
}

@keyframes drift3-b-oedw388uu3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(-25px, -40px) scale(1.06); }
    50% { transform: translate(40px, 20px) scale(0.92); }
    80% { transform: translate(-15px, 30px) scale(1.03); }
}

@keyframes drift4-b-oedw388uu3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    35% { transform: translate(30px, 35px) scale(1.12); }
    65% { transform: translate(-45px, -15px) scale(0.88); }
}

@keyframes drift5-b-oedw388uu3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(25px, -30px) scale(1.15); }
    70% { transform: translate(-20px, 20px) scale(0.95); }
}

/* ===== FLOATING PARTICLES ===== */
.particles[b-oedw388uu3] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.particle[b-oedw388uu3] {
    position: absolute;
    border-radius: 50%;
    background: rgba(118, 183, 169, 0.6);
    box-shadow: 0 0 6px 2px rgba(118, 183, 169, 0.3);
    will-change: transform, opacity;
}

/* Varied sizes */
.p1[b-oedw388uu3], .p5[b-oedw388uu3], .p9[b-oedw388uu3]   { width: 4px; height: 4px; }
.p2[b-oedw388uu3], .p6[b-oedw388uu3], .p10[b-oedw388uu3]  { width: 3px; height: 3px; }
.p3[b-oedw388uu3], .p7[b-oedw388uu3], .p11[b-oedw388uu3]  { width: 5px; height: 5px; }
.p4[b-oedw388uu3], .p8[b-oedw388uu3], .p12[b-oedw388uu3]  { width: 2px; height: 2px; }

/* Varied colors */
.p1[b-oedw388uu3], .p4[b-oedw388uu3], .p7[b-oedw388uu3], .p10[b-oedw388uu3] { background: rgba(118, 183, 169, 0.7); box-shadow: 0 0 8px 3px rgba(118, 183, 169, 0.25); }
.p2[b-oedw388uu3], .p5[b-oedw388uu3], .p8[b-oedw388uu3], .p11[b-oedw388uu3] { background: rgba(167, 216, 203, 0.6); box-shadow: 0 0 6px 2px rgba(167, 216, 203, 0.2); }
.p3[b-oedw388uu3], .p6[b-oedw388uu3], .p9[b-oedw388uu3], .p12[b-oedw388uu3] { background: rgba(232, 213, 196, 0.5); box-shadow: 0 0 8px 3px rgba(232, 213, 196, 0.2); }

/* Position + Animation for each particle */
.p1[b-oedw388uu3]  { left: 8%;  bottom: 20%; animation: rise-b-oedw388uu3 14s ease-in infinite 0s; }
.p2[b-oedw388uu3]  { left: 15%; bottom: 10%; animation: rise-b-oedw388uu3 18s ease-in infinite 2s; }
.p3[b-oedw388uu3]  { left: 25%; bottom: 30%; animation: rise-b-oedw388uu3 12s ease-in infinite 4s; }
.p4[b-oedw388uu3]  { left: 35%; bottom: 5%;  animation: rise-b-oedw388uu3 20s ease-in infinite 1s; }
.p5[b-oedw388uu3]  { left: 45%; bottom: 25%; animation: rise-b-oedw388uu3 16s ease-in infinite 6s; }
.p6[b-oedw388uu3]  { left: 55%; bottom: 15%; animation: rise-b-oedw388uu3 15s ease-in infinite 3s; }
.p7[b-oedw388uu3]  { left: 62%; bottom: 35%; animation: rise-b-oedw388uu3 13s ease-in infinite 8s; }
.p8[b-oedw388uu3]  { left: 72%; bottom: 8%;  animation: rise-b-oedw388uu3 19s ease-in infinite 5s; }
.p9[b-oedw388uu3]  { left: 78%; bottom: 22%; animation: rise-b-oedw388uu3 17s ease-in infinite 7s; }
.p10[b-oedw388uu3] { left: 85%; bottom: 12%; animation: rise-b-oedw388uu3 14s ease-in infinite 9s; }
.p11[b-oedw388uu3] { left: 92%; bottom: 28%; animation: rise-b-oedw388uu3 21s ease-in infinite 2.5s; }
.p12[b-oedw388uu3] { left: 50%; bottom: 18%; animation: rise-b-oedw388uu3 16s ease-in infinite 10s; }

@keyframes rise-b-oedw388uu3 {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.2;
    }
    100% {
        transform: translateY(-85vh) translateX(30px) scale(0.3);
        opacity: 0;
    }
}

/* Pulsing glow on some particles */
.p1[b-oedw388uu3], .p3[b-oedw388uu3], .p5[b-oedw388uu3], .p7[b-oedw388uu3], .p9[b-oedw388uu3], .p11[b-oedw388uu3] {
    animation-name: risePulse-b-oedw388uu3;
}

@keyframes risePulse-b-oedw388uu3 {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    30% {
        transform: translateY(-25vh) translateX(-15px) scale(1.3);
        opacity: 0.8;
    }
    60% {
        transform: translateY(-50vh) translateX(20px) scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: translateY(-90vh) translateX(-10px) scale(0.2);
        opacity: 0;
    }
}

/* ===== LOADING ===== */
.dash-loading[b-oedw388uu3] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vh;
}

.loading-pulse[b-oedw388uu3] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #76B7A9;
    animation: pulse-load-b-oedw388uu3 1.2s ease-in-out infinite;
}

@keyframes pulse-load-b-oedw388uu3 {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* ===== HERO LAYOUT (onboarding / payment) ===== */
.dash-hero[b-oedw388uu3] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 160px);
    padding: 2rem;
}

.hero-card[b-oedw388uu3] {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(118, 183, 169, 0.15);
    border-radius: 1.5rem;
    padding: 3.5rem 4rem;
    text-align: center;
    max-width: 480px;
    width: 100%;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: fadeInUp-b-oedw388uu3 0.6s ease;
}

@keyframes fadeInUp-b-oedw388uu3 {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-icon[b-oedw388uu3] {
    font-size: 4rem;
    margin-bottom: 1.25rem;
    animation: gentle-bounce-b-oedw388uu3 3s ease-in-out infinite;
}

@keyframes gentle-bounce-b-oedw388uu3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero-card h2[b-oedw388uu3] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #E8F5F1;
    margin-bottom: 0.75rem;
}

.hero-card p[b-oedw388uu3] {
    color: rgba(167, 216, 203, 0.75);
    line-height: 1.6;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.btn-hero[b-oedw388uu3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 2rem;
    background: linear-gradient(135deg, #3B6B5D, #4A8B7A);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(59, 107, 93, 0.4);
}

.btn-hero:hover[b-oedw388uu3] {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(59, 107, 93, 0.5);
    background: linear-gradient(135deg, #4A8B7A, #5BA393);
}

.btn-hero .arrow[b-oedw388uu3] {
    transition: transform 0.2s;
}

.btn-hero:hover .arrow[b-oedw388uu3] {
    transform: translateX(4px);
}

.payment-hint[b-oedw388uu3] {
    font-size: 0.8rem !important;
    color: rgba(148, 163, 184, 0.6) !important;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

/* ===== MAIN DASHBOARD CONTENT ===== */
.dash-content[b-oedw388uu3] {
    position: relative;
    z-index: 1;
    padding: 2.5rem 3rem;
    animation: fadeInUp-b-oedw388uu3 0.4s ease;
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Greeting */
.greeting-section[b-oedw388uu3] {
    margin-bottom: 2rem;
}

.greeting-text[b-oedw388uu3] {
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 0.25rem;
}

.greeting-sub[b-oedw388uu3] {
    color: rgba(220, 240, 235, 0.75);
    font-size: 1rem;
    margin: 0;
}

/* Phase 5: Active goals strip ("Du jobbar på") */
.active-goals-strip[b-oedw388uu3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.active-goals-label[b-oedw388uu3] {
    font-size: 0.78rem;
    color: rgba(220, 240, 235, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-left: 0.25rem;
}

.active-goals-chips[b-oedw388uu3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.active-goal-chip[b-oedw388uu3] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    background: rgba(118, 183, 169, 0.10);
    border: 1px solid rgba(118, 183, 169, 0.22);
    border-radius: 999px;
    font-size: 0.9rem;
    color: rgba(230, 245, 240, 0.92);
    max-width: 100%;
    transition: background 0.15s, border-color 0.15s;
}

.active-goal-chip:hover[b-oedw388uu3] {
    background: rgba(118, 183, 169, 0.16);
    border-color: rgba(118, 183, 169, 0.34);
}

.agc-icon[b-oedw388uu3] {
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
}

.agc-text[b-oedw388uu3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.agc-score[b-oedw388uu3] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #FFFFFF;
    background: rgba(118, 183, 169, 0.22);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.agc-score-max[b-oedw388uu3] {
    font-weight: 400;
    color: rgba(220, 240, 235, 0.55);
    font-size: 0.72rem;
    margin-left: 1px;
}

.active-goals-more[b-oedw388uu3] {
    background: transparent;
    border: 1px dashed rgba(118, 183, 169, 0.28);
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    color: rgba(220, 240, 235, 0.72);
    font-size: 0.82rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.active-goals-more:hover[b-oedw388uu3] {
    color: #76B7A9;
    border-color: rgba(118, 183, 169, 0.5);
}

@media (max-width: 700px) {
    .agc-text[b-oedw388uu3] { max-width: 160px; }
}

/* Session Hero Card */
.session-hero[b-oedw388uu3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border-radius: 1.25rem;
    padding: 2rem 2.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(118, 183, 169, 0.12);
    margin-bottom: 2rem;
}

.session-hero:hover[b-oedw388uu3] {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(59, 107, 93, 0.2);
    border-color: rgba(118, 183, 169, 0.35);
    background: rgba(255, 255, 255, 0.08);
}

.session-hero-left[b-oedw388uu3] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.session-hero-icon[b-oedw388uu3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.session-hero-icon svg[b-oedw388uu3] {
    width: 2.75rem;
    height: 2.75rem;
    display: block;
}

.session-hero h3[b-oedw388uu3] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 0.25rem;
}

.session-hero p[b-oedw388uu3] {
    color: rgba(220, 240, 235, 0.75);
    margin: 0;
    font-size: 0.95rem;
}

/* Last Session Card */
.last-session-card[b-oedw388uu3] {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    border-radius: 1.25rem;
    padding: 1.75rem 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(118, 183, 169, 0.08);
    animation: fadeInUp-b-oedw388uu3 0.5s ease 0.1s both;
}

.last-session-header[b-oedw388uu3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.last-session-header h4[b-oedw388uu3] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #76B7A9;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.last-session-date[b-oedw388uu3] {
    font-size: 0.8rem;
    color: rgba(220, 240, 235, 0.55);
}

.last-session-text[b-oedw388uu3] {
    color: rgba(230, 245, 240, 0.85);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.last-session-goals[b-oedw388uu3] {
    padding-top: 1rem;
    border-top: 1px solid rgba(118, 183, 169, 0.1);
}

.last-session-goals h5[b-oedw388uu3] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #76B7A9;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem;
}

.goal-chip[b-oedw388uu3] {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    background: rgba(118, 183, 169, 0.1);
    border-radius: 2rem;
    font-size: 0.85rem;
    color: rgba(230, 245, 240, 0.85);
    margin: 0 0.5rem 0.5rem 0;
    border: 1px solid rgba(118, 183, 169, 0.15);
}

/* ===== MEMORY GARDEN ===== */
.garden-header[b-oedw388uu3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.garden-header h4[b-oedw388uu3] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #E8F5F1;
}

.garden-stats[b-oedw388uu3] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.garden-stat[b-oedw388uu3] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(220, 240, 235, 0.7);
    font-size: 0.85rem;
}

.stat-num[b-oedw388uu3] {
    font-weight: 700;
    color: #76B7A9;
}

.stat-divider[b-oedw388uu3] {
    color: rgba(118, 183, 169, 0.2);
    font-size: 0.85rem;
}

.garden-svg-wrap[b-oedw388uu3] {
    width: 100%;
    overflow: visible;       /* allow tooltip to overflow above the chart */
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.12);
    margin-bottom: 0.5rem;
    position: relative;      /* anchor for the absolute-positioned tooltip */
}

/* ──────────────────────────────────────────────────────────
   Garden hover tooltip — dark pill floating above the hovered
   orb. Replaces both the native SVG <title> and the long-summary
   strip that used to sit below the chart. Pointer-events: none
   so the cursor never lands on the tooltip itself (which would
   confuse mouseleave on the orb).
   ────────────────────────────────────────────────────────── */
.garden-tooltip[b-oedw388uu3] {
    position: absolute;
    background: rgba(26, 51, 43, 0.96);
    color: #FFFFFF;
    padding: 0.45rem 0.85rem;
    border-radius: 0.6rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    animation: gardenTooltipIn-b-oedw388uu3 0.16s ease both;
    backdrop-filter: blur(6px);
}

/* Three alignment variants, picked in C# from the orb's X position so the
   pill stays within the chart's bounds even when the orb is near an edge.
   Each variant also moves the arrow so it still points to the orb below. */

/* Default: orb in the middle — tooltip centred above it. */
.garden-tooltip.is-center[b-oedw388uu3] {
    transform: translate(-50%, calc(-100% - 16px));
}
.garden-tooltip.is-center[b-oedw388uu3]::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(26, 51, 43, 0.96);
}

/* Orb near the LEFT edge — anchor tooltip from its left corner so it
   extends rightward into the chart. Arrow sits ~14px from the left so
   it still hovers over the orb beneath it. */
.garden-tooltip.is-left[b-oedw388uu3] {
    transform: translate(-14px, calc(-100% - 16px));
}
.garden-tooltip.is-left[b-oedw388uu3]::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 14px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(26, 51, 43, 0.96);
}

/* Orb near the RIGHT edge — anchor from the right corner so it extends
   leftward into the chart. Arrow ~14px from the right edge. */
.garden-tooltip.is-right[b-oedw388uu3] {
    transform: translate(calc(-100% + 14px), calc(-100% - 16px));
}
.garden-tooltip.is-right[b-oedw388uu3]::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 14px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(26, 51, 43, 0.96);
}

@keyframes gardenTooltipIn-b-oedw388uu3 {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

.garden-svg[b-oedw388uu3] {
    width: 100%;
    height: auto;
    display: block;
}

/* Orb hover */
.garden-node[b-oedw388uu3] {
    cursor: pointer;
    transition: r 0.3s ease, fill-opacity 0.3s ease;
}

/* Glow pulse */
.garden-glow[b-oedw388uu3] {
    animation: glowPulse-b-oedw388uu3 4s ease-in-out infinite;
}

@keyframes glowPulse-b-oedw388uu3 {
    0%, 100% { opacity: 0.12; }
    50% { opacity: 0.22; }
}

/* Dashed path animation */
.garden-path[b-oedw388uu3] {
    animation: dashFlow-b-oedw388uu3 8s linear infinite;
}

@keyframes dashFlow-b-oedw388uu3 {
    0% { stroke-dashoffset: 20; }
    100% { stroke-dashoffset: 0; }
}

/* ──────────────────────────────────────────────────────────
   Garden drill-down panel — replaces the chart when the user
   clicks a session node. Reads as one focused view: back button
   on top, date/time header, then the summary + goals using the
   shared .goal-list pattern from session.css.
   ────────────────────────────────────────────────────────── */
.garden-drilldown[b-oedw388uu3] {
    padding: 1rem 0 0.5rem;
    animation: drilldownIn-b-oedw388uu3 0.25s ease both;
}

@keyframes drilldownIn-b-oedw388uu3 {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

.garden-back-btn[b-oedw388uu3] {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #5A7068;
    cursor: pointer;
    margin-bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.garden-back-btn:hover[b-oedw388uu3] {
    color: #1A332B;
    transform: translateX(-4px);
}

.drilldown-head[b-oedw388uu3] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(118, 183, 169, 0.12);
}

.drilldown-title[b-oedw388uu3] {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(74, 107, 98, 0.7);
}

.drilldown-meta[b-oedw388uu3] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    color: #1A332B;
}

.drilldown-date[b-oedw388uu3] {
    font-size: 1.15rem;
    font-weight: 700;
}

.drilldown-time[b-oedw388uu3],
.drilldown-duration[b-oedw388uu3] {
    font-size: 0.92rem;
    color: rgba(74, 107, 98, 0.75);
    font-variant-numeric: tabular-nums;
}

.drilldown-dot[b-oedw388uu3] {
    color: rgba(74, 107, 98, 0.4);
    font-size: 0.9rem;
}

.drilldown-section[b-oedw388uu3] {
    margin-bottom: 1.25rem;
}

.drilldown-section:last-child[b-oedw388uu3] {
    margin-bottom: 0;
}

.drilldown-section-title[b-oedw388uu3] {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #3B6B5D;
}

.drilldown-summary-card[b-oedw388uu3] {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(118, 183, 169, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.drilldown-summary[b-oedw388uu3] {
    margin: 0;
    color: #1A332B;
    line-height: 1.6;
    font-size: 0.95rem;
    white-space: pre-wrap;
}

.drilldown-no-goals[b-oedw388uu3] {
    margin: 0;
    color: rgba(74, 107, 98, 0.55);
    font-style: italic;
    font-size: 0.9rem;
}

/* Empty state */
.garden-empty[b-oedw388uu3] {
    text-align: center;
    padding: 3rem 2rem;
}

.garden-empty-icon[b-oedw388uu3] {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.garden-empty p[b-oedw388uu3] {
    color: rgba(167, 216, 203, 0.5);
    font-size: 0.95rem;
}

/* Note: the old .garden-hover-info strip (long summary preview below the
   chart) was removed — replaced by the .garden-tooltip pill above the
   hovered orb plus the drill-down panel on click. */

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .dash-container[b-oedw388uu3] {
        margin: -20px;
    }
    .dash-content[b-oedw388uu3] {
        padding: 1.5rem 1rem;
    }
    .session-hero[b-oedw388uu3] {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
        padding: 1.5rem;
    }
    .session-hero-left[b-oedw388uu3] {
        flex-direction: column;
    }
    .hero-card[b-oedw388uu3] {
        padding: 2.5rem 2rem;
    }
    .greeting-text[b-oedw388uu3] {
        font-size: 1.5rem;
    }
}

/* ===== REFRESHED LIGHT & FRESH PASS ===== */
.dash-container[b-oedw388uu3] {
    color: #1A332B;
    background: transparent;
}

.dash-bg[b-oedw388uu3] {
    background: transparent;
}

.dash-bg[b-oedw388uu3]::before,
.dash-bg[b-oedw388uu3]::after {
    display: none;
}

.bg-mesh[b-oedw388uu3] {
    background-image:
        radial-gradient(ellipse at 22% 44%, rgba(118, 183, 169, 0.15) 0%, transparent 46%),
        radial-gradient(ellipse at 86% 18%, rgba(74, 139, 122, 0.1) 0%, transparent 52%),
        radial-gradient(ellipse at 58% 78%, rgba(167, 216, 203, 0.2) 0%, transparent 48%);
    opacity: 0.8;
}

.bg-orb[b-oedw388uu3] {
    filter: blur(120px);
    mix-blend-mode: multiply;
    opacity: 0.4;
}

.bg-orb-1[b-oedw388uu3] { background: radial-gradient(circle, rgba(118, 183, 169, 0.3) 0%, transparent 72%); }
.bg-orb-2[b-oedw388uu3] { background: radial-gradient(circle, rgba(74, 139, 122, 0.2) 0%, transparent 72%); }
.bg-orb-3[b-oedw388uu3] { background: radial-gradient(circle, rgba(232, 213, 196, 0.4) 0%, transparent 72%); }
.bg-orb-4[b-oedw388uu3] { background: radial-gradient(circle, rgba(167, 216, 203, 0.3) 0%, transparent 72%); }
.bg-orb-5[b-oedw388uu3] { background: radial-gradient(circle, rgba(200, 230, 220, 0.4) 0%, transparent 72%); }

.particle[b-oedw388uu3] {
    background: rgba(74, 139, 122, 0.8);
    box-shadow: 0 0 8px 2px rgba(74, 139, 122, 0.3);
}

.p1[b-oedw388uu3], .p4[b-oedw388uu3], .p7[b-oedw388uu3], .p10[b-oedw388uu3] {
    background: rgba(59, 107, 93, 0.8);
    box-shadow: 0 0 10px 3px rgba(59, 107, 93, 0.3);
}

.p2[b-oedw388uu3], .p5[b-oedw388uu3], .p8[b-oedw388uu3], .p11[b-oedw388uu3] {
    background: rgba(118, 183, 169, 0.8);
    box-shadow: 0 0 9px 2px rgba(118, 183, 169, 0.3);
}

.p3[b-oedw388uu3], .p6[b-oedw388uu3], .p9[b-oedw388uu3], .p12[b-oedw388uu3] {
    background: rgba(219, 172, 115, 0.8);
    box-shadow: 0 0 10px 3px rgba(219, 172, 115, 0.3);
}

.greeting-section[b-oedw388uu3] {
    margin-bottom: 2.15rem;
}

.greeting-text[b-oedw388uu3] {
    color: #1A332B;
    text-shadow: 0 4px 12px rgba(255, 255, 255, 0.5);
}

.greeting-sub[b-oedw388uu3],
.session-hero p[b-oedw388uu3] {
    color: #4A6B62;
}

.session-hero[b-oedw388uu3],
.last-session-card[b-oedw388uu3],
.hero-card[b-oedw388uu3] {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        0 16px 40px rgba(74, 139, 122, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.session-hero[b-oedw388uu3] {
    position: relative;
    overflow: hidden;
    min-height: 118px;
}

.session-hero[b-oedw388uu3]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 88% 10%, rgba(118, 183, 169, 0.15), transparent 42%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.4), transparent 36%);
    pointer-events: none;
}

.session-hero-left[b-oedw388uu3],
.session-hero .btn-hero[b-oedw388uu3] {
    position: relative;
    z-index: 1;
}

.session-hero:hover[b-oedw388uu3] {
    transform: translateY(-4px);
    border-color: #FFFFFF;
    background: rgba(255, 255, 255, 0.8);
    box-shadow:
        0 20px 48px rgba(74, 139, 122, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.session-hero h3[b-oedw388uu3],
.hero-card h2[b-oedw388uu3],
.last-session-text[b-oedw388uu3] {
    color: #1A332B;
}

.hero-card p[b-oedw388uu3] {
    color: #4A6B62;
}

.btn-hero[b-oedw388uu3] {
    background: linear-gradient(135deg, #76B7A9 0%, #4A8B7A 100%);
    color: #FFFFFF;
    box-shadow:
        0 8px 20px rgba(74, 139, 122, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.20) inset;
}

.btn-hero:hover[b-oedw388uu3] {
    background: linear-gradient(135deg, #8ADBC8 0%, #5AB09E 100%);
    box-shadow:
        0 12px 28px rgba(74, 139, 122, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.24) inset;
}

.garden-header[b-oedw388uu3] {
    margin-top: 0.35rem;
}

.garden-header h4[b-oedw388uu3] {
    color: #1A332B;
    text-shadow: none;
}

.garden-empty p[b-oedw388uu3] {
    color: #4A6B62;
    font-weight: 500;
}

.garden-stats[b-oedw388uu3] {
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid rgba(118, 183, 169, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.garden-stat[b-oedw388uu3] {
    color: #4A6B62;
}

.stat-num[b-oedw388uu3] {
    color: #1A332B;
}

.garden-svg-wrap[b-oedw388uu3] {
    position: relative;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(118, 183, 169, 0.2);
    box-shadow:
        0 12px 32px rgba(74, 139, 122, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.garden-svg-wrap[b-oedw388uu3]::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 14px;
    background:
        linear-gradient(90deg, rgba(118, 183, 169, 0.1) 1px, transparent 1px),
        linear-gradient(0deg, rgba(118, 183, 169, 0.1) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: 0.5;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, rgba(0, 0, 0, 0.5) 54%, transparent 92%);
    pointer-events: none;
}

.garden-svg[b-oedw388uu3] {
    position: relative;
    z-index: 1;
}

.garden-path[b-oedw388uu3] {
    stroke: rgba(118, 183, 169, 0.5);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(118, 183, 169, 0.3));
}

.garden-glow[b-oedw388uu3] {
    fill-opacity: 0.4;
    filter: blur(0.4px);
}

.garden-node[b-oedw388uu3] {
    stroke: #FFFFFF;
    stroke-width: 1.6px;
    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15))
        drop-shadow(0 0 8px rgba(118, 183, 169, 0.4));
}

.garden-node:hover[b-oedw388uu3] {
    stroke: #FFFFFF;
    filter:
        drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2))
        drop-shadow(0 0 12px rgba(118, 183, 169, 0.6));
}

.last-session-header h4[b-oedw388uu3],
.last-session-goals h5[b-oedw388uu3] {
    color: #3B6B5D;
}

.last-session-date[b-oedw388uu3] {
    color: rgba(74, 107, 98, 0.6);
}

.goal-chip[b-oedw388uu3] {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    background: #FFFFFF;
    border-radius: 2rem;
    font-size: 0.85rem;
    color: #1A332B;
    margin: 0 0.5rem 0.5rem 0;
    border: 1px solid rgba(118, 183, 169, 0.3);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

@media (max-width: 768px) {
    .garden-stats[b-oedw388uu3] {
        align-self: flex-start;
        flex-wrap: wrap;
        border-radius: 14px;
    }

    .garden-header[b-oedw388uu3] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ===== GARDEN TAB TOGGLE ===== */
.garden-header[b-oedw388uu3] {
    flex-wrap: wrap;
    gap: 0.75rem;
}

.garden-header-left[b-oedw388uu3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.garden-tab-group[b-oedw388uu3] {
    display: flex;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(118, 183, 169, 0.3);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.garden-tab[b-oedw388uu3] {
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4A6B62;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.garden-tab.active[b-oedw388uu3] {
    background: linear-gradient(135deg, #3B6B5D, #4A8B7A);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(59, 107, 93, 0.3);
}

.garden-tab:not(.active):hover[b-oedw388uu3] {
    background: rgba(118, 183, 169, 0.15);
    color: #1A332B;
}

/* ===== GOALS TAB — SUB-TABS (Pågående / Pausade & Klara) ===== */
/* Pill-segmented control identical in spirit to .garden-tab-group but
   smaller and sitting inside the Mål view rather than next to its title. */
.goals-subtab-bar[b-oedw388uu3] {
    display: flex;
    gap: 0.4rem;
    margin: 0 0 1rem;
    padding: 3px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(118, 183, 169, 0.25);
    border-radius: 999px;
    align-self: flex-start;
}

.goals-subtab[b-oedw388uu3] {
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 0.35rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4A6B62;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.goals-subtab.active[b-oedw388uu3] {
    background: linear-gradient(135deg, #3B6B5D, #4A8B7A);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(59, 107, 93, 0.3);
}

.goals-subtab:not(.active):hover[b-oedw388uu3] {
    background: rgba(118, 183, 169, 0.12);
    color: #1A332B;
}

/* Small count pill at the end of each tab so the user can see the
   number of items per state at a glance. */
.goals-subtab-count[b-oedw388uu3] {
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.4);
    color: inherit;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}
.goals-subtab.active .goals-subtab-count[b-oedw388uu3] {
    background: rgba(255, 255, 255, 0.22);
}

/* Section header that appears in archive mode between the "Uppnådda"
   and "Pausade" groups. */
.goals-section-header[b-oedw388uu3] {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(74, 107, 98, 0.85);
}

/* Subtle metadata row inside each goal card showing the relevant
   timestamps. State-specific stamp (Uppnådd/Pausad) leads, then a
   centered dot, then the Skapad date. */
.big-goal-timestamps[b-oedw388uu3] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.45rem 0 0.6rem;
    font-size: 0.78rem;
    color: rgba(74, 107, 98, 0.68);
    font-variant-numeric: tabular-nums;
}
.goal-ts-state[b-oedw388uu3] {
    color: rgba(59, 107, 93, 0.95);
    font-weight: 600;
}
.goal-ts-dot[b-oedw388uu3] {
    color: rgba(74, 107, 98, 0.4);
}

/* Quiet hint at the bottom of the active goals list explaining that
   permanent removal is mentor-only — keeps the user from hunting for
   a delete button that doesn't exist. */
.goal-removal-hint[b-oedw388uu3] {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.45);
    border: 1px dashed rgba(118, 183, 169, 0.32);
    border-radius: 12px;
    color: rgba(74, 107, 98, 0.85);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
}

/* ===== GOALS TAB — BIG GOAL CARDS ===== */
.goal-path-view[b-oedw388uu3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.5rem;
    animation: drilldownIn-b-oedw388uu3 0.25s ease both;
}

.goal-path-empty[b-oedw388uu3] {
    text-align: center;
    padding: 3rem 2rem;
}

.goal-path-empty-icon[b-oedw388uu3] {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.goal-path-empty p[b-oedw388uu3] {
    color: #4A6B62;
    font-size: 0.95rem;
}

.goal-info-banner[b-oedw388uu3] {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(118, 183, 169, 0.35);
    border-left: 4px solid #76B7A9;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    color: #3B6B5D;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(74, 139, 122, 0.06);
}

.big-goal-card[b-oedw388uu3] {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(118, 183, 169, 0.25);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 18px rgba(74, 139, 122, 0.07), 0 1px 0 rgba(255,255,255,0.5) inset;
    transition: box-shadow 0.2s, transform 0.2s;
}

.big-goal-card:hover[b-oedw388uu3] {
    box-shadow: 0 8px 28px rgba(74, 139, 122, 0.12), 0 1px 0 rgba(255,255,255,0.5) inset;
    transform: translateY(-1px);
}

.big-goal-card.achieved[b-oedw388uu3] {
    opacity: 0.7;
    border-color: rgba(118, 183, 169, 0.15);
    background: rgba(255, 255, 255, 0.45);
}

/* Paused: clearly dimmed and slightly desaturated so the user knows
   the action took effect. Notifications are silenced server-side
   (GoalReminderService only sends for state='active') so this is
   purely the visual signal. */
.big-goal-card.paused[b-oedw388uu3] {
    opacity: 0.78;
    border-color: rgba(120, 130, 135, 0.22);
    background: rgba(245, 247, 248, 0.65);
    filter: saturate(0.65);
}
.big-goal-card.paused .big-goal-title span:not(.big-goal-icon)[b-oedw388uu3] {
    color: #5A6B6F;
}
.big-goal-card.paused .completion-day[b-oedw388uu3],
.big-goal-card.paused .completion-day-label[b-oedw388uu3] {
    opacity: 0.55;
}

.big-goal-header[b-oedw388uu3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.big-goal-title[b-oedw388uu3] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1A332B;
    line-height: 1.4;
    flex: 1;
}

.big-goal-icon[b-oedw388uu3] {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.big-goal-achieved-badge[b-oedw388uu3] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #3B6B5D;
    background: rgba(118, 183, 169, 0.2);
    border: 1px solid rgba(118, 183, 169, 0.4);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Paused badge — same shape as the achieved badge but in muted slate so
   the two states are immediately distinguishable at a glance. */
.big-goal-paused-badge[b-oedw388uu3] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5A6B6F;
    background: rgba(120, 130, 135, 0.16);
    border: 1px solid rgba(120, 130, 135, 0.32);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.main-goal-badge[b-oedw388uu3] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4A6B62;
    background: rgba(118, 183, 169, 0.15);
    border: 1px solid rgba(118, 183, 169, 0.3);
    border-radius: 6px;
    padding: 0.15rem 0.4rem;
    margin-left: 0.5rem;
    align-self: center;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Progress bar */
.goal-progress-summary[b-oedw388uu3] {
    margin: 0.75rem 0 0.95rem;
    padding: 0.7rem 0 0.85rem;
    border-top: 1px solid rgba(118, 183, 169, 0.16);
    border-bottom: 1px dashed rgba(118, 183, 169, 0.22);
}

.goal-progress-bar[b-oedw388uu3] {
    height: 5px;
    background: rgba(118, 183, 169, 0.15);
    border-radius: 999px;
    overflow: hidden;
}

.goal-progress-fill[b-oedw388uu3] {
    height: 100%;
    background: linear-gradient(90deg, #76B7A9, #3B6B5D);
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.goal-progress-label[b-oedw388uu3] {
    font-size: 0.78rem;
    color: #4A6B62;
    margin-bottom: 0.45rem;
}

/* Sub-task list */
.sub-task-list[b-oedw388uu3] {
    list-style: none;
    margin: 0.85rem 0 0.75rem;
    padding: 0;
    border-top: 1px solid rgba(118, 183, 169, 0.16);
}

.sub-task-item[b-oedw388uu3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px dashed rgba(118, 183, 169, 0.18);
}

.sub-task-main[b-oedw388uu3] {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) max-content;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.sub-task-item.done .sub-task-text[b-oedw388uu3] {
    text-decoration: line-through;
    color: rgba(74, 107, 98, 0.5);
}

.sub-task-check[b-oedw388uu3] {
    background: transparent;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    line-height: 1;
    color: #3B6B5D;
    padding: 0;
    transition: transform 0.15s;
}

.sub-task-check:hover:not(:disabled)[b-oedw388uu3] {
    transform: scale(1.2);
}

.sub-task-check:disabled[b-oedw388uu3] {
    opacity: 0.4;
    cursor: default;
}

.sub-task-anchor[b-oedw388uu3] {
    width: 24px;
    height: 24px;
}

.sub-task-text[b-oedw388uu3] {
    font-size: 0.92rem;
    color: #1A332B;
    line-height: 1.35;
    min-width: 0;
}

.goal-repeat-chip[b-oedw388uu3] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #3B6B5D;
    background: rgba(118, 183, 169, 0.15);
    border: 1px solid rgba(118, 183, 169, 0.3);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}

.goal-repeat-icon[b-oedw388uu3] {
    font-size: 0.72rem;
    line-height: 1;
    opacity: 0.75;
}

.sub-task-repeat-badge[b-oedw388uu3] {
    justify-self: start;
}

/* 7-day completion strip for recurring tasks */
.completion-week-strip[b-oedw388uu3] {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
    align-items: flex-end;
}

.sub-task-item > .completion-week-strip[b-oedw388uu3] {
    justify-self: end;
}

.completion-day-col[b-oedw388uu3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.completion-day-label[b-oedw388uu3] {
    font-size: 0.62rem;
    font-weight: 700;
    color: #4A6B62;
    opacity: 0.5;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 2px;
}

.completion-day-label.today[b-oedw388uu3] {
    color: #76B7A9;
    font-weight: 800;
    opacity: 1;
}

.completion-day.today[b-oedw388uu3] {
    border-color: rgba(118, 183, 169, 0.7);
    background: rgba(118, 183, 169, 0.08);
}

.completion-day.today.done[b-oedw388uu3] {
    border-color: transparent;
    background: linear-gradient(135deg, #76B7A9, #3B6B5D);
}

/* Future days — shown for context (today + the upcoming week) but not
   yet completable. Visually muted and the button doesn't respond to
   hover so it reads as "coming up" rather than "click me". */
.completion-day-label.future[b-oedw388uu3] {
    opacity: 0.3;
}
.completion-day.future[b-oedw388uu3],
.completion-day.future:hover[b-oedw388uu3] {
    opacity: 0.42;
    cursor: default;
    background: rgba(255, 255, 255, 0.18);
    border-style: dashed;
    transform: none;
    box-shadow: none;
}

.completion-day[b-oedw388uu3] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(118, 183, 169, 0.25);
    background: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    color: rgba(74, 107, 98, 0.4);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.completion-day.done[b-oedw388uu3] {
    background: linear-gradient(135deg, #76B7A9, #3B6B5D);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(59, 107, 93, 0.25);
}

.completion-day:hover[b-oedw388uu3] {
    border-color: #76B7A9;
    background: rgba(118, 183, 169, 0.15);
    transform: translateY(-1px);
}

/* Big goal meta + actions */
.big-goal-meta[b-oedw388uu3] {
    font-size: 0.8rem;
    color: #4A6B62;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}

.big-goal-actions[b-oedw388uu3] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.goal-action-btn[b-oedw388uu3] {
    border: 1px solid rgba(118, 183, 169, 0.4);
    background: transparent;
    color: #3B6B5D;
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.goal-action-btn:hover[b-oedw388uu3] {
    background: rgba(118, 183, 169, 0.1);
    border-color: #76B7A9;
}

.goal-action-btn.primary[b-oedw388uu3] {
    background: linear-gradient(135deg, #76B7A9, #3B6B5D);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(59, 107, 93, 0.2);
}

.goal-action-btn.primary:hover[b-oedw388uu3] {
    background: linear-gradient(135deg, #8ADBC8, #4A8B7A);
    box-shadow: 0 4px 12px rgba(59, 107, 93, 0.3);
    transform: translateY(-1px);
}

.big-goal-recurrence-container[b-oedw388uu3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 0.1rem;
    padding: 0.75rem 0;
    border-top: 1px dashed rgba(118, 183, 169, 0.2);
    border-bottom: 1px dashed rgba(118, 183, 169, 0.14);
}

.big-goal-recurrence-header[b-oedw388uu3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: end;
}

.big-goal-strip[b-oedw388uu3] {
    margin-left: auto;
    justify-self: end;
}

@media (max-width: 700px) {
    .big-goal-card[b-oedw388uu3] {
        padding: 1.1rem 1.15rem;
    }

    .big-goal-recurrence-container[b-oedw388uu3],
    .sub-task-item[b-oedw388uu3] {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .completion-week-strip[b-oedw388uu3],
    .big-goal-strip[b-oedw388uu3],
    .sub-task-item > .completion-week-strip[b-oedw388uu3] {
        margin-left: 0;
        justify-self: start;
    }

    .sub-task-main[b-oedw388uu3] {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .sub-task-repeat-badge[b-oedw388uu3] {
        grid-column: 2;
        margin-top: -0.1rem;
        justify-self: start;
    }

    .big-goal-recurrence-header[b-oedw388uu3] {
        justify-self: start;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 8: Living Garden tab + chapter close modal + archive view
   ═══════════════════════════════════════════════════════════════════ */

.garden-living-view[b-oedw388uu3] {
    margin-top: 1rem;
    position: relative;
}

.garden-chapter-strip[b-oedw388uu3] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.55);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(118, 183, 169, 0.25);
}

.garden-chapter-label[b-oedw388uu3] {
    font-size: 0.7rem;
    color: #5A7068;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.garden-chapter-name[b-oedw388uu3] {
    font-size: 0.95rem;
    color: #1A332B;
    font-weight: 600;
}

.garden-meta-row[b-oedw388uu3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.9rem;
    flex-wrap: wrap;
}

.garden-meta-counts[b-oedw388uu3] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #4A6B62;
}

.gmc-num[b-oedw388uu3] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1A332B;
}

.gmc-label[b-oedw388uu3] {
    text-transform: lowercase;
    color: #5A7068;
}

.gmc-dot[b-oedw388uu3] {
    color: #A2D9CE;
    margin: 0 0.15rem;
}

.gmc-since[b-oedw388uu3] {
    color: #5A7068;
    font-size: 0.82rem;
}

.garden-meta-actions[b-oedw388uu3] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.garden-meta-btn[b-oedw388uu3] {
    background: linear-gradient(135deg, #A2D9CE, #76B7A9);
    color: #1A332B;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease;
    box-shadow: 0 2px 8px rgba(118, 183, 169, 0.25);
}

.garden-meta-btn:hover:not(:disabled)[b-oedw388uu3] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(118, 183, 169, 0.35);
}

.garden-meta-btn:disabled[b-oedw388uu3] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.garden-meta-btn.ghost[b-oedw388uu3] {
    background: transparent;
    color: #3B6B5D;
    border: 1px solid rgba(118, 183, 169, 0.4);
    box-shadow: none;
}

.garden-meta-btn.ghost:hover:not(:disabled)[b-oedw388uu3] {
    background: rgba(118, 183, 169, 0.08);
    border-color: rgba(118, 183, 169, 0.6);
}

/* Archive grid — past chapter cards */

.garden-archive[b-oedw388uu3] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(118, 183, 169, 0.3);
}

.garden-archive-title[b-oedw388uu3] {
    margin: 0 0 0.8rem;
    font-size: 0.85rem;
    color: #4A6B62;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.garden-archive-grid[b-oedw388uu3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
}

.garden-archive-card[b-oedw388uu3] {
    background: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(118, 183, 169, 0.18);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.garden-archive-card:hover[b-oedw388uu3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 107, 93, 0.12);
    border-color: rgba(118, 183, 169, 0.4);
}

.gac-name[b-oedw388uu3] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1A332B;
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

.gac-range[b-oedw388uu3] {
    font-size: 0.74rem;
    color: #5A7068;
    margin-bottom: 0.35rem;
}

.gac-stats[b-oedw388uu3] {
    font-size: 0.78rem;
    color: #3B6B5D;
    font-weight: 500;
}

.gac-reflection[b-oedw388uu3] {
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px dashed rgba(118, 183, 169, 0.25);
    font-size: 0.78rem;
    color: #5A7068;
    font-style: italic;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Archive modal (re-render a past chapter full-size) */

.garden-archive-modal[b-oedw388uu3],
.garden-close-modal[b-oedw388uu3] {
    position: fixed;
    inset: 0;
    background: rgba(20, 40, 35, 0.55);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: gmodal-fade-b-oedw388uu3 220ms ease;
}

@keyframes gmodal-fade-b-oedw388uu3 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.garden-archive-modal-inner[b-oedw388uu3],
.garden-close-modal-inner[b-oedw388uu3] {
    background: #FAF6EE;
    border-radius: 18px;
    max-width: 760px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.6rem 1.8rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    position: relative;
    animation: gmodal-rise-b-oedw388uu3 260ms cubic-bezier(0.25, 0.8, 0.3, 1);
}

@keyframes gmodal-rise-b-oedw388uu3 {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.garden-archive-close[b-oedw388uu3] {
    position: absolute;
    top: 0.6rem;
    right: 0.9rem;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #5A7068;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem 0.5rem;
}

.garden-archive-close:hover[b-oedw388uu3] {
    color: #1A332B;
}

.garden-archive-modal-title[b-oedw388uu3] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    color: #1A332B;
    font-weight: 600;
}

.garden-archive-modal-range[b-oedw388uu3] {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: #5A7068;
}

.garden-archive-modal-reflection[b-oedw388uu3] {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    background: rgba(118, 183, 169, 0.12);
    border-radius: 10px;
    color: #1A332B;
    font-style: italic;
    line-height: 1.45;
    font-size: 0.92rem;
}

/* Close-chapter modal: name + reflection inputs */

.garden-close-modal-inner[b-oedw388uu3] {
    max-width: 480px;
    padding: 1.5rem 1.7rem 1.4rem;
}

.garden-close-modal-inner h4[b-oedw388uu3] {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    color: #1A332B;
    font-weight: 600;
}

.garden-close-desc[b-oedw388uu3] {
    margin: 0 0 1.2rem;
    color: #4A6B62;
    font-size: 0.88rem;
    line-height: 1.5;
}

.garden-close-label[b-oedw388uu3] {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 0.82rem;
    color: #4A6B62;
    font-weight: 500;
}

.garden-close-input[b-oedw388uu3] {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(118, 183, 169, 0.4);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    color: #1A332B;
    font-size: 0.92rem;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 180ms ease, box-shadow 180ms ease;
    box-sizing: border-box;
}

.garden-close-input:focus[b-oedw388uu3] {
    outline: none;
    border-color: #76B7A9;
    box-shadow: 0 0 0 3px rgba(118, 183, 169, 0.18);
}

.garden-close-actions[b-oedw388uu3] {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.garden-close-cancel[b-oedw388uu3],
.garden-close-confirm[b-oedw388uu3] {
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 180ms ease;
    border: none;
}

.garden-close-cancel[b-oedw388uu3] {
    background: transparent;
    color: #5A7068;
    border: 1px solid rgba(118, 183, 169, 0.3);
}

.garden-close-cancel:hover[b-oedw388uu3] {
    background: rgba(118, 183, 169, 0.08);
    color: #1A332B;
}

.garden-close-confirm[b-oedw388uu3] {
    background: linear-gradient(135deg, #A2D9CE, #76B7A9);
    color: #1A332B;
    box-shadow: 0 2px 8px rgba(118, 183, 169, 0.25);
}

.garden-close-confirm:hover[b-oedw388uu3] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(118, 183, 169, 0.35);
}

/* Mood heatmap section spacing on Dashboard */

.dash-mood-section[b-oedw388uu3] {
    margin-top: 1.5rem;
}

/* Sessions drilldown inside Trädgården (replaces LivingGarden when active) */

.garden-session-drill-header[b-oedw388uu3] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px dashed rgba(118, 183, 169, 0.25);
}

.garden-session-drill-header .garden-back-btn[b-oedw388uu3] {
    margin-bottom: 0; /* override to fix flex alignment */
    border-right: 1px solid rgba(118, 183, 169, 0.25);
    padding-right: 1.5rem;
}

.garden-session-drill-title[b-oedw388uu3] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1A332B;
    letter-spacing: -0.005em;
}

/* Sessions list inside the archive modal (quiet list view) */

.garden-archive-sessions[b-oedw388uu3] {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px dashed rgba(118, 183, 169, 0.28);
}

.garden-archive-sessions-title[b-oedw388uu3] {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    color: #4A6B62;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.garden-archive-session-list[b-oedw388uu3] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.garden-archive-session-item[b-oedw388uu3] {
    padding: 0.6rem 0.8rem;
    background: rgba(118, 183, 169, 0.06);
    border-radius: 8px;
    border-left: 2px solid rgba(118, 183, 169, 0.45);
}

.gasi-date[b-oedw388uu3] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1A332B;
}

.gasi-dot[b-oedw388uu3] {
    color: #A2D9CE;
    margin: 0 0.3rem;
}

.gasi-duration[b-oedw388uu3] {
    font-size: 0.78rem;
    color: #5A7068;
}

.gasi-summary[b-oedw388uu3] {
    margin: 0.25rem 0 0;
    font-size: 0.84rem;
    color: #4A6B62;
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Goals list in archived chapter modal (state-coloured) */

.garden-archive-goals[b-oedw388uu3] {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(118, 183, 169, 0.28);
}

.garden-archive-goals-title[b-oedw388uu3] {
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    color: #4A6B62;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.garden-archive-goal-list[b-oedw388uu3] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.garden-archive-goal-item[b-oedw388uu3] {
    padding: 0.55rem 0.85rem;
    background: rgba(118, 183, 169, 0.06);
    border-radius: 8px;
    border-left: 2px solid rgba(118, 183, 169, 0.45);
}

.garden-archive-goal-item.is-achieved[b-oedw388uu3] {
    border-left-color: #3B6B5D;
    background: rgba(118, 183, 169, 0.10);
}

.garden-archive-goal-item.is-paused[b-oedw388uu3] {
    border-left-color: #B697B5;
    background: rgba(182, 151, 181, 0.08);
}

.gagi-row[b-oedw388uu3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
}

.gagi-text[b-oedw388uu3] {
    font-size: 0.88rem;
    color: #1A332B;
    line-height: 1.35;
    flex: 1;
}

.gagi-state[b-oedw388uu3] {
    font-size: 0.7rem;
    color: #4A6B62;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    flex-shrink: 0;
}

.garden-archive-goal-item.is-achieved .gagi-state[b-oedw388uu3] {
    color: #3B6B5D;
}

.garden-archive-goal-item.is-paused .gagi-state[b-oedw388uu3] {
    color: #8E6D8D;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ============================================================
   Vantaya Login Page — Scoped Styles
   Design: Premium, calming, light & relieving
   Palette: #A2D9CE → #76B7A9, #2C3E50, #F4F7F6, #FFF
   ============================================================ */

/* --- Page Container --- */
.login-page[b-hznk7k8r26] {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(160deg, #FFFFFF 0%, #F4F7F6 40%, #EAF4F1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#neural-canvas[b-hznk7k8r26] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* --- Center Container --- */
.login-container[b-hznk7k8r26] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 100%;
    max-width: 420px;
    padding: 1rem;
}

/* ============================================================
   LOGO ANIMATION
   Sequence: Mountain → V → Swoosh → Text
   Total: ~4 seconds, light & relieving
   ============================================================ */

.logo-wrapper[b-hznk7k8r26] {
    width: 220px;
    height: auto;
}

.logo-svg[b-hznk7k8r26] {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 20px rgba(162, 217, 206, 0.2));
}

/* V shape */
.v-path[b-hznk7k8r26] {
    stroke-dasharray: 450;
    stroke-dashoffset: 450;
    animation: drawPath-b-hznk7k8r26 0.7s ease-in-out 0.2s forwards;
}

/* Arch (Bottom of mountain) */
.arch-path[b-hznk7k8r26] {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: drawPath-b-hznk7k8r26 0.7s ease-in-out 0.8s forwards;
}

/* Zigzag (Top of mountain) */
.zigzag-path[b-hznk7k8r26] {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: drawPath-b-hznk7k8r26 2.0s ease-in-out 1.4s forwards;
}

/* Inner Fill */
.mountain-inner-fill[b-hznk7k8r26] {
    animation: fillIn-b-hznk7k8r26 1.5s ease-out 3.4s forwards;
}

@keyframes drawPath-b-hznk7k8r26 {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fillIn-b-hznk7k8r26 {
    to {
        opacity: 1;
    }
}

/* Text — fades up last */
.logo-text[b-hznk7k8r26] {
    opacity: 0;
    animation: fadeInUp-b-hznk7k8r26 1.0s ease-out 3.5s forwards;
}

@keyframes fadeInUp-b-hznk7k8r26 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   LOGIN CARD — Glassmorphism
   ============================================================ */

.login-card[b-hznk7k8r26] {
    width: 100%;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(162, 217, 206, 0.3);
    border-radius: 24px;
    padding: 2rem;
    box-shadow:
        0 8px 32px rgba(44, 62, 80, 0.06),
        0 1px 3px rgba(44, 62, 80, 0.04);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.97);
    transition: all 0.3s ease;
}

/* Only reveal the card when Blazor explicitly adds this class */
.login-card.card-visible[b-hznk7k8r26] {
    visibility: visible;
    animation: cardReveal-b-hznk7k8r26 0.8s ease-out forwards;
}

@keyframes cardReveal-b-hznk7k8r26 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- Login Title --- */
.login-title[b-hznk7k8r26] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #2C3E50;
    text-align: center;
    margin: 0 0 1.5rem 0;
    letter-spacing: 0.01em;
}

/* --- Tab Switcher (hidden when registration is disabled) --- */
.tab-switcher[b-hznk7k8r26] {
    display: flex;
    gap: 0;
    background: #F4F7F6;
    border-radius: 14px;
    padding: 4px;
    margin-bottom: 1.8rem;
}

.tab-btn[b-hznk7k8r26] {
    flex: 1;
    padding: 0.65rem 1rem;
    border: none;
    background: transparent;
    border-radius: 11px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #7f8c8d;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn:hover[b-hznk7k8r26] {
    color: #2C3E50;
}

.tab-btn.active[b-hznk7k8r26] {
    background: #FFFFFF;
    color: #2C3E50;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.08);
    font-weight: 600;
}

/* --- Form Section --- */
.form-section[b-hznk7k8r26] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    animation: fadeIn-b-hznk7k8r26 0.3s ease;
}

@keyframes fadeIn-b-hznk7k8r26 {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Create Account Coming Soon --- */
.register-soon[b-hznk7k8r26] {
    min-height: 318px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.9rem;
    padding: 0.25rem 0.25rem 0;
    animation: soonPanelIn-b-hznk7k8r26 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.soon-orbit[b-hznk7k8r26] {
    position: relative;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.98) 0 27%, rgba(181, 235, 225, 0.48) 28% 42%, rgba(118, 183, 169, 0.1) 43% 68%, transparent 69%),
        conic-gradient(from 135deg, transparent 0 18%, rgba(118, 183, 169, 0.72) 19% 30%, transparent 31% 54%, rgba(162, 217, 206, 0.72) 55% 69%, transparent 70% 100%);
    box-shadow:
        0 18px 42px rgba(118, 183, 169, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.82);
    animation: soonFloat-b-hznk7k8r26 3.2s ease-in-out infinite;
}

.soon-orbit[b-hznk7k8r26]::before {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    border: 1px solid rgba(118, 183, 169, 0.24);
    border-top-color: rgba(44, 62, 80, 0.18);
    animation: soonSpin-b-hznk7k8r26 7s linear infinite;
}

.soon-orbit[b-hznk7k8r26]::after {
    content: "";
    position: absolute;
    inset: 30px;
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.2)),
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.9), transparent 42%);
    filter: blur(0.2px);
}

.soon-ring[b-hznk7k8r26] {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 2px dashed rgba(118, 183, 169, 0.26);
    animation: soonSpin-b-hznk7k8r26 12s linear infinite reverse;
}

.soon-ring.ring-two[b-hznk7k8r26] {
    inset: 24px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.9);
    border-left-color: rgba(118, 183, 169, 0.48);
    border-bottom-color: rgba(44, 62, 80, 0.1);
    animation-duration: 5s;
    animation-direction: normal;
}

.soon-core[b-hznk7k8r26] {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #A2D9CE 0%, #65B2A4 100%);
    color: #FFFFFF;
    box-shadow:
        0 14px 24px rgba(86, 160, 147, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transform: rotate(-9deg);
    animation: soonCore-b-hznk7k8r26 2.6s ease-in-out infinite;
}

.soon-check[b-hznk7k8r26] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    transform: rotate(9deg);
    text-shadow: 0 2px 8px rgba(44, 62, 80, 0.16);
}

.soon-spark[b-hznk7k8r26] {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 16px rgba(118, 183, 169, 0.85);
    opacity: 0.86;
    animation: soonSpark-b-hznk7k8r26 2.4s ease-in-out infinite;
}

.spark-one[b-hznk7k8r26] {
    top: 22px;
    right: 25px;
}

.spark-two[b-hznk7k8r26] {
    bottom: 27px;
    left: 21px;
    width: 7px;
    height: 7px;
    animation-delay: 0.55s;
}

.spark-three[b-hznk7k8r26] {
    right: 14px;
    bottom: 39px;
    width: 6px;
    height: 6px;
    animation-delay: 1.05s;
}

.register-soon h3[b-hznk7k8r26] {
    margin: 0.15rem 0 0;
    color: #2C3E50;
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 750;
}

.register-soon p[b-hznk7k8r26] {
    margin: 0;
    max-width: 300px;
    color: #637875;
    font-size: 0.93rem;
    line-height: 1.5;
}

.soon-progress[b-hznk7k8r26] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 18px;
}

.soon-progress span[b-hznk7k8r26] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #76B7A9;
    box-shadow: 0 0 12px rgba(118, 183, 169, 0.46);
    animation: soonDot-b-hznk7k8r26 1.4s ease-in-out infinite;
}

.soon-progress span:nth-child(2)[b-hznk7k8r26] {
    animation-delay: 0.18s;
}

.soon-progress span:nth-child(3)[b-hznk7k8r26] {
    animation-delay: 0.36s;
}

.btn-primary.soon-back[b-hznk7k8r26] {
    width: 100%;
    max-width: 260px;
    margin-top: 0.35rem;
}

@keyframes soonPanelIn-b-hznk7k8r26 {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes soonFloat-b-hznk7k8r26 {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-7px) scale(1.02);
    }
}

@keyframes soonSpin-b-hznk7k8r26 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes soonCore-b-hznk7k8r26 {
    0%, 100% {
        transform: rotate(-9deg) scale(1);
    }
    50% {
        transform: rotate(-4deg) scale(1.06);
    }
}

@keyframes soonSpark-b-hznk7k8r26 {
    0%, 100% {
        opacity: 0.45;
        transform: translateY(0) scale(0.82);
    }
    50% {
        opacity: 1;
        transform: translateY(-6px) scale(1.18);
    }
}

@keyframes soonDot-b-hznk7k8r26 {
    0%, 100% {
        opacity: 0.38;
        transform: translateY(0) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: translateY(-4px) scale(1);
    }
}

/* --- Input Groups --- */
.input-group[b-hznk7k8r26] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.input-group label[b-hznk7k8r26] {
    font-size: 0.82rem;
    font-weight: 500;
    color: #2C3E50;
    letter-spacing: 0.01em;
}

.input-group input[b-hznk7k8r26] {
    padding: 0.8rem 1rem;
    border: 1.5px solid #E0E8E6;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #2C3E50;
    outline: none;
    transition: all 0.25s ease;
}

.input-group input[b-hznk7k8r26]::placeholder {
    color: #B0BEC5;
}

.input-group input:focus[b-hznk7k8r26] {
    border-color: #A2D9CE;
    box-shadow: 0 0 0 3px rgba(162, 217, 206, 0.2);
    background: #FFFFFF;
}

/* --- Buttons --- */
.btn-primary[b-hznk7k8r26] {
    padding: 0.85rem 1.5rem;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #A2D9CE 0%, #76B7A9 100%);
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    text-shadow: 0 1px 2px rgba(44, 62, 80, 0.15);
}

.btn-primary:hover:not(:disabled)[b-hznk7k8r26] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(118, 183, 169, 0.35);
}

.btn-primary:active:not(:disabled)[b-hznk7k8r26] {
    transform: translateY(0);
}

.btn-primary:disabled[b-hznk7k8r26] {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-link[b-hznk7k8r26] {
    background: none;
    border: none;
    color: #76B7A9;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.3rem 0;
    text-align: center;
    transition: color 0.2s ease;
}

.btn-link:hover[b-hznk7k8r26] {
    color: #2C3E50;
    text-decoration: underline;
}

.btn-back[b-hznk7k8r26] {
    background: none;
    border: none;
    color: #76B7A9;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    text-align: left;
    margin-bottom: 0.3rem;
    transition: color 0.2s ease;
}

.btn-back:hover[b-hznk7k8r26] {
    color: #2C3E50;
}

/* --- Forgot Password --- */
.forgot-title[b-hznk7k8r26] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #2C3E50;
    margin: 0;
}

/* --- Captcha Box --- */
.captcha-box[b-hznk7k8r26] {
    background: #F4F7F6;
    border: 1.5px solid #E0E8E6;
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.captcha-question[b-hznk7k8r26] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #2C3E50;
    font-weight: 500;
}

.captcha-icon[b-hznk7k8r26] {
    font-size: 1.1rem;
}

.captcha-input[b-hznk7k8r26] {
    padding: 0.6rem 0.8rem;
    border: 1.5px solid #E0E8E6;
    border-radius: 10px;
    background: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #2C3E50;
    outline: none;
    width: 100px;
    transition: all 0.25s ease;
    -moz-appearance: textfield;
}

.captcha-input[b-hznk7k8r26]::-webkit-outer-spin-button,
.captcha-input[b-hznk7k8r26]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.captcha-input:focus[b-hznk7k8r26] {
    border-color: #A2D9CE;
    box-shadow: 0 0 0 3px rgba(162, 217, 206, 0.2);
}

/* --- Hint text --- */
.hint[b-hznk7k8r26] {
    font-size: 0.82rem;
    color: #7f8c8d;
    margin: 0;
    line-height: 1.4;
}

/* --- Status Messages --- */
.status-msg[b-hznk7k8r26] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    text-align: center;
    animation: fadeIn-b-hznk7k8r26 0.3s ease;
}

.status-msg.success[b-hznk7k8r26] {
    background: rgba(162, 217, 206, 0.15);
    color: #2E7D5B;
    border: 1px solid rgba(162, 217, 206, 0.3);
}

.status-msg.error[b-hznk7k8r26] {
    background: rgba(231, 76, 60, 0.08);
    color: #C0392B;
    border: 1px solid rgba(231, 76, 60, 0.15);
}

/* --- Loading Spinner --- */
.spinner[b-hznk7k8r26] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin-b-hznk7k8r26 0.6s linear infinite;
}

@keyframes spin-b-hznk7k8r26 {
    to { transform: rotate(360deg); }
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 480px) {
    .login-container[b-hznk7k8r26] {
        padding: 1rem 1.2rem;
        gap: 1.5rem;
    }

    .logo-wrapper[b-hznk7k8r26] {
        width: 170px;
    }

    .login-card[b-hznk7k8r26] {
        padding: 1.5rem;
        border-radius: 20px;
    }

    .tab-switcher[b-hznk7k8r26] {
        margin-bottom: 1.3rem;
    }

    .input-group input[b-hznk7k8r26] {
        padding: 0.75rem 0.9rem;
        font-size: 1rem; /* Prevent zoom on iOS */
    }

    .btn-primary[b-hznk7k8r26] {
        padding: 0.8rem 1.2rem;
    }
}

@media (max-width: 360px) {
    .logo-wrapper[b-hznk7k8r26] {
        width: 140px;
    }

    .login-card[b-hznk7k8r26] {
        padding: 1.2rem;
    }
}

/* Landscape phone */
@media (max-height: 500px) {
    .login-container[b-hznk7k8r26] {
        gap: 0.8rem;
    }

    .logo-wrapper[b-hznk7k8r26] {
        width: 120px;
    }

    .login-card[b-hznk7k8r26] {
        padding: 1rem;
    }

    .tab-switcher[b-hznk7k8r26] {
        margin-bottom: 0.8rem;
    }

    .form-section[b-hznk7k8r26] {
        gap: 0.7rem;
    }
}

/* Enhanced mark: glow -> V -> ground -> mountain -> shimmer -> text */
.logo-wrapper[b-hznk7k8r26] {
    width: 248px;
    height: auto;
    transform-origin: center bottom;
}

/* ── No-animate: hide everything during prerender ── */
.logo-wrapper.no-animate[b-hznk7k8r26] {
    opacity: 0;
}

/* ── Animated: play the full sequence after interactive render ── */
.logo-wrapper.animated[b-hznk7k8r26] {
    animation: logoSettle-b-hznk7k8r26 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.logo-svg[b-hznk7k8r26] {
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 16px 30px rgba(92, 175, 161, 0.15));
}

.logo-mark[b-hznk7k8r26],
.logo-v[b-hznk7k8r26],
.logo-landscape[b-hznk7k8r26],
.logo-stars[b-hznk7k8r26] {
    transform-box: fill-box;
    transform-origin: center;
}

.logo-wrapper.animated[b-hznk7k8r26]  .logo-halo {
    opacity: 0;
    transform: scale(0.78);
    transform-origin: center;
    animation:
        haloBloom-b-hznk7k8r26 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards,
        haloBreathe-b-hznk7k8r26 5.5s ease-in-out 1.4s infinite;
}

.logo-wrapper.animated[b-hznk7k8r26]  .v-shadow {
    opacity: 0;
    animation: softGlowIn-b-hznk7k8r26 0.7s ease-out 0.1s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .v-stroke,
.logo-wrapper.animated[b-hznk7k8r26]  .ground-line,
.logo-wrapper.animated[b-hznk7k8r26]  .far-ridge,
.logo-wrapper.animated[b-hznk7k8r26]  .ridge-outline {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.logo-wrapper.animated[b-hznk7k8r26]  .v-stroke {
    filter: drop-shadow(0 8px 12px rgba(92, 175, 161, 0.16));
}

.logo-wrapper.animated[b-hznk7k8r26]  .v-left {
    animation: drawLogoPath-b-hznk7k8r26 0.68s cubic-bezier(0.7, 0, 0.18, 1) 0.18s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .v-right {
    animation: drawLogoPath-b-hznk7k8r26 0.78s cubic-bezier(0.7, 0, 0.18, 1) 0.36s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .ground-glow {
    animation: groundGlowIn-b-hznk7k8r26 0.75s ease-out 0.78s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .ground-line {
    animation: drawLogoPath-b-hznk7k8r26 0.78s cubic-bezier(0.2, 0.84, 0.2, 1) 0.7s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .far-ridge {
    animation:
        drawLogoPath-b-hznk7k8r26 0.8s cubic-bezier(0.2, 0.84, 0.2, 1) 0.95s forwards,
        farRidgeIn-b-hznk7k8r26 0.5s ease-out 0.95s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .mountain-fill,
.logo-wrapper.animated[b-hznk7k8r26]  .snow-cap {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center bottom;
}

.logo-wrapper.animated[b-hznk7k8r26]  .mountain-body {
    animation: mountainRise-b-hznk7k8r26 0.72s cubic-bezier(0.16, 1, 0.3, 1) 1.06s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .mountain-face-left {
    animation: mountainRise-b-hznk7k8r26 0.68s cubic-bezier(0.16, 1, 0.3, 1) 1.14s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .mountain-face-center {
    animation: mountainRise-b-hznk7k8r26 0.68s cubic-bezier(0.16, 1, 0.3, 1) 1.18s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .mountain-face-right {
    animation: mountainRise-b-hznk7k8r26 0.68s cubic-bezier(0.16, 1, 0.3, 1) 1.22s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .ridge-outline {
    animation: drawLogoPath-b-hznk7k8r26 0.86s cubic-bezier(0.2, 0.84, 0.2, 1) 1.08s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .snow-peak-left {
    animation: snowFlash-b-hznk7k8r26 0.45s ease-out 1.48s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .snow-peak-main {
    animation: snowFlash-b-hznk7k8r26 0.48s ease-out 1.56s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .ridge-sheen {
    opacity: 0;
    stroke-dasharray: 0.12 1;
    stroke-dashoffset: 1;
    animation: ridgeShimmer-b-hznk7k8r26 1.45s cubic-bezier(0.33, 1, 0.68, 1) 1.86s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .summit-dot {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: summitGlint-b-hznk7k8r26 1.1s ease-out 1.65s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .logo-star {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.logo-wrapper.animated[b-hznk7k8r26]  .star-one {
    animation: starPop-b-hznk7k8r26 1.25s ease-out 1.72s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .star-two {
    animation: starPop-b-hznk7k8r26 1.15s ease-out 1.9s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .star-three {
    animation: starPop-b-hznk7k8r26 1.05s ease-out 2.05s forwards;
}

.logo-wrapper.animated[b-hznk7k8r26]  .logo-text {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: fadeInUp-b-hznk7k8r26 0.82s cubic-bezier(0.16, 1, 0.3, 1) 2.06s forwards;
}

@keyframes logoSettle-b-hznk7k8r26 {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes haloBloom-b-hznk7k8r26 {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes haloBreathe-b-hznk7k8r26 {
    0%, 100% {
        opacity: 0.82;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

@keyframes softGlowIn-b-hznk7k8r26 {
    to {
        opacity: 0.72;
    }
}

@keyframes drawLogoPath-b-hznk7k8r26 {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes groundGlowIn-b-hznk7k8r26 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 0.82;
        transform: translateY(0);
    }
}

@keyframes farRidgeIn-b-hznk7k8r26 {
    to {
        opacity: 0.68;
    }
}

@keyframes mountainRise-b-hznk7k8r26 {
    from {
        opacity: 0;
        transform: translateY(12px) scaleY(0.72);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@keyframes snowFlash-b-hznk7k8r26 {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(0.84);
    }
    55% {
        opacity: 1;
        transform: translateY(0) scale(1.08);
    }
    100% {
        opacity: 0.98;
        transform: translateY(0) scale(1);
    }
}

@keyframes ridgeShimmer-b-hznk7k8r26 {
    0% {
        opacity: 0;
        stroke-dashoffset: 1;
    }
    18% {
        opacity: 0.9;
    }
    72% {
        opacity: 0.46;
    }
    100% {
        opacity: 0;
        stroke-dashoffset: -0.2;
    }
}

@keyframes summitGlint-b-hznk7k8r26 {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    38% {
        opacity: 1;
        transform: scale(1.8);
    }
    100% {
        opacity: 0.86;
        transform: scale(1);
    }
}

@keyframes starPop-b-hznk7k8r26 {
    0% {
        opacity: 0;
        transform: translateY(5px) scale(0.2);
    }
    34% {
        opacity: 0.9;
        transform: translateY(0) scale(1.35);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px) scale(0.7);
    }
}

@media (max-width: 480px) {
    .logo-wrapper[b-hznk7k8r26] {
        width: 190px;
    }
}

@media (max-width: 360px) {
    .logo-wrapper[b-hznk7k8r26] {
        width: 156px;
    }
}

@media (max-height: 500px) {
    .logo-wrapper[b-hznk7k8r26] {
        width: 136px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-wrapper[b-hznk7k8r26],
    .logo-halo[b-hznk7k8r26],
    .v-shadow[b-hznk7k8r26],
    .v-stroke[b-hznk7k8r26],
    .ground-glow[b-hznk7k8r26],
    .ground-line[b-hznk7k8r26],
    .far-ridge[b-hznk7k8r26],
    .mountain-fill[b-hznk7k8r26],
    .ridge-outline[b-hznk7k8r26],
    .snow-cap[b-hznk7k8r26],
    .ridge-sheen[b-hznk7k8r26],
    .summit-dot[b-hznk7k8r26],
    .logo-star[b-hznk7k8r26],
    .logo-text[b-hznk7k8r26] {
        animation: none !important;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
    }

    .ridge-sheen[b-hznk7k8r26],
    .logo-star[b-hznk7k8r26] {
        opacity: 0;
    }
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
.confirm-page[b-glmafo4ecy] {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0F172A; /* Fallback */
}

#neural-canvas[b-glmafo4ecy] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.confirm-card[b-glmafo4ecy] {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 48px;
    width: 100%;
    max-width: 480px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-glmafo4ecy 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp-b-glmafo4ecy {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

.confirm-card h2[b-glmafo4ecy] {
    color: #0F172A;
    font-size: 28px;
    font-weight: 700;
    margin-top: 16px;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
}

.message[b-glmafo4ecy] {
    color: #475569;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.error-text[b-glmafo4ecy] {
    color: #EF4444;
}

.redirect-hint[b-glmafo4ecy] {
    color: #94A3B8;
    font-size: 14px;
    margin-bottom: 32px;
}

.icon-success[b-glmafo4ecy] {
    font-size: 64px;
    margin-bottom: 16px;
    animation: popIn-b-glmafo4ecy 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.icon-error[b-glmafo4ecy] {
    font-size: 64px;
    margin-bottom: 16px;
}

@keyframes popIn-b-glmafo4ecy {
    0% { transform: scale(0); }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Password form fields */
.form-group[b-glmafo4ecy] {
    text-align: left;
    margin-bottom: 18px;
}

.form-group label[b-glmafo4ecy] {
    display: block;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

.form-group input[b-glmafo4ecy] {
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    color: #0F172A;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.form-group input[b-glmafo4ecy]::placeholder {
    color: #94A3B8;
}

.form-group input:focus[b-glmafo4ecy] {
    outline: none;
    border-color: #76B7A9;
    box-shadow: 0 0 0 3px rgba(118, 183, 169, 0.2);
}

.btn-primary[b-glmafo4ecy] {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    background: #76B7A9;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(118, 183, 169, 0.3);
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary:hover:not(:disabled)[b-glmafo4ecy] {
    background: #5A9A8C;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(118, 183, 169, 0.4);
}

.btn-primary:disabled[b-glmafo4ecy] {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner-large[b-glmafo4ecy] {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-top: 3px solid #FFFFFF;
    border-radius: 50%;
    animation: spin-b-glmafo4ecy 1s linear infinite;
}

@keyframes spin-b-glmafo4ecy {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Components/Pages/Session.razor.rz.scp.css */
/* Intentionally empty — see wwwroot/css/session.css (moved to global stylesheet
   so the extracted sub-components in Components/Session/ can share styles
   without Blazor scoped-CSS ::deep boilerplate). */