/* /Components/Dashboard/DashboardSkeleton.razor.rz.scp.css */
.dashboard-skeleton[b-nbzvqd0kgx] { display: grid; gap: 1rem; }
.skeleton-row[b-nbzvqd0kgx] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.skeleton[b-nbzvqd0kgx] {
    border-radius: 1rem;
    background: linear-gradient(100deg, var(--surface-primary) 25%, var(--surface-secondary) 45%, var(--surface-primary) 65%);
    background-size: 250% 100%;
    animation: dashboard-shimmer-b-nbzvqd0kgx 1.45s infinite linear;
    border: 1px solid var(--border-subtle);
}
.skeleton-hero[b-nbzvqd0kgx] { min-height: 20rem; }
.skeleton-card[b-nbzvqd0kgx] { min-height: 14rem; }
.skeleton-strip[b-nbzvqd0kgx] { min-height: 9rem; }
@keyframes dashboard-shimmer-b-nbzvqd0kgx { to { background-position-x: -250%; } }
@media (max-width: 760px) {
    .skeleton-row[b-nbzvqd0kgx] { grid-template-columns: 1fr; }
    .skeleton-hero[b-nbzvqd0kgx] { min-height: 24rem; }
}
/* /Components/Dashboard/KanaProgress.razor.rz.scp.css */
.rail-card[b-y1735yly5c] { padding: 1rem; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-primary); box-shadow: var(--shadow-card); }
header[b-y1735yly5c] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.9rem; }
h2[b-y1735yly5c] { margin: 0; color: var(--text-primary); font-size: 0.94rem; font-weight: 830; }
header span[b-y1735yly5c] { color: var(--text-muted); font-size: 0.62rem; white-space: nowrap; }
.kana-list[b-y1735yly5c] { display: grid; gap: 0.8rem; }
.kana-row[b-y1735yly5c] { display: grid; grid-template-columns: minmax(4rem, 1fr) auto 2rem; align-items: center; gap: 0.4rem; }
.kana-row strong[b-y1735yly5c] { color: var(--text-primary); font-size: 0.78rem; }
.kana-row > span[b-y1735yly5c] { color: var(--text-secondary); font-size: 0.66rem; }
.kana-row em[b-y1735yly5c] { color: var(--text-muted); font-size: 0.62rem; font-style: normal; text-align: right; }
.kana-row i[b-y1735yly5c], .overall i[b-y1735yly5c] { display: block; height: 0.42rem; overflow: hidden; border-radius: 999px; background: var(--border-subtle); }
.kana-row i[b-y1735yly5c] { grid-column: 1 / -1; }
.kana-row b[b-y1735yly5c], .overall b[b-y1735yly5c] { display: block; height: 100%; min-width: 0.22rem; border-radius: inherit; background: linear-gradient(90deg, #547df2, var(--accent-primary)); }
.overall[b-y1735yly5c] { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5rem; margin-top: 1rem; color: var(--text-secondary); font-size: 0.62rem; }
.rail-link[b-y1735yly5c] { display: block; margin-top: 0.8rem; color: var(--accent-primary); font-size: 0.68rem; font-weight: 750; text-align: right; text-decoration: none; }
.rail-empty[b-y1735yly5c] { margin: 0; padding: 0.8rem; border-radius: 0.65rem; background: var(--surface-secondary); color: var(--text-muted); font-size: 0.72rem; }
/* /Components/Dashboard/ProgressSummary.razor.rz.scp.css */
.dashboard-card[b-tsh4wg1e6u] { min-width: 0; height: 100%; padding: 1rem; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-primary); box-shadow: var(--shadow-card); }
header[b-tsh4wg1e6u], header > div[b-tsh4wg1e6u] { display: flex; align-items: center; }
header[b-tsh4wg1e6u] { justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
header > div[b-tsh4wg1e6u] { gap: 0.55rem; }
header a[b-tsh4wg1e6u] { color: var(--accent-primary); font-size: 0.72rem; font-weight: 750; text-decoration: none; }
h2[b-tsh4wg1e6u], h3[b-tsh4wg1e6u] { margin: 0; color: var(--text-primary); font-size: 1rem; font-weight: 820; }
.section-icon[b-tsh4wg1e6u] { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 0.5rem; background: var(--surface-accent); color: var(--accent-primary); }
.progress-grid[b-tsh4wg1e6u] { display: grid; grid-template-columns: 1.25fr repeat(3, 0.8fr); gap: 0.5rem; }
.level-cell[b-tsh4wg1e6u], .metric-cell[b-tsh4wg1e6u] { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.65rem 0.35rem; border-radius: 0.75rem; background: var(--surface-secondary); text-align: center; }
.level-ring[b-tsh4wg1e6u] { --progress: 0; display: grid; place-items: center; width: 3.8rem; height: 3.8rem; margin-bottom: 0.35rem; border-radius: 50%; background: conic-gradient(var(--accent-primary) calc(var(--progress) * 1%), var(--border-subtle) 0); position: relative; }
.level-ring[b-tsh4wg1e6u]::after { content: ''; position: absolute; inset: 0.42rem; border-radius: 50%; background: var(--surface-primary); }
.level-ring span[b-tsh4wg1e6u] { z-index: 1; color: var(--text-primary); font-size: 1.25rem; font-weight: 900; }
.level-cell strong[b-tsh4wg1e6u], .metric-cell strong[b-tsh4wg1e6u] { color: var(--text-primary); font-size: 0.82rem; }
.level-cell small[b-tsh4wg1e6u], .metric-cell small[b-tsh4wg1e6u] { color: var(--text-muted); font-size: 0.62rem; }
.metric-cell > span[b-tsh4wg1e6u] { color: var(--accent-primary); font-size: 1rem; font-weight: 850; }
blockquote[b-tsh4wg1e6u] { margin: 0.65rem 0 0; padding: 0.65rem; border: 0; border-radius: 0.7rem; background: var(--surface-accent); color: var(--text-secondary); font-size: 0.72rem; text-align: center; }
.unavailable[b-tsh4wg1e6u] { display: grid; gap: 0.2rem; padding: 1rem; border-radius: 0.7rem; background: var(--surface-secondary); color: var(--text-primary); }
.unavailable span[b-tsh4wg1e6u] { color: var(--text-muted); font-size: 0.75rem; }
@media (max-width: 520px) { .progress-grid[b-tsh4wg1e6u] { grid-template-columns: repeat(3, 1fr); } .level-cell[b-tsh4wg1e6u] { grid-column: 1 / -1; } }
/* /Components/Dashboard/QuestSummary.razor.rz.scp.css */
.quest-card[b-dn7t8t6lwj] { padding: 1rem; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-primary); box-shadow: var(--shadow-card); }
header[b-dn7t8t6lwj], header > div[b-dn7t8t6lwj] { display: flex; align-items: center; }
header[b-dn7t8t6lwj] { justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
header > div[b-dn7t8t6lwj] { gap: 0.55rem; }
header > span[b-dn7t8t6lwj] { color: var(--text-muted); font-size: 0.7rem; font-weight: 700; }
.quest-mark[b-dn7t8t6lwj] { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 0.5rem; background: var(--surface-accent); color: var(--accent-primary); font-weight: 900; }
h2[b-dn7t8t6lwj] { margin: 0; color: var(--text-primary); font-size: 1rem; font-weight: 820; }
.quest-meta[b-dn7t8t6lwj] { display: flex; justify-content: space-between; margin: 0 0 0.65rem 2.25rem; color: var(--text-muted); font-size: 0.68rem; }
.quest-list[b-dn7t8t6lwj] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.quest-item[b-dn7t8t6lwj] { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.55rem; padding: 0.7rem; border: 1px solid var(--border-subtle); border-radius: 0.75rem; color: var(--text-primary); text-decoration: none; }
.quest-item:hover[b-dn7t8t6lwj] { border-color: var(--accent-primary); background: var(--surface-secondary); }
.quest-icon[b-dn7t8t6lwj] { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.6rem; background: var(--surface-accent); color: var(--accent-primary); font-size: 0.78rem; font-weight: 900; }
.quest-copy[b-dn7t8t6lwj] { display: grid; min-width: 0; }
.quest-copy strong[b-dn7t8t6lwj] { overflow: hidden; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.quest-copy small[b-dn7t8t6lwj] { overflow: hidden; color: var(--text-muted); font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.quest-progress[b-dn7t8t6lwj] { grid-column: 1 / -1; display: grid; grid-template-columns: 3.4rem 1fr; align-items: center; gap: 0.4rem; color: var(--text-secondary); font-size: 0.62rem; }
.quest-progress i[b-dn7t8t6lwj] { display: block; height: 0.32rem; overflow: hidden; border-radius: 999px; background: var(--border-subtle); }
.quest-progress b[b-dn7t8t6lwj] { display: block; height: 100%; border-radius: inherit; background: var(--accent-primary); }
.quest-reward[b-dn7t8t6lwj] { grid-column: 1 / -1; color: var(--warning); font-size: 0.62rem; font-weight: 750; }
.quest-item.is-complete .quest-icon[b-dn7t8t6lwj] { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.quest-empty[b-dn7t8t6lwj] { margin: 0; padding: 0.85rem; border-radius: 0.7rem; background: var(--surface-secondary); color: var(--text-muted); font-size: 0.78rem; }
.quest-all[b-dn7t8t6lwj] { display: inline-flex; align-items: center; min-height: 44px; margin-top: .5rem; color: var(--accent-hover); font-weight: 650; font-size: .8rem; text-decoration: none; }
.quest-all:hover[b-dn7t8t6lwj] { text-decoration: underline; }
.quest-all:focus-visible[b-dn7t8t6lwj] { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 780px) { .quest-list[b-dn7t8t6lwj] { grid-template-columns: 1fr; } }
/* /Components/Dashboard/QuickCollections.razor.rz.scp.css */
.rail-card[b-ax1iwzozqj] { padding: 1rem; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-primary); box-shadow: var(--shadow-card); }
header[b-ax1iwzozqj], header > div[b-ax1iwzozqj] { display: flex; align-items: center; }
header[b-ax1iwzozqj] { justify-content: space-between; gap: 0.5rem; margin-bottom: 0.8rem; }
header > div[b-ax1iwzozqj] { gap: 0.45rem; }
header > div > span[b-ax1iwzozqj] { color: var(--accent-primary); }
h2[b-ax1iwzozqj] { margin: 0; color: var(--text-primary); font-size: 0.92rem; font-weight: 830; }
header a[b-ax1iwzozqj] { color: var(--accent-primary); font-size: 0.62rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.collection-list[b-ax1iwzozqj] { display: grid; gap: 0.45rem; }
.collection-item[b-ax1iwzozqj] { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.45rem; border-radius: 0.65rem; color: var(--text-primary); text-decoration: none; }
.collection-item:hover[b-ax1iwzozqj] { background: var(--surface-secondary); }
.collection-icon[b-ax1iwzozqj] { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 0.65rem; background: linear-gradient(145deg, var(--surface-accent), color-mix(in srgb, var(--info) 16%, var(--surface-secondary))); color: var(--accent-primary); font-size: 1rem; font-weight: 900; }
.collection-item > span:nth-child(2)[b-ax1iwzozqj] { display: grid; min-width: 0; }
.collection-item strong[b-ax1iwzozqj], .collection-item small[b-ax1iwzozqj] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-item strong[b-ax1iwzozqj] { font-size: 0.72rem; }
.collection-item small[b-ax1iwzozqj] { color: var(--text-muted); font-size: 0.6rem; }
.collection-item b[b-ax1iwzozqj] { color: var(--accent-primary); font-size: 1.1rem; }
.collection-empty[b-ax1iwzozqj] { display: grid; gap: 0.25rem; padding: 0.8rem; border-radius: 0.7rem; background: var(--surface-secondary); }
.collection-empty strong[b-ax1iwzozqj] { color: var(--text-primary); font-size: 0.76rem; }
.collection-empty span[b-ax1iwzozqj], .rail-empty[b-ax1iwzozqj] { color: var(--text-muted); font-size: 0.68rem; }
.collection-empty a[b-ax1iwzozqj] { margin-top: 0.25rem; color: var(--accent-primary); font-size: 0.68rem; font-weight: 750; text-decoration: none; }
.rail-empty[b-ax1iwzozqj] { margin: 0; padding: 0.8rem; border-radius: 0.65rem; background: var(--surface-secondary); }
/* /Components/Dashboard/StoryHero.razor.rz.scp.css */
.story-hero[b-j94tmoigoi] {
    --story-image: linear-gradient(125deg, #20243a, #54358f);
    position: relative;
    min-height: 20rem;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, var(--border-subtle));
    border-radius: 1.15rem;
    background-image: linear-gradient(90deg, rgb(15 18 40 / 94%) 0%, rgb(15 18 40 / 77%) 48%, rgb(15 18 40 / 18%) 100%), var(--story-image);
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-card);
    color: #fff;
}

.story-backdrop[b-j94tmoigoi] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 78% 20%, rgb(188 151 255 / 28%), transparent 34%);
    pointer-events: none;
}

.story-copy[b-j94tmoigoi] {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(63%, 42rem);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(1.4rem, 3vw, 2.2rem);
}

.story-kicker[b-j94tmoigoi] {
    color: #cdbaff;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.story-level[b-j94tmoigoi] {
    margin-top: 0.45rem;
    color: rgb(255 255 255 / 70%);
    font-size: 0.72rem;
    font-weight: 700;
}

.story-copy h2[b-j94tmoigoi] {
    max-width: 14ch;
    margin: 0.35rem 0 0.2rem;
    font-size: clamp(1.9rem, 4vw, 3.15rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.story-copy strong[b-j94tmoigoi] { font-size: 0.9rem; }
.story-copy p[b-j94tmoigoi] { max-width: 34rem; margin: 0.6rem 0 1.1rem; color: rgb(255 255 255 / 78%); line-height: 1.5; }
.story-actions[b-j94tmoigoi] { display: flex; align-items: center; gap: 0.55rem; }

.story-action[b-j94tmoigoi],
.story-more[b-j94tmoigoi] {
    display: inline-flex;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.story-action[b-j94tmoigoi] {
    gap: 0.7rem;
    padding: 0.7rem 1rem;
    background: linear-gradient(135deg, #754af3, #a24dff);
    box-shadow: 0 8px 24px rgb(117 74 243 / 35%);
}

.story-more[b-j94tmoigoi] { width: 3rem; background: rgb(255 255 255 / 12%); border: 1px solid rgb(255 255 255 / 16%); }
.story-action:hover[b-j94tmoigoi], .story-more:hover[b-j94tmoigoi] { color: #fff; transform: translateY(-1px); }

.story-progress[b-j94tmoigoi] { width: min(100%, 25rem); margin-top: 1rem; font-size: 0.72rem; }
.story-progress > div:first-child[b-j94tmoigoi] { display: flex; justify-content: space-between; margin-bottom: 0.35rem; color: rgb(255 255 255 / 72%); }
.story-progress-track[b-j94tmoigoi] { height: 0.42rem; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 18%); }
.story-progress-track span[b-j94tmoigoi] { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8c63ff, #cf8cff); }

.story-aibo[b-j94tmoigoi] {
    position: absolute;
    right: clamp(0.75rem, 4vw, 3.5rem);
    bottom: -0.8rem;
    z-index: 1;
    width: min(34%, 18rem);
    max-height: 92%;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 14px 24px rgb(0 0 0 / 38%));
}

@media (max-width: 720px) {
    .story-hero[b-j94tmoigoi] { min-height: 27rem; background-image: linear-gradient(0deg, rgb(15 18 40 / 98%) 5%, rgb(15 18 40 / 65%) 100%), var(--story-image); }
    .story-copy[b-j94tmoigoi] { width: 100%; justify-content: flex-end; padding: 1.25rem; }
    .story-copy h2[b-j94tmoigoi] { font-size: 2rem; }
    .story-copy p[b-j94tmoigoi] { font-size: 0.86rem; margin-right: 6rem; }
    .story-aibo[b-j94tmoigoi] { width: 10rem; right: -1.5rem; bottom: 7rem; opacity: 0.9; }
}
/* /Components/Dashboard/StoryJourney.razor.rz.scp.css */
.journey-card[b-rdwx9dms0u] { padding: 0.9rem 1rem 1rem; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-primary); box-shadow: var(--shadow-card); }
header[b-rdwx9dms0u], header > div[b-rdwx9dms0u] { display: flex; align-items: center; }
header[b-rdwx9dms0u] { justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
header > div[b-rdwx9dms0u] { gap: 0.5rem; }
header > div > span[b-rdwx9dms0u] { color: var(--accent-primary); }
h2[b-rdwx9dms0u] { margin: 0; color: var(--text-primary); font-size: 0.95rem; font-weight: 820; }
header a[b-rdwx9dms0u] { color: var(--accent-primary); font-size: 0.7rem; font-weight: 750; text-decoration: none; }
.journey-track[b-rdwx9dms0u] { position: relative; display: grid; grid-template-columns: repeat(5, minmax(5rem, 1fr)); gap: 0.8rem; padding: 0.2rem 0.4rem 0; }
.journey-track[b-rdwx9dms0u]::before { content: ''; position: absolute; top: 2rem; left: 9%; right: 9%; height: 2px; background: var(--border-strong); }
.episode-node[b-rdwx9dms0u] { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; align-items: center; text-align: center; }
.episode-dot[b-rdwx9dms0u] { --episode-image: linear-gradient(135deg, var(--surface-accent), var(--surface-secondary)); display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin-bottom: 0.4rem; overflow: hidden; border: 3px solid var(--surface-primary); outline: 2px solid var(--border-strong); border-radius: 50%; background-image: linear-gradient(rgb(19 22 46 / 35%), rgb(19 22 46 / 35%)), var(--episode-image); background-position: center; background-size: cover; color: #fff; text-decoration: none; box-shadow: 0 0 0 3px var(--surface-primary); }
.episode-dot > span[b-rdwx9dms0u] { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: rgb(20 22 40 / 66%); font-size: 0.7rem; font-weight: 900; }
.node-current .episode-dot[b-rdwx9dms0u] { outline-color: var(--accent-primary); box-shadow: 0 0 0 4px var(--surface-primary), 0 0 0 6px var(--accent-soft); }
.node-completed .episode-dot[b-rdwx9dms0u] { outline-color: var(--success); }
.node-locked .episode-dot[b-rdwx9dms0u] { filter: grayscale(1); opacity: 0.58; }
.episode-node strong[b-rdwx9dms0u] { color: var(--text-primary); font-size: 0.68rem; white-space: nowrap; }
.episode-node small[b-rdwx9dms0u] { max-width: 100%; overflow: hidden; color: var(--text-muted); font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.journey-empty[b-rdwx9dms0u] { margin: 0; padding: 0.85rem; border-radius: 0.7rem; background: var(--surface-secondary); color: var(--text-muted); font-size: 0.78rem; }
@media (max-width: 680px) { .journey-track[b-rdwx9dms0u] { grid-template-columns: repeat(5, 5.5rem); overflow-x: auto; padding-bottom: 0.5rem; } .journey-track[b-rdwx9dms0u]::before { left: 2rem; right: 2rem; } }
/* /Components/Dashboard/StudyTools.razor.rz.scp.css */
.study-tools[b-zonodn29gu] { min-width: 0; }
header[b-zonodn29gu] { display: flex; align-items: baseline; gap: 0.7rem; margin: 0 0 0.55rem 0.35rem; }
h2[b-zonodn29gu] { margin: 0; color: var(--text-primary); font-size: 1rem; font-weight: 820; }
header p[b-zonodn29gu] { margin: 0; color: var(--text-muted); font-size: 0.68rem; }
.tool-grid[b-zonodn29gu] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; }
.tool-card[b-zonodn29gu] { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; min-width: 0; padding: 0.7rem; border: 1px solid var(--border-subtle); border-radius: 0.8rem; background: var(--surface-primary); color: var(--text-primary); text-decoration: none; box-shadow: var(--shadow-card); }
.tool-card:hover[b-zonodn29gu] { transform: translateY(-2px); border-color: var(--tone, var(--accent-primary)); }
.tool-icon[b-zonodn29gu] { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.65rem; background: color-mix(in srgb, var(--tone, var(--accent-primary)) 14%, transparent); color: var(--tone, var(--accent-primary)); font-size: 1rem; font-weight: 900; }
.tool-card > span:nth-child(2)[b-zonodn29gu] { display: grid; min-width: 0; }
.tool-card strong[b-zonodn29gu], .tool-card small[b-zonodn29gu] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-card strong[b-zonodn29gu] { font-size: 0.72rem; }
.tool-card small[b-zonodn29gu] { color: var(--text-muted); font-size: 0.58rem; }
.tool-card b[b-zonodn29gu] { color: var(--tone, var(--accent-primary)); }
.tool-blue[b-zonodn29gu] { --tone: var(--info); } .tool-green[b-zonodn29gu] { --tone: var(--success); } .tool-purple[b-zonodn29gu] { --tone: var(--accent-primary); } .tool-pink[b-zonodn29gu] { --tone: #db578a; } .tool-gold[b-zonodn29gu] { --tone: var(--warning); }
@media (max-width: 1100px) { .tool-grid[b-zonodn29gu] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { header[b-zonodn29gu] { align-items: flex-start; flex-direction: column; gap: 0.15rem; } .tool-grid[b-zonodn29gu] { grid-template-columns: 1fr 1fr; } .tool-grid .tool-card:last-child[b-zonodn29gu] { grid-column: 1 / -1; } }
/* /Components/Dashboard/TodayPlan.razor.rz.scp.css */
.dashboard-card[b-icesxdv0f4] {
    min-width: 0;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
}

header[b-icesxdv0f4], header > div[b-icesxdv0f4] { display: flex; align-items: center; }
header[b-icesxdv0f4] { justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
header > div[b-icesxdv0f4] { gap: 0.55rem; }
h2[b-icesxdv0f4], h3[b-icesxdv0f4] { margin: 0; color: var(--text-primary); font-size: 1rem; font-weight: 820; }
.section-icon[b-icesxdv0f4] { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 0.5rem; background: var(--surface-accent); color: var(--accent-primary); }
.plan-count[b-icesxdv0f4] { color: var(--text-muted); font-size: 0.7rem; font-weight: 700; }
.plan-list[b-icesxdv0f4] { display: grid; gap: 0.4rem; }
.plan-item[b-icesxdv0f4] {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.45rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.72rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: background 150ms ease, transform 150ms ease;
}
.plan-item:hover[b-icesxdv0f4] { background: var(--surface-secondary); transform: translateX(2px); }
.plan-check[b-icesxdv0f4] { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--accent-primary); font-size: 0.8rem; font-weight: 900; }
.plan-copy[b-icesxdv0f4] { display: grid; min-width: 0; }
.plan-copy strong[b-icesxdv0f4] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
.plan-copy small[b-icesxdv0f4] { overflow: hidden; color: var(--text-muted); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.plan-effort[b-icesxdv0f4] { color: var(--text-secondary); font-size: 0.68rem; font-weight: 750; white-space: nowrap; }
.plan-item.is-complete .plan-check[b-icesxdv0f4] { border-color: var(--accent-primary); background: var(--accent-primary); color: var(--text-on-accent); }
.plan-item.is-complete strong[b-icesxdv0f4] { color: var(--text-secondary); text-decoration: line-through; }
.empty-state[b-icesxdv0f4] { display: flex; align-items: center; gap: 0.75rem; padding: 1.2rem 0.5rem; color: var(--text-secondary); }
.empty-state > span[b-icesxdv0f4] { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.empty-state p[b-icesxdv0f4] { margin: 0.15rem 0 0; color: var(--text-muted); font-size: 0.75rem; }
/* /Components/Dashboard/VocabularyProgress.razor.rz.scp.css */
.rail-card[b-fdld7me5k9] { padding: 1rem; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-primary); box-shadow: var(--shadow-card); }
header[b-fdld7me5k9] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.9rem; }
h2[b-fdld7me5k9] { margin: 0; color: var(--text-primary); font-size: 0.94rem; font-weight: 830; }
header span[b-fdld7me5k9] { color: var(--text-muted); font-size: 0.62rem; white-space: nowrap; }
.level-list[b-fdld7me5k9] { display: grid; gap: 0.75rem; }
.level-row[b-fdld7me5k9] { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2rem; align-items: center; gap: 0.35rem; }
.level-row strong[b-fdld7me5k9] { font-size: 0.82rem; }
.level-count[b-fdld7me5k9] { color: var(--text-secondary); font-size: 0.68rem; text-align: right; }
.level-percent[b-fdld7me5k9] { color: var(--text-muted); font-size: 0.62rem; text-align: right; }
.level-row i[b-fdld7me5k9] { grid-column: 2 / -1; display: block; height: 0.42rem; overflow: hidden; border-radius: 999px; background: var(--border-subtle); }
.level-row b[b-fdld7me5k9] { display: block; height: 100%; min-width: 0.25rem; border-radius: inherit; background: currentColor; }
.level-n5[b-fdld7me5k9] { color: #15a66d; } .level-n4[b-fdld7me5k9] { color: #287bdd; } .level-n3[b-fdld7me5k9] { color: #8053ed; } .level-n2[b-fdld7me5k9] { color: #e48119; } .level-n1[b-fdld7me5k9] { color: #e34c5c; }
.rail-link[b-fdld7me5k9] { display: block; margin-top: 0.9rem; color: var(--accent-primary); font-size: 0.68rem; font-weight: 750; text-align: right; text-decoration: none; }
.rail-empty[b-fdld7me5k9] { margin: 0; padding: 0.8rem; border-radius: 0.65rem; background: var(--surface-secondary); color: var(--text-muted); font-size: 0.72rem; }
/* /Components/Landing/LandingAibo.razor.rz.scp.css */
.aibo-cards[b-fvk3znno78] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 56rem; margin: 0 auto; }
.aibo-card[b-fvk3znno78] { display: flex; align-items: center; gap: 1.5rem; min-width: 0; padding: 2rem; border: 1px solid var(--border-subtle); border-radius: 1.25rem; background: linear-gradient(145deg, var(--surface-accent), var(--surface-primary)); box-shadow: var(--shadow-card); }
.aibo-art[b-fvk3znno78] { width: 7rem; height: 11rem; flex-shrink: 0; }
.aibo-art img[b-fvk3znno78] { width: 100%; height: 100%; object-fit: contain; }
.aibo-card h3[b-fvk3znno78] { font-size: 1.5rem; font-weight: 800; margin: 0 0 .6rem; }
.aibo-card h3 span[b-fvk3znno78] { color: var(--accent-hover); font-size: 1rem; }
.aibo-card p[b-fvk3znno78] { margin: 0; color: var(--text-secondary); font-size: .9rem; line-height: 1.6; }
.aibo-action[b-fvk3znno78] { display: flex; justify-content: center; margin-top: 2rem; }
@media (max-width: 850px) { .aibo-cards[b-fvk3znno78] { grid-template-columns: 1fr; max-width: 32rem; } }
@media (max-width: 480px) { .aibo-card[b-fvk3znno78] { padding: 1.25rem; gap: 1rem; } .aibo-art[b-fvk3znno78] { width: 5rem; height: 8rem; } }
/* /Components/Landing/LandingCta.razor.rz.scp.css */
.final-cta[b-c1r3mkg7y6] { text-align: center; padding: clamp(2rem, 5vw, 4rem) 1.25rem; border: 1px solid var(--border-subtle); border-radius: 1.5rem; background: linear-gradient(135deg, var(--surface-accent), var(--surface-primary)); box-shadow: var(--shadow-card); }
.final-cta .marketing-title[b-c1r3mkg7y6] { margin-block: .75rem 1.25rem; }
.final-cta .marketing-lead[b-c1r3mkg7y6] { max-width: 34rem; margin: 0 auto 1.75rem; }
.final-cta-note[b-c1r3mkg7y6] { margin: 1.5rem 0 0; color: var(--text-secondary); font-size: .8rem; }
/* /Components/Landing/LandingDashboard.razor.rz.scp.css */
.dashboard-demo[b-zwdjm3m94n] { padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--border-strong); border-radius: 1.25rem; background: var(--bg-canvas); box-shadow: var(--shadow-overlay); }
.dashboard-demo-header[b-zwdjm3m94n] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.dashboard-demo-header div > span[b-zwdjm3m94n] { color: var(--accent-hover); font-size: .7rem; font-weight: 750; }
.dashboard-demo-header h3[b-zwdjm3m94n] { margin: .25rem 0 0; color: var(--text-primary); font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 850; letter-spacing: -.025em; }
.dashboard-demo-label[b-zwdjm3m94n] { padding: .5rem .75rem; border: 1px solid var(--border-subtle); border-radius: .65rem; background: var(--surface-secondary); color: var(--text-secondary); font-size: .7rem; }
.dashboard-demo-grid[b-zwdjm3m94n] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; }
.dashboard-demo-note[b-zwdjm3m94n] { margin: 1.25rem 0 0; color: var(--text-secondary); font-size: .75rem; line-height: 1.7; }
.dashboard-demo[b-zwdjm3m94n]  .plan-copy small, .dashboard-demo[b-zwdjm3m94n]  .plan-count, .dashboard-demo[b-zwdjm3m94n]  .level-cell small, .dashboard-demo[b-zwdjm3m94n]  .metric-cell small { color: var(--text-secondary); }
.dashboard-demo[b-zwdjm3m94n]  header a { color: var(--text-primary); text-decoration: underline; text-underline-offset: .2em; }
.dashboard-demo-cta[b-zwdjm3m94n] { display: flex; justify-content: center; margin-top: 1.75rem; }
@media (max-width: 800px) { .dashboard-demo-grid[b-zwdjm3m94n] { grid-template-columns: 1fr; } }
/* /Components/Landing/LandingDictionary.razor.rz.scp.css */
.dictionary-section[b-mi4g81eekc] { background: var(--surface-secondary); border-block: 1px solid var(--border-subtle); }
.dictionary-inner[b-mi4g81eekc] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); align-items: start; gap: clamp(2rem, 4vw, 3rem); }
.dictionary-copy[b-mi4g81eekc] { grid-row: 1; grid-column: 2; padding-top: 1rem; }
.dictionary-demo[b-mi4g81eekc] { grid-row: 1; grid-column: 1; }
.dictionary-demo[b-mi4g81eekc] { min-width: 0; padding: 1.25rem; border: 1px solid var(--border-strong); border-radius: 1.25rem; background: var(--surface-primary); box-shadow: var(--shadow-card); }
.dictionary-demo-header[b-mi4g81eekc] { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.dictionary-demo-header .marketing-icon[b-mi4g81eekc] { margin: 0; }
.dictionary-demo-header h3[b-mi4g81eekc] { margin: 0; color: var(--text-primary); font-size: 1.1rem; font-weight: 800; }
.dictionary-demo-header div > span[b-mi4g81eekc] { color: var(--text-secondary); font-size: .75rem; }
.dictionary-search[b-mi4g81eekc] { display: flex; align-items: center; gap: .75rem; padding: .25rem .85rem; border: 1px solid var(--border-strong); border-radius: .75rem; background: var(--surface-secondary); }
.dictionary-search[b-mi4g81eekc]  .nav-icon { flex-shrink: 0; color: var(--accent-hover); width: 20px; height: 20px; }
.dictionary-search:focus-within[b-mi4g81eekc] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.dictionary-search input[b-mi4g81eekc] { width: 100%; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--text-primary); font-size: .8rem; outline: none; }
.dictionary-search input[b-mi4g81eekc]::placeholder { color: var(--text-secondary); }
.dictionary-demo-status[b-mi4g81eekc] { margin: .85rem 0; color: var(--text-secondary); font-size: .75rem; }
.dictionary-word-grid[b-mi4g81eekc] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.dictionary-demo-word[b-mi4g81eekc] { min-width: 0; padding: 1rem; border: 1px solid var(--border-subtle); border-radius: .85rem; background: var(--surface-secondary); }
/* Reuse canonical word content while adapting its immersive-player palette to the app theme. */
.dictionary-demo-word[b-mi4g81eekc]  .word-card__kanji { color: var(--text-primary); font-size: 1.75rem; }
.dictionary-demo-word[b-mi4g81eekc]  .word-card__kana { color: var(--text-secondary); font-size: .8rem; }
.dictionary-demo-word[b-mi4g81eekc]  .word-card__translation { color: var(--text-primary); font-size: .85rem; margin-bottom: .75rem; }
.dictionary-demo-word[b-mi4g81eekc]  .word-card__level { color: var(--text-primary); background: var(--surface-accent); }
.dictionary-demo-word[b-mi4g81eekc]  .word-card__btn { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem; font-size: .7rem; text-align: center; text-decoration: none; color: var(--text-primary); background: var(--surface-accent); border-color: var(--border-strong); }
.dictionary-demo-note[b-mi4g81eekc] { margin: 1rem 0 0; color: var(--text-secondary); font-size: .75rem; line-height: 1.6; }
.dictionary-empty[b-mi4g81eekc] { padding: 1.5rem 1rem; margin: 0; border-radius: .75rem; background: var(--surface-secondary); color: var(--text-secondary); font-size: .85rem; }
.dictionary-steps[b-mi4g81eekc] { list-style: none; padding: 0; display: grid; gap: 1.25rem; margin: 0 0 2rem; }
.dictionary-steps li[b-mi4g81eekc] { display: flex; align-items: flex-start; gap: 1rem; }
.dictionary-steps li > span[b-mi4g81eekc] { display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border: 1px solid var(--border-subtle); border-radius: .65rem; background: var(--surface-accent); color: var(--accent-hover); font-size: .8rem; font-weight: 800; }
.dictionary-steps h3[b-mi4g81eekc] { margin: 0 0 .35rem; font-size: .95rem; font-weight: 750; }
.dictionary-steps p[b-mi4g81eekc] { margin: 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.6; }
@media (max-width: 800px) { .dictionary-inner[b-mi4g81eekc] { grid-template-columns: 1fr; } .dictionary-copy[b-mi4g81eekc] { grid-row: 1; grid-column: 1; padding-top: 0; } .dictionary-demo[b-mi4g81eekc] { grid-row: 2; } }
@media (max-width: 400px) { .dictionary-demo[b-mi4g81eekc] { padding: 1rem; } .dictionary-word-grid[b-mi4g81eekc] { gap: .5rem; } .dictionary-demo-word[b-mi4g81eekc] { padding: .75rem .6rem; } }
/* /Components/Landing/LandingHero.razor.rz.scp.css */
.hero[b-ypsfhkizys] { padding-block: clamp(3rem, 7vw, 6rem); background: radial-gradient(ellipse at 80% 20%, var(--accent-soft), transparent 65%); }
.hero-inner[b-ypsfhkizys] { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.hero-content[b-ypsfhkizys] { min-width: 0; }
.hero h1[b-ypsfhkizys] { font-size: clamp(2.5rem, 5.2vw, 4.5rem); line-height: 1.07; font-weight: 850; letter-spacing: -.05em; margin: .75rem 0 1.5rem; }
.hero h1 span[b-ypsfhkizys] { color: var(--accent-hover); }
.hero .marketing-lead[b-ypsfhkizys] { max-width: 32rem; }
.hero-perks[b-ypsfhkizys] { list-style: none; display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; padding: 0; margin: 1.5rem 0 0; font-size: .8rem; color: var(--text-secondary); }
.hero-perks li[b-ypsfhkizys]::before { content: "✓"; color: var(--accent-hover); padding-right: .4rem; }
.hero-art[b-ypsfhkizys] { margin: 0; min-width: 0; }
.hero-art-scene[b-ypsfhkizys] { position: relative; aspect-ratio: 1.1; border: 1px solid var(--border-strong); border-radius: 1.5rem; overflow: hidden; background: var(--surface-accent); box-shadow: var(--shadow-overlay); }
.hero-background[b-ypsfhkizys] { width: 100%; height: 100%; object-fit: cover; }
.hero-actor[b-ypsfhkizys] { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 88%; width: auto; object-fit: contain; }
.hero-art-label[b-ypsfhkizys] { position: absolute; top: 1.25rem; left: 1.25rem; background: var(--surface-primary); color: var(--text-primary); padding: .5rem .8rem; border: 1px solid var(--border-subtle); border-radius: .7rem; font-size: .75rem; font-weight: 750; }
.hero-art figcaption[b-ypsfhkizys] { margin-top: .8rem; text-align: center; color: var(--text-secondary); font-size: .75rem; }
@media (max-width: 800px) { .hero-inner[b-ypsfhkizys] { grid-template-columns: 1fr; } .hero-art[b-ypsfhkizys] { width: min(100%, 32rem); margin: 0 auto; } .hero-art-scene[b-ypsfhkizys] { aspect-ratio: 1.4; } }
.hero-preview-links[b-ypsfhkizys] { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .75rem; }
.hero-preview-links a[b-ypsfhkizys] { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--accent-hover); font-size: .8rem; font-weight: 700; text-underline-offset: .2em; }
/* /Components/Landing/LandingLearningHooks.razor.rz.scp.css */
.learning-hooks[b-19vbxeds2r] { border-block: 1px solid var(--border-subtle); background: var(--surface-secondary); }
.learning-hooks-grid[b-19vbxeds2r] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.learning-hook[b-19vbxeds2r] { padding: clamp(1.5rem, 3vw, 2rem); }
.learning-hook--stories[b-19vbxeds2r] { border-color: var(--accent-primary); background: var(--surface-accent); }
.learning-hook-label[b-19vbxeds2r] { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; font-size: .8rem; font-weight: 750; color: var(--accent-hover); }
.learning-hook-label .marketing-icon[b-19vbxeds2r] { flex-shrink: 0; margin: 0; }
.learning-hook--stories .marketing-icon[b-19vbxeds2r] { background: var(--surface-primary); }
.learning-hook--stories .learning-hook-label[b-19vbxeds2r], .learning-hook--stories .learning-hook-link[b-19vbxeds2r] { color: var(--text-primary); }
.learning-hook h3[b-19vbxeds2r] { font-size: clamp(1.1rem, 2vw, 1.35rem); }
.learning-hook-link[b-19vbxeds2r] { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: .75rem; font-size: .85rem; font-weight: 750; text-decoration: underline; }
@media (max-width: 640px) { .learning-hooks-grid[b-19vbxeds2r] { grid-template-columns: 1fr; } }
/* /Components/Landing/LandingStories.razor.rz.scp.css */
.stories-inner[b-nb7zrwub2x] { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr); align-items: center; gap: clamp(2rem, 4vw, 3rem); }
.stories-inner .marketing-title[b-nb7zrwub2x] { margin-block: .75rem 1.25rem; }
.stories-benefits[b-nb7zrwub2x] { list-style: none; padding: 0; display: grid; gap: 1.25rem; margin: 1.75rem 0 2rem; }
.stories-benefits li[b-nb7zrwub2x] { display: flex; gap: 1rem; align-items: flex-start; }
.stories-benefits[b-nb7zrwub2x]  .nav-icon { color: var(--accent-hover); margin-top: .15rem; }
.stories-benefits h3[b-nb7zrwub2x] { margin: 0 0 .4rem; font-size: .95rem; font-weight: 750; }
.stories-benefits p[b-nb7zrwub2x] { margin: 0; font-size: .85rem; color: var(--text-secondary); line-height: 1.6; }
.story-preview[b-nb7zrwub2x] { min-width: 0; margin: 0; }
.story-preview figcaption[b-nb7zrwub2x], .story-preview noscript p[b-nb7zrwub2x] { margin: 1rem .25rem 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.6; }
/* Like the immersive player, this scene stays dark in both outer themes. Only the art clips. */
.story-demo[b-nb7zrwub2x] { border: 1px solid var(--border-strong); border-radius: 1.25rem; background: #14141c; color: var(--story-text); box-shadow: var(--shadow-overlay); }
.story-demo-bar[b-nb7zrwub2x] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; }
.story-demo-bar > div:first-child[b-nb7zrwub2x] { display: grid; gap: .4rem; }
.demo-badge[b-nb7zrwub2x] { color: var(--story-purple); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.story-demo-bar strong[b-nb7zrwub2x] { font-size: .9rem; }
.story-demo-toggles[b-nb7zrwub2x] { display: flex; gap: .35rem; }
.story-demo button:not(.vocab-word)[b-nb7zrwub2x] { min-width: 44px; min-height: 44px; border: 1px solid rgba(180, 138, 255, .35); border-radius: .65rem; background: rgba(180, 138, 255, .12); color: var(--story-purple); font-size: .75rem; font-weight: 750; }
.story-demo button:disabled[b-nb7zrwub2x] { opacity: .5; }
.story-demo-toggles button[aria-pressed="false"][b-nb7zrwub2x] { color: #b8b8c8; background: transparent; border-color: var(--story-border); }
.story-demo button:focus-visible[b-nb7zrwub2x] { outline: 2px solid var(--story-purple); outline-offset: 3px; }
.story-demo-stage[b-nb7zrwub2x] { position: relative; height: 230px; overflow: hidden; }
.story-demo-background[b-nb7zrwub2x] { width: 100%; height: 100%; object-fit: cover; }
.story-demo-stage[b-nb7zrwub2x]::after { content: ''; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent, #14141c); pointer-events: none; }
.story-demo-actor[b-nb7zrwub2x] { position: absolute; bottom: -3rem; height: 115%; width: auto; object-fit: contain; }
.story-demo-actor--aibo[b-nb7zrwub2x] { left: 9%; }
.story-demo-actor--aiko[b-nb7zrwub2x] { right: 9%; }
.story-demo-dialogue[b-nb7zrwub2x]  .dialogue-box { min-height: 215px; background: #14141c; backdrop-filter: none; padding: 1rem 1.25rem; }
.story-demo-dialogue[b-nb7zrwub2x]  .dialogue-box__japanese { line-height: 1.9; }
.story-demo-dialogue[b-nb7zrwub2x]  .dialogue-box__english { color: #b8b8c8; }
.story-demo-dialogue[b-nb7zrwub2x]  .dialogue-box__hint-text { color: #b8b8c8; }
.story-demo-footer[b-nb7zrwub2x] { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem 1.25rem 1rem; border-top: 1px solid var(--story-border); }
.story-demo-footer > span[b-nb7zrwub2x] { color: #b8b8c8; font-size: .7rem; }
.story-demo-footer button[b-nb7zrwub2x] { padding: .5rem .85rem; }
@media (max-width: 800px) { .stories-inner[b-nb7zrwub2x] { grid-template-columns: 1fr; } .story-demo-stage[b-nb7zrwub2x] { height: 260px; } }
@media (max-width: 400px) { .story-demo-bar[b-nb7zrwub2x], .story-demo-footer[b-nb7zrwub2x] { padding-inline: 1rem; } .story-demo-stage[b-nb7zrwub2x] { height: 210px; } .story-demo-dialogue[b-nb7zrwub2x]  .dialogue-box { min-height: 270px; padding-inline: 1rem; } }
/* /Components/Landing/LandingWhyKokoro.razor.rz.scp.css */
.trust[b-vak9jlf69f] { background: var(--surface-secondary); border-block: 1px solid var(--border-subtle); }
.trust-cards[b-vak9jlf69f] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 700px) { .trust-cards[b-vak9jlf69f] { grid-template-columns: 1fr; } }
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-layout[b-95cwag751w] { min-height: 100svh; display: flex; flex-direction: column; background: radial-gradient(ellipse at 10% 25%, var(--accent-soft), transparent 60%), var(--bg-canvas); color: var(--text-primary); }
.auth-header[b-95cwag751w] { width: min(100%, 76rem); padding: 1rem clamp(1rem, 3vw, 2rem); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.auth-home[b-95cwag751w] { display: inline-flex; align-items: center; gap: .65rem; color: var(--text-primary); font-size: 1.5rem; font-weight: 850; letter-spacing: -.05em; text-decoration: none; }
.auth-home:hover[b-95cwag751w] { color: var(--text-primary); }
.auth-header-actions[b-95cwag751w] { display: flex; align-items: center; gap: .75rem; }
.auth-back-compact[b-95cwag751w] { display: none; }
.auth-content[b-95cwag751w] { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
.auth-content:focus[b-95cwag751w] { outline: none; }
@media (max-width: 480px) { .auth-home[b-95cwag751w] { font-size: 1.25rem; gap: .4rem; } .auth-header-actions[b-95cwag751w] { gap: .35rem; } .auth-header-actions > a[b-95cwag751w] { font-size: .75rem; padding-inline: .5rem; } .auth-back-label[b-95cwag751w] { display: none; } .auth-back-compact[b-95cwag751w] { display: inline; } }
/* /Components/Layout/ContextSidebar.razor.rz.scp.css */
.context-backdrop[b-yjtdvpva2g] {
    display: none;
}

.context-sidebar[b-yjtdvpva2g] {
    width: 15.5rem;
    height: 100vh;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-subtle);
    color: var(--text-primary);
    overflow: hidden;
    transition: width 180ms ease, transform 200ms ease;
}

.context-header[b-yjtdvpva2g] {
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.45rem;
}

.context-brand[b-yjtdvpva2g] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.context-brand-name[b-yjtdvpva2g] {
    color: var(--text-primary);
    font-size: 1.45rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.context-brand-tagline[b-yjtdvpva2g] {
    margin-top: 0.22rem;
    color: var(--text-muted);
    font-size: 0.69rem;
    white-space: nowrap;
}

.drawer-close[b-yjtdvpva2g] {
    display: none;
    width: 2.35rem;
    height: 2.35rem;
    margin-left: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-secondary);
    font-size: 1.55rem;
    line-height: 1;
}

.context-zone[b-yjtdvpva2g] {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.context-zone-eyebrow[b-yjtdvpva2g] {
    color: var(--accent-primary);
    font-size: 0.63rem !important;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.context-zone strong[b-yjtdvpva2g] {
    font-size: 1rem;
}

.context-zone span:last-child[b-yjtdvpva2g] {
    color: var(--text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.context-links[b-yjtdvpva2g] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.context-section[b-yjtdvpva2g] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.context-section h2[b-yjtdvpva2g] {
    margin: 0;
    padding: 0 0.75rem 0.25rem;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.context-link[b-yjtdvpva2g] {
    min-height: 3.35rem;
    padding: 0.62rem 0.75rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}

.context-link:hover[b-yjtdvpva2g] {
    color: var(--text-primary);
    background: var(--surface-secondary);
    transform: translateX(2px);
    text-decoration: none;
}

.context-link.is-active[b-yjtdvpva2g] {
    color: var(--accent-primary);
    background: var(--surface-accent);
}

.context-link:focus-visible[b-yjtdvpva2g],
.context-brand:focus-visible[b-yjtdvpva2g],
.drawer-close:focus-visible[b-yjtdvpva2g],
.context-collapse:focus-visible[b-yjtdvpva2g] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.context-link[b-yjtdvpva2g]  .nav-icon {
    width: 1.45rem;
    height: 1.45rem;
}

.context-link-copy[b-yjtdvpva2g] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    white-space: nowrap;
}

.context-link-copy strong[b-yjtdvpva2g] {
    color: inherit;
    font-size: 0.86rem;
    font-weight: 680;
}

.context-link-copy small[b-yjtdvpva2g] {
    color: var(--text-muted);
    font-size: 0.67rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.context-link.is-tour-highlight[b-yjtdvpva2g] {
    animation: navigation-highlight-b-yjtdvpva2g 1.35s ease-in-out infinite;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 52%, transparent);
}

.context-collapse[b-yjtdvpva2g] {
    min-height: 2.75rem;
    margin-top: auto;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--surface-primary);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 650;
}

.context-collapse:hover[b-yjtdvpva2g] {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.context-collapse[b-yjtdvpva2g]  .nav-icon {
    width: 1rem;
    height: 1rem;
    transform: rotate(180deg);
    transition: transform 180ms ease;
}

.context-sidebar.is-collapsed[b-yjtdvpva2g] {
    width: 4.75rem;
}

.context-sidebar.is-collapsed .context-header[b-yjtdvpva2g],
.context-sidebar.is-collapsed .context-zone[b-yjtdvpva2g],
.context-sidebar.is-collapsed .context-section h2[b-yjtdvpva2g],
.context-sidebar.is-collapsed .context-link-copy[b-yjtdvpva2g],
.context-sidebar.is-collapsed .context-collapse span[b-yjtdvpva2g] {
    display: none;
}

.context-sidebar.is-collapsed .context-link[b-yjtdvpva2g],
.context-sidebar.is-collapsed .context-collapse[b-yjtdvpva2g] {
    padding-inline: 0;
}

.context-sidebar.is-collapsed .context-collapse[b-yjtdvpva2g]  .nav-icon {
    transform: rotate(0deg);
}

@keyframes navigation-highlight-b-yjtdvpva2g {
    0%, 100% { background: var(--surface-accent); }
    50% { background: color-mix(in srgb, var(--accent-primary) 20%, var(--surface-primary)); }
}

@media (max-width: 1179.98px) {
    .context-backdrop[b-yjtdvpva2g] {
        position: fixed;
        inset: 0;
        z-index: 78;
        display: block;
        background: color-mix(in srgb, var(--text-primary) 28%, transparent);
        backdrop-filter: blur(2px);
    }

    .context-sidebar[b-yjtdvpva2g],
    .context-sidebar.is-collapsed[b-yjtdvpva2g] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 4.75rem;
        z-index: 80;
        width: min(19rem, calc(100vw - 4.75rem));
        box-shadow: var(--shadow-overlay);
        transform: translateX(-115%);
        visibility: hidden;
    }

    .context-sidebar.is-open[b-yjtdvpva2g] {
        transform: translateX(0);
        visibility: visible;
    }

    .context-sidebar.is-collapsed .context-header[b-yjtdvpva2g],
    .context-sidebar.is-collapsed .context-zone[b-yjtdvpva2g],
    .context-sidebar.is-collapsed .context-section h2[b-yjtdvpva2g],
    .context-sidebar.is-collapsed .context-link-copy[b-yjtdvpva2g],
    .context-sidebar.is-collapsed .context-collapse span[b-yjtdvpva2g] {
        display: flex;
    }

    .context-sidebar.is-collapsed .context-section h2[b-yjtdvpva2g] {
        display: block;
    }

    .context-sidebar.is-collapsed .context-link[b-yjtdvpva2g] {
        padding: 0.62rem 0.75rem;
    }

    .drawer-close[b-yjtdvpva2g] {
        display: inline-grid;
        place-items: center;
    }

    .context-collapse[b-yjtdvpva2g] {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .context-sidebar[b-yjtdvpva2g],
    .context-sidebar.is-collapsed[b-yjtdvpva2g] {
        left: 0;
        width: min(20rem, 88vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .context-sidebar[b-yjtdvpva2g],
    .context-link[b-yjtdvpva2g],
    .context-collapse[b-yjtdvpva2g]  .nav-icon,
    .context-link.is-tour-highlight[b-yjtdvpva2g] {
        animation: none;
        transition: none;
    }
}
/* /Components/Layout/GlobalRail.razor.rz.scp.css */
.global-rail[b-6p031d2z8u] {
    width: 4.75rem;
    height: 100vh;
    padding: 0.65rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background: var(--surface-primary);
    border-right: 1px solid var(--border-subtle);
    position: relative;
    z-index: 72;
}

.global-brand[b-6p031d2z8u] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    text-decoration: none;
    background: var(--surface-secondary);
    box-shadow: var(--shadow-soft);
}

.global-brand img[b-6p031d2z8u] {
    width: 2.15rem;
    height: 2.15rem;
}

.global-brand:focus-visible[b-6p031d2z8u],
.global-link:focus-visible[b-6p031d2z8u] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.global-links[b-6p031d2z8u],
.global-account[b-6p031d2z8u] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}

.global-account[b-6p031d2z8u] {
    margin-top: auto;
}

.global-link[b-6p031d2z8u] {
    width: 3.5rem;
    min-height: 3.5rem;
    padding: 0.45rem 0.2rem;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.global-link:hover[b-6p031d2z8u] {
    color: var(--text-primary);
    background: var(--surface-secondary);
    transform: translateY(-1px);
    text-decoration: none;
}

.global-link.is-active[b-6p031d2z8u] {
    color: var(--accent-primary);
    background: var(--surface-accent);
}

.global-link[b-6p031d2z8u]  .nav-icon {
    width: 1.35rem;
    height: 1.35rem;
}

.global-label[b-6p031d2z8u] {
    font-size: 0.61rem;
    line-height: 1;
    font-weight: 650;
    letter-spacing: 0.01em;
}

@media (max-width: 767.98px) {
    .global-rail[b-6p031d2z8u] {
        display: none;
    }
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
.landing-page[b-6py58izgm4] { min-height: 100svh; display: flex; flex-direction: column; background: var(--bg-canvas); color: var(--text-primary); }
.landing-header[b-6py58izgm4] { position: sticky; top: 0; z-index: 200; border-bottom: 1px solid var(--border-subtle); background: var(--bg-sidebar); }
.landing-header-inner[b-6py58izgm4] { width: min(100%, 76rem); margin: 0 auto; padding: .85rem clamp(1rem, 3vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.landing-logo[b-6py58izgm4] { display: inline-flex; align-items: center; gap: .65rem; color: var(--text-primary); font-size: 1.5rem; font-weight: 850; letter-spacing: -.05em; text-decoration: none; }
.landing-logo:hover[b-6py58izgm4] { color: var(--text-primary); }
.landing-header-controls[b-6py58izgm4] { display: flex; align-items: center; gap: .85rem; }
.landing-header-actions[b-6py58izgm4] { display: flex; gap: .65rem; }
.landing-main[b-6py58izgm4] { flex: 1; }
#blazor-error-ui[b-6py58izgm4] { background: var(--surface-primary); color: var(--text-primary); border: 1px solid var(--danger); bottom: 0; display: none; left: 0; padding: .75rem 3rem .75rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss[b-6py58izgm4] { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
@media (max-width: 480px) {
    .landing-header-inner[b-6py58izgm4] { gap: .5rem; }
    .landing-logo[b-6py58izgm4] { font-size: 1.25rem; gap: .4rem; }
    .landing-header-controls[b-6py58izgm4] { gap: .3rem; }
    .landing-header-actions[b-6py58izgm4] { gap: .3rem; }
    .landing-header-actions a[b-6py58izgm4] { padding-inline: .5rem; font-size: .75rem; white-space: nowrap; }
    .landing-header-actions a span[b-6py58izgm4] { display: none; }
}
@media (max-width: 350px) { .landing-logo[b-6py58izgm4] { min-width: 44px; min-height: 44px; justify-content: center; } .landing-logo span[b-6py58izgm4] { display: none; } }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-q4uljto1ul] {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: var(--bg-canvas);
}

.app-shell.is-immersive[b-q4uljto1ul],
.app-shell.is-immersive .app-workspace[b-q4uljto1ul],
.app-shell.is-immersive .app-main[b-q4uljto1ul] {
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
}

.app-shell.is-immersive .content[b-q4uljto1ul] {
    height: 100%;
    overflow: hidden;
}

.app-navigation[b-q4uljto1ul] {
    height: 100vh;
    display: flex;
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 60;
}

.app-workspace[b-q4uljto1ul] {
    min-width: 0;
    min-height: 100vh;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.app-header[b-q4uljto1ul] {
    height: 4.25rem;
    padding: 0 2rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--bg-canvas) 88%, transparent);
    backdrop-filter: blur(14px);
}

.app-header-start[b-q4uljto1ul] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.mobile-brand[b-q4uljto1ul] {
    display: none;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.mobile-brand img[b-q4uljto1ul] {
    width: 1.75rem;
    height: 1.75rem;
}

.mobile-brand:focus-visible[b-q4uljto1ul] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.app-main[b-q4uljto1ul] {
    min-width: 0;
    min-height: calc(100vh - 4.25rem);
    flex: 1;
    display: flex;
    flex-direction: column;
}

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

#blazor-error-ui[b-q4uljto1ul] {
    background: color-mix(in srgb, var(--danger) 16%, var(--surface-primary));
    color: var(--danger);
    bottom: 0;
    box-shadow: var(--shadow-overlay);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-q4uljto1ul] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (max-width: 1179.98px) {
    .app-header[b-q4uljto1ul] {
        padding-inline: 1.35rem;
    }
}

@media (max-width: 767.98px) {
    .app-navigation[b-q4uljto1ul] {
        width: 0;
    }

    .app-header[b-q4uljto1ul] {
        height: 3.9rem;
        padding-inline: 0.85rem;
    }

    .mobile-brand[b-q4uljto1ul] {
        display: flex;
    }

    .app-main[b-q4uljto1ul] {
        min-height: calc(100vh - 3.9rem);
        padding-bottom: calc(5.2rem + env(safe-area-inset-bottom));
    }
}
/* /Components/Layout/MobileBottomNavigation.razor.rz.scp.css */
.mobile-bottom-nav[b-f8ffp0hegb] {
    display: none;
}

@media (max-width: 767.98px) {
    .mobile-bottom-nav[b-f8ffp0hegb] {
        position: fixed;
        right: 0.65rem;
        bottom: calc(0.55rem + env(safe-area-inset-bottom));
        left: 0.65rem;
        z-index: 70;
        min-height: 4.2rem;
        padding: 0.38rem;
        border: 1px solid var(--border-subtle);
        border-radius: 1.15rem;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        background: color-mix(in srgb, var(--surface-primary) 92%, transparent);
        box-shadow: var(--shadow-overlay);
        backdrop-filter: blur(16px);
    }

    .mobile-bottom-link[b-f8ffp0hegb] {
        min-width: 0;
        min-height: 3.35rem;
        padding: 0.35rem 0.15rem;
        border: 0;
        border-radius: 0.85rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.22rem;
        background: transparent;
        color: var(--text-muted);
        text-decoration: none;
        font-family: inherit;
        font-size: 0.62rem;
        font-weight: 650;
    }

    .mobile-bottom-link:hover[b-f8ffp0hegb],
    .mobile-bottom-link.is-active[b-f8ffp0hegb] {
        color: var(--accent-primary);
        background: var(--surface-accent);
        text-decoration: none;
    }

    .mobile-bottom-link:focus-visible[b-f8ffp0hegb] {
        outline: 3px solid var(--focus-ring);
        outline-offset: -1px;
    }

    .mobile-bottom-link[b-f8ffp0hegb]  .nav-icon {
        width: 1.25rem;
        height: 1.25rem;
    }
}
/* /Components/Layout/MobileMenuButton.razor.rz.scp.css */
.mobile-menu-button[b-z7ef9suic7] {
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    display: inline-grid;
    place-items: center;
    background: var(--surface-primary);
    color: var(--text-secondary);
    box-shadow: var(--shadow-soft);
}

.mobile-menu-button:hover[b-z7ef9suic7],
.mobile-menu-button.is-active[b-z7ef9suic7] {
    color: var(--accent-primary);
    background: var(--surface-accent);
}

.mobile-menu-button:focus-visible[b-z7ef9suic7] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.mobile-menu-button[b-z7ef9suic7]  .nav-icon {
    width: 1.3rem;
    height: 1.3rem;
}

@media (min-width: 1180px) {
    .mobile-menu-button[b-z7ef9suic7] {
        display: none;
    }
}
/* /Components/Layout/NavIcon.razor.rz.scp.css */
.nav-icon[b-1jd138i2hr] {
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.nav-icon svg[b-1jd138i2hr] {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-icon-glyph[b-1jd138i2hr] {
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 650;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-xbxgr5el0o],
.components-reconnect-repeated-attempt-visible[b-xbxgr5el0o],
.components-reconnect-failed-visible[b-xbxgr5el0o],
.components-pause-visible[b-xbxgr5el0o],
.components-resume-failed-visible[b-xbxgr5el0o],
.components-rejoining-animation[b-xbxgr5el0o] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Onboarding/OnboardingHost.razor.rz.scp.css */
.onboarding-layer[b-fva6kkkgtq] {
    position: fixed;
    inset: 0;
    z-index: 2500;
    pointer-events: none;
}

.onboarding-shade[b-fva6kkkgtq] {
    position: fixed;
    background: rgb(5 4 12 / 76%);
    backdrop-filter: blur(1.5px);
    pointer-events: auto;
}

.onboarding-shade--full[b-fva6kkkgtq] {
    inset: 0;
}

.onboarding-spotlight[b-fva6kkkgtq] {
    position: fixed;
    border: 2px solid rgb(200 168 255 / 90%);
    border-radius: 1rem;
    box-shadow: 0 0 0.75rem rgb(180 138 255 / 60%), inset 0 0 0.6rem rgb(180 138 255 / 18%);
    pointer-events: auto;
    transition: left 180ms ease, top 180ms ease, width 180ms ease, height 180ms ease;
}

.onboarding-dialog[b-fva6kkkgtq] {
    position: fixed;
    z-index: 2502;
    width: min(25rem, calc(100vw - 2rem));
    border: 1px solid rgb(180 138 255 / 35%);
    border-radius: 1.25rem;
    background: linear-gradient(145deg, #211735 0%, #17131f 65%);
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 55%);
    color: var(--dark-text);
    pointer-events: auto;
    overflow: hidden;
}

.onboarding-dialog--center[b-fva6kkkgtq] {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.onboarding-dialog--target[b-fva6kkkgtq] {
    right: 1.5rem;
    bottom: 1.5rem;
}

.onboarding-dialog__close[b-fva6kkkgtq] {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dark-text-muted);
    font-size: 1.25rem;
    line-height: 1;
}

.onboarding-dialog__close:hover[b-fva6kkkgtq] {
    color: var(--dark-text);
}

.onboarding-dialog__content[b-fva6kkkgtq] {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 1rem;
    padding: 1.4rem 2.5rem 1rem 1.25rem;
}

.onboarding-aibo[b-fva6kkkgtq] {
    align-self: end;
    height: 7.5rem;
    overflow: hidden;
    border-radius: 0.9rem;
    background: radial-gradient(circle at 50% 80%, rgb(180 138 255 / 24%), transparent 70%);
}

.onboarding-aibo img[b-fva6kkkgtq] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 0.4rem 0.7rem rgb(0 0 0 / 35%));
}

.onboarding-copy[b-fva6kkkgtq] {
    min-width: 0;
}

.onboarding-kicker[b-fva6kkkgtq] {
    display: block;
    margin-bottom: 0.35rem;
    color: #bfa0f7;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.onboarding-copy h2[b-fva6kkkgtq] {
    margin: 0 0 0.45rem;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.onboarding-copy p[b-fva6kkkgtq] {
    margin: 0;
    color: var(--dark-text-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.onboarding-copy .onboarding-note[b-fva6kkkgtq] {
    margin-top: 0.6rem;
    color: #ffd479;
    font-size: 0.74rem;
}

.onboarding-actions[b-fva6kkkgtq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem 1.1rem;
    border-top: 1px solid rgb(255 255 255 / 7%);
}

.onboarding-skip[b-fva6kkkgtq],
.onboarding-next[b-fva6kkkgtq] {
    min-height: 2.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: 0.7rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.onboarding-skip[b-fva6kkkgtq] {
    border: 0;
    background: transparent;
    color: var(--dark-text-muted);
}

.onboarding-next[b-fva6kkkgtq] {
    border: 1px solid rgb(200 168 255 / 40%);
    background: linear-gradient(135deg, #9f78ef, #7657c8);
    color: white;
    box-shadow: 0 0.5rem 1.25rem rgb(118 87 200 / 30%);
}

.onboarding-skip:disabled[b-fva6kkkgtq],
.onboarding-next:disabled[b-fva6kkkgtq],
.onboarding-dialog__close:disabled[b-fva6kkkgtq] {
    opacity: 0.55;
}

@media (max-width: 640px) {
    .onboarding-dialog[b-fva6kkkgtq],
    .onboarding-dialog--center[b-fva6kkkgtq],
    .onboarding-dialog--target[b-fva6kkkgtq] {
        top: auto;
        right: 0.75rem;
        bottom: calc(0.75rem + env(safe-area-inset-bottom));
        left: 0.75rem;
        width: auto;
        transform: none;
        border-radius: 1.1rem;
    }

    .onboarding-dialog__content[b-fva6kkkgtq] {
        grid-template-columns: 4.5rem 1fr;
        padding: 1.1rem 2.25rem 0.85rem 1rem;
    }

    .onboarding-aibo[b-fva6kkkgtq] {
        height: 6rem;
    }

    .onboarding-actions[b-fva6kkkgtq] {
        padding: 0.75rem 1rem 0.9rem;
    }

    .onboarding-skip[b-fva6kkkgtq],
    .onboarding-next[b-fva6kkkgtq] {
        min-height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .onboarding-spotlight[b-fva6kkkgtq] {
        transition: none;
    }
}
/* /Components/Pages/Alphabet/Alphabet.razor.rz.scp.css */
.alphabet-page[b-q2ojknd7og] {
    width: min(100%, 72rem);
    min-height: 100%;
    margin: 0 auto;
    padding: .9rem clamp(1rem, 2.2vw, 2.2rem) 3rem;
}

.alphabet-hero[b-q2ojknd7og] {
    position: relative;
    display: flex;
    min-height: 9rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    padding: clamp(1.3rem, 2.8vw, 1.9rem);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, var(--border-subtle));
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 87% 18%, color-mix(in srgb, var(--accent-primary) 22%, transparent), transparent 32%),
        linear-gradient(135deg, color-mix(in srgb, var(--surface-accent) 88%, var(--surface-primary)), var(--surface-primary));
    box-shadow: var(--shadow-card);
}

.alphabet-hero__copy[b-q2ojknd7og] {
    position: relative;
    z-index: 1;
    max-width: 44rem;
}

.eyebrow[b-q2ojknd7og],
.section-kicker[b-q2ojknd7og] {
    color: var(--accent-primary);
    font-size: .69rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.alphabet-hero h1[b-q2ojknd7og] {
    margin: .25rem 0 .4rem;
    color: var(--text-primary);
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight: 900;
    letter-spacing: -.05em;
}

.alphabet-hero p[b-q2ojknd7og] {
    max-width: 40rem;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.script-mark[b-q2ojknd7og] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: .35rem;
    padding: .9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-subtle));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-elevated) 87%, transparent);
    box-shadow: var(--shadow-card);
    color: var(--accent-primary);
    backdrop-filter: blur(12px);
}

.script-mark span[b-q2ojknd7og] {
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 800;
    line-height: 1;
}

.script-mark span:nth-child(2)[b-q2ojknd7og] { opacity: .72; }
.script-mark span:nth-child(3)[b-q2ojknd7og] { color: var(--warning); }

.load-warning[b-q2ojknd7og] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .75rem;
    padding: .75rem .9rem;
    border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-subtle));
    border-radius: .85rem;
    background: color-mix(in srgb, var(--warning) 8%, var(--surface-primary));
    color: var(--text-secondary);
    font-size: .76rem;
}

.load-warning button[b-q2ojknd7og] {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--accent-primary);
    font-size: .74rem;
    font-weight: 800;
    cursor: pointer;
}

.study-section[b-q2ojknd7og],
.practice-section[b-q2ojknd7og] {
    margin-top: .75rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid var(--border-subtle);
    border-radius: 1.2rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
}

.section-heading[b-q2ojknd7og] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-heading h2[b-q2ojknd7og] {
    margin: .18rem 0 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 850;
    letter-spacing: -.025em;
}

.section-summary[b-q2ojknd7og] {
    color: var(--text-muted);
    font-size: .68rem;
    text-align: right;
}

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

.script-card[b-q2ojknd7og] {
    display: grid;
    min-width: 0;
    gap: .8rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent-primary) 13%, transparent), transparent 43%),
        var(--surface-secondary);
    color: var(--text-primary);
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.script-card--kanji[b-q2ojknd7og] {
    --study-progress-accent: var(--warning);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--warning) 15%, transparent), transparent 43%),
        var(--surface-secondary);
}

.script-card:hover[b-q2ojknd7og] {
    transform: translateY(-2px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-card);
    color: var(--text-primary);
}

.script-card--kanji:hover[b-q2ojknd7og] { border-color: var(--warning); }

.script-card:focus-visible[b-q2ojknd7og],
.practice-card:focus-visible[b-q2ojknd7og],
.load-warning button:focus-visible[b-q2ojknd7og] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.script-card__glyph[b-q2ojknd7og] {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border-radius: .9rem;
    background: var(--surface-accent);
    color: var(--accent-primary);
    font-size: 2rem;
    font-weight: 850;
}

.script-card--kanji .script-card__glyph[b-q2ojknd7og] {
    background: color-mix(in srgb, var(--warning) 12%, var(--surface-primary));
    color: var(--warning);
}

.script-card__copy[b-q2ojknd7og] {
    display: grid;
    gap: .14rem;
}

.script-card__copy strong[b-q2ojknd7og] {
    font-size: .98rem;
    font-weight: 850;
}

.script-card__copy small[b-q2ojknd7og] {
    color: var(--text-muted);
    font-size: .68rem;
}

.script-card__copy > span[b-q2ojknd7og] {
    min-height: 2.5em;
    color: var(--text-secondary);
    font-size: .72rem;
    line-height: 1.45;
}

.script-card__action[b-q2ojknd7og] {
    color: var(--accent-primary);
    font-size: .72rem;
    font-weight: 800;
}

.script-card--kanji .script-card__action[b-q2ojknd7og] { color: var(--warning); }

.progress-unavailable[b-q2ojknd7og] {
    color: var(--text-muted);
    font-size: .68rem;
}

.script-card--skeleton[b-q2ojknd7og] {
    min-height: 17rem;
    pointer-events: none;
}

.script-card--skeleton span[b-q2ojknd7og] {
    height: .8rem;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--surface-secondary) 25%, var(--surface-primary) 45%, var(--surface-secondary) 65%);
    background-size: 250% 100%;
    animation: alphabet-shimmer-b-q2ojknd7og 1.4s linear infinite;
}

.script-card--skeleton span:first-child[b-q2ojknd7og] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: .9rem;
}

.script-card--skeleton span:last-child[b-q2ojknd7og] { width: 62%; }

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

.practice-card[b-q2ojknd7og] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    min-width: 0;
    min-height: 6.6rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: var(--surface-secondary);
    color: var(--text-primary);
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.practice-card:hover[b-q2ojknd7og] {
    transform: translateY(-2px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-card);
    color: var(--text-primary);
}

.practice-card--kanji:hover[b-q2ojknd7og] { border-color: var(--warning); }

.practice-card__icon[b-q2ojknd7og] {
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    place-items: center;
    border-radius: .9rem;
    background: var(--surface-accent);
    color: var(--accent-primary);
    font-size: 1.15rem;
    font-weight: 900;
}

.practice-card--kanji .practice-card__icon[b-q2ojknd7og] {
    background: color-mix(in srgb, var(--warning) 12%, var(--surface-primary));
    color: var(--warning);
}

.practice-card__copy[b-q2ojknd7og] {
    display: grid;
    gap: .2rem;
}

.practice-card__copy strong[b-q2ojknd7og] {
    font-size: .86rem;
    font-weight: 850;
}

.practice-card__copy small[b-q2ojknd7og] {
    color: var(--text-muted);
    font-size: .68rem;
    line-height: 1.45;
}

.practice-card__arrow[b-q2ojknd7og] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.practice-card--kanji .practice-card__arrow[b-q2ojknd7og] { color: var(--warning); }

@keyframes alphabet-shimmer-b-q2ojknd7og {
    to { background-position-x: -250%; }
}

@media (max-width: 760px) {
    .script-grid[b-q2ojknd7og] { grid-template-columns: 1fr; }
    .script-card--skeleton[b-q2ojknd7og] { min-height: 11rem; }
}

@media (max-width: 620px) {
    .alphabet-page[b-q2ojknd7og] { padding-inline: .8rem; }
    .alphabet-hero[b-q2ojknd7og] { align-items: flex-start; }
    .script-mark[b-q2ojknd7og] { display: none; }
    .practice-grid[b-q2ojknd7og] { grid-template-columns: 1fr; }
    .section-heading[b-q2ojknd7og] { align-items: flex-start; }
    .section-summary[b-q2ojknd7og] { max-width: 11rem; }
}

@media (max-width: 420px) {
    .load-warning[b-q2ojknd7og] { align-items: flex-start; flex-direction: column; }
    .section-summary[b-q2ojknd7og] { display: none; }
}
/* /Components/Pages/Alphabet/KanaStudyPage.razor.rz.scp.css */
.kana-page[b-h9ne45ovnr] {
    width: min(100%, 68rem);
    min-height: 100%;
    margin: 0 auto;
    padding: .9rem clamp(1rem, 2.2vw, 2.2rem) 3rem;
}

.breadcrumbs[b-h9ne45ovnr] {
    margin-bottom: .65rem;
}

.breadcrumbs a[b-h9ne45ovnr] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 750;
    text-decoration: none;
}

.breadcrumbs a:hover[b-h9ne45ovnr] { color: var(--accent-primary); }

.kana-hero[b-h9ne45ovnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.05rem, 2.3vw, 1.45rem);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, var(--border-subtle));
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--accent-primary) 18%, transparent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--surface-accent) 80%, var(--surface-primary)), var(--surface-primary));
    box-shadow: var(--shadow-card);
}

