/* ===== Design tokens (Phase 1 foundation) ===== */
:root {
    /* Colors - light palette (coral + lavender + mint, Locket vibe) */
    --sb-color-primary: #F08A7E;
    --sb-color-primary-hover: #E87363;
    --sb-color-primary-soft: #FBD2CB;
    --sb-color-primary-rgb: 240, 138, 126;
    --sb-color-secondary: #B6A4E8;
    --sb-color-secondary-hover: #9D87DC;
    --sb-color-secondary-soft: #E4DCF6;
    --sb-color-secondary-rgb: 182, 164, 232;
    --sb-color-tertiary: #7FD1B0;
    --sb-color-tertiary-soft: #D3F0E2;
    --sb-color-tertiary-rgb: 127, 209, 176;
    --sb-color-warning: #F5C26B;
    --sb-color-warning-rgb: 245, 194, 107;
    --sb-color-success: #6FC9A1;
    --sb-color-success-rgb: 111, 201, 161;
    --sb-color-info: #7BB6E8;
    --sb-color-info-rgb: 123, 182, 232;

    /* v2 accents (peach + cream + blush) */
    --sb-color-peach: #FFD3B6;
    --sb-color-peach-rgb: 255, 211, 182;
    --sb-color-cream: #FBE9DD;
    --sb-color-cream-rgb: 251, 233, 221;
    --sb-color-blush: #FFE0EC;
    --sb-color-blush-rgb: 255, 224, 236;
    --sb-color-lavender-soft: #E8DEF8;
    --sb-color-lavender-soft-rgb: 232, 222, 248;
    --sb-color-mint-soft: #D7F0E3;
    --sb-color-mint-soft-rgb: 215, 240, 227;

    /* Surfaces and text */
    --sb-bg-gradient: linear-gradient(135deg, #FFF1E6 0%, #FFE0EC 25%, #F3E8FF 55%, #E8F4FF 80%, #E6FFF4 100%);
    --sb-surface: #FFFFFF;
    --sb-surface-elev: rgba(255, 246, 240, 0.82);
    --sb-glass-bg: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.55));
    --sb-glass-border: rgba(255, 255, 255, 0.6);
    --sb-text-primary: #3A2E3F;
    --sb-text-secondary: #7A6B7D;
    --sb-text-muted: #A99AAB;
    --sb-line: #EFE3E8;

    /* Radii */
    --sb-radius-sm: 8px;
    --sb-radius-md: 14px;
    --sb-radius-lg: 20px;
    --sb-radius-xl: 26px;
    --sb-radius-2xl: 32px;
    --sb-radius-pill: 999px;

    /* Shadows */
    --sb-shadow-soft: 0 4px 16px rgba(240, 138, 126, 0.10);
    --sb-shadow-glow: 0 0 0 4px rgba(240, 138, 126, 0.18), 0 8px 24px rgba(240, 138, 126, 0.22);
    --sb-shadow-elev: 0 12px 32px rgba(58, 46, 63, 0.10);
    --sb-shadow-card: 0 18px 40px -16px rgba(244, 164, 150, 0.28), 0 6px 14px -4px rgba(182, 164, 232, 0.18);
    --sb-shadow-card-hover: 0 28px 60px -16px rgba(244, 164, 150, 0.4), 0 12px 24px -6px rgba(182, 164, 232, 0.28);
    --sb-shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.6);

    /* Motion */
    --sb-motion-fast: 140ms;
    --sb-motion-base: 220ms;
    --sb-motion-slow: 380ms;
    --sb-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --sb-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing */
    --sb-space-1: 4px;
    --sb-space-2: 8px;
    --sb-space-3: 12px;
    --sb-space-4: 16px;
    --sb-space-5: 24px;
    --sb-space-6: 32px;

    /* Reserved height under the study page for fixed bottom bars on mobile
       (grade buttons OR MCQ 2-row option grid). Keep in sync with whichever
       bar is taller. */
    --sb-study-bottom-bar: 150px;
}

:root[data-theme="dark"] {
    --sb-color-primary: #F4A496;
    --sb-color-primary-hover: #F8B6AA;
    --sb-color-primary-soft: rgba(244, 164, 150, 0.18);
    --sb-color-primary-rgb: 244, 164, 150;
    --sb-color-secondary: #C8B8F0;
    --sb-color-secondary-hover: #D6C8F5;
    --sb-color-secondary-soft: rgba(200, 184, 240, 0.18);
    --sb-color-secondary-rgb: 200, 184, 240;
    --sb-color-tertiary: #8FDDBF;
    --sb-color-tertiary-soft: rgba(143, 221, 191, 0.18);
    --sb-color-tertiary-rgb: 143, 221, 191;
    --sb-color-warning: #F8CF82;
    --sb-color-warning-rgb: 248, 207, 130;
    --sb-color-success: #82D6B0;
    --sb-color-success-rgb: 130, 214, 176;
    --sb-color-info: #95C6F0;
    --sb-color-info-rgb: 149, 198, 240;

    --sb-bg-gradient: linear-gradient(135deg, #1E1820 0%, #221A29 35%, #1A2030 70%, #15201D 100%);
    --sb-surface: #26212E;
    --sb-surface-elev: rgba(38, 33, 46, 0.78);
    --sb-glass-bg: linear-gradient(135deg, rgba(46, 40, 55, 0.72), rgba(38, 33, 46, 0.58));
    --sb-glass-border: rgba(255, 255, 255, 0.06);
    --sb-text-primary: #F2E9EF;
    --sb-text-secondary: #B8A9BD;
    --sb-text-muted: #8C7E92;
    --sb-line: #3A2F40;

    --sb-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.32);
    --sb-shadow-glow: 0 0 0 4px rgba(244, 164, 150, 0.22), 0 8px 24px rgba(244, 164, 150, 0.30);
    --sb-shadow-elev: 0 12px 32px rgba(0, 0, 0, 0.45);
    --sb-shadow-card: 0 18px 40px -16px rgba(0, 0, 0, 0.55), 0 6px 14px -4px rgba(0, 0, 0, 0.35);
    --sb-shadow-card-hover: 0 28px 60px -16px rgba(0, 0, 0, 0.7), 0 12px 24px -6px rgba(0, 0, 0, 0.45);
    --sb-shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Solid fallback color that paints the Android gesture-bar region.
   Chrome samples a solid bg-color (not the gradient) when filling that
   area, so we set the same value on :root and body. color-scheme tunes
   system UI (gesture pill, scrollbars) light vs dark. */
:root {
    --sb-bg-edge: #E6FFF4;
    color-scheme: light;
    background-color: var(--sb-bg-edge);
}
:root[data-theme="dark"] {
    --sb-bg-edge: #15201D;
    color-scheme: dark;
}

/* ===== Body ambiance + base typography ===== */
html, body {
    font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
    background-color: var(--sb-bg-edge);
    background-image: var(--sb-bg-gradient);
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--sb-text-primary);
    position: relative;
}

/* Aurora overlay: two drifting blurred radial gradients */
body::before {
    content: "";
    position: fixed;
    inset: -10%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40% 40% at 20% 18%, rgba(var(--sb-color-peach-rgb), 0.55) 0%, transparent 70%),
        radial-gradient(45% 45% at 82% 78%, rgba(var(--sb-color-lavender-soft-rgb), 0.55) 0%, transparent 72%),
        radial-gradient(35% 35% at 65% 30%, rgba(var(--sb-color-blush-rgb), 0.40) 0%, transparent 70%);
    filter: blur(20px);
    animation: sb-aurora 60s var(--sb-ease-soft) infinite alternate;
}

:root[data-theme="dark"] body::before {
    background:
        radial-gradient(40% 40% at 20% 18%, rgba(var(--sb-color-primary-rgb), 0.18) 0%, transparent 70%),
        radial-gradient(45% 45% at 82% 78%, rgba(var(--sb-color-secondary-rgb), 0.18) 0%, transparent 72%),
        radial-gradient(35% 35% at 65% 30%, rgba(var(--sb-color-tertiary-rgb), 0.10) 0%, transparent 70%);
}

@keyframes sb-aurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-3%, 2%, 0) scale(1.05); }
    100% { transform: translate3d(2%, -2%, 0) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

/* ===== Animation primitives ===== */
@keyframes sb-bounce-in {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes sb-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
@keyframes sb-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
@keyframes sb-soft-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--sb-color-primary-rgb), 0); }
    50%      { box-shadow: 0 0 24px 4px rgba(var(--sb-color-primary-rgb), 0.35); }
}
@keyframes sb-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-3deg); }
    75%      { transform: rotate(3deg); }
}
@keyframes sb-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes sb-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
@keyframes sb-fade-up {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes sb-aura-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.7; }
    50%      { transform: scale(1.15); opacity: 1; }
}

.sb-bounce-in { animation: sb-bounce-in var(--sb-motion-slow) var(--sb-ease-bounce) both; }
.sb-pop       { animation: sb-pop var(--sb-motion-base) var(--sb-ease-bounce); }
.sb-float     { animation: sb-float 3.4s var(--sb-ease-soft) infinite; }
.sb-soft-glow { animation: sb-soft-glow 2.4s var(--sb-ease-soft) infinite; }
.sb-wiggle    { animation: sb-wiggle 0.6s var(--sb-ease-soft); }
.sb-fade-up   { animation: sb-fade-up 360ms var(--sb-ease-soft) both; }

@media (prefers-reduced-motion: reduce) {
    .sb-float, .sb-soft-glow, .sb-wiggle, .sb-fade-up {
        animation: none;
    }
}

/* ===== Bouncy button (.sb-btn layered on MudButton) ===== */
.mud-button-root.sb-btn {
    border-radius: var(--sb-radius-pill);
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    padding: 0.5rem 1.25rem;
    transition:
        transform var(--sb-motion-fast) var(--sb-ease-bounce),
        box-shadow var(--sb-motion-base) var(--sb-ease-soft),
        filter var(--sb-motion-fast) ease,
        background-color var(--sb-motion-base) ease;
}
.mud-button-root.sb-btn:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: var(--sb-shadow-glow);
    filter: brightness(1.04);
}
.mud-button-root.sb-btn:active {
    transform: scale(0.96);
    transition-duration: 80ms;
}
.mud-button-root.sb-btn:focus-visible {
    outline: 3px solid rgba(var(--sb-color-primary-rgb), 0.55);
    outline-offset: 2px;
}

/* ===== Soft, translucent AppBar (.sb-appbar layered on MudAppBar) ===== */
.mud-appbar.sb-appbar {
    background: rgba(255, 246, 240, 0.65) !important;
    color: var(--sb-text-primary) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
                0 6px 22px -10px rgba(var(--sb-color-primary-rgb), 0.25) !important;
    border-bottom: 1px solid rgba(var(--sb-color-primary-rgb), 0.18);
    border-radius: 0 0 var(--sb-radius-xl) var(--sb-radius-xl);
}

:root[data-theme="dark"] .mud-appbar.sb-appbar {
    background: rgba(38, 33, 46, 0.6) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 6px 22px -10px rgba(0, 0, 0, 0.55) !important;
    border-bottom-color: rgba(var(--sb-color-primary-rgb), 0.22);
}

.mud-appbar.sb-appbar a:first-of-type .mud-icon-root:first-of-type,
.mud-appbar.sb-appbar .sb-appbar-logo {
    animation: sb-float 4s var(--sb-ease-soft) infinite;
}

.sb-appbar-logo {
    width: 32px;
    height: 32px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(var(--sb-color-primary-rgb), 0.25));
}

@media (prefers-reduced-motion: reduce) {
    .mud-appbar.sb-appbar a:first-of-type .mud-icon-root:first-of-type,
    .mud-appbar.sb-appbar .sb-appbar-logo { animation: none; }
}
.mud-appbar.sb-appbar .mud-icon-root,
.mud-appbar.sb-appbar .mud-typography {
    color: var(--sb-text-primary);
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.partner-flag {
    font-size: 1.2rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
}

/* ===== Language switcher (round flag) ===== */
.lang-flag-circle {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

.lang-flag-circle-lg {
    width: 1.75rem;
    height: 1.75rem;
}

/* ===== AppBar layout polish ===== */
.mud-appbar.sb-appbar .sb-appbar-brand {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--sb-radius-pill);
    transition: background-color var(--sb-motion-fast) ease;
}
.mud-appbar.sb-appbar .sb-appbar-brand:hover {
    background: rgba(var(--sb-color-primary-rgb), 0.10);
}
.sb-appbar-title {
    font-weight: 800;
    letter-spacing: -0.01em;
}
.sb-appbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ===== Avatar trigger (UserMenu) ===== */
.sb-avatar-btn {
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    margin: 0 4px;
    transition: transform var(--sb-motion-fast) ease,
                box-shadow var(--sb-motion-fast) ease;
    -webkit-tap-highlight-color: transparent;
}
.sb-avatar-btn:hover { transform: translateY(-1px); }
.sb-avatar-btn:focus,
.sb-avatar-btn:focus-visible { outline: none; }
.sb-avatar-btn:focus-visible .sb-avatar {
    box-shadow: 0 0 0 3px rgba(var(--sb-color-primary-rgb), 0.45);
}

.sb-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(var(--sb-color-primary-rgb), 0.95),
        rgba(var(--sb-color-secondary-rgb), 0.95));
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
                0 4px 12px rgba(var(--sb-color-primary-rgb), 0.28);
    user-select: none;
}
.sb-avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
}

/* ===== Preferences menu trigger (gear) ===== */
.sb-prefs-trigger {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-text-primary);
    transition: background-color var(--sb-motion-fast) ease,
                transform var(--sb-motion-fast) ease;
    -webkit-tap-highlight-color: transparent;
}
.sb-prefs-trigger:hover {
    background: rgba(var(--sb-color-primary-rgb), 0.10);
    transform: translateY(-1px);
}
.sb-prefs-trigger:focus,
.sb-prefs-trigger:focus-visible { outline: none; }
.sb-prefs-trigger:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--sb-color-primary-rgb), 0.45);
}

/* ===== Shared preferences popover ===== */
.sb-prefs-popover {
    border-radius: var(--sb-radius-lg) !important;
    box-shadow: var(--sb-shadow-card) !important;
    overflow: hidden;
    min-width: 260px;
    padding: 0.25rem 0;
}

