/* /Components/AnonymousPromptModal.razor.rz.scp.css */
/* Components/AnonymousPromptModal.razor.css */

.anonymous-chat[b-3puwpvqyqb]{
    max-width: 600px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    box-shadow: var(--tg-shadow-sm);
}

.anonymous-header[b-3puwpvqyqb]{
    text-align: center;
    margin-bottom: 1.2rem;
}
.anonymous-header h3[b-3puwpvqyqb]{
    color: var(--tg-primary);
    font-weight: 800;
    margin: 0 0 .4rem;
}
.anonymous-header p[b-3puwpvqyqb]{
    color: var(--tg-muted);
    font-size: .9rem;
    margin: 0;
}

/* Response bubble */
.response-bubble[b-3puwpvqyqb]{
    background: rgba(44,114,126,.06);
    border: 1px solid rgba(44,114,126,.12);
    border-radius: var(--tg-radius-sm);
    padding: .8rem 1rem;
    margin-bottom: 1rem;
}
.response-label[b-3puwpvqyqb]{
    font-size: .72rem;
    font-weight: 700;
    color: var(--tg-primary);
    text-transform: uppercase;
    letter-spacing: .03em;
    display: block;
    margin-bottom: .3rem;
}
.response-bubble p[b-3puwpvqyqb]{
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--tg-text);
}

/* Input */
.input-area textarea[b-3puwpvqyqb]{
    width: 100%;
    resize: none;
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-sm);
    padding: .6rem .8rem;
    font-size: .9rem;
    font-family: inherit;
    color: var(--tg-text);
    background: var(--tg-card);
    transition: border-color .2s;
}
.input-area textarea:focus[b-3puwpvqyqb]{
    outline: none;
    border-color: var(--tg-primary);
}
.input-area textarea:disabled[b-3puwpvqyqb]{
    opacity: .6;
}

.input-footer[b-3puwpvqyqb]{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .4rem;
}

.char-count[b-3puwpvqyqb]{
    font-size: .75rem;
    color: var(--tg-muted);
    font-variant-numeric: tabular-nums;
}
.char-warning[b-3puwpvqyqb]{ color: #e67e22; font-weight: 600 }

.send-btn[b-3puwpvqyqb]{
    background: var(--tg-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: .45rem 1.2rem;
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.send-btn:hover:not(:disabled)[b-3puwpvqyqb]{
    background: #04485D;
    transform: translateY(-1px);
}
.send-btn:disabled[b-3puwpvqyqb]{
    opacity: .5;
    cursor: not-allowed;
}

.usage-info[b-3puwpvqyqb]{
    text-align: center;
    font-size: .78rem;
    color: var(--tg-muted);
    margin-top: .6rem;
}

/* Limit reached */
.limit-reached[b-3puwpvqyqb]{
    text-align: center;
    padding: 1rem 0;
}
.limit-reached h4[b-3puwpvqyqb]{
    color: var(--tg-primary);
    font-weight: 800;
    margin: 0 0 .5rem;
}
.limit-reached p[b-3puwpvqyqb]{
    color: var(--tg-muted);
    font-size: .9rem;
    margin: 0 0 1rem;
}
.signup-btn[b-3puwpvqyqb]{
    background: var(--tg-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: .6rem 2rem;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: background .2s, transform .15s;
    box-shadow: 0 4px 12px rgba(44,114,126,.25);
}
.signup-btn:hover[b-3puwpvqyqb]{
    background: #04485D;
    transform: translateY(-1px);
}

.error-message[b-3puwpvqyqb]{
    color: #c43d3d;
    font-size: .82rem;
    text-align: center;
    margin-top: .6rem;
}
/* /Components/FeatureTour.razor.rz.scp.css */
/* ── Backdrop ──────────────────────────────────────────────────── */
.tour-backdrop[b-z1f1cl7fn7] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(2, 17, 27, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
    padding: 1rem;
    animation: tourFadeIn-b-z1f1cl7fn7 0.3s cubic-bezier(.4,.14,.2,1);
}

/* ── Card ─────────────────────────────────────────────────────── */
.tour-card[b-z1f1cl7fn7] {
    width: min(680px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(5, 18, 26, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55),
                0 0 120px rgba(76, 224, 198, 0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: clamp(1.25rem, 3vw, 2rem);
    animation: tourSlideUp-b-z1f1cl7fn7 0.4s cubic-bezier(.35,.01,.22,1);
}

.tour-card[b-z1f1cl7fn7]::-webkit-scrollbar { width: 6px; }
.tour-card[b-z1f1cl7fn7]::-webkit-scrollbar-track { background: transparent; }
.tour-card[b-z1f1cl7fn7]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* ── Header ───────────────────────────────────────────────────── */
.tour-header[b-z1f1cl7fn7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.tour-feature-badge[b-z1f1cl7fn7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #4ce0c6;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.tour-step-counter[b-z1f1cl7fn7] {
    font-size: 0.8rem;
    color: #a9cdd1;
    font-weight: 500;
}

/* ── Progress bar ─────────────────────────────────────────────── */
.tour-progress[b-z1f1cl7fn7] {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0.75rem 0 1.25rem;
    overflow: hidden;
}

.tour-progress-fill[b-z1f1cl7fn7] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(120deg, #4ce0c6, #f4c4d7);
    transition: width 0.4s cubic-bezier(.4,.14,.2,1);
}

/* ── Step content ─────────────────────────────────────────────── */
.tour-content[b-z1f1cl7fn7] {
    animation: tourStepEnter-b-z1f1cl7fn7 0.4s cubic-bezier(.4,.14,.2,1) both;
}

.tour-step-title[b-z1f1cl7fn7] {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 800;
    color: #ecf8f5;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.tour-step-description[b-z1f1cl7fn7] {
    font-size: 0.92rem;
    color: #a9cdd1;
    line-height: 1.6;
    margin: 0 0 1rem;
}

/* ── Mockup area ──────────────────────────────────────────────── */
.tour-mockup[b-z1f1cl7fn7] {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 1.25rem;
    margin: 0.75rem 0 1rem;
    min-height: 140px;
    overflow: hidden;
}

/* ── Interaction hint ─────────────────────────────────────────── */
.tour-hint[b-z1f1cl7fn7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #4ce0c6;
    background: rgba(76, 224, 198, 0.08);
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    font-weight: 500;
}

/* ── Navigation ───────────────────────────────────────────────── */
.tour-nav[b-z1f1cl7fn7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tour-nav-left[b-z1f1cl7fn7],
.tour-nav-right[b-z1f1cl7fn7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.tour-btn[b-z1f1cl7fn7] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(.4,.14,.2,1);
    font-family: inherit;
    white-space: nowrap;
}

.tour-btn:focus-visible[b-z1f1cl7fn7] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(76, 224, 198, 0.35);
}

.tour-btn-primary[b-z1f1cl7fn7] {
    background: linear-gradient(135deg, #4ce0c6, #3bc4d8);
    color: #04181e;
    border-color: transparent;
}
.tour-btn-primary:hover[b-z1f1cl7fn7] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(76, 224, 198, 0.3);
}

.tour-btn-outline[b-z1f1cl7fn7] {
    background: transparent;
    color: #ecf8f5;
    border-color: rgba(255, 255, 255, 0.15);
}
.tour-btn-outline:hover[b-z1f1cl7fn7] {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.04);
}

.tour-btn-ghost[b-z1f1cl7fn7] {
    background: transparent;
    color: #a9cdd1;
    font-size: 0.8rem;
    padding: 0.4rem 0.65rem;
    font-weight: 500;
}
.tour-btn-ghost:hover[b-z1f1cl7fn7] {
    color: #ecf8f5;
    background: rgba(255, 255, 255, 0.04);
}

/* ── Step dots ────────────────────────────────────────────────── */
.tour-dots[b-z1f1cl7fn7] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 1rem;
}

.tour-dot[b-z1f1cl7fn7] {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
}

.tour-dot:hover[b-z1f1cl7fn7] {
    background: rgba(255, 255, 255, 0.3);
}

.tour-dot.active[b-z1f1cl7fn7] {
    background: #4ce0c6;
    transform: scale(1.4);
}

/* ═══════════════════════════════════════════════════════════════
   MOCKUP ELEMENT STYLES (::deep for MarkupString content)
   ═══════════════════════════════════════════════════════════════ */

/* ── Highlight pulse effect ───────────────────────────────────── */
[b-z1f1cl7fn7] .tour-highlight-pulse {
    animation: tourHighlightPulse-b-z1f1cl7fn7 2s ease-in-out infinite;
    border-radius: 12px;
}

/* ── Sidebar demo ─────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-sidebar-demo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 220px;
}
[b-z1f1cl7fn7] .tour-mock-nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    color: #a9cdd1;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.2s;
}
[b-z1f1cl7fn7] .tour-mock-nav-item.tour-highlight-pulse {
    background: rgba(76, 224, 198, 0.12);
    color: #4ce0c6;
    font-weight: 600;
}
[b-z1f1cl7fn7] .tour-mock-icon {
    font-size: 1.2rem;
    width: 22px;
    text-align: center;
}
[b-z1f1cl7fn7] .tour-mock-icon-sm {
    font-size: 0.95rem;
    width: 22px;
    text-align: center;
}
[b-z1f1cl7fn7] .tour-mock-nav-divider {
    font-size: 0.7rem;
    color: #a9cdd1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.75rem 0.75rem 0.25rem;
    font-weight: 600;
    opacity: 0.6;
}

/* ── Chat area mockup ─────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-chat-area {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
[b-z1f1cl7fn7] .tour-mock-assistant-row {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}
[b-z1f1cl7fn7] .tour-mock-avatar-circle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4ce0c6, #3bc4d8);
    color: #04181e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
}
[b-z1f1cl7fn7] .tour-mock-bubble-assistant {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 0.75rem 1rem;
    color: #ecf8f5;
    font-size: 0.85rem;
    line-height: 1.55;
    max-width: 85%;
}
[b-z1f1cl7fn7] .tour-mock-ai-badge {
    font-size: 0.68rem;
    color: #4ce0c6;
    font-weight: 600;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
[b-z1f1cl7fn7] .tour-mock-user-row {
    display: flex;
    justify-content: flex-end;
}
[b-z1f1cl7fn7] .tour-mock-bubble-user {
    background: linear-gradient(135deg, #4ce0c6, #3bc4d8);
    color: #04181e;
    border-radius: 16px;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    max-width: 80%;
    line-height: 1.5;
}
[b-z1f1cl7fn7] .tour-mock-composer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 0.65rem 0.65rem 0.65rem 1rem;
    margin-top: 0.5rem;
}
[b-z1f1cl7fn7] .tour-mock-placeholder-text {
    color: #a9cdd1;
    font-size: 0.85rem;
    opacity: 0.6;
}
[b-z1f1cl7fn7] .tour-mock-send-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4ce0c6;
    color: #04181e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

/* ── Timer mockup ─────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-timer-demo {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
[b-z1f1cl7fn7] .tour-mock-timer-label {
    font-size: 0.78rem;
    color: #a9cdd1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
[b-z1f1cl7fn7] .tour-mock-timer-bar-outer {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
[b-z1f1cl7fn7] .tour-mock-timer-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ce0c6, #3bc4d8);
    border-radius: inherit;
    transition: width 0.3s;
}
[b-z1f1cl7fn7] .tour-mock-timer-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: #ecf8f5;
}
[b-z1f1cl7fn7] .tour-mock-timer-remaining {
    color: #4ce0c6;
    font-weight: 500;
}
[b-z1f1cl7fn7] .tour-mock-tier-info {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
[b-z1f1cl7fn7] .tour-mock-tier-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #a9cdd1;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
}

/* ── Crisis mockup ────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-crisis-demo { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
[b-z1f1cl7fn7] .tour-mock-crisis-fab {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.35);
}
[b-z1f1cl7fn7] .tour-mock-crisis-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 16px;
    padding: 1rem;
    width: 100%;
}
[b-z1f1cl7fn7] .tour-mock-crisis-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: #f59e0b;
    font-size: 0.95rem;
}
[b-z1f1cl7fn7] .tour-mock-crisis-shield { font-size: 1.2rem; }
[b-z1f1cl7fn7] .tour-mock-crisis-panel p {
    color: #a9cdd1;
    font-size: 0.85rem;
    margin: 0.5rem 0;
}
[b-z1f1cl7fn7] .tour-mock-crisis-resource {
    font-size: 0.82rem;
    color: #ecf8f5;
    padding: 0.3rem 0;
}
[b-z1f1cl7fn7] .tour-mock-crisis-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

/* ── Buttons in mockups ───────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #4ce0c6, #3bc4d8);
    color: #04181e;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: default;
}
[b-z1f1cl7fn7] .tour-mock-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    color: #ecf8f5;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: default;
}
[b-z1f1cl7fn7] .tour-mock-btn-small {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    background: rgba(76, 224, 198, 0.1);
    color: #4ce0c6;
    border-radius: 8px;
    cursor: default;
}

/* ── Severity levels ──────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-detection-demo { display: flex; flex-direction: column; gap: 0.75rem; }
[b-z1f1cl7fn7] .tour-mock-detection-header {
    font-weight: 700;
    color: #ecf8f5;
    font-size: 0.9rem;
}
[b-z1f1cl7fn7] .tour-mock-severity-levels { display: flex; flex-direction: column; gap: 0.4rem; }
[b-z1f1cl7fn7] .tour-mock-severity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    font-size: 0.82rem;
    color: #ecf8f5;
    background: rgba(255, 255, 255, 0.03);
}
[b-z1f1cl7fn7] .tour-mock-severity-dot {
    width: 10px; height: 10px; border-radius: 50%;
}
[b-z1f1cl7fn7] .tour-mock-severity-dot.critical { background: #ef4444; }
[b-z1f1cl7fn7] .tour-mock-severity-dot.high { background: #f59e0b; }
[b-z1f1cl7fn7] .tour-mock-severity-dot.medium { background: #eab308; }
[b-z1f1cl7fn7] .tour-mock-severity-desc { color: #a9cdd1; margin-left: auto; font-size: 0.78rem; }

/* ── FAB demo ─────────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-fab-demo { position: relative; min-height: 120px; }
[b-z1f1cl7fn7] .tour-mock-chat-bg { opacity: 0.5; }
[b-z1f1cl7fn7] .tour-mock-fab-label {
    text-align: center;
    font-size: 0.78rem;
    color: #a9cdd1;
    margin-top: 0.5rem;
}

/* ── Resources demo ───────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-resources-demo { display: flex; flex-direction: column; gap: 0.75rem; }
[b-z1f1cl7fn7] .tour-mock-resource-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 0.75rem;
}
[b-z1f1cl7fn7] .tour-mock-resource-region {
    font-weight: 600;
    color: #ecf8f5;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

/* ── Connect demo ─────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-connect-demo { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
[b-z1f1cl7fn7] .tour-mock-connect-options { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
[b-z1f1cl7fn7] .tour-mock-connect-note { font-size: 0.78rem; color: #a9cdd1; text-align: center; }

/* ── Assessment grid ──────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-assessment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}
[b-z1f1cl7fn7] .tour-mock-assessment-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 0.75rem;
    text-align: center;
    transition: border-color 0.2s;
}
[b-z1f1cl7fn7] .tour-mock-assessment-abbr {
    font-weight: 800;
    color: #4ce0c6;
    font-size: 1rem;
    margin-bottom: 0.2rem;
}
[b-z1f1cl7fn7] .tour-mock-assessment-name { color: #ecf8f5; font-size: 0.8rem; font-weight: 600; }
[b-z1f1cl7fn7] .tour-mock-assessment-items { color: #a9cdd1; font-size: 0.72rem; margin-top: 0.2rem; }

/* ── Question demo ────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-question-demo { display: flex; flex-direction: column; gap: 0.6rem; }
[b-z1f1cl7fn7] .tour-mock-question-header { font-size: 0.78rem; color: #a9cdd1; font-weight: 600; }
[b-z1f1cl7fn7] .tour-mock-question-progress { height: 4px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
[b-z1f1cl7fn7] .tour-mock-question-progress-fill { height: 100%; background: #4ce0c6; border-radius: inherit; }
[b-z1f1cl7fn7] .tour-mock-question-text { color: #ecf8f5; font-size: 0.9rem; font-weight: 500; line-height: 1.5; }
[b-z1f1cl7fn7] .tour-mock-likert { display: flex; flex-direction: column; gap: 0.35rem; }
[b-z1f1cl7fn7] .tour-mock-likert-option {
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #a9cdd1;
    font-size: 0.82rem;
    cursor: default;
    transition: border-color 0.2s;
}
[b-z1f1cl7fn7] .tour-mock-likert-option.tour-highlight-pulse {
    border-color: #4ce0c6;
    color: #ecf8f5;
    background: rgba(76, 224, 198, 0.08);
}

/* ── Score demo ───────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-score-demo { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
[b-z1f1cl7fn7] .tour-mock-score-circle {
    width: 90px; height: 90px;
    border-radius: 50%;
    border: 3px solid #4ce0c6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
[b-z1f1cl7fn7] .tour-mock-score-value { font-size: 1.6rem; font-weight: 800; color: #ecf8f5; }
[b-z1f1cl7fn7] .tour-mock-score-max { font-size: 0.75rem; color: #a9cdd1; }
[b-z1f1cl7fn7] .tour-mock-score-severity {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
[b-z1f1cl7fn7] .tour-mock-score-severity.moderate { background: rgba(234,179,8,0.15); color: #eab308; }
[b-z1f1cl7fn7] .tour-mock-score-interpretation {
    color: #a9cdd1;
    font-size: 0.82rem;
    text-align: center;
    line-height: 1.55;
    max-width: 90%;
}
[b-z1f1cl7fn7] .tour-mock-score-recommendations { display: flex; flex-direction: column; gap: 0.25rem; align-self: stretch; }
[b-z1f1cl7fn7] .tour-mock-recommendation { font-size: 0.8rem; color: #4ce0c6; padding: 0.25rem 0; }

/* ── Trend demo ───────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-trend-demo { display: flex; flex-direction: column; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-trend-header { font-weight: 700; color: #ecf8f5; font-size: 0.9rem; }
[b-z1f1cl7fn7] .tour-mock-trend-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    font-size: 0.82rem;
    color: #a9cdd1;
}
[b-z1f1cl7fn7] .tour-mock-score-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.78rem;
}
[b-z1f1cl7fn7] .tour-mock-score-badge.high { background: rgba(239,68,68,0.15); color: #ef4444; }
[b-z1f1cl7fn7] .tour-mock-score-badge.moderate { background: rgba(234,179,8,0.15); color: #eab308; }
[b-z1f1cl7fn7] .tour-mock-score-badge.mild { background: rgba(76,224,198,0.15); color: #4ce0c6; }
[b-z1f1cl7fn7] .tour-mock-trend-arrow { font-weight: 700; font-size: 1rem; }
[b-z1f1cl7fn7] .tour-mock-trend-arrow.improving { color: #4ce0c6; }
[b-z1f1cl7fn7] .tour-mock-trend-arrow.down { color: #ef4444; }
[b-z1f1cl7fn7] .tour-mock-trend-arrow.stable { color: #a9cdd1; }
[b-z1f1cl7fn7] .tour-mock-trend-insight {
    font-size: 0.82rem;
    color: #4ce0c6;
    padding: 0.5rem;
    background: rgba(76,224,198,0.06);
    border-radius: 8px;
    text-align: center;
    margin-top: 0.25rem;
}

/* ── Limits demo ──────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-limits-demo { display: flex; flex-direction: column; gap: 0.4rem; }
[b-z1f1cl7fn7] .tour-mock-limit-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    font-size: 0.82rem;
    color: #a9cdd1;
}
[b-z1f1cl7fn7] .tour-mock-tier-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
[b-z1f1cl7fn7] .tour-mock-tier-badge.explorer { background: rgba(169,205,209,0.15); color: #a9cdd1; }
[b-z1f1cl7fn7] .tour-mock-tier-badge.lite { background: rgba(76,224,198,0.15); color: #4ce0c6; }
[b-z1f1cl7fn7] .tour-mock-tier-badge.plus { background: rgba(156,213,255,0.15); color: #9cd5ff; }
[b-z1f1cl7fn7] .tour-mock-tier-badge.pro { background: rgba(244,196,215,0.15); color: #f4c4d7; }

/* ── Mood entry ───────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-mood-entry { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
[b-z1f1cl7fn7] .tour-mock-mood-greeting { font-size: 1rem; color: #ecf8f5; font-weight: 600; }

/* ── Sliders ──────────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-sliders-demo { display: flex; flex-direction: column; gap: 0.75rem; }
[b-z1f1cl7fn7] .tour-mock-slider-group {
    display: grid;
    grid-template-columns: 70px 1fr 30px;
    align-items: center;
    gap: 0.6rem;
}
[b-z1f1cl7fn7] .tour-mock-slider-group label { color: #a9cdd1; font-size: 0.82rem; font-weight: 500; }
[b-z1f1cl7fn7] .tour-mock-slider {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    position: relative;
}
[b-z1f1cl7fn7] .tour-mock-slider-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ce0c6, #3bc4d8);
    border-radius: inherit;
}
[b-z1f1cl7fn7] .tour-mock-slider-fill.anxiety {
    background: linear-gradient(90deg, #eab308, #f59e0b);
}
[b-z1f1cl7fn7] .tour-mock-slider-thumb {
    width: 14px; height: 14px;
    background: #ecf8f5;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
[b-z1f1cl7fn7] .tour-mock-slider-val { color: #ecf8f5; font-weight: 700; font-size: 0.88rem; text-align: right; }

/* ── Emotion chips ────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-emotions-demo { padding: 0.25rem 0; }
[b-z1f1cl7fn7] .tour-mock-emotion-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
[b-z1f1cl7fn7] .tour-mock-chip {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #a9cdd1;
    cursor: default;
}
[b-z1f1cl7fn7] .tour-mock-chip.selected {
    background: rgba(76,224,198,0.12);
    border-color: #4ce0c6;
    color: #4ce0c6;
}

/* ── Chart bars ───────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-trends-demo { display: flex; flex-direction: column; gap: 0.75rem; }
[b-z1f1cl7fn7] .tour-mock-trend-chart { display: flex; flex-direction: column; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    height: 80px;
}
[b-z1f1cl7fn7] .tour-mock-bar {
    flex: 1;
    background: linear-gradient(180deg, #4ce0c6, rgba(76,224,198,0.3));
    border-radius: 4px 4px 0 0;
    min-width: 10px;
}
[b-z1f1cl7fn7] .tour-mock-chart-label { font-size: 0.72rem; color: #a9cdd1; text-align: center; }
[b-z1f1cl7fn7] .tour-mock-stats-row { display: flex; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    font-size: 0.78rem;
    color: #a9cdd1;
    gap: 0.15rem;
}
[b-z1f1cl7fn7] .tour-mock-stat-val { font-size: 1.1rem; font-weight: 800; color: #ecf8f5; }

/* ── Distribution bars ────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-distribution-demo { display: flex; flex-direction: column; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-dist-header { font-weight: 700; color: #ecf8f5; font-size: 0.88rem; }
[b-z1f1cl7fn7] .tour-mock-dist-bar-group { display: flex; flex-direction: column; gap: 0.35rem; }
[b-z1f1cl7fn7] .tour-mock-dist-row {
    display: grid;
    grid-template-columns: 80px 1fr 30px;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #a9cdd1;
}
[b-z1f1cl7fn7] .tour-mock-dist-bar {
    height: 8px;
    background: linear-gradient(90deg, #4ce0c6, rgba(76,224,198,0.4));
    border-radius: 999px;
}
[b-z1f1cl7fn7] .tour-mock-dist-bar.anxiety {
    background: linear-gradient(90deg, #eab308, rgba(234,179,8,0.4));
}

/* ── Journal types ────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-journal-types { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
[b-z1f1cl7fn7] .tour-mock-journal-card {
    width: 110px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 0.75rem;
    text-align: center;
    cursor: default;
}
[b-z1f1cl7fn7] .tour-mock-journal-icon { font-size: 1.4rem; margin-bottom: 0.25rem; }
[b-z1f1cl7fn7] .tour-mock-journal-type { color: #ecf8f5; font-weight: 600; font-size: 0.8rem; }
[b-z1f1cl7fn7] .tour-mock-journal-desc { color: #a9cdd1; font-size: 0.7rem; margin-top: 0.15rem; }

/* ── Editor demo ──────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-editor-demo {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
}
[b-z1f1cl7fn7] .tour-mock-editor-toolbar {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.03);
    font-size: 0.78rem;
    color: #a9cdd1;
    font-weight: 500;
}
[b-z1f1cl7fn7] .tour-mock-date { color: #a9cdd1; opacity: 0.7; }
[b-z1f1cl7fn7] .tour-mock-editor-area { padding: 0.75rem; min-height: 80px; }
[b-z1f1cl7fn7] .tour-mock-typing {
    color: #ecf8f5;
    font-size: 0.85rem;
    line-height: 1.6;
}
[b-z1f1cl7fn7] .tour-mock-cursor {
    color: #4ce0c6;
    animation: tourBlink-b-z1f1cl7fn7 1s step-end infinite;
}
[b-z1f1cl7fn7] .tour-mock-editor-footer {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
    background: rgba(255,255,255,0.02);
    font-size: 0.7rem;
    color: #a9cdd1;
}

/* ── CBT Thought Records ──────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-cbt-demo { display: flex; flex-direction: column; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-cbt-step {
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border-left: 3px solid rgba(76,224,198,0.3);
}
[b-z1f1cl7fn7] .tour-mock-cbt-step.tour-highlight-pulse { border-left-color: #4ce0c6; }
[b-z1f1cl7fn7] .tour-mock-cbt-label {
    font-size: 0.72rem;
    color: #4ce0c6;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}
[b-z1f1cl7fn7] .tour-mock-cbt-value { color: #ecf8f5; font-size: 0.82rem; line-height: 1.45; }
[b-z1f1cl7fn7] .tour-mock-cbt-slider {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    margin-top: 0.25rem;
}
[b-z1f1cl7fn7] .tour-mock-cbt-slider-fill {
    height: 100%;
    background: #4ce0c6;
    border-radius: inherit;
}

/* ── Streak demo ──────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-streak-demo { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
[b-z1f1cl7fn7] .tour-mock-streak-banner {
    background: linear-gradient(135deg, rgba(234,179,8,0.12), rgba(245,158,11,0.08));
    border: 1px solid rgba(234,179,8,0.2);
    border-radius: 14px;
    padding: 0.75rem;
    text-align: center;
    width: 100%;
}
[b-z1f1cl7fn7] .tour-mock-streak-flame { font-size: 1.8rem; }
[b-z1f1cl7fn7] .tour-mock-streak-count { font-weight: 800; color: #eab308; font-size: 1.1rem; }
[b-z1f1cl7fn7] .tour-mock-streak-sub { color: #a9cdd1; font-size: 0.78rem; margin-top: 0.2rem; }
[b-z1f1cl7fn7] .tour-mock-streak-calendar { display: flex; gap: 0.35rem; }
[b-z1f1cl7fn7] .tour-mock-cal-day {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(255,255,255,0.04);
    color: #a9cdd1;
}
[b-z1f1cl7fn7] .tour-mock-cal-day.done { background: rgba(76,224,198,0.15); color: #4ce0c6; }
[b-z1f1cl7fn7] .tour-mock-cal-day.freeze { background: rgba(156,213,255,0.1); color: #9cd5ff; }
[b-z1f1cl7fn7] .tour-mock-cal-day.today { background: rgba(234,179,8,0.15); color: #eab308; }
[b-z1f1cl7fn7] .tour-mock-streak-freezes { font-size: 0.78rem; color: #9cd5ff; }

/* ── Search/Tags demo ─────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-search-demo { display: flex; flex-direction: column; gap: 0.6rem; }
[b-z1f1cl7fn7] .tour-mock-search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #a9cdd1;
    font-size: 0.85rem;
}
[b-z1f1cl7fn7] .tour-mock-tag-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
[b-z1f1cl7fn7] .tour-mock-tag {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    background: rgba(76,224,198,0.08);
    color: #4ce0c6;
    font-weight: 500;
}
[b-z1f1cl7fn7] .tour-mock-entry-preview { display: flex; flex-direction: column; gap: 0.3rem; }
[b-z1f1cl7fn7] .tour-mock-entry-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    font-size: 0.8rem;
    color: #a9cdd1;
}
[b-z1f1cl7fn7] .tour-mock-entry-type {
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}
[b-z1f1cl7fn7] .tour-mock-entry-type.gratitude { background: rgba(234,179,8,0.15); color: #eab308; }
[b-z1f1cl7fn7] .tour-mock-entry-type.thought-record { background: rgba(156,213,255,0.15); color: #9cd5ff; }
[b-z1f1cl7fn7] .tour-mock-entry-date { margin-left: auto; font-size: 0.72rem; }

/* ── Encryption demo ──────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-encryption-demo { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
[b-z1f1cl7fn7] .tour-mock-lock-icon { font-size: 2.5rem; }
[b-z1f1cl7fn7] .tour-mock-encryption-title { font-weight: 700; color: #4ce0c6; font-size: 1rem; }
[b-z1f1cl7fn7] .tour-mock-encryption-flow { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
[b-z1f1cl7fn7] .tour-mock-flow-step { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
[b-z1f1cl7fn7] .tour-mock-flow-icon { font-size: 1.4rem; }
[b-z1f1cl7fn7] .tour-mock-flow-step span { font-size: 0.78rem; color: #a9cdd1; }
[b-z1f1cl7fn7] .tour-mock-flow-arrow { color: #4ce0c6; font-size: 1.2rem; }
[b-z1f1cl7fn7] .tour-mock-encryption-note { font-size: 0.78rem; color: #a9cdd1; }

/* ── Form elements ────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-form-group { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-form-group label { font-size: 0.78rem; color: #a9cdd1; font-weight: 500; }
[b-z1f1cl7fn7] .tour-mock-input,
[b-z1f1cl7fn7] .tour-mock-select,
[b-z1f1cl7fn7] .tour-mock-textarea {
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #ecf8f5;
    font-size: 0.85rem;
}
[b-z1f1cl7fn7] .tour-mock-textarea { min-height: 60px; line-height: 1.5; }

/* ── Goal mockups ─────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-goal-form { display: flex; flex-direction: column; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-milestones-demo { display: flex; flex-direction: column; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-goal-title { font-weight: 700; color: #ecf8f5; font-size: 0.95rem; }
[b-z1f1cl7fn7] .tour-mock-milestone-list { display: flex; flex-direction: column; gap: 0.35rem; }
[b-z1f1cl7fn7] .tour-mock-milestone {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.6rem; border-radius: 8px;
    background: rgba(255,255,255,0.02); font-size: 0.82rem; color: #a9cdd1;
}
[b-z1f1cl7fn7] .tour-mock-milestone.done { color: #4ce0c6; }
[b-z1f1cl7fn7] .tour-mock-check { color: #4ce0c6; font-weight: 700; }
[b-z1f1cl7fn7] .tour-mock-check-empty {
    width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.15); border-radius: 4px;
}
[b-z1f1cl7fn7] .tour-mock-add-milestone { font-size: 0.8rem; color: #4ce0c6; cursor: default; padding: 0.3rem 0; }

/* ── Progress demo ────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-progress-demo { display: flex; flex-direction: column; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-progress-header { font-weight: 700; color: #ecf8f5; font-size: 0.9rem; }
[b-z1f1cl7fn7] .tour-mock-progress-bar-outer { height: 10px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
[b-z1f1cl7fn7] .tour-mock-progress-bar-fill { height: 100%; background: linear-gradient(90deg, #4ce0c6, #9cd5ff); border-radius: inherit; }
[b-z1f1cl7fn7] .tour-mock-progress-pct { font-weight: 800; color: #4ce0c6; font-size: 1.2rem; text-align: center; }
[b-z1f1cl7fn7] .tour-mock-mood-tag { font-size: 0.82rem; color: #a9cdd1; text-align: center; }

/* ── Goal stats ───────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-goal-stats { display: flex; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-stat-card {
    flex: 1; text-align: center;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 0.75rem;
}
[b-z1f1cl7fn7] .tour-mock-stat-card .tour-mock-stat-val { font-size: 1.4rem; }
[b-z1f1cl7fn7] .tour-mock-stat-label { font-size: 0.72rem; color: #a9cdd1; margin-top: 0.15rem; }

/* ── Safety plan sections ─────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-safety-sections { display: flex; flex-direction: column; gap: 0.3rem; }
[b-z1f1cl7fn7] .tour-mock-section-item {
    padding: 0.5rem 0.75rem; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.04);
    font-size: 0.82rem; color: #a9cdd1; cursor: default;
}

/* ── Contacts demo ────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-contacts-demo { display: flex; flex-direction: column; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-contact-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; padding: 0.65rem 0.75rem;
}
[b-z1f1cl7fn7] .tour-mock-contact-type { font-size: 0.68rem; color: #4ce0c6; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
[b-z1f1cl7fn7] .tour-mock-contact-name { color: #ecf8f5; font-size: 0.88rem; font-weight: 500; margin: 0.15rem 0 0.35rem; }
[b-z1f1cl7fn7] .tour-mock-contact-actions { display: flex; gap: 0.35rem; }
[b-z1f1cl7fn7] .tour-mock-add-contact { font-size: 0.82rem; color: #4ce0c6; cursor: default; padding: 0.3rem 0; }

/* ── Review demo ──────────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-review-demo { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
[b-z1f1cl7fn7] .tour-mock-review-card {
    display: flex; gap: 0.75rem; align-items: center;
    background: rgba(255,255,255,0.03); border-radius: 14px; padding: 0.75rem; width: 100%;
}
[b-z1f1cl7fn7] .tour-mock-review-icon { font-size: 1.8rem; }
[b-z1f1cl7fn7] .tour-mock-review-text { flex: 1; }
[b-z1f1cl7fn7] .tour-mock-review-text strong { color: #ecf8f5; font-size: 0.88rem; }
[b-z1f1cl7fn7] .tour-mock-review-text p { color: #a9cdd1; font-size: 0.78rem; margin: 0.2rem 0 0; }

/* ── Community mockups ────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-groups-grid { display: flex; flex-direction: column; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-group-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 0.75rem;
}
[b-z1f1cl7fn7] .tour-mock-group-name { font-weight: 600; color: #ecf8f5; font-size: 0.9rem; }
[b-z1f1cl7fn7] .tour-mock-group-stats { font-size: 0.75rem; color: #a9cdd1; margin: 0.15rem 0; }
[b-z1f1cl7fn7] .tour-mock-group-desc { font-size: 0.8rem; color: #a9cdd1; }
[b-z1f1cl7fn7] .tour-mock-join-demo { display: flex; flex-direction: column; gap: 0.6rem; }
[b-z1f1cl7fn7] .tour-mock-group-header { display: flex; align-items: center; justify-content: space-between; }
[b-z1f1cl7fn7] .tour-mock-group-preview { margin-top: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-post {
    background: rgba(255,255,255,0.02); border-radius: 10px; padding: 0.6rem;
}
[b-z1f1cl7fn7] .tour-mock-post-author { font-size: 0.72rem; color: #4ce0c6; font-weight: 600; margin-bottom: 0.2rem; }
[b-z1f1cl7fn7] .tour-mock-post-text { font-size: 0.82rem; color: #ecf8f5; }
[b-z1f1cl7fn7] .tour-mock-post-create { display: flex; flex-direction: column; gap: 0.6rem; }
[b-z1f1cl7fn7] .tour-mock-post-options { display: flex; align-items: center; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: #a9cdd1; cursor: default; }
[b-z1f1cl7fn7] .tour-mock-toggle-switch {
    width: 36px; height: 20px; border-radius: 999px;
    background: rgba(255,255,255,0.15); position: relative;
}
[b-z1f1cl7fn7] .tour-mock-toggle-switch::after {
    content: '';
    width: 16px; height: 16px; border-radius: 50%;
    background: #a9cdd1; position: absolute; top: 2px; left: 2px;
    transition: transform 0.2s;
}
[b-z1f1cl7fn7] .tour-mock-toggle-switch.active { background: rgba(76,224,198,0.3); }
[b-z1f1cl7fn7] .tour-mock-toggle-switch.active::after { background: #4ce0c6; transform: translateX(16px); }
[b-z1f1cl7fn7] .tour-mock-create-group { display: flex; flex-direction: column; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-radio-group { display: flex; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-radio {
    padding: 0.35rem 0.75rem; border-radius: 8px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.82rem; color: #a9cdd1; cursor: default;
}
[b-z1f1cl7fn7] .tour-mock-radio.selected { border-color: #4ce0c6; color: #4ce0c6; background: rgba(76,224,198,0.08); }
[b-z1f1cl7fn7] .tour-mock-guideline { font-size: 0.82rem; color: #4ce0c6; padding: 0.3rem 0; }

/* ── Wearables mockups ────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-devices-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
[b-z1f1cl7fn7] .tour-mock-device-card {
    padding: 0.6rem 0.85rem; border-radius: 10px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    font-size: 0.82rem; color: #a9cdd1; cursor: default;
}
[b-z1f1cl7fn7] .tour-mock-health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
[b-z1f1cl7fn7] .tour-mock-metric-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; padding: 0.6rem; text-align: center;
    font-size: 0.72rem; color: #a9cdd1;
}
[b-z1f1cl7fn7] .tour-mock-metric-icon { display: block; font-size: 1.1rem; margin-bottom: 0.2rem; }
[b-z1f1cl7fn7] .tour-mock-metric-val { display: block; font-size: 1.05rem; font-weight: 800; color: #ecf8f5; }
[b-z1f1cl7fn7] .tour-mock-correlation-demo { display: flex; flex-direction: column; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-correlation-title { font-weight: 700; color: #ecf8f5; font-size: 0.9rem; }
[b-z1f1cl7fn7] .tour-mock-correlation-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.6rem; border-radius: 8px;
    background: rgba(255,255,255,0.02); font-size: 0.82rem; color: #a9cdd1;
}
[b-z1f1cl7fn7] .tour-mock-correlation-icon { font-size: 0.95rem; }
[b-z1f1cl7fn7] .tour-mock-correlation-strength {
    margin-left: auto; font-size: 0.7rem; font-weight: 600;
    padding: 0.1rem 0.4rem; border-radius: 999px;
    background: rgba(76,224,198,0.1); color: #4ce0c6;
}
[b-z1f1cl7fn7] .tour-mock-insights-demo { display: flex; flex-direction: column; gap: 0.6rem; }
[b-z1f1cl7fn7] .tour-mock-insight-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 0.75rem;
}
[b-z1f1cl7fn7] .tour-mock-insight-period { font-size: 0.72rem; color: #4ce0c6; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; }
[b-z1f1cl7fn7] .tour-mock-insight-text { color: #ecf8f5; font-size: 0.82rem; line-height: 1.55; }
[b-z1f1cl7fn7] .tour-mock-period-tabs { display: flex; gap: 0.35rem; }
[b-z1f1cl7fn7] .tour-mock-tab {
    padding: 0.35rem 0.75rem; border-radius: 8px;
    background: rgba(255,255,255,0.04); font-size: 0.78rem;
    color: #a9cdd1; cursor: default;
}
[b-z1f1cl7fn7] .tour-mock-tab.active { background: rgba(76,224,198,0.12); color: #4ce0c6; }

/* ── Therapist mockups ────────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-search-therapist { display: flex; flex-direction: column; gap: 0.6rem; }
[b-z1f1cl7fn7] .tour-mock-filter-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
[b-z1f1cl7fn7] .tour-mock-therapist-card {
    display: flex; gap: 0.75rem; align-items: center;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 0.75rem;
}
[b-z1f1cl7fn7] .tour-mock-therapist-avatar { font-size: 2rem; }
[b-z1f1cl7fn7] .tour-mock-therapist-name { font-weight: 600; color: #ecf8f5; font-size: 0.92rem; }
[b-z1f1cl7fn7] .tour-mock-therapist-creds { font-size: 0.78rem; color: #a9cdd1; }
[b-z1f1cl7fn7] .tour-mock-therapist-specs { font-size: 0.78rem; color: #4ce0c6; margin: 0.1rem 0; }
[b-z1f1cl7fn7] .tour-mock-therapist-rating { font-size: 0.82rem; color: #eab308; }
[b-z1f1cl7fn7] .tour-mock-therapist-avail { font-size: 0.78rem; color: #4ce0c6; }
[b-z1f1cl7fn7] .tour-mock-booking-demo { display: flex; flex-direction: column; gap: 0.6rem; }
[b-z1f1cl7fn7] .tour-mock-booking-header { font-weight: 600; color: #ecf8f5; font-size: 0.9rem; }
[b-z1f1cl7fn7] .tour-mock-time-slots { display: flex; gap: 0.35rem; flex-wrap: wrap; }
[b-z1f1cl7fn7] .tour-mock-time-slot {
    padding: 0.4rem 0.75rem; border-radius: 8px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.82rem; color: #a9cdd1; cursor: default;
}
[b-z1f1cl7fn7] .tour-mock-time-slot.tour-highlight-pulse { border-color: #4ce0c6; color: #4ce0c6; }
[b-z1f1cl7fn7] .tour-mock-booking-note { font-size: 0.78rem; color: #4ce0c6; text-align: center; }
[b-z1f1cl7fn7] .tour-mock-integrated-demo { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
[b-z1f1cl7fn7] .tour-mock-integration-flow { display: flex; align-items: center; gap: 0.75rem; justify-content: center; }
[b-z1f1cl7fn7] .tour-mock-flow-sub { font-size: 0.68rem; opacity: 0.7; }
[b-z1f1cl7fn7] .tour-mock-integration-benefits { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; color: #4ce0c6; }

/* ── Account/Settings mockups ─────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-profile-demo { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-avatar-large { font-size: 3rem; margin-bottom: 0.25rem; }
[b-z1f1cl7fn7] .tour-mock-oauth-providers { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.25rem; }
[b-z1f1cl7fn7] .tour-mock-oauth {
    padding: 0.3rem 0.6rem; border-radius: 8px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.78rem; color: #a9cdd1; cursor: default;
}
[b-z1f1cl7fn7] .tour-mock-oauth.connected { border-color: #4ce0c6; color: #4ce0c6; }
[b-z1f1cl7fn7] .tour-mock-settings-grid { display: flex; gap: 0.5rem; flex-wrap: wrap; }
[b-z1f1cl7fn7] .tour-mock-settings-card {
    flex: 1; min-width: 130px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 0.75rem; text-align: center; cursor: default;
}
[b-z1f1cl7fn7] .tour-mock-settings-icon { font-size: 1.4rem; margin-bottom: 0.25rem; display: block; }
[b-z1f1cl7fn7] .tour-mock-settings-title { font-weight: 600; color: #ecf8f5; font-size: 0.88rem; }
[b-z1f1cl7fn7] .tour-mock-settings-desc { font-size: 0.72rem; color: #a9cdd1; margin-top: 0.1rem; }
[b-z1f1cl7fn7] .tour-mock-notifications-demo { display: flex; flex-direction: column; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.45rem 0.5rem; border-radius: 8px;
    background: rgba(255,255,255,0.02); font-size: 0.85rem; color: #ecf8f5;
}
[b-z1f1cl7fn7] .tour-mock-privacy-section { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
[b-z1f1cl7fn7] .tour-mock-privacy-item { font-size: 0.82rem; color: #a9cdd1; padding: 0.3rem 0; }

/* ── Subscription mockups ─────────────────────────────────────── */
[b-z1f1cl7fn7] .tour-mock-current-plan { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-plan-badge { font-size: 0.72rem; color: #a9cdd1; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
[b-z1f1cl7fn7] .tour-mock-plan-name { font-size: 1.2rem; font-weight: 800; color: #ecf8f5; }
[b-z1f1cl7fn7] .tour-mock-plan-features { display: flex; flex-direction: column; gap: 0.2rem; align-self: stretch; }
[b-z1f1cl7fn7] .tour-mock-plan-features div { font-size: 0.82rem; color: #4ce0c6; padding: 0.2rem 0; }
[b-z1f1cl7fn7] .tour-mock-locked { color: #a9cdd1 !important; opacity: 0.6; }
[b-z1f1cl7fn7] .tour-mock-plans-compare { display: flex; gap: 0.5rem; }
[b-z1f1cl7fn7] .tour-mock-plan-col {
    flex: 1; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 0.75rem; text-align: center;
    font-size: 0.78rem; color: #a9cdd1;
    display: flex; flex-direction: column; gap: 0.25rem;
}
[b-z1f1cl7fn7] .tour-mock-plan-col.popular { border-color: rgba(76,224,198,0.3); position: relative; }
[b-z1f1cl7fn7] .tour-mock-popular-badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: #4ce0c6; color: #04181e; font-size: 0.65rem; font-weight: 700;
    padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap;
}
[b-z1f1cl7fn7] .tour-mock-plan-header {
    font-weight: 800; font-size: 0.9rem; margin-bottom: 0.15rem;
}
[b-z1f1cl7fn7] .tour-mock-plan-header.lite { color: #4ce0c6; }
[b-z1f1cl7fn7] .tour-mock-plan-header.plus { color: #9cd5ff; }
[b-z1f1cl7fn7] .tour-mock-plan-header.pro { color: #f4c4d7; }
[b-z1f1cl7fn7] .tour-mock-plan-price { font-size: 1.2rem; font-weight: 800; color: #ecf8f5; }
[b-z1f1cl7fn7] .tour-mock-plan-price span { font-size: 0.72rem; font-weight: 400; color: #a9cdd1; }
[b-z1f1cl7fn7] .tour-mock-billing-demo { display: flex; flex-direction: column; gap: 0.6rem; }
[b-z1f1cl7fn7] .tour-mock-billing-toggle { display: flex; gap: 0.35rem; }
[b-z1f1cl7fn7] .tour-mock-payment-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; padding: 0.6rem;
}
[b-z1f1cl7fn7] .tour-mock-card-info { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #ecf8f5; }
[b-z1f1cl7fn7] .tour-mock-billing-links { display: flex; flex-direction: column; gap: 0.3rem; }
[b-z1f1cl7fn7] .tour-mock-billing-link { font-size: 0.82rem; color: #4ce0c6; padding: 0.3rem 0; cursor: default; }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

@keyframes tourFadeIn-b-z1f1cl7fn7 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tourSlideUp-b-z1f1cl7fn7 {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes tourHighlightPulse-b-z1f1cl7fn7 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 224, 198, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(76, 224, 198, 0); }
}

@keyframes tourBlink-b-z1f1cl7fn7 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY & RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .tour-backdrop[b-z1f1cl7fn7],
    .tour-card[b-z1f1cl7fn7],
    .tour-content[b-z1f1cl7fn7] {
        animation: none !important;
    }
    [b-z1f1cl7fn7] .tour-highlight-pulse,
    [b-z1f1cl7fn7] .tour-mock-cursor {
        animation: none !important;
    }
    .tour-progress-fill[b-z1f1cl7fn7],
    .tour-dot[b-z1f1cl7fn7] {
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 640px) {
    .tour-card[b-z1f1cl7fn7] {
        padding: 1rem;
        border-radius: 18px;
        max-height: 95vh;
    }

    .tour-nav[b-z1f1cl7fn7] {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .tour-nav-left[b-z1f1cl7fn7],
    .tour-nav-right[b-z1f1cl7fn7] {
        width: 100%;
        justify-content: center;
    }

    .tour-nav-right[b-z1f1cl7fn7] {
        flex-direction: row;
        gap: 0.5rem;
    }

    .tour-step-title[b-z1f1cl7fn7] {
        font-size: 1.1rem;
    }

    [b-z1f1cl7fn7] .tour-mock-plans-compare {
        flex-direction: column;
    }

    [b-z1f1cl7fn7] .tour-mock-health-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-z1f1cl7fn7] .tour-mock-assessment-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-z1f1cl7fn7] .tour-mock-settings-grid {
        flex-direction: column;
    }
}
/* /Components/LanguageSwitcher.razor.rz.scp.css */
/* Inline language switcher — lives inside the nav, positioned below "Refer a Friend".
   The wrapper is position:relative so the absolute-positioned dropdown can anchor
   above the FAB regardless of its position inside the scrollable nav column. */
.tg-lang-switcher[b-j0rwo3qkar] {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: .5rem .75rem;
}

/* Pill-shaped FAB with globe icon, current language name, and a chevron. */
.tg-lang-fab[b-j0rwo3qkar] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem .55rem .85rem;
    border-radius: 999px;
    border: 1px solid rgba(76, 224, 198, .28);
    background: rgba(5, 18, 26, .88);
    color: var(--tg-ink, #ecf8f5);
    font: 600 .9rem/1 Outfit, system-ui, sans-serif;
    cursor: pointer;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.tg-lang-fab:hover[b-j0rwo3qkar] {
    transform: translateY(-1px);
    border-color: rgba(76, 224, 198, .55);
    background: rgba(5, 18, 26, .96);
}

.tg-lang-fab:focus-visible[b-j0rwo3qkar] {
    outline: 2px solid var(--tg-primary, #4ce0c6);
    outline-offset: 2px;
}

.tg-lang-globe[b-j0rwo3qkar] {
    opacity: .9;
    flex-shrink: 0;
}

.tg-lang-label[b-j0rwo3qkar] {
    letter-spacing: .01em;
    white-space: nowrap;
}

.tg-lang-chevron[b-j0rwo3qkar] {
    opacity: .8;
    transition: transform .2s ease;
    flex-shrink: 0;
}

.tg-lang-switcher.open .tg-lang-chevron[b-j0rwo3qkar] {
    transform: rotate(180deg);
}

/* Dropdown menu sits above the FAB (appears on click, animates in). */
.tg-lang-menu[b-j0rwo3qkar] {
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: calc(100% - .25rem);
    z-index: 1100;
    padding: .4rem;
    border-radius: 14px;
    border: 1px solid rgba(76, 224, 198, .22);
    background: rgba(5, 18, 26, .96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
    animation: tgLangReveal-b-j0rwo3qkar .18s ease-out;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

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

.tg-lang-item[b-j0rwo3qkar] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .75rem;
    padding: .6rem .75rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--tg-ink, #ecf8f5);
    font: 500 .92rem/1.2 Outfit, system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.tg-lang-item:hover[b-j0rwo3qkar] {
    background: rgba(76, 224, 198, .1);
}

.tg-lang-item.active[b-j0rwo3qkar] {
    color: var(--tg-primary, #4ce0c6);
    background: rgba(76, 224, 198, .12);
}

.tg-lang-flag[b-j0rwo3qkar] {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.tg-lang-native[b-j0rwo3qkar] {
    flex: 1;
}

/* Make the FAB full-width inside the nav so it matches the visual rhythm of
   the other nav items rather than floating as a pill. */
.tg-lang-fab[b-j0rwo3qkar] {
    width: 100%;
    justify-content: center;
}

@media (max-width: 480px) {
    .tg-lang-fab[b-j0rwo3qkar] {
        padding: .5rem .8rem;
        font-size: .85rem;
    }
}
/* /Components/NotificationBell.razor.rz.scp.css */
.notification-bell-wrapper[b-dun50r1a0v] {
    position: relative;
}

.bell-btn[b-dun50r1a0v] {
    position: relative;
    background: none;
    border: none;
    color: #a9cdd1;
    cursor: pointer;
    padding: 6px;
    border-radius: 10px;
    transition: color .15s, background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bell-btn:hover[b-dun50r1a0v] {
    color: #ecf8f5;
    background: rgba(255, 255, 255, .06);
}

.bell-badge[b-dun50r1a0v] {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef5350;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    animation: badge-pulse-b-dun50r1a0v 2s ease-in-out infinite;
}

@keyframes badge-pulse-b-dun50r1a0v {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ---- Dropdown ---- */
.bell-dropdown[b-dun50r1a0v] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-height: 420px;
    background: rgba(5, 18, 26, .95);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
    overflow: hidden;
    z-index: 1001;
    animation: dropdown-enter-b-dun50r1a0v .15s ease-out;
}

@keyframes dropdown-enter-b-dun50r1a0v {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-header[b-dun50r1a0v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.dropdown-title[b-dun50r1a0v] {
    font-size: .85rem;
    font-weight: 600;
    color: #ecf8f5;
}

.mark-all-btn[b-dun50r1a0v] {
    background: none;
    border: none;
    color: #4ce0c6;
    font-size: .72rem;
    cursor: pointer;
    padding: 0;
}

.mark-all-btn:hover[b-dun50r1a0v] { text-decoration: underline; }

.dropdown-loading[b-dun50r1a0v], .dropdown-empty[b-dun50r1a0v] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #6b8f96;
    font-size: .8rem;
}

.loader-sm[b-dun50r1a0v] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(76, 224, 198, .15);
    border-top-color: #4ce0c6;
    border-radius: 50%;
    animation: spin-b-dun50r1a0v .8s linear infinite;
}

@keyframes spin-b-dun50r1a0v { to { transform: rotate(360deg); } }

.dropdown-list[b-dun50r1a0v] {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .1) transparent;
}

.dropdown-item[b-dun50r1a0v] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .65rem 1rem;
    cursor: pointer;
    transition: background .1s;
    position: relative;
}

.dropdown-item:hover[b-dun50r1a0v] { background: rgba(255, 255, 255, .03); }

.dropdown-item.unread[b-dun50r1a0v] { background: rgba(76, 224, 198, .04); }

.notif-icon[b-dun50r1a0v] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.type-mood[b-dun50r1a0v] { background: rgba(255, 183, 77, .15); color: #ffb74d; }
.type-goal[b-dun50r1a0v] { background: rgba(76, 224, 198, .15); color: #4ce0c6; }
.type-exercise[b-dun50r1a0v] { background: rgba(100, 181, 246, .15); color: #64b5f6; }
.type-streak[b-dun50r1a0v] { background: rgba(239, 83, 80, .15); color: #ef5350; }
.type-crisis[b-dun50r1a0v] { background: rgba(229, 115, 115, .15); color: #e57373; }
.type-account[b-dun50r1a0v] { background: rgba(149, 117, 205, .15); color: #9575cd; }
.type-content[b-dun50r1a0v] { background: rgba(129, 199, 132, .15); color: #81c784; }
.type-review[b-dun50r1a0v] { background: rgba(77, 208, 225, .15); color: #4dd0e1; }
.type-general[b-dun50r1a0v] { background: rgba(255, 255, 255, .06); color: #a9cdd1; }

.notif-content[b-dun50r1a0v] { flex: 1; min-width: 0; }

.notif-title[b-dun50r1a0v] {
    font-size: .78rem;
    font-weight: 600;
    color: #ecf8f5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item.unread .notif-title[b-dun50r1a0v] { color: #fff; }

.notif-body[b-dun50r1a0v] {
    font-size: .72rem;
    color: #a9cdd1;
    margin-top: .1rem;
    line-height: 1.3;
}

.notif-time[b-dun50r1a0v] {
    font-size: .65rem;
    color: #6b8f96;
    margin-top: .2rem;
}

.unread-dot[b-dun50r1a0v] {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ce0c6;
    margin-top: 6px;
}

.dropdown-footer[b-dun50r1a0v] {
    padding: .6rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
    text-align: center;
}

.view-all-link[b-dun50r1a0v] {
    font-size: .75rem;
    color: #4ce0c6;
    text-decoration: none;
}

.view-all-link:hover[b-dun50r1a0v] { text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .bell-dropdown[b-dun50r1a0v] {
        width: calc(100vw - 2rem);
        right: -60px;
    }
}
/* /Components/SessionTimeTracker.razor.rz.scp.css */
/* Components/SessionTimeTracker.razor.css */

.session-timer[b-2wbma6fs3z]{
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-sm);
    padding: .6rem .8rem;
    margin-bottom: .75rem;
    font-size: .85rem;
}

.timer-header[b-2wbma6fs3z]{
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .4rem;
}
.timer-icon[b-2wbma6fs3z]{ display: flex; color: var(--tg-primary) }
.timer-display[b-2wbma6fs3z]{ font-weight: 700; font-variant-numeric: tabular-nums }

/* Progress bar */
.timer-bar-track[b-2wbma6fs3z]{
    height: 6px;
    background: var(--tg-line);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: .35rem;
}
.timer-bar-fill[b-2wbma6fs3z]{
    height: 100%;
    border-radius: 999px;
    transition: width .5s ease;
}
.bar-normal[b-2wbma6fs3z]{ background: var(--tg-primary) }
.bar-low[b-2wbma6fs3z]{ background: #e67e22 }
.bar-expired[b-2wbma6fs3z]{ background: #c43d3d }

/* State colors */
.timer-normal .timer-display[b-2wbma6fs3z]{ color: var(--tg-primary) }
.timer-low .timer-display[b-2wbma6fs3z]{ color: #e67e22 }
.timer-expired .timer-display[b-2wbma6fs3z]{ color: #c43d3d }

.timer-low[b-2wbma6fs3z]{ border-color: rgba(230,126,34,.3) }
.timer-expired[b-2wbma6fs3z]{ border-color: rgba(196,61,61,.3); background: rgba(196,61,61,.04) }

.timer-warning-text[b-2wbma6fs3z]{
    color: #e67e22;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.timer-pacing-text[b-2wbma6fs3z]{
    color: var(--tg-muted);
    font-size: .75rem;
    font-style: italic;
    margin-top: .15rem;
    margin-bottom: .25rem;
}

.timer-limit-text[b-2wbma6fs3z]{
    color: #c43d3d;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.weekly-usage[b-2wbma6fs3z]{
    color: var(--tg-muted);
    font-size: .75rem;
}

.weekly-usage-warning[b-2wbma6fs3z]{
    color: #e67e22;
    font-weight: 600;
}

/* Upgrade CTAs */
.timer-upgrade-btn[b-2wbma6fs3z]{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .5rem;
    padding: .45rem 1rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.timer-upgrade-btn:hover[b-2wbma6fs3z]{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(76,224,198,.25) }

.timer-upgrade-btn-subtle[b-2wbma6fs3z]{
    display: inline-flex;
    align-items: center;
    margin-top: .35rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--tg-primary);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}
.timer-upgrade-btn-subtle:hover[b-2wbma6fs3z]{ text-decoration: underline }

/* Explorer (free) banner — replaces the timer when no weekly allowance */
.explorer-banner[b-2wbma6fs3z]{
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.explorer-banner .timer-icon[b-2wbma6fs3z]{ color: var(--tg-primary) }
.explorer-text[b-2wbma6fs3z]{
    font-size: .82rem;
    color: var(--tg-muted);
    flex: 1 1 200px;
}
.explorer-banner .timer-upgrade-btn-subtle[b-2wbma6fs3z]{ margin-top: 0 }
/* /Components/StreakChip.razor.rz.scp.css */
.streak-chip[b-pjybaavrfx] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: rgba(76, 224, 198, .08);
    border: 1px solid rgba(76, 224, 198, .25);
    color: var(--tg-text);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: transform .12s ease, background .12s ease;
}

.streak-chip:hover[b-pjybaavrfx] {
    transform: translateY(-1px);
    background: rgba(76, 224, 198, .14);
}

.streak-active[b-pjybaavrfx] {
    border-color: rgba(76, 224, 198, .45);
    background: rgba(76, 224, 198, .12);
}

.streak-pending[b-pjybaavrfx] {
    border-color: rgba(230, 126, 34, .35);
    background: rgba(230, 126, 34, .08);
}

.streak-flame[b-pjybaavrfx] { font-size: .95rem; }

.streak-count[b-pjybaavrfx] {
    font-variant-numeric: tabular-nums;
    color: var(--tg-primary);
}

.streak-label[b-pjybaavrfx] {
    color: var(--tg-muted);
    font-weight: 500;
    font-size: .78rem;
}

.streak-freezes[b-pjybaavrfx] {
    margin-left: .35rem;
    padding-left: .5rem;
    border-left: 1px solid rgba(255, 255, 255, .12);
    font-size: .75rem;
    color: rgba(120, 200, 230, .9);
    font-weight: 500;
}
/* /Components/ToastContainer.razor.rz.scp.css */
.toast-container[b-qjp58i8qfx] {
    position: fixed;
    bottom: clamp(1rem, 3vw, 1.5rem);
    right: clamp(1rem, 3vw, 1.5rem);
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: .5rem;
    pointer-events: none;
    max-width: 380px;
    width: calc(100vw - 2rem);
}

.toast-item[b-qjp58i8qfx] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: 14px;
    background: rgba(5, 18, 26, .92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
    pointer-events: auto;
    animation: toast-enter-b-qjp58i8qfx .3s ease-out;
    transition: opacity .3s ease, transform .3s ease;
}

.toast-exit[b-qjp58i8qfx] {
    opacity: 0;
    transform: translateX(100%);
}

.toast-icon[b-qjp58i8qfx] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.toast-success .toast-icon[b-qjp58i8qfx] { color: #4caf50; }
.toast-error .toast-icon[b-qjp58i8qfx] { color: #ef5350; }
.toast-warning .toast-icon[b-qjp58i8qfx] { color: #ffb74d; }
.toast-info .toast-icon[b-qjp58i8qfx] { color: #42a5f5; }

.toast-success[b-qjp58i8qfx] { border-left: 3px solid #4caf50; }
.toast-error[b-qjp58i8qfx] { border-left: 3px solid #ef5350; }
.toast-warning[b-qjp58i8qfx] { border-left: 3px solid #ffb74d; }
.toast-info[b-qjp58i8qfx] { border-left: 3px solid #42a5f5; }

.toast-content[b-qjp58i8qfx] {
    flex: 1;
    min-width: 0;
}

.toast-title[b-qjp58i8qfx] {
    font-weight: 600;
    font-size: .85rem;
    color: #ecf8f5;
    margin-bottom: .15rem;
}

.toast-message[b-qjp58i8qfx] {
    font-size: .8rem;
    color: #a9cdd1;
    line-height: 1.4;
    word-break: break-word;
}

.toast-dismiss[b-qjp58i8qfx] {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #a9cdd1;
    cursor: pointer;
    padding: 2px;
    opacity: .6;
    transition: opacity .15s;
}

.toast-dismiss:hover[b-qjp58i8qfx] {
    opacity: 1;
}

@keyframes toast-enter-b-qjp58i8qfx {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 480px) {
    .toast-container[b-qjp58i8qfx] {
        left: .75rem;
        right: .75rem;
        max-width: none;
        width: auto;
    }
}
/* /Components/TrialCancelModal.razor.rz.scp.css */
.modal-backdrop[b-t91t81iorg] {
    position: fixed;
    inset: 0;
    background: rgba(2, 17, 27, .75);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-card[b-t91t81iorg] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    padding: 24px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .4);
}

.modal-card h3[b-t91t81iorg] {
    margin: 0 0 8px;
    color: var(--tg-ink);
    font-size: 1.15rem;
}

.modal-body[b-t91t81iorg] {
    margin: 0 0 18px;
    color: var(--tg-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.modal-label[b-t91t81iorg] {
    display: block;
    color: var(--tg-ink);
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.modal-optional[b-t91t81iorg] {
    color: var(--tg-muted);
    font-weight: 400;
    font-size: .8rem;
}

.reason-grid[b-t91t81iorg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.reason-btn[b-t91t81iorg] {
    padding: 10px 12px;
    background: rgba(76, 224, 198, .04);
    border: 1px solid rgba(76, 224, 198, .15);
    border-radius: 10px;
    color: var(--tg-ink);
    font-size: .85rem;
    cursor: pointer;
    text-align: left;
    transition: background .12s, border-color .12s;
}

.reason-btn:hover[b-t91t81iorg] {
    background: rgba(76, 224, 198, .08);
    border-color: rgba(76, 224, 198, .35);
}

.reason-btn.selected[b-t91t81iorg] {
    background: rgba(76, 224, 198, .14);
    border-color: var(--tg-primary);
    color: var(--tg-primary);
    font-weight: 600;
}

.reason-note[b-t91t81iorg] {
    width: 100%;
    background: var(--tg-bg-soft);
    border: 1px solid rgba(76, 224, 198, .15);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--tg-ink);
    font-family: inherit;
    font-size: .85rem;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
}

.reason-note:focus[b-t91t81iorg] {
    border-color: rgba(76, 224, 198, .45);
}

.modal-actions[b-t91t81iorg] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.btn-ghost[b-t91t81iorg] {
    background: none;
    border: 1px solid rgba(76, 224, 198, .25);
    color: var(--tg-primary);
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: .9rem;
}

.btn-ghost:hover:not(:disabled)[b-t91t81iorg] {
    background: rgba(76, 224, 198, .08);
}

.btn-danger[b-t91t81iorg] {
    background: rgba(196, 61, 61, .14);
    border: 1px solid rgba(196, 61, 61, .4);
    color: #ff8484;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: .9rem;
}

.btn-danger:hover:not(:disabled)[b-t91t81iorg] {
    background: rgba(196, 61, 61, .22);
}

.btn-ghost:disabled[b-t91t81iorg],
.btn-danger:disabled[b-t91t81iorg] {
    opacity: .5;
    cursor: not-allowed;
}
/* /Layout/AchievementToast.razor.rz.scp.css */
.achievement-toast[b-9n2qhsehlg] {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9998;
    animation: achieveIn-b-9n2qhsehlg 0.6s cubic-bezier(.35,.01,.22,1);
}

.achievement-toast.closing[b-9n2qhsehlg] {
    animation: achieveOut-b-9n2qhsehlg 0.4s cubic-bezier(.4,.14,.2,1) forwards;
}

@keyframes achieveIn-b-9n2qhsehlg {
    0% { opacity: 0; transform: translateX(100px) scale(0.8); }
    60% { transform: translateX(-8px) scale(1.02); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes achieveOut-b-9n2qhsehlg {
    to { opacity: 0; transform: translateX(100px) scale(0.8); }
}

.achievement-glow[b-9n2qhsehlg] {
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(76, 224, 198, 0.4), rgba(255, 215, 0, 0.3), rgba(76, 224, 198, 0.4));
    border-radius: 18px;
    animation: glowPulse-b-9n2qhsehlg 2s ease-in-out infinite;
    z-index: -1;
}

@keyframes glowPulse-b-9n2qhsehlg {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.achievement-content[b-9n2qhsehlg] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--tg-bg-soft);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 16px;
    padding: 16px 20px;
    min-width: 300px;
    max-width: 420px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.achievement-icon[b-9n2qhsehlg] {
    font-size: 32px;
    flex-shrink: 0;
    animation: iconBounce-b-9n2qhsehlg 0.6s cubic-bezier(.35,.01,.22,1) 0.3s both;
}

@keyframes iconBounce-b-9n2qhsehlg {
    0% { transform: scale(0); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.achievement-text[b-9n2qhsehlg] {
    flex: 1;
    min-width: 0;
}

.achievement-label[b-9n2qhsehlg] {
    color: #ffd700;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.achievement-name[b-9n2qhsehlg] {
    color: var(--tg-ink);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.achievement-desc[b-9n2qhsehlg] {
    color: var(--tg-muted);
    font-size: 12px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.achievement-points[b-9n2qhsehlg] {
    flex-shrink: 0;
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
}

@media (max-width: 480px) {
    .achievement-toast[b-9n2qhsehlg] {
        right: 12px;
        left: 12px;
    }
    .achievement-content[b-9n2qhsehlg] {
        min-width: auto;
        max-width: none;
    }
}
/* /Layout/AppErrorBoundary.razor.rz.scp.css */
.error-boundary[b-ur0bn8ouk6] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.error-card[b-ur0bn8ouk6] {
    text-align: center;
    background: var(--tg-card);
    border: 1px solid rgba(255, 100, 100, 0.2);
    border-radius: 16px;
    padding: 32px;
    max-width: 360px;
}

.error-icon[b-ur0bn8ouk6] {
    margin-bottom: 16px;
}

.error-card h3[b-ur0bn8ouk6] {
    color: var(--tg-ink);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
}

.error-card p[b-ur0bn8ouk6] {
    color: var(--tg-muted);
    font-size: 14px;
    margin: 0 0 20px;
    line-height: 1.5;
}

.retry-btn[b-ur0bn8ouk6] {
    background: transparent;
    border: 1px solid rgba(76, 224, 198, 0.3);
    border-radius: 10px;
    padding: 10px 24px;
    color: var(--tg-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.retry-btn:hover[b-ur0bn8ouk6] {
    background: rgba(76, 224, 198, 0.1);
}

.error-actions[b-ur0bn8ouk6] {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.details-toggle[b-ur0bn8ouk6] {
    background: none;
    border: none;
    color: var(--tg-muted, rgba(255,255,255,.4));
    font-size: 12px;
    cursor: pointer;
    padding: 10px 12px;
}

.details-toggle:hover[b-ur0bn8ouk6] {
    color: var(--tg-ink, #fff);
}

.home-btn[b-ur0bn8ouk6] {
    background: none;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 10px 16px;
    color: var(--tg-muted, rgba(255,255,255,.5));
    font-size: 13px;
    cursor: pointer;
}

.home-btn:hover[b-ur0bn8ouk6] {
    background: rgba(255,255,255,.05);
    color: var(--tg-ink, #fff);
}

.error-details[b-ur0bn8ouk6] {
    background: rgba(0,0,0,.3);
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
    color: rgba(255,100,100,.7);
    text-align: left;
    overflow-x: auto;
    margin: 0 0 16px;
    max-height: 100px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.error-report-note[b-ur0bn8ouk6] {
    font-size: 11px !important;
    color: rgba(255,255,255,.25) !important;
    margin-top: 16px !important;
}
/* /Layout/BreathingExercise.razor.rz.scp.css */
.breathing-overlay[b-4y0yu06rne] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(2, 17, 27, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.breathing-overlay.visible[b-4y0yu06rne] {
    opacity: 1;
    pointer-events: all;
}

.breathing-card[b-4y0yu06rne] {
    background: linear-gradient(145deg, #0a1e2e, #0d2a3d);
    border: 1px solid rgba(76, 224, 198, 0.12);
    border-radius: 24px;
    padding: 40px;
    max-width: 440px;
    width: 90vw;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.breathing-close[b-4y0yu06rne] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
}

.breathing-close:hover[b-4y0yu06rne] {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.breathing-setup h3[b-4y0yu06rne] {
    margin: 0;
    font-size: 1.4rem;
    color: #fff;
}

.breathing-subtitle[b-4y0yu06rne] {
    color: rgba(255, 255, 255, 0.6);
    margin: 4px 0 24px;
    font-size: 0.9rem;
}

.pattern-selector[b-4y0yu06rne] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.pattern-btn[b-4y0yu06rne] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(76, 224, 198, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    color: #fff;
}

.pattern-btn:hover[b-4y0yu06rne] {
    background: rgba(76, 224, 198, 0.06);
    border-color: rgba(76, 224, 198, 0.2);
}

.pattern-btn.selected[b-4y0yu06rne] {
    background: rgba(76, 224, 198, 0.1);
    border-color: rgba(76, 224, 198, 0.4);
}

.pattern-name[b-4y0yu06rne] {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
}

.pattern-desc[b-4y0yu06rne] {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.duration-selector label[b-4y0yu06rne] {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.duration-options[b-4y0yu06rne] {
    display: flex;
    gap: 8px;
}

.duration-btn[b-4y0yu06rne] {
    flex: 1;
    padding: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(76, 224, 198, 0.1);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.duration-btn.selected[b-4y0yu06rne] {
    background: rgba(76, 224, 198, 0.15);
    border-color: rgba(76, 224, 198, 0.5);
}

.breathing-start-btn[b-4y0yu06rne] {
    width: 100%;
    margin-top: 24px;
    padding: 14px;
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b;
    border: none;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}

.breathing-start-btn:hover[b-4y0yu06rne] {
    transform: scale(1.02);
}

.breathing-active[b-4y0yu06rne] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.breathing-circle[b-4y0yu06rne] {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 4s ease-in-out, box-shadow 4s ease-in-out;
    box-shadow: 0 0 40px rgba(76, 224, 198, 0.15);
}

.breathing-circle.inhale[b-4y0yu06rne] {
    transform: scale(1.15);
    box-shadow: 0 0 60px rgba(76, 224, 198, 0.3);
    background: radial-gradient(circle, rgba(76, 224, 198, 0.12) 0%, transparent 70%);
}

.breathing-circle.hold[b-4y0yu06rne] {
    transform: scale(1.15);
    box-shadow: 0 0 50px rgba(76, 224, 198, 0.25);
    background: radial-gradient(circle, rgba(76, 224, 198, 0.1) 0%, transparent 70%);
}

.breathing-circle.exhale[b-4y0yu06rne] {
    transform: scale(0.85);
    box-shadow: 0 0 30px rgba(76, 224, 198, 0.1);
    background: radial-gradient(circle, rgba(76, 224, 198, 0.06) 0%, transparent 70%);
}

.breathing-circle.complete[b-4y0yu06rne] {
    transform: scale(1);
    box-shadow: 0 0 50px rgba(76, 224, 198, 0.3);
    background: radial-gradient(circle, rgba(76, 224, 198, 0.15) 0%, transparent 70%);
}

.breathing-inner-circle[b-4y0yu06rne] {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 2px solid rgba(76, 224, 198, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.breathing-instruction[b-4y0yu06rne] {
    font-size: 1rem;
    color: #4ce0c6;
    font-weight: 600;
}

.breathing-count[b-4y0yu06rne] {
    font-size: 2.5rem;
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.breathing-progress[b-4y0yu06rne] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.breathing-stop-btn[b-4y0yu06rne] {
    padding: 10px 28px;
    background: rgba(255, 100, 100, 0.15);
    border: 1px solid rgba(255, 100, 100, 0.3);
    color: #ff6464;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.breathing-stop-btn:hover[b-4y0yu06rne] {
    background: rgba(255, 100, 100, 0.25);
}

.breathing-complete[b-4y0yu06rne] {
    text-align: center;
}

.breathing-complete h3[b-4y0yu06rne] {
    color: #4ce0c6;
    margin: 0 0 8px;
}

.breathing-complete p[b-4y0yu06rne] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 4px 0;
}

.breathing-tip[b-4y0yu06rne] {
    font-style: italic;
    color: rgba(76, 224, 198, 0.6) !important;
    margin-top: 12px !important;
    font-size: 0.85rem !important;
}

@media (prefers-reduced-motion: reduce) {
    .breathing-circle[b-4y0yu06rne] {
        transition: none;
    }
}
/* /Layout/CookieConsent.razor.rz.scp.css */
.cookie-banner[b-mqdymk1mel] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--tg-bg-soft);
    border-top: 1px solid rgba(76, 224, 198, 0.15);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    animation: slideUp-b-mqdymk1mel 0.4s cubic-bezier(.4,.14,.2,1);
}

.cookie-banner.closing[b-mqdymk1mel] {
    animation: slideDown-b-mqdymk1mel 0.3s cubic-bezier(.4,.14,.2,1) forwards;
}

@keyframes slideUp-b-mqdymk1mel {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes slideDown-b-mqdymk1mel {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

.cookie-content[b-mqdymk1mel] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.cookie-text[b-mqdymk1mel] {
    flex: 1;
}

.cookie-text strong[b-mqdymk1mel] {
    color: var(--tg-ink);
    font-size: 15px;
    display: block;
    margin-bottom: 4px;
}

.cookie-text p[b-mqdymk1mel] {
    color: var(--tg-muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.cookie-text a[b-mqdymk1mel] {
    color: var(--tg-primary);
    text-decoration: none;
}

.cookie-text a:hover[b-mqdymk1mel] {
    text-decoration: underline;
}

.cookie-actions[b-mqdymk1mel] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-accept[b-mqdymk1mel] {
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.cookie-accept:hover[b-mqdymk1mel] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(76, 224, 198, 0.3);
}

.cookie-essential[b-mqdymk1mel] {
    background: transparent;
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: 10px;
    padding: 10px 20px;
    color: var(--tg-muted);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.cookie-essential:hover[b-mqdymk1mel] {
    border-color: rgba(76, 224, 198, 0.4);
    color: var(--tg-ink);
}

@media (max-width: 600px) {
    .cookie-content[b-mqdymk1mel] {
        flex-direction: column;
        text-align: center;
    }

    .cookie-actions[b-mqdymk1mel] {
        width: 100%;
        flex-direction: column;
    }

    .cookie-accept[b-mqdymk1mel], .cookie-essential[b-mqdymk1mel] {
        width: 100%;
    }
}
/* /Layout/GroundingExercise.razor.rz.scp.css */
.grounding-overlay[b-pi616nucuk] {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(2, 17, 27, 0.85); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.grounding-overlay.visible[b-pi616nucuk] { opacity: 1; pointer-events: all; }

.grounding-card[b-pi616nucuk] {
    background: linear-gradient(145deg, #0d2a3d, #0a1e2e);
    border: 1px solid rgba(76, 224, 198, 0.12);
    border-radius: 24px; padding: 36px;
    max-width: 480px; width: 90vw; position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.grounding-close[b-pi616nucuk] {
    position: absolute; top: 16px; right: 16px;
    background: none; border: none; color: rgba(255,255,255,.4);
    cursor: pointer; padding: 8px; border-radius: 8px;
}
.grounding-close:hover[b-pi616nucuk] { color: #fff; background: rgba(255,255,255,.08); }

.grounding-intro h3[b-pi616nucuk], .grounding-complete h3[b-pi616nucuk] { margin: 0 0 8px; font-size: 1.3rem; color: #fff; }
.grounding-subtitle[b-pi616nucuk] { color: rgba(255,255,255,.6); font-size: .9rem; line-height: 1.5; margin: 0 0 20px; }

.grounding-preview[b-pi616nucuk] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.preview-step[b-pi616nucuk] {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; background: rgba(255,255,255,.03);
    border-radius: 10px; font-size: .9rem; color: rgba(255,255,255,.65);
}
.step-num[b-pi616nucuk] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(76,224,198,.1); color: #4ce0c6;
    font-weight: 700; font-size: .9rem; flex-shrink: 0;
}

.grounding-start-btn[b-pi616nucuk] {
    width: 100%; padding: 14px;
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b; border: none; border-radius: 14px;
    font-weight: 700; font-size: 1rem; cursor: pointer;
}
.grounding-start-btn:hover[b-pi616nucuk] { transform: scale(1.02); }

/* Active state */
.step-indicator[b-pi616nucuk] { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
.step-dot[b-pi616nucuk] {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,.1); transition: all .3s;
}
.step-dot.completed[b-pi616nucuk] { background: #4ce0c6; }
.step-dot.active[b-pi616nucuk] { background: #4ce0c6; transform: scale(1.3); box-shadow: 0 0 12px rgba(76,224,198,.4); }

.active-step[b-pi616nucuk] { text-align: center; margin-bottom: 20px; }
.step-number[b-pi616nucuk] { font-size: 3.5rem; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.step-instruction[b-pi616nucuk] { color: rgba(255,255,255,.8); font-size: 1.05rem; margin: 0 0 6px; }
.step-hint[b-pi616nucuk] { color: rgba(255,255,255,.4); font-size: .85rem; font-style: italic; margin: 0; }

.input-area[b-pi616nucuk] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.grounding-input[b-pi616nucuk] {
    background: rgba(255,255,255,.04); border: 1px solid rgba(76,224,198,.12);
    border-radius: 10px; padding: 10px 14px; color: #fff;
    font-size: .9rem; outline: none; transition: border-color .2s;
}
.grounding-input:focus[b-pi616nucuk] { border-color: rgba(76,224,198,.35); }
.grounding-input.filled[b-pi616nucuk] { background: rgba(76,224,198,.06); border-color: rgba(76,224,198,.2); opacity: .6; }
.grounding-input[b-pi616nucuk]::placeholder { color: rgba(255,255,255,.25); }

.step-actions[b-pi616nucuk] { display: flex; gap: 8px; }
.grounding-next-btn[b-pi616nucuk] {
    flex: 1; padding: 12px;
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b; border: none; border-radius: 12px;
    font-weight: 600; font-size: .9rem; cursor: pointer;
}
.grounding-next-btn:disabled[b-pi616nucuk] { opacity: .4; cursor: not-allowed; }
.grounding-skip-btn[b-pi616nucuk] {
    padding: 12px 18px; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
    color: rgba(255,255,255,.5); font-size: .85rem; cursor: pointer;
}

/* Complete */
.grounding-complete[b-pi616nucuk] { text-align: center; }
.complete-icon[b-pi616nucuk] { margin-bottom: 16px; }
.grounding-complete p[b-pi616nucuk] { color: rgba(255,255,255,.65); font-size: .9rem; line-height: 1.5; margin: 0 0 12px; }
.grounding-tip[b-pi616nucuk] { font-style: italic; color: rgba(76,224,198,.5) !important; font-size: .85rem !important; }

@media (prefers-reduced-motion: reduce) {
    .step-dot[b-pi616nucuk] { transition: none; }
}
/* /Layout/JournalPrompt.razor.rz.scp.css */
.journal-prompt-card[b-ile4ex6pna] {
    background: linear-gradient(145deg, rgba(76, 224, 198, 0.04), rgba(10, 30, 46, 0.8));
    border: 1px solid rgba(76, 224, 198, 0.12);
    border-radius: 16px;
    padding: 18px 20px;
    animation: promptFadeIn-b-ile4ex6pna 0.4s ease-out;
}

@keyframes promptFadeIn-b-ile4ex6pna {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.prompt-header[b-ile4ex6pna] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.prompt-category[b-ile4ex6pna] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.prompt-category-dot[b-ile4ex6pna] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.prompt-dismiss[b-ile4ex6pna] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s;
}

.prompt-dismiss:hover[b-ile4ex6pna] {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
}

.prompt-text[b-ile4ex6pna] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 14px;
    font-style: italic;
}

.prompt-actions[b-ile4ex6pna] {
    display: flex;
    gap: 8px;
}

.prompt-write-btn[b-ile4ex6pna] {
    padding: 8px 16px;
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.15s;
}

.prompt-write-btn:hover[b-ile4ex6pna] {
    transform: scale(1.03);
}

.prompt-skip-btn[b-ile4ex6pna] {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.prompt-skip-btn:hover[b-ile4ex6pna] {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
}

@media (prefers-reduced-motion: reduce) {
    .journal-prompt-card[b-ile4ex6pna] { animation: none; }
}
/* /Layout/LoadingSkeleton.razor.rz.scp.css */
.skeleton-container[b-zwhrkobryd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.skeleton-line[b-zwhrkobryd] {
    background: linear-gradient(90deg, rgba(76, 224, 198, 0.06) 25%, rgba(76, 224, 198, 0.12) 50%, rgba(76, 224, 198, 0.06) 75%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: shimmer-b-zwhrkobryd 1.5s infinite ease-in-out;
}

@keyframes shimmer-b-zwhrkobryd {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* MainLayout.razor.css  —  refreshed, responsive, accessible */
/* Layout tokens now live in theragen-shared.css :root */

/* ---- page scaffold ---- */
.page[b-m05u72k5ci]{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    background:radial-gradient(circle at 15% 0%,rgba(76,224,198,.18),transparent 60%),
               linear-gradient(140deg,var(--tg-bg-deep),var(--tg-bg-soft));
}

/* ---- ambient breathing background ---- */
.page[b-m05u72k5ci]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%,
            rgba(76,224,198,.06), transparent 60%),
        radial-gradient(ellipse 70% 50% at 80% 20%,
            rgba(156,213,255,.05), transparent 55%),
        radial-gradient(ellipse 90% 70% at 50% 80%,
            rgba(244,196,215,.04), transparent 60%);
    background-size: 160% 160%;
    animation: tg-ambient-breathe-b-m05u72k5ci 28s ease-in-out infinite alternate;
    opacity:.7;
}

@keyframes tg-ambient-breathe-b-m05u72k5ci{
    0%  { background-position: 0% 0%, 100% 0%, 50% 100%; }
    50% { background-position: 30% 20%, 70% 30%, 40% 80%; }
    100%{ background-position: 0% 0%, 100% 0%, 50% 100%; }
}

.layout-container[b-m05u72k5ci]{
    display:flex;
    height:100vh;
    width:100%;
    overflow:hidden;
}

main[b-m05u72k5ci]{
    position:relative;
    z-index:1;
    flex:1;
    min-width:0; /* prevent overflow on flex children */
    overflow-y:auto;
    background:var(--tg-surface);
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* ---- top bar ---- */
.top-row[b-m05u72k5ci]{
    position:sticky;
    top:0;
    z-index:10;
    height:var(--tg-top-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-inline:1rem;
    background:rgba(2,12,18,.82);
    backdrop-filter:blur(18px);
    color:#fff;
    box-shadow: var(--tg-shadow-sm);
    border-bottom:1px solid rgba(255,255,255,.08);
}
.top-row[b-m05u72k5ci]::after{
    content:"";
    position:absolute;
    inset:-120% -30% auto -30%;
    background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.18),transparent 65%),
               radial-gradient(circle at 70% 0,rgba(76,224,198,.25),transparent 65%);
    opacity:.14;
    pointer-events:none;
    filter:blur(60px);
}

.top-row .logo[b-m05u72k5ci]{
    display:flex;
    align-items:center;
    gap:.35rem;
    height:100%;
    margin-left:.25rem; /* keep logo snug to the left */
}
.top-row .logo img[b-m05u72k5ci]{
    height:38px; width:38px;
    border-radius:50%;
    object-fit:cover;
}

/* icon button for avatar (keyboard & focus visible) */
.icon-btn[b-m05u72k5ci]{
    -webkit-appearance:none; appearance:none;
    border:0; background:transparent; color:inherit;
    width:40px; height:40px; display:grid; place-items:center;
    border-radius:999px;
    cursor:pointer;
    transition:background .18s ease-out;
}
.avatar-btn[b-m05u72k5ci]{
    margin-left:auto; /* push to the right edge */
    overflow:hidden;
    padding:0;
    width:40px; height:40px;
    flex-shrink:0;
}
.avatar-img[b-m05u72k5ci]{
    width:40px; height:40px;
    object-fit:cover;
    border-radius:50%;
}
.icon-btn:hover[b-m05u72k5ci]{ background:rgba(255,255,255,.12) }
.icon-btn:focus-visible[b-m05u72k5ci]{
    outline:2px solid #fff; outline-offset:2px;
    box-shadow:0 0 0 3px rgba(255,255,255,.35);
}

/* links kept white inside the top row */
.top-row[b-m05u72k5ci]  a,
.top-row[b-m05u72k5ci]  .btn-link{
    white-space:nowrap;
    margin-left:1rem;
    text-decoration:none;
    color:#fff;
    font-weight:700;
    padding:.35rem .65rem;
    border-radius:10px;
}
.top-row[b-m05u72k5ci]  a:hover,
.top-row[b-m05u72k5ci]  .btn-link:hover{
    background:rgba(255,255,255,.12);
    text-decoration:none;
}
.top-row.auth[b-m05u72k5ci]  a:first-child{
    overflow:hidden; text-overflow:ellipsis;
}

/* ---- scrim for the right drawer ---- */
.scrim[b-m05u72k5ci]{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease-out;
    z-index:1105; /* just below the drawer */
}
.scrim.show[b-m05u72k5ci]{
    opacity:1;
    pointer-events:auto;
}

/* ---- left app sidebar (NavMenu host) for ≥641px ---- */
@media (min-width:641px){
    .page[b-m05u72k5ci]{ flex-direction:row; }

    .sidebar[b-m05u72k5ci]{
        width:var(--tg-sidebar-w);
        position:sticky;
        top:0;
        height:100vh;
        background:rgba(2,12,18,.88);
        -webkit-backdrop-filter:blur(18px);
        backdrop-filter:blur(18px);
        color:#fff;
        border-right:1px solid rgba(255,255,255,.08);
        box-shadow: 4px 0 24px rgba(0,0,0,.2);
        overflow:hidden;
    }

    .top-row[b-m05u72k5ci], article[b-m05u72k5ci]{
        padding-left:1rem !important;
        padding-right:1rem !important;
    }
}

/* ---- right account drawer (SidebarVisible/Hidden) ---- */
.SidebarVisible[b-m05u72k5ci],
.SidebarHidden[b-m05u72k5ci]{
    position:fixed;
    top:calc(var(--tg-top-h) + env(safe-area-inset-top));
    right:0;
    width: min(300px, 85vw);
    height:calc(100% - var(--tg-top-h) - env(safe-area-inset-top));
    background-color:rgba(5,18,26,.96);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    color:#fff;
    box-shadow: -12px 0 40px rgba(0,0,0,.3);
    will-change: transform;
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
    transform: translateX(100%); /* default offscreen */
    z-index:1110;
    overflow:hidden;
    border-top-left-radius: var(--tg-radius);
    border-bottom-left-radius: var(--tg-radius);
    border-left: 1px solid rgba(255,255,255,.06);
}
.SidebarVisible[b-m05u72k5ci]{ transform: translateX(0%) }

/* nicer scrollbars (fallbacks gracefully) */
.SidebarVisible[b-m05u72k5ci]::-webkit-scrollbar,
.SidebarHidden[b-m05u72k5ci]::-webkit-scrollbar{ width:10px }
.SidebarVisible[b-m05u72k5ci]::-webkit-scrollbar-thumb,
.SidebarHidden[b-m05u72k5ci]::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.35);
    border-radius:999px;
}

/* ---- error UI ---- */
#blazor-error-ui[b-m05u72k5ci]{
    position:fixed;
    inset:auto 0 0 0;
    display:none;
    z-index:1000;
    background: #fff8e1;
    color:#5d3a00;
    box-shadow:0 -1px 2px rgba(0,0,0,.2);
    padding:.6rem 1.25rem .7rem;
}
#blazor-error-ui .dismiss[b-m05u72k5ci]{
    position:absolute;
    right:.75rem; top:.5rem;
    cursor:pointer;
}

/* ---- hamburger button (mobile only) ---- */
.hamburger-btn[b-m05u72k5ci]{
    -webkit-appearance:none; appearance:none;
    border:0; background:transparent; color:#fff;
    width:40px; height:40px;
    display:grid; place-items:center;
    border-radius:10px;
    cursor:pointer;
    transition: background .18s ease-out;
}
.hamburger-btn:hover[b-m05u72k5ci]{ background:rgba(255,255,255,.12) }
.hamburger-btn:focus-visible[b-m05u72k5ci]{
    outline:2px solid #fff; outline-offset:2px;
    box-shadow:0 0 0 3px rgba(255,255,255,.35);
}
@media (min-width:641px){
    .hamburger-btn[b-m05u72k5ci]{ display:none }
    .top-row .mobile-only[b-m05u72k5ci]{ display:none }
}

/* ---- nav scrim (mobile sidebar overlay backdrop) ---- */
.nav-scrim[b-m05u72k5ci]{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease-out;
    z-index:1100;
}
.nav-scrim.show[b-m05u72k5ci]{
    opacity:1;
    pointer-events:auto;
}

/* ---- small screens ---- */
@media (max-width:640.98px){
    .top-row[b-m05u72k5ci]{ justify-content:space-between; }
    .top-row[b-m05u72k5ci]  a, .top-row[b-m05u72k5ci]  .btn-link{ margin-left:0 }

    /* Mobile sidebar: slide-in overlay from left */
    .sidebar[b-m05u72k5ci]{
        position:fixed;
        top:var(--tg-top-h);
        left:0;
        width:var(--tg-sidebar-w);
        height:calc(100% - var(--tg-top-h));
        background:rgba(2,12,18,.94);
        -webkit-backdrop-filter:blur(18px);
        backdrop-filter:blur(18px);
        color:#fff;
        transform:translateX(-100%);
        transition:transform .28s cubic-bezier(.22,.61,.36,1);
        z-index:1105;
        overflow-y:auto;
        border-right:1px solid rgba(255,255,255,.08);
    }
    .sidebar.nav-open[b-m05u72k5ci]{
        transform:translateX(0);
    }
}

/* ---- utility: toggle group (kept for compatibility) ---- */
.toggle[b-m05u72k5ci]{ display:flex; flex-direction:column }

/* ---- legacy pill/profile styles removed — now scoped in SidebarMenu.razor.css ---- */

/* ---- account sidebar background overrides ---- */
#account-sidebar[b-m05u72k5ci],
#therapist-sidebar[b-m05u72k5ci],
#manage-nav[b-m05u72k5ci]{ background-color:rgba(2,12,18,.95); background-image:none }

/* ---- accessibility: reduce motion ---- */
@media (prefers-reduced-motion: reduce){
    .SidebarVisible[b-m05u72k5ci], .SidebarHidden[b-m05u72k5ci], .top-row[b-m05u72k5ci]  a, .top-row[b-m05u72k5ci]  .btn-link, .icon-btn[b-m05u72k5ci]{
        transition:none !important;
        animation:none !important;
    }
    .page[b-m05u72k5ci]::before{
        animation:none !important;
    }
}
/* /Layout/MoodBoost.razor.rz.scp.css */
.mood-boost-bar[b-pl1caqbb7b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 165, 0, 0.06);
    border: 1px solid rgba(255, 165, 0, 0.15);
    border-radius: 12px;
    margin-top: 10px;
    animation: boostSlide-b-pl1caqbb7b 0.4s ease-out;
}

@keyframes boostSlide-b-pl1caqbb7b {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.boost-icon[b-pl1caqbb7b] { flex-shrink: 0; }
.boost-text[b-pl1caqbb7b] { flex: 1; font-size: .85rem; color: rgba(255,255,255,.7); line-height: 1.4; }
.boost-action[b-pl1caqbb7b] {
    padding: 6px 14px; background: rgba(255,165,0,.15); border: 1px solid rgba(255,165,0,.3);
    border-radius: 8px; color: #ffa500; font-size: .8rem; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: all .2s;
}
.boost-action:hover[b-pl1caqbb7b] { background: rgba(255,165,0,.25); }
.boost-dismiss[b-pl1caqbb7b] {
    background: none; border: none; color: rgba(255,255,255,.3); cursor: pointer; padding: 4px;
}

@media (max-width: 600px) {
    .mood-boost-bar[b-pl1caqbb7b] { flex-wrap: wrap; }
    .boost-action[b-pl1caqbb7b] { width: 100%; text-align: center; }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* NavMenu.razor.css — TheraGen nav (refined) */
/* Uses global tokens from theragen-shared.css */

/* ---- Top bar (kept minimal; layout file styles background) ---- */
.top-row[b-95wujukxn2]{
    height:3.5rem;
    background:rgba(2,12,18,.6);
    border-bottom:1px solid rgba(255,255,255,.06);
    display:flex;
    align-items:center;
}
.nav-brand[b-95wujukxn2]{
    display:flex;
    align-items:center;
    text-decoration:none;
}
.nav-logo[b-95wujukxn2]{
    height:34px; width:34px;
    border-radius:50%;
    object-fit:cover;
}

/* ---- Collapser (mobile hamburger) ---- */
.navbar-toggler[b-95wujukxn2]{
    appearance:none;
    cursor:pointer;
    width:3rem; height:2.5rem;
    position:absolute; top:.5rem; right:1rem;
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    background:
            url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-width='2' d='M5 8h20M5 15h20M5 22h20'/%3e%3c/svg%3e")
            no-repeat center/1.5rem rgba(255,255,255,.08);
    transition: background-color var(--tg-dur-fast) var(--tg-ease);
}
.navbar-toggler:hover[b-95wujukxn2]{ background-color:rgba(255,255,255,.16) }
.navbar-toggler:focus[b-95wujukxn2]{ outline:none; box-shadow:var(--tg-focus) }
.navbar-toggler:checked[b-95wujukxn2]{ background-color:rgba(255,255,255,.28) }

.navbar-toggler:checked ~ .nav-scrollable[b-95wujukxn2] { display:block }

/* ---- Sidebar container ---- */
.nav-scrollable[b-95wujukxn2]{
    display:block;
    height: calc(100vh - 3.5rem);
    overflow-y:auto;
    background: transparent;
    padding: .75rem 0 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.35) transparent;
}
.nav-scrollable[b-95wujukxn2]::-webkit-scrollbar{ width:10px }
.nav-scrollable[b-95wujukxn2]::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.35);
    border-radius:999px;
}
@media (min-width:641px){
    .navbar-toggler[b-95wujukxn2]{ display:none }
}

/* ---- Item base ---- */
.nav-item[b-95wujukxn2]{
    font-size:.95rem;
    list-style:none;
    background:transparent;
    animation: navFadeIn-b-95wujukxn2 .4s var(--tg-ease-soft, ease-out) both;
}
.nav-item + .nav-item[b-95wujukxn2]{ margin-top:.25rem }

@keyframes navFadeIn-b-95wujukxn2{
    from{ opacity:0; transform:translateX(-8px) }
    to  { opacity:1; transform:translateX(0) }
}

/* ---- Section header (e.g. "Wellness") ---- */
.nav-section-header[b-95wujukxn2] {
    padding: 1rem 1rem 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    animation: navFadeIn-b-95wujukxn2 .4s var(--tg-ease-soft, ease-out) both;
}

/* ---- Links ---- */
.nav-item[b-95wujukxn2]  .nav-link{
    --pad-x: 1rem;
    --pad-y: .65rem;
    display:flex; align-items:center; gap:.65rem;
    height:auto; line-height:1.2;
    width:100%;
    padding: var(--pad-y) var(--pad-x);
    color:#ebfbff;
    background: transparent;
    border:none;
    border-radius: 999px;
    text-decoration:none;
    transition:
            background-color var(--tg-dur) var(--tg-ease),
            transform var(--tg-dur-fast) var(--tg-ease),
            color var(--tg-dur-fast) var(--tg-ease),
            box-shadow var(--tg-dur) var(--tg-ease);
}
.nav-item[b-95wujukxn2]  .nav-link:focus{
    outline:none; box-shadow:var(--tg-focus); background: rgba(255,255,255,.06);
}
.nav-item[b-95wujukxn2]  .nav-link:hover{
    background: rgba(255,255,255,.10);
    color:#fff;
    transform: translateX(2px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),
                0 0 12px rgba(76,224,198,.08);
}

/* ---- Active state ---- */
.nav-item[b-95wujukxn2]  a.active{
    background: rgba(76,224,198,.12);
    color:#fff;
    border:1px solid rgba(76,224,198,.2);
    box-shadow: 0 4px 16px rgba(0,0,0,.2),
                inset 0 0 0 1px rgba(76,224,198,.08);
}

/* ---- "New Session" CTA button ---- */
.nav-item--cta[b-95wujukxn2]{
    margin:.35rem .6rem;
}
.nav-item--cta[b-95wujukxn2]  .nav-link{
    background: linear-gradient(135deg, rgba(76,224,198,.18), rgba(156,213,255,.1));
    border: 1px solid rgba(76,224,198,.2);
    justify-content: center;
    font-weight: 600;
    color: var(--tg-primary, #4ce0c6);
    border-radius: var(--tg-radius-sm, 18px);
}
.nav-item--cta[b-95wujukxn2]  .nav-link:hover{
    background: linear-gradient(135deg, rgba(76,224,198,.28), rgba(156,213,255,.16));
    border-color: rgba(76,224,198,.35);
    box-shadow: 0 4px 20px rgba(76,224,198,.15);
    transform: translateY(-1px);
}
.nav-item--cta[b-95wujukxn2]  a.active{
    background: linear-gradient(135deg, rgba(76,224,198,.24), rgba(156,213,255,.12));
    border-color: rgba(76,224,198,.3);
}

/* ---- Icon helpers (inline SVGs from markup already) ---- */
.bi[b-95wujukxn2]{
    display:inline-block;
    width:1.15rem; height:1.15rem;
    margin-right:.25rem;
    flex:0 0 auto;
}

/* ---- Collapsible / compact variant (if you toggle a wrapper class) ---- */
.nav-menu-container[b-95wujukxn2]{
    width:250px;
    transition: width var(--tg-dur) var(--tg-ease);
}
.nav-menu-container.collapsed[b-95wujukxn2]{ width:72px }
.nav-menu-container .nav-link[b-95wujukxn2]{ justify-content:flex-start }
.nav-menu-container.collapsed .nav-link[b-95wujukxn2]{ justify-content:center; padding: .6rem 0 }
.nav-menu-container.collapsed .nav-link span[b-95wujukxn2]{ display:none }

/* ---- Color utilities for rare overrides ---- */
.nav-item[b-95wujukxn2]  .nav-link--warning{
    background: #E99A28; color:#fff;
}
.nav-item[b-95wujukxn2]  .nav-link--warning:hover{ filter:brightness(1.05) }

/* ---- Accessibility: reduce motion ---- */
@media (prefers-reduced-motion: reduce){
    .nav-item[b-95wujukxn2],
    .nav-section-header[b-95wujukxn2]{
        animation:none !important;
    }
    .nav-item[b-95wujukxn2]  .nav-link{
        transition:none !important;
    }
}
/* /Layout/NpsSurvey.razor.rz.scp.css */
.nps-overlay[b-dmo1dkk2rs] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    animation: slideUp-b-dmo1dkk2rs 0.4s cubic-bezier(.4,.14,.2,1);
}

.nps-overlay.closing[b-dmo1dkk2rs] {
    animation: slideDown-b-dmo1dkk2rs 0.3s cubic-bezier(.4,.14,.2,1) forwards;
}

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

@keyframes slideDown-b-dmo1dkk2rs {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(20px); }
}

.nps-card[b-dmo1dkk2rs] {
    background: var(--tg-card);
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: 18px;
    padding: 24px;
    width: 380px;
    max-width: calc(100vw - 48px);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    backdrop-filter: blur(20px);
}

.nps-header[b-dmo1dkk2rs] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.nps-header h3[b-dmo1dkk2rs] {
    color: var(--tg-ink);
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    flex: 1;
    padding-right: 12px;
}

.nps-close[b-dmo1dkk2rs] {
    background: transparent;
    border: none;
    color: var(--tg-muted);
    cursor: pointer;
    padding: 2px;
}

.nps-scale[b-dmo1dkk2rs] {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 6px;
}

.nps-btn[b-dmo1dkk2rs] {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: 8px;
    background: transparent;
    color: var(--tg-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.nps-btn:hover[b-dmo1dkk2rs] {
    border-color: rgba(76, 224, 198, 0.4);
}

.nps-btn.selected.detractor[b-dmo1dkk2rs] { background: rgba(255,100,100,.2); border-color: #ff6464; color: #ff6464; }
.nps-btn.selected.passive[b-dmo1dkk2rs] { background: rgba(255,193,7,.2); border-color: #ffc107; color: #ffc107; }
.nps-btn.selected.promoter[b-dmo1dkk2rs] { background: rgba(76,224,198,.2); border-color: #4ce0c6; color: #4ce0c6; }

.nps-labels[b-dmo1dkk2rs] {
    display: flex;
    justify-content: space-between;
    color: var(--tg-muted);
    font-size: 10px;
    margin-bottom: 16px;
}

.csat-scale[b-dmo1dkk2rs] {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}

.csat-btn[b-dmo1dkk2rs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 10px 8px;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 56px;
}

.csat-btn:hover[b-dmo1dkk2rs] { border-color: rgba(76,224,198,.2); }
.csat-btn.selected[b-dmo1dkk2rs] { border-color: var(--tg-primary); background: rgba(76,224,198,.08); }

.csat-emoji[b-dmo1dkk2rs] { font-size: 24px; }
.csat-label[b-dmo1dkk2rs] { color: var(--tg-muted); font-size: 10px; }

.nps-followup[b-dmo1dkk2rs] {
    margin-bottom: 16px;
    animation: fadeIn-b-dmo1dkk2rs 0.2s;
}

@keyframes fadeIn-b-dmo1dkk2rs { from { opacity: 0; } to { opacity: 1; } }

.nps-followup label[b-dmo1dkk2rs] {
    display: block;
    color: var(--tg-muted);
    font-size: 12px;
    margin-bottom: 8px;
}

.nps-followup textarea[b-dmo1dkk2rs] {
    width: 100%;
    background: var(--tg-bg-soft);
    border: 1px solid rgba(76,224,198,.15);
    border-radius: 10px;
    padding: 10px;
    color: var(--tg-ink);
    font-size: 13px;
    font-family: inherit;
    resize: none;
    outline: none;
    box-sizing: border-box;
}

.nps-followup textarea:focus[b-dmo1dkk2rs] { border-color: var(--tg-primary); }

.nps-actions[b-dmo1dkk2rs] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.nps-skip[b-dmo1dkk2rs] {
    background: transparent;
    border: none;
    color: var(--tg-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 8px 14px;
}

.nps-submit[b-dmo1dkk2rs] {
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b;
    border: none;
    border-radius: 10px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.nps-submit:disabled[b-dmo1dkk2rs] { opacity: .5; cursor: not-allowed; }

.nps-thanks[b-dmo1dkk2rs] {
    text-align: center;
    padding: 16px 0;
}

.thanks-icon[b-dmo1dkk2rs] { margin-bottom: 12px; }

.nps-thanks p[b-dmo1dkk2rs] {
    color: var(--tg-primary);
    font-size: 14px;
    margin: 0;
}
/* /Layout/OfflineSyncIndicator.razor.rz.scp.css */
.offline-banner[b-yz8mxv61sf], .sync-banner[b-yz8mxv61sf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.85rem;
    animation: bannerSlide-b-yz8mxv61sf 0.3s ease-out;
}

.offline-banner[b-yz8mxv61sf] {
    background: rgba(255, 165, 0, 0.12);
    border-bottom: 1px solid rgba(255, 165, 0, 0.2);
    color: #ffa500;
}

.sync-banner.success[b-yz8mxv61sf] {
    background: rgba(76, 224, 198, 0.1);
    border-bottom: 1px solid rgba(76, 224, 198, 0.2);
    color: #4ce0c6;
}

@keyframes bannerSlide-b-yz8mxv61sf {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
/* /Layout/SafetyPlanRehearse.razor.rz.scp.css */
.rehearsal-overlay[b-q8ygxdmcjd] {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(2, 17, 27, 0.88); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.rehearsal-overlay.visible[b-q8ygxdmcjd] { opacity: 1; pointer-events: all; }

.rehearsal-card[b-q8ygxdmcjd] {
    background: linear-gradient(145deg, #0d2a3d, #0a1e2e);
    border: 1px solid rgba(76, 224, 198, 0.12);
    border-radius: 24px; padding: 32px;
    max-width: 500px; width: 90vw; position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    max-height: 85vh; overflow-y: auto;
}

.rehearsal-close[b-q8ygxdmcjd] {
    position: absolute; top: 16px; right: 16px;
    background: none; border: none; color: rgba(255,255,255,.4);
    cursor: pointer; padding: 8px; border-radius: 8px;
}

.rehearsal-intro h3[b-q8ygxdmcjd] { margin: 0 0 10px; font-size: 1.3rem; color: #fff; }
.rehearsal-intro p[b-q8ygxdmcjd] { color: rgba(255,255,255,.65); font-size: .9rem; line-height: 1.5; margin: 0 0 10px; }
.rehearsal-note[b-q8ygxdmcjd] { font-size: .8rem !important; color: rgba(76,224,198,.5) !important; font-style: italic; }

.rehearsal-start-btn[b-q8ygxdmcjd] {
    width: 100%; margin-top: 20px; padding: 14px;
    background: linear-gradient(135deg, #4ce0c6, #2C727E); color: #02111b;
    border: none; border-radius: 14px; font-weight: 700; font-size: 1rem; cursor: pointer;
}

.rehearsal-progress[b-q8ygxdmcjd] { height: 4px; background: rgba(76,224,198,.1); border-radius: 2px; margin-bottom: 8px; }
.progress-fill[b-q8ygxdmcjd] { height: 100%; background: #4ce0c6; border-radius: 2px; transition: width .4s ease; }
.step-counter[b-q8ygxdmcjd] { font-size: .8rem; color: rgba(255,255,255,.4); display: block; margin-bottom: 20px; }

.step-content[b-q8ygxdmcjd] { text-align: center; }
.step-icon[b-q8ygxdmcjd] { font-size: 2.5rem; margin-bottom: 10px; }
.step-content h4[b-q8ygxdmcjd] { margin: 0 0 8px; color: #fff; font-size: 1.1rem; }
.step-prompt[b-q8ygxdmcjd] { color: rgba(255,255,255,.6); font-size: .9rem; line-height: 1.5; margin: 0 0 16px; }
.step-input[b-q8ygxdmcjd] {
    width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(76,224,198,.12);
    border-radius: 12px; padding: 12px; color: #fff; font-size: .9rem;
    font-family: inherit; resize: none; outline: none; box-sizing: border-box;
}
.step-input:focus[b-q8ygxdmcjd] { border-color: rgba(76,224,198,.3); }
.step-input[b-q8ygxdmcjd]::placeholder { color: rgba(255,255,255,.25); }

.step-actions[b-q8ygxdmcjd] { display: flex; gap: 8px; margin-top: 16px; }
.step-next-btn[b-q8ygxdmcjd] {
    flex: 1; padding: 12px; background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b; border: none; border-radius: 12px; font-weight: 600; cursor: pointer;
}
.step-back-btn[b-q8ygxdmcjd] {
    padding: 12px 18px; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
    color: rgba(255,255,255,.5); cursor: pointer;
}

.rehearsal-complete[b-q8ygxdmcjd] { text-align: center; }
.rehearsal-complete h3[b-q8ygxdmcjd] { color: #4ce0c6; margin: 16px 0 8px; }
.rehearsal-complete p[b-q8ygxdmcjd] { color: rgba(255,255,255,.65); font-size: .9rem; line-height: 1.5; margin: 0 0 8px; }
.rehearsal-tip[b-q8ygxdmcjd] { font-style: italic; color: rgba(76,224,198,.5) !important; font-size: .85rem !important; }
.complete-actions[b-q8ygxdmcjd] { display: flex; gap: 8px; margin-top: 20px; }
.complete-actions .rehearsal-start-btn[b-q8ygxdmcjd] { margin-top: 0; }
/* /Layout/SessionSummary.razor.rz.scp.css */
.session-summary-card[b-wsyqkdqij7] {
    background: linear-gradient(145deg, rgba(76, 224, 198, 0.04), rgba(10, 30, 46, 0.95));
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: 16px;
    padding: 20px;
    margin: 16px 0;
    animation: summarySlide-b-wsyqkdqij7 0.5s ease-out;
}

@keyframes summarySlide-b-wsyqkdqij7 {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.ss-header[b-wsyqkdqij7] { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ss-header h3[b-wsyqkdqij7] { margin: 0; flex: 1; font-size: 1rem; color: #fff; font-weight: 600; }
.ss-icon[b-wsyqkdqij7] { flex-shrink: 0; }
.ss-close[b-wsyqkdqij7] { background: none; border: none; color: rgba(255,255,255,.3); cursor: pointer; padding: 4px; border-radius: 6px; }
.ss-close:hover[b-wsyqkdqij7] { color: rgba(255,255,255,.6); background: rgba(255,255,255,.05); }

.ss-text[b-wsyqkdqij7] { color: rgba(255,255,255,.75); font-size: .9rem; line-height: 1.5; margin: 0 0 14px; }

.ss-label[b-wsyqkdqij7] { display: block; font-size: .75rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }

.ss-topics[b-wsyqkdqij7] { margin-bottom: 12px; }
.ss-topic-tags[b-wsyqkdqij7] { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-tag[b-wsyqkdqij7] { padding: 3px 10px; background: rgba(76,224,198,.08); border: 1px solid rgba(76,224,198,.15); border-radius: 8px; font-size: .8rem; color: rgba(255,255,255,.6); }

.ss-techniques[b-wsyqkdqij7] { margin-bottom: 12px; }
.ss-technique-list[b-wsyqkdqij7] { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-technique[b-wsyqkdqij7] { display: flex; align-items: center; gap: 5px; padding: 4px 10px; background: rgba(255,255,255,.04); border-radius: 8px; font-size: .8rem; color: rgba(255,255,255,.6); }
.ss-technique-icon[b-wsyqkdqij7] { font-size: .9rem; }

.ss-recommendation[b-wsyqkdqij7] { background: rgba(76,224,198,.04); border-left: 3px solid rgba(76,224,198,.3); border-radius: 0 8px 8px 0; padding: 10px 14px; margin-bottom: 14px; }
.ss-recommendation p[b-wsyqkdqij7] { margin: 0; color: rgba(255,255,255,.65); font-size: .85rem; font-style: italic; line-height: 1.4; }

.ss-actions[b-wsyqkdqij7] { display: flex; gap: 8px; }
.ss-action-btn[b-wsyqkdqij7] { padding: 8px 14px; border-radius: 10px; font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .2s; border: none; }
.ss-action-btn.journal[b-wsyqkdqij7] { background: linear-gradient(135deg, #4ce0c6, #2C727E); color: #02111b; }
.ss-action-btn.mood[b-wsyqkdqij7] { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.6); }
.ss-action-btn:hover[b-wsyqkdqij7] { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) { .session-summary-card[b-wsyqkdqij7] { animation: none; } }
/* /Layout/SessionTimeReminder.razor.rz.scp.css */
.session-reminder[b-e772ttxvfo] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9500;
    background: linear-gradient(145deg, #0d2a3d, #0a1e2e);
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 560px;
    width: 90vw;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-e772ttxvfo 0.4s ease-out;
}

.session-reminder.dismissing[b-e772ttxvfo] {
    animation: slideDown-b-e772ttxvfo 0.3s ease-in forwards;
}

@keyframes slideUp-b-e772ttxvfo {
    from { transform: translateX(-50%) translateY(100px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes slideDown-b-e772ttxvfo {
    from { transform: translateX(-50%) translateY(0); opacity: 1; }
    to { transform: translateX(-50%) translateY(100px); opacity: 0; }
}

.reminder-icon[b-e772ttxvfo] {
    flex-shrink: 0;
}

.reminder-content[b-e772ttxvfo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reminder-title[b-e772ttxvfo] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #4ce0c6;
}

.reminder-text[b-e772ttxvfo] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

.reminder-actions[b-e772ttxvfo] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.reminder-action[b-e772ttxvfo] {
    padding: 8px 14px;
    border-radius: 10px;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.break-btn[b-e772ttxvfo] {
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b;
}

.break-btn:hover[b-e772ttxvfo] {
    transform: scale(1.03);
}

.dismiss-btn[b-e772ttxvfo] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dismiss-btn:hover[b-e772ttxvfo] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

@media (max-width: 600px) {
    .session-reminder[b-e772ttxvfo] {
        flex-wrap: wrap;
    }
    .reminder-actions[b-e772ttxvfo] {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .session-reminder[b-e772ttxvfo],
    .session-reminder.dismissing[b-e772ttxvfo] {
        animation: none;
    }
}
/* /Layout/ShareButton.razor.rz.scp.css */
.share-btn[b-kizyuxracl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--tg-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.share-btn:hover[b-kizyuxracl] {
    border-color: var(--tg-primary);
    color: var(--tg-primary);
    background: rgba(76, 224, 198, 0.05);
}

.share-btn span[b-kizyuxracl] {
    font-weight: 500;
}
/* /Layout/TermsAcceptance.razor.rz.scp.css */
.terms-overlay[b-z85o0bj5j5] {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(2, 17, 27, 0.9);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-z85o0bj5j5 0.3s ease;
}

@keyframes fadeIn-b-z85o0bj5j5 { from { opacity: 0; } to { opacity: 1; } }

.terms-card[b-z85o0bj5j5] {
    background: linear-gradient(145deg, #0d2a3d, #0a1e2e);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: 20px;
    padding: 32px;
    max-width: 520px;
    width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.terms-header[b-z85o0bj5j5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.terms-header h3[b-z85o0bj5j5] {
    margin: 0;
    font-size: 1.2rem;
    color: #fff;
}

.terms-version[b-z85o0bj5j5] {
    font-size: 0.8rem;
    color: #4ce0c6;
    font-weight: 600;
    margin-bottom: 8px !important;
}

.terms-summary p[b-z85o0bj5j5] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 8px;
}

.terms-content[b-z85o0bj5j5] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
}

.terms-content p[b-z85o0bj5j5] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 8px;
}

.terms-content ul[b-z85o0bj5j5] {
    padding-left: 20px;
    margin: 8px 0;
}

.terms-content li[b-z85o0bj5j5] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.6;
}

.terms-actions[b-z85o0bj5j5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.terms-checkbox[b-z85o0bj5j5] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.terms-checkbox input[type="checkbox"][b-z85o0bj5j5] {
    margin-top: 3px;
    accent-color: #4ce0c6;
}

.terms-accept-btn[b-z85o0bj5j5] {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b;
    border: none;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}

.terms-accept-btn:disabled[b-z85o0bj5j5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.terms-accept-btn:not(:disabled):hover[b-z85o0bj5j5] {
    transform: scale(1.02);
}
/* /Layout/TherapeuticRecommendations.razor.rz.scp.css */
.rec-widget[b-5o5ed48t3s] { }

.rec-header[b-5o5ed48t3s] { margin-bottom: 12px; }
.rec-header h2[b-5o5ed48t3s] { margin: 0; font-size: 1rem; color: var(--tg-ink, #fff); font-weight: 600; }

.rec-list[b-5o5ed48t3s] { display: flex; flex-direction: column; gap: 8px; }

.rec-item[b-5o5ed48t3s] {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(76,224,198,.08);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rec-item:hover[b-5o5ed48t3s] {
    background: rgba(76,224,198,.05);
    border-color: rgba(76,224,198,.2);
}

.rec-modality[b-5o5ed48t3s] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rec-modality-icon[b-5o5ed48t3s] { font-size: .85rem; }
.rec-modality-label[b-5o5ed48t3s] {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: rgba(76,224,198,.6);
    font-weight: 600;
}

.rec-title[b-5o5ed48t3s] {
    font-weight: 600;
    font-size: .9rem;
    color: var(--tg-ink, #fff);
}

.rec-desc[b-5o5ed48t3s] {
    font-size: .8rem;
    color: var(--tg-muted, rgba(255,255,255,.5));
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Layout/TierGate.razor.rz.scp.css */
.tier-gate[b-ltqly46pu5] { display: flex; justify-content: center; padding: 40px 20px; }
.gate-card[b-ltqly46pu5] {
    text-align: center; max-width: 400px;
    background: var(--tg-card, rgba(255,255,255,.03));
    border: 1px solid rgba(255,165,0,.15);
    border-radius: 16px; padding: 32px;
}
.gate-icon[b-ltqly46pu5] { margin-bottom: 16px; }
.gate-card h3[b-ltqly46pu5] { margin: 0 0 8px; color: var(--tg-ink, #fff); font-size: 1.2rem; }
.gate-card p[b-ltqly46pu5] { color: var(--tg-muted, rgba(255,255,255,.6)); font-size: .9rem; line-height: 1.5; margin: 0 0 8px; }
.gate-tier[b-ltqly46pu5] { font-size: .85rem !important; color: #ffa500 !important; }
.gate-upgrade-btn[b-ltqly46pu5] {
    margin-top: 16px; padding: 12px 28px;
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b; border: none; border-radius: 12px;
    font-weight: 600; font-size: .95rem; cursor: pointer;
}
.gate-upgrade-btn:hover[b-ltqly46pu5] { transform: scale(1.03); }
.tier-gate-loading[b-ltqly46pu5] { display: flex; justify-content: center; padding: 40px; }
.spinner-sm[b-ltqly46pu5] {
    width: 24px; height: 24px;
    border: 2px solid rgba(76,224,198,.15); border-top-color: #4ce0c6;
    border-radius: 50%; animation: spin-b-ltqly46pu5 .8s linear infinite;
}
@keyframes spin-b-ltqly46pu5 { to { transform: rotate(360deg); } }
/* /Layout/TrialBanner.razor.rz.scp.css */
.trial-banner[b-3o7gk7ua7m] {
    width: 100%;
    padding: 10px 16px;
    color: #02111b;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.trial-banner.info[b-3o7gk7ua7m] {
    background: linear-gradient(90deg, #4ce0c6, #9cd5ff);
}

.trial-banner.warning[b-3o7gk7ua7m] {
    background: linear-gradient(90deg, #f4c66e, #f4a464);
}

.trial-banner.danger[b-3o7gk7ua7m] {
    background: linear-gradient(90deg, #f47e7e, #e85a5a);
    color: #fff;
}

.trial-banner-inner[b-3o7gk7ua7m] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.trial-banner-icon[b-3o7gk7ua7m] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.trial-banner-text[b-3o7gk7ua7m] {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.4;
    min-width: 220px;
}

.trial-banner-text strong[b-3o7gk7ua7m] {
    margin-right: 6px;
}

.trial-banner-actions[b-3o7gk7ua7m] {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.banner-btn[b-3o7gk7ua7m] {
    border: none;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.banner-btn.ghost[b-3o7gk7ua7m] {
    background: rgba(0, 0, 0, 0.12);
    color: inherit;
}

.banner-btn.primary[b-3o7gk7ua7m] {
    background: #02111b;
    color: #4ce0c6;
}

.trial-banner.danger .banner-btn.primary[b-3o7gk7ua7m] {
    background: #fff;
    color: #e85a5a;
}
/* /Layout/TrialBillingPanel.razor.rz.scp.css */
.trial-panel[b-jgkykvtwi9] {
    padding: 20px;
    border-radius: 12px;
    background: var(--surface-card, #071e2b);
    margin-bottom: 16px;
}

.trial-panel-header[b-jgkykvtwi9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.trial-panel-header h3[b-jgkykvtwi9] {
    margin: 0;
    font-size: 18px;
}

.status-pill[b-jgkykvtwi9] {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.status-trialing[b-jgkykvtwi9] { background: rgba(76, 224, 198, 0.15); color: #4ce0c6; }
.status-active[b-jgkykvtwi9] { background: rgba(76, 224, 198, 0.15); color: #4ce0c6; }
.status-past_due[b-jgkykvtwi9] { background: rgba(244, 168, 100, 0.18); color: #f4a464; }
.status-trial_cancelled[b-jgkykvtwi9],
.status-cancelled[b-jgkykvtwi9],
.status-expired[b-jgkykvtwi9] { background: rgba(229, 90, 110, 0.15); color: #ff9ea7; }

.trial-grid[b-jgkykvtwi9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.trial-label[b-jgkykvtwi9] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted, #7fb8c9);
}

.trial-value[b-jgkykvtwi9] {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 600;
}

.trial-value .muted[b-jgkykvtwi9] {
    color: var(--muted, #7fb8c9);
    font-weight: 400;
}

.trial-actions[b-jgkykvtwi9] {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-danger-ghost[b-jgkykvtwi9] {
    background: transparent;
    border: 1px solid rgba(229, 90, 110, 0.35);
    color: #ff9ea7;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 600;
}

.btn-danger-ghost:hover[b-jgkykvtwi9] { background: rgba(229, 90, 110, 0.08); }

.modal-scrim[b-jgkykvtwi9] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
}

.modal-card[b-jgkykvtwi9] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100% - 32px));
    z-index: 1001;
    padding: 24px;
    border-radius: 14px;
    background: var(--surface-card, #071e2b);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.modal-card h3[b-jgkykvtwi9] { margin: 0 0 12px; font-size: 18px; }
.modal-card p[b-jgkykvtwi9] { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--muted, #c8dfe4); }

.field[b-jgkykvtwi9] { margin-bottom: 16px; }
.field-label[b-jgkykvtwi9] { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field select[b-jgkykvtwi9] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(127, 184, 201, 0.2);
    background: rgba(2, 17, 27, 0.4);
    color: inherit;
    font-size: 14px;
}

.modal-actions[b-jgkykvtwi9] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-ghost[b-jgkykvtwi9] {
    background: transparent;
    border: 1px solid rgba(127, 184, 201, 0.3);
    color: inherit;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 600;
}

.btn-danger[b-jgkykvtwi9] {
    background: linear-gradient(90deg, #f47e7e, #e85a5a);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    cursor: pointer;
    font-weight: 700;
}

.btn-danger:disabled[b-jgkykvtwi9],
.btn-ghost:disabled[b-jgkykvtwi9] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Layout/UpgradeNudge.razor.rz.scp.css */
.nudge-banner[b-21pdd8z5rg] {
    background: linear-gradient(135deg, rgba(76, 224, 198, 0.08), rgba(44, 114, 126, 0.12));
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 20px;
    animation: slideDown-b-21pdd8z5rg 0.4s cubic-bezier(.4,.14,.2,1);
}

.nudge-banner.closing[b-21pdd8z5rg] {
    animation: slideUp-b-21pdd8z5rg 0.3s cubic-bezier(.4,.14,.2,1) forwards;
}

@keyframes slideDown-b-21pdd8z5rg {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp-b-21pdd8z5rg {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-12px); }
}

.nudge-content[b-21pdd8z5rg] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nudge-icon[b-21pdd8z5rg] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: rgba(76, 224, 198, 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nudge-text[b-21pdd8z5rg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nudge-text strong[b-21pdd8z5rg] {
    color: var(--tg-ink);
    font-size: 14px;
}

.nudge-text span[b-21pdd8z5rg] {
    color: var(--tg-muted);
    font-size: 12px;
    line-height: 1.4;
}

.nudge-cta[b-21pdd8z5rg] {
    flex-shrink: 0;
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b;
    border: none;
    border-radius: 10px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.nudge-cta:hover[b-21pdd8z5rg] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(76, 224, 198, 0.3);
}

.nudge-dismiss[b-21pdd8z5rg] {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--tg-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
}

.nudge-dismiss:hover[b-21pdd8z5rg] {
    color: var(--tg-ink);
}

@media (max-width: 600px) {
    .nudge-content[b-21pdd8z5rg] {
        flex-wrap: wrap;
    }

    .nudge-text[b-21pdd8z5rg] {
        flex-basis: calc(100% - 50px);
    }

    .nudge-cta[b-21pdd8z5rg] {
        flex-grow: 1;
    }
}
/* /Layout/WellnessScore.razor.rz.scp.css */
.wellness-score-card[b-bw5ib1yhn0] {
    background: var(--tg-card, rgba(255,255,255,.03));
    border: 1px solid rgba(76,224,198,.1);
    border-radius: 16px;
    padding: 20px;
}

.ws-header[b-bw5ib1yhn0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ws-header h2[b-bw5ib1yhn0] {
    margin: 0;
    font-size: 1rem;
    color: var(--tg-ink, #fff);
    font-weight: 600;
}

.ws-date[b-bw5ib1yhn0] {
    font-size: 0.8rem;
    color: var(--tg-muted, rgba(255,255,255,.4));
}

.ws-ring-container[b-bw5ib1yhn0] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 12px;
}

.ws-ring[b-bw5ib1yhn0] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ws-ring-bg[b-bw5ib1yhn0] {
    fill: none;
    stroke: rgba(76,224,198,.08);
    stroke-width: 8;
}

.ws-ring-fill[b-bw5ib1yhn0] {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease, stroke 0.5s ease;
}

.ws-ring-text[b-bw5ib1yhn0] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ws-score-value[b-bw5ib1yhn0] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--tg-ink, #fff);
    line-height: 1;
}

.ws-score-label[b-bw5ib1yhn0] {
    font-size: 0.75rem;
    color: var(--tg-muted, rgba(255,255,255,.4));
}

.ws-insight[b-bw5ib1yhn0] {
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,.6);
    line-height: 1.4;
    margin-bottom: 16px;
    font-style: italic;
}

.ws-dimensions[b-bw5ib1yhn0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ws-dim-header[b-bw5ib1yhn0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.ws-dim-name[b-bw5ib1yhn0] {
    font-size: 0.8rem;
    color: var(--tg-muted, rgba(255,255,255,.5));
}

.ws-dim-score[b-bw5ib1yhn0] {
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ws-dim-bar[b-bw5ib1yhn0] {
    height: 6px;
    background: rgba(76,224,198,.06);
    border-radius: 3px;
    overflow: hidden;
}

.ws-dim-fill[b-bw5ib1yhn0] {
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ws-ring-fill[b-bw5ib1yhn0], .ws-dim-fill[b-bw5ib1yhn0] { transition: none; }
}
/* /Pages/AccessibilitySettings.razor.rz.scp.css */
.a11y-container[b-gbkzywhfmz] {
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 20px;
}

.a11y-header h1[b-gbkzywhfmz] {
    color: var(--tg-ink);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
}

.subtitle[b-gbkzywhfmz] {
    color: var(--tg-muted);
    font-size: 15px;
    margin: 0 0 32px;
}

.loading-state[b-gbkzywhfmz] {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.spinner[b-gbkzywhfmz] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(76, 224, 198, 0.2);
    border-top-color: var(--tg-primary);
    border-radius: 50%;
    animation: spin-b-gbkzywhfmz 0.8s linear infinite;
}

@keyframes spin-b-gbkzywhfmz { to { transform: rotate(360deg); } }

.settings-section[b-gbkzywhfmz] {
    background: var(--tg-card);
    border: 1px solid rgba(76, 224, 198, 0.1);
    border-radius: var(--tg-radius-sm);
    padding: 24px 28px;
    margin-bottom: 20px;
}

.settings-section h2[b-gbkzywhfmz] {
    color: var(--tg-primary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 20px;
}

.setting-row[b-gbkzywhfmz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid rgba(76, 224, 198, 0.06);
}

.setting-row:last-child[b-gbkzywhfmz] {
    border-bottom: none;
    padding-bottom: 0;
}

.setting-info h3[b-gbkzywhfmz] {
    color: var(--tg-ink);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
}

.setting-info p[b-gbkzywhfmz] {
    color: var(--tg-muted);
    font-size: 13px;
    margin: 0;
}

.setting-control[b-gbkzywhfmz] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Font size buttons */
.size-btn[b-gbkzywhfmz] {
    width: 36px;
    height: 36px;
    background: var(--tg-bg-soft);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: 8px;
    color: var(--tg-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.size-btn.default[b-gbkzywhfmz] { font-size: 14px; }
.size-btn.large[b-gbkzywhfmz] { font-size: 16px; }
.size-btn.xlarge[b-gbkzywhfmz] { font-size: 18px; }

.size-btn:hover[b-gbkzywhfmz] {
    border-color: rgba(76, 224, 198, 0.4);
}

.size-btn.active[b-gbkzywhfmz] {
    background: rgba(76, 224, 198, 0.15);
    border-color: var(--tg-primary);
    color: var(--tg-primary);
}

/* Toggle switch */
.toggle[b-gbkzywhfmz] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.toggle input[b-gbkzywhfmz] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-gbkzywhfmz] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(76, 224, 198, 0.15);
    border-radius: 13px;
    transition: all 0.3s;
}

.toggle-slider[b-gbkzywhfmz]::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: var(--tg-muted);
    border-radius: 50%;
    transition: all 0.3s;
}

.toggle input:checked + .toggle-slider[b-gbkzywhfmz] {
    background: var(--tg-primary);
}

.toggle input:checked + .toggle-slider[b-gbkzywhfmz]::before {
    transform: translateX(22px);
    background: #02111b;
}

/* Select */
.select-control[b-gbkzywhfmz] {
    background: var(--tg-bg-soft);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--tg-ink);
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.select-control:focus[b-gbkzywhfmz] {
    border-color: var(--tg-primary);
}

.select-control option[b-gbkzywhfmz] {
    background: var(--tg-bg-deep);
    color: var(--tg-ink);
}

/* Reset section */
.reset-section[b-gbkzywhfmz] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.btn-reset[b-gbkzywhfmz] {
    background: transparent;
    border: 1px solid rgba(255, 100, 100, 0.3);
    border-radius: 12px;
    padding: 10px 20px;
    color: #ff6464;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reset:hover[b-gbkzywhfmz] {
    background: rgba(255, 100, 100, 0.1);
}

.save-indicator[b-gbkzywhfmz] {
    color: var(--tg-primary);
    font-size: 13px;
    animation: fadeIn-b-gbkzywhfmz 0.3s;
}

@keyframes fadeIn-b-gbkzywhfmz {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 480px) {
    .setting-row[b-gbkzywhfmz] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}
/* /Pages/Account.razor.rz.scp.css */
/* Account.razor.css — TheraGen dark-theme, consistent with app design */

.account-page[b-l8i1l30hw8] {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    animation: acctFadeIn-b-l8i1l30hw8 .4s var(--tg-ease-soft, ease-out) both;
}

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

.page-title[b-l8i1l30hw8] {
    text-align: center;
    color: var(--tg-primary);
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

/* ---- Card ---- */
.account-card[b-l8i1l30hw8] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    padding: 1.5rem;
    box-shadow: var(--tg-shadow-sm);
}

.card-header[b-l8i1l30hw8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.card-header h3[b-l8i1l30hw8] {
    color: var(--tg-primary);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.divider[b-l8i1l30hw8] {
    height: 1px;
    background: var(--tg-line);
    margin: 1.25rem 0;
}

/* ---- Info grid (view mode) ---- */
.info-grid[b-l8i1l30hw8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-item[b-l8i1l30hw8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.info-label[b-l8i1l30hw8] {
    color: var(--tg-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.info-value[b-l8i1l30hw8] {
    color: var(--tg-ink);
    font-size: 0.9rem;
    font-weight: 600;
}

.plan-badge[b-l8i1l30hw8] {
    background: rgba(76, 224, 198, 0.12);
    color: var(--tg-primary);
    padding: 0.2rem 0.65rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

/* ---- Form sections (edit mode) ---- */
.form-section[b-l8i1l30hw8] {
    margin-bottom: 1.25rem;
}

.section-label[b-l8i1l30hw8] {
    color: var(--tg-primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--tg-line);
}

.field[b-l8i1l30hw8] {
    margin-bottom: 0.75rem;
}

.field label[b-l8i1l30hw8] {
    display: block;
    color: var(--tg-muted);
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
}

.field input[b-l8i1l30hw8],
.field select[b-l8i1l30hw8] {
    width: 100%;
    height: 42px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--tg-line);
    border-radius: 12px;
    background: rgba(5, 18, 26, 0.6);
    color: var(--tg-ink);
    font: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field input:focus[b-l8i1l30hw8],
.field select:focus[b-l8i1l30hw8] {
    border-color: var(--tg-primary);
    box-shadow: var(--tg-focus);
}

.field input[b-l8i1l30hw8]::placeholder {
    color: rgba(169, 205, 209, 0.4);
}

.field select[b-l8i1l30hw8] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a9cdd1' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658c-.566-.65-.106-1.658.753-1.658h9.592c.86 0 1.32 1.008.753 1.658L8.753 11.14a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem auto;
    padding-right: 2.25rem;
}

.card-info-row[b-l8i1l30hw8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-display[b-l8i1l30hw8] {
    color: var(--tg-ink);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: monospace;
}

/* ---- Buttons ---- */
.action-row[b-l8i1l30hw8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.btn-primary[b-l8i1l30hw8] {
    background: var(--tg-primary);
    color: var(--tg-bg-deep);
    border: none;
    border-radius: 12px;
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.08s ease;
}
.btn-primary:hover[b-l8i1l30hw8] { filter: brightness(1.08); }
.btn-primary:active[b-l8i1l30hw8] { transform: translateY(1px); }

.btn-secondary[b-l8i1l30hw8] {
    background: rgba(76, 224, 198, 0.1);
    color: var(--tg-primary);
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: 10px;
    padding: 0.45rem 0.85rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-secondary:hover[b-l8i1l30hw8] { background: rgba(76, 224, 198, 0.18); }

.btn-sm[b-l8i1l30hw8] { padding: 0.35rem 0.7rem; font-size: 0.8rem; }

.btn-ghost[b-l8i1l30hw8] {
    background: transparent;
    color: var(--tg-muted);
    border: 1px solid var(--tg-line);
    border-radius: 12px;
    padding: 0.6rem 1.25rem;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.btn-ghost:hover[b-l8i1l30hw8] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--tg-ink);
}

.btn-danger-ghost[b-l8i1l30hw8] {
    background: transparent;
    color: #ef5350;
    border: 1px solid rgba(239, 83, 80, 0.25);
    border-radius: 12px;
    padding: 0.6rem 1.25rem;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-danger-ghost:hover[b-l8i1l30hw8] {
    background: rgba(239, 83, 80, 0.08);
}

/* ---- Status banners ---- */
.error-banner[b-l8i1l30hw8] {
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: rgba(239, 83, 80, 0.1);
    border: 1px solid rgba(239, 83, 80, 0.25);
    color: #ff8a80;
    font-size: 0.9rem;
}

.loading-text[b-l8i1l30hw8], .empty-text[b-l8i1l30hw8] {
    text-align: center;
    color: var(--tg-muted);
    padding: 2rem 0;
}

/* ---- Modal ---- */
.modal-overlay[b-l8i1l30hw8] {
    position: fixed;
    inset: 0;
    background: rgba(2, 12, 18, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.modal-panel[b-l8i1l30hw8] {
    background: rgba(5, 18, 26, 0.96);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    box-shadow: var(--tg-shadow);
    width: min(480px, 94vw);
    padding: 1.5rem;
    position: relative;
    color: var(--tg-ink);
    animation: modalIn-b-l8i1l30hw8 0.25s var(--tg-ease-soft, ease-out) both;
}

@keyframes modalIn-b-l8i1l30hw8 {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-panel h3[b-l8i1l30hw8] {
    color: var(--tg-primary);
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

.modal-panel p[b-l8i1l30hw8] {
    color: var(--tg-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.modal-close[b-l8i1l30hw8] {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--tg-muted);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s;
}
.modal-close:hover[b-l8i1l30hw8] { color: var(--tg-ink); }

.modal-actions[b-l8i1l30hw8] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .account-page[b-l8i1l30hw8] { padding: 1rem 0.75rem 2rem; }
    .account-card[b-l8i1l30hw8] { padding: 1rem; border-radius: 20px; }
    .info-item[b-l8i1l30hw8] { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
    .action-row[b-l8i1l30hw8] { flex-direction: column; }
    .action-row button[b-l8i1l30hw8] { width: 100%; }
}

/* ---- Accessibility: reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
    .account-page[b-l8i1l30hw8] { animation: none !important; }
    .modal-panel[b-l8i1l30hw8] { animation: none !important; }
    .btn-primary[b-l8i1l30hw8], .btn-ghost[b-l8i1l30hw8], .btn-secondary[b-l8i1l30hw8], .btn-danger-ghost[b-l8i1l30hw8] { transition: none !important; }
}
/* /Pages/Achievements.razor.rz.scp.css */
/* Achievements.razor.css - Scoped styles using TheraGen design system */

/* ============ Container & Layout ============ */
.achievements-container[b-8y6usudzse] {
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    animation: fadeInUp-b-8y6usudzse 0.6s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
}

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

/* ============ Page Header ============ */
.page-header[b-8y6usudzse] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.header-content h1[b-8y6usudzse] {
    font-size: var(--tg-h1, clamp(1.5rem, 2.4vw, 2rem));
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
    margin: 0 0 0.25rem 0;
}

.subtitle[b-8y6usudzse] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
    margin: 0;
}

/* ============ Loading State ============ */
.loading-state[b-8y6usudzse] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    color: var(--tg-muted, #a9cdd1);
}

.loader[b-8y6usudzse] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--tg-line, rgba(255,255,255,.08));
    border-top-color: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    animation: spin-b-8y6usudzse 1s linear infinite;
    margin-bottom: 0.75rem;
}

@keyframes spin-b-8y6usudzse {
    to { transform: rotate(360deg); }
}

.error-state[b-8y6usudzse] {
    text-align: center;
    padding: 3rem 2rem;
    color: #f87171;
}

.error-state p[b-8y6usudzse] {
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

/* ============ Level Hero ============ */
.level-hero[b-8y6usudzse] {
    background: linear-gradient(135deg, rgba(76,224,198,.08), rgba(156,213,255,.08));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    padding: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.level-top[b-8y6usudzse] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.level-badge[b-8y6usudzse] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(76, 224, 198, 0.3);
    flex-shrink: 0;
}

.level-number[b-8y6usudzse] {
    font-size: 3rem;
    font-weight: 900;
    color: #04181e;
    line-height: 1;
}

.level-info[b-8y6usudzse] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.level-name[b-8y6usudzse] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
}

.level-benefits[b-8y6usudzse] {
    font-size: 0.8rem;
    color: var(--tg-muted, #a9cdd1);
    margin-top: 0.15rem;
}

/* ============ XP Progress Bar ============ */
.xp-section[b-8y6usudzse] {
    margin-bottom: 1.25rem;
}

.xp-bar[b-8y6usudzse] {
    height: 12px;
    background: var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    overflow: hidden;
}

.xp-fill[b-8y6usudzse] {
    height: 100%;
    background: linear-gradient(90deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    border-radius: 999px;
    transition: width 0.5s ease;
    position: relative;
    overflow: hidden;
}

.xp-fill[b-8y6usudzse]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer-b-8y6usudzse 2s infinite;
}

@keyframes shimmer-b-8y6usudzse {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.xp-labels[b-8y6usudzse] {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--tg-muted, #a9cdd1);
    margin-top: 0.4rem;
    font-weight: 600;
}

/* ============ Level Stats ============ */
.level-stats[b-8y6usudzse] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.stat-card[b-8y6usudzse] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius-sm, 16px);
    padding: 0.75rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.stat-card:hover[b-8y6usudzse] {
    transform: translateY(-2px);
    border-color: rgba(76, 224, 198, 0.2);
}

.stat-value[b-8y6usudzse] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
    line-height: 1.2;
}

.stat-label[b-8y6usudzse] {
    font-size: 0.7rem;
    color: var(--tg-muted, #a9cdd1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ============ Streak Card ============ */
.streak-card[b-8y6usudzse] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    margin-bottom: 1rem;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.streak-header[b-8y6usudzse] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 0.75rem;
}

.streak-display[b-8y6usudzse] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-shrink: 0;
}

.streak-flame[b-8y6usudzse] {
    font-size: 2rem;
}

.streak-number[b-8y6usudzse] {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--tg-ink, #ecf8f5);
    line-height: 1;
}

.streak-unit[b-8y6usudzse] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tg-muted, #a9cdd1);
}

.streak-info[b-8y6usudzse] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.streak-detail[b-8y6usudzse] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
}

.streak-status[b-8y6usudzse] {
    margin-bottom: 0.75rem;
}

.streak-maintained[b-8y6usudzse] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #34d399;
}

.streak-warning[b-8y6usudzse] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fbbf24;
}

.streak-actions[b-8y6usudzse] {
    display: flex;
    gap: 0.6rem;
}

/* ============ Section Header ============ */
.section-header[b-8y6usudzse] {
    margin-bottom: 0.75rem;
}

.section-header h2[b-8y6usudzse] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
    margin: 0;
}

/* ============ Badges Section ============ */
.badges-section[b-8y6usudzse] {
    margin-bottom: 1rem;
}

/* ============ Tab Bar ============ */
.tab-bar[b-8y6usudzse] {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    margin-bottom: 1rem;
}

.tab[b-8y6usudzse] {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    font-family: inherit;
}

.tab:hover[b-8y6usudzse] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--tg-ink, #ecf8f5);
}

.tab.active[b-8y6usudzse] {
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    border-color: transparent;
    font-weight: 800;
}

/* ============ Badge Grid ============ */
.badge-grid[b-8y6usudzse] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.badge-card[b-8y6usudzse] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius-sm, 16px);
    padding: 1rem 0.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.badge-card:hover[b-8y6usudzse] {
    transform: translateY(-3px);
    border-color: rgba(76, 224, 198, 0.25);
    box-shadow: var(--tg-shadow-sm, 0 12px 32px rgba(2,11,18,.4));
}

.badge-card.unviewed[b-8y6usudzse] {
    border-color: var(--tg-primary, #4ce0c6);
    animation: badgePulse-b-8y6usudzse 2s ease-in-out infinite;
}

@keyframes badgePulse-b-8y6usudzse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 224, 198, 0.3); }
    50%      { box-shadow: 0 0 0 8px rgba(76, 224, 198, 0); }
}

.badge-card.badge-locked[b-8y6usudzse] {
    opacity: 0.4;
    filter: grayscale(1);
    cursor: default;
}

.badge-card.badge-locked:hover[b-8y6usudzse] {
    transform: none;
    border-color: var(--tg-line, rgba(255,255,255,.08));
    box-shadow: none;
}

.badge-icon[b-8y6usudzse] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 1;
}

.badge-name[b-8y6usudzse] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
}

.badge-description[b-8y6usudzse] {
    font-size: 0.75rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============ Badge Rarity ============ */
.badge-rarity[b-8y6usudzse] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-rarity.rarity-common[b-8y6usudzse] {
    background: rgba(156,163,175,.15);
    color: #9ca3af;
}

.badge-rarity.rarity-uncommon[b-8y6usudzse] {
    background: rgba(52,211,153,.15);
    color: #34d399;
}

.badge-rarity.rarity-rare[b-8y6usudzse] {
    background: rgba(96,165,250,.15);
    color: #60a5fa;
}

.badge-rarity.rarity-epic[b-8y6usudzse] {
    background: rgba(167,139,250,.15);
    color: #a78bfa;
}

.badge-rarity.rarity-legendary[b-8y6usudzse] {
    background: rgba(251,191,36,.15);
    color: #fbbf24;
    animation: legendaryGlow-b-8y6usudzse 2s ease-in-out infinite;
}

@keyframes legendaryGlow-b-8y6usudzse {
    0%, 100% { box-shadow: 0 0 4px rgba(251, 191, 36, 0.2); }
    50%      { box-shadow: 0 0 12px rgba(251, 191, 36, 0.5); }
}

/* Rarity glow on badge cards */
.badge-card.rarity-uncommon[b-8y6usudzse] { border-color: rgba(52,211,153,.2); }
.badge-card.rarity-rare[b-8y6usudzse] { border-color: rgba(96,165,250,.2); }
.badge-card.rarity-epic[b-8y6usudzse] { border-color: rgba(167,139,250,.2); }
.badge-card.rarity-legendary[b-8y6usudzse] { border-color: rgba(251,191,36,.25); }

.badge-new[b-8y6usudzse] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--tg-primary, #4ce0c6);
    color: #04181e;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: newPulse-b-8y6usudzse 1.5s ease-in-out infinite;
}

@keyframes newPulse-b-8y6usudzse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

.badge-earned[b-8y6usudzse] {
    font-size: 0.7rem;
    color: var(--tg-muted, #a9cdd1);
    margin-top: 0.15rem;
}

/* ============ Points History ============ */
.points-history[b-8y6usudzse] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.history-list[b-8y6usudzse] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-item[b-8y6usudzse] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.history-item:hover[b-8y6usudzse] {
    background: rgba(255, 255, 255, 0.04);
}

.points-badge[b-8y6usudzse] {
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
    min-width: 55px;
    text-align: center;
}

.points-badge.positive[b-8y6usudzse] {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

.points-badge.negative[b-8y6usudzse] {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.history-details[b-8y6usudzse] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.history-reason[b-8y6usudzse] {
    font-size: 0.85rem;
    color: var(--tg-ink, #ecf8f5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-time[b-8y6usudzse] {
    font-size: 0.75rem;
    color: var(--tg-muted, #a9cdd1);
}

/* ============ Leaderboard ============ */
.leaderboard-card[b-8y6usudzse] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.leaderboard-list[b-8y6usudzse] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.leaderboard-row[b-8y6usudzse] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.leaderboard-row:hover[b-8y6usudzse] {
    background: rgba(255, 255, 255, 0.04);
}

.leaderboard-row.rank-1[b-8y6usudzse] {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.15);
}

.leaderboard-row.rank-2[b-8y6usudzse] {
    background: rgba(192, 192, 192, 0.06);
    border: 1px solid rgba(192, 192, 192, 0.12);
}

.leaderboard-row.rank-3[b-8y6usudzse] {
    background: rgba(205, 127, 50, 0.06);
    border: 1px solid rgba(205, 127, 50, 0.12);
}

.leaderboard-rank[b-8y6usudzse] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--tg-muted, #a9cdd1);
    min-width: 32px;
    text-align: center;
}

.rank-1 .leaderboard-rank[b-8y6usudzse] { color: #fbbf24; }
.rank-2 .leaderboard-rank[b-8y6usudzse] { color: #c0c0c0; }
.rank-3 .leaderboard-rank[b-8y6usudzse] { color: #cd7f32; }

.leaderboard-name[b-8y6usudzse] {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tg-ink, #ecf8f5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-points[b-8y6usudzse] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
    white-space: nowrap;
}

.leaderboard-level[b-8y6usudzse] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tg-muted, #a9cdd1);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* ============ Buttons ============ */
.btn-primary[b-8y6usudzse] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    font-weight: 800;
    font-size: 0.9rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 20px rgba(76, 224, 198, 0.25);
}

.btn-primary:hover[b-8y6usudzse] {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(76, 224, 198, 0.35);
}

.btn-primary:disabled[b-8y6usudzse] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-8y6usudzse] {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-8y6usudzse] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tg-ink, #ecf8f5);
}

.btn-secondary:disabled[b-8y6usudzse] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============ Empty State ============ */
.empty-state[b-8y6usudzse] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--tg-muted, #a9cdd1);
}

.empty-icon[b-8y6usudzse] {
    margin-bottom: 0.75rem;
}

.empty-icon svg[b-8y6usudzse],
.empty-state svg[b-8y6usudzse] {
    color: rgba(76, 224, 198, 0.2);
}

.empty-state p[b-8y6usudzse] {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    color: var(--tg-ink, #ecf8f5);
}

.help-text[b-8y6usudzse] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}

/* ============ Responsive ============ */
@media (max-width: 640px) {
    .level-stats[b-8y6usudzse] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .badge-grid[b-8y6usudzse] {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-header[b-8y6usudzse] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .level-top[b-8y6usudzse] {
        flex-direction: column;
        text-align: center;
    }

    .level-info[b-8y6usudzse] {
        text-align: center;
    }

    .streak-header[b-8y6usudzse] {
        flex-direction: column;
        text-align: center;
    }

    .streak-display[b-8y6usudzse] {
        justify-content: center;
    }

    .streak-info[b-8y6usudzse] {
        align-items: center;
    }

    .streak-actions[b-8y6usudzse] {
        flex-direction: column;
    }

    .streak-actions .btn-primary[b-8y6usudzse],
    .streak-actions .btn-secondary[b-8y6usudzse] {
        width: 100%;
        justify-content: center;
    }

    .leaderboard-row[b-8y6usudzse] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .leaderboard-name[b-8y6usudzse] {
        flex-basis: calc(100% - 44px);
    }
}

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce) {
    .achievements-container[b-8y6usudzse] { animation: none; }
    .xp-fill[b-8y6usudzse]::after { animation: none; }
    .badge-card.unviewed[b-8y6usudzse] { animation: none; }
    .badge-rarity.rarity-legendary[b-8y6usudzse] { animation: none; }
    .badge-new[b-8y6usudzse] { animation: none; }
}
/* /Pages/Admin.razor.rz.scp.css */
.admin-page[b-trga23s1lc] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.access-denied[b-trga23s1lc] {
    text-align: center;
    padding: 4rem 1rem;
}
.access-denied h2[b-trga23s1lc] { color: var(--text-primary); margin-bottom: 0.5rem; }
.access-denied p[b-trga23s1lc] { color: var(--text-secondary); margin-bottom: 1.5rem; }

.admin-header[b-trga23s1lc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.admin-header h1[b-trga23s1lc] { font-size: 1.5rem; color: var(--text-primary); }

.btn-refresh[b-trga23s1lc] {
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
}
.btn-refresh:hover[b-trga23s1lc] { background: var(--surface-hover); }
.btn-refresh:disabled[b-trga23s1lc] { opacity: 0.5; cursor: not-allowed; }

/* Overview Cards */
.overview-cards[b-trga23s1lc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.overview-card[b-trga23s1lc] {
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.overview-card.urgent[b-trga23s1lc] { border-color: #ef4444; background: rgba(239, 68, 68, 0.05); }
.overview-card.warning[b-trga23s1lc] { border-color: #f59e0b; background: rgba(245, 158, 11, 0.05); }
.card-value[b-trga23s1lc] { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); }
.card-label[b-trga23s1lc] { font-size: 0.85rem; color: var(--text-secondary); }
.card-badge[b-trga23s1lc] { font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 12px; width: fit-content; }
.card-badge.urgent[b-trga23s1lc] { background: #fecaca; color: #991b1b; }
.card-sub[b-trga23s1lc] { font-size: 0.75rem; color: var(--text-tertiary); }

/* Tabs */
.admin-tabs[b-trga23s1lc] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1rem;
}
.tab[b-trga23s1lc] {
    background: transparent;
    border: none;
    padding: 0.75rem 1.25rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tab:hover[b-trga23s1lc] { color: var(--text-primary); }
.tab.active[b-trga23s1lc] {
    color: var(--accent-color, #6366f1);
    border-bottom-color: var(--accent-color, #6366f1);
    font-weight: 600;
}
.tab-badge[b-trga23s1lc] {
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-weight: 600;
}

/* Tab Content */
.tab-content[b-trga23s1lc] { margin-top: 0.5rem; }
.tab-filters[b-trga23s1lc] {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.tab-filters label[b-trga23s1lc] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.tab-filters select[b-trga23s1lc] {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
}

/* Table */
.table-wrapper[b-trga23s1lc] { overflow-x: auto; }
.admin-table[b-trga23s1lc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.admin-table th[b-trga23s1lc] {
    text-align: left;
    padding: 0.6rem 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.admin-table td[b-trga23s1lc] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
    color: var(--text-primary);
}
.admin-table tr.row-critical[b-trga23s1lc] { background: rgba(239, 68, 68, 0.08); }
.admin-table tr.row-high[b-trga23s1lc] { background: rgba(245, 158, 11, 0.06); }

.keywords-cell[b-trga23s1lc], .details-cell[b-trga23s1lc] { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-id-cell[b-trga23s1lc] { font-family: monospace; font-size: 0.8rem; }

/* Level Badges */
.level-badge[b-trga23s1lc] {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.level-4[b-trga23s1lc] { background: #fecaca; color: #991b1b; }
.level-3[b-trga23s1lc] { background: #fed7aa; color: #9a3412; }
.level-2[b-trga23s1lc] { background: #fef08a; color: #854d0e; }
.level-1[b-trga23s1lc] { background: #d1fae5; color: #065f46; }
.level-0[b-trga23s1lc] { background: var(--surface-secondary); color: var(--text-secondary); }

/* Status */
.status-reviewed[b-trga23s1lc] { color: #22c55e; font-weight: 500; }
.status-pending[b-trga23s1lc] { color: #f59e0b; font-weight: 500; }
.status-approved[b-trga23s1lc] { color: #22c55e; }
.status-rejected[b-trga23s1lc] { color: #ef4444; }

.escalation-accepted[b-trga23s1lc] { color: #22c55e; }
.escalation-declined[b-trga23s1lc] { color: #f59e0b; }
.escalation-none[b-trga23s1lc] { color: var(--text-tertiary); font-style: italic; }

.notes-preview[b-trga23s1lc], .rejection-reason[b-trga23s1lc] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: help;
}

/* Buttons */
.btn-primary[b-trga23s1lc] {
    background: var(--accent-color, #6366f1);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    font-size: 0.85rem;
}
.btn-primary:hover[b-trga23s1lc] { opacity: 0.9; }
.btn-primary:disabled[b-trga23s1lc] { opacity: 0.5; cursor: not-allowed; }

.btn-secondary[b-trga23s1lc] {
    background: var(--surface-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-sm[b-trga23s1lc] {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}
.btn-review[b-trga23s1lc] { background: var(--accent-color, #6366f1); color: white; }
.btn-approve[b-trga23s1lc] { background: #22c55e; color: white; margin-right: 0.3rem; }
.btn-reject[b-trga23s1lc] { background: #ef4444; color: white; }

/* Pagination */
.pagination[b-trga23s1lc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.pagination button[b-trga23s1lc] {
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.8rem;
}
.pagination button:disabled[b-trga23s1lc] { opacity: 0.4; cursor: not-allowed; }

/* Dialog */
.dialog-overlay[b-trga23s1lc] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.dialog[b-trga23s1lc] {
    background: var(--surface-primary, #1e1e2e);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 500px;
    width: 90%;
}
.dialog h3[b-trga23s1lc] { margin-top: 0; color: var(--text-primary); }
.dialog p[b-trga23s1lc] { color: var(--text-secondary); font-size: 0.9rem; }
.dialog label[b-trga23s1lc] { display: block; margin: 0.75rem 0 0.25rem; color: var(--text-secondary); font-size: 0.85rem; }
.dialog textarea[b-trga23s1lc] {
    width: 100%;
    background: var(--surface-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    font-size: 0.85rem;
    resize: vertical;
}
.dialog-actions[b-trga23s1lc] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.loading-text[b-trga23s1lc], .empty-text[b-trga23s1lc] {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
}

@media (max-width: 768px) {
    .overview-cards[b-trga23s1lc] { grid-template-columns: 1fr 1fr; }
    .admin-tabs[b-trga23s1lc] { overflow-x: auto; }
}
/* /Pages/AdminAnalytics.razor.rz.scp.css */
.analytics-page[b-n8z182obsq] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px;
}

.page-header[b-n8z182obsq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
}

.page-header h1[b-n8z182obsq] {
    color: var(--tg-ink);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px;
}

.subtitle[b-n8z182obsq] {
    color: var(--tg-muted);
    font-size: 14px;
    margin: 0;
}

.date-range select[b-n8z182obsq] {
    background: var(--tg-card);
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--tg-ink);
    font-size: 13px;
}

.loading[b-n8z182obsq] {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.spinner[b-n8z182obsq] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(76, 224, 198, 0.2);
    border-top-color: var(--tg-primary);
    border-radius: 50%;
    animation: spin-b-n8z182obsq 0.8s linear infinite;
}

@keyframes spin-b-n8z182obsq { to { transform: rotate(360deg); } }

.kpi-grid[b-n8z182obsq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.kpi-card[b-n8z182obsq] {
    background: var(--tg-card);
    border: 1px solid rgba(76, 224, 198, 0.1);
    border-radius: var(--tg-radius-sm);
    padding: 20px;
}

.kpi-card.revenue[b-n8z182obsq] {
    border-color: rgba(76, 224, 198, 0.3);
}

.kpi-label[b-n8z182obsq] {
    color: var(--tg-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.kpi-value[b-n8z182obsq] {
    color: var(--tg-ink);
    font-size: 28px;
    font-weight: 700;
}

.kpi-sub[b-n8z182obsq] {
    color: var(--tg-muted);
    font-size: 12px;
    margin-top: 4px;
}

.section-card[b-n8z182obsq] {
    background: var(--tg-card);
    border: 1px solid rgba(76, 224, 198, 0.1);
    border-radius: var(--tg-radius-sm);
    padding: 24px;
    margin-bottom: 20px;
}

.section-card h2[b-n8z182obsq] {
    color: var(--tg-ink);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px;
}

.section-card h2 .badge[b-n8z182obsq] {
    background: rgba(255, 100, 100, 0.15);
    color: #ff6464;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 8px;
    margin-left: 8px;
}

/* Funnel */
.funnel[b-n8z182obsq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.funnel-step[b-n8z182obsq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.funnel-bar[b-n8z182obsq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, rgba(76, 224, 198, 0.15), rgba(76, 224, 198, 0.05));
    border-radius: 8px;
    padding: 12px 16px;
    min-width: 80px;
    transition: width 0.5s ease;
}

.funnel-label[b-n8z182obsq] {
    color: var(--tg-ink);
    font-size: 13px;
    font-weight: 500;
}

.funnel-count[b-n8z182obsq] {
    color: var(--tg-primary);
    font-size: 14px;
    font-weight: 700;
}

.funnel-rate[b-n8z182obsq] {
    color: var(--tg-muted);
    font-size: 12px;
    white-space: nowrap;
    min-width: 40px;
}

/* Table */
.table-scroll[b-n8z182obsq] {
    overflow-x: auto;
}

.metrics-table[b-n8z182obsq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.metrics-table th[b-n8z182obsq] {
    color: var(--tg-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    text-align: right;
    border-bottom: 1px solid rgba(76, 224, 198, 0.1);
}

.metrics-table th:first-child[b-n8z182obsq] {
    text-align: left;
}

.metrics-table td[b-n8z182obsq] {
    color: var(--tg-ink);
    padding: 10px 12px;
    text-align: right;
    border-bottom: 1px solid rgba(76, 224, 198, 0.04);
}

.metrics-table td:first-child[b-n8z182obsq] {
    text-align: left;
    color: var(--tg-muted);
}

.metrics-table td.red[b-n8z182obsq] {
    color: #ff6464;
}

/* Risk list */
.risk-list[b-n8z182obsq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.risk-item[b-n8z182obsq] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(76, 224, 198, 0.06);
}

.risk-info[b-n8z182obsq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.risk-email[b-n8z182obsq] {
    color: var(--tg-ink);
    font-size: 14px;
}

.risk-sub[b-n8z182obsq] {
    color: var(--tg-muted);
    font-size: 12px;
}

.risk-level[b-n8z182obsq] {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.risk-level.medium[b-n8z182obsq] { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
.risk-level.high[b-n8z182obsq] { background: rgba(255, 152, 0, 0.15); color: #ff9800; }
.risk-level.critical[b-n8z182obsq] { background: rgba(255, 100, 100, 0.15); color: #ff6464; }

.risk-signals[b-n8z182obsq] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.signal-tag[b-n8z182obsq] {
    background: rgba(76, 224, 198, 0.08);
    color: var(--tg-muted);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

.access-denied[b-n8z182obsq] {
    text-align: center;
    padding: 80px 20px;
    color: var(--tg-muted);
}

.btn-primary[b-n8z182obsq] {
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 768px) {
    .page-header[b-n8z182obsq] { flex-direction: column; gap: 12px; }
    .kpi-grid[b-n8z182obsq] { grid-template-columns: repeat(2, 1fr); }
    .risk-item[b-n8z182obsq] { flex-wrap: wrap; }
}
/* /Pages/AdminAuditLog.razor.rz.scp.css */
.audit-page[b-za1xnogn4z] { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.page-header[b-za1xnogn4z] { margin-bottom: 24px; }
.page-header h1[b-za1xnogn4z] { color: var(--tg-ink, #fff); font-size: 28px; font-weight: 700; margin: 0 0 4px; }
.subtitle[b-za1xnogn4z] { color: var(--tg-muted, rgba(255,255,255,.5)); font-size: 14px; margin: 0; }

.stats-grid[b-za1xnogn4z] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.stat-card[b-za1xnogn4z] { background: var(--tg-card, rgba(255,255,255,.03)); border: 1px solid rgba(76,224,198,.08); border-radius: 12px; padding: 16px; text-align: center; }
.stat-card.warning[b-za1xnogn4z] { border-color: rgba(255,100,100,.3); }
.stat-value[b-za1xnogn4z] { font-size: 24px; font-weight: 700; color: var(--tg-ink, #fff); }
.stat-label[b-za1xnogn4z] { font-size: 12px; color: var(--tg-muted, rgba(255,255,255,.5)); margin-top: 4px; }

.filter-bar[b-za1xnogn4z] { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filter-input[b-za1xnogn4z] { background: var(--tg-bg-soft, #0a1e2e); border: 1px solid rgba(76,224,198,.12); border-radius: 10px; padding: 8px 14px; color: var(--tg-ink, #fff); font-size: 13px; outline: none; }
.filter-input:focus[b-za1xnogn4z] { border-color: rgba(76,224,198,.3); }
.filter-input[b-za1xnogn4z]::placeholder { color: rgba(255,255,255,.3); }
.date-input[b-za1xnogn4z] { max-width: 150px; }
.admin-toggle[b-za1xnogn4z] { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tg-muted, rgba(255,255,255,.5)); cursor: pointer; }
.btn-search[b-za1xnogn4z] { padding: 8px 18px; background: linear-gradient(135deg, #4ce0c6, #2C727E); color: #02111b; border: none; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; }

.top-actions[b-za1xnogn4z] { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; }
.top-label[b-za1xnogn4z] { font-size: 12px; color: var(--tg-muted, rgba(255,255,255,.5)); margin-right: 4px; }
.action-chip[b-za1xnogn4z] { padding: 4px 10px; background: rgba(76,224,198,.06); border: 1px solid rgba(76,224,198,.12); border-radius: 8px; font-size: 12px; color: rgba(255,255,255,.6); cursor: pointer; transition: all .2s; }
.action-chip:hover[b-za1xnogn4z] { background: rgba(76,224,198,.12); color: #fff; }
.action-chip.active[b-za1xnogn4z] { background: rgba(76,224,198,.15); border-color: rgba(76,224,198,.4); color: #4ce0c6; }
.action-chip.clear[b-za1xnogn4z] { background: rgba(255,100,100,.08); border-color: rgba(255,100,100,.2); color: #ff6464; }
.chip-count[b-za1xnogn4z] { opacity: .5; margin-left: 4px; }

.loading[b-za1xnogn4z] { display: flex; justify-content: center; padding: 60px 0; }
.spinner[b-za1xnogn4z] { width: 36px; height: 36px; border: 3px solid rgba(76,224,198,.2); border-top-color: #4ce0c6; border-radius: 50%; animation: spin-b-za1xnogn4z .8s linear infinite; }
@keyframes spin-b-za1xnogn4z { to { transform: rotate(360deg); } }

.log-table-scroll[b-za1xnogn4z] { overflow-x: auto; }
.log-table[b-za1xnogn4z] { width: 100%; border-collapse: collapse; font-size: 13px; }
.log-table th[b-za1xnogn4z] { color: var(--tg-muted, rgba(255,255,255,.5)); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 10px 10px; text-align: left; border-bottom: 1px solid rgba(76,224,198,.1); white-space: nowrap; }
.log-table td[b-za1xnogn4z] { padding: 10px; color: var(--tg-ink, rgba(255,255,255,.8)); border-bottom: 1px solid rgba(76,224,198,.04); vertical-align: top; }
.log-table tbody tr:hover[b-za1xnogn4z] { background: rgba(76,224,198,.02); }
.failed-row[b-za1xnogn4z] { background: rgba(255,100,100,.03) !important; }
.admin-row td:first-child[b-za1xnogn4z] { border-left: 2px solid rgba(255,165,0,.4); }

.time-cell[b-za1xnogn4z] { white-space: nowrap; }
.log-date[b-za1xnogn4z] { display: block; font-weight: 600; font-size: 12px; }
.log-time[b-za1xnogn4z] { display: block; font-size: 11px; color: var(--tg-muted, rgba(255,255,255,.4)); }

.admin-badge[b-za1xnogn4z] { display: inline-block; padding: 1px 6px; background: rgba(255,165,0,.15); color: #ffa500; border-radius: 4px; font-size: 10px; font-weight: 700; margin-right: 4px; text-transform: uppercase; }
.user-email[b-za1xnogn4z] { font-size: 12px; color: var(--tg-muted, rgba(255,255,255,.5)); }
.action-tag[b-za1xnogn4z] { display: inline-block; padding: 2px 8px; background: rgba(76,224,198,.06); border-radius: 6px; font-size: 12px; font-family: monospace; }
.entity-cell[b-za1xnogn4z] { font-size: 12px; color: var(--tg-muted, rgba(255,255,255,.4)); }

.outcome-badge[b-za1xnogn4z] { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.outcome-badge.success[b-za1xnogn4z] { background: rgba(76,224,198,.1); color: #4ce0c6; }
.outcome-badge.failure[b-za1xnogn4z] { background: rgba(255,100,100,.15); color: #ff6464; }

.details-btn[b-za1xnogn4z] { padding: 2px 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; font-size: 11px; color: rgba(255,255,255,.5); cursor: pointer; }
.details-btn:hover[b-za1xnogn4z] { color: #fff; background: rgba(255,255,255,.08); }

.details-row td[b-za1xnogn4z] { padding: 0 10px 10px !important; border-bottom: 1px solid rgba(76,224,198,.08) !important; }
.details-pre[b-za1xnogn4z] { background: rgba(0,0,0,.3); border-radius: 8px; padding: 12px; font-size: 12px; color: rgba(255,255,255,.6); overflow-x: auto; margin: 0; max-height: 200px; overflow-y: auto; }

.log-count[b-za1xnogn4z] { text-align: center; font-size: 12px; color: var(--tg-muted, rgba(255,255,255,.4)); margin-top: 12px; }
.empty-state[b-za1xnogn4z] { text-align: center; padding: 60px 20px; color: var(--tg-muted, rgba(255,255,255,.5)); }

@media (max-width: 768px) {
    .stats-grid[b-za1xnogn4z] { grid-template-columns: repeat(2, 1fr); }
    .filter-bar[b-za1xnogn4z] { flex-direction: column; }
    .filter-input[b-za1xnogn4z] { width: 100%; }
}
/* /Pages/AdminFeatureFlags.razor.rz.scp.css */
.ff-page[b-d759qq5dhe] { max-width: 900px; margin: 0 auto; padding: 32px 20px; }
.page-header[b-d759qq5dhe] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.page-header h1[b-d759qq5dhe] { color: var(--tg-ink); font-size: 28px; font-weight: 700; margin: 0 0 4px; }
.subtitle[b-d759qq5dhe] { color: var(--tg-muted); font-size: 14px; margin: 0; }
.loading[b-d759qq5dhe] { display: flex; justify-content: center; padding: 60px 0; }
.spinner[b-d759qq5dhe] { width: 36px; height: 36px; border: 3px solid rgba(76,224,198,.2); border-top-color: var(--tg-primary); border-radius: 50%; animation: spin-b-d759qq5dhe .8s linear infinite; }
@keyframes spin-b-d759qq5dhe { to { transform: rotate(360deg); } }

.flags-list[b-d759qq5dhe] { display: flex; flex-direction: column; gap: 12px; }
.flag-card[b-d759qq5dhe] { background: var(--tg-card); border: 1px solid rgba(76,224,198,.1); border-radius: var(--tg-radius-sm); padding: 20px; transition: border-color .2s; }
.flag-card.enabled[b-d759qq5dhe] { border-left: 3px solid var(--tg-primary); }
.flag-card.disabled[b-d759qq5dhe] { border-left: 3px solid rgba(158,158,158,.3); opacity: .7; }
.flag-header[b-d759qq5dhe] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.flag-info[b-d759qq5dhe] { display: flex; align-items: center; gap: 12px; }
.flag-key[b-d759qq5dhe] { background: rgba(76,224,198,.08); color: var(--tg-primary); padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.flag-name[b-d759qq5dhe] { color: var(--tg-ink); font-size: 15px; font-weight: 500; }
.flag-desc[b-d759qq5dhe] { color: var(--tg-muted); font-size: 13px; margin: 0 0 12px; }
.flag-meta[b-d759qq5dhe] { display: flex; gap: 24px; flex-wrap: wrap; }
.meta-item[b-d759qq5dhe] { display: flex; align-items: center; gap: 8px; }
.meta-label[b-d759qq5dhe] { color: var(--tg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.meta-value[b-d759qq5dhe] { color: var(--tg-ink); font-size: 13px; }
.rollout-bar[b-d759qq5dhe] { width: 80px; height: 6px; background: rgba(76,224,198,.1); border-radius: 3px; overflow: hidden; }
.rollout-fill[b-d759qq5dhe] { height: 100%; background: var(--tg-primary); border-radius: 3px; transition: width .3s; }

.toggle[b-d759qq5dhe] { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle input[b-d759qq5dhe] { opacity: 0; width: 0; height: 0; }
.toggle-slider[b-d759qq5dhe] { position: absolute; cursor: pointer; inset: 0; background: rgba(76,224,198,.15); border-radius: 12px; transition: .3s; }
.toggle-slider[b-d759qq5dhe]::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: var(--tg-muted); border-radius: 50%; transition: .3s; }
.toggle input:checked + .toggle-slider[b-d759qq5dhe] { background: var(--tg-primary); }
.toggle input:checked + .toggle-slider[b-d759qq5dhe]::before { transform: translateX(20px); background: #02111b; }

.modal-backdrop[b-d759qq5dhe] { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); }
.modal-card[b-d759qq5dhe] { background: var(--tg-bg-soft); border: 1px solid rgba(76,224,198,.2); border-radius: 18px; padding: 28px; width: 480px; max-width: 90vw; }
.modal-card h2[b-d759qq5dhe] { color: var(--tg-ink); font-size: 20px; margin: 0 0 20px; }
.form-group[b-d759qq5dhe] { margin-bottom: 16px; }
.form-group label[b-d759qq5dhe] { display: block; color: var(--tg-ink); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-group input[type="text"][b-d759qq5dhe], .form-group input[type="number"][b-d759qq5dhe] { width: 100%; background: var(--tg-card); border: 1px solid rgba(76,224,198,.15); border-radius: 10px; padding: 10px 14px; color: var(--tg-ink); font-size: 14px; outline: none; box-sizing: border-box; }
.form-group input:focus[b-d759qq5dhe] { border-color: var(--tg-primary); }
.form-row[b-d759qq5dhe] { display: flex; gap: 16px; }
.form-row .form-group[b-d759qq5dhe] { flex: 1; }
.toggle-label[b-d759qq5dhe] { display: flex; align-items: center; gap: 8px; color: var(--tg-ink); font-size: 14px; cursor: pointer; }
.toggle-label input[b-d759qq5dhe] { width: 16px; height: 16px; accent-color: var(--tg-primary); }
.modal-actions[b-d759qq5dhe] { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.btn-primary[b-d759qq5dhe] { background: linear-gradient(135deg,#4ce0c6,#2C727E); color: #02111b; border: none; border-radius: 12px; padding: 10px 22px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-primary:disabled[b-d759qq5dhe] { opacity: .5; cursor: not-allowed; }
.btn-secondary[b-d759qq5dhe] { background: transparent; border: 1px solid rgba(76,224,198,.2); border-radius: 12px; padding: 10px 22px; color: var(--tg-muted); font-size: 14px; cursor: pointer; }
.empty-state[b-d759qq5dhe] { text-align: center; color: var(--tg-muted); padding: 60px 0; font-size: 15px; }
/* /Pages/AdminPromoCodes.razor.rz.scp.css */
.promo-page[b-n7v711ejif] { max-width: 960px; margin: 0 auto; padding: 32px 20px; }
.page-header[b-n7v711ejif] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.page-header h1[b-n7v711ejif] { color: var(--tg-ink); font-size: 28px; font-weight: 700; margin: 0 0 4px; }
.subtitle[b-n7v711ejif] { color: var(--tg-muted); font-size: 14px; margin: 0; }
.loading[b-n7v711ejif] { display: flex; justify-content: center; padding: 60px 0; }
.spinner[b-n7v711ejif] { width: 36px; height: 36px; border: 3px solid rgba(76,224,198,.2); border-top-color: var(--tg-primary); border-radius: 50%; animation: spin-b-n7v711ejif .8s linear infinite; }
@keyframes spin-b-n7v711ejif { to { transform: rotate(360deg); } }

.table-container[b-n7v711ejif] { overflow-x: auto; }
.promo-table[b-n7v711ejif] { width: 100%; border-collapse: collapse; background: var(--tg-card); border-radius: 14px; overflow: hidden; }
.promo-table th[b-n7v711ejif] { color: var(--tg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(76,224,198,.1); }
.promo-table td[b-n7v711ejif] { color: var(--tg-ink); font-size: 13px; padding: 14px 16px; border-bottom: 1px solid rgba(76,224,198,.04); }
.promo-table tr.inactive td[b-n7v711ejif] { opacity: .5; }
.promo-table tr:last-child td[b-n7v711ejif] { border-bottom: none; }

.code-badge[b-n7v711ejif] { background: rgba(76,224,198,.08); color: var(--tg-primary); padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.trial-ext[b-n7v711ejif] { display: inline-block; background: rgba(156,213,255,.1); color: var(--tg-accent-2); padding: 2px 8px; border-radius: 4px; font-size: 11px; margin-left: 6px; }
.plans-cell[b-n7v711ejif] { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tg-muted); font-size: 12px; }
.status-badge[b-n7v711ejif] { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.status-badge.active[b-n7v711ejif] { background: rgba(76,224,198,.15); color: var(--tg-primary); }
.status-badge.inactive[b-n7v711ejif] { background: rgba(158,158,158,.15); color: #9e9e9e; }
.btn-deactivate[b-n7v711ejif] { background: transparent; border: 1px solid rgba(255,100,100,.3); border-radius: 8px; padding: 4px 12px; color: #ff6464; font-size: 12px; cursor: pointer; }
.btn-deactivate:hover[b-n7v711ejif] { background: rgba(255,100,100,.1); }

.modal-backdrop[b-n7v711ejif] { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); }
.modal-card[b-n7v711ejif] { background: var(--tg-bg-soft); border: 1px solid rgba(76,224,198,.2); border-radius: 18px; padding: 28px; width: 520px; max-width: 90vw; }
.modal-card h2[b-n7v711ejif] { color: var(--tg-ink); font-size: 20px; margin: 0 0 20px; }
.form-group[b-n7v711ejif] { margin-bottom: 16px; }
.form-group label[b-n7v711ejif] { display: block; color: var(--tg-ink); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-group input[b-n7v711ejif] { width: 100%; background: var(--tg-card); border: 1px solid rgba(76,224,198,.15); border-radius: 10px; padding: 10px 14px; color: var(--tg-ink); font-size: 14px; outline: none; box-sizing: border-box; }
.form-group input:focus[b-n7v711ejif] { border-color: var(--tg-primary); }
.form-row[b-n7v711ejif] { display: flex; gap: 16px; }
.form-row .form-group[b-n7v711ejif] { flex: 1; }
.modal-actions[b-n7v711ejif] { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.error-msg[b-n7v711ejif] { color: #ff6464; font-size: 13px; margin-top: 12px; text-align: center; }

.btn-primary[b-n7v711ejif] { background: linear-gradient(135deg,#4ce0c6,#2C727E); color: #02111b; border: none; border-radius: 12px; padding: 10px 22px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-primary:disabled[b-n7v711ejif] { opacity: .5; cursor: not-allowed; }
.btn-secondary[b-n7v711ejif] { background: transparent; border: 1px solid rgba(76,224,198,.2); border-radius: 12px; padding: 10px 22px; color: var(--tg-muted); font-size: 14px; cursor: pointer; }
.empty-state[b-n7v711ejif] { text-align: center; color: var(--tg-muted); padding: 60px 0; }
/* /Pages/AdminSubscriptionAnalytics.razor.rz.scp.css */
.sub-analytics-page[b-u7vj8vjyik] { max-width: 1000px; margin: 0 auto; padding: 32px 20px; }
.page-header[b-u7vj8vjyik] { margin-bottom: 28px; }
.page-header h1[b-u7vj8vjyik] { color: var(--tg-ink); font-size: 28px; font-weight: 700; margin: 0 0 4px; }
.subtitle[b-u7vj8vjyik] { color: var(--tg-muted); font-size: 14px; margin: 0; }
.loading[b-u7vj8vjyik] { display: flex; justify-content: center; padding: 60px 0; }
.spinner[b-u7vj8vjyik] { width: 36px; height: 36px; border: 3px solid rgba(76,224,198,.2); border-top-color: var(--tg-primary); border-radius: 50%; animation: spin-b-u7vj8vjyik .8s linear infinite; }
@keyframes spin-b-u7vj8vjyik { to { transform: rotate(360deg); } }

.kpi-grid[b-u7vj8vjyik] { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kpi-card[b-u7vj8vjyik] { background: var(--tg-card); border: 1px solid rgba(76,224,198,.1); border-radius: var(--tg-radius-sm); padding: 20px; }
.kpi-card.revenue[b-u7vj8vjyik] { border-color: rgba(76,224,198,.3); background: rgba(76,224,198,.04); }
.kpi-card.warning[b-u7vj8vjyik] { border-color: rgba(255,100,100,.3); }
.kpi-label[b-u7vj8vjyik] { color: var(--tg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.kpi-value[b-u7vj8vjyik] { color: var(--tg-ink); font-size: 26px; font-weight: 700; }
.kpi-sub[b-u7vj8vjyik] { color: var(--tg-muted); font-size: 12px; margin-top: 4px; }

.section-card[b-u7vj8vjyik] { background: var(--tg-card); border: 1px solid rgba(76,224,198,.1); border-radius: var(--tg-radius-sm); padding: 24px; margin-bottom: 20px; }
.section-card h2[b-u7vj8vjyik] { color: var(--tg-ink); font-size: 18px; font-weight: 600; margin: 0 0 18px; }

.tier-list[b-u7vj8vjyik] { display: flex; flex-direction: column; gap: 12px; }
.tier-row[b-u7vj8vjyik] { display: flex; align-items: center; gap: 16px; }
.tier-name[b-u7vj8vjyik] { width: 90px; flex-shrink: 0; }
.tier-badge[b-u7vj8vjyik] { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; text-transform: capitalize; background: rgba(76,224,198,.1); color: var(--tg-primary); }
.tier-badge.pro[b-u7vj8vjyik] { background: rgba(255,193,7,.15); color: #ffc107; }
.tier-badge.plus[b-u7vj8vjyik] { background: rgba(156,213,255,.15); color: #9cd5ff; }
.tier-badge.enterprise[b-u7vj8vjyik] { background: rgba(244,196,215,.15); color: #f4c4d7; }
.tier-bar-container[b-u7vj8vjyik] { flex: 1; height: 8px; background: rgba(76,224,198,.08); border-radius: 4px; overflow: hidden; }
.tier-bar[b-u7vj8vjyik] { height: 100%; background: var(--tg-primary); border-radius: 4px; transition: width .5s; min-width: 2px; }
.tier-stats[b-u7vj8vjyik] { display: flex; gap: 12px; min-width: 200px; justify-content: flex-end; }
.tier-count[b-u7vj8vjyik] { color: var(--tg-ink); font-size: 13px; }
.tier-pct[b-u7vj8vjyik] { color: var(--tg-muted); font-size: 12px; }
.tier-mrr[b-u7vj8vjyik] { color: var(--tg-primary); font-size: 12px; font-weight: 600; }

.revenue-table-scroll[b-u7vj8vjyik] { overflow-x: auto; }
.revenue-table[b-u7vj8vjyik] { width: 100%; border-collapse: collapse; font-size: 13px; }
.revenue-table th[b-u7vj8vjyik] { color: var(--tg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 10px 12px; text-align: right; border-bottom: 1px solid rgba(76,224,198,.1); }
.revenue-table th:first-child[b-u7vj8vjyik] { text-align: left; }
.revenue-table td[b-u7vj8vjyik] { color: var(--tg-ink); padding: 10px 12px; text-align: right; border-bottom: 1px solid rgba(76,224,198,.04); }
.revenue-table td:first-child[b-u7vj8vjyik] { text-align: left; color: var(--tg-muted); }
.revenue-cell[b-u7vj8vjyik] { color: var(--tg-primary); font-weight: 600; }
.green[b-u7vj8vjyik] { color: #4caf50; }
.red[b-u7vj8vjyik] { color: #ff6464; }

.dist-grid[b-u7vj8vjyik] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dist-card[b-u7vj8vjyik] { text-align: center; padding: 16px; background: rgba(76,224,198,.04); border-radius: 12px; }
.dist-value[b-u7vj8vjyik] { color: var(--tg-ink); font-size: 24px; font-weight: 700; }
.dist-label[b-u7vj8vjyik] { color: var(--tg-muted); font-size: 12px; margin-top: 4px; }

/* Churn Prevention - At-Risk Users */
.section-header[b-u7vj8vjyik] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.section-header h2[b-u7vj8vjyik] { margin: 0 !important; }
.risk-count[b-u7vj8vjyik] { font-size: 13px; color: #ff8c42; font-weight: 600; }
.risk-table-scroll[b-u7vj8vjyik] { overflow-x: auto; }

.user-cell[b-u7vj8vjyik] { display: flex; flex-direction: column; }
.user-name[b-u7vj8vjyik] { font-weight: 600; color: var(--tg-ink); }
.user-email[b-u7vj8vjyik] { font-size: 11px; color: var(--tg-muted); }

.risk-badge[b-u7vj8vjyik] { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.risk-badge.risk-medium[b-u7vj8vjyik] { background: rgba(255,165,0,.15); color: #ffa500; }
.risk-badge.risk-high[b-u7vj8vjyik] { background: rgba(255,100,100,.15); color: #ff6464; }
.risk-badge.risk-critical[b-u7vj8vjyik] { background: rgba(255,50,50,.2); color: #ff3232; }
.risk-badge.risk-low[b-u7vj8vjyik] { background: rgba(76,224,198,.1); color: #4ce0c6; }

.risk-signals[b-u7vj8vjyik] { display: flex; flex-wrap: wrap; gap: 4px; }
.signal-tag[b-u7vj8vjyik] { display: inline-block; padding: 2px 8px; background: rgba(255,255,255,.05); border-radius: 6px; font-size: 11px; color: var(--tg-muted); white-space: nowrap; }

.orange[b-u7vj8vjyik] { color: #ff8c42; }

/* Empty state */
.empty-state[b-u7vj8vjyik] { text-align: center; padding: 60px 20px; color: var(--tg-muted); }
.btn-primary[b-u7vj8vjyik] { margin-top: 16px; padding: 10px 24px; background: linear-gradient(135deg, #4ce0c6, #2C727E); color: #02111b; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; }

@media (max-width: 768px) {
    .kpi-grid[b-u7vj8vjyik] { grid-template-columns: repeat(2, 1fr); }
    .tier-row[b-u7vj8vjyik] { flex-wrap: wrap; }
    .tier-stats[b-u7vj8vjyik] { min-width: auto; }
    .dist-grid[b-u7vj8vjyik] { grid-template-columns: repeat(2, 1fr); }
}
/* /Pages/AdminUsers.razor.rz.scp.css */
.users-page[b-wru5pvfwc7] { max-width: 1000px; margin: 0 auto; padding: 32px 20px; }
.page-header[b-wru5pvfwc7] { margin-bottom: 24px; }
.page-header h1[b-wru5pvfwc7] { color: var(--tg-ink); font-size: 28px; font-weight: 700; margin: 0 0 4px; }
.subtitle[b-wru5pvfwc7] { color: var(--tg-muted); font-size: 14px; margin: 0; }

.search-bar[b-wru5pvfwc7] { display: flex; gap: 10px; margin-bottom: 20px; }
.search-bar input[b-wru5pvfwc7] { flex: 1; background: var(--tg-card); border: 1px solid rgba(76,224,198,.15); border-radius: 10px; padding: 10px 14px; color: var(--tg-ink); font-size: 14px; outline: none; }
.search-bar input:focus[b-wru5pvfwc7] { border-color: var(--tg-primary); }
.search-bar input[b-wru5pvfwc7]::placeholder { color: var(--tg-muted); opacity: .6; }
.search-bar select[b-wru5pvfwc7] { background: var(--tg-card); border: 1px solid rgba(76,224,198,.15); border-radius: 10px; padding: 10px 14px; color: var(--tg-ink); font-size: 13px; }
.btn-search[b-wru5pvfwc7] { background: linear-gradient(135deg,#4ce0c6,#2C727E); color: #02111b; border: none; border-radius: 10px; padding: 10px 20px; font-weight: 600; cursor: pointer; }

.loading[b-wru5pvfwc7] { display: flex; justify-content: center; padding: 60px 0; }
.spinner[b-wru5pvfwc7] { width: 36px; height: 36px; border: 3px solid rgba(76,224,198,.2); border-top-color: var(--tg-primary); border-radius: 50%; animation: spin-b-wru5pvfwc7 .8s linear infinite; }
@keyframes spin-b-wru5pvfwc7 { to { transform: rotate(360deg); } }

.results-info[b-wru5pvfwc7] { color: var(--tg-muted); font-size: 13px; margin-bottom: 12px; }
.table-container[b-wru5pvfwc7] { overflow-x: auto; }
.users-table[b-wru5pvfwc7] { width: 100%; border-collapse: collapse; background: var(--tg-card); border-radius: 14px; overflow: hidden; }
.users-table th[b-wru5pvfwc7] { color: var(--tg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(76,224,198,.1); }
.users-table td[b-wru5pvfwc7] { color: var(--tg-ink); font-size: 13px; padding: 12px 14px; border-bottom: 1px solid rgba(76,224,198,.04); }
.user-name[b-wru5pvfwc7] { font-weight: 500; }
.user-email[b-wru5pvfwc7] { color: var(--tg-muted); }
.provider[b-wru5pvfwc7] { color: var(--tg-muted); font-size: 12px; }
.date[b-wru5pvfwc7] { color: var(--tg-muted); font-size: 12px; }
.tier-badge[b-wru5pvfwc7] { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: capitalize; background: rgba(76,224,198,.1); color: var(--tg-primary); }
.tier-badge.pro[b-wru5pvfwc7] { background: rgba(255,193,7,.15); color: #ffc107; }
.tier-badge.plus[b-wru5pvfwc7] { background: rgba(156,213,255,.15); color: #9cd5ff; }
.tier-badge.enterprise[b-wru5pvfwc7] { background: rgba(244,196,215,.15); color: #f4c4d7; }
.tier-badge.deactivated[b-wru5pvfwc7] { background: rgba(255,100,100,.15); color: #ff6464; }
.btn-detail[b-wru5pvfwc7] { background: transparent; border: 1px solid rgba(76,224,198,.2); border-radius: 8px; padding: 4px 12px; color: var(--tg-primary); font-size: 12px; cursor: pointer; }

.pagination[b-wru5pvfwc7] { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.pagination button[b-wru5pvfwc7] { background: var(--tg-card); border: 1px solid rgba(76,224,198,.2); border-radius: 8px; padding: 8px 16px; color: var(--tg-ink); cursor: pointer; }
.pagination button:disabled[b-wru5pvfwc7] { opacity: .4; cursor: not-allowed; }
.pagination span[b-wru5pvfwc7] { color: var(--tg-muted); font-size: 13px; }

.modal-backdrop[b-wru5pvfwc7] { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 1000; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-card[b-wru5pvfwc7] { background: var(--tg-bg-soft); border: 1px solid rgba(76,224,198,.2); border-radius: 18px; padding: 28px; width: 560px; max-width: 90vw; }
.modal-card.large[b-wru5pvfwc7] { width: 640px; }
.modal-header[b-wru5pvfwc7] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h2[b-wru5pvfwc7] { color: var(--tg-ink); font-size: 20px; margin: 0; }
.modal-close[b-wru5pvfwc7] { background: transparent; border: none; color: var(--tg-muted); cursor: pointer; }

.detail-grid[b-wru5pvfwc7] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; }
.detail-item[b-wru5pvfwc7] { display: flex; flex-direction: column; gap: 2px; }
.detail-item .label[b-wru5pvfwc7] { color: var(--tg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.detail-item .value[b-wru5pvfwc7] { color: var(--tg-ink); font-size: 14px; font-weight: 500; }

.detail-actions[b-wru5pvfwc7] { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-actions select[b-wru5pvfwc7] { background: var(--tg-card); border: 1px solid rgba(76,224,198,.15); border-radius: 10px; padding: 8px 12px; color: var(--tg-ink); font-size: 13px; }
.btn-primary[b-wru5pvfwc7] { background: linear-gradient(135deg,#4ce0c6,#2C727E); color: #02111b; border: none; border-radius: 10px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-primary:disabled[b-wru5pvfwc7] { opacity: .5; cursor: not-allowed; }
.btn-danger[b-wru5pvfwc7] { background: transparent; border: 1px solid rgba(255,100,100,.3); border-radius: 10px; padding: 8px 18px; color: #ff6464; font-size: 13px; cursor: pointer; }
.action-msg[b-wru5pvfwc7] { color: var(--tg-primary); font-size: 13px; margin-top: 12px; }

@media (max-width: 600px) {
    .search-bar[b-wru5pvfwc7] { flex-direction: column; }
    .detail-grid[b-wru5pvfwc7] { grid-template-columns: 1fr; }
}
/* /Pages/Analytics.razor.rz.scp.css */
/* Analytics.razor.css - Scoped styles using TheraGen design system */

/* ============ Container & Layout ============ */
.analytics-container[b-1r1ljvtqc9] {
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    animation: fadeInUp-b-1r1ljvtqc9 0.6s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
}

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

/* ============ Page Header ============ */
.page-header[b-1r1ljvtqc9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.header-content h1[b-1r1ljvtqc9] {
    font-size: var(--tg-h1, clamp(1.5rem, 2.4vw, 2rem));
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
    margin: 0 0 0.25rem 0;
}

.subtitle[b-1r1ljvtqc9] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
    margin: 0;
}

/* ============ Section Titles ============ */
.section-title[b-1r1ljvtqc9] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
    margin: 0 0 0.75rem 0;
}

/* ============ Loading State ============ */
.loading-state[b-1r1ljvtqc9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    color: var(--tg-muted, #a9cdd1);
}

.loader[b-1r1ljvtqc9] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--tg-line, rgba(255,255,255,.08));
    border-top-color: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    animation: spin-b-1r1ljvtqc9 1s linear infinite;
    margin-bottom: 0.75rem;
}

@keyframes spin-b-1r1ljvtqc9 {
    to { transform: rotate(360deg); }
}

.error-state[b-1r1ljvtqc9] {
    text-align: center;
    padding: 3rem 2rem;
    color: #f87171;
}

.error-state p[b-1r1ljvtqc9] {
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

/* ============ Empty State ============ */
.empty-state[b-1r1ljvtqc9] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--tg-muted, #a9cdd1);
}

.empty-icon[b-1r1ljvtqc9] {
    margin-bottom: 0.75rem;
}

.empty-icon svg[b-1r1ljvtqc9],
.empty-state svg[b-1r1ljvtqc9] {
    color: rgba(76, 224, 198, 0.2);
}

.empty-state p[b-1r1ljvtqc9] {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    color: var(--tg-ink, #ecf8f5);
}

.help-text[b-1r1ljvtqc9] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}

/* ============ Statistics Grid ============ */
.stats-grid[b-1r1ljvtqc9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.stat-card[b-1r1ljvtqc9] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius-sm, 16px);
    padding: 0.75rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.stat-card:hover[b-1r1ljvtqc9] {
    transform: translateY(-2px);
    border-color: rgba(76, 224, 198, 0.2);
}

.stat-icon[b-1r1ljvtqc9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--tg-muted, #a9cdd1);
}

.stat-icon.active[b-1r1ljvtqc9] { color: var(--tg-accent-2, #9cd5ff); }
.stat-icon.completed[b-1r1ljvtqc9] { color: #34d399; }
.stat-icon.rate[b-1r1ljvtqc9] { color: var(--tg-primary, #4ce0c6); }
.stat-icon.milestones[b-1r1ljvtqc9] { color: #fbbf24; }

.stat-value[b-1r1ljvtqc9] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
    line-height: 1.2;
}

.stat-label[b-1r1ljvtqc9] {
    font-size: 0.7rem;
    color: var(--tg-muted, #a9cdd1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ============ Today's Activity Card ============ */
.today-card[b-1r1ljvtqc9] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.activity-row[b-1r1ljvtqc9] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-around;
}

.activity-item[b-1r1ljvtqc9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--tg-muted, #a9cdd1);
    min-width: 80px;
}

.activity-item svg[b-1r1ljvtqc9] {
    color: var(--tg-primary, #4ce0c6);
    opacity: 0.7;
}

.activity-count[b-1r1ljvtqc9] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
    line-height: 1.2;
}

.activity-label[b-1r1ljvtqc9] {
    font-size: 0.75rem;
    color: var(--tg-muted, #a9cdd1);
    text-align: center;
}

.no-activity[b-1r1ljvtqc9] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
    text-align: center;
    margin: 0;
    padding: 0.5rem 0;
}

/* ============ Progress vs Baseline ============ */
.progress-section[b-1r1ljvtqc9] {
    margin-bottom: 1.25rem;
}

.progress-grid[b-1r1ljvtqc9] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.comparison-card[b-1r1ljvtqc9] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    text-align: center;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.comparison-card:hover[b-1r1ljvtqc9] {
    transform: translateY(-2px);
    border-color: rgba(76, 224, 198, 0.2);
}

.comparison-label[b-1r1ljvtqc9] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tg-muted, #a9cdd1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.metric-value[b-1r1ljvtqc9] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.metric-baseline[b-1r1ljvtqc9] {
    font-size: 0.8rem;
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 0.5rem;
}

.metric-change[b-1r1ljvtqc9] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.metric-change.improved[b-1r1ljvtqc9] {
    color: #34d399;
    background: rgba(52, 211, 153, 0.1);
}

.metric-change.declined[b-1r1ljvtqc9] {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

.metric-change.stable[b-1r1ljvtqc9] {
    color: var(--tg-muted, #a9cdd1);
    background: rgba(255, 255, 255, 0.05);
}

.change-arrow[b-1r1ljvtqc9] {
    font-size: 1rem;
    line-height: 1;
}

/* Baseline Prompt */
.baseline-prompt[b-1r1ljvtqc9] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    padding: 2rem;
    text-align: center;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.baseline-prompt svg[b-1r1ljvtqc9] {
    color: rgba(76, 224, 198, 0.3);
    margin-bottom: 0.75rem;
}

.baseline-prompt p[b-1r1ljvtqc9] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
}

/* ============ Activity Heatmap ============ */
.heatmap-section[b-1r1ljvtqc9] {
    margin-bottom: 1.25rem;
}

.heatmap-wrapper[b-1r1ljvtqc9] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    overflow-x: auto;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.heatmap-grid[b-1r1ljvtqc9] {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 3px;
    min-width: fit-content;
}

.heatmap-cell[b-1r1ljvtqc9] {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    transition: opacity 0.15s ease;
}

.heatmap-cell:hover[b-1r1ljvtqc9] {
    opacity: 0.8;
}

.heatmap-cell.level-0[b-1r1ljvtqc9] { background: rgba(255, 255, 255, .03); }
.heatmap-cell.level-1[b-1r1ljvtqc9] { background: rgba(76, 224, 198, .15); }
.heatmap-cell.level-2[b-1r1ljvtqc9] { background: rgba(76, 224, 198, .35); }
.heatmap-cell.level-3[b-1r1ljvtqc9] { background: rgba(76, 224, 198, .55); }
.heatmap-cell.level-4[b-1r1ljvtqc9] { background: rgba(76, 224, 198, .85); }

.heatmap-legend[b-1r1ljvtqc9] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 0.75rem;
    justify-content: flex-end;
}

.heatmap-legend .heatmap-cell[b-1r1ljvtqc9] {
    width: 12px;
    height: 12px;
}

.legend-label[b-1r1ljvtqc9] {
    font-size: 0.7rem;
    color: var(--tg-muted, #a9cdd1);
    margin: 0 0.25rem;
}

/* ============ Weekly Summaries ============ */
.weekly-section[b-1r1ljvtqc9] {
    margin-bottom: 1.25rem;
}

.weeks-list[b-1r1ljvtqc9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.week-card[b-1r1ljvtqc9] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    padding: 1rem 1.25rem;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.week-card:hover[b-1r1ljvtqc9] {
    transform: translateY(-2px);
    border-color: rgba(76, 224, 198, 0.2);
}

.week-header[b-1r1ljvtqc9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.week-range[b-1r1ljvtqc9] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
}

.trend-badge[b-1r1ljvtqc9] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.trend-badge.improving[b-1r1ljvtqc9] {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

.trend-badge.stable[b-1r1ljvtqc9] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--tg-muted, #a9cdd1);
}

.trend-badge.declining[b-1r1ljvtqc9] {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.week-stats[b-1r1ljvtqc9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.week-stat[b-1r1ljvtqc9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.week-stat-value[b-1r1ljvtqc9] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
    line-height: 1.2;
}

.week-stat-value.positive[b-1r1ljvtqc9] {
    color: #34d399;
}

.week-stat-value.negative[b-1r1ljvtqc9] {
    color: #f87171;
}

.week-stat-label[b-1r1ljvtqc9] {
    font-size: 0.68rem;
    color: var(--tg-muted, #a9cdd1);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

/* ============ Milestones Feed ============ */
.milestones-section[b-1r1ljvtqc9] {
    margin-bottom: 1.25rem;
}

.milestones-list[b-1r1ljvtqc9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.milestone-item[b-1r1ljvtqc9] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius-sm, 16px);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.milestone-item:hover[b-1r1ljvtqc9] {
    border-color: rgba(76, 224, 198, 0.2);
    background: rgba(5, 18, 26, 0.9);
}

.milestone-item:focus-visible[b-1r1ljvtqc9] {
    outline: none;
    box-shadow: var(--tg-focus);
}

.milestone-item.unviewed[b-1r1ljvtqc9] {
    border-color: rgba(76, 224, 198, 0.35);
    background: rgba(76, 224, 198, 0.04);
}

.milestone-dot[b-1r1ljvtqc9] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tg-primary, #4ce0c6);
    flex-shrink: 0;
    margin-top: 0.35rem;
}

.milestone-item.unviewed .milestone-dot[b-1r1ljvtqc9] {
    box-shadow: 0 0 8px rgba(76, 224, 198, 0.5);
}

.milestone-content[b-1r1ljvtqc9] {
    flex: 1;
    min-width: 0;
}

.milestone-header-row[b-1r1ljvtqc9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}

.milestone-title[b-1r1ljvtqc9] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
}

.milestone-new[b-1r1ljvtqc9] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    background: rgba(76, 224, 198, 0.2);
    color: var(--tg-primary, #4ce0c6);
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.milestone-description[b-1r1ljvtqc9] {
    font-size: 0.82rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.4;
    margin: 0.15rem 0 0 0;
}

.milestone-date[b-1r1ljvtqc9] {
    font-size: 0.78rem;
    color: var(--tg-muted, #a9cdd1);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ============ Buttons ============ */
.btn-primary[b-1r1ljvtqc9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    font-weight: 800;
    font-size: 0.9rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 20px rgba(76, 224, 198, 0.25);
}

.btn-primary:hover[b-1r1ljvtqc9] {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(76, 224, 198, 0.35);
}

.btn-primary:disabled[b-1r1ljvtqc9] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-1r1ljvtqc9] {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-1r1ljvtqc9] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tg-ink, #ecf8f5);
}

/* ============ Responsive ============ */
@media (max-width: 640px) {
    .stats-grid[b-1r1ljvtqc9] {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-header[b-1r1ljvtqc9] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .progress-grid[b-1r1ljvtqc9] {
        grid-template-columns: 1fr;
    }

    .week-stats[b-1r1ljvtqc9] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .activity-row[b-1r1ljvtqc9] {
        gap: 0.75rem;
    }

    .activity-item[b-1r1ljvtqc9] {
        min-width: 60px;
    }

    .heatmap-wrapper[b-1r1ljvtqc9] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .milestone-item[b-1r1ljvtqc9] {
        flex-wrap: wrap;
    }

    .milestone-date[b-1r1ljvtqc9] {
        width: 100%;
        padding-left: calc(10px + 0.75rem);
    }
}

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce) {
    .analytics-container[b-1r1ljvtqc9] { animation: none; }
    .stat-card[b-1r1ljvtqc9], .comparison-card[b-1r1ljvtqc9], .week-card[b-1r1ljvtqc9], .milestone-item[b-1r1ljvtqc9] { transition: none; }
}
/* /Pages/Archive.razor.rz.scp.css */
/* Archive.razor.css — TheraGen design-token refresh */

.archive-container[b-fki2ztduni] {
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    animation: archiveFadeIn-b-fki2ztduni .5s var(--tg-ease-soft, ease-out) both;
}

@keyframes archiveFadeIn-b-fki2ztduni {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

/* ---- Header ---- */
.page-header[b-fki2ztduni] { margin-bottom: 1.5rem; }

.page-header h1[b-fki2ztduni] {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 700;
    color: var(--tg-ink);
    margin: 0;
}

.subtitle[b-fki2ztduni] {
    font-size: .85rem;
    color: var(--tg-muted);
    margin: .25rem 0 0;
}

/* ---- Loading / Error / Empty ---- */
.loading-state[b-fki2ztduni], .empty-state[b-fki2ztduni] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--tg-muted);
    text-align: center;
    gap: .75rem;
}

.loader[b-fki2ztduni] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(76,224,198,.15);
    border-top-color: var(--tg-primary);
    border-radius: 50%;
    animation: spin-b-fki2ztduni .8s linear infinite;
}

@keyframes spin-b-fki2ztduni { to { transform: rotate(360deg); } }

.empty-icon[b-fki2ztduni] { color: rgba(107,143,150,.8); margin-bottom: .5rem; }

.empty-state p[b-fki2ztduni] { margin: 0; font-size: .9rem; }
.help-text[b-fki2ztduni] { font-size: .8rem; color: rgba(107,143,150,.8); }

/* ---- Detail Header ---- */
.chat-detail-header[b-fki2ztduni] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.chat-detail-date[b-fki2ztduni] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: rgba(107,143,150,.85);
}

.chat-detail-date svg[b-fki2ztduni] { opacity: .8; }

/* ---- Back Button ---- */
.btn-back[b-fki2ztduni] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: none;
    color: var(--tg-primary);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition: opacity .15s;
}

.btn-back:hover[b-fki2ztduni] { text-decoration: underline; }

/* ---- Search Bar ---- */
.search-bar[b-fki2ztduni] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 16px;
    padding: .85rem;
    margin-bottom: .75rem;
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: flex-end;
    animation: cardSlideUp-b-fki2ztduni .45s var(--tg-ease-soft, ease-out) .05s both;
}

.search-input-wrapper[b-fki2ztduni] {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.search-icon[b-fki2ztduni] {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(107,143,150,.8);
    pointer-events: none;
}

.search-input[b-fki2ztduni] {
    width: 100%;
    padding: .55rem .75rem .55rem 2.2rem;
    border-radius: 10px;
    border: 1px solid var(--tg-line);
    background: rgba(5,18,26,.6);
    color: var(--tg-ink);
    font-size: .82rem;
    outline: none;
    transition: border-color .18s var(--tg-ease);
}

.search-input:focus[b-fki2ztduni] { border-color: var(--tg-primary); }

.date-filters[b-fki2ztduni] {
    display: flex;
    gap: .5rem;
}

.date-field[b-fki2ztduni] { display: flex; flex-direction: column; gap: .15rem; }

.date-field label[b-fki2ztduni] {
    font-size: .65rem;
    color: rgba(107,143,150,.8);
    font-weight: 600;
}

.date-field input[b-fki2ztduni] {
    padding: .45rem .6rem;
    border-radius: 8px;
    border: 1px solid var(--tg-line);
    background: rgba(5,18,26,.6);
    color: var(--tg-ink);
    font-size: .78rem;
    outline: none;
    transition: border-color .18s var(--tg-ease);
}

.date-field input:focus[b-fki2ztduni] { border-color: var(--tg-primary); }

.result-count[b-fki2ztduni] {
    font-size: .75rem;
    color: rgba(107,143,150,.8);
    margin: 0 0 .75rem;
}

/* ---- Chat List ---- */
.chat-list[b-fki2ztduni] { display: flex; flex-direction: column; gap: .5rem; }

.chat-card[b-fki2ztduni] {
    display: flex;
    align-items: stretch;
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .22s var(--tg-ease), transform .22s var(--tg-ease), box-shadow .22s var(--tg-ease);
    animation: cardSlideUp-b-fki2ztduni .4s var(--tg-ease-soft, ease-out) both;
}

.chat-card:hover[b-fki2ztduni] {
    border-color: rgba(76,224,198,.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

.chat-card-body:focus-visible[b-fki2ztduni] {
    outline: none;
    box-shadow: var(--tg-focus);
}

.chat-card-body[b-fki2ztduni] {
    flex: 1;
    padding: .85rem 1rem;
    cursor: pointer;
    min-width: 0;
}

.chat-question[b-fki2ztduni] {
    font-size: .85rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin-bottom: .25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-preview[b-fki2ztduni] {
    font-size: .78rem;
    color: var(--tg-muted);
    margin-bottom: .35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-date[b-fki2ztduni] {
    font-size: .68rem;
    color: rgba(107,143,150,.8);
}

.chat-card-actions[b-fki2ztduni] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
    padding: .5rem;
    border-left: 1px solid rgba(255,255,255,.04);
}

.action-btn[b-fki2ztduni] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .18s var(--tg-ease);
}

.view-btn[b-fki2ztduni] {
    background: rgba(76,224,198,.08);
    color: var(--tg-primary);
}

.view-btn:hover[b-fki2ztduni] { background: rgba(76,224,198,.18); }

.delete-btn[b-fki2ztduni] {
    background: rgba(248,113,113,.08);
    color: #f87171;
}

.delete-btn:hover[b-fki2ztduni] { background: rgba(248,113,113,.18); }

.no-results[b-fki2ztduni] {
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(107,143,150,.8);
    font-size: .85rem;
}

/* ---- Chat Thread (Detail View) ---- */
.chat-thread[b-fki2ztduni] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.message-bubble[b-fki2ztduni] {
    max-width: 85%;
    padding: .75rem 1rem;
    border-radius: 16px;
    font-size: .85rem;
    line-height: 1.5;
}

.user-bubble[b-fki2ztduni] {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(76,224,198,.15), rgba(76,224,198,.08));
    color: var(--tg-ink);
    border-bottom-right-radius: 4px;
}

.assistant-bubble[b-fki2ztduni] {
    align-self: flex-start;
    display: flex;
    gap: .6rem;
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    color: rgba(197,221,225,.9);
    border-bottom-left-radius: 4px;
}

.assistant-avatar[b-fki2ztduni] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

.assistant-avatar img[b-fki2ztduni] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* ---- Buttons ---- */
.btn-primary[b-fki2ztduni] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.5rem;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--tg-primary);
    color: var(--tg-bg-deep);
    text-decoration: none;
    transition: filter .18s var(--tg-ease);
}

.btn-primary:hover[b-fki2ztduni] { filter: brightness(1.08); }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .search-bar[b-fki2ztduni] { flex-direction: column; }
    .date-filters[b-fki2ztduni] { flex-direction: row; width: 100%; }
    .date-field[b-fki2ztduni] { flex: 1; }
    .message-bubble[b-fki2ztduni] { max-width: 92%; }
}

/* ---- Accessibility: reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
    .archive-container[b-fki2ztduni],
    .search-bar[b-fki2ztduni],
    .chat-card[b-fki2ztduni] { animation: none !important; }
    .chat-card[b-fki2ztduni],
    .action-btn[b-fki2ztduni],
    .btn-back[b-fki2ztduni],
    .search-input[b-fki2ztduni],
    .date-field input[b-fki2ztduni] { transition: none !important; }
    .chat-card:hover[b-fki2ztduni] { transform: none; }
}
/* /Pages/Assessments.razor.rz.scp.css */
/* Assessments.razor.css - Scoped styles using TheraGen design system */

/* ============ Container & Layout ============ */
.assessments-container[b-i5pgb9v2y8] {
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(0.75rem, 3vw, 2rem);
    animation: fadeInUp-b-i5pgb9v2y8 0.6s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
}

.error-banner[b-i5pgb9v2y8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff6b7a;
    font-size: 0.9rem;
}

.btn-dismiss[b-i5pgb9v2y8] {
    background: none;
    border: none;
    color: #ff6b7a;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}

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

/* ============ Page Header ============ */
.page-header[b-i5pgb9v2y8] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.page-header h1[b-i5pgb9v2y8] {
    font-size: var(--tg-h1, clamp(1.75rem, 2.6vw, 2.5rem));
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
    margin: 0 0 0.5rem 0;
}

.subtitle[b-i5pgb9v2y8] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 1rem;
    margin: 0;
}

/* ============ Loading State ============ */
.loading-state[b-i5pgb9v2y8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--tg-muted, #a9cdd1);
}

.loader[b-i5pgb9v2y8] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--tg-line, rgba(255,255,255,.08));
    border-top-color: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    animation: spin-b-i5pgb9v2y8 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-i5pgb9v2y8 {
    to { transform: rotate(360deg); }
}

/* ============ Assessment Types Grid ============ */
.assessments-grid[b-i5pgb9v2y8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.assessment-card[b-i5pgb9v2y8] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: transform .85s var(--tg-ease-swell, cubic-bezier(.35,.01,.22,1)),
                box-shadow .85s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1)),
                border-color .85s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
    position: relative;
    overflow: hidden;
}

.assessment-card[b-i5pgb9v2y8]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.assessment-card:hover[b-i5pgb9v2y8] {
    transform: translateY(-4px);
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: 0 20px 50px rgba(76, 224, 198, 0.15);
}

.assessment-card:hover[b-i5pgb9v2y8]::before {
    opacity: 1;
}

.assessment-info[b-i5pgb9v2y8] {
    flex: 1;
}

.assessment-card h3[b-i5pgb9v2y8] {
    margin: 0 0 0.35rem 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
}

.assessment-desc[b-i5pgb9v2y8] {
    margin: 0 0 0.75rem 0;
    font-size: 0.82rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.5;
}

.assessment-card p[b-i5pgb9v2y8] {
    margin: 0 0 0.75rem 0;
    font-size: 0.82rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.5;
}

/* ============ Last Result (inside card) ============ */
.last-result[b-i5pgb9v2y8] {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tg-line, rgba(255,255,255,.08));
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.result-score[b-i5pgb9v2y8] {
    display: flex;
    align-items: baseline;
    gap: 0.1rem;
}

.result-score .score[b-i5pgb9v2y8] {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
}

.result-score .max[b-i5pgb9v2y8] {
    font-size: 0.8rem;
    color: var(--tg-muted, #a9cdd1);
}

.result-severity[b-i5pgb9v2y8] {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
}

.result-severity.minimal[b-i5pgb9v2y8] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.result-severity.mild[b-i5pgb9v2y8] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.result-severity.moderate[b-i5pgb9v2y8] {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.result-severity.moderately-severe[b-i5pgb9v2y8],
.result-severity.severe[b-i5pgb9v2y8] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.result-date[b-i5pgb9v2y8] {
    font-size: 0.75rem;
    color: var(--tg-muted, #a9cdd1);
    margin-left: auto;
}

/* ============ Assessment Actions (buttons) ============ */
.assessment-actions[b-i5pgb9v2y8] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* ============ History Section ============ */
.history-section[b-i5pgb9v2y8] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    margin-top: 1.5rem;
}

.history-section h2[b-i5pgb9v2y8] {
    margin: 0 0 1rem 0;
    font-size: var(--tg-h3, clamp(1.15rem, 1.6vw, 1.4rem));
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
}

.history-list[b-i5pgb9v2y8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-item[b-i5pgb9v2y8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.history-item:hover[b-i5pgb9v2y8] {
    background: rgba(255, 255, 255, 0.04);
}

.history-item:focus-visible[b-i5pgb9v2y8] {
    outline: none;
    box-shadow: var(--tg-focus);
}

.history-type[b-i5pgb9v2y8] {
    flex-shrink: 0;
}

.type-badge[b-i5pgb9v2y8] {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background: rgba(76, 224, 198, 0.1);
    color: var(--tg-primary, #4ce0c6);
}

.history-score[b-i5pgb9v2y8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.history-score .score[b-i5pgb9v2y8] {
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
}

.history-score .severity[b-i5pgb9v2y8] {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
}

.history-score .severity.minimal[b-i5pgb9v2y8] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.history-score .severity.mild[b-i5pgb9v2y8] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.history-score .severity.moderate[b-i5pgb9v2y8] {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.history-score .severity.moderately-severe[b-i5pgb9v2y8],
.history-score .severity.severe[b-i5pgb9v2y8] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.history-date[b-i5pgb9v2y8] {
    font-size: 0.82rem;
    color: var(--tg-muted, #a9cdd1);
    white-space: nowrap;
}

.history-item svg[b-i5pgb9v2y8] {
    color: var(--tg-muted, #a9cdd1);
    flex-shrink: 0;
}

/* ============ Info Card ============ */
.info-card[b-i5pgb9v2y8] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    margin-top: 1.5rem;
}

.info-icon[b-i5pgb9v2y8] {
    color: var(--tg-primary, #4ce0c6);
    flex-shrink: 0;
}

.info-content h4[b-i5pgb9v2y8] {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
}

.info-content p[b-i5pgb9v2y8] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.6;
}

/* ============ Assessment Modal ============ */
.modal-assessment[b-i5pgb9v2y8] {
    max-width: 640px;
}

.modal-result[b-i5pgb9v2y8] {
    max-width: 560px;
}

.modal-overlay[b-i5pgb9v2y8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 17, 27, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
    animation: fadeIn-b-i5pgb9v2y8 0.2s ease;
}

@keyframes fadeIn-b-i5pgb9v2y8 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal[b-i5pgb9v2y8] {
    display: block;
    position: static;
    height: auto;
    background: var(--tg-card, rgba(5,18,26,.95));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--tg-shadow, 0 25px 80px rgba(0,0,0,.45));
    animation: slideUp-b-i5pgb9v2y8 0.3s ease;
}

@keyframes slideUp-b-i5pgb9v2y8 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-i5pgb9v2y8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--tg-line, rgba(255,255,255,.08));
}

.modal-header h3[b-i5pgb9v2y8] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
}

.assessment-progress[b-i5pgb9v2y8] {
    flex: 1;
    margin-right: 1rem;
}

.assessment-progress span[b-i5pgb9v2y8] {
    font-size: 0.82rem;
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 0.4rem;
    display: block;
}

.btn-close[b-i5pgb9v2y8] {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    opacity: 1;
    width: auto;
    height: auto;
    box-sizing: border-box;
    flex-shrink: 0;
}

.btn-close:hover[b-i5pgb9v2y8] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--tg-ink, #ecf8f5);
}

.modal-body[b-i5pgb9v2y8] {
    padding: 1.5rem;
}

.modal-footer[b-i5pgb9v2y8] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--tg-line, rgba(255,255,255,.08));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

/* ============ Progress Bar ============ */
.progress-bar[b-i5pgb9v2y8] {
    height: 6px;
    background: var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.4rem;
}

.progress-fill[b-i5pgb9v2y8] {
    height: 100%;
    background: linear-gradient(90deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* ============ Question Card ============ */
.question-card[b-i5pgb9v2y8] {
    margin-bottom: 0.5rem;
}

.question-text[b-i5pgb9v2y8] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tg-ink, #ecf8f5);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.answer-options[b-i5pgb9v2y8] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.answer-btn[b-i5pgb9v2y8] {
    display: flex;
    align-items: center;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    color: var(--tg-ink, #ecf8f5);
    font-size: 0.92rem;
    font-family: inherit;
}

.answer-btn:hover[b-i5pgb9v2y8] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(76, 224, 198, 0.3);
}

.answer-btn.selected[b-i5pgb9v2y8] {
    background: rgba(76, 224, 198, 0.1);
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: 0 0 0 2px rgba(76, 224, 198, 0.2);
}

.answer-value[b-i5pgb9v2y8] {
    width: 26px;
    height: 26px;
    background: var(--tg-line, rgba(255,255,255,.08));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.85rem;
    font-weight: 800;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.answer-btn.selected .answer-value[b-i5pgb9v2y8] {
    background: var(--tg-primary, #4ce0c6);
    color: #04181e;
}

/* ============ Result Display ============ */
.result-display[b-i5pgb9v2y8] {
    text-align: center;
    padding: 1rem 0;
}

.result-type[b-i5pgb9v2y8] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tg-muted, #a9cdd1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.result-score-large[b-i5pgb9v2y8] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.result-score-large .score[b-i5pgb9v2y8] {
    font-size: 3rem;
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
    line-height: 1;
}

.result-score-large .max[b-i5pgb9v2y8] {
    font-size: 1.1rem;
    color: var(--tg-muted, #a9cdd1);
}

.result-severity-badge[b-i5pgb9v2y8] {
    font-size: 1.1rem;
    font-weight: 800;
    padding: 0.4rem 1.25rem;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 1rem;
}

.result-severity-badge.minimal[b-i5pgb9v2y8] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.result-severity-badge.mild[b-i5pgb9v2y8] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.result-severity-badge.moderate[b-i5pgb9v2y8] {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.result-severity-badge.moderately-severe[b-i5pgb9v2y8],
.result-severity-badge.severe[b-i5pgb9v2y8] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.result-section[b-i5pgb9v2y8] {
    text-align: left;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.result-section h4[b-i5pgb9v2y8] {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
}

.result-section p[b-i5pgb9v2y8] {
    margin: 0;
    font-size: 0.88rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.6;
}

/* ============ Crisis Warning ============ */
.crisis-warning[b-i5pgb9v2y8] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: left;
}

.crisis-warning strong[b-i5pgb9v2y8] {
    display: block;
    color: #f87171;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.crisis-warning p[b-i5pgb9v2y8] {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
}

.crisis-warning .crisis-link[b-i5pgb9v2y8] {
    color: var(--tg-primary, #4ce0c6);
    font-weight: 600;
    text-decoration: none;
}

.crisis-warning .crisis-link:hover[b-i5pgb9v2y8] {
    text-decoration: underline;
}

.crisis-warning svg[b-i5pgb9v2y8] {
    flex-shrink: 0;
    color: #f87171;
}

/* ============ Buttons ============ */
.btn-primary[b-i5pgb9v2y8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    font-weight: 800;
    font-size: 0.85rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover[b-i5pgb9v2y8] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(76, 224, 198, 0.3);
}

.btn-primary:disabled[b-i5pgb9v2y8] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-i5pgb9v2y8] {
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-i5pgb9v2y8] {
    background: rgba(255, 255, 255, 0.08);
}

.btn-secondary:disabled[b-i5pgb9v2y8] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-link[b-i5pgb9v2y8] {
    background: none;
    border: none;
    color: var(--tg-primary, #4ce0c6);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0;
}

.btn-link:hover[b-i5pgb9v2y8] {
    text-decoration: underline;
}

/* ============ Empty State ============ */
.empty-state[b-i5pgb9v2y8] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--tg-muted, #a9cdd1);
}

/* ============ Responsive ============ */
@media (max-width: 640px) {
    .assessments-grid[b-i5pgb9v2y8] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .assessment-card[b-i5pgb9v2y8] {
        padding: 1rem;
    }

    .modal-overlay[b-i5pgb9v2y8] {
        padding: 0.75rem;
    }

    .modal[b-i5pgb9v2y8] {
        max-height: 85vh;
        max-height: 85dvh;
        border-radius: 18px;
    }

    .modal-body[b-i5pgb9v2y8] {
        padding: 1rem;
    }

    .modal-footer[b-i5pgb9v2y8] {
        flex-direction: column;
    }

    .history-item[b-i5pgb9v2y8] {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
    }

    .info-card[b-i5pgb9v2y8] {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce) {
    .assessments-container[b-i5pgb9v2y8],
    .modal[b-i5pgb9v2y8],
    .assessment-card[b-i5pgb9v2y8] {
        animation: none;
    }

    .progress-fill[b-i5pgb9v2y8] {
        transition: none;
    }
}
/* /Pages/Authentication/Login.razor.rz.scp.css */
/* Login.razor.css — TheraGen glassmorphic login */

/* ---- shell: full-viewport centering with ambient glow ---- */
.login-shell[b-w0jtaxiaih]{
    min-height:calc(100vh - 80px);
    display:grid;
    place-items:center;
    padding:clamp(1.5rem,4vw,3rem) 1rem 4rem;
    position:relative;
}

/* ---- card ---- */
.login-card[b-w0jtaxiaih]{
    width:min(460px, 92vw);
    margin-inline:auto;
    background:rgba(5,18,26,.78);
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--tg-radius);
    padding:clamp(2rem, 5vw, 2.8rem) clamp(1.6rem, 4vw, 2.4rem);
    text-align:center;
    box-shadow:
        0 25px 80px rgba(0,0,0,.45),
        0 0 120px rgba(76,224,198,.06);
    -webkit-backdrop-filter:blur(24px);
    backdrop-filter:blur(24px);
    animation: cardEnter-b-w0jtaxiaih .6s var(--tg-ease-soft) both;
    position:relative;
    overflow:hidden;
}
/* subtle top-edge highlight */
.login-card[b-w0jtaxiaih]::before{
    content:"";
    position:absolute;
    top:0; left:10%; right:10%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(76,224,198,.4), rgba(156,213,255,.3), transparent);
    pointer-events:none;
}

@keyframes cardEnter-b-w0jtaxiaih{
    from{ opacity:0; transform:translateY(18px) scale(.97) }
    to  { opacity:1; transform:translateY(0) scale(1) }
}

/* ---- logo ---- */
.logo-container[b-w0jtaxiaih]{
    display:flex;
    justify-content:center;
    gap:.6rem;
    margin-bottom:1.2rem;
}

/* ---- text ---- */
.title[b-w0jtaxiaih]{
    margin:.4rem 0 .35rem;
    color:var(--tg-ink);
    font-size:clamp(1.6rem, 3.2vw, 2rem);
    font-weight:700;
    letter-spacing:-.01em;
}
.page-lead[b-w0jtaxiaih]{
    margin:0 auto 1.2rem;
    max-width:380px;
    color:var(--tg-muted);
    font-size:.95rem;
    line-height:1.5;
}
.muted[b-w0jtaxiaih]{
    color:rgba(169,205,209,.7);
    font-size:.88rem;
    margin-bottom:1.2rem;
}

/* ---- error banner ---- */
.error-banner[b-w0jtaxiaih]{
    display:flex;
    align-items:center;
    gap:.5rem;
    justify-content:center;
    padding:.6rem 1rem;
    margin-bottom:1rem;
    border-radius:var(--tg-radius-sm);
    background:rgba(255,80,80,.12);
    border:1px solid rgba(255,80,80,.25);
    color:#ff9b9b;
    font-size:.88rem;
    animation: bannerIn-b-w0jtaxiaih .4s ease-out both;
}
@keyframes bannerIn-b-w0jtaxiaih{
    from{ opacity:0; transform:translateY(-6px) }
}

/* ---- provider buttons ---- */
.provider-buttons[b-w0jtaxiaih]{
    display:flex;
    flex-direction:column;
    gap:.65rem;
    margin-top:.25rem;
}

.provider-btn[b-w0jtaxiaih]{
    -webkit-appearance:none;
    appearance:none;
    display:flex;
    align-items:center;
    gap:.75rem;
    width:100%;
    min-height:48px;
    padding:.6rem 1.2rem;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:var(--tg-ink);
    font-family:var(--tg-font);
    font-size:.95rem;
    font-weight:600;
    cursor:pointer;
    text-align:left;
    transition:
        background .22s ease-out,
        border-color .22s ease-out,
        transform .22s ease-out,
        box-shadow .22s ease-out;
    animation: btnSlideIn-b-w0jtaxiaih .45s var(--tg-ease-soft) both;
    position:relative;
    overflow:hidden;
}
@keyframes btnSlideIn-b-w0jtaxiaih{
    from{ opacity:0; transform:translateY(10px) }
    to  { opacity:1; transform:translateY(0) }
}

.provider-btn:focus-visible[b-w0jtaxiaih]{
    outline:none;
    box-shadow:var(--tg-focus);
}
.provider-btn:active[b-w0jtaxiaih]{
    transform:scale(.98);
}

/* ---- provider icon ---- */
.provider-icon[b-w0jtaxiaih]{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    flex-shrink:0;
}
.provider-icon svg[b-w0jtaxiaih]{
    width:100%;
    height:100%;
    display:block;
}

.provider-label[b-w0jtaxiaih]{
    flex:1;
    text-align:center;
    padding-right:22px; /* offset icon width for optical centering */
}

/* ---- per-provider hover colors (official brand) ---- */
.provider-google:hover[b-w0jtaxiaih]{
    background:rgba(66,133,244,.12);
    border-color:rgba(66,133,244,.3);
    box-shadow:0 8px 32px rgba(66,133,244,.15);
}
.provider-apple:hover[b-w0jtaxiaih]{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.25);
    box-shadow:0 8px 32px rgba(255,255,255,.08);
}
.provider-facebook:hover[b-w0jtaxiaih]{
    background:rgba(24,119,242,.12);
    border-color:rgba(24,119,242,.3);
    box-shadow:0 8px 32px rgba(24,119,242,.15);
}
.provider-microsoft:hover[b-w0jtaxiaih]{
    background:rgba(0,164,239,.1);
    border-color:rgba(0,164,239,.25);
    box-shadow:0 8px 32px rgba(0,164,239,.12);
}

/* common hover lift */
.provider-btn:hover[b-w0jtaxiaih]{
    transform:translateY(-2px);
}

/* ---- legal footnote ---- */
.legal-note[b-w0jtaxiaih]{
    margin-top:1.4rem;
    color:rgba(169,205,209,.45);
    font-size:.75rem;
    line-height:1.45;
}

/* ---- responsive ---- */
@media (max-width:480px){
    .login-card[b-w0jtaxiaih]{
        padding:1.6rem 1.2rem;
        border-radius:var(--tg-radius-sm);
    }
    .title[b-w0jtaxiaih]{
        font-size:1.4rem;
    }
    .provider-btn[b-w0jtaxiaih]{
        min-height:44px;
        font-size:.9rem;
    }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
    .login-card[b-w0jtaxiaih],
    .provider-btn[b-w0jtaxiaih],
    .error-banner[b-w0jtaxiaih]{
        animation:none !important;
        transition:none !important;
    }
}
/* /Pages/Authentication/LoginCallback.razor.rz.scp.css */
.login-callback-loading[b-ppsvkmqwxl] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--tg-muted, #a9cdd1);
}

.login-callback-loading p[b-ppsvkmqwxl] {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.loader[b-ppsvkmqwxl] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(76, 224, 198, 0.2);
    border-top: 3px solid var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    animation: spin-b-ppsvkmqwxl 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-ppsvkmqwxl {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loader[b-ppsvkmqwxl] { animation: none; }
}
/* /Pages/ClinicianSession.razor.rz.scp.css */
/* ClinicianSession.razor.css — dark glassmorphic design-token refresh */

.clinician-container[b-mne5l01b6i] {
    max-width: 700px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    animation: clinicianFadeIn-b-mne5l01b6i .5s var(--tg-ease-soft, ease-out) both;
}

@keyframes clinicianFadeIn-b-mne5l01b6i {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Loading ---- */
.loading-state[b-mne5l01b6i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--tg-muted);
    text-align: center;
    gap: .75rem;
}

.loader[b-mne5l01b6i] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(76, 224, 198, .15);
    border-top-color: var(--tg-primary);
    border-radius: 50%;
    animation: spin-b-mne5l01b6i .8s linear infinite;
}

@keyframes spin-b-mne5l01b6i { to { transform: rotate(360deg); } }

/* ---- Page Header ---- */
.page-header[b-mne5l01b6i] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.page-header h1[b-mne5l01b6i] {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 700;
    color: var(--tg-ink);
    margin: 0;
}

.subtitle[b-mne5l01b6i] {
    font-size: .85rem;
    color: var(--tg-muted);
    margin: .35rem 0 0;
    line-height: 1.5;
}

/* ---- Upgrade Card (Explorer tier) ---- */
.upgrade-card[b-mne5l01b6i] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius, 22px);
    padding: 2rem 1.5rem;
    text-align: center;
    animation: cardSlideUp-b-mne5l01b6i .45s var(--tg-ease-soft, ease-out) .1s both;
}

@keyframes cardSlideUp-b-mne5l01b6i {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.upgrade-icon[b-mne5l01b6i] {
    color: var(--tg-primary);
    margin-bottom: 1rem;
    opacity: .85;
}

.upgrade-card h1[b-mne5l01b6i] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--tg-ink);
    margin: 0 0 .5rem;
}

.upgrade-desc[b-mne5l01b6i] {
    font-size: .9rem;
    color: var(--tg-muted);
    line-height: 1.55;
    margin: 0 0 1.25rem;
    max-width: 480px;
    margin-inline: auto;
}

.upgrade-tiers[b-mne5l01b6i] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.5rem;
    max-width: 340px;
    margin-inline: auto;
}

.tier-highlight[b-mne5l01b6i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem 1rem;
    background: rgba(76, 224, 198, .05);
    border: 1px solid rgba(76, 224, 198, .1);
    border-radius: var(--tg-radius-sm, 14px);
    font-size: .82rem;
}

.tier-highlight.featured[b-mne5l01b6i] {
    background: rgba(76, 224, 198, .12);
    border-color: var(--tg-primary);
}

.tier-name[b-mne5l01b6i] {
    font-weight: 600;
    color: var(--tg-ink);
}

.tier-detail[b-mne5l01b6i] {
    color: var(--tg-muted);
}

/* ---- Crisis Banner ---- */
.crisis-banner[b-mne5l01b6i] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .25);
    border-radius: var(--tg-radius-sm, 14px);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    animation: cardSlideUp-b-mne5l01b6i .4s var(--tg-ease-soft, ease-out) .15s both;
}

.crisis-banner-icon[b-mne5l01b6i] {
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 2px;
}

.crisis-banner strong[b-mne5l01b6i] {
    color: #fca5a5;
    font-size: .88rem;
}

.crisis-banner p[b-mne5l01b6i] {
    font-size: .8rem;
    color: rgba(252, 165, 165, .8);
    margin: .2rem 0 0;
    line-height: 1.45;
}

/* ---- Session Card ---- */
.session-card[b-mne5l01b6i] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius, 22px);
    padding: 1.5rem;
    margin-bottom: 1rem;
    animation: cardSlideUp-b-mne5l01b6i .45s var(--tg-ease-soft, ease-out) .15s both;
}

.session-card-header[b-mne5l01b6i] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.session-icon[b-mne5l01b6i] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(76, 224, 198, .12);
    color: var(--tg-primary);
    border-radius: 16px;
    flex-shrink: 0;
}

.session-card-header h2[b-mne5l01b6i] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin: 0;
}

.session-duration[b-mne5l01b6i] {
    font-size: .8rem;
    color: var(--tg-muted);
    margin: .15rem 0 0;
}

/* ---- Session Info Rows ---- */
.session-info[b-mne5l01b6i] {
    background: rgba(5, 18, 26, .4);
    border-radius: var(--tg-radius-sm, 14px);
    padding: .25rem 1rem;
    margin-bottom: 1.25rem;
}

.info-row[b-mne5l01b6i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.info-row:last-child[b-mne5l01b6i] { border-bottom: none; }

.info-label[b-mne5l01b6i] {
    font-size: .8rem;
    color: var(--tg-muted);
}

.info-value[b-mne5l01b6i] {
    font-size: .8rem;
    font-weight: 600;
    color: var(--tg-ink);
}

/* ---- Notes ---- */
.notes-preview[b-mne5l01b6i] {
    background: rgba(76, 224, 198, .05);
    border-radius: var(--tg-radius-sm, 14px);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

.notes-label[b-mne5l01b6i] {
    font-size: .7rem;
    font-weight: 600;
    color: var(--tg-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.notes-preview p[b-mne5l01b6i] {
    font-size: .82rem;
    color: var(--tg-ink);
    margin: .3rem 0 0;
    line-height: 1.45;
}

.session-notes-input[b-mne5l01b6i] {
    margin-bottom: 1.25rem;
}

.session-notes-input label[b-mne5l01b6i] {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin-bottom: .4rem;
}

.session-notes-input textarea[b-mne5l01b6i] {
    width: 100%;
    padding: .7rem .9rem;
    border-radius: var(--tg-radius-sm, 14px);
    border: 1px solid var(--tg-line);
    background: rgba(5, 18, 26, .6);
    color: var(--tg-ink);
    font-size: .82rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color .18s var(--tg-ease);
    line-height: 1.5;
}

.session-notes-input textarea:focus[b-mne5l01b6i] {
    border-color: var(--tg-primary);
    box-shadow: var(--tg-focus);
}

.session-notes-input textarea[b-mne5l01b6i]::placeholder {
    color: rgba(107, 143, 150, .6);
}

.char-count[b-mne5l01b6i] {
    display: block;
    text-align: right;
    font-size: .7rem;
    color: var(--tg-muted);
    margin-top: .3rem;
}

/* ---- Error Banner ---- */
.error-banner[b-mne5l01b6i] {
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .2);
    color: #fca5a5;
    font-size: .82rem;
    padding: .6rem 1rem;
    border-radius: var(--tg-radius-sm, 14px);
    margin-bottom: 1rem;
}

/* ---- Buttons ---- */
.btn-primary[b-mne5l01b6i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .7rem 1.5rem;
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--tg-primary);
    color: var(--tg-bg-deep);
    transition: filter .18s var(--tg-ease);
    text-decoration: none;
}

.btn-primary:hover[b-mne5l01b6i] { filter: brightness(1.08); }
.btn-primary:disabled[b-mne5l01b6i] { opacity: .5; cursor: not-allowed; }

.btn-request[b-mne5l01b6i] { width: 100%; }

.btn-loader[b-mne5l01b6i] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(2, 17, 27, .3);
    border-top-color: var(--tg-bg-deep);
    border-radius: 50%;
    animation: spin-b-mne5l01b6i .7s linear infinite;
}

/* ---- Confirmation Card ---- */
.confirmation-card[b-mne5l01b6i] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius, 22px);
    padding: 2rem 1.5rem;
    text-align: center;
    animation: cardSlideUp-b-mne5l01b6i .45s var(--tg-ease-soft, ease-out) .1s both;
}

.confirmation-icon[b-mne5l01b6i] {
    color: var(--tg-primary);
    margin-bottom: .75rem;
}

.confirmation-card h2[b-mne5l01b6i] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--tg-ink);
    margin: 0 0 .5rem;
}

.confirmation-desc[b-mne5l01b6i] {
    font-size: .88rem;
    color: var(--tg-muted);
    line-height: 1.55;
    max-width: 460px;
    margin: 0 auto 1.5rem;
}

.next-steps[b-mne5l01b6i] {
    text-align: left;
    background: rgba(5, 18, 26, .4);
    border-radius: var(--tg-radius-sm, 14px);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.next-steps h3[b-mne5l01b6i] {
    font-size: .82rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin: 0 0 .6rem;
}

.next-steps ul[b-mne5l01b6i] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.next-steps li a[b-mne5l01b6i] {
    font-size: .82rem;
    color: var(--tg-primary);
    text-decoration: none;
    transition: opacity .15s;
}

.next-steps li a:hover[b-mne5l01b6i] { text-decoration: underline; }

.confirmation-actions[b-mne5l01b6i] {
    display: flex;
    gap: .75rem;
    justify-content: center;
}

.btn-secondary[b-mne5l01b6i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem 1.25rem;
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--tg-line);
    background: transparent;
    color: var(--tg-ink);
    text-decoration: none;
    transition: border-color .18s var(--tg-ease), background .18s var(--tg-ease);
}

.btn-secondary:hover[b-mne5l01b6i] {
    border-color: var(--tg-primary);
    background: rgba(76, 224, 198, .06);
}

/* ---- Pro Upsell ---- */
.pro-upsell[b-mne5l01b6i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(76, 224, 198, .05);
    border: 1px solid rgba(76, 224, 198, .1);
    border-radius: var(--tg-radius-sm, 14px);
    padding: .85rem 1.25rem;
    margin-bottom: 1rem;
    animation: cardSlideUp-b-mne5l01b6i .45s var(--tg-ease-soft, ease-out) .25s both;
}

.pro-upsell p[b-mne5l01b6i] {
    font-size: .8rem;
    color: var(--tg-muted);
    margin: 0;
    line-height: 1.45;
}

.pro-upsell strong[b-mne5l01b6i] {
    color: var(--tg-ink);
}

.btn-outline-sm[b-mne5l01b6i] {
    display: inline-flex;
    align-items: center;
    padding: .4rem 1rem;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid var(--tg-primary);
    background: transparent;
    color: var(--tg-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s var(--tg-ease);
}

.btn-outline-sm:hover[b-mne5l01b6i] {
    background: rgba(76, 224, 198, .1);
}

/* ---- Emergency Footer ---- */
.emergency-footer[b-mne5l01b6i] {
    text-align: center;
    padding: 1rem;
    margin-top: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .04);
}

.emergency-footer p[b-mne5l01b6i] {
    font-size: .78rem;
    color: var(--tg-muted);
    margin: 0;
}

.emergency-footer strong[b-mne5l01b6i] {
    color: #fca5a5;
}

.emergency-footer a[b-mne5l01b6i] {
    color: var(--tg-primary);
    text-decoration: none;
}

.emergency-footer a:hover[b-mne5l01b6i] { text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .session-card-header[b-mne5l01b6i] { flex-direction: column; text-align: center; }
    .confirmation-actions[b-mne5l01b6i] { flex-direction: column; }
    .pro-upsell[b-mne5l01b6i] { flex-direction: column; text-align: center; }
    .tier-highlight[b-mne5l01b6i] { flex-direction: column; gap: .15rem; text-align: center; }
}

/* ---- Accessibility: reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
    .clinician-container[b-mne5l01b6i] { animation: none !important; }
    .upgrade-card[b-mne5l01b6i],
    .crisis-banner[b-mne5l01b6i],
    .session-card[b-mne5l01b6i],
    .confirmation-card[b-mne5l01b6i],
    .pro-upsell[b-mne5l01b6i] { animation: none !important; }
    .btn-loader[b-mne5l01b6i] { animation: none !important; }
    .loader[b-mne5l01b6i] { animation: none !important; }
}
/* /Pages/Community.razor.rz.scp.css */
.community-container[b-c2gbnrvf2f] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.community-header[b-c2gbnrvf2f] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.community-header h1[b-c2gbnrvf2f] {
    font-size: 2.25rem;
    font-weight: 700;
    background: linear-gradient(120deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.community-header .subtitle[b-c2gbnrvf2f] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 1.1rem;
}

/* Section Tabs */
.section-tabs[b-c2gbnrvf2f] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(76, 224, 198, 0.2);
    padding-bottom: 0.5rem;
}

.tab-btn[b-c2gbnrvf2f] {
    padding: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    color: var(--tg-muted, #a9cdd1);
    cursor: pointer;
    font-size: 0.95rem;
    border-radius: var(--tg-radius, 22px) var(--tg-radius, 22px) 0 0;
    transition: all 0.3s ease;
}

.tab-btn:hover[b-c2gbnrvf2f] {
    background: rgba(76, 224, 198, 0.1);
    color: var(--tg-ink, #ecf8f5);
}

.tab-btn.active[b-c2gbnrvf2f] {
    color: var(--tg-primary, #4ce0c6);
    background: rgba(76, 224, 198, 0.15);
    font-weight: 600;
}

.tab-btn.create-btn[b-c2gbnrvf2f] {
    margin-left: auto;
    background: linear-gradient(120deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: var(--tg-bg-deep, #02111b);
    border-radius: 999px;
    font-weight: 600;
}

.tab-btn.create-btn:hover[b-c2gbnrvf2f] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 224, 198, 0.3);
}

/* Loading & Empty States */
.loading-state[b-c2gbnrvf2f],
.empty-state[b-c2gbnrvf2f] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--tg-muted, #a9cdd1);
}

.loader[b-c2gbnrvf2f] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(76, 224, 198, 0.2);
    border-top: 3px solid var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    animation: spin-b-c2gbnrvf2f 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin-b-c2gbnrvf2f {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.empty-icon[b-c2gbnrvf2f] {
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 1rem;
    opacity: 0.6;
}

.empty-state h3[b-c2gbnrvf2f] {
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.5rem;
}

/* Groups Grid */
.groups-grid[b-c2gbnrvf2f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.group-card[b-c2gbnrvf2f] {
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.group-card:hover[b-c2gbnrvf2f] {
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: 0 8px 32px rgba(76, 224, 198, 0.15);
    transform: translateY(-4px);
}

.group-card:focus-visible[b-c2gbnrvf2f] {
    outline: none;
    box-shadow: var(--tg-focus);
}

.group-card-header[b-c2gbnrvf2f] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.category-badge[b-c2gbnrvf2f] {
    background: rgba(76, 224, 198, 0.15);
    color: var(--tg-primary, #4ce0c6);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.private-badge[b-c2gbnrvf2f] {
    background: rgba(249, 177, 122, 0.15);
    color: #f9b17a;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.group-name[b-c2gbnrvf2f] {
    font-size: 1.1rem;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.group-description[b-c2gbnrvf2f] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.group-stats[b-c2gbnrvf2f] {
    display: flex;
    gap: 1.5rem;
}

.group-stats .stat[b-c2gbnrvf2f] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.85rem;
}

/* Group Detail View */
.group-detail[b-c2gbnrvf2f] {
    max-width: 800px;
    margin: 0 auto;
}

.back-btn[b-c2gbnrvf2f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    color: var(--tg-primary, #4ce0c6);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.back-btn:hover[b-c2gbnrvf2f] {
    color: var(--tg-accent-2, #9cd5ff);
}

.group-header[b-c2gbnrvf2f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: var(--tg-radius, 22px);
    margin-bottom: 1.5rem;
}

.group-info h2[b-c2gbnrvf2f] {
    font-size: 1.5rem;
    color: var(--tg-ink, #ecf8f5);
    margin: 0.5rem 0;
}

.group-info p[b-c2gbnrvf2f] {
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 0.75rem;
}

.group-meta[b-c2gbnrvf2f] {
    display: flex;
    gap: 1.5rem;
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.85rem;
}

/* Buttons */
.btn-primary[b-c2gbnrvf2f] {
    background: linear-gradient(120deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: var(--tg-bg-deep, #02111b);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover:not(:disabled)[b-c2gbnrvf2f] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 224, 198, 0.3);
}

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

.btn-secondary[b-c2gbnrvf2f] {
    background: transparent;
    color: var(--tg-muted, #a9cdd1);
    border: 1px solid rgba(76, 224, 198, 0.3);
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.btn-secondary:hover[b-c2gbnrvf2f] {
    background: rgba(76, 224, 198, 0.1);
    border-color: var(--tg-primary, #4ce0c6);
    color: var(--tg-ink, #ecf8f5);
}

.btn-small[b-c2gbnrvf2f] {
    background: linear-gradient(120deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: var(--tg-bg-deep, #02111b);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-small:disabled[b-c2gbnrvf2f] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Create Post Form */
.create-post-form[b-c2gbnrvf2f] {
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.create-post-form h3[b-c2gbnrvf2f] {
    font-size: 1rem;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 1rem;
}

.form-group[b-c2gbnrvf2f] {
    margin-bottom: 1rem;
}

.form-group label[b-c2gbnrvf2f] {
    display: block;
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.form-input[b-c2gbnrvf2f],
.form-textarea[b-c2gbnrvf2f],
.form-select[b-c2gbnrvf2f] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: 12px;
    font-size: 0.95rem;
    background: var(--tg-bg-deep, #02111b);
    color: var(--tg-ink, #ecf8f5);
    transition: border-color 0.2s ease;
}

.form-input:focus[b-c2gbnrvf2f],
.form-textarea:focus[b-c2gbnrvf2f],
.form-select:focus[b-c2gbnrvf2f] {
    outline: none;
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: 0 0 0 3px rgba(76, 224, 198, 0.1);
}

.form-textarea[b-c2gbnrvf2f] {
    resize: vertical;
    min-height: 80px;
}

.form-actions[b-c2gbnrvf2f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.anonymous-toggle[b-c2gbnrvf2f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
    cursor: pointer;
}

.anonymous-toggle input[b-c2gbnrvf2f] {
    cursor: pointer;
    accent-color: var(--tg-primary, #4ce0c6);
}

/* Posts Section */
.posts-section[b-c2gbnrvf2f] {
    margin-top: 1.5rem;
}

.posts-section h3[b-c2gbnrvf2f] {
    font-size: 1.1rem;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 1rem;
}

.empty-posts[b-c2gbnrvf2f] {
    text-align: center;
    padding: 2rem;
    color: var(--tg-muted, #a9cdd1);
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: var(--tg-radius, 22px);
}

.post-card[b-c2gbnrvf2f] {
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.post-card:hover[b-c2gbnrvf2f] {
    border-color: rgba(76, 224, 198, 0.3);
}

.post-header[b-c2gbnrvf2f] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.post-author[b-c2gbnrvf2f] {
    font-weight: 600;
    color: var(--tg-ink, #ecf8f5);
}

.post-date[b-c2gbnrvf2f] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.85rem;
}

.post-title[b-c2gbnrvf2f] {
    font-size: 1.1rem;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.5rem;
}

.post-content[b-c2gbnrvf2f] {
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.post-actions[b-c2gbnrvf2f] {
    display: flex;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(76, 224, 198, 0.1);
}

.action-btn[b-c2gbnrvf2f] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: none;
    color: var(--tg-muted, #a9cdd1);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.action-btn:hover[b-c2gbnrvf2f] {
    background: rgba(76, 224, 198, 0.1);
    color: var(--tg-primary, #4ce0c6);
}

.action-btn.voted[b-c2gbnrvf2f] {
    color: var(--tg-primary, #4ce0c6);
}

.action-btn.report-btn[b-c2gbnrvf2f] {
    margin-left: auto;
    color: var(--tg-muted, #a9cdd1);
}

.action-btn.report-btn:hover[b-c2gbnrvf2f] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Replies Section */
.replies-section[b-c2gbnrvf2f] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(76, 224, 198, 0.1);
}

.reply-card[b-c2gbnrvf2f] {
    background: rgba(76, 224, 198, 0.05);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    margin-bottom: 0.75rem;
}

.reply-header[b-c2gbnrvf2f] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.reply-author[b-c2gbnrvf2f] {
    font-weight: 500;
    color: var(--tg-ink, #ecf8f5);
    font-size: 0.9rem;
}

.reply-date[b-c2gbnrvf2f] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.8rem;
}

.reply-content[b-c2gbnrvf2f] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
    line-height: 1.5;
}

.reply-form[b-c2gbnrvf2f] {
    margin-top: 1rem;
}

.reply-form .form-textarea[b-c2gbnrvf2f] {
    margin-bottom: 0.5rem;
}

/* Join Prompt */
.join-prompt[b-c2gbnrvf2f] {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: var(--tg-radius, 22px);
}

.join-prompt p[b-c2gbnrvf2f] {
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 1.5rem;
}

/* Modal */
.modal-overlay[b-c2gbnrvf2f] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 17, 27, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}

.modal-content[b-c2gbnrvf2f] {
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: var(--tg-radius, 22px);
    padding: 2rem;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--tg-shadow, 0 25px 80px rgba(0,0,0,.45));
}

.modal-content h2[b-c2gbnrvf2f] {
    font-size: 1.25rem;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 1.5rem;
}

.modal-actions[b-c2gbnrvf2f] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .community-container[b-c2gbnrvf2f] {
        padding: 1rem;
    }

    .section-tabs[b-c2gbnrvf2f] {
        flex-wrap: wrap;
    }

    .tab-btn.create-btn[b-c2gbnrvf2f] {
        margin-left: 0;
        width: 100%;
        order: -1;
        margin-bottom: 0.5rem;
    }

    .group-header[b-c2gbnrvf2f] {
        flex-direction: column;
    }

    .groups-grid[b-c2gbnrvf2f] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loader[b-c2gbnrvf2f] { animation: none; }
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* Dashboard.razor.css — TheraGen dashboard (refreshed) */
/* Uses global tokens from theragen-shared.css */

.dashboard-page[b-tlvaa5rkrs] {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
}

/* ---- Onboarding Prompt ---- */
.onboarding-prompt[b-tlvaa5rkrs] {
    background: linear-gradient(135deg, rgba(76, 224, 198, 0.08), rgba(44, 114, 126, 0.12));
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
    animation: slideDown-b-tlvaa5rkrs 0.4s cubic-bezier(.4,.14,.2,1);
}

@keyframes slideDown-b-tlvaa5rkrs {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.prompt-content[b-tlvaa5rkrs] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.prompt-icon[b-tlvaa5rkrs] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: rgba(76, 224, 198, 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prompt-text[b-tlvaa5rkrs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prompt-text strong[b-tlvaa5rkrs] { color: var(--tg-ink); font-size: 14px; }
.prompt-text span[b-tlvaa5rkrs] { color: var(--tg-muted); font-size: 12px; }

.prompt-cta[b-tlvaa5rkrs] {
    flex-shrink: 0;
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b;
    border: none;
    border-radius: 10px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.prompt-dismiss[b-tlvaa5rkrs] {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--tg-muted);
    cursor: pointer;
    padding: 4px;
}

/* ---- Welcome Header ---- */
.welcome-header[b-tlvaa5rkrs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    animation: dashFadeIn-b-tlvaa5rkrs .5s var(--tg-ease-soft, ease-out) both;
}

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

.welcome-text h1[b-tlvaa5rkrs] {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 700;
    color: var(--tg-ink);
    margin: 0;
}

.welcome-date[b-tlvaa5rkrs] {
    font-size: .85rem;
    color: var(--tg-muted);
    margin: .25rem 0 0;
}

.streak-badge[b-tlvaa5rkrs] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: 14px;
    background: rgba(255, 152, 0, .12);
    border: 1px solid rgba(255, 152, 0, .2);
    animation: dashFadeIn-b-tlvaa5rkrs .5s var(--tg-ease-soft, ease-out) .1s both;
}

.streak-flame[b-tlvaa5rkrs] { font-size: 1.2rem; }
.streak-count[b-tlvaa5rkrs] { font-size: 1.3rem; font-weight: 700; color: #ffb74d; }
.streak-label[b-tlvaa5rkrs] { font-size: .72rem; color: var(--tg-muted); }

/* ---- Stats Grid ---- */
.stats-grid[b-tlvaa5rkrs] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-tlvaa5rkrs] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 16px;
    padding: 1rem;
    text-align: center;
    transition: transform .22s var(--tg-ease), border-color .22s var(--tg-ease), box-shadow .22s var(--tg-ease);
    animation: cardSlideUp-b-tlvaa5rkrs .45s var(--tg-ease-soft, ease-out) both;
}

@keyframes cardSlideUp-b-tlvaa5rkrs {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.stat-card:hover[b-tlvaa5rkrs] {
    transform: translateY(-3px);
    border-color: rgba(76, 224, 198, .2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.stat-icon[b-tlvaa5rkrs] { font-size: 1.3rem; margin-bottom: .35rem; }
.stat-value[b-tlvaa5rkrs] { font-size: 1.3rem; font-weight: 700; color: var(--tg-ink); }
.stat-label[b-tlvaa5rkrs] { font-size: .7rem; color: var(--tg-muted); margin-top: .2rem; }

/* ---- Widget Grid ---- */
.widget-grid[b-tlvaa5rkrs] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.widget-card[b-tlvaa5rkrs] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-sm);
    padding: 1.125rem;
    transition: border-color .22s var(--tg-ease), box-shadow .22s var(--tg-ease);
    animation: cardSlideUp-b-tlvaa5rkrs .45s var(--tg-ease-soft, ease-out) both;
    position: relative;
}

.widget-card:hover[b-tlvaa5rkrs] {
    border-color: rgba(76, 224, 198, .15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

.widget-header[b-tlvaa5rkrs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.widget-header h2[b-tlvaa5rkrs] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin: 0;
}

.widget-link[b-tlvaa5rkrs] {
    font-size: .72rem;
    color: var(--tg-primary);
    text-decoration: none;
    transition: opacity .15s;
}

.widget-link:hover[b-tlvaa5rkrs] { opacity: .8; text-decoration: underline; }

.widget-loading[b-tlvaa5rkrs] {
    display: flex;
    justify-content: center;
    padding: 1.5rem;
}

.loader-sm[b-tlvaa5rkrs] {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(76, 224, 198, .15);
    border-top-color: var(--tg-primary);
    border-radius: 50%;
    animation: spin-b-tlvaa5rkrs .8s linear infinite;
}

@keyframes spin-b-tlvaa5rkrs { to { transform: rotate(360deg); } }

.widget-empty[b-tlvaa5rkrs] {
    text-align: center;
    padding: 1rem 0;
    color: rgba(107, 143, 150, .8);
    font-size: .82rem;
}

.widget-empty p[b-tlvaa5rkrs] { margin: 0 0 .75rem; }

/* ---- Mood Widget ---- */
.mood-widget[b-tlvaa5rkrs] { grid-column: 1 / -1; }

.mood-logged[b-tlvaa5rkrs] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .5rem 0;
}

.mood-emoji-display[b-tlvaa5rkrs] { font-size: 2.2rem; }

.mood-info[b-tlvaa5rkrs] {
    display: flex;
    flex-direction: column;
}

.mood-level-text[b-tlvaa5rkrs] { font-size: .9rem; font-weight: 600; color: var(--tg-ink); }
.mood-time[b-tlvaa5rkrs] { font-size: .72rem; color: rgba(107, 143, 150, .8); }

.mood-prompt p[b-tlvaa5rkrs] {
    font-size: .85rem;
    color: var(--tg-muted);
    margin: 0 0 .75rem;
}

.mood-emoji-row[b-tlvaa5rkrs] {
    display: flex;
    justify-content: center;
    gap: .5rem;
}

.mood-emoji-btn[b-tlvaa5rkrs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .6rem .8rem;
    border-radius: 14px;
    border: 1px solid var(--tg-line);
    background: transparent;
    cursor: pointer;
    transition: all .18s var(--tg-ease);
    min-width: 64px;
}

.mood-emoji-btn:hover[b-tlvaa5rkrs] {
    border-color: var(--tg-primary);
    background: rgba(76, 224, 198, .08);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(76, 224, 198, .12);
}

.mood-emoji-btn:disabled[b-tlvaa5rkrs] { opacity: .5; cursor: not-allowed; }

.mood-emoji-btn .emoji[b-tlvaa5rkrs] { font-size: 1.6rem; }
.mood-emoji-btn .emoji-label[b-tlvaa5rkrs] { font-size: .62rem; color: var(--tg-muted); }

/* ---- Goals Widget ---- */
.goals-list[b-tlvaa5rkrs] { display: flex; flex-direction: column; gap: .5rem; }

.goal-row[b-tlvaa5rkrs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .6rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s var(--tg-ease);
}

.goal-row:hover[b-tlvaa5rkrs] { background: rgba(255, 255, 255, .04); }

.goal-info[b-tlvaa5rkrs] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.goal-title[b-tlvaa5rkrs] {
    font-size: .8rem;
    font-weight: 600;
    color: var(--tg-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goal-category[b-tlvaa5rkrs] {
    font-size: .65rem;
    color: rgba(107, 143, 150, .8);
}

.goal-progress[b-tlvaa5rkrs] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.progress-bar[b-tlvaa5rkrs] {
    width: 60px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.progress-fill[b-tlvaa5rkrs] {
    height: 100%;
    background: linear-gradient(90deg, var(--tg-primary), var(--tg-accent-2));
    border-radius: 3px;
    transition: width .4s var(--tg-ease);
}

.progress-text[b-tlvaa5rkrs] {
    font-size: .68rem;
    color: var(--tg-muted);
    min-width: 28px;
    text-align: right;
}

/* ---- Journal Widget ---- */
.journal-list[b-tlvaa5rkrs] { display: flex; flex-direction: column; gap: .4rem; }

.journal-row[b-tlvaa5rkrs] {
    padding: .45rem .5rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s var(--tg-ease);
}

.journal-row:hover[b-tlvaa5rkrs] { background: rgba(255, 255, 255, .04); }

.journal-meta[b-tlvaa5rkrs] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .15rem;
}

.journal-type-badge[b-tlvaa5rkrs] {
    font-size: .58rem;
    font-weight: 600;
    color: var(--tg-primary);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.journal-date[b-tlvaa5rkrs] { font-size: .62rem; color: rgba(107, 143, 150, .8); }

.journal-title[b-tlvaa5rkrs] {
    font-size: .78rem;
    color: var(--tg-muted);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Notifications Widget ---- */
.notif-list[b-tlvaa5rkrs] { display: flex; flex-direction: column; gap: .3rem; }

.notif-row[b-tlvaa5rkrs] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .5rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s var(--tg-ease);
}

.notif-row:hover[b-tlvaa5rkrs] { background: rgba(255, 255, 255, .04); }
.notif-row.unread[b-tlvaa5rkrs] { background: rgba(76, 224, 198, .04); }

.notif-type-dot[b-tlvaa5rkrs] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(107, 143, 150, .8);
}

.notif-type-dot.type-general[b-tlvaa5rkrs] { background: var(--tg-muted); }
.notif-type-dot.type-mood[b-tlvaa5rkrs], .notif-type-dot.type-moodcheckin[b-tlvaa5rkrs] { background: #ffb74d; }
.notif-type-dot.type-goal[b-tlvaa5rkrs], .notif-type-dot.type-goalreminder[b-tlvaa5rkrs] { background: var(--tg-primary); }
.notif-type-dot.type-exercise[b-tlvaa5rkrs], .notif-type-dot.type-exercisereminder[b-tlvaa5rkrs] { background: var(--tg-accent-2); }
.notif-type-dot.type-streak[b-tlvaa5rkrs], .notif-type-dot.type-milestoneachieved[b-tlvaa5rkrs] { background: #ef5350; }
.notif-type-dot.type-system[b-tlvaa5rkrs], .notif-type-dot.type-account[b-tlvaa5rkrs] { background: #9575cd; }

.notif-info[b-tlvaa5rkrs] { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.notif-title[b-tlvaa5rkrs] {
    font-size: .76rem;
    color: var(--tg-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unread .notif-title[b-tlvaa5rkrs] { font-weight: 600; }

.notif-time[b-tlvaa5rkrs] { font-size: .62rem; color: rgba(107, 143, 150, .8); }

/* ---- Learn Widget ---- */
.learn-list[b-tlvaa5rkrs] { display: flex; flex-direction: column; gap: .4rem; }

.learn-row[b-tlvaa5rkrs] {
    padding: .45rem .5rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s var(--tg-ease);
}

.learn-row:hover[b-tlvaa5rkrs] { background: rgba(255, 255, 255, .04); }

.goal-row:focus-visible[b-tlvaa5rkrs],
.journal-row:focus-visible[b-tlvaa5rkrs],
.learn-row:focus-visible[b-tlvaa5rkrs] {
    outline: none;
    box-shadow: var(--tg-focus);
}

.learn-meta[b-tlvaa5rkrs] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .15rem;
}

.learn-topic-badge[b-tlvaa5rkrs] {
    font-size: .58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tg-primary);
}

.learn-topic-badge.topic-anxiety[b-tlvaa5rkrs] { color: #e57373; }
.learn-topic-badge.topic-depression[b-tlvaa5rkrs] { color: var(--tg-accent-2); }
.learn-topic-badge.topic-stress[b-tlvaa5rkrs] { color: #ffb74d; }
.learn-topic-badge.topic-sleep[b-tlvaa5rkrs] { color: #ce93d8; }
.learn-topic-badge.topic-mindfulness[b-tlvaa5rkrs] { color: #81c784; }

.learn-difficulty[b-tlvaa5rkrs] { font-size: .58rem; color: rgba(107, 143, 150, .8); }

.learn-title[b-tlvaa5rkrs] {
    font-size: .78rem;
    color: var(--tg-muted);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.learn-duration[b-tlvaa5rkrs] { font-size: .62rem; color: rgba(107, 143, 150, .8); }

/* ---- Quick Actions ---- */
.quick-actions[b-tlvaa5rkrs] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    animation: dashFadeIn-b-tlvaa5rkrs .5s var(--tg-ease-soft, ease-out) .6s both;
}

.quick-action-btn[b-tlvaa5rkrs] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--tg-line);
    background: transparent;
    color: var(--tg-muted);
    font-family: var(--tg-font);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s var(--tg-ease);
    flex: 1;
    justify-content: center;
    min-width: 100px;
}

.quick-action-btn:hover[b-tlvaa5rkrs] {
    border-color: var(--tg-primary);
    color: var(--tg-primary);
    background: rgba(76, 224, 198, .06);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(76, 224, 198, .1);
}

.quick-action-btn:focus-visible[b-tlvaa5rkrs] {
    outline: none;
    box-shadow: var(--tg-focus);
}

/* ---- Buttons ---- */
.btn-sm[b-tlvaa5rkrs] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .7rem;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .15s var(--tg-ease);
}

.btn-primary[b-tlvaa5rkrs] { background: var(--tg-primary); color: var(--tg-bg-deep); }
.btn-primary:hover[b-tlvaa5rkrs] { filter: brightness(1.08); }

.btn-ghost[b-tlvaa5rkrs] {
    background: none;
    border: none;
    color: var(--tg-primary);
    font-size: .75rem;
    cursor: pointer;
    padding: .3rem .5rem;
}

.btn-ghost:hover[b-tlvaa5rkrs] { opacity: .8; text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .stats-grid[b-tlvaa5rkrs] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .welcome-header[b-tlvaa5rkrs] { flex-direction: column; align-items: flex-start; }
    .stats-grid[b-tlvaa5rkrs] { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .widget-grid[b-tlvaa5rkrs] { grid-template-columns: 1fr; }
    .quick-actions[b-tlvaa5rkrs] { flex-direction: column; }
    .quick-action-btn[b-tlvaa5rkrs] { flex: unset; }
    .mood-emoji-row[b-tlvaa5rkrs] { flex-wrap: wrap; }
}

/* ---- Accessibility: reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
    .dashboard-page[b-tlvaa5rkrs],
    .welcome-header[b-tlvaa5rkrs],
    .streak-badge[b-tlvaa5rkrs],
    .stat-card[b-tlvaa5rkrs],
    .widget-card[b-tlvaa5rkrs],
    .quick-actions[b-tlvaa5rkrs] { animation: none !important; }
    .stat-card[b-tlvaa5rkrs],
    .widget-card[b-tlvaa5rkrs],
    .mood-emoji-btn[b-tlvaa5rkrs],
    .quick-action-btn[b-tlvaa5rkrs] { transition: none !important; }
    .stat-card:hover[b-tlvaa5rkrs],
    .mood-emoji-btn:hover[b-tlvaa5rkrs],
    .quick-action-btn:hover[b-tlvaa5rkrs] { transform: none; }
}

/* ---- Daily Wellness Checklist ---- */
.checklist-widget .widget-header[b-tlvaa5rkrs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checklist-progress[b-tlvaa5rkrs] {
    font-size: .8rem;
    color: var(--tg-muted, #999);
    font-variant-numeric: tabular-nums;
}

.checklist-list[b-tlvaa5rkrs] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.checklist-item[b-tlvaa5rkrs] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .5rem;
    border-radius: var(--tg-radius-sm, 6px);
    cursor: pointer;
    transition: background .15s ease, opacity .2s ease;
    font-size: .88rem;
}

.checklist-item:hover[b-tlvaa5rkrs] {
    background: rgba(255,255,255,.04);
}

.checklist-item.done[b-tlvaa5rkrs] {
    opacity: .55;
}

.checklist-item.done .checklist-label[b-tlvaa5rkrs] {
    text-decoration: line-through;
}

.checklist-item input[type="checkbox"][b-tlvaa5rkrs] {
    accent-color: var(--tg-primary, #7c5cfc);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checklist-icon[b-tlvaa5rkrs] {
    font-size: 1rem;
    line-height: 1;
}

.checklist-label[b-tlvaa5rkrs] {
    color: var(--tg-text, #e0e0e0);
}

.checklist-complete-msg[b-tlvaa5rkrs] {
    margin-top: .5rem;
    padding: .4rem .6rem;
    background: rgba(124,92,252,.1);
    border-radius: var(--tg-radius-sm, 6px);
    color: var(--tg-primary, #7c5cfc);
    font-size: .82rem;
    font-weight: 600;
    text-align: center;
}
/* /Pages/EarlyAccess.razor.rz.scp.css */
/* Pages/EarlyAccess.razor.css — page-scoped, no @import */

/* Scoped to .ea-root so tokens don't leak to the rest of the dark-themed app */
.ea-root[b-jct4bzg5h6] {
    --tg-primary: #2C727E;
    --tg-ink: #0c2d31;
    --tg-muted: #55757b;
    --tg-card: #ffffff;
    --tg-line: #e7eef0;
    --tg-radius: 18px;
    --tg-shadow: 0 12px 36px rgba(10,40,50,.10);
    --ea-header-safe: clamp(160px, 20vh, 260px);
    --ea-date-top-offset: clamp(24px, 6vh, 56px);
    --tg-page-bg: #f6fbfc;
    padding: 0 1rem 4rem;
    background:
        radial-gradient(circle at 20% 20%, rgba(52,129,143,.22), transparent 55%),
        radial-gradient(circle at 80% 10%, rgba(30,70,90,.25), transparent 60%),
        radial-gradient(circle at 60% 80%, rgba(22,57,68,.18), transparent 60%),
        var(--tg-page-bg);
    background-size: 140% 140%, 160% 160%, 180% 180%, auto;
    animation: eaPageDrift-b-jct4bzg5h6 42s ease-in-out infinite alternate;
    position: relative;
    overflow: hidden;
}

.ea-hero[b-jct4bzg5h6] {
    display: grid;
    place-items: center;
    padding-top: var(--ea-header-safe);
    padding-bottom: .5rem;
    min-height: clamp(260px, 46vh, 520px); /* ensures the date never clips on top */
}

/* Date canvas area */
.ea-date-wrap[b-jct4bzg5h6] {
    position: relative;
    width: min(1100px, 96vw);
    height: clamp(180px, 34vh, 360px);
    margin-inline: auto;
    border-radius: clamp(32px, 5vw, 60px);
    border: 1px solid rgba(255,255,255,.015);
    overflow: hidden;
    isolation: isolate;
    background-image:
        radial-gradient(circle at 18% 18%, rgba(76,189,190,.85), transparent 58%),
        radial-gradient(circle at 82% 22%, rgba(120,197,255,.75), transparent 60%),
        radial-gradient(circle at 52% 82%, rgba(94,174,206,.65), transparent 65%),
        linear-gradient(135deg, #061520, #0e3441 48%, #041018 100%);
    background-size: 140% 140%, 120% 120%, 180% 180%, 100% 100%;
    background-position: 0% 0%, 50% 10%, 20% 60%, 50% 50%;
    animation: eaAmbientWave-b-jct4bzg5h6 26s ease-in-out infinite alternate;
    box-shadow: inset 0 0 120px rgba(3,10,14,.6), 0 30px 60px rgba(3,8,14,.4);
}
.ea-date-wrap[b-jct4bzg5h6]::before,
.ea-date-wrap[b-jct4bzg5h6]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.ea-date-wrap[b-jct4bzg5h6]::before {
    background:
        radial-gradient(circle at 15% 25%, rgba(96,196,210,.45), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(124,182,255,.45), transparent 45%),
        radial-gradient(circle at 60% 65%, rgba(246,215,138,.38), transparent 50%);
    filter: blur(32px);
    mix-blend-mode: screen;
    animation: eaAurora-b-jct4bzg5h6 18s ease-in-out infinite alternate;
}
.ea-date-wrap[b-jct4bzg5h6]::after {
    inset: -10px;
    border-radius: inherit;
    background:
        radial-gradient(circle at center, rgba(6,15,22,0) 58%, rgba(4,10,16,.35) 82%, rgba(3,8,14,.7) 98%);
    mix-blend-mode: normal;
    opacity: .9;
}
.ea-aurora[b-jct4bzg5h6],
.ea-particles[b-jct4bzg5h6] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.ea-aurora-band[b-jct4bzg5h6] {
    position: absolute;
    width: 160%;
    height: 80%;
    top: -10%;
    left: -30%;
    background: radial-gradient(circle at 30% 50%, rgba(108,223,224,.7), transparent 55%);
    filter: blur(48px);
    opacity: .65;
    mix-blend-mode: screen;
    transform: rotate(12deg);
    animation: eaAuroraDrift-b-jct4bzg5h6 18s ease-in-out infinite;
}
.ea-aurora-band.band-2[b-jct4bzg5h6] {
    top: 25%;
    left: -20%;
    background: radial-gradient(circle at 60% 50%, rgba(135,178,254,.8), transparent 60%);
    animation-duration: 22s;
    animation-delay: -4s;
}
.ea-aurora-band.band-3[b-jct4bzg5h6] {
    top: -15%;
    left: 10%;
    background: radial-gradient(circle at 40% 40%, rgba(251,215,142,.65), transparent 60%);
    animation-duration: 24s;
    animation-delay: -8s;
}
.ea-aurora-band.band-4[b-jct4bzg5h6] {
    top: 10%;
    left: 5%;
    background: radial-gradient(circle at 50% 50%, rgba(88,255,201,.65), transparent 65%);
    animation-duration: 26s;
    animation-delay: -12s;
}
.ea-particles span[b-jct4bzg5h6] {
    position: absolute;
    width: clamp(5px, 1vw, 10px);
    height: clamp(5px, 1vw, 10px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,.05));
    filter: drop-shadow(0 0 12px rgba(108,214,214,.85));
    animation: eaSpark-b-jct4bzg5h6 16s linear infinite;
    opacity: 0;
}
.ea-particles span:nth-child(odd)[b-jct4bzg5h6] { animation-duration: 20s; }
.ea-particles span:nth-child(3n)[b-jct4bzg5h6] { animation-duration: 24s; filter: drop-shadow(0 0 14px rgba(95,162,255,.85)); }
.ea-particles span:nth-child(1)[b-jct4bzg5h6] { top: 18%; left: 10%; animation-delay: -2s; }
.ea-particles span:nth-child(2)[b-jct4bzg5h6] { top: 30%; left: 25%; animation-delay: -4s; }
.ea-particles span:nth-child(3)[b-jct4bzg5h6] { top: 20%; left: 50%; animation-delay: -6s; }
.ea-particles span:nth-child(4)[b-jct4bzg5h6] { top: 15%; left: 72%; animation-delay: -8s; }
.ea-particles span:nth-child(5)[b-jct4bzg5h6] { top: 32%; left: 84%; animation-delay: -10s; }
.ea-particles span:nth-child(6)[b-jct4bzg5h6] { top: 60%; left: 8%; animation-delay: -12s; }
.ea-particles span:nth-child(7)[b-jct4bzg5h6] { top: 70%; left: 24%; animation-delay: -14s; }
.ea-particles span:nth-child(8)[b-jct4bzg5h6] { top: 58%; left: 44%; animation-delay: -16s; }
.ea-particles span:nth-child(9)[b-jct4bzg5h6] { top: 62%; left: 62%; animation-delay: -18s; }
.ea-particles span:nth-child(10)[b-jct4bzg5h6] { top: 50%; left: 78%; animation-delay: -20s; }
.ea-particles span:nth-child(11)[b-jct4bzg5h6] { top: 65%; left: 90%; animation-delay: -22s; }
.ea-particles span:nth-child(12)[b-jct4bzg5h6] { top: 78%; left: 70%; animation-delay: -24s; }
.ea-particles span:nth-child(13)[b-jct4bzg5h6] { top: 42%; left: 12%; animation-delay: -26s; }
.ea-particles span:nth-child(14)[b-jct4bzg5h6] { top: 45%; left: 34%; animation-delay: -28s; }
.ea-particles span:nth-child(15)[b-jct4bzg5h6] { top: 35%; left: 64%; animation-delay: -30s; }
.ea-particles span:nth-child(16)[b-jct4bzg5h6] { top: 48%; left: 52%; animation-delay: -32s; }
.ea-particles span:nth-child(17)[b-jct4bzg5h6] { top: 68%; left: 38%; animation-delay: -34s; }
.ea-particles span:nth-child(18)[b-jct4bzg5h6] { top: 24%; left: 88%; animation-delay: -36s; }
.ea-particles span:nth-child(19)[b-jct4bzg5h6] { top: 12%; left: 55%; animation-delay: -38s; }
.ea-particles span:nth-child(20)[b-jct4bzg5h6] { top: 74%; left: 18%; animation-delay: -40s; }

.ea-date-text[b-jct4bzg5h6] {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ecfffb;
    padding: clamp(0.75rem, 3vw, 2.5rem) clamp(0.5rem, 4vw, 2.6rem);
    font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-transform: none;
    filter: drop-shadow(0 4px 18px rgba(26,70,78,.45));
}
.ea-date-caption[b-jct4bzg5h6] {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35ch;
    font-size: clamp(.9rem, 2vw, 1.3rem);
    letter-spacing: .42em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: .9;
    animation: eaTextRise-b-jct4bzg5h6 1.2s ease forwards;
}
.ea-date-main[b-jct4bzg5h6] {
    display: block;
    margin-top: clamp(.35rem, 2vh, .75rem);
    font-size: clamp(2.6rem, 10vw, 5.8rem);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: clamp(.04em, 1vw, .12em);
    background-image:
        radial-gradient(circle at 15% 20%, #fef4ff, #fef4ff 40%, transparent 68%),
        linear-gradient(120deg, #4dd9c9 0%, #5d9ce6 35%, #f6d365 70%, #ffd6a5 100%);
    color: #f9ffff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: eaTextSheen-b-jct4bzg5h6 11s ease-in-out infinite alternate, eaTextRise-b-jct4bzg5h6 1.6s ease forwards;
}

/* Accessible but visually hidden text */
.sr-only[b-jct4bzg5h6] {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* CTA card */
.ea-card[b-jct4bzg5h6] {
    position: relative;
    margin: 1.6rem auto 0;
    max-width: 640px;
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    box-shadow: var(--tg-shadow);
}
.ea-card[b-jct4bzg5h6]::after {
    content: "";
    position: absolute;
    inset: -6px -8px -10px;
    border-radius: calc(var(--tg-radius) + 12px);
    box-shadow: 0 24px 60px rgba(10,40,50,.08);
    pointer-events: none;
}
.ea-card-body[b-jct4bzg5h6] { padding: 1.6rem 1.4rem; text-align: center; }
.ea-card-title[b-jct4bzg5h6] { margin: 0 0 .25rem; color: var(--tg-primary); font-weight: 800; }
.ea-card-sub[b-jct4bzg5h6] { margin: 0 0 1rem; color: var(--tg-muted); }

.ea-btn[b-jct4bzg5h6] {
    display: inline-block;
    padding: .6rem 1rem;
    border-radius: 999px;
    background: var(--tg-primary); color: #fff; border: 1px solid var(--tg-primary);
    font-weight: 800; text-decoration: none;
}
.ea-btn:hover[b-jct4bzg5h6] { filter: brightness(1.05); }

/* Inline alert */
.ea-alert[b-jct4bzg5h6] {
    background: #fff2f2; border: 1px solid #ffdede; color: #7b1c1c;
    border-radius: 10px; padding: .6rem; margin-bottom: .75rem;
}

.ea-muted[b-jct4bzg5h6] { color: var(--tg-muted); margin: .75rem 0 0; }
.sm[b-jct4bzg5h6] { font-size: .9rem; }

/* Images inside the CTA (if any fallback) */
.ea-card img[b-jct4bzg5h6] { max-width: 240px; width: 100%; height: auto; }

/* Google button (GIS-like) */
.google-btn[b-jct4bzg5h6]{
    display:inline-flex; align-items:center; gap:.6rem;
    height:40px; padding:0 16px; border-radius:20px;
    background:#fff; border:1px solid #dadce0;
    font:600 14px/1.1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
    color:#3c4043; text-decoration:none;
    box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.google-btn:hover[b-jct4bzg5h6]{ background:#f8f9fa; }
.google-btn:active[b-jct4bzg5h6]{ background:#f1f3f4; }
.google-btn:focus-visible[b-jct4bzg5h6]{ outline:3px solid rgba(26,115,232,.35); outline-offset:2px; }
.google-icon[b-jct4bzg5h6]{ width:20px; height:20px; flex:0 0 20px; display:block; }

/* Small screens */
@media (max-width: 640px) {
    .ea-card[b-jct4bzg5h6] { margin-top: .8rem; }
    .ea-root[b-jct4bzg5h6] { --ea-date-top-offset: clamp(28px, 7vh, 64px); }
}

@keyframes eaAurora-b-jct4bzg5h6 {
    0% { transform: translate3d(-4%, -2%, 0) scale(1.02); opacity: .8; }
    50% { transform: translate3d(4%, 1%, 0) scale(1.06); opacity: 1; }
    100% { transform: translate3d(-2%, 3%, 0) scale(1.03); opacity: .9; }
}

@keyframes eaTextSheen-b-jct4bzg5h6 {
    0% { background-position: 0% 50%; }
    50% { background-position: 60% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes eaPageDrift-b-jct4bzg5h6 {
    0% { background-position: 0% 0%, 20% 10%, 40% 70%, 0 0; }
    50% { background-position: 20% 15%, 40% 0%, 55% 60%, 0 0; }
    100% { background-position: 0% 0%, 20% 10%, 40% 70%, 0 0; }
}

@keyframes eaAmbientWave-b-jct4bzg5h6 {
    0% { background-position: 0% 0%, 50% 10%, 20% 60%, 50% 50%; }
    50% { background-position: 45% 25%, 55% 25%, 32% 78%, 50% 52%; }
    100% { background-position: 0% 0%, 50% 10%, 20% 60%, 50% 50%; }
}

@keyframes eaAuroraDrift-b-jct4bzg5h6 {
    0% { transform: translate3d(-6%, -4%, 0) scale(1) rotate(10deg); opacity: .45; }
    50% { transform: translate3d(8%, 6%, 0) scale(1.1) rotate(6deg); opacity: .85; }
    100% { transform: translate3d(-4%, 4%, 0) scale(1.05) rotate(14deg); opacity: .6; }
}

@keyframes eaSpark-b-jct4bzg5h6 {
    0% { transform: translate3d(0,0,0) scale(.7); opacity: 0; }
    8% { opacity: .85; }
    50% { transform: translate3d(-10px, -28px, 0) scale(1.2); opacity: .5; }
    100% { transform: translate3d(-26px, -54px, 0) scale(.5); opacity: 0; }
}

@keyframes eaTextRise-b-jct4bzg5h6 {
    0% { opacity: 0; transform: translateY(35%) scale(.9); filter: blur(10px); }
    60% { opacity: 1; transform: translateY(-3%) scale(1.03); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ea-root[b-jct4bzg5h6] {
        animation: none;
    }
    .ea-date-wrap[b-jct4bzg5h6] {
        animation: none;
    }
    .ea-date-wrap[b-jct4bzg5h6]::before,
    .ea-date-main[b-jct4bzg5h6],
    .ea-aurora-band[b-jct4bzg5h6],
    .ea-particles span[b-jct4bzg5h6] {
        animation: none;
    }
    .ea-particles span[b-jct4bzg5h6] { opacity: .25; }
}
/* /Pages/EarlyAccessThanks.razor.rz.scp.css */
/* EarlyAccessThanks — TheraGen landing page theme */

.ea-root[b-061xl55z7o] {
    position: relative;
    min-height: 100vh;
    background: #02111b;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem 3rem;
    font-family: Outfit, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Ambient background orbs ---------- */

.ea-bg-orbs[b-061xl55z7o] {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ea-orb[b-061xl55z7o] {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.18;
    animation: ea-float-b-061xl55z7o 20s ease-in-out infinite alternate;
}

.ea-orb--1[b-061xl55z7o] {
    width: clamp(240px, 45vw, 500px);
    height: clamp(240px, 45vw, 500px);
    background: #4ce0c6;
    top: -10%;
    left: -8%;
    animation-duration: 22s;
}

.ea-orb--2[b-061xl55z7o] {
    width: clamp(200px, 35vw, 420px);
    height: clamp(200px, 35vw, 420px);
    background: #9cd5ff;
    top: 30%;
    right: -12%;
    animation-duration: 26s;
    animation-delay: -6s;
}

.ea-orb--3[b-061xl55z7o] {
    width: clamp(160px, 28vw, 340px);
    height: clamp(160px, 28vw, 340px);
    background: #f4c4d7;
    bottom: -5%;
    left: 25%;
    animation-duration: 24s;
    animation-delay: -12s;
}

@keyframes ea-float-b-061xl55z7o {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(30px, -20px) scale(1.08); }
    100% { transform: translate(-15px, 25px) scale(0.95); }
}

/* ---------- Hero ---------- */

.ea-hero[b-061xl55z7o] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: clamp(2rem, 6vh, 4rem);
    width: 100%;
    max-width: 900px;
}

/* ---------- Logo ---------- */

.ea-logo-wrap[b-061xl55z7o] {
    position: relative;
    width: clamp(60px, 12vw, 100px);
    height: clamp(60px, 12vw, 100px);
    margin-bottom: clamp(1rem, 3vh, 2rem);
    border-radius: 50%;
    overflow: hidden;
}

.ea-logo[b-061xl55z7o] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.ea-logo.animated[b-061xl55z7o] {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.ea-logo.static[b-061xl55z7o] {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.ea-logo-wrap:hover .ea-logo.animated[b-061xl55z7o] { opacity: 0; }
.ea-logo-wrap:hover .ea-logo.static[b-061xl55z7o]   { opacity: 1; }

/* ---------- Date canvas ---------- */

.ea-date-block[b-061xl55z7o] {
    position: relative;
    width: min(860px, 94vw);
    height: clamp(120px, 22vh, 240px);
    margin-inline: auto;
}

.ea-date-block canvas[b-061xl55z7o] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ---------- Card ---------- */

.ea-card[b-061xl55z7o] {
    position: relative;
    z-index: 1;
    margin: clamp(0.8rem, 2vh, 1.6rem) auto 0;
    max-width: 520px;
    width: 100%;
    background: rgba(5, 18, 26, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.ea-card-body[b-061xl55z7o] {
    padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.8rem);
    text-align: center;
}

.ea-card-title[b-061xl55z7o] {
    margin: 0 0 0.5rem;
    color: #4ce0c6;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ea-card-sub[b-061xl55z7o] {
    margin: 0 0 1.2rem;
    color: #a9cdd1;
    font-size: clamp(0.88rem, 2vw, 1rem);
    line-height: 1.65;
}

/* ---------- Button ---------- */

.ea-btn[b-061xl55z7o] {
    display: inline-block;
    padding: 0.65rem 1.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #4ce0c6 0%, #9cd5ff 100%);
    color: #02111b;
    font-weight: 700;
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
}

.ea-btn:hover[b-061xl55z7o] {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(76, 224, 198, 0.25);
}

.ea-btn:active[b-061xl55z7o] {
    transform: translateY(0);
}

/* ---------- Footer ---------- */

.ea-footer[b-061xl55z7o] {
    position: relative;
    z-index: 1;
    margin-top: clamp(1.5rem, 4vh, 2.5rem);
    color: #a9cdd1;
    font-size: clamp(0.78rem, 1.6vw, 0.88rem);
    opacity: 0.6;
    text-align: center;
}

/* ---------- Accessibility ---------- */

.sr-only[b-061xl55z7o] {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .ea-orb[b-061xl55z7o] { animation: none; }
    .ea-btn[b-061xl55z7o] { transition: none; }
}

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
    .ea-card[b-061xl55z7o] { margin-top: 0.6rem; border-radius: 16px; }
    .ea-card-body[b-061xl55z7o] { padding: 1rem; }
}
/* /Pages/Exercises.razor.rz.scp.css */
/* Exercises.razor.css - Scoped styles using TheraGen design system */

/* ============ Container & Layout ============ */
.exercises-container[b-295g426v0b] {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    animation: fadeInUp-b-295g426v0b 0.6s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
}

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

/* ============ Page Header ============ */
.page-header[b-295g426v0b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.header-content h1[b-295g426v0b] {
    font-size: var(--tg-h1, clamp(1.5rem, 2.4vw, 2rem));
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
    margin: 0 0 0.25rem 0;
}

.subtitle[b-295g426v0b] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
    margin: 0;
}

.btn-new[b-295g426v0b] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    font-weight: 800;
    font-size: 0.9rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 20px rgba(76, 224, 198, 0.25);
}

.btn-new:hover[b-295g426v0b] {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(76, 224, 198, 0.35);
}

/* ============ Loading State ============ */
.loading-state[b-295g426v0b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    color: var(--tg-muted, #a9cdd1);
}

.loader[b-295g426v0b] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--tg-line, rgba(255,255,255,.08));
    border-top-color: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    animation: spin-b-295g426v0b 1s linear infinite;
    margin-bottom: 0.75rem;
}

@keyframes spin-b-295g426v0b {
    to { transform: rotate(360deg); }
}

.error-state[b-295g426v0b] {
    text-align: center;
    padding: 3rem 2rem;
    color: #f87171;
}

.error-state p[b-295g426v0b] {
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

/* ============ Statistics Grid ============ */
.stats-grid[b-295g426v0b] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.stat-card[b-295g426v0b] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius-sm, 16px);
    padding: 0.75rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.stat-card:hover[b-295g426v0b] {
    transform: translateY(-2px);
    border-color: rgba(76, 224, 198, 0.2);
}

.stat-icon[b-295g426v0b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--tg-muted, #a9cdd1);
}

.stat-icon.sessions[b-295g426v0b]  { color: #34d399; }
.stat-icon.minutes[b-295g426v0b]   { color: var(--tg-accent-2, #9cd5ff); }
.stat-icon.mood[b-295g426v0b]      { color: var(--tg-primary, #4ce0c6); }
.stat-icon.streak[b-295g426v0b]    { color: #fbbf24; }

.stat-value[b-295g426v0b] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
    line-height: 1.2;
}

.stat-label[b-295g426v0b] {
    font-size: 0.7rem;
    color: var(--tg-muted, #a9cdd1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ============ Filter Tabs ============ */
.filter-bar[b-295g426v0b] {
    margin-bottom: 1.25rem;
}

.tab-bar[b-295g426v0b] {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.tab[b-295g426v0b] {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    font-family: inherit;
}

.tab:hover[b-295g426v0b] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--tg-ink, #ecf8f5);
}

.tab.active[b-295g426v0b] {
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    border-color: transparent;
    font-weight: 800;
}

/* ============ Exercises Grid ============ */
.exercises-grid[b-295g426v0b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.75rem;
}

.exercise-card[b-295g426v0b] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.exercise-card:hover[b-295g426v0b] {
    transform: translateY(-3px);
    border-color: rgba(76, 224, 198, 0.25);
    box-shadow: var(--tg-shadow-sm, 0 12px 32px rgba(2,11,18,.4));
}

.exercise-header[b-295g426v0b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* ============ Modality Badge ============ */
.exercise-modality[b-295g426v0b] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(76, 224, 198, 0.1);
    color: var(--tg-primary, #4ce0c6);
}

.exercise-modality.cbt[b-295g426v0b]         { background: rgba(76,224,198,.15);  color: #4ce0c6; }
.exercise-modality.dbt[b-295g426v0b]         { background: rgba(167,139,250,.15); color: #a78bfa; }
.exercise-modality.relaxation[b-295g426v0b]  { background: rgba(156,213,255,.15); color: #9cd5ff; }
.exercise-modality.mindfulness[b-295g426v0b] { background: rgba(251,191,36,.15);  color: #fbbf24; }
.exercise-modality.act[b-295g426v0b]         { background: rgba(251,113,133,.15); color: #fb7185; }

/* ============ Exercise Content ============ */
.exercise-title[b-295g426v0b] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
    margin: 0 0 0.35rem 0;
}

.exercise-description[b-295g426v0b] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

/* ============ Exercise Info Row ============ */
.exercise-info[b-295g426v0b] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.difficulty-badge[b-295g426v0b] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.difficulty-badge.beginner[b-295g426v0b]     { background: rgba(52,211,153,.15);  color: #34d399; }
.difficulty-badge.intermediate[b-295g426v0b] { background: rgba(156,213,255,.15); color: #9cd5ff; }
.difficulty-badge.advanced[b-295g426v0b]     { background: rgba(167,139,250,.15); color: #a78bfa; }

.exercise-duration[b-295g426v0b] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--tg-muted, #a9cdd1);
}

.exercise-rating[b-295g426v0b] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--tg-muted, #a9cdd1);
}

/* ============ Condition Tags ============ */
.condition-tags[b-295g426v0b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.condition-tag[b-295g426v0b] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--tg-muted, #a9cdd1);
}

/* ============ Exercise Footer ============ */
.exercise-footer[b-295g426v0b] {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tg-line, rgba(255,255,255,.06));
    display: flex;
    justify-content: flex-end;
}

/* ============ Programs Section ============ */
.programs-section[b-295g426v0b] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--tg-line, rgba(255,255,255,.08));
}

.section-header[b-295g426v0b] {
    margin-bottom: 1rem;
}

.section-header h2[b-295g426v0b] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
    margin: 0 0 0.25rem 0;
}

.programs-grid[b-295g426v0b] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.program-card[b-295g426v0b] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.program-card:hover[b-295g426v0b] {
    transform: translateY(-2px);
    border-color: rgba(76, 224, 198, 0.25);
    box-shadow: var(--tg-shadow-sm, 0 12px 32px rgba(2,11,18,.4));
}

.program-content[b-295g426v0b] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.program-info[b-295g426v0b] {
    flex: 1;
}

.program-title[b-295g426v0b] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
    margin: 0.4rem 0 0.3rem 0;
}

.program-description[b-295g426v0b] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.program-meta[b-295g426v0b] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.program-duration[b-295g426v0b],
.program-enrollments[b-295g426v0b] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--tg-muted, #a9cdd1);
}

.program-action[b-295g426v0b] {
    flex-shrink: 0;
}

/* ============ Session Phase Indicator ============ */
.session-phase[b-295g426v0b] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.25rem;
    gap: 0;
    border-bottom: 1px solid var(--tg-line, rgba(255,255,255,.08));
}

.phase-step[b-295g426v0b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.phase-step span[b-295g426v0b] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--tg-muted, #a9cdd1);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
}

.phase-step.active span[b-295g426v0b] {
    color: var(--tg-primary, #4ce0c6);
}

.phase-dot[b-295g426v0b] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    border: 2px solid var(--tg-line, rgba(255,255,255,.15));
    color: var(--tg-muted, #a9cdd1);
    background: transparent;
    transition: all 0.2s ease;
}

.phase-step.active .phase-dot[b-295g426v0b] {
    border-color: var(--tg-primary, #4ce0c6);
    color: var(--tg-primary, #4ce0c6);
    background: rgba(76, 224, 198, 0.1);
}

.phase-step.completed .phase-dot[b-295g426v0b] {
    border-color: var(--tg-primary, #4ce0c6);
    background: var(--tg-primary, #4ce0c6);
    color: #04181e;
}

.phase-line[b-295g426v0b] {
    width: 40px;
    height: 2px;
    background: var(--tg-line, rgba(255,255,255,.08));
    margin: 0 0.5rem;
    margin-bottom: 1.2rem;
    transition: background 0.2s ease;
}

.phase-line.active[b-295g426v0b] {
    background: var(--tg-primary, #4ce0c6);
}

/* ============ Phase Content ============ */
.phase-content h4[b-295g426v0b] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
    margin: 0 0 0.35rem 0;
}

.phase-hint[b-295g426v0b] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 1rem;
}

.exercise-full-description[b-295g426v0b] {
    font-size: 0.9rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.6;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--tg-line, rgba(255,255,255,.06));
}

/* ============ Step List ============ */
.step-list[b-295g426v0b] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.step-item[b-295g426v0b] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.step-item:hover[b-295g426v0b] {
    background: rgba(255, 255, 255, 0.04);
}

.step-item.completed[b-295g426v0b] {
    opacity: 0.7;
}

.step-item.completed .step-text[b-295g426v0b] {
    text-decoration: line-through;
}

.step-checkbox[b-295g426v0b] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--tg-line, rgba(255,255,255,.15));
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    color: transparent;
    margin-top: 0.1rem;
}

.step-checkbox:hover[b-295g426v0b] {
    border-color: var(--tg-primary, #4ce0c6);
}

.step-item.completed .step-checkbox[b-295g426v0b] {
    background: var(--tg-primary, #4ce0c6);
    border-color: var(--tg-primary, #4ce0c6);
    color: #04181e;
}

.step-content[b-295g426v0b] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.step-number[b-295g426v0b] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tg-primary, #4ce0c6);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.step-text[b-295g426v0b] {
    font-size: 0.88rem;
    color: var(--tg-ink, #ecf8f5);
    line-height: 1.5;
}

/* ============ Exercise Tips ============ */
.exercise-tips[b-295g426v0b] {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(251, 191, 36, 0.05);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 12px;
}

.exercise-tips h4[b-295g426v0b] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fbbf24;
    margin: 0 0 0.3rem 0;
}

.exercise-tips p[b-295g426v0b] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.5;
    margin: 0;
}

/* ============ Mood Slider ============ */
.mood-slider[b-295g426v0b] {
    margin: 1rem 0;
}

/* ============ Star Rating ============ */
.star-rating[b-295g426v0b] {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.star[b-295g426v0b] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 8px;
    transition: transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tg-muted, #a9cdd1);
}

.star:hover[b-295g426v0b] {
    transform: scale(1.15);
}

.star.selected[b-295g426v0b] {
    color: #fbbf24;
}

/* ============ Buttons ============ */
.btn-primary[b-295g426v0b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    font-weight: 800;
    font-size: 0.9rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 20px rgba(76, 224, 198, 0.25);
}

.btn-primary:hover[b-295g426v0b] {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(76, 224, 198, 0.35);
}

.btn-primary:disabled[b-295g426v0b] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-295g426v0b] {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-295g426v0b] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tg-ink, #ecf8f5);
}

.btn-small[b-295g426v0b] {
    font-size: 0.8rem;
    padding: 0.35rem 0.8rem;
}

.btn-icon[b-295g426v0b] {
    padding: 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 8px;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover[b-295g426v0b] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tg-ink, #ecf8f5);
}

/* ============ Modal ============ */
.modal-overlay[b-295g426v0b] {
    position: fixed;
    inset: 0;
    background: rgba(2, 17, 27, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 1rem;
    animation: fadeIn-b-295g426v0b 0.2s ease;
}

@keyframes fadeIn-b-295g426v0b {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal[b-295g426v0b] {
    display: block;
    position: static;
    height: auto;
    background: var(--tg-card, rgba(5,18,26,.95));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--tg-shadow, 0 25px 80px rgba(0,0,0,.45));
    animation: slideUp-b-295g426v0b 0.3s ease;
}

@keyframes slideUp-b-295g426v0b {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-large[b-295g426v0b] { max-width: 560px; }

.modal-header[b-295g426v0b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--tg-line, rgba(255,255,255,.08));
}

.modal-header h3[b-295g426v0b] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
}

.btn-close[b-295g426v0b] {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    padding: 0.4rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    opacity: 1;
    width: auto;
    height: auto;
    box-sizing: border-box;
}

.btn-close:hover[b-295g426v0b] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--tg-ink, #ecf8f5);
}

.modal-body[b-295g426v0b] { padding: 1.25rem; }

.modal-footer[b-295g426v0b] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--tg-line, rgba(255,255,255,.08));
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* ============ Form Groups ============ */
.form-group[b-295g426v0b] { margin-bottom: 1rem; }

.form-group label[b-295g426v0b] {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.4rem;
}

.form-group input[b-295g426v0b],
.form-group select[b-295g426v0b],
.form-group textarea[b-295g426v0b] {
    width: 100%;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 12px;
    font-size: 0.9rem;
    color: var(--tg-ink, #ecf8f5);
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input[b-295g426v0b]::placeholder,
.form-group textarea[b-295g426v0b]::placeholder {
    color: var(--tg-muted, #a9cdd1);
}

.form-group input:focus[b-295g426v0b],
.form-group select:focus[b-295g426v0b],
.form-group textarea:focus[b-295g426v0b] {
    outline: none;
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: var(--tg-focus, 0 0 0 3px rgba(76,224,198,.35));
}

.form-group input[type="range"][b-295g426v0b] {
    padding: 0;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    cursor: pointer;
}

.form-group input[type="range"][b-295g426v0b]::-webkit-slider-runnable-track {
    background: var(--tg-line, rgba(255,255,255,.08));
    height: 6px;
    border-radius: 999px;
}

.form-group input[type="range"][b-295g426v0b]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    border: 2px solid #04181e;
    margin-top: -6px;
}

.form-group input[type="range"]:focus[b-295g426v0b] {
    box-shadow: none;
}

.range-labels[b-295g426v0b] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--tg-muted, #a9cdd1);
    margin-top: 0.25rem;
}

/* ============ Empty State ============ */
.empty-state[b-295g426v0b] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--tg-muted, #a9cdd1);
}

.empty-icon[b-295g426v0b] {
    margin-bottom: 0.75rem;
}

.empty-icon svg[b-295g426v0b],
.empty-state svg[b-295g426v0b] {
    color: rgba(76, 224, 198, 0.2);
}

.empty-state p[b-295g426v0b] {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    color: var(--tg-ink, #ecf8f5);
}

.help-text[b-295g426v0b] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}

/* ============ Responsive ============ */
@media (max-width: 640px) {
    .stats-grid[b-295g426v0b] {
        grid-template-columns: repeat(2, 1fr);
    }

    .exercises-grid[b-295g426v0b] {
        grid-template-columns: 1fr;
    }

    .page-header[b-295g426v0b] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .btn-new[b-295g426v0b] {
        align-self: center;
    }

    .tab-bar[b-295g426v0b] {
        justify-content: flex-start;
    }

    .program-content[b-295g426v0b] {
        flex-direction: column;
        align-items: flex-start;
    }

    .program-action[b-295g426v0b] {
        align-self: flex-end;
    }

    .modal-footer[b-295g426v0b] {
        flex-wrap: wrap;
    }

    .phase-line[b-295g426v0b] {
        width: 24px;
    }
}

/* ============ Quick Tools ============ */
.quick-tools[b-295g426v0b] { margin-bottom: 20px; }
.quick-tools h3[b-295g426v0b] { margin: 0 0 10px; font-size: .95rem; color: var(--tg-ink, #fff); font-weight: 600; }
.quick-tools-row[b-295g426v0b] { display: flex; gap: 12px; }
.quick-tool-btn[b-295g426v0b] {
    flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; background: rgba(76,224,198,.04);
    border: 1px solid rgba(76,224,198,.12); border-radius: 14px;
    cursor: pointer; transition: all .2s; text-align: left; color: #fff;
}
.quick-tool-btn:hover[b-295g426v0b] { background: rgba(76,224,198,.08); border-color: rgba(76,224,198,.25); }
.qt-icon[b-295g426v0b] { font-size: 1.4rem; }
.qt-name[b-295g426v0b] { font-weight: 600; font-size: .9rem; flex: 1; }
.qt-time[b-295g426v0b] { font-size: .75rem; color: var(--tg-muted, rgba(255,255,255,.4)); }
@media (max-width: 500px) { .quick-tools-row[b-295g426v0b] { flex-direction: column; } }

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce) {
    .exercises-container[b-295g426v0b], .modal[b-295g426v0b], .exercise-card[b-295g426v0b], .program-card[b-295g426v0b] { animation: none; }
}
/* /Pages/FreeTrial.razor.rz.scp.css */
/* FreeTrial.razor.css — TheraGen design-token refresh */

.trial-container[b-0rol5ievst] {
    max-width: 700px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    animation: trialFadeIn-b-0rol5ievst .5s var(--tg-ease-soft, ease-out) both;
}

@keyframes trialFadeIn-b-0rol5ievst {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Header ---- */
.page-header[b-0rol5ievst] { margin-bottom: 1.5rem; }

.page-header h1[b-0rol5ievst] {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 700;
    color: var(--tg-ink);
    margin: 0;
}

.subtitle[b-0rol5ievst] {
    font-size: .85rem;
    color: var(--tg-muted);
    margin: .25rem 0 0;
}

/* ---- Loading / Error ---- */
.loading-state[b-0rol5ievst], .error-state[b-0rol5ievst] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--tg-muted);
    text-align: center;
    gap: .75rem;
}

.loader[b-0rol5ievst] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(76,224,198,.15);
    border-top-color: var(--tg-primary);
    border-radius: 50%;
    animation: spin-b-0rol5ievst .8s linear infinite;
}

@keyframes spin-b-0rol5ievst { to { transform: rotate(360deg); } }

/* ---- Trial Hero (Eligible) ---- */
.trial-hero[b-0rol5ievst] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
    margin-bottom: 1rem;
}

.hero-badge[b-0rol5ievst] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(76,224,198,.15), rgba(156,213,255,.1));
    border: 1px solid rgba(76,224,198,.2);
    border-radius: 24px;
    margin-bottom: 1.25rem;
    color: var(--tg-primary);
}

.trial-hero h2[b-0rol5ievst] {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 700;
    color: var(--tg-ink);
    margin: 0 0 .5rem;
}

.hero-desc[b-0rol5ievst] {
    font-size: .85rem;
    color: var(--tg-muted);
    margin: 0 0 1.5rem;
}

/* ---- Features List ---- */
.features-list[b-0rol5ievst] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1.75rem;
    text-align: left;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.feature-item[b-0rol5ievst] {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    color: rgba(197,221,225,.9);
}

.feature-item svg[b-0rol5ievst] { color: var(--tg-primary); flex-shrink: 0; }

.start-trial-btn[b-0rol5ievst] {
    font-size: 1rem;
    padding: .8rem 2.5rem;
}

/* ---- Trial Status (Active) ---- */
.trial-status-card[b-0rol5ievst] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    padding: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
    margin-bottom: 1rem;
}

.status-badge[b-0rol5ievst] {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .75rem;
}

.status-badge.active[b-0rol5ievst] {
    background: rgba(76,224,198,.15);
    color: var(--tg-primary);
    border: 1px solid rgba(76,224,198,.3);
}

.trial-plan[b-0rol5ievst] {
    font-size: .85rem;
    color: var(--tg-muted);
    margin-bottom: 1rem;
}

.days-remaining[b-0rol5ievst] { margin-bottom: 1.25rem; }

.days-number[b-0rol5ievst] {
    font-size: 3rem;
    font-weight: 800;
    color: var(--tg-primary);
    line-height: 1;
}

.days-label[b-0rol5ievst] {
    display: block;
    font-size: .85rem;
    color: var(--tg-muted);
    margin-top: .25rem;
}

/* ---- Progress Bar ---- */
.trial-progress[b-0rol5ievst] { margin-bottom: 1.5rem; }

.progress-bar[b-0rol5ievst] {
    height: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: .5rem;
}

.progress-fill[b-0rol5ievst] {
    height: 100%;
    background: linear-gradient(90deg, var(--tg-primary), var(--tg-accent-2));
    border-radius: 3px;
    transition: width .5s var(--tg-ease);
}

.progress-dates[b-0rol5ievst] {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    color: rgba(107,143,150,.8);
}

/* ---- Trial Actions ---- */
.trial-actions[b-0rol5ievst] {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Trial Ended ---- */
.trial-ended-card[b-0rol5ievst] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    padding: clamp(2rem, 3vw, 3rem);
    text-align: center;
    margin-bottom: 1rem;
}

.ended-icon[b-0rol5ievst] {
    color: rgba(107,143,150,.8);
    margin-bottom: 1rem;
}

.trial-ended-card h2[b-0rol5ievst] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tg-ink);
    margin: 0 0 .5rem;
}

.ended-desc[b-0rol5ievst] {
    font-size: .85rem;
    color: var(--tg-muted);
    margin: 0 0 1.5rem;
}

/* ---- Promo Code ---- */
.promo-section[b-0rol5ievst] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 18px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.promo-section h2[b-0rol5ievst] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin: 0 0 .75rem;
}

.promo-input-row[b-0rol5ievst] {
    display: flex;
    gap: .5rem;
}

.promo-input[b-0rol5ievst] {
    flex: 1;
    padding: .55rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--tg-line);
    background: rgba(5,18,26,.6);
    color: var(--tg-ink);
    font-size: .82rem;
    outline: none;
    transition: border-color .18s var(--tg-ease);
}

.promo-input:focus[b-0rol5ievst] { border-color: var(--tg-primary); }

.promo-btn[b-0rol5ievst] { white-space: nowrap; }

.promo-message[b-0rol5ievst] {
    font-size: .78rem;
    margin: .5rem 0 0;
}

.promo-message.success[b-0rol5ievst] { color: #34d399; }
.promo-message.error[b-0rol5ievst] { color: #f87171; }

/* ---- Buttons ---- */
.btn-primary[b-0rol5ievst] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.5rem;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--tg-primary);
    color: var(--tg-bg-deep);
    transition: filter .18s var(--tg-ease);
    justify-content: center;
}

.btn-primary:hover[b-0rol5ievst] { filter: brightness(1.08); }
.btn-primary:disabled[b-0rol5ievst] { opacity: .5; cursor: not-allowed; }

.btn-secondary[b-0rol5ievst] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.5rem;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.12);
    background: transparent;
    color: var(--tg-muted);
    transition: background .18s var(--tg-ease), border-color .18s var(--tg-ease);
}

.btn-secondary:hover[b-0rol5ievst] {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.2);
}

.btn-secondary:disabled[b-0rol5ievst] { opacity: .5; cursor: not-allowed; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .trial-actions[b-0rol5ievst] { flex-direction: column; }
    .trial-actions .btn-primary[b-0rol5ievst],
    .trial-actions .btn-secondary[b-0rol5ievst] { width: 100%; justify-content: center; }
    .promo-input-row[b-0rol5ievst] { flex-direction: column; }
}

/* ---- Accessibility: reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
    .trial-container[b-0rol5ievst] { animation: none !important; }
    .progress-fill[b-0rol5ievst],
    .promo-input[b-0rol5ievst] { transition: none !important; }
}
/* /Pages/Goals.razor.rz.scp.css */
/* Goals.razor.css - Scoped styles using TheraGen design system */

/* ============ Container & Layout ============ */
.goals-container[b-wvuy53eluw] {
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    animation: fadeInUp-b-wvuy53eluw 0.6s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
}

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

/* ============ Page Header ============ */
.page-header[b-wvuy53eluw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.header-content h1[b-wvuy53eluw] {
    font-size: var(--tg-h1, clamp(1.5rem, 2.4vw, 2rem));
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
    margin: 0 0 0.25rem 0;
}

.subtitle[b-wvuy53eluw] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
    margin: 0;
}

.btn-new[b-wvuy53eluw] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    font-weight: 800;
    font-size: 0.9rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 20px rgba(76, 224, 198, 0.25);
}

.btn-new:hover[b-wvuy53eluw] {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(76, 224, 198, 0.35);
}

/* ============ Loading State ============ */
.loading-state[b-wvuy53eluw],
.error-state[b-wvuy53eluw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    color: var(--tg-muted, #a9cdd1);
}

.loader[b-wvuy53eluw] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--tg-line, rgba(255,255,255,.08));
    border-top-color: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    animation: spin-b-wvuy53eluw 1s linear infinite;
    margin-bottom: 0.75rem;
}

@keyframes spin-b-wvuy53eluw {
    to { transform: rotate(360deg); }
}

/* ============ Statistics Grid ============ */
.stats-grid[b-wvuy53eluw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.stat-card[b-wvuy53eluw] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius-sm, 16px);
    padding: 0.75rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.stat-card:hover[b-wvuy53eluw] {
    transform: translateY(-2px);
    border-color: rgba(76, 224, 198, 0.2);
}

.stat-icon[b-wvuy53eluw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--tg-muted, #a9cdd1);
}

.stat-icon.active[b-wvuy53eluw] { color: var(--tg-accent-2, #9cd5ff); }
.stat-icon.completed[b-wvuy53eluw] { color: #34d399; }
.stat-icon.rate[b-wvuy53eluw] { color: var(--tg-primary, #4ce0c6); }
.stat-icon.milestones[b-wvuy53eluw] { color: #fbbf24; }

.stat-value[b-wvuy53eluw] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
    line-height: 1.2;
}

.stat-label[b-wvuy53eluw] {
    font-size: 0.7rem;
    color: var(--tg-muted, #a9cdd1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ============ Filter Tabs ============ */
.filter-bar[b-wvuy53eluw] {
    margin-bottom: 1.25rem;
}

.tab-bar[b-wvuy53eluw] {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.tab[b-wvuy53eluw] {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    font-family: inherit;
}

.tab:hover[b-wvuy53eluw] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--tg-ink, #ecf8f5);
}

.tab.active[b-wvuy53eluw] {
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    border-color: transparent;
    font-weight: 800;
}

/* ============ Goals List ============ */
.goals-list[b-wvuy53eluw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.goal-card[b-wvuy53eluw] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    cursor: pointer;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.goal-card:hover[b-wvuy53eluw] {
    transform: translateY(-3px);
    border-color: rgba(76, 224, 198, 0.25);
    box-shadow: var(--tg-shadow-sm, 0 12px 32px rgba(2,11,18,.4));
}

.goal-card.completed[b-wvuy53eluw] {
    opacity: 0.8;
}

.goal-card.completed[b-wvuy53eluw]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #34d399, #10b981);
}

.goal-header[b-wvuy53eluw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.goal-category[b-wvuy53eluw] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: rgba(76, 224, 198, 0.1);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tg-primary, #4ce0c6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.goal-category.mentalhealth[b-wvuy53eluw]  { background: rgba(167,139,250,.15); color: #a78bfa; }
.goal-category.physicalhealth[b-wvuy53eluw] { background: rgba(16,185,129,.15); color: #34d399; }
.goal-category.relationships[b-wvuy53eluw] { background: rgba(251,113,133,.15); color: #fb7185; }
.goal-category.career[b-wvuy53eluw]        { background: rgba(156,213,255,.15); color: var(--tg-accent-2, #9cd5ff); }
.goal-category.education[b-wvuy53eluw]     { background: rgba(251,191,36,.15); color: #fbbf24; }
.goal-category.finance[b-wvuy53eluw]       { background: rgba(52,211,153,.15); color: #34d399; }

.goal-status[b-wvuy53eluw] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
}

.goal-status.active[b-wvuy53eluw]    { background: rgba(76,224,198,.1); color: var(--tg-primary, #4ce0c6); }
.goal-status.completed[b-wvuy53eluw] { background: rgba(16,185,129,.15); color: #34d399; }
.goal-status.paused[b-wvuy53eluw]    { background: rgba(251,191,36,.15); color: #fbbf24; }
.goal-status.abandoned[b-wvuy53eluw] { background: rgba(156,163,175,.15); color: #9ca3af; }

.goal-actions[b-wvuy53eluw] {
    display: flex;
    gap: 0.35rem;
}

.goal-title[b-wvuy53eluw] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
    margin: 0 0 0.35rem 0;
}

.goal-description[b-wvuy53eluw] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

/* ============ Progress Bar ============ */
.goal-progress[b-wvuy53eluw] {
    margin-top: 0.5rem;
}

.progress-header[b-wvuy53eluw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    color: var(--tg-muted, #a9cdd1);
}

.progress-value[b-wvuy53eluw] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
}

.progress-bar[b-wvuy53eluw] {
    height: 6px;
    background: var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar.large[b-wvuy53eluw] {
    height: 10px;
}

.progress-fill[b-wvuy53eluw] {
    height: 100%;
    background: linear-gradient(90deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    border-radius: 999px;
    transition: width 0.5s ease;
    position: relative;
    overflow: hidden;
}

.progress-fill[b-wvuy53eluw]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer-b-wvuy53eluw 2s infinite;
}

@keyframes shimmer-b-wvuy53eluw {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ============ Milestones ============ */
.milestones-preview[b-wvuy53eluw] {
    margin-top: 0.5rem;
}

.milestone-count[b-wvuy53eluw] {
    font-size: 0.8rem;
    color: var(--tg-muted, #a9cdd1);
}

.milestones-section[b-wvuy53eluw] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tg-line, rgba(255,255,255,.08));
}

.milestones-section h4[b-wvuy53eluw] {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
}

.milestones-list[b-wvuy53eluw] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.milestone-item[b-wvuy53eluw] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.milestone-item:hover[b-wvuy53eluw] {
    background: rgba(255, 255, 255, 0.04);
}

.milestone-item.completed[b-wvuy53eluw] { opacity: 0.7; }
.milestone-item.completed .milestone-title[b-wvuy53eluw] { text-decoration: line-through; }

.milestone-checkbox[b-wvuy53eluw] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--tg-line, rgba(255,255,255,.15));
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    color: transparent;
}

.milestone-checkbox:hover[b-wvuy53eluw] { border-color: var(--tg-primary, #4ce0c6); }

.milestone-item.completed .milestone-checkbox[b-wvuy53eluw] {
    background: var(--tg-primary, #4ce0c6);
    border-color: var(--tg-primary, #4ce0c6);
    color: #04181e;
}

.milestone-content[b-wvuy53eluw] { flex: 1; }
.milestone-title[b-wvuy53eluw] { font-size: 0.88rem; color: var(--tg-ink, #ecf8f5); }
.milestone-date[b-wvuy53eluw]  { font-size: 0.78rem; color: var(--tg-muted, #a9cdd1); margin-top: 0.15rem; }

/* ============ Goal Footer ============ */
.goal-footer[b-wvuy53eluw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--tg-line, rgba(255,255,255,.06));
}

.goal-date[b-wvuy53eluw] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--tg-muted, #a9cdd1);
}

.goal-date.overdue[b-wvuy53eluw] {
    color: #f87171;
}

/* ============ Buttons ============ */
.btn-primary[b-wvuy53eluw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    font-weight: 800;
    font-size: 0.9rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 20px rgba(76, 224, 198, 0.25);
}

.btn-primary:hover[b-wvuy53eluw] {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(76, 224, 198, 0.35);
}

.btn-primary:disabled[b-wvuy53eluw] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-wvuy53eluw] {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-wvuy53eluw] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tg-ink, #ecf8f5);
}

.btn-success[b-wvuy53eluw] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), #34d399);
    color: #04181e;
    font-weight: 700;
    font-size: 0.8rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-success:hover[b-wvuy53eluw] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(52, 211, 153, 0.3);
}

.btn-small[b-wvuy53eluw] {
    font-size: 0.8rem;
    padding: 0.35rem 0.8rem;
}

.btn-danger[b-wvuy53eluw] {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.btn-danger:hover[b-wvuy53eluw] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-link[b-wvuy53eluw] {
    background: none;
    border: none;
    color: var(--tg-primary, #4ce0c6);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0;
}

.btn-link:hover[b-wvuy53eluw] { text-decoration: underline; }

.btn-icon[b-wvuy53eluw] {
    padding: 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 8px;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover[b-wvuy53eluw] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tg-ink, #ecf8f5);
}

/* ============ Modal ============ */
.modal-overlay[b-wvuy53eluw] {
    position: fixed;
    inset: 0;
    background: rgba(2, 17, 27, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 1rem;
    animation: fadeIn-b-wvuy53eluw 0.2s ease;
}

@keyframes fadeIn-b-wvuy53eluw {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal[b-wvuy53eluw] {
    display: block;       /* override Bootstrap .modal { display:none } */
    position: static;     /* override Bootstrap .modal { position:fixed } */
    height: auto;         /* override Bootstrap .modal { height:100% } */
    background: var(--tg-card, rgba(5,18,26,.95));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--tg-shadow, 0 25px 80px rgba(0,0,0,.45));
    animation: slideUp-b-wvuy53eluw 0.3s ease;
}

@keyframes slideUp-b-wvuy53eluw {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-large[b-wvuy53eluw] { max-width: 560px; }

.modal-header[b-wvuy53eluw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--tg-line, rgba(255,255,255,.08));
}

.modal-header h3[b-wvuy53eluw] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
}

.btn-close[b-wvuy53eluw] {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    padding: 0.4rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    opacity: 1;           /* override Bootstrap .btn-close { opacity:.5 } */
    width: auto;          /* override Bootstrap .btn-close { width:1em } */
    height: auto;         /* override Bootstrap .btn-close { height:1em } */
    box-sizing: border-box;
}

.btn-close:hover[b-wvuy53eluw] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--tg-ink, #ecf8f5);
}

.modal-body[b-wvuy53eluw] { padding: 1.25rem; }

.modal-footer[b-wvuy53eluw] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--tg-line, rgba(255,255,255,.08));
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* ============ Detail View ============ */
.detail-header[b-wvuy53eluw] {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.detail-title[b-wvuy53eluw] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
    margin: 0 0 0.4rem 0;
}

.detail-description[b-wvuy53eluw] {
    font-size: 0.9rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.detail-progress[b-wvuy53eluw] { margin-bottom: 1.25rem; }

/* ============ Form Groups ============ */
.form-group[b-wvuy53eluw] { margin-bottom: 1rem; }

.form-group label[b-wvuy53eluw] {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.4rem;
}

.form-group input[b-wvuy53eluw],
.form-group select[b-wvuy53eluw],
.form-group textarea[b-wvuy53eluw] {
    width: 100%;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 12px;
    font-size: 0.9rem;
    color: var(--tg-ink, #ecf8f5);
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input[b-wvuy53eluw]::placeholder,
.form-group textarea[b-wvuy53eluw]::placeholder {
    color: var(--tg-muted, #a9cdd1);
}

.form-group input:focus[b-wvuy53eluw],
.form-group select:focus[b-wvuy53eluw],
.form-group textarea:focus[b-wvuy53eluw] {
    outline: none;
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: var(--tg-focus, 0 0 0 3px rgba(76,224,198,.35));
}

.form-group input[type="range"][b-wvuy53eluw] {
    padding: 0;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    cursor: pointer;
}

.form-group input[type="range"][b-wvuy53eluw]::-webkit-slider-runnable-track {
    background: var(--tg-line, rgba(255,255,255,.08));
    height: 6px;
    border-radius: 999px;
}

.form-group input[type="range"][b-wvuy53eluw]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    border: 2px solid #04181e;
    margin-top: -6px;
}

.form-group input[type="range"]:focus[b-wvuy53eluw] {
    box-shadow: none;
}

.form-row[b-wvuy53eluw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.range-labels[b-wvuy53eluw] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--tg-muted, #a9cdd1);
    margin-top: 0.25rem;
}

/* ============ Mood Buttons ============ */
.goal-name-display[b-wvuy53eluw] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tg-primary, #4ce0c6);
    margin-bottom: 1rem;
}

.mood-buttons[b-wvuy53eluw] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.mood-btn[b-wvuy53eluw] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    background: rgba(255, 255, 255, 0.03);
    color: var(--tg-muted, #a9cdd1);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    font-family: inherit;
}

.mood-btn:hover[b-wvuy53eluw] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(76, 224, 198, 0.3);
}

.mood-btn.selected[b-wvuy53eluw] {
    background: rgba(76, 224, 198, 0.15);
    border-color: var(--tg-primary, #4ce0c6);
    color: var(--tg-primary, #4ce0c6);
}

/* ============ Empty State ============ */
.empty-state[b-wvuy53eluw] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--tg-muted, #a9cdd1);
}

.empty-icon[b-wvuy53eluw] {
    margin-bottom: 0.75rem;
}

.empty-icon svg[b-wvuy53eluw],
.empty-state svg[b-wvuy53eluw] {
    color: rgba(76, 224, 198, 0.2);
}

.empty-state p[b-wvuy53eluw] {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    color: var(--tg-ink, #ecf8f5);
}

.help-text[b-wvuy53eluw] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}

/* ============ Responsive ============ */
@media (max-width: 640px) {
    .stats-grid[b-wvuy53eluw] {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-header[b-wvuy53eluw] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .btn-new[b-wvuy53eluw] {
        align-self: center;
    }

    .tab-bar[b-wvuy53eluw] {
        justify-content: flex-start;
    }

    .goal-header[b-wvuy53eluw] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .goal-actions[b-wvuy53eluw] {
        align-self: flex-end;
    }

    .goal-footer[b-wvuy53eluw] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .form-row[b-wvuy53eluw] {
        grid-template-columns: 1fr;
    }

    .modal-footer[b-wvuy53eluw] {
        flex-wrap: wrap;
    }

    .modal-footer .btn-danger[b-wvuy53eluw] {
        order: 1;
        width: 100%;
        margin-bottom: 0.25rem;
    }
}

/* ============ Delete Confirmation ============ */
.confirm-delete-prompt[b-wvuy53eluw] {
    font-size: .78rem;
    color: #f87171;
    font-weight: 600;
}

.btn-sm[b-wvuy53eluw] {
    padding: .35rem .75rem;
    font-size: .75rem;
}

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce) {
    .goals-container[b-wvuy53eluw], .modal[b-wvuy53eluw], .goal-card[b-wvuy53eluw] { animation: none; }
    .progress-fill[b-wvuy53eluw]::after { animation: none; }
}
/* /Pages/Help.razor.rz.scp.css */
.help-container[b-0156fc8ygn] {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 20px;
    animation: fadeInUp-b-0156fc8ygn 0.5s cubic-bezier(.4,.14,.2,1);
}

@keyframes fadeInUp-b-0156fc8ygn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.help-header h1[b-0156fc8ygn] {
    color: var(--tg-ink);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
}

.subtitle[b-0156fc8ygn] {
    color: var(--tg-muted);
    font-size: 15px;
    margin: 0 0 28px;
}

/* Search */
.search-box[b-0156fc8ygn] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--tg-card);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 32px;
    color: var(--tg-muted);
}

.search-box input[b-0156fc8ygn] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--tg-ink);
    font-size: 15px;
    font-family: inherit;
}

.search-box input[b-0156fc8ygn]::placeholder {
    color: var(--tg-muted);
    opacity: 0.6;
}

/* FAQ Sections */
.help-section[b-0156fc8ygn] {
    margin-bottom: 28px;
}

.help-section h2[b-0156fc8ygn] {
    color: var(--tg-primary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(76, 224, 198, 0.1);
}

.faq-item[b-0156fc8ygn] {
    background: var(--tg-card);
    border: 1px solid rgba(76, 224, 198, 0.08);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s;
}

.faq-item:hover[b-0156fc8ygn] {
    border-color: rgba(76, 224, 198, 0.2);
}

.faq-item.expanded[b-0156fc8ygn] {
    border-color: rgba(76, 224, 198, 0.25);
}

.faq-question[b-0156fc8ygn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
}

.faq-question h3[b-0156fc8ygn] {
    color: var(--tg-ink);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    flex: 1;
}

.chevron[b-0156fc8ygn] {
    color: var(--tg-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.faq-item.expanded .chevron[b-0156fc8ygn] {
    transform: rotate(180deg);
}

.faq-answer[b-0156fc8ygn] {
    padding: 0 18px 16px;
    color: var(--tg-muted);
    font-size: 14px;
    line-height: 1.7;
    animation: fadeIn-b-0156fc8ygn 0.2s;
}

.faq-answer strong[b-0156fc8ygn] {
    color: var(--tg-ink);
}

@keyframes fadeIn-b-0156fc8ygn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Crisis */
.crisis-warning[b-0156fc8ygn] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(255, 100, 100, 0.08);
    border: 1px solid rgba(255, 100, 100, 0.2);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.crisis-warning p[b-0156fc8ygn] {
    color: var(--tg-muted);
    font-size: 14px;
    margin: 0 0 4px;
    line-height: 1.5;
}

.crisis-warning p strong[b-0156fc8ygn] {
    color: #ff6464;
}

.crisis-grid[b-0156fc8ygn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.crisis-card[b-0156fc8ygn] {
    background: var(--tg-card);
    border: 1px solid rgba(76, 224, 198, 0.1);
    border-radius: 12px;
    padding: 18px;
}

.crisis-country[b-0156fc8ygn] {
    color: var(--tg-ink);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.crisis-line[b-0156fc8ygn] {
    color: var(--tg-muted);
    font-size: 13px;
    margin-bottom: 4px;
    line-height: 1.5;
}

.crisis-line strong[b-0156fc8ygn] {
    color: var(--tg-ink);
}

/* Contact Form */
.contact-intro[b-0156fc8ygn] {
    color: var(--tg-muted);
    font-size: 14px;
    margin: 0 0 20px;
}

.contact-form[b-0156fc8ygn] {
    background: var(--tg-card);
    border: 1px solid rgba(76, 224, 198, 0.1);
    border-radius: 14px;
    padding: 24px;
}

.form-row[b-0156fc8ygn] {
    display: flex;
    gap: 16px;
}

.form-group[b-0156fc8ygn] {
    flex: 1;
    margin-bottom: 16px;
}

.form-group label[b-0156fc8ygn] {
    display: block;
    color: var(--tg-ink);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.form-group select[b-0156fc8ygn],
.form-group textarea[b-0156fc8ygn] {
    width: 100%;
    background: var(--tg-bg-soft);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--tg-ink);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    resize: vertical;
    box-sizing: border-box;
}

.form-group select:focus[b-0156fc8ygn],
.form-group textarea:focus[b-0156fc8ygn] {
    border-color: var(--tg-primary);
}

.form-group select option[b-0156fc8ygn] {
    background: var(--tg-bg-deep);
}

.form-group textarea[b-0156fc8ygn]::placeholder {
    color: var(--tg-muted);
    opacity: 0.5;
}

.form-actions[b-0156fc8ygn] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-primary[b-0156fc8ygn] {
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover:not(:disabled)[b-0156fc8ygn] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(76, 224, 198, 0.3);
}

.btn-primary:disabled[b-0156fc8ygn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sent-message[b-0156fc8ygn] {
    color: var(--tg-primary);
    font-size: 13px;
    animation: fadeIn-b-0156fc8ygn 0.3s;
}

.contact-alt[b-0156fc8ygn] {
    text-align: center;
    margin-top: 16px;
}

.contact-alt p[b-0156fc8ygn] {
    color: var(--tg-muted);
    font-size: 13px;
}

.contact-alt a[b-0156fc8ygn] {
    color: var(--tg-primary);
    text-decoration: none;
}

.contact-alt a:hover[b-0156fc8ygn] {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .crisis-grid[b-0156fc8ygn] { grid-template-columns: 1fr; }
    .form-row[b-0156fc8ygn] { flex-direction: column; gap: 0; }
    .crisis-warning[b-0156fc8ygn] { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .help-container[b-0156fc8ygn] { animation: none; }
    .faq-answer[b-0156fc8ygn] { animation: none; }
}
/* /Pages/Home.razor.rz.scp.css */
/* Home.razor.css — dark therapeutic chat interface */

.home-status-row[b-91qmdg6e88] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}
.home-status-row:empty[b-91qmdg6e88] { display: none; }

/* Scoped layout tokens (don't leak to :root) */
.main-container[b-91qmdg6e88],
.prompt-container[b-91qmdg6e88] {
    --tg-topbar: 3.5rem;
    --tg-composer-h: 76px;
    --tg-radius-bubble: 14px;
    --tg-radius-pill: 999px;
}

main[b-91qmdg6e88]{ position:relative }

/* ========== Chat area ========== */
.main-container[b-91qmdg6e88]{
    min-height: 0;
    padding: clamp(.5rem, 1.6vw, 1rem);
    padding-bottom: calc(var(--tg-composer-h) + 1rem);
    scroll-behavior: smooth;
}

/* Chat list */
.main-container .chat-container[b-91qmdg6e88]{
    display:flex;
    flex-direction:column;
    gap:.75rem;
}

/* Assistant row */
.main-container .assistant-message[b-91qmdg6e88]{
    display:flex;
    align-items:flex-start;
    gap:.6rem;
    padding-top:.25rem;
    animation: fadeInUp-b-91qmdg6e88 .4s ease-out both;
}

/* Avatar — dark-themed glass */
.main-container .assistant-message .thera-icon[b-91qmdg6e88]{
    width:40px; height:40px; flex:0 0 40px;
    border-radius:50%;
    padding:4px;
    background:rgba(5,18,26,.8);
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    border:1px solid rgba(76,224,198,.15);
}
.main-container .assistant-message .thera-icon img[b-91qmdg6e88]{
    display:block; width:100%; height:100%;
    object-fit:cover;
    border-radius:50%;
}

/* ========== Bubbles — dark glassmorphism ========== */
.main-container .assistant-message .chat-response[b-91qmdg6e88]{
    background:rgba(5,18,26,.72);
    color:var(--tg-ink, #ecf8f5);
    border:1px solid rgba(76,224,198,.12);
    border-radius: var(--tg-radius-bubble);
    padding:.7rem .9rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    white-space:pre-wrap;
    overflow-wrap:break-word;
    word-break:break-word;
    max-width:min(70ch, 92%);
}
.main-container .chat-container .user-message[b-91qmdg6e88]{
    align-self:flex-end;
    display:inline-block;
    background: linear-gradient(135deg,
        rgba(76,224,198,.12),
        rgba(156,213,255,.08));
    color:var(--tg-ink, #ecf8f5);
    border:1px solid rgba(76,224,198,.18);
    border-radius: var(--tg-radius-bubble);
    padding:.6rem .9rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    max-width:min(70ch, 92%);
    animation: fadeInUp-b-91qmdg6e88 .35s ease-out both;
}

/* AI badge */
.ai-badge[b-91qmdg6e88]{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--tg-primary, #4ce0c6);
    background:rgba(76,224,198,.08);
    border:1px solid rgba(76,224,198,.15);
    border-radius:999px;
    padding:.2rem .6rem;
    margin-bottom:.4rem;
}

/* Reminder text inside assistant bubbles */
.reminder-text[b-91qmdg6e88]{
    margin-top:.75rem;
    padding-top:.6rem;
    border-top:1px solid rgba(255,255,255,.06);
    color:var(--tg-muted, #a9cdd1);
    font-size:.8rem;
    opacity:.7;
}

/* ========== AI Disclaimer Banner ========== */
.ai-disclaimer-banner[b-91qmdg6e88]{
    max-width:min(640px, 92%);
    margin:2rem auto;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: linear-gradient(135deg,
        rgba(244,196,215,.08),
        rgba(156,213,255,.06));
    border:1px solid rgba(244,196,215,.18);
    border-radius:var(--tg-radius, 22px);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    box-shadow: 0 12px 40px rgba(0,0,0,.2);
    animation: fadeInUp-b-91qmdg6e88 .6s var(--tg-ease-soft) both;
}
.disclaimer-content h2[b-91qmdg6e88]{
    font-size:1.1rem;
    font-weight:800;
    color:var(--tg-accent-warm, #f4c4d7);
    margin:0 0 .75rem 0;
}
.disclaimer-text[b-91qmdg6e88]{
    color:var(--tg-muted, #a9cdd1);
    font-size:.9rem;
    line-height:1.65;
}
.disclaimer-text p[b-91qmdg6e88]{
    margin:0 0 .5rem 0;
}
.disclaimer-text strong[b-91qmdg6e88]{
    color:var(--tg-ink, #ecf8f5);
}
.disclaimer-text ul[b-91qmdg6e88]{
    margin:.5rem 0;
    padding-left:1.25rem;
}
.disclaimer-text li[b-91qmdg6e88]{
    margin-bottom:.35rem;
}
.disclaimer-actions[b-91qmdg6e88]{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1.25rem;
    align-items:center;
}
.btn-accept[b-91qmdg6e88]{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.75rem 1.5rem;
    background:linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color:#04181e;
    font-weight:800;
    font-size:.95rem;
    border:none;
    border-radius:999px;
    cursor:pointer;
    box-shadow: 0 8px 24px rgba(76,224,198,.3);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-accept:hover[b-91qmdg6e88]{
    transform:translateY(-2px);
    box-shadow: 0 12px 32px rgba(76,224,198,.4);
}
.btn-accept:active[b-91qmdg6e88]{
    transform:translateY(0);
}
.btn-resources[b-91qmdg6e88]{
    color:var(--tg-accent-2, #9cd5ff);
    font-weight:600;
    font-size:.9rem;
    text-decoration:none;
    padding:.5rem 1rem;
    border:1px solid rgba(156,213,255,.2);
    border-radius:999px;
    transition: background .2s ease, border-color .2s ease;
}
.btn-resources:hover[b-91qmdg6e88]{
    background:rgba(156,213,255,.08);
    border-color:rgba(156,213,255,.35);
    text-decoration:none;
}

/* ========== Composer ========== */
.prompt-container[b-91qmdg6e88]{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:1100;
    background:var(--tg-card, rgba(5,18,26,.82));
    border-top:1px solid var(--tg-line, rgba(255,255,255,.08));
    box-shadow: 0 -6px 24px rgba(2,11,18,.25);
    padding: clamp(.75rem, 2.4vw, 1rem);
    display:flex; align-items:center; gap:.75rem;
    min-height: var(--tg-composer-h);
}

/* Respect left sidebar on desktop */
@media (min-width: 641px){
    .prompt-container[b-91qmdg6e88]{
        left: var(--tg-sidebar-w);
        right: 0;
        width: auto;
        border-top-left-radius: 12px;
        border-top-right-radius: 0;
    }
}

/* Textarea — dark-themed */
.prompt-container .response[b-91qmdg6e88]{
    width:100%;
    resize:none;
    min-height: 44px;
    max-height: 34vh;
    padding:.7rem 3.2rem .7rem .9rem;
    border:1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius-pill);
    background:rgba(255,255,255,.04);
    color:var(--tg-ink, #ecf8f5);
    line-height:1.35;
    transition: box-shadow .35s var(--tg-ease-soft, ease),
                border-color .35s var(--tg-ease-soft, ease),
                background .35s var(--tg-ease-soft, ease);
    overflow:auto;
    overflow-wrap: break-word;
    word-break: break-word;
    field-sizing: content;
}
.prompt-container .response[b-91qmdg6e88]::placeholder{
    color:var(--tg-muted, #a9cdd1);
}
.prompt-container .response:focus[b-91qmdg6e88]{
    border-color: var(--tg-primary, #4ce0c6);
    background:rgba(255,255,255,.06);
    box-shadow: 0 0 0 3px rgba(76,224,198,.15);
    animation: composer-breathe-b-91qmdg6e88 4s ease-in-out infinite;
}

@keyframes composer-breathe-b-91qmdg6e88{
    0%, 100%{ box-shadow: 0 0 0 3px rgba(76,224,198,.12); }
    50%{ box-shadow: 0 0 0 5px rgba(76,224,198,.22), 0 0 20px rgba(76,224,198,.06); }
}

/* Send button (floating) */
.prompt-container .submit-button[b-91qmdg6e88]{
    position:absolute;
    right: clamp(.75rem, 2.4vw, 1rem);
    top: 50%;
    transform: translateY(-50%);
    display:grid; place-items:center;
    width: 44px; height:44px;
    border-radius:50%;
    border:1px solid transparent;
    background: var(--tg-primary, #4ce0c6);
    color:#fff; cursor:pointer;
    box-shadow: 0 4px 16px rgba(76,224,198,.25);
    transition: transform .12s ease, filter .15s ease, box-shadow .2s ease;
}
.prompt-container .submit-button:hover[b-91qmdg6e88]{ filter: brightness(1.05) }
.submit-button-clicked[b-91qmdg6e88]{ transform: translateY(-50%) scale(1.06) }

/* Gentle pulse when send button is active */
.prompt-container .submit-button:not(:disabled)[b-91qmdg6e88]{
    animation: send-pulse-b-91qmdg6e88 3s ease-in-out infinite;
}

@keyframes send-pulse-b-91qmdg6e88{
    0%, 100%{ box-shadow: 0 4px 16px rgba(76,224,198,.25); }
    50%{ box-shadow: 0 6px 24px rgba(76,224,198,.45); }
}

.prompt-container .submit-button:disabled[b-91qmdg6e88],
.prompt-container .submit-button:disabled:hover[b-91qmdg6e88]{
    background:rgba(255,255,255,.08);
    color:var(--tg-muted, #a9cdd1);
    cursor:not-allowed;
    filter:none;
    box-shadow:none;
    animation:none;
}

/* Glow on interaction */
.prompt-glow[b-91qmdg6e88]{
    box-shadow: 0 0 0 4px rgba(76,224,198,.08), 0 -6px 24px rgba(2,11,18,.15);
}

/* ========== Typographic helpers ========== */
.title[b-91qmdg6e88]{
    color:var(--tg-ink, #ecf8f5);
    text-align:center;
    font-weight:800;
    animation: fadeIn-b-91qmdg6e88 .5s ease-out both;
}
.subtitle[b-91qmdg6e88]{
    color:var(--tg-muted, #a9cdd1);
    text-align:center;
    margin-bottom:.75rem;
    animation: fadeIn-b-91qmdg6e88 .6s ease-out both;
}

/* ========== Loading ========== */
.loading-container[b-91qmdg6e88]{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background: rgba(2,17,27,.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 1200;
}
.loader[b-91qmdg6e88]{
    border:3px solid var(--tg-line, rgba(255,255,255,.08));
    border-top:3px solid var(--tg-primary, #4ce0c6);
    border-radius:50%;
    width:36px; height:36px;
    animation: spin-b-91qmdg6e88 1s linear infinite;
}

.thinking-state[b-91qmdg6e88]{
    display:flex;
    align-items:center;
    gap:.75rem;
}
.thinking-state .loader[b-91qmdg6e88]{
    width:22px; height:22px; border-width:2px;
}
.thinking-label[b-91qmdg6e88]{
    font-size:.95rem;
    color:var(--tg-primary, #4ce0c6);
    font-style:italic;
    opacity:.85;
    transition: opacity .3s ease;
    animation: tgThinkingFade-b-91qmdg6e88 6s ease-in-out infinite;
}
.thinking-dots[b-91qmdg6e88]{
    display:inline-flex;
    gap:3px;
    margin-left:4px;
    vertical-align:baseline;
}
.thinking-dots[b-91qmdg6e88]::before,
.thinking-dots[b-91qmdg6e88]::after{
    content:'';
    display:inline-block;
    width:4px; height:4px;
    border-radius:50%;
    background: currentColor;
    animation: tgThinkingDot-b-91qmdg6e88 1.2s ease-in-out infinite;
}
.thinking-dots[b-91qmdg6e88]::after { animation-delay: .3s; }
@keyframes tgThinkingDot-b-91qmdg6e88{
    0%, 80%, 100% { transform: translateY(0); opacity:.4; }
    40%           { transform: translateY(-3px); opacity:1; }
}
@keyframes tgThinkingFade-b-91qmdg6e88{
    0%,100% { opacity:.6; }
    50%     { opacity:1; }
}

/* ========== Crisis Floating Action Button ========== */
.crisis-fab[b-91qmdg6e88]{
    position:fixed;
    bottom: calc(var(--tg-composer-h, 70px) + 1rem);
    right: 1.25rem;
    z-index: 1150;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(255,183,77,.4);
    background: linear-gradient(135deg, rgba(255,152,0,.2), rgba(255,87,34,.15));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(255,152,0,.3);
    cursor: pointer;
    display: grid; place-items: center;
    animation: crisis-pulse-b-91qmdg6e88 2s ease-in-out infinite;
    transition: transform .15s ease, box-shadow .15s ease;
}
.crisis-fab:hover[b-91qmdg6e88]{
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(255,152,0,.45);
}
.crisis-fab-icon[b-91qmdg6e88]{
    font-size: 1.5rem;
    color: #ffb74d;
    line-height: 1;
}
@keyframes crisis-pulse-b-91qmdg6e88{
    0%, 100%{ box-shadow: 0 4px 20px rgba(255,152,0,.3); }
    50%{ box-shadow: 0 6px 28px rgba(255,152,0,.5), 0 0 0 8px rgba(255,152,0,.08); }
}

/* ========== Crisis Overlay ========== */
.crisis-overlay[b-91qmdg6e88]{
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2,11,18,.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: fadeIn-b-91qmdg6e88 .25s ease-out both;
}
.crisis-panel[b-91qmdg6e88]{
    max-width: min(500px, 92vw);
    width: 100%;
    margin: 1rem;
    background: linear-gradient(135deg,
        rgba(255,183,77,.08),
        rgba(255,87,34,.05));
    border: 1px solid rgba(255,183,77,.2);
    border-radius: var(--tg-radius, 22px);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    overflow: hidden;
    animation: fadeInUp-b-91qmdg6e88 .35s ease-out both;
}
.crisis-header[b-91qmdg6e88]{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.25rem;
    background: linear-gradient(135deg, rgba(255,152,0,.12), rgba(255,87,34,.08));
    border-bottom: 1px solid rgba(255,183,77,.15);
}
.crisis-header-title[b-91qmdg6e88]{
    font-weight: 800;
    font-size: 1rem;
    color: #ffb74d;
    letter-spacing: .02em;
}
.crisis-minimize-btn[b-91qmdg6e88]{
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.06);
    color: var(--tg-muted, #a9cdd1);
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s ease;
}
.crisis-minimize-btn:hover[b-91qmdg6e88]{
    background: rgba(255,255,255,.12);
}
.crisis-body[b-91qmdg6e88]{
    padding: 1.25rem;
}
.crisis-urgent-text[b-91qmdg6e88]{
    font-weight: 600;
    margin-bottom: 12px;
}
.crisis-action-buttons[b-91qmdg6e88]{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.btn-crisis-call[b-91qmdg6e88]{
    display: block;
    padding: 12px 16px;
    background: #d32f2f;
    color: #fff;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
}
.btn-crisis-call:hover[b-91qmdg6e88]{
    opacity: 0.9;
    text-decoration: none;
    color: #fff;
}
.crisis-contact-info[b-91qmdg6e88]{
    padding: 8px 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
}
.btn-crisis-whatsapp[b-91qmdg6e88]{
    display: block;
    padding: 12px 16px;
    background: #25D366;
    color: #fff;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
}
.btn-crisis-whatsapp:hover[b-91qmdg6e88]{
    opacity: 0.9;
    text-decoration: none;
    color: #fff;
}
.btn-crisis-sms[b-91qmdg6e88]{
    display: block;
    padding: 10px 16px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
}
.btn-crisis-sms:hover[b-91qmdg6e88]{
    opacity: 0.9;
    text-decoration: none;
    color: #fff;
}
.crisis-clinician-section[b-91qmdg6e88]{
    margin-top: 12px;
}
.btn-crisis-clinician[b-91qmdg6e88]{
    display: block;
    padding: 12px 16px;
    background: #ff9800;
    color: #fff;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
}
.btn-crisis-clinician:hover[b-91qmdg6e88]{
    opacity: 0.9;
    text-decoration: none;
    color: #fff;
}
.btn-crisis-upgrade[b-91qmdg6e88]{
    display: block;
    padding: 10px 16px;
    background: rgba(255,152,0,0.15);
    color: #ff9800;
    border: 1px solid rgba(255,152,0,0.4);
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
}
.btn-crisis-upgrade:hover[b-91qmdg6e88]{
    background: rgba(255,152,0,0.25);
    text-decoration: none;
    color: #ff9800;
}
.crisis-response-text[b-91qmdg6e88]{
    color: var(--tg-ink, #ecf8f5);
    font-size: .92rem;
    line-height: 1.65;
    margin: 0 0 1rem 0;
    white-space: pre-wrap;
}
.crisis-resources-list[b-91qmdg6e88]{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.crisis-resources-list li[b-91qmdg6e88]{
    padding: .55rem .8rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    color: var(--tg-ink, #ecf8f5);
    font-size: .85rem;
}
.crisis-actions[b-91qmdg6e88]{
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 0 1.25rem 1.25rem;
    align-items: center;
}
.btn-clinician[b-91qmdg6e88]{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 1.4rem;
    background: linear-gradient(135deg, #ffb74d, #ff9800);
    color: #1a1a1a;
    font-weight: 800;
    font-size: .9rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(255,152,0,.3);
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-clinician:hover[b-91qmdg6e88]{
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(255,152,0,.4);
    text-decoration: none;
    color: #1a1a1a;
}
.btn-crisis-dismiss[b-91qmdg6e88]{
    padding: .55rem 1rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: var(--tg-muted, #a9cdd1);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.btn-crisis-dismiss:hover[b-91qmdg6e88]{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.2);
}

/* ========== Retry Bar ========== */
.retry-bar[b-91qmdg6e88] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .6rem 1rem;
    background: rgba(248, 113, 113, .1);
    border: 1px solid rgba(248, 113, 113, .2);
    border-radius: 12px;
    margin: .5rem 0;
    font-size: .82rem;
    color: #f87171;
}

.btn-retry[b-91qmdg6e88] {
    padding: .35rem .8rem;
    border-radius: 8px;
    border: 1px solid rgba(76, 224, 198, .3);
    background: rgba(76, 224, 198, .1);
    color: #4ce0c6;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.btn-retry:hover[b-91qmdg6e88] {
    background: rgba(76, 224, 198, .2);
}

/* ========== Animations ========== */
@keyframes spin-b-91qmdg6e88{ to{ transform: rotate(360deg) } }
@keyframes fadeIn-b-91qmdg6e88{ from{ opacity:0; transform: translateY(2px) } to{ opacity:1; transform:none } }
@keyframes fadeInUp-b-91qmdg6e88{ from{ opacity:0; transform: translateY(8px) } to{ opacity:1; transform:none } }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
    *[b-91qmdg6e88]{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}

/* ========== Small screens ========== */
@media (max-width: 640px){
    .main-container[b-91qmdg6e88]{
        padding-left: .75rem;
        padding-right: .75rem;
        padding-top: .75rem;
        /* keep bottom padding to clear the fixed composer */
    }
    .main-container .assistant-message .chat-response[b-91qmdg6e88],
    .main-container .chat-container .user-message[b-91qmdg6e88]{ max-width: 100% }
    .prompt-container[b-91qmdg6e88]{
        left:0;
        right:0;
        width:100%;
        padding: .75rem;
    }
    .crisis-fab[b-91qmdg6e88]{
        right: .75rem;
        bottom: calc(var(--tg-composer-h, 70px) + .75rem);
    }
}
/* /Pages/Insights.razor.rz.scp.css */
/* Insights.razor.css — TheraGen design-token refresh */

.insights-container[b-catx4zh7f4] {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    animation: insightsFadeIn-b-catx4zh7f4 .5s var(--tg-ease-soft, ease-out) both;
}

@keyframes insightsFadeIn-b-catx4zh7f4 {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Header ---- */
.page-header[b-catx4zh7f4] { margin-bottom: 1.5rem; }

.header-content h1[b-catx4zh7f4] {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 700;
    color: var(--tg-ink);
    margin: 0;
}

.subtitle[b-catx4zh7f4] {
    font-size: .85rem;
    color: var(--tg-muted);
    margin: .25rem 0 0;
}

/* ---- Loading / Error ---- */
.loading-state[b-catx4zh7f4], .error-state[b-catx4zh7f4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--tg-muted);
    text-align: center;
    gap: .75rem;
}

.loader[b-catx4zh7f4] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(76,224,198,.15);
    border-top-color: var(--tg-primary);
    border-radius: 50%;
    animation: spin-b-catx4zh7f4 .8s linear infinite;
}

@keyframes spin-b-catx4zh7f4 { to { transform: rotate(360deg); } }

/* ---- Tab Bar ---- */
.tab-bar[b-catx4zh7f4] {
    display: flex;
    gap: .25rem;
    background: rgba(5,18,26,.6);
    border-radius: 14px;
    padding: .25rem;
    margin-bottom: 1.25rem;
}

.tab[b-catx4zh7f4] {
    flex: 1;
    padding: .55rem .75rem;
    border: none;
    background: transparent;
    color: rgba(107,143,150,.8);
    font-size: .82rem;
    font-weight: 600;
    border-radius: 11px;
    cursor: pointer;
    transition: background .2s var(--tg-ease), color .2s var(--tg-ease);
}

.tab:hover[b-catx4zh7f4] { color: var(--tg-muted); }

.tab.active[b-catx4zh7f4] {
    background: rgba(76,224,198,.12);
    color: var(--tg-primary);
}

/* ---- Summary Hero ---- */
.summary-hero[b-catx4zh7f4] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: 1rem;
}

.period-selector[b-catx4zh7f4] {
    display: flex;
    gap: .25rem;
    margin-bottom: 1.25rem;
}

.period-btn[b-catx4zh7f4] {
    padding: .35rem .85rem;
    border: 1px solid var(--tg-line);
    background: transparent;
    color: rgba(107,143,150,.8);
    font-size: .75rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s var(--tg-ease);
}

.period-btn.active[b-catx4zh7f4] {
    background: rgba(76,224,198,.12);
    color: var(--tg-primary);
    border-color: rgba(76,224,198,.3);
}

.summary-stats[b-catx4zh7f4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.summary-stat[b-catx4zh7f4] { text-align: center; }

.stat-value[b-catx4zh7f4] {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--tg-ink);
}

.stat-label[b-catx4zh7f4] {
    display: block;
    font-size: .7rem;
    color: rgba(107,143,150,.8);
    margin-top: .15rem;
}

/* ---- Sentiment Meter ---- */
.sentiment-meter[b-catx4zh7f4] { margin-top: .5rem; }

.meter-bar[b-catx4zh7f4] {
    position: relative;
    height: 6px;
    background: linear-gradient(90deg, #f87171, #fbbf24, #34d399);
    border-radius: 3px;
    margin-bottom: .35rem;
}

.meter-fill[b-catx4zh7f4] {
    position: absolute;
    height: 100%;
    background: transparent;
}

.meter-marker[b-catx4zh7f4] {
    position: absolute;
    top: -4px;
    width: 14px;
    height: 14px;
    background: var(--tg-ink);
    border: 2px solid var(--tg-bg-deep);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 6px rgba(76,224,198,.5);
}

.meter-labels[b-catx4zh7f4] {
    display: flex;
    justify-content: space-between;
    font-size: .65rem;
    color: rgba(107,143,150,.8);
}

/* ---- Insights Grid ---- */
.insights-grid[b-catx4zh7f4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-bottom: 1rem;
}

.insight-card[b-catx4zh7f4] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 18px;
    padding: 1rem;
}

.insight-card h3[b-catx4zh7f4] {
    font-size: .82rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin: 0 0 .6rem;
}

/* ---- Pills ---- */
.pill-list[b-catx4zh7f4] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.pill[b-catx4zh7f4] {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 12px;
    font-size: .7rem;
    font-weight: 600;
}

.pill.small[b-catx4zh7f4] {
    padding: .15rem .5rem;
    font-size: .65rem;
}

.topic-pill[b-catx4zh7f4] {
    background: rgba(76,224,198,.12);
    color: var(--tg-primary);
}

.emotion-pill[b-catx4zh7f4] {
    background: rgba(156,213,255,.12);
    color: var(--tg-accent-2);
}

.emotion-positive[b-catx4zh7f4] { background: rgba(52,211,153,.12); color: #34d399; }
.emotion-negative[b-catx4zh7f4] { background: rgba(248,113,113,.12); color: #f87171; }
.emotion-angry[b-catx4zh7f4] { background: rgba(251,146,60,.12); color: #fb923c; }
.emotion-anxious[b-catx4zh7f4] { background: rgba(251,191,36,.12); color: #fbbf24; }
.emotion-neutral[b-catx4zh7f4] { background: rgba(156,213,255,.12); color: var(--tg-accent-2); }

.distortion-pill[b-catx4zh7f4] {
    background: rgba(251,191,36,.12);
    color: #fbbf24;
}

.empty-text[b-catx4zh7f4] {
    font-size: .78rem;
    color: rgba(107,143,150,.8);
}

.empty-text--padded[b-catx4zh7f4] {
    padding: 1rem 0;
}

/* ---- Recommendations ---- */
.recommendations-list[b-catx4zh7f4] { display: flex; flex-direction: column; gap: .4rem; }

.recommendation-item[b-catx4zh7f4] {
    font-size: .78rem;
    color: rgba(197,221,225,.9);
    padding-left: .75rem;
    border-left: 2px solid rgba(76,224,198,.3);
}

/* ---- Two Column ---- */
.two-col[b-catx4zh7f4] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-bottom: 1rem;
}

.achievement-item[b-catx4zh7f4], .focus-item[b-catx4zh7f4] {
    font-size: .78rem;
    color: rgba(197,221,225,.9);
    padding: .3rem 0;
    display: flex;
    align-items: flex-start;
    gap: .4rem;
}

.check-icon[b-catx4zh7f4] { color: #34d399; font-size: .75rem; flex-shrink: 0; }
.focus-icon[b-catx4zh7f4] { color: #fbbf24; font-size: .5rem; margin-top: .2rem; flex-shrink: 0; }

/* ---- Section Headers ---- */
.section-header[b-catx4zh7f4] { margin: 1rem 0 .75rem; }

.section-header h2[b-catx4zh7f4] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin: 0;
}

/* ---- Summaries Timeline ---- */
.summaries-timeline[b-catx4zh7f4] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

.summary-card[b-catx4zh7f4] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 14px;
    padding: .85rem;
}

.summary-card-header[b-catx4zh7f4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.summary-period[b-catx4zh7f4] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--tg-ink);
}

.summary-type[b-catx4zh7f4] {
    font-size: .65rem;
    color: rgba(107,143,150,.8);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.summary-card-stats[b-catx4zh7f4] {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--tg-muted);
}

.trend-badge[b-catx4zh7f4] { font-weight: 600; }

/* ---- Topic Bars ---- */
.topics-header[b-catx4zh7f4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.days-filter[b-catx4zh7f4] {
    display: flex;
    gap: .25rem;
}

.filter-btn[b-catx4zh7f4] {
    padding: .25rem .6rem;
    border: 1px solid var(--tg-line);
    background: transparent;
    color: rgba(107,143,150,.8);
    font-size: .7rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s var(--tg-ease);
}

.filter-btn.active[b-catx4zh7f4] {
    background: rgba(76,224,198,.1);
    color: var(--tg-primary);
    border-color: rgba(76,224,198,.2);
}

.topic-bars[b-catx4zh7f4] { display: flex; flex-direction: column; gap: .5rem; }

.topic-bar-row[b-catx4zh7f4] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.topic-name[b-catx4zh7f4] {
    width: 100px;
    font-size: .78rem;
    color: rgba(197,221,225,.9);
    text-transform: capitalize;
    flex-shrink: 0;
}

.topic-bar-track[b-catx4zh7f4] {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,.05);
    border-radius: 4px;
    overflow: hidden;
}

.topic-bar-fill[b-catx4zh7f4] {
    height: 100%;
    background: linear-gradient(90deg, var(--tg-primary), var(--tg-accent-2));
    border-radius: 4px;
    transition: width .3s var(--tg-ease);
}

.topic-count[b-catx4zh7f4] {
    width: 28px;
    font-size: .75rem;
    color: rgba(107,143,150,.8);
    text-align: right;
}

/* ---- Topics Grid ---- */
.topics-grid[b-catx4zh7f4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .6rem;
}

.topic-card[b-catx4zh7f4] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 12px;
    padding: .75rem;
}

.topic-card-name[b-catx4zh7f4] {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--tg-primary);
    text-transform: capitalize;
    margin-bottom: .2rem;
}

.topic-card-desc[b-catx4zh7f4] {
    display: block;
    font-size: .72rem;
    color: rgba(107,143,150,.8);
}

/* ---- History List ---- */
.insights-list[b-catx4zh7f4] { display: flex; flex-direction: column; gap: .6rem; }

.history-card[b-catx4zh7f4] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 14px;
    padding: 1rem;
    cursor: pointer;
    transition: border-color .22s var(--tg-ease);
}

.history-card:hover[b-catx4zh7f4] { border-color: rgba(76,224,198,.2); }
.history-card.expanded[b-catx4zh7f4] { border-color: rgba(76,224,198,.3); }

.history-card-header[b-catx4zh7f4] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    flex-wrap: wrap;
}

.history-date[b-catx4zh7f4] {
    font-size: .82rem;
    font-weight: 600;
    color: var(--tg-ink);
}

.sentiment-badge[b-catx4zh7f4] {
    padding: .15rem .5rem;
    border-radius: 8px;
    font-size: .65rem;
    font-weight: 600;
}

.crisis-badge[b-catx4zh7f4] {
    padding: .15rem .5rem;
    border-radius: 8px;
    font-size: .65rem;
    font-weight: 700;
    background: rgba(248,113,113,.15);
    color: #f87171;
    border: 1px solid rgba(248,113,113,.3);
}

.history-pills[b-catx4zh7f4] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

/* ---- History Details (Expanded) ---- */
.history-details[b-catx4zh7f4] {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--tg-line);
}

.detail-section[b-catx4zh7f4] { margin-bottom: .75rem; }
.detail-section:last-child[b-catx4zh7f4] { margin-bottom: 0; }

.detail-section h4[b-catx4zh7f4] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--tg-primary);
    margin: 0 0 .25rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.detail-section p[b-catx4zh7f4] {
    font-size: .8rem;
    color: rgba(197,221,225,.9);
    margin: 0;
    line-height: 1.5;
}

/* ---- Empty State ---- */
.empty-card[b-catx4zh7f4] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 18px;
    padding: 2rem;
    text-align: center;
    color: var(--tg-muted);
}

.empty-card p[b-catx4zh7f4] { margin: 0 0 1rem; font-size: .85rem; }

/* ---- Buttons ---- */
.btn-primary[b-catx4zh7f4] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.5rem;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--tg-primary);
    color: var(--tg-bg-deep);
    transition: filter .18s var(--tg-ease);
}

.btn-primary:hover[b-catx4zh7f4] { filter: brightness(1.08); }

/* ---- Responsive ---- */
@media (max-width: 700px) {
    .insights-grid[b-catx4zh7f4] { grid-template-columns: 1fr; }
    .two-col[b-catx4zh7f4] { grid-template-columns: 1fr; }
    .summaries-timeline[b-catx4zh7f4] { grid-template-columns: 1fr; }
    .summary-stats[b-catx4zh7f4] { grid-template-columns: 1fr; gap: .5rem; }
    .topic-name[b-catx4zh7f4] { width: 80px; }
}

/* ---- Accessibility: reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
    .insights-container[b-catx4zh7f4] { animation: none !important; }
    .topic-bar-fill[b-catx4zh7f4],
    .history-card[b-catx4zh7f4] { transition: none !important; }
}
/* /Pages/Journal.razor.rz.scp.css */
/* Journal.razor.css — scoped styles using TheraGen design system */

/* ============ Container & Layout ============ */
.journal-container[b-23sw6o3qes] {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    padding-bottom: 4rem;
    animation: fadeInUp-b-23sw6o3qes 0.5s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
}

@keyframes fadeInUp-b-23sw6o3qes {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============ Page Header ============ */
.page-header[b-23sw6o3qes] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.75rem;
    gap: 1rem;
}

.page-header h1[b-23sw6o3qes] {
    font-size: var(--tg-h1, clamp(1.5rem, 2.4vw, 2.2rem));
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
    margin: 0 0 0.25rem 0;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle[b-23sw6o3qes] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
    margin: 0;
}

.btn-new[b-23sw6o3qes] {
    flex-shrink: 0;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ============ Loading State ============ */
.loading-state[b-23sw6o3qes] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--tg-muted, #a9cdd1);
}

.loader[b-23sw6o3qes] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--tg-line, rgba(255,255,255,.08));
    border-top-color: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    animation: spin-b-23sw6o3qes 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-23sw6o3qes {
    to { transform: rotate(360deg); }
}

/* ============ Tab Bar ============ */
.tab-bar[b-23sw6o3qes] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.tab-bar[b-23sw6o3qes]::-webkit-scrollbar {
    display: none;
}

.tab[b-23sw6o3qes] {
    padding: 0.5rem 1.1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.tab:hover[b-23sw6o3qes] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--tg-ink, #ecf8f5);
}

.tab.active[b-23sw6o3qes] {
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    border-color: transparent;
    font-weight: 800;
}

/* ============ Streak Banner ============ */
.streak-banner[b-23sw6o3qes] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 12px;
    color: #fbbf24;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.streak-icon[b-23sw6o3qes] {
    font-size: 1.1rem;
}

/* ============ Quick Actions ============ */
.quick-actions[b-23sw6o3qes] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.action-card[b-23sw6o3qes] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius-sm, 16px);
    padding: 1rem 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--tg-ink, #ecf8f5);
    font-size: 0.85rem;
    font-weight: 600;
}

.action-card:hover[b-23sw6o3qes] {
    transform: translateY(-3px);
    border-color: rgba(76, 224, 198, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.action-icon[b-23sw6o3qes] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--tg-primary, #4ce0c6);
}

.action-icon.gratitude[b-23sw6o3qes] {
    color: #fbbf24;
}

.action-icon.thought[b-23sw6o3qes] {
    color: #a78bfa;
}

.action-icon.prompt[b-23sw6o3qes] {
    color: var(--tg-primary, #4ce0c6);
}

/* ============ Search Bar ============ */
.search-bar[b-23sw6o3qes] {
    position: relative;
    margin-bottom: 1.5rem;
}

.search-bar input[b-23sw6o3qes] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    font-size: 0.9rem;
    color: var(--tg-ink, #ecf8f5);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-bar input[b-23sw6o3qes]::placeholder {
    color: var(--tg-muted, #a9cdd1);
}

.search-bar input:focus[b-23sw6o3qes] {
    outline: none;
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: var(--tg-focus, 0 0 0 3px rgba(76,224,198,.35));
}

.search-bar svg[b-23sw6o3qes] {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tg-muted, #a9cdd1);
    pointer-events: none;
}

/* ============ Journal Entries ============ */
.entries-list[b-23sw6o3qes] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.entry-card[b-23sw6o3qes] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius-sm, 16px);
    padding: 1rem 1.25rem;
    cursor: pointer;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.entry-card:hover[b-23sw6o3qes] {
    transform: translateY(-3px);
    border-color: rgba(76, 224, 198, 0.2);
    box-shadow: var(--tg-shadow-sm, 0 12px 32px rgba(2,11,18,.4));
}

.entry-card:focus-visible[b-23sw6o3qes] {
    outline: none;
    box-shadow: var(--tg-focus);
}

.entry-card.starred[b-23sw6o3qes] {
    border-color: rgba(251, 191, 36, 0.2);
}

.entry-header[b-23sw6o3qes] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.entry-type[b-23sw6o3qes] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: rgba(76, 224, 198, 0.1);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tg-primary, #4ce0c6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.entry-type.gratitude[b-23sw6o3qes] {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.entry-type.thoughtrecord[b-23sw6o3qes] {
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
}

.entry-type.prompted[b-23sw6o3qes] {
    background: rgba(156, 213, 255, 0.1);
    color: var(--tg-accent-2, #9cd5ff);
}

.entry-date[b-23sw6o3qes] {
    font-size: 0.8rem;
    color: var(--tg-muted, #a9cdd1);
}

.entry-title[b-23sw6o3qes] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
    margin: 0 0 0.35rem 0;
}

.entry-preview[b-23sw6o3qes] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.entry-footer[b-23sw6o3qes] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}

.entry-mood[b-23sw6o3qes] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--tg-muted, #a9cdd1);
}

.entry-tags[b-23sw6o3qes] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.tag[b-23sw6o3qes] {
    padding: 0.15rem 0.5rem;
    background: rgba(76, 224, 198, 0.08);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--tg-primary, #4ce0c6);
}

.btn-star[b-23sw6o3qes] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem;
    color: var(--tg-muted, #a9cdd1);
    transition: color 0.2s ease;
    margin-left: auto;
}

.btn-star:hover[b-23sw6o3qes] {
    color: #fbbf24;
}

/* ============ Empty State ============ */
.empty-state[b-23sw6o3qes] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--tg-muted, #a9cdd1);
}

.empty-icon[b-23sw6o3qes] {
    margin-bottom: 1rem;
}

.empty-icon svg[b-23sw6o3qes] {
    color: rgba(255, 255, 255, 0.12);
}

.empty-state p[b-23sw6o3qes] {
    margin: 0 0 0.25rem 0;
    font-size: 0.95rem;
}

.help-text[b-23sw6o3qes] {
    font-size: 0.85rem !important;
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 1.25rem !important;
}

.empty-state .btn-primary[b-23sw6o3qes] {
    margin-top: 0.75rem;
}

/* ============ Buttons ============ */
.btn-primary[b-23sw6o3qes] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.35rem;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    font-weight: 800;
    font-size: 0.9rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 20px rgba(76, 224, 198, 0.25);
}

.btn-primary:hover[b-23sw6o3qes] {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(76, 224, 198, 0.35);
}

.btn-secondary[b-23sw6o3qes] {
    padding: 0.6rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-23sw6o3qes] {
    background: rgba(255, 255, 255, 0.08);
}

/* ============ Journal Modal ============ */
.journal-overlay[b-23sw6o3qes] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 17, 27, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
    animation: fadeIn-b-23sw6o3qes 0.2s ease;
}

@keyframes fadeIn-b-23sw6o3qes {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.journal-modal[b-23sw6o3qes] {
    background: var(--tg-card, rgba(5,18,26,.96));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--tg-shadow, 0 25px 80px rgba(0,0,0,.45));
    animation: slideUp-b-23sw6o3qes 0.3s ease;
}

@keyframes slideUp-b-23sw6o3qes {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.journal-modal-header[b-23sw6o3qes] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--tg-line, rgba(255,255,255,.08));
}

.journal-modal-header h3[b-23sw6o3qes] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
}

.journal-btn-close[b-23sw6o3qes] {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    padding: 0.45rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.journal-btn-close:hover[b-23sw6o3qes] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--tg-ink, #ecf8f5);
}

.journal-modal-body[b-23sw6o3qes] {
    padding: 1.25rem 1.5rem;
}

.save-error[b-23sw6o3qes] {
    margin: 0 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: rgba(248, 113, 113, .12);
    color: #f87171;
    font-size: 0.875rem;
}

.journal-modal-footer[b-23sw6o3qes] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--tg-line, rgba(255,255,255,.08));
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ============ Form Groups ============ */
.form-group[b-23sw6o3qes] {
    margin-bottom: 1.15rem;
}

.form-group:last-child[b-23sw6o3qes] {
    margin-bottom: 0;
}

.form-group label[b-23sw6o3qes] {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.4rem;
}

.form-group input[b-23sw6o3qes],
.form-group textarea[b-23sw6o3qes],
.form-group select[b-23sw6o3qes] {
    width: 100%;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 12px;
    font-size: 0.9rem;
    color: var(--tg-ink, #ecf8f5);
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input[b-23sw6o3qes]::placeholder,
.form-group textarea[b-23sw6o3qes]::placeholder {
    color: var(--tg-muted, #a9cdd1);
}

.form-group input:focus[b-23sw6o3qes],
.form-group textarea:focus[b-23sw6o3qes],
.form-group select:focus[b-23sw6o3qes] {
    outline: none;
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: var(--tg-focus, 0 0 0 3px rgba(76,224,198,.35));
}

.form-group textarea[b-23sw6o3qes] {
    min-height: 140px;
    resize: vertical;
    line-height: 1.6;
}

.form-group select[b-23sw6o3qes] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a9cdd1' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.5rem;
}

.form-group input[type="range"][b-23sw6o3qes] {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    height: 24px;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
}

.form-group input[type="range"][b-23sw6o3qes]::-webkit-slider-runnable-track {
    background: var(--tg-line, rgba(255,255,255,.15));
    border-radius: 999px;
    height: 6px;
}

.form-group input[type="range"][b-23sw6o3qes]::-moz-range-track {
    background: var(--tg-line, rgba(255,255,255,.15));
    border-radius: 999px;
    height: 6px;
    border: none;
}

.form-group input[type="range"][b-23sw6o3qes]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 2px 6px rgba(76, 224, 198, 0.3);
}

.form-group input[type="range"][b-23sw6o3qes]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(76, 224, 198, 0.3);
}

.form-group input[type="range"]:focus[b-23sw6o3qes] {
    box-shadow: none;
    outline: none;
}

.form-row[b-23sw6o3qes] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.form-instruction[b-23sw6o3qes] {
    font-size: 0.95rem;
    color: var(--tg-muted, #a9cdd1);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

/* ============ Prompt Display ============ */
.prompt-display[b-23sw6o3qes] {
    background: linear-gradient(135deg,
        rgba(156, 213, 255, 0.08),
        rgba(76, 224, 198, 0.04));
    border: 1px solid rgba(156, 213, 255, 0.15);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 1.15rem;
}

.prompt-label[b-23sw6o3qes] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tg-accent-2, #9cd5ff);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prompt-display p[b-23sw6o3qes] {
    margin: 0.3rem 0 0 0;
    font-size: 0.95rem;
    color: var(--tg-ink, #ecf8f5);
    line-height: 1.5;
    font-style: italic;
}

/* ============ Responsive ============ */
@media (max-width: 640px) {
    .page-header[b-23sw6o3qes] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .quick-actions[b-23sw6o3qes] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .action-card[b-23sw6o3qes] {
        padding: 0.75rem 0.5rem;
        font-size: 0.78rem;
    }

    .action-icon svg[b-23sw6o3qes] {
        width: 20px;
        height: 20px;
    }

    .form-row[b-23sw6o3qes] {
        grid-template-columns: 1fr;
    }

    .entry-card[b-23sw6o3qes] {
        padding: 0.85rem 1rem;
    }
}

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce) {
    .journal-container[b-23sw6o3qes],
    .journal-modal[b-23sw6o3qes],
    .entry-card[b-23sw6o3qes] {
        animation: none;
        transition: none;
    }
}
/* /Pages/LanguageSettings.razor.rz.scp.css */
.settings-container[b-u5kclkwq13] {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.page-header[b-u5kclkwq13] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.page-header h1[b-u5kclkwq13] {
    font-size: 2.25rem;
    font-weight: 700;
    background: linear-gradient(120deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.page-header .subtitle[b-u5kclkwq13] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 1.1rem;
}

/* Loading State */
.loading-state[b-u5kclkwq13] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--tg-muted, #a9cdd1);
}

.loader[b-u5kclkwq13] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(76, 224, 198, 0.2);
    border-top: 3px solid var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    animation: spin-b-u5kclkwq13 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin-b-u5kclkwq13 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Settings Card */
.settings-card[b-u5kclkwq13] {
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: var(--tg-radius, 22px);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.settings-card h2[b-u5kclkwq13] {
    font-size: 1.15rem;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.5rem;
}

.section-description[b-u5kclkwq13] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

/* Form Elements */
.form-group[b-u5kclkwq13] {
    margin-bottom: 1.25rem;
}

.form-group label[b-u5kclkwq13] {
    display: block;
    font-weight: 500;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.25rem;
}

.field-description[b-u5kclkwq13] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 0.5rem;
}

.form-select[b-u5kclkwq13] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: 12px;
    font-size: 0.95rem;
    background: var(--tg-bg-deep, #02111b);
    color: var(--tg-ink, #ecf8f5);
    cursor: pointer;
}

.form-select:focus[b-u5kclkwq13] {
    outline: none;
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: 0 0 0 3px rgba(76, 224, 198, 0.1);
}

/* Toggle */
.toggle-group[b-u5kclkwq13] {
    padding: 1rem;
    background: rgba(76, 224, 198, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(76, 224, 198, 0.1);
}

.toggle-label[b-u5kclkwq13] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.toggle-input[b-u5kclkwq13] {
    display: none;
}

.toggle-switch[b-u5kclkwq13] {
    position: relative;
    width: 44px;
    height: 24px;
    background: rgba(76, 224, 198, 0.2);
    border-radius: 12px;
    transition: background 0.2s ease;
}

.toggle-switch[b-u5kclkwq13]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--tg-ink, #ecf8f5);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.toggle-input:checked + .toggle-switch[b-u5kclkwq13] {
    background: var(--tg-primary, #4ce0c6);
}

.toggle-input:checked + .toggle-switch[b-u5kclkwq13]::after {
    transform: translateX(20px);
}

.toggle-text[b-u5kclkwq13] {
    font-weight: 500;
    color: var(--tg-ink, #ecf8f5);
}

.toggle-group .field-description[b-u5kclkwq13] {
    margin-top: 0.5rem;
    margin-bottom: 0;
    margin-left: 56px;
}

/* Form Actions */
.form-actions[b-u5kclkwq13] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(76, 224, 198, 0.1);
}

.btn-primary[b-u5kclkwq13] {
    background: linear-gradient(120deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: var(--tg-bg-deep, #02111b);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover:not(:disabled)[b-u5kclkwq13] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 224, 198, 0.3);
}

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

.success-message[b-u5kclkwq13] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(76, 224, 198, 0.1);
    color: var(--tg-primary, #4ce0c6);
    border-radius: 12px;
    font-size: 0.9rem;
    border: 1px solid rgba(76, 224, 198, 0.2);
}

/* Languages Grid */
.languages-grid[b-u5kclkwq13] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.region-group h3[b-u5kclkwq13] {
    font-size: 0.9rem;
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.language-list[b-u5kclkwq13] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.language-item[b-u5kclkwq13] {
    padding: 0.5rem 0.75rem;
    background: rgba(76, 224, 198, 0.05);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.language-item:hover[b-u5kclkwq13] {
    background: rgba(76, 224, 198, 0.1);
}

.language-item.selected[b-u5kclkwq13] {
    background: rgba(76, 224, 198, 0.15);
    border: 1px solid var(--tg-primary, #4ce0c6);
}

.lang-native[b-u5kclkwq13] {
    font-weight: 500;
    color: var(--tg-ink, #ecf8f5);
}

.lang-english[b-u5kclkwq13] {
    font-size: 0.8rem;
    color: var(--tg-muted, #a9cdd1);
}

/* Crisis Resources */
.crisis-list[b-u5kclkwq13] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.crisis-item[b-u5kclkwq13] {
    padding: 1rem;
    background: rgba(76, 224, 198, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(76, 224, 198, 0.1);
}

.crisis-header[b-u5kclkwq13] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.crisis-header h4[b-u5kclkwq13] {
    font-size: 1rem;
    color: var(--tg-ink, #ecf8f5);
    margin: 0;
}

.badge-24h[b-u5kclkwq13] {
    background: var(--tg-primary, #4ce0c6);
    color: var(--tg-bg-deep, #02111b);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}

.crisis-phone[b-u5kclkwq13] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tg-primary, #4ce0c6);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.crisis-phone:hover[b-u5kclkwq13] {
    color: var(--tg-accent-2, #9cd5ff);
}

.crisis-description[b-u5kclkwq13] {
    font-size: 0.9rem;
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 0.5rem;
}

.crisis-link[b-u5kclkwq13] {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--tg-primary, #4ce0c6);
    text-decoration: none;
}

.crisis-link:hover[b-u5kclkwq13] {
    color: var(--tg-accent-2, #9cd5ff);
}

.no-resources[b-u5kclkwq13] {
    color: var(--tg-muted, #a9cdd1);
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

/* Emergency Notice */
.emergency-notice[b-u5kclkwq13] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 16px;
    margin-top: 1.5rem;
}

.notice-icon[b-u5kclkwq13] {
    flex-shrink: 0;
    color: #ef4444;
}

.notice-text[b-u5kclkwq13] {
    color: var(--tg-ink, #ecf8f5);
    font-size: 0.9rem;
    line-height: 1.5;
}

.notice-text strong[b-u5kclkwq13] {
    color: #ef4444;
}

/* Responsive */
@media (max-width: 768px) {
    .settings-container[b-u5kclkwq13] {
        padding: 1rem;
    }

    .languages-grid[b-u5kclkwq13] {
        grid-template-columns: 1fr;
    }

    .toggle-group .field-description[b-u5kclkwq13] {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loader[b-u5kclkwq13] { animation: none; }
}
/* /Pages/Learn.razor.rz.scp.css */
/* Learn.razor.css — TheraGen design-token refresh */

.learn-page[b-31ciry8t1u] {
    padding: clamp(1rem, 3vw, 2rem);
    max-width: 1100px;
    margin: 0 auto;
}

/* ---- Header ---- */
.page-header[b-31ciry8t1u] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    animation: learnFadeIn-b-31ciry8t1u .5s var(--tg-ease-soft, ease-out) both;
}

@keyframes learnFadeIn-b-31ciry8t1u {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cardSlideUp-b-31ciry8t1u {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.page-header h1[b-31ciry8t1u] {
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    font-weight: 700;
    color: var(--tg-ink);
    margin: 0;
}

.header-subtitle[b-31ciry8t1u] {
    color: var(--tg-muted);
    font-size: .85rem;
    margin: .25rem 0 0;
}

.header-actions[b-31ciry8t1u] { display: flex; gap: .5rem; }

.btn[b-31ciry8t1u] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: 12px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .18s var(--tg-ease);
}

.btn-primary[b-31ciry8t1u] {
    background: var(--tg-primary);
    color: var(--tg-bg-deep);
}

.btn-primary:hover[b-31ciry8t1u] { filter: brightness(1.08); }
.btn-primary:disabled[b-31ciry8t1u] { opacity: .5; cursor: not-allowed; }

.btn-outline[b-31ciry8t1u] {
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    color: var(--tg-muted);
}

.btn-outline:hover[b-31ciry8t1u] { border-color: var(--tg-primary); color: var(--tg-primary); }
.btn-outline.active[b-31ciry8t1u] { border-color: var(--tg-primary); color: var(--tg-primary); background: rgba(76,224,198,.08); }

/* ---- Loading / Error / Empty ---- */
.loading-state[b-31ciry8t1u], .error-state[b-31ciry8t1u], .empty-state[b-31ciry8t1u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    color: var(--tg-muted);
    text-align: center;
    gap: .75rem;
}

.loader[b-31ciry8t1u] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(76,224,198,.15);
    border-top-color: var(--tg-primary);
    border-radius: 50%;
    animation: spin-b-31ciry8t1u .8s linear infinite;
}

@keyframes spin-b-31ciry8t1u { to { transform: rotate(360deg); } }

.empty-hint[b-31ciry8t1u] { font-size: .8rem; color: rgba(107,143,150,.8); }

/* ---- Search ---- */
.search-bar[b-31ciry8t1u] {
    position: relative;
    margin-bottom: 1.5rem;
    animation: learnFadeIn-b-31ciry8t1u .5s var(--tg-ease-soft, ease-out) .05s both;
}

.search-icon[b-31ciry8t1u] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(107,143,150,.8);
    pointer-events: none;
}

.search-input[b-31ciry8t1u] {
    width: 100%;
    padding: .7rem 2.5rem .7rem 2.5rem;
    border-radius: 14px;
    border: 1px solid var(--tg-line);
    background: rgba(5,18,26,.6);
    color: var(--tg-ink);
    font-size: .85rem;
    outline: none;
    transition: border-color .18s var(--tg-ease);
}

.search-input:focus[b-31ciry8t1u] { border-color: var(--tg-primary); }
.search-input[b-31ciry8t1u]::placeholder { color: rgba(107,143,150,.8); }

.search-clear[b-31ciry8t1u] {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(107,143,150,.8);
    cursor: pointer;
    padding: 4px;
}

/* ---- Sections ---- */
.section[b-31ciry8t1u] { margin-bottom: 2rem; }

.section-title[b-31ciry8t1u] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin: 0 0 .75rem;
}

/* ---- Featured ---- */
.featured-row[b-31ciry8t1u] {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scrollbar-width: none;
}

.featured-row[b-31ciry8t1u]::-webkit-scrollbar { display: none; }

.featured-card[b-31ciry8t1u] {
    flex: 0 0 280px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    cursor: pointer;
    transition: transform .22s var(--tg-ease), border-color .22s var(--tg-ease), box-shadow .22s var(--tg-ease);
    animation: cardSlideUp-b-31ciry8t1u .45s var(--tg-ease-soft, ease-out) both;
}

.featured-card:hover[b-31ciry8t1u] {
    transform: translateY(-3px);
    border-color: rgba(76,224,198,.3);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

.featured-card:focus-visible[b-31ciry8t1u] {
    outline: none;
    box-shadow: var(--tg-focus);
}

.featured-gradient[b-31ciry8t1u] {
    height: 100px;
    background: linear-gradient(135deg, rgba(76,224,198,.3), rgba(76,224,198,.05));
}

.featured-body[b-31ciry8t1u] { padding: .875rem; }
.featured-body h3[b-31ciry8t1u] { font-size: .9rem; font-weight: 600; color: var(--tg-ink); margin: .4rem 0 .25rem; }
.featured-subtitle[b-31ciry8t1u] { font-size: .75rem; color: var(--tg-muted); margin: 0 0 .5rem; }
.featured-meta[b-31ciry8t1u] { display: flex; gap: .5rem; align-items: center; font-size: .72rem; color: rgba(107,143,150,.8); }

/* ---- Continue Reading ---- */
.continue-row[b-31ciry8t1u] {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scrollbar-width: none;
}

.continue-row[b-31ciry8t1u]::-webkit-scrollbar { display: none; }

.continue-card[b-31ciry8t1u] {
    flex: 0 0 220px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    cursor: pointer;
    transition: border-color .22s var(--tg-ease), box-shadow .22s var(--tg-ease);
    animation: cardSlideUp-b-31ciry8t1u .45s var(--tg-ease-soft, ease-out) both;
}

.continue-card:hover[b-31ciry8t1u] {
    border-color: rgba(76,224,198,.3);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.continue-card:focus-visible[b-31ciry8t1u] {
    outline: none;
    box-shadow: var(--tg-focus);
}

.continue-progress[b-31ciry8t1u] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tg-primary), var(--tg-accent-2));
    border-radius: 0 3px 0 0;
    transition: width .3s var(--tg-ease);
}

.continue-body[b-31ciry8t1u] { padding: .75rem; }
.continue-body h4[b-31ciry8t1u] { font-size: .8rem; font-weight: 600; color: var(--tg-ink); margin: 0 0 .25rem; }
.progress-text[b-31ciry8t1u] { font-size: .7rem; color: var(--tg-primary); }

/* ---- Filters ---- */
.filter-bar[b-31ciry8t1u] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    animation: learnFadeIn-b-31ciry8t1u .5s var(--tg-ease-soft, ease-out) .1s both;
}

.filter-tabs[b-31ciry8t1u] {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
}

.filter-tabs[b-31ciry8t1u]::-webkit-scrollbar { display: none; }

.filter-tab[b-31ciry8t1u] {
    white-space: nowrap;
    padding: .4rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--tg-line);
    background: transparent;
    color: var(--tg-muted);
    font-size: .75rem;
    cursor: pointer;
    transition: all .18s var(--tg-ease);
}

.filter-tab:hover[b-31ciry8t1u] { border-color: var(--tg-primary); color: var(--tg-primary); }
.filter-tab.active[b-31ciry8t1u] { background: rgba(76,224,198,.12); border-color: var(--tg-primary); color: var(--tg-primary); }

.filter-dropdowns[b-31ciry8t1u] { display: flex; gap: .5rem; }

.filter-select[b-31ciry8t1u] {
    padding: .4rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--tg-line);
    background: rgba(5,18,26,.6);
    color: var(--tg-muted);
    font-size: .75rem;
    outline: none;
    cursor: pointer;
}

.filter-select:focus[b-31ciry8t1u] { border-color: var(--tg-primary); }

/* ---- Content Grid ---- */
.content-grid[b-31ciry8t1u] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.content-card[b-31ciry8t1u] {
    border-radius: 16px;
    overflow: hidden;
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    cursor: pointer;
    transition: transform .22s var(--tg-ease), border-color .22s var(--tg-ease), box-shadow .22s var(--tg-ease);
    animation: cardSlideUp-b-31ciry8t1u .45s var(--tg-ease-soft, ease-out) both;
}

.content-card:hover[b-31ciry8t1u] {
    transform: translateY(-3px);
    border-color: rgba(76,224,198,.3);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

.content-card:focus-visible[b-31ciry8t1u] {
    outline: none;
    box-shadow: var(--tg-focus);
}

.card-header[b-31ciry8t1u] {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .75rem;
    background: linear-gradient(135deg, rgba(76,224,198,.15), transparent);
}

/* Topic gradient colors */
.topic-anxiety[b-31ciry8t1u] { background: linear-gradient(135deg, rgba(229,115,115,.2), transparent) !important; }
.topic-depression[b-31ciry8t1u] { background: linear-gradient(135deg, rgba(100,181,246,.2), transparent) !important; }
.topic-stress[b-31ciry8t1u] { background: linear-gradient(135deg, rgba(255,183,77,.2), transparent) !important; }
.topic-sleep[b-31ciry8t1u] { background: linear-gradient(135deg, rgba(206,147,216,.2), transparent) !important; }
.topic-mindfulness[b-31ciry8t1u] { background: linear-gradient(135deg, rgba(129,199,132,.2), transparent) !important; }
.topic-selfcare[b-31ciry8t1u] { background: linear-gradient(135deg, rgba(240,98,146,.2), transparent) !important; }
.topic-selfesteem[b-31ciry8t1u] { background: linear-gradient(135deg, rgba(255,213,79,.2), transparent) !important; }
.topic-relationships[b-31ciry8t1u] { background: linear-gradient(135deg, rgba(149,117,205,.2), transparent) !important; }
.topic-copingskills[b-31ciry8t1u] { background: linear-gradient(135deg, rgba(77,208,225,.2), transparent) !important; }
.topic-grief[b-31ciry8t1u] { background: linear-gradient(135deg, rgba(144,164,174,.2), transparent) !important; }
.topic-trauma[b-31ciry8t1u] { background: linear-gradient(135deg, rgba(239,83,80,.2), transparent) !important; }
.topic-general[b-31ciry8t1u] { background: linear-gradient(135deg, rgba(76,224,198,.15), transparent) !important; }

.type-badge[b-31ciry8t1u] {
    font-size: .65rem;
    padding: .2rem .5rem;
    border-radius: 6px;
    background: rgba(0,0,0,.3);
    color: var(--tg-muted);
    white-space: nowrap;
}

.bookmark-btn[b-31ciry8t1u] {
    background: none;
    border: none;
    color: rgba(107,143,150,.8);
    cursor: pointer;
    padding: 4px;
    transition: color .15s;
}

.bookmark-btn:hover[b-31ciry8t1u] { color: var(--tg-primary); }
.bookmark-btn.bookmarked[b-31ciry8t1u] { color: var(--tg-primary); }

.card-body[b-31ciry8t1u] { padding: .875rem; }

.card-title[b-31ciry8t1u] {
    font-size: .85rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin: 0 0 .35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-desc[b-31ciry8t1u] {
    font-size: .75rem;
    color: var(--tg-muted);
    margin: 0 0 .5rem;
    line-height: 1.4;
}

.card-tags[b-31ciry8t1u] {
    display: flex;
    gap: .35rem;
    margin-bottom: .5rem;
    flex-wrap: wrap;
}

.topic-tag[b-31ciry8t1u] {
    font-size: .65rem;
    padding: .15rem .45rem;
    border-radius: 6px;
    background: rgba(76,224,198,.1);
    color: var(--tg-primary);
}

.difficulty-badge[b-31ciry8t1u] {
    font-size: .65rem;
    padding: .15rem .45rem;
    border-radius: 6px;
}

.diff-beginner[b-31ciry8t1u] { background: rgba(129,199,132,.12); color: #81c784; }
.diff-intermediate[b-31ciry8t1u] { background: rgba(255,183,77,.12); color: #ffb74d; }
.diff-advanced[b-31ciry8t1u] { background: rgba(229,115,115,.12); color: #e57373; }

.card-footer[b-31ciry8t1u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reading-time[b-31ciry8t1u] { font-size: .7rem; color: rgba(107,143,150,.8); }

.rating-stars[b-31ciry8t1u] { display: flex; gap: 1px; align-items: center; }
.star[b-31ciry8t1u] { font-size: .7rem; color: rgba(58,90,98,.6); }
.star.filled[b-31ciry8t1u] { color: #ffb74d; }
.rating-count[b-31ciry8t1u] { font-size: .6rem; color: rgba(107,143,150,.8); margin-left: .25rem; }

/* ---- Modals ---- */
.modal-backdrop[b-31ciry8t1u] {
    position: fixed;
    inset: 0;
    background: rgba(12,45,49,.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-panel[b-31ciry8t1u] {
    background: rgba(5,18,26,.95);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--tg-shadow);
    animation: modalIn-b-31ciry8t1u .3s var(--tg-ease-soft, ease-out) both;
}

@keyframes modalIn-b-31ciry8t1u {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.detail-modal[b-31ciry8t1u] { max-width: 700px; }
.quiz-modal[b-31ciry8t1u] { max-width: 560px; }

.modal-header[b-31ciry8t1u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--tg-line);
}

.modal-header h3[b-31ciry8t1u] {
    font-size: .95rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin: 0;
}

.modal-header-meta[b-31ciry8t1u] { display: flex; gap: .4rem; align-items: center; }

.modal-close[b-31ciry8t1u] {
    background: none;
    border: none;
    color: var(--tg-muted);
    cursor: pointer;
    padding: 4px;
    opacity: .7;
    transition: opacity .15s;
}

.modal-close:hover[b-31ciry8t1u] { opacity: 1; }

.modal-body[b-31ciry8t1u] { padding: 1.25rem; }

/* ---- Detail Modal ---- */
.reading-progress-bar[b-31ciry8t1u] {
    height: 3px;
    background: rgba(255,255,255,.04);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.reading-progress-fill[b-31ciry8t1u] {
    height: 100%;
    background: linear-gradient(90deg, var(--tg-primary), var(--tg-accent-2));
    transition: width .5s var(--tg-ease);
}

.detail-body h2[b-31ciry8t1u] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--tg-ink);
    margin: 0 0 .5rem;
}

.detail-subtitle[b-31ciry8t1u] { font-size: .9rem; color: var(--tg-muted); margin: 0 0 .25rem; }
.detail-author[b-31ciry8t1u] { font-size: .8rem; color: rgba(107,143,150,.8); margin: 0 0 1rem; font-style: italic; }

.article-content[b-31ciry8t1u] {
    color: rgba(197,221,225,.9);
    font-size: .88rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    max-width: 65ch;
}

.article-content h1[b-31ciry8t1u], .article-content h2[b-31ciry8t1u], .article-content h3[b-31ciry8t1u] { color: var(--tg-ink); margin: 1.5rem 0 .5rem; }
.article-content p[b-31ciry8t1u] { margin: 0 0 1rem; }
.article-content ul[b-31ciry8t1u], .article-content ol[b-31ciry8t1u] { padding-left: 1.5rem; margin: 0 0 1rem; }
.article-content li[b-31ciry8t1u] { margin-bottom: .35rem; }

.media-placeholder[b-31ciry8t1u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 3rem;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px dashed rgba(255,255,255,.1);
    color: rgba(107,143,150,.8);
    margin-bottom: 1.5rem;
}

.detail-actions[b-31ciry8t1u] {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.completed-badge[b-31ciry8t1u] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .85rem;
    border-radius: 10px;
    background: rgba(76,224,198,.12);
    color: var(--tg-primary);
    font-size: .8rem;
    font-weight: 600;
}

.rating-section[b-31ciry8t1u] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .75rem 0;
    border-top: 1px solid var(--tg-line);
}

.rating-label[b-31ciry8t1u] { font-size: .8rem; color: var(--tg-muted); }

.rating-input[b-31ciry8t1u] { display: flex; gap: 2px; }

.star-btn[b-31ciry8t1u] {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: rgba(58,90,98,.6);
    cursor: pointer;
    padding: 2px;
    transition: color .1s;
}

.star-btn:hover[b-31ciry8t1u], .star-btn.filled[b-31ciry8t1u] { color: #ffb74d; }

.source-info[b-31ciry8t1u] {
    font-size: .75rem;
    color: rgba(107,143,150,.8);
    padding-top: .75rem;
    border-top: 1px solid var(--tg-line);
}

.source-label[b-31ciry8t1u] { font-weight: 600; }

/* ---- Quiz ---- */
.quiz-progress[b-31ciry8t1u] {
    font-size: .75rem;
    color: rgba(107,143,150,.8);
    margin-bottom: 1rem;
}

.quiz-question[b-31ciry8t1u] { margin-bottom: 1.5rem; }

.question-text[b-31ciry8t1u] {
    font-size: .95rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.quiz-options[b-31ciry8t1u] { display: flex; flex-direction: column; gap: .5rem; }

.quiz-option[b-31ciry8t1u] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--tg-line);
    background: rgba(255,255,255,.02);
    cursor: pointer;
    transition: all .18s var(--tg-ease);
}

.quiz-option:hover[b-31ciry8t1u] { border-color: rgba(76,224,198,.3); }
.quiz-option.selected[b-31ciry8t1u] { border-color: var(--tg-primary); background: rgba(76,224,198,.08); }

.quiz-option input[type="radio"][b-31ciry8t1u] { accent-color: var(--tg-primary); }
.option-text[b-31ciry8t1u] { font-size: .85rem; color: rgba(197,221,225,.9); }

.quiz-nav[b-31ciry8t1u] {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}

/* Quiz Results */
.quiz-results[b-31ciry8t1u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0;
    gap: 1rem;
}

.quiz-score[b-31ciry8t1u] { text-align: center; }
.quiz-score h3[b-31ciry8t1u] { font-size: 1.1rem; margin: .75rem 0 .25rem; }
.quiz-score p[b-31ciry8t1u] { font-size: .85rem; color: var(--tg-muted); margin: 0; }

.score-circle[b-31ciry8t1u] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.passed .score-circle[b-31ciry8t1u] { background: rgba(76,224,198,.15); border: 3px solid var(--tg-primary); }
.passed h3[b-31ciry8t1u] { color: var(--tg-primary); }
.failed .score-circle[b-31ciry8t1u] { background: rgba(255,183,77,.15); border: 3px solid #ffb74d; }
.failed h3[b-31ciry8t1u] { color: #ffb74d; }

.score-number[b-31ciry8t1u] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tg-ink);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .content-grid[b-31ciry8t1u] { grid-template-columns: 1fr; }
    .page-header[b-31ciry8t1u] { flex-direction: column; }
    .filter-bar[b-31ciry8t1u] { flex-direction: column; align-items: stretch; }
    .filter-dropdowns[b-31ciry8t1u] { flex-wrap: wrap; }
    .featured-card[b-31ciry8t1u] { flex: 0 0 240px; }
}

@media (max-width: 480px) {
    .learn-page[b-31ciry8t1u] { padding: 1rem; }
    .featured-card[b-31ciry8t1u] { flex: 0 0 200px; }
    .continue-card[b-31ciry8t1u] { flex: 0 0 180px; }
}

/* ---- Accessibility: reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
    .page-header[b-31ciry8t1u],
    .search-bar[b-31ciry8t1u],
    .filter-bar[b-31ciry8t1u],
    .featured-card[b-31ciry8t1u],
    .continue-card[b-31ciry8t1u],
    .content-card[b-31ciry8t1u] { animation: none !important; }
    .featured-card[b-31ciry8t1u],
    .continue-card[b-31ciry8t1u],
    .content-card[b-31ciry8t1u],
    .quiz-option[b-31ciry8t1u],
    .filter-tab[b-31ciry8t1u],
    .btn[b-31ciry8t1u] { transition: none !important; }
    .featured-card:hover[b-31ciry8t1u],
    .content-card:hover[b-31ciry8t1u] { transform: none; }
    .loader[b-31ciry8t1u] { animation: none; }
}
/* /Pages/MoodTracker.razor.rz.scp.css */
/* MoodTracker.razor.css - Scoped styles using TheraGen design system */

/* ============ Container & Layout ============ */
.mood-container[b-u0txbboig2] {
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    animation: fadeInUp-b-u0txbboig2 0.6s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
}

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

/* ============ Page Header ============ */
.page-header[b-u0txbboig2] {
    margin-bottom: 2rem;
    text-align: center;
}

.page-header h1[b-u0txbboig2] {
    font-size: var(--tg-h1, clamp(1.75rem, 2.6vw, 2.5rem));
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
    margin: 0 0 0.5rem 0;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle[b-u0txbboig2] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 1rem;
    margin: 0;
}

/* ============ Loading State ============ */
.loading-state[b-u0txbboig2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--tg-muted, #a9cdd1);
}

.loader[b-u0txbboig2] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--tg-line, rgba(255,255,255,.08));
    border-top-color: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    animation: spin-b-u0txbboig2 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-u0txbboig2 {
    to { transform: rotate(360deg); }
}

/* ============ Check-in Card ============ */
.checkin-card[b-u0txbboig2] {
    background: linear-gradient(135deg,
        rgba(76, 224, 198, 0.15),
        rgba(156, 213, 255, 0.1));
    border: 1px solid rgba(76, 224, 198, 0.25);
    border-radius: var(--tg-radius, 22px);
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: 1.5rem;
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.checkin-card[b-u0txbboig2]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(76, 224, 198, 0.1) 0%, transparent 60%);
    animation: pulse-glow-b-u0txbboig2 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse-glow-b-u0txbboig2 {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.checkin-card:hover[b-u0txbboig2] {
    transform: translateY(-2px);
    box-shadow: 0 20px 60px rgba(76, 224, 198, 0.15);
}

.checkin-card.completed[b-u0txbboig2] {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.15),
        rgba(52, 211, 153, 0.1));
    border-color: rgba(16, 185, 129, 0.3);
}

.checkin-card.completed[b-u0txbboig2]::before {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 60%);
}

.checkin-prompt[b-u0txbboig2], .checkin-complete[b-u0txbboig2] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.greeting h2[b-u0txbboig2] {
    margin: 0 0 0.35rem 0;
    font-size: var(--tg-h2, clamp(1.35rem, 2vw, 1.8rem));
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
}

.greeting p[b-u0txbboig2] {
    margin: 0;
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.95rem;
}

.checkin-complete .mood-emoji[b-u0txbboig2] {
    font-size: 3.5rem;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
    animation: float-b-u0txbboig2 3s ease-in-out infinite;
}

@keyframes float-b-u0txbboig2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.checkin-info h2[b-u0txbboig2] {
    margin: 0 0 0.35rem 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
}

.checkin-info p[b-u0txbboig2] {
    margin: 0;
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
}

.checkin-time[b-u0txbboig2] {
    font-size: 0.8rem !important;
    opacity: 0.7;
}

/* ============ Buttons ============ */
.btn-primary[b-u0txbboig2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    font-weight: 800;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 8px 24px rgba(76, 224, 198, 0.3);
}

.btn-primary:hover[b-u0txbboig2] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(76, 224, 198, 0.4);
}

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

.btn-large[b-u0txbboig2] {
    padding: 0.875rem 2rem;
    font-size: 1rem;
}

.btn-secondary[b-u0txbboig2] {
    padding: 0.6rem 1.25rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--tg-ink, #ecf8f5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-u0txbboig2] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.btn-link[b-u0txbboig2] {
    background: none;
    border: none;
    color: var(--tg-primary, #4ce0c6);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0;
    transition: color 0.2s ease;
}

.btn-link:hover[b-u0txbboig2] {
    color: var(--tg-accent-2, #9cd5ff);
    text-decoration: underline;
}

.btn-icon-small[b-u0txbboig2] {
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 8px;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    transition: all 0.2s ease;
}

.btn-icon-small:hover[b-u0txbboig2] {
    background: rgba(255, 96, 96, 0.1);
    border-color: rgba(255, 96, 96, 0.3);
    color: #ff8f8f;
}

/* ============ Cards ============ */
.trend-card[b-u0txbboig2], .emotions-card[b-u0txbboig2], .recent-entries[b-u0txbboig2] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    padding: clamp(1rem, 2.5vw, 1.5rem);
    margin-bottom: 1.5rem;
    backdrop-filter: blur(18px);
    box-shadow: var(--tg-shadow-sm, 0 12px 32px rgba(2,11,18,.4));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trend-card:hover[b-u0txbboig2], .emotions-card:hover[b-u0txbboig2], .recent-entries:hover[b-u0txbboig2] {
    transform: translateY(-2px);
    box-shadow: var(--tg-shadow, 0 25px 80px rgba(0,0,0,.45));
}

.card-header[b-u0txbboig2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.card-header h2[b-u0txbboig2] {
    margin: 0;
    font-size: var(--tg-h3, clamp(1.15rem, 1.6vw, 1.4rem));
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
}

.card-subtitle[b-u0txbboig2] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.875rem;
    margin: -0.75rem 0 1.25rem 0;
}

/* ============ Trend Indicator ============ */
.trend-indicator[b-u0txbboig2] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.trend-indicator.up[b-u0txbboig2] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.trend-indicator.down[b-u0txbboig2] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.trend-indicator.stable[b-u0txbboig2] {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
}

/* ============ Stats Grid ============ */
.trend-stats[b-u0txbboig2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-box[b-u0txbboig2] {
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius-sm, 16px);
    transition: all 0.3s ease;
}

.stat-box:hover[b-u0txbboig2] {
    background: rgba(76, 224, 198, 0.05);
    border-color: rgba(76, 224, 198, 0.2);
}

.stat-value[b-u0txbboig2] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
    line-height: 1.2;
}

.stat-label[b-u0txbboig2] {
    font-size: 0.8rem;
    color: var(--tg-muted, #a9cdd1);
    margin-top: 0.25rem;
}

/* ============ Chart ============ */
.chart-container[b-u0txbboig2] {
    padding-top: 1rem;
}

.chart-bars[b-u0txbboig2] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 140px;
    padding-bottom: 1.5rem;
}

.chart-bar-wrapper[b-u0txbboig2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.chart-bar[b-u0txbboig2] {
    width: 100%;
    max-width: 32px;
    background: linear-gradient(to top, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 8%;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.chart-bar[b-u0txbboig2]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%);
}

.chart-bar-wrapper:hover .chart-bar[b-u0txbboig2]::after {
    animation: shimmer-b-u0txbboig2 0.6s ease;
}

@keyframes shimmer-b-u0txbboig2 {
    to { transform: translateX(100%); }
}

.bar-label[b-u0txbboig2] {
    color: #04181e;
    font-size: 0.65rem;
    font-weight: 800;
    padding-top: 4px;
}

.bar-date[b-u0txbboig2] {
    font-size: 0.7rem;
    color: var(--tg-muted, #a9cdd1);
    margin-top: 0.35rem;
}

/* ============ Emotion Distribution ============ */
.emotion-list[b-u0txbboig2] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.emotion-item[b-u0txbboig2] {
    display: grid;
    grid-template-columns: 130px 1fr 45px;
    align-items: center;
    gap: 1rem;
}

.emotion-name[b-u0txbboig2] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--tg-ink, #ecf8f5);
}

.emotion-emoji[b-u0txbboig2] {
    font-size: 1.25rem;
}

.emotion-bar-container[b-u0txbboig2] {
    height: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
}

.emotion-bar[b-u0txbboig2] {
    height: 100%;
    background: linear-gradient(90deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    border-radius: 999px;
    transition: width 0.5s ease-out;
}

.emotion-count[b-u0txbboig2] {
    text-align: right;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tg-muted, #a9cdd1);
}

/* ============ Entries List ============ */
.entries-list[b-u0txbboig2] {
    display: flex;
    flex-direction: column;
}

.entry-row[b-u0txbboig2] {
    display: grid;
    grid-template-columns: 65px 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--tg-line, rgba(255,255,255,.08));
    transition: background 0.2s ease;
}

.entry-row:last-child[b-u0txbboig2] {
    border-bottom: none;
}

.entry-row:hover[b-u0txbboig2] {
    background: rgba(255, 255, 255, 0.02);
    margin: 0 -1rem;
    padding: 1rem;
    border-radius: 12px;
}

.entry-mood[b-u0txbboig2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mood-emoji-small[b-u0txbboig2] {
    font-size: 1.75rem;
}

.mood-level[b-u0txbboig2] {
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
    font-size: 1.1rem;
}

.entry-emotion[b-u0txbboig2] {
    font-weight: 600;
    color: var(--tg-ink, #ecf8f5);
}

.entry-notes[b-u0txbboig2] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
    margin-top: 0.25rem;
}

.entry-meta[b-u0txbboig2] {
    text-align: right;
}

.entry-date[b-u0txbboig2] {
    font-size: 0.85rem;
    color: var(--tg-ink, #ecf8f5);
    font-weight: 500;
}

.entry-time[b-u0txbboig2] {
    font-size: 0.75rem;
    color: var(--tg-muted, #a9cdd1);
}

/* ============ Empty State ============ */
.empty-state[b-u0txbboig2] {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--tg-muted, #a9cdd1);
}

.empty-state p[b-u0txbboig2] {
    margin: 0;
    font-size: 0.95rem;
}

/* ============ Modal ============ */
.modal-overlay[b-u0txbboig2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 17, 27, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
    animation: fadeIn-b-u0txbboig2 0.2s ease;
}

@keyframes fadeIn-b-u0txbboig2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mood-modal[b-u0txbboig2] {
    background: var(--tg-card, rgba(5,18,26,.95));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--tg-shadow, 0 25px 80px rgba(0,0,0,.45));
    animation: slideUp-b-u0txbboig2 0.3s ease;
}

@keyframes slideUp-b-u0txbboig2 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mood-modal-large[b-u0txbboig2] {
    max-width: 560px;
}

.mood-modal-header[b-u0txbboig2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--tg-line, rgba(255,255,255,.08));
}

.mood-modal-header h3[b-u0txbboig2] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
}

.mood-btn-close[b-u0txbboig2] {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mood-btn-close:hover[b-u0txbboig2] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--tg-ink, #ecf8f5);
}

.mood-modal-body[b-u0txbboig2] {
    padding: 1.5rem;
}

.mood-modal-footer[b-u0txbboig2] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--tg-line, rgba(255,255,255,.08));
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ============ Form Sections ============ */
.form-section[b-u0txbboig2] {
    margin-bottom: 1.75rem;
}

.form-section:last-child[b-u0txbboig2] {
    margin-bottom: 0;
}

.form-section label[b-u0txbboig2] {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.75rem;
}

/* Mood Slider */
.mood-slider-container[b-u0txbboig2] {
    text-align: center;
    padding: 1rem 0;
}

.mood-emoji-display[b-u0txbboig2] {
    font-size: 4rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
    transition: transform 0.2s ease;
}

.mood-slider[b-u0txbboig2] {
    width: 100%;
    height: 10px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #ef4444, #f59e0b, #22c55e);
    border-radius: 999px;
    outline: none;
}

.mood-slider[b-u0txbboig2]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    background: #fff;
    border: 3px solid var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.mood-slider[b-u0txbboig2]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.mood-slider[b-u0txbboig2]::-moz-range-track {
    background: linear-gradient(to right, #ef4444, #f59e0b, #22c55e);
    border-radius: 999px;
    height: 10px;
    border: none;
}

.mood-slider[b-u0txbboig2]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    background: #fff;
    border: 3px solid var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.mood-labels[b-u0txbboig2] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--tg-muted, #a9cdd1);
    margin-top: 0.75rem;
}

/* Emotion Grid */
.emotion-grid[b-u0txbboig2] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.emotion-btn[b-u0txbboig2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 0.4rem;
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: all 0.2s ease;
}

.emotion-btn:hover[b-u0txbboig2] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.emotion-btn.selected[b-u0txbboig2] {
    border-color: var(--tg-primary, #4ce0c6);
    background: rgba(76, 224, 198, 0.1);
    box-shadow: 0 0 0 2px rgba(76, 224, 198, 0.2);
}

.emotion-btn .emotion-emoji[b-u0txbboig2] {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.emotion-btn .emotion-label[b-u0txbboig2] {
    font-size: 0.65rem;
    color: var(--tg-muted, #a9cdd1);
    font-weight: 500;
}

.emotion-btn.selected .emotion-label[b-u0txbboig2] {
    color: var(--tg-primary, #4ce0c6);
}

/* Slider Row */
.slider-row[b-u0txbboig2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.slider-label-start[b-u0txbboig2],
.slider-label-end[b-u0txbboig2] {
    font-size: 0.75rem;
    color: var(--tg-muted, #a9cdd1);
    width: 40px;
    flex-shrink: 0;
}

.slider-label-end[b-u0txbboig2] {
    text-align: right;
}

.simple-slider[b-u0txbboig2] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
}

.simple-slider[b-u0txbboig2]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(76, 224, 198, 0.3);
    transition: transform 0.2s ease;
}

.simple-slider[b-u0txbboig2]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.simple-slider[b-u0txbboig2]::-moz-range-track {
    background: var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    height: 6px;
    border: none;
}

.simple-slider[b-u0txbboig2]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(76, 224, 198, 0.3);
}

.slider-value[b-u0txbboig2] {
    width: 35px;
    text-align: center;
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
}

/* Textarea */
.form-section textarea[b-u0txbboig2] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--tg-ink, #ecf8f5);
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-section textarea[b-u0txbboig2]::placeholder {
    color: var(--tg-muted, #a9cdd1);
}

.form-section textarea:focus[b-u0txbboig2] {
    outline: none;
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: var(--tg-focus, 0 0 0 3px rgba(76,224,198,.35));
}

/* ============ Responsive ============ */
@media (max-width: 640px) {
    .checkin-prompt[b-u0txbboig2], .checkin-complete[b-u0txbboig2] {
        flex-direction: column;
        text-align: center;
    }

    .emotion-grid[b-u0txbboig2] {
        grid-template-columns: repeat(3, 1fr);
    }

    .entry-row[b-u0txbboig2] {
        grid-template-columns: 55px 1fr auto;
    }

    .entry-meta[b-u0txbboig2] {
        display: none;
    }

    .trend-stats[b-u0txbboig2] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .emotion-item[b-u0txbboig2] {
        grid-template-columns: 1fr auto;
    }

    .emotion-bar-container[b-u0txbboig2] {
        display: none;
    }
}

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce) {
    .checkin-card[b-u0txbboig2]::before,
    .checkin-complete .mood-emoji[b-u0txbboig2] {
        animation: none;
    }

    .mood-container[b-u0txbboig2],
    .mood-modal[b-u0txbboig2] {
        animation: none;
    }
}
/* /Pages/Notifications.razor.rz.scp.css */
/* Notifications.razor.css — TheraGen design-token refresh */

.notifications-page[b-lcvv0mbhl2] {
    padding: clamp(1rem, 3vw, 2rem);
    max-width: 800px;
    margin: 0 auto;
}

/* ---- Header ---- */
.page-header[b-lcvv0mbhl2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    animation: notifFadeIn-b-lcvv0mbhl2 .5s var(--tg-ease-soft, ease-out) both;
}

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

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

.page-header h1[b-lcvv0mbhl2] {
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    font-weight: 700;
    color: var(--tg-ink);
    margin: 0;
}

.btn[b-lcvv0mbhl2] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: 12px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .18s var(--tg-ease);
}

.btn-primary[b-lcvv0mbhl2] { background: var(--tg-primary); color: var(--tg-bg-deep); }
.btn-primary:hover[b-lcvv0mbhl2] { filter: brightness(1.08); }
.btn-primary:disabled[b-lcvv0mbhl2] { opacity: .5; cursor: not-allowed; }

.btn-outline[b-lcvv0mbhl2] {
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    color: var(--tg-muted);
}
.btn-outline:hover[b-lcvv0mbhl2] { border-color: var(--tg-primary); color: var(--tg-primary); }

.btn-sm[b-lcvv0mbhl2] { padding: .35rem .7rem; font-size: .72rem; border-radius: 8px; }
.btn-ghost[b-lcvv0mbhl2] { background: none; border: none; color: var(--tg-primary); padding: .35rem .5rem; }
.btn-ghost:hover[b-lcvv0mbhl2] { text-decoration: underline; }

/* ---- Filter Tabs ---- */
.filter-tabs[b-lcvv0mbhl2] {
    display: flex;
    gap: .35rem;
    margin-bottom: 1.5rem;
    animation: notifFadeIn-b-lcvv0mbhl2 .5s var(--tg-ease-soft, ease-out) .05s both;
}

.filter-tab[b-lcvv0mbhl2] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border-radius: 10px;
    border: 1px solid var(--tg-line);
    background: transparent;
    color: var(--tg-muted);
    font-size: .8rem;
    cursor: pointer;
    transition: all .18s var(--tg-ease);
}

.filter-tab:hover[b-lcvv0mbhl2] { border-color: var(--tg-primary); color: var(--tg-primary); }
.filter-tab.active[b-lcvv0mbhl2] { background: rgba(76,224,198,.12); border-color: var(--tg-primary); color: var(--tg-primary); }

.tab-badge[b-lcvv0mbhl2] {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef5350;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- Loading / Empty ---- */
.loading-state[b-lcvv0mbhl2], .empty-state[b-lcvv0mbhl2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    color: var(--tg-muted);
    text-align: center;
    gap: .75rem;
}

.loader[b-lcvv0mbhl2] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(76,224,198,.15);
    border-top-color: var(--tg-primary);
    border-radius: 50%;
    animation: spin-b-lcvv0mbhl2 .8s linear infinite;
}

@keyframes spin-b-lcvv0mbhl2 { to { transform: rotate(360deg); } }

.empty-hint[b-lcvv0mbhl2] { font-size: .8rem; color: rgba(107,143,150,.8); }

/* ---- Notification List ---- */
.notification-list[b-lcvv0mbhl2] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 2rem;
}

.notification-card[b-lcvv0mbhl2] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: 14px;
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    transition: background .18s var(--tg-ease), border-color .18s var(--tg-ease);
    animation: notifSlideIn-b-lcvv0mbhl2 .4s var(--tg-ease-soft, ease-out) both;
}

.notification-card:hover[b-lcvv0mbhl2] {
    background: rgba(5,18,26,.92);
    border-color: rgba(76,224,198,.1);
}

.notification-card.unread[b-lcvv0mbhl2] {
    border-left: 3px solid var(--tg-primary);
    background: rgba(76,224,198,.03);
}

.notification-card.high-priority.unread[b-lcvv0mbhl2] {
    border-left-color: #ef5350;
}

.notif-icon[b-lcvv0mbhl2] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.type-mood[b-lcvv0mbhl2] { background: rgba(255,183,77,.12); color: #ffb74d; }
.type-goal[b-lcvv0mbhl2] { background: rgba(76,224,198,.12); color: var(--tg-primary); }
.type-exercise[b-lcvv0mbhl2] { background: rgba(100,181,246,.12); color: #64b5f6; }
.type-streak[b-lcvv0mbhl2] { background: rgba(239,83,80,.12); color: #ef5350; }
.type-crisis[b-lcvv0mbhl2] { background: rgba(229,115,115,.12); color: #e57373; }
.type-account[b-lcvv0mbhl2] { background: rgba(149,117,205,.12); color: #9575cd; }
.type-content[b-lcvv0mbhl2] { background: rgba(129,199,132,.12); color: #81c784; }
.type-review[b-lcvv0mbhl2] { background: rgba(77,208,225,.12); color: #4dd0e1; }
.type-general[b-lcvv0mbhl2] { background: rgba(255,255,255,.06); color: var(--tg-muted); }

.notif-main[b-lcvv0mbhl2] { flex: 1; min-width: 0; }

.notif-header[b-lcvv0mbhl2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .2rem;
}

.notif-title[b-lcvv0mbhl2] {
    font-size: .85rem;
    font-weight: 600;
    color: var(--tg-ink);
}

.unread .notif-title[b-lcvv0mbhl2] { color: #fff; }

.notif-time[b-lcvv0mbhl2] {
    font-size: .7rem;
    color: rgba(107,143,150,.8);
    white-space: nowrap;
}

.notif-body[b-lcvv0mbhl2] {
    font-size: .78rem;
    color: var(--tg-muted);
    line-height: 1.4;
    margin: 0 0 .5rem;
}

.notif-actions[b-lcvv0mbhl2] {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.dismiss-btn[b-lcvv0mbhl2] {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(107,143,150,.8);
    cursor: pointer;
    padding: 4px;
    opacity: 0;
    transition: opacity .15s;
}

.notification-card:hover .dismiss-btn[b-lcvv0mbhl2] { opacity: .6; }
.dismiss-btn:hover[b-lcvv0mbhl2] { opacity: 1 !important; color: #ef5350; }

/* ---- Preferences ---- */
.preferences-section[b-lcvv0mbhl2] {
    margin-top: 2rem;
    border-top: 1px solid var(--tg-line);
    padding-top: 1rem;
}

.section-toggle[b-lcvv0mbhl2] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    background: none;
    border: none;
    color: var(--tg-muted);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    padding: .5rem 0;
    transition: color .15s;
}

.section-toggle:hover[b-lcvv0mbhl2] { color: var(--tg-ink); }

.chevron[b-lcvv0mbhl2] { transition: transform .2s var(--tg-ease); }
.chevron.open[b-lcvv0mbhl2] { transform: rotate(180deg); }

.preferences-form[b-lcvv0mbhl2] {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pref-group h3[b-lcvv0mbhl2] {
    font-size: .8rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin: 0 0 .5rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.pref-toggle[b-lcvv0mbhl2] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 0;
    cursor: pointer;
    font-size: .82rem;
    color: rgba(197,221,225,.9);
}

.pref-toggle input[type="checkbox"][b-lcvv0mbhl2] {
    accent-color: var(--tg-primary);
    width: 16px;
    height: 16px;
}

.quiet-hours[b-lcvv0mbhl2] {
    display: flex;
    gap: 1rem;
}

.time-field[b-lcvv0mbhl2] { display: flex; flex-direction: column; gap: .25rem; }

.time-field label[b-lcvv0mbhl2] {
    font-size: .7rem;
    color: rgba(107,143,150,.8);
    font-weight: 600;
}

.time-field input[type="time"][b-lcvv0mbhl2] {
    padding: .4rem .6rem;
    border-radius: 8px;
    border: 1px solid var(--tg-line);
    background: rgba(5,18,26,.6);
    color: var(--tg-ink);
    font-size: .8rem;
    outline: none;
    transition: border-color .18s var(--tg-ease);
}

.time-field input[type="time"]:focus[b-lcvv0mbhl2] { border-color: var(--tg-primary); }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .page-header[b-lcvv0mbhl2] { flex-direction: column; align-items: flex-start; }
    .notif-header[b-lcvv0mbhl2] { flex-direction: column; align-items: flex-start; gap: .1rem; }
    .dismiss-btn[b-lcvv0mbhl2] { opacity: .4; }
    .quiet-hours[b-lcvv0mbhl2] { flex-direction: column; }
}

/* ---- Accessibility: reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
    .page-header[b-lcvv0mbhl2],
    .filter-tabs[b-lcvv0mbhl2],
    .notification-card[b-lcvv0mbhl2] { animation: none !important; }
    .notification-card[b-lcvv0mbhl2],
    .filter-tab[b-lcvv0mbhl2],
    .btn[b-lcvv0mbhl2],
    .chevron[b-lcvv0mbhl2] { transition: none !important; }
    .loader[b-lcvv0mbhl2] { animation: none; }
}
/* /Pages/NotificationSettings.razor.rz.scp.css */
/* NotificationSettings.razor.css — TheraGen design-token refresh */

.notification-settings-page[b-gq0gq9u3cz] {
    max-width: 700px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    animation: settingsFadeIn-b-gq0gq9u3cz .5s var(--tg-ease-soft, ease-out) both;
}

@keyframes settingsFadeIn-b-gq0gq9u3cz {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Header ---- */
.page-header[b-gq0gq9u3cz] { margin-bottom: 1.5rem; }

.btn-back[b-gq0gq9u3cz] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: none;
    color: var(--tg-primary);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: .75rem;
    transition: opacity .15s;
}

.btn-back:hover[b-gq0gq9u3cz] { text-decoration: underline; }

.page-header h1[b-gq0gq9u3cz] {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 700;
    color: var(--tg-ink);
    margin: 0;
}

.subtitle[b-gq0gq9u3cz] {
    font-size: .85rem;
    color: var(--tg-muted);
    margin: .25rem 0 0;
}

/* ---- Loading / Error ---- */
.loading-state[b-gq0gq9u3cz], .error-state[b-gq0gq9u3cz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--tg-muted);
    text-align: center;
    gap: .75rem;
}

.loader[b-gq0gq9u3cz] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(76,224,198,.15);
    border-top-color: var(--tg-primary);
    border-radius: 50%;
    animation: spin-b-gq0gq9u3cz .8s linear infinite;
}

@keyframes spin-b-gq0gq9u3cz { to { transform: rotate(360deg); } }

/* ---- Settings Sections ---- */
.settings-section[b-gq0gq9u3cz] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 18px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.settings-section h2[b-gq0gq9u3cz] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin: 0 0 .15rem;
}

.section-desc[b-gq0gq9u3cz] {
    font-size: .75rem;
    color: rgba(107,143,150,.8);
    margin: 0 0 1rem;
}

/* ---- Toggle Row ---- */
.toggle-row[b-gq0gq9u3cz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.04);
}

.toggle-row:last-child[b-gq0gq9u3cz] { border-bottom: none; }

.toggle-label[b-gq0gq9u3cz] {
    font-size: .82rem;
    color: rgba(197,221,225,.9);
}

.toggle-input[b-gq0gq9u3cz] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch[b-gq0gq9u3cz] {
    position: relative;
    width: 44px;
    height: 24px;
    background: rgba(255,255,255,.1);
    border-radius: 12px;
    flex-shrink: 0;
    transition: background .2s var(--tg-ease);
}

.toggle-switch[b-gq0gq9u3cz]::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(107,143,150,.8);
    transition: transform .2s var(--tg-ease), background .2s var(--tg-ease);
}

.toggle-input:checked + .toggle-switch[b-gq0gq9u3cz] {
    background: rgba(76,224,198,.3);
}

.toggle-input:checked + .toggle-switch[b-gq0gq9u3cz]::after {
    transform: translateX(20px);
    background: var(--tg-primary);
}

/* ---- Quiet Hours ---- */
.quiet-hours-row[b-gq0gq9u3cz] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.time-field[b-gq0gq9u3cz] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1;
}

.time-field label[b-gq0gq9u3cz] {
    font-size: .7rem;
    color: rgba(107,143,150,.8);
    font-weight: 600;
}

.time-field input[b-gq0gq9u3cz] {
    padding: .5rem .7rem;
    border-radius: 10px;
    border: 1px solid var(--tg-line);
    background: rgba(5,18,26,.6);
    color: var(--tg-ink);
    font-size: .82rem;
    outline: none;
    width: 100%;
    transition: border-color .18s var(--tg-ease);
}

.time-field input:focus[b-gq0gq9u3cz] { border-color: var(--tg-primary); }

.time-separator[b-gq0gq9u3cz] {
    color: rgba(107,143,150,.8);
    font-size: .8rem;
    margin-top: 1.2rem;
}

/* ---- Save ---- */
.save-section[b-gq0gq9u3cz] { margin-top: .5rem; }

.btn-primary[b-gq0gq9u3cz] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.5rem;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--tg-primary);
    color: var(--tg-bg-deep);
    transition: filter .18s var(--tg-ease);
    width: 100%;
    justify-content: center;
}

.btn-primary:hover[b-gq0gq9u3cz] { filter: brightness(1.08); }
.btn-primary:disabled[b-gq0gq9u3cz] { opacity: .5; cursor: not-allowed; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .quiet-hours-row[b-gq0gq9u3cz] { flex-direction: column; gap: .5rem; }
    .time-separator[b-gq0gq9u3cz] { margin-top: 0; }
}

/* ---- Accessibility: reduce motion ---- */
/* Push notification status */
.push-status[b-gq0gq9u3cz] {
    font-size: .8rem;
    margin: 6px 0 0 0;
    padding: 6px 12px;
    border-radius: 8px;
}
.push-status.granted[b-gq0gq9u3cz] { color: #4ce0c6; background: rgba(76,224,198,.06); }
.push-status.denied[b-gq0gq9u3cz] { color: #ffa500; background: rgba(255,165,0,.06); }

@media (prefers-reduced-motion: reduce) {
    .notification-settings-page[b-gq0gq9u3cz] { animation: none !important; }
    .toggle-switch[b-gq0gq9u3cz],
    .toggle-switch[b-gq0gq9u3cz]::after,
    .time-field input[b-gq0gq9u3cz] { transition: none !important; }
}
/* /Pages/Onboarding.razor.rz.scp.css */
.onboarding-container[b-hxn5wd3iox] {
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 20px;
    min-height: 100vh;
}

.onboarding-loading[b-hxn5wd3iox] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    color: var(--tg-muted);
}

.spinner[b-hxn5wd3iox] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(76, 224, 198, 0.2);
    border-top-color: var(--tg-primary);
    border-radius: 50%;
    animation: spin-b-hxn5wd3iox 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-hxn5wd3iox { to { transform: rotate(360deg); } }

.progress-header[b-hxn5wd3iox] {
    margin-bottom: 40px;
}

.progress-bar-track[b-hxn5wd3iox] {
    height: 6px;
    background: rgba(76, 224, 198, 0.15);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar-fill[b-hxn5wd3iox] {
    height: 100%;
    background: linear-gradient(90deg, #4ce0c6, #2C727E);
    border-radius: 3px;
    transition: width 0.5s var(--tg-ease-soft);
}

.progress-text[b-hxn5wd3iox] {
    color: var(--tg-muted);
    font-size: 13px;
}

.step-content[b-hxn5wd3iox] {
    animation: fadeInUp-b-hxn5wd3iox 0.4s var(--tg-ease-soft);
}

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

.step-content h1[b-hxn5wd3iox] {
    color: var(--tg-ink);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
}

.step-subtitle[b-hxn5wd3iox] {
    color: var(--tg-muted);
    font-size: 15px;
    margin: 0 0 32px;
    line-height: 1.5;
}

.feature-cards[b-hxn5wd3iox] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.feature-card[b-hxn5wd3iox] {
    background: var(--tg-card);
    border: 1px solid rgba(76, 224, 198, 0.1);
    border-radius: var(--tg-radius-sm);
    padding: 24px 20px;
    text-align: center;
}

.feature-card h3[b-hxn5wd3iox] {
    color: var(--tg-ink);
    font-size: 15px;
    margin: 12px 0 8px;
}

.feature-card p[b-hxn5wd3iox] {
    color: var(--tg-muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.feature-icon[b-hxn5wd3iox] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-group[b-hxn5wd3iox] {
    margin-bottom: 24px;
}

.form-group label[b-hxn5wd3iox] {
    display: block;
    color: var(--tg-ink);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}

.option-grid[b-hxn5wd3iox] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.option-grid.large[b-hxn5wd3iox] {
    gap: 12px;
}

.option-btn[b-hxn5wd3iox] {
    background: var(--tg-card);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: 12px;
    padding: 12px 20px;
    color: var(--tg-ink);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s var(--tg-ease-soft);
}

.option-btn:hover[b-hxn5wd3iox] {
    border-color: rgba(76, 224, 198, 0.4);
    background: rgba(76, 224, 198, 0.05);
}

.option-btn.selected[b-hxn5wd3iox] {
    border-color: var(--tg-primary);
    background: rgba(76, 224, 198, 0.12);
    color: var(--tg-primary);
}

.option-btn.small[b-hxn5wd3iox] {
    padding: 8px 16px;
    font-size: 13px;
}

.mood-selector[b-hxn5wd3iox] {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 32px 0;
}

.mood-btn[b-hxn5wd3iox] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--tg-card);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 20px 16px;
    cursor: pointer;
    transition: all 0.2s var(--tg-ease-soft);
    min-width: 80px;
}

.mood-btn:hover[b-hxn5wd3iox] {
    border-color: rgba(76, 224, 198, 0.3);
    transform: translateY(-2px);
}

.mood-btn.selected[b-hxn5wd3iox] {
    border-color: var(--tg-primary);
    background: rgba(76, 224, 198, 0.1);
}

.mood-emoji[b-hxn5wd3iox] {
    font-size: 32px;
}

.mood-label[b-hxn5wd3iox] {
    color: var(--tg-muted);
    font-size: 12px;
}

.first-session-card[b-hxn5wd3iox] {
    background: var(--tg-card);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: var(--tg-radius-sm);
    padding: 28px;
    margin: 24px 0;
}

.session-preview[b-hxn5wd3iox] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.avatar[b-hxn5wd3iox] {
    width: 56px;
    height: 56px;
    background: rgba(76, 224, 198, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.session-text .greeting[b-hxn5wd3iox] {
    color: var(--tg-ink);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 8px;
}

.session-text .subtext[b-hxn5wd3iox] {
    color: var(--tg-muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.step-actions[b-hxn5wd3iox] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
}

.btn-primary[b-hxn5wd3iox] {
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s var(--tg-ease-soft);
}

.btn-primary:hover:not(:disabled)[b-hxn5wd3iox] {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(76, 224, 198, 0.3);
}

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

.btn-secondary[b-hxn5wd3iox] {
    background: transparent;
    color: var(--tg-muted);
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: 12px;
    padding: 14px 28px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s var(--tg-ease-soft);
}

.btn-secondary:hover[b-hxn5wd3iox] {
    border-color: rgba(76, 224, 198, 0.4);
    color: var(--tg-ink);
}

.onboarding-complete[b-hxn5wd3iox] {
    text-align: center;
    padding: 80px 20px;
}

.complete-icon[b-hxn5wd3iox] {
    margin-bottom: 24px;
}

.onboarding-complete h1[b-hxn5wd3iox] {
    color: var(--tg-ink);
    font-size: 32px;
    margin: 0 0 12px;
}

.onboarding-complete p[b-hxn5wd3iox] {
    color: var(--tg-muted);
    font-size: 16px;
    margin: 0 0 32px;
}

@media (max-width: 480px) {
    .mood-selector[b-hxn5wd3iox] {
        gap: 8px;
    }

    .mood-btn[b-hxn5wd3iox] {
        padding: 14px 10px;
        min-width: 60px;
    }

    .mood-emoji[b-hxn5wd3iox] {
        font-size: 24px;
    }

    .session-preview[b-hxn5wd3iox] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}
/* /Pages/Privacy.razor.rz.scp.css */
/* Privacy.razor.css - Scoped styles for Privacy & Data page */

/* ─────────────── Container ─────────────── */
.privacy-container[b-zjkokbvzug] {
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 40px);
    animation: fadeInUp-b-zjkokbvzug 0.6s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
}

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

/* Page heading */
#page-heading[b-zjkokbvzug] {
    font-size: var(--tg-h1);
    color: var(--tg-primary);
    margin-bottom: clamp(24px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ─────────────── Privacy Section Cards ─────────────── */
.privacy-section[b-zjkokbvzug] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    padding: clamp(20px, 3vw, 28px);
    margin-bottom: 20px;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: var(--tg-shadow-sm);
    transition: transform .85s var(--tg-ease-swell, cubic-bezier(.35,.01,.22,1)),
                box-shadow .85s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1)),
                border-color .85s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
}

.privacy-section:hover[b-zjkokbvzug] {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(0,0,0,.55);
    border-color: rgba(255,255,255,.18);
}

.privacy-section h4[b-zjkokbvzug] {
    font-size: var(--tg-h3);
    color: var(--tg-primary);
    margin: 0 0 clamp(12px, 2vw, 20px);
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
}

.privacy-section h4[b-zjkokbvzug]::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(180deg, var(--tg-primary), var(--tg-accent-2));
    border-radius: 2px;
}

.privacy-section h5[b-zjkokbvzug] {
    font-size: 1.05rem;
    color: var(--tg-ink);
    margin: 0 0 8px;
    font-weight: 700;
}

.privacy-section p[b-zjkokbvzug] {
    color: var(--tg-muted);
    line-height: 1.6;
    margin: 0 0 12px;
}

/* ─────────────── Rights List ─────────────── */
.rights-list[b-zjkokbvzug] {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}

.rights-list li[b-zjkokbvzug] {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--tg-radius-sm);
    margin-bottom: 10px;
    border-left: 3px solid var(--tg-primary);
    transition: background 0.2s ease, transform 0.2s ease;
}

.rights-list li:hover[b-zjkokbvzug] {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(4px);
}

.rights-list li strong[b-zjkokbvzug] {
    color: var(--tg-accent-2);
    display: block;
    margin-bottom: 4px;
}

/* Generic section lists */
.privacy-section ul:not(.rights-list)[b-zjkokbvzug] {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

.privacy-section ul:not(.rights-list) li[b-zjkokbvzug] {
    padding: 10px 0;
    border-bottom: 1px solid var(--tg-line);
    color: var(--tg-ink);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.privacy-section ul:not(.rights-list) li[b-zjkokbvzug]::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(76, 224, 198, 0.2);
    color: var(--tg-primary);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.privacy-section ul:not(.rights-list) li:last-child[b-zjkokbvzug] {
    border-bottom: none;
}

/* ─────────────── Data Categories Grid ─────────────── */
.data-categories[b-zjkokbvzug] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.data-category[b-zjkokbvzug] {
    padding: clamp(16px, 2vw, 20px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-sm);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.data-category:hover[b-zjkokbvzug] {
    transform: translateY(-3px);
    border-color: rgba(76, 224, 198, 0.3);
}

.data-category h5[b-zjkokbvzug] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.data-category:nth-child(1) h5[b-zjkokbvzug]::before { content: '👤'; }
.data-category:nth-child(2) h5[b-zjkokbvzug]::before { content: '💬'; }
.data-category:nth-child(3) h5[b-zjkokbvzug]::before { content: '📊'; }

.data-category p[b-zjkokbvzug] {
    font-size: 0.9rem;
    margin: 8px 0 0;
}

/* ─────────────── Action Buttons ─────────────── */
.action-buttons[b-zjkokbvzug] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.action-buttons .btn[b-zjkokbvzug] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.btn-outline-primary[b-zjkokbvzug] {
    background: rgba(76, 224, 198, 0.1);
    color: var(--tg-primary);
    border-color: rgba(76, 224, 198, 0.4);
}

.btn-outline-primary:hover:not(:disabled)[b-zjkokbvzug] {
    background: rgba(76, 224, 198, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(76, 224, 198, 0.2);
}

.btn-outline-secondary[b-zjkokbvzug] {
    background: rgba(156, 213, 255, 0.1);
    color: var(--tg-accent-2);
    border-color: rgba(156, 213, 255, 0.4);
}

.btn-outline-secondary:hover:not(:disabled)[b-zjkokbvzug] {
    background: rgba(156, 213, 255, 0.2);
    transform: translateY(-2px);
}

.btn-outline-danger[b-zjkokbvzug] {
    background: rgba(255, 96, 96, 0.1);
    color: #ff8f8f;
    border-color: rgba(255, 96, 96, 0.4);
}

.btn-outline-danger:hover:not(:disabled)[b-zjkokbvzug] {
    background: rgba(255, 96, 96, 0.2);
    transform: translateY(-2px);
}

.action-buttons .btn:disabled[b-zjkokbvzug] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ─────────────── Delete Confirmation ─────────────── */
.delete-confirmation[b-zjkokbvzug] {
    margin-top: 24px;
    animation: slideDown-b-zjkokbvzug 0.3s ease-out;
}

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

.delete-confirmation .alert-danger[b-zjkokbvzug] {
    background: linear-gradient(135deg, rgba(255, 96, 96, 0.15), rgba(255, 96, 96, 0.08));
    border: 1px solid rgba(255, 96, 96, 0.35);
    border-radius: var(--tg-radius-sm);
    padding: clamp(18px, 3vw, 24px);
}

.delete-confirmation h5[b-zjkokbvzug] {
    color: #ff8f8f;
    font-size: 1.15rem;
    margin: 0 0 12px;
}

.delete-confirmation p[b-zjkokbvzug] {
    color: var(--tg-ink);
}

.delete-confirmation ul[b-zjkokbvzug] {
    padding-left: 20px;
    margin: 12px 0;
}

.delete-confirmation ul li[b-zjkokbvzug] {
    padding: 6px 0;
    color: var(--tg-muted);
}

.delete-confirmation ul li[b-zjkokbvzug]::before {
    content: '•';
    color: #ff8f8f;
}

.confirmation-buttons[b-zjkokbvzug] {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.btn-secondary[b-zjkokbvzug] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tg-ink);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover[b-zjkokbvzug] {
    background: rgba(255, 255, 255, 0.15);
}

.btn-danger[b-zjkokbvzug] {
    background: linear-gradient(135deg, #ff6060, #e04545);
    color: #fff;
    border-color: transparent;
}

.btn-danger:hover:not(:disabled)[b-zjkokbvzug] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 96, 96, 0.35);
}

/* ─────────────── Alerts ─────────────── */
.alert[b-zjkokbvzug] {
    padding: 14px 18px;
    border-radius: var(--tg-radius-sm);
    margin-top: 20px;
    animation: fadeIn-b-zjkokbvzug 0.3s ease-out;
}

@keyframes fadeIn-b-zjkokbvzug {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.alert-warning[b-zjkokbvzug] {
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

.alert-warning .btn[b-zjkokbvzug] {
    margin-top: 12px;
    background: var(--tg-primary);
    color: #04181e;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.alert-warning .btn:hover[b-zjkokbvzug] {
    transform: translateY(-2px);
}

.alert-success[b-zjkokbvzug] {
    background: rgba(76, 224, 198, 0.12);
    border: 1px solid rgba(76, 224, 198, 0.3);
    color: var(--tg-primary);
}

/* ─────────────── Consent Toggles ─────────────── */
.consent-toggles[b-zjkokbvzug] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.consent-toggle[b-zjkokbvzug] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--tg-radius-sm);
    border: 1px solid var(--tg-line);
    transition: border-color 0.2s ease;
}

.consent-toggle:hover[b-zjkokbvzug] {
    border-color: rgba(76, 224, 198, 0.2);
}

.consent-info[b-zjkokbvzug] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.consent-label[b-zjkokbvzug] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tg-ink);
}

.consent-desc[b-zjkokbvzug] {
    font-size: 0.8rem;
    color: var(--tg-muted);
}

.toggle-switch[b-zjkokbvzug] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-switch input[b-zjkokbvzug] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-zjkokbvzug] {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    transition: background 0.25s ease;
}

.toggle-slider[b-zjkokbvzug]::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--tg-ink);
    border-radius: 50%;
    transition: transform 0.25s ease;
}

.toggle-switch input:checked + .toggle-slider[b-zjkokbvzug] {
    background: var(--tg-primary);
}

.toggle-switch input:checked + .toggle-slider[b-zjkokbvzug]::before {
    transform: translateX(20px);
    background: #04181e;
}

.consent-withdrawn[b-zjkokbvzug] {
    font-style: italic;
    color: var(--tg-muted);
}

.consent-toggles .btn-outline-primary[b-zjkokbvzug] {
    align-self: flex-start;
    margin-top: 4px;
}

/* ─────────────── Export Status ─────────────── */
.export-status-card[b-zjkokbvzug] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-top: 16px;
    background: rgba(76, 224, 198, 0.08);
    border: 1px solid rgba(76, 224, 198, 0.25);
    border-radius: var(--tg-radius-sm);
    color: var(--tg-primary);
    font-size: 0.9rem;
    animation: fadeIn-b-zjkokbvzug 0.3s ease-out;
}

.export-icon[b-zjkokbvzug] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ─────────────── Deletion Reason ─────────────── */
.deletion-reason[b-zjkokbvzug] {
    margin: 16px 0 0;
}

.deletion-reason label[b-zjkokbvzug] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin-bottom: 6px;
}

.deletion-reason textarea[b-zjkokbvzug] {
    width: 100%;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 96, 96, 0.2);
    border-radius: 12px;
    font-size: 0.9rem;
    color: var(--tg-ink);
    font-family: inherit;
    resize: vertical;
}

.deletion-reason textarea[b-zjkokbvzug]::placeholder {
    color: var(--tg-muted);
}

.deletion-reason textarea:focus[b-zjkokbvzug] {
    outline: none;
    border-color: rgba(255, 96, 96, 0.5);
}

/* ─────────────── Loading State ─────────────── */
.privacy-container > p:first-of-type[b-zjkokbvzug] {
    text-align: center;
    color: var(--tg-muted);
    padding: 40px;
}

/* ─────────────── Responsive ─────────────── */
@media (max-width: 600px) {
    .privacy-container[b-zjkokbvzug] {
        padding: 16px;
    }

    .privacy-section[b-zjkokbvzug] {
        padding: 16px;
        border-radius: var(--tg-radius-sm);
    }

    .action-buttons[b-zjkokbvzug] {
        flex-direction: column;
    }

    .action-buttons .btn[b-zjkokbvzug] {
        width: 100%;
    }

    .data-categories[b-zjkokbvzug] {
        grid-template-columns: 1fr;
    }

    .confirmation-buttons[b-zjkokbvzug] {
        flex-direction: column;
    }
}

/* ─────────────── Reduced Motion ─────────────── */
@media (prefers-reduced-motion: reduce) {
    .privacy-container[b-zjkokbvzug],
    .delete-confirmation[b-zjkokbvzug],
    .alert[b-zjkokbvzug] {
        animation: none;
    }

    .privacy-section[b-zjkokbvzug],
    .data-category[b-zjkokbvzug],
    .rights-list li[b-zjkokbvzug],
    .action-buttons .btn[b-zjkokbvzug] {
        transition: none;
    }

    .privacy-section:hover[b-zjkokbvzug],
    .data-category:hover[b-zjkokbvzug],
    .rights-list li:hover[b-zjkokbvzug] {
        transform: none;
    }
}
/* /Pages/Profile.razor.rz.scp.css */
/* Profile.razor.css — TheraGen profile (refreshed) */

.profile-container[b-i5yzs0lgzm] {
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
}

/* ---- Loading / Error ---- */
.loading-state[b-i5yzs0lgzm], .error-state[b-i5yzs0lgzm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--tg-muted);
    text-align: center;
    gap: .75rem;
}

.loader[b-i5yzs0lgzm] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(76, 224, 198, .15);
    border-top-color: var(--tg-primary);
    border-radius: 50%;
    animation: spin-b-i5yzs0lgzm .8s linear infinite;
}

@keyframes spin-b-i5yzs0lgzm { to { transform: rotate(360deg); } }

@keyframes profileSlideUp-b-i5yzs0lgzm {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Profile Header ---- */
.profile-header[b-i5yzs0lgzm] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-sm);
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: 1rem;
    flex-wrap: wrap;
    animation: profileSlideUp-b-i5yzs0lgzm .45s var(--tg-ease-soft, ease-out) both;
}

.avatar-img[b-i5yzs0lgzm] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(76, 224, 198, .3);
}

.avatar-initials[b-i5yzs0lgzm] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(76, 224, 198, .2), rgba(156, 213, 255, .15));
    border: 2px solid rgba(76, 224, 198, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tg-primary);
}

.profile-info[b-i5yzs0lgzm] { flex: 1; min-width: 150px; }

.profile-info h1[b-i5yzs0lgzm] {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 700;
    color: var(--tg-ink);
    margin: 0;
}

.profile-email[b-i5yzs0lgzm] {
    font-size: .8rem;
    color: rgba(107, 143, 150, .8);
    margin: .15rem 0 .4rem;
}

.level-badge[b-i5yzs0lgzm] {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 600;
    background: rgba(76, 224, 198, .12);
    color: var(--tg-primary);
}

.btn-edit[b-i5yzs0lgzm] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1rem;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .1);
    background: transparent;
    color: var(--tg-muted);
    transition: background .18s var(--tg-ease), border-color .18s var(--tg-ease);
    white-space: nowrap;
}

.btn-edit:hover[b-i5yzs0lgzm] {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .2);
}

/* ---- Stats Grid ---- */
.stats-grid[b-i5yzs0lgzm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
    margin-bottom: 1rem;
}

.stat-card[b-i5yzs0lgzm] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 16px;
    padding: 1rem .75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    animation: profileSlideUp-b-i5yzs0lgzm .45s var(--tg-ease-soft, ease-out) both;
    transition: transform .2s var(--tg-ease), border-color .2s var(--tg-ease);
}

.stat-card:hover[b-i5yzs0lgzm] {
    transform: translateY(-2px);
    border-color: rgba(76, 224, 198, .18);
}

.stat-icon[b-i5yzs0lgzm] { font-size: 1.3rem; }

.stat-card .stat-value[b-i5yzs0lgzm] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tg-ink);
    text-transform: capitalize;
}

.stat-card .stat-label[b-i5yzs0lgzm] {
    font-size: .68rem;
    color: rgba(107, 143, 150, .8);
}

/* ---- XP Progress ---- */
.xp-card[b-i5yzs0lgzm] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 14px;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    animation: profileSlideUp-b-i5yzs0lgzm .45s var(--tg-ease-soft, ease-out) .15s both;
}

.xp-header[b-i5yzs0lgzm] {
    display: flex;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.xp-title[b-i5yzs0lgzm] {
    font-size: .8rem;
    font-weight: 600;
    color: var(--tg-ink);
}

.xp-detail[b-i5yzs0lgzm] {
    font-size: .75rem;
    color: rgba(107, 143, 150, .8);
}

.xp-bar[b-i5yzs0lgzm] {
    height: 6px;
    background: rgba(255, 255, 255, .08);
    border-radius: 3px;
    overflow: hidden;
}

.xp-fill[b-i5yzs0lgzm] {
    height: 100%;
    background: linear-gradient(90deg, var(--tg-primary), var(--tg-accent-2));
    border-radius: 3px;
    transition: width .5s var(--tg-ease);
}

/* ---- Activity Overview ---- */
.overview-card[b-i5yzs0lgzm] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-sm);
    padding: 1.25rem;
    margin-bottom: 1rem;
    animation: profileSlideUp-b-i5yzs0lgzm .45s var(--tg-ease-soft, ease-out) .2s both;
}

.overview-card h2[b-i5yzs0lgzm] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin: 0 0 .85rem;
}

.overview-grid[b-i5yzs0lgzm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
}

.overview-item[b-i5yzs0lgzm] {
    text-align: center;
    padding: .5rem;
}

.overview-value[b-i5yzs0lgzm] {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tg-primary);
}

.overview-label[b-i5yzs0lgzm] {
    display: block;
    font-size: .68rem;
    color: rgba(107, 143, 150, .8);
    margin-top: .1rem;
}

/* ---- Recent Badges ---- */
.badges-card[b-i5yzs0lgzm] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-sm);
    padding: 1.25rem;
    margin-bottom: 1rem;
    animation: profileSlideUp-b-i5yzs0lgzm .45s var(--tg-ease-soft, ease-out) .25s both;
}

.badges-header[b-i5yzs0lgzm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem;
}

.badges-header h2[b-i5yzs0lgzm] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--tg-ink);
    margin: 0;
}

.view-all-link[b-i5yzs0lgzm] {
    font-size: .75rem;
    color: var(--tg-primary);
    text-decoration: none;
    font-weight: 600;
    transition: opacity .15s;
}

.view-all-link:hover[b-i5yzs0lgzm] { opacity: .8; text-decoration: underline; }

.badges-grid[b-i5yzs0lgzm] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .5rem;
}

.badge-item[b-i5yzs0lgzm] {
    text-align: center;
    padding: .5rem .25rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    transition: background .15s var(--tg-ease);
}

.badge-item:hover[b-i5yzs0lgzm] {
    background: rgba(255, 255, 255, .06);
}

.badge-icon-display[b-i5yzs0lgzm] {
    display: block;
    font-size: 1.5rem;
    margin-bottom: .2rem;
}

.badge-name-display[b-i5yzs0lgzm] {
    display: block;
    font-size: .6rem;
    color: var(--tg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Quick Links ---- */
.quick-links[b-i5yzs0lgzm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
    animation: profileSlideUp-b-i5yzs0lgzm .45s var(--tg-ease-soft, ease-out) .3s both;
}

.quick-link-card[b-i5yzs0lgzm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 1rem .5rem;
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 14px;
    color: var(--tg-muted);
    text-decoration: none;
    font-size: .75rem;
    font-weight: 600;
    transition: border-color .2s var(--tg-ease), transform .2s var(--tg-ease), box-shadow .2s var(--tg-ease);
    cursor: pointer;
}

.quick-link-card:hover[b-i5yzs0lgzm] {
    border-color: rgba(76, 224, 198, .3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 224, 198, .08);
}

.quick-link-card svg[b-i5yzs0lgzm] { color: var(--tg-primary); }

/* ---- Buttons ---- */
.btn-primary[b-i5yzs0lgzm] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.5rem;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--tg-primary);
    color: var(--tg-bg-deep);
    transition: filter .15s var(--tg-ease);
}

.btn-primary:hover[b-i5yzs0lgzm] { filter: brightness(1.08); }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .profile-header[b-i5yzs0lgzm] { flex-direction: column; text-align: center; }
    .btn-edit[b-i5yzs0lgzm] { width: 100%; justify-content: center; }
    .stats-grid[b-i5yzs0lgzm] { grid-template-columns: repeat(2, 1fr); }
    .overview-grid[b-i5yzs0lgzm] { grid-template-columns: repeat(2, 1fr); }
    .badges-grid[b-i5yzs0lgzm] { grid-template-columns: repeat(3, 1fr); }
    .quick-links[b-i5yzs0lgzm] { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Accessibility: reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
    .profile-header[b-i5yzs0lgzm],
    .stat-card[b-i5yzs0lgzm],
    .xp-card[b-i5yzs0lgzm],
    .overview-card[b-i5yzs0lgzm],
    .badges-card[b-i5yzs0lgzm],
    .quick-links[b-i5yzs0lgzm] { animation: none !important; }
    .xp-fill[b-i5yzs0lgzm],
    .stat-card[b-i5yzs0lgzm],
    .quick-link-card[b-i5yzs0lgzm],
    .badge-item[b-i5yzs0lgzm],
    .btn-edit[b-i5yzs0lgzm] { transition: none !important; }
    .stat-card:hover[b-i5yzs0lgzm],
    .quick-link-card:hover[b-i5yzs0lgzm] { transform: none; }
}
/* /Pages/PurchaseHistory.razor.rz.scp.css */
/* PurchaseHistory.razor.css — TheraGen dark-theme design-token refresh */

.history-container[b-d26ofbcjm6] {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 40px);
    animation: fadeInUp-b-d26ofbcjm6 0.6s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
}

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

#page-heading[b-d26ofbcjm6] {
    color: var(--tg-primary);
    font-size: var(--tg-h1);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: clamp(24px, 4vw, 40px);
}

.loading-text[b-d26ofbcjm6] {
    text-align: center;
    color: var(--tg-muted);
    padding: 40px;
}

/* ---------- Notice ---------- */
.history-notice[b-d26ofbcjm6] {
    padding: 14px 18px;
    border-radius: var(--tg-radius-sm, 12px);
    font-size: .92rem;
    animation: fadeIn-b-d26ofbcjm6 .3s ease-out;
}

.history-notice.warning[b-d26ofbcjm6] {
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

@keyframes fadeIn-b-d26ofbcjm6 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- Empty State ---------- */
.empty-state[b-d26ofbcjm6] {
    text-align: center;
    padding: 60px 20px;
    color: var(--tg-muted);
}

.empty-state svg[b-d26ofbcjm6] {
    opacity: .3;
    margin-bottom: 16px;
}

.empty-state p[b-d26ofbcjm6] {
    font-size: 1rem;
    margin: 0;
}

/* ---------- Table ---------- */
.purchase-history-table[b-d26ofbcjm6] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius, 16px);
    overflow: hidden;
}

.purchase-history-table th[b-d26ofbcjm6],
.purchase-history-table td[b-d26ofbcjm6] {
    border-bottom: 1px solid var(--tg-line);
    padding: 14px 16px;
    text-align: left;
    color: var(--tg-muted);
    font-weight: 500;
    font-size: .85rem;
}

.purchase-history-table th[b-d26ofbcjm6] {
    background: rgba(5,18,26,.6);
    color: var(--tg-ink);
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.purchase-history-table tr:last-child td[b-d26ofbcjm6] {
    border-bottom: none;
}

.purchase-history-table tbody tr[b-d26ofbcjm6] {
    transition: background .2s ease;
}

.purchase-history-table tbody tr:nth-child(even)[b-d26ofbcjm6] {
    background: rgba(255,255,255,.02);
}

.purchase-history-table tbody tr:hover[b-d26ofbcjm6] {
    background: rgba(76,224,198,.05);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .history-container[b-d26ofbcjm6] {
        padding: 16px;
    }

    .purchase-history-table[b-d26ofbcjm6] {
        display: block;
        overflow-x: auto;
    }

    .purchase-history-table th[b-d26ofbcjm6],
    .purchase-history-table td[b-d26ofbcjm6] {
        padding: 10px 12px;
        font-size: .8rem;
        white-space: nowrap;
    }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .history-container[b-d26ofbcjm6],
    .history-notice[b-d26ofbcjm6] {
        animation: none;
    }

    .purchase-history-table tbody tr[b-d26ofbcjm6] {
        transition: none;
    }
}
/* /Pages/Referral.razor.rz.scp.css */
.referral-container[b-wcage7vyvn] {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 20px;
}

.referral-header h1[b-wcage7vyvn] {
    color: var(--tg-ink);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
}

.subtitle[b-wcage7vyvn] {
    color: var(--tg-muted);
    font-size: 15px;
    margin: 0 0 32px;
}

.loading-state[b-wcage7vyvn] {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.spinner[b-wcage7vyvn] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(76, 224, 198, 0.2);
    border-top-color: var(--tg-primary);
    border-radius: 50%;
    animation: spin-b-wcage7vyvn 0.8s linear infinite;
}

@keyframes spin-b-wcage7vyvn { to { transform: rotate(360deg); } }

.stats-grid[b-wcage7vyvn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.stat-card[b-wcage7vyvn] {
    background: var(--tg-card);
    border: 1px solid rgba(76, 224, 198, 0.1);
    border-radius: var(--tg-radius-sm);
    padding: 20px 16px;
    text-align: center;
}

.stat-card.highlight[b-wcage7vyvn] {
    border-color: rgba(76, 224, 198, 0.3);
    background: rgba(76, 224, 198, 0.05);
}

.stat-value[b-wcage7vyvn] {
    color: var(--tg-ink);
    font-size: 24px;
    font-weight: 700;
}

.stat-label[b-wcage7vyvn] {
    color: var(--tg-muted);
    font-size: 12px;
    margin-top: 4px;
}

.referral-code-card[b-wcage7vyvn], .invite-card[b-wcage7vyvn], .how-it-works[b-wcage7vyvn], .history-card[b-wcage7vyvn] {
    background: var(--tg-card);
    border: 1px solid rgba(76, 224, 198, 0.1);
    border-radius: var(--tg-radius-sm);
    padding: 28px;
    margin-bottom: 20px;
}

.referral-code-card h2[b-wcage7vyvn], .invite-card h2[b-wcage7vyvn], .how-it-works h2[b-wcage7vyvn], .history-card h2[b-wcage7vyvn] {
    color: var(--tg-ink);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px;
}

.code-display[b-wcage7vyvn] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(76, 224, 198, 0.08);
    border: 1px dashed rgba(76, 224, 198, 0.3);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
}

.code-text[b-wcage7vyvn] {
    color: var(--tg-primary);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    flex: 1;
}

.copy-btn[b-wcage7vyvn] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(76, 224, 198, 0.3);
    border-radius: 8px;
    padding: 8px 14px;
    color: var(--tg-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-btn:hover[b-wcage7vyvn] {
    border-color: var(--tg-primary);
    color: var(--tg-primary);
}

.code-info[b-wcage7vyvn] {
    color: var(--tg-muted);
    font-size: 13px;
    margin: 0;
}

.code-info strong[b-wcage7vyvn] {
    color: var(--tg-primary);
}

.invite-form[b-wcage7vyvn] {
    display: flex;
    gap: 12px;
}

.email-input[b-wcage7vyvn] {
    flex: 1;
    background: var(--tg-bg-soft);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--tg-ink);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.email-input:focus[b-wcage7vyvn] {
    border-color: var(--tg-primary);
}

.email-input[b-wcage7vyvn]::placeholder {
    color: var(--tg-muted);
    opacity: 0.6;
}

.btn-primary[b-wcage7vyvn] {
    background: linear-gradient(135deg, #4ce0c6, #2C727E);
    color: #02111b;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-primary:hover:not(:disabled)[b-wcage7vyvn] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(76, 224, 198, 0.3);
}

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

.invite-message[b-wcage7vyvn] {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
}

.invite-message.success[b-wcage7vyvn] {
    background: rgba(76, 224, 198, 0.1);
    color: var(--tg-primary);
}

.invite-message.error[b-wcage7vyvn] {
    background: rgba(255, 100, 100, 0.1);
    color: #ff6464;
}

.steps-grid[b-wcage7vyvn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.how-step[b-wcage7vyvn] {
    text-align: center;
}

.step-number[b-wcage7vyvn] {
    width: 36px;
    height: 36px;
    background: rgba(76, 224, 198, 0.15);
    color: var(--tg-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    margin: 0 auto 12px;
}

.how-step h3[b-wcage7vyvn] {
    color: var(--tg-ink);
    font-size: 14px;
    margin: 0 0 6px;
}

.how-step p[b-wcage7vyvn] {
    color: var(--tg-muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.history-list[b-wcage7vyvn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item[b-wcage7vyvn] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(76, 224, 198, 0.06);
}

.history-item:last-child[b-wcage7vyvn] {
    border-bottom: none;
}

.history-email[b-wcage7vyvn] {
    flex: 1;
    color: var(--tg-ink);
    font-size: 14px;
}

.history-status[b-wcage7vyvn] {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.history-status.pending[b-wcage7vyvn] { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
.history-status.signedup[b-wcage7vyvn] { background: rgba(76, 224, 198, 0.15); color: #4ce0c6; }
.history-status.subscribed[b-wcage7vyvn] { background: rgba(76, 175, 80, 0.15); color: #4caf50; }
.history-status.rewarded[b-wcage7vyvn] { background: rgba(156, 213, 255, 0.15); color: #9cd5ff; }
.history-status.expired[b-wcage7vyvn] { background: rgba(158, 158, 158, 0.15); color: #9e9e9e; }

.history-date[b-wcage7vyvn] {
    color: var(--tg-muted);
    font-size: 12px;
}

@media (max-width: 600px) {
    .stats-grid[b-wcage7vyvn] { grid-template-columns: repeat(2, 1fr); }
    .steps-grid[b-wcage7vyvn] { grid-template-columns: 1fr; }
    .invite-form[b-wcage7vyvn] { flex-direction: column; }
}
/* /Pages/SafetyPlan.razor.rz.scp.css */
/* SafetyPlan.razor.css - Scoped styles using TheraGen design system */
/* Critical page - design emphasizes calm, accessibility, and quick action */

/* ============ Container & Layout ============ */
.safety-plan-container[b-jfuwnjaf9p] {
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    animation: fadeInUp-b-jfuwnjaf9p 0.6s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
}

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

/* ============ Page Header ============ */
.page-header[b-jfuwnjaf9p] {
    margin-bottom: 2rem;
    text-align: center;
}

.page-header h1[b-jfuwnjaf9p] {
    font-size: var(--tg-h1, clamp(1.75rem, 2.6vw, 2.5rem));
    font-weight: 800;
    color: var(--tg-primary, #4ce0c6);
    margin: 0 0 0.5rem 0;
}

.subtitle[b-jfuwnjaf9p] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 1rem;
    margin: 0;
}

/* ============ Loading State ============ */
.loading-state[b-jfuwnjaf9p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--tg-muted, #a9cdd1);
}

.loader[b-jfuwnjaf9p] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--tg-line, rgba(255,255,255,.08));
    border-top-color: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    animation: spin-b-jfuwnjaf9p 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-jfuwnjaf9p {
    to { transform: rotate(360deg); }
}

/* ============ Crisis Banner - Critical Visibility ============ */
.crisis-banner[b-jfuwnjaf9p] {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.12),
        rgba(248, 113, 113, 0.08));
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--tg-radius, 22px);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    margin-bottom: 2rem;
    display: flex;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
}

.crisis-banner[b-jfuwnjaf9p]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ef4444, #f87171, #ef4444);
    animation: crisis-pulse-b-jfuwnjaf9p 2s ease-in-out infinite;
}

@keyframes crisis-pulse-b-jfuwnjaf9p {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.crisis-icon[b-jfuwnjaf9p] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);
    animation: pulse-ring-b-jfuwnjaf9p 2s ease-in-out infinite;
}

@keyframes pulse-ring-b-jfuwnjaf9p {
    0%, 100% { box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 8px 32px rgba(239, 68, 68, 0.5), 0 0 0 8px rgba(239, 68, 68, 0.1); }
}

.crisis-content h3[b-jfuwnjaf9p] {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fca5a5;
}

.crisis-content p[b-jfuwnjaf9p] {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    color: var(--tg-muted, #a9cdd1);
}

.crisis-contacts[b-jfuwnjaf9p] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.crisis-link[b-jfuwnjaf9p] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.25rem;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
    transition: all 0.2s ease;
}

.crisis-link:hover[b-jfuwnjaf9p] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
    text-decoration: none;
}

.flag[b-jfuwnjaf9p] {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-weight: 800;
}

/* ============ Plan Sections ============ */
.plan-section[b-jfuwnjaf9p] {
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius);
    margin-bottom: 1rem;
    overflow: hidden;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: transform .85s var(--tg-ease-swell, cubic-bezier(.35,.01,.22,1)),
                box-shadow .85s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1)),
                border-color .85s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
}

.plan-section:hover[b-jfuwnjaf9p] {
    border-color: rgba(76, 224, 198, 0.2);
}

.plan-section.expanded[b-jfuwnjaf9p] {
    box-shadow: var(--tg-shadow-sm, 0 12px 32px rgba(2,11,18,.4));
}

.section-header[b-jfuwnjaf9p] {
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-header.clickable[b-jfuwnjaf9p] {
    cursor: pointer;
    transition: background 0.2s ease;
}

.section-header.clickable:hover[b-jfuwnjaf9p] {
    background: rgba(255, 255, 255, 0.02);
}

.section-header.clickable:focus-visible[b-jfuwnjaf9p] {
    outline: none;
    box-shadow: var(--tg-focus);
}

.section-title[b-jfuwnjaf9p] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.section-number[b-jfuwnjaf9p] {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.section-title h2[b-jfuwnjaf9p] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
}

.section-description[b-jfuwnjaf9p] {
    margin: 0.3rem 0 0 0;
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
}

.section-toggle[b-jfuwnjaf9p] {
    color: var(--tg-muted, #a9cdd1);
    transition: transform 0.3s ease;
}

.plan-section.expanded .section-toggle[b-jfuwnjaf9p] {
    transform: rotate(180deg);
}

.section-content[b-jfuwnjaf9p] {
    padding: 0 1.5rem 1.5rem;
    padding-left: calc(1.5rem + 32px + 1rem);
    animation: slideDown-b-jfuwnjaf9p 0.3s ease;
}

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

.section-text p[b-jfuwnjaf9p] {
    margin: 0 0 0.6rem 0;
    color: var(--tg-ink, #ecf8f5);
    line-height: 1.7;
}

.section-text p:last-child[b-jfuwnjaf9p] {
    margin-bottom: 0;
}

.empty-content[b-jfuwnjaf9p] {
    color: var(--tg-muted, #a9cdd1);
    font-style: italic;
    opacity: 0.8;
}

.section-textarea[b-jfuwnjaf9p] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 12px;
    font-size: 0.95rem;
    color: var(--tg-ink, #ecf8f5);
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.section-textarea[b-jfuwnjaf9p]::placeholder {
    color: var(--tg-muted, #a9cdd1);
}

.section-textarea:focus[b-jfuwnjaf9p] {
    outline: none;
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: var(--tg-focus, 0 0 0 3px rgba(76,224,198,.35));
}

.edit-actions[b-jfuwnjaf9p] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

/* ============ Emergency Contacts ============ */
.emergency-contacts-section .section-header[b-jfuwnjaf9p] {
    border-bottom: 1px solid var(--tg-line, rgba(255,255,255,.08));
}

.contacts-grid[b-jfuwnjaf9p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

.contact-card[b-jfuwnjaf9p] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius-sm, 16px);
    padding: 1.25rem;
    position: relative;
    transition: all 0.3s ease;
}

.contact-card:hover[b-jfuwnjaf9p] {
    transform: translateY(-2px);
    box-shadow: var(--tg-shadow-sm, 0 12px 32px rgba(2,11,18,.4));
}

.contact-card.personal[b-jfuwnjaf9p] {
    border-left: 3px solid var(--tg-primary, #4ce0c6);
}

.contact-card.professional[b-jfuwnjaf9p] {
    border-left: 3px solid #10b981;
}

.contact-card.crisis[b-jfuwnjaf9p] {
    border-left: 3px solid #ef4444;
}

.contact-type-badge[b-jfuwnjaf9p] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--tg-muted, #a9cdd1);
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.contact-name[b-jfuwnjaf9p] {
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.contact-relationship[b-jfuwnjaf9p] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 1rem;
}

.contact-actions[b-jfuwnjaf9p] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-contact[b-jfuwnjaf9p] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.btn-contact.call[b-jfuwnjaf9p] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.btn-contact.call:hover[b-jfuwnjaf9p] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

.btn-contact.email[b-jfuwnjaf9p] {
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
}

.btn-contact.email:hover[b-jfuwnjaf9p] {
    transform: translateY(-1px);
}

/* ============ Review Reminder ============ */
.review-reminder[b-jfuwnjaf9p] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--tg-card, rgba(5,18,26,.82));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    margin-top: 2rem;
}

.reminder-icon[b-jfuwnjaf9p] {
    color: var(--tg-primary, #4ce0c6);
    flex-shrink: 0;
}

.reminder-content p[b-jfuwnjaf9p] {
    margin: 0;
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
}

.reminder-content strong[b-jfuwnjaf9p] {
    color: var(--tg-ink, #ecf8f5);
}

/* ============ Buttons ============ */
.btn-add[b-jfuwnjaf9p] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 800;
    transition: all 0.2s ease;
}

.btn-add:hover[b-jfuwnjaf9p] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(76, 224, 198, 0.3);
}

.btn-link[b-jfuwnjaf9p] {
    background: none;
    border: none;
    color: var(--tg-primary, #4ce0c6);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0;
    transition: color 0.2s ease;
}

.btn-link:hover[b-jfuwnjaf9p] {
    color: var(--tg-accent-2, #9cd5ff);
    text-decoration: underline;
}

.btn-edit[b-jfuwnjaf9p] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    color: var(--tg-muted, #a9cdd1);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 1rem;
    transition: all 0.2s ease;
}

.btn-edit:hover[b-jfuwnjaf9p] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--tg-ink, #ecf8f5);
}

.btn-primary[b-jfuwnjaf9p] {
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: #04181e;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 800;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-jfuwnjaf9p] {
    transform: translateY(-1px);
}

.btn-primary:disabled[b-jfuwnjaf9p] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-jfuwnjaf9p] {
    padding: 0.6rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 999px;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-jfuwnjaf9p] {
    background: rgba(255, 255, 255, 0.08);
}

.btn-danger[b-jfuwnjaf9p] {
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease;
}

.btn-danger:hover[b-jfuwnjaf9p] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-icon-small[b-jfuwnjaf9p] {
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 8px;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    transition: all 0.2s ease;
}

.btn-icon-small:hover[b-jfuwnjaf9p] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tg-ink, #ecf8f5);
}

/* ============ Modal ============ */
.modal-overlay[b-jfuwnjaf9p] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 17, 27, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
    animation: fadeIn-b-jfuwnjaf9p 0.2s ease;
}

@keyframes fadeIn-b-jfuwnjaf9p {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal[b-jfuwnjaf9p] {
    display: block;
    position: static;
    height: auto;
    background: var(--tg-card, rgba(5,18,26,.95));
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: var(--tg-radius, 22px);
    width: 100%;
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--tg-shadow, 0 25px 80px rgba(0,0,0,.45));
    animation: slideUp-b-jfuwnjaf9p 0.3s ease;
}

@keyframes slideUp-b-jfuwnjaf9p {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-large[b-jfuwnjaf9p] {
    max-width: 600px;
}

.modal-header[b-jfuwnjaf9p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--tg-line, rgba(255,255,255,.08));
}

.modal-header h3[b-jfuwnjaf9p] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
}

.btn-close[b-jfuwnjaf9p] {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    cursor: pointer;
    color: var(--tg-muted, #a9cdd1);
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    opacity: 1;
    width: auto;
    height: auto;
    box-sizing: border-box;
}

.btn-close:hover[b-jfuwnjaf9p] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--tg-ink, #ecf8f5);
}

.modal-body[b-jfuwnjaf9p] {
    padding: 1.5rem;
}

.modal-footer[b-jfuwnjaf9p] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--tg-line, rgba(255,255,255,.08));
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ============ Form Groups ============ */
.form-group[b-jfuwnjaf9p] {
    margin-bottom: 1.25rem;
}

.form-group:last-child[b-jfuwnjaf9p] {
    margin-bottom: 0;
}

.form-group label[b-jfuwnjaf9p] {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 0.5rem;
}

.form-group input[b-jfuwnjaf9p],
.form-group select[b-jfuwnjaf9p],
.form-group textarea[b-jfuwnjaf9p] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tg-line, rgba(255,255,255,.08));
    border-radius: 12px;
    font-size: 0.95rem;
    color: var(--tg-ink, #ecf8f5);
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input[b-jfuwnjaf9p]::placeholder,
.form-group textarea[b-jfuwnjaf9p]::placeholder {
    color: var(--tg-muted, #a9cdd1);
    opacity: 0.7;
}

.form-group input:focus[b-jfuwnjaf9p],
.form-group select:focus[b-jfuwnjaf9p],
.form-group textarea:focus[b-jfuwnjaf9p] {
    outline: none;
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: var(--tg-focus, 0 0 0 3px rgba(76,224,198,.35));
}

.form-group select[b-jfuwnjaf9p] {
    cursor: pointer;
}

/* ============ Crisis Resources Modal ============ */
.crisis-resources[b-jfuwnjaf9p] {
    max-height: 60vh;
    overflow-y: auto;
}

.resource-region[b-jfuwnjaf9p] {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--tg-line, rgba(255,255,255,.08));
}

.resource-region:last-child[b-jfuwnjaf9p] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.resource-region h4[b-jfuwnjaf9p] {
    margin: 0 0 0.75rem 0;
    color: var(--tg-primary, #4ce0c6);
    font-size: 1rem;
    font-weight: 800;
}

.resource-region ul[b-jfuwnjaf9p] {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.resource-region li[b-jfuwnjaf9p] {
    margin-bottom: 0.6rem;
    color: var(--tg-muted, #a9cdd1);
    font-size: 0.9rem;
    padding-left: 1rem;
    position: relative;
}

.resource-region li[b-jfuwnjaf9p]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 4px;
    height: 4px;
    background: var(--tg-primary, #4ce0c6);
    border-radius: 50%;
}

.resource-region li strong[b-jfuwnjaf9p] {
    color: var(--tg-ink, #ecf8f5);
}

.resource-region a[b-jfuwnjaf9p] {
    color: var(--tg-primary, #4ce0c6);
    font-weight: 600;
    transition: color 0.2s ease;
}

.resource-region a:hover[b-jfuwnjaf9p] {
    color: var(--tg-accent-2, #9cd5ff);
}

/* ============ Empty State ============ */
.empty-state[b-jfuwnjaf9p] {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--tg-muted, #a9cdd1);
}

.empty-state p[b-jfuwnjaf9p] {
    margin: 0;
}

.help-text[b-jfuwnjaf9p] {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 0.35rem !important;
}

/* ============ Responsive ============ */
@media (max-width: 640px) {
    .crisis-banner[b-jfuwnjaf9p] {
        flex-direction: column;
    }

    .crisis-contacts[b-jfuwnjaf9p] {
        flex-direction: column;
        align-items: stretch;
    }

    .crisis-link[b-jfuwnjaf9p] {
        justify-content: center;
    }

    .contacts-grid[b-jfuwnjaf9p] {
        grid-template-columns: 1fr;
    }

    .modal-overlay[b-jfuwnjaf9p] {
        padding: 0.75rem;
        align-items: center;
    }

    .modal[b-jfuwnjaf9p] {
        max-height: 85vh;
        max-height: 85dvh;
        border-radius: 18px;
    }

    .modal-body[b-jfuwnjaf9p] {
        padding: 1rem;
    }

    .modal-footer[b-jfuwnjaf9p] {
        flex-wrap: wrap;
    }

    .modal-footer .btn-danger[b-jfuwnjaf9p] {
        order: 1;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .section-content[b-jfuwnjaf9p] {
        padding-left: 1.5rem;
    }
}

/* ============ Delete Confirmation ============ */
.confirm-delete-prompt[b-jfuwnjaf9p] {
    font-size: .78rem;
    color: #f87171;
    font-weight: 600;
}

.btn-sm[b-jfuwnjaf9p] {
    padding: .35rem .75rem;
    font-size: .75rem;
}

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce) {
    .crisis-banner[b-jfuwnjaf9p]::before,
    .crisis-icon[b-jfuwnjaf9p] {
        animation: none;
    }

    .safety-plan-container[b-jfuwnjaf9p],
    .modal[b-jfuwnjaf9p],
    .section-content[b-jfuwnjaf9p] {
        animation: none;
    }
}

/* Crisis Intervention Tools */
.tools-section[b-jfuwnjaf9p] { margin-top: 24px; }
.tools-subtitle[b-jfuwnjaf9p] { color: var(--tg-muted, rgba(255,255,255,.5)); font-size: .85rem; margin: 0 0 16px; }
.tools-grid[b-jfuwnjaf9p] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tool-card[b-jfuwnjaf9p] {
    background: rgba(255,255,255,.03); border: 1px solid rgba(76,224,198,.1);
    border-radius: 14px; padding: 20px 16px; text-align: center;
    cursor: pointer; transition: all .2s; display: flex; flex-direction: column;
    align-items: center; gap: 8px;
}
.tool-card:hover[b-jfuwnjaf9p] { background: rgba(76,224,198,.06); border-color: rgba(76,224,198,.25); transform: translateY(-2px); }
.tool-icon[b-jfuwnjaf9p] { font-size: 1.8rem; }
.tool-name[b-jfuwnjaf9p] { font-weight: 600; font-size: .9rem; color: var(--tg-ink, #fff); }
.tool-desc[b-jfuwnjaf9p] { font-size: .78rem; color: var(--tg-muted, rgba(255,255,255,.45)); line-height: 1.3; }
@media (max-width: 600px) { .tools-grid[b-jfuwnjaf9p] { grid-template-columns: 1fr; } }
/* /Pages/Settings.razor.rz.scp.css */
/* Settings.razor.css - Scoped styles for Settings page */

/* ─────────────── Container ─────────────── */
.settings-container[b-0xc6t30o6b] {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 40px);
    animation: fadeInUp-b-0xc6t30o6b 0.6s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
}

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

/* Page heading */
#page-heading[b-0xc6t30o6b] {
    font-size: var(--tg-h1);
    color: var(--tg-primary);
    margin-bottom: clamp(24px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ─────────────── Settings Grid ─────────────── */
.settings-grid[b-0xc6t30o6b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(16px, 2.5vw, 24px);
}

/* ─────────────── Settings Card ─────────────── */
.settings-card[b-0xc6t30o6b] {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    padding: clamp(24px, 3vw, 32px);
    cursor: pointer;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: var(--tg-shadow-sm);
    transition: transform .85s var(--tg-ease-swell, cubic-bezier(.35,.01,.22,1)),
                box-shadow .85s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1)),
                border-color .85s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1));
    position: relative;
    overflow: hidden;
}

.settings-card[b-0xc6t30o6b]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tg-primary), var(--tg-accent-2));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.settings-card:hover[b-0xc6t30o6b] {
    transform: translateY(-6px);
    box-shadow: var(--tg-shadow),
                0 0 40px rgba(76, 224, 198, 0.1);
    border-color: rgba(76, 224, 198, 0.3);
}

.settings-card:hover[b-0xc6t30o6b]::before {
    opacity: 1;
}

.settings-card:active[b-0xc6t30o6b] {
    transform: translateY(-3px);
}

/* Icon container */
.settings-icon[b-0xc6t30o6b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(76, 224, 198, 0.15), rgba(156, 213, 255, 0.1));
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: 16px;
    margin-bottom: 18px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.settings-icon svg[b-0xc6t30o6b] {
    color: var(--tg-primary);
    transition: transform 0.3s ease;
}

.settings-card:hover .settings-icon[b-0xc6t30o6b] {
    transform: scale(1.05);
    background: linear-gradient(135deg, rgba(76, 224, 198, 0.25), rgba(156, 213, 255, 0.15));
}

.settings-card:hover .settings-icon svg[b-0xc6t30o6b] {
    transform: scale(1.1);
}

/* Card title */
.settings-card h4[b-0xc6t30o6b] {
    font-size: 1.15rem;
    color: var(--tg-ink);
    margin: 0 0 10px;
    font-weight: 800;
}

/* Card description */
.settings-card p[b-0xc6t30o6b] {
    color: var(--tg-muted);
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.5;
}

/* Arrow indicator */
.settings-card[b-0xc6t30o6b]::after {
    content: '→';
    position: absolute;
    bottom: 24px;
    right: 24px;
    color: var(--tg-primary);
    font-size: 1.2rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.settings-card:hover[b-0xc6t30o6b]::after {
    opacity: 1;
    transform: translateX(0);
}

/* ─────────────── Individual Card Theming ─────────────── */
/* Language card */
.settings-card:nth-child(1) .settings-icon[b-0xc6t30o6b] {
    background: linear-gradient(135deg, rgba(76, 224, 198, 0.15), rgba(76, 224, 198, 0.05));
}

/* Subscription card */
.settings-card:nth-child(2) .settings-icon[b-0xc6t30o6b] {
    background: linear-gradient(135deg, rgba(156, 213, 255, 0.2), rgba(156, 213, 255, 0.05));
}

.settings-card:nth-child(2) .settings-icon svg[b-0xc6t30o6b] {
    color: var(--tg-accent-2);
}

/* Privacy card */
.settings-card:nth-child(3) .settings-icon[b-0xc6t30o6b] {
    background: linear-gradient(135deg, rgba(244, 196, 215, 0.2), rgba(244, 196, 215, 0.05));
}

.settings-card:nth-child(3) .settings-icon svg[b-0xc6t30o6b] {
    color: #f4c4d7;
}

/* Account card */
.settings-card:nth-child(4) .settings-icon[b-0xc6t30o6b] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.05));
}

.settings-card:nth-child(4) .settings-icon svg[b-0xc6t30o6b] {
    color: #ffc107;
}

/* Notifications card */
.settings-card:nth-child(5) .settings-icon[b-0xc6t30o6b] {
    background: linear-gradient(135deg, rgba(100, 200, 255, 0.2), rgba(100, 200, 255, 0.05));
}

.settings-card:nth-child(5) .settings-icon svg[b-0xc6t30o6b] {
    color: #64c8ff;
}

/* ─────────────── Focus States (Accessibility) ─────────────── */
.settings-card:focus-visible[b-0xc6t30o6b] {
    outline: none;
    box-shadow: var(--tg-focus), var(--tg-shadow-sm);
}

/* ─────────────── Responsive ─────────────── */
@media (max-width: 600px) {
    .settings-container[b-0xc6t30o6b] {
        padding: 16px;
    }

    .settings-grid[b-0xc6t30o6b] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .settings-card[b-0xc6t30o6b] {
        padding: 20px;
        border-radius: var(--tg-radius-sm);
    }

    .settings-icon[b-0xc6t30o6b] {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        margin-bottom: 14px;
    }

    .settings-icon svg[b-0xc6t30o6b] {
        width: 26px;
        height: 26px;
    }

    .settings-card[b-0xc6t30o6b]::after {
        bottom: 20px;
        right: 20px;
    }
}

/* ─────────────── Large screens ─────────────── */
@media (min-width: 768px) {
    .settings-grid[b-0xc6t30o6b] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─────────────── Reduced Motion ─────────────── */
@media (prefers-reduced-motion: reduce) {
    .settings-container[b-0xc6t30o6b] {
        animation: none;
    }

    .settings-card[b-0xc6t30o6b],
    .settings-icon[b-0xc6t30o6b],
    .settings-icon svg[b-0xc6t30o6b],
    .settings-card[b-0xc6t30o6b]::before,
    .settings-card[b-0xc6t30o6b]::after {
        transition: none;
    }

    .settings-card:hover[b-0xc6t30o6b] {
        transform: none;
    }

    .settings-card:hover .settings-icon[b-0xc6t30o6b],
    .settings-card:hover .settings-icon svg[b-0xc6t30o6b] {
        transform: none;
    }
}
/* /Pages/SidebarMenu.razor.rz.scp.css */
/* SidebarMenu.razor.css — dark glassmorphic, token-driven, responsive */

/* ====== Root container ====== */
.sidebar-menu[b-rgjl0nesgc] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: .75rem 0 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}
.sidebar-menu[b-rgjl0nesgc]::-webkit-scrollbar { width: 4px; }
.sidebar-menu[b-rgjl0nesgc]::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }
.sidebar-menu[b-rgjl0nesgc]::-webkit-scrollbar-track { background: transparent; }

/* ====== Staggered entrance ====== */
@keyframes menuFadeIn-b-rgjl0nesgc {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

.profile-section[b-rgjl0nesgc],
.section-label[b-rgjl0nesgc],
.menu-list li[b-rgjl0nesgc],
.logout-section[b-rgjl0nesgc] {
    animation: menuFadeIn-b-rgjl0nesgc .35s var(--tg-ease-soft, cubic-bezier(.4,.14,.2,1)) backwards;
}

/* ====== Profile section ====== */
.profile-section[b-rgjl0nesgc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: .5rem 1rem 1rem;
    gap: .625rem;
}

/* Avatar ring with glow */
.avatar-ring[b-rgjl0nesgc] {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6) 0%, var(--tg-accent-2, #9cd5ff) 100%);
    box-shadow: 0 0 24px rgba(76, 224, 198, .2), 0 0 48px rgba(76, 224, 198, .08);
    flex-shrink: 0;
}
.avatar-ring .avatar-img[b-rgjl0nesgc] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid rgba(5, 18, 26, .95);
}
.avatar-ring .avatar-initials[b-rgjl0nesgc] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tg-bg-accent, #133c4f);
    border: 2.5px solid rgba(5, 18, 26, .95);
    color: var(--tg-primary, #4ce0c6);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: .04em;
}

/* Avatar edit button */
.avatar-edit[b-rgjl0nesgc] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: var(--tg-primary, #4ce0c6);
    color: var(--tg-bg-deep, #02111b);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    transition: transform .18s ease, box-shadow .18s ease;
}
.avatar-edit:hover[b-rgjl0nesgc] {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(76, 224, 198, .3);
}

/* Skeleton placeholder */
.avatar-placeholder[b-rgjl0nesgc] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2.5px solid rgba(5, 18, 26, .95);
}

/* Profile text */
.profile-text[b-rgjl0nesgc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
}
.profile-name[b-rgjl0nesgc] {
    font-size: .95rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
    margin: 0;
    line-height: 1.3;
}
.profile-email[b-rgjl0nesgc] {
    font-size: .78rem;
    color: var(--tg-muted, #a9cdd1);
    margin: 0;
    line-height: 1.3;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tier badge */
.tier-badge[b-rgjl0nesgc] {
    display: inline-flex;
    align-items: center;
    margin-top: .35rem;
    padding: .2rem .7rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tier-explorer[b-rgjl0nesgc] {
    background: rgba(255,255,255,.08);
    color: var(--tg-muted, #a9cdd1);
    border: 1px solid rgba(255,255,255,.1);
}
.tier-lite[b-rgjl0nesgc] {
    background: rgba(76, 224, 198, .12);
    color: var(--tg-primary, #4ce0c6);
    border: 1px solid rgba(76, 224, 198, .25);
}
.tier-plus[b-rgjl0nesgc] {
    background: rgba(156, 213, 255, .12);
    color: var(--tg-accent-2, #9cd5ff);
    border: 1px solid rgba(156, 213, 255, .25);
}
.tier-pro[b-rgjl0nesgc] {
    background: linear-gradient(135deg, rgba(233, 154, 40, .15), rgba(244, 196, 215, .12));
    color: #f4c4d7;
    border: 1px solid rgba(244, 196, 215, .3);
}
.tier-enterprise[b-rgjl0nesgc] {
    background: linear-gradient(135deg, rgba(233, 154, 40, .18), rgba(233, 154, 40, .08));
    color: #E99A28;
    border: 1px solid rgba(233, 154, 40, .3);
}

/* ====== Dividers ====== */
.menu-divider[b-rgjl0nesgc] {
    height: 1px;
    margin: .5rem 1rem;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 20%, rgba(255,255,255,.08) 80%, transparent);
}

/* ====== Section labels ====== */
.section-label[b-rgjl0nesgc] {
    display: block;
    padding: .25rem 1.25rem .15rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(169, 205, 209, .5);
}

/* ====== Menu list ====== */
.menu-list[b-rgjl0nesgc] {
    list-style: none;
    margin: 0;
    padding: .15rem .75rem 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ====== Menu items ====== */
.menu-item[b-rgjl0nesgc] {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem .75rem;
    border-radius: 12px;
    color: var(--tg-ink, #ecf8f5);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition:
        background var(--tg-dur-fast, 160ms) var(--tg-ease, cubic-bezier(.2,.8,.2,1)),
        color var(--tg-dur-fast, 160ms) ease,
        transform var(--tg-dur-fast, 160ms) ease;
}
.menu-item:hover[b-rgjl0nesgc] {
    background: rgba(255, 255, 255, .06);
    transform: translateX(2px);
}
.menu-item:active[b-rgjl0nesgc] {
    transform: translateX(2px) scale(.98);
}
.menu-item:focus-visible[b-rgjl0nesgc] {
    outline: none;
    box-shadow: var(--tg-focus, 0 0 0 3px rgba(76,224,198,.35));
}

/* Active state (NavLink) */
.menu-item:where(.active)[b-rgjl0nesgc] {
    background: rgba(76, 224, 198, .1);
    color: var(--tg-primary, #4ce0c6) !important;
}
.menu-item:where(.active) .menu-icon[b-rgjl0nesgc] {
    color: var(--tg-primary, #4ce0c6);
}

/* Icon container */
.menu-icon[b-rgjl0nesgc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: var(--tg-muted, #a9cdd1);
    flex-shrink: 0;
    transition: background .18s ease, color .18s ease;
}
.menu-item:hover .menu-icon[b-rgjl0nesgc] {
    background: rgba(76, 224, 198, .1);
    color: var(--tg-primary, #4ce0c6);
}

/* Label */
.menu-label[b-rgjl0nesgc] {
    flex: 1;
    text-align: left;
}

/* Inline badge (e.g. subscription tier on menu item) */
.menu-badge[b-rgjl0nesgc] {
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(76, 224, 198, .12);
    color: var(--tg-primary, #4ce0c6);
    border: 1px solid rgba(76, 224, 198, .2);
}

/* ====== Spacer ====== */
.menu-spacer[b-rgjl0nesgc] {
    flex: 1;
    min-height: .75rem;
}

/* ====== Logout ====== */
.logout-section[b-rgjl0nesgc] {
    padding: .25rem .75rem .5rem;
}
.logout-item[b-rgjl0nesgc] {
    color: rgba(255, 140, 140, .85) !important;
}
.logout-item .menu-icon[b-rgjl0nesgc] {
    color: rgba(255, 140, 140, .7);
    background: rgba(255, 100, 100, .06);
}
.logout-item:hover[b-rgjl0nesgc] {
    background: rgba(255, 80, 80, .08) !important;
}
.logout-item:hover .menu-icon[b-rgjl0nesgc] {
    background: rgba(255, 80, 80, .12);
    color: rgba(255, 140, 140, 1);
}

/* ====== Error state ====== */
.error-card[b-rgjl0nesgc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--tg-muted, #a9cdd1);
}
.error-card svg[b-rgjl0nesgc] {
    color: #E99A28;
    opacity: .8;
}
.error-card p[b-rgjl0nesgc] {
    font-size: .82rem;
    margin: 0;
    line-height: 1.4;
}
.error-actions[b-rgjl0nesgc] {
    display: flex;
    gap: .5rem;
    margin-top: .25rem;
}
.btn-retry[b-rgjl0nesgc] {
    padding: .4rem .9rem;
    border: 1px solid rgba(76, 224, 198, .3);
    border-radius: 10px;
    background: rgba(76, 224, 198, .1);
    color: var(--tg-primary, #4ce0c6);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .18s ease;
}
.btn-retry:hover[b-rgjl0nesgc] {
    background: rgba(76, 224, 198, .18);
}
.btn-link-subtle[b-rgjl0nesgc] {
    padding: .4rem .5rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--tg-muted, #a9cdd1);
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(169, 205, 209, .3);
    transition: color .18s ease;
}
.btn-link-subtle:hover[b-rgjl0nesgc] {
    color: var(--tg-ink, #ecf8f5);
}

/* ====== Skeleton shimmer ====== */
@keyframes shimmer-b-rgjl0nesgc {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.shimmer[b-rgjl0nesgc] {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,.04) 25%,
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,.04) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-rgjl0nesgc 1.8s ease-in-out infinite;
}
.skeleton-line[b-rgjl0nesgc] {
    height: 12px;
    border-radius: 6px;
}
.skeleton-line.w-60[b-rgjl0nesgc] { width: 60%; }
.skeleton-line.w-80[b-rgjl0nesgc] { width: 80%; }

/* ====== Tour List Modal ====== */
.tour-list-backdrop[b-rgjl0nesgc] {
    position: fixed;
    inset: 0;
    z-index: 1800;
    background: rgba(2, 17, 27, .85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    padding: 1rem;
    animation: tourListFadeIn-b-rgjl0nesgc .25s ease;
}
.tour-list-modal[b-rgjl0nesgc] {
    width: min(480px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    background: rgba(5, 18, 26, .95);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    padding: 1.5rem;
    animation: tourListSlideUp-b-rgjl0nesgc .3s cubic-bezier(.35,.01,.22,1);
}
.tour-list-modal[b-rgjl0nesgc]::-webkit-scrollbar { width: 5px; }
.tour-list-modal[b-rgjl0nesgc]::-webkit-scrollbar-track { background: transparent; }
.tour-list-modal[b-rgjl0nesgc]::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

.tour-list-header[b-rgjl0nesgc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tour-list-header h3[b-rgjl0nesgc] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tg-ink, #ecf8f5);
    margin: 0;
}
.tour-list-close[b-rgjl0nesgc] {
    background: none;
    border: none;
    color: var(--tg-muted, #a9cdd1);
    cursor: pointer;
    padding: .25rem;
    border-radius: 8px;
    transition: color .2s, background .2s;
}
.tour-list-close:hover[b-rgjl0nesgc] {
    color: var(--tg-ink, #ecf8f5);
    background: rgba(255,255,255,.06);
}
.tour-list-subtitle[b-rgjl0nesgc] {
    font-size: .82rem;
    color: var(--tg-muted, #a9cdd1);
    margin: .25rem 0 1rem;
}
.tour-list-item[b-rgjl0nesgc] {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: var(--tg-ink, #ecf8f5);
    cursor: pointer;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 500;
    margin-bottom: .4rem;
    transition: border-color .2s, background .2s, transform .15s;
    text-align: left;
}
.tour-list-item:hover[b-rgjl0nesgc] {
    border-color: rgba(76, 224, 198, .3);
    background: rgba(76, 224, 198, .05);
    transform: translateY(-1px);
}
.tour-list-item:focus-visible[b-rgjl0nesgc] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(76, 224, 198, .35);
}
.tour-list-item.completed[b-rgjl0nesgc] { opacity: .7; }
.tour-list-icon[b-rgjl0nesgc] { color: var(--tg-primary, #4ce0c6); display: flex; align-items: center; flex-shrink: 0; }
.tour-list-name[b-rgjl0nesgc] { flex: 1; }
.tour-list-check[b-rgjl0nesgc] { color: var(--tg-primary, #4ce0c6); display: flex; align-items: center; }
.tour-list-steps[b-rgjl0nesgc] { font-size: .72rem; color: var(--tg-muted, #a9cdd1); white-space: nowrap; }

@keyframes tourListFadeIn-b-rgjl0nesgc {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes tourListSlideUp-b-rgjl0nesgc {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ====== Responsive ====== */
@media (max-width: 480px) {
    .avatar-ring[b-rgjl0nesgc] { width: 72px; height: 72px; }
    .profile-name[b-rgjl0nesgc] { font-size: .88rem; }
    .tour-list-modal[b-rgjl0nesgc] { padding: 1rem; border-radius: 18px; }
}

/* ====== Accessibility ====== */
@media (hover: none) {
    .menu-item:hover[b-rgjl0nesgc] { transform: none; background: transparent; }
    .menu-item:active[b-rgjl0nesgc] { background: rgba(255,255,255,.06); }
}

@media (prefers-reduced-motion: reduce) {
    .profile-section[b-rgjl0nesgc],
    .section-label[b-rgjl0nesgc],
    .menu-list li[b-rgjl0nesgc],
    .logout-section[b-rgjl0nesgc],
    .tour-list-backdrop[b-rgjl0nesgc],
    .tour-list-modal[b-rgjl0nesgc] {
        animation: none;
    }
}
/* /Pages/Subscription.razor.rz.scp.css */
/* Pages/Subscription.razor.css
   5-tier subscription grid with TheraGen tokens. */

/* ---------- Layout ---------- */
.subtitle[b-8ofjznnxuf]{
    font-size: .95rem;
    margin-bottom: .5rem;
}

.subscription-container[b-8ofjznnxuf]{
    --gap: clamp(12px, 1.8vw, 20px);
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:var(--gap);
    width:min(1320px, 96vw);
    margin-inline:auto;
    padding: clamp(12px, 2.5vh, 24px);
}
.subscription-container[b-8ofjznnxuf]::before,
.subscription-container[b-8ofjznnxuf]::after{ content:none; }

/* ---------- Billing Toggle ---------- */
.billing-toggle-container[b-8ofjznnxuf]{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.75rem;
    margin-bottom:1.2rem;
}
.toggle-label[b-8ofjznnxuf]{
    font-size:.9rem;
    font-weight:600;
    color:var(--tg-muted);
    transition: color .2s;
}
.toggle-label.active[b-8ofjznnxuf]{ color:var(--tg-primary); font-weight:800 }
.save-badge[b-8ofjznnxuf]{
    background: #22a06b;
    color:#fff;
    font-size:.7rem;
    padding: 2px 6px;
    border-radius:999px;
    margin-left:4px;
    font-weight:700;
}
.toggle-switch[b-8ofjznnxuf]{
    position:relative;
    display:inline-block;
    width:48px;
    height:26px;
}
.toggle-switch input[b-8ofjznnxuf]{ opacity:0; width:0; height:0 }
.toggle-switch .slider[b-8ofjznnxuf]{
    position:absolute;
    cursor:pointer;
    inset:0;
    background:#ccc;
    border-radius:999px;
    transition: background .3s;
}
.toggle-switch .slider[b-8ofjznnxuf]::before{
    content:"";
    position:absolute;
    height:20px; width:20px;
    left:3px; bottom:3px;
    background:#fff;
    border-radius:50%;
    transition: transform .3s;
}
.toggle-switch input:checked + .slider[b-8ofjznnxuf]{ background:var(--tg-primary) }
.toggle-switch input:checked + .slider[b-8ofjznnxuf]::before{ transform:translateX(22px) }

/* ---------- Cards ---------- */
.subscription-card[b-8ofjznnxuf]{
    --pad: clamp(14px, 2vw, 20px);
    background:var(--tg-card);
    border:1px solid var(--tg-line);
    border-radius:var(--tg-radius);
    box-shadow:var(--tg-shadow-sm);
    display:flex;
    flex-direction:column;
    padding:var(--pad);
    position:relative;
    transition:
            transform .28s cubic-bezier(.2,.8,.2,1),
            box-shadow .28s cubic-bezier(.2,.8,.2,1),
            border-color .28s ease;
    will-change: transform, box-shadow;
}
.subscription-card:hover[b-8ofjznnxuf]{
    transform: translateY(-4px);
    box-shadow:var(--tg-shadow);
    border-color: color-mix(in oklab, var(--tg-primary) 40%, var(--tg-line));
}
.subscription-card.active[b-8ofjznnxuf]{
    background: linear-gradient(180deg, #2C727E 0%, #145F6D 100%);
    color:#fff;
    border-color: transparent;
    box-shadow:var(--tg-shadow);
}
.subscription-card.highlighted[b-8ofjznnxuf]{
    border: 2px solid var(--tg-primary);
    box-shadow: 0 4px 20px rgba(44,114,126,.18);
}

/* Badge */
.plan-badge[b-8ofjznnxuf]{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:var(--tg-primary);
    color:#fff;
    font-size:.72rem;
    font-weight:800;
    padding:3px 14px;
    border-radius:999px;
    white-space:nowrap;
    letter-spacing:.02em;
}

/* Top area */
.subscription-card .plan-title[b-8ofjznnxuf]{
    text-align:center;
    margin-bottom:.25rem;
}
.subscription-card .plan-title h5[b-8ofjznnxuf]{
    margin:0;
    font-weight:800;
    color: currentColor;
    font-size: clamp(.85rem, 1.6vw, 1rem);
}

/* Middle info block */
.subscription-card .plan-info[b-8ofjznnxuf]{
    display:grid;
    align-content:start;
    gap:.35rem;
    min-height: 100px;
    margin-top:.35rem;
}
.subscription-card .plan-info .plan-description p[b-8ofjznnxuf]{
    margin:0;
    color:var(--tg-muted);
    font-size:.82rem;
    line-height:1.4;
}
.subscription-card.active .plan-info .plan-description p[b-8ofjznnxuf]{ color:#E8F5F7 }

.subscription-card .plan-info .plan-price .price[b-8ofjznnxuf]{
    margin:0;
    font-weight:800;
    color: var(--tg-primary);
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
}
.subscription-card .plan-info .plan-price .price .price-period[b-8ofjznnxuf]{
    font-size:.7em;
    font-weight:600;
    opacity:.8;
}
.subscription-card.active .plan-info .plan-price .price[b-8ofjznnxuf]{ color:#fff }

.annual-total[b-8ofjznnxuf]{
    display:block;
    font-size:.72rem;
    color:var(--tg-muted);
    margin-top:2px;
}
.subscription-card.active .annual-total[b-8ofjznnxuf]{ color:#c4e4ea }

.annual-savings[b-8ofjznnxuf]{
    display:inline-block;
    margin-top:4px;
    padding:2px 8px;
    border-radius:999px;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.02em;
    background:linear-gradient(135deg,#4ce0c6,#2C727E);
    color:#02111b;
}
.subscription-card.active .annual-savings[b-8ofjznnxuf]{ background:#fff; color:#0f3a44 }

/* Divider */
.subscription-card hr[b-8ofjznnxuf]{
    margin:.55rem 0 !important;
    border:0;
    border-top:1px solid var(--tg-line);
    opacity:.75;
}
.subscription-card.active hr[b-8ofjznnxuf]{ border-color: rgba(255,255,255,.25) }

/* Details list */
.subscription-card .plan-details[b-8ofjznnxuf]{
    display:grid;
    gap:.4rem;
    margin-top:.3rem;
    flex:1;
}
.subscription-card .plan-details p[b-8ofjznnxuf]{
    margin:0 0 .2rem 0 !important;
    color:var(--tg-muted);
    font-weight:700;
    letter-spacing:.01em;
    font-size:.78rem;
}
.subscription-card.active .plan-details p[b-8ofjznnxuf]{ color:#EAF6F8 }

.feature-container[b-8ofjznnxuf]{
    display:grid;
    gap:.35rem;
    font-size:.82rem;
}
.feature-row[b-8ofjznnxuf]{
    display:grid;
    grid-template-columns: 16px 1fr;
    align-items:start;
    gap:.4rem;
}
.feature-row svg[b-8ofjznnxuf]{ flex:0 0 16px }
.subscription-card.active .feature-row span[b-8ofjznnxuf]{ color:#F7FEFF }

/* ---------- Buttons ---------- */
.subscription-card button[b-8ofjznnxuf],
.subscription-card .btn[b-8ofjznnxuf]{
    --btn-pad-x: .8rem;
    --btn-pad-y: .55rem;
    align-self:center;
    margin-top: auto;
    padding-top: .65rem;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border:1px solid transparent;
    border-radius:999px;
    font-weight:800;
    cursor:pointer;
    background:#F39C12;
    color:#fff;
    font-size:.78rem;
    transition: transform .2s ease, filter .2s ease, background-color .25s ease, box-shadow .25s ease;
    box-shadow: 0 6px 14px rgba(243,156,18,.22);
    width:100%;
    text-align:center;
}
.subscription-card button:hover[b-8ofjznnxuf],
.subscription-card .btn:hover[b-8ofjznnxuf]{
    background:#04485D;
    box-shadow: 0 8px 22px rgba(4,72,93,.28);
    transform: translateY(-1px);
}
.subscription-card.active .btn[b-8ofjznnxuf]{
    background:#fff;
    color:#2C727E;
    box-shadow: 0 6px 14px rgba(255,255,255,.16);
}
.subscription-card.active .btn:hover[b-8ofjznnxuf]{
    background:#E9F3F5;
}
.btn-highlight[b-8ofjznnxuf]{
    background: var(--tg-primary) !important;
    color:#fff !important;
    box-shadow: 0 6px 18px rgba(44,114,126,.3) !important;
}
.btn-highlight:hover[b-8ofjznnxuf]{
    background:#04485D !important;
}

/* Status variants */
.btn-activated[b-8ofjznnxuf]{
    background: #22a06b !important;
    color:#fff !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.35rem;
}
.btn-activated svg[b-8ofjznnxuf]{ margin-left: 2px }

.btn-default[b-8ofjznnxuf]{
    background: #E99A28;
    color:#fff;
}

/* Headings shared on the page */
.text-center[b-8ofjznnxuf]{
    color: var(--tg-primary);
    padding-top: 10px;
}

/* ---------- Modal title/subtitle ---------- */
.modal-title[b-8ofjznnxuf]{
    text-align:center;
    color:var(--tg-primary);
    margin-bottom:1rem;
}
.modal-subtitle[b-8ofjznnxuf]{
    text-align:center;
    color:var(--tg-muted);
    margin-bottom:1rem;
    font-size:.92rem;
}

/* ---------- Payment method button ---------- */
.payment-method-btn[b-8ofjznnxuf]{
    display:flex;
    align-items:center;
    gap:.75rem;
    width:100%;
    padding:.85rem 1.1rem;
    background:rgba(76, 224, 198, 0.08);
    border:1px solid rgba(76, 224, 198, 0.3);
    border-radius:var(--tg-radius-sm, 12px);
    color:var(--tg-primary);
    cursor:pointer;
    transition: background .2s, border-color .2s, transform .2s;
}
.payment-method-btn:hover:not(:disabled)[b-8ofjznnxuf]{
    background:rgba(76, 224, 198, 0.15);
    border-color:var(--tg-primary);
    transform:translateY(-1px);
}
.payment-method-btn:disabled[b-8ofjznnxuf]{
    opacity:.5;
    cursor:not-allowed;
}
.payment-label small[b-8ofjznnxuf]{
    display:block;
    color:var(--tg-muted);
    font-size:.8rem;
    margin-top:2px;
}

/* ---------- Payment alert ---------- */
.payment-alert[b-8ofjznnxuf]{
    max-width: 800px;
    margin: 1rem auto;
    padding: .85rem 1.1rem;
    border-radius: var(--tg-radius-sm, 12px);
    font-size: .92rem;
    animation: fadeIn-b-8ofjznnxuf .3s ease-out;
}
@keyframes fadeIn-b-8ofjznnxuf{
    from{ opacity:0 }
    to  { opacity:1 }
}
.payment-alert.success[b-8ofjznnxuf]{
    background: rgba(76, 224, 198, 0.12);
    border: 1px solid rgba(76, 224, 198, 0.3);
    color: var(--tg-primary);
}
.payment-alert.error[b-8ofjznnxuf]{
    background: rgba(255, 96, 96, 0.12);
    border: 1px solid rgba(255, 96, 96, 0.3);
    color: #ff8f8f;
}

/* ---------- Cancel section ---------- */
.cancel-section[b-8ofjznnxuf]{
    text-align:center;
    margin-top:1.5rem;
    padding-bottom:2rem;
}
.cancel-link[b-8ofjznnxuf]{
    background:none;
    border:none;
    color:var(--tg-muted);
    font-size:.85rem;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:3px;
    transition: color .2s;
    padding:0;
}
.cancel-link:hover[b-8ofjznnxuf]{
    color:#ff8f8f;
}

/* ---------- Modal ---------- */
.modal-backdrop[b-8ofjznnxuf]{
    position:fixed;
    inset:0;
    background: rgba(12,45,49,.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display:grid;
    place-items:center;
}
.modal-backdrop .modal-body[b-8ofjznnxuf]{
    background:rgba(5,18,26,.95);
    -webkit-backdrop-filter:blur(24px);
    backdrop-filter:blur(24px);
    border:1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    box-shadow: var(--tg-shadow);
    position:relative;
    width:min(520px, 92vw);
    padding:1.25rem;
    color:var(--tg-ink);
    animation: modalIn-b-8ofjznnxuf .3s var(--tg-ease-soft, ease-out) both;
}
@keyframes modalIn-b-8ofjznnxuf{
    from{ opacity:0; transform:scale(.96) translateY(8px); }
    to  { opacity:1; transform:scale(1) translateY(0); }
}
.modal-backdrop .modal-body .close-button[b-8ofjznnxuf]{
    position:absolute;
    top:.5rem; right:.7rem;
    font-size: 1.1rem;
    font-weight:800;
    cursor:pointer;
    color: var(--tg-muted);
    transition: color .15s;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}
.modal-backdrop .modal-body .close-button:hover[b-8ofjznnxuf]{
    color: var(--tg-ink);
}

/* ---------- Accessibility & motion ---------- */
@media (prefers-reduced-motion: reduce){
    .subscription-card[b-8ofjznnxuf],
    .subscription-card .btn[b-8ofjznnxuf]{
        transition:none;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
    .subscription-container[b-8ofjznnxuf]{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px){
    .subscription-container[b-8ofjznnxuf]{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px){
    .subscription-container[b-8ofjznnxuf]{
        grid-template-columns: 1fr;
    }
    .subscription-card[b-8ofjznnxuf]{ padding:14px }
    .feature-row[b-8ofjznnxuf]{ grid-template-columns:16px 1fr }
}

/* Exit Survey Modal */
.exit-survey-backdrop[b-8ofjznnxuf] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: fadeIn-b-8ofjznnxuf .3s;
}
@keyframes fadeIn-b-8ofjznnxuf { from { opacity:0 } to { opacity:1 } }

.exit-survey-card[b-8ofjznnxuf] {
    background: var(--tg-bg-soft);
    border: 1px solid rgba(76,224,198,.2);
    border-radius: 18px;
    padding: 28px;
    width: 460px;
    max-width: 90vw;
}
.exit-survey-card h3[b-8ofjznnxuf] {
    color: var(--tg-ink);
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
}
.exit-survey-card p[b-8ofjznnxuf] {
    color: var(--tg-muted);
    font-size: 14px;
    margin: 0 0 16px;
    line-height: 1.5;
}
.exit-reasons[b-8ofjznnxuf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.exit-reason-btn[b-8ofjznnxuf] {
    background: var(--tg-card);
    border: 1px solid rgba(76,224,198,.15);
    border-radius: 10px;
    padding: 8px 16px;
    color: var(--tg-ink);
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
}
.exit-reason-btn:hover[b-8ofjznnxuf] { border-color: rgba(76,224,198,.4); }
.exit-reason-btn.selected[b-8ofjznnxuf] { border-color: var(--tg-primary); background: rgba(76,224,198,.12); color: var(--tg-primary); }

/* Pre-cancel pause intercept — primary path is pause, not cancel */
.pause-option-btn[b-8ofjznnxuf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 14px 16px;
    background: rgba(76, 224, 198, .06);
    border: 1px solid rgba(76, 224, 198, .25);
    border-radius: 12px;
    color: var(--tg-ink);
    cursor: pointer;
    text-align: left;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.pause-option-btn:hover:not(:disabled)[b-8ofjznnxuf] {
    background: rgba(76, 224, 198, .12);
    border-color: rgba(76, 224, 198, .5);
    transform: translateY(-1px);
}
.pause-option-btn:disabled[b-8ofjznnxuf] { opacity: .5; cursor: not-allowed; }
.pause-option-btn strong[b-8ofjznnxuf] { color: var(--tg-primary); font-size: .95rem; }
.pause-option-sub[b-8ofjznnxuf] {
    color: var(--tg-muted);
    font-size: .8rem;
    font-weight: 400;
}
/* /Pages/SubscriptionManagement.razor.rz.scp.css */
.subscription-container[b-ykbisz10ry] {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.page-header[b-ykbisz10ry] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.page-header h1[b-ykbisz10ry] {
    font-size: 2.25rem;
    font-weight: 700;
    background: linear-gradient(120deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.page-header .subtitle[b-ykbisz10ry] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 1.1rem;
}

/* Loading State */
.loading-state[b-ykbisz10ry] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--tg-muted, #a9cdd1);
}

.error-state[b-ykbisz10ry] {
    text-align: center;
    padding: 3rem 1rem;
    color: #ff6b7a;
}

.loader[b-ykbisz10ry] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(76, 224, 198, 0.2);
    border-top: 3px solid var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    animation: spin-b-ykbisz10ry 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin-b-ykbisz10ry {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Plan Card */
.plan-card[b-ykbisz10ry] {
    background: var(--tg-bg-soft, #0b2f40);
    border-radius: var(--tg-radius, 22px);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(76, 224, 198, 0.15);
}

.plan-card[b-ykbisz10ry]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.plan-free[b-ykbisz10ry]::before {
    background: var(--tg-muted, #a9cdd1);
}

.plan-premium[b-ykbisz10ry]::before {
    background: linear-gradient(90deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
}

.plan-professional[b-ykbisz10ry]::before {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.plan-badge[b-ykbisz10ry] {
    background: rgba(76, 224, 198, 0.15);
    color: var(--tg-primary, #4ce0c6);
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
}

.plan-premium .plan-badge[b-ykbisz10ry] {
    background: linear-gradient(120deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: var(--tg-bg-deep, #02111b);
}

.plan-professional .plan-badge[b-ykbisz10ry] {
    background: linear-gradient(120deg, #fbbf24, #f59e0b);
    color: var(--tg-bg-deep, #02111b);
}

.plan-details[b-ykbisz10ry] {
    flex: 1;
}

.plan-details h2[b-ykbisz10ry] {
    font-size: 1.1rem;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.5rem;
}

.pause-notice[b-ykbisz10ry],
.trial-notice[b-ykbisz10ry] {
    font-size: 0.9rem;
    color: #f9b17a;
    margin-bottom: 0.75rem;
}

.plan-stats[b-ykbisz10ry] {
    display: flex;
    gap: 2rem;
}

.stat[b-ykbisz10ry] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-ykbisz10ry] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tg-ink, #ecf8f5);
}

.stat-label[b-ykbisz10ry] {
    font-size: 0.8rem;
    color: var(--tg-muted, #a9cdd1);
}

.plan-actions[b-ykbisz10ry] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Buttons */
.btn-primary[b-ykbisz10ry] {
    background: linear-gradient(120deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    color: var(--tg-bg-deep, #02111b);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-primary:hover:not(:disabled)[b-ykbisz10ry] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 224, 198, 0.3);
}

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

.btn-secondary[b-ykbisz10ry] {
    background: transparent;
    color: var(--tg-muted, #a9cdd1);
    border: 1px solid rgba(76, 224, 198, 0.3);
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.btn-secondary:hover:not(:disabled)[b-ykbisz10ry] {
    background: rgba(76, 224, 198, 0.1);
    border-color: var(--tg-primary, #4ce0c6);
    color: var(--tg-ink, #ecf8f5);
}

.btn-icon[b-ykbisz10ry] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--tg-muted, #a9cdd1);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-icon.danger:hover[b-ykbisz10ry] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Quick Actions */
.quick-actions[b-ykbisz10ry] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.action-card[b-ykbisz10ry] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: var(--tg-radius, 22px);
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-card:hover[b-ykbisz10ry] {
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: 0 8px 32px rgba(76, 224, 198, 0.15);
    transform: translateY(-4px);
}

.action-icon[b-ykbisz10ry] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gift-icon[b-ykbisz10ry] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.family-icon[b-ykbisz10ry] {
    background: rgba(156, 213, 255, 0.15);
    color: var(--tg-accent-2, #9cd5ff);
}

.promo-icon[b-ykbisz10ry] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.action-card span[b-ykbisz10ry] {
    font-size: 0.9rem;
    color: var(--tg-ink, #ecf8f5);
    font-weight: 500;
}

/* Section Card */
.section-card[b-ykbisz10ry] {
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.section-card.minimal[b-ykbisz10ry] {
    padding: 0;
}

.section-header[b-ykbisz10ry] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-card h2[b-ykbisz10ry] {
    font-size: 1rem;
    color: var(--tg-ink, #ecf8f5);
    margin: 0;
}

.member-count[b-ykbisz10ry] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
}

/* Family Members */
.family-members[b-ykbisz10ry] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.member-row[b-ykbisz10ry] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(76, 224, 198, 0.05);
    border-radius: 12px;
}

.member-info[b-ykbisz10ry] {
    flex: 1;
}

.member-name[b-ykbisz10ry] {
    display: block;
    font-weight: 500;
    color: var(--tg-ink, #ecf8f5);
}

.member-email[b-ykbisz10ry] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
}

.member-status[b-ykbisz10ry] {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
}

.status-active[b-ykbisz10ry] {
    background: rgba(76, 224, 198, 0.15);
    color: var(--tg-primary, #4ce0c6);
}

.status-pending[b-ykbisz10ry] {
    background: rgba(249, 177, 122, 0.15);
    color: #f9b17a;
}

.status-inactive[b-ykbisz10ry] {
    background: rgba(76, 224, 198, 0.05);
    color: var(--tg-muted, #a9cdd1);
}

.invite-section[b-ykbisz10ry] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(76, 224, 198, 0.1);
}

.invite-section .form-input[b-ykbisz10ry] {
    flex: 1;
}

/* Gifts List */
.gifts-list[b-ykbisz10ry] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.gift-row[b-ykbisz10ry] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(76, 224, 198, 0.05);
    border-radius: 12px;
}

.gift-info[b-ykbisz10ry] {
    flex: 1;
}

.gift-recipient[b-ykbisz10ry] {
    display: block;
    font-weight: 500;
    color: var(--tg-ink, #ecf8f5);
}

.gift-plan[b-ykbisz10ry] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
}

.gift-status[b-ykbisz10ry] {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
}

.status-redeemed[b-ykbisz10ry] {
    background: rgba(76, 224, 198, 0.15);
    color: var(--tg-primary, #4ce0c6);
}

.status-expired[b-ykbisz10ry] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.gift-date[b-ykbisz10ry] {
    font-size: 0.8rem;
    color: var(--tg-muted, #a9cdd1);
}

/* Link Row */
.link-row[b-ykbisz10ry] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    color: var(--tg-ink, #ecf8f5);
    text-decoration: none;
    transition: background 0.2s ease;
}

.link-row:hover[b-ykbisz10ry] {
    background: rgba(76, 224, 198, 0.05);
}

/* Form Elements */
.form-group[b-ykbisz10ry] {
    margin-bottom: 1rem;
}

.form-group label[b-ykbisz10ry] {
    display: block;
    font-weight: 500;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.35rem;
}

.form-input[b-ykbisz10ry],
.form-select[b-ykbisz10ry],
.form-textarea[b-ykbisz10ry] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: 12px;
    font-size: 0.95rem;
    background: var(--tg-bg-deep, #02111b);
    color: var(--tg-ink, #ecf8f5);
}

.form-input:focus[b-ykbisz10ry],
.form-select:focus[b-ykbisz10ry],
.form-textarea:focus[b-ykbisz10ry] {
    outline: none;
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: 0 0 0 3px rgba(76, 224, 198, 0.1);
}

.promo-input[b-ykbisz10ry] {
    text-transform: uppercase;
    font-family: monospace;
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-align: center;
}

/* Modal */
.modal-overlay[b-ykbisz10ry] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 17, 27, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}

.modal-content[b-ykbisz10ry] {
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: var(--tg-radius, 22px);
    padding: 2rem;
    max-width: 450px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--tg-shadow, 0 25px 80px rgba(0,0,0,.45));
}

.modal-content h2[b-ykbisz10ry] {
    font-size: 1.25rem;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.5rem;
}

.modal-content > p[b-ykbisz10ry] {
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 1.25rem;
}

.modal-actions[b-ykbisz10ry] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Gift Total */
.gift-total[b-ykbisz10ry] {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: rgba(76, 224, 198, 0.05);
    border-radius: 12px;
    margin-top: 1rem;
    font-weight: 500;
    border: 1px solid rgba(76, 224, 198, 0.1);
}

.total-amount[b-ykbisz10ry] {
    font-size: 1.25rem;
    color: var(--tg-primary, #4ce0c6);
}

/* Family Plan Options */
.family-plan-options[b-ykbisz10ry] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plan-option[b-ykbisz10ry] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid rgba(76, 224, 198, 0.2);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plan-option:hover[b-ykbisz10ry] {
    border-color: var(--tg-primary, #4ce0c6);
    background: rgba(76, 224, 198, 0.05);
}

.plan-option input:checked + .option-details[b-ykbisz10ry] {
    color: var(--tg-primary, #4ce0c6);
}

.option-title[b-ykbisz10ry] {
    display: block;
    font-weight: 600;
    color: var(--tg-ink, #ecf8f5);
}

.option-price[b-ykbisz10ry] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
}

/* Promo Message */
.promo-message[b-ykbisz10ry] {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.promo-message.success[b-ykbisz10ry] {
    background: rgba(76, 224, 198, 0.1);
    color: var(--tg-primary, #4ce0c6);
    border: 1px solid rgba(76, 224, 198, 0.2);
}

.promo-message.error[b-ykbisz10ry] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .subscription-container[b-ykbisz10ry] {
        padding: 1rem;
    }

    .plan-card[b-ykbisz10ry] {
        flex-direction: column;
        text-align: center;
    }

    .plan-stats[b-ykbisz10ry] {
        justify-content: center;
    }

    .plan-actions[b-ykbisz10ry] {
        width: 100%;
    }

    .plan-actions button[b-ykbisz10ry] {
        width: 100%;
    }

    .quick-actions[b-ykbisz10ry] {
        grid-template-columns: 1fr;
    }

    .member-row[b-ykbisz10ry] {
        flex-wrap: wrap;
    }

    .invite-section[b-ykbisz10ry] {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loader[b-ykbisz10ry] { animation: none; }
}
/* /Pages/Wearables.razor.rz.scp.css */
.wearables-container[b-qn5mh937bn] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.page-header[b-qn5mh937bn] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.page-header h1[b-qn5mh937bn] {
    font-size: 2.25rem;
    font-weight: 700;
    background: linear-gradient(120deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.page-header .subtitle[b-qn5mh937bn] {
    color: var(--tg-muted, #a9cdd1);
    font-size: 1.1rem;
}

/* Loading State */
.loading-state[b-qn5mh937bn] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--tg-muted, #a9cdd1);
}

.loader[b-qn5mh937bn] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(76, 224, 198, 0.2);
    border-top: 3px solid var(--tg-primary, #4ce0c6);
    border-radius: 50%;
    animation: spin-b-qn5mh937bn 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin-b-qn5mh937bn {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Summary Card */
.summary-card[b-qn5mh937bn] {
    background: linear-gradient(135deg, var(--tg-primary, #4ce0c6), var(--tg-accent-2, #9cd5ff));
    border-radius: var(--tg-radius, 22px);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--tg-bg-deep, #02111b);
    box-shadow: 0 15px 40px rgba(76, 224, 198, 0.25);
}

.summary-card h2[b-qn5mh937bn] {
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
    opacity: 0.9;
    font-weight: 600;
}

.summary-grid[b-qn5mh937bn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.summary-stat[b-qn5mh937bn] {
    text-align: center;
    padding: 0.75rem;
    background: rgba(2, 17, 27, 0.15);
    border-radius: 16px;
}

.stat-icon[b-qn5mh937bn] {
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.stat-icon.steps-icon[b-qn5mh937bn] {
    color: #4ce0c6;
}

.stat-icon.heart-icon[b-qn5mh937bn] {
    color: #f87171;
}

.stat-icon.sleep-icon[b-qn5mh937bn] {
    color: #a78bfa;
}

.stat-icon.calories-icon[b-qn5mh937bn] {
    color: #fbbf24;
}

.stat-value[b-qn5mh937bn] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.stat-label[b-qn5mh937bn] {
    font-size: 0.8rem;
    opacity: 0.85;
}

/* Insights Card */
.insights-card[b-qn5mh937bn] {
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: var(--tg-radius, 22px);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.insights-card h2[b-qn5mh937bn] {
    font-size: 1.1rem;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.25rem;
}

.insights-subtitle[b-qn5mh937bn] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 1.25rem;
}

.insights-grid[b-qn5mh937bn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.insight-item[b-qn5mh937bn] {
    padding: 1rem;
    background: rgba(76, 224, 198, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(76, 224, 198, 0.1);
}

.insight-metric[b-qn5mh937bn] {
    font-weight: 600;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.5rem;
}

.insight-bar[b-qn5mh937bn] {
    height: 6px;
    background: rgba(76, 224, 198, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.insight-bar-fill[b-qn5mh937bn] {
    height: 100%;
    background: var(--tg-primary, #4ce0c6);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.positive-strong .insight-bar-fill[b-qn5mh937bn] { background: #4ce0c6; }
.positive-moderate .insight-bar-fill[b-qn5mh937bn] { background: #6ee7b7; }
.negative-strong .insight-bar-fill[b-qn5mh937bn] { background: #ef4444; }
.negative-moderate .insight-bar-fill[b-qn5mh937bn] { background: #f9b17a; }

.insight-description[b-qn5mh937bn] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.4;
}

/* Devices Section */
.devices-section[b-qn5mh937bn] {
    margin-bottom: 1.5rem;
}

.devices-section h2[b-qn5mh937bn] {
    font-size: 1.1rem;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 1rem;
}

.empty-devices[b-qn5mh937bn] {
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px dashed rgba(76, 224, 198, 0.3);
    border-radius: var(--tg-radius, 22px);
    color: var(--tg-muted, #a9cdd1);
}

.empty-icon[b-qn5mh937bn] {
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 1rem;
    opacity: 0.6;
}

.help-text[b-qn5mh937bn] {
    font-size: 0.9rem;
    color: var(--tg-muted, #a9cdd1);
    margin-top: 0.5rem;
}

.devices-grid[b-qn5mh937bn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.device-card[b-qn5mh937bn] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: var(--tg-radius, 22px);
    transition: all 0.3s ease;
}

.device-card:hover[b-qn5mh937bn] {
    border-color: rgba(76, 224, 198, 0.3);
}

.device-card.active[b-qn5mh937bn] {
    border-color: var(--tg-primary, #4ce0c6);
    box-shadow: 0 0 0 1px rgba(76, 224, 198, 0.1);
}

.device-card.inactive[b-qn5mh937bn] {
    opacity: 0.7;
}

.device-icon[b-qn5mh937bn] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(76, 224, 198, 0.15);
    color: var(--tg-primary, #4ce0c6);
    border-radius: 14px;
}

.device-info[b-qn5mh937bn] {
    flex: 1;
}

.device-name[b-qn5mh937bn] {
    font-weight: 600;
    color: var(--tg-ink, #ecf8f5);
}

.device-type[b-qn5mh937bn] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
}

.device-status[b-qn5mh937bn] {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.status-active[b-qn5mh937bn] {
    color: var(--tg-primary, #4ce0c6);
}

.status-inactive[b-qn5mh937bn] {
    color: var(--tg-muted, #a9cdd1);
}

.device-sync[b-qn5mh937bn] {
    font-size: 0.75rem;
    color: var(--tg-muted, #a9cdd1);
    margin-top: 0.25rem;
}

.device-actions[b-qn5mh937bn] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-qn5mh937bn] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(76, 224, 198, 0.2);
    border-radius: 10px;
    color: var(--tg-muted, #a9cdd1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover:not(:disabled)[b-qn5mh937bn] {
    background: rgba(76, 224, 198, 0.1);
    color: var(--tg-primary, #4ce0c6);
    border-color: var(--tg-primary, #4ce0c6);
}

.btn-icon:disabled[b-qn5mh937bn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icon.danger:hover:not(:disabled)[b-qn5mh937bn] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: #ef4444;
}

.spinning[b-qn5mh937bn] {
    animation: spin-b-qn5mh937bn 1s linear infinite;
}

/* Add Device Section */
.add-device-section[b-qn5mh937bn] {
    background: var(--tg-bg-soft, #0b2f40);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: var(--tg-radius, 22px);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.add-device-section h2[b-qn5mh937bn] {
    font-size: 1.1rem;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.25rem;
}

.section-subtitle[b-qn5mh937bn] {
    font-size: 0.9rem;
    color: var(--tg-muted, #a9cdd1);
    margin-bottom: 1.25rem;
}

.available-devices[b-qn5mh937bn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.device-option[b-qn5mh937bn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(76, 224, 198, 0.05);
    border: 1px solid rgba(76, 224, 198, 0.15);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.device-option:hover:not(:disabled)[b-qn5mh937bn] {
    background: rgba(76, 224, 198, 0.1);
    border-color: var(--tg-primary, #4ce0c6);
    transform: translateY(-2px);
}

.device-option:disabled[b-qn5mh937bn] {
    opacity: 0.6;
    cursor: not-allowed;
}

.device-option.connected[b-qn5mh937bn] {
    background: rgba(76, 224, 198, 0.15);
    border-color: var(--tg-primary, #4ce0c6);
}

.device-option-icon[b-qn5mh937bn] {
    font-size: 1.5rem;
}

.device-option-name[b-qn5mh937bn] {
    font-size: 0.85rem;
    color: var(--tg-ink, #ecf8f5);
    text-align: center;
}

.connected-badge[b-qn5mh937bn] {
    font-size: 0.7rem;
    background: var(--tg-primary, #4ce0c6);
    color: var(--tg-bg-deep, #02111b);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
}

/* Privacy Notice */
.privacy-notice[b-qn5mh937bn] {
    background: rgba(76, 224, 198, 0.05);
    border: 1px solid rgba(76, 224, 198, 0.1);
    border-radius: var(--tg-radius, 22px);
    padding: 1.25rem;
    text-align: center;
}

.privacy-notice h3[b-qn5mh937bn] {
    font-size: 0.95rem;
    color: var(--tg-ink, #ecf8f5);
    margin-bottom: 0.5rem;
}

.privacy-notice p[b-qn5mh937bn] {
    font-size: 0.85rem;
    color: var(--tg-muted, #a9cdd1);
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .wearables-container[b-qn5mh937bn] {
        padding: 1rem;
    }

    .summary-grid[b-qn5mh937bn] {
        grid-template-columns: repeat(2, 1fr);
    }

    .insights-grid[b-qn5mh937bn] {
        grid-template-columns: 1fr;
    }

    .available-devices[b-qn5mh937bn] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .summary-grid[b-qn5mh937bn] {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .stat-value[b-qn5mh937bn] {
        font-size: 1.25rem;
    }

    .device-card[b-qn5mh937bn] {
        flex-wrap: wrap;
    }

    .device-actions[b-qn5mh937bn] {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loader[b-qn5mh937bn] { animation: none; }
    .insight-bar-fill[b-qn5mh937bn] { transition: none; }
}