.kana-hero__title[b-h9ne45ovnr] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
}

.hero-glyph[b-h9ne45ovnr] {
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 27%, var(--border-subtle));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-elevated) 87%, transparent);
    color: var(--accent-primary);
    font-size: 2.45rem;
    font-weight: 850;
}

.eyebrow[b-h9ne45ovnr],
.section-kicker[b-h9ne45ovnr] {
    color: var(--accent-primary);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.kana-hero h1[b-h9ne45ovnr] {
    margin: .15rem 0 .25rem;
    color: var(--text-primary);
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.kana-hero h1 span[b-h9ne45ovnr] {
    margin-left: .35rem;
    color: var(--text-muted);
    font-size: .75em;
    font-weight: 600;
}

.kana-hero p[b-h9ne45ovnr] {
    max-width: 40rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: .76rem;
    line-height: 1.5;
}

.quiz-link[b-h9ne45ovnr],
.primary-action[b-h9ne45ovnr] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 2.55rem;
    padding: .68rem 1rem;
    border: 0;
    border-radius: .75rem;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    font-size: .74rem;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.quiz-link:hover[b-h9ne45ovnr],
.primary-action:hover[b-h9ne45ovnr] {
    background: var(--accent-hover);
    color: var(--text-on-accent);
}

.quiz-link:focus-visible[b-h9ne45ovnr],
.primary-action:focus-visible[b-h9ne45ovnr],
.kana-cell:focus-visible[b-h9ne45ovnr],
.breadcrumbs a:focus-visible[b-h9ne45ovnr] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.progress-card[b-h9ne45ovnr] {
    display: grid;
    grid-template-columns: minmax(10rem, .65fr) minmax(15rem, 1fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    margin-top: .7rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
}

.progress-card__copy[b-h9ne45ovnr] {
    display: grid;
    gap: .12rem;
}

.progress-card__copy strong[b-h9ne45ovnr] {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 850;
}

.progress-card__copy small[b-h9ne45ovnr] {
    color: var(--text-muted);
    font-size: .68rem;
}

.action-message[b-h9ne45ovnr] {
    margin-top: .7rem;
    padding: .72rem .9rem;
    border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border-subtle));
    border-radius: .8rem;
    background: color-mix(in srgb, var(--danger) 8%, var(--surface-primary));
    color: var(--text-secondary);
    font-size: .73rem;
}

.kana-sections[b-h9ne45ovnr] {
    display: grid;
    gap: .75rem;
    margin-top: .75rem;
}

.kana-section[b-h9ne45ovnr] {
    min-width: 0;
    padding: clamp(.9rem, 2vw, 1.2rem);
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
}

.section-heading[b-h9ne45ovnr] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
}