.sb-prefs-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem 0.5rem;
}
.sb-prefs-header-compact {
    padding: 0.6rem 0.9rem 0.4rem;
}
.sb-prefs-header-text {
    min-width: 0;
}
.sb-prefs-name {
    font-weight: 700;
    color: var(--sb-text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.sb-prefs-email {
    font-size: 0.78rem;
    color: var(--sb-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.sb-prefs-body {
    padding: 0.25rem 0.4rem 0.4rem;
}
.sb-prefs-section {
    padding: 0.35rem 0.5rem 0.45rem;
}
.sb-prefs-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sb-text-secondary);
    margin-bottom: 0.35rem;
}

/* Language pills */
.sb-lang-row {
    display: flex;
    gap: 0.4rem;
}
.sb-lang-pill {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: transparent;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius-pill);
    color: var(--sb-text-primary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--sb-motion-fast) ease,
                border-color var(--sb-motion-fast) ease,
                transform var(--sb-motion-fast) ease;
}
.sb-lang-pill:hover {
    background: rgba(var(--sb-color-primary-rgb), 0.08);
    transform: translateY(-1px);
}
.sb-lang-pill.active {
    background: rgba(var(--sb-color-primary-rgb), 0.14);
    border-color: rgba(var(--sb-color-primary-rgb), 0.55);
    color: var(--sb-text-primary);
}
.sb-lang-pill:focus,
.sb-lang-pill:focus-visible { outline: none; }
.sb-lang-pill:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--sb-color-primary-rgb), 0.35);
}

/* Toggle rows (sound, theme) */
.sb-prefs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.55rem 0.65rem;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: var(--sb-radius-md);
    color: var(--sb-text-primary);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color var(--sb-motion-fast) ease;
}
.sb-prefs-row:hover {
    background: rgba(var(--sb-color-secondary-rgb), 0.10);
}
.sb-prefs-row:focus,
.sb-prefs-row:focus-visible { outline: none; }
.sb-prefs-row-left {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

/* Mini toggle pill */
.sb-prefs-pill {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: var(--sb-radius-pill);
    background: var(--sb-line);
    transition: background-color var(--sb-motion-base) ease;
    flex-shrink: 0;
}
.sb-prefs-pill-dot {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform var(--sb-motion-base) var(--sb-ease-bounce);
}
.sb-prefs-pill.on {
    background: rgba(var(--sb-color-primary-rgb), 0.85);
}
.sb-prefs-pill.on .sb-prefs-pill-dot {
    transform: translateX(14px);
}

.partner-chip {
    font-weight: 500;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
}

/* Action button rows that stack to full-width column on phones */
.actions-row {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .actions-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        flex-basis: 100%;
    }
    .actions-row .mud-button { width: 100%; }

    /* Parents marked row-wrap-xs allow their children (incl. .actions-row) to wrap to a new line */
    .row-wrap-xs { flex-wrap: wrap; }
}

/* Table cells hidden on small screens (used in WordsTable for Tags + Status) */
@media (max-width: 600px) {
    .mud-table .hide-on-mobile { display: none !important; }
}

/* ===== Dashboard ===== */
.dashboard-hero {
    padding: 1rem 0 0.5rem 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.dashboard-hero-greeting {
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-hero .sweet-message {
    flex: 0 0 auto;
    margin: 0.25rem 0 0;
    align-self: flex-start;
}

.dashboard-hero-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
}
.dashboard-hero-switch.mud-button-root {
    text-transform: none;
    border-radius: var(--sb-radius-pill);
    padding: 0.2rem 0.7rem;
    font-size: 0.82rem;
    color: var(--sb-text-secondary);
}
.dashboard-hero-switch.mud-button-root:hover {
    background: rgba(var(--sb-color-secondary-rgb), 0.18);
    color: var(--sb-text-primary);
}

.dashboard-hero h1 {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 0.25rem 0;
    color: var(--sb-text-primary);
}

.dashboard-hero .hero-subtitle {
    color: var(--sb-text-secondary);
    margin: 0 0 1rem 0;
}

/* ===== Couple Hub (Phase 2, v2 amplified) ===== */
.couple-hub {
    position: relative;
    margin: 0.5rem 0 1.5rem;
    padding: 2rem 1.5rem 1.75rem;
    min-height: 220px;
    border-radius: var(--sb-radius-2xl);
    background:
        radial-gradient(circle at 22% 18%, rgba(var(--sb-color-peach-rgb), 0.55) 0%, transparent 55%),
        radial-gradient(circle at 78% 82%, rgba(var(--sb-color-lavender-soft-rgb), 0.55) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(var(--sb-color-blush-rgb), 0.35) 0%, transparent 65%),
        linear-gradient(135deg, rgba(var(--sb-color-primary-rgb), 0.12) 0%, rgba(var(--sb-color-secondary-rgb), 0.12) 100%);
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
    overflow: hidden;
    animation: sb-bounce-in var(--sb-motion-slow) var(--sb-ease-bounce) both;
    transition:
        transform var(--sb-motion-base) var(--sb-ease-bounce),
        box-shadow var(--sb-motion-base) var(--sb-ease-soft);
}

.couple-hub:hover {
    transform: translateY(-3px) scale(1.005);
    box-shadow: var(--sb-shadow-card-hover), var(--sb-shadow-glass);
}

/* Soft glowing aura behind the heart */
.couple-heart-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 220px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(var(--sb-color-primary-rgb), 0.55) 0%,
            rgba(var(--sb-color-secondary-rgb), 0.30) 35%,
            transparent 70%);
    filter: blur(28px);
    z-index: 0;
    animation: sb-aura-pulse 4s var(--sb-ease-soft) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .couple-heart-aura { animation: none; }
    .couple-hub:hover  { transform: none; }
}

.couple-hub-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}

.couple-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sb-surface);
    color: var(--sb-text-primary);
    font-weight: 800;
    font-size: 1.6rem;
    box-shadow: 0 10px 30px -8px rgba(var(--sb-color-primary-rgb), 0.45);
    border: 3px solid var(--sb-surface);
    position: relative;
    transition: transform var(--sb-motion-base) var(--sb-ease-bounce);
}

.couple-avatar-left  { animation: sb-float 6s var(--sb-ease-soft) infinite;       animation-delay: 0s; }
.couple-avatar-right { animation: sb-float 6s var(--sb-ease-soft) infinite reverse; animation-delay: -3s; }

.couple-hub:hover .couple-avatar-left  { transform: scale(1.06) rotate(-2deg); }
.couple-hub:hover .couple-avatar-right { transform: scale(1.06) rotate(2deg); }

@media (prefers-reduced-motion: reduce) {
    .couple-avatar-left,
    .couple-avatar-right { animation: none; }
    .couple-hub:hover .couple-avatar-left,
    .couple-hub:hover .couple-avatar-right { transform: none; }
}

.couple-avatar .couple-flag {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--sb-surface);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.couple-heart {
    font-size: 2.4rem;
    line-height: 1;
    filter: drop-shadow(0 6px 16px rgba(var(--sb-color-primary-rgb), 0.65));
    animation: couple-heartbeat 1.6s var(--sb-ease-soft) infinite;
    position: relative;
    z-index: 2;
}

@keyframes couple-heartbeat {
    0%, 100% { transform: scale(1); }
    20%      { transform: scale(1.18); }
    40%      { transform: scale(0.96); }
    60%      { transform: scale(1.10); }
}

@media (prefers-reduced-motion: reduce) {
    .couple-heart { animation: none; }
    .couple-hub   { animation: none; }
}

.couple-meta {
    text-align: center;
    margin-top: 0.85rem;
    color: var(--sb-text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
}

.couple-meta .couple-days {
    color: var(--sb-color-primary);
    font-weight: 800;
}

.couple-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.75rem auto 0;
    padding: 0.4rem 0.95rem;
    border: 1px solid rgba(var(--sb-color-primary-rgb), 0.32);
    border-radius: var(--sb-radius-pill);
    background: var(--sb-surface);
    color: var(--sb-text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform var(--sb-motion-fast) var(--sb-ease-bounce),
        box-shadow var(--sb-motion-base) var(--sb-ease-soft),
        border-color var(--sb-motion-base) ease;
    position: relative;
    z-index: 1;
}

.couple-hub {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.couple-switch:hover {
    transform: translateY(-1px) scale(1.03);
    border-color: var(--sb-color-primary);
    box-shadow: var(--sb-shadow-glow);
}

.couple-switch:active {
    transform: scale(0.96);
}

.couple-switch .mud-icon-root {
    color: var(--sb-color-primary);
}

.couple-deco {
    position: absolute;
    font-size: 1rem;
    opacity: 0.75;
    pointer-events: none;
    animation: sb-float 4s var(--sb-ease-soft) infinite;
    z-index: 1;
    transition: opacity var(--sb-motion-base) ease;
}
.couple-deco-1 { top: 14px;   left: 16px;   font-size: 1.1rem; animation-duration: 4s;   animation-delay: 0s; }
.couple-deco-2 { top: 22px;   right: 22px;  font-size: 1.4rem; animation-duration: 4.6s; animation-delay: 0.8s; }
.couple-deco-3 { bottom: 18px; left: 28px;  font-size: 1rem;   animation-duration: 5.2s; animation-delay: 1.6s; }
.couple-deco-4 { bottom: 14px; right: 18px; font-size: 0.85rem; animation-duration: 4.2s; animation-delay: 2.4s; }
.couple-deco-5 { top: 38%;    left: 8px;    font-size: 0.95rem; animation-duration: 5.8s; animation-delay: 1.1s; }
.couple-deco-6 { top: 32%;    right: 10px;  font-size: 1.2rem; animation-duration: 5s;   animation-delay: 2.0s; }
.couple-deco-7 { bottom: 38%; left: 14%;    font-size: 0.85rem; animation-duration: 6.4s; animation-delay: 0.4s; }
.couple-deco-8 { top: 15%;    left: 50%;    font-size: 0.8rem; animation-duration: 5.4s; animation-delay: 2.8s; }

.couple-hub:hover .couple-deco {
    animation-duration: 2.6s;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .couple-deco { animation: none; }
}

/* ===== Sweet message banner (Phase 3) ===== */
.sweet-message {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.45rem 0.95rem;
    border-radius: var(--sb-radius-pill);
    background:
        linear-gradient(135deg, rgba(var(--sb-color-primary-rgb), 0.14) 0%, rgba(var(--sb-color-secondary-rgb), 0.14) 100%);
    border: 1px solid rgba(var(--sb-color-primary-rgb), 0.20);
    color: var(--sb-text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    animation: sb-bounce-in var(--sb-motion-slow) var(--sb-ease-bounce) both;
    animation-delay: 100ms;
}

.sweet-message-emoji {
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex;
    animation: sb-float 3.4s var(--sb-ease-soft) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .sweet-message,
    .sweet-message-emoji { animation: none; }
}

/* ===== Daily goal celebration (Phase 3) ===== */
.progress-card.is-goal-reached {
    background:
        linear-gradient(135deg, rgba(var(--sb-color-tertiary-rgb), 0.18) 0%, rgba(var(--sb-color-primary-rgb), 0.14) 100%);
    border-color: rgba(var(--sb-color-tertiary-rgb), 0.42);
    box-shadow: 0 0 0 3px rgba(var(--sb-color-tertiary-rgb), 0.18), var(--sb-shadow-soft);
}

.progress-card-celebrate {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--sb-radius-pill);
    background: var(--sb-color-tertiary);
    color: #15201D;
    font-size: 0.85rem;
    font-weight: 800;
    animation: sb-pop var(--sb-motion-base) var(--sb-ease-bounce);
}

/* Streak glow when streak >= 3 */
.stat-tile.is-on-fire {
    border-color: rgba(var(--sb-color-primary-rgb), 0.45);
    animation: streak-fire-glow 2.2s var(--sb-ease-soft) infinite;
}

@keyframes streak-fire-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--sb-color-primary-rgb), 0.0); }
    50%      { box-shadow: 0 0 22px 2px rgba(var(--sb-color-primary-rgb), 0.32); }
}

.stat-tile.is-on-fire .icon-circle {
    animation: sb-wiggle 1.4s var(--sb-ease-soft) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .stat-tile.is-on-fire,
    .stat-tile.is-on-fire .icon-circle { animation: none; }
}

/* Glass card base (.sb-card) — reusable across surfaces */
.sb-card {
    background: var(--sb-glass-bg);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius-xl);
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
    transition:
        transform var(--sb-motion-base) var(--sb-ease-bounce),
        box-shadow var(--sb-motion-base) var(--sb-ease-soft);
}

.sb-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sb-shadow-card-hover), var(--sb-shadow-glass);
}

@media (prefers-reduced-motion: reduce) {
    .sb-card:hover { transform: none; }
}

/* Generic hover lift */
.sb-hoverable {
    transition: transform var(--sb-motion-base) var(--sb-ease-bounce);
}
.sb-hoverable:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
    .sb-hoverable:hover { transform: none; }
}

/* Action cards (Lernen / Wort hinzufügen) */
.action-card {
    border-radius: var(--sb-radius-xl);
    padding: 1.5rem;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
    transition:
        transform var(--sb-motion-base) var(--sb-ease-bounce),
        box-shadow var(--sb-motion-base) var(--sb-ease-soft);
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    animation: sb-bounce-in var(--sb-motion-slow) var(--sb-ease-bounce) both;
}

/* Staggered entry */
.mud-grid > .mud-grid-item:nth-child(1) .action-card { animation-delay: 60ms; }
.mud-grid > .mud-grid-item:nth-child(2) .action-card { animation-delay: 140ms; }
.mud-grid > .mud-grid-item:nth-child(3) .action-card { animation-delay: 220ms; }

.action-card:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: var(--sb-shadow-card-hover), var(--sb-shadow-glass);
}

.action-card:hover .icon-circle-lg {
    transform: scale(1.08) rotate(-3deg);
}

.action-card:active {
    transform: scale(0.98);
}

.action-card-study {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.4)),
        rgba(var(--sb-color-primary-rgb), 0.18);
    border: 1px solid rgba(var(--sb-color-primary-rgb), 0.28);
}

.action-card-add {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.4)),
        rgba(var(--sb-color-secondary-rgb), 0.18);
    border: 1px solid rgba(var(--sb-color-secondary-rgb), 0.28);
}

.action-card-words {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.4)),
        rgba(var(--sb-color-tertiary-rgb), 0.18);
    border: 1px solid rgba(var(--sb-color-tertiary-rgb), 0.28);
}

.action-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.action-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sb-text-primary);
    line-height: 1.2;
}

.action-card-subtitle {
    font-size: 0.85rem;
    color: var(--sb-text-secondary);
}

/* Icon circles */
.icon-circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-circle-lg {
    width: 64px;
    height: 64px;
    transition: transform var(--sb-motion-base) var(--sb-ease-bounce);
    box-shadow: 0 8px 20px -8px rgba(var(--sb-color-primary-rgb), 0.35);
}

.icon-circle-lg .mud-icon-root {
    font-size: 1.85rem !important;
}

.icon-circle-sm {
    width: 40px;
    height: 40px;
    transition: transform var(--sb-motion-base) var(--sb-ease-bounce);
}

