/* /Components/Games/AdventureBoard.razor.rz.scp.css */
.hunt[b-7w2f5t5b0o] { display: flex; flex-direction: column; gap: .8rem; }

.hunt__story[b-7w2f5t5b0o] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .8rem 1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
    color: var(--foreground);
}

.hunt__story strong[b-7w2f5t5b0o] { font-size: 1.05rem; }

.hunt__story small[b-7w2f5t5b0o] { color: var(--muted-foreground); font-weight: 700; }

.hunt__clues[b-7w2f5t5b0o] {
    padding: .8rem 1rem;
    border-radius: 1rem;
    border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
    background: var(--surface);
}

.hunt__clues h3[b-7w2f5t5b0o] { margin: 0 0 .5rem; font-size: .95rem; font-weight: 800; color: var(--foreground); }

.hunt__clues ul[b-7w2f5t5b0o] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; }

.hunt__clues li[b-7w2f5t5b0o] { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--foreground); }

.hunt__clues[b-7w2f5t5b0o]  .hunt__clue-icon { width: 2.2rem; height: 2.2rem; flex-shrink: 0; background: #fffdf8; border-radius: .6rem; padding: .15rem; }

.hunt__clues li[b-7w2f5t5b0o] { flex-wrap: wrap; }

.hunt__clue-from[b-7w2f5t5b0o] { margin-inline-start: auto; font-size: .75rem; font-weight: 600; color: var(--muted-foreground); }

.hunt__clue-icon--edge[b-7w2f5t5b0o] { display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--muted-foreground); }

.hunt__empty[b-7w2f5t5b0o], .hunt__talk[b-7w2f5t5b0o] { margin: .4rem 0 0; font-size: .85rem; color: var(--muted-foreground); }

.hunt__map[b-7w2f5t5b0o] {
    display: grid;
    gap: 4px;
    padding: 6px;
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    border-radius: 1rem;
    background: #e7f3dc;
    border: 2px solid #9cc28a;
}

.hunt__cell[b-7w2f5t5b0o] {
    aspect-ratio: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
    border: 0;
    background: #f6fbef;
    font-size: 1.2rem;
    font-weight: 800;
    color: #6b7280;
    cursor: pointer;
    touch-action: manipulation;
}

.hunt__cell[b-7w2f5t5b0o]  .game-symbol { width: 86%; height: 86%; }

.hunt__cell--landmark[b-7w2f5t5b0o] { background: #fffdf8; cursor: default; }

.hunt__cell.is-out[b-7w2f5t5b0o] { background: #e5e7eb; cursor: default; }

.hunt__cell.is-selected[b-7w2f5t5b0o] { box-shadow: inset 0 0 0 3px var(--primary); background: color-mix(in srgb, var(--primary) 14%, #fff); }

.hunt__cell.is-treasure[b-7w2f5t5b0o] { box-shadow: inset 0 0 0 3px #f59e0b; background: #fff7d6; }

.hunt__cell:focus-visible[b-7w2f5t5b0o] { outline: 3px solid var(--primary); outline-offset: 1px; }

.hunt__confirm[b-7w2f5t5b0o] {
    min-height: 3rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
}

.hunt__confirm:disabled[b-7w2f5t5b0o] { opacity: .55; cursor: default; }

.hunt__goal[b-7w2f5t5b0o] { font-weight: 800; color: var(--foreground); }

.hunt__maps[b-7w2f5t5b0o] { margin: .35rem 0 .1rem; padding: 0; list-style: none; display: flex; gap: .4rem; flex-wrap: wrap; }

.hunt__maps li[b-7w2f5t5b0o] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem .2rem .3rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: .8rem;
    color: var(--muted-foreground);
}

.hunt__maps li span[b-7w2f5t5b0o] {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--foreground);
    font-weight: 800;
}

.hunt__maps li.is-now[b-7w2f5t5b0o] { border-color: var(--primary); color: var(--foreground); font-weight: 800; }

.hunt__maps li.is-done span[b-7w2f5t5b0o] { background: #16a34a; color: #fff; }

.hunt__how[b-7w2f5t5b0o] {
    padding: .65rem .9rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
}

.hunt__how summary[b-7w2f5t5b0o] { cursor: pointer; font-weight: 800; min-height: 2.4rem; display: flex; align-items: center; }

.hunt__how ol[b-7w2f5t5b0o] { margin: .2rem 0 0; padding-inline-start: 1.2rem; display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; line-height: 1.55; }

.hunt__trail[b-7w2f5t5b0o] {
    padding: .8rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--border));
    background: color-mix(in srgb, #f59e0b 8%, var(--surface));
}

.hunt__trail h3[b-7w2f5t5b0o] { margin: 0 0 .5rem; font-size: .95rem; font-weight: 800; color: var(--foreground); }

.hunt__trail ol[b-7w2f5t5b0o] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .6rem; }

.hunt__trail li[b-7w2f5t5b0o] { display: flex; flex-direction: column; gap: .15rem; color: var(--foreground); }

.hunt__trail li span[b-7w2f5t5b0o] { font-size: .88rem; }

.hunt__trail li small[b-7w2f5t5b0o] { font-size: .82rem; color: var(--muted-foreground); line-height: 1.5; }
/* /Components/Games/AskMore.razor.rz.scp.css */
.ask-more[b-zivx564z86] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

.ask-more__btn[b-zivx564z86] {
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid var(--primary);
    background: var(--surface);
    color: var(--foreground);
    font-weight: 800;
    cursor: pointer;
}

.ask-more__btn:disabled[b-zivx564z86] { opacity: .6; cursor: default; }

.ask-more__btn:focus-visible[b-zivx564z86] { outline: 3px solid var(--primary); outline-offset: 2px; }
/* /Components/Games/GameLevelsPanel.razor.rz.scp.css */
.levels[b-ka65p6yb5r] { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; border-radius: 1.2rem; border: 1px solid var(--border); background: var(--surface); }

.levels h2[b-ka65p6yb5r] { margin: 0; font-size: 1rem; font-weight: 800; color: var(--foreground); }

.levels__hint[b-ka65p6yb5r] { margin: 0; font-size: .85rem; color: var(--muted-foreground); }

.levels__child[b-ka65p6yb5r] { display: flex; flex-direction: column; gap: .35rem; padding-top: .5rem; border-top: 1px solid var(--border); }

.levels__child strong[b-ka65p6yb5r] { color: var(--foreground); }

.levels__row[b-ka65p6yb5r] { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; color: var(--foreground); }

.levels__row > span:first-child[b-ka65p6yb5r] { flex: 1; font-size: .9rem; }

.levels__row select[b-ka65p6yb5r] { min-height: 2.5rem; min-width: 3.5rem; border-radius: .6rem; border: 1px solid var(--border); background: var(--background); color: var(--foreground); }

.levels__auto[b-ka65p6yb5r] { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; }

.levels__auto input[b-ka65p6yb5r] { width: 1.2rem; height: 1.2rem; }

.sr-only[b-ka65p6yb5r] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* /Components/Games/GamePlayTimeBar.razor.rz.scp.css */
.ptime[b-p46k444vet] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .6rem .9rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font-weight: 700;
}

.ptime.is-warning[b-p46k444vet] { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 12%, var(--surface)); }

.ptime--up[b-p46k444vet] {
    flex-direction: column;
    align-items: flex-start;
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.ptime--up strong[b-p46k444vet] { font-size: 1.1rem; }

.ptime__waiting[b-p46k444vet] { color: var(--primary); }

.ptime__error[b-p46k444vet] { margin: 0; font-size: .85rem; color: #b91c1c; }
/* /Components/Games/GamePolicyPanel.razor.rz.scp.css */
.gpolicy[b-08tm3pkrj6] { display: flex; flex-direction: column; gap: 1rem; }

.gpolicy h2[b-08tm3pkrj6] { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 800; color: var(--foreground); }

.gpolicy__hint[b-08tm3pkrj6] { margin: 0; color: var(--muted-foreground); font-size: .9rem; }

.gpolicy__status[b-08tm3pkrj6] { margin: 0; padding: .55rem .9rem; border-radius: .9rem; border: 1px solid var(--border); background: var(--surface); font-weight: 700; color: var(--foreground); }

.gpolicy__requests[b-08tm3pkrj6],
.gpolicy__child[b-08tm3pkrj6] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    border-radius: 1.2rem;
    border: 1px solid var(--border);
    background: var(--surface);
}

.gpolicy__requests[b-08tm3pkrj6] { border-color: color-mix(in srgb, #f59e0b 45%, var(--border)); }

.gpolicy__requests ul[b-08tm3pkrj6] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }

.gpolicy__requests li[b-08tm3pkrj6] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; color: var(--foreground); }

.gpolicy__pair[b-08tm3pkrj6] { display: flex; gap: .4rem; }

.gpolicy__child header h3[b-08tm3pkrj6] { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--foreground); }

.gpolicy__today[b-08tm3pkrj6] { margin: .15rem 0 0; font-size: .85rem; color: var(--muted-foreground); }

.gpolicy__switch[b-08tm3pkrj6] { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 700; color: var(--foreground); }

.gpolicy__switch input[b-08tm3pkrj6], .gpolicy__chip input[b-08tm3pkrj6] { width: 1.2rem; height: 1.2rem; accent-color: var(--primary); }

.gpolicy__set[b-08tm3pkrj6] { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: .4rem; }

.gpolicy__set legend[b-08tm3pkrj6] { width: 100%; margin-bottom: .3rem; font-size: .85rem; font-weight: 700; color: var(--muted-foreground); }

.gpolicy__chip[b-08tm3pkrj6] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.6rem;
    padding: 0 .8rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--foreground);
    cursor: pointer;
}

.gpolicy__chip:has(input:checked)[b-08tm3pkrj6] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }

.gpolicy__grid[b-08tm3pkrj6] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }

@media (min-width: 900px) { .gpolicy__grid[b-08tm3pkrj6] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gpolicy__grid label[b-08tm3pkrj6] { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 700; color: var(--muted-foreground); }

.gpolicy__grid input[b-08tm3pkrj6],
.gpolicy__grid select[b-08tm3pkrj6] {
    min-height: 2.75rem;
    padding: 0 .7rem;
    border-radius: .8rem;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-weight: 700;
}

.gpolicy__btn[b-08tm3pkrj6] {
    min-height: 2.75rem;
    padding: 0 1.1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
    background: var(--surface);
    color: var(--foreground);
    font-weight: 800;
    cursor: pointer;
}

.gpolicy__btn--primary[b-08tm3pkrj6] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground, #fff); }

.gpolicy__btn:disabled[b-08tm3pkrj6] { opacity: .55; cursor: default; }

.gpolicy__btn:focus-visible[b-08tm3pkrj6], .gpolicy__chip:focus-within[b-08tm3pkrj6] { outline: 3px solid var(--primary); outline-offset: 2px; }

.gpolicy__save[b-08tm3pkrj6] { align-self: flex-start; min-width: 8rem; }

.gpolicy__timing[b-08tm3pkrj6] { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: .4rem; }

.gpolicy__timing legend[b-08tm3pkrj6] { margin-bottom: .3rem; font-size: .85rem; font-weight: 700; color: var(--muted-foreground); }

.gpolicy__option[b-08tm3pkrj6] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    min-height: 2.75rem;
    padding: .6rem .8rem;
    border-radius: .9rem;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
}

.gpolicy__option:has(input:checked)[b-08tm3pkrj6] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }

.gpolicy__option input[b-08tm3pkrj6] { margin-top: .25rem; width: 1.15rem; height: 1.15rem; accent-color: var(--primary); flex: none; }

.gpolicy__option span[b-08tm3pkrj6] { display: flex; flex-direction: column; gap: .15rem; }

.gpolicy__option small[b-08tm3pkrj6] { color: var(--muted-foreground); font-size: .82rem; line-height: 1.45; }

.gpolicy__log summary[b-08tm3pkrj6] { cursor: pointer; font-weight: 700; color: var(--primary); min-height: 2.4rem; display: flex; align-items: center; }

.gpolicy__log ul[b-08tm3pkrj6] { margin: .3rem 0 0; padding-inline-start: 1rem; display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--muted-foreground); }
/* /Components/Games/GameTutorialModal.razor.rz.scp.css */
.game-tutorial[b-3ulv1a3glp] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-block: 0.25rem 0.75rem;
}

/* Stepper dots */
.game-tutorial__stepper[b-3ulv1a3glp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-block-end: 0.5rem;
}

.game-tutorial__step-dot[b-3ulv1a3glp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--surface, #fff);
    color: var(--muted-foreground);
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.game-tutorial__step-dot.is-active[b-3ulv1a3glp] {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    transform: scale(1.15);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);
}

.game-tutorial__step-dot.is-passed[b-3ulv1a3glp] {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 15%, var(--surface));
    color: var(--primary);
}

/* Step Card */
.game-tutorial__card[b-3ulv1a3glp] {
    border-radius: 1.25rem;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 95%, var(--foreground) 5%);
    padding: 1.2rem;
    animation: tutorial-fade-in-b-3ulv1a3glp 0.25s ease-out;
}

@keyframes tutorial-fade-in-b-3ulv1a3glp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.game-tutorial__step-head[b-3ulv1a3glp] {
    margin-block-end: 1rem;
}

.game-tutorial__badge[b-3ulv1a3glp] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary);
    margin-block-end: 0.4rem;
}

.game-tutorial__step-head h3[b-3ulv1a3glp] {
    margin: 0.2rem 0 0.3rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--foreground);
}

.game-tutorial__step-head p[b-3ulv1a3glp] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--muted-foreground);
    line-height: 1.5;
}

/* Button previews */
.game-tutorial__buttons-list[b-3ulv1a3glp] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.game-tutorial__btn-item[b-3ulv1a3glp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
}

@media (min-width: 600px) {
    .game-tutorial__btn-item[b-3ulv1a3glp] {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
}

.game-tutorial__btn-preview[b-3ulv1a3glp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.95rem;
    min-width: 9rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.game-tutorial__btn-preview--solo[b-3ulv1a3glp] {
    background: var(--primary);
    color: var(--primary-foreground, #fff);
}

.game-tutorial__btn-preview--family[b-3ulv1a3glp] {
    background: #eab308;
    color: #1e293b;
}

.game-tutorial__btn-preview--daily[b-3ulv1a3glp] {
    background: #f97316;
    color: #fff;
}

.game-tutorial__btn-desc[b-3ulv1a3glp] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.game-tutorial__btn-desc strong[b-3ulv1a3glp] {
    color: var(--foreground);
}

.game-tutorial__btn-desc span[b-3ulv1a3glp] {
    color: var(--muted-foreground);
}

/* Game Demo Boards */
.game-tutorial__lead[b-3ulv1a3glp] {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    color: var(--foreground);
    line-height: 1.5;
}

.game-tutorial__boards-demo[b-3ulv1a3glp] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-block-end: 1.25rem;
}

.game-tutorial__row[b-3ulv1a3glp] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.game-tutorial__row-title[b-3ulv1a3glp] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.game-tutorial__cells[b-3ulv1a3glp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 0.6rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface) 90%, var(--border));
    border: 1px dashed var(--border);
}

.game-tutorial__cell[b-3ulv1a3glp] {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
}

.game-tutorial__cell[b-3ulv1a3glp]  .game-symbol {
    width: 2.2rem;
    height: 2.2rem;
}

.game-tutorial__cell--diff[b-3ulv1a3glp] {
    border-color: #f97316;
    background: color-mix(in srgb, #f97316 15%, var(--surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, #f97316 40%, transparent);
}

.game-tutorial__pointer[b-3ulv1a3glp] {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 100%;
    transform: translateX(50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    animation: pointer-bob-b-3ulv1a3glp 1.4s ease-in-out infinite;
}

@keyframes pointer-bob-b-3ulv1a3glp {
    0%, 100% {
        transform: translate(50%, 0);
    }
    50% {
        transform: translate(50%, 6px);
    }
}

.game-tutorial__pointer-hand[b-3ulv1a3glp] {
    font-size: 1.6rem;
    margin-block-end: -0.2rem;
}

.game-tutorial__pointer-tag[b-3ulv1a3glp] {
    white-space: nowrap;
    background: #f97316;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
}

/* Rules Pills */
.game-tutorial__rules-pills[b-3ulv1a3glp] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-block-start: 2rem;
}

.game-tutorial__rule-pill[b-3ulv1a3glp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0.9rem;
    border: 1px solid var(--border);
    font-size: 0.9rem;
}

.game-tutorial__rule-pill--win[b-3ulv1a3glp] {
    background: color-mix(in srgb, #22c55e 12%, var(--surface));
    border-color: color-mix(in srgb, #22c55e 40%, var(--border));
}

.game-tutorial__rule-pill--warn[b-3ulv1a3glp] {
    background: color-mix(in srgb, #ef4444 12%, var(--surface));
    border-color: color-mix(in srgb, #ef4444 40%, var(--border));
}

.game-tutorial__rule-pill--hint[b-3ulv1a3glp] {
    background: color-mix(in srgb, #eab308 12%, var(--surface));
    border-color: color-mix(in srgb, #eab308 40%, var(--border));
}

.game-tutorial__rule-icon[b-3ulv1a3glp] {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.game-tutorial__rule-pill div[b-3ulv1a3glp] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.4;
}

.game-tutorial__rule-pill strong[b-3ulv1a3glp] {
    color: var(--foreground);
}

.game-tutorial__rule-pill span[b-3ulv1a3glp] {
    color: var(--muted-foreground);
}

/* Memory Demo */
.game-tutorial__memory-demo[b-3ulv1a3glp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-block-end: 1rem;
}

.game-tutorial__card-item[b-3ulv1a3glp] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.9rem;
    border: 2px solid var(--border);
    background: color-mix(in srgb, var(--surface) 80%, var(--primary));
    font-size: 1.5rem;
    font-weight: 800;
}

.game-tutorial__card-item.is-flipped[b-3ulv1a3glp] {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.game-tutorial__card-item[b-3ulv1a3glp]  .game-symbol {
    width: 2.2rem;
    height: 2.2rem;
}

/* Adventure Demo */
.game-tutorial__adventure-demo[b-3ulv1a3glp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-block-end: 1rem;
}

.game-tutorial__adv-box[b-3ulv1a3glp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 0.9rem;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.9rem;
    line-height: 1.45;
}

.game-tutorial__adv-icon[b-3ulv1a3glp] {
    font-size: 1.7rem;
    flex-shrink: 0;
}

/* Invite Steps */
.game-tutorial__invite-steps[b-3ulv1a3glp] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.game-tutorial__invite-step[b-3ulv1a3glp] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
}

.game-tutorial__invite-num[b-3ulv1a3glp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    font-weight: 800;
    flex-shrink: 0;
}

.game-tutorial__invite-info[b-3ulv1a3glp] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.game-tutorial__invite-info strong[b-3ulv1a3glp] {
    color: var(--foreground);
}

.game-tutorial__invite-info span[b-3ulv1a3glp] {
    color: var(--muted-foreground);
}

/* Family Rules */
.game-tutorial__family-rules[b-3ulv1a3glp] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 600px) {
    .game-tutorial__family-rules[b-3ulv1a3glp] {
        grid-template-columns: 1fr 1fr;
    }
}

.game-tutorial__family-card[b-3ulv1a3glp] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.9rem;
    line-height: 1.45;
}

.game-tutorial__family-emoji[b-3ulv1a3glp] {
    font-size: 1.5rem;
}

.game-tutorial__family-card strong[b-3ulv1a3glp] {
    color: var(--foreground);
}

.game-tutorial__family-card span[b-3ulv1a3glp] {
    color: var(--muted-foreground);
}

/* Footer Navigation */
.game-tutorial__footer[b-3ulv1a3glp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: 0.5rem;
}

.game-tutorial__nav-btn[b-3ulv1a3glp] {
    min-height: 2.8rem;
    padding: 0.5rem 1.4rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.95rem;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.game-tutorial__nav-btn--prev[b-3ulv1a3glp] {
    background: var(--surface);
    color: var(--foreground);
}

.game-tutorial__nav-btn--prev:hover[b-3ulv1a3glp] {
    background: color-mix(in srgb, var(--surface) 90%, var(--foreground));
}

.game-tutorial__nav-btn--next[b-3ulv1a3glp] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground, #fff);
    margin-inline-start: auto;
}

.game-tutorial__nav-btn--next:hover[b-3ulv1a3glp] {
    opacity: 0.9;
}

.game-tutorial__nav-btn--finish[b-3ulv1a3glp] {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #059669;
    color: #fff;
    margin-inline-start: auto;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.game-tutorial__nav-btn--finish:hover[b-3ulv1a3glp] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
}
/* /Components/Games/MemoryBoard.razor.rz.scp.css */
.memory[b-yse7r1r4vw] { display: flex; flex-direction: column; gap: .75rem; }

.memory__turn[b-yse7r1r4vw] {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .65rem .9rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    font-weight: 800;
    color: var(--foreground);
}

.memory__turn.is-mine[b-yse7r1r4vw] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }

.memory__turn small[b-yse7r1r4vw] { font-weight: 600; color: var(--muted-foreground); }

.memory__grid[b-yse7r1r4vw] { display: grid; gap: .45rem; max-width: 34rem; width: 100%; margin-inline: auto; }

.memory__card[b-yse7r1r4vw] {
    aspect-ratio: 3 / 4;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .3rem;
    border-radius: .85rem;
    border: 2px solid transparent;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .18s ease, background-color .18s ease;
}

.memory__card[b-yse7r1r4vw]  .game-symbol { width: 92%; height: 92%; }

.memory__card.is-hidden[b-yse7r1r4vw] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 85%, #000 0%), color-mix(in srgb, var(--primary) 60%, #fff 10%));
    color: #fff;
}

.memory__card.is-hidden:not(:disabled):hover[b-yse7r1r4vw] { transform: translateY(-2px); }

.memory__card.is-open[b-yse7r1r4vw] { background: #fffdf8; border-color: var(--primary); transform: rotateY(0); }

.memory__card.is-matched[b-yse7r1r4vw] { background: #fffdf8; border-color: var(--seat-color, #16a34a); opacity: .78; }

.memory__card:disabled[b-yse7r1r4vw] { cursor: default; }

.memory__card:focus-visible[b-yse7r1r4vw] { outline: 3px solid var(--primary); outline-offset: 2px; }

.memory__back[b-yse7r1r4vw] { font-size: 1.4rem; opacity: .9; }

.seat-1[b-yse7r1r4vw] { --seat-color: #2563eb; }
.seat-2[b-yse7r1r4vw] { --seat-color: #db2777; }
.seat-3[b-yse7r1r4vw] { --seat-color: #059669; }
.seat-4[b-yse7r1r4vw] { --seat-color: #d97706; }
.seat-5[b-yse7r1r4vw] { --seat-color: #7c3aed; }
.seat-6[b-yse7r1r4vw] { --seat-color: #0f766e; }

@media (prefers-reduced-motion: reduce) {
    .memory__card[b-yse7r1r4vw] { transition: none; }
}
/* /Components/Games/SpotDifferenceBoard.razor.rz.scp.css */
.spot[b-xtz4dew9k1] { display: flex; flex-direction: column; gap: .75rem; }

.spot__progress[b-xtz4dew9k1] { margin: 0; text-align: center; font-weight: 700; color: var(--foreground); }
.spot__hint[b-xtz4dew9k1] { display: block; margin-block-start: 0.15rem; font-size: 0.8rem; font-weight: 600; color: var(--muted-foreground); }

.spot__panels[b-xtz4dew9k1] { display: grid; grid-template-columns: 1fr; gap: .75rem; }

@media (min-width: 768px) {
    .spot__panels[b-xtz4dew9k1] { grid-template-columns: 1fr 1fr; }

    .spot__grid[b-xtz4dew9k1] { width: min(100%, calc((100dvh - 14rem) * var(--cols) / var(--rows))); }
}

.spot__panel[b-xtz4dew9k1] { margin: 0; display: flex; flex-direction: column; gap: .4rem; }

.spot__panel figcaption[b-xtz4dew9k1] { font-size: .85rem; font-weight: 700; color: var(--muted-foreground); text-align: center; }

.spot__panel--play figcaption[b-xtz4dew9k1] { color: var(--primary); }

/* Content colors are fixed (the board must look the same everywhere), so the panel is a light "paper" in every theme.
   On a phone the panels stack; each is capped so both fit on one screen and the eye compares without scrolling. */
.spot__grid[b-xtz4dew9k1] {
    width: min(100%, calc((100dvh - 15rem) / 2 * var(--cols) / var(--rows)));
    margin-inline: auto;
    display: grid;
    gap: 3px;
    padding: 6px;
    border-radius: 1rem;
    background: #fdf8ef;
    border: 2px solid color-mix(in srgb, var(--primary) 35%, var(--border));
}

.spot__cell[b-xtz4dew9k1] {
    position: relative;
    aspect-ratio: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .6rem;
    background: #fffdf8;
}

.spot__cell[b-xtz4dew9k1]  .game-symbol {
    width: 88%;
    height: 88%;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.spot__tap[b-xtz4dew9k1] {
    border: 0;
    padding: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.spot__tap:not(:disabled):active[b-xtz4dew9k1] { transform: scale(.94); }

.spot__tap:focus-visible[b-xtz4dew9k1] { outline: 3px solid var(--primary); outline-offset: 1px; }

.spot__tap:disabled[b-xtz4dew9k1] { cursor: default; }

.spot__tap.is-miss[b-xtz4dew9k1] { box-shadow: inset 0 0 0 2px rgba(120, 120, 120, .35); }

.spot__tap.is-found[b-xtz4dew9k1] { box-shadow: inset 0 0 0 3px var(--seat-color, #16a34a); }

.spot__cell.is-revealed[b-xtz4dew9k1] { box-shadow: inset 0 0 0 3px #f59e0b; animation: spot-pulse-b-xtz4dew9k1 1.2s ease-in-out 2; }

.spot__mark[b-xtz4dew9k1] {
    pointer-events: none;
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .2rem;
    border-radius: 999px;
    background: var(--seat-color, #16a34a);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.15rem;
    text-align: center;
}

.seat-1[b-xtz4dew9k1] { --seat-color: #2563eb; }
.seat-2[b-xtz4dew9k1] { --seat-color: #db2777; }
.seat-3[b-xtz4dew9k1] { --seat-color: #059669; }
.seat-4[b-xtz4dew9k1] { --seat-color: #d97706; }
.seat-5[b-xtz4dew9k1] { --seat-color: #7c3aed; }
.seat-6[b-xtz4dew9k1] { --seat-color: #0f766e; }

@keyframes spot-pulse-b-xtz4dew9k1 { 50% { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
    .spot__tap[b-xtz4dew9k1], .spot__cell.is-revealed[b-xtz4dew9k1] { transition: none; animation: none; }
}
/* /Components/Layout/BottomNav.razor.rz.scp.css */
/* Child bottom navigation: curved outer shape, exactly 4 equal-width destinations */
.adventure-bottom-nav[b-mt747av85o] {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    width: 100%;
    margin-inline: auto;
    padding-inline: 0.5rem;
    padding-block: 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-block-start: 1.5px solid var(--border);
    border-start-start-radius: 24px;
    border-start-end-radius: 24px;
    box-shadow: 0 -4px 20px color-mix(in srgb, var(--foreground) 6%, transparent);
}

.adventure-bottom-nav a[b-mt747av85o] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 52px;
    min-width: 44px;
    padding-block: 0.35rem;
    padding-inline: 0.25rem;
    border-radius: 1rem;
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.1;
    transition: color 0.15s ease, background-color 0.15s ease;
    touch-action: manipulation;
}

.adventure-bottom-nav a:hover[b-mt747av85o] {
    color: var(--foreground);
}

.adventure-bottom-nav a.is-active[b-mt747av85o] {
    color: var(--primary);
    font-weight: 800;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.adventure-bottom-nav a:focus-visible[b-mt747av85o] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.adventure-bottom-nav a span[b-mt747av85o] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.adventure-bottom-nav .nav-badge[b-mt747av85o] {
    position: absolute;
    top: 0.25rem;
    inset-inline-start: calc(50% + 0.45rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    background: var(--destructive, #ef4444);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
}

/* Tablet refinement (when bottom nav is active): center and constrain width */
@media (min-width: 600px) and (max-width: 1023.98px) {
    .adventure-bottom-nav[b-mt747av85o] {
        max-width: 32rem;
        border-start-start-radius: 28px;
        border-start-end-radius: 28px;
    }
}
/* /Components/Pages/ChallengeEditorSheet.razor.rz.scp.css */
.ce[b-3nskqqdv24] {
    display: grid;
    gap: 1rem;
    text-align: start;
    color: var(--foreground);
}

.ce[b-3nskqqdv24]  .ce__locked,
.ce[b-3nskqqdv24]  .ce__notice,
.ce[b-3nskqqdv24]  .ce__warn {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-radius: 0.9rem;
    line-height: 1.7;
}

.ce[b-3nskqqdv24]  .ce__locked {
    background: color-mix(in srgb, var(--accent-yellow, var(--primary)) 16%, var(--surface));
}

.ce[b-3nskqqdv24]  .ce__notice {
    background: color-mix(in srgb, var(--success, var(--primary)) 14%, var(--surface));
}

.ce[b-3nskqqdv24]  .ce__warn {
    background: color-mix(in srgb, var(--accent-orange, var(--primary)) 14%, var(--surface));
}

.ce[b-3nskqqdv24]  .ce__error {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-radius: 0.9rem;
    color: var(--destructive);
    background: color-mix(in srgb, var(--destructive) 10%, var(--surface));
    font-weight: 700;
    line-height: 1.7;
}

.ce[b-3nskqqdv24]  .ce__group {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--card, var(--surface));
    min-width: 0;
}

.ce[b-3nskqqdv24]  .ce__group legend {
    padding-inline: 0.4rem;
    font-weight: 800;
}

.ce[b-3nskqqdv24]  .ce__row {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.ce[b-3nskqqdv24]  .ce__field {
    display: grid;
    gap: 0.35rem;
    font-weight: 700;
    min-width: 0;
}

.ce[b-3nskqqdv24]  .ce__field--narrow {
    max-width: 16rem;
}

.ce[b-3nskqqdv24]  .ce__field small,
.ce[b-3nskqqdv24]  .ce__hint {
    font-weight: 400;
    color: var(--muted-foreground);
    line-height: 1.6;
    margin: 0;
}

.ce[b-3nskqqdv24]  .ce__field input,
.ce[b-3nskqqdv24]  .ce__field textarea,
.ce[b-3nskqqdv24]  .ce__field select {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-weight: 400;
    box-sizing: border-box;
}

.ce[b-3nskqqdv24]  .ce__field input:disabled,
.ce[b-3nskqqdv24]  .ce__field textarea:disabled,
.ce[b-3nskqqdv24]  .ce__field select:disabled {
    opacity: 0.65;
}

.ce[b-3nskqqdv24]  .ce__field input:focus-visible,
.ce[b-3nskqqdv24]  .ce__field textarea:focus-visible,
.ce[b-3nskqqdv24]  .ce__field select:focus-visible,
.ce[b-3nskqqdv24]  .ce__btn:focus-visible,
.ce[b-3nskqqdv24]  .ce__chip:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.ce[b-3nskqqdv24]  .ce__check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 700;
    line-height: 1.6;
}

.ce[b-3nskqqdv24]  .ce__check input {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.2rem;
    accent-color: var(--primary);
    flex: none;
}

.ce[b-3nskqqdv24]  .ce__check-group {
    display: grid;
    gap: 0.6rem;
}

.ce[b-3nskqqdv24]  .ce__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ce[b-3nskqqdv24]  .ce__chip {
    min-height: 2.75rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ce[b-3nskqqdv24]  .ce__chip.is-on {
    background: color-mix(in srgb, var(--primary) 16%, var(--surface));
    border-color: var(--primary);
    color: var(--primary);
}

.ce[b-3nskqqdv24]  .ce__chip:disabled {
    opacity: 0.6;
    cursor: default;
}

.ce[b-3nskqqdv24]  .ce__reward {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
}

.ce[b-3nskqqdv24]  .ce__reward img {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.6rem;
    object-fit: cover;
}

.ce[b-3nskqqdv24]  .ce__gift {
    font-size: 2rem;
}

.ce[b-3nskqqdv24]  .ce__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-block: 0.5rem 2rem;
}

.ce[b-3nskqqdv24]  .ce__btn {
    min-height: 3rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.ce[b-3nskqqdv24]  .ce__btn--primary {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: transparent;
}

.ce[b-3nskqqdv24]  .ce__btn--danger {
    color: var(--destructive);
    border-color: color-mix(in srgb, var(--destructive) 45%, var(--border));
}

.ce[b-3nskqqdv24]  .ce__btn--quiet {
    background: transparent;
}

.ce[b-3nskqqdv24]  .ce__btn:disabled {
    opacity: 0.6;
    cursor: default;
}
/* /Components/Pages/ChallengeResults.razor.rz.scp.css */
.cr[b-92zn2972ym] {
    display: grid;
    gap: 0.6rem;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
}

.cr__title[b-92zn2972ym] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.cr__notice[b-92zn2972ym] {
    margin: 0;
    padding: 0.65rem 0.9rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, #3fb950 16%, var(--background));
    font-weight: 700;
}

.cr__list[b-92zn2972ym] {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cr__row[b-92zn2972ym] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.cr__who[b-92zn2972ym] {
    display: grid;
    flex: 1;
    min-width: 0;
}

.cr__who small[b-92zn2972ym] {
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
}

.cr__btn[b-92zn2972ym] {
    min-width: 5rem;
    min-height: 2.75rem;
    padding: 0.4rem 1rem;
    border: 2px solid var(--primary);
    border-radius: 999px;
    background: transparent;
    color: var(--foreground);
    font-weight: 800;
    cursor: pointer;
}

.cr__btn--primary[b-92zn2972ym] {
    background: var(--primary);
    color: var(--primary-foreground);
}

.cr__btn--quiet[b-92zn2972ym] {
    border-color: var(--border);
}

.cr__btn:focus-visible[b-92zn2972ym] {
    outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}

.cr-form[b-92zn2972ym] {
    display: grid;
    gap: 0.9rem;
    text-align: start;
}

.cr-form__lead[b-92zn2972ym],
.cr-form__hint[b-92zn2972ym] {
    margin: 0;
    color: var(--muted-foreground);
}

.cr-form__field[b-92zn2972ym] {
    display: grid;
    gap: 0.35rem;
    font-weight: 700;
}

.cr-form__field input[b-92zn2972ym],
.cr-form__field textarea[b-92zn2972ym] {
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
}

.cr-form__warn[b-92zn2972ym],
.cr-form__error[b-92zn2972ym] {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: 0.9rem;
}

.cr-form__warn[b-92zn2972ym] {
    background: color-mix(in srgb, #f0a030 18%, var(--background));
}

.cr-form__error[b-92zn2972ym] {
    background: color-mix(in srgb, #d64545 16%, var(--background));
}

.cr-form__actions[b-92zn2972ym] {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}
/* /Components/Pages/ChildAssignTab.razor.rz.scp.css */
.assign[b-zv36jelun7] {
    display: grid;
    gap: 14px;
    color: var(--foreground);
}

.assign__title[b-zv36jelun7] {
    margin: 0;
    font-size: 1.25rem;
}

.assign__lead[b-zv36jelun7] {
    margin: 4px 0 0;
    color: var(--muted-foreground);
    font-size: .92rem;
}

.assign__tools[b-zv36jelun7] {
    display: grid;
    gap: 10px;
}

@media (min-width: 720px) {
    .assign__tools[b-zv36jelun7] {
        grid-template-columns: 1fr 1fr;
        align-items: end;
    }
}

.assign__search[b-zv36jelun7],
.assign__start input[b-zv36jelun7] {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    font: inherit;
    color: var(--foreground);
    color-scheme: inherit;
}

.assign__search[b-zv36jelun7]::placeholder,
.assign__start input[b-zv36jelun7]::placeholder {
    color: var(--muted-foreground);
}

.assign__start[b-zv36jelun7] {
    display: grid;
    gap: 4px;
    font-size: .9rem;
    color: var(--foreground);
}

.assign__start small[b-zv36jelun7] {
    color: var(--muted-foreground);
}

.assign__filters[b-zv36jelun7] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.assign__filter[b-zv36jelun7] {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    cursor: pointer;
}

.assign__filter.is-on[b-zv36jelun7] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

.assign__grid[b-zv36jelun7] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 720px) {
    .assign__grid[b-zv36jelun7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.assign__card[b-zv36jelun7] {
    position: relative;
    border-radius: 18px;
    border: 2px solid transparent;
    background: var(--surface);
    color: var(--foreground);
    box-shadow: 0 2px 10px color-mix(in oklch, var(--foreground) 8%, transparent);
    transition: border-color .15s, transform .15s;
}

.assign__card.is-chosen[b-zv36jelun7] {
    border-color: var(--primary);
    background: color-mix(in oklch, var(--primary) 8%, var(--surface));
}

.assign__card.is-taken[b-zv36jelun7] {
    opacity: .7;
}

.assign__pick[b-zv36jelun7] {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px 12px;
    cursor: pointer;
}

.assign__pick input[b-zv36jelun7] {
    width: 22px;
    height: 22px;
    accent-color: var(--primary);
}

.assign__icon[b-zv36jelun7] {
    font-size: 1.6rem;
}

.assign__text[b-zv36jelun7] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.assign__name[b-zv36jelun7],
.assign__stars[b-zv36jelun7] {
    font-weight: 700;
    color: var(--foreground);
}

.assign__name[b-zv36jelun7] {
    overflow-wrap: anywhere;
}

.assign__stars[b-zv36jelun7] {
    white-space: nowrap;
}

.assign__meta[b-zv36jelun7] {
    font-size: .82rem;
    color: var(--muted-foreground);
}

.assign__tags[b-zv36jelun7] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.assign__chip[b-zv36jelun7] {
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-foreground);
    font-size: .75rem;
    font-weight: 600;
}

.assign__badge[b-zv36jelun7] {
    position: absolute;
    inset-block-start: -8px;
    inset-inline-end: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: .72rem;
    font-weight: 700;
}

.assign__badge--paused[b-zv36jelun7] {
    background: var(--muted);
    color: var(--foreground);
}

.assign__empty[b-zv36jelun7],
.assign__message[b-zv36jelun7] {
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: color-mix(in oklch, var(--primary) 8%, var(--surface));
    color: var(--foreground);
}

.assign__bar[b-zv36jelun7] {
    position: sticky;
    inset-block-end: 12px;
    z-index: 5;
    display: flex;
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
    background: color-mix(in oklch, var(--surface) 92%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 24px color-mix(in oklch, var(--foreground) 16%, transparent);
}

.assign__give[b-zv36jelun7] {
    flex: 1;
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: var(--primary);
    color: var(--primary-foreground);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.assign__give:disabled[b-zv36jelun7] {
    background: color-mix(in oklch, var(--primary) 35%, var(--surface));
    color: var(--muted-foreground);
    cursor: default;
}

.assign__clear[b-zv36jelun7] {
    min-height: 48px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    cursor: pointer;
}

.assign__search:focus-visible[b-zv36jelun7],
.assign__start input:focus-visible[b-zv36jelun7],
.assign__filter:focus-visible[b-zv36jelun7],
.assign__clear:focus-visible[b-zv36jelun7],
.assign__give:focus-visible[b-zv36jelun7] {
    outline: 3px solid color-mix(in oklch, var(--primary) 55%, transparent);
    outline-offset: 2px;
}
/* /Components/Pages/ChildChallengeDetails.razor.rz.scp.css */
.challenge-page[b-je7t83lop6] {
    display: grid;
    gap: 1rem;
    width: 100%;
    max-width: var(--content-max, 760px);
    margin-inline: auto;
    padding: 0.5rem 1rem 6rem;
    box-sizing: border-box;
    text-align: start;
    color: var(--foreground);
}

.challenge-page__back[b-je7t83lop6] {
    justify-self: start;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding-inline: 0.5rem;
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.challenge-page__back:focus-visible[b-je7t83lop6],
.challenge-page__btn:focus-visible[b-je7t83lop6] {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

.challenge-page__head[b-je7t83lop6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.challenge-page__head h1[b-je7t83lop6] {
    margin: 0;
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.challenge-page__chip[b-je7t83lop6] {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 800;
    background: var(--surface);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.challenge-page__chip--active[b-je7t83lop6] { color: var(--primary); }
.challenge-page__chip--waiting[b-je7t83lop6] { background: color-mix(in srgb, var(--accent-yellow, var(--primary)) 22%, var(--surface)); }
.challenge-page__chip--returned[b-je7t83lop6] { color: var(--accent-orange, var(--foreground)); }
.challenge-page__chip--accepted[b-je7t83lop6] { color: var(--success, var(--accent-green, var(--primary))); }
.challenge-page__chip--closed[b-je7t83lop6] { color: var(--muted-foreground); }

.challenge-page__prize[b-je7t83lop6] {
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--accent-yellow, var(--primary)) 14%, var(--surface));
    text-align: center;
}

.challenge-page__prize img[b-je7t83lop6] {
    width: min(320px, 80vw);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 1.1rem;
}

.challenge-page__gift[b-je7t83lop6] {
    font-size: 4.5rem;
    line-height: 1;
}

.challenge-page__prize-text[b-je7t83lop6] {
    display: grid;
    gap: 0.3rem;
}

.challenge-page__prize-text strong[b-je7t83lop6] {
    font-size: 1.15rem;
}

.challenge-page__prize-text span[b-je7t83lop6],
.challenge-page__granted[b-je7t83lop6] {
    color: var(--foreground);
    font-weight: 700;
}

.challenge-page__card[b-je7t83lop6] {
    display: grid;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 1.1rem;
    background: var(--card, var(--surface));
    border: 1px solid var(--border);
}

.challenge-page__card h2[b-je7t83lop6] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.challenge-page__text[b-je7t83lop6] {
    margin: 0;
    line-height: 1.8;
    white-space: pre-line;
}

.challenge-page__muted[b-je7t83lop6] {
    margin: 0;
    color: var(--muted-foreground);
    line-height: 1.7;
}

.challenge-page__calm[b-je7t83lop6] {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    line-height: 1.75;
}

.challenge-page__result[b-je7t83lop6] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--primary);
}

.challenge-page__feedback[b-je7t83lop6] {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-inline-start: 4px solid var(--primary);
    background: var(--surface);
    border-radius: 0.6rem;
    line-height: 1.8;
}


.challenge-page__missing[b-je7t83lop6] {
    margin: 0;
    padding-inline-start: 1.2rem;
    line-height: 1.8;
}

.challenge-page__notice[b-je7t83lop6],
.challenge-page__error[b-je7t83lop6] {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-radius: 0.9rem;
    line-height: 1.7;
}

.challenge-page__notice[b-je7t83lop6] {
    background: color-mix(in srgb, var(--success, var(--primary)) 14%, var(--surface));
}

.challenge-page__error[b-je7t83lop6] {
    color: var(--destructive);
    background: color-mix(in srgb, var(--destructive) 10%, var(--surface));
    font-weight: 700;
}

.challenge-page__late[b-je7t83lop6] {
    display: inline-block;
    width: fit-content;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-orange, var(--primary)) 18%, var(--surface));
    font-size: 0.85rem;
    font-weight: 700;
}

.challenge-page__entries[b-je7t83lop6] {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.challenge-page__entry[b-je7t83lop6] {
    display: grid;
    gap: 0.4rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
}

.challenge-page__entry-main[b-je7t83lop6] {
    display: grid;
    gap: 0.2rem;
}

.challenge-page__entry-main small[b-je7t83lop6] {
    color: var(--muted-foreground);
}

.challenge-page__thumbs[b-je7t83lop6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.challenge-page__thumbs img[b-je7t83lop6] {
    width: 4rem;
    height: 4rem;
    border-radius: 0.6rem;
    object-fit: cover;
}

.challenge-page__field[b-je7t83lop6] {
    display: grid;
    gap: 0.35rem;
    font-weight: 700;
}

.challenge-page__field textarea[b-je7t83lop6] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: 0.8rem;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-weight: 400;
    box-sizing: border-box;
}

.challenge-page__btn[b-je7t83lop6] {
    min-height: 3rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    justify-self: start;
}

.challenge-page__btn--primary[b-je7t83lop6] {
    border: 0;
    background: var(--primary);
    color: var(--primary-foreground);
}

.challenge-page__btn--quiet[b-je7t83lop6] {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--foreground);
}

.challenge-page__btn:disabled[b-je7t83lop6] {
    opacity: 0.6;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .challenge-page *[b-je7t83lop6] {
        transition: none !important;
        animation: none !important;
    }
}

.challenge-page__bar[b-je7t83lop6] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 0.75rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--primary) 16%, var(--surface));
    accent-color: var(--primary);
}

.challenge-page__bar[b-je7t83lop6]::-webkit-progress-bar {
    background: color-mix(in srgb, var(--primary) 16%, var(--surface));
    border-radius: 999px;
}

.challenge-page__bar[b-je7t83lop6]::-webkit-progress-value {
    background: var(--primary);
    border-radius: 999px;
}

.challenge-page__bar[b-je7t83lop6]::-moz-progress-bar {
    background: var(--primary);
    border-radius: 999px;
}

.challenge-page__btn[b-je7t83lop6] {
    min-height: 44px;
    min-width: 44px;
}
/* /Components/Pages/ChildGamesHistoryPanel.razor.rz.scp.css */
/* Scoped styles for ChildGamesHistoryPanel.
   Fully native to all themes in both Light and Dark modes using semantic theme variables:
   (--surface, --background, --foreground, --primary, --muted, --muted-foreground, --border, --destructive). */

.games-history__stats[b-j6ps42q3kx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-block-end: 1rem;
}

@media (min-width: 640px) {
    .games-history__stats[b-j6ps42q3kx] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.games-history__stat-card[b-j6ps42q3kx] {
    padding: 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid var(--border);
    background: color-mix(in oklch, var(--muted) 45%, var(--surface));
    color: var(--foreground);
    text-align: start;
}

.games-history__stat-label[b-j6ps42q3kx] {
    display: block;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.games-history__stat-val[b-j6ps42q3kx] {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: var(--foreground);
    margin-block-start: 0.2rem;
}

.games-history__stat-val--positive[b-j6ps42q3kx] {
    color: color-mix(in oklch, #10b981 85%, var(--foreground));
}

.games-history__stat-val--warning[b-j6ps42q3kx] {
    color: color-mix(in oklch, #f59e0b 85%, var(--foreground));
}

.games-history__empty[b-j6ps42q3kx] {
    padding: 1.5rem;
    text-align: center;
    border-radius: 0.85rem;
    border: 1px dashed var(--border);
    background: color-mix(in oklch, var(--muted) 30%, var(--surface));
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: 600;
}

.games-history__empty p[b-j6ps42q3kx] {
    margin: 0;
}

.games-history__list[b-j6ps42q3kx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.games-history__card[b-j6ps42q3kx] {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    color: var(--foreground);
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.games-history__card:hover[b-j6ps42q3kx] {
    border-color: color-mix(in oklch, var(--primary) 35%, var(--border));
}

.games-history__card-toggle[b-j6ps42q3kx] {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.9rem 1rem;
    border: 0;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.games-history__card-toggle:hover[b-j6ps42q3kx] {
    background: color-mix(in oklch, var(--primary) 8%, transparent);
}

.games-history__card-toggle:focus-visible[b-j6ps42q3kx] {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.games-history__card-meta[b-j6ps42q3kx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.games-history__card-icon[b-j6ps42q3kx] {
    font-size: 1.5rem;
    flex-shrink: 0;
    user-select: none;
}

.games-history__card-text[b-j6ps42q3kx] {
    min-width: 0;
    flex: 1;
}

.games-history__card-title-row[b-j6ps42q3kx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.games-history__card-title[b-j6ps42q3kx] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--foreground);
    line-height: 1.3;
}

.games-history__card-subtext[b-j6ps42q3kx] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-block-start: 0.25rem;
}

.games-history__card-chevron[b-j6ps42q3kx] {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    margin-inline-start: 0.5rem;
    color: var(--muted-foreground);
    transition: transform 0.2s ease, color 0.2s ease;
}

.games-history__card-chevron.is-expanded[b-j6ps42q3kx] {
    transform: rotate(180deg);
    color: var(--foreground);
}

.games-history__chevron-icon[b-j6ps42q3kx] {
    width: 1.25rem;
    height: 1.25rem;
}

.games-history__badge[b-j6ps42q3kx] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.games-history__badge--outcome[b-j6ps42q3kx] {
    background: color-mix(in oklch, var(--primary) 15%, var(--surface));
    color: var(--foreground);
    border: 1px solid color-mix(in oklch, var(--primary) 30%, var(--border));
}

.games-history__badge--won[b-j6ps42q3kx] {
    background: color-mix(in oklch, #10b981 18%, var(--surface));
    color: color-mix(in oklch, #059669 85%, var(--foreground));
    border: 1px solid color-mix(in oklch, #10b981 35%, var(--border));
}

.games-history__badge--stopped[b-j6ps42q3kx] {
    background: color-mix(in oklch, #f59e0b 18%, var(--surface));
    color: color-mix(in oklch, #d97706 85%, var(--foreground));
    border: 1px solid color-mix(in oklch, #f59e0b 35%, var(--border));
}

.games-history__badge--neutral[b-j6ps42q3kx] {
    background: color-mix(in oklch, var(--muted) 45%, var(--surface));
    color: var(--muted-foreground);
    border: 1px solid var(--border);
}

.games-history__detail[b-j6ps42q3kx] {
    padding: 1rem;
    border-top: 1px solid var(--border);
    background: color-mix(in oklch, var(--muted) 25%, var(--surface));
}

.games-history__status-text[b-j6ps42q3kx] {
    padding-block: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.games-history__error[b-j6ps42q3kx] {
    padding: 0.75rem;
    border-radius: 0.6rem;
    border: 1px solid color-mix(in oklch, var(--destructive) 40%, var(--border));
    background: color-mix(in oklch, var(--destructive) 10%, var(--surface));
    color: var(--destructive);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.games-history__retry-btn[b-j6ps42q3kx] {
    font-weight: 700;
    text-decoration: underline;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.games-history__retry-btn:hover[b-j6ps42q3kx] {
    text-decoration: none;
}

.games-history__rounds-list[b-j6ps42q3kx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.games-history__round-item[b-j6ps42q3kx] {
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.games-history__round-head[b-j6ps42q3kx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.games-history__round-info[b-j6ps42q3kx] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    min-width: 0;
}

.games-history__round-mode[b-j6ps42q3kx] {
    font-weight: 700;
    color: var(--foreground);
}

.games-history__round-meta[b-j6ps42q3kx] {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.games-history__round-outcome[b-j6ps42q3kx] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.games-history__points-pill[b-j6ps42q3kx] {
    font-size: 0.75rem;
    font-weight: 800;
    color: color-mix(in oklch, #f59e0b 85%, var(--foreground));
}

.games-history__competitors[b-j6ps42q3kx] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-block-start: 0.4rem;
    border-top: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    flex-wrap: wrap;
}

.games-history__competitor-tag[b-j6ps42q3kx] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.45rem;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    background: color-mix(in oklch, var(--muted) 35%, var(--surface));
    color: var(--foreground);
}

.games-history__competitor-tag--winner[b-j6ps42q3kx] {
    border-color: color-mix(in oklch, #f59e0b 50%, var(--border));
    background: color-mix(in oklch, #f59e0b 14%, var(--surface));
    font-weight: 700;
}

.games-history__winner-badge[b-j6ps42q3kx] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    color: color-mix(in oklch, #d97706 90%, var(--foreground));
    font-weight: 800;
}

.games-history__load-more-wrap[b-j6ps42q3kx] {
    margin-block-start: 0.75rem;
    text-align: center;
}

.games-history__load-more-btn[b-j6ps42q3kx] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 0.6rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.games-history__load-more-btn:hover:not(:disabled)[b-j6ps42q3kx] {
    background: color-mix(in oklch, var(--primary) 10%, var(--surface));
    border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
}

.games-history__load-more-btn:disabled[b-j6ps42q3kx] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/Pages/ChildJourney.razor.rz.scp.css */
/* Phones: the next-island card above the map, full width. Tablets and up: the card sits beside the title, and the map
   below takes the width it is given (JourneyMap picks its own layout from its width). */
.journey[b-olrhm3f52q] {
    display: grid;
    gap: 1rem;
    max-inline-size: 72rem;
    margin-inline: auto;
    padding: 0.5rem 0 2rem;
}

.journey__head[b-olrhm3f52q] {
    display: grid;
    gap: 0.75rem;
}

.journey__kicker[b-olrhm3f52q] {
    margin: 0;
    color: var(--muted-foreground);
    font-weight: 800;
    font-size: 0.85rem;
}

.journey__title[b-olrhm3f52q] {
    margin: 0.1rem 0 0;
    font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
    font-weight: 900;
    line-height: 1.3;
}

.journey__collected[b-olrhm3f52q] {
    margin: 0.2rem 0 0;
    font-weight: 800;
}

.journey__next[b-olrhm3f52q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    background: var(--surface, var(--card));
}

.journey__next[b-olrhm3f52q]  .journey__next-art {
    --isl-size: 5.5rem;
    flex: none;
}

.journey__next-text[b-olrhm3f52q] {
    display: grid;
    gap: 0.4rem;
    flex: 1;
    min-inline-size: 0;
}

.journey__left[b-olrhm3f52q] {
    margin: 0;
    font-weight: 700;
}

.journey__bar[b-olrhm3f52q] {
    block-size: 0.8rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--foreground) 10%, transparent);
    overflow: hidden;
}

.journey__bar span[b-olrhm3f52q] {
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, oklch(0.85 0.17 85), var(--primary));
    transition: inline-size 1.2s cubic-bezier(0.3, 0.9, 0.3, 1);
}

.journey__teaser[b-olrhm3f52q],
.journey__done[b-olrhm3f52q] {
    margin: 0;
    font-weight: 700;
    color: var(--muted-foreground);
}

.journey__done[b-olrhm3f52q] {
    padding: 0.75rem 1rem;
    border-radius: 1.25rem;
    background: color-mix(in oklch, var(--accent, oklch(0.85 0.15 90)) 25%, var(--background));
    color: var(--foreground);
}

.journey__cta[b-olrhm3f52q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;
    padding: 0 1.5rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 6px 16px color-mix(in oklch, var(--primary) 35%, transparent);
}

.journey__cta:focus-visible[b-olrhm3f52q] {
    outline: 3px solid var(--foreground);
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .journey__head[b-olrhm3f52q] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        align-items: center;
        column-gap: 1.25rem;
    }

    .journey__cta[b-olrhm3f52q] {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (min-width: 1100px) {
    .journey__head[b-olrhm3f52q] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
    }

    .journey__cta[b-olrhm3f52q] {
        grid-column: auto;
    }
}

/* Tapping an island: a small card at the bottom, above the navigation. */
.journey-tip[b-olrhm3f52q] {
    position: fixed;
    inset-inline: 0.75rem;
    inset-block-end: calc(5.5rem + env(safe-area-inset-bottom));
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-inline-size: 30rem;
    margin-inline: auto;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    background: var(--surface, var(--card));
    box-shadow: 0 12px 30px color-mix(in oklch, var(--foreground) 18%, transparent);
    animation: journey-tip-in-b-olrhm3f52q 0.25s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

.journey-tip[b-olrhm3f52q]  .journey-tip__art {
    --isl-size: 5rem;
    flex: none;
}

.journey-tip__text[b-olrhm3f52q] {
    flex: 1;
    min-inline-size: 0;
}

.journey-tip__text h2[b-olrhm3f52q] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 900;
}

.journey-tip__text p[b-olrhm3f52q] {
    margin: 0.2rem 0 0;
    font-weight: 700;
    font-size: 0.9rem;
}

.journey-tip__reward[b-olrhm3f52q] {
    color: var(--muted-foreground);
}

.journey-tip__close[b-olrhm3f52q] {
    align-self: start;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 0;
    border-radius: 0.8rem;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

@media (min-width: 768px) {
    .journey-tip[b-olrhm3f52q] {
        inset-block-end: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .journey-tip[b-olrhm3f52q] { animation: none; }
    .journey__bar span[b-olrhm3f52q] { transition: none; }
}

@keyframes journey-tip-in-b-olrhm3f52q {
    from { transform: translateY(1rem); opacity: 0; }
}

.journey__teaser[b-olrhm3f52q],
.journey-tip__reward[b-olrhm3f52q] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.journey__teaser-img[b-olrhm3f52q],
.journey-tip__reward img[b-olrhm3f52q] {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: none;
    border-radius: 0.6rem;
    object-fit: cover;
}
/* /Components/Pages/ChildMissions.razor.rz.scp.css */
.page-split[b-ppfass6rtk],
.page-split__main[b-ppfass6rtk],
.missions-section[b-ppfass6rtk] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.missions-section[b-ppfass6rtk]  .debts {
    margin-block: 0 1rem;
    padding: 0.85rem 1rem 1rem;
    border-radius: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--accent-peach, #f0a35e) 55%, transparent);
    background: color-mix(in srgb, var(--accent-peach, #f0a35e) 12%, transparent);
}

.missions-section[b-ppfass6rtk]  .debts h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.missions-section[b-ppfass6rtk]  .debts h3 span {
    min-width: 1.5rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    text-align: center;
    font-size: 0.85rem;
    background: color-mix(in srgb, var(--accent-peach, #f0a35e) 40%, transparent);
}

.missions-section[b-ppfass6rtk]  .debts p {
    margin: 0.2rem 0 0.7rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

.missions-section[b-ppfass6rtk]  .missions-header-row {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    margin-block-end: 1.25rem;
}

.missions-section[b-ppfass6rtk]  .task-filters {
    margin-block-end: 1rem;
}

/* The tabs share the row and grow to fill it; when text is large or the screen narrow, a tab moves to a second row rather
   than shrinking its word into letters. */
.missions-section[b-ppfass6rtk]  .missions-top-tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 1.6rem;
    border: 1px solid var(--border);
    background: var(--surface);
}

.missions-section[b-ppfass6rtk]  .missions-top-tab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    gap: 0.1rem 0.35rem;
    min-height: 2.6rem;
    padding: 0.35rem 0.3rem;
    border: none;
    border-radius: 1.3rem;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-align: center;
    /* A word is never broken into letters: when the tabs do not fit in one row, a tab moves to the next row instead. */
    white-space: nowrap;
}

.missions-section[b-ppfass6rtk]  .missions-top-tab.is-active {
    background: var(--primary);
    color: var(--primary-foreground, #fff);
}

.missions-section[b-ppfass6rtk]  .missions-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding-inline: 0.4rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    background: color-mix(in srgb, currentColor 16%, transparent);
}

.missions-section[b-ppfass6rtk]  .missions-group {
    margin-block-end: 1.15rem;
}

.missions-section[b-ppfass6rtk]  .missions-group__title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.55rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--foreground);
}

.missions-section[b-ppfass6rtk]  .missions-group__title span:last-child {
    min-width: 1.4rem;
    padding-inline: 0.45rem;
    border-radius: 999px;
    font-size: 0.78rem;
    text-align: center;
    background: color-mix(in srgb, var(--primary) 16%, var(--surface));
    color: var(--foreground);
}

.missions-section[b-ppfass6rtk]  .missions-group__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
}

.missions-section[b-ppfass6rtk]  .missions-group__dot.is-now {
    background: var(--quest-success, #16a34a);
}

.missions-section[b-ppfass6rtk]  .missions-group__dot.is-elapsed {
    background: var(--accent-peach, #f59e0b);
}

.missions-section[b-ppfass6rtk]  .missions-group__dot.is-later {
    background: var(--primary, #6366f1);
}

.missions-section[b-ppfass6rtk]  .completed-today-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--quest-mint, var(--primary)) 45%, var(--border));
    background: color-mix(in srgb, var(--quest-mint, var(--primary)) 12%, var(--surface));
}

.missions-section[b-ppfass6rtk]  .completed-today-bar__info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.9rem;
}

.missions-section[b-ppfass6rtk]  .completed-today-bar__btn {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.missions-section[b-ppfass6rtk]  .debts-load-more {
    width: 100%;
    min-height: 2.6rem;
    padding: 0.5rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    margin-block-start: 0.75rem;
}

.missions-section[b-ppfass6rtk]  .missions-action-row {
    width: 100%;
}

.missions-section[b-ppfass6rtk]  .done-good-action-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2.75rem;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border: 1px dashed color-mix(in srgb, var(--accent, var(--primary)) 45%, var(--border));
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--accent, var(--primary)) 8%, var(--surface));
    color: var(--foreground);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.missions-section[b-ppfass6rtk]  .done-good-action-btn:hover {
    background: color-mix(in srgb, var(--accent, var(--primary)) 14%, var(--surface));
    border-color: var(--primary);
    transform: translateY(-1px);
}

.missions-section[b-ppfass6rtk]  .done-good-action-btn:active {
    transform: scale(0.99);
}

.missions-section[b-ppfass6rtk]  .done-good-action-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}

.missions-section[b-ppfass6rtk]  .done-good-action-btn__icon {
    font-size: 1.15rem;
    margin-inline-end: 0.5rem;
}

.missions-section[b-ppfass6rtk]  .done-good-action-btn__label {
    flex-grow: 1;
    text-align: start;
}

.missions-section[b-ppfass6rtk]  .done-good-notice {
    margin-block-end: 1rem;
    padding: 0.65rem 0.95rem;
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--quest-success, #16a34a) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--quest-success, #16a34a) 35%, var(--border));
    color: var(--foreground);
    font-size: 0.88rem;
    font-weight: 700;
}

.missions-section[b-ppfass6rtk]  .done-good-notice__btn {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.missions-section[b-ppfass6rtk]  .done-good-notice__btn:hover {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.missions-section[b-ppfass6rtk]  .review-header {
    padding: 0.4rem 0.2rem 0.2rem;
    margin-block-end: 1rem;
}

.missions-section[b-ppfass6rtk]  .review-header__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--foreground);
}

.missions-section[b-ppfass6rtk]  .review-header__subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--muted-foreground);
    font-weight: 600;
}

@media (min-width: 768px) {
    .missions-section[b-ppfass6rtk]  .missions-header-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .missions-section[b-ppfass6rtk]  .missions-top-tabs {
        display: inline-flex;
        width: auto;
    }

    .missions-section[b-ppfass6rtk]  .missions-top-tab {
        padding-inline: 1.15rem;
        width: auto;
    }

    .missions-section[b-ppfass6rtk]  .missions-action-wrapper {
        width: auto;
        margin-inline-start: auto;
    }

    .missions-section[b-ppfass6rtk]  .done-good-action-btn {
        width: auto;
        min-width: 11rem;
        border-radius: 999px;
    }
}


/* Missions that closed after their time and cost stars: shown calmly and read-only, so the child knows where the stars went. */
.missions-section[b-ppfass6rtk]  .missed-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 1.1rem;
    border: 1.5px solid color-mix(in srgb, var(--accent-orange, var(--primary)) 50%, var(--border));
    background: color-mix(in srgb, var(--accent-orange, var(--primary)) 10%, var(--surface));
}

.missions-section[b-ppfass6rtk]  .missed-card__icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.8rem;
    background: var(--surface);
    color: color-mix(in srgb, var(--accent-orange, var(--primary)) 65%, var(--foreground) 35%);
}

.missions-section[b-ppfass6rtk]  .missed-card__body {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.missions-section[b-ppfass6rtk]  .missed-card__body strong {
    overflow-wrap: anywhere;
    font-size: 0.95rem;
}

.missions-section[b-ppfass6rtk]  .missed-card__body small {
    color: var(--muted-foreground);
    font-size: 0.78rem;
    line-height: 1.35;
}

.missions-section[b-ppfass6rtk]  .missed-card__stars {
    flex: 0 0 auto;
    font-size: 1.05rem;
    font-weight: 800;
}
/* /Components/Pages/ChildProfilePage.razor.rz.scp.css */
.child-profile__bank-give[aria-busy="true"][b-t06uosoz7f] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Reviews and missions stay the main column; the stars sit beside them on a wide screen instead of being buried in a long page. */
.child-profile__cols[b-t06uosoz7f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.child-profile__cols-main[b-t06uosoz7f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

@media (min-width: 1600px) {
    .child-profile.master-detail__detail[b-t06uosoz7f] {
        max-width: none;
    }

    .child-profile__cols[b-t06uosoz7f] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 21rem;
        gap: 1.5rem;
        align-items: start;
    }

    .child-profile__cols-side[b-t06uosoz7f] {
        position: sticky;
        top: 1rem;
    }
}

.child-profile__start[b-t06uosoz7f] {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--ct-surface, #fff) 85%, var(--ct-accent, #d9a441) 15%);
    font-size: .92rem;
}

.child-profile__start input[b-t06uosoz7f] {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--ct-border, #d8d2c4);
    padding: 0 12px;
    font: inherit;
}

.child-profile__gift[b-t06uosoz7f] {
    justify-self: start;
    min-height: 2.75rem;
    margin-top: 0.4rem;
    padding: 0.3rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.child-profile__gift:focus-visible[b-t06uosoz7f] {
    outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}
/* /Components/Pages/ChildPurchases.razor.rz.scp.css */
.purchases[b-3ybc8y35rs] {
    display: grid;
    gap: 1.1rem;
    padding-bottom: 6rem;
}

.purchases-notice[b-3ybc8y35rs] {
    margin: 0;
    padding: 0.8rem 1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, #3fb950 18%, var(--background));
    font-weight: 700;
}

.purchases-group[b-3ybc8y35rs] {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
}

.purchases-group--open[b-3ybc8y35rs] {
    border: 2px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--background));
}

.purchases-group h2[b-3ybc8y35rs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    font-weight: 800;
}

.purchases-count[b-3ybc8y35rs] {
    min-width: 1.6rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.85rem;
    text-align: center;
}

.purchases-hint[b-3ybc8y35rs] {
    margin: 0 0 0.7rem;
    color: var(--muted-foreground);
    font-size: 0.9rem;
}

.purchases-group ul[b-3ybc8y35rs] {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.purchases-group li[b-3ybc8y35rs] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.purchases-text[b-3ybc8y35rs] {
    display: grid;
    flex: 1;
    min-width: 0;
}

.purchases-text strong[b-3ybc8y35rs] {
    overflow-wrap: anywhere;
}

.purchases-text small[b-3ybc8y35rs] {
    color: var(--muted-foreground);
}

.purchases-mini[b-3ybc8y35rs] {
    display: grid;
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    overflow: hidden;
}

.purchases-mini img[b-3ybc8y35rs] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.6rem;
}

.purchases-undo[b-3ybc8y35rs],
.purchases-got[b-3ybc8y35rs] {
    min-width: 5rem;
    min-height: 2.75rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
}

.purchases-undo[b-3ybc8y35rs] {
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--foreground);
}

.purchases-got[b-3ybc8y35rs] {
    border: 0;
    background: #3fb950;
    color: #fff;
}

.purchases-undo:focus-visible[b-3ybc8y35rs],
.purchases-got:focus-visible[b-3ybc8y35rs] {
    outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}

.purchases-empty[b-3ybc8y35rs] {
    padding: 1.4rem;
    border: 1px dashed var(--border);
    border-radius: 1.25rem;
    text-align: center;
}
/* /Components/Pages/ChildRewards.razor.rz.scp.css */
.shop[b-3svomd7xbc] {
    display: grid;
    gap: 1.1rem;
    padding-bottom: 6rem;
}

.shop-notice[b-3svomd7xbc] {
    margin: 0;
    padding: 0.8rem 1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, #3fb950 18%, var(--background));
    font-weight: 700;
}

/* ---- a reward that has arrived: the child confirms it with one tap ---- */
.shop-arrived[b-3svomd7xbc] {
    padding: 1rem;
    border: 2px solid #3fb950;
    border-radius: 1.25rem;
    background: color-mix(in srgb, #3fb950 14%, var(--background));
}

.shop-arrived h2[b-3svomd7xbc],
.shop-mine h2[b-3svomd7xbc] {
    margin: 0 0 0.6rem;
    font-size: 1.1rem;
    font-weight: 800;
}

.shop-arrived ul[b-3svomd7xbc],
.shop-mine ul[b-3svomd7xbc] {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-arrived li[b-3svomd7xbc],
.shop-mine li[b-3svomd7xbc] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.shop-arrived li strong[b-3svomd7xbc],
.shop-mine li strong[b-3svomd7xbc] {
    flex: 1;
}

.shop-mini[b-3svomd7xbc] {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    overflow: hidden;
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--primary) 12%, var(--background));
    font-size: 1.3rem;
}

.shop-mini img[b-3svomd7xbc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-got[b-3svomd7xbc] {
    min-height: 2.9rem;
    padding: 0.4rem 1.2rem;
    border: 0;
    border-radius: 999px;
    background: #2f9e44;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

/* ---- the gallery: two across on a phone, three on a wide screen, like shelves of products ---- */
.shop-grid[b-3svomd7xbc] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* tablet (portrait or landscape): two per row; laptops and larger: three per row */
@media (min-width: 600px) {
    .shop-grid[b-3svomd7xbc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .shop-grid[b-3svomd7xbc] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---- a slim strip at the top: the way into "my purchases" and the number that can still be taken back ---- */
.shop-strip[b-3svomd7xbc] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--foreground);
    font-weight: 700;
    text-decoration: none;
}

.shop-strip--open[b-3svomd7xbc] {
    border: 2px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--background));
}

.shop-strip__text[b-3svomd7xbc] {
    flex: 1;
    min-width: 0;
}

.shop-strip__count[b-3svomd7xbc] {
    min-width: 1.7rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    text-align: center;
}
/* /Components/Pages/ChildStars.razor.rz.scp.css */
/* The Stars / Wallet page layout: theme variables only */
.stars-ledger[b-kvrfgi3v9m] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-block: 0.5rem 2rem;
}

.stars-card[b-kvrfgi3v9m] {
    padding: 1rem;
    border-radius: 1.2rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
}

.stars-card__head[b-kvrfgi3v9m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
}

.stars-card__title[b-kvrfgi3v9m] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.stars-card__actions[b-kvrfgi3v9m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.stars-card__more[b-kvrfgi3v9m] {
    display: flex;
    justify-content: center;
    margin-block-start: 0.75rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--border);
}

.stars-btn[b-kvrfgi3v9m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0.8rem;
    border: 1px solid transparent;
    background: var(--muted);
    color: var(--foreground);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.stars-btn:hover[b-kvrfgi3v9m] {
    background: color-mix(in oklch, var(--muted) 80%, var(--foreground));
}

.stars-btn--outline[b-kvrfgi3v9m] {
    background: transparent;
    border-color: color-mix(in oklch, var(--primary) 50%, var(--border));
    color: var(--primary);
}

.stars-btn--outline:hover[b-kvrfgi3v9m] {
    background: color-mix(in oklch, var(--primary) 12%, var(--surface));
}

.stars-btn--wide[b-kvrfgi3v9m] {
    width: 100%;
    padding-block: 0.55rem;
}

@media (min-width: 640px) {
    .stars-btn--wide[b-kvrfgi3v9m] {
        width: auto;
    }
}
/* /Components/Pages/ChildStarsHistory.razor.rz.scp.css */
.stars-btn[b-c5l2o4o4na] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.8rem;
    border: 1px solid color-mix(in oklch, var(--primary) 50%, var(--border));
    background: transparent;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
}

.stars-btn:hover[b-c5l2o4o4na] {
    background: color-mix(in oklch, var(--primary) 12%, var(--surface));
}
/* /Components/Pages/ChildStarsPanel.razor.rz.scp.css */
.stars-panel-summary[b-krx6z44fpz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.stars-panel-balance[b-krx6z44fpz] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    color: var(--primary);
}

.stars-panel-balance b[b-krx6z44fpz] {
    font-size: 1.5rem;
    color: var(--foreground);
}

.stars-panel-chip[b-krx6z44fpz] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface);
}

.stars-panel-note[b-krx6z44fpz] {
    margin: 0 0 0.7rem;
    padding: 0.6rem 0.8rem;
    border-radius: 0.9rem;
    font-size: 0.9rem;
    background: color-mix(in oklch, var(--accent) 30%, var(--surface));
}
/* /Components/Pages/ChildTodayBoard.razor.rz.scp.css */
.child-day[b-pokqju6q2b] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.child-day__nav[b-pokqju6q2b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.child-day__nav h2[b-pokqju6q2b] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.child-day__title[b-pokqju6q2b] {
    text-align: center;
}

.child-day__when[b-pokqju6q2b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 0.2rem;
}

.child-day__pick[b-pokqju6q2b] {
    position: relative;
    display: inline-block;
    color: var(--muted-foreground);
    font-size: 0.8rem;
    font-weight: 700;
}

.child-day__pick input[b-pokqju6q2b] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.child-day__nav button[b-pokqju6q2b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
}

.child-day__nav .child-day__today[b-pokqju6q2b] {
    min-width: 0;
    min-height: 1.6rem;
    margin: 0;
    padding: 0 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
}

.child-day__filters button[b-pokqju6q2b] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.child-day__count[b-pokqju6q2b] {
    min-width: 1.25rem;
    font-weight: 800;
}

.child-day__count.is-alert[b-pokqju6q2b] {
    color: var(--primary);
    animation: review-pulse-b-pokqju6q2b 1.6s ease-in-out infinite;
}

.child-day__count.is-still[b-pokqju6q2b],
.child-day__count.is-alert.is-still[b-pokqju6q2b] {
    animation: none;
}

@keyframes review-pulse-b-pokqju6q2b {
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .child-day__count.is-alert[b-pokqju6q2b] { animation: none; }
}

.child-day__filters[b-pokqju6q2b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.child-day__filters button[b-pokqju6q2b] {
    flex: 1 1 6.2rem;
    justify-content: center;
    min-width: 0;
    min-height: 2.25rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted-foreground);
    font: inherit;
    font-weight: 700;
    padding: 0.2rem 0.7rem;
}

.child-day__filters button.is-active[b-pokqju6q2b] {
    background: var(--accent);
    color: var(--accent-foreground);
    border-color: transparent;
}

.child-day__group[b-pokqju6q2b] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.85rem;
    font-weight: 800;
}

.child-day__list[b-pokqju6q2b] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.child-day__item[b-pokqju6q2b] {
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--surface);
}

.child-day__row[b-pokqju6q2b] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--surface);
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.child-day__item .child-day__row[b-pokqju6q2b] {
    border: 0;
    background: transparent;
    border-radius: 0;
}

.child-day__details[b-pokqju6q2b] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0 0.7rem 0.7rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
}

.child-day__facts[b-pokqju6q2b] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
}

.child-day__facts div[b-pokqju6q2b] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.child-day__facts dt[b-pokqju6q2b] {
    color: var(--muted-foreground);
    font-size: 0.78rem;
}

.child-day__facts dd[b-pokqju6q2b] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: start;
}

.child-day__note[b-pokqju6q2b] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.85rem;
}

.child-day__steps[b-pokqju6q2b] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.child-day__steps li[b-pokqju6q2b] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.child-day__step-points[b-pokqju6q2b] {
    margin-inline-start: auto;
    color: var(--muted-foreground);
    font-size: 0.78rem;
}

.child-day__review[b-pokqju6q2b] {
    width: fit-content;
    color: var(--foreground);
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
}

.child-day__chevron[b-pokqju6q2b] {
    display: block;
}

.child-day__icon[b-pokqju6q2b] {
    font-size: 1.15rem;
}

.child-day__thumb[b-pokqju6q2b] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    object-fit: cover;
}

.child-day__body[b-pokqju6q2b] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.child-day__title[b-pokqju6q2b] {
    font-weight: 800;
}

.child-day__meta[b-pokqju6q2b],
.child-day__stars[b-pokqju6q2b] {
    color: var(--muted-foreground);
    font-size: 0.78rem;
}

.child-day__go[b-pokqju6q2b] {
    color: var(--muted-foreground);
}
/* /Components/Pages/ChildZawada.razor.rz.scp.css */
.zawada[b-za2yg3w670] {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    width: 100%;
}

.zawada__actions[b-za2yg3w670] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    width: 100%;
}

.zawada__good[b-za2yg3w670] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding-inline: 1.35rem;
    padding-block: 0.4rem;
    border: 1.5px solid color-mix(in srgb, var(--primary) 45%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    color: var(--foreground);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 10%, transparent);
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.zawada__good--thanks[b-za2yg3w670] {
    border-color: color-mix(in srgb, var(--tone-peach, #f97316) 45%, var(--border));
    background: color-mix(in srgb, var(--tone-peach, #f97316) 14%, var(--surface));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tone-peach, #f97316) 10%, transparent);
}

.zawada__good:hover[b-za2yg3w670] {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--primary) 22%, var(--surface));
    border-color: var(--primary);
}

.zawada__good--thanks:hover[b-za2yg3w670] {
    background: color-mix(in srgb, var(--tone-peach, #f97316) 22%, var(--surface));
    border-color: var(--tone-peach, #f97316);
}

.zawada__good:active[b-za2yg3w670] {
    transform: scale(0.98);
}

.zawada__good:focus-visible[b-za2yg3w670] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.zawada__notice[b-za2yg3w670] {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
    color: var(--foreground);
    font-size: 0.88rem;
    font-weight: 700;
}

/* Sections */
.garden-pending-section[b-za2yg3w670],
.garden-approved-section[b-za2yg3w670] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
}

.garden-section-title[b-za2yg3w670] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--foreground);
}

.garden-pending-badge[b-za2yg3w670],
.garden-approved-badge[b-za2yg3w670] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: 0.4rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
}

.garden-pending-badge[b-za2yg3w670] {
    background: color-mix(in srgb, var(--accent, #f59e0b) 18%, var(--surface));
    color: var(--accent, #d97706);
    border: 1px solid color-mix(in srgb, var(--accent, #f59e0b) 35%, var(--border));
}

.garden-approved-badge[b-za2yg3w670] {
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
}

/* Deeds List */
.garden-deeds-list[b-za2yg3w670] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.garden-deed-card[b-za2yg3w670] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 1.15rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--foreground) 4%, transparent);
}

.garden-deed-card--pending[b-za2yg3w670] {
    border-color: color-mix(in srgb, var(--accent, #f59e0b) 35%, var(--border));
    background: color-mix(in srgb, var(--accent, #f59e0b) 6%, var(--surface));
}

.garden-deed-card--approved[b-za2yg3w670] {
    border-color: color-mix(in srgb, #10b981 35%, var(--border));
}

.garden-deed-icon[b-za2yg3w670] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    font-size: 1.25rem;
    flex-shrink: 0;
}

.garden-deed-card--pending .garden-deed-icon[b-za2yg3w670] {
    background: color-mix(in srgb, var(--accent, #f59e0b) 14%, var(--surface));
}

.garden-deed-card--approved .garden-deed-icon[b-za2yg3w670] {
    background: color-mix(in srgb, #10b981 14%, var(--surface));
    color: #10b981;
}

.garden-deed-copy[b-za2yg3w670] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
    text-align: start;
}

.garden-deed-title[b-za2yg3w670] {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--foreground);
    overflow-wrap: anywhere;
}

.garden-deed-subtitle[b-za2yg3w670] {
    font-size: 0.78rem;
    color: var(--muted-foreground);
}

.garden-deed-note[b-za2yg3w670] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.garden-deed-tags[b-za2yg3w670] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-block-start: 0.15rem;
}

.garden-deed-tag[b-za2yg3w670] {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    color: var(--foreground);
}

.garden-deed-pill[b-za2yg3w670] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}

.garden-deed-pill--pending[b-za2yg3w670] {
    background: color-mix(in srgb, var(--accent, #f59e0b) 16%, var(--surface));
    color: var(--accent, #d97706);
    border: 1px solid color-mix(in srgb, var(--accent, #f59e0b) 35%, var(--border));
}

.garden-deed-stars[b-za2yg3w670] {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

.zawada__thanked[b-za2yg3w670] {
    margin: 0;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 10%, var(--background));
    font-weight: 700;
    text-align: center;
}
/* /Components/Pages/CompanionLab.razor.rz.scp.css */
.companion-lab[b-trhhuhcczb] {
    display: grid;
    gap: 1.25rem;
    max-inline-size: 60rem;
    margin-inline: auto;
    padding: 1.25rem 1rem 3rem;
}

.companion-lab__head h1[b-trhhuhcczb] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 900;
}

.companion-lab__head p[b-trhhuhcczb] {
    margin: 0.35rem 0 0;
    color: var(--muted-foreground);
}

.companion-lab__motions[b-trhhuhcczb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.companion-lab__btn[b-trhhuhcczb] {
    min-block-size: 2.75rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 2px solid var(--primary);
    background: var(--card, var(--background));
    color: var(--foreground);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.companion-lab__btn.is-on[b-trhhuhcczb] {
    background: var(--primary);
    color: var(--primary-foreground);
}

.companion-lab__btn:focus-visible[b-trhhuhcczb] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.companion-lab__still[b-trhhuhcczb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    font-weight: 700;
}

.companion-lab__stage[b-trhhuhcczb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.companion-lab__card[b-trhhuhcczb] {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 1.5rem 0.75rem 1rem;
    border-radius: 1.25rem;
    border: 1px solid var(--border);
    background: color-mix(in oklch, var(--primary) 7%, var(--card, var(--background)));
    min-inline-size: 0;
}

.companion-lab__card figcaption[b-trhhuhcczb] {
    color: var(--muted-foreground);
    font-size: 0.85rem;
    text-align: center;
}

.companion-lab__card[b-trhhuhcczb]  .companion-lab__kid {
    --kid-size: min(11rem, 36vw);
}

.companion-lab__sizes h2[b-trhhuhcczb] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.companion-lab__row[b-trhhuhcczb] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1.25rem;
}

.companion-lab__row[b-trhhuhcczb]  .companion-lab__small {
    --kid-size: 5rem;
}

.companion-lab__row[b-trhhuhcczb]  .companion-lab__tiny {
    --kid-size: 3rem;
}
/* /Components/Pages/GameHistoryPage.razor.rz.scp.css */
.ghistory[b-ha2u7u9new] { display: flex; flex-direction: column; gap: 1rem; max-width: 48rem; margin-inline: auto; padding-bottom: 6rem; }

@media (min-width: 768px) { .ghistory[b-ha2u7u9new] { padding-bottom: 2rem; } }

.ghistory__head[b-ha2u7u9new] { display: flex; align-items: flex-start; gap: .75rem; }

.ghistory__head h1[b-ha2u7u9new] { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--foreground); }

.ghistory__head p[b-ha2u7u9new], .ghistory__hint[b-ha2u7u9new] { margin: .2rem 0 0; color: var(--muted-foreground); }

.ghistory__back[b-ha2u7u9new] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font-size: 1.2rem;
    text-decoration: none;
}

.ghistory__who[b-ha2u7u9new] { display: flex; flex-wrap: wrap; gap: .5rem; }

.ghistory__who a[b-ha2u7u9new] {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    text-decoration: none;
    font-weight: 700;
}

.ghistory__who a.is-on[b-ha2u7u9new] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

.ghistory__card[b-ha2u7u9new] {
    padding: 1rem;
    border-radius: 1.25rem;
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ghistory__card h2[b-ha2u7u9new] { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--foreground); }

.ghistory__games[b-ha2u7u9new] { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

.ghistory__games li[b-ha2u7u9new] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .75rem;
    border-radius: .875rem;
    background: var(--muted);
    color: var(--foreground);
}

.ghistory__games li span[b-ha2u7u9new] { color: var(--muted-foreground); font-size: .9rem; }

.ghistory__badges[b-ha2u7u9new] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }

.ghistory__badges li[b-ha2u7u9new] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px dashed var(--border);
    color: var(--muted-foreground);
    font-size: .9rem;
}

.ghistory__badges li.is-reached[b-ha2u7u9new] { border-style: solid; border-color: var(--primary); color: var(--foreground); font-weight: 700; }

.ghistory__list[b-ha2u7u9new] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }

.ghistory__list a[b-ha2u7u9new] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3.25rem;
    padding: .6rem .75rem;
    border-radius: .875rem;
    border: 1px solid var(--border);
    color: var(--foreground);
    text-decoration: none;
}

.ghistory__mark[b-ha2u7u9new] { font-size: 1.4rem; }

.ghistory__what[b-ha2u7u9new] { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ghistory__what small[b-ha2u7u9new], .ghistory__list time[b-ha2u7u9new] { color: var(--muted-foreground); font-size: .85rem; }

.ghistory__more[b-ha2u7u9new] {
    align-self: center;
    min-height: 2.75rem;
    padding: 0 1.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font-weight: 700;
}

.ghistory__back:focus-visible[b-ha2u7u9new], .ghistory__who a:focus-visible[b-ha2u7u9new], .ghistory__list a:focus-visible[b-ha2u7u9new], .ghistory__more:focus-visible[b-ha2u7u9new] {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}
/* /Components/Pages/GameResultPage.razor.rz.scp.css */
.gresult[b-11cktq9keu] { display: flex; flex-direction: column; gap: 1rem; max-width: 40rem; margin-inline: auto; padding-bottom: 6rem; }

@media (min-width: 768px) { .gresult[b-11cktq9keu] { padding-bottom: 2rem; } }

.gresult__head[b-11cktq9keu] { display: flex; align-items: flex-start; gap: .75rem; }

.gresult__head h1[b-11cktq9keu] { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--foreground); }

.gresult__head p[b-11cktq9keu], .gresult__hint[b-11cktq9keu] { margin: .2rem 0 0; color: var(--muted-foreground); }

.gresult__back[b-11cktq9keu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font-size: 1.2rem;
    text-decoration: none;
}

.gresult__summary[b-11cktq9keu] {
    margin: 0;
    padding: 1rem;
    border-radius: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--foreground);
    text-align: center;
}

.gresult__scores[b-11cktq9keu] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }

.gresult__scores li[b-11cktq9keu] {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: .875rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
}

.gresult__scores li.is-me[b-11cktq9keu] { border-color: var(--primary); font-weight: 700; }

.gresult__again[b-11cktq9keu] {
    align-self: center;
    min-height: 2.75rem;
    padding: .65rem 1.5rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 800;
    text-decoration: none;
}

.gresult__back:focus-visible[b-11cktq9keu], .gresult__again:focus-visible[b-11cktq9keu] { outline: 3px solid var(--primary); outline-offset: 2px; }
/* /Components/Pages/Games.razor.rz.scp.css */
.games[b-572meriqqc] { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 6rem; }

@media (min-width: 768px) { .games[b-572meriqqc] { padding-bottom: 2rem; } }

.games__head h1[b-572meriqqc] { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--foreground); }

.games__head p[b-572meriqqc] { margin: .2rem 0 0; color: var(--muted-foreground); }

.games__error[b-572meriqqc] { margin: 0; padding: .7rem 1rem; border-radius: .9rem; background: color-mix(in srgb, #dc2626 10%, var(--surface)); color: var(--foreground); }

.games__skeleton[b-572meriqqc] { height: 14rem; border-radius: 1.2rem; background: color-mix(in srgb, var(--foreground) 6%, var(--surface)); }

.games__cards[b-572meriqqc] { display: grid; grid-template-columns: 1fr; gap: .8rem; }

@media (min-width: 900px) { .games__cards[b-572meriqqc] { grid-template-columns: repeat(3, 1fr); } }

.game-card[b-572meriqqc] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1rem;
    border-radius: 1.25rem;
    border: 1px solid var(--border);
    background: var(--surface);
}

.game-card__help[b-572meriqqc] {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 92%, var(--primary));
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
    z-index: 2;
}

.game-card__help:hover[b-572meriqqc] {
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    border-color: var(--primary);
}

.game-card__art[b-572meriqqc] { display: flex; gap: .35rem; padding: .5rem; border-radius: .9rem; background: #fdf8ef; width: fit-content; }

.game-card__art[b-572meriqqc]  .game-symbol { width: 2.6rem; height: 2.6rem; }

.game-card__body h2[b-572meriqqc] { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--foreground); }

.game-card__body p[b-572meriqqc] { margin: .2rem 0; color: var(--muted-foreground); }

.game-card__body .game-card__goal[b-572meriqqc] { color: var(--foreground); font-size: .9rem; }

.game-card__body small[b-572meriqqc] { font-weight: 700; color: var(--primary); }

.game-card__actions[b-572meriqqc] { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }

.games__btn[b-572meriqqc] {
    flex: 1 1 8rem;
    min-height: 2.9rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
    background: var(--surface);
    color: var(--foreground);
    font-weight: 800;
    cursor: pointer;
}

.games__btn--primary[b-572meriqqc] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground, #fff); }

.games__btn--quiet[b-572meriqqc] { border-color: var(--border); }

.games__btn:disabled[b-572meriqqc] { opacity: .6; cursor: default; }

.games__btn:focus-visible[b-572meriqqc] { outline: 3px solid var(--primary); outline-offset: 2px; }

.games__rooms h2[b-572meriqqc] { margin: 0 0 .5rem; font-size: 1rem; font-weight: 800; color: var(--foreground); }

.games__rooms ul[b-572meriqqc] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }

.games__room[b-572meriqqc] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .85rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 600px) {
    .games__room[b-572meriqqc] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.games__room:hover[b-572meriqqc] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.games__room.is-live[b-572meriqqc] {
    border-color: color-mix(in srgb, #ef4444 35%, var(--border));
}

.games__room-info[b-572meriqqc] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.games__room-info strong[b-572meriqqc] {
    color: var(--foreground);
    font-size: 1.05rem;
}

.games__player-name[b-572meriqqc] {
    color: var(--muted-foreground);
    font-size: 0.9rem;
    font-weight: 600;
}

.games__room-badge[b-572meriqqc] {
    display: flex;
    align-items: center;
}

.games__tag[b-572meriqqc] {
    font-style: normal;
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    white-space: nowrap;
}

.games__tag--live[b-572meriqqc] {
    background: color-mix(in srgb, #ef4444 14%, var(--surface));
    color: #dc2626;
    border: 1px solid color-mix(in srgb, #ef4444 35%, var(--border));
}

.games__tag--playing[b-572meriqqc] {
    background: color-mix(in srgb, #f59e0b 14%, var(--surface));
    color: #d97706;
    border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--border));
}

.games__tag--join[b-572meriqqc] {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
}

.games__live-dot[b-572meriqqc] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: live-pulse-dot-b-572meriqqc 1.5s infinite;
}

.games__live-icon[b-572meriqqc] {
    font-size: 0.95rem;
}

@keyframes live-pulse-dot-b-572meriqqc {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.game-card__closed[b-572meriqqc] { margin: 0; font-size: .85rem; font-weight: 700; color: var(--muted-foreground); }

.games__invites[b-572meriqqc] {
    padding: 1rem;
    border-radius: 1rem;
    border: 2px solid var(--primary);
    background: var(--surface);
    color: var(--foreground);
}

.games__invites h2[b-572meriqqc] { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 800; }

.games__invites ul[b-572meriqqc] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }

.games__invites li[b-572meriqqc] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }

.games__pair[b-572meriqqc] { display: flex; gap: .5rem; }

.games__pair .games__btn[b-572meriqqc] { white-space: nowrap; padding-inline: 1.25rem; }

.games__settings[b-572meriqqc] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .9rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    background: var(--surface);
    color: var(--foreground);
    text-decoration: none;
}

.games__settings span[b-572meriqqc] { font-size: .85rem; color: var(--muted-foreground); }

.games__settings:focus-visible[b-572meriqqc] { outline: 3px solid var(--primary); outline-offset: 2px; }

.games__muted[b-572meriqqc], .games__credits[b-572meriqqc] { margin: 0; color: var(--muted-foreground); font-size: .85rem; }

/* Tabs: three equal segments, sticky under the header so they stay in reach while scrolling the games. */
.games__tabs[b-572meriqqc] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .25rem;
    padding: .25rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.games__tabs a[b-572meriqqc] {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border-radius: 999px;
    color: var(--muted-foreground);
    font-weight: 800;
    text-decoration: none;
}

.games__tabs a.is-on[b-572meriqqc] { background: var(--primary); color: var(--primary-foreground, #fff); }

.games__tabs a:focus-visible[b-572meriqqc] { outline: 3px solid var(--primary); outline-offset: 2px; }

.games__badge[b-572meriqqc] {
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: .75rem;
}

.games__section-title[b-572meriqqc] { margin: 0 0 .5rem; font-size: 1rem; font-weight: 800; color: var(--foreground); }

.games__empty[b-572meriqqc] { margin: 0; padding: .9rem 1rem; border-radius: 1rem; border: 1px dashed var(--border); color: var(--muted-foreground); font-size: .9rem; line-height: 1.6; }

.games__mine ul[b-572meriqqc] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }

.games__room-card[b-572meriqqc] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .8rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
}

.games__room-card.is-playing[b-572meriqqc] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }

.games__room-card > div[b-572meriqqc] { display: flex; flex-direction: column; gap: .1rem; }

.games__room-card > div span[b-572meriqqc] { font-size: .85rem; color: var(--muted-foreground); }

.games__room-card .games__pair .games__btn[b-572meriqqc] { flex: 1 1 0; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

.games__confirm[b-572meriqqc] { margin: 0; font-weight: 700; font-size: .9rem; }

.games__btn--danger[b-572meriqqc] { background: #dc2626; border-color: #dc2626; color: #fff; }

.games__invites.games__invites[b-572meriqqc] { border-width: 1px; border-color: var(--border); }

.games__history[b-572meriqqc] { display: flex; flex-direction: column; gap: .75rem; }

.games__recent[b-572meriqqc] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }

.games__recent a[b-572meriqqc] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .7rem;
    min-height: 3.2rem;
    padding: .65rem .9rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    text-decoration: none;
}

.games__recent a > span:first-child[b-572meriqqc] { font-size: 1.4rem; }

.games__recent a > span:nth-child(2)[b-572meriqqc] { display: flex; flex-direction: column; min-width: 0; }

.games__recent small[b-572meriqqc] { color: var(--muted-foreground); font-size: .8rem; line-height: 1.5; }

.games__recent time[b-572meriqqc] { font-size: .8rem; color: var(--muted-foreground); }

.games__wide[b-572meriqqc] { display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* /Components/Pages/GameSettingsPage.razor.rz.scp.css */
.gsettings[b-8j2ukvko5x] { display: flex; flex-direction: column; gap: 1rem; max-width: 56rem; margin-inline: auto; padding-bottom: 6rem; }

@media (min-width: 768px) { .gsettings[b-8j2ukvko5x] { padding-bottom: 2rem; } }

.gsettings__head[b-8j2ukvko5x] { display: flex; align-items: flex-start; gap: .75rem; }

.gsettings__head h1[b-8j2ukvko5x] { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--foreground); }

.gsettings__head p[b-8j2ukvko5x] { margin: .2rem 0 0; color: var(--muted-foreground); }

.gsettings__back[b-8j2ukvko5x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font-size: 1.2rem;
    text-decoration: none;
}

.gsettings__back:focus-visible[b-8j2ukvko5x] { outline: 3px solid var(--primary); outline-offset: 2px; }
/* /Components/Pages/IslandLab.razor.rz.scp.css */
.island-lab[b-759iziuvqn] {
    display: grid;
    gap: 1.5rem;
    max-inline-size: 72rem;
    margin-inline: auto;
    padding: 1.25rem 1rem 3rem;
}

.island-lab__head h1[b-759iziuvqn] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 900;
}

.island-lab__head p[b-759iziuvqn] {
    margin: 0.35rem 0 0.75rem;
    color: var(--muted-foreground);
}

.island-lab__tools[b-759iziuvqn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
}

.island-lab__btn[b-759iziuvqn],
.island-lab__open[b-759iziuvqn] {
    min-block-size: 2.75rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 2px solid var(--primary);
    background: var(--card, var(--background));
    color: var(--foreground);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.island-lab__btn.is-on[b-759iziuvqn] {
    background: var(--primary);
    color: var(--primary-foreground);
}

.island-lab__open[b-759iziuvqn] {
    min-block-size: 2.25rem;
    padding: 0 0.85rem;
}

.island-lab__still[b-759iziuvqn] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    font-weight: 700;
}

.island-lab__stars[b-759iziuvqn] {
    font-weight: 900;
    font-size: 1.1rem;
}

.island-lab__grid[b-759iziuvqn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .island-lab__grid[b-759iziuvqn] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}

@media (min-width: 1100px) {
    .island-lab__grid[b-759iziuvqn] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.island-lab__card[b-759iziuvqn] {
    margin: 0;
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0.5rem;
    border-radius: 1.25rem;
    background: linear-gradient(180deg,
        color-mix(in oklch, oklch(0.88 0.07 215) 60%, var(--background)),
        color-mix(in oklch, oklch(0.76 0.1 230) 60%, var(--background)));
}

.island-lab__card[b-759iziuvqn]  .island-lab__art {
    --isl-size: 100%;
}

.island-lab__card figcaption[b-759iziuvqn] {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
}

.island-lab__journey h2[b-759iziuvqn] {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
    font-weight: 900;
}

.island-lab__tip[b-759iziuvqn] {
    position: sticky;
    bottom: 1rem;
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: var(--card, var(--background));
    box-shadow: 0 6px 20px oklch(0.2 0.05 260 / 0.2);
    font-weight: 800;
}
/* /Components/Pages/JourneySettingsPanel.razor.rz.scp.css */
/* Phones: one column, the preview folded under its own heading. Wide sheets: the editor beside a sticky map preview. */
.jset[b-yklv442w52] {
    display: grid;
    gap: 1.25rem;
}

.jset__main[b-yklv442w52] {
    display: grid;
    gap: 0.85rem;
    align-content: start;
    min-inline-size: 0;
}

.jset__side[b-yklv442w52] {
    display: none;
}

@media (min-width: 900px) {
    .jset[b-yklv442w52] {
        grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 1fr);
        align-items: start;
    }

    .jset__side[b-yklv442w52] {
        display: grid;
        gap: 0.5rem;
        position: sticky;
        top: 0;
    }

    .jset__preview-phone[b-yklv442w52] {
        display: none;
    }
}

.jset__hint[b-yklv442w52] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.9rem;
    line-height: 1.7;
}

.jset__side-title[b-yklv442w52] {
    margin: 0;
    font-weight: 900;
}

.jset__kids[b-yklv442w52] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
}

.jset__kid[b-yklv442w52] {
    display: grid;
    gap: 0.1rem;
    flex: none;
    min-block-size: 3rem;
    padding: 0.35rem 0.85rem;
    border: 2px solid var(--border);
    border-radius: 1rem;
    background: var(--surface, var(--card));
    color: var(--foreground);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.jset__kid span[b-yklv442w52] {
    font-size: 0.8rem;
    color: var(--muted-foreground);
}

.jset__kid.is-on[b-yklv442w52] {
    border-color: var(--primary);
    background: color-mix(in oklch, var(--primary) 12%, var(--background));
}

.jset__preview-phone[b-yklv442w52] {
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 0.25rem 0.75rem 0.75rem;
}

.jset__preview-phone summary[b-yklv442w52] {
    min-block-size: 2.75rem;
    display: flex;
    align-items: center;
    font-weight: 800;
    cursor: pointer;
}

.jset__list[b-yklv442w52] {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jset__item[b-yklv442w52] {
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    background: var(--surface, var(--card));
    overflow: hidden;
}

.jset__item.is-open[b-yklv442w52] {
    border-color: color-mix(in oklch, var(--primary) 60%, var(--border));
    box-shadow: 0 6px 18px color-mix(in oklch, var(--foreground) 8%, transparent);
}

.jset__row[b-yklv442w52] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    inline-size: 100%;
    min-block-size: 4rem;
    padding: 0.35rem 0.75rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.jset__row[b-yklv442w52]  .jset__thumb {
    --isl-size: 4.25rem;
    flex: none;
}

.jset__row-text[b-yklv442w52] {
    display: grid;
    gap: 0.1rem;
    flex: 1;
    min-inline-size: 0;
}

.jset__row-text span[b-yklv442w52] {
    color: var(--muted-foreground);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jset__num[b-yklv442w52] {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: color-mix(in oklch, var(--primary) 14%, transparent);
    color: var(--primary);
    font-weight: 900;
}

.jset__edit[b-yklv442w52] {
    display: grid;
    gap: 0.85rem;
    padding: 0.25rem 0.85rem 0.9rem;
}

.jset__pics[b-yklv442w52] {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.jset__pics legend[b-yklv442w52] {
    margin-block-end: 0.35rem;
    font-weight: 800;
    font-size: 0.9rem;
}

.jset__pics-row[b-yklv442w52] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
}

@media (min-width: 600px) {
    .jset__pics-row[b-yklv442w52] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.jset__pic[b-yklv442w52] {
    padding: 0.2rem;
    border: 2px solid transparent;
    border-radius: 0.9rem;
    background: color-mix(in oklch, oklch(0.8 0.08 220) 25%, var(--background));
    cursor: pointer;
}

.jset__pic[b-yklv442w52]  .jset__pic-art {
    --isl-size: 100%;
}

.jset__pic.is-on[b-yklv442w52] {
    border-color: var(--primary);
    background: color-mix(in oklch, var(--primary) 16%, var(--background));
}

.jset__pic:focus-visible[b-yklv442w52],
.jset__row:focus-visible[b-yklv442w52],
.jset__kid:focus-visible[b-yklv442w52] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.jset__fields[b-yklv442w52] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

/* Very narrow phones: one field per row, so each label has room. */
@media (max-width: 359px) {
    .jset__fields[b-yklv442w52] { grid-template-columns: minmax(0, 1fr); }
}

.jset__edit[b-yklv442w52],
.jset__item[b-yklv442w52] {
    min-inline-size: 0;
}

.jset__field[b-yklv442w52] {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
    font-size: 0.85rem;
    font-weight: 700;
}

.jset__field--wide[b-yklv442w52] {
    grid-column: 1 / -1;
}

/* Fields fill their column exactly: padding and border inside the width, so nothing spills past the card. */
.jset__field input[b-yklv442w52] {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-size: 1rem;
}

.jset__field input:focus-visible[b-yklv442w52] {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.jset__actions[b-yklv442w52] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.jset__remove[b-yklv442w52] {
    margin-inline-start: auto;
    color: var(--destructive, oklch(0.6 0.2 25));
}

.jset__add[b-yklv442w52] {
    justify-self: start;
}

.jset__save[b-yklv442w52] {
    position: sticky;
    bottom: 0;
    padding-block: 0.6rem;
    background: linear-gradient(transparent, var(--background) 35%);
}

.jset__save .ss-btn[b-yklv442w52] {
    inline-size: 100%;
    min-block-size: 3rem;
}

@media (min-width: 900px) {
    .jset__save .ss-btn[b-yklv442w52] {
        inline-size: auto;
        min-inline-size: 12rem;
    }
}

.jset__given h3[b-yklv442w52] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 900;
}

.jset__given ul[b-yklv442w52] {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jset__given li[b-yklv442w52] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
}

.jset__given li[b-yklv442w52]  .jset__given-art {
    --isl-size: 3.25rem;
    flex: none;
}

.jset__given-text[b-yklv442w52] {
    display: grid;
    flex: 1;
    min-inline-size: 0;
    font-size: 0.9rem;
}

.jset__given-text span[b-yklv442w52] {
    color: var(--muted-foreground);
}

.jset__delivered[b-yklv442w52] {
    color: oklch(0.6 0.15 150);
    font-weight: 800;
}

.jset__start[b-yklv442w52] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background: color-mix(in oklch, var(--primary) 10%, var(--background));
    font-size: 0.85rem;
    font-weight: 700;
}

/* The shop rewards to pick from: picture and name, scrolling sideways when there are many. */
.jset__shop[b-yklv442w52] {
    margin: 0;
    padding: 0;
    border: 0;
}

.jset__shop legend[b-yklv442w52] {
    margin-block-end: 0.35rem;
    font-weight: 700;
}

.jset__shop-empty[b-yklv442w52] {
    margin: 0;
    color: var(--muted-foreground);
    font-weight: 600;
}

.jset__shop-row[b-yklv442w52] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-block-end: 0.35rem;
    scroll-snap-type: x proximity;
}

.jset__shop-item[b-yklv442w52] {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    flex: none;
    inline-size: 5.5rem;
    padding: 0.35rem;
    border: 2px solid var(--border);
    border-radius: 0.9rem;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    cursor: pointer;
    scroll-snap-align: start;
}

.jset__shop-item.is-on[b-yklv442w52] {
    border-color: var(--primary);
    background: color-mix(in oklch, var(--primary) 14%, var(--background));
}

.jset__shop-item:focus-visible[b-yklv442w52] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.jset__shop-img[b-yklv442w52] {
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 0.7rem;
    object-fit: cover;
    background: color-mix(in oklch, var(--foreground) 6%, transparent);
}

.jset__shop-img--none[b-yklv442w52] {
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--muted-foreground);
}

.jset__shop-name[b-yklv442w52] {
    inline-size: 100%;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* /Components/Pages/NativeNotificationLab.razor.rz.scp.css */
.notification-lab[b-w8z62xls70] {
    width: min(100%, 68rem);
    margin-inline: auto;
    padding: 1.25rem 1rem 6rem;
    color: var(--foreground);
}

.notification-lab__header[b-w8z62xls70] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-block: 1rem 1.5rem;
}

.notification-lab__back[b-w8z62xls70] {
    width: fit-content;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
}

.notification-lab__back:hover[b-w8z62xls70],
.notification-lab__back:focus-visible[b-w8z62xls70] {
    color: var(--primary);
}

.notification-lab__context[b-w8z62xls70] {
    margin: 0 0 0.4rem;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 800;
}

.notification-lab h1[b-w8z62xls70] {
    margin: 0;
    max-width: 20ch;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.notification-lab__intro[b-w8z62xls70] {
    max-width: 65ch;
    margin: 0.75rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.975rem;
    line-height: 1.75;
    text-wrap: pretty;
}

.notification-lab__status[b-w8z62xls70] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: color-mix(in oklch, var(--surface) 92%, var(--primary) 8%);
}

.notification-lab__status-dot[b-w8z62xls70] {
    width: 0.7rem;
    height: 0.7rem;
    margin-top: 0.35rem;
    flex: 0 0 auto;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--muted-foreground);
    box-shadow: 0 0 0 1px var(--border);
}

.notification-lab__status-dot[data-ready="True"][b-w8z62xls70] {
    background: var(--success, #15803d);
}

.notification-lab__status strong[b-w8z62xls70],
.notification-lab__status p[b-w8z62xls70] {
    display: block;
    margin: 0;
}

.notification-lab__status p[b-w8z62xls70] {
    margin-top: 0.2rem;
    color: var(--muted-foreground);
    font-size: 0.825rem;
    line-height: 1.55;
}

.notification-lab__push-retry[b-w8z62xls70] {
    min-height: 2.75rem;
    margin-top: 0.75rem;
    padding-inline: 1rem;
    border: 1px solid var(--primary);
    border-radius: 0.7rem;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 800;
    cursor: pointer;
}

.notification-lab__push-retry:hover:not(:disabled)[b-w8z62xls70] {
    background: color-mix(in oklch, var(--surface) 82%, var(--primary) 18%);
}

.notification-lab__push-retry:disabled[b-w8z62xls70] {
    opacity: 0.6;
    cursor: wait;
}

.notification-lab__workspace[b-w8z62xls70] {
    display: grid;
    gap: 1rem;
}

.notification-lab form[b-w8z62xls70],
.notification-lab__checklist[b-w8z62xls70] {
    padding: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
}

.notification-lab form[b-w8z62xls70] {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.notification-lab__field[b-w8z62xls70] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.notification-lab__field label[b-w8z62xls70] {
    font-size: 0.875rem;
    font-weight: 800;
}

.notification-lab__input[b-w8z62xls70] {
    width: 100%;
    min-height: 3rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    outline: none;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    line-height: 1.5;
    transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.notification-lab__input:hover[b-w8z62xls70] {
    border-color: color-mix(in oklch, var(--primary) 45%, var(--border));
}

.notification-lab__input:focus[b-w8z62xls70] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 20%, transparent);
}

.notification-lab__textarea[b-w8z62xls70] {
    min-height: 7.5rem;
    resize: vertical;
}

.notification-lab__field-meta[b-w8z62xls70] {
    display: flex;
    min-height: 1.25rem;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.notification-lab__hint[b-w8z62xls70] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.notification-lab__submit[b-w8z62xls70],
.notification-lab__feedback button[b-w8z62xls70] {
    min-height: 3rem;
    border: 0;
    border-radius: 0.7rem;
    background: var(--primary);
    color: var(--primary-foreground);
    font: inherit;
    font-weight: 800;
    transition: filter 180ms ease-out, transform 180ms ease-out;
}

.notification-lab__submit:hover:not(:disabled)[b-w8z62xls70],
.notification-lab__feedback button:hover[b-w8z62xls70] {
    filter: brightness(1.06);
}

.notification-lab__submit:active:not(:disabled)[b-w8z62xls70],
.notification-lab__feedback button:active[b-w8z62xls70] {
    transform: translateY(1px);
}

.notification-lab__submit:focus-visible[b-w8z62xls70],
.notification-lab__feedback button:focus-visible[b-w8z62xls70],
.notification-lab__back:focus-visible[b-w8z62xls70] {
    outline: 3px solid color-mix(in oklch, var(--primary) 30%, transparent);
    outline-offset: 2px;
}

.notification-lab__submit:disabled[b-w8z62xls70] {
    opacity: 0.58;
}

.notification-lab__checklist h2[b-w8z62xls70] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 900;
}

.notification-lab__checklist ol[b-w8z62xls70] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.notification-lab__checklist li[b-w8z62xls70] {
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: start;
    gap: 0.65rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.65;
}

.notification-lab__checklist li span[b-w8z62xls70] {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in oklch, var(--primary) 14%, var(--surface));
    color: var(--foreground);
    font-weight: 900;
}

.notification-lab__warning[b-w8z62xls70] {
    margin: 1rem 0 0;
    padding: 0.8rem;
    border: 1px solid color-mix(in oklch, var(--warning, #a16207) 35%, var(--border));
    border-radius: 0.7rem;
    background: color-mix(in oklch, var(--warning, #a16207) 9%, var(--surface));
    color: var(--foreground);
    font-size: 0.8rem;
    line-height: 1.65;
}

.notification-lab__sound-note[b-w8z62xls70] {
    margin: 0.75rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.78rem;
    line-height: 1.65;
}

.notification-lab__feedback[b-w8z62xls70] {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--surface);
}

.notification-lab__feedback[data-kind="success"][b-w8z62xls70] {
    border-color: color-mix(in oklch, var(--success, #15803d) 40%, var(--border));
    background: color-mix(in oklch, var(--success, #15803d) 9%, var(--surface));
}

.notification-lab__feedback[data-kind="warning"][b-w8z62xls70] {
    border-color: color-mix(in oklch, var(--warning, #a16207) 40%, var(--border));
    background: color-mix(in oklch, var(--warning, #a16207) 9%, var(--surface));
}

.notification-lab__feedback[data-kind="error"][b-w8z62xls70] {
    border-color: color-mix(in oklch, var(--destructive) 40%, var(--border));
    background: color-mix(in oklch, var(--destructive) 8%, var(--surface));
}

.notification-lab__feedback strong[b-w8z62xls70],
.notification-lab__feedback p[b-w8z62xls70] {
    margin: 0;
}

.notification-lab__feedback p[b-w8z62xls70] {
    margin-top: 0.3rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.6;
}

.notification-lab__feedback button[b-w8z62xls70] {
    margin-top: 0.8rem;
    padding-inline: 1rem;
}

@media (min-width: 48rem) {
    .notification-lab[b-w8z62xls70] {
        padding: 2rem 1.5rem 6rem;
    }

    .notification-lab h1[b-w8z62xls70] {
        font-size: 2.5rem;
    }

    .notification-lab__workspace[b-w8z62xls70] {
        grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr);
        align-items: start;
    }

    .notification-lab form[b-w8z62xls70],
    .notification-lab__checklist[b-w8z62xls70] {
        padding: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-lab__input[b-w8z62xls70],
    .notification-lab__submit[b-w8z62xls70],
    .notification-lab__feedback button[b-w8z62xls70] {
        transition: none;
    }
}

.notification-lab__details[b-w8z62xls70] { margin-top: .75rem; }
.notification-lab__details summary[b-w8z62xls70] { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.notification-lab__steps[b-w8z62xls70] { margin: .25rem 0 0; display: grid; gap: .1rem; }
.notification-lab__step[b-w8z62xls70] { display: grid; gap: .1rem; padding: .55rem 0; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); min-width: 0; }
.notification-lab__step dt[b-w8z62xls70] { margin: 0; font-size: .78rem; opacity: .7; }
.notification-lab__step dd[b-w8z62xls70] { margin: 0; min-width: 0; overflow-wrap: anywhere; word-break: break-word; font-size: .9rem; line-height: 1.5; }
.notification-lab__step bdi[b-w8z62xls70] { unicode-bidi: plaintext; }
/* /Components/Pages/NotificationSoundsPanel.razor.rz.scp.css */
.sounds-panel[b-484qxxi4sb] { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent); }
.sounds-panel__head h2[b-484qxxi4sb] { margin: 0; font-size: 1.2rem; }
.sounds-panel__head p[b-484qxxi4sb] { margin: .35rem 0 1.25rem; color: var(--muted-foreground); font-size: .88rem; line-height: 1.6; }
.sounds-list[b-484qxxi4sb] { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.sound-row[b-484qxxi4sb] { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); }
.sound-row__text strong[b-484qxxi4sb] { display: block; font-size: .95rem; }
.sound-row__text small[b-484qxxi4sb] { display: block; margin-top: .15rem; color: var(--muted-foreground); font-size: .78rem; line-height: 1.5; }
.sound-row select[b-484qxxi4sb] { width: 100%; min-height: 44px; border: 1px solid color-mix(in srgb, var(--foreground) 18%, transparent); border-radius: .8rem; background: color-mix(in srgb, var(--background) 92%, var(--foreground)); color: var(--foreground); padding: .6rem .8rem; font: inherit; }
.sound-row select:focus-visible[b-484qxxi4sb] { outline: 2px solid var(--primary); outline-offset: 2px; }
.sound-row__actions[b-484qxxi4sb] { display: flex; flex-wrap: wrap; gap: .5rem; }
.sound-btn[b-484qxxi4sb] { min-height: 44px; border: 0; border-radius: .85rem; padding: .6rem .95rem; font: inherit; font-weight: 800; cursor: pointer; color: var(--foreground); background: color-mix(in srgb, var(--foreground) 8%, transparent); }
.sound-btn:focus-visible[b-484qxxi4sb] { outline: 2px solid var(--primary); outline-offset: 2px; }
.sound-btn:disabled[b-484qxxi4sb] { opacity: .55; cursor: not-allowed; }
.sound-btn--primary[b-484qxxi4sb] { color: var(--primary-foreground); background: var(--primary); }
.sounds-actions[b-484qxxi4sb] { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.sounds-note[b-484qxxi4sb] { margin: .85rem 0 0; color: var(--muted-foreground); font-size: .85rem; line-height: 1.6; }
.sounds-message[b-484qxxi4sb] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; padding: .8rem 1rem; border-radius: .8rem; line-height: 1.6; }
.sounds-message.is-success[b-484qxxi4sb] { color: #166534; background: #dcfce7; }
.sounds-message.is-error[b-484qxxi4sb] { color: #991b1b; background: #fee2e2; }

@media (max-width: 760px) {
    .sound-row[b-484qxxi4sb] { grid-template-columns: 1fr; }
    .sound-row__actions .sound-btn[b-484qxxi4sb] { flex: 1 1 8rem; }
}
.sounds-note--warn[b-484qxxi4sb] { padding: .6rem .8rem; border-radius: .75rem; background: color-mix(in oklab, #f59e0b 16%, transparent); color: inherit; }
/* /Components/Pages/ParentChallengesPanel.razor.rz.scp.css */
.pc[b-0ds09f09us] {
    display: grid;
    gap: 1rem;
    text-align: start;
    color: var(--foreground);
}

.pc__intro[b-0ds09f09us] {
    margin: 0;
    color: var(--muted-foreground);
    line-height: 1.75;
}

.pc__top[b-0ds09f09us] {
    display: flex;
    justify-content: flex-end;
}

.pc__group[b-0ds09f09us] {
    margin: 0.5rem 0 0;
    font-size: 1rem;
    font-weight: 800;
}

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

.pc__card[b-0ds09f09us] {
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--card, var(--surface));
}

.pc__card small[b-0ds09f09us] {
    color: var(--muted-foreground);
    line-height: 1.6;
}

.pc__card-head[b-0ds09f09us] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.6rem;
}

.pc__card-head strong[b-0ds09f09us] {
    font-size: 1.02rem;
    overflow-wrap: anywhere;
}

.pc__card-actions[b-0ds09f09us] {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.3rem;
}

.pc__badge[b-0ds09f09us] {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    border: 1px solid var(--border);
    background: var(--surface);
}

.pc__badge--live[b-0ds09f09us] { color: var(--primary); }
.pc__badge--draft[b-0ds09f09us] { color: var(--muted-foreground); }
.pc__badge--ended[b-0ds09f09us] { color: var(--muted-foreground); }

.pc__empty[b-0ds09f09us] {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    border-radius: 1.1rem;
    border: 1px dashed var(--border);
}

.pc__empty span[b-0ds09f09us] {
    font-size: 2.4rem;
}

.pc__empty h3[b-0ds09f09us] {
    margin: 0;
    font-weight: 800;
}

.pc__empty p[b-0ds09f09us] {
    margin: 0;
    color: var(--muted-foreground);
    line-height: 1.7;
}

.pc__btn[b-0ds09f09us] {
    min-height: 2.9rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.pc__btn--primary[b-0ds09f09us] {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: transparent;
}

.pc__btn:focus-visible[b-0ds09f09us] {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.pc__btn:disabled[b-0ds09f09us] {
    opacity: 0.6;
    cursor: default;
}

.pc__notice[b-0ds09f09us] {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    line-height: 1.7;
}
/* /Components/Pages/ParentMissionsPanel.razor.rz.scp.css */
.tpl-form[b-ip0ecdhmzl] {
    display: grid;
    gap: 0.9rem;
}

.tpl-error[b-ip0ecdhmzl] {
    margin: 0;
    padding: 0.55rem 0.75rem;
    border-radius: 0.7rem;
    background: color-mix(in oklch, var(--destructive) 12%, transparent);
    color: var(--destructive);
    font-size: 0.85rem;
}

.tpl-row[b-ip0ecdhmzl] {
    display: flex;
    gap: 0.75rem;
}

.tpl-row--title[b-ip0ecdhmzl] {
    align-items: flex-end;
}

.tpl-row--two > *[b-ip0ecdhmzl] {
    flex: 1 1 0;
    min-width: 0;
}

.tpl-field[b-ip0ecdhmzl] {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.tpl-field--grow[b-ip0ecdhmzl] {
    flex: 1 1 auto;
}

.tpl-field > span[b-ip0ecdhmzl],
.tpl-days > legend[b-ip0ecdhmzl],
.tpl-bonus > legend[b-ip0ecdhmzl] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.tpl-field input[b-ip0ecdhmzl],
.tpl-field select[b-ip0ecdhmzl],
.tpl-bonus__row input[b-ip0ecdhmzl] {
    width: 100%;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    font-size: 0.95rem;
}

.tpl-field input:focus-visible[b-ip0ecdhmzl],
.tpl-field select:focus-visible[b-ip0ecdhmzl],
.tpl-bonus__row input:focus-visible[b-ip0ecdhmzl],
.tpl-icon__button:focus-visible[b-ip0ecdhmzl],
.tpl-link:focus-visible[b-ip0ecdhmzl] {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* Icon: one square button that opens a grid, instead of a permanent scrolling picker. */
.tpl-icon[b-ip0ecdhmzl] {
    position: relative;
    flex: 0 0 auto;
}

.tpl-icon__button[b-ip0ecdhmzl] {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: var(--surface);
    font-size: 1.4rem;
    cursor: pointer;
}

.tpl-icon__popover[b-ip0ecdhmzl] {
    position: absolute;
    z-index: 5;
    inset-inline-start: 0;
    top: calc(100% + 0.35rem);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
    gap: 0.25rem;
    width: min(21rem, calc(100vw - 2.5rem));
    max-height: 13rem;
    padding: 0.5rem;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--background);
    box-shadow: 0 14px 34px color-mix(in oklch, var(--foreground) 18%, transparent);
}

.tpl-icon__choice[b-ip0ecdhmzl] {
    height: 2.5rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    font-size: 1.25rem;
    cursor: pointer;
}

.tpl-icon__choice:hover[b-ip0ecdhmzl] {
    background: color-mix(in oklch, var(--foreground) 8%, transparent);
}

.tpl-icon__choice.is-on[b-ip0ecdhmzl] {
    background: var(--primary);
}

.tpl-days[b-ip0ecdhmzl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.tpl-days > legend[b-ip0ecdhmzl] {
    margin-bottom: 0.3rem;
    padding: 0;
}

.tpl-day[b-ip0ecdhmzl] {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.85rem;
    cursor: pointer;
}

.tpl-day input[b-ip0ecdhmzl] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tpl-day.is-on[b-ip0ecdhmzl] {
    border-color: var(--primary);
    background: color-mix(in oklch, var(--primary) 14%, transparent);
    font-weight: 700;
}

.tpl-day:focus-within[b-ip0ecdhmzl] {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.tpl-bonus[b-ip0ecdhmzl] {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
}

.tpl-bonus > legend[b-ip0ecdhmzl] {
    padding-inline: 0.3rem;
}

.tpl-bonus small[b-ip0ecdhmzl] {
    font-weight: 500;
}

.tpl-hint[b-ip0ecdhmzl] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted-foreground);
}

.tpl-bonus__row[b-ip0ecdhmzl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5rem 2.75rem;
    gap: 0.4rem;
}

.tpl-bonus__remove[b-ip0ecdhmzl] {
    min-height: 2.75rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

.tpl-bonus__remove:hover[b-ip0ecdhmzl] {
    color: var(--destructive);
}

.tpl-bonus__footer[b-ip0ecdhmzl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tpl-link[b-ip0ecdhmzl] {
    min-height: 2.5rem;
    padding: 0 0.4rem;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tpl-total[b-ip0ecdhmzl] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.tpl-preview-label[b-ip0ecdhmzl] {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.tpl-btn[b-ip0ecdhmzl] {
    min-height: 2.75rem;
    padding: 0 1.2rem;
    border: 0;
    border-radius: 0.8rem;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.tpl-btn:disabled[b-ip0ecdhmzl] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tpl-btn--primary[b-ip0ecdhmzl] {
    flex: 1 1 auto;
    background: var(--primary);
    color: var(--primary-foreground);
}

.tpl-btn--ghost[b-ip0ecdhmzl] {
    background: color-mix(in oklch, var(--foreground) 8%, transparent);
    color: var(--foreground);
}

@media (min-width: 768px) {
    .tpl-btn--primary[b-ip0ecdhmzl] {
        flex: 0 0 auto;
        min-width: 9rem;
    }
}

/* Kind tabs: one segmented control, thumb-sized on phones */
.tpl-tabs[b-ip0ecdhmzl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.9rem;
    background: color-mix(in oklch, var(--foreground) 6%, transparent);
}

.tpl-tabs__tab[b-ip0ecdhmzl] {
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tpl-tabs__tab.is-on[b-ip0ecdhmzl] {
    border-color: var(--border);
    background: var(--surface);
    color: var(--foreground);
}

.tpl-tabs__tab:focus-visible[b-ip0ecdhmzl] {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* Study tab: the two places study content is made */
.tpl-study-links[b-ip0ecdhmzl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.6rem;
}

.tpl-study-link[b-ip0ecdhmzl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface);
    color: var(--foreground);
    text-decoration: none;
}

.tpl-study-link:hover[b-ip0ecdhmzl] {
    border-color: var(--primary);
}

.tpl-study-link__icon[b-ip0ecdhmzl] {
    font-size: 1.5rem;
}

.tpl-study-link span:last-child[b-ip0ecdhmzl] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.tpl-study-link small[b-ip0ecdhmzl] {
    font-size: 0.8rem;
    color: var(--muted-foreground);
}

/* Template list */
.tpl-header[b-ip0ecdhmzl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.tpl-header__title[b-ip0ecdhmzl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    margin-inline-end: auto;
    font-size: 1.35rem;
    font-weight: 800;
}

.tpl-header__count[b-ip0ecdhmzl] {
    display: inline-grid;
    place-items: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--foreground) 9%, transparent);
    font-size: 0.8rem;
    font-weight: 700;
}

.tpl-header__create[b-ip0ecdhmzl] {
    flex: 0 0 auto;
}

.tpl-search[b-ip0ecdhmzl] {
    order: 3;
    flex: 1 1 100%;
    min-height: 2.75rem;
    padding: 0 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
}

.tpl-filters[b-ip0ecdhmzl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tpl-filters select[b-ip0ecdhmzl] {
    min-height: 2.5rem;
    margin-inline-start: 0.35rem;
}

.tpl-bank[b-ip0ecdhmzl] {
    container-type: inline-size;
}

.tpl-group[b-ip0ecdhmzl] {
    grid-column: 1 / -1;
    margin: 0.4rem 0 0;
    font-weight: 800;
}

.tpl-grid[b-ip0ecdhmzl] {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-card {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 0.95rem;
    background: var(--surface);
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-card__main {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    min-height: 4rem;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-radius: 0.95rem;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-card__main:hover {
    background: color-mix(in oklch, var(--foreground) 4%, transparent);
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-card__main:focus-visible,
.tpl-bank[b-ip0ecdhmzl]  .tpl-act:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-card__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    background: color-mix(in oklch, var(--primary) 14%, transparent);
    font-size: 1.4rem;
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-card__body {
    display: grid;
    flex: 1;
    gap: 0.15rem;
    min-width: 0;
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 0.2rem;
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-chip {
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-foreground);
    font-size: 0.78rem;
    font-weight: 700;
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-chip--kid {
    background: var(--muted);
    color: var(--foreground);
}

.tpl-audience[b-ip0ecdhmzl] {
    display: grid;
    gap: 8px;
    border: 0;
    padding: 0;
    margin: 0;
}

.tpl-audience__kids[b-ip0ecdhmzl] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-card__title {
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-card__meta {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--muted-foreground);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-card__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.1rem;
    padding-inline: 0.2rem 0.35rem;
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-act:hover {
    background: color-mix(in oklch, var(--primary) 12%, transparent);
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-act--danger {
    color: var(--destructive);
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-act--danger:hover {
    background: color-mix(in oklch, var(--destructive) 12%, transparent);
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-act__icon {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-act__label {
    display: none;
}

.tpl-bank[b-ip0ecdhmzl]  .tpl-card__stars {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--primary);
}

@container (min-width: 40rem) {
    .tpl-grid[b-ip0ecdhmzl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }

    .tpl-bank[b-ip0ecdhmzl]  .tpl-card {
        flex-direction: column;
        align-items: stretch;
        min-height: 10.5rem;
    }

    .tpl-bank[b-ip0ecdhmzl]  .tpl-card__main {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        align-content: start;
        gap: 0.45rem 0.8rem;
        width: 100%;
        padding: 1rem 1rem 0.75rem;
    }

    .tpl-bank[b-ip0ecdhmzl]  .tpl-card__icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.55rem;
    }

    .tpl-bank[b-ip0ecdhmzl]  .tpl-card__body {
        gap: 0.3rem;
    }

    .tpl-bank[b-ip0ecdhmzl]  .tpl-card__title {
        font-size: 1.05rem;
    }

    .tpl-bank[b-ip0ecdhmzl]  .tpl-card__stars {
        padding-top: 0.35rem;
        font-size: 0.95rem;
    }

    .tpl-bank[b-ip0ecdhmzl]  .tpl-card__actions {
        justify-content: flex-end;
        gap: 0.35rem;
        margin-top: auto;
        padding: 0.35rem 0.65rem;
        border-top: 1px solid var(--border);
        background: color-mix(in oklch, var(--background) 55%, var(--surface));
    }
}

@media (min-width: 40rem) {
    .tpl-bank[b-ip0ecdhmzl]  .tpl-act {
        min-height: 2.5rem;
        padding: 0 0.7rem;
    }

    .tpl-bank[b-ip0ecdhmzl]  .tpl-act__label {
        display: inline;
    }
}

@container (min-width: 68rem) {
    .tpl-grid[b-ip0ecdhmzl] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tpl-empty[b-ip0ecdhmzl] {
    margin: 0;
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: 0.9rem;
    color: var(--muted-foreground);
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    .tpl-search[b-ip0ecdhmzl] {
        order: 0;
        flex: 0 1 18rem;
    }
}

.tpl-carry[b-ip0ecdhmzl] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: color-mix(in oklch, var(--surface) 80%, transparent);
    cursor: pointer;
}

.tpl-carry.is-on[b-ip0ecdhmzl] {
    border-color: var(--primary);
    background: color-mix(in oklch, var(--primary) 8%, var(--surface));
}

.tpl-carry input[b-ip0ecdhmzl] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    accent-color: var(--primary);
    flex: none;
}

.tpl-carry span[b-ip0ecdhmzl] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tpl-carry small[b-ip0ecdhmzl] {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}

.tpl-miss[b-ip0ecdhmzl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.tpl-miss legend[b-ip0ecdhmzl] {
    padding: 0 0 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.tpl-miss__amount[b-ip0ecdhmzl] {
    margin-inline-start: 1.85rem;
}
/* /Components/Pages/ParentReviewsPanel.razor.rz.scp.css */
.rv-header[b-sokjucvq26] {
    display: flex;
    align-items: center;
}

.rv-header__title[b-sokjucvq26] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
}

.rv-header__count[b-sokjucvq26] {
    display: inline-grid;
    place-items: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--foreground) 9%, transparent);
    font-size: 0.8rem;
    font-weight: 700;
}

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

.rv-list > li.is-target[b-sokjucvq26]  .review-card {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 28%, transparent);
}

@media (min-width: 768px) {
    .rv-list[b-sokjucvq26] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }
}

.rv-challenges[b-sokjucvq26] {
    display: grid;
    gap: 0.75rem;
}

.rv-challenges__title[b-sokjucvq26] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--foreground);
}
/* /Components/Pages/ParentShop.razor.rz.scp.css */
.shop-admin__head[b-bd9v0jp9yj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.shop-admin__head h1[b-bd9v0jp9yj] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
}

.shop-admin__head p[b-bd9v0jp9yj] {
    margin: 0.2rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.9rem;
}

/* ---- buttons ---- */
.shop-btn[b-bd9v0jp9yj] {
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.shop-btn--primary[b-bd9v0jp9yj],
.shop-grid[b-bd9v0jp9yj]  .shop-btn--primary {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground, #fff);
}

.shop-btn--quiet[b-bd9v0jp9yj],
.shop-grid[b-bd9v0jp9yj]  .shop-btn--quiet {
    background: transparent;
}

.shop-btn:disabled[b-bd9v0jp9yj],
.shop-grid[b-bd9v0jp9yj]  .shop-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.shop-btn:focus-visible[b-bd9v0jp9yj],
.shop-grid[b-bd9v0jp9yj]  .shop-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}

.shop-grid[b-bd9v0jp9yj]  .shop-card__art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- the rewards ---- */
.shop-grid[b-bd9v0jp9yj] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-grid[b-bd9v0jp9yj]  .shop-card {
    display: grid;
    grid-template-columns: minmax(6.5rem, 32%) minmax(0, 1fr);
    grid-template-areas:
        "art body"
        "actions actions";
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    background: var(--background);
}

.shop-grid[b-bd9v0jp9yj]  .shop-card.is-off {
    opacity: 0.6;
}

.shop-grid[b-bd9v0jp9yj]  .shop-card__art {
    grid-area: art;
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--primary) 10%, var(--background));
    font-size: 2rem;
}

.shop-grid[b-bd9v0jp9yj]  .shop-card__art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shop-grid[b-bd9v0jp9yj]  .shop-card__body {
    grid-area: body;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 0.3rem;
    padding: 0.8rem 0.9rem 0.4rem;
}

.shop-grid[b-bd9v0jp9yj]  .shop-card__desc {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.shop-grid[b-bd9v0jp9yj]  .shop-card__price {
    color: var(--primary);
    font-weight: 800;
}

.shop-filters[b-bd9v0jp9yj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.shop-filters button[b-bd9v0jp9yj] {
    padding: 0.35rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--foreground);
    font-weight: 700;
}

.shop-filters button.is-on[b-bd9v0jp9yj] {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: transparent;
}

.shop-grid[b-bd9v0jp9yj]  .shop-card__marks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.shop-grid[b-bd9v0jp9yj]  .shop-badge {
    justify-self: start;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 16%, var(--background));
    color: var(--foreground);
    font-size: 0.75rem;
    font-weight: 800;
}

.shop-grid[b-bd9v0jp9yj]  .shop-card__handoff {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
}

.shop-grid[b-bd9v0jp9yj]  .shop-card__handoff.is-hand {
    background: var(--primary);
    color: var(--primary-foreground);
}

.shop-grid[b-bd9v0jp9yj]  .shop-card__handoff.is-instant {
    border: 1px solid var(--border);
    color: var(--foreground);
}

.shop-form[b-bd9v0jp9yj]  .shop-modes {
    display: grid;
    gap: 0.35rem;
}

.shop-form[b-bd9v0jp9yj]  .shop-modes label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
}

.shop-form[b-bd9v0jp9yj]  .shop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-form[b-bd9v0jp9yj]  .shop-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 4px 6px 4px 12px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-foreground);
    font-size: 0.9rem;
    font-weight: 600;
}

.shop-form[b-bd9v0jp9yj]  .shop-field .shop-chip input[type="number"] {
    width: 4.25rem;
    min-height: 2rem;
    padding: 0 0.45rem;
    border: 1px solid color-mix(in srgb, var(--accent-foreground) 28%, transparent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    font-weight: 700;
}

.shop-form[b-bd9v0jp9yj]  .shop-chip__remove {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.shop-form[b-bd9v0jp9yj]  .shop-chip__remove:hover,
.shop-form[b-bd9v0jp9yj]  .shop-chip__remove:focus-visible {
    background: color-mix(in srgb, currentColor 14%, transparent);
    outline: none;
}

.shop-form[b-bd9v0jp9yj]  .shop-part {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.shop-form[b-bd9v0jp9yj]  .shop-part input[type="number"] {
    width: 5.5rem;
}

.shop-grid[b-bd9v0jp9yj]  .shop-card__body small {
    color: var(--muted-foreground);
}

.shop-grid[b-bd9v0jp9yj]  .shop-card__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem 0.8rem;
}

.shop-grid[b-bd9v0jp9yj]  .shop-card__actions .shop-btn {
    flex: 1;
    padding-inline: 0.6rem;
}

.shop-empty[b-bd9v0jp9yj] {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    border: 2px dashed var(--border);
    border-radius: 1.5rem;
    text-align: center;
}

.shop-empty > span[b-bd9v0jp9yj] {
    font-size: 3rem;
}

.shop-empty h2[b-bd9v0jp9yj],
.shop-empty p[b-bd9v0jp9yj] {
    margin: 0;
}

/* ---- the form ---- */
.shop-form[b-bd9v0jp9yj] {
    display: grid;
    gap: 1rem;
}

.shop-form[b-bd9v0jp9yj]  .shop-field {
    display: grid;
    gap: 0.35rem;
}

.shop-form[b-bd9v0jp9yj]  .shop-field > span {
    font-weight: 700;
}

.shop-form[b-bd9v0jp9yj]  .shop-field input[type="text"],
.shop-form[b-bd9v0jp9yj]  .shop-field input[type="number"],
.shop-form[b-bd9v0jp9yj]  .shop-field textarea {
    min-height: 2.75rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
}

.shop-form[b-bd9v0jp9yj]  .shop-field small,
.shop-form[b-bd9v0jp9yj]  .shop-form__hint {
    color: var(--muted-foreground);
    font-size: 0.85rem;
}

.shop-form[b-bd9v0jp9yj]  .shop-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
}

.shop-form[b-bd9v0jp9yj]  .shop-check input {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--primary);
}

.shop-form[b-bd9v0jp9yj]  .shop-form__error {
    margin: 0;
    color: var(--destructive, #c92a2a);
    font-weight: 700;
}

@media (min-width: 640px) {
    .shop-urgent__item[b-bd9v0jp9yj] {
            grid-template-columns: auto 1fr auto;
        }

    .shop-urgent__actions[b-bd9v0jp9yj] {
            grid-column: auto;
        }
}
/* /Components/Pages/PrayerActivationPanel.razor.rz.scp.css */
.pa[b-tj73cmxmmz] {
    display: grid;
    gap: 0.9rem;
}

.pa__more[b-tj73cmxmmz] {
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 0.25rem 0.75rem;
}

.pa__more[open][b-tj73cmxmmz] {
    padding-bottom: 0.85rem;
}

.pa__more > summary[b-tj73cmxmmz] {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    font-weight: 700;
    cursor: pointer;
}

.pa__more[open] > summary[b-tj73cmxmmz] {
    margin-bottom: 0.75rem;
}
/* /Components/Pages/PrayerSettingsPanel.razor.rz.scp.css */
.pt[b-y3dvx1jqq8] {
    display: grid;
    gap: 0.85rem;
}

.pt__adjust > summary[b-y3dvx1jqq8] {
    cursor: pointer;
    font-weight: 600;
    padding-block: 0.35rem;
}

.pt__adjust-grid[b-y3dvx1jqq8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.pt__table-wrap[b-y3dvx1jqq8] {
    overflow-x: auto;
    border-radius: 0.9rem;
    border: 1px solid var(--border);
}

.pt__table[b-y3dvx1jqq8] {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    min-width: 30rem;
}

.pt__table caption[b-y3dvx1jqq8] {
    text-align: start;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
}

.pt__table th[b-y3dvx1jqq8],
.pt__table td[b-y3dvx1jqq8] {
    padding: 0.45rem 0.6rem;
    text-align: center;
    border-top: 1px solid var(--border);
    white-space: nowrap;
}

.pt__table tbody th[b-y3dvx1jqq8] {
    text-align: start;
    font-weight: 600;
}
/* /Components/Pages/SelfProfile.razor.rz.scp.css */
.self-hero[b-90k803po18] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.self-hero__photo[b-90k803po18] {
    position: relative;
    flex-shrink: 0;
    width: 5.5rem;
    height: 5.5rem;
    padding: 0;
    border: 2px solid color-mix(in oklch, var(--primary) 45%, var(--border));
    border-radius: 50%;
    background: color-mix(in oklch, var(--primary) 14%, var(--surface));
    cursor: pointer;
}

.self-hero__photo img[b-90k803po18] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.self-hero__photo:disabled[b-90k803po18] {
    cursor: progress;
}

.self-hero__initial[b-90k803po18] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    font-weight: 700;
    color: var(--foreground);
}

.self-hero__badge[b-90k803po18] {
    position: absolute;
    inset-block-end: -0.1rem;
    inset-inline-end: -0.1rem;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--primary);
    color: var(--primary-foreground);
}

.self-hero__spinner[b-90k803po18] {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    animation: self-hero-spin-b-90k803po18 0.7s linear infinite;
}

@keyframes self-hero-spin-b-90k803po18 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .self-hero__spinner[b-90k803po18] { animation-duration: 2s; }
}

.self-hero__copy[b-90k803po18] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 0;
}

.self-hero__name[b-90k803po18] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.self-hero__role[b-90k803po18] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--muted-foreground);
}

.self-hero__change[b-90k803po18] {
    min-height: 2.75rem;
    margin-top: 0.15rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}

.self-hero__change:disabled[b-90k803po18] {
    opacity: 0.6;
    cursor: progress;
}
/* /Components/Pages/SystemAdmin.razor.rz.scp.css */
.admin-studio[b-x5io52vsqr] { max-width: 1240px; margin: 0 auto; padding: clamp(1rem, 2.5vw, 2.5rem); padding-bottom: 6rem; color: var(--foreground); }
.admin-hero[b-x5io52vsqr] { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.25rem 0 1.5rem; border-bottom: 1px solid var(--border); }
.admin-kicker[b-x5io52vsqr] { margin: 0 0 .35rem; color: var(--primary); font-size: .8rem; font-weight: 800; }
.admin-hero h1[b-x5io52vsqr] { margin: 0; font-size: 2rem; line-height: 1.2; max-width: 720px; text-wrap: balance; }
.admin-hero p:last-child[b-x5io52vsqr] { max-width: 65ch; margin: .55rem 0 0; color: var(--muted-foreground); font-size: .92rem; line-height: 1.6; }

.admin-status[b-x5io52vsqr] { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .75rem; min-width: 14rem; padding: .75rem 1.1rem; border: 1px solid color-mix(in srgb, var(--foreground) 18%, transparent); border-radius: 1rem; }
.admin-status strong[b-x5io52vsqr] { display: block; font-size: 1rem; }
.admin-status small[b-x5io52vsqr] { display: block; margin-top: .1rem; color: var(--muted-foreground); font-size: .8rem; }
.admin-status > span[b-x5io52vsqr] { flex: 0 0 auto; width: .7rem; height: .7rem; border-radius: 50%; background: #9ca3af; }
.admin-status.is-live[b-x5io52vsqr] { border-color: color-mix(in srgb, #22c55e 45%, transparent); }
.admin-status.is-live > span[b-x5io52vsqr] { background: #22c55e; box-shadow: 0 0 0 .32rem color-mix(in srgb, #22c55e 18%, transparent); }
.admin-status.is-scheduled[b-x5io52vsqr] { border-color: color-mix(in srgb, #f59e0b 50%, transparent); }
.admin-status.is-scheduled > span[b-x5io52vsqr] { background: #f59e0b; box-shadow: 0 0 0 .32rem color-mix(in srgb, #f59e0b 20%, transparent); }
.admin-status.is-ended > span[b-x5io52vsqr] { background: #ef4444; }

.admin-readiness[b-x5io52vsqr] { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.25rem; padding: .85rem 1.1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); }
.admin-readiness__count[b-x5io52vsqr] { flex: 0 0 auto; display: flex; align-items: baseline; gap: .4rem; }
.admin-readiness__count strong[b-x5io52vsqr] { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.admin-readiness__count span[b-x5io52vsqr] { color: var(--muted-foreground); font-size: .78rem; font-weight: 600; }
.admin-readiness p[b-x5io52vsqr] { flex: 1; margin: 0; color: var(--muted-foreground); font-size: .88rem; line-height: 1.6; }

.admin-grid[b-x5io52vsqr] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(1.5rem, 4vw, 4rem); padding-top: 1.5rem; align-items: start; }
.admin-controls[b-x5io52vsqr] { min-width: 0; }
.admin-section[b-x5io52vsqr] { padding: 0 0 2rem; margin-bottom: 2rem; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent); }
.admin-section:last-child[b-x5io52vsqr] { border-bottom: 0; margin-bottom: 0; }
.section-heading[b-x5io52vsqr] { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.section-heading h2[b-x5io52vsqr] { margin: 0; font-size: 1.2rem; }
.step-number[b-x5io52vsqr] { flex: 0 0 auto; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font-weight: 800; font-size: .95rem; }
.section-note[b-x5io52vsqr] { margin: .25rem 0 1rem; color: var(--muted-foreground); font-size: .88rem; line-height: 1.6; }

.admin-section label[b-x5io52vsqr] { display: flex; flex-direction: column; gap: .4rem; font-weight: 700; font-size: .9rem; }
.admin-section label small[b-x5io52vsqr], .field-hint[b-x5io52vsqr] { color: var(--muted-foreground); font-weight: 500; font-size: .78rem; line-height: 1.5; }
.admin-section input:not([type="radio"]):not([type="checkbox"])[b-x5io52vsqr], .admin-section select[b-x5io52vsqr], .admin-section textarea[b-x5io52vsqr] { width: 100%; border: 1px solid color-mix(in srgb, var(--foreground) 18%, transparent); border-radius: .8rem; background: color-mix(in srgb, var(--background) 92%, var(--foreground)); color: var(--foreground); padding: .75rem .85rem; outline: none; font: inherit; }
.admin-section input:focus-visible[b-x5io52vsqr], .admin-section select:focus-visible[b-x5io52vsqr], .admin-section textarea:focus-visible[b-x5io52vsqr] { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.field-row[b-x5io52vsqr] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }

.preset-grid[b-x5io52vsqr] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.preset-card[b-x5io52vsqr] { position: relative; overflow: hidden; display: block !important; border: 2px solid transparent; border-radius: 1rem; background: color-mix(in srgb, var(--foreground) 5%, var(--background)); cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.preset-card:hover[b-x5io52vsqr] { transform: translateY(-2px); }
.preset-card:focus-within[b-x5io52vsqr] { outline: 2px solid var(--primary); outline-offset: 2px; }
.preset-card.is-selected[b-x5io52vsqr] { border-color: var(--primary); }
.preset-card input[b-x5io52vsqr] { position: absolute; opacity: 0; pointer-events: none; }
.preset-card picture[b-x5io52vsqr], .preset-card img[b-x5io52vsqr] { display: block; width: 100%; }
.preset-card img[b-x5io52vsqr] { height: 118px; object-fit: cover; }
.preset-card > span[b-x5io52vsqr] { display: flex; align-items: center; gap: .45rem; padding: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset-card i[b-x5io52vsqr] { width: .65rem; height: .65rem; flex: 0 0 auto; border-radius: 50%; background: var(--swatch); }

.choice-group[b-x5io52vsqr] { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; padding: 0; border: 0; }
.choice-group legend[b-x5io52vsqr] { width: 100%; margin-bottom: .5rem; padding: 0; font-weight: 800; font-size: .9rem; }
.choice[b-x5io52vsqr] { flex-direction: row !important; align-items: center; gap: .6rem !important; padding: .7rem 1rem; border: 1px solid color-mix(in srgb, var(--foreground) 18%, transparent); border-radius: .85rem; cursor: pointer; font-weight: 700; min-height: 44px; }
.choice input[b-x5io52vsqr] { accent-color: var(--primary); width: 1.05rem; height: 1.05rem; }
.choice.is-chosen[b-x5io52vsqr] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.choice:focus-within[b-x5io52vsqr] { outline: 2px solid var(--primary); outline-offset: 2px; }
.when-field[b-x5io52vsqr] { max-width: 22rem; margin: -.25rem 0 1.25rem; }

.check-line[b-x5io52vsqr] { flex-direction: row !important; align-items: center; gap: .65rem !important; padding: .35rem 0; min-height: 44px; cursor: pointer; }
.check-line input[b-x5io52vsqr] { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); flex: 0 0 auto; }
.notify-fields[b-x5io52vsqr] { display: grid; gap: .85rem; margin: .25rem 0 1.25rem; padding-inline-start: 1.8rem; }
.notification-tools[b-x5io52vsqr] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--muted-foreground); }

.preview-rail[b-x5io52vsqr] { position: sticky; top: 1rem; }
.device-preview[b-x5io52vsqr] { position: relative; overflow: hidden; min-height: 500px; border-radius: 2rem; border: 8px solid color-mix(in srgb, var(--foreground) 88%, #000); background: #15101c; box-shadow: 0 22px 60px color-mix(in srgb, #000 28%, transparent); }
.device-preview picture[b-x5io52vsqr], .device-preview img[b-x5io52vsqr] { position: absolute; inset: 0; width: 100%; height: 100%; }
.device-preview img[b-x5io52vsqr] { object-fit: cover; }
.device-preview[b-x5io52vsqr]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,5,14,.05), rgba(8,5,14,.78)); }
.device-preview__bar[b-x5io52vsqr] { position: absolute; z-index: 2; inset: 1rem 1rem auto; display: flex; gap: .3rem; direction: ltr; }
.device-preview__bar span[b-x5io52vsqr] { width: .4rem; height: .4rem; border-radius: 50%; background: rgba(255,255,255,.8); }
.device-preview__content[b-x5io52vsqr] { position: absolute; z-index: 2; inset: auto 1.35rem 1.35rem; color: #fff; }
.device-preview__content span[b-x5io52vsqr] { display: block; color: rgba(255,255,255,.7); font-size: .8rem; }
.device-preview__content strong[b-x5io52vsqr] { display: block; margin-top: .25rem; font-size: 1.9rem; }
.device-preview__content p[b-x5io52vsqr] { margin: .4rem 0 0; color: rgba(255,255,255,.78); }
.release-meta[b-x5io52vsqr] { margin: 1rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.release-meta div[b-x5io52vsqr] { padding: .8rem; border: 1px solid var(--border); border-radius: .65rem; background: color-mix(in srgb, var(--foreground) 5%, transparent); }
.release-meta dt[b-x5io52vsqr] { color: var(--muted-foreground); font-size: .75rem; }
.release-meta dd[b-x5io52vsqr] { margin: .2rem 0 0; font-weight: 800; font-size: .85rem; }

.action-bar[b-x5io52vsqr] { display: grid; gap: .7rem; margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 1.1rem; background: var(--surface); }
.action-bar__buttons[b-x5io52vsqr] { display: flex; flex-wrap: wrap; gap: .6rem; }
.action-bar__buttons .button[b-x5io52vsqr] { flex: 1 1 8rem; }
.action-bar__buttons .button--primary[b-x5io52vsqr] { flex-basis: 100%; }
.action-bar__dirty[b-x5io52vsqr] { margin: 0; color: var(--primary); font-size: .85rem; font-weight: 700; }
.action-bar__problem[b-x5io52vsqr] { margin: 0; color: #b45309; font-size: .85rem; line-height: 1.5; }
.confirm-panel[b-x5io52vsqr] { display: grid; gap: .6rem; padding: .85rem 1rem; border: 1px solid var(--primary); border-radius: 1rem; background: var(--surface); }
.confirm-panel ul[b-x5io52vsqr] { margin: 0; padding-inline-start: 1.2rem; color: var(--muted-foreground); font-size: .88rem; line-height: 1.7; }

.button[b-x5io52vsqr] { min-height: 44px; border: 0; border-radius: .85rem; padding: .72rem 1rem; font-weight: 800; cursor: pointer; font: inherit; font-weight: 800; }
.button:focus-visible[b-x5io52vsqr] { outline: 2px solid var(--primary); outline-offset: 2px; }
.button:disabled[b-x5io52vsqr] { opacity: .55; cursor: not-allowed; }
.button--primary[b-x5io52vsqr] { color: var(--primary-foreground); background: var(--primary); }
.button--quiet[b-x5io52vsqr] { color: var(--foreground); background: color-mix(in srgb, var(--foreground) 8%, transparent); }
.button--danger[b-x5io52vsqr] { color: #fff; background: #b42318; }
.button--danger-outline[b-x5io52vsqr] { color: #f87171; background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f87171 70%, transparent); }

.admin-message[b-x5io52vsqr], .admin-loading[b-x5io52vsqr] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .85rem 1rem; border-radius: .8rem; line-height: 1.6; }
.admin-message.is-success[b-x5io52vsqr] { color: #166534; background: #dcfce7; }
.admin-message.is-error[b-x5io52vsqr] { color: #991b1b; background: #fee2e2; }
.admin-message.is-warning[b-x5io52vsqr] { color: #713f12; background: #fef3c7; }
.admin-message.is-info[b-x5io52vsqr] { color: #1e3a8a; background: #dbeafe; }
.admin-loading[b-x5io52vsqr] { justify-content: center; color: var(--muted-foreground); }
.admin-denied[b-x5io52vsqr] { max-width: 560px; margin: 12vh auto; padding: 2rem; text-align: center; }
.admin-denied > span[b-x5io52vsqr] { font-size: 3rem; }
.admin-denied h1[b-x5io52vsqr] { margin: 1rem 0 .5rem; }
.admin-denied p[b-x5io52vsqr] { color: var(--muted-foreground); }

@media (max-width: 980px) {
    .admin-grid[b-x5io52vsqr] { grid-template-columns: 1fr; }
    .preview-rail[b-x5io52vsqr] { position: static; display: grid; grid-template-columns: minmax(260px, 1fr) 1fr; gap: 1rem; align-items: start; }
    .device-preview[b-x5io52vsqr] { min-height: 390px; }
    .release-meta[b-x5io52vsqr] { margin: 0; }
    .preset-grid[b-x5io52vsqr] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .admin-studio[b-x5io52vsqr] { padding: 1rem 1rem 6rem; }
    .admin-hero[b-x5io52vsqr] { align-items: stretch; flex-direction: column; gap: 1rem; }
    .admin-hero h1[b-x5io52vsqr] { font-size: 1.65rem; }
    .admin-status[b-x5io52vsqr] { min-width: 0; }
    .admin-readiness[b-x5io52vsqr] { flex-wrap: wrap; }
    .admin-readiness p[b-x5io52vsqr] { flex-basis: 100%; order: 3; }
    .field-row[b-x5io52vsqr] { grid-template-columns: 1fr; }
    .preset-grid[b-x5io52vsqr] { grid-template-columns: repeat(2, 1fr); }
    .preset-card img[b-x5io52vsqr] { height: 104px; }
    .preview-rail[b-x5io52vsqr] { display: block; }
    .device-preview[b-x5io52vsqr] { min-height: 440px; }
    .release-meta[b-x5io52vsqr] { margin-top: 1rem; }
    .notify-fields[b-x5io52vsqr] { padding-inline-start: 0; }
    .choice[b-x5io52vsqr] { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) { .preset-card[b-x5io52vsqr] { transition: none; } }
/* /Components/Pages/TextRevealSettings.razor.rz.scp.css */
.trs[b-rw7q8ksbhf] {
    display: grid;
    gap: 0.75rem;
    padding-block-end: 1rem;
    margin-block-end: 1rem;
    border-block-end: 1px solid var(--border);
    min-width: 0;
}

.trs__title[b-rw7q8ksbhf] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.trs__preview[b-rw7q8ksbhf] {
    display: grid;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 1.1rem;
    border: 1px dashed var(--border);
    background: color-mix(in oklch, var(--primary) 6%, var(--card, var(--background)));
    min-width: 0;
}

.trs__preview-head[b-rw7q8ksbhf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.trs__preview-label[b-rw7q8ksbhf] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted-foreground);
}
/* /Components/Pages/WorshipTextBankPanel.razor.rz.scp.css */
.tb[b-xvu8nh5b7g] {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.tb__filters[b-xvu8nh5b7g] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .tb__filters[b-xvu8nh5b7g] {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: center;
    }
}

.tb textarea[b-xvu8nh5b7g] {
    width: 100%;
    min-height: 8rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    line-height: 1.8;
    resize: vertical;
}

.tb textarea:focus-visible[b-xvu8nh5b7g] {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.tb__choice[b-xvu8nh5b7g] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.92rem;
    cursor: pointer;
}

.tb__choice input[b-xvu8nh5b7g] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    flex: none;
    accent-color: var(--primary);
}

.tb__list[b-xvu8nh5b7g] {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb__row[b-xvu8nh5b7g] {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    min-width: 0;
}

.tb__head[b-xvu8nh5b7g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.tb__title[b-xvu8nh5b7g] {
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.tb__badge[b-xvu8nh5b7g] {
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
}

.tb__badge--off[b-xvu8nh5b7g] {
    opacity: 0.7;
}

/* Plain text as typed: line breaks kept, nothing interpreted. */
.tb__body[b-xvu8nh5b7g] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.8;
}

.tb__body--clamp[b-xvu8nh5b7g] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tb__usage[b-xvu8nh5b7g] {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.4rem;
}

.tb__preview > summary[b-xvu8nh5b7g] {
    cursor: pointer;
    font-weight: 600;
}

.tb__preview[b-xvu8nh5b7g] {
    display: grid;
    gap: 0.4rem;
}
/* /Components/Ui/AdventureTask.razor.rz.scp.css */
/* Reusable Child Task Card Component */
.adventure-task[b-xbj4lukbj2] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
    padding: 1rem;
    border-radius: 1.15rem;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--foreground);
    text-align: start;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--foreground) 4%, transparent);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    position: relative;
}

.adventure-task:hover[b-xbj4lukbj2] {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 8%, transparent);
}

/* 1. Identity Row */
.task-head[b-xbj4lukbj2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
}

.task-identity[b-xbj4lukbj2] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: start;
}

.task-identity:focus-visible[b-xbj4lukbj2],
.task-action-btn:focus-visible[b-xbj4lukbj2],
.task-expand-toggle:focus-visible[b-xbj4lukbj2],
.task-tag-chip--more:focus-visible[b-xbj4lukbj2] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.task-picture[b-xbj4lukbj2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
    flex-shrink: 0;
    margin-block-start: 0.1rem;
}

.task-picture.tone-mint[b-xbj4lukbj2] {
    background: color-mix(in srgb, var(--quest-mint, #10b981) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--quest-mint, #10b981) 28%, var(--border));
}

.task-picture.tone-peach[b-xbj4lukbj2] {
    background: color-mix(in srgb, var(--quest-peach, #f97316) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--quest-peach, #f97316) 28%, var(--border));
}

.task-picture.tone-lilac[b-xbj4lukbj2] {
    background: color-mix(in srgb, var(--quest-lilac, #8b5cf6) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--quest-lilac, #8b5cf6) 28%, var(--border));
}

.task-picture.tone-sky[b-xbj4lukbj2] {
    background: color-mix(in srgb, var(--quest-sky, #0284c7) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--quest-sky, #0284c7) 28%, var(--border));
}

.task-emoji[b-xbj4lukbj2] {
    font-size: 1.6rem;
    line-height: 1;
}

.task-titles[b-xbj4lukbj2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
    text-align: start;
}

.task-title[b-xbj4lukbj2] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--foreground);
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: start;
}

.task-type-badge[b-xbj4lukbj2] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--foreground);
    border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
}

.task-type-badge--kindness[b-xbj4lukbj2] {
    background: color-mix(in srgb, #10b981 14%, var(--surface));
    color: var(--foreground);
    border-color: color-mix(in srgb, #10b981 30%, var(--border));
}

.task-head-end[b-xbj4lukbj2] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.45rem;
    flex-shrink: 0;
    margin-inline-start: auto;
}

.task-points[b-xbj4lukbj2] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.task-pending-stars[b-xbj4lukbj2] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--primary) 85%, var(--foreground));
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
}

.task-check[b-xbj4lukbj2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    color: var(--muted-foreground);
    background: transparent;
}

.task-check--won[b-xbj4lukbj2] {
    background: var(--quest-success, var(--primary));
    border-color: transparent;
    color: var(--primary-foreground, #fff);
}

.task-action-pill[b-xbj4lukbj2],
.task-action-btn[b-xbj4lukbj2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding-inline: 0.85rem;
    padding-block: 0.3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 15%, var(--surface));
    border: 1.5px solid color-mix(in srgb, var(--primary) 45%, var(--border));
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.task-action-btn:hover[b-xbj4lukbj2],
.task-action-pill:hover[b-xbj4lukbj2] {
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.task-action-btn:active[b-xbj4lukbj2],
.task-action-pill:active[b-xbj4lukbj2] {
    transform: scale(0.97);
}

/* 2. Tags Row (Directly under title) */
.task-tags[b-xbj4lukbj2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-inline-start: 0;
    margin-block-start: 0.15rem;
}

.task-tag-chip[b-xbj4lukbj2] {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    color: var(--foreground);
    line-height: 1.3;
}

.task-tag-chip--more[b-xbj4lukbj2] {
    cursor: pointer;
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    font-weight: 800;
}

/* 3. Description Row (Directly under tags) */
.task-desc[b-xbj4lukbj2] {
    display: block;
    margin-inline-start: 0;
    margin-block-start: 0.2rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--muted-foreground);
    text-align: start;
    overflow-wrap: anywhere;
}

.task-desc.is-clamped[b-xbj4lukbj2] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-desc.is-expanded[b-xbj4lukbj2] {
    display: block;
}

/* 4. Parent Note */
.task-parent-note[b-xbj4lukbj2] {
    display: inline-block;
    margin-inline-start: 0;
    margin-block-start: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--quest-peach, #f97316) 18%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--quest-peach, #f97316) 40%, var(--border));
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--foreground);
}

/* 5. Footer Row: Timing on Start, Expand Toggle on End */
.task-footer[b-xbj4lukbj2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin-block-start: 0.35rem;
    padding-block-start: 0.5rem;
    border-block-start: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.task-timing[b-xbj4lukbj2] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    gap: 0.15rem 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted-foreground);
    min-height: 1.85rem;
    margin-inline-end: auto;
    text-align: start;
}

.task-review-status[b-xbj4lukbj2] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: color-mix(in srgb, var(--accent, #d97706) 80%, var(--foreground));
    font-weight: 700;
}

.task-submitted-time[b-xbj4lukbj2] {
    color: var(--muted-foreground);
    font-size: 0.78rem;
}

.task-expand-toggle[b-xbj4lukbj2] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    cursor: pointer;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    min-height: 1.85rem;
    margin-inline-start: auto;
    touch-action: manipulation;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.task-expand-toggle:hover[b-xbj4lukbj2] {
    background: color-mix(in srgb, var(--primary) 16%, var(--surface));
    border-color: var(--primary);
}

/* State highlights */
.adventure-task.state-waiting[b-xbj4lukbj2] {
    background: color-mix(in oklch, var(--quest-lilac, var(--accent)) 12%, var(--surface));
}

.adventure-task.state-won[b-xbj4lukbj2] {
    background: color-mix(in oklch, var(--quest-mint, var(--primary)) 12%, var(--surface));
}

.adventure-task.state-retry[b-xbj4lukbj2] {
    background: color-mix(in oklch, var(--quest-peach, var(--accent)) 22%, var(--surface));
}

.adventure-task.state-closed[b-xbj4lukbj2] {
    background: color-mix(in oklch, var(--muted-foreground) 6%, var(--surface));
}

.adventure-task.state-closed .task-title[b-xbj4lukbj2],
.adventure-task.state-closed .task-points[b-xbj4lukbj2] {
    opacity: 0.7;
}
/* /Components/Ui/AndroidAppCard.razor.rz.scp.css */
.android-app-card[b-q2aprgshmv] {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: color-mix(in oklch, var(--primary) 7%, var(--surface));
}

.android-app-card h2[b-q2aprgshmv] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.android-app-card p[b-q2aprgshmv] {
    margin: 0.2rem 0 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.android-app-card .android-app-card__meta[b-q2aprgshmv] {
    font-size: 0.8rem;
}

.android-app-card__button[b-q2aprgshmv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding-inline: 1.2rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    font-weight: 800;
    text-decoration: none;
}

.android-app-card__help[b-q2aprgshmv] {
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.android-app-card__help summary[b-q2aprgshmv] {
    cursor: pointer;
    font-weight: 700;
}

.android-app-card__help ol[b-q2aprgshmv] {
    margin: 0.4rem 0 0;
    padding-inline-start: 1.2rem;
}
/* /Components/Ui/AppModal.razor.rz.scp.css */
.app-modal[b-er0kmy4u6z] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    align-items: end;
    justify-items: center;
}

.app-modal__backdrop[b-er0kmy4u6z] {
    position: absolute;
    inset: 0;
    border: 0;
    background: color-mix(in oklch, var(--foreground) 55%, transparent);
    backdrop-filter: blur(2px);
    cursor: default;
}

.app-modal__panel[b-er0kmy4u6z] {
    position: relative;
    width: 100%;
    max-height: 92dvh;
    overflow-y: auto;
    padding: 0.6rem 1rem 1rem;
    border-radius: 1.6rem 1.6rem 0 0;
    border: 1px solid var(--border);
    border-block-end: 0;
    background: var(--background);
    color: var(--foreground);
    text-align: start;
    box-shadow: 0 -12px 40px color-mix(in oklch, var(--foreground) 22%, transparent);
    animation: app-modal-up-b-er0kmy4u6z 0.22s ease-out;
}

.app-modal__handle[b-er0kmy4u6z] {
    display: block;
    width: 2.8rem;
    height: 0.3rem;
    margin: 0 auto 0.6rem;
    border-radius: 999px;
    background: var(--border);
}

.app-modal__head[b-er0kmy4u6z] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-end: 0.9rem;
}

.app-modal__head h2[b-er0kmy4u6z] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.app-modal__head p[b-er0kmy4u6z] {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--muted-foreground);
}

.app-modal__close[b-er0kmy4u6z] {
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.8rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    cursor: pointer;
}

.app-modal__close:hover[b-er0kmy4u6z] {
    background: var(--muted);
}

.app-modal__foot[b-er0kmy4u6z] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 1rem;
    padding-block-start: 0.8rem;
    border-block-start: 1px solid var(--border);
}

/* tablet: a centred card */
@media (min-width: 640px) {
    .app-modal[b-er0kmy4u6z] {
        align-items: center;
        padding: 1.5rem;
    }

    .app-modal__panel[b-er0kmy4u6z] {
        max-width: 40rem;
        max-height: 88dvh;
        padding: 1.4rem;
        border-radius: 1.8rem;
        border-block-end: 1px solid var(--border);
        box-shadow: 0 24px 60px color-mix(in oklch, var(--foreground) 28%, transparent);
    }

    .app-modal__handle[b-er0kmy4u6z] {
        display: none;
    }
}

/* laptop and larger: the wide variant gets room for two panes */
@media (min-width: 1024px) {
    .app-modal--wide .app-modal__panel[b-er0kmy4u6z] {
        max-width: 62rem;
    }
}

@keyframes app-modal-up-b-er0kmy4u6z {
    from {
        transform: translateY(1.5rem);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-modal__panel[b-er0kmy4u6z] {
        animation: none;
    }
}
/* /Components/Ui/AppToastHost.razor.rz.scp.css */
/* Unified Toast & Notification System
   Strict Light/Dark theme support, CSS Logical Properties, and Mobile iPhone Capsule vs Desktop Elevated Glass
*/

.app-toast-container[b-vfn3jx8qtn] {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: all 0.25s ease;
}

/* Mobile & Small screens (< 640px): iPhone Dynamic Island & Floating Capsule at top center */
@media (max-width: 639.98px) {
    .app-toast-container[b-vfn3jx8qtn] {
        inset-inline: 1rem;
        inset-block-start: calc(0.75rem + env(safe-area-inset-top, 0px));
        align-items: center;
    }

    .app-toast-item[b-vfn3jx8qtn] {
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 0.65rem;
        width: min(24rem, 100%);
        padding: 0.55rem 0.85rem;
        border-radius: 999px; /* Pill Capsule */
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.12);
        animation: toast-slide-in-mobile-b-vfn3jx8qtn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* Light mode mobile capsule: deep dark glass for maximum contrast like iOS Island */
    :root:not(.dark) .app-toast-item[b-vfn3jx8qtn] {
        background: rgba(22, 24, 29, 0.92);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.18);
    }

    /* Dark mode mobile capsule */
    .dark .app-toast-item[b-vfn3jx8qtn] {
        background: rgba(15, 17, 21, 0.94);
        color: #f8fafc;
        border: 1px solid rgba(255, 255, 255, 0.14);
    }

    .app-toast-item__content[b-vfn3jx8qtn] {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .app-toast-item__title[b-vfn3jx8qtn] {
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-toast-item__desc[b-vfn3jx8qtn] {
        font-size: 0.75rem;
        opacity: 0.85;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Tablet & Desktop (>= 640px): Floating Elevated Glass Card at top-start */
@media (min-width: 640px) {
    .app-toast-container[b-vfn3jx8qtn] {
        inset-block-start: 1.25rem;
        inset-inline-end: 1.5rem;
        width: 24rem;
        max-width: calc(100vw - 3rem);
        align-items: stretch;
    }

    .app-toast-item[b-vfn3jx8qtn] {
        pointer-events: auto;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: start;
        gap: 0.75rem;
        padding: 0.9rem 1rem;
        border-radius: 1rem;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 14px 34px -6px rgba(0, 0, 0, 0.18), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--border);
        border-inline-start-width: 4px; /* Distinct status border on start edge */
        animation: toast-slide-in-desktop-b-vfn3jx8qtn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* Light mode desktop card */
    :root:not(.dark) .app-toast-item[b-vfn3jx8qtn] {
        background: color-mix(in srgb, var(--surface, #ffffff) 92%, transparent);
        color: var(--foreground, #1c1917);
    }

    /* Dark mode desktop card */
    .dark .app-toast-item[b-vfn3jx8qtn] {
        background: color-mix(in srgb, var(--surface, #1e1e24) 88%, transparent);
        color: var(--foreground, #f3f4f6);
    }

    .app-toast-item__content[b-vfn3jx8qtn] {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }

    .app-toast-item__title[b-vfn3jx8qtn] {
        font-size: 0.925rem;
        font-weight: 800;
        line-height: 1.3;
    }

    .app-toast-item__desc[b-vfn3jx8qtn] {
        font-size: 0.8rem;
        color: var(--muted-foreground);
        line-height: 1.4;
    }
}

/* Indicator & Levels (Colors and glowing indicators) */
.app-toast-item__indicator[b-vfn3jx8qtn] {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
}

/* Success Level */
.app-toast-item--success[b-vfn3jx8qtn] {
    border-inline-start-color: #10b981 !important;
}
.app-toast-item--success .app-toast-item__indicator[b-vfn3jx8qtn] {
    background: color-mix(in srgb, #10b981 22%, transparent);
    color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

/* Error Level */
.app-toast-item--error[b-vfn3jx8qtn] {
    border-inline-start-color: var(--destructive, #ef4444) !important;
}
.app-toast-item--error .app-toast-item__indicator[b-vfn3jx8qtn] {
    background: color-mix(in srgb, var(--destructive, #ef4444) 22%, transparent);
    color: var(--destructive, #ef4444);
    box-shadow: 0 0 12px color-mix(in srgb, var(--destructive, #ef4444) 40%, transparent);
}

/* Warning Level */
.app-toast-item--warning[b-vfn3jx8qtn] {
    border-inline-start-color: #f59e0b !important;
}
.app-toast-item--warning .app-toast-item__indicator[b-vfn3jx8qtn] {
    background: color-mix(in srgb, #f59e0b 22%, transparent);
    color: #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

/* Info Level */
.app-toast-item--info[b-vfn3jx8qtn] {
    border-inline-start-color: var(--primary, #3b82f6) !important;
}
.app-toast-item--info .app-toast-item__indicator[b-vfn3jx8qtn] {
    background: color-mix(in srgb, var(--primary, #3b82f6) 22%, transparent);
    color: var(--primary, #3b82f6);
    box-shadow: 0 0 12px color-mix(in srgb, var(--primary, #3b82f6) 40%, transparent);
}

/* Close button */
.app-toast-item__close[b-vfn3jx8qtn] {
    flex: none;
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.3rem;
    margin: -0.2rem -0.2rem -0.2rem 0;
    border-radius: 999px;
    color: currentColor;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.app-toast-item__close:hover[b-vfn3jx8qtn] {
    opacity: 1;
    transform: scale(1.1);
}

/* Keyframe animations */
@keyframes toast-slide-in-mobile-b-vfn3jx8qtn {
    0% {
        opacity: 0;
        transform: translateY(-1.2rem) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-slide-in-desktop-b-vfn3jx8qtn {
    0% {
        opacity: 0;
        transform: translateY(-0.8rem) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* /Components/Ui/BankQuote.razor.rz.scp.css */
.bq[b-zu11gs1xan] {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    /* Motion starts at the card's edge and never widens the page. */
    overflow-x: clip;
    overflow-clip-margin: 6px;
    --bq-badge: 700ms;
    --bq-slide: 750ms;
}

.bq__badge[b-zu11gs1xan] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

/* The icon "points" at the text: a small tail toward it, and a nudge down once the badge has stopped. */
.bq__icon[b-zu11gs1xan] {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 2px solid var(--primary);
    background: var(--card, var(--background));
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.bq__icon[b-zu11gs1xan]::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    left: 50%;
    translate: -50% -1px;
    border: 0.4rem solid transparent;
    border-block-start-color: var(--primary);
}

.bq__icon:focus-visible[b-zu11gs1xan] {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.bq__flash[b-zu11gs1xan] {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 800;
    font-size: 0.95rem;
    white-space: nowrap;
    transform-origin: center;
}

.bq__title[b-zu11gs1xan] {
    margin: 0;
    font-size: 1.05em;
    font-weight: 800;
    overflow-wrap: anywhere;
}

/* The full text sets the size; the typed copy sits on top of it, so nothing below jumps while it types. */
.bq__text[b-zu11gs1xan] {
    display: grid;
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.95;
}

.bq__ghost[b-zu11gs1xan],
.bq__typed[b-zu11gs1xan] {
    grid-area: 1 / 1;
    min-width: 0;
}

.bq--clamp .bq__text[b-zu11gs1xan] {
    max-height: calc(1.95em * 3);
    overflow: hidden;
}

@media (min-width: 768px) {
    .bq--clamp .bq__text[b-zu11gs1xan] {
        max-height: calc(1.95em * 5);
    }
}

.bq__source[b-zu11gs1xan] {
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
}

/* Letter by letter: the badge runs in from the far edge and brakes, the icon pops and points, then the text types. */
.bq.is-typing .bq__ghost[b-zu11gs1xan] {
    color: transparent;
}

.bq.is-typing .bq__typed[b-zu11gs1xan]::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-inline-start: 1px;
    vertical-align: text-bottom;
    background: var(--primary);
    animation: bq-caret-b-zu11gs1xan 0.7s steps(1) infinite;
}

.bq.is-typing .bq__source[b-zu11gs1xan] {
    opacity: 0;
}

.bq.is-playing .bq__flash[b-zu11gs1xan] {
    animation: bq-run-b-zu11gs1xan var(--bq-badge) cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.bq.is-playing .bq__icon[b-zu11gs1xan] {
    animation: bq-point-b-zu11gs1xan calc(var(--bq-badge) * 1.3) ease-out both;
}

.bq.is-playing .bq__title[b-zu11gs1xan] {
    animation: bq-fade-b-zu11gs1xan 300ms ease-out calc(var(--bq-badge) * 0.8) both;
}

/* Slide: the whole text comes in from the side; nothing else moves. */
.bq.is-sliding .bq__title[b-zu11gs1xan],
.bq.is-sliding .bq__text[b-zu11gs1xan],
.bq.is-sliding .bq__source[b-zu11gs1xan] {
    animation: bq-slide-b-zu11gs1xan var(--bq-slide) cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes bq-run-b-zu11gs1xan {
    0% {
        transform: translateX(-100vw) skewX(18deg);
        opacity: 0.4;
    }

    65% {
        transform: translateX(14px) skewX(-14deg);
        opacity: 1;
    }

    82% {
        transform: translateX(-4px) skewX(6deg);
    }

    100% {
        transform: none;
    }
}

@keyframes bq-point-b-zu11gs1xan {
    0%, 55% {
        transform: scale(0);
    }

    70% {
        transform: scale(1.15);
    }

    80% {
        transform: scale(1) translateY(0);
    }

    90% {
        transform: translateY(4px);
    }

    100% {
        transform: none;
    }
}

@keyframes bq-fade-b-zu11gs1xan {
    from {
        opacity: 0;
    }
}

@keyframes bq-slide-b-zu11gs1xan {
    from {
        transform: translateX(-100vw);
    }
}

@keyframes bq-caret-b-zu11gs1xan {
    50% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bq *[b-zu11gs1xan] {
        animation: none !important;
    }
}
/* /Components/Ui/BrowserNotificationsSwitch.razor.rz.scp.css */
.browser-push[b-2rcdpzspnk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.browser-push__title[b-2rcdpzspnk] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.browser-push__hint[b-2rcdpzspnk] {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.browser-push__btn[b-2rcdpzspnk] {
    flex: none;
    min-height: 2.75rem;
    padding-inline: 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.browser-push__btn--on[b-2rcdpzspnk] {
    border-color: transparent;
    background: var(--primary);
    color: var(--primary-foreground, #fff);
}

.browser-push__btn:disabled[b-2rcdpzspnk] {
    opacity: 0.6;
    cursor: progress;
}

.browser-push__message[b-2rcdpzspnk] {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    font-weight: 600;
}
/* /Components/Ui/ChallengeAnnouncementSheet.razor.rz.scp.css */
.challenge-announce[b-o0st4t8n72] {
    display: grid;
    gap: 0.9rem;
    text-align: start;
}

.challenge-announce__prize[b-o0st4t8n72] {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--accent-yellow, var(--primary)) 16%, var(--surface));
}

.challenge-announce__prize img[b-o0st4t8n72] {
    width: min(240px, 70vw);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 1rem;
}

.challenge-announce__prize strong[b-o0st4t8n72] {
    font-size: 1.05rem;
    color: var(--foreground);
    text-align: center;
}

.challenge-announce__gift[b-o0st4t8n72] {
    font-size: 4rem;
    line-height: 1;
}

.challenge-announce__title[b-o0st4t8n72] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--foreground);
}

.challenge-announce__facts[b-o0st4t8n72] {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--foreground);
    line-height: 1.7;
}

.challenge-announce__facts li[b-o0st4t8n72]::before {
    content: "✦";
    margin-inline-end: 0.5rem;
    color: var(--primary);
}

.challenge-announce__conditions[b-o0st4t8n72] {
    margin: 0;
    line-height: 1.8;
    color: var(--foreground);
    white-space: pre-line;
}

.challenge-announce__muted[b-o0st4t8n72] {
    margin: 0;
    font-size: 0.92rem;
    color: var(--muted-foreground);
    line-height: 1.7;
}

.challenge-announce__btn[b-o0st4t8n72] {
    min-height: 3rem;
    padding: 0.6rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
}

.challenge-announce__btn--quiet[b-o0st4t8n72] {
    background: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
}

.challenge-announce__btn:focus-visible[b-o0st4t8n72] {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}
/* /Components/Ui/ChallengeAnnouncePreview.razor.rz.scp.css */
.ann-preview[b-nzx5laueun] {
    display: grid;
    gap: 0.6rem;
    text-align: start;
    color: var(--foreground);
}

.ann-preview__kicker[b-nzx5laueun] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--muted-foreground);
}

.ann-preview__card[b-nzx5laueun] {
    display: grid;
    gap: 0.7rem;
    padding: 1rem;
    border-radius: 1.1rem;
    border: 1px solid var(--border);
    background: var(--card, var(--surface));
}

.ann-preview__prize[b-nzx5laueun] {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    padding: 0.7rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--accent-yellow, var(--primary)) 14%, var(--surface));
    text-align: center;
}

.ann-preview__prize img[b-nzx5laueun] {
    width: min(160px, 60vw);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.9rem;
}

.ann-preview__gift[b-nzx5laueun] {
    font-size: 3rem;
    line-height: 1;
}

.ann-preview h3[b-nzx5laueun] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.ann-preview ul[b-nzx5laueun] {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.7;
}

.ann-preview ul li[b-nzx5laueun]::before {
    content: "✦";
    margin-inline-end: 0.45rem;
    color: var(--primary);
}

.ann-preview__muted[b-nzx5laueun] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted-foreground);
    line-height: 1.6;
}
/* /Components/Ui/ChallengeLogForm.razor.rz.scp.css */
.challenge-log[b-ksigh6x1cf] {
    display: grid;
    gap: 0.9rem;
    text-align: start;
}

.challenge-log__lead[b-ksigh6x1cf] {
    margin: 0;
    color: var(--muted-foreground);
    line-height: 1.7;
}

.challenge-log__fields[b-ksigh6x1cf] {
    display: grid;
    gap: 0.8rem;
}

.challenge-log__field[b-ksigh6x1cf] {
    display: grid;
    gap: 0.35rem;
    font-weight: 700;
}

.challenge-log__field small[b-ksigh6x1cf] {
    font-weight: 400;
    color: var(--muted-foreground);
    line-height: 1.6;
}

.challenge-log__field input[b-ksigh6x1cf],
.challenge-log__field textarea[b-ksigh6x1cf] {
    width: 100%;
    min-height: 3rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.8rem;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-weight: 400;
    box-sizing: border-box;
}

.challenge-log__field input:disabled[b-ksigh6x1cf],
.challenge-log__field textarea:disabled[b-ksigh6x1cf] {
    opacity: 0.7;
}

.challenge-log__field input:focus-visible[b-ksigh6x1cf],
.challenge-log__field textarea:focus-visible[b-ksigh6x1cf] {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.challenge-log__sub[b-ksigh6x1cf] {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 800;
}

.challenge-log__error[b-ksigh6x1cf] {
    margin: 0;
    color: var(--destructive);
    font-weight: 700;
    line-height: 1.7;
}

.challenge-log__actions[b-ksigh6x1cf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
}

.challenge-log__save[b-ksigh6x1cf] {
    min-height: 3rem;
    padding: 0.6rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.challenge-log__save:disabled[b-ksigh6x1cf] {
    opacity: 0.6;
    cursor: default;
}

.challenge-log__saved[b-ksigh6x1cf] {
    color: var(--muted-foreground);
    font-weight: 700;
    line-height: 1.6;
}

.challenge-log__save[b-ksigh6x1cf] {
    min-height: 44px;
    min-width: 44px;
}
/* /Components/Ui/ChallengePhotoPicker.razor.rz.scp.css */
.challenge-photos[b-3m8gis8tt7] {
    display: grid;
    gap: 0.5rem;
}

.challenge-photos__grid[b-3m8gis8tt7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.challenge-photos__item[b-3m8gis8tt7] {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    display: grid;
    place-items: center;
}

.challenge-photos__item img[b-3m8gis8tt7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.challenge-photos__item--pending[b-3m8gis8tt7] {
    color: var(--muted-foreground);
    font-size: 0.85rem;
    text-align: center;
    padding: 0.25rem;
}

.challenge-photos__remove[b-3m8gis8tt7] {
    position: absolute;
    top: 0.25rem;
    inset-inline-end: 0.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--background) 85%, transparent);
    color: var(--foreground);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.challenge-photos__add[b-3m8gis8tt7] {
    display: contents;
}

.challenge-photos__add[hidden][b-3m8gis8tt7] {
    display: none;
}

.challenge-photos__btn[b-3m8gis8tt7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 3rem;
    padding: 0.5rem 1rem;
    border: 1px dashed color-mix(in srgb, var(--primary) 55%, var(--border));
    border-radius: 0.9rem;
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
    position: relative;
}

.challenge-photos__input[b-3m8gis8tt7] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.challenge-photos__btn:focus-within[b-3m8gis8tt7] {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.challenge-photos__help[b-3m8gis8tt7] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted-foreground);
    line-height: 1.6;
}

.challenge-photos__error[b-3m8gis8tt7] {
    margin: 0;
    color: var(--destructive);
    font-weight: 700;
}

.challenge-photos__remove[b-3m8gis8tt7], .challenge-photos__add[b-3m8gis8tt7], .challenge-photos label[b-3m8gis8tt7], .challenge-photos button[b-3m8gis8tt7] {
    min-height: 44px;
    min-width: 44px;
}
/* /Components/Ui/ChallengeReviewCard.razor.rz.scp.css */
.crv[b-mg6okeldiz] {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 1.1rem;
    border: 1px solid var(--border);
    background: var(--card, var(--surface));
    color: var(--foreground);
    text-align: start;
}

.crv__head[b-mg6okeldiz] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.crv__head strong[b-mg6okeldiz] {
    display: block;
    font-size: 1.05rem;
}

.crv__challenge[b-mg6okeldiz] {
    display: block;
    color: var(--muted-foreground);
    font-weight: 600;
}

.crv__badge[b-mg6okeldiz] {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    white-space: nowrap;
}

.crv__muted[b-mg6okeldiz],
.crv small[b-mg6okeldiz] {
    color: var(--muted-foreground);
    line-height: 1.6;
}

.crv__note[b-mg6okeldiz] {
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-inline-start: 4px solid var(--primary);
    background: var(--surface);
    border-radius: 0.6rem;
    line-height: 1.7;
}

.crv__block[b-mg6okeldiz] {
    display: grid;
    gap: 0.3rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
}

.crv__block h4[b-mg6okeldiz] {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
}

.crv__block p[b-mg6okeldiz] {
    margin: 0;
    line-height: 1.7;
}

.crv__calm[b-mg6okeldiz] {
    padding: 0.5rem 0.7rem;
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.crv__entries[b-mg6okeldiz] {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crv__entries li[b-mg6okeldiz] {
    display: grid;
    gap: 0.2rem;
    line-height: 1.6;
}

.crv__late[b-mg6okeldiz] {
    width: fit-content;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--accent-orange, var(--primary)) 18%, var(--surface));
}

.crv__late-accept[b-mg6okeldiz] {
    width: fit-content;
    min-height: 44px;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.crv__late-accept:disabled[b-mg6okeldiz] {
    opacity: 0.6;
    cursor: default;
}

.crv__photos[b-mg6okeldiz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.crv__photos img[b-mg6okeldiz] {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: 0.6rem;
}

.crv__form[b-mg6okeldiz] {
    display: grid;
    gap: 0.8rem;
}

.crv__decisions[b-mg6okeldiz] {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
}

.crv__decisions legend[b-mg6okeldiz] {
    padding-inline: 0.3rem;
    font-weight: 800;
}

.crv__option[b-mg6okeldiz],
.crv__check[b-mg6okeldiz] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    font-weight: 700;
    line-height: 1.5;
}

.crv__option input[b-mg6okeldiz],
.crv__check input[b-mg6okeldiz] {
    width: 1.3rem;
    height: 1.3rem;
    accent-color: var(--primary);
    flex: none;
}

.crv__stars[b-mg6okeldiz] {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr 6rem;
    align-items: end;
}

.crv__stars label[b-mg6okeldiz] {
    display: grid;
    gap: 0.35rem;
    font-weight: 700;
}

.crv__stars input[type="range"][b-mg6okeldiz] {
    width: 100%;
    accent-color: var(--primary);
}

.crv__stars input[type="number"][b-mg6okeldiz],
.crv__field textarea[b-mg6okeldiz] {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.7rem;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    box-sizing: border-box;
}

.crv__field[b-mg6okeldiz] {
    display: grid;
    gap: 0.35rem;
    font-weight: 700;
}

.crv__field small[b-mg6okeldiz] {
    font-weight: 400;
}

.crv__summary[b-mg6okeldiz] {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    font-weight: 800;
    line-height: 1.7;
}

.crv__error[b-mg6okeldiz] {
    margin: 0;
    color: var(--destructive);
    font-weight: 700;
}

.crv__submit[b-mg6okeldiz] {
    justify-self: start;
    min-height: 3rem;
    padding: 0.55rem 1.3rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.crv__submit:disabled[b-mg6okeldiz],
.crv input:disabled[b-mg6okeldiz],
.crv textarea:disabled[b-mg6okeldiz] {
    opacity: 0.6;
}

.crv__submit:focus-visible[b-mg6okeldiz],
.crv input:focus-visible[b-mg6okeldiz],
.crv textarea:focus-visible[b-mg6okeldiz],
.crv a:focus-visible[b-mg6okeldiz] {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}
/* /Components/Ui/ChallengeTodayCard.razor.rz.scp.css */
.challenge-today[b-7swy7m9dy9] {
    display: grid;
    gap: 0.75rem;
    margin-block: 1rem;
    text-align: start;
}

.challenge-today__title[b-7swy7m9dy9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--foreground);
}

.challenge-today__list[b-7swy7m9dy9] {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.challenge-today__card[b-7swy7m9dy9] {
    display: grid;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    border-radius: 1.1rem;
    background: var(--card, var(--surface));
    border: 1px solid var(--border);
    color: var(--foreground);
    text-decoration: none;
    min-height: 3rem;
}

.challenge-today__card:focus-visible[b-7swy7m9dy9] {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

.challenge-today__head[b-7swy7m9dy9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.6rem;
}

.challenge-today__name[b-7swy7m9dy9] {
    font-size: 1.02rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.challenge-today__chip[b-7swy7m9dy9] {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--surface);
    white-space: nowrap;
}

.challenge-today__chip--active[b-7swy7m9dy9] { color: var(--primary); }
.challenge-today__chip--waiting[b-7swy7m9dy9] { background: color-mix(in srgb, var(--accent-yellow, var(--primary)) 20%, var(--surface)); }
.challenge-today__chip--returned[b-7swy7m9dy9] { color: var(--accent-orange, var(--foreground)); }
.challenge-today__chip--accepted[b-7swy7m9dy9] { color: var(--success, var(--accent-green, var(--primary))); }
.challenge-today__chip--closed[b-7swy7m9dy9] { color: var(--muted-foreground); }

.challenge-today__prize[b-7swy7m9dy9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
}

.challenge-today__prize img[b-7swy7m9dy9] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6rem;
    object-fit: cover;
}

.challenge-today__gift[b-7swy7m9dy9] {
    font-size: 1.6rem;
}

.challenge-today__stars[b-7swy7m9dy9],
.challenge-today__days[b-7swy7m9dy9] {
    display: block;
    color: var(--muted-foreground);
    font-weight: 600;
    line-height: 1.6;
}

.challenge-today__goal[b-7swy7m9dy9] {
    display: grid;
    gap: 0.3rem;
}

.challenge-today__goal small[b-7swy7m9dy9] {
    color: var(--muted-foreground);
    line-height: 1.6;
}

.challenge-today__bar[b-7swy7m9dy9] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 0.75rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--primary) 16%, var(--surface));
    accent-color: var(--primary);
}

.challenge-today__bar[b-7swy7m9dy9]::-webkit-progress-bar {
    background: color-mix(in srgb, var(--primary) 16%, var(--surface));
    border-radius: 999px;
}

.challenge-today__bar[b-7swy7m9dy9]::-webkit-progress-value {
    background: var(--primary);
    border-radius: 999px;
}

.challenge-today__bar[b-7swy7m9dy9]::-moz-progress-bar {
    background: var(--primary);
    border-radius: 999px;
}
/* /Components/Ui/ChildAchievementsHistory.razor.rz.scp.css */
.history__chips[b-58qv93ee6f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}

.history__chip[b-58qv93ee6f] {
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.history__chip.is-on[b-58qv93ee6f] {
    border-color: var(--primary);
    background: color-mix(in oklch, var(--primary) 14%, var(--surface));
    font-weight: 800;
}

.history__hint[b-58qv93ee6f] {
    margin: 0.4rem 0;
    color: var(--muted-foreground);
    font-size: 0.9rem;
}

.history__days[b-58qv93ee6f] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.history__day-card[b-58qv93ee6f] {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    overflow: hidden;
}

.history__day[b-58qv93ee6f] {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    min-height: 2.9rem;
    margin: 0;
    padding: 0.6rem 0.85rem;
    border: 0;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    text-align: start;
    cursor: pointer;
}

.history__day:hover[b-58qv93ee6f] {
    background: color-mix(in oklch, var(--primary) 7%, transparent);
}

.history__day:focus-visible[b-58qv93ee6f] {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.history__day-title[b-58qv93ee6f] {
    flex: 1;
    min-width: 0;
}

.history__day-summary[b-58qv93ee6f] {
    flex: none;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--primary) 14%, var(--background));
    color: var(--foreground);
    font-size: 0.75rem;
    font-weight: 700;
}

.history__day-chevron[b-58qv93ee6f] {
    flex: none;
    display: inline-grid;
    place-items: center;
    color: var(--muted-foreground);
}

.history__list[b-58qv93ee6f] {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0.25rem 0.65rem 0.65rem;
    border-top: 1px solid var(--border);
    list-style: none;
}

.history__item[b-58qv93ee6f] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.45rem 0.65rem;
    border-radius: 0.8rem;
    border: 1px solid var(--border);
    background: var(--background);
}

.history__link[b-58qv93ee6f] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.history__title[b-58qv93ee6f] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history__status[b-58qv93ee6f] {
    flex: none;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.history__status--done[b-58qv93ee6f] {
    color: var(--quest-success, var(--primary));
    font-weight: 700;
}

.history__more[b-58qv93ee6f] {
    margin-top: 0.8rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: inherit;
    font: inherit;
    cursor: pointer;
}
/* /Components/Ui/ChildCompanionCard.razor.rz.scp.css */
.companion-card[b-66fo32jjkj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 1rem 1.1rem;
    text-align: center;
    border-radius: 1.6rem;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at 30% 12%, color-mix(in oklch, var(--quest-gold, var(--primary)) 28%, transparent), transparent 55%),
        linear-gradient(180deg, color-mix(in oklch, var(--quest-lilac, var(--accent)) 38%, var(--surface)), var(--surface));
}

.companion-card[b-66fo32jjkj]  .companion-card__mascot {
    width: 6.5rem;
}

.companion-card__line[b-66fo32jjkj] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.5;
}

.companion-card__ring[b-66fo32jjkj] {
    --pct: 0;
    display: grid;
    place-items: center;
    width: 6.2rem;
    height: 6.2rem;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--surface) 76%, transparent 78%),
        conic-gradient(var(--quest-success, var(--primary)) calc(var(--pct) * 1%), color-mix(in oklch, var(--muted-foreground) 18%, transparent) 0);
    transition: background 0.4s ease;
}

.companion-card__ring b[b-66fo32jjkj] {
    font-size: 1.5rem;
}

.companion-card__caption[b-66fo32jjkj] {
    margin: -0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.companion-card__today[b-66fo32jjkj] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.2rem 0 0;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    background: var(--surface);
    border: 1px solid color-mix(in oklch, var(--quest-gold, var(--primary)) 60%, var(--border));
}
/* /Components/Ui/ChildGiftCard.razor.rz.scp.css */
/* The card slides in from the screen's edge once when the page opens, then keeps nudging for the child's attention. */
.gift-stage[b-v7eafgvmrl] {
    overflow-x: clip;
}

.gift-card[b-v7eafgvmrl] {
    animation:
        gift-slide-in-b-v7eafgvmrl 2s cubic-bezier(0.22, 1, 0.36, 1) both,
        gift-nudge-b-v7eafgvmrl 4s ease-in-out 2s infinite;
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--primary) 7%, var(--card, var(--background)));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-block-end: 1.5rem;
}

.gift-card__header[b-v7eafgvmrl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gift-card__title[b-v7eafgvmrl] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--foreground);
}

.gift-card__new-chip[b-v7eafgvmrl] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-inline: 0.6rem;
    padding-block: 0.2rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    background: color-mix(in srgb, #f59e0b 20%, var(--background));
    color: #b45309;
    border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
}

:global(.dark) .gift-card__new-chip[b-v7eafgvmrl] {
    background: color-mix(in srgb, #fbbf24 22%, var(--background));
    color: #fde68a;
    border-color: color-mix(in srgb, #fbbf24 40%, transparent);
}

.gift-card__list[b-v7eafgvmrl] {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gift-card__item[b-v7eafgvmrl] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem 0.95rem;
    border-radius: 1.1rem;
    border: 1px solid var(--border);
    background: var(--background);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gift-card__item--unseen[b-v7eafgvmrl] {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    background: color-mix(in srgb, var(--primary) 6%, var(--background));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.gift-card__item--thanks[b-v7eafgvmrl] {
    border-inline-start: 4px solid var(--primary, #059669);
}

.gift-card__item-head[b-v7eafgvmrl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.gift-card__from-group[b-v7eafgvmrl] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.gift-card__icon[b-v7eafgvmrl] {
    font-size: 1.35rem;
    line-height: 1.2;
}

.gift-card__from[b-v7eafgvmrl] {
    margin: 0;
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--foreground);
}

.gift-card__thanks-badge[b-v7eafgvmrl] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding-inline: 0.45rem;
    padding-block: 0.1rem;
    border-radius: 999px;
    background: color-mix(in srgb, #0ea5e9 14%, var(--background));
    color: #0284c7;
    margin-block-start: 0.15rem;
}

:global(.dark) .gift-card__thanks-badge[b-v7eafgvmrl] {
    background: color-mix(in srgb, #38bdf8 20%, var(--background));
    color: #7dd3fc;
}

.gift-card__stars[b-v7eafgvmrl] {
    margin: 0;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--primary);
    padding-inline: 0.55rem;
    padding-block: 0.15rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, var(--background));
}

.gift-card__deed-title[b-v7eafgvmrl] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    color: var(--foreground);
}

.gift-card__deed-desc[b-v7eafgvmrl] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding-inline: 0.7rem;
    padding-block: 0.45rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--foreground) 4%, var(--background));
    border-inline-start: 3px solid color-mix(in srgb, var(--primary) 45%, var(--border));
}

.gift-card__deed-desc p[b-v7eafgvmrl] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--foreground);
    font-style: italic;
}

.gift-card__approval[b-v7eafgvmrl] {
    font-size: 0.8rem;
    color: var(--muted-foreground);
}

.gift-card__reason[b-v7eafgvmrl] {
    margin: 0.1rem 0;
    font-size: 0.92rem;
    color: var(--foreground);
}

.gift-card__footer[b-v7eafgvmrl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-start: 0.35rem;
    padding-block-start: 0.4rem;
    border-block-start: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.gift-card__date[b-v7eafgvmrl] {
    font-size: 0.8rem;
    color: var(--muted-foreground);
}

.gift-card__claim-btn[b-v7eafgvmrl] {
    animation: gift-claim-flip-b-v7eafgvmrl 3s ease-in-out infinite;
    transform-style: preserve-3d;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.35rem;
    padding-inline: 1rem;
    padding-block: 0.35rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 40%, transparent);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.gift-card__claim-btn:hover:not(:disabled)[b-v7eafgvmrl] {
    opacity: 0.92;
    transform: translateY(-1px);
}

.gift-card__claim-btn:focus-visible[b-v7eafgvmrl] {
    outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}

.gift-card__claim-btn:disabled[b-v7eafgvmrl] {
    opacity: 0.65;
    cursor: not-allowed;
}

.gift-card__received-badge[b-v7eafgvmrl] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #059669;
    background: color-mix(in srgb, #10b981 12%, var(--background));
    padding-inline: 0.55rem;
    padding-block: 0.15rem;
    border-radius: 999px;
}

:global(.dark) .gift-card__received-badge[b-v7eafgvmrl] {
    color: #6ee7b7;
    background: color-mix(in srgb, #34d399 15%, var(--background));
}

.gift-card__more[b-v7eafgvmrl] {
    justify-self: start;
    min-height: 2.5rem;
    padding-inline: 1rem;
    padding-block: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.gift-card__more:focus-visible[b-v7eafgvmrl] {
    outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}

/* Arrives from the edge the page starts from (the right in RTL, the left in LTR). */
@keyframes gift-slide-in-b-v7eafgvmrl {
    from {
        translate: 110vw 0;
        opacity: 0;
    }

    to {
        translate: 0 0;
        opacity: 1;
    }
}

/* Quiet for most of the cycle, then a short shake and a pulse. */
@keyframes gift-nudge-b-v7eafgvmrl {
    0%, 78%, 100% {
        transform: rotate(0deg) scale(1);
    }

    82% {
        transform: rotate(-1.5deg) scale(1.02);
    }

    86% {
        transform: rotate(1.5deg) scale(1.02);
    }

    90% {
        transform: rotate(-1deg) scale(1.01);
    }

    94% {
        transform: rotate(0deg) scale(1);
    }
}

/* Every 3 seconds the button turns over once and pulses. */
@keyframes gift-claim-flip-b-v7eafgvmrl {
    0%, 80%, 100% {
        transform: rotateX(0deg) scale(1);
    }

    88% {
        transform: rotateX(180deg) scale(1.08);
    }

    96% {
        transform: rotateX(360deg) scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gift-card[b-v7eafgvmrl],
    .gift-card__claim-btn[b-v7eafgvmrl] {
        animation: none;
    }
}
/* /Components/Ui/ChildGiftsPanel.razor.rz.scp.css */
.gifts-panel__send[b-tl83g4ji8r] {
    min-height: 2.75rem;
    padding-inline: 1.1rem;
    padding-block: 0.35rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.gifts-panel__send:hover[b-tl83g4ji8r] {
    opacity: 0.92;
    transform: translateY(-1px);
}

.gifts-panel__send:focus-visible[b-tl83g4ji8r] {
    outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}

.gifts-panel__list[b-tl83g4ji8r] {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gifts-panel__card[b-tl83g4ji8r] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 1.15rem;
    background: var(--card, var(--background));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gifts-panel__card--thanks[b-tl83g4ji8r] {
    border-inline-start: 4px solid var(--primary, #059669);
    background: color-mix(in srgb, var(--primary) 4%, var(--card, var(--background)));
}

.gifts-panel__card-head[b-tl83g4ji8r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.gifts-panel__head-side[b-tl83g4ji8r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gifts-panel__icon[b-tl83g4ji8r] {
    font-size: 1.35rem;
    line-height: 1.2;
}

.gifts-panel__tag[b-tl83g4ji8r] {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding-inline: 0.55rem;
    padding-block: 0.15rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--background));
    color: var(--primary);
}

.gifts-panel__tag--thanks[b-tl83g4ji8r] {
    background: color-mix(in srgb, #0ea5e9 14%, var(--background));
    color: #0284c7;
}

:global(.dark) .gifts-panel__tag--thanks[b-tl83g4ji8r] {
    background: color-mix(in srgb, #38bdf8 20%, var(--background));
    color: #7dd3fc;
}

.gifts-panel__stars-wrapper[b-tl83g4ji8r] {
    display: flex;
    align-items: center;
}

.gifts-panel__stars-label[b-tl83g4ji8r] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--foreground);
    background: color-mix(in srgb, var(--primary) 10%, var(--background));
    padding-inline: 0.65rem;
    padding-block: 0.2rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

.gifts-panel__stars[b-tl83g4ji8r] {
    flex: none;
    min-width: 2.4rem;
    padding-inline: 0.45rem;
    padding-block: 0.15rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 18%, var(--background));
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    text-align: center;
}

.gifts-panel__body[b-tl83g4ji8r] {
    display: grid;
    gap: 0.45rem;
}

.gifts-panel__thanks-title[b-tl83g4ji8r] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--foreground);
    line-height: 1.35;
}

.gifts-panel__deed-tagline[b-tl83g4ji8r] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--foreground);
}

.gifts-panel__deed-icon[b-tl83g4ji8r] {
    font-size: 1rem;
}

.gifts-panel__desc-container[b-tl83g4ji8r] {
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--foreground) 4%, var(--background));
    border-inline-start: 3px solid color-mix(in srgb, var(--primary) 40%, var(--border));
}

.gifts-panel__desc-quote[b-tl83g4ji8r] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--foreground);
}

.gifts-panel__reason[b-tl83g4ji8r] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.4;
}

.gifts-panel__meta-container[b-tl83g4ji8r] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-block-start: 0.35rem;
    padding-block-start: 0.45rem;
    border-block-start: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    font-size: 0.82rem;
}

.gifts-panel__meta-row[b-tl83g4ji8r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted-foreground);
    flex-wrap: wrap;
}

.gifts-panel__meta-icon[b-tl83g4ji8r] {
    font-size: 0.9rem;
}

.gifts-panel__seen-state[b-tl83g4ji8r] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 700;
    padding-inline: 0.55rem;
    padding-block: 0.15rem;
    border-radius: 999px;
}

.gifts-panel__seen-state--done[b-tl83g4ji8r] {
    background: color-mix(in srgb, #10b981 12%, var(--background));
    color: #059669;
    border: 1px solid color-mix(in srgb, #10b981 30%, transparent);
}

:global(.dark) .gifts-panel__seen-state--done[b-tl83g4ji8r] {
    background: color-mix(in srgb, #34d399 15%, var(--background));
    color: #6ee7b7;
    border-color: color-mix(in srgb, #34d399 35%, transparent);
}

.gifts-panel__seen-state--waiting[b-tl83g4ji8r] {
    background: color-mix(in srgb, #f59e0b 12%, var(--background));
    color: #d97706;
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
}

:global(.dark) .gifts-panel__seen-state--waiting[b-tl83g4ji8r] {
    background: color-mix(in srgb, #fbbf24 15%, var(--background));
    color: #fcd34d;
    border-color: color-mix(in srgb, #fbbf24 35%, transparent);
}
/* /Components/Ui/ChildHistoryTab.razor.rz.scp.css */
.child-profile__subtabs[b-zz4h2kvfjs] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.95rem;
    background: color-mix(in oklch, var(--muted-foreground) 6%, var(--surface));
    border: 1px solid var(--border);
}

.child-profile__subtab[b-zz4h2kvfjs] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0.35rem 0.15rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.child-profile__subtab.is-active[b-zz4h2kvfjs] {
    border-color: color-mix(in oklch, var(--primary) 45%, var(--border));
    background: color-mix(in oklch, var(--primary) 14%, var(--surface));
    color: var(--foreground);
    box-shadow: 0 1px 2px color-mix(in oklch, var(--foreground) 8%, transparent);
}

.child-profile__subtab-badge[b-zz4h2kvfjs] {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.7rem;
    font-weight: 800;
}
/* /Components/Ui/ChildPageHeading.razor.rz.scp.css */
/* Phone first: one tight row, title shrinking before the wallet does, so the page starts right away. */
.day-heading[b-vpvcv0e2r7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    margin-block-end: 0.5rem;
}

.day-profile[b-vpvcv0e2r7] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.day-profile__text[b-vpvcv0e2r7] {
    min-width: 0;
}

.day-profile h1[b-vpvcv0e2r7] {
    margin: 0;
    font-size: clamp(1.1rem, 5vw, 1.75rem);
    font-weight: 800;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--foreground);
}

.day-profile .greeting[b-vpvcv0e2r7] {
    margin: 0;
    font-size: clamp(0.72rem, 3vw, 0.88rem);
    line-height: 1.3;
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.day-heading__end[b-vpvcv0e2r7] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .day-heading[b-vpvcv0e2r7] {
        gap: 0.75rem;
        margin-block-end: 0.85rem;
    }
}
/* /Components/Ui/ChildRewardCard.razor.rz.scp.css */
.shop-item[b-06zc4indfn] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--tone, var(--primary)) 35%, var(--background));
    border-radius: 1.4rem;
    background: var(--background);
    box-shadow: 0 6px 0 color-mix(in srgb, var(--tone, var(--primary)) 22%, transparent);
    transition: transform 0.15s ease;
}

.shop-item:not(.is-locked):hover[b-06zc4indfn] {
    transform: translateY(-2px) rotate(-0.4deg);
}

.shop-item.tone-lilac[b-06zc4indfn] { --tone: #8b5cf6; }

.shop-item.tone-mint[b-06zc4indfn] { --tone: #20b486; }

.shop-item.tone-peach[b-06zc4indfn] { --tone: #f08a4b; }

.shop-item.tone-sky[b-06zc4indfn] { --tone: #3b9be8; }

/* 1. Header: Image frame + Title/Notes side-by-side */
.shop-item__header[b-06zc4indfn] {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 0.85rem 0;
    align-items: flex-start;
}

/* Fixed, reserved dimensions for the art/picture frame across ALL cards */
.shop-item__art[b-06zc4indfn] {
    position: relative;
    width: 7rem;
    height: 7rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--tone, var(--primary)) 16%, var(--surface));
    font-size: 3rem;
    overflow: hidden;
}

.shop-item__art img[b-06zc4indfn] {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.shop-item.is-locked .shop-item__art img[b-06zc4indfn],
.shop-item.is-locked .shop-item__art[b-06zc4indfn] {
    filter: grayscale(0.75);
}

.shop-item__lock[b-06zc4indfn] {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--foreground) 72%, transparent);
    font-size: 1.3rem;
    filter: none;
}

.shop-item__price[b-06zc4indfn] {
    position: absolute;
    inset-block-end: 0.35rem;
    inset-inline-start: 0.35rem;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    background: #ffd23f;
    color: #5c3b00;
    font-size: 0.88rem;
    font-weight: 900;
    filter: none;
    line-height: 1.2;
}

.shop-item__info[b-06zc4indfn] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.shop-item__title[b-06zc4indfn] {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.3;
    min-height: 2.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Reserved height for notes so "التفاصيل" aligns across cards */
.shop-item__notes[b-06zc4indfn] {
    margin: 0.2rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.78rem;
    line-height: 1.35;
    height: 2.1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-item__notes.is-open[b-06zc4indfn] {
    height: auto;
    -webkit-line-clamp: unset;
}

.shop-item__toggle[b-06zc4indfn] {
    align-self: flex-start;
    margin-top: 0.2rem;
    font-size: 0.76rem;
    font-weight: 700;
    background: none;
    border: 0;
    color: var(--primary);
    cursor: pointer;
    padding: 0;
}

/* 2. Divider line between top presentation and bottom terms (user's red line) */
.shop-item__divider[b-06zc4indfn] {
    height: 1px;
    margin-inline: 0.85rem;
    margin-block: 0.65rem 0.5rem;
    background: color-mix(in srgb, var(--tone, var(--primary)) 22%, var(--border));
}

/* 3. Meta section: centered, balanced, fills available space */
.shop-item__meta[b-06zc4indfn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: 0.85rem;
    gap: 0.35rem;
}

.shop-item__hint[b-06zc4indfn] {
    margin: 0;
    color: var(--foreground);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.35;
}

.shop-item__delivery-slot[b-06zc4indfn] {
    min-height: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-item__delivery[b-06zc4indfn] {
    color: var(--muted-foreground);
    font-size: 0.76rem;
    line-height: 1.3;
}

.shop-item__unlock-hint[b-06zc4indfn] {
    margin: 0;
    color: #b45309;
    font-size: 0.76rem;
    font-weight: 700;
}

.shop-item__tags[b-06zc4indfn] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin: 0;
}

.shop-item__tags i[b-06zc4indfn] {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone, var(--primary)) 16%, var(--surface));
    font-size: 0.72rem;
    font-style: normal;
}

/* 4. Action Button: Strict fixed height, pinned to bottom, never stretched */
.shop-item__buy[b-06zc4indfn] {
    height: 2.95rem;
    min-height: 2.95rem;
    max-height: 2.95rem;
    margin: 0.6rem 0.85rem 0.85rem;
    margin-block-start: auto;
    padding: 0 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--tone, var(--primary));
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tone, var(--primary)) 60%, #000);
    transition: transform 0.1s ease, filter 0.1s ease;
}

.shop-item__buy:disabled[b-06zc4indfn] {
    background: color-mix(in srgb, var(--foreground) 12%, var(--background));
    color: var(--muted-foreground);
    box-shadow: none;
    cursor: default;
}

.shop-item__buy:focus-visible[b-06zc4indfn],
.shop-got:focus-visible[b-06zc4indfn] {
    outline: 3px solid color-mix(in srgb, var(--tone, var(--primary)) 55%, transparent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .shop-item[b-06zc4indfn] {
        transition: none;
    }

    .shop-item:not(.is-locked):hover[b-06zc4indfn] {
        transform: none;
    }
}

/* ---- Interactive Eligibility Badges ---- */
.shop-item__badge-row[b-06zc4indfn] {
    margin-block: 0.35rem 0.2rem;
}

.shop-badge[b-06zc4indfn] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-block: 0.28rem;
    padding-inline: 0.65rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    text-decoration: none;
}

.shop-badge:hover[b-06zc4indfn] {
    transform: translateY(-1px);
}

.shop-badge--available[b-06zc4indfn] {
    background: color-mix(in srgb, #10b981 16%, var(--surface));
    color: color-mix(in srgb, #047857 85%, var(--foreground));
    border-color: color-mix(in srgb, #10b981 35%, var(--border));
}

.shop-badge--shortfall[b-06zc4indfn] {
    background: color-mix(in srgb, #f59e0b 16%, var(--surface));
    color: color-mix(in srgb, #b45309 85%, var(--foreground));
    border-color: color-mix(in srgb, #f59e0b 35%, var(--border));
}

.shop-badge--paused[b-06zc4indfn] {
    background: color-mix(in srgb, var(--muted) 70%, var(--surface));
    color: var(--muted-foreground);
    border-color: var(--border);
    cursor: default;
}
/* /Components/Ui/ChildRewardRequestsPanel.razor.rz.scp.css */
.rewards-panel__note[b-qos1ny8umh] {
    margin: 0 0 0.65rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.85rem;
    font-size: 0.85rem;
    background: color-mix(in oklch, var(--accent) 28%, var(--surface));
}

.rewards-panel__list[b-qos1ny8umh] {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rewards-panel__item[b-qos1ny8umh] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
}

.rewards-panel__thumb[b-qos1ny8umh] {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    object-fit: cover;
    border: 1px solid var(--border);
}

.rewards-panel__icon[b-qos1ny8umh] {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    background: color-mix(in oklch, var(--primary) 14%, var(--background));
    font-size: 1.3rem;
}

.rewards-panel__body[b-qos1ny8umh] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rewards-panel__head[b-qos1ny8umh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.rewards-panel__title[b-qos1ny8umh] {
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rewards-panel__price[b-qos1ny8umh] {
    flex: none;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--primary) 14%, var(--background));
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
}

.rewards-panel__meta[b-qos1ny8umh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.78rem;
    color: var(--muted-foreground);
}

.rewards-panel__badge[b-qos1ny8umh] {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
}

.rewards-panel__badge--requested[b-qos1ny8umh] {
    border-color: color-mix(in oklch, var(--primary) 45%, var(--border));
    background: color-mix(in oklch, var(--primary) 14%, var(--background));
}

.rewards-panel__badge--confirmed[b-qos1ny8umh] {
    color: var(--quest-success, var(--primary));
}

.rewards-panel__badge--cancelled[b-qos1ny8umh] {
    color: var(--muted-foreground);
}

.rewards-panel__avail[b-qos1ny8umh] {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: color-mix(in oklch, var(--muted-foreground) 12%, var(--background));
    color: var(--muted-foreground);
}

.rewards-panel__actions[b-qos1ny8umh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.25rem;
}

.rewards-panel__btn[b-qos1ny8umh] {
    appearance: none;
    min-height: 2.35rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.rewards-panel__btn--deliver[b-qos1ny8umh] {
    border-color: transparent;
    background: var(--primary);
    color: var(--primary-foreground);
}

.rewards-panel__btn:disabled[b-qos1ny8umh] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/Ui/ChildSeriesList.razor.rz.scp.css */
.child-profile__series-actions[b-x81ooq6pq2] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.45rem;
    min-width: 0;
}

.child-profile__series[b-x81ooq6pq2] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.child-profile__series h2[b-x81ooq6pq2],
.child-profile__series h3[b-x81ooq6pq2] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--foreground);
}

.child-profile__series ul[b-x81ooq6pq2] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.child-profile__series li[b-x81ooq6pq2] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.95rem;
    background: var(--surface);
    color: var(--foreground);
}

.child-profile__series li.is-paused[b-x81ooq6pq2] {
    background: color-mix(in oklch, var(--muted) 62%, var(--surface));
}

.child-profile__series-copy[b-x81ooq6pq2] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.child-profile__series-name[b-x81ooq6pq2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
    min-width: 0;
}

.child-profile__series-title[b-x81ooq6pq2] {
    min-width: 0;
    font-weight: 800;
    color: var(--foreground);
    overflow-wrap: anywhere;
}

.child-profile__series small[b-x81ooq6pq2] {
    color: var(--muted-foreground);
}

.child-profile__series-state[b-x81ooq6pq2] {
    flex: none;
    width: fit-content;
    margin-top: 0.1rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--primary) 16%, var(--surface));
    color: var(--foreground);
    font-size: 0.75rem;
    font-weight: 800;
}

.child-profile__series li.is-paused .child-profile__series-state[b-x81ooq6pq2] {
    background: color-mix(in oklch, var(--muted) 80%, var(--background));
    color: var(--muted-foreground);
}

.child-profile__series-actions[b-x81ooq6pq2]  .template-view,
.child-profile__series-toggle[b-x81ooq6pq2] {
    flex: 1 1 8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.25rem 0.85rem;
    cursor: pointer;
}

.child-profile__series-toggle:disabled[b-x81ooq6pq2] {
    opacity: 0.55;
    cursor: default;
}

@media (min-width: 600px) {
    .child-profile__series li[b-x81ooq6pq2] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .child-profile__series-copy[b-x81ooq6pq2] {
        flex: 1;
    }

    .child-profile__series-actions[b-x81ooq6pq2] {
        flex: none;
        flex-wrap: nowrap;
    }

    .child-profile__series-actions[b-x81ooq6pq2]  .template-view,
    .child-profile__series-toggle[b-x81ooq6pq2] {
        flex: none;
        min-width: 7.5rem;
    }
}

@media (min-width: 900px) {
    .child-profile__series li[b-x81ooq6pq2] {
        padding: 1rem 1.1rem;
    }
}

.child-profile__series-toggle:focus-visible[b-x81ooq6pq2] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* /Components/Ui/ChildSwitcher.razor.rz.scp.css */
.child-switch[b-5t4otm62tt] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.65rem;
    overflow-x: auto;
    padding: 0.15rem 0.15rem 0.35rem;
}

.child-switch__item[b-5t4otm62tt] {
    flex: none;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 999px;
    overflow: hidden;
    border: 2px solid transparent;
    scroll-margin-inline: 1rem;
}

.child-switch__item img[b-5t4otm62tt],
.child-switch__item span[b-5t4otm62tt] {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    object-fit: cover;
    border-radius: inherit;
    background: color-mix(in oklch, var(--primary) 18%, var(--surface));
    font-weight: 800;
}

.child-switch__item.is-current[b-5t4otm62tt] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 35%, transparent);
}
/* /Components/Ui/ChildWorkspaceHeader.razor.rz.scp.css */
.child-workspace__head[b-ytzggxab9u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
}

.child-workspace__photo[b-ytzggxab9u] {
    width: 3.75rem;
    height: 3.75rem;
    flex: none;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid color-mix(in oklch, var(--primary) 30%, var(--border));
}

.child-workspace__photo--initial[b-ytzggxab9u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklch, var(--primary) 18%, var(--surface));
    font-weight: 800;
}

.child-workspace__identity[b-ytzggxab9u] {
    min-width: 0;
    flex: 1;
}

.child-workspace__name[b-ytzggxab9u] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
}

.child-workspace__stars[b-ytzggxab9u] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0.1rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.85rem;
    font-weight: 800;
}

.child-workspace__star[b-ytzggxab9u] {
    color: var(--primary);
    font-size: 0.95rem;
    line-height: 1;
}

.child-workspace__pending[b-ytzggxab9u] {
    font-weight: 700;
}

.child-workspace__actions button[b-ytzggxab9u] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.child-workspace__actions[b-ytzggxab9u] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.child-workspace__actions button[b-ytzggxab9u] {
    min-height: 2.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
}

@media (max-width: 599px) {
    .child-workspace__gift[b-ytzggxab9u] {
        position: relative;
        width: 2.75rem;
        padding: 0;
        justify-content: center;
    }

    .child-workspace__gift span[b-ytzggxab9u] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}
/* /Components/Ui/CompanionCheer.razor.rz.scp.css */
.cheer[b-7zpxidi86t] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.cheer[b-7zpxidi86t]  .cheer__kid {
    --kid-size: 3.6rem;
    flex: none;
}

/* A speech bubble whose tail points back at the companion (the start side in RTL). */
.cheer__bubble[b-7zpxidi86t] {
    position: relative;
    margin: 0;
    padding: 0.55rem 0.85rem;
    border-radius: 1rem;
    border: 2px solid var(--primary);
    background: var(--card, var(--background));
    font-weight: 800;
    overflow-wrap: anywhere;
}

.cheer__bubble[b-7zpxidi86t]::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: -0.55rem;
    translate: 0 -50%;
    border: 0.45rem solid transparent;
    border-inline-end-color: var(--primary);
}

.cheer__choice[b-7zpxidi86t] {
    display: flex;
    gap: 0.5rem;
}

.cheer__pick[b-7zpxidi86t] {
    display: grid;
    justify-items: center;
    gap: 0.15rem;
    min-block-size: 2.75rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.9rem;
    border: 2px solid var(--border);
    background: var(--card, var(--background));
    color: var(--foreground);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.cheer__pick:focus-visible[b-7zpxidi86t] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.cheer__pick[b-7zpxidi86t]  .cheer__mini {
    --kid-size: 2.4rem;
}
/* /Components/Ui/DoneGoodSheet.razor.rz.scp.css */
.done-good[b-dzrbxvdih6] {
    display: grid;
    /* One column that can shrink: without it a long line or the photo tiles widen the form past the phone screen. */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    min-width: 0;
    max-width: 100%;
}

/* ::deep reaches the root of the photo uploader, which belongs to another component and carries no scope attribute. */
.done-good > *[b-dzrbxvdih6] {
    min-width: 0;
    max-width: 100%;
}

.done-good[b-dzrbxvdih6]  .evidence-uploader,
.done-good[b-dzrbxvdih6]  .evidence,
.done-good[b-dzrbxvdih6]  .evidence-grid {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.done-good[b-dzrbxvdih6]  p {
    overflow-wrap: anywhere;
}

.done-good__lead > span:last-child[b-dzrbxvdih6] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.done-good__field input[b-dzrbxvdih6],
.done-good__field textarea[b-dzrbxvdih6] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.done-good__lead[b-dzrbxvdih6] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--background));
    font-size: 0.92rem;
}

.done-good__lead > span:first-child[b-dzrbxvdih6] {
    font-size: 1.5rem;
    line-height: 1;
}

.done-good__check[b-dzrbxvdih6] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    font-weight: 800;
}

.done-good__check input[b-dzrbxvdih6] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--primary);
}

.done-good__quote[b-dzrbxvdih6] {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-inline-start: 3px solid var(--primary);
    border-radius: 0.8rem;
    background: var(--muted);
    color: var(--foreground);
}

.done-good__quote p[b-dzrbxvdih6] {
    margin: 0;
    font-weight: 800;
}

.done-good__quote footer[b-dzrbxvdih6] {
    margin-top: 0.25rem;
    color: var(--muted-foreground);
    font-size: 0.82rem;
}

.done-good__siblings[b-dzrbxvdih6] {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 0.45rem;
}

.done-good__siblings legend[b-dzrbxvdih6] {
    font-weight: 800;
    padding: 0;
}

.done-good__hint[b-dzrbxvdih6] {
    margin: 0;
    color: var(--muted-foreground);
}

.done-good__picks[b-dzrbxvdih6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.done-good__pick[b-dzrbxvdih6] {
    min-height: 2.5rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.done-good__pick.is-on[b-dzrbxvdih6] {
    border-color: transparent;
    background: var(--accent);
    color: var(--accent-foreground);
}

.done-good__field[b-dzrbxvdih6] {
    display: grid;
    gap: 0.35rem;
}

.done-good__field > span[b-dzrbxvdih6] {
    font-weight: 700;
}

.done-good__field input[b-dzrbxvdih6],
.done-good__field textarea[b-dzrbxvdih6] {
    min-height: 2.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
}

.done-good__field textarea[b-dzrbxvdih6] {
    min-height: 5rem;
    resize: vertical;
}

.done-good__count[b-dzrbxvdih6] {
    justify-self: end;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}

.done-good__error[b-dzrbxvdih6] {
    margin: 0;
    color: var(--destructive, #c92a2a);
    font-weight: 700;
}

.done-good__send[b-dzrbxvdih6] {
    min-height: 3rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.done-good__send:disabled[b-dzrbxvdih6] {
    opacity: 0.55;
    cursor: default;
}

.done-good[b-dzrbxvdih6]  .evidence-uploader {
    margin-top: 0.2rem;
}

.done-good__send:focus-visible[b-dzrbxvdih6],
.done-good__field input:focus-visible[b-dzrbxvdih6],
.done-good__field textarea:focus-visible[b-dzrbxvdih6] {
    outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}
/* /Components/Ui/EditChildProfileCard.razor.rz.scp.css */
.edit-child-card[b-wzm62q8omb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    box-shadow: 0 4px 16px -2px color-mix(in oklch, var(--foreground) 5%, transparent);
}

.edit-child-card--compact[b-wzm62q8omb] {
    padding: 0.85rem 0.5rem;
    border: none;
    background: transparent;
    box-shadow: none;
}

.edit-child-card__form[b-wzm62q8omb] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.edit-child-card__grid[b-wzm62q8omb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 0.85rem 1rem;
}

.edit-child-card__field[b-wzm62q8omb] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.edit-child-card__field--full[b-wzm62q8omb] {
    grid-column: 1 / -1;
}

.edit-child-card__label[b-wzm62q8omb] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.825rem;
    font-weight: 700;
    color: var(--foreground);
}

.edit-child-card__optional[b-wzm62q8omb] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground);
}

.edit-child-card__input[b-wzm62q8omb],
.edit-child-card__select[b-wzm62q8omb] {
    width: 100%;
    height: 2.6rem;
    padding: 0 0.75rem;
    border-radius: 0.65rem;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.edit-child-card__input:focus[b-wzm62q8omb],
.edit-child-card__select:focus[b-wzm62q8omb] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 25%, transparent);
}

.edit-child-card__input--ltr[b-wzm62q8omb] {
    direction: ltr;
    text-align: start;
}

.edit-child-card__actions[b-wzm62q8omb] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.edit-child-card__save-btn[b-wzm62q8omb] {
    appearance: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1.25rem;
    border-radius: 0.65rem;
    background: var(--primary);
    color: var(--primary-foreground);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px color-mix(in oklch, var(--primary) 30%, transparent);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.edit-child-card__save-btn:hover:not(:disabled)[b-wzm62q8omb] {
    transform: translateY(-1px);
    opacity: 0.95;
}

.edit-child-card__save-btn:disabled[b-wzm62q8omb] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
/* /Components/Ui/EmojiPanel.razor.rz.scp.css */
.emoji-panel[b-ngaqtm5sge] {
    display: grid;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem 0.5rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.emoji-panel__tabs[b-ngaqtm5sge] {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
}

.emoji-panel__tab[b-ngaqtm5sge] {
    flex: none;
    min-width: 2.5rem;
    min-height: 2.5rem;
    border: 0;
    border-radius: 0.8rem;
    background: transparent;
    font-size: 1.3rem;
    cursor: pointer;
}

.emoji-panel__tab.is-on[b-ngaqtm5sge] {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
}

.emoji-panel__grid[b-ngaqtm5sge] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
    gap: 0.1rem;
    max-height: 10.5rem;
    overflow-y: auto;
}

.emoji-panel__item[b-ngaqtm5sge] {
    min-height: 2.6rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
}

.emoji-panel__item:hover[b-ngaqtm5sge],
.emoji-panel__item:active[b-ngaqtm5sge] {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.emoji-panel__tab:focus-visible[b-ngaqtm5sge],
.emoji-panel__item:focus-visible[b-ngaqtm5sge] {
    outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: -2px;
}
/* /Components/Ui/FormSheet.razor.rz.scp.css */
.form-sheet[b-z2pofq5url] {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    /* The panel's column may not grow past the screen, whatever the form inside it holds. */
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
}

.form-sheet__backdrop[b-z2pofq5url] {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: color-mix(in oklch, var(--foreground) 42%, transparent);
}

.form-sheet__panel[b-z2pofq5url] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    box-sizing: border-box;
    max-height: 96dvh;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 1.25rem 1.25rem 0 0;
    background: var(--background);
    box-shadow: 0 -18px 40px color-mix(in oklch, var(--foreground) 16%, transparent);
    animation: form-sheet-in-b-z2pofq5url 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.form-sheet__header[b-z2pofq5url] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem 0.6rem 0.6rem;
    border-bottom: 1px solid var(--border);
}

.form-sheet__title[b-z2pofq5url] {
    margin: 0;
    padding-inline-start: 0.4rem;
    font-size: 1rem;
    font-weight: 800;
}

.form-sheet__close[b-z2pofq5url] {
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 0.8rem;
    background: transparent;
    color: var(--muted-foreground);
    font-size: 1rem;
    cursor: pointer;
}

.form-sheet__close:hover[b-z2pofq5url] {
    background: color-mix(in oklch, var(--foreground) 8%, transparent);
}

.form-sheet__body[b-z2pofq5url] {
    display: grid;
    /* One column that can shrink to the panel: a wide child (a textarea, the photo tiles) must not push the sheet past the screen edge. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    overflow: auto;
    overscroll-behavior: contain;
}

.form-sheet__main[b-z2pofq5url] {
    min-width: 0;
}

/* The preview only earns its space once the form has room beside it. */
.form-sheet__aside[b-z2pofq5url] {
    display: none;
}

.form-sheet__footer[b-z2pofq5url] {
    display: flex;
    gap: 0.6rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--background);
}

/* Page-sized: the whole screen on phones, so long lists and search have room. */
.form-sheet__panel.is-wide[b-z2pofq5url] {
    block-size: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
}

.form-sheet__panel.is-wide .form-sheet__body[b-z2pofq5url] {
    flex: 1;
    align-content: start;
    padding-block-end: calc(1rem + env(safe-area-inset-bottom));
}

.form-sheet__panel.is-wide .form-sheet__title[b-z2pofq5url] {
    font-size: 1.15rem;
}

@media (min-width: 768px) {
    .form-sheet[b-z2pofq5url] {
        align-items: center;
        justify-items: center;
        padding: 1.5rem;
    }

    .form-sheet__panel[b-z2pofq5url] {
        width: min(54rem, 100%);
        max-height: min(90dvh, 50rem);
        border-bottom: 1px solid var(--border);
        border-radius: 1.25rem;
        box-shadow: 0 24px 60px color-mix(in oklch, var(--foreground) 22%, transparent);
    }

    .form-sheet__panel.has-aside .form-sheet__body[b-z2pofq5url] {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        align-items: start;
        gap: 1.5rem;
    }

    .form-sheet__panel.is-wide[b-z2pofq5url] {
        width: min(76rem, 100%);
        block-size: min(94dvh, 64rem);
        max-height: none;
        border-radius: 1.25rem;
    }

    .form-sheet__panel.is-wide .form-sheet__body[b-z2pofq5url] {
        padding: 1.25rem 1.5rem 1.5rem;
    }

    .form-sheet__aside[b-z2pofq5url] {
        display: block;
        position: sticky;
        top: 0;
    }

    .form-sheet__footer[b-z2pofq5url] {
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .form-sheet__panel[b-z2pofq5url] {
        animation: none;
    }
}

@keyframes form-sheet-in-b-z2pofq5url {
    from { transform: translateY(24px); opacity: 0.6; }
    to { transform: none; opacity: 1; }
}
/* /Components/Ui/IslandArt.razor.rz.scp.css */
/* The journey's islands. Size with --isl-size; colours are tokens per island so a theme can tune them, and the flag
   takes the theme's primary colour. Every motion animates transform or opacity only; objects pivot on their own box
   (transform-box: fill-box) so a palm sways from its foot and a flag waves from its pole. */
.isl[b-32j33rdbnr] {
    --isl-size: 12rem;
    --isl-ink: oklch(0.3 0.05 262 / 0.55);
    --isl-sea1: oklch(0.74 0.11 215);
    --isl-sea2: oklch(0.55 0.13 240);
    --isl-shallow: oklch(0.86 0.09 190);
    --isl-foam: oklch(0.99 0.01 220);
    --isl-top1: oklch(0.82 0.16 138);
    --isl-top2: oklch(0.63 0.16 145);
    --isl-rim: oklch(0.88 0.08 85);
    --isl-cliff1: oklch(0.62 0.09 55);
    --isl-cliff2: oklch(0.42 0.07 45);
    --isl-rock1: oklch(0.66 0.03 260);
    --isl-rock2: oklch(0.45 0.04 265);
    --isl-glow1: color-mix(in oklch, var(--primary, oklch(0.7 0.18 50)) 70%, white);
    --isl-glow2: color-mix(in oklch, var(--primary, oklch(0.7 0.18 50)) 0%, transparent);
    --isl-fall1: oklch(0.9 0.07 210);
    --isl-fall2: oklch(0.9 0.07 210 / 0);
    --isl-leaf: oklch(0.7 0.17 142);
    --isl-leaf-dark: oklch(0.55 0.15 150);
    --isl-trunk: oklch(0.52 0.08 55);
    --isl-wood: oklch(0.55 0.1 55);
    --isl-flag: var(--primary, oklch(0.62 0.21 25));
    position: relative;
    display: block;
    inline-size: var(--isl-size);
    aspect-ratio: 200 / 170;
}

.isl--beach[b-32j33rdbnr] {
    --isl-top1: oklch(0.93 0.07 88);
    --isl-top2: oklch(0.84 0.1 78);
    --isl-rim: oklch(0.96 0.04 90);
    --isl-cliff1: oklch(0.74 0.1 65);
    --isl-cliff2: oklch(0.56 0.1 50);
}

.isl--mountain[b-32j33rdbnr] {
    --isl-top1: oklch(0.78 0.12 135);
    --isl-top2: oklch(0.6 0.11 140);
    --isl-cliff1: oklch(0.58 0.04 255);
    --isl-cliff2: oklch(0.4 0.04 260);
}

.isl--castle[b-32j33rdbnr] {
    --isl-top1: oklch(0.84 0.16 132);
    --isl-top2: oklch(0.66 0.16 140);
}

.isl--oasis[b-32j33rdbnr] {
    --isl-sea1: oklch(0.78 0.1 200);
    --isl-top1: oklch(0.9 0.11 80);
    --isl-top2: oklch(0.76 0.13 65);
    --isl-rim: oklch(0.93 0.07 85);
    --isl-cliff1: oklch(0.7 0.13 55);
    --isl-cliff2: oklch(0.52 0.12 40);
}

.isl--snow[b-32j33rdbnr] {
    --isl-sea1: oklch(0.7 0.09 230);
    --isl-sea2: oklch(0.5 0.11 255);
    --isl-shallow: oklch(0.88 0.05 220);
    --isl-top1: oklch(0.99 0.01 230);
    --isl-top2: oklch(0.88 0.04 235);
    --isl-rim: oklch(0.95 0.03 225);
    --isl-cliff1: oklch(0.82 0.07 225);
    --isl-cliff2: oklch(0.6 0.1 240);
}

.isl--volcano[b-32j33rdbnr] {
    --isl-sea1: oklch(0.66 0.1 225);
    --isl-top1: oklch(0.6 0.12 140);
    --isl-top2: oklch(0.44 0.08 120);
    --isl-rim: oklch(0.5 0.04 60);
    --isl-cliff1: oklch(0.42 0.04 40);
    --isl-cliff2: oklch(0.28 0.03 30);
    --isl-rock1: oklch(0.44 0.04 30);
    --isl-rock2: oklch(0.26 0.03 20);
    --isl-glow1: oklch(0.82 0.18 60);
    --isl-glow2: oklch(0.7 0.2 35 / 0);
}

.isl--sky[b-32j33rdbnr] {
    --isl-top1: oklch(0.86 0.15 135);
    --isl-top2: oklch(0.68 0.16 150);
    --isl-cliff1: oklch(0.66 0.09 290);
    --isl-cliff2: oklch(0.44 0.11 285);
}

.isl[b-32j33rdbnr]  .isl__svg,
.isl[b-32j33rdbnr]  .isl__veil {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
}

.isl[b-32j33rdbnr]  .isl__veil {
    pointer-events: none;
}

/* Only animated pieces pivot on their own box; elements placed with a transform attribute keep SVG's own origin. */
.isl[b-32j33rdbnr]  .isl__ripple, .isl[b-32j33rdbnr]  .isl__glint, .isl[b-32j33rdbnr]  .isl__crystal, .isl[b-32j33rdbnr]  .isl__mist, .isl[b-32j33rdbnr]  .isl__pennant, .isl[b-32j33rdbnr]  .isl__sun, .isl[b-32j33rdbnr]  .isl__aurora, .isl[b-32j33rdbnr]  .isl__scarf-tail,
.isl[b-32j33rdbnr]  .isl__lava-glow, .isl[b-32j33rdbnr]  .isl__smoke, .isl[b-32j33rdbnr]  .isl__flame, .isl[b-32j33rdbnr]  .isl__cloth, .isl[b-32j33rdbnr]  .isl__cloth-star, .isl[b-32j33rdbnr]  .isl__flag, .isl[b-32j33rdbnr]  .isl__sway, .isl[b-32j33rdbnr]  .isl__gull,
.isl[b-32j33rdbnr]  .isl__flutter, .isl[b-32j33rdbnr]  .isl__twinkle, .isl[b-32j33rdbnr]  .isl__wiggle, .isl[b-32j33rdbnr]  .isl__halo, .isl[b-32j33rdbnr]  .isl__lock, .isl[b-32j33rdbnr]  .isl__ring, .isl[b-32j33rdbnr]  .isl__spark, .isl[b-32j33rdbnr]  .isl__fog {
    transform-box: fill-box;
}

/* Gradient stops. */
.isl[b-32j33rdbnr]  .isl__stop-sea1 { stop-color: var(--isl-sea1); }
.isl[b-32j33rdbnr]  .isl__stop-sea2 { stop-color: var(--isl-sea2); }
.isl[b-32j33rdbnr]  .isl__stop-top1 { stop-color: var(--isl-top1); }
.isl[b-32j33rdbnr]  .isl__stop-top2 { stop-color: var(--isl-top2); }
.isl[b-32j33rdbnr]  .isl__stop-cliff1 { stop-color: var(--isl-cliff1); }
.isl[b-32j33rdbnr]  .isl__stop-cliff2 { stop-color: var(--isl-cliff2); }
.isl[b-32j33rdbnr]  .isl__stop-rock1 { stop-color: var(--isl-rock1); }
.isl[b-32j33rdbnr]  .isl__stop-rock2 { stop-color: var(--isl-rock2); }
.isl[b-32j33rdbnr]  .isl__stop-glow1 { stop-color: var(--isl-glow1); }
.isl[b-32j33rdbnr]  .isl__stop-glow2 { stop-color: var(--isl-glow2); }
.isl[b-32j33rdbnr]  .isl__stop-fall1 { stop-color: var(--isl-fall1); }
.isl[b-32j33rdbnr]  .isl__stop-fall2 { stop-color: var(--isl-fall2); }

/* Shared pieces. */
.isl[b-32j33rdbnr]  .isl__o { stroke: var(--isl-ink); stroke-width: 1.4; stroke-linejoin: round; }
.isl[b-32j33rdbnr]  .isl__shallow { fill: var(--isl-shallow); opacity: 0.75; }
.isl[b-32j33rdbnr]  .isl__sink { fill: oklch(0.25 0.06 250 / 0.28); }
.isl[b-32j33rdbnr]  .isl__ripple { fill: none; stroke: var(--isl-foam); stroke-width: 1.4; opacity: 0; transform-origin: 50% 50%; animation: isl-ripple-b-32j33rdbnr 4s ease-out infinite; }
.isl[b-32j33rdbnr]  .isl__glint { stroke: var(--isl-foam); stroke-width: 1.6; stroke-linecap: round; animation: isl-glint-b-32j33rdbnr 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
.isl[b-32j33rdbnr]  .isl__foam { fill: none; stroke: var(--isl-foam); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 26 4 3 4; opacity: 0.8; animation: isl-foam-b-32j33rdbnr 5s linear infinite; }
.isl[b-32j33rdbnr]  .isl__rim { fill: var(--isl-rim); }
.isl[b-32j33rdbnr]  .isl__strata { fill: none; stroke: oklch(0.2 0.03 40 / 0.22); stroke-width: 1.6; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__shine { fill: oklch(1 0 0 / 0.22); }
.isl[b-32j33rdbnr]  .isl__crystal { fill: oklch(0.85 0.12 300); animation: isl-glint-b-32j33rdbnr 2.6s ease-in-out infinite; transform-origin: 50% 50%; }
.isl[b-32j33rdbnr]  .isl__line { fill: none; stroke: oklch(0.6 0.08 70 / 0.5); stroke-width: 1.3; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__halo { opacity: 0; }

.isl[b-32j33rdbnr]  .isl__trunk { fill: none; stroke: var(--isl-trunk); stroke-width: 5.5; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__trunk-ring { fill: none; stroke: oklch(0.38 0.06 50 / 0.6); stroke-width: 1.2; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__leaf { fill: var(--isl-leaf); }
.isl[b-32j33rdbnr]  .isl__leaf-dark { fill: var(--isl-leaf-dark); }
.isl[b-32j33rdbnr]  .isl__leaf-light { fill: oklch(0.86 0.15 135 / 0.7); }
.isl[b-32j33rdbnr]  .isl__coconut { fill: oklch(0.45 0.08 55); stroke-width: 1; }
.isl[b-32j33rdbnr]  .isl__wood { fill: var(--isl-wood); }
.isl[b-32j33rdbnr]  .isl__wood-dark { fill: oklch(0.42 0.08 45); }
.isl[b-32j33rdbnr]  .isl__pine { fill: oklch(0.52 0.12 160); }
.isl[b-32j33rdbnr]  .isl__snow-tip { fill: oklch(0.99 0.01 230); }
.isl[b-32j33rdbnr]  .isl__apple { fill: oklch(0.62 0.22 28); }
.isl[b-32j33rdbnr]  .isl__cloud { fill: oklch(0.99 0.005 250); }
.isl[b-32j33rdbnr]  .isl__gull { fill: none; stroke: oklch(0.3 0.03 260); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.isl[b-32j33rdbnr]  .isl__pole-thin { stroke: oklch(0.35 0.03 260); stroke-width: 1.4; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__umbrella { fill: oklch(0.7 0.19 25); }
.isl[b-32j33rdbnr]  .isl__umbrella-stripe { fill: oklch(0.98 0.02 90); }
.isl[b-32j33rdbnr]  .isl__towel { fill: oklch(0.75 0.13 230); }
.isl[b-32j33rdbnr]  .isl__coin, .isl[b-32j33rdbnr]  .isl__gold { fill: oklch(0.86 0.17 90); stroke: oklch(0.6 0.12 70); stroke-width: 0.8; }
.isl[b-32j33rdbnr]  .isl__sparkle { fill: oklch(0.95 0.14 95); }
.isl[b-32j33rdbnr]  .isl__starfish { fill: oklch(0.72 0.16 25); stroke: oklch(0.5 0.14 25); stroke-width: 0.8; }
.isl[b-32j33rdbnr]  .isl__shell { fill: oklch(0.9 0.06 20); stroke: oklch(0.65 0.08 20); stroke-width: 1; }

.isl[b-32j33rdbnr]  .isl__stem { fill: oklch(0.95 0.03 85); }
.isl[b-32j33rdbnr]  .isl__cap { fill: oklch(0.62 0.21 27); }
.isl[b-32j33rdbnr]  .isl__dot { fill: oklch(0.98 0 0); }
.isl[b-32j33rdbnr]  .isl__wing--a { fill: oklch(0.78 0.16 340); }
.isl[b-32j33rdbnr]  .isl__wing--b { fill: oklch(0.86 0.16 85); }
.isl[b-32j33rdbnr]  .isl__body-line { fill: oklch(0.3 0.03 260); }
.isl[b-32j33rdbnr]  .isl__firefly { fill: oklch(0.95 0.18 105); }
.isl[b-32j33rdbnr]  .isl__stalk { stroke: oklch(0.5 0.12 145); stroke-width: 1.2; }
.isl[b-32j33rdbnr]  .isl__petal--0 { fill: oklch(0.8 0.15 350); }
.isl[b-32j33rdbnr]  .isl__petal--1 { fill: oklch(0.9 0.15 95); }
.isl[b-32j33rdbnr]  .isl__petal--2 { fill: oklch(0.75 0.13 280); }
.isl[b-32j33rdbnr]  .isl__petal-heart { fill: oklch(0.85 0.17 80); }
.isl[b-32j33rdbnr]  .isl__flower-pink { fill: oklch(0.8 0.15 350); }

.isl[b-32j33rdbnr]  .isl__shade { fill: oklch(0.2 0.03 260 / 0.22); }
.isl[b-32j33rdbnr]  .isl__snowcap { fill: oklch(0.99 0.01 230); stroke: var(--isl-ink); stroke-width: 1; stroke-linejoin: round; }
.isl[b-32j33rdbnr]  .isl__fall-water { fill: none; stroke: oklch(0.86 0.08 210); stroke-width: 7; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__fall-flow { fill: none; stroke: oklch(0.99 0.01 220); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 6 8; animation: isl-flow-b-32j33rdbnr 0.7s linear infinite; }
.isl[b-32j33rdbnr]  .isl__mist { fill: oklch(0.99 0.01 220 / 0.85); transform-origin: 50% 50%; animation: isl-puff-b-32j33rdbnr 1.8s ease-in-out infinite; }
.isl[b-32j33rdbnr]  .isl__eagle { fill: oklch(0.38 0.06 50); }

.isl[b-32j33rdbnr]  .isl__rainbow path { fill: none; stroke-width: 6; }
.isl[b-32j33rdbnr]  .isl__rainbow { opacity: 0.55; animation: isl-shimmer-b-32j33rdbnr 5s ease-in-out infinite; }
.isl[b-32j33rdbnr]  .isl__road { fill: none; stroke: oklch(0.86 0.07 80); stroke-width: 7; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__stone { fill: oklch(0.88 0.03 80); }
.isl[b-32j33rdbnr]  .isl__stone-dark { fill: oklch(0.8 0.04 75); }
.isl[b-32j33rdbnr]  .isl__roof { fill: color-mix(in oklch, var(--isl-flag) 80%, oklch(0.4 0.1 280)); }
.isl[b-32j33rdbnr]  .isl__door { fill: oklch(0.45 0.09 50); }
.isl[b-32j33rdbnr]  .isl__window { fill: oklch(0.9 0.15 90); animation: isl-window-b-32j33rdbnr 2.8s ease-in-out infinite; }
.isl[b-32j33rdbnr]  .isl__brick { fill: none; stroke: oklch(0.5 0.04 70 / 0.45); stroke-width: 1.2; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__pennant { fill: var(--isl-flag); transform-origin: 0% 50%; animation: isl-wave-b-32j33rdbnr 0.9s ease-in-out infinite alternate; }

.isl[b-32j33rdbnr]  .isl__dune { fill: oklch(0.94 0.08 88 / 0.85); }
.isl[b-32j33rdbnr]  .isl__pyramid { fill: oklch(0.86 0.11 82); }
.isl[b-32j33rdbnr]  .isl__pyramid-shade { fill: oklch(0.55 0.1 60 / 0.35); }
.isl[b-32j33rdbnr]  .isl__pond { fill: oklch(0.72 0.12 215); }
.isl[b-32j33rdbnr]  .isl__pond-glint { fill: none; stroke: oklch(0.99 0 0); stroke-width: 1.4; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__reed { fill: none; stroke: oklch(0.55 0.13 145); stroke-width: 1.6; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__cactus { fill: oklch(0.62 0.15 150); }
.isl[b-32j33rdbnr]  .isl__heat { fill: none; stroke: oklch(1 0 0 / 0.75); stroke-width: 1.4; stroke-linecap: round; opacity: 0; animation: isl-heat-b-32j33rdbnr 3s ease-in-out infinite; }
.isl[b-32j33rdbnr]  .isl__sun { fill: oklch(0.9 0.17 90); transform-origin: 50% 50%; animation: isl-sun-b-32j33rdbnr 4s ease-in-out infinite; }

.isl[b-32j33rdbnr]  .isl__aurora { fill: oklch(0.82 0.16 165 / 0.45); animation: isl-aurora-b-32j33rdbnr 7s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.isl[b-32j33rdbnr]  .isl__aurora--2 { fill: oklch(0.72 0.15 300 / 0.35); animation-duration: 9s; animation-direction: alternate-reverse; }
.isl[b-32j33rdbnr]  .isl__ice { fill: oklch(0.95 0.04 220 / 0.85); }
.isl[b-32j33rdbnr]  .isl__igloo { fill: oklch(0.98 0.01 230); }
.isl[b-32j33rdbnr]  .isl__igloo-line { fill: none; stroke: oklch(0.7 0.06 235 / 0.7); stroke-width: 1; }
.isl[b-32j33rdbnr]  .isl__igloo-door { fill: oklch(0.42 0.06 250); }
.isl[b-32j33rdbnr]  .isl__snowball { fill: oklch(0.99 0.005 230); }
.isl[b-32j33rdbnr]  .isl__eye-dot { fill: oklch(0.25 0.03 260); }
.isl[b-32j33rdbnr]  .isl__carrot { fill: oklch(0.72 0.17 50); }
.isl[b-32j33rdbnr]  .isl__scarf { fill: none; stroke: oklch(0.62 0.21 27); stroke-width: 3; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__scarf-tail { transform-origin: 0% 0%; animation: isl-wave-b-32j33rdbnr 0.8s ease-in-out infinite alternate; }
.isl[b-32j33rdbnr]  .isl__penguin { fill: oklch(0.3 0.03 260); }
.isl[b-32j33rdbnr]  .isl__penguin-belly { fill: oklch(0.99 0 0); }
.isl[b-32j33rdbnr]  .isl__beak, .isl[b-32j33rdbnr]  .isl__feet { fill: oklch(0.78 0.16 65); stroke: oklch(0.78 0.16 65); stroke-width: 1.6; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__snowflake { fill: oklch(1 0 0); opacity: 0; animation: isl-snow-b-32j33rdbnr 5s linear infinite; }

.isl[b-32j33rdbnr]  .isl__lava-glow { transform-origin: 50% 50%; animation: isl-lava-b-32j33rdbnr 1.8s ease-in-out infinite; }
.isl[b-32j33rdbnr]  .isl__crater { fill: oklch(0.72 0.21 45); }
.isl[b-32j33rdbnr]  .isl__lava { fill: none; stroke: oklch(0.66 0.22 38); stroke-width: 4; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__lava-flow { fill: none; stroke: oklch(0.9 0.17 85); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 4 7; animation: isl-flow-b-32j33rdbnr 1.1s linear infinite; }
.isl[b-32j33rdbnr]  .isl__smoke { fill: oklch(0.82 0.01 260 / 0.8); transform-origin: 50% 50%; opacity: 0; animation: isl-smoke-b-32j33rdbnr 3.9s ease-out infinite; }
.isl[b-32j33rdbnr]  .isl__ember { fill: oklch(0.85 0.18 70); opacity: 0; animation: isl-ember-b-32j33rdbnr 2.4s ease-out infinite; }
.isl[b-32j33rdbnr]  .isl__boulder { fill: oklch(0.42 0.03 40); }

.isl[b-32j33rdbnr]  .isl__moon { fill: oklch(0.94 0.1 95); }
.isl[b-32j33rdbnr]  .isl__star { fill: oklch(0.95 0.13 95); }
.isl[b-32j33rdbnr]  .isl__pebble { fill: var(--isl-cliff1); }
.isl[b-32j33rdbnr]  .isl__dome { fill: oklch(0.8 0.08 270); }
.isl[b-32j33rdbnr]  .isl__slit { fill: oklch(0.3 0.06 270); }
.isl[b-32j33rdbnr]  .isl__rocket { fill: oklch(0.97 0.01 250); }
.isl[b-32j33rdbnr]  .isl__fin { fill: var(--isl-flag); }
.isl[b-32j33rdbnr]  .isl__porthole { fill: oklch(0.75 0.12 220); }
.isl[b-32j33rdbnr]  .isl__flame { fill: oklch(0.85 0.18 70); transform-origin: 50% 0%; animation: isl-flame-b-32j33rdbnr 0.18s ease-in-out infinite alternate; }

/* The flag. */
.isl[b-32j33rdbnr]  .isl__pole { stroke: oklch(0.38 0.03 260); stroke-width: 2; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__knob { fill: oklch(0.86 0.17 90); }
.isl[b-32j33rdbnr]  .isl__cloth { fill: var(--isl-flag); stroke: var(--isl-ink); stroke-width: 1; transform-origin: 0% 50%; animation: isl-flag-b-32j33rdbnr 1.1s ease-in-out infinite alternate; }
.isl[b-32j33rdbnr]  .isl__cloth-star { fill: oklch(0.97 0.08 95); transform-origin: 0% 50%; animation: isl-flag-b-32j33rdbnr 1.1s ease-in-out infinite alternate; }
.isl[b-32j33rdbnr]  .isl__flag { transform-origin: 50% 100%; }

/* Ambient motions. */
.isl[b-32j33rdbnr]  .isl__sway { transform-origin: 50% 100%; animation: isl-sway-b-32j33rdbnr 4s ease-in-out infinite alternate; }
.isl[b-32j33rdbnr]  .isl__sway--soft { animation-duration: 5.5s; }
.isl[b-32j33rdbnr]  .isl__fly { animation: isl-fly-b-32j33rdbnr 16s linear infinite; }
.isl[b-32j33rdbnr]  .isl__fly .isl__gull { transform-origin: 50% 100%; animation: isl-flap-b-32j33rdbnr 0.5s ease-in-out infinite alternate; }
.isl[b-32j33rdbnr]  .isl__drift { animation: isl-drift-b-32j33rdbnr 8s ease-in-out infinite; }
.isl[b-32j33rdbnr]  .isl__flutter { transform-origin: 50% 50%; animation: isl-flutter-b-32j33rdbnr 0.22s ease-in-out infinite alternate; }
.isl[b-32j33rdbnr]  .isl__twinkle { transform-origin: 50% 50%; animation: isl-twinkle-b-32j33rdbnr 1.8s ease-in-out infinite alternate; }
.isl[b-32j33rdbnr]  .isl__wiggle { transform-origin: 50% 50%; animation: isl-wiggle-b-32j33rdbnr 3s ease-in-out infinite; }
.isl[b-32j33rdbnr]  .isl__boing { transform-box: view-box; animation: isl-boing-b-32j33rdbnr 2.6s ease-in-out infinite; }
.isl[b-32j33rdbnr]  .isl__waddle { transform-box: view-box; animation: isl-waddle-b-32j33rdbnr 0.9s ease-in-out infinite alternate; }
.isl[b-32j33rdbnr]  .isl__drift-x { animation: isl-drift-x-b-32j33rdbnr 9s ease-in-out infinite alternate; }
.isl[b-32j33rdbnr]  .isl__soar { animation: isl-soar-b-32j33rdbnr 12s ease-in-out infinite; }
.isl[b-32j33rdbnr]  .isl__float { animation: isl-float-b-32j33rdbnr 5s ease-in-out infinite alternate; }
.isl[b-32j33rdbnr]  .isl__hover { animation: isl-hover-b-32j33rdbnr 1.8s ease-in-out infinite alternate; }
.isl--sky[b-32j33rdbnr]  .isl__world { animation: isl-float-b-32j33rdbnr 6s ease-in-out infinite alternate; }

/* Where the child is now: a warm glow on the water. */
.isl[data-state="current"][b-32j33rdbnr]  .isl__halo { animation: isl-halo-b-32j33rdbnr 2.4s ease-in-out infinite; transform-origin: 50% 50%; }

/* Locked: asleep, grey and quiet under clouds with a padlock. */
.isl[data-state="locked"][b-32j33rdbnr]  .isl__svg { filter: grayscale(0.85) brightness(1.06) contrast(0.85); }
.isl[data-state="locked"][b-32j33rdbnr]  .isl__svg * { animation-play-state: paused; }
.isl[b-32j33rdbnr]  .isl__fog { fill: oklch(0.98 0.005 250 / 0.94); filter: drop-shadow(0 2px 2px oklch(0.3 0.04 260 / 0.15)); }
.isl[b-32j33rdbnr]  .isl__fog--l { animation: isl-fog-idle-b-32j33rdbnr 6s ease-in-out infinite alternate; }
.isl[b-32j33rdbnr]  .isl__fog--r { animation: isl-fog-idle-b-32j33rdbnr 7s ease-in-out infinite alternate-reverse; }
.isl[b-32j33rdbnr]  .isl__lock-bg { fill: oklch(0.99 0 0); stroke: oklch(0.75 0.03 260); stroke-width: 1.4; }
.isl[b-32j33rdbnr]  .isl__shackle { fill: none; stroke: oklch(0.5 0.04 260); stroke-width: 2.6; stroke-linecap: round; }
.isl[b-32j33rdbnr]  .isl__lock-body { fill: oklch(0.82 0.15 85); stroke: oklch(0.55 0.1 70); stroke-width: 1.2; }
.isl[b-32j33rdbnr]  .isl__keyhole { fill: oklch(0.45 0.08 60); }
.isl[b-32j33rdbnr]  .isl__lock { transform-origin: 50% 50%; }

/* Arriving: the clouds part, colour floods in, the padlock pops, the flag rises and stars burst. */
.isl[data-arrive="true"][b-32j33rdbnr]  .isl__svg { animation: isl-colorize-b-32j33rdbnr 1.4s ease-out both; }
.isl[data-arrive="true"][b-32j33rdbnr]  .isl__fog--l { animation: isl-part-l-b-32j33rdbnr 1.3s cubic-bezier(0.5, 0, 0.3, 1) 0.5s both; }
.isl[data-arrive="true"][b-32j33rdbnr]  .isl__fog--r { animation: isl-part-r-b-32j33rdbnr 1.3s cubic-bezier(0.5, 0, 0.3, 1) 0.5s both; }
.isl[data-arrive="true"][b-32j33rdbnr]  .isl__fog--c { animation: isl-part-c-b-32j33rdbnr 1.3s cubic-bezier(0.5, 0, 0.3, 1) 0.6s both; }
.isl[data-arrive="true"][b-32j33rdbnr]  .isl__lock { animation: isl-unlock-b-32j33rdbnr 0.8s cubic-bezier(0.4, 0, 0.6, 1) both; }
.isl[data-arrive="true"][b-32j33rdbnr]  .isl__flag { animation: isl-flag-up-b-32j33rdbnr 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) 1.3s both; }
.isl[data-arrive="true"][b-32j33rdbnr]  .isl__halo { opacity: 1; }
.isl[b-32j33rdbnr]  .isl__ring { fill: none; stroke: var(--isl-glow1); stroke-width: 3; transform-origin: 50% 50%; opacity: 0; animation: isl-ring-b-32j33rdbnr 1.1s ease-out 1.2s both; }
.isl[b-32j33rdbnr]  .isl__spark { fill: oklch(0.9 0.17 92); stroke: oklch(0.7 0.15 75); stroke-width: 0.6; opacity: 0; transform-origin: 50% 50%; animation: isl-burst-b-32j33rdbnr 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) 1.25s both; }

/* In the background nothing moves. */
html[data-app-hidden] .isl[b-32j33rdbnr]  * { animation-play-state: paused !important; }

/* Still: the picture without motion. */
.isl[data-static="true"][b-32j33rdbnr]  *,
.isl[data-static="true"][b-32j33rdbnr]  .isl__svg { animation: none !important; }
.isl[data-static="true"][data-state="current"][b-32j33rdbnr]  .isl__halo { opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
    .isl[b-32j33rdbnr]  *,
    .isl[b-32j33rdbnr]  .isl__svg { animation: none !important; }
    .isl[data-state="current"][b-32j33rdbnr]  .isl__halo { opacity: 0.7; }
    .isl[b-32j33rdbnr]  .isl__snowflake { opacity: 0.8; }
}

@keyframes isl-ripple-b-32j33rdbnr { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.14); opacity: 0; } }
@keyframes isl-glint-b-32j33rdbnr { 0%, 100% { opacity: 0; transform: scaleX(0.4); } 50% { opacity: 0.9; transform: scaleX(1); } }
@keyframes isl-foam-b-32j33rdbnr { to { stroke-dashoffset: -74; } }
@keyframes isl-flow-b-32j33rdbnr { to { stroke-dashoffset: -28; } }
@keyframes isl-puff-b-32j33rdbnr { 0%, 100% { transform: scale(0.8); opacity: 0.6; } 50% { transform: scale(1.25); opacity: 0.95; } }
@keyframes isl-sway-b-32j33rdbnr { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes isl-fly-b-32j33rdbnr { 0% { transform: translate(-40px, 10px); } 100% { transform: translate(200px, -14px); } }
@keyframes isl-flap-b-32j33rdbnr { from { transform: scaleY(1); } to { transform: scaleY(-0.4); } }
@keyframes isl-drift-b-32j33rdbnr { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(12px, -8px); } 50% { transform: translate(22px, 2px); } 75% { transform: translate(8px, 8px); } }
@keyframes isl-flutter-b-32j33rdbnr { from { transform: scaleX(1); } to { transform: scaleX(0.25); } }
@keyframes isl-twinkle-b-32j33rdbnr { from { opacity: 0.25; transform: scale(0.6); } to { opacity: 1; transform: scale(1.15); } }
@keyframes isl-wiggle-b-32j33rdbnr { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(12deg); } 94% { transform: rotate(-6deg); } }
@keyframes isl-boing-b-32j33rdbnr { 0%, 60%, 100% { transform: scale(1, 1); } 70% { transform: scale(1.12, 0.86); } 80% { transform: scale(0.94, 1.1); } 90% { transform: scale(1.03, 0.97); } }
@keyframes isl-waddle-b-32j33rdbnr { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes isl-drift-x-b-32j33rdbnr { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
@keyframes isl-soar-b-32j33rdbnr { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-30px, 8px) rotate(-6deg); } 50% { transform: translate(-60px, 0) rotate(0); } 75% { transform: translate(-30px, -8px) rotate(6deg); } }
@keyframes isl-float-b-32j33rdbnr { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes isl-hover-b-32j33rdbnr { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes isl-flame-b-32j33rdbnr { from { transform: scaleY(0.7); opacity: 0.8; } to { transform: scaleY(1.25); opacity: 1; } }
@keyframes isl-shimmer-b-32j33rdbnr { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } }
@keyframes isl-window-b-32j33rdbnr { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
@keyframes isl-wave-b-32j33rdbnr { from { transform: skewY(-8deg) scaleX(0.9); } to { transform: skewY(8deg) scaleX(1.05); } }
@keyframes isl-flag-b-32j33rdbnr { from { transform: skewY(-5deg) scaleX(0.92); } to { transform: skewY(5deg) scaleX(1.04); } }
@keyframes isl-heat-b-32j33rdbnr { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 0.7; } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes isl-sun-b-32j33rdbnr { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes isl-aurora-b-32j33rdbnr { from { transform: translateX(-6px) skewX(-6deg); opacity: 0.6; } to { transform: translateX(6px) skewX(6deg); opacity: 1; } }
@keyframes isl-snow-b-32j33rdbnr { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(8px, 118px); opacity: 0; } }
@keyframes isl-lava-b-32j33rdbnr { 0%, 100% { transform: scale(0.85); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes isl-smoke-b-32j33rdbnr { 0% { transform: translate(0, 0) scale(0.5); opacity: 0.85; } 100% { transform: translate(8px, -42px) scale(2); opacity: 0; } }
@keyframes isl-ember-b-32j33rdbnr { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(var(--dx, 0), -40px); opacity: 0; } }
@keyframes isl-halo-b-32j33rdbnr { 0%, 100% { opacity: 0.45; transform: scale(0.96); } 50% { opacity: 0.95; transform: scale(1.04); } }
@keyframes isl-fog-idle-b-32j33rdbnr { from { transform: translateX(-3px); } to { transform: translateX(3px); } }
@keyframes isl-colorize-b-32j33rdbnr {
    0% { filter: grayscale(0.85) brightness(1.06) contrast(0.85); }
    50% { filter: grayscale(0.85) brightness(1.06) contrast(0.85); }
    80% { filter: grayscale(0) brightness(1.25) saturate(1.3); }
    100% { filter: none; }
}
@keyframes isl-part-l-b-32j33rdbnr { to { transform: translate(-90px, -6px) scale(1.2); opacity: 0; } }
@keyframes isl-part-r-b-32j33rdbnr { to { transform: translate(90px, -6px) scale(1.2); opacity: 0; } }
@keyframes isl-part-c-b-32j33rdbnr { to { transform: translateY(40px) scale(1.3); opacity: 0; } }
@keyframes isl-unlock-b-32j33rdbnr {
    0% { transform: scale(1) rotate(0); opacity: 1; }
    30% { transform: scale(1.3) rotate(-12deg); }
    55% { transform: scale(1.3) rotate(12deg); opacity: 1; }
    100% { transform: scale(0) rotate(40deg); opacity: 0; }
}
@keyframes isl-flag-up-b-32j33rdbnr { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes isl-ring-b-32j33rdbnr { 0% { transform: scale(0.2); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes isl-burst-b-32j33rdbnr {
    0% { transform: translate(0, 0) scale(0.3) rotate(0); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(1.4) rotate(180deg); opacity: 0; }
}
/* /Components/Ui/IslandRewardDialog.razor.rz.scp.css */
.ird[b-9nd3wx0y51] {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: color-mix(in oklch, var(--background) 45%, oklch(0.25 0.06 260 / 0.55));
    animation: ird-fade-b-9nd3wx0y51 0.3s ease-out both;
}

.ird__confetti[b-9nd3wx0y51] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ird__confetti i[b-9nd3wx0y51] {
    position: absolute;
    top: -2rem;
    left: var(--x);
    inline-size: 0.55rem;
    block-size: 0.9rem;
    border-radius: 2px;
    animation: ird-fall-b-9nd3wx0y51 var(--t) linear var(--d) infinite;
}

.ird__card[b-9nd3wx0y51] {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    inline-size: min(100%, 26rem);
    padding: 1rem 1.25rem 1.25rem;
    border-radius: 1.75rem;
    background: var(--surface, var(--card, var(--background)));
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px oklch(0.2 0.05 260 / 0.35);
    text-align: center;
    animation: ird-pop-b-9nd3wx0y51 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.ird__stage[b-9nd3wx0y51] {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 100%;
    margin-block-start: -3.5rem;
}

.ird__rays[b-9nd3wx0y51] {
    position: absolute;
    inline-size: 120%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,
        color-mix(in oklch, var(--accent, oklch(0.85 0.15 90)) 55%, transparent) 0deg 12deg,
        transparent 12deg 24deg);
    mask: radial-gradient(circle, black 25%, transparent 68%);
    animation: ird-spin-b-9nd3wx0y51 14s linear infinite;
}

.ird__stage[b-9nd3wx0y51]  .ird__island {
    --isl-size: min(70vw, 17rem);
    position: relative;
}

.ird__stage[b-9nd3wx0y51]  .ird__kid {
    --kid-size: min(22vw, 5.5rem);
    position: absolute;
    inset-inline-start: 4%;
    inset-block-end: 6%;
}

.ird__kicker[b-9nd3wx0y51] {
    margin: 0;
    padding: 0.15rem 0.85rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 900;
    font-size: 0.85rem;
}

.ird__title[b-9nd3wx0y51] {
    margin: 0;
    font-size: clamp(1.4rem, 1.1rem + 1.5vw, 1.9rem);
    font-weight: 900;
    line-height: 1.3;
}

.ird__rewards[b-9nd3wx0y51] {
    display: grid;
    gap: 0.5rem;
    inline-size: 100%;
    max-block-size: 40vh;
    margin: 0.25rem 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.ird__reward-img[b-9nd3wx0y51] {
    inline-size: 4rem;
    block-size: 4rem;
    flex: none;
    border-radius: 0.85rem;
    object-fit: cover;
    box-shadow: 0 4px 12px oklch(0.2 0.05 260 / 0.2);
    animation: ird-gift-b-9nd3wx0y51 1.4s ease-in-out infinite;
}

.ird__reward[b-9nd3wx0y51] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.7rem 1rem;
    border-radius: 1.1rem;
    background: color-mix(in oklch, var(--accent, oklch(0.85 0.15 90)) 22%, var(--background));
    border: 2px dashed color-mix(in oklch, var(--accent, oklch(0.85 0.15 90)) 70%, var(--foreground));
    font-weight: 800;
    font-size: 1.05rem;
    text-align: start;
}

.ird__gift[b-9nd3wx0y51] {
    font-size: 1.8rem;
    animation: ird-gift-b-9nd3wx0y51 1.4s ease-in-out infinite;
}

.ird__ok[b-9nd3wx0y51] {
    inline-size: 100%;
    min-block-size: 3.25rem;
    margin-block-start: 0.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font: inherit;
    font-size: 1.15rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 16px color-mix(in oklch, var(--primary) 40%, transparent);
    animation: ird-pulse-b-9nd3wx0y51 1.6s ease-in-out infinite;
}

.ird__ok:focus-visible[b-9nd3wx0y51] {
    outline: 3px solid var(--foreground);
    outline-offset: 3px;
}

/* Wider screens: the island on one side, the words on the other. */
@media (min-width: 768px) {
    .ird__card[b-9nd3wx0y51] {
        inline-size: min(100%, 34rem);
        padding: 1.5rem 2rem 1.75rem;
    }

    .ird__stage[b-9nd3wx0y51]  .ird__island { --isl-size: 20rem; }
    .ird__stage[b-9nd3wx0y51]  .ird__kid { --kid-size: 6.5rem; }
}

.ird[data-static="true"] *[b-9nd3wx0y51],
html[data-app-hidden] .ird *[b-9nd3wx0y51] {
    animation-play-state: paused;
}

.ird[data-static="true"] .ird__card[b-9nd3wx0y51],
.ird[data-static="true"] .ird__rays[b-9nd3wx0y51],
.ird[data-static="true"] .ird__gift[b-9nd3wx0y51],
.ird[data-static="true"] .ird__reward-img[b-9nd3wx0y51],
.ird[data-static="true"] .ird__ok[b-9nd3wx0y51] {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .ird *[b-9nd3wx0y51],
    .ird[b-9nd3wx0y51] { animation: none !important; }
}

@keyframes ird-fade-b-9nd3wx0y51 { from { opacity: 0; } }
@keyframes ird-pop-b-9nd3wx0y51 { from { transform: scale(0.6) translateY(2rem); opacity: 0; } }
@keyframes ird-spin-b-9nd3wx0y51 { to { rotate: 1turn; } }
@keyframes ird-gift-b-9nd3wx0y51 { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-12deg) scale(1.15); } 40% { transform: rotate(10deg) scale(1.15); } 60% { transform: rotate(0) scale(1); } }
@keyframes ird-pulse-b-9nd3wx0y51 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes ird-fall-b-9nd3wx0y51 {
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(110vh) rotate(calc(var(--spin) * 720deg)); opacity: 0.8; }
}
/* /Components/Ui/JourneyMap.razor.rz.scp.css */
/* The map sizes itself by its own width (a container), not the window: a zigzag column on phones and narrow panes, a
   bigger zigzag on tablets, and a snake of three islands per row on wide screens. */
.jmap[b-ck31l7t40w] {
    container-type: inline-size;
}

.jmap__field[b-ck31l7t40w] {
    --row: 12.5rem;
    --isl-w: min(56cqi, 12.5rem);
    position: relative;
    block-size: calc(var(--rows-a) * var(--row) + 2rem);
    border-radius: 1.75rem;
    overflow: hidden;
    isolation: isolate;
}

@container (min-width: 34rem) {
    .jmap__field[b-ck31l7t40w] {
        --row: 15rem;
        --isl-w: 15rem;
    }
}

@container (min-width: 52rem) {
    .jmap__field[b-ck31l7t40w] {
        --row: 19rem;
        --isl-w: min(28cqi, 16rem);
        block-size: calc(var(--rows-b) * var(--row) + 2rem);
    }

    .jmap__field .jmap__path--a[b-ck31l7t40w] { display: none; }
    .jmap__field .jmap__path--b[b-ck31l7t40w] { display: block; }

    .jmap__field .jmap__stop[b-ck31l7t40w],
    .jmap__field .jmap__buddy[b-ck31l7t40w] {
        --x: var(--xb);
        --y: var(--yb);
    }
}

/* The sea: deep in the middle, light at the edges, with soft moving sparkles. Mixed with the page background so it
   follows light and dark mode. */
.jmap__sea[b-ck31l7t40w] {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 20% 30%, oklch(1 0 0 / 0.35) 0 2px, transparent 3px) 0 0 / 7rem 6rem,
        radial-gradient(circle at 70% 60%, oklch(1 0 0 / 0.25) 0 1.5px, transparent 2.5px) 0 0 / 9rem 7rem,
        radial-gradient(ellipse at 50% 0%, color-mix(in oklch, oklch(0.9 0.07 200) 70%, var(--background, white)), transparent 70%),
        linear-gradient(180deg,
            color-mix(in oklch, oklch(0.82 0.09 215) 70%, var(--background, white)),
            color-mix(in oklch, oklch(0.68 0.12 235) 70%, var(--background, white)));
    animation: jmap-sea-b-ck31l7t40w 40s linear infinite;
}

.jmap__path[b-ck31l7t40w] {
    position: absolute;
    inset: 1rem 0;
    inline-size: 100%;
    block-size: calc(100% - 2rem);
    overflow: visible;
    pointer-events: none;
}

.jmap__path--b[b-ck31l7t40w] { display: none; }

.jmap__trail[b-ck31l7t40w],
.jmap__done[b-ck31l7t40w] {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jmap__trail[b-ck31l7t40w] {
    stroke: oklch(1 0 0 / 0.75);
    stroke-width: 5;
    stroke-dasharray: 0.1 14;
}

.jmap__done[b-ck31l7t40w] {
    stroke: oklch(0.88 0.17 90);
    stroke-width: 7;
    filter: drop-shadow(0 0 6px oklch(0.92 0.16 95 / 0.9));
}

.jmap__stops[b-ck31l7t40w],
.jmap__layer[b-ck31l7t40w] {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 1rem 0;
}

.jmap__layer[b-ck31l7t40w] {
    pointer-events: none;
}

.jmap__stop[b-ck31l7t40w],
.jmap__buddy[b-ck31l7t40w] {
    --x: var(--xa);
    --y: var(--ya);
}

.jmap__stop[b-ck31l7t40w] {
    position: absolute;
    left: var(--x);
    top: var(--y);
    inline-size: var(--isl-w);
    transform: translate(-50%, -50%);
}

.jmap__stop--current[b-ck31l7t40w] { z-index: 2; }

.jmap__island[b-ck31l7t40w] {
    display: block;
    inline-size: 100%;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
    -webkit-tap-highlight-color: transparent;
}

.jmap__island:hover[b-ck31l7t40w] { transform: scale(1.04); }
.jmap__island:active[b-ck31l7t40w] { transform: scale(0.97); }

.jmap__island:focus-visible[b-ck31l7t40w] {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.jmap__island[b-ck31l7t40w]  .isl {
    --isl-size: 100%;
}

.jmap__label[b-ck31l7t40w] {
    position: absolute;
    inset-inline: 0;
    top: 88%;
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    pointer-events: none;
}

.jmap__name[b-ck31l7t40w] {
    max-inline-size: 100%;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: var(--card, var(--background));
    color: var(--foreground);
    box-shadow: 0 3px 10px oklch(0.25 0.05 250 / 0.18);
    font-weight: 900;
    font-size: clamp(0.85rem, 0.75rem + 0.4cqi, 1.05rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jmap__need[b-ck31l7t40w] {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    background: oklch(0.25 0.05 250 / 0.35);
    color: oklch(1 0 0);
    font-size: 0.8rem;
    font-weight: 800;
}

.jmap__stop--current .jmap__name[b-ck31l7t40w] {
    background: var(--primary);
    color: var(--primary-foreground);
}

.jmap__stop--locked .jmap__name[b-ck31l7t40w] {
    color: var(--muted-foreground);
}

/* The companion stands on the left part of its island and sails between islands in a little boat. */
.jmap__buddy[b-ck31l7t40w] {
    --kid: calc(var(--isl-w) * 0.34);
    position: absolute;
    z-index: 3;
    left: calc(var(--x) - var(--isl-w) * 0.22);
    top: var(--y);
    inline-size: var(--kid);
    display: grid;
    justify-items: center;
    pointer-events: none;
    transform: translate(-50%, -100%);
    translate: 0 calc(var(--isl-w) * 0.85 * 0.14);
    transition: left 2.2s cubic-bezier(0.45, 0, 0.25, 1), top 2.2s cubic-bezier(0.45, 0, 0.25, 1);
}

.jmap__buddy[b-ck31l7t40w]  .kid {
    --kid-size: var(--kid);
}

.jmap__boat[b-ck31l7t40w] {
    position: absolute;
    inset-block-end: -8%;
    inline-size: 150%;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.3s, transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.jmap__buddy.is-sailing .jmap__boat[b-ck31l7t40w] {
    opacity: 1;
    transform: scale(1);
    animation: jmap-bob-b-ck31l7t40w 0.8s ease-in-out infinite alternate;
}

.jmap__buddy.is-sailing[b-ck31l7t40w] {
    translate: 0 calc(var(--isl-w) * 0.85 * 0.3);
}

.jmap__sail[b-ck31l7t40w] { fill: oklch(0.99 0.01 90); stroke: oklch(0.3 0.05 262 / 0.6); stroke-width: 1.5; stroke-linejoin: round; }
.jmap__hull[b-ck31l7t40w] { fill: oklch(0.6 0.13 45); stroke: oklch(0.3 0.05 262 / 0.6); stroke-width: 1.5; stroke-linejoin: round; }
.jmap__wake[b-ck31l7t40w] { fill: none; stroke: oklch(1 0 0 / 0.9); stroke-width: 2; stroke-linecap: round; }

.jmap__here[b-ck31l7t40w] {
    position: absolute;
    inset-block-end: 100%;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.75rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 3px 8px oklch(0.25 0.05 250 / 0.25);
    animation: jmap-here-b-ck31l7t40w 1.6s ease-in-out infinite alternate;
}

html[data-app-hidden] .jmap *[b-ck31l7t40w],
html[data-app-hidden] .jmap__sea[b-ck31l7t40w] { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    .jmap__sea[b-ck31l7t40w], .jmap__here[b-ck31l7t40w], .jmap__buddy.is-sailing .jmap__boat[b-ck31l7t40w] { animation: none; }
    .jmap__buddy[b-ck31l7t40w] { transition: none; }
}

@keyframes jmap-sea-b-ck31l7t40w { to { background-position: 7rem 6rem, -9rem 7rem, 0 0, 0 0; } }
@keyframes jmap-bob-b-ck31l7t40w { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes jmap-here-b-ck31l7t40w { from { transform: translateY(0); } to { transform: translateY(-4px); } }
/* /Components/Ui/KidCompanion.razor.rz.scp.css */
/* زياد وليان. Size with --kid-size; colours are tokens so a theme can tune them. Motions animate transform only, on
   the compositor; joints pivot in SVG units (transform-box: view-box) so nothing slides off the body. */
.kid[b-dm7jflo86o] {
    --kid-size: 6rem;
    --kid-line: oklch(0.27 0.04 290);
    --kid-skin: oklch(0.82 0.07 58);
    --kid-cheek: oklch(0.74 0.14 20);
    --kid-eye: oklch(0.25 0.04 290);
    display: inline-grid;
    justify-items: center;
    gap: 0.25rem;
    inline-size: var(--kid-size);
}

.kid--ziad[b-dm7jflo86o] {
    --kid-hair: oklch(0.32 0.05 50);
    --kid-top: oklch(0.72 0.12 195);
    --kid-bottom: oklch(0.45 0.1 262);
    --kid-shoe: oklch(0.62 0.17 32);
    --kid-accent: oklch(0.9 0.15 95);
}

.kid--layan[b-dm7jflo86o] {
    --kid-hair: oklch(0.34 0.07 42);
    --kid-top: oklch(0.7 0.15 345);
    --kid-bottom: oklch(0.55 0.12 300);
    --kid-shoe: oklch(0.52 0.14 300);
    --kid-accent: oklch(0.9 0.15 95);
}

.kid__svg[b-dm7jflo86o] {
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
}

.kid__p[b-dm7jflo86o] {
    stroke: var(--kid-line);
    stroke-width: 2.4;
    stroke-linejoin: round;
}

.kid__skin[b-dm7jflo86o] { fill: var(--kid-skin); }
.kid__hair[b-dm7jflo86o] { fill: var(--kid-hair); }
.kid__top[b-dm7jflo86o] { fill: var(--kid-top); }
.kid__bottom[b-dm7jflo86o] { fill: var(--kid-bottom); }
.kid__shoe[b-dm7jflo86o] { fill: var(--kid-shoe); }
.kid__accent[b-dm7jflo86o] { fill: var(--kid-accent); }
.kid__eye[b-dm7jflo86o] { fill: var(--kid-eye); }
.kid__glint[b-dm7jflo86o] { fill: oklch(0.99 0 0); }
.kid__cheek[b-dm7jflo86o] { fill: var(--kid-cheek); opacity: 0.45; }
.kid__shadow[b-dm7jflo86o] { fill: oklch(0.2 0.04 290 / 0.16); }

.kid__accent-line[b-dm7jflo86o] {
    fill: none;
    stroke: var(--kid-accent);
    stroke-width: 3;
    stroke-linecap: round;
}

.kid__brow[b-dm7jflo86o],
.kid__nose[b-dm7jflo86o],
.kid__mouth[b-dm7jflo86o] {
    fill: none;
    stroke: var(--kid-line);
    stroke-width: 2.2;
    stroke-linecap: round;
}

.kid__mouth--open[b-dm7jflo86o] {
    fill: oklch(0.45 0.12 20);
    stroke-linejoin: round;
}

.kid__name[b-dm7jflo86o] {
    font-weight: 800;
    font-size: 1rem;
}

/* Joints. */
.kid__body[b-dm7jflo86o],
.kid__head[b-dm7jflo86o],
.kid__arm[b-dm7jflo86o],
.kid__leg[b-dm7jflo86o],
.kid__eyes[b-dm7jflo86o],
.kid__shadow[b-dm7jflo86o] {
    transform-box: view-box;
}

.kid__body[b-dm7jflo86o] { transform-origin: 60px 150px; }
.kid__head[b-dm7jflo86o] { transform-origin: 60px 62px; }
.kid__arm--l[b-dm7jflo86o] { transform-origin: 39px 70px; }
.kid__arm--r[b-dm7jflo86o] { transform-origin: 81px 70px; }
.kid__leg--l[b-dm7jflo86o] { transform-origin: 52px 106px; }
.kid__leg--r[b-dm7jflo86o] { transform-origin: 68px 106px; }
.kid__eyes[b-dm7jflo86o] { transform-origin: 60px 41px; }
.kid__shadow[b-dm7jflo86o] { transform-origin: 60px 151px; }

/* Always: a blink now and then. */
.kid__eyes[b-dm7jflo86o] {
    animation: kid-blink-b-dm7jflo86o 4.6s infinite;
}

/* Idle: breathing. */
.kid[data-motion="idle"] .kid__body[b-dm7jflo86o] {
    animation: kid-breathe-b-dm7jflo86o 3.2s ease-in-out infinite;
}

/* Wave: the arm rises, waves three times and comes down. */
.kid[data-motion="wave"] .kid__arm--r[b-dm7jflo86o] {
    animation: kid-wave-b-dm7jflo86o 2.4s ease-in-out both;
}

.kid[data-motion="wave"] .kid__head[b-dm7jflo86o] {
    animation: kid-tilt-b-dm7jflo86o 2.4s ease-in-out both;
}

/* Encourage: a fist pump with a nod — "you can do it". */
.kid[data-motion="encourage"] .kid__arm--r[b-dm7jflo86o] {
    animation: kid-pump-b-dm7jflo86o 1.6s ease-in-out both;
}

.kid[data-motion="encourage"] .kid__head[b-dm7jflo86o] {
    animation: kid-nod-b-dm7jflo86o 1.6s ease-in-out both;
}

.kid[data-motion="encourage"] .kid__body[b-dm7jflo86o] {
    animation: kid-hop-small-b-dm7jflo86o 1.6s ease-in-out both;
}

/* Point: the companion stands on the far side of something (the stars wallet) and points back at it with a smile, and
   every few seconds gives a little wave before pointing again. */
.kid[data-motion="point"] .kid__arm--r[b-dm7jflo86o] {
    animation: kid-beckon-b-dm7jflo86o 6s ease-in-out infinite;
}

.kid[data-motion="point"] .kid__body[b-dm7jflo86o] {
    animation: kid-breathe-b-dm7jflo86o 3s ease-in-out infinite;
}

/* Dance: jump with squash and stretch, arms up in the air, knees tucked, head bobbing side to side. Repeats while shown. */
.kid[data-motion="dance"] .kid__body[b-dm7jflo86o] {
    animation: kid-jump-b-dm7jflo86o 0.9s cubic-bezier(0.3, 0, 0.3, 1) infinite;
}

.kid[data-motion="dance"] .kid__shadow[b-dm7jflo86o] {
    animation: kid-shadow-b-dm7jflo86o 0.9s cubic-bezier(0.3, 0, 0.3, 1) infinite;
}

.kid[data-motion="dance"] .kid__arm--l[b-dm7jflo86o] {
    animation: kid-cheer-l-b-dm7jflo86o 0.9s ease-in-out infinite;
}

.kid[data-motion="dance"] .kid__arm--r[b-dm7jflo86o] {
    animation: kid-cheer-r-b-dm7jflo86o 0.9s ease-in-out infinite;
}

.kid[data-motion="dance"] .kid__leg--l[b-dm7jflo86o] {
    animation: kid-tuck-l-b-dm7jflo86o 0.9s ease-in-out infinite;
}

.kid[data-motion="dance"] .kid__leg--r[b-dm7jflo86o] {
    animation: kid-tuck-r-b-dm7jflo86o 0.9s ease-in-out infinite;
}

.kid[data-motion="dance"] .kid__head[b-dm7jflo86o] {
    animation: kid-bob-b-dm7jflo86o 1.8s ease-in-out infinite;
}

/* Three somersaults: crouch, spring up turning over, land, three times, then stand still (plays once). The whole figure
   turns around its middle; the arms stay up as if cheering. */
.kid[data-motion="flip"] .kid__svg[b-dm7jflo86o] {
    transform-origin: 50% 58%;
    animation: kid-flip-b-dm7jflo86o 2.4s cubic-bezier(0.45, 0, 0.3, 1) both;
}

.kid[data-motion="flip"] .kid__arm--l[b-dm7jflo86o] { transform: rotate(135deg); }
.kid[data-motion="flip"] .kid__arm--r[b-dm7jflo86o] { transform: rotate(-135deg); }

/* In the background (Android) or a hidden tab nothing moves; it carries on if it is still on screen when the app returns. */
html[data-app-hidden] .kid *[b-dm7jflo86o] {
    animation-play-state: paused !important;
}

/* Still: no motion at all; the dance becomes a happy pose with both arms up. */
.kid[data-static="true"] *[b-dm7jflo86o] {
    animation: none !important;
}

.kid[data-static="true"][data-motion="dance"] .kid__arm--l[b-dm7jflo86o] { transform: rotate(135deg); }
.kid[data-static="true"][data-motion="dance"] .kid__arm--r[b-dm7jflo86o] { transform: rotate(-135deg); }
.kid[data-static="true"][data-motion="encourage"] .kid__arm--r[b-dm7jflo86o] { transform: rotate(-150deg); }
.kid[data-static="true"][data-motion="point"] .kid__arm--r[b-dm7jflo86o] { transform: rotate(-88deg); }
.kid[data-static="true"][data-motion="flip"] .kid__svg[b-dm7jflo86o] { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .kid *[b-dm7jflo86o] {
        animation: none !important;
    }

    .kid[data-motion="dance"] .kid__arm--l[b-dm7jflo86o] { transform: rotate(135deg); }
    .kid[data-motion="dance"] .kid__arm--r[b-dm7jflo86o] { transform: rotate(-135deg); }
    .kid[data-motion="encourage"] .kid__arm--r[b-dm7jflo86o] { transform: rotate(-150deg); }
    .kid[data-motion="point"] .kid__arm--r[b-dm7jflo86o] { transform: rotate(-88deg); }
}

@keyframes kid-flip-b-dm7jflo86o {
    0% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    5% { transform: translateY(4%) rotate(0deg) scale(1.06, 0.9); }
    20% { transform: translateY(-38%) rotate(-180deg) scale(1, 1); }
    33% { transform: translateY(0) rotate(-360deg) scale(1, 1); }
    38% { transform: translateY(4%) rotate(-360deg) scale(1.06, 0.9); }
    53% { transform: translateY(-38%) rotate(-540deg) scale(1, 1); }
    66% { transform: translateY(0) rotate(-720deg) scale(1, 1); }
    71% { transform: translateY(4%) rotate(-720deg) scale(1.06, 0.9); }
    86% { transform: translateY(-38%) rotate(-900deg) scale(1, 1); }
    96% { transform: translateY(0) rotate(-1080deg) scale(1.05, 0.94); }
    100% { transform: translateY(0) rotate(-1080deg) scale(1, 1); }
}

@keyframes kid-beckon-b-dm7jflo86o {
    0%, 62%, 100% { transform: rotate(-88deg); }
    67% { transform: rotate(-150deg); }
    72% { transform: rotate(-118deg); }
    77% { transform: rotate(-150deg); }
    82% { transform: rotate(-118deg); }
    88% { transform: rotate(-88deg); }
}

@keyframes kid-blink-b-dm7jflo86o {
    0%, 95%, 100% { transform: none; }
    97% { transform: scaleY(0.1); }
}

@keyframes kid-breathe-b-dm7jflo86o {
    0%, 100% { transform: none; }
    50% { transform: translateY(1px) scale(1.01, 0.99); }
}

@keyframes kid-wave-b-dm7jflo86o {
    0% { transform: none; }
    16% { transform: rotate(-150deg); }
    30% { transform: rotate(-118deg); }
    44% { transform: rotate(-150deg); }
    58% { transform: rotate(-118deg); }
    72% { transform: rotate(-150deg); }
    100% { transform: none; }
}

@keyframes kid-tilt-b-dm7jflo86o {
    0%, 100% { transform: none; }
    20%, 80% { transform: rotate(6deg); }
}

@keyframes kid-pump-b-dm7jflo86o {
    0% { transform: none; }
    18% { transform: rotate(-165deg); }
    32% { transform: rotate(-125deg); }
    48% { transform: rotate(-165deg); }
    62% { transform: rotate(-125deg); }
    100% { transform: none; }
}

@keyframes kid-nod-b-dm7jflo86o {
    0%, 100% { transform: none; }
    18%, 48% { transform: rotate(-4deg) translateY(1px); }
    32%, 62% { transform: rotate(3deg); }
}

@keyframes kid-hop-small-b-dm7jflo86o {
    0%, 100% { transform: none; }
    18%, 48% { transform: translateY(-4px); }
    32%, 62% { transform: none; }
}

@keyframes kid-jump-b-dm7jflo86o {
    0%, 100% { transform: none; }
    15% { transform: translateY(2px) scale(1.06, 0.92); }
    50% { transform: translateY(-18px) scale(0.97, 1.04); }
    80% { transform: translateY(1px) scale(1.04, 0.95); }
}

@keyframes kid-shadow-b-dm7jflo86o {
    0%, 100% { transform: none; opacity: 1; }
    50% { transform: scaleX(0.65); opacity: 0.6; }
}

@keyframes kid-cheer-l-b-dm7jflo86o {
    0%, 100% { transform: rotate(25deg); }
    50% { transform: rotate(150deg); }
}

@keyframes kid-cheer-r-b-dm7jflo86o {
    0%, 100% { transform: rotate(-25deg); }
    50% { transform: rotate(-150deg); }
}

@keyframes kid-tuck-l-b-dm7jflo86o {
    0%, 30%, 70%, 100% { transform: none; }
    50% { transform: rotate(14deg) translateY(-3px); }
}

@keyframes kid-tuck-r-b-dm7jflo86o {
    0%, 30%, 70%, 100% { transform: none; }
    50% { transform: rotate(-14deg) translateY(-3px); }
}

@keyframes kid-bob-b-dm7jflo86o {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(6deg); }
}
/* /Components/Ui/KindnessGardenScene.razor.rz.scp.css */
/* Every colour in this file comes from the active theme's tokens, so the garden follows the child's theme in light and dark.
   The picture (.kindness-garden__scene) is kept clean: the only things over it are a small count chip and the plants. The
   controls and the legend sit in their own bar underneath, so nothing hides the sun, the pond or the trees. */
.kindness-garden[b-an2q7dv1wz] {
    --g-sky-top: color-mix(in srgb, var(--accent-teal, var(--primary)) 38%, var(--surface));
    --g-sky-low: color-mix(in srgb, var(--accent-yellow, var(--primary)) 34%, var(--surface));
    --g-sun: var(--accent-yellow, var(--primary));
    --g-hill-back: color-mix(in srgb, var(--accent-green, var(--primary)) 40%, var(--surface));
    --g-hill-mid: color-mix(in srgb, var(--accent-green, var(--primary)) 60%, var(--surface));
    --g-hill-front: color-mix(in srgb, var(--accent-green, var(--primary)) 82%, var(--foreground) 6%);
    --g-leaf-dark: color-mix(in srgb, var(--accent-green, var(--primary)) 76%, var(--foreground) 24%);
    --g-leaf: color-mix(in srgb, var(--accent-green, var(--primary)) 90%, var(--foreground) 10%);
    --g-leaf-mid: var(--accent-green, var(--primary));
    --g-leaf-light: color-mix(in srgb, var(--accent-green, var(--primary)) 70%, var(--accent-yellow, #fff) 30%);
    --g-trunk: color-mix(in srgb, var(--accent-orange, var(--primary)) 42%, var(--foreground) 40%);
    --g-trunk-ring: color-mix(in srgb, var(--g-trunk) 55%, var(--foreground));
    --g-fruit: color-mix(in srgb, var(--accent-orange, var(--primary)) 88%, var(--foreground) 12%);
    --g-fruit-b: color-mix(in srgb, var(--accent-orange, var(--primary)) 60%, var(--foreground) 40%);
    --g-bloom: color-mix(in srgb, var(--accent-pink, var(--primary)) 92%, var(--foreground) 8%);
    --g-bloom-b: color-mix(in srgb, var(--accent-yellow, var(--primary)) 90%, var(--foreground) 10%);
    --g-water: color-mix(in srgb, var(--accent-teal, var(--primary)) 70%, var(--surface));
    --g-shadow: color-mix(in srgb, var(--foreground) 22%, transparent);

    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 1.6rem;
    background: var(--surface);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 10%, transparent);
    user-select: none;
}

.dark .kindness-garden[b-an2q7dv1wz] {
    --g-sky-top: color-mix(in srgb, var(--accent-teal, var(--primary)) 16%, var(--background, var(--surface)) 84%);
    --g-sky-low: color-mix(in srgb, var(--primary) 24%, var(--background, var(--surface)) 76%);
    --g-sun: color-mix(in srgb, var(--foreground) 85%, var(--accent-yellow, #fff) 15%);
    --g-hill-back: color-mix(in srgb, var(--accent-green, var(--primary)) 26%, var(--background, var(--surface)));
    --g-hill-mid: color-mix(in srgb, var(--accent-green, var(--primary)) 40%, var(--background, var(--surface)));
    --g-hill-front: color-mix(in srgb, var(--accent-green, var(--primary)) 54%, var(--background, var(--surface)));
    --g-shadow: color-mix(in srgb, var(--background, #000) 55%, transparent);
}

/* The picture */
.kindness-garden__scene[b-an2q7dv1wz] {
    position: relative;
    overflow: hidden;
    min-height: 17rem;
}

.kindness-garden--enlarged .kindness-garden__scene[b-an2q7dv1wz] {
    min-height: 26rem;
}

.kindness-garden__sky[b-an2q7dv1wz] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, var(--g-sky-top) 0%, var(--g-sky-low) 58%, var(--g-hill-back) 100%);
}

/* Fine stars: only visible at night (dark mode). */
.kindness-garden__stars[b-an2q7dv1wz] {
    position: absolute;
    inset: 0 0 45% 0;
    opacity: 0;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 22%, var(--g-sun) 60%, transparent 62%),
        radial-gradient(1px 1px at 27% 58%, var(--g-sun) 60%, transparent 62%),
        radial-gradient(1.6px 1.6px at 44% 18%, var(--g-sun) 60%, transparent 62%),
        radial-gradient(1px 1px at 61% 48%, var(--g-sun) 60%, transparent 62%),
        radial-gradient(1.4px 1.4px at 78% 24%, var(--g-sun) 60%, transparent 62%),
        radial-gradient(1px 1px at 90% 62%, var(--g-sun) 60%, transparent 62%),
        radial-gradient(1.2px 1.2px at 70% 10%, var(--g-sun) 60%, transparent 62%),
        radial-gradient(1.8px 1.8px at 6% 48%, var(--g-sun) 60%, transparent 62%),
        radial-gradient(1.2px 1.2px at 36% 36%, var(--g-sun) 60%, transparent 62%),
        radial-gradient(1.8px 1.8px at 54% 66%, var(--g-sun) 60%, transparent 62%),
        radial-gradient(1.2px 1.2px at 84% 44%, var(--g-sun) 60%, transparent 62%),
        radial-gradient(1.6px 1.6px at 96% 16%, var(--g-sun) 60%, transparent 62%);
    animation: garden-twinkle-b-an2q7dv1wz 3.2s ease-in-out infinite alternate;
}

.kindness-garden__stars[b-an2q7dv1wz]::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 20% 14%, var(--g-sun) 55%, transparent 60%),
        radial-gradient(2px 2px at 66% 28%, var(--g-sun) 55%, transparent 60%),
        radial-gradient(2px 2px at 88% 52%, var(--g-sun) 55%, transparent 60%),
        radial-gradient(2px 2px at 38% 60%, var(--g-sun) 55%, transparent 60%);
    animation: garden-twinkle-b-an2q7dv1wz 2.1s ease-in-out infinite alternate-reverse;
}

.dark .kindness-garden__stars[b-an2q7dv1wz] {
    opacity: 1;
    inset-block-end: 35%;
}

.kindness-garden__sun-glow[b-an2q7dv1wz] {
    position: absolute;
    top: 5%;
    inset-inline-start: 9%;
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--g-sun) 75%, transparent) 0%, color-mix(in srgb, var(--g-sun) 24%, transparent) 55%, transparent 72%);
    animation: garden-glow-b-an2q7dv1wz 6s ease-in-out infinite alternate;
}

.kindness-garden__sun-core[b-an2q7dv1wz] {
    position: absolute;
    top: calc(5% + 2.05rem);
    inset-inline-start: calc(9% + 2.05rem);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: var(--g-sun);
    box-shadow: 0 0 1.3rem color-mix(in srgb, var(--g-sun) 75%, transparent);
}

/* Slowly turning rays around the sun. */
.kindness-garden__sun-core[b-an2q7dv1wz]::before {
    content: "";
    position: absolute;
    inset: -1.1rem;
    border-radius: 999px;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--g-sun) 55%, transparent) 0 6deg, transparent 6deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 46%, black 48% 100%);
    mask: radial-gradient(circle, transparent 0 46%, black 48% 100%);
    animation: garden-rays-b-an2q7dv1wz 40s linear infinite;
}

/* The moon is only there at night. */
.kindness-garden__moon[b-an2q7dv1wz] {
    position: absolute;
    display: none;
    top: calc(5% + 1.7rem);
    inset-inline-start: calc(9% + 1.7rem);
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 999px;
    background: var(--g-sun);
    -webkit-mask: radial-gradient(circle at 72% 34%, transparent 0 52%, black 54% 100%);
    mask: radial-gradient(circle at 72% 34%, transparent 0 52%, black 54% 100%);
    filter: drop-shadow(0 0 0.7rem color-mix(in srgb, var(--g-sun) 60%, transparent));
}

.dark .kindness-garden__sun-core[b-an2q7dv1wz],
.dark .kindness-garden__birds[b-an2q7dv1wz] {
    display: none;
}

.dark .kindness-garden__moon[b-an2q7dv1wz] {
    display: block;
}

.dark .kindness-garden__sun-glow[b-an2q7dv1wz] {
    top: calc(5% - 0.6rem);
    inset-inline-start: calc(9% - 0.6rem);
    opacity: 0.55;
}

/* Birds fly across the sky from one side of the picture and leave it, then others follow. */
.kindness-garden__birds[b-an2q7dv1wz] {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.garden-bird[b-an2q7dv1wz] {
    position: absolute;
    left: -12%;
    width: 1.9rem;
    height: 0.8rem;
    fill: none;
    stroke: color-mix(in srgb, var(--foreground) 85%, transparent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: garden-fly-b-an2q7dv1wz 16s linear infinite, garden-flap-b-an2q7dv1wz 0.55s ease-in-out infinite alternate;
    transform-origin: 50% 80%;
}

.garden-bird--1[b-an2q7dv1wz] { top: 16%; animation-duration: 15s, 0.5s; }
.garden-bird--2[b-an2q7dv1wz] { top: 27%; width: 1.2rem; animation-duration: 19s, 0.45s; animation-delay: 4s, 0s; }
.garden-bird--3[b-an2q7dv1wz] { top: 11%; width: 1rem; animation-duration: 23s, 0.4s; animation-delay: 9s, 0s; }
.garden-bird--4[b-an2q7dv1wz] { top: 33%; width: 1.35rem; animation-duration: 17s, 0.5s; animation-delay: 12s, 0.1s; }

@keyframes garden-fly-b-an2q7dv1wz {
    0% { left: -12%; translate: 0 0; }
    25% { translate: 0 -0.5rem; }
    50% { translate: 0 0.3rem; }
    75% { translate: 0 -0.4rem; }
    100% { left: 112%; translate: 0 0; }
}

@keyframes garden-flap-b-an2q7dv1wz {
    from { transform: scaleY(1); }
    to { transform: scaleY(0.35); }
}

@keyframes garden-rays-b-an2q7dv1wz {
    to { transform: rotate(360deg); }
}

.kindness-garden__clouds[b-an2q7dv1wz] {
    position: absolute;
    inset-inline: 0;
    top: 8%;
    height: 3.4rem;
}

.garden-cloud[b-an2q7dv1wz] {
    position: absolute;
    height: 1.1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    animation: garden-drift-b-an2q7dv1wz 38s ease-in-out infinite alternate;
}

.garden-cloud[b-an2q7dv1wz]::before {
    content: "";
    position: absolute;
    inset-block-end: 45%;
    inset-inline-start: 22%;
    width: 46%;
    height: 130%;
    border-radius: 999px;
    background: inherit;
}

.dark .garden-cloud[b-an2q7dv1wz] {
    background: color-mix(in srgb, var(--foreground) 10%, transparent);
}

.garden-cloud--1[b-an2q7dv1wz] {
    top: 18%;
    inset-inline-start: 42%;
    width: 4.5rem;
}

.garden-cloud--2[b-an2q7dv1wz] {
    top: 52%;
    inset-inline-end: 8%;
    width: 5.5rem;
    animation-duration: 52s;
    animation-direction: alternate-reverse;
}

@keyframes garden-drift-b-an2q7dv1wz {
    from { transform: translateX(-0.9rem); }
    to { transform: translateX(0.9rem); }
}

@keyframes garden-glow-b-an2q7dv1wz {
    from { transform: scale(0.94); opacity: 0.8; }
    to { transform: scale(1.06); opacity: 1; }
}

@keyframes garden-twinkle-b-an2q7dv1wz {
    from { opacity: 0.35; }
    to { opacity: 0.95; }
}

/* Count chip: sits in the bar under the picture, beside the buttons. */
.kindness-garden__count[b-an2q7dv1wz] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
}

.garden-count__icon[b-an2q7dv1wz] {
    font-size: 1rem;
    line-height: 1;
}

.garden-count__num[b-an2q7dv1wz] {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.garden-count__label[b-an2q7dv1wz] {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--foreground);
}

/* Controls and legend: their own bar under the picture */
/* The count and the buttons share one row at every width: the count at the start (right in Arabic), the buttons at the far end. */
.kindness-garden__bar[b-an2q7dv1wz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-block-start: 1px solid var(--border);
    background: var(--surface);
}

.kindness-garden__bar .kindness-garden__legend[b-an2q7dv1wz] {
    flex: 1 1 100%;
}

.kindness-garden__tools[b-an2q7dv1wz] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-inline-start: auto;
}

.kindness-garden__count[b-an2q7dv1wz] {
    flex: 0 0 auto;
}

@media (max-width: 359px) {
    .kindness-garden__expand-btn span[b-an2q7dv1wz] {
        display: none;
    }

    .kindness-garden__legend-toggle[b-an2q7dv1wz],
    .kindness-garden__expand-btn[b-an2q7dv1wz] {
        padding-inline: 0.55rem;
    }
}

.kindness-garden__legend-toggle[b-an2q7dv1wz],
.kindness-garden__expand-btn[b-an2q7dv1wz] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.2rem;
    padding-inline: 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.kindness-garden__legend-toggle:hover[b-an2q7dv1wz],
.kindness-garden__expand-btn:hover[b-an2q7dv1wz] {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.kindness-garden__legend[b-an2q7dv1wz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 800;
}

.legend-item[b-an2q7dv1wz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.legend-icon[b-an2q7dv1wz] {
    font-size: 0.95rem;
}

.legend-text[b-an2q7dv1wz] {
    color: var(--foreground);
}

/* Stage & Ground */
.kindness-garden__stage[b-an2q7dv1wz] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.kindness-garden__ground[b-an2q7dv1wz] {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 66%;
    pointer-events: none;
}

.ground-hill[b-an2q7dv1wz] {
    position: absolute;
    border-start-start-radius: 50% 100%;
    border-start-end-radius: 50% 100%;
}

.ground-hill--back[b-an2q7dv1wz] {
    inset-inline: -18% -6%;
    bottom: 0;
    height: 92%;
    background: var(--g-hill-back);
}

.ground-hill--mid[b-an2q7dv1wz] {
    inset-inline: -6% -22%;
    bottom: 0;
    height: 64%;
    background: var(--g-hill-mid);
}

.ground-hill--front[b-an2q7dv1wz] {
    inset-inline: -12%;
    bottom: 0;
    height: 34%;
    background: var(--g-hill-front);
}

/* Wild flowers scattered on the front hill, so the garden is cheerful even with a few deeds. */
.ground-hill--front[b-an2q7dv1wz]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 14% 40%, var(--g-bloom) 0 2.2px, transparent 2.8px),
        radial-gradient(circle at 31% 68%, var(--g-bloom-b) 0 2px, transparent 2.6px),
        radial-gradient(circle at 47% 30%, var(--g-bloom) 0 2px, transparent 2.6px),
        radial-gradient(circle at 63% 62%, var(--g-bloom-b) 0 2.4px, transparent 3px),
        radial-gradient(circle at 78% 36%, var(--g-bloom) 0 2.2px, transparent 2.8px),
        radial-gradient(circle at 91% 66%, var(--g-bloom-b) 0 2px, transparent 2.6px);
}

/* A river that runs down from the pond to the front edge. Its water slides, so the garden feels alive. */
.ground-river[b-an2q7dv1wz] {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -46% 0;
    width: 26%;
    height: 44%;
    clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
    background:
        repeating-linear-gradient(180deg, color-mix(in srgb, var(--surface) 38%, transparent) 0 2px, transparent 2px 13px) 0 0 / 100% 26px,
        linear-gradient(180deg, var(--g-water), color-mix(in srgb, var(--g-water) 82%, var(--surface)));
    animation: garden-flow-b-an2q7dv1wz 2.4s linear infinite;
    opacity: 0.92;
}

@keyframes garden-flow-b-an2q7dv1wz {
    to { background-position: 0 26px, 0 0; }
}

/* The oasis pond: always in the middle of the garden, so it is a place even before the first deed. */
.ground-pond[b-an2q7dv1wz] {
    position: absolute;
    bottom: 30%;
    left: 50%;
    translate: -50% 0;
    width: 46%;
    height: 17%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 34% 32%, color-mix(in srgb, var(--foreground) 22%, var(--g-water)) 0 14%, transparent 15%),
        radial-gradient(ellipse at 50% 40%, var(--g-water) 0%, color-mix(in srgb, var(--g-water) 72%, var(--foreground)) 100%);
    box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--g-hill-mid) 70%, var(--accent-yellow, var(--surface)) 12%), 0 0.4rem 0.8rem color-mix(in srgb, var(--foreground) 14%, transparent);
    animation: garden-ripple-b-an2q7dv1wz 6s ease-in-out infinite alternate;
}

@keyframes garden-ripple-b-an2q7dv1wz {
    from { transform: scaleX(0.985); }
    to { transform: scaleX(1.015); }
}

.ground-tuft[b-an2q7dv1wz] {
    position: absolute;
    width: 1rem;
    height: 0.75rem;
    background:
        linear-gradient(115deg, transparent 44%, var(--g-leaf-light) 46% 56%, transparent 58%) 0 0 / 33% 100% repeat-x,
        linear-gradient(65deg, transparent 44%, var(--g-leaf) 46% 56%, transparent 58%) 0 0 / 33% 100% repeat-x;
}

.ground-tuft--1[b-an2q7dv1wz] { inset-inline-start: 9%; bottom: 10%; }
.ground-tuft--2[b-an2q7dv1wz] { inset-inline-start: 74%; bottom: 17%; transform: scale(1.2); }
.ground-tuft--3[b-an2q7dv1wz] { inset-inline-start: 33%; bottom: 6%; transform: scale(0.85); }

/* Fireflies at night. */
.ground-spark[b-an2q7dv1wz] {
    position: absolute;
    width: 0.24rem;
    height: 0.24rem;
    border-radius: 999px;
    background: var(--g-sun);
    opacity: 0;
    box-shadow: 0 0 0.45rem var(--g-sun);
}

.dark .ground-spark[b-an2q7dv1wz] {
    animation: garden-firefly-b-an2q7dv1wz 5.5s ease-in-out infinite;
}

.ground-spark--1[b-an2q7dv1wz] { inset-inline-start: 22%; bottom: 52%; }
.ground-spark--2[b-an2q7dv1wz] { inset-inline-start: 62%; bottom: 62%; animation-delay: 1.8s; }
.ground-spark--3[b-an2q7dv1wz] { inset-inline-start: 84%; bottom: 44%; animation-delay: 3.4s; }

@keyframes garden-firefly-b-an2q7dv1wz {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    45% { opacity: 0.95; transform: translate(0.4rem, -0.5rem); }
    75% { opacity: 0.4; transform: translate(-0.3rem, -0.9rem); }
}

/* Empty State: a quiet caption at the bottom, the picture stays visible above it. */
.kindness-garden__empty[b-an2q7dv1wz] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0.75rem;
    text-align: center;
}

.garden-empty__content[b-an2q7dv1wz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 22rem;
    padding: 0.55rem 1rem;
    border-radius: 1.2rem;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
}

.garden-empty__seed-icon[b-an2q7dv1wz] {
    display: inline-flex;
    font-size: 1.8rem;
    animation: seed-bob-b-an2q7dv1wz 2.8s ease-in-out infinite alternate;
}

@keyframes seed-bob-b-an2q7dv1wz {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}

.garden-empty__title[b-an2q7dv1wz] {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--foreground);
}

.garden-empty__desc[b-an2q7dv1wz] {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--muted-foreground);
    line-height: 1.35;
}

/* Flora composition */
.kindness-garden__flora[b-an2q7dv1wz] {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding-inline: 0.85rem;
    padding-block-end: 0.5rem;
}

.flora-layer[b-an2q7dv1wz] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-around;
    gap: 0.4rem 0.65rem;
    width: 100%;
}

.flora-layer--groves[b-an2q7dv1wz] {
    margin-block-end: -0.8rem;
    z-index: 1;
}

.flora-layer--palms[b-an2q7dv1wz] {
    margin-block-end: -0.6rem;
    z-index: 2;
}

.flora-layer--shrubs[b-an2q7dv1wz] {
    margin-block-end: -0.3rem;
    z-index: 3;
}

.flora-layer--buds[b-an2q7dv1wz] {
    z-index: 4;
}

/* Plants */
.plant[b-an2q7dv1wz] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    outline: none;
}

.plant:hover[b-an2q7dv1wz],
.plant:focus-visible[b-an2q7dv1wz] {
    transform: scale(1.12);
}

.plant:focus-visible[b-an2q7dv1wz] {
    filter: drop-shadow(0 0 6px var(--primary));
}

.plant__tag[b-an2q7dv1wz] {
    position: absolute;
    bottom: -0.2rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--foreground);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    white-space: nowrap;
}

.plant:hover .plant__tag[b-an2q7dv1wz],
.plant:focus-visible .plant__tag[b-an2q7dv1wz] {
    opacity: 1;
    transform: translateY(0);
}

/* SVG parts take their colours from the garden palette above. */
.plant .g-leaf[b-an2q7dv1wz] { fill: var(--g-leaf); }
.plant .g-leaf--dark[b-an2q7dv1wz] { fill: var(--g-leaf-dark); }
.plant .g-leaf--mid[b-an2q7dv1wz] { fill: var(--g-leaf-mid); }
.plant .g-leaf--light[b-an2q7dv1wz] { fill: var(--g-leaf-light); }
.plant .g-frond[b-an2q7dv1wz] { fill: var(--g-leaf); }
.plant .g-frond--dark[b-an2q7dv1wz] { fill: var(--g-leaf-dark); }
.plant .g-frond--light[b-an2q7dv1wz] { fill: var(--g-leaf-light); }
.plant .g-trunk[b-an2q7dv1wz] { fill: none; stroke: var(--g-trunk); stroke-width: 3.4; stroke-linecap: round; }
.plant .g-trunk--thick[b-an2q7dv1wz] { stroke-width: 4.4; }
.plant .g-trunk-rings[b-an2q7dv1wz] { fill: none; stroke: var(--g-trunk-ring); stroke-width: 0.9; stroke-linecap: round; opacity: 0.55; }
.plant .g-stem[b-an2q7dv1wz] { fill: none; stroke: var(--g-leaf-dark); stroke-width: 1.8; stroke-linecap: round; }
.plant .g-fruit[b-an2q7dv1wz] { fill: var(--g-fruit); }
.plant .g-fruit--b[b-an2q7dv1wz] { fill: var(--g-fruit-b); }
.plant .g-bloom[b-an2q7dv1wz] { fill: var(--g-bloom); }
.plant .g-bloom--b[b-an2q7dv1wz] { fill: var(--g-bloom-b); }
.plant .g-glow[b-an2q7dv1wz] { fill: color-mix(in srgb, var(--g-bloom-b) 38%, transparent); }
.plant .g-water[b-an2q7dv1wz] { fill: var(--g-water); opacity: 0.85; }
.plant .g-water-shine[b-an2q7dv1wz] { fill: color-mix(in srgb, var(--surface) 70%, transparent); }
.plant .g-shadow[b-an2q7dv1wz] { fill: var(--g-shadow); }

.plant .g-sway[b-an2q7dv1wz] {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: garden-sway-b-an2q7dv1wz 5.5s ease-in-out infinite alternate;
}

.flora-layer .plant:nth-child(2n) .g-sway[b-an2q7dv1wz] { animation-duration: 6.8s; animation-delay: -1.7s; }
.flora-layer .plant:nth-child(3n) .g-sway[b-an2q7dv1wz] { animation-duration: 4.9s; animation-delay: -3.1s; }

@keyframes garden-sway-b-an2q7dv1wz {
    from { transform: rotate(-2.2deg); }
    to { transform: rotate(2.2deg); }
}

.plant--grove .grove-svg[b-an2q7dv1wz] {
    width: 5.5rem;
    height: 3.2rem;
    filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--foreground) 18%, transparent));
}

.plant--palm .palm-svg[b-an2q7dv1wz] {
    width: 2.8rem;
    height: 3.8rem;
    filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--foreground) 15%, transparent));
}

.plant--shrub .shrub-svg[b-an2q7dv1wz] {
    width: 2.2rem;
    height: 1.9rem;
    filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--foreground) 12%, transparent));
}

.plant--bud .bud-svg[b-an2q7dv1wz] {
    width: 1.5rem;
    height: 1.6rem;
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--foreground) 12%, transparent));
}

.plant.is-growing[b-an2q7dv1wz] {
    animation: plant-pulse-b-an2q7dv1wz 2s ease-in-out infinite;
}

@keyframes plant-pulse-b-an2q7dv1wz {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px color-mix(in srgb, var(--primary) 40%, transparent));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 12px color-mix(in srgb, var(--primary) 85%, transparent));
    }
}

/* When the garden opens, every plant pops up from the soil one after another. The newest one then gets its longer growth replay below. */
.plant.plant--enter[b-an2q7dv1wz] {
    animation: plant-enter-b-an2q7dv1wz 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(var(--i, 0) * 110ms);
    transform-origin: bottom center;
}

@keyframes plant-enter-b-an2q7dv1wz {
    from { opacity: 0; transform: scale(0.2) translateY(0.6rem); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.plant.is-growth-replay[b-an2q7dv1wz] {
    animation: plant-growth-replay-b-an2q7dv1wz 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: bottom center;
}

@keyframes plant-growth-replay-b-an2q7dv1wz {
    0% {
        opacity: 0.35;
        transform: scale(0.4) translateY(6px);
        filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent-green, var(--primary)) 80%, transparent));
    }
    40% {
        opacity: 1;
        transform: scale(1.15) translateY(-3px);
        filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent-yellow, var(--primary)) 90%, transparent));
    }
    70% {
        transform: scale(0.96) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .plant.is-growth-replay[b-an2q7dv1wz] {
        animation: plant-growth-reduced-b-an2q7dv1wz 2s ease-in-out forwards !important;
        transform: none !important;
    }

    @keyframes plant-growth-reduced-b-an2q7dv1wz {
        0% { opacity: 0.4; filter: drop-shadow(0 0 6px var(--accent-green, var(--primary))); }
        50% { opacity: 1; filter: drop-shadow(0 0 12px var(--accent-yellow, var(--primary))); }
        100% { opacity: 1; filter: none; }
    }

    .kindness-garden__stars[b-an2q7dv1wz],
    .kindness-garden__sun-glow[b-an2q7dv1wz],
    .garden-cloud[b-an2q7dv1wz],
    .ground-pond[b-an2q7dv1wz],
    .ground-river[b-an2q7dv1wz],
    .garden-bird[b-an2q7dv1wz],
    .kindness-garden__sun-core[b-an2q7dv1wz]::before,
    .kindness-garden__stars[b-an2q7dv1wz]::after,
    .ground-spark[b-an2q7dv1wz],
    .plant .g-sway[b-an2q7dv1wz],
    .plant.is-growing[b-an2q7dv1wz],
    .plant.plant--enter[b-an2q7dv1wz],
    .garden-empty__seed-icon[b-an2q7dv1wz] {
        animation: none !important;
    }
}

.plant-overflow-badge[b-an2q7dv1wz] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1.5px solid var(--primary);
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--primary);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--foreground) 8%, transparent);
}

/* Tablet & larger viewports */
@media (min-width: 600px) {
    .kindness-garden__scene[b-an2q7dv1wz] {
        min-height: 20rem;
    }

    .kindness-garden--enlarged .kindness-garden__scene[b-an2q7dv1wz] {
        min-height: 28rem;
    }

    .plant--grove .grove-svg[b-an2q7dv1wz] {
        width: 6.8rem;
        height: 3.9rem;
    }

    .plant--palm .palm-svg[b-an2q7dv1wz] {
        width: 3.3rem;
        height: 4.5rem;
    }

    .plant--shrub .shrub-svg[b-an2q7dv1wz] {
        width: 2.6rem;
        height: 2.3rem;
    }

    .plant--bud .bud-svg[b-an2q7dv1wz] {
        width: 1.8rem;
        height: 1.9rem;
    }
}
/* /Components/Ui/PlaySummaryCard.razor.rz.scp.css */
.child-profile__spinner[b-wcbffg335p] {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    animation: child-profile-spin-b-wcbffg335p 0.7s linear infinite;
}

/* ---- Play summary section ---- */
.child-profile__play-card[b-wcbffg335p] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    color: var(--foreground);
}

.child-profile__play-head[b-wcbffg335p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.child-profile__play-title-group[b-wcbffg335p] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.child-profile__play-icon[b-wcbffg335p] {
    font-size: 1.4rem;
    line-height: 1;
}

.child-profile__play-title[b-wcbffg335p] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--foreground);
}

.child-profile__play-sub[b-wcbffg335p] {
    margin: 0.1rem 0 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.child-profile__play-links[b-wcbffg335p] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.child-profile__play-pill[b-wcbffg335p] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in oklch, var(--muted) 40%, var(--surface));
    color: var(--foreground);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.child-profile__play-pill:hover[b-wcbffg335p] {
    background: color-mix(in oklch, var(--primary) 12%, var(--surface));
    border-color: color-mix(in oklch, var(--primary) 30%, var(--border));
}

.child-profile__play-loading[b-wcbffg335p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    justify-content: center;
}

.child-profile__play-error[b-wcbffg335p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    background: color-mix(in oklch, var(--destructive, #ef4444) 10%, var(--surface));
    border: 1px solid color-mix(in oklch, var(--destructive, #ef4444) 30%, transparent);
}

.child-profile__play-error-text[b-wcbffg335p] {
    font-size: 0.85rem;
    color: var(--destructive, #dc2626);
    font-weight: 700;
}

.child-profile__play-retry[b-wcbffg335p] {
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.child-profile__play-metrics[b-wcbffg335p] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

@media (max-width: 599px) {
    .child-profile__play-metrics[b-wcbffg335p] {
        grid-template-columns: 1fr;
    }
}

.child-profile__play-stat[b-wcbffg335p] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.75rem;
    background: color-mix(in oklch, var(--muted) 35%, var(--surface));
    border: 1px solid var(--border);
}

.child-profile__play-stat.is-available[b-wcbffg335p] {
    background: color-mix(in oklch, var(--primary) 10%, var(--surface));
    border-color: color-mix(in oklch, var(--primary) 25%, var(--border));
}

.child-profile__play-stat.is-exhausted[b-wcbffg335p] {
    background: color-mix(in oklch, var(--destructive, #ef4444) 8%, var(--surface));
    border-color: color-mix(in oklch, var(--destructive, #ef4444) 25%, transparent);
}

.child-profile__play-stat-label[b-wcbffg335p] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.child-profile__play-stat-value[b-wcbffg335p] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--foreground);
}

.child-profile__play-stat.is-available .child-profile__play-stat-value[b-wcbffg335p] {
    color: var(--primary);
}

.child-profile__play-stat.is-exhausted .child-profile__play-stat-value[b-wcbffg335p] {
    color: var(--destructive, #dc2626);
}

.child-profile__play-stat-hint[b-wcbffg335p] {
    font-size: 0.7rem;
    color: var(--muted-foreground);
}

.child-profile__play-activity[b-wcbffg335p] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.child-profile__play-activity-title[b-wcbffg335p] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--muted-foreground);
}

.child-profile__play-empty[b-wcbffg335p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    background: color-mix(in oklch, var(--muted) 20%, var(--surface));
    border: 1px dashed var(--border);
}

.child-profile__play-empty-icon[b-wcbffg335p] {
    font-size: 1.35rem;
    line-height: 1;
}

.child-profile__play-empty-title[b-wcbffg335p] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--foreground);
}

.child-profile__play-empty-desc[b-wcbffg335p] {
    margin: 0.1rem 0 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.child-profile__play-games-list[b-wcbffg335p] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.child-profile__play-game-item[b-wcbffg335p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: 0.75rem;
    background: color-mix(in oklch, var(--muted) 20%, var(--surface));
    border: 1px solid var(--border);
}

.child-profile__play-game-meta[b-wcbffg335p] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.child-profile__play-game-badge[b-wcbffg335p] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--primary) 14%, var(--surface));
    font-size: 1.05rem;
}

.child-profile__play-game-info[b-wcbffg335p] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.child-profile__play-game-name[b-wcbffg335p] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--foreground);
}

.child-profile__play-game-rounds[b-wcbffg335p] {
    font-size: 0.72rem;
    color: var(--muted-foreground);
}

.child-profile__play-game-duration[b-wcbffg335p] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--foreground);
}

@keyframes child-profile-spin-b-wcbffg335p {
    to { transform: rotate(360deg); }
}
/* /Components/Ui/ReviewCard.razor.rz.scp.css */
.review-card[b-3pbuk1eyal] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    height: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    color: var(--foreground);
    box-shadow: none;
}

.review-card[b-3pbuk1eyal]  .rvc__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.review-card[b-3pbuk1eyal]  .rvc__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.8rem;
    background: color-mix(in oklch, var(--primary) 14%, transparent);
    font-size: 1.3rem;
}

.review-card[b-3pbuk1eyal]  .rvc__titles {
    min-width: 0;
}

.review-card[b-3pbuk1eyal]  .rvc__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.review-card[b-3pbuk1eyal]  .rvc__child {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.review-card[b-3pbuk1eyal]  .rvc__stars {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--primary) 16%, transparent);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.review-card[b-3pbuk1eyal]  .rvc__meta {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted-foreground);
}

.review-card[b-3pbuk1eyal]  .rvc__checks {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.review-card[b-3pbuk1eyal]  .rvc__checks li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
}

.review-card[b-3pbuk1eyal]  .rvc__checks li.is-done .rvc__check-title {
    color: var(--muted-foreground);
}

.review-card[b-3pbuk1eyal]  .rvc__check-title {
    flex: 1;
    min-width: 0;
}

.review-card[b-3pbuk1eyal]  .rvc__checks small {
    color: var(--muted-foreground);
    font-weight: 700;
}

.review-card[b-3pbuk1eyal]  .rvc__child-note {
    margin: 0;
    padding: 0.5rem 0.7rem;
    border-radius: 0.75rem;
    background: color-mix(in oklch, var(--primary) 8%, var(--surface));
    font-size: 0.85rem;
    line-height: 1.45;
}

.review-card[b-3pbuk1eyal]  .rvc__child-note-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--muted-foreground);
}

.review-card[b-3pbuk1eyal]  .rvc__evidence {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.review-card[b-3pbuk1eyal]  .rvc__note {
    display: grid;
    gap: 0.3rem;
}

.review-card[b-3pbuk1eyal]  .rvc__note-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.review-card[b-3pbuk1eyal]  .rvc__textarea {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    resize: vertical;
}

.review-card[b-3pbuk1eyal]  .rvc__actions {
    display: flex;
    gap: 0.45rem;
    margin-top: auto;
}

.review-card[b-3pbuk1eyal]  .rvc__approve,
.review-card[b-3pbuk1eyal]  .rvc__retry,
.review-card[b-3pbuk1eyal]  .rvc__note-toggle {
    min-height: 2.75rem;
    border-radius: 0.8rem;
    font: inherit;
    cursor: pointer;
}

.review-card[b-3pbuk1eyal]  .rvc__approve {
    flex: 1.4 1 0;
    border: 0;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 800;
}

.review-card[b-3pbuk1eyal]  .rvc__retry {
    flex: 1 1 0;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    font-weight: 700;
}

.review-card[b-3pbuk1eyal]  .rvc__note-toggle {
    flex: 0 0 2.75rem;
    border: 1px solid var(--border);
    background: transparent;
    font-size: 1.05rem;
}

.review-card[b-3pbuk1eyal]  .rvc__note-toggle.is-on {
    border-color: var(--primary);
    background: color-mix(in oklch, var(--primary) 14%, transparent);
}

.review-card[b-3pbuk1eyal]  .rvc__approve:disabled,
.review-card[b-3pbuk1eyal]  .rvc__retry:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.review-card[b-3pbuk1eyal]  .rvc__approve:focus-visible,
.review-card[b-3pbuk1eyal]  .rvc__retry:focus-visible,
.review-card[b-3pbuk1eyal]  .rvc__note-toggle:focus-visible,
.review-card[b-3pbuk1eyal]  .rvc__textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.review-card[b-3pbuk1eyal]  .rvc__attempt {
    font-weight: 700;
}

.review-card[b-3pbuk1eyal]  .rvc__steps {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.review-card[b-3pbuk1eyal]  .rvc__step {
    display: grid;
    gap: 0.35rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--background);
}

.review-card[b-3pbuk1eyal]  .rvc__step.is-accepted {
    border-color: color-mix(in oklch, var(--primary) 35%, var(--border));
    background: color-mix(in oklch, var(--primary) 7%, var(--surface));
}

.review-card[b-3pbuk1eyal]  .rvc__step.is-closed {
    opacity: 0.7;
}

.review-card[b-3pbuk1eyal]  .rvc__step-title {
    font-size: 0.9rem;
    font-weight: 700;
}

.review-card[b-3pbuk1eyal]  .rvc__step-check {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    margin-inline-end: 0.45rem;
    vertical-align: -0.2rem;
    accent-color: var(--primary);
    pointer-events: none;
}

.review-card[b-3pbuk1eyal]  .rvc__step-title small {
    margin-inline-start: 0.35rem;
    color: var(--muted-foreground);
    font-weight: 800;
}

.review-card[b-3pbuk1eyal]  .rvc__child-claim,
.review-card[b-3pbuk1eyal]  .rvc__locked {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.review-card[b-3pbuk1eyal]  .rvc__step {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
}

.review-card[b-3pbuk1eyal]  .rvc__bulk {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
}

.review-card[b-3pbuk1eyal]  .rvc__bulk-label {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--muted-foreground);
}

.review-card[b-3pbuk1eyal]  .rvc__verdicts {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.15rem;
    padding: 0.15rem;
    border-radius: 0.7rem;
    background: color-mix(in oklch, var(--foreground) 7%, var(--surface));
}

.review-card[b-3pbuk1eyal]  .rvc__verdicts--bulk {
    display: grid;
}

.review-card[b-3pbuk1eyal]  .rvc__verdict {
    min-height: 2.25rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.review-card[b-3pbuk1eyal]  .rvc__verdicts--icons .rvc__verdict {
    min-width: 2.4rem;
    font-size: 1rem;
}

.review-card[b-3pbuk1eyal]  .rvc__verdict.is-on {
    border-color: transparent;
    font-weight: 800;
}

.review-card[b-3pbuk1eyal]  .rvc__verdict.is-accept {
    background: var(--primary);
    color: var(--primary-foreground);
}

.review-card[b-3pbuk1eyal]  .rvc__verdict.is-open {
    background: color-mix(in oklch, var(--foreground) 12%, var(--surface));
}

.review-card[b-3pbuk1eyal]  .rvc__verdict.is-close {
    background: color-mix(in oklch, var(--destructive) 16%, var(--surface));
    color: var(--destructive);
}

.review-card[b-3pbuk1eyal]  .rvc__verdict:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.review-card[b-3pbuk1eyal]  .rvc__link {
    align-self: start;
    min-height: 2.75rem;
    padding: 0 0.3rem;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.review-card[b-3pbuk1eyal]  .rvc__link--quiet {
    color: var(--muted-foreground);
    font-weight: 600;
}

.review-card[b-3pbuk1eyal]  .rvc__link:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.review-card[b-3pbuk1eyal]  .rvc__confirm {
    display: grid;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid color-mix(in oklch, var(--destructive) 35%, var(--border));
    border-radius: 0.8rem;
    background: color-mix(in oklch, var(--destructive) 6%, var(--surface));
    font-size: 0.85rem;
}

.review-card[b-3pbuk1eyal]  .rvc__confirm p {
    margin: 0;
}

.review-card[b-3pbuk1eyal]  .rvc__retry:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* One decision, three clear choices, then one send. The step-by-step detail stays folded away. */
.review-card[b-3pbuk1eyal]  .rvc__details {
    border: 1px dashed var(--border);
    border-radius: 0.8rem;
    padding: 0.4rem 0.7rem;
}

.review-card[b-3pbuk1eyal]  .rvc__details > summary {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted-foreground);
    min-height: 2.25rem;
    display: flex;
    align-items: center;
}

.review-card[b-3pbuk1eyal]  .rvc__choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem;
    padding: 0.2rem;
    border-radius: 0.8rem;
    background: color-mix(in oklch, var(--foreground) 7%, var(--surface));
}

.review-card[b-3pbuk1eyal]  .rvc__choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.2rem;
    border-radius: 0.6rem;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.review-card[b-3pbuk1eyal]  .rvc__choice.is-on {
    background: var(--surface);
    color: var(--foreground);
    box-shadow: 0 1px 3px color-mix(in oklch, var(--foreground) 22%, transparent);
}

.review-card[b-3pbuk1eyal]  .rvc__choice.is-on.rvc__choice--accept {
    background: var(--primary);
    color: var(--primary-foreground, #fff);
}

.review-card[b-3pbuk1eyal]  .rvc__choice:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.review-card[b-3pbuk1eyal]  .rvc__choice:disabled {
    opacity: 0.6;
}

.review-card[b-3pbuk1eyal]  .rvc__explain {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}

.review-card[b-3pbuk1eyal]  .rvc__stars-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin-top: 10px;
}

.review-card[b-3pbuk1eyal]  .rvc__stars-field {
    display: grid;
    gap: 4px;
    font-size: .9rem;
}

.review-card[b-3pbuk1eyal]  .rvc__stars-field input {
    width: 7rem;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    padding: 0 12px;
    font: inherit;
    text-align: center;
    color-scheme: inherit;
}

.review-card[b-3pbuk1eyal]  .rvc__stars-field small {
    max-width: 24rem;
    color: var(--muted-foreground);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
}

.review-card[b-3pbuk1eyal]  .rvc__stepper {
    display: inline-flex;
    align-items: stretch;
    gap: 6px;
}

.review-card[b-3pbuk1eyal]  .rvc__stepper-btn {
    width: 44px;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface, var(--background));
    color: var(--foreground);
    font: inherit;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.review-card[b-3pbuk1eyal]  .rvc__stepper-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.review-card[b-3pbuk1eyal]  .rvc__stepper input {
    width: 4.5rem;
    -moz-appearance: textfield;
}

.review-card[b-3pbuk1eyal]  .rvc__stepper input::-webkit-outer-spin-button,
.review-card[b-3pbuk1eyal]  .rvc__stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.review-card[b-3pbuk1eyal]  .rvc__late-note {
    flex-basis: 100%;
    color: var(--muted-foreground);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
}

.review-card[b-3pbuk1eyal]  .rvc__stars-full {
    min-height: 44px;
    border-radius: 12px;
    border: 1px dashed var(--ct-border, #c9b27a);
    background: transparent;
    padding: 0 14px;
    font: inherit;
    cursor: pointer;
}

.review-card[b-3pbuk1eyal]  .rvc__hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted-foreground);
}

.review-card[b-3pbuk1eyal]  .rvc__send {
    min-height: 3rem;
    border: 0;
    border-radius: 0.95rem;
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.review-card[b-3pbuk1eyal]  .rvc__send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.review-card[b-3pbuk1eyal]  .rvc__initiative {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--background));
    font-size: 0.88rem;
    font-weight: 700;
}

.review-card[b-3pbuk1eyal]  .rvc__initiative--thanks {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
}

.review-card[b-3pbuk1eyal]  .rvc__sub-meta {
    display: block;
    margin-block-start: 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.review-card[b-3pbuk1eyal]  .rvc__duplicate-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--warning, #eab308) 14%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--warning, #eab308) 40%, var(--border));
    color: var(--foreground);
    font-size: 0.84rem;
    font-weight: 700;
}

.review-card[b-3pbuk1eyal]  .rvc__initiative-text {
    margin: 0;
    white-space: pre-wrap;
}

.review-card[b-3pbuk1eyal]  .rvc__tags-edit {
    display: grid;
    gap: 0.35rem;
    margin-block-start: 0.25rem;
}

.review-card[b-3pbuk1eyal]  .rvc__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.review-card[b-3pbuk1eyal]  .rvc__tag-chip {
    display: inline-flex;
    align-items: center;
    padding-block: 0.15rem;
    padding-inline: 0.55rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--primary) 12%, var(--surface));
    color: var(--foreground);
    font-size: 0.76rem;
    font-weight: 700;
}

/* The fold arrow: the whole head opens or closes the card; the arrow turns up when it is open. */
.review-card[b-3pbuk1eyal]  .rvc__head--toggle {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    cursor: pointer;
}

.review-card[b-3pbuk1eyal]  .rvc__fold {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 0;
    border-radius: 0.8rem;
    background: color-mix(in oklch, var(--foreground) 6%, transparent);
    color: var(--muted-foreground);
    cursor: pointer;
    transition: transform 160ms ease;
}

.review-card.is-open[b-3pbuk1eyal]  .rvc__fold {
    transform: rotate(180deg);
}

.review-card[b-3pbuk1eyal]  .rvc__fold:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.review-card.is-folded[b-3pbuk1eyal] {
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .review-card[b-3pbuk1eyal]  .rvc__fold { transition: none; }
}
/* /Components/Ui/ReviewChildFilter.razor.rz.scp.css */
.rv-children[b-ljx1ix0n49] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.65rem;
    overflow-x: auto;
    padding: 0.25rem 0.25rem 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.rv-child-btn[b-ljx1ix0n49] {
    position: relative;
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    flex: none;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 999px;
    cursor: pointer;
    outline: none;
    transition: transform 0.15s ease;
}

.rv-child-btn:hover[b-ljx1ix0n49] {
    transform: scale(1.04);
}

.rv-child-btn__circle[b-ljx1ix0n49] {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    object-fit: cover;
    border-radius: 999px;
    border: 2px solid transparent;
    background: color-mix(in oklch, var(--primary) 18%, var(--surface));
    color: var(--foreground);
    font-weight: 800;
    font-size: 1.15rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rv-child-btn__circle--all[b-ljx1ix0n49] {
    font-size: 0.95rem;
    font-weight: 800;
    background: color-mix(in oklch, var(--foreground) 8%, var(--surface));
}

.rv-child-btn.is-active .rv-child-btn__circle[b-ljx1ix0n49] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 35%, transparent);
}

.rv-child-btn__badge[b-ljx1ix0n49] {
    position: absolute;
    inset-block-start: -0.2rem;
    inset-inline-end: -0.2rem;
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.72rem;
    font-weight: 800;
    border: 2px solid var(--background);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
/* /Components/Ui/ReviewRewardList.razor.rz.scp.css */
.rv-rewards[b-06vr1c6q5b] {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rv-reward[b-06vr1c6q5b] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--primary) 8%, var(--background));
}

.rv-reward__icon[b-06vr1c6q5b] {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border-radius: 0.8rem;
    background: var(--background);
    font-size: 1.4rem;
}

.rv-reward__text[b-06vr1c6q5b] {
    display: grid;
    gap: 0.15rem;
}

.rv-reward__text small[b-06vr1c6q5b],
.rv-reward__text em[b-06vr1c6q5b] {
    color: var(--muted-foreground);
    font-style: normal;
    font-size: 0.82rem;
}

.rv-reward__actions[b-06vr1c6q5b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    grid-column: 1 / -1;
}

.rv-reward__deliver[b-06vr1c6q5b],
.rv-reward__cancel[b-06vr1c6q5b] {
    padding: 0.45rem 0.8rem;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
}

.rv-reward__deliver[b-06vr1c6q5b] {
    background: var(--primary);
    color: var(--primary-foreground);
}

.rv-reward__cancel[b-06vr1c6q5b] {
    background: transparent;
    color: var(--foreground);
}
/* /Components/Ui/RewardBreakdownModal.razor.rz.scp.css */
/* ---- Reward Modal Content ---- */
.reward-modal-body[b-csip84qz2e] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reward-modal-hero[b-csip84qz2e] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border: 1px solid var(--border);
}

.reward-modal-thumb[b-csip84qz2e] {
    font-size: 2.2rem;
    line-height: 1;
}

.reward-modal-hero-text[b-csip84qz2e] {
    min-width: 0;
}

.reward-modal-title[b-csip84qz2e] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.reward-modal-sub[b-csip84qz2e] {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--muted-foreground);
}

.reward-modal-status[b-csip84qz2e] {
    padding: 0.8rem 1rem;
    border-radius: 1rem;
    font-size: 0.88rem;
    border: 1px solid transparent;
}

.reward-modal-status p[b-csip84qz2e] {
    margin: 0;
}

.reward-modal-status--ok[b-csip84qz2e] {
    background: color-mix(in srgb, #10b981 14%, var(--surface));
    color: color-mix(in srgb, #047857 85%, var(--foreground));
    border-color: color-mix(in srgb, #10b981 30%, var(--border));
}

.reward-modal-status--need[b-csip84qz2e] {
    background: color-mix(in srgb, #f59e0b 14%, var(--surface));
    color: color-mix(in srgb, #b45309 85%, var(--foreground));
    border-color: color-mix(in srgb, #f59e0b 30%, var(--border));
}

.reward-modal-breakdown[b-csip84qz2e] {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
}
/* /Components/Ui/RewardImagePicker.razor.rz.scp.css */
.reward-picker[b-iliclby36g] {
    display: grid;
    gap: 0.6rem;
    justify-items: center;
}

.reward-picker__frame[b-iliclby36g] {
    position: relative;
    display: grid;
    width: min(100%, 16rem);
    aspect-ratio: 4 / 3;
    place-items: center;
    overflow: hidden;
    border: 2px dashed var(--border);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--primary) 8%, var(--background));
}

.reward-picker__frame--square[b-iliclby36g] {
    width: min(70%, 11rem);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.reward-picker__frame img[b-iliclby36g] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reward-picker__empty[b-iliclby36g] {
    font-size: 3rem;
}

.reward-picker__busy[b-iliclby36g] {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.35rem;
    background: color-mix(in srgb, var(--foreground) 70%, transparent);
    color: var(--background);
    font-size: 0.85rem;
    text-align: center;
}

.reward-picker__actions[b-iliclby36g] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.reward-picker__btn[b-iliclby36g] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding: 0.4rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.reward-picker__btn--quiet[b-iliclby36g] {
    border-style: dashed;
    color: var(--muted-foreground);
}

.reward-picker__btn:focus-within[b-iliclby36g] {
    outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}

.reward-picker__input[b-iliclby36g] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(50%);
}

.reward-picker__error[b-iliclby36g] {
    margin: 0;
    color: var(--destructive, #c92a2a);
    font-weight: 700;
}
/* /Components/Ui/SendGiftSheet.razor.rz.scp.css */
.gift-form[b-rvowjmjgsl] {
    display: grid;
    gap: 0.9rem;
}

.gift-form__lead[b-rvowjmjgsl] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--background));
    font-size: 0.92rem;
}

.gift-form__lead > span:first-child[b-rvowjmjgsl] {
    font-size: 1.5rem;
    line-height: 1;
}

.gift-form__field[b-rvowjmjgsl] {
    display: grid;
    gap: 0.35rem;
}

.gift-form__field > span[b-rvowjmjgsl] {
    font-weight: 700;
}

.gift-form__field textarea[b-rvowjmjgsl],
.gift-form__field input[b-rvowjmjgsl] {
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
}

.gift-form__field textarea[b-rvowjmjgsl] {
    min-height: 5.5rem;
    resize: vertical;
}

.gift-form__field input[b-rvowjmjgsl] {
    max-width: 8rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 1.15rem;
}

.gift-form__count[b-rvowjmjgsl] {
    justify-self: end;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}

.gift-form__ideas[b-rvowjmjgsl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gift-form__idea[b-rvowjmjgsl] {
    min-height: 2.75rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
}

.gift-form__error[b-rvowjmjgsl] {
    margin: 0;
    color: var(--destructive, #c92a2a);
    font-weight: 700;
}

.gift-form__send[b-rvowjmjgsl] {
    min-height: 3rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.gift-form__send:disabled[b-rvowjmjgsl] {
    opacity: 0.55;
    cursor: default;
}

.gift-form__send:focus-visible[b-rvowjmjgsl],
.gift-form__idea:focus-visible[b-rvowjmjgsl],
.gift-form__field textarea:focus-visible[b-rvowjmjgsl],
.gift-form__field input:focus-visible[b-rvowjmjgsl] {
    outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}
/* /Components/Ui/SettingsPageLauncher.razor.rz.scp.css */
.ss__launch[b-gjv5psdj6f] {
    inline-size: 100%;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    border-radius: 1rem;
}

.ss__launch:hover[b-gjv5psdj6f] {
    background: color-mix(in oklch, var(--foreground) 4%, transparent);
}
/* /Components/Ui/StarsHistoryList.razor.rz.scp.css */
.stars-story[b-vzp9fnbcnb] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.story-day-head[b-vzp9fnbcnb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.45rem;
}

.story-day-label[b-vzp9fnbcnb] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--muted-foreground);
}

.story-day-total[b-vzp9fnbcnb] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--foreground);
}

.story-day-total.is-pos bdi[b-vzp9fnbcnb] {
    color: var(--primary);
}

.story-day-total.is-neg bdi[b-vzp9fnbcnb] {
    color: var(--muted-foreground);
}

.story-list[b-vzp9fnbcnb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.story-group[b-vzp9fnbcnb] {
    border-radius: 1.1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
}

.story-line[b-vzp9fnbcnb] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    border-radius: 1.1rem;
    border: 1px solid var(--border);
    background: var(--surface);
}

.story-line--toggle[b-vzp9fnbcnb] {
    appearance: none;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.story-line--toggle:hover[b-vzp9fnbcnb] {
    background: color-mix(in oklch, var(--primary) 6%, transparent);
}

.story-bubble[b-vzp9fnbcnb] {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    color: var(--primary);
    background: color-mix(in oklch, var(--quest-gold, var(--primary)) 35%, var(--surface));
}

.kind-gift .story-bubble[b-vzp9fnbcnb] {
    background: color-mix(in oklch, var(--quest-rose, var(--accent)) 60%, var(--surface));
}

.kind-spent .story-bubble[b-vzp9fnbcnb] {
    background: color-mix(in oklch, var(--quest-lilac, var(--accent)) 60%, var(--surface));
}

.kind-deduction .story-bubble[b-vzp9fnbcnb] {
    color: var(--muted-foreground);
    background: color-mix(in oklch, var(--muted-foreground) 14%, var(--surface));
}

.kind-returned .story-bubble[b-vzp9fnbcnb] {
    background: color-mix(in oklch, var(--quest-mint, var(--primary)) 70%, var(--surface));
}

.story-text[b-vzp9fnbcnb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
    line-height: 1.45;
}

.story-title[b-vzp9fnbcnb] {
    font-weight: 700;
}

.story-badges[b-vzp9fnbcnb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.story-badge[b-vzp9fnbcnb] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.48rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--muted-foreground);
}

.story-badge--stars[b-vzp9fnbcnb] {
    border-color: color-mix(in oklch, var(--primary) 35%, var(--border));
    background: color-mix(in oklch, var(--primary) 12%, var(--background));
    color: var(--foreground);
}

.story-badge--xp[b-vzp9fnbcnb] {
    border-color: color-mix(in oklch, var(--accent) 45%, var(--border));
    background: color-mix(in oklch, var(--accent) 18%, var(--background));
    color: var(--foreground);
}

.story-badge--gift[b-vzp9fnbcnb] {
    background: color-mix(in oklch, var(--quest-rose, var(--accent)) 22%, var(--background));
    color: var(--foreground);
}

.story-badge--spent[b-vzp9fnbcnb] {
    background: color-mix(in oklch, var(--quest-lilac, var(--accent)) 22%, var(--background));
    color: var(--foreground);
}

.story-badge--reversal[b-vzp9fnbcnb] {
    background: color-mix(in oklch, var(--quest-mint, var(--primary)) 22%, var(--background));
    color: var(--foreground);
}

.story-sublist[b-vzp9fnbcnb] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0.45rem 0.85rem 0.7rem;
    border-top: 1px solid var(--border);
    background: color-mix(in oklch, var(--background) 65%, var(--surface));
    list-style: none;
}

.story-subline[b-vzp9fnbcnb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.7rem;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.82rem;
}

.story-subline__label[b-vzp9fnbcnb] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

.story-subline__amount[b-vzp9fnbcnb] {
    flex: none;
    font-weight: 800;
    color: var(--primary);
}

.story-note[b-vzp9fnbcnb] {
    display: block;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.story-amount[b-vzp9fnbcnb] {
    flex: none;
    font-weight: 800;
    font-size: 1.05rem;
}

.kind-deduction .story-amount[b-vzp9fnbcnb],
.kind-spent .story-amount[b-vzp9fnbcnb] {
    color: var(--muted-foreground);
}

.story-waive[b-vzp9fnbcnb] {
    flex: none;
    min-height: 2.5rem;
    padding: 0 0.9rem;
    border-radius: 999px;
    border: 1px solid color-mix(in oklch, var(--primary) 50%, var(--border));
    background: color-mix(in oklch, var(--primary) 10%, var(--surface));
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
}

.story-waive:disabled[b-vzp9fnbcnb] {
    opacity: 0.6;
    cursor: progress;
}
/* /Components/Ui/StarsWalletBreakdown.razor.rz.scp.css */
/* The wallet breakdown: fully native to all child themes in both Light and Dark modes.
   Uses semantic theme variables (--surface, --background, --foreground, --primary, --accent, --border, --muted). */
.swb[b-ewjpcmcpcw] {
    container-type: inline-size;
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.swb[b-ewjpcmcpcw]  .swb-card,
.swb[b-ewjpcmcpcw]  .swb-source,
.swb[b-ewjpcmcpcw]  .swb-hero {
    min-width: 0;
}

.swb[b-ewjpcmcpcw]  .swb-card {
    padding: 1rem;
    border-radius: 1.2rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
}

.swb[b-ewjpcmcpcw]  .swb-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
}

.swb[b-ewjpcmcpcw]  .swb-card__head h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.swb[b-ewjpcmcpcw]  .swb-muted {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

/* ---- hero balance banner ---- */
.swb[b-ewjpcmcpcw]  .swb-hero {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
    border-radius: 1.4rem;
    border: 1px solid color-mix(in oklch, var(--primary) 35%, var(--border));
    background: color-mix(in oklch, var(--primary) 12%, var(--surface));
    color: var(--foreground);
}

.swb[b-ewjpcmcpcw]  .swb-hero__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.swb[b-ewjpcmcpcw]  .swb-hero__main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.swb[b-ewjpcmcpcw]  .swb-hero__collected-card {
    display: grid;
    gap: 0.15rem;
    min-width: 7.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in oklch, var(--primary) 25%, var(--border));
    background: var(--surface);
    text-align: center;
}

.swb[b-ewjpcmcpcw]  .swb-hero__collected-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.swb[b-ewjpcmcpcw]  .swb-hero__collected-figure {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.3rem;
}

.swb[b-ewjpcmcpcw]  .swb-hero__collected-figure b {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--foreground);
}

.swb[b-ewjpcmcpcw]  .swb-hero__collected-figure span {
    font-size: 0.72rem;
    color: var(--muted-foreground);
}

.swb[b-ewjpcmcpcw]  .swb-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.swb[b-ewjpcmcpcw]  .swb-hero__reassurance {
    margin: 0;
    padding: 0.55rem 0.85rem;
    border-radius: 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    background: color-mix(in oklch, var(--primary) 8%, var(--surface));
    color: var(--foreground);
    border: 1px dashed color-mix(in oklch, var(--primary) 35%, var(--border));
}

.swb[b-ewjpcmcpcw]  .swb-hero__star {
    display: inline-grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px color-mix(in oklch, var(--primary) 15%, transparent);
}

.swb[b-ewjpcmcpcw]  .swb-hero__label {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.swb[b-ewjpcmcpcw]  .swb-hero__figure {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.swb[b-ewjpcmcpcw]  .swb-hero__figure b {
    font-size: 2.2rem;
    line-height: 1.1;
    font-weight: 800;
}

.swb[b-ewjpcmcpcw]  .swb-hero__figure span {
    font-size: 0.9rem;
    color: var(--muted-foreground);
}

.swb[b-ewjpcmcpcw]  .swb-hero__pending {
    display: grid;
    gap: 0.15rem;
    justify-items: center;
    min-width: 7.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    text-align: center;
}

.swb[b-ewjpcmcpcw]  .swb-hero__pending-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
}

.swb[b-ewjpcmcpcw]  .swb-hero__pending b {
    font-size: 1.2rem;
}

.swb[b-ewjpcmcpcw]  .swb-hero__pending small {
    font-size: 0.7rem;
    color: var(--muted-foreground);
}

.swb[b-ewjpcmcpcw]  .swb-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--muted);
    color: var(--foreground);
}

.swb[b-ewjpcmcpcw]  .swb-chip--brand {
    background: color-mix(in oklch, var(--primary) 15%, var(--surface));
    color: var(--primary);
    border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
}

/* ---- sources tab grid ---- */
.swb[b-ewjpcmcpcw]  .swb-source-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.swb[b-ewjpcmcpcw]  .swb-source {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.4rem;
    border-radius: 1.1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.swb[b-ewjpcmcpcw]  .swb-source:hover {
    background: var(--muted);
}

.swb[b-ewjpcmcpcw]  .swb-source.is-selected {
    border-color: var(--primary);
    background: color-mix(in oklch, var(--primary) 14%, var(--surface));
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--primary) 35%, transparent);
}

.swb[b-ewjpcmcpcw]  .swb-source__icon {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.8rem;
}

.swb[b-ewjpcmcpcw]  .swb-source--missions .swb-source__icon {
    background: color-mix(in oklch, var(--primary) 18%, var(--surface));
    color: var(--primary);
}

.swb[b-ewjpcmcpcw]  .swb-source--kindness .swb-source__icon {
    background: color-mix(in oklch, var(--accent) 30%, var(--surface));
    color: var(--accent-foreground, var(--foreground));
}

.swb[b-ewjpcmcpcw]  .swb-source--gifts .swb-source__icon {
    background: color-mix(in oklch, var(--primary) 28%, var(--surface));
    color: var(--primary);
}

.swb[b-ewjpcmcpcw]  .swb-source--challenges .swb-source__icon {
    background: color-mix(in oklch, var(--accent-yellow, var(--primary)) 30%, var(--surface));
    color: var(--accent-foreground, var(--foreground));
}

.swb[b-ewjpcmcpcw]  .swb-source__title {
    font-size: 0.82rem;
    font-weight: 800;
}

.swb[b-ewjpcmcpcw]  .swb-source__amount {
    font-size: 1rem;
    font-weight: 800;
    color: var(--primary);
}

.swb[b-ewjpcmcpcw]  .swb-source__needed {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    background: var(--primary);
    color: var(--primary-foreground);
}

/* ---- tags grid ---- */
.swb[b-ewjpcmcpcw]  .swb-tag-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.swb[b-ewjpcmcpcw]  .swb-tag {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    padding: 0.6rem;
    border-radius: 0.9rem;
    border: 1px solid var(--border);
    background: var(--muted);
    color: var(--foreground);
}

.swb[b-ewjpcmcpcw]  .swb-tag.is-needed {
    border-color: var(--primary);
    background: color-mix(in oklch, var(--primary) 14%, var(--surface));
}

.swb[b-ewjpcmcpcw]  .swb-tag--untagged {
    border-style: dashed;
    background: transparent;
}

.swb[b-ewjpcmcpcw]  .swb-tag__name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 700;
}

.swb[b-ewjpcmcpcw]  .swb-tag__amount {
    font-weight: 800;
    color: var(--primary);
}

.swb[b-ewjpcmcpcw]  .swb-tag__needed {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--primary);
}

.swb[b-ewjpcmcpcw]  .swb-note {
    margin: 0.8rem 0 0;
    padding: 0.55rem 0.8rem;
    border-radius: 0.9rem;
    font-size: 0.8rem;
    background: color-mix(in oklch, var(--primary) 10%, var(--surface));
    color: var(--foreground);
    border: 1px solid color-mix(in oklch, var(--primary) 30%, var(--border));
}

.swb[b-ewjpcmcpcw]  .swb-note--soft {
    background: var(--muted);
    color: var(--muted-foreground);
    border-color: var(--border);
}

/* ---- goal section ---- */
.swb[b-ewjpcmcpcw]  .swb-select {
    max-width: 100%;
    padding: 0.35rem 0.6rem;
    border-radius: 0.8rem;
    border: 1px solid var(--border);
    background: var(--muted);
    color: var(--foreground);
    font: inherit;
    font-size: 0.85rem;
}

.swb[b-ewjpcmcpcw]  .swb-goal__body {
    display: grid;
    gap: 0.5rem;
    padding: 0.85rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--muted);
    color: var(--foreground);
}

.swb[b-ewjpcmcpcw]  .swb-goal__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.swb[b-ewjpcmcpcw]  .swb-goal__title strong {
    font-size: 1.05rem;
}

.swb[b-ewjpcmcpcw]  .swb-goal__requirement {
    margin: 0;
    font-size: 0.9rem;
}

.swb[b-ewjpcmcpcw]  .swb-goal__numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 800;
}

.swb[b-ewjpcmcpcw]  .swb-goal__short {
    color: color-mix(in oklch, var(--primary) 80%, var(--foreground));
}

.swb[b-ewjpcmcpcw]  .swb-goal__ready {
    color: var(--quest-success, var(--primary));
}

.swb[b-ewjpcmcpcw]  .swb-progress {
    width: 100%;
    height: 0.8rem;
    accent-color: var(--primary);
}

.swb[b-ewjpcmcpcw]  .swb-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-block-start: 0.8rem;
    padding: 0.65rem 1rem;
    border-radius: 0.9rem;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    background: var(--primary);
    color: var(--primary-foreground);
    transition: background-color 0.15s ease;
}

.swb[b-ewjpcmcpcw]  .swb-action:hover {
    background: color-mix(in oklch, var(--primary) 88%, var(--foreground));
}

/* In a purchase dialog the reward's own answer comes first. */
.swb--reward-first[b-ewjpcmcpcw]  .swb-goal {
    order: -1;
}

.swb--reward-first[b-ewjpcmcpcw]  .swb-hero {
    order: 0;
}

/* ---- wider containers: responsive grid ---- */
@container (min-width: 36rem) {
    .swb[b-ewjpcmcpcw]  .swb-tag-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .swb[b-ewjpcmcpcw]  .swb-action {
        width: auto;
    }
}

@container (min-width: 56rem) {
    .swb--reward-first[b-ewjpcmcpcw] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .swb--reward-first[b-ewjpcmcpcw]  .swb-hero,
    .swb--reward-first[b-ewjpcmcpcw]  .swb-sources {
        grid-column: 1 / -1;
    }

    .swb--reward-first[b-ewjpcmcpcw]  .swb-goal {
        order: 0;
        grid-column: 1;
        grid-row: 3;
    }

    .swb--reward-first[b-ewjpcmcpcw]  .swb-tags {
        grid-column: 2;
        grid-row: 3;
    }

    .swb--reward-first[b-ewjpcmcpcw]  .swb-tag-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Store access banner ---- */
.swb[b-ewjpcmcpcw]  .swb-store-banner {
    width: 100%;
}

.swb[b-ewjpcmcpcw]  .swb-choose-reward-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    padding-inline: 1.15rem;
    padding-block: 0.65rem;
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    border: 1.5px solid color-mix(in srgb, var(--primary) 40%, var(--border));
    color: var(--foreground);
    text-decoration: none;
    font-weight: 800;
    font-size: 0.95rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.swb[b-ewjpcmcpcw]  .swb-choose-reward-btn:hover {
    background: color-mix(in srgb, var(--primary) 22%, var(--surface));
    border-color: var(--primary);
    transform: translateY(-1px);
}

.swb[b-ewjpcmcpcw]  .swb-choose-reward-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.swb[b-ewjpcmcpcw]  .swb-choose-reward-btn__main {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.swb[b-ewjpcmcpcw]  .swb-choose-reward-btn__action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--primary);
}

/* ---- Difference breakdown ---- */
.swb[b-ewjpcmcpcw]  .swb-difference {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1rem 1.15rem;
}

.swb[b-ewjpcmcpcw]  .swb-diff-grid {
    display: grid;
    gap: 0.65rem;
    margin-block: 0.5rem 0.85rem;
}

.swb[b-ewjpcmcpcw]  .swb-diff-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--foreground) 4%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.swb[b-ewjpcmcpcw]  .swb-diff-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

.swb[b-ewjpcmcpcw]  .swb-diff-icon.tone-mint {
    background: color-mix(in srgb, #10b981 16%, var(--surface));
    color: #10b981;
}

.swb[b-ewjpcmcpcw]  .swb-diff-icon.tone-lilac {
    background: color-mix(in srgb, #8b5cf6 16%, var(--surface));
    color: #8b5cf6;
}

.swb[b-ewjpcmcpcw]  .swb-diff-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.swb[b-ewjpcmcpcw]  .swb-diff-info strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--foreground);
}

.swb[b-ewjpcmcpcw]  .swb-diff-info small {
    font-size: 0.78rem;
    color: var(--muted-foreground);
}

.swb[b-ewjpcmcpcw]  .swb-diff-amount {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--foreground);
    flex-shrink: 0;
}

.swb[b-ewjpcmcpcw]  .swb-diff-formula {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border: 1px dashed color-mix(in srgb, var(--primary) 30%, var(--border));
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--foreground);
}

.swb[b-ewjpcmcpcw]  .swb-diff-formula b {
    font-weight: 800;
    color: var(--primary);
}

.swb[b-ewjpcmcpcw]  .swb-diff-formula__result {
    padding-inline: 0.45rem;
    padding-block: 0.15rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--primary) 15%, var(--surface));
}


/* ---- Child-friendly wallet: three coloured tabs side by side (icon and name), and the card under them wears the same colour ---- */
.swb[b-ewjpcmcpcw]  .swb-source-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.swb[b-ewjpcmcpcw]  .swb-source {
    --src: var(--primary);
    justify-items: center;
    align-content: center;
    gap: 0.3rem;
    padding: 0.6rem 0.25rem;
    border-radius: 1.1rem;
    border: 2px solid color-mix(in srgb, var(--src) 55%, var(--border));
    border-block-end-width: 5px;
    background: color-mix(in srgb, var(--src) 12%, var(--surface));
    text-align: center;
}

.swb-source--missions[b-ewjpcmcpcw] { --src: var(--accent-yellow, var(--primary)); }
.swb-source--kindness[b-ewjpcmcpcw] { --src: var(--accent-green, var(--primary)); }
.swb-source--gifts[b-ewjpcmcpcw] { --src: var(--accent-teal, var(--primary)); }
.swb-source--challenges[b-ewjpcmcpcw] { --src: var(--accent-orange, var(--primary)); }

.swb[b-ewjpcmcpcw]  .swb-source:hover {
    background: color-mix(in srgb, var(--src) 22%, var(--surface));
}

.swb[b-ewjpcmcpcw]  .swb-source.is-selected {
    border-color: color-mix(in srgb, var(--src) 90%, var(--foreground) 10%);
    background: color-mix(in srgb, var(--src) 32%, var(--surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--src) 30%, transparent);
}

.swb[b-ewjpcmcpcw]  .swb-source .swb-source__icon,
.swb[b-ewjpcmcpcw]  .swb-source--missions .swb-source__icon,
.swb[b-ewjpcmcpcw]  .swb-source--kindness .swb-source__icon,
.swb[b-ewjpcmcpcw]  .swb-source--gifts .swb-source__icon,
.swb[b-ewjpcmcpcw]  .swb-source--challenges .swb-source__icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.9rem;
    background: var(--surface);
    color: color-mix(in srgb, var(--src) 65%, var(--foreground) 35%);
    border: 1.5px solid color-mix(in srgb, var(--src) 60%, var(--border));
}

.swb[b-ewjpcmcpcw]  .swb-source__title {
    font-size: 0.9rem;
}

.swb[b-ewjpcmcpcw]  .swb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.swb[b-ewjpcmcpcw]  .swb-source__needed {
    margin-block-start: 0.15rem;
    font-size: 0.66rem;
}

/* One line above the card that explains what the selected tab means. */
.swb[b-ewjpcmcpcw]  .swb-source-hint {
    --src: var(--primary);
    margin: 0;
    padding-inline: 0.25rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--src) 45%, var(--foreground) 55%);
}

.swb-source-hint--missions[b-ewjpcmcpcw], .swb-tags--missions[b-ewjpcmcpcw] { --src: var(--accent-yellow, var(--primary)); }
.swb-source-hint--kindness[b-ewjpcmcpcw], .swb-tags--kindness[b-ewjpcmcpcw] { --src: var(--accent-green, var(--primary)); }
.swb-source-hint--gifts[b-ewjpcmcpcw], .swb-tags--gifts[b-ewjpcmcpcw] { --src: var(--accent-teal, var(--primary)); }
.swb-source-hint--challenges[b-ewjpcmcpcw], .swb-tags--challenges[b-ewjpcmcpcw] { --src: var(--accent-orange, var(--primary)); }

.swb[b-ewjpcmcpcw]  .swb-tags--missions,
.swb[b-ewjpcmcpcw]  .swb-tags--kindness,
.swb[b-ewjpcmcpcw]  .swb-tags--gifts,
.swb[b-ewjpcmcpcw]  .swb-tags--challenges {
    border: 2px solid color-mix(in srgb, var(--src) 70%, var(--border));
    border-block-end-width: 5px;
    background: color-mix(in srgb, var(--src) 10%, var(--surface));
}

/* ---- The total is the big number; what can be spent sits right under it ---- */
.swb[b-ewjpcmcpcw]  .swb-hero__available {
    display: grid;
    gap: 0.1rem;
    padding: 0.5rem 0.9rem;
    border-radius: 1rem;
    text-align: center;
    background: color-mix(in srgb, var(--accent-green, var(--primary)) 18%, var(--surface));
    border: 1.5px solid color-mix(in srgb, var(--accent-green, var(--primary)) 55%, var(--border));
}

.swb[b-ewjpcmcpcw]  .swb-hero__available-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.swb[b-ewjpcmcpcw]  .swb-hero__available b {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--foreground);
}

/* ---- A named line for stars lost to missed missions ---- */
.swb[b-ewjpcmcpcw]  .swb-diff-icon.tone-amber {
    background: color-mix(in srgb, var(--accent-orange, var(--primary)) 22%, var(--surface));
    color: color-mix(in srgb, var(--accent-orange, var(--primary)) 65%, var(--foreground) 35%);
}

.swb[b-ewjpcmcpcw]  .swb-diff-item--penalty {
    background: color-mix(in srgb, var(--accent-orange, var(--primary)) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--accent-orange, var(--primary)) 45%, var(--border));
}

.swb[b-ewjpcmcpcw]  .swb-diff-list {
    display: grid;
    gap: 0.15rem;
    margin: 0.1rem 0;
    padding: 0;
    list-style: none;
    font-size: 0.82rem;
    color: var(--foreground);
}

.swb[b-ewjpcmcpcw]  .swb-diff-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
}

.swb[b-ewjpcmcpcw]  .swb-diff-list li span {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}
/* /Components/Ui/StarWallet.razor.rz.scp.css */
.star-wallet[b-1zlds9fnsp] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--foreground);
    text-align: start;
    cursor: pointer;
    flex-shrink: 0;
    max-width: 100%;
    min-width: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.star-wallet:hover[b-1zlds9fnsp] {
    background: color-mix(in srgb, var(--primary) 16%, var(--surface));
    border-color: var(--primary);
}

.star-wallet:focus-visible[b-1zlds9fnsp] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.wallet-star[b-1zlds9fnsp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}

.wallet-content[b-1zlds9fnsp] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    line-height: 1.15;
}

.wallet-line[b-1zlds9fnsp] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.76rem;
    white-space: nowrap;
}

.wallet-line--collected[b-1zlds9fnsp] {
    font-weight: 800;
    color: var(--foreground);
}

.wallet-line--collected .wallet-number[b-1zlds9fnsp] {
    font-size: 1.3rem;
    color: var(--foreground);
}

.wallet-line--spendable[b-1zlds9fnsp] {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--muted-foreground);
}

.wallet-line--spendable .wallet-number[b-1zlds9fnsp] {
    font-size: 0.95rem;
    color: var(--primary);
}

.wallet-line--pending[b-1zlds9fnsp] {
    font-size: 0.7rem;
    color: color-mix(in srgb, var(--accent, #d97706) 85%, var(--foreground));
    font-weight: 700;
}

.wallet-go[b-1zlds9fnsp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
    flex-shrink: 0;
    margin-inline-start: 0.2rem;
}

@media (max-width: 380px) {
    .star-wallet[b-1zlds9fnsp] {
        gap: 0.3rem;
        padding-inline: 0.45rem;
    }

    .wallet-go[b-1zlds9fnsp] {
        display: none;
    }
}

/* The two links under the wallet details: theme colours only, so every theme and dark mode apply on their own. */
.wallet-sheet__link[b-1zlds9fnsp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--foreground);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.wallet-sheet__link--primary[b-1zlds9fnsp] {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground, #fff);
}

.wallet-sheet__link:focus-visible[b-1zlds9fnsp] {
    outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}
/* /Components/Ui/TagInput.razor.rz.scp.css */
.tag-input[b-gch0uvgzmo] {
    display: grid;
    gap: 8px;
    text-align: start;
}

.tag-input__chips[b-gch0uvgzmo] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-input__chip[b-gch0uvgzmo] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-block: 4px;
    padding-inline-start: 12px;
    padding-inline-end: 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-foreground);
    font-size: .9rem;
    font-weight: 600;
}

.tag-input__remove[b-gch0uvgzmo] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.tag-input__remove:disabled[b-gch0uvgzmo] {
    opacity: .5;
    cursor: not-allowed;
}

.tag-input__remove:hover:not(:disabled)[b-gch0uvgzmo],
.tag-input__remove:focus-visible:not(:disabled)[b-gch0uvgzmo] {
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.tag-input__box[b-gch0uvgzmo] {
    position: relative;
}

.tag-input__field[b-gch0uvgzmo] {
    width: 100%;
    min-height: 44px;
    padding-block: 0;
    padding-inline: 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    text-align: start;
}

.tag-input__field:disabled[b-gch0uvgzmo] {
    opacity: .6;
}

.tag-input__list[b-gch0uvgzmo] {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 4px);
    z-index: 60;
    display: grid;
    max-height: min(13rem, 36dvh);
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    box-shadow: 0 12px 30px color-mix(in oklch, var(--foreground) 18%, transparent);
}

.tag-input__option[b-gch0uvgzmo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding-block: 0;
    padding-inline: 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.tag-input__option small[b-gch0uvgzmo] {
    color: var(--muted-foreground);
}

.tag-input__option.is-active[b-gch0uvgzmo],
.tag-input__option:hover[b-gch0uvgzmo] {
    background: var(--accent);
    color: var(--accent-foreground);
}

.tag-input__option.is-new[b-gch0uvgzmo] {
    font-weight: 700;
    color: var(--primary);
}

.tag-input__status[b-gch0uvgzmo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding-block: 6px;
    padding-inline: 12px;
    color: var(--muted-foreground);
    font-size: .88rem;
}

.tag-input__status--error[b-gch0uvgzmo] {
    color: var(--destructive);
}

.tag-input__retry[b-gch0uvgzmo] {
    min-height: 32px;
    padding-block: 4px;
    padding-inline: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--foreground);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}
/* /Components/Ui/TagPicker.razor.rz.scp.css */
.tag-input[b-9kzeb6iefw] {
    display: grid;
    gap: 6px;
}

.tag-input__field[b-9kzeb6iefw] {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
    caret-color: var(--primary);
}

.tag-input__field[b-9kzeb6iefw]::placeholder {
    color: var(--muted-foreground);
}

.tag-input__field:focus-visible[b-9kzeb6iefw] {
    outline: 3px solid color-mix(in oklch, var(--primary) 55%, transparent);
    outline-offset: 2px;
}

.tag-input__list[b-9kzeb6iefw] {
    display: grid;
    max-height: 14rem;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    box-shadow: 0 8px 22px color-mix(in oklch, var(--foreground) 14%, transparent);
}

.tag-input__option[b-9kzeb6iefw] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-weight: 700;
    text-align: start;
}

button.tag-input__option[b-9kzeb6iefw] {
    cursor: pointer;
}

li.tag-input__option[b-9kzeb6iefw] {
    color: var(--muted-foreground);
    font-weight: 600;
}

.tag-input__option:hover[b-9kzeb6iefw],
.tag-input__option:focus-visible[b-9kzeb6iefw] {
    background: var(--accent);
    color: var(--accent-foreground);
    outline: none;
}

li > .tag-input__option[b-9kzeb6iefw] {
    cursor: default;
}
/* /Components/Ui/TaskHistory.razor.rz.scp.css */
.task-history__list[b-jus4oje15h] {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.task-history__item[b-jus4oje15h] {
    display: grid;
    gap: 0.15rem;
    padding: 0.5rem 0.7rem;
    border-inline-start: 3px solid var(--border);
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--foreground) 4%, transparent);
    font-size: 0.85rem;
}

.task-history__item--closed-accepted[b-jus4oje15h] {
    border-inline-start-color: var(--primary);
}

.task-history__item--returned[b-jus4oje15h] {
    border-inline-start-color: color-mix(in oklch, var(--foreground) 40%, var(--border));
}

.task-history__line[b-jus4oje15h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.task-history__stars[b-jus4oje15h] {
    color: var(--primary);
    font-weight: 800;
}

.task-history__meta[b-jus4oje15h],
.task-history__hint[b-jus4oje15h] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.task-history__note[b-jus4oje15h] {
    margin: 0.15rem 0 0;
    line-height: 1.5;
}

.task-history__photos[b-jus4oje15h] {
    margin-top: 0.35rem;
}
/* /Components/Ui/TaskSubmissionSheet.razor.rz.scp.css */
/* Inline Task Submission Sheet Component */

.task-submission-loading[b-mk93ewk5a2] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    padding: 1.5rem;
}

.task-submission-flow[b-mk93ewk5a2] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

/* 1. Hero Identity Card */
.task-submission-hero[b-mk93ewk5a2] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
}

.task-submission-hero__icon[b-mk93ewk5a2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--primary) 15%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
    flex-shrink: 0;
}

.task-submission-hero__icon.tone-mint[b-mk93ewk5a2] {
    background: color-mix(in srgb, var(--quest-mint, #10b981) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--quest-mint, #10b981) 32%, var(--border));
}

.task-submission-hero__icon.tone-peach[b-mk93ewk5a2] {
    background: color-mix(in srgb, var(--quest-peach, #f97316) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--quest-peach, #f97316) 32%, var(--border));
}

.task-submission-hero__icon.tone-lilac[b-mk93ewk5a2] {
    background: color-mix(in srgb, var(--quest-lilac, #8b5cf6) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--quest-lilac, #8b5cf6) 32%, var(--border));
}

.task-submission-hero__icon.tone-sky[b-mk93ewk5a2] {
    background: color-mix(in srgb, var(--quest-sky, #0284c7) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--quest-sky, #0284c7) 32%, var(--border));
}

.task-submission-emoji[b-mk93ewk5a2] {
    font-size: 1.8rem;
    line-height: 1;
}

.task-submission-hero__info[b-mk93ewk5a2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
    text-align: start;
}

.task-submission-hero__title-row[b-mk93ewk5a2] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.task-submission-hero__title[b-mk93ewk5a2] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--foreground);
    line-height: 1.35;
    text-align: start;
}

.task-submission-hero__points[b-mk93ewk5a2] {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.task-submission-tags[b-mk93ewk5a2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.task-submission-tag-chip[b-mk93ewk5a2] {
    display: inline-flex;
    align-items: center;
    padding-inline: 0.55rem;
    padding-block: 0.15rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--foreground) 7%, var(--surface));
    color: var(--muted-foreground);
    border: 1px solid var(--border);
}

.task-submission-hero__desc[b-mk93ewk5a2] {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--muted-foreground);
    text-align: start;
    white-space: pre-line;
}

/* 2. Coach Note if Returned for Retry */
.task-submission-coach[b-mk93ewk5a2] {
    padding: 0.9rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, #f59e0b 14%, var(--surface));
    border: 1.5px solid color-mix(in srgb, #f59e0b 35%, var(--border));
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: start;
}

.task-submission-coach__head[b-mk93ewk5a2] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 800;
    color: color-mix(in srgb, #b45309 85%, var(--foreground));
}

.task-submission-coach__body[b-mk93ewk5a2] {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--foreground);
}

.task-submission-coach__photos[b-mk93ewk5a2] {
    margin-block-start: 0.4rem;
}

/* 3. Sections & Checklists */
.task-submission-section[b-mk93ewk5a2] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    text-align: start;
}

.task-submission-section__header[b-mk93ewk5a2] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.task-submission-section__title[b-mk93ewk5a2] {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--foreground);
    text-align: start;
}

.task-submission-section__subtitle[b-mk93ewk5a2] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted-foreground);
    text-align: start;
}

.task-submission-steps[b-mk93ewk5a2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.task-submission-step[b-mk93ewk5a2] {
    border-radius: 0.75rem;
    border: 1.5px solid var(--border);
    background: var(--surface);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.task-submission-step.is-done[b-mk93ewk5a2] {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.task-submission-step__label[b-mk93ewk5a2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    min-height: 3rem;
    cursor: pointer;
    user-select: none;
}

.task-submission-step__label.is-readonly[b-mk93ewk5a2] {
    cursor: default;
    opacity: 0.8;
}

.task-submission-step__checkbox[b-mk93ewk5a2] {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.35rem;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.task-submission-step__glyph[b-mk93ewk5a2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    font-weight: 800;
    color: var(--primary);
}

.task-submission-step__text[b-mk93ewk5a2] {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--foreground);
    text-align: start;
}

.task-submission-step__badge[b-mk93ewk5a2] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    padding-inline: 0.5rem;
    padding-block: 0.15rem;
    border-radius: 999px;
    white-space: nowrap;
}

.task-submission-live-calc[b-mk93ewk5a2] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
    font-size: 0.85rem;
}

.task-submission-live-calc__highlight[b-mk93ewk5a2] {
    font-weight: 800;
    color: var(--primary);
    font-size: 0.95rem;
}

.task-submission-live-calc__detail[b-mk93ewk5a2] {
    color: var(--muted-foreground);
    font-size: 0.8rem;
}

/* 4. Note Field */
.task-submission-note-label[b-mk93ewk5a2] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: start;
}

.task-submission-textarea[b-mk93ewk5a2] {
    width: 100%;
    min-height: 5.5rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font-size: 0.92rem;
    font-family: inherit;
    line-height: 1.45;
    resize: vertical;
    box-sizing: border-box;
}

.task-submission-textarea:focus[b-mk93ewk5a2] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.task-submission-note-footer[b-mk93ewk5a2] {
    display: flex;
    justify-content: flex-end;
}

.task-submission-counter[b-mk93ewk5a2] {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

/* 5. Error Notice */
.task-submission-error[b-mk93ewk5a2] {
    margin: 0;
    padding: 0.75rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, #ef4444 14%, var(--surface));
    border: 1px solid color-mix(in srgb, #ef4444 35%, var(--border));
    color: #ef4444;
    font-size: 0.88rem;
    font-weight: 700;
    text-align: start;
}

/* 6. Action Button */
.task-submission-actions[b-mk93ewk5a2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
}

.task-submission-submit-btn[b-mk93ewk5a2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3.25rem;
    padding-inline: 1.25rem;
    padding-block: 0.75rem;
    border-radius: 0.95rem;
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    border: none;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.task-submission-submit-btn:hover:not(:disabled)[b-mk93ewk5a2] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 45%, transparent);
}

.task-submission-submit-btn:active:not(:disabled)[b-mk93ewk5a2] {
    transform: translateY(0);
}

.task-submission-submit-btn:disabled[b-mk93ewk5a2] {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

.task-submission-submit-btn__icon[b-mk93ewk5a2] {
    font-size: 1.15rem;
    font-weight: 900;
}

/* 7. Deep Link Fallback */
.task-submission-footer-link[b-mk93ewk5a2] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0.25rem;
}

.task-submission-deep-link[b-mk93ewk5a2] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted-foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.task-submission-deep-link:hover[b-mk93ewk5a2] {
    color: var(--primary);
}
/* /Components/Ui/TemplateEditorSheet.razor.rz.scp.css */
.tpl-form[b-obupeiw6hf] {
    display: grid;
    gap: 0.9rem;
}

.tpl-form[b-obupeiw6hf]  .tpl-row--title {
    align-items: flex-end;
}

.tpl-form[b-obupeiw6hf]  .tpl-field--grow {
    flex: 1 1 auto;
}

.tpl-form[b-obupeiw6hf]  .tpl-icon {
    position: relative;
    flex: 0 0 auto;
}

.tpl-form[b-obupeiw6hf]  .tpl-icon__button {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: var(--surface);
    font-size: 1.4rem;
    cursor: pointer;
}

.tpl-form[b-obupeiw6hf]  .tpl-icon__popover {
    position: absolute;
    z-index: 5;
    inset-inline-start: 0;
    top: calc(100% + 0.35rem);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
    gap: 0.25rem;
    width: min(21rem, calc(100vw - 2.5rem));
    max-height: min(16rem, 42vh);
    padding: 0.5rem;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--background);
    box-shadow: 0 14px 34px color-mix(in oklch, var(--foreground) 18%, transparent);
}

@media (min-width: 48rem) {
    .tpl-form[b-obupeiw6hf]  .tpl-icon__popover {
        width: min(28rem, calc(100vw - 4rem));
        max-height: min(24rem, 55vh);
    }
}

.tpl-form[b-obupeiw6hf]  .tpl-icon__choice {
    min-height: 2.75rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    font-size: 1.35rem;
    cursor: pointer;
}

.tpl-form[b-obupeiw6hf]  .tpl-icon__choice:hover {
    background: color-mix(in oklch, var(--foreground) 8%, transparent);
}

.tpl-form[b-obupeiw6hf]  .tpl-icon__choice.is-on {
    background: var(--primary);
}

.tpl-form[b-obupeiw6hf]  .tpl-days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.tpl-form[b-obupeiw6hf]  .tpl-days > legend,
.tpl-form[b-obupeiw6hf]  .tpl-bonus > legend {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.tpl-form[b-obupeiw6hf]  .tpl-icon__button:focus-visible,
.tpl-form[b-obupeiw6hf]  .tpl-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.tpl-form[b-obupeiw6hf]  .tpl-days > legend {
    margin-bottom: 0.3rem;
    padding: 0;
}

.tpl-form[b-obupeiw6hf]  .tpl-day {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.85rem;
    cursor: pointer;
}

.tpl-form[b-obupeiw6hf]  .tpl-day input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tpl-form[b-obupeiw6hf]  .tpl-day.is-on {
    border-color: var(--primary);
    background: color-mix(in oklch, var(--primary) 14%, transparent);
    font-weight: 700;
}

.tpl-form[b-obupeiw6hf]  .tpl-day:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.tpl-form[b-obupeiw6hf]  .tpl-bonus {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
}

.tpl-form[b-obupeiw6hf]  .tpl-bonus > legend {
    padding-inline: 0.3rem;
}

.tpl-form[b-obupeiw6hf]  .tpl-bonus small {
    font-weight: 500;
}

.tpl-form[b-obupeiw6hf]  .tpl-bonus__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5rem 2.75rem;
    gap: 0.4rem;
}

.tpl-form[b-obupeiw6hf]  .tpl-bonus__remove {
    min-height: 2.75rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

.tpl-form[b-obupeiw6hf]  .tpl-bonus__remove:hover {
    color: var(--destructive);
}

.tpl-form[b-obupeiw6hf]  .tpl-bonus__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tpl-form[b-obupeiw6hf]  .tpl-link {
    min-height: 2.5rem;
    padding: 0 0.4rem;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tpl-form[b-obupeiw6hf]  .tpl-total {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.tpl-preview-label[b-obupeiw6hf] {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.tpl-form[b-obupeiw6hf]  .tpl-more {
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 0.25rem 0.75rem;
}

.tpl-form[b-obupeiw6hf]  .tpl-more[open] {
    padding-bottom: 0.85rem;
}

.tpl-form[b-obupeiw6hf]  .tpl-more > summary {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.tpl-form[b-obupeiw6hf]  .tpl-more > summary::-webkit-details-marker {
    display: none;
}

.tpl-form[b-obupeiw6hf]  .tpl-more > summary::after {
    content: "▾";
    margin-inline-start: auto;
    color: var(--muted-foreground);
}

.tpl-form[b-obupeiw6hf]  .tpl-more[open] > summary::after {
    content: "▴";
}

.tpl-form[b-obupeiw6hf]  .tpl-more > :not(summary) {
    margin-top: 0.75rem;
}

.tpl-form[b-obupeiw6hf]  .tpl-audience {
    display: grid;
    gap: 8px;
    border: 0;
    padding: 0;
    margin: 0;
}

.tpl-form[b-obupeiw6hf]  .tpl-audience__kids {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tpl-form[b-obupeiw6hf]  .tpl-effect {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid color-mix(in oklch, var(--primary) 35%, var(--border));
    border-radius: 0.85rem;
    background: color-mix(in oklch, var(--primary) 8%, var(--surface));
    color: var(--foreground);
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.55;
}
/* /Components/Ui/TemplateViewSheet.razor.rz.scp.css */
.template-sheet[b-kinf8i9igd] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    color: var(--foreground);
}

.template-sheet__head[b-kinf8i9igd] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.template-sheet__head h3[b-kinf8i9igd] {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-sheet__muted[b-kinf8i9igd] {
    margin: 0;
    color: var(--muted-foreground);
}

.template-sheet__facts[b-kinf8i9igd] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
}

.template-sheet__facts div[b-kinf8i9igd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: color-mix(in oklch, var(--background) 62%, var(--surface));
}

.template-sheet__facts dt[b-kinf8i9igd] {
    color: var(--muted-foreground);
}

.template-sheet__facts dd[b-kinf8i9igd] {
    margin: 0;
    font-weight: 800;
    text-align: start;
}

.template-sheet__steps[b-kinf8i9igd] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.template-sheet__steps li[b-kinf8i9igd] {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    color: var(--foreground);
}
/* /Components/Ui/WalletBuddy.razor.rz.scp.css */
/* Keeps its full width in the page heading (the greeting beside it wraps instead), so the companion is never pushed off
   the screen edge. */
.wallet-buddy[b-dvwc574bb5] {
    display: inline-flex;
    flex: none;
    align-items: flex-end;
    gap: 0.15rem;
}

/* Small enough to sit in the heading beside the wallet on a phone, pointing at it. */
.wallet-buddy[b-dvwc574bb5]  .wallet-buddy__kid {
    --kid-size: 3.4rem;
    flex: none;
}

@media (min-width: 768px) {
    .wallet-buddy[b-dvwc574bb5]  .wallet-buddy__kid {
        --kid-size: 4.4rem;
    }
}
/* /Components/Ui/WorshipDayTexts.razor.rz.scp.css */
.wdt[b-v40ongr4xi] {
    display: grid;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
    border-radius: 1.1rem;
    border: 1px solid var(--border);
    background: color-mix(in oklch, var(--primary) 6%, var(--card, var(--background)));
    min-width: 0;
}

.wdt--adhkar[b-v40ongr4xi] {
    background: var(--card, var(--background));
}

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

.wdt__kicker[b-v40ongr4xi] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.wdt__title[b-v40ongr4xi] {
    margin: 0;
    font-size: 1.05em;
    font-weight: 800;
    overflow-wrap: anywhere;
}

/* Plain text as typed: line breaks kept, nothing interpreted; sized from the child's chosen font scale. */
.wdt__body[b-v40ongr4xi] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.95;
}

.wdt__body--full[b-v40ongr4xi] {
    max-width: 65ch;
    font-size: 1.08em;
}

.wdt__source[b-v40ongr4xi] {
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
}

.wdt__more[b-v40ongr4xi] {
    flex: none;
    min-height: 2.5rem;
    padding: 0 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.wdt__more:focus-visible[b-v40ongr4xi] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.wdt__confirm[b-v40ongr4xi] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    font-weight: 700;
    cursor: pointer;
}

.wdt__confirm input[b-v40ongr4xi] {
    width: 1.35rem;
    height: 1.35rem;
    flex: none;
    accent-color: var(--primary);
}


/* Between the parent's description and the bank text: a faint line, not a second card. */
.wdt__divider[b-v40ongr4xi] {
    margin: 0.35rem 0;
    border: 0;
    border-block-start: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
}