.section-heading h2[b-h9ne45ovnr] {
    margin: .12rem 0 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: -.02em;
}

.section-heading > span[b-h9ne45ovnr] {
    color: var(--text-muted);
    font-size: .66rem;
}

.kana-table-scroll[b-h9ne45ovnr] {
    overflow-x: auto;
    padding: .12rem .12rem .45rem;
    scrollbar-color: var(--border-strong) transparent;
}

.kana-table[b-h9ne45ovnr] {
    display: grid;
    width: max-content;
    min-width: 100%;
    gap: .45rem;
}

.kana-row[b-h9ne45ovnr] {
    display: flex;
    width: max-content;
    min-width: 100%;
    align-items: center;
    gap: .45rem;
}

.row-label[b-h9ne45ovnr] {
    width: 1.6rem;
    flex: 0 0 1.6rem;
    color: var(--text-muted);
    font-size: .65rem;
    font-weight: 800;
    text-align: center;
}

.kana-cell[b-h9ne45ovnr] {
    position: relative;
    display: grid;
    width: 4.35rem;
    height: 4.35rem;
    flex: 0 0 4.35rem;
    place-items: center;
    align-content: center;
    gap: .14rem;
    padding: .35rem;
    border: 1px solid var(--border-subtle);
    border-radius: .8rem;
    background: var(--surface-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.kana-cell:hover:not(:disabled)[b-h9ne45ovnr] {
    transform: translateY(-1px);
    border-color: var(--accent-primary);
    background: var(--surface-accent);
}

.kana-cell.is-known[b-h9ne45ovnr] {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border-subtle));
    background: color-mix(in srgb, var(--success) 8%, var(--surface-primary));
}

.kana-cell.is-busy[b-h9ne45ovnr] { opacity: .62; }

.kana-char[b-h9ne45ovnr] {
    font-size: 1.58rem;
    font-weight: 700;
    line-height: 1;
}

.kana-romaji[b-h9ne45ovnr] {
    color: var(--text-muted);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.kana-memory[b-h9ne45ovnr] {
    position: absolute;
    top: .25rem;
    right: .28rem;
    color: var(--text-muted);
    font-size: .5rem;
    font-weight: 850;
}

.kana-memory.is-mastered[b-h9ne45ovnr] { color: var(--success); }
.kana-memory.is-growing[b-h9ne45ovnr] { color: var(--warning); }
.kana-memory.is-started[b-h9ne45ovnr] { color: var(--danger); }

.state-card[b-h9ne45ovnr] {
    display: grid;
    width: min(100%, 36rem);
    min-height: 19rem;
    margin: 1rem auto 0;
    place-items: center;
    align-content: center;
    gap: .45rem;
    padding: 2rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1.1rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
    color: var(--text-secondary);
    text-align: center;
}

.state-card--error[b-h9ne45ovnr] {
    border-color: color-mix(in srgb, var(--danger) 32%, var(--border-subtle));
}

.state-card strong[b-h9ne45ovnr] {
    color: var(--text-primary);
    font-size: 1.05rem;
}

.state-card > span:last-of-type[b-h9ne45ovnr] {
    max-width: 28rem;
    font-size: .76rem;
    line-height: 1.5;
}

.state-icon[b-h9ne45ovnr],
.state-spinner[b-h9ne45ovnr] {
    display: grid;
    width: 3.3rem;
    height: 3.3rem;
    margin-bottom: .35rem;
    place-items: center;
    border-radius: 50%;
}

.state-icon[b-h9ne45ovnr] {
    background: var(--surface-accent);
    color: var(--accent-primary);
    font-size: 1.35rem;
    font-weight: 900;
}

.state-spinner[b-h9ne45ovnr] {
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent-primary);
    animation: kana-spin-b-h9ne45ovnr .75s linear infinite;
}

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

@media (max-width: 680px) {
    .kana-page[b-h9ne45ovnr] { padding-inline: .8rem; }
    .kana-hero[b-h9ne45ovnr] { align-items: flex-start; flex-direction: column; }
    .quiz-link[b-h9ne45ovnr] { width: 100%; }
    .progress-card[b-h9ne45ovnr] { grid-template-columns: 1fr; gap: .8rem; }
}

@media (max-width: 460px) {
    .hero-glyph[b-h9ne45ovnr] { width: 3.7rem; height: 3.7rem; font-size: 2rem; }
    .kana-cell[b-h9ne45ovnr] { width: 3.8rem; height: 3.8rem; flex-basis: 3.8rem; }
    .kana-char[b-h9ne45ovnr] { font-size: 1.4rem; }
}
/* /Components/Pages/Alphabet/KanjiTable.razor.rz.scp.css */
.kanji-page[b-mmays7kpf0] {
    --study-progress-accent: var(--warning);
    width: min(100%, 72rem);
    min-height: 100%;
    margin: 0 auto;
    padding: .9rem clamp(1rem, 2.2vw, 2.2rem) 3rem;
}

.breadcrumbs[b-mmays7kpf0] { margin-bottom: .65rem; }

.breadcrumbs a[b-mmays7kpf0] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 750;
    text-decoration: none;
}

.breadcrumbs a:hover[b-mmays7kpf0] { color: var(--warning); }

.kanji-hero[b-mmays7kpf0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.05rem, 2.3vw, 1.45rem);
    border: 1px solid color-mix(in srgb, var(--warning) 25%, var(--border-subtle));
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--warning) 19%, transparent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--warning) 7%, var(--surface-primary)), var(--surface-primary));
    box-shadow: var(--shadow-card);
}

.kanji-hero__title[b-mmays7kpf0] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
}

.hero-glyph[b-mmays7kpf0] {
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--border-subtle));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--warning) 10%, var(--surface-elevated));
    color: var(--warning);
    font-size: 2.45rem;
    font-weight: 850;
}

.eyebrow[b-mmays7kpf0] {
    color: var(--warning);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.kanji-hero h1[b-mmays7kpf0] {
    margin: .15rem 0 .25rem;
    color: var(--text-primary);
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.kanji-hero h1 span[b-mmays7kpf0] {
    margin-left: .35rem;
    color: var(--text-muted);
    font-size: .75em;
    font-weight: 600;
}

.kanji-hero p[b-mmays7kpf0] {
    max-width: 40rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: .76rem;
    line-height: 1.5;
}

.quiz-link[b-mmays7kpf0],
.primary-action[b-mmays7kpf0],
.secondary-action[b-mmays7kpf0] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 2.55rem;
    padding: .68rem 1rem;
    border-radius: .75rem;
    font-size: .74rem;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.quiz-link[b-mmays7kpf0],
.primary-action[b-mmays7kpf0] {
    border: 0;
    background: var(--warning);
    color: #19140b;
}

.quiz-link:hover[b-mmays7kpf0],
.primary-action:hover[b-mmays7kpf0] {
    filter: brightness(1.05);
    color: #19140b;
}

.secondary-action[b-mmays7kpf0] {
    border: 1px solid var(--border-strong);
    background: var(--surface-secondary);
    color: var(--text-primary);
}

.kanji-toolbar[b-mmays7kpf0] {
    display: grid;
    grid-template-columns: minmax(15rem, 1.35fr) minmax(14rem, .65fr);
    align-items: center;
    gap: 1.2rem;
    margin-top: .7rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
}

.search-field[b-mmays7kpf0] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 2.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: .78rem;
    background: var(--surface-secondary);
    color: var(--text-muted);
}

.search-field:focus-within[b-mmays7kpf0] {
    border-color: var(--warning);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent);
}

.search-icon[b-mmays7kpf0] {
    padding-left: .8rem;
    font-size: 1.1rem;
}

.search-field input[b-mmays7kpf0] {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: .76rem;
}

.search-field input[b-mmays7kpf0]::placeholder { color: var(--input-placeholder); }

.search-field button[b-mmays7kpf0] {
    width: 2.5rem;
    align-self: stretch;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.05rem;
    cursor: pointer;
}

.stats-unavailable[b-mmays7kpf0] {
    color: var(--text-muted);
    font-size: .7rem;
    text-align: center;
}

.action-message[b-mmays7kpf0] {
    margin-top: .7rem;
    padding: .72rem .9rem;
    border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border-subtle));
    border-radius: .8rem;
    background: color-mix(in srgb, var(--danger) 8%, var(--surface-primary));
    color: var(--text-secondary);
    font-size: .73rem;
}

.result-summary[b-mmays7kpf0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .95rem .15rem .55rem;
    color: var(--text-muted);
    font-size: .66rem;
}

.kanji-grid[b-mmays7kpf0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr));
    gap: .55rem;
}

.kanji-card[b-mmays7kpf0] {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 8.4rem;
    place-items: center;
    align-content: center;
    gap: .28rem;
    padding: .75rem .55rem;
    border: 1px solid var(--border-subtle);
    border-radius: .9rem;
    background: var(--surface-primary);
    color: var(--text-primary);
    text-align: center;
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.kanji-card:hover:not(:disabled)[b-mmays7kpf0] {
    transform: translateY(-2px);
    border-color: var(--warning);
    box-shadow: var(--shadow-card);
    background: color-mix(in srgb, var(--warning) 6%, var(--surface-primary));
}

.kanji-card.is-known[b-mmays7kpf0] {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border-subtle));
    background: color-mix(in srgb, var(--success) 7%, var(--surface-primary));
}

.kanji-card.is-busy[b-mmays7kpf0] { opacity: .62; }

.kanji-char[b-mmays7kpf0] {
    color: var(--warning);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
}

.kanji-meaning[b-mmays7kpf0] {
    width: 100%;
    overflow: hidden;
    color: var(--text-primary);
    font-size: .66rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanji-readings[b-mmays7kpf0] {
    width: 100%;
    overflow: hidden;
    color: var(--text-muted);
    font-size: .58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanji-memory[b-mmays7kpf0] {
    position: absolute;
    top: .35rem;
    right: .42rem;
    color: var(--text-muted);
    font-size: .52rem;
    font-weight: 850;
}

.kanji-memory.is-mastered[b-mmays7kpf0] { color: var(--success); }
.kanji-memory.is-growing[b-mmays7kpf0] { color: var(--warning); }
.kanji-memory.is-started[b-mmays7kpf0] { color: var(--danger); }

.kanji-grid--skeleton[b-mmays7kpf0] {
    margin-top: 1rem;
}

.kanji-grid--skeleton .kanji-card[b-mmays7kpf0] {
    pointer-events: none;
}

.kanji-grid--skeleton .kanji-card span[b-mmays7kpf0] {
    width: 70%;
    height: .55rem;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--surface-secondary) 25%, var(--surface-primary) 45%, var(--surface-secondary) 65%);
    background-size: 250% 100%;
    animation: kanji-shimmer-b-mmays7kpf0 1.4s linear infinite;
}

.kanji-grid--skeleton .kanji-card span:first-child[b-mmays7kpf0] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .65rem;
}

.kanji-grid--skeleton .kanji-card span:last-child[b-mmays7kpf0] { width: 50%; }

.load-more[b-mmays7kpf0] {
    display: flex;
    min-height: 5rem;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    color: var(--text-muted);
    font-size: .7rem;
}

.load-more--error[b-mmays7kpf0] {
    margin-top: .65rem;
    min-height: auto;
    padding: .8rem;
    border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border-subtle));
    border-radius: .8rem;
    background: color-mix(in srgb, var(--danger) 7%, var(--surface-primary));
}

.load-more button[b-mmays7kpf0] {
    border: 0;
    background: transparent;
    color: var(--warning);
    font-size: .7rem;
    font-weight: 850;
    cursor: pointer;
}

.end-note[b-mmays7kpf0] {
    margin: 1rem 0 0;
    color: var(--text-muted);
    font-size: .68rem;
    text-align: center;
}

.state-card[b-mmays7kpf0] {
    display: grid;
    width: min(100%, 36rem);
    min-height: 20rem;
    margin: 1rem auto 0;
    place-items: center;
    align-content: center;
    gap: .45rem;
    padding: 2rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1.1rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.state-card--error[b-mmays7kpf0] {
    border-color: color-mix(in srgb, var(--danger) 32%, var(--border-subtle));
}

.state-card h2[b-mmays7kpf0] {
    margin: .3rem 0 0;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 850;
}

.state-card p[b-mmays7kpf0] {
    max-width: 28rem;
    margin: 0 0 .7rem;
    color: var(--text-secondary);
    font-size: .76rem;
    line-height: 1.5;
}

.state-icon[b-mmays7kpf0],
.state-spinner[b-mmays7kpf0] {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border-radius: 50%;
}

.state-icon[b-mmays7kpf0] {
    background: color-mix(in srgb, var(--warning) 12%, var(--surface-primary));
    color: var(--warning);
    font-size: 1.1rem;
    font-weight: 900;
}

.state-spinner[b-mmays7kpf0] {
    width: 1.45rem;
    height: 1.45rem;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--warning);
    animation: kanji-spin-b-mmays7kpf0 .75s linear infinite;
}

.sentinel[b-mmays7kpf0] { height: 1px; }

.kanji-card:focus-visible[b-mmays7kpf0],
.quiz-link:focus-visible[b-mmays7kpf0],
.primary-action:focus-visible[b-mmays7kpf0],
.secondary-action:focus-visible[b-mmays7kpf0],
.breadcrumbs a:focus-visible[b-mmays7kpf0],
.search-field button:focus-visible[b-mmays7kpf0],
.load-more button:focus-visible[b-mmays7kpf0] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

@keyframes kanji-spin-b-mmays7kpf0 { to { transform: rotate(360deg); } }
@keyframes kanji-shimmer-b-mmays7kpf0 { to { background-position-x: -250%; } }