.icon-circle-primary {
    background: linear-gradient(135deg, var(--sb-color-primary) 0%, #F4A496 100%);
    color: #fff;
}

.icon-circle-secondary {
    background: linear-gradient(135deg, var(--sb-color-secondary) 0%, #C8B8F0 100%);
    color: #fff;
}

.icon-circle-tertiary {
    background: linear-gradient(135deg, var(--sb-color-tertiary) 0%, #8FDDBF 100%);
    color: #fff;
}

/* Stat tiles (glass surface, v2) */
.stat-tile {
    padding: 1rem;
    border-radius: var(--sb-radius-xl);
    border: 1px solid var(--sb-glass-border);
    background: var(--sb-glass-bg);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    transition:
        transform var(--sb-motion-base) var(--sb-ease-bounce),
        box-shadow var(--sb-motion-base) var(--sb-ease-soft);
}

.stat-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--sb-shadow-card-hover), var(--sb-shadow-glass);
}

.stat-tile:hover .icon-circle {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .stat-tile:hover { transform: none; }
    .stat-tile:hover .icon-circle { transform: none; }
}

.stat-tile-streak   { --st: var(--sb-color-primary);   --st-bg: rgba(var(--sb-color-primary-rgb), 0.18); --st-grad-1: var(--sb-color-primary);   --st-grad-2: #F4A496; }
.stat-tile-learned  { --st: var(--sb-color-warning);   --st-bg: rgba(245, 194, 107, 0.22);                --st-grad-1: var(--sb-color-warning);   --st-grad-2: #F8CF82; }
.stat-tile-due      { --st: var(--sb-color-secondary); --st-bg: rgba(var(--sb-color-secondary-rgb), 0.18); --st-grad-1: var(--sb-color-secondary); --st-grad-2: #C8B8F0; }
.stat-tile-progress { --st: var(--sb-color-tertiary);  --st-bg: rgba(var(--sb-color-tertiary-rgb), 0.18);  --st-grad-1: var(--sb-color-tertiary);  --st-grad-2: #8FDDBF; }

.stat-tile .icon-circle {
    background: linear-gradient(135deg, var(--st-grad-1) 0%, var(--st-grad-2) 100%);
    color: #fff;
    box-shadow: 0 6px 16px -6px var(--st);
}

.stat-tile-body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.stat-tile-label {
    font-size: 0.72rem;
    color: var(--sb-text-secondary);
    margin-bottom: 0.1rem;
    line-height: 1.1;
}

.stat-tile-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--sb-text-primary);
    line-height: 1.1;
}

.stat-tile-sub {
    font-size: 0.7rem;
    color: var(--sb-text-muted);
    margin-top: 0.1rem;
}

/* Progress card (glass surface, v2) */
.progress-card {
    border-radius: var(--sb-radius-xl);
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--sb-glass-border);
    background: var(--sb-glass-bg);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
    transition:
        transform var(--sb-motion-base) var(--sb-ease-bounce),
        box-shadow var(--sb-motion-base) var(--sb-ease-soft);
}

.progress-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sb-shadow-card-hover), var(--sb-shadow-glass);
}

@media (prefers-reduced-motion: reduce) {
    .progress-card:hover { transform: none; }
}

.progress-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.progress-card-title {
    font-weight: 700;
    color: var(--sb-text-primary);
}

.progress-card-counter {
    font-weight: 700;
    color: var(--sb-color-primary);
    white-space: nowrap;
}

.progress-card-sub {
    font-size: 0.85rem;
    color: var(--sb-text-secondary);
    margin-top: 0.6rem;
}

.progress-card-connection {
    font-size: 0.78rem;
    color: var(--sb-text-secondary);
    margin-top: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Animated gradient progress bars (v2) */
.sb-progress {
    margin-top: 0.3rem;
    margin-bottom: 0.2rem;
    position: relative;
}

.sb-progress .mud-progress-linear {
    height: 14px !important;
    border-radius: 999px !important;
    background: rgba(var(--sb-color-primary-rgb), 0.12) !important;
    overflow: hidden;
}

.sb-progress .mud-progress-linear-bar {
    background: linear-gradient(90deg,
        var(--sb-color-primary) 0%,
        var(--sb-color-secondary) 50%,
        var(--sb-color-tertiary) 100%) !important;
    background-size: 200% 100% !important;
    animation: sb-gradient-shift 4s linear infinite;
    border-radius: 999px !important;
    box-shadow: 0 0 18px -2px rgba(var(--sb-color-primary-rgb), 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
    position: relative;
    overflow: hidden;
}

.sb-progress .mud-progress-linear-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
    animation: sb-shimmer 2.4s linear infinite;
    pointer-events: none;
}

.sb-progress-success .mud-progress-linear {
    background: rgba(var(--sb-color-tertiary-rgb), 0.14) !important;
}

.sb-progress-success .mud-progress-linear-bar {
    background: linear-gradient(90deg,
        var(--sb-color-tertiary) 0%,
        #8FDDBF 50%,
        var(--sb-color-secondary) 100%) !important;
    box-shadow: 0 0 18px -2px rgba(var(--sb-color-tertiary-rgb), 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .sb-progress .mud-progress-linear-bar,
    .sb-progress .mud-progress-linear-bar::after { animation: none; }
}

/* Study filter chips inside the slide-in panel */
.study-filter-panel .mud-chip.mud-chip-filled.mud-theme-primary {
    background: linear-gradient(135deg, var(--sb-color-primary) 0%, #F4A496 100%) !important;
    color: #fff !important;
}

.study-filter-panel .mud-chip.mud-chip-filled.mud-theme-secondary {
    background: linear-gradient(135deg, var(--sb-color-secondary) 0%, #C8B8F0 100%) !important;
    color: #fff !important;
}

.study-filter-panel .mud-chip {
    border-radius: var(--sb-radius-pill);
    font-weight: 700;
}

/* ===== MyWords + WordNew (Phase 7) ===== */
.words-search {
    padding: 0.5rem 0.6rem;
}

/* Hero partner indicator (MyWords) */
.words-partner-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem 0.3rem 0.5rem;
    border-radius: var(--sb-radius-pill);
    background: var(--sb-glass-bg);
    border: 1px solid var(--sb-glass-border);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: var(--sb-shadow-soft);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--sb-text-primary);
    margin-top: 0.25rem;
}
.words-partner-flag {
    width: 20px;
    height: 15px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.words-partner-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(var(--sb-color-primary-rgb), 0.14);
    color: var(--sb-color-primary);
    transition: background var(--sb-motion-base) var(--sb-ease-soft),
                transform var(--sb-motion-base) var(--sb-ease-bounce);
    padding: 0;
}
.words-partner-switch:hover {
    background: rgba(var(--sb-color-primary-rgb), 0.24);
    transform: rotate(180deg);
}
.words-partner-switch .mud-icon-root {
    font-size: 1rem !important;
}

.words-search .mud-input-control { margin: 0; }
.words-search .mud-input-outlined .mud-input-outlined-border {
    border: none !important;
}
.words-search .mud-input-outlined.mud-input {
    background: transparent;
}

.words-search-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.words-search-row > .mud-input-control:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
}
.words-category-filter {
    flex: 0 1 280px;
    min-width: 200px;
}
@media (max-width: 640px) {
    .words-search-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .words-category-filter {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }
}

.words-tabs .mud-tabs-toolbar {
    background: transparent;
    border-radius: var(--sb-radius-pill);
    padding: 0.25rem;
}

.words-tabs .mud-tabs-tabbar-wrapper {
    background: var(--sb-glass-bg);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius-pill);
    padding: 0.3rem;
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
}

.words-tabs .mud-tab {
    border-radius: var(--sb-radius-pill);
    font-weight: 700;
    text-transform: none;
    min-width: auto;
    padding: 0.4rem 1.1rem;
    transition: background var(--sb-motion-base) var(--sb-ease-soft),
                color var(--sb-motion-base) var(--sb-ease-soft);
}

.words-tabs .mud-tab.mud-tab-active {
    background: linear-gradient(135deg, var(--sb-color-primary) 0%, #F4A496 100%);
    color: #fff !important;
    box-shadow: 0 6px 18px -6px rgba(var(--sb-color-primary-rgb), 0.5);
}

.words-tabs .mud-tabs-tabbar-slider,
.words-tabs .mud-tab-slider,
.words-tabs .mud-tabs-tabbar-inner::after,
.words-tabs .mud-tabs-tabbar-inner::before,
.words-tabs .mud-tabs-tabbar-content::after,
.words-tabs .mud-tabs-tabbar::after { display: none !important; }
.words-tabs .mud-tabs-tabbar { border-bottom: none !important; }
.words-tabs .mud-tabs-tabbar-inner { border-bottom: none !important; }

.words-tabs .mud-tabs-panels {
    margin-top: 1rem;
    background: transparent;
}

.words-table-card {
    padding: 0.5rem;
    overflow: hidden;
}

.words-table-card .mud-table-container {
    background: transparent;
}

.words-table-card .mud-table {
    background: transparent !important;
    box-shadow: none !important;
}

.words-table-card .mud-table-head .mud-table-cell {
    background: transparent !important;
    font-weight: 700;
    color: var(--sb-text-secondary);
    border-bottom: 1px solid rgba(var(--sb-color-primary-rgb), 0.15);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.words-table-card .mud-table-row {
    transition: background var(--sb-motion-base) var(--sb-ease-soft);
}

.words-table-card .mud-table-body .mud-table-row:hover {
    background: rgba(var(--sb-color-primary-rgb), 0.08) !important;
}

.words-table-card .mud-table-body .mud-table-row.mud-table-row-stripped {
    background: rgba(var(--sb-color-primary-rgb), 0.04) !important;
}

.words-table-card .mud-table-cell {
    border-bottom: 1px solid rgba(var(--sb-color-primary-rgb), 0.08);
}

.words-table-card .mud-chip {
    border-radius: var(--sb-radius-pill);
    font-weight: 700;
    font-size: 0.72rem;
}

.words-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 3rem 1.5rem;
    color: var(--sb-text-secondary);
    text-align: center;
    font-weight: 600;
}

/* ===== Word list (card rows, replaces MudTable in WordsTable) ===== */
.word-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.word-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--sb-glass-bg);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
    cursor: pointer;
    transition:
        transform var(--sb-motion-base) var(--sb-ease-bounce),
        box-shadow var(--sb-motion-base) var(--sb-ease-soft),
        background var(--sb-motion-base) var(--sb-ease-soft);
    animation: sb-fade-up 320ms var(--sb-ease-soft) both;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}

.word-row:hover {
    transform: translateY(-2px);
    box-shadow: var(--sb-shadow-card-hover), var(--sb-shadow-glass);
}

.word-row:focus-visible {
    outline: 2px solid var(--sb-color-primary);
    outline-offset: 2px;
}

.word-row:active {
    transform: scale(0.995);
}

@media (prefers-reduced-motion: reduce) {
    .word-row { animation: none; }
    .word-row:hover { transform: none; }
    .word-row:active { transform: none; }
}

/* Term + arrow + translation block — fixed 60% of row so translation never shifts */
.word-row-pair {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 calc(60% - 0.5rem);
    min-width: 0;
}

.word-row-side {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}

.word-row-flag {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
    flex-shrink: 0;
}

.word-row-text {
    color: var(--sb-text-primary);
    font-size: 1rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.word-row-text-term {
    font-weight: 800;
}

.word-row-arrow {
    color: var(--sb-color-primary);
    opacity: 0.7;
    flex-shrink: 0;
    font-size: 1.2rem !important;
}

.word-row-alts {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--sb-color-secondary);
    background: rgba(var(--sb-color-secondary-rgb), 0.16);
    border-radius: var(--sb-radius-pill);
    flex-shrink: 0;
    cursor: help;
}

/* Meta cluster (tags, mastery, status) — fills remaining 40% so pair stays fixed */
.word-row-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 1 0;
    min-width: 0;
}

.word-row-partner {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--sb-text-secondary);
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.word-row-partner .fi {
    width: 18px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.word-row-tags {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    max-width: 220px;
}

.word-row-tags .mud-chip {
    border-radius: var(--sb-radius-pill) !important;
    font-size: 0.7rem !important;
    height: 22px !important;
    font-weight: 700 !important;
}

.word-row-mastery {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 110px;
}

.word-row-mastery-bar {
    width: 70px;
}

.word-row-mastery-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--sb-text-secondary);
    min-width: 32px;
    text-align: right;
}

.word-row-status .mud-chip {
    border-radius: var(--sb-radius-pill) !important;
    font-size: 0.7rem !important;
    height: 24px !important;
    font-weight: 700 !important;
}

.word-row-action {
    color: var(--sb-text-secondary);
    flex-shrink: 0;
    transition: transform var(--sb-motion-base) var(--sb-ease-bounce),
                color var(--sb-motion-base) var(--sb-ease-soft);
}

.word-row:hover .word-row-action {
    color: var(--sb-color-primary);
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .word-row:hover .word-row-action { transform: none; }
}

/* Mobile: pair full-width on top, meta wraps below */
@media (max-width: 720px) {
    .word-row {
        flex-wrap: wrap;
        padding: 0.85rem 0.85rem;
        gap: 0.55rem;
        position: relative;
        padding-right: 2.5rem;
    }
    .word-row-pair {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .word-row-side {
        flex: 1 1 100%;
    }
    .word-row-arrow {
        display: none;
    }
    .word-row-meta {
        flex: 1 1 100%;
        justify-content: flex-start;
        gap: 0.5rem;
    }
    .word-row-tags { max-width: none; }
    .word-row-action {
        position: absolute;
        right: 0.85rem;
        top: 0.85rem;
    }
    .word-row-mastery { min-width: 0; }
    .word-row-mastery-bar { width: 60px; }
}

.words-empty-emoji {
    font-size: 2.4rem;
    animation: sb-float 3.4s var(--sb-ease-soft) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .words-empty-emoji { animation: none; }
}

/* WordNew glass form */
.word-form {
    padding: 1.75rem !important;
    background: var(--sb-glass-bg) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--sb-glass-border) !important;
    border-radius: var(--sb-radius-xl) !important;
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass) !important;
    animation: sb-bounce-in var(--sb-motion-slow) var(--sb-ease-bounce) both;
}

/* Word create hero (header + language pair badge) */
.word-create-hero {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.word-create-hero-text { flex: 1; min-width: 0; }
.word-create-hero h1 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 0.4rem 0;
    color: var(--sb-text-primary);
}
.word-create-langs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.word-create-langs-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--sb-radius-pill);
    background: var(--sb-glass-bg);
    border: 1px solid var(--sb-glass-border);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sb-text-primary);
    letter-spacing: 0.04em;
}
.word-create-langs-chip .fi {
    width: 18px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.word-create-langs-hint {
    font-size: 0.8rem;
    color: var(--sb-text-secondary);
    margin-left: 0.25rem;
}

/* Manual / AI mode toggle on the WordNew page */
.word-mode-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 auto 1.25rem;
    padding: 0.3rem;
    background: var(--sb-glass-bg);
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius-pill);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    width: fit-content;
}
.word-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1.1rem;
    border: none;
    background: transparent;
    border-radius: var(--sb-radius-pill);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--sb-text-secondary);
    cursor: pointer;
    transition: color 180ms var(--sb-ease-soft), background 220ms var(--sb-ease-soft), transform 180ms var(--sb-ease-soft), box-shadow 220ms var(--sb-ease-soft);
}
.word-mode-pill:hover:not(:disabled):not(.active) {
    color: var(--sb-text-primary);
    background: rgba(var(--sb-color-primary-rgb), 0.07);
}
.word-mode-pill:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.word-mode-pill .mud-icon-root {
    font-size: 1.05rem !important;
}
.word-mode-pill.active {
    background: var(--sb-color-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--sb-color-primary-rgb), 0.35);
    transform: translateY(-1px);
}
.word-mode-pill-ai.active {
    background: linear-gradient(135deg, var(--sb-color-secondary), var(--sb-color-primary));
    box-shadow: 0 6px 18px rgba(var(--sb-color-secondary-rgb), 0.4);
}
.word-mode-pill-ai .mud-icon-root {
    transition: transform 320ms var(--sb-ease-soft);
}
.word-mode-pill-ai.active .mud-icon-root {
    animation: sb-sparkle 2.2s var(--sb-ease-soft) infinite;
}
@keyframes sb-sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.18) rotate(15deg); }
}
@media (prefers-reduced-motion: reduce) {
    .word-mode-pill-ai.active .mud-icon-root { animation: none; }
    .word-mode-pill.active { transform: none; }
}

/* AI mode input card hint row */
.word-form-ai .word-ai-hint {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    color: var(--sb-text-secondary);
    padding: 0.6rem 0.85rem;
    background: rgba(var(--sb-color-secondary-rgb), 0.08);
    border: 1px dashed rgba(var(--sb-color-secondary-rgb), 0.3);
    border-radius: var(--sb-radius-md);
}
.word-form-ai .word-ai-hint .mud-icon-root {
    color: var(--sb-color-secondary);
}

/* Read-only example translation under the example sentence */
.word-display-example-translation {
    color: var(--sb-text-secondary);
    font-style: italic;
    margin-top: 0.25rem;
}
.word-display-example-translation .mud-icon-root {
    color: var(--sb-color-secondary);
}

/* Term / Translation paired sides inside .word-form */
.word-form-side {
    margin-bottom: 0.25rem;
}
.word-form-langhead {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}
.word-form-langhead .fi {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.word-form-langhead-code {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--sb-text-primary);
}
.word-form-langhead-role {
    font-size: 0.78rem;
    color: var(--sb-text-secondary);
    font-style: italic;
}

.word-form-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.5rem 0 0.85rem 0;
    color: var(--sb-color-primary);
    opacity: 0.65;
}
.word-form-arrow .mud-icon-root {
    font-size: 1.5rem !important;
    animation: sb-float 3.4s var(--sb-ease-soft) infinite;
}
@media (prefers-reduced-motion: reduce) {
    .word-form-arrow .mud-icon-root { animation: none; }
}

/* Inline alternates (always visible, lightweight) */
.word-form-inline-alternates {
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(var(--sb-color-secondary-rgb), 0.08);
    border: 1px dashed rgba(var(--sb-color-secondary-rgb), 0.3);
    border-radius: var(--sb-radius-md);
}
:root[data-theme="dark"] .word-form-inline-alternates {
    background: rgba(var(--sb-color-secondary-rgb), 0.12);
    border-color: rgba(var(--sb-color-secondary-rgb), 0.35);
}
.word-form-inline-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--sb-text-secondary);
    margin-bottom: 0.45rem;
}
.word-form-inline-label .mud-icon-root {
    font-size: 1rem !important;
    color: var(--sb-color-secondary);
}

/* Optional details secondary card */
.word-form-extras {
    margin-top: 1rem;
    animation-delay: 80ms;
}
.word-form-extras-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sb-text-secondary);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.word-form-extras-header .mud-icon-root {
    font-size: 1.1rem !important;
    color: var(--sb-color-tertiary);
}

/* Read-only WordDetail display ("card view" for the learner) */
.word-display .word-form-side {
    margin-bottom: 0.5rem;
}
.word-display-value {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.word-display-text {
    font-size: 2rem;
    font-weight: 800;
    color: var(--sb-text-primary);
    line-height: 1.15;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}
@media (max-width: 600px) {
    .word-display-text { font-size: 1.6rem; }
}
.word-display-alternates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.65rem;
}
.word-display-alternates > .mud-icon-root {
    font-size: 1rem !important;
    color: var(--sb-color-secondary);
}
.word-display-example {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-style: italic;
    color: var(--sb-text-primary);
    background: rgba(var(--sb-color-tertiary-rgb), 0.10);
    border-left: 3px solid var(--sb-color-tertiary);
    padding: 0.7rem 0.9rem;
    border-radius: var(--sb-radius-md);
    margin-bottom: 0.75rem;
}
:root[data-theme="dark"] .word-display-example {
    background: rgba(var(--sb-color-tertiary-rgb), 0.16);
}
.word-display-example > .mud-icon-root {
    font-size: 1.1rem !important;
    color: var(--sb-color-tertiary);
    flex-shrink: 0;
}
.word-display-notes {
    color: var(--sb-text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Mastery card (using same glass treatment) */
.word-mastery {
    margin-top: 1rem;
    animation-delay: 160ms;
}
.word-mastery-percent {
    font-weight: 800;
    background: linear-gradient(135deg, var(--sb-color-primary) 0%, var(--sb-color-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
}

.word-form .mud-input-outlined.mud-input {
    border-radius: var(--sb-radius-md);
    background: rgba(255, 255, 255, 0.55);
    transition: background var(--sb-motion-base) var(--sb-ease-soft);
}

.word-form .mud-input-outlined.mud-input:hover {
    background: rgba(255, 255, 255, 0.78);
}

.word-form .mud-input-outlined.mud-input.mud-input-focused {
    background: rgba(255, 255, 255, 0.92);
}

:root[data-theme="dark"] .word-form .mud-input-outlined.mud-input {
    background: rgba(0, 0, 0, 0.18);
}
:root[data-theme="dark"] .word-form .mud-input-outlined.mud-input:hover {
    background: rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .word-form .mud-input-outlined.mud-input.mud-input-focused {
    background: rgba(0, 0, 0, 0.45);
}

.word-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.word-form-save.mud-button-root {
    background: linear-gradient(135deg, var(--sb-color-primary) 0%, #F4A496 100%) !important;
    color: #fff !important;
    border: none;
    padding: 0.6rem 1.75rem;
    border-radius: var(--sb-radius-pill);
    font-weight: 800;
    box-shadow: 0 10px 24px -8px rgba(var(--sb-color-primary-rgb), 0.5);
}

.word-form-save.mud-button-root:hover {
    box-shadow: 0 14px 32px -8px rgba(var(--sb-color-primary-rgb), 0.65),
                var(--sb-shadow-glow);
}

/* ===== Celebration popup (Phase 6) ===== */
.celebration-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%,
        rgba(var(--sb-color-primary-rgb), 0.18) 0%,
        rgba(0, 0, 0, 0.18) 60%);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 240ms var(--sb-ease-soft);
    cursor: pointer;
}

.celebration-overlay.is-visible { opacity: 1; }

.celebration-card {
    min-width: 280px;
    max-width: 88vw;
    padding: 2rem 2.5rem;
    text-align: center;
    transform: scale(0.85);
    transition: transform 280ms var(--sb-ease-bounce);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 246, 240, 0.82));
}

.celebration-overlay.is-visible .celebration-card {
    transform: scale(1);
}

.celebration-emoji {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    animation: sb-pop 600ms var(--sb-ease-bounce);
}

.celebration-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--sb-text-primary);
    margin-bottom: 0.25rem;
}

.celebration-sub {
    font-size: 0.95rem;
    color: var(--sb-text-secondary);
    font-weight: 600;
}

:root[data-theme="dark"] .celebration-card {
    background: linear-gradient(135deg, rgba(46, 40, 55, 0.92), rgba(38, 33, 46, 0.85));
}

@media (prefers-reduced-motion: reduce) {
    .celebration-card { transform: none; transition: none; }
    .celebration-emoji { animation: none; }
}

/* ===== Achievement badges (Phase 5) ===== */
.achievements-section {
    margin-top: 1.5rem;
}

.achievements-title {
    font-weight: 700;
    color: var(--sb-text-primary);
    margin-bottom: 0.6rem;
    font-size: 1rem;
}

.achievements-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.25rem 0.25rem 0.75rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.achievements-row::-webkit-scrollbar { height: 6px; }
.achievements-row::-webkit-scrollbar-thumb {
    background: rgba(var(--sb-color-primary-rgb), 0.32);
    border-radius: 999px;
}

.badge-tile {
    flex: 0 0 96px;
    min-width: 96px;
    height: 112px;
    border-radius: var(--sb-radius-lg);
    background: var(--sb-glass-bg);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--sb-glass-border);
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.4rem;
    gap: 0.3rem;
    text-align: center;
    position: relative;
    scroll-snap-align: start;
    cursor: default;
    animation: sb-fade-up 360ms var(--sb-ease-soft) both;
    transition:
        transform var(--sb-motion-base) var(--sb-ease-bounce),
        box-shadow var(--sb-motion-base) var(--sb-ease-soft);
}

.badge-tile.is-unlocked .badge-emoji {
    animation: sb-float 4.5s var(--sb-ease-soft) infinite;
}

.badge-tile.is-unlocked:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: var(--sb-shadow-card-hover), var(--sb-shadow-glass),
                0 0 24px 4px rgba(var(--sb-color-primary-rgb), 0.32);
}

.badge-tile.is-locked {
    filter: grayscale(0.9) opacity(0.5);
}

.badge-tile.is-locked:hover {
    transform: translateY(-2px);
    filter: grayscale(0.6) opacity(0.65);
}

.badge-emoji {
    font-size: 1.8rem;
    line-height: 1;
}

.badge-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sb-text-primary);
    line-height: 1.15;
}

.badge-lock {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.75rem;
    opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
    .badge-tile,
    .badge-tile.is-unlocked .badge-emoji { animation: none; }
    .badge-tile:hover { transform: none; }
}

@media (max-width: 600px) {
    .badge-tile { flex: 0 0 84px; min-width: 84px; height: 100px; }
    .badge-emoji { font-size: 1.5rem; }
    .badge-label { font-size: 0.65rem; }
}

/* "How it works" 3-step section in welcome */
.howitworks-step {
    text-align: center;
    padding: 1rem 0.5rem;
}

.howitworks-step-icon {
    display: inline-flex;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    background: rgba(var(--sb-color-primary-rgb), 0.16);
    color: var(--sb-color-primary);
}

.howitworks-step-title {
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--sb-text-primary);
}

.howitworks-step-body {
    font-size: 0.9rem;
    color: var(--sb-text-secondary);
    line-height: 1.4;
}

@media (max-width: 600px) {
    .dashboard-hero h1 { font-size: 1.4rem; }
    .action-card { padding: 1rem; gap: 0.75rem; }
    .icon-circle-lg { width: 44px; height: 44px; }
    .stat-tile { padding: 0.75rem; gap: 0.5rem; }
    .stat-tile-value { font-size: 1.25rem; }
    .progress-card { padding: 1rem; }
}

/* ===== Study page ===== */
.study-page {
    min-height: calc(100vh - 64px);
    margin: -1.1rem -16px 0;
    padding: 2rem 16px 4rem;
    background: transparent;
}

.study-container {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

/* ===== Study filter (slide-in drawer from right) ===== */
.study-filter-scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(58, 46, 63, 0.32);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sb-motion-base) var(--sb-ease-soft);
}
.study-filter-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
}

:root[data-theme="dark"] .study-filter-scrim {
    background: rgba(0, 0, 0, 0.55);
}

.study-filter-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    z-index: 51;
    display: flex;
    flex-direction: column;
    background: var(--sb-surface-elev);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-left: 1px solid var(--sb-glass-border);
    box-shadow: -24px 0 60px -12px rgba(58, 46, 63, 0.28);
    transform: translateX(100%);
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.study-filter-panel.is-open {
    transform: translateX(0);
}

:root[data-theme="dark"] .study-filter-panel {
    box-shadow: -24px 0 60px -12px rgba(0, 0, 0, 0.55);
}

.study-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1.1rem 1.25rem 0.9rem;
    border-bottom: 1px solid var(--sb-line);
    background: linear-gradient(180deg, rgba(var(--sb-color-peach-rgb), 0.22) 0%, transparent 100%);
}

.study-filter-title {
    color: var(--sb-text-primary);
    font-weight: 700;
}

.study-filter-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.study-filter-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.study-filter-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sb-text-secondary);
}
.study-filter-section-title .mud-icon-root {
    color: var(--sb-color-primary);
}