@media (max-width: 720px) {
    .kanji-page[b-mmays7kpf0] { padding-inline: .8rem; }
    .kanji-toolbar[b-mmays7kpf0] { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .kanji-hero[b-mmays7kpf0] { align-items: flex-start; flex-direction: column; }
    .quiz-link[b-mmays7kpf0] { width: 100%; }
    .kanji-grid[b-mmays7kpf0] { grid-template-columns: repeat(auto-fill, minmax(6.8rem, 1fr)); }
    .kanji-card[b-mmays7kpf0] { min-height: 7.7rem; }
}

@media (max-width: 420px) {
    .hero-glyph[b-mmays7kpf0] { width: 3.7rem; height: 3.7rem; font-size: 2rem; }
    .result-summary span:last-child[b-mmays7kpf0] { display: none; }
}
/* /Components/Pages/ChooseAibo.razor.rz.scp.css */
.ca-page[b-jgpv8newuf] { width: min(100%, 60rem); padding: 2rem clamp(1rem, 3vw, 2rem) 3rem; display: grid; gap: 2rem; }
.ca-header[b-jgpv8newuf] { text-align: center; max-width: 34rem; margin: 0 auto; }
.ca-eyebrow[b-jgpv8newuf] { color: var(--accent-hover); font-size: .8rem; font-weight: 750; letter-spacing: .1em; margin: 0 0 .75rem; }
.ca-title[b-jgpv8newuf] { font-size: clamp(2rem, 4vw, 3rem); font-weight: 850; letter-spacing: -.04em; color: var(--text-primary); margin: 0 0 1rem; }
.ca-title-accent[b-jgpv8newuf] { color: var(--accent-hover); }
.ca-subtitle[b-jgpv8newuf] { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; margin: 0; }
.ca-cards[b-jgpv8newuf] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.ca-card-form[b-jgpv8newuf] { min-width: 0; display: flex; }
.ca-card[b-jgpv8newuf] { display: flex; flex-direction: column; width: 100%; padding: 0; border: 1px solid var(--border-subtle); border-radius: 1.25rem; overflow: hidden; background: var(--surface-primary); color: var(--text-primary); text-align: left; box-shadow: var(--shadow-card); }
.ca-card:hover[b-jgpv8newuf] { border-color: var(--accent-primary); }
.ca-card-art[b-jgpv8newuf] { height: 260px; width: 100%; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(145deg, var(--surface-accent), var(--surface-secondary)); }
.ca-character-img[b-jgpv8newuf] { height: 92%; width: auto; object-fit: contain; object-position: bottom; }
.ca-card-body[b-jgpv8newuf] { padding: 1.5rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; width: 100%; }
.ca-card-name-row[b-jgpv8newuf] { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.ca-card-name[b-jgpv8newuf] { font-size: 1.6rem; font-weight: 800; color: var(--accent-hover); }
.ca-card-kanji[b-jgpv8newuf] { color: var(--text-secondary); font-size: 1.25rem; }
.ca-card-tags[b-jgpv8newuf] { display: flex; gap: .4rem; flex-wrap: wrap; }
.ca-tag[b-jgpv8newuf] { font-size: .7rem; font-weight: 650; padding: .25rem .55rem; border-radius: .5rem; background: var(--surface-accent); color: var(--accent-hover); }
.ca-card-desc[b-jgpv8newuf] { margin: 0; flex: 1; color: var(--text-secondary); font-size: .85rem; line-height: 1.7; }
.ca-card-cta[b-jgpv8newuf] { display: inline-flex; align-items: center; min-height: 44px; font-size: .85rem; font-weight: 750; color: var(--accent-hover); }
.ca-footer-note[b-jgpv8newuf] { text-align: center; color: var(--text-secondary); font-size: .8rem; margin: 0; }
@media (max-width: 640px) { .ca-cards[b-jgpv8newuf] { grid-template-columns: 1fr; } .ca-card-art[b-jgpv8newuf] { height: 230px; } }
/* /Components/Pages/CollectionDetail.razor.rz.scp.css */
.collection-detail[b-nn0liwn5ch] { width: min(100%, 74rem); margin: 0 auto; padding: .9rem clamp(1rem, 2.2vw, 2.2rem) 3rem; display: grid; gap: 1.25rem; color: var(--text-primary); }
.collection-back[b-nn0liwn5ch] { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-secondary); text-decoration: none; font-size: .8rem; font-weight: 650; width: fit-content; min-height: 44px; }
.collection-back:hover[b-nn0liwn5ch] { color: var(--accent-hover); }
.collection-hero[b-nn0liwn5ch] { display: flex; align-items: center; gap: 1.25rem; padding: 1.75rem; border-radius: 18px; border: 1px solid var(--border-subtle); background: var(--surface-primary); box-shadow: var(--shadow-card); }
.collection-hero-icon[b-nn0liwn5ch] { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: var(--surface-accent); font-size: 2.25rem; flex-shrink: 0; }
.collection-hero-copy[b-nn0liwn5ch] { flex: 1; min-width: 0; }
.collection-hero h1[b-nn0liwn5ch] { margin: .65rem 0 .5rem; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em; font-weight: 800; overflow-wrap: anywhere; }
.collection-hero p[b-nn0liwn5ch] { font-size: .9rem; color: var(--text-secondary); margin: 0; }
.collection-hero-meta[b-nn0liwn5ch] { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; color: var(--text-secondary); font-size: .75rem; }
.collection-badge[b-nn0liwn5ch] { padding: .25rem .5rem; border-radius: 6px; background: var(--accent-soft); color: var(--accent-hover); font-size: .7rem; font-weight: 750; }
.collection-button[b-nn0liwn5ch] { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-height: 44px; padding: .65rem 1rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-primary); color: var(--text-primary); text-decoration: none; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.collection-button:hover:not(:disabled)[b-nn0liwn5ch] { border-color: var(--accent-primary); color: var(--accent-hover); }
.collection-button-primary[b-nn0liwn5ch] { color: var(--text-on-accent); background: var(--accent-action); border-color: var(--accent-action); }
.collection-button-primary:hover:not(:disabled)[b-nn0liwn5ch] { background: var(--accent-action-hover); color: var(--text-on-accent); }
button:disabled[b-nn0liwn5ch] { opacity: .5; cursor: not-allowed; }
button:focus-visible[b-nn0liwn5ch], a:focus-visible[b-nn0liwn5ch] { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.collection-progress[b-nn0liwn5ch] { display: grid; grid-template-columns: 1fr minmax(200px, 360px); align-items: center; gap: 1.5rem; border: 1px solid var(--border-subtle); background: var(--surface-primary); border-radius: 16px; padding: 1.25rem 1.5rem; }
.collection-progress h2[b-nn0liwn5ch], .collection-words-heading h2[b-nn0liwn5ch] { margin: 0 0 .4rem; font-size: 1rem; font-weight: 750; }
.collection-progress p[b-nn0liwn5ch] { color: var(--text-secondary); font-size: .8rem; margin: 0; }
.collection-words[b-nn0liwn5ch] { display: grid; gap: 1rem; }
.collection-words-heading[b-nn0liwn5ch] { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; }
.collection-words-heading h2[b-nn0liwn5ch] { margin: 0; }
.collection-words-heading > span[b-nn0liwn5ch] { font-size: .75rem; color: var(--text-secondary); }
.collection-word-list[b-nn0liwn5ch] { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.collection-word[b-nn0liwn5ch] { display: grid; grid-template-columns: minmax(120px, .75fr) minmax(150px, 1.5fr) auto auto; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--border-subtle); background: var(--surface-primary); border-radius: 12px; }
.collection-word-japanese[b-nn0liwn5ch] { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.collection-word-kana[b-nn0liwn5ch] { font-size: 1.1rem; font-weight: 700; }
.collection-word-kanji[b-nn0liwn5ch] { font-size: .9rem; color: var(--text-secondary); }
.collection-word-translation[b-nn0liwn5ch] { color: var(--text-secondary); font-size: .85rem; overflow-wrap: anywhere; }
.collection-word-meta[b-nn0liwn5ch] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .7rem; }
.collection-word-level[b-nn0liwn5ch] { padding: .25rem .4rem; border: 1px solid var(--border-subtle); border-radius: 5px; color: var(--text-secondary); background: var(--surface-secondary); font-weight: 750; }
.collection-word-memory[b-nn0liwn5ch] { color: var(--text-secondary); }
.collection-word-memory.mastered[b-nn0liwn5ch] { color: var(--success); font-weight: 650; }
.collection-word-remove[b-nn0liwn5ch] { min-height: 44px; padding: .5rem .65rem; border: 1px solid var(--border-subtle); background: var(--surface-secondary); border-radius: 8px; color: var(--text-secondary); font-size: .75rem; }
.collection-word-remove:hover:not(:disabled)[b-nn0liwn5ch] { border-color: var(--danger); background: var(--surface-primary); color: var(--danger); }
.collection-state[b-nn0liwn5ch] { display: grid; justify-items: center; gap: .75rem; padding: 2.5rem 1.25rem; border: 1px dashed var(--border-strong); border-radius: 16px; text-align: center; background: var(--surface-primary); }
.collection-state h1[b-nn0liwn5ch] { font-size: 1.5rem; font-weight: 800; margin: 0; }
.collection-state h3[b-nn0liwn5ch] { font-size: 1rem; font-weight: 750; margin: 0; }
.collection-state p[b-nn0liwn5ch] { margin: 0; color: var(--text-secondary); font-size: .85rem; }
.collection-empty-icon[b-nn0liwn5ch] { font-size: 1.75rem; }
.collection-notice[b-nn0liwn5ch] { margin: 0; padding: 1rem; color: var(--text-secondary); background: var(--surface-secondary); border-radius: 10px; font-size: .85rem; }
.collection-error[b-nn0liwn5ch] { border: 1px solid var(--danger); background: var(--surface-primary); }
.collection-error[b-nn0liwn5ch], .collection-error p[b-nn0liwn5ch] { color: var(--text-primary); }
.collection-load-more[b-nn0liwn5ch] { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem; color: var(--text-secondary); font-size: .85rem; }
.collection-end[b-nn0liwn5ch] { text-align: center; color: var(--text-secondary); margin: 0; padding: 1rem; font-size: .75rem; }
.collection-sentinel[b-nn0liwn5ch] { height: 1px; }
@media (max-width: 1100px) {
    .collection-word[b-nn0liwn5ch] { grid-template-columns: minmax(100px, .75fr) minmax(100px, 1.25fr) auto; }
    .collection-word-meta[b-nn0liwn5ch] { grid-column: 2; }
    .collection-word-remove[b-nn0liwn5ch] { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 600px) {
    .collection-hero[b-nn0liwn5ch] { padding: 1.25rem; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
    .collection-hero-icon[b-nn0liwn5ch] { width: 48px; height: 48px; border-radius: 13px; font-size: 1.6rem; }
    .collection-hero-copy[b-nn0liwn5ch] { flex-basis: calc(100% - 64px); }
    .collection-hero h1[b-nn0liwn5ch] { font-size: 1.55rem; }
    .collection-hero > a[b-nn0liwn5ch] { width: 100%; }
    .collection-progress[b-nn0liwn5ch] { grid-template-columns: 1fr; padding: 1.25rem; gap: 1rem; }
    .collection-word[b-nn0liwn5ch] { grid-template-columns: minmax(0, 1fr) auto; padding: 1rem; gap: .65rem; }
    .collection-word-japanese[b-nn0liwn5ch] { grid-column: 1; }
    .collection-word-translation[b-nn0liwn5ch] { grid-column: 1 / -1; }
    .collection-word-meta[b-nn0liwn5ch] { grid-column: 1; grid-row: 3; }
    .collection-word-remove[b-nn0liwn5ch] { grid-column: 2; grid-row: 1; }
}
/* /Components/Pages/Collections.razor.rz.scp.css */
.collections-page[b-97lhl2stip] { width: min(100%, 80rem); margin: 0 auto; padding: 1.65rem clamp(1rem, 2.2vw, 2.2rem) 3rem; display: grid; gap: 1.5rem; color: var(--text-primary); }
.collections-header[b-97lhl2stip] { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--border-subtle); border-radius: 18px; background: linear-gradient(135deg, var(--surface-accent), var(--surface-primary)); }
.collections-header > div[b-97lhl2stip] { min-width: 0; }
.collections-eyebrow[b-97lhl2stip] { color: var(--accent-hover); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.collections-header h1[b-97lhl2stip] { font-size: clamp(1.8rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.04em; margin: .3rem 0 .5rem; }
.collections-header p[b-97lhl2stip], .collection-section-heading p[b-97lhl2stip], .collection-create-heading p[b-97lhl2stip] { color: var(--text-secondary); margin: 0; font-size: .9rem; }
.collections-primary[b-97lhl2stip], .collections-secondary[b-97lhl2stip], .collections-danger[b-97lhl2stip] { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .65rem 1rem; border: 1px solid transparent; border-radius: 11px; font-size: .85rem; font-weight: 700; }
.collections-primary[b-97lhl2stip] { background: var(--accent-action); color: var(--text-on-accent); white-space: nowrap; }
.collections-primary:hover:not(:disabled)[b-97lhl2stip] { background: var(--accent-action-hover); }
.collections-secondary[b-97lhl2stip] { background: var(--surface-primary); border-color: var(--border-strong); color: var(--text-primary); }
.collections-secondary:hover:not(:disabled)[b-97lhl2stip] { background: var(--surface-secondary); border-color: var(--accent-primary); }
.collections-danger[b-97lhl2stip] { background: var(--surface-primary); border-color: var(--danger); color: var(--danger); }
button:disabled[b-97lhl2stip] { opacity: .55; cursor: not-allowed; }
button:focus-visible[b-97lhl2stip], a:focus-visible[b-97lhl2stip], input:focus-visible[b-97lhl2stip] { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.collections-toolbar[b-97lhl2stip] { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 1rem; background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 1rem; }
.collection-search[b-97lhl2stip] { display: grid; gap: .4rem; font-size: .75rem; font-weight: 700; }
.collection-input[b-97lhl2stip] { min-height: 44px; width: 100%; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-secondary); color: var(--text-primary); padding: .65rem .85rem; font-size: .9rem; }
.collection-input[b-97lhl2stip]::placeholder { color: var(--text-muted); }
.collection-filters[b-97lhl2stip] { display: flex; gap: .4rem; flex-wrap: wrap; }
.collection-filters button[b-97lhl2stip] { display: inline-flex; gap: .5rem; align-items: center; border: 1px solid var(--border-subtle); border-radius: 10px; min-height: 44px; padding: .6rem .75rem; background: var(--surface-secondary); color: var(--text-secondary); font-size: .8rem; font-weight: 700; }
.collection-filters button.active[b-97lhl2stip] { background: var(--accent-soft); border-color: var(--accent-primary); color: var(--accent-hover); }
.collection-filters button:hover:not(.active)[b-97lhl2stip] { border-color: var(--border-strong); color: var(--text-primary); }
.collection-filters span[b-97lhl2stip] { font-size: .7rem; }
.collection-section[b-97lhl2stip] { display: grid; gap: 1rem; }
.collection-section-heading h2[b-97lhl2stip] { display: flex; align-items: center; gap: .65rem; margin: 0 0 .3rem; font-size: 1.1rem; font-weight: 800; }
.collection-section-heading h2 span[b-97lhl2stip] { padding: .15rem .45rem; border-radius: 6px; background: var(--surface-secondary); color: var(--text-secondary); font-size: .72rem; }
.collection-grid[b-97lhl2stip] { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 1rem; }
.collection-card[b-97lhl2stip] { min-width: 0; overflow: hidden; background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: 16px; box-shadow: var(--shadow-card); }
.collection-card:focus-within[b-97lhl2stip], .collection-card:hover[b-97lhl2stip] { border-color: var(--accent-primary); }
.collection-card-link[b-97lhl2stip] { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.25rem; color: var(--text-primary); text-decoration: none; }
.collection-card-icon[b-97lhl2stip] { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.75rem; background: var(--surface-accent); border-radius: 14px; margin-bottom: .35rem; }
.collection-card h3[b-97lhl2stip] { margin: 0; font-size: 1.05rem; font-weight: 750; overflow-wrap: anywhere; line-height: 1.4; }
.collection-card-count[b-97lhl2stip] { color: var(--text-secondary); font-size: .8rem; }
.collection-card-open[b-97lhl2stip] { margin-top: .5rem; color: var(--accent-hover); display: flex; width: 100%; justify-content: space-between; font-size: .8rem; font-weight: 700; }
.collection-card-footer[b-97lhl2stip] { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .85rem; border-top: 1px solid var(--border-subtle); background: var(--surface-secondary); }
.collection-visibility[b-97lhl2stip] { min-height: 44px; padding: .4rem; background: none; border: 0; color: var(--text-secondary); font-size: .75rem; font-weight: 700; }
.collection-visibility-change[b-97lhl2stip] { font-weight: 400; }
.collection-visibility:hover[b-97lhl2stip] { color: var(--accent-hover); }
.collection-delete[b-97lhl2stip] { display: grid; place-items: center; width: 44px; height: 44px; background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--text-secondary); font-size: 1.5rem; }
.collection-delete:hover:not(:disabled)[b-97lhl2stip] { color: var(--danger); border-color: var(--danger); }
.collection-badge[b-97lhl2stip] { padding: .3rem .55rem; background: var(--accent-soft); color: var(--accent-hover); border-radius: 6px; font-size: .7rem; font-weight: 700; }
.collection-readonly[b-97lhl2stip] { font-size: .72rem; color: var(--text-secondary); }
.collection-empty[b-97lhl2stip] { display: grid; justify-items: center; gap: .7rem; text-align: center; padding: 2.25rem 1.5rem; border: 1px dashed var(--border-strong); border-radius: 16px; background: var(--surface-primary); }
.collection-empty h2[b-97lhl2stip], .collection-empty h3[b-97lhl2stip] { margin: 0; font-size: 1rem; font-weight: 750; }
.collection-empty p[b-97lhl2stip] { margin: 0; color: var(--text-secondary); font-size: .85rem; }
.collection-empty-icon[b-97lhl2stip] { font-size: 1.8rem; }
.collection-section .collection-empty[b-97lhl2stip] { padding-block: 1.5rem; }
.collection-create[b-97lhl2stip] { padding: 1.5rem; background: var(--surface-primary); border: 1px solid var(--accent-primary); border-radius: 16px; display: grid; gap: .65rem; }
.collection-create-heading[b-97lhl2stip] { display: flex; gap: 1rem; align-items: center; margin-bottom: .5rem; }
.collection-create-preview[b-97lhl2stip] { width: 52px; height: 52px; border-radius: 14px; background: var(--surface-accent); display: grid; place-items: center; font-size: 1.6rem; flex-shrink: 0; }
.collection-create h2[b-97lhl2stip], .collection-confirm h2[b-97lhl2stip] { font-size: 1.1rem; font-weight: 750; margin: 0 0 .3rem; }
.collection-create label[b-97lhl2stip], .collection-icons legend[b-97lhl2stip] { font-size: .8rem; font-weight: 700; }
.collection-hint[b-97lhl2stip], .collection-icons legend span[b-97lhl2stip] { color: var(--text-secondary); font-size: .75rem; font-weight: 400; }
.collection-icons[b-97lhl2stip] { border: 0; padding: 0; margin: .5rem 0; }
.collection-icons legend[b-97lhl2stip] { margin-bottom: .65rem; }
.collection-icons > div[b-97lhl2stip] { display: flex; flex-wrap: wrap; gap: .4rem; }
.collection-icon[b-97lhl2stip] { width: 44px; height: 44px; background: var(--surface-secondary); border: 1px solid var(--border-subtle); border-radius: 10px; font-size: 1.3rem; }
.collection-icon.selected[b-97lhl2stip] { border-color: var(--accent-primary); background: var(--accent-soft); }
.collection-form-actions[b-97lhl2stip] { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.collection-confirm[b-97lhl2stip] { border: 1px solid var(--danger); border-radius: 14px; padding: 1.25rem; background: var(--surface-primary); }
.collection-confirm p[b-97lhl2stip] { color: var(--text-secondary); font-size: .85rem; margin: 0; overflow-wrap: anywhere; }
.collection-confirm h2[b-97lhl2stip] { overflow-wrap: anywhere; }
.collection-notice[b-97lhl2stip] { padding: 1rem; margin: 0; border-radius: 12px; background: var(--surface-secondary); color: var(--text-secondary); font-size: .85rem; }
.collection-error[b-97lhl2stip] { color: var(--text-primary); border: 1px solid var(--danger); border-radius: 10px; background: var(--surface-primary); padding: .85rem; margin: .5rem 0; font-size: .85rem; }
.collection-loading[b-97lhl2stip] { display: flex; justify-content: center; align-items: center; gap: .75rem; padding: 3rem; color: var(--text-secondary); font-size: .9rem; }
@media (max-width: 1100px) { .collections-toolbar[b-97lhl2stip] { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .collections-header[b-97lhl2stip] { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .collections-header > button[b-97lhl2stip] { width: 100%; }
    .collections-page[b-97lhl2stip] { gap: 1.25rem; }
    .collection-filters[b-97lhl2stip] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .collection-filters button[b-97lhl2stip] { justify-content: center; padding: .6rem .3rem; gap: .3rem; font-size: .75rem; }
    .collection-create[b-97lhl2stip] { padding: 1rem; }
    .collection-grid[b-97lhl2stip] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Dictionary.razor.rz.scp.css */
.dictionary-page[b-e6srjf945t] {
    width: min(100%, 100rem);
    margin: 0 auto;
    padding: 1.65rem clamp(1rem, 2.2vw, 2.2rem) 3rem;
}

.dictionary-hero[b-e6srjf945t] {
    position: relative;
    display: flex;
    min-height: 12rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, var(--border-subtle));
    border-radius: 1.2rem;
    background:
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent-primary) 24%, transparent), transparent 30%),
        linear-gradient(135deg, color-mix(in srgb, var(--surface-accent) 84%, var(--surface-primary)), var(--surface-primary));
    box-shadow: var(--shadow-card);
}

.dictionary-hero[b-e6srjf945t]::after {
    position: absolute;
    right: 24%;
    bottom: -7rem;
    width: 15rem;
    height: 15rem;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent);
    border-radius: 50%;
    content: '';
}

.dictionary-hero-copy[b-e6srjf945t] {
    position: relative;
    z-index: 1;
    max-width: 43rem;
}

.dictionary-eyebrow[b-e6srjf945t] {
    color: var(--accent-primary);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.dictionary-hero h1[b-e6srjf945t] {
    margin: .25rem 0 .35rem;
    color: var(--text-primary);
    font-size: clamp(2.1rem, 4.5vw, 3.7rem);
    font-weight: 900;
    letter-spacing: -.055em;
}

.dictionary-hero p[b-e6srjf945t] {
    max-width: 38rem;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.dictionary-summary[b-e6srjf945t] {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 19rem;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(12px);
}

.summary-ring[b-e6srjf945t] {
    display: grid;
    width: 4.6rem;
    height: 4.6rem;
    flex: 0 0 auto;
    place-content: center;
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--surface-elevated) 56%, transparent 58%),
        conic-gradient(var(--accent-primary) calc(var(--dictionary-progress) * 1%), var(--border-subtle) 0);
    text-align: center;
}

.summary-ring strong[b-e6srjf945t] {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1;
}

.summary-ring span[b-e6srjf945t] {
    margin-top: .15rem;
    color: var(--text-muted);
    font-size: .55rem;
    font-weight: 700;
}

.summary-copy[b-e6srjf945t] {
    display: grid;
    gap: .25rem;
}

.summary-copy strong[b-e6srjf945t] {
    color: var(--text-primary);
    font-size: 1.2rem;
}

.summary-copy strong span[b-e6srjf945t] {
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 700;
}

.summary-copy small[b-e6srjf945t] {
    max-width: 11rem;
    color: var(--text-secondary);
    font-size: .67rem;
    line-height: 1.4;
}

.summary-skeleton[b-e6srjf945t] {
    width: 100%;
    min-height: 4.6rem;
    border-radius: .75rem;
    background: linear-gradient(100deg, var(--surface-secondary) 25%, var(--surface-primary) 45%, var(--surface-secondary) 65%);
    background-size: 250% 100%;
    animation: dictionary-shimmer-b-e6srjf945t 1.4s linear infinite;
}

.dictionary-toolbar[b-e6srjf945t] {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) auto auto;
    align-items: end;
    gap: 1rem;
    margin: 1.1rem 0 1.4rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
}

.dictionary-search[b-e6srjf945t] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .55rem;
    padding: 0 .8rem;
    border: 1px solid var(--border-subtle);
    border-radius: .75rem;
    background: var(--surface-secondary);
    color: var(--text-muted);
}

.dictionary-search:focus-within[b-e6srjf945t] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.dictionary-search input[b-e6srjf945t] {
    width: 100%;
    min-width: 0;
    min-height: 2.65rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: .78rem;
}

.dictionary-search input[b-e6srjf945t]::placeholder {
    color: var(--input-placeholder);
}

.dictionary-search > button[b-e6srjf945t] {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--surface-elevated);
    color: var(--text-muted);
}

.filter-cluster[b-e6srjf945t] {
    display: grid;
    gap: .4rem;
}

.filter-cluster > span[b-e6srjf945t] {
    color: var(--text-muted);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.filter-options[b-e6srjf945t] {
    display: flex;
    gap: .3rem;
}

.filter-options button[b-e6srjf945t] {
    min-height: 2.35rem;
    padding: .4rem .68rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-size: .68rem;
    font-weight: 750;
    white-space: nowrap;
}

.filter-options button:hover[b-e6srjf945t],
.filter-options button.is-active[b-e6srjf945t] {
    border-color: var(--accent-primary);
    background: var(--surface-accent);
    color: var(--accent-primary);
}

.filter-options button:focus-visible[b-e6srjf945t],
.word-actions button:focus-visible[b-e6srjf945t],
.dictionary-state button:focus-visible[b-e6srjf945t],
.load-more-button:focus-visible[b-e6srjf945t],
.load-more-error button:focus-visible[b-e6srjf945t],
.dictionary-notice button:focus-visible[b-e6srjf945t] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.results-heading[b-e6srjf945t],
.results-heading > div[b-e6srjf945t] {
    display: flex;
    align-items: center;
}

.results-heading[b-e6srjf945t] {
    justify-content: space-between;
    gap: 1rem;
    margin: 0 .25rem .75rem;
}

.results-heading > div[b-e6srjf945t] {
    gap: .55rem;
}

.results-heading > div > span[b-e6srjf945t] {
    color: var(--accent-primary);
    font-weight: 850;
}

.results-heading h2[b-e6srjf945t] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 850;
}

.results-heading small[b-e6srjf945t],
.results-heading > span[b-e6srjf945t] {
    color: var(--text-muted);
    font-size: .66rem;
}

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

.word-card[b-e6srjf945t] {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 12rem;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.word-card:hover[b-e6srjf945t] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-overlay);
    transform: translateY(-2px);
}

.word-card:focus-within[b-e6srjf945t] {
    z-index: 30;
}

.word-card[b-e6srjf945t]::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: .2rem;
    border-radius: 1rem 0 0 1rem;
    background: var(--border-strong);
    content: '';
}

.word-card.is-mastered[b-e6srjf945t]::before { background: var(--success); }
.word-card.is-learning[b-e6srjf945t]::before { background: var(--warning); }
.word-card.is-mastered[b-e6srjf945t] { border-color: color-mix(in srgb, var(--success) 27%, var(--border-subtle)); }
.word-card.is-learning[b-e6srjf945t] { border-color: color-mix(in srgb, var(--warning) 24%, var(--border-subtle)); }

.word-card-main[b-e6srjf945t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.word-japanese[b-e6srjf945t] {
    display: flex;
    min-width: 0;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
}

.word-kana[b-e6srjf945t] {
    color: var(--text-primary);
    font-size: 1.35rem;
    font-weight: 850;
    line-height: 1.25;
}

.word-kanji[b-e6srjf945t] {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 700;
}

.word-level[b-e6srjf945t] {
    flex: 0 0 auto;
    padding: .25rem .5rem;
    border-radius: 999px;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-size: .62rem;
    font-weight: 850;
}

.word-level.level-n5[b-e6srjf945t] { color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface-primary)); }
.word-level.level-n4[b-e6srjf945t] { color: var(--info); background: color-mix(in srgb, var(--info) 12%, var(--surface-primary)); }
.word-level.level-n3[b-e6srjf945t] { color: var(--accent-primary); background: var(--surface-accent); }
.word-level.level-n2[b-e6srjf945t] { color: var(--warning); background: color-mix(in srgb, var(--warning) 13%, var(--surface-primary)); }
.word-level.level-n1[b-e6srjf945t] { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface-primary)); }

.word-translation[b-e6srjf945t] {
    display: -webkit-box;
    margin: .55rem 0 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: .82rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.word-progress-row[b-e6srjf945t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1rem;
}

.word-state[b-e6srjf945t] {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    color: var(--text-muted);
    font-size: .65rem;
    font-weight: 800;
}

.word-state i[b-e6srjf945t] {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--border-strong);
}

.is-mastered .word-state[b-e6srjf945t] { color: var(--success); }
.is-mastered .word-state i[b-e6srjf945t] { background: var(--success); }
.is-learning .word-state[b-e6srjf945t] { color: var(--warning); }
.is-learning .word-state i[b-e6srjf945t] { background: var(--warning); }

.word-progress[b-e6srjf945t] {
    display: flex;
    min-width: 8rem;
    align-items: center;
    gap: .5rem;
}

.word-progress > span[b-e6srjf945t] {
    height: .35rem;
    flex: 1;
    overflow: hidden;
    border-radius: 999px;
    background: var(--border-subtle);
}

.word-progress > span > i[b-e6srjf945t] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--warning), var(--success));
}

.word-progress strong[b-e6srjf945t] {
    min-width: 2rem;
    color: var(--text-muted);
    font-size: .62rem;
    text-align: right;
}

.word-actions[b-e6srjf945t] {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border-subtle);
}

.word-actions button[b-e6srjf945t] {
    display: inline-flex;
    min-height: 2.2rem;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .45rem .65rem;
    border: 1px solid var(--border-subtle);
    border-radius: .6rem;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-size: .66rem;
    font-weight: 800;
}

.word-actions button:hover:not(:disabled)[b-e6srjf945t],
.word-actions button.is-active[b-e6srjf945t] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.word-actions button:disabled[b-e6srjf945t] {
    cursor: wait;
    opacity: .62;
}

.known-action.is-known[b-e6srjf945t] {
    border-color: color-mix(in srgb, var(--success) 30%, var(--border-subtle));
    color: var(--success);
}

.collection-anchor[b-e6srjf945t] {
    position: relative;
    margin-left: auto;
}

.collection-dropdown[b-e6srjf945t] {
    position: absolute;
    z-index: 20;
    top: calc(100% + .4rem);
    right: 0;
    width: min(17rem, calc(100vw - 2rem));
    overflow: hidden;
    padding: .45rem;
    border: 1px solid var(--border-strong);
    border-radius: .75rem;
    background: var(--surface-elevated);
    box-shadow: var(--shadow-overlay);
}

.collection-dropdown > strong[b-e6srjf945t] {
    display: block;
    padding: .45rem .55rem .6rem;
    color: var(--text-primary);
    font-size: .7rem;
}

.collection-dropdown > button[b-e6srjf945t] {
    width: 100%;
    justify-content: flex-start;
    border-color: transparent;
    background: transparent;
    text-align: left;
}

.collection-dropdown > button.is-selected[b-e6srjf945t] {
    background: color-mix(in srgb, var(--success) 10%, var(--surface-elevated));
    color: var(--success);
}

.collection-loading[b-e6srjf945t],
.collection-empty[b-e6srjf945t] {
    padding: .65rem .55rem;
    color: var(--text-muted);
    font-size: .7rem;
}

.collection-loading[b-e6srjf945t] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.collection-empty a[b-e6srjf945t] {
    color: var(--accent-primary);
}

.dictionary-notice[b-e6srjf945t],
.load-more-error[b-e6srjf945t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    padding: .7rem .85rem;
    border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--border-subtle));
    border-radius: .75rem;
    background: color-mix(in srgb, var(--danger) 8%, var(--surface-primary));
    color: var(--danger);
    font-size: .72rem;
}

.dictionary-notice button[b-e6srjf945t],
.load-more-error button[b-e6srjf945t] {
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: 850;
}

.word-card-skeleton[b-e6srjf945t] {
    min-height: 12rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: var(--surface-primary);
}

.word-card-skeleton i[b-e6srjf945t],
.word-card-skeleton span[b-e6srjf945t] {
    display: block;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--surface-secondary) 25%, var(--surface-elevated) 45%, var(--surface-secondary) 65%);
    background-size: 250% 100%;
    animation: dictionary-shimmer-b-e6srjf945t 1.4s linear infinite;
}

.word-card-skeleton i[b-e6srjf945t] { width: 45%; height: 1.25rem; }
.word-card-skeleton span[b-e6srjf945t] { width: 75%; height: .7rem; margin-top: 1.1rem; }
.word-card-skeleton span:last-child[b-e6srjf945t] { width: 55%; margin-top: 3.5rem; }

@keyframes dictionary-shimmer-b-e6srjf945t {
    to { background-position-x: -250%; }
}

.dictionary-state[b-e6srjf945t] {
    display: grid;
    min-height: 18rem;
    place-items: center;
    align-content: center;
    padding: 1.5rem;
    border: 1px dashed var(--border-strong);
    border-radius: 1rem;
    background: var(--surface-primary);
    text-align: center;
}

.dictionary-state > span[b-e6srjf945t] {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-accent);
    color: var(--accent-primary);
    font-weight: 900;
}

.dictionary-state h2[b-e6srjf945t] {
    margin: .65rem 0 .2rem;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.dictionary-state p[b-e6srjf945t] {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
}

.dictionary-state button[b-e6srjf945t],
.load-more-button[b-e6srjf945t] {
    margin-top: .85rem;
    padding: .55rem .85rem;
    border: 0;
    border-radius: .6rem;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    font-size: .72rem;
    font-weight: 800;
}

.load-more-button[b-e6srjf945t] {
    display: block;
    margin: 1rem auto 0;
}

.loading-more[b-e6srjf945t],
.end-message[b-e6srjf945t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.2rem 0;
    color: var(--text-muted);
    font-size: .7rem;
}

.mini-spinner[b-e6srjf945t] {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: dictionary-spin-b-e6srjf945t .7s linear infinite;
}

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

.sentinel[b-e6srjf945t] {
    height: 1px;
}

@media (max-width: 1120px) {
    .dictionary-toolbar[b-e6srjf945t] {
        grid-template-columns: 1fr 1fr;
    }

    .dictionary-search[b-e6srjf945t] {
        grid-column: 1 / -1;
    }

    .word-grid[b-e6srjf945t] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dictionary-page[b-e6srjf945t] {
        padding: 1rem .75rem 6.5rem;
    }

    .dictionary-hero[b-e6srjf945t] {
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

    .dictionary-hero h1[b-e6srjf945t] {
        font-size: 2.3rem;
    }

    .dictionary-hero p[b-e6srjf945t] {
        font-size: .84rem;
    }

    .dictionary-summary[b-e6srjf945t] {
        width: 100%;
        min-width: 0;
    }

    .dictionary-toolbar[b-e6srjf945t] {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        padding: .75rem;
    }

    .dictionary-search[b-e6srjf945t] {
        grid-column: auto;
    }

    .filter-options[b-e6srjf945t] {
        overflow-x: auto;
        padding-bottom: .15rem;
    }

    .filter-options button[b-e6srjf945t] {
        flex: 0 0 auto;
    }
}

@media (max-width: 430px) {
    .word-progress-row[b-e6srjf945t] {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
    }

    .word-progress[b-e6srjf945t] {
        width: 100%;
    }

    .word-actions[b-e6srjf945t] {
        align-items: stretch;
        flex-direction: column;
    }

    .collection-anchor[b-e6srjf945t] {
        width: 100%;
        margin-left: 0;
    }

    .collection-action[b-e6srjf945t] {
        width: 100%;
    }

    .collection-dropdown[b-e6srjf945t] {
        right: auto;
        left: 0;
    }
}
/* /Components/Pages/FlashCards.razor.rz.scp.css */
.practice-page[b-0ixaoh1hxs] {
    width: min(100%, 86rem);
    margin: 0 auto;
    padding: .9rem clamp(1rem, 2.2vw, 2.2rem) 3rem;
}

.practice-hero[b-0ixaoh1hxs] {
    position: relative;
    display: flex;
    min-height: 8rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    padding: clamp(1.2rem, 2.6vw, 1.7rem);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, var(--border-subtle));
    border-radius: 1.2rem;
    background:
        radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--accent-primary) 24%, transparent), transparent 30%),
        linear-gradient(135deg, color-mix(in srgb, var(--surface-accent) 84%, var(--surface-primary)), var(--surface-primary));
    box-shadow: var(--shadow-card);
}

.practice-hero[b-0ixaoh1hxs]::after {
    position: absolute;
    right: 20%;
    bottom: -8rem;
    width: 16rem;
    height: 16rem;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent);
    border-radius: 50%;
    content: '';
}