.study-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.study-filter-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--sb-line);
    background: var(--sb-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.study-filter-footer .mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(135deg, var(--sb-color-primary) 0%, #F4A496 100%);
    color: #fff;
    box-shadow: var(--sb-shadow-soft);
}
.study-filter-footer .mud-button-filled.mud-button-filled-primary:hover {
    filter: brightness(1.04);
    box-shadow: var(--sb-shadow-elev);
}
.study-filter-footer .mud-button-filled.mud-button-filled-primary.mud-disabled {
    opacity: 0.55;
    filter: grayscale(0.2);
}

.study-filter-hint {
    font-size: 0.78rem;
    color: var(--sb-text-muted);
    padding: 0.5rem 0.75rem;
    background: var(--sb-glass-bg);
    border: 1px dashed var(--sb-line);
    border-radius: var(--sb-radius-md);
}
.study-filter-hint-warn {
    color: #8A5A0A;
    background: rgba(245, 194, 107, 0.18);
    border-color: rgba(245, 194, 107, 0.5);
    border-style: solid;
}
:root[data-theme="dark"] .study-filter-hint-warn {
    color: #F8CF82;
    background: rgba(245, 194, 107, 0.12);
}

@media (max-width: 600px) {
    .study-filter-panel { width: 100vw; }
    .study-filter-header { padding: 0.9rem 1rem 0.75rem; }
    .study-filter-body { padding: 1rem 1rem 1.25rem; gap: 1.25rem; }
    .study-filter-footer { padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
}

/* ===== Flip card ===== */
.flip-card {
    perspective: 1200px;
    width: 100%;
    min-height: 340px;
    cursor: pointer;
    user-select: none;
    animation: sb-bounce-in var(--sb-motion-slow) var(--sb-ease-bounce) both;
}

.flip-card.is-wiggling {
    animation: sb-wiggle 0.55s var(--sb-ease-soft);
}

.flip-card-inner {
    position: relative;
    width: 100%;
    min-height: 340px;
    transition: transform 0.65s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--sb-radius-xl);
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
    padding: 2rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-align: center;
    /* Solid surface base + glass overlay + corner radials. Solid base prevents
       body aurora bleed-through, which would otherwise differ between this 3D
       composite layer and .study-prompt-card (normal flow). See note on
       .study-prompt-card. */
    background-color: var(--sb-surface);
    background-image:
        radial-gradient(circle at 0% 0%, rgba(var(--sb-color-peach-rgb), 0.55) 0%, transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(var(--sb-color-mint-soft-rgb), 0.55) 0%, transparent 55%),
        var(--sb-glass-bg);
    transition: box-shadow var(--sb-motion-base) var(--sb-ease-soft);
    border: 1px solid var(--sb-glass-border);
}

.flip-card-back {
    /* Same surface as the front (and as .study-prompt-card) so all study-mode
       cards share one visual identity. Only the rotation differs. */
    transform: rotateY(180deg);
}

@media (hover: hover) {
    .flip-card:hover .flip-card-front,
    .flip-card:hover .flip-card-back {
        box-shadow: var(--sb-shadow-card-hover), var(--sb-shadow-glass),
                    0 0 32px -4px rgba(var(--sb-color-primary-rgb), 0.32);
    }
}

/* ===== Shared prompt card (used by MCQ, Type, Cloze) =====
   Geometry AND background kept in sync with .flip-card-front / .flip-card-back
   so all five study modes share the exact same card silhouette + surface.
   Solid background-color is intentional: without it, body aurora bleed-through
   differs between this card (normal flow) and the flip-card faces (which sit
   in a `transform-style: preserve-3d` composite layer). */
.study-prompt-card {
    position: relative;
    min-height: 340px;
    padding: 2rem 1.75rem 1.5rem;
    margin-bottom: 1.25rem;
    border-radius: var(--sb-radius-xl);
    border: 1px solid var(--sb-glass-border);
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
    background-color: var(--sb-surface);
    background-image:
        radial-gradient(circle at 0% 0%, rgba(var(--sb-color-peach-rgb), 0.55) 0%, transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(var(--sb-color-mint-soft-rgb), 0.55) 0%, transparent 55%),
        var(--sb-glass-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-align: center;
    animation: sb-bounce-in var(--sb-motion-slow) var(--sb-ease-bounce) both;
}

.study-prompt-lang {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--sb-text-secondary);
}

.study-prompt-term {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.75rem 0 0.85rem;
}
.study-prompt-term .term-text {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--sb-text-primary);
    word-break: break-word;
}
/* Raw HTML button used for TTS playback — onclick runs synchronously in
   the user gesture, bypassing the SignalR roundtrip (required for iOS
   Safari speechSynthesis). */
.sb-speak-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--sb-color-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 120ms ease, transform 120ms ease;
}
.sb-speak-btn:hover,
.sb-speak-btn:focus-visible {
    background: rgba(var(--sb-color-primary-rgb), 0.25);
    outline: none;
}
.sb-speak-btn:active {
    background: rgba(var(--sb-color-primary-rgb), 0.35);
}
.sb-speak-btn .material-icons {
    font-size: 24px;
    line-height: 1;
}
.sb-speak-btn--lg {
    width: 96px;
    height: 96px;
    background: rgba(var(--sb-color-primary-rgb), 0.18);
    border: 1px solid rgba(var(--sb-color-primary-rgb), 0.40);
    box-shadow: var(--sb-shadow-soft);
    transition: transform var(--sb-motion-base) var(--sb-ease-bounce),
                box-shadow var(--sb-motion-base) var(--sb-ease-soft),
                background-color var(--sb-motion-base) var(--sb-ease-soft);
}
.sb-speak-btn--lg .material-icons {
    font-size: 48px;
}
.sb-speak-btn--lg:hover,
.sb-speak-btn--lg:focus-visible {
    background: rgba(var(--sb-color-primary-rgb), 0.28);
    transform: scale(1.06);
    box-shadow: var(--sb-shadow-elev);
}

/* Standard inline speak button (Flashcard / Type / MCQ). */
.study-prompt-speak {
    background: rgba(var(--sb-color-primary-rgb), 0.15);
}
.study-prompt-speak:hover,
.study-prompt-speak:focus-visible {
    background: rgba(var(--sb-color-primary-rgb), 0.25);
}

.study-prompt-hint {
    font-size: 0.85rem;
    color: var(--sb-text-secondary);
}

/* Hint shown OUTSIDE/below the card (e.g. "flip to grade"). */
.study-prompt-hint-below {
    margin-top: 0.6rem;
    text-align: center;
}

/* Cloze: sentence with a blank, smaller than the bold term text. */
.study-prompt-sentence {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--sb-text-primary);
    margin: 0.5rem 0 0.85rem;
    word-break: break-word;
}

/* Translation shown on the back of a flip card. */
.study-prompt-translation {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sb-text-primary);
    margin: 0.25rem 0 0.5rem;
    word-break: break-word;
}

/* Optional example sentence (used on flip backs). */
.study-prompt-example {
    margin-top: 0.85rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--sb-radius-md);
    background: rgba(var(--sb-color-primary-rgb), 0.10);
    border: 1px solid rgba(var(--sb-color-primary-rgb), 0.30);
    color: var(--sb-text-primary);
    font-size: 0.95rem;
    line-height: 1.45;
    font-style: italic;
}

/* Listening mode wrapper. The oversized play button uses .sb-speak-btn--lg
   which provides the 96px circle, background and hover scale. */
.study-prompt-listen {
    margin: 0.5rem 0 0.5rem;
}

/* ===== Typed-answer / Cloze answer area (outside the prompt card) ===== */
.study-answer-area {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.study-answer-input.mud-input-control {
    margin-top: 0;
}
.study-answer-input .mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--sb-radius-md);
    border-color: var(--sb-glass-border);
}
.study-answer-input .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(var(--sb-color-primary-rgb), 0.55);
}
.study-answer-input .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--sb-color-primary);
    border-width: 2px;
}
.study-answer-input .mud-input-root-outlined {
    background: var(--sb-glass-bg);
    border-radius: var(--sb-radius-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.study-answer-input .mud-input-root input {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sb-text-primary);
}

.study-answer-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 52px;
    padding: 0.6rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--sb-radius-md);
    background: linear-gradient(135deg, var(--sb-color-primary) 0%, #F4A496 100%);
    box-shadow: var(--sb-shadow-soft);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition:
        transform var(--sb-motion-fast) var(--sb-ease-bounce),
        box-shadow var(--sb-motion-base) var(--sb-ease-soft),
        filter var(--sb-motion-fast) ease;
}
.study-answer-check:hover {
    transform: translateY(-2px);
    box-shadow: var(--sb-shadow-elev);
    filter: brightness(1.04);
}
.study-answer-check:active {
    transform: scale(0.97);
}

.study-answer-notes {
    padding: 0.6rem 0.85rem;
    border-radius: var(--sb-radius-md);
    background: var(--sb-glass-bg);
    border: 1px solid var(--sb-glass-border);
    color: var(--sb-text-secondary);
    font-size: 0.85rem;
    text-align: center;
}

/* ===== Multiple Choice (MCQ) — option grid ===== */

.study-mcq-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.study-mcq-option {
    min-height: 64px;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--sb-glass-border);
    border-radius: var(--sb-radius-lg);
    background: var(--sb-glass-bg);
    box-shadow: var(--sb-shadow-soft), var(--sb-shadow-glass);
    color: var(--sb-text-primary);
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition:
        transform var(--sb-motion-fast) var(--sb-ease-bounce),
        border-color var(--sb-motion-base) var(--sb-ease-soft),
        background var(--sb-motion-base) var(--sb-ease-soft),
        box-shadow var(--sb-motion-base) var(--sb-ease-soft),
        opacity var(--sb-motion-base) var(--sb-ease-soft);
}

.study-mcq-option:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(var(--sb-color-primary-rgb), 0.55);
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
}

.study-mcq-option:active:not(:disabled) {
    transform: scale(0.97);
}

.study-mcq-option:disabled {
    cursor: default;
}

.study-mcq-option.is-correct {
    background:
        linear-gradient(135deg, rgba(var(--sb-color-tertiary-rgb), 0.22) 0%, rgba(var(--sb-color-tertiary-rgb), 0.40) 100%),
        var(--sb-glass-bg);
    border-color: rgba(var(--sb-color-tertiary-rgb), 0.75);
    box-shadow:
        0 0 0 3px rgba(var(--sb-color-tertiary-rgb), 0.18),
        var(--sb-shadow-soft);
    animation: sb-pop var(--sb-motion-base) var(--sb-ease-bounce);
}

.study-mcq-option.is-wrong {
    background:
        linear-gradient(135deg, rgba(var(--sb-color-primary-rgb), 0.22) 0%, rgba(var(--sb-color-primary-rgb), 0.40) 100%),
        var(--sb-glass-bg);
    border-color: rgba(var(--sb-color-primary-rgb), 0.75);
    animation: sb-wiggle 0.5s var(--sb-ease-soft);
}

.study-mcq-option.is-dim {
    opacity: 0.45;
}

.study-mcq-option-icon { margin-left: 0.15rem; }
.study-mcq-option.is-correct .study-mcq-option-icon { color: var(--sb-color-tertiary); }
.study-mcq-option.is-wrong   .study-mcq-option-icon { color: var(--sb-color-primary); }

.study-feedback {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--sb-radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    border: 1px solid;
    color: var(--sb-text-primary);
    animation: sb-bounce-in var(--sb-motion-base) var(--sb-ease-bounce);
}
.study-feedback.is-correct {
    background: rgba(var(--sb-color-tertiary-rgb), 0.18);
    border-color: rgba(var(--sb-color-tertiary-rgb), 0.5);
}
.study-feedback.is-almost {
    background: rgba(245, 194, 107, 0.20);
    border-color: rgba(245, 194, 107, 0.55);
}
.study-feedback.is-wrong {
    background: rgba(var(--sb-color-primary-rgb), 0.16);
    border-color: rgba(var(--sb-color-primary-rgb), 0.5);
}

.study-feedback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.study-feedback-grade {
    display: inline-block;
    padding: 0.15rem 0.7rem;
    border-radius: var(--sb-radius-pill);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid currentColor;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.8;
}
:root[data-theme="dark"] .study-feedback-grade {
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 600px) {
    .study-prompt-card { min-height: 280px; padding: 1.5rem 1rem; margin-bottom: 1rem; border-radius: var(--sb-radius-lg); }
    .study-prompt-term .term-text { font-size: 1.85rem; }

    .study-mcq-options {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        gap: 0.5rem;
        padding: 0.6rem 12px calc(0.6rem + env(safe-area-inset-bottom, 0px));
        background: transparent;
    }
    .study-mcq-option { min-height: 60px; padding: 0.6rem 0.5rem; font-size: 0.95rem; border-radius: var(--sb-radius-md); }

    /* Feedback floats just above the fixed options bar on mobile (MCQ only). */
    .study-mcq-options + .study-feedback {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(140px + env(safe-area-inset-bottom, 0px));
        z-index: 6;
        margin-top: 0;
        box-shadow: var(--sb-shadow-elev);
    }
}

/* ===== Grading buttons (glass surface, soft tinted by grade) ===== */
.grade-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.grade-label .grade-icon {
    width: 1em;
    height: 1em;
    font-size: 1.05em;
    vertical-align: -0.15em;
    margin-right: 0.2em;
}

.grade-btn {
    min-height: 66px;
    padding: 0.55rem 0.65rem 0.55rem 2.3rem;
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius-lg);
    color: var(--sb-text-primary);
    font-family: inherit;
    font-weight: 700;
    background: var(--sb-glass-bg);
    box-shadow: var(--sb-shadow-soft), var(--sb-shadow-glass);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    overflow: hidden;
    transition:
        transform var(--sb-motion-fast) var(--sb-ease-bounce),
        box-shadow var(--sb-motion-base) var(--sb-ease-soft),
        border-color var(--sb-motion-base) var(--sb-ease-soft);
}

/* Grade-specific soft tint — coloured glaze over the glass base. */
.grade-bad {
    --grade-accent-rgb: var(--sb-color-primary-rgb);
    background:
        linear-gradient(135deg, rgba(var(--sb-color-primary-rgb), 0.18) 0%, rgba(var(--sb-color-primary-rgb), 0.34) 100%),
        var(--sb-glass-bg);
    border-color: rgba(var(--sb-color-primary-rgb), 0.45);
}
.grade-hard {
    --grade-accent-rgb: 245, 194, 107;
    background:
        linear-gradient(135deg, rgba(var(--sb-color-peach-rgb), 0.28) 0%, rgba(245, 194, 107, 0.40) 100%),
        var(--sb-glass-bg);
    border-color: rgba(245, 194, 107, 0.55);
}
.grade-good {
    --grade-accent-rgb: var(--sb-color-tertiary-rgb);
    background:
        linear-gradient(135deg, rgba(var(--sb-color-tertiary-rgb), 0.18) 0%, rgba(var(--sb-color-tertiary-rgb), 0.34) 100%),
        var(--sb-glass-bg);
    border-color: rgba(var(--sb-color-tertiary-rgb), 0.45);
}
/* Slim coloured rail along the top edge of each button for grade recall. */
.grade-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    opacity: 0.85;
}
.grade-bad::before  { background: var(--sb-color-primary); }
.grade-hard::before { background: var(--sb-color-warning); }
.grade-good::before { background: var(--sb-color-tertiary); }

.grade-key {
    position: absolute;
    top: 50%;
    left: 0.55rem;
    transform: translateY(-50%);
    min-width: 1.4em;
    padding: 0 0.35em;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: var(--sb-text-muted);
    font: 600 0.74rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
}

.grade-label {
    font-size: 0.95rem;
    line-height: 1.1;
    white-space: nowrap;
}

.grade-interval {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--sb-text-secondary);
    line-height: 1.1;
    white-space: nowrap;
}

.grade-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
}
.grade-bad:hover:not(:disabled)  { border-color: rgba(var(--sb-color-primary-rgb),   0.7); }
.grade-hard:hover:not(:disabled) { border-color: rgba(245, 194, 107, 0.8); }
.grade-good:hover:not(:disabled) { border-color: rgba(var(--sb-color-tertiary-rgb),  0.7); }

.grade-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.grade-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .grade-key { display: none; }

    .grade-buttons {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        gap: 0.5rem;
        padding: 0.6rem 12px calc(0.6rem + env(safe-area-inset-bottom, 0px));
        background: transparent;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .grade-btn {
        min-height: 60px;
        padding: 0.4rem 0.3rem;
        border-radius: var(--sb-radius-md);
    }

    .grade-label { font-size: 0.88rem; }
    .grade-interval { font-size: 0.66rem; }
}

@keyframes grade-pulse {
    0%   { transform: scale(1);    box-shadow: var(--sb-shadow-soft), var(--sb-shadow-glass), 0 0 0 0   rgba(var(--grade-accent-rgb), 0.50); }
    50%  { transform: scale(1.06); box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass), 0 0 0 14px rgba(var(--grade-accent-rgb), 0); }
    100% { transform: scale(1);    box-shadow: var(--sb-shadow-soft), var(--sb-shadow-glass), 0 0 0 0   rgba(var(--grade-accent-rgb), 0); }
}

.grade-buttons.is-pulsing-bad  .grade-bad,
.grade-buttons.is-pulsing-hard .grade-hard,
.grade-buttons.is-pulsing-good .grade-good {
    animation: grade-pulse 0.34s ease-out;
}

@media (max-width: 600px) {
    .study-page    { padding: 1rem 8px calc(var(--sb-study-bottom-bar) + env(safe-area-inset-bottom, 0px)); }
    .flip-card,
    .flip-card-inner { min-height: 280px; }
    .flip-card-front,
    .flip-card-back  { padding: 1.5rem 1rem; border-radius: var(--sb-radius-lg); }
}

/* ===== Auth pages (Login / Register / ForgotPassword) ===== */
.auth-page {
    min-height: calc(100vh - 64px);
    margin: -1.1rem -16px 0;
    padding: 3rem 16px 4rem;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 246, 240, 0.82));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--sb-radius-xl);
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
    padding: 2.5rem 2.25rem;
    animation: sb-bounce-in var(--sb-motion-slow) var(--sb-ease-bounce) both;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    color: var(--mud-palette-primary, #594ae2);
    margin-bottom: 1.5rem;
}

.auth-brand-icon {
    font-size: 2rem !important;
    line-height: 1;
}

.auth-brand-logo {
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(var(--sb-color-primary-rgb), 0.25));
}

.auth-brand-title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.auth-title {
    font-size: 1.625rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    text-align: center;
    color: #1a1a2e;
}

.auth-subtitle {
    color: #6c6c80;
    text-align: center;
    margin: 0 0 1.75rem;
    font-size: 0.95rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
}

.auth-field {
    margin-bottom: 1rem;
}

.auth-label {
    display: block;
    font-size: 0.875rem;
    color: #6c6c80;
    margin-bottom: 0.375rem;
    font-weight: 500;
}

.auth-input {
    display: block;
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #1a1a2e;
    background-color: #fff;
    border: 1px solid #e1e1ec;
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    box-sizing: border-box;
}

.auth-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary, #594ae2);
    box-shadow: 0 0 0 3px rgba(89, 74, 226, 0.12);
}

.auth-input::placeholder {
    color: #b8b8c8;
}

.auth-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236c6c80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
    appearance: none;
    -webkit-appearance: none;
}

.auth-alert {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

.auth-alert-danger {
    background: rgba(220, 53, 69, 0.08);
    color: #b02a37;
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.auth-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9rem;
    color: #4a4a5e;
    cursor: pointer;
}

.auth-checkbox-input {
    margin: 0;
    width: 1rem;
    height: 1rem;
    border: 1px solid #b8b8c8;
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--mud-palette-primary, #594ae2);
}

.auth-link {
    color: var(--mud-palette-primary, #594ae2);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-btn {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    text-align: center;
}

.auth-btn-primary {
    background: var(--mud-palette-primary, #594ae2);
    color: #fff;
}

.auth-btn-primary:hover {
    background: var(--mud-palette-primary-darken, #4a3dd0);
    box-shadow: 0 6px 16px rgba(89, 74, 226, 0.28);
    transform: translateY(-1px);
}

.auth-btn-secondary {
    background: #fff;
    color: var(--mud-palette-primary, #594ae2);
    border-color: #d8d8e8;
}

.auth-btn-secondary:hover {
    background: #f6f4ff;
    border-color: var(--mud-palette-primary, #594ae2);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: #a0a0b4;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e7e7f0;
}

.auth-footer {
    text-align: center;
    color: #6c6c80;
    font-size: 0.9rem;
    margin: 1.75rem 0 0;
}

.auth-footer .auth-link {
    margin-left: 0.25rem;
}

@media (max-width: 600px) {
    .auth-page { padding: 1.5rem 12px 3rem; }
    .auth-card { padding: 2rem 1.25rem; border-radius: 16px; }
    .auth-title { font-size: 1.4rem; }
}

/* ===== Dark theme overrides ===== */
:root[data-theme="dark"] .dashboard-hero h1 { color: var(--sb-text-primary); }
:root[data-theme="dark"] .dashboard-hero .hero-subtitle { color: var(--sb-text-secondary); }

:root[data-theme="dark"] .action-card-title { color: var(--sb-text-primary); }
:root[data-theme="dark"] .action-card-subtitle { color: var(--sb-text-secondary); }
:root[data-theme="dark"] .action-card-study {
    background:
        linear-gradient(135deg, rgba(46, 40, 55, 0.72), rgba(38, 33, 46, 0.58)),
        rgba(var(--sb-color-primary-rgb), 0.16);
    border-color: rgba(var(--sb-color-primary-rgb), 0.35);
}
:root[data-theme="dark"] .action-card-add {
    background:
        linear-gradient(135deg, rgba(46, 40, 55, 0.72), rgba(38, 33, 46, 0.58)),
        rgba(var(--sb-color-secondary-rgb), 0.16);
    border-color: rgba(var(--sb-color-secondary-rgb), 0.35);
}
:root[data-theme="dark"] .action-card-words {
    background:
        linear-gradient(135deg, rgba(46, 40, 55, 0.72), rgba(38, 33, 46, 0.58)),
        rgba(var(--sb-color-tertiary-rgb), 0.16);
    border-color: rgba(var(--sb-color-tertiary-rgb), 0.35);
}
:root[data-theme="dark"] .action-card,
:root[data-theme="dark"] .stat-tile,
:root[data-theme="dark"] .progress-card {
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
}
:root[data-theme="dark"] .action-card:hover,
:root[data-theme="dark"] .stat-tile:hover,
:root[data-theme="dark"] .progress-card:hover {
    box-shadow: var(--sb-shadow-card-hover), var(--sb-shadow-glass);
}

:root[data-theme="dark"] .stat-tile {
    background: var(--sb-glass-bg);
    border-color: var(--sb-glass-border);
}
:root[data-theme="dark"] .stat-tile-label { color: var(--sb-text-secondary); }
:root[data-theme="dark"] .stat-tile-value { color: var(--sb-text-primary); }
:root[data-theme="dark"] .stat-tile-sub   { color: var(--sb-text-muted); }

:root[data-theme="dark"] .progress-card {
    background: var(--sb-glass-bg);
    border-color: var(--sb-glass-border);
}
:root[data-theme="dark"] .progress-card-title { color: var(--sb-text-primary); }
:root[data-theme="dark"] .progress-card-counter { color: var(--sb-color-primary); }
:root[data-theme="dark"] .progress-card-sub { color: var(--sb-text-secondary); }

:root[data-theme="dark"] .howitworks-step-icon {
    background: rgba(var(--sb-color-primary-rgb), 0.15);
    color: var(--sb-color-primary);
}
:root[data-theme="dark"] .howitworks-step-title { color: var(--sb-text-primary); }
:root[data-theme="dark"] .howitworks-step-body { color: var(--sb-text-secondary); }

/* Dark mode: text color only. Background, shadow and border are already
   theme-aware via --sb-surface, --sb-glass-bg, --sb-shadow-card and
   --sb-glass-border in the base rule. Earlier rules here flattened the
   background to a solid colour, which made flip-cards look different from
   .study-prompt-card in dark mode. */
:root[data-theme="dark"] .flip-card-front,
:root[data-theme="dark"] .flip-card-back {
    color: var(--sb-text-primary);
}

:root[data-theme="dark"] .auth-card {
    background: linear-gradient(135deg, rgba(46, 40, 55, 0.85), rgba(38, 33, 46, 0.72));
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
}
:root[data-theme="dark"] .auth-title { color: var(--sb-text-primary); }
:root[data-theme="dark"] .auth-subtitle { color: var(--sb-text-secondary); }
:root[data-theme="dark"] .auth-input {
    background: #1B1722;
    color: var(--sb-text-primary);
    border-color: var(--sb-line);
}
:root[data-theme="dark"] .auth-input:focus {
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 3px rgba(var(--sb-color-primary-rgb), 0.22);
}
:root[data-theme="dark"] .auth-input::placeholder { color: var(--sb-text-muted); }
:root[data-theme="dark"] .auth-label { color: var(--sb-text-secondary); }
:root[data-theme="dark"] .auth-checkbox { color: var(--sb-text-secondary); }
:root[data-theme="dark"] .auth-checkbox-input { border-color: var(--sb-line); }
:root[data-theme="dark"] .auth-alert-danger {
    background: rgba(220, 53, 69, 0.15);
    color: #ff8a95;
    border-color: rgba(220, 53, 69, 0.35);
}
:root[data-theme="dark"] .auth-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23B8A9BD' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .auth-divider { color: var(--sb-text-muted); }
:root[data-theme="dark"] .auth-divider::before,
:root[data-theme="dark"] .auth-divider::after { background: var(--sb-line); }
:root[data-theme="dark"] .auth-footer { color: var(--sb-text-secondary); }
:root[data-theme="dark"] .auth-link { color: var(--sb-color-primary); }
:root[data-theme="dark"] .auth-btn-primary { background: var(--sb-color-primary); }
:root[data-theme="dark"] .auth-btn-primary:hover {
    background: var(--sb-color-primary-hover);
    box-shadow: 0 6px 16px rgba(var(--sb-color-primary-rgb), 0.35);
}
:root[data-theme="dark"] .auth-btn-secondary {
    background: var(--sb-surface);
    border-color: var(--sb-line);
    color: var(--sb-color-primary);
}
:root[data-theme="dark"] .auth-btn-secondary:hover {
    background: #2D2438;
    border-color: var(--sb-color-primary);
}

.sb-mastery-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 130px;
}
.sb-mastery-bar {
    flex: 1 1 auto;
    min-width: 70px;
}
.sb-mastery-label {
    flex: 0 0 auto;
    min-width: 2.5rem;
    text-align: right;
}

.sb-mastery-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}
.sb-mastery-tile {
    border-radius: var(--sb-radius-md);
    border: 1px solid var(--sb-line);
    padding: 0.75rem 1rem;
    background: var(--sb-surface-elev);
}
.sb-mastery-tile-label {
    color: var(--sb-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sb-mastery-tile-value {
    color: var(--sb-text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0.2rem;
}

/* ===== Study session complete screen ===== */
.study-complete {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
    padding: 0.5rem 0.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    animation: sb-complete-in 0.5s var(--sb-ease-soft) both;
}

@keyframes sb-complete-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.study-complete-hero {
    position: relative;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.study-complete-heart {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    border: 2px solid rgba(var(--sb-color-primary-rgb), 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-color-primary);
    background: rgba(var(--sb-color-primary-rgb), 0.06);
    animation: sb-heart-pulse 1.8s var(--sb-ease-soft) infinite;
}
.study-complete-heart .mud-icon-root { font-size: 3rem; }

@keyframes sb-heart-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--sb-color-primary-rgb), 0.0); }
    50%      { transform: scale(1.04); box-shadow: 0 0 0 14px rgba(var(--sb-color-primary-rgb), 0.0); }
}

.study-complete-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.study-complete-confetti .dot {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    opacity: 0.9;
    animation: sb-confetti-float 3.5s ease-in-out infinite;
}
.study-complete-confetti .dot-1 { top: 18%;  left: 14%; background: var(--sb-color-primary); transform: rotate(18deg); animation-delay: 0s; }
.study-complete-confetti .dot-2 { top: 8%;   left: 70%; background: var(--sb-color-warning); transform: rotate(-12deg); animation-delay: 0.4s; }
.study-complete-confetti .dot-3 { top: 60%;  left: 8%;  background: var(--sb-color-secondary); transform: rotate(28deg); animation-delay: 0.8s; }
.study-complete-confetti .dot-4 { top: 32%;  left: 84%; background: var(--sb-color-secondary); transform: rotate(-22deg); animation-delay: 1.2s; }
.study-complete-confetti .dot-5 { top: 72%;  left: 76%; background: var(--sb-color-tertiary); transform: rotate(10deg); animation-delay: 1.6s; }
.study-complete-confetti .dot-6 { top: 14%;  left: 38%; background: var(--sb-color-tertiary); transform: rotate(-30deg); animation-delay: 2.0s; }

@keyframes sb-confetti-float {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50%      { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}

.study-complete-title {
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--sb-text-primary);
    margin: 0.25rem 0 0.5rem;
    letter-spacing: -0.01em;
}

.study-complete-streak {
    text-align: center;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1rem;
    color: var(--sb-text-secondary);
    margin-bottom: 1.5rem;
}
.study-complete-streak span {
    font-style: normal;
    margin-left: 0.25rem;
}

.study-complete-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.study-complete-stat {
    background: var(--sb-surface);
    border-radius: var(--sb-radius-lg);
    padding: 0.85rem 0.5rem 0.9rem;
    text-align: center;
    box-shadow: var(--sb-shadow-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.study-complete-stat-head {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sb-text-secondary);
    text-transform: uppercase;
}
.study-complete-stat-head .mud-icon-root { font-size: 0.95rem; }

.study-complete-stat-value {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--sb-text-primary);
    line-height: 1.1;
}

.study-complete-stat-sub {
    font-size: 0.72rem;
    color: var(--sb-text-muted);
}

.study-complete-partner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--sb-surface);
    border-radius: var(--sb-radius-lg);
    padding: 0.75rem 1rem;
    box-shadow: var(--sb-shadow-soft);
    margin-bottom: 1.5rem;
}

.study-complete-partner-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sb-color-secondary-soft);
    color: var(--sb-color-secondary-hover);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.study-complete-partner-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.study-complete-partner-from {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--sb-text-secondary);
    margin-bottom: 0.15rem;
}
.study-complete-partner-from .fi {
    width: 1.05em;
    border-radius: 2px;
}

.study-complete-partner-msg {
    font-style: italic;
    color: var(--sb-text-primary);
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.study-complete-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: auto;
}

.study-complete-btn.mud-button-root {
    border-radius: var(--sb-radius-pill);
    text-transform: none;
    font-weight: 600;
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
}

.study-complete-btn-primary.mud-button-root {
    background: #2A2231;
    color: #fff;
}
.study-complete-btn-primary.mud-button-root:hover {
    background: #3B3043;
}