.practice-hero > div[b-0ixaoh1hxs] { position: relative; z-index: 1; }
.practice-hero > div:first-child[b-0ixaoh1hxs] { max-width: 42rem; }

.practice-eyebrow[b-0ixaoh1hxs] {
    color: var(--accent-primary);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.practice-hero h1[b-0ixaoh1hxs] {
    margin: .24rem 0 .35rem;
    color: var(--text-primary);
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight: 900;
    letter-spacing: -.05em;
}

.practice-hero p[b-0ixaoh1hxs] {
    max-width: 38rem;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.practice-summary[b-0ixaoh1hxs] {
    display: flex;
    min-width: 15rem;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(12px);
}

.practice-summary > span[b-0ixaoh1hxs] {
    display: grid;
    width: 3.35rem;
    height: 3.35rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .85rem;
    background: var(--surface-accent);
    color: var(--accent-primary);
    font-size: 1.55rem;
    font-weight: 850;
}

.practice-summary div[b-0ixaoh1hxs] { display: grid; gap: .2rem; }
.practice-summary strong[b-0ixaoh1hxs] { color: var(--text-primary); font-size: .82rem; }
.practice-summary small[b-0ixaoh1hxs] { color: var(--text-muted); font-size: .66rem; }

.practice-filters[b-0ixaoh1hxs] {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: end;
    gap: 1rem;
    margin: .65rem 0 0;
    padding: .75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
}

.filter-cluster[b-0ixaoh1hxs],
.collection-filter[b-0ixaoh1hxs] { display: grid; gap: .4rem; }

.filter-cluster > span[b-0ixaoh1hxs],
.collection-filter > span[b-0ixaoh1hxs] {
    color: var(--text-muted);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.filter-options[b-0ixaoh1hxs] { display: flex; flex-wrap: wrap; gap: .3rem; }

.filter-options button[b-0ixaoh1hxs],
.collection-trigger[b-0ixaoh1hxs],
.clear-filters[b-0ixaoh1hxs] {
    min-height: 2.4rem;
    padding: .42rem .75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-size: .69rem;
    font-weight: 750;
    white-space: nowrap;
}

.filter-options button:hover[b-0ixaoh1hxs],
.filter-options button.is-active[b-0ixaoh1hxs],
.collection-trigger:hover[b-0ixaoh1hxs],
.collection-trigger.is-active[b-0ixaoh1hxs] {
    border-color: var(--accent-primary);
    background: var(--surface-accent);
    color: var(--accent-primary);
}

.level-n5.is-active[b-0ixaoh1hxs] { border-color: var(--success); color: var(--success); }
.level-n4.is-active[b-0ixaoh1hxs] { border-color: var(--info); color: var(--info); }
.level-n2.is-active[b-0ixaoh1hxs] { border-color: var(--warning); color: var(--warning); }
.level-n1.is-active[b-0ixaoh1hxs] { border-color: var(--danger); color: var(--danger); }

.collection-anchor[b-0ixaoh1hxs] { position: relative; }

.collection-trigger[b-0ixaoh1hxs] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.trigger-chevron[b-0ixaoh1hxs] {
    margin-left: .1rem;
    font-size: .9rem;
    transition: transform 160ms ease;
}

.collection-trigger[aria-expanded='true'] .trigger-chevron[b-0ixaoh1hxs] { transform: rotate(180deg); }

.clear-filters[b-0ixaoh1hxs] {
    margin-left: auto;
    border-color: transparent;
    background: transparent;
    color: var(--accent-primary);
}

.clear-filters:hover[b-0ixaoh1hxs] { background: var(--surface-accent); }

.popover-backdrop[b-0ixaoh1hxs] {
    position: fixed;
    z-index: 100;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.collection-popover[b-0ixaoh1hxs] {
    position: absolute;
    z-index: 101;
    top: calc(100% + .55rem);
    left: 0;
    display: grid;
    width: min(24rem, calc(100vw - 2rem));
    max-height: 29rem;
    gap: .85rem;
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: var(--surface-elevated);
    box-shadow: var(--shadow-overlay);
}

.popover-heading[b-0ixaoh1hxs] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.popover-heading > div[b-0ixaoh1hxs] { display: grid; gap: .15rem; }
.popover-heading strong[b-0ixaoh1hxs] { color: var(--text-primary); font-size: .8rem; }
.popover-heading small[b-0ixaoh1hxs] { color: var(--text-muted); font-size: .65rem; }

.popover-heading > button[b-0ixaoh1hxs] {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--surface-secondary);
    color: var(--text-muted);
}

.collection-search[b-0ixaoh1hxs] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: 0 .7rem;
    border: 1px solid var(--border-subtle);
    border-radius: .7rem;
    background: var(--surface-secondary);
    color: var(--text-muted);
}

.collection-search:focus-within[b-0ixaoh1hxs] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.collection-search input[b-0ixaoh1hxs] {
    width: 100%;
    min-height: 2.45rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: .72rem;
}

.collection-search input[b-0ixaoh1hxs]::placeholder { color: var(--text-muted); }
.collection-group[b-0ixaoh1hxs] { display: grid; gap: .5rem; }

.collection-group > span[b-0ixaoh1hxs] {
    color: var(--text-muted);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

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

.collection-grid button[b-0ixaoh1hxs] {
    display: flex;
    min-width: 0;
    min-height: 5.9rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .22rem;
    padding: .55rem .35rem;
    border: 1px solid var(--border-subtle);
    border-radius: .75rem;
    background: var(--surface-primary);
    color: var(--text-primary);
    text-align: center;
}

.collection-grid button:hover[b-0ixaoh1hxs],
.collection-grid button.is-selected[b-0ixaoh1hxs] {
    border-color: var(--accent-primary);
    background: var(--surface-accent);
}

.collection-grid button > span[b-0ixaoh1hxs] { font-size: 1.35rem; }

.collection-grid strong[b-0ixaoh1hxs] {
    width: 100%;
    overflow: hidden;
    font-size: .67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collection-grid small[b-0ixaoh1hxs] { color: var(--text-muted); font-size: .58rem; }

.popover-status[b-0ixaoh1hxs] {
    display: flex;
    min-height: 5rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--text-muted);
    font-size: .72rem;
    text-align: center;
}

.popover-status.is-error[b-0ixaoh1hxs] { flex-direction: column; color: var(--danger); }

.popover-status button[b-0ixaoh1hxs],
.load-more-error button[b-0ixaoh1hxs] {
    padding: .35rem .7rem;
    border: 1px solid var(--accent-primary);
    border-radius: 999px;
    background: var(--surface-accent);
    color: var(--accent-primary);
    font-size: .66rem;
    font-weight: 800;
}

.selected-collections[b-0ixaoh1hxs] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .7rem .15rem 0;
}

.collection-chip[b-0ixaoh1hxs] {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: .35rem;
    padding: .22rem .28rem .22rem .6rem;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-subtle));
    border-radius: 999px;
    background: var(--surface-accent);
    color: var(--text-primary);
    font-size: .68rem;
    font-weight: 700;
}

.collection-chip button[b-0ixaoh1hxs] {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface-elevated) 74%, transparent);
    color: var(--text-muted);
}

.practice-workspace[b-0ixaoh1hxs] { max-width: 48rem; margin: .85rem auto 0; }
.session-heading[b-0ixaoh1hxs], .session-heading > div[b-0ixaoh1hxs] { display: flex; align-items: center; }

.session-heading[b-0ixaoh1hxs] {
    justify-content: space-between;
    gap: 1rem;
    margin: 0 .25rem .7rem;
}

.session-heading > div[b-0ixaoh1hxs] { gap: .55rem; }
.session-heading > div > span[b-0ixaoh1hxs] { color: var(--accent-primary); }
.session-heading h2[b-0ixaoh1hxs] { margin: 0; color: var(--text-primary); font-size: .94rem; font-weight: 850; }
.session-heading small[b-0ixaoh1hxs], .session-heading > span[b-0ixaoh1hxs] { color: var(--text-muted); font-size: .64rem; }

.card-skeleton[b-0ixaoh1hxs],
.flash-card[b-0ixaoh1hxs] {
    width: 100%;
    min-height: clamp(18rem, 45vh, 25rem);
    border-radius: 1.35rem;
}

.card-skeleton[b-0ixaoh1hxs] {
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(105deg, var(--surface-primary) 25%, var(--surface-secondary) 45%, var(--surface-primary) 65%);
    background-size: 240% 100%;
    box-shadow: var(--shadow-card);
    animation: practice-shimmer-b-0ixaoh1hxs 1.4s linear infinite;
}

.session-progress[b-0ixaoh1hxs] {
    height: .28rem;
    margin: 0 .9rem .55rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--border-subtle);
}

.session-progress span[b-0ixaoh1hxs] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-hover));
    transition: width 220ms ease;
}

.flash-card[b-0ixaoh1hxs] {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    perspective: 75rem;
    text-align: initial;
}

.card-inner[b-0ixaoh1hxs] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 420ms cubic-bezier(.2, .7, .2, 1);
}

.flash-card.is-flipped .card-inner[b-0ixaoh1hxs] { transform: rotateY(180deg); }

.card-face[b-0ixaoh1hxs] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.25rem, 3.4vw, 2rem);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, var(--border-subtle));
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--accent-primary) 15%, transparent), transparent 31%),
        var(--surface-primary);
    box-shadow: var(--shadow-overlay);
    backface-visibility: hidden;
}

.card-face[b-0ixaoh1hxs]::after {
    position: absolute;
    right: -4rem;
    bottom: -5rem;
    width: 15rem;
    height: 15rem;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 15%, transparent);
    border-radius: 50%;
    content: '';
}

.card-back[b-0ixaoh1hxs] {
    transform: rotateY(180deg);
    background:
        radial-gradient(circle at 18% 84%, color-mix(in srgb, var(--accent-primary) 18%, transparent), transparent 33%),
        linear-gradient(145deg, var(--surface-elevated), var(--surface-primary));
}

.flash-card:hover .card-face[b-0ixaoh1hxs] { border-color: color-mix(in srgb, var(--accent-primary) 48%, var(--border-subtle)); }

.flash-card:focus-visible .card-face[b-0ixaoh1hxs] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.card-topline[b-0ixaoh1hxs] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.level-badge[b-0ixaoh1hxs] {
    padding: .3rem .55rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: var(--surface-elevated);
    color: var(--accent-primary);
    font-size: .64rem;
    letter-spacing: .04em;
}

.level-badge.level-n5[b-0ixaoh1hxs] { color: var(--success); }
.level-badge.level-n4[b-0ixaoh1hxs] { color: var(--info); }
.level-badge.level-n2[b-0ixaoh1hxs] { color: var(--warning); }
.level-badge.level-n1[b-0ixaoh1hxs] { color: var(--danger); }

.card-japanese[b-0ixaoh1hxs],
.card-answer[b-0ixaoh1hxs] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    gap: .65rem;
    padding: 1rem;
    text-align: center;
}

.card-japanese strong[b-0ixaoh1hxs] {
    color: var(--text-primary);
    font-size: clamp(3.4rem, 9vw, 6.6rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.card-japanese small[b-0ixaoh1hxs],
.card-answer small[b-0ixaoh1hxs] {
    color: var(--text-muted);
    font-size: clamp(.9rem, 2vw, 1.2rem);
}

.card-answer strong[b-0ixaoh1hxs] {
    max-width: 32rem;
    color: var(--text-primary);
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.1;
}

.card-hint[b-0ixaoh1hxs] {
    position: relative;
    z-index: 1;
    align-self: center;
    color: var(--text-muted);
    font-size: .67rem;
    font-weight: 700;
}

.practice-controls[b-0ixaoh1hxs] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .65rem;
    margin-top: .85rem;
}

.practice-controls button[b-0ixaoh1hxs],
.practice-state button[b-0ixaoh1hxs],
.practice-state a[b-0ixaoh1hxs],
.session-complete button[b-0ixaoh1hxs] {
    display: inline-flex;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .65rem 1rem;
    border-radius: .8rem;
    font-size: .73rem;
    font-weight: 800;
    text-decoration: none;
}

.secondary-action[b-0ixaoh1hxs],
.reveal-action[b-0ixaoh1hxs] {
    border: 1px solid var(--border-subtle);
    background: var(--surface-primary);
    color: var(--text-secondary);
}

.reveal-action[b-0ixaoh1hxs] { background: var(--surface-secondary); }

.primary-action[b-0ixaoh1hxs],
.practice-state button[b-0ixaoh1hxs],
.session-complete button[b-0ixaoh1hxs] {
    border: 1px solid var(--accent-primary);
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

.primary-action:hover[b-0ixaoh1hxs],
.practice-state button:hover[b-0ixaoh1hxs],
.session-complete button:hover[b-0ixaoh1hxs] { background: var(--accent-hover); }
.practice-controls button:disabled[b-0ixaoh1hxs] { cursor: not-allowed; opacity: .45; }

.practice-state[b-0ixaoh1hxs] {
    display: flex;
    min-height: 24rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 2rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1.35rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.practice-state > span[b-0ixaoh1hxs] {
    display: grid;
    width: 3.3rem;
    height: 3.3rem;
    place-items: center;
    border-radius: 1rem;
    background: var(--surface-accent);
    color: var(--accent-primary);
    font-size: 1.4rem;
    font-weight: 900;
}

.practice-state h2[b-0ixaoh1hxs] { margin: .25rem 0 0; color: var(--text-primary); font-size: 1.05rem; }

.practice-state p[b-0ixaoh1hxs] {
    max-width: 28rem;
    margin: 0 0 .35rem;
    color: var(--text-secondary);
    font-size: .76rem;
    line-height: 1.5;
}

.practice-state > div[b-0ixaoh1hxs] { display: flex; gap: .55rem; }

.practice-state a[b-0ixaoh1hxs] {
    border: 1px solid var(--border-subtle);
    background: var(--surface-secondary);
    color: var(--text-primary);
}

.load-more-error[b-0ixaoh1hxs],
.session-complete[b-0ixaoh1hxs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .75rem;
    padding: .75rem .9rem;
    border: 1px solid var(--border-subtle);
    border-radius: .8rem;
    background: var(--surface-primary);
    color: var(--text-secondary);
    font-size: .7rem;
}

.load-more-error[b-0ixaoh1hxs] {
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border-subtle));
    color: var(--danger);
}

.session-complete > div[b-0ixaoh1hxs] { display: grid; gap: .15rem; }
.session-complete strong[b-0ixaoh1hxs] { color: var(--text-primary); font-size: .76rem; }

.session-complete button[b-0ixaoh1hxs] {
    min-height: 2.3rem;
    flex: 0 0 auto;
    padding: .45rem .8rem;
}

.practice-spinner[b-0ixaoh1hxs] {
    width: .9rem;
    height: .9rem;
    flex: 0 0 auto;
    border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: practice-spin-b-0ixaoh1hxs .7s linear infinite;
}

.filter-options button:focus-visible[b-0ixaoh1hxs],
.collection-trigger:focus-visible[b-0ixaoh1hxs],
.clear-filters:focus-visible[b-0ixaoh1hxs],
.popover-heading button:focus-visible[b-0ixaoh1hxs],
.collection-grid button:focus-visible[b-0ixaoh1hxs],
.collection-chip button:focus-visible[b-0ixaoh1hxs],
.practice-controls button:focus-visible[b-0ixaoh1hxs],
.practice-state button:focus-visible[b-0ixaoh1hxs],
.practice-state a:focus-visible[b-0ixaoh1hxs],
.load-more-error button:focus-visible[b-0ixaoh1hxs],
.session-complete button:focus-visible[b-0ixaoh1hxs] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

@keyframes practice-shimmer-b-0ixaoh1hxs { to { background-position: -240% 0; } }
@keyframes practice-spin-b-0ixaoh1hxs { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .practice-hero[b-0ixaoh1hxs] { align-items: stretch; flex-direction: column; gap: 1.25rem; }
    .practice-summary[b-0ixaoh1hxs] { min-width: 0; }
    .practice-filters[b-0ixaoh1hxs] { align-items: stretch; flex-direction: column; gap: .8rem; }
    .clear-filters[b-0ixaoh1hxs] { align-self: flex-start; margin-left: 0; }
}

@media (max-width: 540px) {
    .practice-page[b-0ixaoh1hxs] { padding: .85rem .75rem 6.5rem; }
    .practice-hero[b-0ixaoh1hxs] { min-height: 0; padding: 1.3rem; border-radius: 1rem; }
    .practice-hero h1[b-0ixaoh1hxs] { font-size: 2rem; }
    .practice-hero p[b-0ixaoh1hxs] { font-size: .78rem; }
    .practice-filters[b-0ixaoh1hxs] { margin-top: .75rem; padding: .8rem; }
    .filter-options[b-0ixaoh1hxs] { display: grid; grid-template-columns: repeat(3, 1fr); }
    .filter-options button[b-0ixaoh1hxs] { padding-inline: .45rem; }
    .collection-trigger[b-0ixaoh1hxs] { width: 100%; justify-content: center; }

    .collection-popover[b-0ixaoh1hxs] {
        position: fixed;
        top: auto;
        right: .75rem;
        bottom: 5.5rem;
        left: .75rem;
        width: auto;
        max-height: min(70vh, 32rem);
    }

    .practice-workspace[b-0ixaoh1hxs] { margin-top: 1rem; }
    .session-heading[b-0ixaoh1hxs] { align-items: flex-start; }
    .session-heading small[b-0ixaoh1hxs] { display: block; max-width: 15rem; line-height: 1.35; }
    .card-skeleton[b-0ixaoh1hxs], .flash-card[b-0ixaoh1hxs] { min-height: 22rem; border-radius: 1rem; }
    .card-face[b-0ixaoh1hxs] { border-radius: 1rem; }
    .practice-controls[b-0ixaoh1hxs] { grid-template-columns: 1fr 1fr; }
    .reveal-action[b-0ixaoh1hxs] { grid-column: 1 / -1; grid-row: 1; }
    .session-complete[b-0ixaoh1hxs] { align-items: stretch; flex-direction: column; }
    .session-complete button[b-0ixaoh1hxs] { width: 100%; }
}

@media (max-width: 390px) {
    .collection-grid[b-0ixaoh1hxs] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .practice-summary[b-0ixaoh1hxs] { padding: .75rem; }
    .card-japanese strong[b-0ixaoh1hxs] { font-size: 3.2rem; }
    .practice-controls button[b-0ixaoh1hxs] { padding-inline: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .card-inner[b-0ixaoh1hxs],
    .session-progress span[b-0ixaoh1hxs],
    .trigger-chevron[b-0ixaoh1hxs] { transition: none; }
    .card-skeleton[b-0ixaoh1hxs], .practice-spinner[b-0ixaoh1hxs] { animation: none; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-dashboard[b-3fbauoq1jg] {
    width: min(100%, 100rem);
    margin: 0 auto;
    padding: 1.65rem clamp(1rem, 2vw, 2rem) 2.5rem;
}

.home-heading[b-3fbauoq1jg] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.1rem;
}

.home-eyebrow[b-3fbauoq1jg] {
    margin: 0 0 0.2rem;
    color: var(--accent-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.home-heading h1[b-3fbauoq1jg] {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 850;
    letter-spacing: -0.045em;
}

.home-heading p:not(.home-eyebrow)[b-3fbauoq1jg] {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
}

.heading-status[b-3fbauoq1jg] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.8rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
}

.heading-status span[b-3fbauoq1jg],
.heading-status a[b-3fbauoq1jg] { padding: 0.35rem 0.55rem; }

.heading-status a[b-3fbauoq1jg] {
    border-radius: 0.5rem;
    background: var(--surface-accent);
    color: var(--accent-primary);
    text-decoration: none;
}

.dashboard-layout[b-3fbauoq1jg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18.5rem;
    gap: 1rem;
    align-items: start;
}

.dashboard-main[b-3fbauoq1jg],
.dashboard-right-rail[b-3fbauoq1jg] {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.dashboard-duo[b-3fbauoq1jg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr);
    gap: 1rem;
}

.dashboard-right-rail[b-3fbauoq1jg] { position: sticky; top: 1rem; }

.home-error[b-3fbauoq1jg] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border-subtle));
    border-radius: 1rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
}

.home-error-icon[b-3fbauoq1jg] {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
    font-weight: 900;
}

.home-error h2[b-3fbauoq1jg], .home-error p[b-3fbauoq1jg] { margin: 0; }
.home-error h2[b-3fbauoq1jg] { font-size: 1rem; }
.home-error p[b-3fbauoq1jg] { color: var(--text-secondary); font-size: 0.82rem; }

.home-error button[b-3fbauoq1jg] {
    margin-left: auto;
    padding: 0.65rem 0.9rem;
    border: 0;
    border-radius: 0.65rem;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    font-weight: 750;
}

@media (max-width: 1439px) {
    .dashboard-layout[b-3fbauoq1jg] { grid-template-columns: 1fr; }
    .dashboard-right-rail[b-3fbauoq1jg] {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .dashboard-duo[b-3fbauoq1jg] { grid-template-columns: 1fr; }
    .dashboard-right-rail[b-3fbauoq1jg] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .home-dashboard[b-3fbauoq1jg] { padding: 1.1rem 0.75rem 6.5rem; }
    .home-heading[b-3fbauoq1jg] { align-items: flex-start; flex-direction: column; }
    .home-heading h1[b-3fbauoq1jg] { font-size: 1.75rem; }
    .heading-status[b-3fbauoq1jg] { width: 100%; justify-content: space-between; overflow-x: auto; }
    .heading-status span[b-3fbauoq1jg], .heading-status a[b-3fbauoq1jg] { white-space: nowrap; }
    .home-error[b-3fbauoq1jg] { align-items: flex-start; flex-wrap: wrap; }
    .home-error button[b-3fbauoq1jg] { width: 100%; }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.notfound-container[b-s3tg4zeopo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 3.5rem);
    padding: 2rem 1rem;
    text-align: center;
    gap: 2rem;
}

.notfound-illustration[b-s3tg4zeopo] {
    width: 100%;
    max-width: 480px;
    height: auto;
    filter: drop-shadow(0 16px 40px rgba(91, 74, 138, 0.2));
}

.notfound-text[b-s3tg4zeopo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    max-width: 480px;
}

.notfound-title[b-s3tg4zeopo] {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-text);
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.notfound-subtitle[b-s3tg4zeopo] {
    margin: 0;
    font-size: 1rem;
    color: var(--dark-text-muted);
    line-height: 1.65;
}

.notfound-btn[b-s3tg4zeopo] {
    display: inline-flex;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.6rem 1.5rem;
    background: var(--dark-accent);
    color: #fff;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}

.notfound-btn:hover[b-s3tg4zeopo] {
    background: var(--dark-accent-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
/* /Components/Pages/PrivacyPolicy.razor.rz.scp.css */
.legal-container[b-0xuv8yzuyh] {
    max-width: 780px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

.legal-document[b-0xuv8yzuyh] {
    color: var(--dark-text);
    line-height: 1.75;
}

.legal-header[b-0xuv8yzuyh] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #1e1e2a;
}

.legal-title[b-0xuv8yzuyh] {
    margin: 0 0 0.4rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--dark-text);
}

.legal-updated[b-0xuv8yzuyh] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--dark-text-muted);
}

.legal-document h2[b-0xuv8yzuyh] {
    margin: 2rem 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark-text);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #1e1e2a;
}

.legal-document h3[b-0xuv8yzuyh] {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark-text);
}

.legal-document p[b-0xuv8yzuyh] {
    margin: 0 0 0.85rem;
    color: var(--dark-text-muted, #a0a0b8);
    font-size: 0.925rem;
}

.legal-document ul[b-0xuv8yzuyh] {
    margin: 0 0 0.85rem;
    padding-left: 1.5rem;
    color: var(--dark-text-muted, #a0a0b8);
    font-size: 0.925rem;
}

.legal-document li[b-0xuv8yzuyh] {
    margin-bottom: 0.35rem;
}

.legal-document a[b-0xuv8yzuyh] {
    color: var(--dark-accent, #7c6af7);
    text-decoration: none;
}

.legal-document a:hover[b-0xuv8yzuyh] {
    text-decoration: underline;
}

.legal-highlight[b-0xuv8yzuyh] {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: #16102a;
    border-left: 3px solid var(--dark-accent, #7c6af7);
    border-radius: 0 0.5rem 0.5rem 0;
}

.legal-highlight h3[b-0xuv8yzuyh] {
    margin-top: 0;
    color: var(--dark-text);
}

.legal-placeholder[b-0xuv8yzuyh] {
    padding: 2rem;
    background: #16102a;
    border-radius: 0.75rem;
    text-align: center;
}
/* /Components/Pages/Profile.razor.rz.scp.css */
.profile-page[b-afa32mwoe1] {
    width: min(100%, 74rem);
    margin: 0 auto;
    padding: 1.65rem clamp(1rem, 2.2vw, 2.2rem) 3rem;
    display: grid;
    gap: 1.5rem;
    color: var(--text-primary);
}

.profile-hero[b-afa32mwoe1] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--surface-accent), var(--surface-primary));
    box-shadow: var(--shadow-card);
}

.profile-avatar[b-afa32mwoe1] {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface-primary);
    margin-top: 1.5rem;
}

.profile-avatar img[b-afa32mwoe1] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 145%;
    width: auto;
    object-fit: contain;
}

.profile-hero-copy[b-afa32mwoe1] { flex: 1; min-width: 0; }
.profile-eyebrow[b-afa32mwoe1] { color: var(--accent-hover); font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.profile-hero h1[b-afa32mwoe1] { margin: .4rem 0 .5rem; font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 850; letter-spacing: -.04em; overflow-wrap: anywhere; }
.profile-hero p[b-afa32mwoe1] { margin: 0 0 .6rem; color: var(--text-secondary); font-size: .85rem; }
.profile-companion[b-afa32mwoe1] { color: var(--text-secondary); font-size: .8rem; }

.profile-button[b-afa32mwoe1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 44px;
    padding: .65rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: .7rem;
    background: var(--surface-primary);
    color: var(--text-primary);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
}
.profile-button:hover[b-afa32mwoe1] { border-color: var(--accent-primary); color: var(--accent-hover); }
.profile-button--primary[b-afa32mwoe1] { background: var(--accent-action); border-color: var(--accent-action); color: var(--text-on-accent); }
.profile-button--primary:hover[b-afa32mwoe1] { background: var(--accent-action-hover); color: var(--text-on-accent); }
button:focus-visible[b-afa32mwoe1], a:focus-visible[b-afa32mwoe1] { outline: 2px solid var(--accent-primary); outline-offset: 3px; border-radius: .5rem; box-shadow: 0 0 0 4px var(--focus-ring); }

.profile-stats[b-afa32mwoe1] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.profile-stat[b-afa32mwoe1] { display: flex; flex-direction: column; gap: .55rem; padding: 1.5rem; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-primary); }
.profile-stat-label[b-afa32mwoe1] { color: var(--text-secondary); font-size: .8rem; font-weight: 700; }
.profile-stat strong[b-afa32mwoe1] { font-size: 2.4rem; line-height: 1.2; font-weight: 850; letter-spacing: -.03em; }
.profile-stat strong span[b-afa32mwoe1] { font-size: 1.5rem; }
.profile-stat-hint[b-afa32mwoe1] { font-size: .75rem; color: var(--text-secondary); }
.profile-stat a[b-afa32mwoe1] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; margin-top: auto; color: var(--accent-hover); font-size: .8rem; font-weight: 700; text-decoration: none; }
.profile-stat a:hover[b-afa32mwoe1] { text-decoration: underline; }
.profile-stat--streak[b-afa32mwoe1] { background: linear-gradient(150deg, var(--surface-accent), var(--surface-primary)); }
.profile-progress[b-afa32mwoe1] { display: grid; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-primary); }
.profile-section-heading[b-afa32mwoe1] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.profile-section-heading h2[b-afa32mwoe1] { font-size: 1.1rem; font-weight: 800; margin: 0 0 .35rem; }
.profile-section-heading p[b-afa32mwoe1] { color: var(--text-secondary); font-size: .85rem; margin: 0; }
.profile-period[b-afa32mwoe1] { font-size: .7rem; color: var(--text-secondary); padding: .3rem .5rem; border-radius: .4rem; border: 1px solid var(--border-subtle); background: var(--surface-secondary); }
.profile-scripts[b-afa32mwoe1] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.profile-script[b-afa32mwoe1] { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: center; padding: 1.25rem; border: 1px solid var(--border-subtle); border-radius: .85rem; background: var(--surface-secondary); min-width: 0; }
.profile-script-glyph[b-afa32mwoe1] { width: 44px; height: 44px; display: grid; place-items: center; background: var(--surface-primary); border-radius: .65rem; color: var(--accent-hover); font-size: 1.6rem; }
.profile-script h3[b-afa32mwoe1] { margin: 0 0 .4rem; font-size: .95rem; font-weight: 750; }
.profile-script h3 span[b-afa32mwoe1] { color: var(--text-secondary); font-weight: 400; font-size: .75rem; }
.profile-script p[b-afa32mwoe1] { color: var(--text-secondary); font-size: .75rem; margin: 0; }
.profile-script[b-afa32mwoe1]  .study-progress, .profile-library-empty[b-afa32mwoe1] { grid-column: 1 / -1; }
.profile-state[b-afa32mwoe1] { display: grid; justify-items: center; gap: .8rem; padding: 3rem 1.5rem; text-align: center; border: 1px solid var(--border-subtle); border-radius: 1.1rem; background: var(--surface-primary); }
.profile-state--error[b-afa32mwoe1] { border-color: var(--danger); }
.profile-state-icon[b-afa32mwoe1] { display: grid; place-items: center; width: 56px; height: 56px; background: var(--surface-accent); color: var(--accent-hover); border-radius: 1rem; font-size: 1.5rem; font-weight: 700; }
.profile-state h1[b-afa32mwoe1] { font-size: 1.5rem; font-weight: 800; margin: 0; }
.profile-state p[b-afa32mwoe1] { color: var(--text-secondary); font-size: .9rem; margin: 0; }
.profile-loading[b-afa32mwoe1] { display: grid; gap: 1.5rem; }
.profile-skeleton-hero[b-afa32mwoe1] { height: 220px; border-radius: 1.25rem; }
.profile-skeleton-stats[b-afa32mwoe1] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.profile-skeleton-stats span[b-afa32mwoe1] { height: 180px; border-radius: 1rem; }
.profile-skeleton-hero[b-afa32mwoe1], .profile-skeleton-stats span[b-afa32mwoe1] { border: 1px solid var(--border-subtle); background: var(--surface-secondary); }
@media (max-width: 1100px) {
    .profile-hero[b-afa32mwoe1] { flex-wrap: wrap; padding: 1.5rem; }
    .profile-hero-copy[b-afa32mwoe1] { flex-basis: calc(100% - 124px); }
    .profile-stats[b-afa32mwoe1], .profile-skeleton-stats[b-afa32mwoe1] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-scripts[b-afa32mwoe1] { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .profile-hero[b-afa32mwoe1] { padding: 1.25rem; gap: 1rem; }
    .profile-avatar[b-afa32mwoe1] { width: 64px; height: 64px; margin-top: 1.25rem; }
    .profile-hero-copy[b-afa32mwoe1] { flex-basis: calc(100% - 80px); }
    .profile-hero h1[b-afa32mwoe1] { font-size: 1.7rem; }
    .profile-hero > a[b-afa32mwoe1] { width: 100%; }
    .profile-stats[b-afa32mwoe1] { grid-template-columns: 1fr; }
    .profile-stat[b-afa32mwoe1] { padding: 1.25rem; }
    .profile-progress[b-afa32mwoe1] { padding: 1.25rem; }
    .profile-script[b-afa32mwoe1] { padding: 1rem; gap: .75rem; }
    .profile-section-heading[b-afa32mwoe1] { flex-wrap: wrap; }
    .profile-skeleton-stats[b-afa32mwoe1] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Progress.razor.rz.scp.css */
.progress-page[b-0dsnl976ai] { width: min(100%, 74rem); margin: 0 auto; display: grid; gap: 24px; padding: 1.65rem clamp(1rem, 2.2vw, 2.2rem) 3rem; color: var(--text-primary); }
.progress-heading[b-0dsnl976ai], .progress-card-heading[b-0dsnl976ai], .progress-welcome[b-0dsnl976ai] { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.progress-heading h1[b-0dsnl976ai] { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 750; margin: 4px 0 8px; }
.progress-heading p[b-0dsnl976ai] { color: var(--text-secondary); margin: 0; }
.progress-heading .progress-eyebrow[b-0dsnl976ai] { color: var(--accent-hover); font-size: .7rem; letter-spacing: .12em; font-weight: 750; }
.progress-button[b-0dsnl976ai] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-primary); color: var(--text-primary); font-weight: 650; text-decoration: none; flex-shrink: 0; }
.progress-button:hover:not(:disabled)[b-0dsnl976ai] { border-color: var(--accent-primary); color: var(--accent-hover); }
.progress-button:disabled[b-0dsnl976ai] { opacity: .6; }
.progress-button:focus-visible[b-0dsnl976ai], .progress-card a:focus-visible[b-0dsnl976ai] { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.progress-grid[b-0dsnl976ai] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.progress-card[b-0dsnl976ai] { display: flex; flex-direction: column; min-width: 0; gap: 18px; padding: 24px; border: 1px solid var(--border-subtle); border-radius: 20px; background: var(--surface-primary); box-shadow: var(--shadow-card); }
.progress-card-heading[b-0dsnl976ai] { align-items: flex-start; }
.progress-card h2[b-0dsnl976ai] { margin: 0; font-size: 1.05rem; font-weight: 700; }
.progress-period[b-0dsnl976ai] { color: var(--text-secondary); background: var(--surface-secondary); border-radius: 8px; padding: 4px 8px; font-size: .7rem; line-height: 1.4; text-align: center; flex-shrink: 0; }
.progress-level[b-0dsnl976ai] { background: var(--surface-accent); }
.progress-level-value[b-0dsnl976ai] { display: flex; align-items: center; gap: 16px; }
.progress-glyph[b-0dsnl976ai] { color: var(--accent-primary); font-size: 3rem; }
.progress-level-value strong[b-0dsnl976ai] { font-size: 2rem; line-height: 1.1; }
.progress-level-value p[b-0dsnl976ai] { margin: 6px 0 0; color: var(--text-secondary); }
.progress-xp-label[b-0dsnl976ai] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; color: var(--text-secondary); font-size: .8rem; }
.progress-xp-label strong[b-0dsnl976ai] { color: var(--text-primary); }
progress[b-0dsnl976ai] { display: block; width: 100%; height: 8px; border: 0; border-radius: 8px; overflow: hidden; background: var(--surface-secondary); color: var(--accent-primary); }
progress[b-0dsnl976ai]::-webkit-progress-bar { background: var(--surface-secondary); }
progress[b-0dsnl976ai]::-webkit-progress-value { background: var(--accent-primary); border-radius: 8px; }
progress[b-0dsnl976ai]::-moz-progress-bar { background: var(--accent-primary); border-radius: 8px; }
.progress-note[b-0dsnl976ai] { color: var(--text-secondary); font-size: .8rem; line-height: 1.6; margin: 0; }
.progress-big-value[b-0dsnl976ai] { display: grid; gap: 4px; }
.progress-big-value strong[b-0dsnl976ai] { font-size: 2.6rem; line-height: 1.1; }
.progress-big-value small[b-0dsnl976ai] { font-size: 1.2rem; font-weight: 500; color: var(--text-secondary); }
.progress-big-value span[b-0dsnl976ai] { font-size: .85rem; color: var(--text-secondary); }
.progress-total[b-0dsnl976ai] { margin: 0; color: var(--text-secondary); font-size: .85rem; }
.progress-total strong[b-0dsnl976ai] { color: var(--text-primary); font-size: 1.4rem; }
.progress-rows[b-0dsnl976ai] { display: grid; gap: 18px; }
.progress-card a[b-0dsnl976ai] { color: var(--accent-hover); font-size: .85rem; font-weight: 650; text-decoration: none; margin-top: auto; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }
.progress-card a:hover[b-0dsnl976ai] { text-decoration: underline; }
.progress-unavailable[b-0dsnl976ai], .progress-library-empty[b-0dsnl976ai] { margin: 0; font-size: .85rem; color: var(--text-secondary); line-height: 1.6; }
.progress-activity[b-0dsnl976ai] { display: grid; gap: 14px; margin: 0; }
.progress-activity div[b-0dsnl976ai] { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 12px; }
.progress-activity dt[b-0dsnl976ai] { font-weight: 500; color: var(--text-secondary); font-size: .85rem; }
.progress-activity dd[b-0dsnl976ai] { margin: 0; font-size: 1.4rem; font-weight: 700; }
.progress-welcome[b-0dsnl976ai], .progress-state[b-0dsnl976ai], .progress-notice[b-0dsnl976ai] { background: var(--surface-secondary); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 20px; }
.progress-welcome h2[b-0dsnl976ai], .progress-state h2[b-0dsnl976ai] { font-size: 1.1rem; margin: 0 0 8px; }
.progress-welcome p[b-0dsnl976ai], .progress-state p[b-0dsnl976ai], .progress-notice[b-0dsnl976ai] { margin: 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.6; }
.progress-skeleton[b-0dsnl976ai] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.progress-skeleton > div[b-0dsnl976ai] { height: 250px; border-radius: 20px; background: var(--surface-secondary); border: 1px solid var(--border-subtle); }
@media (max-width: 768px) { .progress-grid[b-0dsnl976ai], .progress-skeleton[b-0dsnl976ai] { grid-template-columns: 1fr; } .progress-card[b-0dsnl976ai] { padding: 20px; } .progress-welcome[b-0dsnl976ai] { align-items: flex-start; flex-direction: column; } }
@media (max-width: 400px) { .progress-heading[b-0dsnl976ai] { align-items: flex-start; flex-direction: column; } .progress-button[b-0dsnl976ai] { padding-inline: 12px; } .progress-card[b-0dsnl976ai] { padding: 16px; } .progress-card-heading[b-0dsnl976ai] { flex-wrap: wrap; gap: 8px; } }
/* /Components/Pages/Quests.razor.rz.scp.css */
.quests-page[b-sz76mzj07h] { width: min(100%, 74rem); margin: 0 auto; display: grid; gap: 24px; padding: 1.65rem clamp(1rem, 2.2vw, 2.2rem) 3rem; color: var(--text-primary); }
.quests-heading[b-sz76mzj07h] { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.quests-heading h1[b-sz76mzj07h] { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 750; margin: 4px 0 8px; }
.quests-heading p[b-sz76mzj07h] { color: var(--text-secondary); margin: 0; }
.quests-heading .quests-eyebrow[b-sz76mzj07h] { color: var(--accent-hover); font-size: .7rem; letter-spacing: .12em; font-weight: 750; }
.quests-link[b-sz76mzj07h] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-primary); color: var(--text-primary); font-weight: 650; font-size: .85rem; text-decoration: none; }
.quests-link:hover[b-sz76mzj07h] { border-color: var(--accent-primary); color: var(--accent-hover); }
.quests-link:focus-visible[b-sz76mzj07h] { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.quests-note[b-sz76mzj07h] { margin: 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.65; }
.quests-actions[b-sz76mzj07h] { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) { .quests-heading[b-sz76mzj07h] { align-items: flex-start; flex-direction: column; } }
/* /Components/Pages/Quiz.razor.rz.scp.css */
.quiz-page[b-6dq6u0e1bs] {
    width: min(100%, 72rem);
    min-height: 100%;
    margin: 0 auto;
    padding: .9rem clamp(1rem, 2.2vw, 2.2rem) 3rem;
}

.quiz-hero[b-6dq6u0e1bs] {
    position: relative;
    display: flex;
    min-height: 8rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    padding: clamp(1.2rem, 2.6vw, 1.7rem);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, var(--border-subtle));
    border-radius: 1.2rem;
    background:
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--accent-primary) 24%, transparent), transparent 31%),
        linear-gradient(135deg, color-mix(in srgb, var(--surface-accent) 84%, var(--surface-primary)), var(--surface-primary));
    box-shadow: var(--shadow-card);
}

.quiz-hero[b-6dq6u0e1bs]::after {
    position: absolute;
    right: 18%;
    bottom: -8rem;
    width: 16rem;
    height: 16rem;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent);
    border-radius: 50%;
    content: '';
}

.quiz-hero > div[b-6dq6u0e1bs] {
    position: relative;
    z-index: 1;
}

.quiz-hero > div:first-child[b-6dq6u0e1bs] {
    max-width: 43rem;
}

.quiz-eyebrow[b-6dq6u0e1bs],
.section-kicker[b-6dq6u0e1bs],
.state-kicker[b-6dq6u0e1bs] {
    color: var(--accent-primary);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.quiz-hero h1[b-6dq6u0e1bs],
.quiz-state-card h1[b-6dq6u0e1bs],
.results-heading h1[b-6dq6u0e1bs] {
    margin: .24rem 0 .35rem;
    color: var(--text-primary);
    font-size: clamp(1.85rem, 3.3vw, 2.65rem);
    font-weight: 900;
    letter-spacing: -.05em;
}

.quiz-hero p[b-6dq6u0e1bs],
.quiz-state-card p[b-6dq6u0e1bs],
.results-heading p[b-6dq6u0e1bs] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.hero-mark[b-6dq6u0e1bs] {
    display: grid;
    width: 5.1rem;
    height: 5.1rem;
    flex: 0 0 auto;
    place-items: center;
    align-content: center;
    gap: .08rem;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, var(--border-subtle));
    border-radius: 1.2rem;
    background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
    box-shadow: var(--shadow-card);
    color: var(--accent-primary);
    backdrop-filter: blur(12px);
}

.hero-mark span[b-6dq6u0e1bs] {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.hero-mark small[b-6dq6u0e1bs] {
    color: var(--text-muted);
    font-size: .58rem;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.deck-picker[b-6dq6u0e1bs] {
    margin-top: .65rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid var(--border-subtle);
    border-radius: 1.2rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
}

.section-heading[b-6dq6u0e1bs],
.level-heading[b-6dq6u0e1bs],
.session-header[b-6dq6u0e1bs],
.answer-feedback[b-6dq6u0e1bs],
.result-actions[b-6dq6u0e1bs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.section-heading h2[b-6dq6u0e1bs] {
    margin: .18rem 0 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 850;
    letter-spacing: -.025em;
}

.section-note[b-6dq6u0e1bs] {
    color: var(--text-muted);
    font-size: .68rem;
}

.featured-decks[b-6dq6u0e1bs] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin-top: 1rem;
}

.deck-card[b-6dq6u0e1bs],
.level-deck[b-6dq6u0e1bs] {
    display: grid;
    min-width: 0;
    align-items: center;
    border: 1px solid var(--border-subtle);
    background: var(--surface-secondary);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.deck-card[b-6dq6u0e1bs] {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .8rem;
    min-height: 6.8rem;
    padding: 1rem;
    border-radius: 1rem;
}

.deck-card--mixed[b-6dq6u0e1bs] {
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent-primary) 19%, transparent), transparent 45%),
        var(--surface-secondary);
}

.deck-card--known[b-6dq6u0e1bs] {
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--success) 16%, transparent), transparent 45%),
        var(--surface-secondary);
}

.deck-card:hover[b-6dq6u0e1bs],
.level-deck:hover[b-6dq6u0e1bs] {
    z-index: 1;
    transform: translateY(-2px);
    border-color: var(--accent-primary);
    background-color: var(--surface-accent);
    box-shadow: var(--shadow-card);
}

.deck-card--known:hover[b-6dq6u0e1bs] {
    border-color: var(--success);
}

.deck-icon[b-6dq6u0e1bs] {
    display: grid;
    width: 3.2rem;
    height: 3.2rem;
    place-items: center;
    border-radius: .85rem;
    background: var(--surface-accent);
    color: var(--accent-primary);
    font-size: 1.45rem;
    font-weight: 900;
}

.deck-card--known .deck-icon[b-6dq6u0e1bs] {
    background: color-mix(in srgb, var(--success) 13%, var(--surface-primary));
    color: var(--success);
}

.deck-copy[b-6dq6u0e1bs],
.level-copy[b-6dq6u0e1bs] {
    display: grid;
    min-width: 0;
    gap: .2rem;
}

.deck-copy strong[b-6dq6u0e1bs],
.level-copy strong[b-6dq6u0e1bs] {
    color: var(--text-primary);
    font-size: .84rem;
    font-weight: 800;
}

.deck-copy small[b-6dq6u0e1bs],
.level-copy small[b-6dq6u0e1bs] {
    color: var(--text-muted);
    font-size: .66rem;
    line-height: 1.4;
}

.deck-arrow[b-6dq6u0e1bs],
.level-arrow[b-6dq6u0e1bs] {
    color: var(--accent-primary);
    font-size: 1.1rem;
    transition: transform 160ms ease;
}

.deck-card:hover .deck-arrow[b-6dq6u0e1bs],
.level-deck:hover .level-arrow[b-6dq6u0e1bs] {
    transform: translateX(.2rem);
}

.level-heading[b-6dq6u0e1bs] {
    margin: 1.25rem 0 .65rem;
    color: var(--text-secondary);
    font-size: .68rem;
    font-weight: 750;
}

.level-heading span:last-child[b-6dq6u0e1bs] {
    color: var(--text-muted);
    font-size: .62rem;
    font-weight: 500;
}

.level-decks[b-6dq6u0e1bs] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
}

.level-deck[b-6dq6u0e1bs] {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .55rem;
    min-height: 6.2rem;
    padding: .85rem;
    border: 0;
    border-right: 1px solid var(--border-subtle);
    border-radius: 0;
    background: var(--surface-primary);
}

.level-deck:last-child[b-6dq6u0e1bs] {
    border-right: 0;
}

.level-code[b-6dq6u0e1bs] {
    font-size: 1.05rem;
    font-weight: 900;
}

.level-n5 .level-code[b-6dq6u0e1bs] { color: var(--success); }
.level-n4 .level-code[b-6dq6u0e1bs] { color: var(--info); }
.level-n3 .level-code[b-6dq6u0e1bs] { color: var(--accent-primary); }
.level-n2 .level-code[b-6dq6u0e1bs] { color: var(--warning); }
.level-n1 .level-code[b-6dq6u0e1bs] { color: var(--danger); }

.level-copy small[b-6dq6u0e1bs] {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.quiz-state-card[b-6dq6u0e1bs] {
    display: grid;
    width: min(100%, 42rem);
    min-height: 25rem;
    margin: clamp(1rem, 6vh, 4rem) auto 0;
    place-items: center;
    align-content: center;
    gap: .5rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--border-subtle);
    border-radius: 1.2rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.quiz-state-card p[b-6dq6u0e1bs] {
    max-width: 30rem;
}

.quiz-state-card--error[b-6dq6u0e1bs] {
    border-color: color-mix(in srgb, var(--danger) 32%, var(--border-subtle));
}

.state-icon[b-6dq6u0e1bs],
.state-spinner[b-6dq6u0e1bs] {
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: .5rem;
    place-items: center;
    border-radius: 50%;
}

.state-icon[b-6dq6u0e1bs] {
    background: color-mix(in srgb, var(--danger) 12%, var(--surface-primary));
    color: var(--danger);
    font-size: 1.4rem;
    font-weight: 900;
}

.state-spinner[b-6dq6u0e1bs] {
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent-primary);
    animation: quiz-spin-b-6dq6u0e1bs .75s linear infinite;
}

.loading-lines[b-6dq6u0e1bs] {
    display: grid;
    width: min(100%, 25rem);
    gap: .5rem;
    margin-top: 1.5rem;
}

.loading-lines span[b-6dq6u0e1bs] {
    height: .6rem;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--surface-secondary) 25%, var(--surface-primary) 45%, var(--surface-secondary) 65%);
    background-size: 250% 100%;
    animation: quiz-shimmer-b-6dq6u0e1bs 1.4s linear infinite;
}

.loading-lines span:nth-child(2)[b-6dq6u0e1bs] { width: 82%; }
.loading-lines span:nth-child(3)[b-6dq6u0e1bs] { width: 64%; }

.state-actions[b-6dq6u0e1bs] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .65rem;
    margin-top: 1.1rem;
}

.quiz-session[b-6dq6u0e1bs] {
    width: min(100%, 52rem);
    margin: 0 auto;
}

.session-header[b-6dq6u0e1bs] {
    padding: .4rem 0 .75rem;
}

.back-action[b-6dq6u0e1bs] {
    display: inline-flex;
    min-height: 2.4rem;
    align-items: center;
    gap: .35rem;
    padding: .4rem .7rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--surface-primary);
    color: var(--text-secondary);
    font-size: .7rem;
    font-weight: 750;
}

.back-action:hover[b-6dq6u0e1bs] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.session-title[b-6dq6u0e1bs] {
    display: grid;
    flex: 1;
    gap: .14rem;
    text-align: center;
}

.session-title strong[b-6dq6u0e1bs] {
    color: var(--text-primary);
    font-size: .79rem;
}

.session-title span[b-6dq6u0e1bs] {
    color: var(--text-muted);
    font-size: .65rem;
}

.session-score[b-6dq6u0e1bs] {
    display: grid;
    min-width: 3.7rem;
    justify-items: end;
    gap: .08rem;
}

.session-score span[b-6dq6u0e1bs] {
    color: var(--accent-primary);
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
}

.session-score small[b-6dq6u0e1bs] {
    color: var(--text-muted);
    font-size: .58rem;
}

.progress-track[b-6dq6u0e1bs] {
    width: 100%;
    height: .34rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-secondary);
}

.progress-track > span[b-6dq6u0e1bs] {
    display: block;
    min-width: .4rem;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-hover));
    transition: width 220ms ease;
}

.question-card[b-6dq6u0e1bs] {
    display: grid;
    min-height: 15rem;
    margin-top: .8rem;
    place-items: center;
    align-content: center;
    gap: .9rem;
    padding: clamp(1.5rem, 5vw, 3.2rem);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, var(--border-subtle));
    border-radius: 1.2rem;
    background:
        radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--accent-primary) 18%, transparent), transparent 46%),
        var(--surface-primary);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.question-direction[b-6dq6u0e1bs] {
    padding: .3rem .65rem;
    border-radius: 999px;
    background: var(--surface-accent);
    color: var(--accent-primary);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.question-prompt[b-6dq6u0e1bs] {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 850;
    line-height: 1.18;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

.question-hint[b-6dq6u0e1bs] {
    color: var(--text-muted);
    font-size: .68rem;
}

.options-grid[b-6dq6u0e1bs] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin-top: .75rem;
}

.option-button[b-6dq6u0e1bs] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 4.25rem;
    align-items: center;
    gap: .7rem;
    padding: .75rem .85rem;
    border: 1px solid var(--border-subtle);
    border-radius: .9rem;
    background: var(--surface-primary);
    color: var(--text-primary);
    text-align: left;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, opacity 140ms ease;
}

.option-button:hover:not(:disabled)[b-6dq6u0e1bs] {
    transform: translateY(-1px);
    border-color: var(--accent-primary);
    background: var(--surface-accent);
}

.option-letter[b-6dq6u0e1bs] {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: .58rem;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-size: .67rem;
    font-weight: 850;
}

.option-text[b-6dq6u0e1bs] {
    min-width: 0;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.option-result[b-6dq6u0e1bs] {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border-radius: 50%;
    font-weight: 900;
}

.option-button.is-correct[b-6dq6u0e1bs] {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, var(--surface-primary));
    color: var(--success);
}

.option-button.is-correct .option-letter[b-6dq6u0e1bs],
.option-button.is-correct .option-result[b-6dq6u0e1bs] {
    background: color-mix(in srgb, var(--success) 16%, var(--surface-primary));
    color: var(--success);
}

.option-button.is-wrong[b-6dq6u0e1bs] {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 9%, var(--surface-primary));
    color: var(--danger);
}

.option-button.is-wrong .option-letter[b-6dq6u0e1bs],
.option-button.is-wrong .option-result[b-6dq6u0e1bs] {
    background: color-mix(in srgb, var(--danger) 15%, var(--surface-primary));
    color: var(--danger);
}

.option-button.is-dimmed[b-6dq6u0e1bs] {
    opacity: .47;
}

.answer-feedback[b-6dq6u0e1bs] {
    margin-top: .75rem;
    padding: .85rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: var(--surface-primary);
}

.answer-feedback.is-correct[b-6dq6u0e1bs] {
    border-color: color-mix(in srgb, var(--success) 42%, var(--border-subtle));
    background: color-mix(in srgb, var(--success) 7%, var(--surface-primary));
}

.answer-feedback.is-wrong[b-6dq6u0e1bs] {
    border-color: color-mix(in srgb, var(--danger) 36%, var(--border-subtle));
    background: color-mix(in srgb, var(--danger) 6%, var(--surface-primary));
}

.feedback-copy[b-6dq6u0e1bs] {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: .65rem;
}

.feedback-copy > div[b-6dq6u0e1bs] {
    display: grid;
    min-width: 0;
    gap: .18rem;
}

.feedback-icon[b-6dq6u0e1bs] {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-secondary);
    font-weight: 900;
}

.is-correct .feedback-icon[b-6dq6u0e1bs] { color: var(--success); }
.is-wrong .feedback-icon[b-6dq6u0e1bs] { color: var(--danger); }

.feedback-copy strong[b-6dq6u0e1bs] {
    color: var(--text-primary);
    font-size: .78rem;
}

.feedback-copy p[b-6dq6u0e1bs] {
    margin: 0;
    color: var(--text-secondary);
    font-size: .68rem;
    line-height: 1.45;
}

.save-warning[b-6dq6u0e1bs] {
    color: var(--warning);
    font-size: .63rem;
    line-height: 1.4;
}

.keyboard-hint[b-6dq6u0e1bs] {
    margin: .75rem 0 0;
    color: var(--text-muted);
    font-size: .64rem;
    text-align: center;
}

.primary-action[b-6dq6u0e1bs],
.secondary-action[b-6dq6u0e1bs] {
    display: inline-flex;
    min-height: 2.65rem;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .58rem 1rem;
    border-radius: .72rem;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, opacity 140ms ease;
}

.primary-action[b-6dq6u0e1bs] {
    border: 1px solid var(--accent-primary);
    background: var(--accent-primary);
    color: var(--text-on-accent);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

.primary-action:hover:not(:disabled)[b-6dq6u0e1bs] {
    transform: translateY(-1px);
    border-color: var(--accent-hover);
    background: var(--accent-hover);
}

.secondary-action[b-6dq6u0e1bs] {
    border: 1px solid var(--border-subtle);
    background: var(--surface-secondary);
    color: var(--text-secondary);
}

.secondary-action:hover:not(:disabled)[b-6dq6u0e1bs] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.primary-action:disabled[b-6dq6u0e1bs],
.secondary-action:disabled[b-6dq6u0e1bs] {
    opacity: .58;
    cursor: wait;
}

.results-shell[b-6dq6u0e1bs] {
    display: grid;
    width: min(100%, 42rem);
    gap: 1rem;
    margin: clamp(1rem, 5vh, 3rem) auto 0;
}

.results-heading[b-6dq6u0e1bs] {
    text-align: center;
}

.results-heading h1[b-6dq6u0e1bs] {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.results-heading p[b-6dq6u0e1bs] {
    font-size: .78rem;
}

.completion-warning[b-6dq6u0e1bs] {
    padding: .75rem .9rem;
    border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border-subtle));
    border-radius: .8rem;
    background: color-mix(in srgb, var(--warning) 9%, var(--surface-primary));
    color: var(--warning);
    font-size: .7rem;
    line-height: 1.45;
    text-align: center;
}

.result-actions[b-6dq6u0e1bs] {
    justify-content: center;
    flex-wrap: wrap;
}

button:focus-visible[b-6dq6u0e1bs] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

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

@keyframes quiz-shimmer-b-6dq6u0e1bs {
    to { background-position: -250% 0; }
}

@media (max-width: 1020px) {
    .level-decks[b-6dq6u0e1bs] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        border: 0;
        gap: .6rem;
    }

    .level-deck[b-6dq6u0e1bs],
    .level-deck:last-child[b-6dq6u0e1bs] {
        min-height: 5rem;
        border: 1px solid var(--border-subtle);
        border-radius: .85rem;
    }

    .level-deck:last-child[b-6dq6u0e1bs] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .quiz-page[b-6dq6u0e1bs] {
        padding: .65rem .75rem 6.5rem;
    }

    .quiz-hero[b-6dq6u0e1bs] {
        min-height: 0;
        padding: 1.1rem;
    }

    .quiz-hero h1[b-6dq6u0e1bs] {
        font-size: 1.75rem;
    }

    .hero-mark[b-6dq6u0e1bs] {
        width: 4rem;
        height: 4rem;
    }

    .featured-decks[b-6dq6u0e1bs] {
        grid-template-columns: 1fr;
    }

    .deck-card[b-6dq6u0e1bs] {
        min-height: 5.8rem;
    }

    .section-note[b-6dq6u0e1bs],
    .level-heading span:last-child[b-6dq6u0e1bs] {
        display: none;
    }

    .question-card[b-6dq6u0e1bs] {
        min-height: 12.5rem;
        padding: 1.35rem 1rem;
    }

    .question-prompt[b-6dq6u0e1bs] {
        font-size: clamp(1.75rem, 10vw, 2.7rem);
    }

    .answer-feedback[b-6dq6u0e1bs] {
        align-items: stretch;
        flex-direction: column;
    }

    .answer-feedback .primary-action[b-6dq6u0e1bs] {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .quiz-hero[b-6dq6u0e1bs] {
        align-items: flex-start;
    }

    .hero-mark[b-6dq6u0e1bs] {
        width: 3.25rem;
        height: 3.25rem;
        border-radius: .9rem;
    }

    .hero-mark span[b-6dq6u0e1bs] { font-size: 1.4rem; }
    .hero-mark small[b-6dq6u0e1bs] { display: none; }

    .deck-picker[b-6dq6u0e1bs] {
        padding: .85rem;
    }

    .level-decks[b-6dq6u0e1bs],
    .options-grid[b-6dq6u0e1bs] {
        grid-template-columns: 1fr;
    }

    .level-deck:last-child[b-6dq6u0e1bs] {
        grid-column: auto;
    }

    .level-deck[b-6dq6u0e1bs] {
        min-height: 4.5rem;
    }

    .level-copy small[b-6dq6u0e1bs] {
        -webkit-line-clamp: 1;
    }

    .session-header[b-6dq6u0e1bs] {
        gap: .5rem;
    }

    .back-action[b-6dq6u0e1bs] {
        width: 2.5rem;
        padding: 0;
        justify-content: center;
    }

    .back-action span:last-child[b-6dq6u0e1bs] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .option-button[b-6dq6u0e1bs] {
        min-height: 3.9rem;
    }

    .quiz-state-card[b-6dq6u0e1bs] {
        min-height: 22rem;
        margin-top: .75rem;
    }

    .result-actions[b-6dq6u0e1bs] {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .state-spinner[b-6dq6u0e1bs],
    .loading-lines span[b-6dq6u0e1bs] {
        animation: none;
    }
}
/* /Components/Pages/Review.razor.rz.scp.css */
.review-page[b-plr3hplvun] { max-width: 74rem; margin: 0 auto; display: grid; gap: 24px; padding: 1.65rem clamp(1rem,2.2vw,2.2rem) 3rem; color: var(--text-primary); }
.review-heading[b-plr3hplvun], .review-session-heading[b-plr3hplvun], .review-meta[b-plr3hplvun] { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.review-heading h1[b-plr3hplvun] { font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 750; margin: 4px 0 8px; }
.review-heading p[b-plr3hplvun] { margin: 0; color: var(--text-secondary); }
.review-heading .review-eyebrow[b-plr3hplvun] { color: var(--accent-hover); font-size: .7rem; letter-spacing: .12em; font-weight: 750; }
.review-button[b-plr3hplvun] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-primary); color: var(--text-primary); font-size: .85rem; font-weight: 650; text-decoration: none; flex-shrink: 0; }
.review-button:hover:not(:disabled)[b-plr3hplvun] { border-color: var(--accent-primary); color: var(--accent-hover); }
button:focus-visible[b-plr3hplvun], a:focus-visible[b-plr3hplvun] { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
button:disabled[b-plr3hplvun] { opacity: .65; }
.review-workspace[b-plr3hplvun] { display: grid; gap: 20px; padding: clamp(16px,3vw,28px); background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: var(--shadow-card); min-width: 0; }
.review-session-heading[b-plr3hplvun] { flex-wrap: wrap; }
.review-session-heading h2[b-plr3hplvun] { margin: 0; font-size: 1.1rem; font-weight: 700; }
.review-session-heading > span[b-plr3hplvun] { font-size: .8rem; color: var(--text-secondary); }
.review-meta[b-plr3hplvun] { color: var(--text-secondary); font-size: .8rem; }
.review-meta a[b-plr3hplvun], .review-practice-link[b-plr3hplvun] { color: var(--accent-hover); display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; text-decoration: none; }
.review-practice-link[b-plr3hplvun] { justify-self: start; font-size: .85rem; }
a:hover[b-plr3hplvun] { text-decoration: underline; }
.review-card[b-plr3hplvun] { display: grid; place-items: center; gap: 28px; width: 100%; min-height: 260px; padding: 28px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface-accent); color: var(--text-primary); cursor: pointer; }
.review-card strong[b-plr3hplvun] { font-size: clamp(2.4rem,6vw,4rem); line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; max-width: 100%; }
.review-question-label[b-plr3hplvun], .review-reveal-hint[b-plr3hplvun] { font-size: .8rem; color: var(--text-secondary); }
.review-answer[b-plr3hplvun] { display: grid; gap: 8px; padding: 20px; text-align: center; background: var(--surface-secondary); border: 1px solid var(--border-subtle); border-radius: 14px; overflow-wrap: anywhere; }
.review-answer strong[b-plr3hplvun] { font-size: 1.4rem; line-height: 1.5; }
.review-answer span[b-plr3hplvun] { color: var(--text-secondary); }
.review-ratings[b-plr3hplvun] { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.review-rating[b-plr3hplvun] { min-height: 68px; display: grid; justify-items: center; align-content: center; gap: 6px; padding: 10px; border: 1px solid var(--border-strong); border-radius: 12px; color: var(--text-primary); background: var(--surface-primary); font-size: .9rem; font-weight: 650; }
.review-rating:hover:not(:disabled)[b-plr3hplvun] { border-color: var(--accent-primary); background: var(--surface-accent); }
.review-rating kbd[b-plr3hplvun] { color: var(--text-secondary); background: var(--surface-secondary); border: 1px solid var(--border-subtle); font-size: .7rem; margin-right: 4px; }
.review-rating small[b-plr3hplvun] { color: var(--text-secondary); font-size: .75rem; font-weight: 500; }
.review-help[b-plr3hplvun], .review-footnote[b-plr3hplvun] { color: var(--text-secondary); font-size: .8rem; line-height: 1.6; margin: 0; }
.review-notice[b-plr3hplvun] { padding: 16px 20px; margin: 0; color: var(--text-secondary); background: var(--surface-secondary); border: 1px solid var(--border-subtle); border-radius: 14px; font-size: .85rem; line-height: 1.6; }
.review-state[b-plr3hplvun] { display: grid; gap: 16px; justify-items: center; padding: 24px 12px; text-align: center; }
.review-state h3[b-plr3hplvun] { margin: 0; font-size: 1.3rem; font-weight: 700; }
.review-state p[b-plr3hplvun] { margin: 0; color: var(--text-secondary); line-height: 1.6; font-size: .9rem; }
.review-symbol[b-plr3hplvun] { font-size: 2.8rem; color: var(--accent-hover); }
.review-skeleton[b-plr3hplvun] { min-height: 300px; border-radius: 18px; background: var(--surface-secondary); }
@media (max-width: 700px) { .review-heading[b-plr3hplvun] { align-items: flex-start; flex-direction: column; } .review-ratings[b-plr3hplvun] { grid-template-columns: repeat(2,minmax(0,1fr)); } .review-card[b-plr3hplvun] { min-height: 230px; padding: 20px; } }
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-page[b-3cutkaqmk0] {
    width: min(100%, 74rem);
    margin: 0 auto;
    padding: 1.65rem clamp(1rem, 2.2vw, 2.2rem) 3rem;
    color: var(--text-primary);
}
.settings-header[b-3cutkaqmk0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--surface-accent), var(--surface-primary));
    box-shadow: var(--shadow-card);
}
.settings-header > div[b-3cutkaqmk0] { min-width: 0; }
.settings-eyebrow[b-3cutkaqmk0] { color: var(--accent-hover); font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.settings-header h1[b-3cutkaqmk0] { margin: .35rem 0 .5rem; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 850; letter-spacing: -.04em; }
.settings-header p[b-3cutkaqmk0] { color: var(--text-secondary); font-size: .9rem; margin: 0; }
.settings-grid[b-3cutkaqmk0] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.settings-column[b-3cutkaqmk0] { display: grid; gap: 1.5rem; min-width: 0; }
.settings-section[b-3cutkaqmk0] { min-width: 0; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-primary); box-shadow: var(--shadow-card); overflow: hidden; }
.settings-section-heading[b-3cutkaqmk0] { padding: 1.25rem 1.25rem .75rem; }
.settings-section-heading h2[b-3cutkaqmk0] { font-size: 1.05rem; font-weight: 800; margin: 0 0 .4rem; }
.settings-section-heading p[b-3cutkaqmk0] { color: var(--text-secondary); font-size: .8rem; line-height: 1.5; margin: 0; }
.settings-row[b-3cutkaqmk0] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.settings-row--divided[b-3cutkaqmk0] { border-top: 1px solid var(--border-subtle); }
.settings-row-info[b-3cutkaqmk0] { display: grid; gap: .35rem; min-width: 0; }
.settings-row-label[b-3cutkaqmk0] { font-size: .85rem; font-weight: 700; }
.settings-row-hint[b-3cutkaqmk0] { color: var(--text-secondary); font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.settings-row--theme[b-3cutkaqmk0] { flex-direction: column; align-items: stretch; }
.settings-theme-options[b-3cutkaqmk0] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; padding: .3rem; border: 1px solid var(--border-subtle); border-radius: .75rem; background: var(--surface-secondary); }
.settings-theme-option[b-3cutkaqmk0] { min-height: 44px; padding: .5rem; border: 1px solid transparent; border-radius: .55rem; background: transparent; color: var(--text-secondary); font-size: .8rem; font-weight: 700; }
.settings-theme-option:hover:not(:disabled)[b-3cutkaqmk0] { color: var(--text-primary); background: var(--surface-primary); }
.settings-theme-option.is-selected[b-3cutkaqmk0] { border-color: var(--accent-primary); background: var(--surface-primary); color: var(--accent-hover); box-shadow: var(--shadow-card); }
.settings-section-note[b-3cutkaqmk0] { padding: 0 1.25rem 1.25rem; color: var(--text-secondary); font-size: .75rem; line-height: 1.6; margin: 0; }