:root[data-theme="dark"] .study-complete-stat,
:root[data-theme="dark"] .study-complete-partner {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .study-complete-btn-primary.mud-button-root {
    background: #EFEAF3;
    color: #1F1925;
}
:root[data-theme="dark"] .study-complete-btn-primary.mud-button-root:hover {
    background: #FFFFFF;
}

@media (max-width: 480px) {
    .study-complete-hero { height: 150px; }
    .study-complete-heart { width: 88px; height: 88px; }
    .study-complete-heart .mud-icon-root { font-size: 2.4rem; }
    .study-complete-title { font-size: 1.6rem; }
    .study-complete-stat-value { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .study-complete { animation: none; }
    .study-complete-heart { animation: none; }
    .study-complete-confetti .dot { animation: none; }
}

/* ===== CoupleHub: full-card clickable + motivation popup ===== */

.couple-hub-clickable {
    width: 100%;
    border: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}
.couple-hub-clickable:focus-visible {
    outline: 3px solid var(--sb-color-secondary);
    outline-offset: 4px;
}

.couple-hub-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: center;
    margin: 0.85rem auto 0;
    padding: 0.3rem 0.75rem;
    border-radius: var(--sb-radius-pill);
    background: rgba(255, 255, 255, 0.45);
    color: var(--sb-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    width: max-content;
    position: relative;
    z-index: 1;
    transition: background var(--sb-motion-fast) var(--sb-ease-soft),
                color var(--sb-motion-fast) var(--sb-ease-soft);
}
:root[data-theme="dark"] .couple-hub-hint {
    background: rgba(46, 40, 55, 0.55);
}
.couple-hub:hover .couple-hub-hint {
    background: rgba(var(--sb-color-secondary-rgb), 0.18);
    color: var(--sb-text-primary);
}

.couple-hub-wrap {
    position: relative;
}

.couple-motivation {
    position: absolute;
    /* The bubble lives OUTSIDE the hub button (it's a sibling inside .couple-hub-wrap)
       so the hub's `overflow: hidden` doesn't clip it. Anchor bottom 24px below the
       wrap top so the diamond-arrow tip lands exactly on the badge's top edge,
       regardless of bubble height (which changes between desktop/mobile). */
    top: auto;
    bottom: calc(100% - 24px);
    /* Center bubble horizontally over the right (partner) avatar. The avatar sits ~80px
       to the right of the hub center (half-heart + gap + half-avatar). */
    left: calc(50% + 80px);
    right: auto;
    transform: translateX(-50%);
    pointer-events: none;
    display: flex;
    width: max-content;
    align-items: center;
    gap: 0.45rem;
    max-width: min(55%, 280px);
    padding: 0.5rem 0.85rem;
    border-radius: var(--sb-radius-pill);
    background: linear-gradient(135deg,
        rgba(var(--sb-color-primary-rgb), 0.95),
        rgba(var(--sb-color-secondary-rgb), 0.95));
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: 0 8px 24px -8px rgba(var(--sb-color-primary-rgb), 0.55);
    z-index: 2;
    /* Float in sync with the partner avatar (`.couple-avatar-right`): same 6s sb-float,
       reversed, with -3s delay — so the bubble bobs together with the badge it emanates from. */
    animation: couple-motivation-float 6s var(--sb-ease-soft) infinite reverse;
    animation-delay: -3s;
}
.couple-motivation::after {
    content: "";
    position: absolute;
    /* Arrow tip aligns with the partner avatar's "studied today" check badge.
       Badge sits at avatar.top-right ~31px right of avatar center, and the bubble center
       is over avatar center — so shift the arrow 31px right of bubble center. */
    bottom: -6px;
    left: calc(50% + 31px);
    margin-left: -7px;
    right: auto;
    width: 14px;
    height: 14px;
    background: inherit;
    transform: rotate(45deg);
    border-radius: 2px;
    z-index: -1;
}
.couple-motivation-emoji {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}
.couple-motivation-text {
    flex: 1;
    overflow-wrap: break-word;
}

@keyframes couple-motivation-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .couple-motivation { animation: none; }
}

.couple-studied-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
    border: 2px solid var(--sb-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    z-index: 2;
}
.couple-studied-badge--yes {
    background: var(--sb-color-tertiary);
    color: #1F4D38;
    animation: couple-studied-pop var(--sb-motion-slow) var(--sb-ease-bounce);
}
.couple-studied-badge--no {
    background: var(--sb-line);
    color: var(--sb-text-muted);
}

@keyframes couple-studied-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .couple-studied-badge--yes { animation: none; }
}

/* ===== PartnerStats page ===== */

.partner-stats-page {
    padding-bottom: 2rem;
}

.partner-stats-topbar {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.partner-stats-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0.5rem 0 0.25rem;
    color: var(--sb-text-primary);
}
.partner-stats-heart {
    font-size: 1.5rem;
    filter: drop-shadow(0 4px 10px rgba(var(--sb-color-primary-rgb), 0.5));
}
.partner-stats-days {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sb-text-secondary);
}

/* ===== PersonStatsPanel ===== */

.person-stats-panel {
    background: var(--sb-glass-bg);
    backdrop-filter: blur(14px);
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius-xl);
    box-shadow: var(--sb-shadow-card);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.person-stats-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.person-stats-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--sb-surface);
    color: var(--sb-text-primary);
    font-weight: 800;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 3px solid var(--sb-surface);
    box-shadow: 0 6px 18px -6px rgba(var(--sb-color-primary-rgb), 0.4);
}
.person-stats-avatar .couple-flag {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--sb-surface);
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.person-stats-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sb-text-primary);
}
.person-stats-you {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sb-text-secondary);
    margin-left: 0.35rem;
}

.person-stats-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.person-stat {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius-md);
    padding: 0.55rem 0.4rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}
:root[data-theme="dark"] .person-stat {
    background: rgba(46, 40, 55, 0.55);
}
.person-stat-icon { color: var(--sb-color-primary); line-height: 1; }
.person-stat-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--sb-text-primary);
    line-height: 1.1;
}
.person-stat-label {
    font-size: 0.7rem;
    color: var(--sb-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.person-stats-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.person-stats-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sb-text-primary);
}

/* ===== ActivityHeatmap ===== */

.activity-heatmap {
    width: 100%;
}
.activity-heatmap-grid {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-auto-flow: column;
    gap: 3px;
    aspect-ratio: 12 / 7;
    width: 100%;
}
.activity-heatmap-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    background: var(--sb-line);
    transition: transform var(--sb-motion-fast) var(--sb-ease-soft);
}
.activity-heatmap-cell:hover {
    transform: scale(1.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
    position: relative;
}
.activity-heatmap-cell--0 { background: var(--sb-line); }
.activity-heatmap-cell--1 { background: rgba(var(--sb-color-tertiary-rgb), 0.35); box-shadow: 0 0 4px rgba(var(--sb-color-tertiary-rgb), 0.25); }
.activity-heatmap-cell--2 { background: rgba(var(--sb-color-tertiary-rgb), 0.6);  box-shadow: 0 0 6px rgba(var(--sb-color-tertiary-rgb), 0.4); }
.activity-heatmap-cell--3 { background: rgba(var(--sb-color-tertiary-rgb), 0.85); box-shadow: 0 0 8px rgba(var(--sb-color-tertiary-rgb), 0.55); }
.activity-heatmap-cell--4 { background: var(--sb-color-tertiary);                 box-shadow: 0 0 12px rgba(var(--sb-color-tertiary-rgb), 0.7); }
.activity-heatmap-empty {
    color: var(--sb-text-muted);
    font-size: 0.9rem;
    padding: 0.5rem 0;
    text-align: center;
}

/* ===== MasteryDonut ===== */

.mastery-donut {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.mastery-donut-chart {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}
.mastery-donut-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}
.mastery-donut-track {
    fill: none;
    stroke: var(--sb-line);
    stroke-width: 3.2;
}
.mastery-donut-segment {
    fill: none;
    stroke-width: 3.2;
    transition: stroke-dasharray var(--sb-motion-slow) var(--sb-ease-soft);
}
.mastery-segment-mature   { stroke: var(--sb-color-tertiary);  filter: drop-shadow(0 0 5px rgba(var(--sb-color-tertiary-rgb), 0.75)); }
.mastery-segment-young    { stroke: var(--sb-color-secondary); filter: drop-shadow(0 0 5px rgba(var(--sb-color-secondary-rgb), 0.75)); }
.mastery-segment-learning { stroke: var(--sb-color-warning);   filter: drop-shadow(0 0 5px rgba(var(--sb-color-warning-rgb), 0.75)); }
.mastery-segment-new      { stroke: var(--sb-color-info);      filter: drop-shadow(0 0 5px rgba(var(--sb-color-info-rgb), 0.75)); }

.mastery-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.mastery-donut-total {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--sb-text-primary);
    line-height: 1;
}
.mastery-donut-total-label {
    font-size: 0.7rem;
    color: var(--sb-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mastery-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 130px;
}
.mastery-legend-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.mastery-legend-row .mastery-legend-swatch {
    margin-top: 0.3rem;
    flex-shrink: 0;
}
.mastery-legend-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.mastery-legend-name {
    color: var(--sb-text-primary);
    font-weight: 700;
}
.mastery-legend-desc {
    font-size: 0.74rem;
    color: var(--sb-text-secondary);
    line-height: 1.3;
    margin-top: 0.05rem;
}
.mastery-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}
.mastery-legend-swatch.mastery-segment-mature   { color: var(--sb-color-tertiary); }
.mastery-legend-swatch.mastery-segment-young    { color: var(--sb-color-secondary); }
.mastery-legend-swatch.mastery-segment-learning { color: var(--sb-color-warning); }
.mastery-legend-swatch.mastery-segment-new      { color: var(--sb-color-info); }

.mastery-legend-label { flex: 1; color: var(--sb-text-secondary); }
.mastery-legend-value { font-weight: 700; color: var(--sb-text-primary); }
.mastery-donut-empty, .mode-breakdown-empty {
    color: var(--sb-text-muted);
    font-size: 0.9rem;
    padding: 0.75rem 0;
    text-align: center;
}

/* ===== ModeBreakdown ===== */

.mode-breakdown { display: flex; flex-direction: column; gap: 0.5rem; }
.mode-breakdown-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}
.mode-breakdown-label { color: var(--sb-text-secondary); }
.mode-breakdown-bar { min-width: 0; }
.mode-breakdown-value {
    font-weight: 700;
    color: var(--sb-text-primary);
    white-space: nowrap;
}
.mode-breakdown-count {
    color: var(--sb-text-muted);
    font-weight: 500;
    font-size: 0.78rem;
    margin-left: 0.25rem;
}

/* Glow-bars for mode-breakdown (replaces MudProgressLinear) */
.mode-progress {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: var(--sb-radius-pill);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
    overflow: visible;
}
:root[data-theme="dark"] .mode-progress {
    background: rgba(255, 255, 255, 0.08);
}
.mode-progress-bar {
    height: 100%;
    border-radius: var(--sb-radius-pill);
    transition: width var(--sb-motion-slow) var(--sb-ease-soft);
}
.mode-progress--success .mode-progress-bar {
    background: linear-gradient(90deg, var(--sb-color-tertiary), var(--sb-color-success));
    box-shadow: 0 0 10px rgba(var(--sb-color-tertiary-rgb), 0.65);
}
.mode-progress--warning .mode-progress-bar {
    background: linear-gradient(90deg, var(--sb-color-warning), var(--sb-color-primary));
    box-shadow: 0 0 10px rgba(var(--sb-color-warning-rgb), 0.65);
}
.mode-progress--danger .mode-progress-bar {
    background: linear-gradient(90deg, var(--sb-color-primary), var(--sb-color-primary-hover));
    box-shadow: 0 0 10px rgba(var(--sb-color-primary-rgb), 0.65);
}
.mode-progress--empty .mode-progress-bar {
    background: var(--sb-line);
    box-shadow: none;
}

/* ===== Phase 2 — chart sections and cards ===== */

.stats-section {
    margin-top: 1.75rem;
}
.stats-section-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--sb-text-primary);
    margin: 0 0 0.25rem;
}
.stats-section-sub {
    margin: 0 0 0.75rem;
    color: var(--sb-text-secondary);
    font-size: 0.9rem;
}

.stats-card {
    background: var(--sb-glass-bg);
    backdrop-filter: blur(14px);
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius-xl);
    box-shadow: var(--sb-shadow-card);
    padding: 1rem 1.1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.stats-card-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sb-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stats-chart-wrap {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.stats-chart-empty {
    color: var(--sb-text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 1.25rem 0;
}

.stats-donut-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.stats-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 130px;
}
.stats-legend-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.stats-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.stats-legend-label { flex: 1; color: var(--sb-text-secondary); }
.stats-legend-value { font-weight: 700; color: var(--sb-text-primary); }

/* ===== Due forecast (next 14 days) — smooth area chart ===== */

.forecast-chart {
    width: 100%;
    user-select: none;
}
.forecast-area {
    position: relative;
    display: grid;
    height: 200px;
    width: 100%;
}
.forecast-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.forecast-svg-line {
    stroke: var(--sb-color-secondary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    filter: drop-shadow(0 0 6px rgba(var(--sb-color-secondary-rgb), 0.6));
    vector-effect: non-scaling-stroke;
}

.forecast-dot-cell {
    position: relative;
    height: 100%;
    min-width: 0;
}
.forecast-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sb-color-secondary);
    box-shadow:
        0 0 10px rgba(var(--sb-color-secondary-rgb), 0.7),
        0 0 0 3px var(--sb-surface);
}
.forecast-dot.is-today {
    width: 18px;
    height: 18px;
    background: var(--sb-color-tertiary);
    box-shadow:
        0 0 18px rgba(var(--sb-color-tertiary-rgb), 0.85),
        0 0 0 4px var(--sb-surface);
    animation: forecast-pulse 2.4s var(--sb-ease-soft) infinite;
}
.forecast-dot-count {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--sb-text-secondary);
    line-height: 1;
    white-space: nowrap;
}
.forecast-dot.is-today .forecast-dot-count {
    color: var(--sb-text-primary);
    font-size: 0.8rem;
}

@keyframes forecast-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .forecast-dot.is-today { animation: none; }
}