.settings-action[b-3cutkaqmk0], .settings-primary[b-3cutkaqmk0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .6rem .85rem;
    border: 1px solid var(--border-strong);
    border-radius: .65rem;
    background: var(--surface-primary);
    color: var(--text-primary);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
    text-align: center;
}
.settings-action:hover:not(:disabled)[b-3cutkaqmk0] { border-color: var(--accent-primary); color: var(--accent-hover); }
.settings-primary[b-3cutkaqmk0] { border-color: var(--accent-action); background: var(--accent-action); color: var(--text-on-accent); align-self: flex-start; }
.settings-primary:hover:not(:disabled)[b-3cutkaqmk0] { background: var(--accent-action-hover); border-color: var(--accent-action-hover); }
.settings-action--danger[b-3cutkaqmk0] { border-color: var(--danger); }
.settings-action--danger:hover:not(:disabled)[b-3cutkaqmk0] { color: var(--danger); border-color: var(--danger); }
button:disabled[b-3cutkaqmk0] { opacity: .55; cursor: not-allowed; }
button:focus-visible[b-3cutkaqmk0], a:focus-visible[b-3cutkaqmk0], input:focus-visible[b-3cutkaqmk0] { outline: 2px solid var(--accent-primary); outline-offset: 3px; box-shadow: 0 0 0 4px var(--focus-ring); }
.settings-badge[b-3cutkaqmk0] { flex-shrink: 0; padding: .3rem .55rem; border: 1px solid var(--border-subtle); border-radius: .45rem; background: var(--surface-secondary); color: var(--text-secondary); font-size: .7rem; font-weight: 650; }

.settings-aibo[b-3cutkaqmk0] { display: flex; align-items: center; gap: 1.5rem; padding: 2rem 1.5rem 1.5rem; min-height: 180px; }
.settings-aibo-art[b-3cutkaqmk0] { position: relative; width: 90px; height: 90px; border-radius: 50%; background: var(--surface-accent); border: 1px solid var(--border-strong); flex-shrink: 0; margin-top: 1rem; }
.settings-aibo-art img[b-3cutkaqmk0] { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: auto; height: 145%; object-fit: contain; }
.settings-aibo h3[b-3cutkaqmk0] { font-size: 1.4rem; font-weight: 800; margin: 0 0 .4rem; }
.settings-aibo p[b-3cutkaqmk0] { color: var(--text-secondary); font-size: .8rem; margin: 0 0 1rem; }
.settings-companion-unavailable[b-3cutkaqmk0] { display: grid; gap: .6rem; justify-items: start; }
.settings-companion-unavailable > span[b-3cutkaqmk0] { font-size: 2rem; color: var(--accent-hover); }
.settings-companion-unavailable p[b-3cutkaqmk0] { margin: 0; }
.settings-inline-loading[b-3cutkaqmk0] { display: flex; align-items: center; gap: .75rem; font-size: .85rem; color: var(--text-secondary); }

.settings-edit-panel[b-3cutkaqmk0] { padding: 1.25rem; background: var(--surface-secondary); border-top: 1px solid var(--border-subtle); }
.settings-edit-panel form[b-3cutkaqmk0] { display: grid; gap: 1rem; }
.settings-field[b-3cutkaqmk0] { display: grid; gap: .5rem; }
.settings-field label[b-3cutkaqmk0] { font-size: .8rem; font-weight: 700; }
.settings-input[b-3cutkaqmk0] { width: 100%; min-height: 44px; padding: .65rem .85rem; border: 1px solid var(--border-strong); border-radius: .6rem; background: var(--surface-primary); color: var(--text-primary); font-size: .9rem; }
.settings-field-hint[b-3cutkaqmk0] { color: var(--text-secondary); font-size: .75rem; line-height: 1.6; }
.settings-edit-panel--danger[b-3cutkaqmk0] { border-top-color: var(--danger); }
.settings-edit-panel h3[b-3cutkaqmk0] { font-size: 1rem; font-weight: 750; margin: 0 0 .6rem; }
.settings-edit-panel > p[b-3cutkaqmk0] { color: var(--text-secondary); font-size: .85rem; line-height: 1.6; margin: 0 0 1rem; }
.settings-confirm-actions[b-3cutkaqmk0] { display: flex; flex-wrap: wrap; gap: .6rem; }
.settings-notice[b-3cutkaqmk0] { margin: 0 1.25rem 1.25rem; padding: .85rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; border-radius: .65rem; background: var(--surface-primary); color: var(--text-primary); font-size: .8rem; line-height: 1.6; }
.settings-notice p[b-3cutkaqmk0] { margin: 0; flex: 1 1 160px; }
.settings-notice--error[b-3cutkaqmk0] { border: 1px solid var(--danger); }
.settings-edit-panel .settings-notice[b-3cutkaqmk0] { margin: 0 0 1rem; }

@media (max-width: 1100px) {
    .settings-grid[b-3cutkaqmk0] { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .settings-header[b-3cutkaqmk0] { align-items: flex-start; flex-direction: column; padding: 1.25rem; gap: 1rem; }
    .settings-header > a[b-3cutkaqmk0] { width: 100%; }
    .settings-row[b-3cutkaqmk0] { flex-wrap: wrap; padding: 1rem; }
    .settings-row:not(.settings-row--theme) .settings-row-info[b-3cutkaqmk0] { flex: 1 1 145px; }
    .settings-section-heading[b-3cutkaqmk0] { padding: 1.25rem 1rem .65rem; }
    .settings-section-note[b-3cutkaqmk0] { padding-inline: 1rem; }
    .settings-action[b-3cutkaqmk0], .settings-primary[b-3cutkaqmk0] { font-size: .75rem; }
    .settings-aibo[b-3cutkaqmk0] { padding: 2rem 1rem 1.25rem; gap: 1rem; }
    .settings-aibo-art[b-3cutkaqmk0] { width: 72px; height: 72px; }
    .settings-edit-panel[b-3cutkaqmk0] { padding: 1rem; }
    .settings-notice[b-3cutkaqmk0] { margin-inline: 1rem; }
}
/* /Components/Pages/StoriesBrowser.razor.rz.scp.css */
.stories-browser[b-v6ai9n4k21] {
    width: min(100%, 100rem);
    min-height: auto;
    margin: 0 auto;
    padding: 1.65rem clamp(1rem, 2.2vw, 2.2rem) 3rem;
    background: transparent;
    color: var(--text-primary);
}

.stories-heading[b-v6ai9n4k21] {
    position: relative;
    display: flex;
    min-height: 12rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, var(--border-subtle));
    border-radius: 1.2rem;
    background:
        radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--accent-primary) 28%, transparent), transparent 32%),
        linear-gradient(135deg, color-mix(in srgb, var(--surface-accent) 84%, var(--surface-primary)), var(--surface-primary));
    box-shadow: var(--shadow-card);
}

.stories-heading[b-v6ai9n4k21]::after {
    content: '';
    position: absolute;
    width: 18rem;
    height: 18rem;
    right: -5rem;
    bottom: -9rem;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
    border-radius: 50%;
}

.stories-heading > div:first-child[b-v6ai9n4k21] { position: relative; z-index: 1; max-width: 46rem; }
.stories-eyebrow[b-v6ai9n4k21] { color: var(--accent-primary); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.stories-heading h1[b-v6ai9n4k21] { margin: 0.25rem 0 0.35rem; color: var(--text-primary); font-size: clamp(2.1rem, 4.5vw, 3.7rem); font-weight: 900; letter-spacing: -0.055em; }
.stories-heading p[b-v6ai9n4k21] { max-width: 38rem; margin: 0; color: var(--text-secondary); line-height: 1.55; }

.stories-heading-art[b-v6ai9n4k21] {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 8.5rem;
    place-items: center;
    color: var(--accent-primary);
}
.stories-heading-art span[b-v6ai9n4k21] { font-size: clamp(3.6rem, 8vw, 6.5rem); font-weight: 900; line-height: 0.9; opacity: 0.82; }
.stories-heading-art small[b-v6ai9n4k21] { margin-top: 0.4rem; color: var(--text-muted); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }

.stories-toolbar[b-v6ai9n4k21] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.1rem 0 1.4rem; }
.stories-search[b-v6ai9n4k21] { display: flex; width: min(100%, 20rem); align-items: center; gap: 0.55rem; padding: 0 0.8rem; border: 1px solid var(--border-subtle); border-radius: 0.75rem; background: var(--surface-primary); color: var(--text-muted); box-shadow: var(--shadow-card); }
.stories-search:focus-within[b-v6ai9n4k21] { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.stories-search input[b-v6ai9n4k21] { width: 100%; min-height: 2.75rem; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 0.8rem; }
.stories-search input[b-v6ai9n4k21]::placeholder { color: var(--input-placeholder); }

.stories-filters[b-v6ai9n4k21] { display: flex; gap: 0.4rem; padding: 0; }
.stories-filters button[b-v6ai9n4k21] { min-height: 2.35rem; padding: 0.4rem 0.75rem; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-primary); color: var(--text-secondary); font-size: 0.72rem; font-weight: 750; }
.stories-filters button:hover:not(:disabled)[b-v6ai9n4k21], .stories-filters button.is-active[b-v6ai9n4k21] { border-color: var(--accent-primary); background: var(--surface-accent); color: var(--accent-primary); }
.stories-filters button:focus-visible[b-v6ai9n4k21] { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.stories-filters button:disabled[b-v6ai9n4k21] { cursor: not-allowed; opacity: 0.38; }

.stories-section[b-v6ai9n4k21] { margin: 0 0 1.5rem; padding: 0; }
.section-heading[b-v6ai9n4k21], .section-heading > div[b-v6ai9n4k21] { display: flex; align-items: center; }
.section-heading[b-v6ai9n4k21] { justify-content: space-between; gap: 1rem; margin: 0 0 0.75rem 0.25rem; }
.section-heading > div[b-v6ai9n4k21] { gap: 0.5rem; }
.section-heading > div > span[b-v6ai9n4k21] { color: var(--accent-primary); }
.section-heading h2[b-v6ai9n4k21] { margin: 0; color: var(--text-primary); font-size: 1rem; font-weight: 850; }
.section-heading small[b-v6ai9n4k21] { color: var(--text-muted); font-size: 0.68rem; }
.stories-grid[b-v6ai9n4k21] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: 1rem; }

.story-skeleton[b-v6ai9n4k21] { min-height: 22rem; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-primary); }
.story-skeleton span[b-v6ai9n4k21], .story-skeleton i[b-v6ai9n4k21] { display: block; background: linear-gradient(100deg, var(--surface-secondary) 25%, var(--surface-elevated) 45%, var(--surface-secondary) 65%); background-size: 250% 100%; animation: story-shimmer-b-v6ai9n4k21 1.4s linear infinite; }
.story-skeleton span[b-v6ai9n4k21] { height: 12rem; }
.story-skeleton i[b-v6ai9n4k21] { width: 68%; height: 0.8rem; margin: 1rem; border-radius: 999px; }
.story-skeleton i:last-child[b-v6ai9n4k21] { width: 45%; margin-top: -0.4rem; }
@keyframes story-shimmer-b-v6ai9n4k21 { to { background-position-x: -250%; } }

.stories-message[b-v6ai9n4k21] { display: grid; min-height: 13rem; place-items: center; align-content: center; padding: 1.5rem; border: 1px dashed var(--border-strong); border-radius: 1rem; background: var(--surface-primary); text-align: center; }
.stories-message > span[b-v6ai9n4k21] { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: 50%; background: var(--surface-accent); color: var(--accent-primary); font-weight: 900; }
.stories-message h2[b-v6ai9n4k21] { margin: 0.65rem 0 0.2rem; color: var(--text-primary); font-size: 1rem; }
.stories-message p[b-v6ai9n4k21] { margin: 0; color: var(--text-muted); font-size: 0.78rem; }
.stories-message button[b-v6ai9n4k21] { margin-top: 0.8rem; padding: 0.55rem 0.85rem; border: 0; border-radius: 0.6rem; background: var(--accent-primary); color: var(--text-on-accent); font-size: 0.75rem; font-weight: 800; }

@media (max-width: 760px) {
    .stories-browser[b-v6ai9n4k21] { padding: 1rem 0.75rem 6.5rem; }
    .stories-heading[b-v6ai9n4k21] { min-height: 13rem; padding: 1.35rem; }
    .stories-heading-art[b-v6ai9n4k21] { position: absolute; right: 0.8rem; bottom: 1.1rem; opacity: 0.26; }
    .stories-heading p[b-v6ai9n4k21] { max-width: 24rem; padding-right: 1rem; font-size: 0.85rem; }
    .stories-toolbar[b-v6ai9n4k21] { align-items: stretch; flex-direction: column; }
    .stories-search[b-v6ai9n4k21] { width: 100%; }
    .stories-filters[b-v6ai9n4k21] { overflow-x: auto; padding-bottom: 0.2rem; flex-wrap: nowrap; }
    .stories-filters button[b-v6ai9n4k21] { flex: 0 0 auto; }
    .section-heading[b-v6ai9n4k21] { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
}
/* /Components/Pages/StoryEpisodes.razor.rz.scp.css */
.episodes-page[b-j0xczf3r9p] { width: min(100%, 90rem); margin: 0 auto; padding: 1.65rem clamp(1rem, 2.2vw, 2.2rem) 3rem; }
.episodes-hero[b-j0xczf3r9p] { --hero-image: linear-gradient(135deg, #20253d, #6b3e99); position: relative; min-height: 24rem; display: flex; align-items: stretch; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, var(--border-subtle)); border-radius: 1.2rem; background-image: linear-gradient(90deg, rgb(12 17 38 / 96%) 0%, rgb(12 17 38 / 80%) 54%, rgb(12 17 38 / 24%) 100%), var(--hero-image); background-size: cover; background-position: center; box-shadow: var(--shadow-card); color: #fff; }
.episodes-hero-shade[b-j0xczf3r9p] { position: absolute; inset: 0; background: radial-gradient(circle at 78% 20%, rgb(197 167 255 / 24%), transparent 36%); }
.episodes-hero-content[b-j0xczf3r9p] { position: relative; z-index: 1; display: flex; width: min(66%, 48rem); flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); }
.episodes-back[b-j0xczf3r9p] { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; color: rgb(255 255 255 / 72%); font-size: 0.75rem; font-weight: 750; text-decoration: none; }
.episodes-back:hover[b-j0xczf3r9p] { color: #fff; }
.episodes-level[b-j0xczf3r9p] { color: #cfbdff; font-size: 0.7rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.episodes-hero h1[b-j0xczf3r9p] { max-width: 15ch; margin: 0.35rem 0 0.5rem; font-size: clamp(2.1rem, 5vw, 4rem); font-weight: 900; line-height: 0.98; letter-spacing: -0.055em; }
.episodes-hero p[b-j0xczf3r9p] { max-width: 40rem; margin: 0; color: rgb(255 255 255 / 76%); line-height: 1.55; }
.episodes-meta[b-j0xczf3r9p] { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.8rem; color: rgb(255 255 255 / 66%); font-size: 0.68rem; }
.episodes-meta span[b-j0xczf3r9p] { padding: 0.3rem 0.5rem; border: 1px solid rgb(255 255 255 / 13%); border-radius: 999px; background: rgb(255 255 255 / 8%); }
.episodes-primary[b-j0xczf3r9p] { display: inline-flex; min-height: 2.8rem; align-items: center; gap: 0.6rem; margin-top: 1rem; padding: 0.65rem 1rem; border-radius: 0.7rem; background: linear-gradient(135deg, #754af3, #a24dff); color: #fff; font-size: 0.8rem; font-weight: 850; text-decoration: none; box-shadow: 0 8px 24px rgb(117 74 243 / 35%); }
.episodes-primary:hover[b-j0xczf3r9p] { color: #fff; transform: translateY(-1px); }
.episodes-overall[b-j0xczf3r9p] { width: min(100%, 27rem); margin-top: 1rem; }
.episodes-overall > div[b-j0xczf3r9p] { display: flex; justify-content: space-between; margin-bottom: 0.35rem; color: rgb(255 255 255 / 68%); font-size: 0.66rem; }
.episodes-overall i[b-j0xczf3r9p] { display: block; height: 0.4rem; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 18%); }
.episodes-overall b[b-j0xczf3r9p] { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8660fa, #ca82ff); }

.episode-journey[b-j0xczf3r9p], .episodes-list-section[b-j0xczf3r9p] { margin-top: 1.25rem; }
.section-heading[b-j0xczf3r9p], .section-heading > div[b-j0xczf3r9p] { display: flex; align-items: center; }
.section-heading[b-j0xczf3r9p] { justify-content: space-between; gap: 1rem; margin: 0 0 0.75rem 0.25rem; }
.section-heading > div[b-j0xczf3r9p] { gap: 0.5rem; }
.section-heading > div > span[b-j0xczf3r9p] { color: var(--accent-primary); }
.section-heading h2[b-j0xczf3r9p] { margin: 0; color: var(--text-primary); font-size: 1rem; font-weight: 850; }
.section-heading small[b-j0xczf3r9p] { color: var(--text-muted); font-size: 0.68rem; }
.journey-track[b-j0xczf3r9p] { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 1rem; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-primary); box-shadow: var(--shadow-card); }
.journey-node[b-j0xczf3r9p] { display: grid; min-width: 4.2rem; flex: 1; grid-template-rows: 2.35rem auto; place-items: center; position: relative; }
.journey-node[b-j0xczf3r9p]::before, .journey-node[b-j0xczf3r9p]::after { content: ''; position: absolute; top: 1.1rem; width: 50%; height: 2px; background: var(--border-strong); }
.journey-node[b-j0xczf3r9p]::before { left: 0; } .journey-node[b-j0xczf3r9p]::after { right: 0; }
.journey-node:first-child[b-j0xczf3r9p]::before, .journey-node:last-child[b-j0xczf3r9p]::after { display: none; }
.journey-node > a[b-j0xczf3r9p], .journey-node > span[b-j0xczf3r9p] { position: relative; z-index: 1; display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border: 3px solid var(--surface-primary); outline: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface-secondary); color: var(--text-muted); font-size: 0.65rem; font-weight: 900; text-decoration: none; }
.journey-node small[b-j0xczf3r9p] { color: var(--text-muted); font-size: 0.62rem; }
.journey-node.state-current > a[b-j0xczf3r9p] { outline-color: var(--accent-primary); background: var(--accent-primary); color: var(--text-on-accent); }
.journey-node.state-completed > a[b-j0xczf3r9p] { outline-color: var(--success); background: color-mix(in srgb, var(--success) 16%, var(--surface-primary)); color: var(--success); }
.journey-node.state-completed[b-j0xczf3r9p]::before, .journey-node.state-completed[b-j0xczf3r9p]::after { background: var(--success); }
.episode-list[b-j0xczf3r9p] { display: grid; gap: 0.75rem; }

.episodes-message[b-j0xczf3r9p] { display: grid; min-height: 18rem; place-items: center; align-content: center; padding: 1.5rem; border: 1px dashed var(--border-strong); border-radius: 1rem; background: var(--surface-primary); text-align: center; }
.episodes-message > span[b-j0xczf3r9p] { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border-radius: 50%; background: var(--surface-accent); color: var(--accent-primary); font-weight: 900; }
.episodes-message h1[b-j0xczf3r9p], .episodes-message h2[b-j0xczf3r9p] { margin: 0.65rem 0 0.2rem; color: var(--text-primary); font-size: 1.2rem; }
.episodes-message p[b-j0xczf3r9p] { margin: 0; color: var(--text-muted); font-size: 0.8rem; }
.episodes-message div[b-j0xczf3r9p] { display: flex; gap: 0.55rem; margin-top: 0.85rem; }
.episodes-message a[b-j0xczf3r9p], .episodes-message button[b-j0xczf3r9p] { padding: 0.55rem 0.85rem; border: 1px solid var(--border-subtle); border-radius: 0.6rem; background: var(--surface-secondary); color: var(--text-primary); font-size: 0.72rem; font-weight: 800; text-decoration: none; }
.episodes-message button[b-j0xczf3r9p] { border-color: var(--accent-primary); background: var(--accent-primary); color: var(--text-on-accent); }
.episodes-skeleton[b-j0xczf3r9p], .episode-row-skeleton[b-j0xczf3r9p] { background: linear-gradient(100deg, var(--surface-primary) 25%, var(--surface-secondary) 45%, var(--surface-primary) 65%); background-size: 250% 100%; animation: episode-shimmer-b-j0xczf3r9p 1.4s linear infinite; }
.episode-row-skeleton[b-j0xczf3r9p] { height: 8rem; margin-top: 0.8rem; border: 1px solid var(--border-subtle); border-radius: 1rem; }
@keyframes episode-shimmer-b-j0xczf3r9p { to { background-position-x: -250%; } }

@media (max-width: 720px) {
    .episodes-page[b-j0xczf3r9p] { padding: 1rem 0.75rem 6.5rem; }
    .episodes-hero[b-j0xczf3r9p] { min-height: 31rem; background-image: linear-gradient(0deg, rgb(12 17 38 / 98%) 3%, rgb(12 17 38 / 64%) 100%), var(--hero-image); }
    .episodes-hero-content[b-j0xczf3r9p] { width: 100%; justify-content: flex-end; padding: 1.35rem; }
    .episodes-hero h1[b-j0xczf3r9p] { font-size: 2.3rem; }
    .episodes-hero p[b-j0xczf3r9p] { font-size: 0.84rem; }
    .section-heading[b-j0xczf3r9p] { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
}
/* /Components/Pages/StoryPlayer.razor.rz.scp.css */
.player[b-9q5i9lw6ei],
.player-loading[b-9q5i9lw6ei],
.player-complete[b-9q5i9lw6ei] {
    min-height: 100dvh;
}

.player[b-9q5i9lw6ei] {
    height: 100dvh;
    background: #080a12;
}

.player:focus-visible[b-9q5i9lw6ei] {
    outline: none;
}

.player-topbar[b-9q5i9lw6ei] {
    min-height: 4rem;
    padding: max(.7rem, env(safe-area-inset-top)) clamp(.75rem, 2vw, 1.5rem) .7rem;
    gap: clamp(.5rem, 1.2vw, 1rem);
    background: rgba(8, 10, 18, .88);
    border-bottom-color: rgba(255, 255, 255, .1);
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .16);
}

.player-topbar__back[b-9q5i9lw6ei] {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .75rem;
    background: rgba(255, 255, 255, .06);
    color: #f8f7ff;
    font-size: 1.15rem;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.player-topbar__back:hover[b-9q5i9lw6ei] {
    border-color: rgba(143, 111, 255, .52);
    background: rgba(143, 111, 255, .2);
    color: #fff;
    transform: translateX(-1px);
}

.player-topbar__back:focus-visible[b-9q5i9lw6ei],
.player-toggle:focus-visible[b-9q5i9lw6ei] {
    outline: 2px solid #a78bfa;
    outline-offset: 2px;
}

.player-topbar__title[b-9q5i9lw6ei] {
    color: #f8f7ff;
    font-size: .88rem;
}

.player-topbar__progress[b-9q5i9lw6ei] {
    display: grid;
    width: clamp(7.25rem, 12vw, 10rem);
    gap: .35rem;
    color: #c8c7d4;
}

.player-topbar__progress > span[b-9q5i9lw6ei] {
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.player-topbar__progress > i[b-9q5i9lw6ei] {
    display: block;
    height: .25rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
}

.player-topbar__progress > i > b[b-9q5i9lw6ei] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8155ff, #c27aff);
    box-shadow: 0 0 .65rem rgba(166, 118, 255, .55);
    transition: width .3s ease;
}

.player-topbar__mood[b-9q5i9lw6ei] {
    min-height: 2rem;
    padding: 0 .55rem;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    color: #d5d3df;
}

.player-toggle[b-9q5i9lw6ei] {
    min-width: 2.2rem;
    min-height: 2.2rem;
    padding: .25rem .5rem;
    border-color: rgba(255, 255, 255, .12);
    border-radius: .7rem;
    background: rgba(255, 255, 255, .04);
    color: #aaa8b8;
}

.player-toggle:hover[b-9q5i9lw6ei] {
    border-color: rgba(143, 111, 255, .45);
    color: #fff;
}

.player-toggle.active[b-9q5i9lw6ei] {
    border-color: rgba(167, 139, 250, .58);
    background: rgba(129, 85, 255, .22);
    color: #ddd0ff;
}

.player-scene[b-9q5i9lw6ei] {
    background-position: center;
    background-size: cover;
}

.player-loading[b-9q5i9lw6ei] {
    height: 100dvh;
    background: radial-gradient(circle at 50% 40%, rgba(129, 85, 255, .14), transparent 34%), #080a12;
}

.player-complete[b-9q5i9lw6ei] {
    min-height: 100dvh;
}

@media (max-width: 720px) {
    .player-topbar[b-9q5i9lw6ei] {
        min-height: 3.6rem;
        gap: .45rem;
    }

    .player-topbar__title[b-9q5i9lw6ei],
    .player-topbar__mood-name[b-9q5i9lw6ei] {
        display: none;
    }

    .player-topbar__mood[b-9q5i9lw6ei] {
        min-width: 2.2rem;
        padding: 0;
        justify-content: center;
    }

    .player-topbar__progress[b-9q5i9lw6ei] {
        width: auto;
        min-width: 4.65rem;
        flex: 1;
    }

    .player-topbar__toggles[b-9q5i9lw6ei] {
        gap: .25rem;
    }

    .player-toggle[b-9q5i9lw6ei] {
        min-width: 2rem;
        min-height: 2rem;
        padding-inline: .35rem;
    }
}

@media (max-width: 420px) {
    .player-topbar[b-9q5i9lw6ei] {
        padding-inline: .55rem;
    }

    .player-topbar__mood[b-9q5i9lw6ei] {
        display: none;
    }

    .player-topbar__progress > span[b-9q5i9lw6ei] {
        font-size: .65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .player-topbar__back[b-9q5i9lw6ei],
    .player-topbar__progress > i > b[b-9q5i9lw6ei] {
        transition: none;
    }
}
/* /Components/Pages/TermsOfUse.razor.rz.scp.css */
.legal-container[b-lmlaxx6gt4] {
    max-width: 780px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

.legal-document[b-lmlaxx6gt4] {
    color: var(--dark-text);
    line-height: 1.75;
}

.legal-header[b-lmlaxx6gt4] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #1e1e2a;
}

.legal-title[b-lmlaxx6gt4] {
    margin: 0 0 0.4rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--dark-text);
}

.legal-updated[b-lmlaxx6gt4] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--dark-text-muted);
}

.legal-document p[b-lmlaxx6gt4] {
    margin: 0 0 0.85rem;
    color: var(--dark-text-muted, #a0a0b8);
    font-size: 0.925rem;
}

.legal-document a[b-lmlaxx6gt4] {
    color: var(--dark-accent, #7c6af7);
    text-decoration: none;
}

.legal-document a:hover[b-lmlaxx6gt4] {
    text-decoration: underline;
}

.legal-placeholder[b-lmlaxx6gt4] {
    padding: 2rem;
    background: #16102a;
    border-radius: 0.75rem;
    text-align: center;
}
/* /Components/Quests/QuestBoard.razor.rz.scp.css */
.quest-board[b-n442p8lg65] { display: grid; gap: 24px; padding: 24px; background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: var(--shadow-card); color: var(--text-primary); min-width: 0; }
.quest-board__header[b-n442p8lg65], .quest-group__header[b-n442p8lg65], .quest-row__top[b-n442p8lg65] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quest-board__header h2[b-n442p8lg65] { margin: 0; font-size: 1.1rem; font-weight: 700; }
.quest-board__summary[b-n442p8lg65] { margin: 6px 0 0; font-size: .8rem; color: var(--text-secondary); }
.quest-button[b-n442p8lg65] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-primary); color: var(--text-primary); font-size: .85rem; font-weight: 650; text-decoration: none; flex-shrink: 0; }
.quest-button:hover:not(:disabled)[b-n442p8lg65] { color: var(--accent-hover); border-color: var(--accent-primary); }
.quest-button:focus-visible[b-n442p8lg65] { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.quest-button:disabled[b-n442p8lg65] { opacity: .6; }
.quest-group[b-n442p8lg65] { display: grid; gap: 16px; }
.quest-group + .quest-group[b-n442p8lg65] { padding-top: 24px; border-top: 1px solid var(--border-subtle); }
.quest-group__header[b-n442p8lg65] { flex-wrap: wrap; }
.quest-group__header h3[b-n442p8lg65] { font-size: 1rem; font-weight: 700; margin: 0; }
.quest-group__reset[b-n442p8lg65] { color: var(--text-secondary); font-size: .75rem; }
.quest-group__intro[b-n442p8lg65] { margin: 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.6; }
.quest-list[b-n442p8lg65] { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.quest-row[b-n442p8lg65] { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--surface-secondary); min-width: 0; }
.quest-row__icon[b-n442p8lg65] { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--surface-accent); font-size: 1.2rem; }
.quest-row__body[b-n442p8lg65] { flex: 1; min-width: 0; display: grid; gap: 12px; }
.quest-row__top[b-n442p8lg65] { align-items: flex-start; flex-wrap: wrap; }
.quest-row h4[b-n442p8lg65] { margin: 0; font-size: .95rem; line-height: 1.5; font-weight: 650; overflow-wrap: anywhere; }
.quest-status[b-n442p8lg65] { font-size: .7rem; color: var(--text-secondary); background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 4px 8px; }
.quest-row__desc[b-n442p8lg65] { margin: 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.6; overflow-wrap: anywhere; }
.quest-row__progress[b-n442p8lg65] { display: grid; gap: 8px; font-size: .8rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
progress[b-n442p8lg65] { display: block; width: 100%; height: 8px; border: 0; border-radius: 8px; overflow: hidden; background: var(--surface-primary); color: var(--accent-primary); }
progress[b-n442p8lg65]::-webkit-progress-bar { background: var(--surface-primary); }
progress[b-n442p8lg65]::-webkit-progress-value { background: var(--accent-primary); border-radius: 8px; }
progress[b-n442p8lg65]::-moz-progress-bar { background: var(--accent-primary); border-radius: 8px; }
.quest-row__rewards[b-n442p8lg65] { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.quest-reward[b-n442p8lg65] { font-size: .75rem; font-weight: 700; color: var(--text-primary); padding: 5px 9px; background: var(--surface-accent); border-radius: 8px; }
.quest-row__check[b-n442p8lg65] { font-size: .75rem; color: var(--text-secondary); }
.quest-row__cta[b-n442p8lg65] { margin-left: auto; }
.quest-state[b-n442p8lg65], .quest-notice[b-n442p8lg65] { margin: 0; padding: 20px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-secondary); color: var(--text-secondary); font-size: .85rem; line-height: 1.6; }
.quest-state h3[b-n442p8lg65] { margin: 0 0 8px; color: var(--text-primary); font-size: 1rem; }
.quest-state p[b-n442p8lg65] { margin: 0; }
.quest-skeleton[b-n442p8lg65] { display: grid; gap: 12px; }
.quest-skeleton > div[b-n442p8lg65] { height: 160px; border-radius: 16px; border: 1px solid var(--border-subtle); background: var(--surface-secondary); }
@media (max-width: 600px) { .quest-board[b-n442p8lg65] { padding: 16px; } .quest-board__header[b-n442p8lg65] { align-items: flex-start; flex-direction: column; } .quest-row[b-n442p8lg65] { padding: 16px; gap: 12px; } .quest-row__icon[b-n442p8lg65] { width: 32px; height: 32px; } .quest-row__cta[b-n442p8lg65] { margin-left: 0; } }
/* /Components/Quests/QuestToastHost.razor.rz.scp.css */
.quest-toasts[b-5hdn79lw9s] {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.65rem;
    pointer-events: none;
}

.quest-toast[b-5hdn79lw9s] {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    width: min(20rem, calc(100vw - 2.5rem));
    padding: 0.9rem 2.1rem 0.9rem 1rem;
    border: 1px solid #3b6b4a;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, #1d2a21 0%, var(--dark-surface-elevated) 70%);
    box-shadow: 0 0.75rem 1.75rem rgb(0 0 0 / 45%);
    animation: quest-toast-in-b-5hdn79lw9s 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.quest-toast--leaving[b-5hdn79lw9s] {
    animation: quest-toast-out-b-5hdn79lw9s 0.32s ease forwards;
}

.quest-toast__icon[b-5hdn79lw9s] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.25rem;
    border-radius: 0.7rem;
    background: rgb(52 208 88 / 12%);
    border: 1px solid rgb(52 208 88 / 30%);
}

.quest-toast__body[b-5hdn79lw9s] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.quest-toast__kicker[b-5hdn79lw9s] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dark-success);
}

.quest-toast__title[b-5hdn79lw9s] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-text);
    line-height: 1.3;
}

.quest-toast__rewards[b-5hdn79lw9s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.quest-toast__reward[b-5hdn79lw9s] {
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 0.4rem;
    color: #ffd479;
    background: rgb(255 212 121 / 12%);
    border: 1px solid rgb(255 212 121 / 28%);
}

.quest-toast__close[b-5hdn79lw9s] {
    position: absolute;
    top: 0.4rem;
    right: 0.45rem;
    padding: 0.1rem 0.3rem;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--dark-text-muted);
    background: none;
    border: none;
    cursor: pointer;
}

.quest-toast__close:hover[b-5hdn79lw9s] {
    color: var(--dark-text);
}

@keyframes quest-toast-in-b-5hdn79lw9s {
    from {
        opacity: 0;
        transform: translateX(1.5rem) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes quest-toast-out-b-5hdn79lw9s {
    to {
        opacity: 0;
        transform: translateX(1.5rem) scale(0.96);
    }
}

@media (max-width: 480px) {
    .quest-toasts[b-5hdn79lw9s] {
        right: 0.75rem;
        left: 0.75rem;
        bottom: 0.75rem;
        align-items: stretch;
    }

    .quest-toast[b-5hdn79lw9s] {
        width: auto;
    }
}
/* /Components/Shared/AuthJourneyIntro.razor.rz.scp.css */
.auth-journey[b-r8xjceds4w] { align-self: center; min-width: 0; padding: 2rem 1rem 2rem 0; }
.auth-journey-title[b-r8xjceds4w] { margin: 1rem 0 1.5rem; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.15; letter-spacing: -.04em; font-weight: 850; color: var(--text-primary); }
.auth-journey-title span[b-r8xjceds4w] { color: var(--accent-hover); }
.auth-journey-copy[b-r8xjceds4w] { max-width: 28rem; font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
.auth-journey ul[b-r8xjceds4w] { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.25rem; }
.auth-journey li[b-r8xjceds4w] { display: flex; align-items: center; gap: .75rem; color: var(--text-secondary); font-size: .9rem; font-weight: 600; }
.auth-journey[b-r8xjceds4w]  .nav-icon { color: var(--accent-hover); }
@media (max-width: 850px) { .auth-journey[b-r8xjceds4w] { display: none; } }
/* /Components/Shared/GlobalSearch.razor.rz.scp.css */
.search-trigger[b-ybaefjzm5a] { display: flex; align-items: center; gap: .65rem; min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md, .85rem); background: var(--surface-primary); color: var(--text-secondary); margin-right: auto; }
.search-trigger[b-ybaefjzm5a]  svg { width: 1.1rem; height: 1.1rem; }
.search-trigger kbd[b-ybaefjzm5a] { margin-left: 1.5rem; padding: .2rem .35rem; background: var(--surface-secondary); color: var(--text-muted); font-size: .7rem; }
.search-trigger:hover[b-ybaefjzm5a] { border-color: var(--accent-primary); color: var(--text-primary); }
.search-trigger:disabled[b-ybaefjzm5a] { opacity: .55; cursor: wait; }
.search-trigger:focus-visible[b-ybaefjzm5a], .global-search button:focus-visible[b-ybaefjzm5a], .search-result:focus-visible[b-ybaefjzm5a] { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.global-search[b-ybaefjzm5a] { width: min(640px, calc(100vw - 2rem)); max-height: min(720px, calc(100dvh - 4rem)); margin: 6vh auto auto; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-lg, 1.25rem); background: var(--surface-elevated); color: var(--text-primary); box-shadow: var(--shadow-overlay); overflow: hidden; }
.global-search[open][b-ybaefjzm5a] { display: flex; flex-direction: column; }
.global-search[b-ybaefjzm5a]::backdrop { background: var(--bg-overlay); backdrop-filter: blur(4px); }
.search-header[b-ybaefjzm5a] { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 1.5rem .9rem; }
.search-eyebrow[b-ybaefjzm5a] { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
.search-header h2[b-ybaefjzm5a] { margin: .25rem 0 0; font-size: 1.35rem; font-weight: 750; }
.search-close[b-ybaefjzm5a] { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm, .6rem); min-width: 44px; height: 44px; background: var(--surface-secondary); color: var(--text-secondary); font-size: 1.5rem; }
.search-field[b-ybaefjzm5a] { display: flex; gap: .6rem; align-items: center; margin: 0 1.5rem; padding: .3rem .85rem; border: 1px solid var(--border-strong); border-radius: var(--radius-md, .85rem); background: var(--surface-primary); }
.search-field:focus-within[b-ybaefjzm5a] { border-color: var(--accent-primary); outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.search-field > span[b-ybaefjzm5a] { font-size: 1.8rem; color: var(--accent-primary); }
.search-field input[b-ybaefjzm5a] { min-width: 0; flex: 1; width: 100%; min-height: 44px; padding: .5rem 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: 1rem; }
.search-field input[b-ybaefjzm5a]::placeholder { color: var(--text-muted); }
.search-hint[b-ybaefjzm5a] { margin: .65rem 1.5rem .9rem; font-size: .78rem; color: var(--text-secondary); }
.search-results[b-ybaefjzm5a] { min-height: 140px; overflow-y: auto; overscroll-behavior: contain; padding: 0 .65rem 1rem; }
.search-group h3[b-ybaefjzm5a] { display: flex; justify-content: space-between; margin: .65rem .85rem .4rem; font-size: .75rem; font-weight: 700; color: var(--text-secondary); }
.search-group h3 span[b-ybaefjzm5a] { color: var(--text-muted); }
.search-result[b-ybaefjzm5a] { display: flex; align-items: center; gap: .8rem; min-height: 60px; padding: .65rem .85rem; border: 1px solid transparent; border-radius: var(--radius-md, .85rem); text-decoration: none; color: var(--text-primary); }
.search-result:hover[b-ybaefjzm5a], .search-result[aria-selected="true"][b-ybaefjzm5a] { background: var(--accent-soft); border-color: var(--border-strong); color: var(--text-primary); }
.search-result-icon[b-ybaefjzm5a] { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; background: var(--surface-secondary); border-radius: var(--radius-sm, .6rem); color: var(--accent-primary); font-size: 1.15rem; }
.search-result-copy[b-ybaefjzm5a] { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.search-result-copy strong[b-ybaefjzm5a] { font-size: .95rem; overflow-wrap: anywhere; }
.search-result-copy small[b-ybaefjzm5a] { color: var(--text-secondary); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-arrow[b-ybaefjzm5a] { color: var(--text-muted); }
.search-state[b-ybaefjzm5a] { padding: 2rem 1rem; text-align: center; color: var(--text-secondary); }
.search-state strong[b-ybaefjzm5a] { color: var(--text-primary); }
.search-state button[b-ybaefjzm5a] { padding: .5rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm, .6rem); background: var(--surface-primary); color: var(--text-primary); }
.search-footer[b-ybaefjzm5a] { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1.5rem; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: .72rem; }
@media (max-width: 767.98px) {
    .search-trigger[b-ybaefjzm5a] { margin-left: auto; margin-right: 0; min-width: 44px; padding: .6rem; justify-content: center; }
    .search-trigger > span[b-ybaefjzm5a], .search-trigger kbd[b-ybaefjzm5a] { display: none; }
    .global-search[b-ybaefjzm5a] { width: 100%; height: 100dvh; max-height: 100dvh; max-width: 100%; margin: 0; border: 0; border-radius: 0; }
    .search-header[b-ybaefjzm5a] { padding: max(1rem, env(safe-area-inset-top)) 1rem .9rem; }
    .search-field[b-ybaefjzm5a] { margin-inline: 1rem; }
    .search-hint[b-ybaefjzm5a] { margin-inline: 1rem; }
    .search-results[b-ybaefjzm5a] { flex: 1; min-height: 0; }
    .search-footer[b-ybaefjzm5a] { padding: .8rem 1rem max(.8rem, env(safe-area-inset-bottom)); }
    .search-footer > span:last-child[b-ybaefjzm5a] { display: none; }
}
/* /Components/Shared/QuizRewardCard.razor.rz.scp.css */
.qrc-card[b-4ivvc3whst] {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1.1rem;
    padding: 0 1.25rem 1.25rem;
    overflow: visible;
    border: 1px solid var(--border-subtle);
    border-radius: 1.1rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
}

.qrc-aibo-row[b-4ivvc3whst] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding-top: 1.65rem;
}

.qrc-aibo-wrap[b-4ivvc3whst] {
    position: relative;
    width: 3.6rem;
    height: 3.6rem;
    flex: 0 0 auto;
    overflow: visible;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface-secondary);
}

.qrc-aibo-wrap--female[b-4ivvc3whst] {
    border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-subtle));
    background: linear-gradient(160deg, var(--surface-accent), var(--surface-secondary));
}

.qrc-aibo-wrap--male[b-4ivvc3whst] {
    border-color: color-mix(in srgb, var(--info) 40%, var(--border-subtle));
    background: linear-gradient(160deg, color-mix(in srgb, var(--info) 14%, var(--surface-primary)), var(--surface-secondary));
}

.qrc-aibo-glow[b-4ivvc3whst] {
    position: absolute;
    z-index: 0;
    bottom: -20%;
    left: 50%;
    width: 90%;
    height: 70%;
    transform: translateX(-50%);
    border-radius: 50%;
    filter: blur(18px);
    opacity: .45;
    pointer-events: none;
}

.qrc-aibo-wrap--female .qrc-aibo-glow[b-4ivvc3whst] { background: var(--accent-primary); }
.qrc-aibo-wrap--male .qrc-aibo-glow[b-4ivvc3whst] { background: var(--info); }

.qrc-aibo-img[b-4ivvc3whst] {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 50%;
    width: auto;
    height: 155%;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 6px 14px rgb(9 13 31 / 28%));
    pointer-events: none;
}