.forecast-labels {
    display: grid;
    margin-top: 0.6rem;
}
.forecast-label {
    text-align: center;
    font-size: 0.7rem;
    color: var(--sb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.forecast-label.is-today {
    color: var(--sb-color-tertiary);
    font-weight: 800;
}

/* ===== Hardest words list ===== */

.hardest-words { width: 100%; }
.hardest-words-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.hardest-words-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius-md);
}
:root[data-theme="dark"] .hardest-words-row {
    background: rgba(46, 40, 55, 0.5);
}
.hardest-words-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.hardest-words-term {
    font-weight: 700;
    color: var(--sb-text-primary);
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hardest-words-translation {
    color: var(--sb-text-secondary);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hardest-words-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    font-size: 0.78rem;
}
.hardest-words-ef {
    color: var(--sb-color-primary);
    font-weight: 800;
    background: rgba(var(--sb-color-primary-rgb), 0.12);
    padding: 0.1rem 0.4rem;
    border-radius: var(--sb-radius-pill);
}
.hardest-words-lapses {
    color: var(--sb-text-muted);
    font-weight: 700;
}
.hardest-words-action {
    background: var(--sb-color-tertiary-soft);
    border: 1px solid var(--sb-color-tertiary);
    color: var(--sb-text-primary);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--sb-motion-fast) var(--sb-ease-soft);
}
.hardest-words-action:hover {
    transform: scale(1.1);
}

/* ===== Insight cards ===== */

.insight-cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.insight-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: linear-gradient(135deg,
        rgba(var(--sb-color-primary-rgb), 0.08),
        rgba(var(--sb-color-secondary-rgb), 0.06));
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius-md);
    color: var(--sb-text-primary);
    font-size: 0.9rem;
    line-height: 1.4;
}
.insight-card-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}
.insight-card-text { flex: 1; }

/* ===== Accuracy trend (smooth dual-line with glow) ===== */

.trend-chart {
    width: 100%;
    user-select: none;
}
.trend-legend {
    display: flex;
    gap: 1.25rem;
    justify-content: flex-end;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.trend-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
}
.trend-legend-swatch {
    width: 18px;
    height: 3px;
    background: currentColor;
    border-radius: 2px;
    box-shadow: 0 0 6px currentColor;
}
.trend-legend-name {
    color: var(--sb-text-primary);
    font-weight: 600;
}
.trend-area {
    position: relative;
    height: 200px;
    width: 100%;
}
.trend-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.trend-gridline {
    stroke: var(--sb-line);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    vector-effect: non-scaling-stroke;
}
.trend-line {
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vector-effect: non-scaling-stroke;
}
.trend-today-dot {
    position: absolute;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    transform: translate(50%, -50%);
    box-shadow:
        0 0 12px currentColor,
        0 0 0 3px var(--sb-surface);
    pointer-events: auto;
    animation: trend-today-pulse 2.4s var(--sb-ease-soft) infinite;
}
@keyframes trend-today-pulse {
    0%, 100% { transform: translate(50%, -50%) scale(1); }
    50%      { transform: translate(50%, -50%) scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
    .trend-today-dot { animation: none; }
}
.trend-x-label.is-today {
    color: var(--sb-color-tertiary);
    font-weight: 800;
}
.trend-y-label {
    position: absolute;
    left: 0;
    font-size: 0.65rem;
    color: var(--sb-text-muted);
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}
.trend-y-top    { top: 0; }
.trend-y-bottom { bottom: 0; }
.trend-x-labels {
    display: grid;
    margin-top: 0.5rem;
}
.trend-x-label {
    font-size: 0.68rem;
    color: var(--sb-text-muted);
    text-align: center;
    white-space: nowrap;
}

/* ===== Phase 3 — couple comparison ===== */

.couple-banner-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) {
    .couple-banner-row { grid-template-columns: 1fr; }
}

.couple-banner-tile {
    background: var(--sb-glass-bg);
    backdrop-filter: blur(14px);
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius-xl);
    box-shadow: var(--sb-shadow-card);
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    position: relative;
    overflow: hidden;
    transition: transform var(--sb-motion-base) var(--sb-ease-soft),
                box-shadow var(--sb-motion-base) var(--sb-ease-soft);
}
.couple-banner-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--sb-shadow-card-hover);
}

.couple-banner-streak {
    background: linear-gradient(135deg,
        rgba(var(--sb-color-primary-rgb), 0.18),
        rgba(var(--sb-color-secondary-rgb), 0.10));
}
.couple-banner-streak.is-on-fire {
    box-shadow: var(--sb-shadow-card), 0 0 0 2px rgba(var(--sb-color-primary-rgb), 0.4);
    animation: streak-fire-glow 2.4s var(--sb-ease-soft) infinite;
}
.couple-banner-sweet {
    background: linear-gradient(135deg,
        rgba(255, 224, 236, 0.55),
        rgba(232, 222, 248, 0.4));
}
:root[data-theme="dark"] .couple-banner-sweet {
    background: linear-gradient(135deg,
        rgba(var(--sb-color-primary-rgb), 0.18),
        rgba(var(--sb-color-secondary-rgb), 0.14));
}

.couple-banner-icon {
    font-size: 2.4rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 12px rgba(var(--sb-color-primary-rgb), 0.4));
}
.couple-banner-body {
    flex: 1;
    min-width: 0;
}
.couple-banner-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--sb-text-primary);
    line-height: 1;
}
.couple-banner-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sb-text-primary);
    margin-top: 0.15rem;
}
.couple-banner-sub {
    font-size: 0.82rem;
    color: var(--sb-text-secondary);
    margin-top: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
    .couple-banner-streak.is-on-fire { animation: none; }
    .couple-banner-tile:hover { transform: none; }
}

/* ===== PartnerSwitcher dialog ===== */

.partner-switcher-dialog .mud-dialog {
    border-radius: var(--sb-radius-2xl);
    background: var(--sb-glass-bg);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--sb-glass-border);
    box-shadow: var(--sb-shadow-card-hover), var(--sb-shadow-glass);
    overflow: hidden;
}

.partner-switcher-content {
    padding: 0.5rem 1.25rem 1.25rem !important;
}

.partner-switcher-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--sb-text-primary);
}
.partner-switcher-title-emoji {
    font-size: 1.4rem;
    line-height: 1;
    filter: drop-shadow(0 4px 10px rgba(var(--sb-color-primary-rgb), 0.45));
    animation: sb-float 4s var(--sb-ease-soft) infinite;
}
.partner-switcher-title-text {
    background: linear-gradient(135deg, var(--sb-color-primary), var(--sb-color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.partner-switcher-loading {
    display: flex;
    justify-content: center;
    padding: 2.5rem 0;
}

.partner-switcher-section {
    margin-bottom: 1.1rem;
}
.partner-switcher-section:last-of-type {
    margin-bottom: 1.25rem;
}

.partner-switcher-section-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0.15rem 0.55rem;
}
.partner-switcher-section-emoji {
    font-size: 1.05rem;
    line-height: 1;
}
.partner-switcher-section-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-text-secondary);
}
.partner-switcher-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.45rem;
    border-radius: var(--sb-radius-pill);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}
.partner-switcher-chip-primary {
    background: rgba(var(--sb-color-primary-rgb), 0.22);
    color: var(--sb-color-primary);
}
.partner-switcher-chip-secondary {
    background: rgba(var(--sb-color-secondary-rgb), 0.22);
    color: var(--sb-color-secondary);
}
.partner-switcher-chip-muted {
    background: rgba(var(--sb-text-muted), 0.18);
    color: var(--sb-text-secondary);
}

.partner-switcher-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.partner-switcher-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: var(--sb-radius-lg);
    border: 1px solid var(--sb-glass-border);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.30));
    box-shadow: var(--sb-shadow-soft), var(--sb-shadow-glass);
    color: var(--sb-text-primary);
    text-align: left;
    font: inherit;
    cursor: default;
    transition:
        transform var(--sb-motion-base) var(--sb-ease-bounce),
        box-shadow var(--sb-motion-base) var(--sb-ease-soft),
        border-color var(--sb-motion-fast) var(--sb-ease-soft),
        background var(--sb-motion-fast) var(--sb-ease-soft);
    animation: sb-fade-up var(--sb-motion-base) var(--sb-ease-soft) both;
}

.partner-switcher-card-active {
    cursor: pointer;
}
.partner-switcher-card-active:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--sb-color-primary-rgb), 0.4);
    box-shadow: var(--sb-shadow-card), var(--sb-shadow-glass);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.45)),
        rgba(var(--sb-color-primary-rgb), 0.08);
}
.partner-switcher-card-active:active {
    transform: scale(0.985);
}
.partner-switcher-card-active:focus-visible {
    outline: 3px solid var(--sb-color-secondary);
    outline-offset: 3px;
}

.partner-switcher-card-incoming {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.35)),
        rgba(var(--sb-color-primary-rgb), 0.12);
    border-color: rgba(var(--sb-color-primary-rgb), 0.3);
}
.partner-switcher-card-outgoing {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3));
    opacity: 0.92;
}

.partner-switcher-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sb-color-secondary) 0%, #C8B8F0 100%);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    border: 2px solid var(--sb-surface);
    box-shadow: 0 6px 14px -6px rgba(var(--sb-color-secondary-rgb), 0.55);
}
.partner-switcher-avatar-primary {
    background: linear-gradient(135deg, var(--sb-color-primary) 0%, #F4A496 100%);
    box-shadow: 0 6px 14px -6px rgba(var(--sb-color-primary-rgb), 0.55);
}
.partner-switcher-avatar-muted {
    background: linear-gradient(135deg, var(--sb-text-muted) 0%, #BFB3C1 100%);
    box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.2);
}
.partner-switcher-flag {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--sb-surface);
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.partner-switcher-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.partner-switcher-name {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--sb-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.partner-switcher-lang {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--sb-text-secondary);
}

.partner-switcher-chevron {
    color: var(--sb-text-muted);
    transition: transform var(--sb-motion-fast) var(--sb-ease-bounce),
                color var(--sb-motion-fast) var(--sb-ease-soft);
}
.partner-switcher-card-active:hover .partner-switcher-chevron {
    transform: translateX(3px);
    color: var(--sb-color-primary);
}

.partner-switcher-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.partner-switcher-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: none;
    cursor: pointer;
    border-radius: var(--sb-radius-pill);
    padding: 0.4rem 0.85rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    transition: transform var(--sb-motion-fast) var(--sb-ease-bounce),
                box-shadow var(--sb-motion-fast) var(--sb-ease-soft),
                background var(--sb-motion-fast) var(--sb-ease-soft);
}
.partner-switcher-btn:active {
    transform: scale(0.95);
}
.partner-switcher-btn-accept {
    background: linear-gradient(135deg, var(--sb-color-success), #82D6B0);
    color: #1F4D38;
    box-shadow: 0 6px 14px -6px rgba(var(--sb-color-success-rgb), 0.55);
}
.partner-switcher-btn-accept:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(var(--sb-color-success-rgb), 0.65);
}
.partner-switcher-btn-decline {
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.55);
    color: var(--sb-text-secondary);
    border: 1px solid var(--sb-line);
}
.partner-switcher-btn-decline:hover {
    background: rgba(244, 67, 54, 0.12);
    color: #C73C3C;
    border-color: rgba(244, 67, 54, 0.35);
}

.partner-switcher-waiting-pill {
    flex-shrink: 0;
    padding: 0.25rem 0.65rem;
    border-radius: var(--sb-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(var(--sb-color-warning-rgb), 0.22);
    color: #8A5A12;
}

.partner-switcher-empty {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    border-radius: var(--sb-radius-lg);
    background: rgba(255, 255, 255, 0.4);
    border: 1px dashed var(--sb-line);
    color: var(--sb-text-secondary);
    font-size: 0.88rem;
}
.partner-switcher-empty-emoji {
    font-size: 1.15rem;
    line-height: 1;
}

.partner-switcher-find-new {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: none;
    cursor: pointer;
    border-radius: var(--sb-radius-xl);
    background: linear-gradient(135deg, var(--sb-color-primary) 0%, var(--sb-color-secondary) 100%);
    color: #fff;
    font: inherit;
    font-weight: 800;
    font-size: 0.95rem;
    text-align: left;
    box-shadow: 0 12px 28px -10px rgba(var(--sb-color-primary-rgb), 0.55);
    transition: transform var(--sb-motion-base) var(--sb-ease-bounce),
                box-shadow var(--sb-motion-base) var(--sb-ease-soft);
}
.partner-switcher-find-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -10px rgba(var(--sb-color-primary-rgb), 0.7);
}
.partner-switcher-find-new:active {
    transform: scale(0.985);
}
.partner-switcher-find-new:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}
.partner-switcher-find-new-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    flex-shrink: 0;
}
.partner-switcher-find-new-text {
    flex: 1;
}
.partner-switcher-find-new-arrow {
    color: #fff;
    transition: transform var(--sb-motion-fast) var(--sb-ease-bounce);
}
.partner-switcher-find-new:hover .partner-switcher-find-new-arrow {
    transform: translateX(4px);
}

/* Dark theme tweaks */
:root[data-theme="dark"] .partner-switcher-card {
    background: linear-gradient(135deg, rgba(58, 47, 64, 0.65), rgba(38, 33, 46, 0.5));
    border-color: rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .partner-switcher-card-incoming {
    background:
        linear-gradient(135deg, rgba(58, 47, 64, 0.7), rgba(38, 33, 46, 0.55)),
        rgba(var(--sb-color-primary-rgb), 0.14);
    border-color: rgba(var(--sb-color-primary-rgb), 0.35);
}
:root[data-theme="dark"] .partner-switcher-btn-decline {
    background: rgba(58, 47, 64, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .partner-switcher-empty {
    background: rgba(58, 47, 64, 0.45);
    border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .partner-switcher-title-emoji,
    .partner-switcher-card { animation: none; }
    .partner-switcher-card-active:hover,
    .partner-switcher-find-new:hover { transform: none; }
}

@media (max-width: 480px) {
    .partner-switcher-content { padding: 0.5rem 0.85rem 1rem !important; }
    .partner-switcher-card { padding: 0.6rem 0.7rem; gap: 0.7rem; }
    .partner-switcher-btn-accept span { display: none; }
    .partner-switcher-btn-accept {
        width: 32px;
        height: 32px;
        padding: 0;
    }
}

/* ===== Profile page ===== */
.profile-page {
    padding-bottom: 2rem;
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0 0.5rem;
}

.profile-hero-avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(var(--sb-color-primary-rgb), 0.18);
    color: var(--sb-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-hero-text {
    flex: 1 1 auto;
    min-width: 0;
}

.profile-hero-text h1 {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
    color: var(--sb-text-primary);
}

.profile-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    color: var(--sb-text-secondary);
    font-size: 0.92rem;
}

.profile-lang-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--sb-radius-pill);
    background: rgba(var(--sb-color-secondary-rgb), 0.18);
    color: var(--sb-text-primary);
    font-weight: 600;
    font-size: 0.78rem;
}

.profile-email {
    word-break: break-all;
}

@media (max-width: 480px) {
    .profile-hero h1 { font-size: 1.3rem; }
    .profile-hero-avatar { width: 56px; height: 56px; }
}