.qrc-speech-bubble[b-4ivvc3whst] {
    position: relative;
    flex: 1;
    padding: .85rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: .85rem;
    border-bottom-left-radius: .25rem;
    background: var(--surface-secondary);
}

.qrc-speech-bubble[b-4ivvc3whst]::before,
.qrc-speech-bubble[b-4ivvc3whst]::after {
    position: absolute;
    top: 1.2rem;
    border: 5px solid transparent;
    content: '';
}

.qrc-speech-bubble[b-4ivvc3whst]::before {
    left: -10px;
    border-right-color: var(--border-subtle);
}

.qrc-speech-bubble[b-4ivvc3whst]::after {
    left: -8px;
    border-right-color: var(--surface-secondary);
}

.qrc-message[b-4ivvc3whst] {
    margin: 0;
    color: var(--text-secondary);
    font-size: .78rem;
    line-height: 1.5;
}

.qrc-divider[b-4ivvc3whst] {
    height: 1px;
    background: var(--border-subtle);
}

.qrc-stats[b-4ivvc3whst] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.qrc-score-block[b-4ivvc3whst] {
    display: grid;
    justify-items: center;
    gap: .2rem;
}

.qrc-score[b-4ivvc3whst] {
    color: var(--text-primary);
    font-size: 2.4rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -.04em;
}

.qrc-score-sep[b-4ivvc3whst] {
    margin: 0 .1em;
    color: var(--text-muted);
    font-weight: 400;
}

.qrc-score-label[b-4ivvc3whst] {
    color: var(--text-muted);
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.qrc-xp-badge[b-4ivvc3whst] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border: 1px solid color-mix(in srgb, var(--success) 38%, var(--border-subtle));
    border-radius: 999px;
    background: color-mix(in srgb, var(--success) 10%, var(--surface-primary));
    color: var(--success);
}

.qrc-xp-icon[b-4ivvc3whst] { font-size: .75rem; }

.qrc-xp-value[b-4ivvc3whst] {
    font-size: .9rem;
    font-weight: 850;
}

.qrc-levelup-banner[b-4ivvc3whst] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .72rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 36%, var(--border-subtle));
    border-radius: .8rem;
    background: var(--surface-accent);
}

.qrc-levelup-label[b-4ivvc3whst] {
    color: var(--accent-primary);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.qrc-levelup-arrow[b-4ivvc3whst] {
    color: var(--text-primary);
    font-size: .88rem;
    font-weight: 750;
}

@media (max-width: 520px) {
    .qrc-card[b-4ivvc3whst] {
        padding-right: .85rem;
        padding-left: .85rem;
    }

    .qrc-aibo-row[b-4ivvc3whst] {
        align-items: center;
        gap: .7rem;
    }

    .qrc-aibo-wrap[b-4ivvc3whst] {
        width: 3rem;
        height: 3rem;
    }

    .qrc-speech-bubble[b-4ivvc3whst] {
        padding: .7rem .8rem;
    }
}
/* /Components/Shared/SiteFooter.razor.rz.scp.css */
.site-footer[b-atu8ps1ncj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1.25rem 2.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
}

.site-footer-links[b-atu8ps1ncj] {
    display: flex;
    gap: 1.25rem;
}

.site-footer-links a[b-atu8ps1ncj] {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.site-footer-links a:hover[b-atu8ps1ncj] {
    color: var(--text-secondary);
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .site-footer[b-atu8ps1ncj] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.25rem 1rem;
    }
}
/* /Components/Shared/StudyProgress.razor.rz.scp.css */
.study-progress[b-l8i6x5u7q8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .4rem .65rem;
    width: 100%;
}

.study-progress__meta[b-l8i6x5u7q8] {
    display: flex;
    grid-column: 1 / -1;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-muted);
    font-size: .68rem;
}

.study-progress__meta strong[b-l8i6x5u7q8] {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.study-progress__track[b-l8i6x5u7q8] {
    height: .42rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--border-subtle);
}

.study-progress__track span[b-l8i6x5u7q8] {
    display: block;
    min-width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--study-progress-accent, var(--accent-primary));
    transition: width 220ms ease;
}

.study-progress__percentage[b-l8i6x5u7q8] {
    min-width: 2.2rem;
    color: var(--text-secondary);
    font-size: .66rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    text-align: right;
}
/* /Components/Shared/ThemeSwitch.razor.rz.scp.css */
.theme-switch[b-uf7z44aufn] { position: relative; display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; justify-items: center; width: 80px; height: 44px; flex: 0 0 auto; padding: 3px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-secondary); cursor: pointer; }
.theme-switch-thumb[b-uf7z44aufn] { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-primary); box-shadow: var(--shadow-card); transition: transform 180ms ease; pointer-events: none; }
.theme-switch-icon[b-uf7z44aufn] { position: relative; z-index: 1; display: inline-flex; color: var(--text-secondary); transition: color 180ms ease; pointer-events: none; }
.theme-switch-icon[b-uf7z44aufn]  .nav-icon { width: 20px; height: 20px; }
.theme-switch-icon--sun[b-uf7z44aufn] { color: var(--accent-hover); }
:root[data-theme="dark"] .theme-switch-thumb[b-uf7z44aufn] { transform: translateX(100%); }
:root[data-theme="dark"] .theme-switch-icon--sun[b-uf7z44aufn] { color: var(--text-secondary); }
:root[data-theme="dark"] .theme-switch-icon--moon[b-uf7z44aufn] { color: var(--accent-hover); }
.theme-switch:hover[b-uf7z44aufn] { border-color: var(--accent-primary); }
.theme-switch:focus-visible[b-uf7z44aufn] { outline: 2px solid var(--accent-primary); outline-offset: 3px; box-shadow: 0 0 0 4px var(--focus-ring); }
.theme-switch:disabled[b-uf7z44aufn] { cursor: not-allowed; opacity: .6; }
@media (max-width: 480px) { .theme-switch[b-uf7z44aufn] { width: 72px; } }
/* /Components/Shared/UserAvatar.razor.rz.scp.css */
/* ── Wrapper (relative anchor for dropdown) ──────────── */
.ua-wrapper[b-m2ug5wucu6] {
    position: relative;
    flex-shrink: 0;
}

/* ── Trigger button ──────────────────────────────────── */
.ua-trigger[b-m2ug5wucu6] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    max-width: 260px;
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    padding: 4px 10px 4px 4px;
    border-radius: 14px;
    color: var(--text-primary);
    user-select: none;
}

.ua-trigger:hover[b-m2ug5wucu6],
.ua-trigger[aria-expanded="true"][b-m2ug5wucu6] {
    background: var(--surface-secondary);
    border-color: var(--border-strong);
}

.ua-trigger:focus-visible[b-m2ug5wucu6] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ── Avatar image ────────────────────────────────────── */
.ua-avatar[b-m2ug5wucu6] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: var(--surface-accent);
}

.ua-avatar-img[b-m2ug5wucu6] {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    height: 140px;
    width: auto;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
}

.ua-name[b-m2ug5wucu6] {
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--text-primary);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ua-chevron[b-m2ug5wucu6] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ua-trigger[aria-expanded="true"] .ua-chevron[b-m2ug5wucu6] {
    transform: rotate(180deg);
}

/* ── Transparent backdrop (closes dropdown on outside click) */
.ua-backdrop[b-m2ug5wucu6] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* ── Dropdown menu ───────────────────────────────────── */
.ua-menu[b-m2ug5wucu6] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 100;
    width: min(260px, calc(100vw - 2rem));
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-overlay);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ua-menu-header[b-m2ug5wucu6] {
    padding: 0.875rem 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ua-menu-name[b-m2ug5wucu6] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ua-menu-email[b-m2ug5wucu6] {
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ua-menu-divider[b-m2ug5wucu6] {
    height: 1px;
    background: var(--border-subtle);
}

/* ── Menu items ──────────────────────────────────────── */
.ua-menu-item[b-m2ug5wucu6] {
    display: block;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    min-height: 44px;
}

.ua-menu-item:focus-visible[b-m2ug5wucu6] {
    outline: 2px solid var(--focus-ring);
    outline-offset: -3px;
}

.ua-menu-item:hover[b-m2ug5wucu6] {
    background: var(--surface-secondary);
    color: var(--text-primary);
    text-decoration: none;
}

.ua-menu-item--danger[b-m2ug5wucu6] {
    color: var(--danger);
}

.ua-menu-item--danger:hover[b-m2ug5wucu6] {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
}

.ua-menu form[b-m2ug5wucu6] {
    display: contents;
}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .ua-name[b-m2ug5wucu6], .ua-chevron[b-m2ug5wucu6] {
        display: none;
    }
    .ua-trigger[b-m2ug5wucu6] {
        width: 44px;
        padding: 4px;
        justify-content: center;
    }
}
/* /Components/Stories/EpisodeCard.razor.rz.scp.css */
.episode-card[b-rv29sqf8xw] { display: grid; grid-template-columns: 11rem minmax(0, 1fr); min-width: 0; min-height: 8rem; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-primary); box-shadow: var(--shadow-card); transition: transform 160ms ease, border-color 160ms ease; }
.episode-card:hover[b-rv29sqf8xw] { transform: translateY(-2px); }
.episode-card.is-current[b-rv29sqf8xw] { border-color: color-mix(in srgb, var(--accent-primary) 52%, var(--border-subtle)); }
.episode-card.is-completed[b-rv29sqf8xw] { border-color: color-mix(in srgb, var(--success) 36%, var(--border-subtle)); }
.episode-card.is-locked[b-rv29sqf8xw] { opacity: 0.76; }
.episode-cover[b-rv29sqf8xw] { --episode-cover: linear-gradient(145deg, #282e49, #6740a0); position: relative; display: grid; min-height: 8rem; place-items: center; background-image: linear-gradient(rgb(16 20 42 / 35%), rgb(16 20 42 / 56%)), var(--episode-cover); background-size: cover; background-position: center; }
.episode-cover span[b-rv29sqf8xw] { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border: 2px solid rgb(255 255 255 / 74%); border-radius: 50%; background: rgb(16 20 42 / 62%); color: #fff; font-weight: 900; box-shadow: 0 5px 20px rgb(0 0 0 / 28%); }
.is-completed .episode-cover span[b-rv29sqf8xw] { border-color: #8ce0b7; color: #8ce0b7; }
.is-locked .episode-cover[b-rv29sqf8xw] { filter: grayscale(0.75); }
.episode-copy[b-rv29sqf8xw] { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 0.9rem 1rem; }
.episode-kicker[b-rv29sqf8xw] { display: flex; flex-wrap: wrap; gap: 0.35rem; color: var(--text-muted); font-size: 0.62rem; font-weight: 750; }
.episode-copy h3[b-rv29sqf8xw] { margin: 0.25rem 0 0.2rem; color: var(--text-primary); font-size: 1rem; font-weight: 850; }
.episode-copy p[b-rv29sqf8xw] { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text-secondary); font-size: 0.73rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.episode-status-row[b-rv29sqf8xw] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; }
.episode-status[b-rv29sqf8xw] { color: var(--text-muted); font-size: 0.66rem; font-weight: 700; }
.is-completed .episode-status[b-rv29sqf8xw] { color: var(--success); }
.episode-status-row a[b-rv29sqf8xw] { display: inline-flex; min-height: 2.2rem; align-items: center; gap: 0.4rem; padding: 0.45rem 0.7rem; border: 1px solid var(--border-subtle); border-radius: 0.6rem; background: var(--surface-secondary); color: var(--text-primary); font-size: 0.67rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.is-current .episode-status-row a[b-rv29sqf8xw] { border-color: var(--accent-primary); background: var(--accent-primary); color: var(--text-on-accent); }
.episode-locked[b-rv29sqf8xw] { color: var(--text-muted); font-size: 0.65rem; font-weight: 750; white-space: nowrap; }

@media (max-width: 620px) {
    .episode-card[b-rv29sqf8xw] { grid-template-columns: 7rem minmax(0, 1fr); }
    .episode-cover[b-rv29sqf8xw] { min-height: 10rem; }
    .episode-copy[b-rv29sqf8xw] { padding: 0.75rem; }
    .episode-status-row[b-rv29sqf8xw] { align-items: flex-start; flex-direction: column; gap: 0.45rem; }
    .episode-status-row a[b-rv29sqf8xw] { width: 100%; justify-content: center; }
}

@media (max-width: 410px) {
    .episode-card[b-rv29sqf8xw] { grid-template-columns: 1fr; }
    .episode-cover[b-rv29sqf8xw] { min-height: 8rem; }
}
/* /Components/Stories/StoryCard.razor.rz.scp.css */
.story-card[b-6a0ac9qy6b] {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.story-card:hover[b-6a0ac9qy6b] { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-subtle)); box-shadow: var(--shadow-overlay); }
.story-card.is-completed[b-6a0ac9qy6b] { border-color: color-mix(in srgb, var(--success) 32%, var(--border-subtle)); }
.story-cover[b-6a0ac9qy6b] { --cover-image: linear-gradient(145deg, #282e49, #6740a0); position: relative; display: block; min-height: 12rem; overflow: hidden; background-image: linear-gradient(0deg, rgb(16 20 42 / 70%), transparent 62%), var(--cover-image); background-size: cover; background-position: center; }
.story-cover-shade[b-6a0ac9qy6b] { position: absolute; inset: 0; background: radial-gradient(circle at 80% 18%, rgb(199 171 255 / 24%), transparent 34%); }
.story-cover-level[b-6a0ac9qy6b], .story-completed-badge[b-6a0ac9qy6b] { position: absolute; top: 0.8rem; padding: 0.28rem 0.55rem; border: 1px solid rgb(255 255 255 / 20%); border-radius: 999px; background: rgb(18 22 44 / 70%); backdrop-filter: blur(8px); font-size: 0.65rem; font-weight: 850; }
.story-cover-level[b-6a0ac9qy6b] { left: 0.8rem; color: #fff; }
.story-completed-badge[b-6a0ac9qy6b] { right: 0.8rem; color: #8ce0b7; }
.story-card-body[b-6a0ac9qy6b] { display: flex; min-width: 0; flex: 1; flex-direction: column; padding: 1rem; }
.story-meta[b-6a0ac9qy6b] { display: flex; align-items: center; gap: 0.35rem; color: var(--text-muted); font-size: 0.65rem; font-weight: 700; }
.story-card h3[b-6a0ac9qy6b] { margin: 0.35rem 0 0.25rem; color: var(--text-primary); font-size: 1.15rem; font-weight: 850; letter-spacing: -0.025em; }
.story-card p[b-6a0ac9qy6b] { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text-secondary); font-size: 0.76rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.story-card-footer[b-6a0ac9qy6b] { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem; margin-top: auto; padding-top: 1rem; }
.story-state[b-6a0ac9qy6b] { min-width: 0; flex: 1; }
.story-progress[b-6a0ac9qy6b] { height: 0.38rem; overflow: hidden; border-radius: 999px; background: var(--border-subtle); }
.story-progress span[b-6a0ac9qy6b] { display: block; height: 100%; min-width: 0.2rem; border-radius: inherit; background: linear-gradient(90deg, var(--accent-primary), #ba75f4); }
.story-state small[b-6a0ac9qy6b] { display: block; margin-top: 0.35rem; overflow: hidden; color: var(--text-muted); font-size: 0.61rem; text-overflow: ellipsis; white-space: nowrap; }
.story-cta[b-6a0ac9qy6b] { display: inline-flex; min-height: 2.4rem; align-items: center; gap: 0.45rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border-subtle); border-radius: 0.65rem; background: var(--surface-secondary); color: var(--text-primary); font-size: 0.7rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.story-cta:hover[b-6a0ac9qy6b], .story-cta.is-primary[b-6a0ac9qy6b] { border-color: var(--accent-primary); background: var(--accent-primary); color: var(--text-on-accent); }

.story-card.is-featured[b-6a0ac9qy6b] { grid-template-columns: minmax(16rem, 0.9fr) minmax(20rem, 1.1fr); min-height: 16rem; }
.story-card.is-featured .story-cover[b-6a0ac9qy6b] { min-height: 16rem; }
.story-card.is-featured .story-card-body[b-6a0ac9qy6b] { justify-content: center; padding: clamp(1.1rem, 2.5vw, 1.8rem); }
.story-card.is-featured h3[b-6a0ac9qy6b] { font-size: clamp(1.4rem, 3vw, 2rem); }
.story-card.is-featured p[b-6a0ac9qy6b] { max-width: 44rem; -webkit-line-clamp: 4; }

@media (max-width: 680px) {
    .story-card.is-featured[b-6a0ac9qy6b] { grid-template-columns: 1fr; }
    .story-card.is-featured .story-cover[b-6a0ac9qy6b] { min-height: 12rem; }
    .story-card-footer[b-6a0ac9qy6b] { align-items: stretch; flex-direction: column; }
    .story-cta[b-6a0ac9qy6b] { justify-content: center; }
}