:root {
    --app-font-sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
    --app-matcha: #8fcb81;
    --app-matcha-dark: #4d7a53;
    --app-matcha-deep: #345f3e;
    --app-sakura: #f5a3b7;
    --app-sakura-soft: #fbd5de;
    --study-sakura: #e889a2;
    --study-sakura-dark: #89445a;
    --study-sakura-soft: #f9dce3;
    --study-sakura-pale: #fff1f4;
    --study-sakura-learning: #f2b7c6;
    --study-sakura-learning-soft: #fde8ed;
    --study-matcha: #8fcb81;
    --study-matcha-dark: #2d5a37;
    --study-matcha-soft: #dcefd5;
    --study-matcha-pale: #eef7e9;
    --study-yellow: #efc765;
    --study-yellow-dark: #70531b;
    --study-yellow-soft: #fff0bd;
    --study-yellow-pale: #fff8e4;
    --study-yellow-learning: #f3daa0;
    --study-yellow-learning-soft: #fff5d6;
    --app-cream: #fff7e8;
    --app-cream-deep: #f2dfbc;
    --app-sky: #a7dceb;
    --app-ink: #24352d;
    --app-muted: #68776e;
    --app-surface: rgba(255, 253, 247, .94);
    --app-shadow: 0 .85rem 2rem rgba(55, 86, 62, .10);
    --app-bg: #fcfaf5;
    --app-text: var(--app-ink);
    --bs-body-font-family: var(--app-font-sans);
    --bs-font-sans-serif: var(--app-font-sans);
    --bs-primary: #4d7a53;
    --bs-primary-rgb: 77, 122, 83;
    --bs-success: #8fcb81;
    --bs-success-rgb: 143, 203, 129;
    --bs-info: #a7dceb;
    --bs-info-rgb: 167, 220, 235;
    --bs-body-color: var(--app-ink);
    --bs-body-bg: var(--app-cream);
    --bs-border-color: #ead8b8;
    --bs-link-color: #3e744a;
    --bs-link-hover-color: #294f33;
    --bs-border-radius: .85rem;
    --bs-border-radius-sm: .65rem;
    --bs-border-radius-lg: 1.15rem;
}

body {
    min-height: 100vh;
    font-family: var(--app-font-sans);
    background: linear-gradient(180deg, #fdfbf7 0%, var(--app-bg) 100%);
    color: var(--app-text);
}

body::before,
body::after {
    position: fixed;
    z-index: -1;
    color: rgba(245, 163, 183, .14);
    content: "✿";
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 1;
    pointer-events: none;
}

body::before {
    top: 7rem;
    left: -1rem;
    transform: rotate(-14deg);
}

body::after {
    right: .5rem;
    bottom: 4rem;
    transform: rotate(16deg) scale(.72);
}

body.focus-mode::before,
body.focus-mode::after,
.focus-mode .app-navbar,
.focus-mode .app-footer {
    display: none;
}

.focus-mode .app-main {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    padding: 0 !important;
}

.focus-mode .learn-shell {
    width: 100%;
    gap: 0;
}

.focus-mode .learn-panel,
.focus-mode .solution-card {
    width: 100%;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
}

.focus-mode .solution-card {
    border-top: 0;
}

button,
input,
select,
textarea {
    font-family: var(--app-font-sans);
}

.auth-panel {
    max-width: 28rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: 2rem;
}

.page-heading {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: 2rem;
}

.page-heading h1 {
    margin-bottom: .5rem;
}

.page-heading p {
    color: #6c757d;
    margin-bottom: 0;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
}

.learning-streak-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem 1rem;
    align-items: center;
    min-height: 9rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: 3px solid var(--study-matcha);
    border-radius: .5rem;
    box-shadow: 0 .55rem 1.4rem rgba(31, 41, 55, .08);
}

.learning-streak-content {
    min-width: 0;
}

.learning-streak-kicker {
    margin-bottom: .2rem;
    color: #6c757d;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.learning-streak-content h2 {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: baseline;
    margin-bottom: .2rem;
    color: #263b2b;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.05;
}

.learning-streak-count {
    font-size: 2.2rem;
    line-height: .95;
}

.learning-streak-kanji {
    color: var(--study-matcha-dark);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.learning-streak-content > p:last-child {
    margin-bottom: 0;
    color: #6c757d;
    font-size: .84rem;
}

.learning-day-history {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .35rem;
    padding-top: .75rem;
    border-top: 1px solid #edf0f2;
}

.learning-day {
    display: grid;
    min-width: 0;
    justify-items: center;
    color: #adb5bd;
}

.learning-day-symbol {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}

.learning-day-label {
    overflow: hidden;
    max-width: 100%;
    margin-top: .2rem;
    font-size: .68rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.learning-day.is-active {
    color: var(--study-matcha-dark);
}

.learning-day.is-active .learning-day-symbol {
    color: var(--study-matcha);
}

.learning-day.is-today .learning-day-label {
    color: #263b2b;
}

.study-score-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .9rem 1rem;
    align-items: center;
    min-height: 9rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    box-shadow: 0 .55rem 1.4rem rgba(31, 41, 55, .08);
}

.study-score-ring {
    --score-value: 0;
    position: relative;
    display: grid;
    width: 5.25rem;
    height: 5.25rem;
    flex: 0 0 auto;
    place-items: center;
    background: conic-gradient(
        var(--study-matcha) calc(var(--score-value) * 1%),
        #e9ecef 0
    );
    border-radius: 50%;
}

.study-score-ring::after {
    position: absolute;
    width: 3.85rem;
    height: 3.85rem;
    background: #fff;
    border-radius: 50%;
    content: "";
}

.study-score-ring span {
    position: relative;
    z-index: 1;
    color: #263b2b;
    font-size: 1.35rem;
    font-weight: 800;
}

.study-score-ring small {
    margin-left: .08rem;
    font-size: .7em;
}

.study-score-copy {
    min-width: 0;
}

.study-score-kicker,
.dashboard-section-kicker {
    margin-bottom: .2rem;
    color: #6c757d;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.study-score-copy h2 {
    margin-bottom: .2rem;
    font-size: 1.25rem;
    font-weight: 800;
}

.study-score-copy p:last-child {
    margin-bottom: 0;
    color: #6c757d;
    font-size: .84rem;
}

.study-score-results {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: .45rem 1rem;
    padding-top: .75rem;
    border-top: 1px solid #edf0f2;
    font-size: .78rem;
}

.study-score-results span {
    display: inline-flex;
    gap: .28rem;
    align-items: baseline;
    color: #6c757d;
}

.study-score-results .is-correct strong {
    color: var(--study-matcha-dark);
}

.study-score-results .is-incorrect strong {
    color: var(--study-sakura-dark);
}

.study-score-week {
    border-top-color: var(--study-yellow);
    border-top-width: 3px;
}

.study-score-today {
    border-top-color: var(--study-sakura);
    border-top-width: 3px;
}

.dashboard-activity-panel {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    box-shadow: 0 .55rem 1.4rem rgba(31, 41, 55, .07);
}

.dashboard-activity-header {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dashboard-activity-header h2 {
    margin-bottom: 0;
    font-size: 1.25rem;
    font-weight: 800;
}

.dashboard-activity-header > span {
    color: #6c757d;
    font-size: .82rem;
}

.dashboard-activity-chart {
    position: relative;
    width: 100%;
    height: clamp(19rem, 42vh, 25rem);
}

@media (max-width: 575.98px) {
    .learning-streak-card,
    .study-score-card {
        padding: 1rem;
    }

    .study-score-ring {
        width: 4.75rem;
        height: 4.75rem;
    }

    .study-score-ring::after {
        width: 3.5rem;
        height: 3.5rem;
    }

    .dashboard-activity-panel {
        padding: 1rem .75rem;
    }

    .dashboard-activity-chart {
        height: 21rem;
    }
}

.japanese-word {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .03em;
    align-items: flex-end;
    line-height: 1.1;
}

.japanese-word ruby {
    ruby-align: center;
}

.japanese-word rt {
    color: #6c757d;
    font-size: .38em;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

.vocabulary-heading-word {
    padding-top: .35em;
}

.deck-filter-panel {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.deck-search-field {
    flex: 0 1 320px;
    min-width: 320px;
    margin-left: auto;
}

.deck-filter-actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: flex-start;
}

.deck-filter-pill {
    border-radius: 999rem;
    font-weight: 700;
}

.deck-filter-actions .btn-check:checked + .btn-outline-success {
    color: #fff;
    background: #198754;
    border-color: #198754;
}

.deck-filter-actions .btn-check:checked + .btn-outline-warning {
    color: #3b2a00;
    background: #ffc107;
    border-color: #ffc107;
}

.deck-filter-empty {
    border-style: solid;
}

@media (max-width: 575.98px) {
    .deck-search-field {
        flex-basis: 100%;
        min-width: 100%;
        margin-left: 0;
    }
}

.deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

@media (min-width: 1200px) {
    .deck-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.deck-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 11rem;
    overflow: hidden;
    padding: 1.5rem;
    color: #1f2937;
    text-decoration: none;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(31, 41, 55, .06);
    transform: perspective(700px) rotateX(var(--deck-rotate-x, 0deg)) rotateY(var(--deck-rotate-y, 0deg)) translateY(var(--deck-lift, 0));
    transform-style: preserve-3d;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.deck-tile:hover,
.deck-tile:focus {
    --deck-lift: -.25rem;
    color: #152238;
    background: #eef6ff;
    border-color: #9ec5fe;
    box-shadow: 0 1rem 2rem rgba(13, 110, 253, .16);
}

.deck-tile-header {
    position: relative;
    z-index: 2;
    display: flow-root;
}

.deck-tile h2 {
    min-width: 0;
    margin-bottom: .75rem;
    font-size: 1.35rem;
    font-weight: 700;
    overflow-wrap: break-word;
}

.deck-progress-pill {
    display: inline-flex;
    float: right;
    flex: 0 0 auto;
    align-items: center;
    min-height: 1.5rem;
    margin-left: .75rem;
    padding: .2rem .6rem;
    color: #0b3b75;
    white-space: nowrap;
    background: #e7f1ff;
    border: 1px solid #9ec5fe;
    border-radius: 999rem;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
}

.deck-tile p {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    overflow: hidden;
    color: #6c757d;
    font-size: .95rem;
    margin-bottom: 1rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.deck-tile:hover p,
.deck-tile:focus p {
    color: #4b647f;
}

.deck-tile-stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    padding-top: .5rem;
    width: 100%;
    margin-top: auto;
    border-top: 1px solid rgba(122, 139, 128, .24);
}

.deck-stat-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 1.25rem;
    padding-inline: .2rem;
    color: #667269;
    gap: .25rem;
    white-space: nowrap;
    font-size: .72rem;
    line-height: 1;
}

.deck-stat-item + .deck-stat-item {
    border-left: 1px solid rgba(122, 139, 128, .24);
}

.deck-stat-item:not(.is-active) {
    opacity: .58;
}

.deck-stat-icons {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .1rem;
}

.deck-stat-icon {
    width: .72rem;
    height: .72rem;
    background-color: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.deck-stat-icon-languages {
    -webkit-mask-image: url("../vendor/lucide/languages.svg");
    mask-image: url("../vendor/lucide/languages.svg");
}

.deck-stat-icon-review {
    -webkit-mask-image: url("../vendor/lucide/refresh-cw.svg");
    mask-image: url("../vendor/lucide/refresh-cw.svg");
}

.deck-stat-icon-learning {
    -webkit-mask-image: url("../vendor/lucide/book-open.svg");
    mask-image: url("../vendor/lucide/book-open.svg");
}

.deck-stat-icon-kanji {
    -webkit-mask-image: url("../vendor/lucide/pen-line.svg");
    mask-image: url("../vendor/lucide/pen-line.svg");
}

.deck-stat-item strong {
    overflow: hidden;
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
}

.deck-stat-vocabulary-review {
    color: var(--study-sakura-dark);
}

.deck-stat-vocabulary-learning {
    color: #a95770;
}

.deck-stat-kanji-review {
    color: var(--study-yellow-dark);
}

.deck-stat-kanji-learning {
    color: #8a6b2d;
}

.deck-tile:hover .deck-progress-pill,
.deck-tile:focus .deck-progress-pill {
    color: #fff;
    background: #0d6efd;
    border-color: #0a58ca;
}

.deck-empty-description {
    font-style: italic;
}

.empty-state {
    background: #fff;
    border: 1px dashed #b7c1ce;
    border-radius: .5rem;
    padding: 2rem;
}

.empty-state h2 {
    margin-bottom: .5rem;
    font-size: 1.35rem;
    font-weight: 700;
}

.empty-state p {
    color: #6c757d;
}

.table-panel {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    overflow: hidden;
}

.table-panel-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
}

.table-panel-header h2 {
    margin-bottom: .25rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.table-panel-header p {
    margin-bottom: 0;
    color: #6c757d;
}

.deck-detail-chart-panel {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    overflow: hidden;
}

.deck-detail-summary-grid > [class*="col-"] {
    display: flex;
}

.deck-detail-summary-card {
    width: 100%;
    min-width: 0;
}

.deck-detail-action-card {
    padding: .9rem;
}

.deck-detail-action-body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: stretch;
    height: 100%;
}

.deck-detail-action-heading {
    display: flex;
    gap: .7rem;
    align-items: center;
    min-width: 0;
}

.deck-detail-action-emblem {
    display: inline-flex;
    flex: 0 0 2rem;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.deck-detail-action-emblem .deck-stat-icon {
    width: 1.55rem;
    height: 1.55rem;
}

.deck-detail-action-emblem-review {
    color: var(--study-sakura-dark);
}

.deck-detail-action-emblem-learning {
    color: #a95770;
}

.deck-detail-action-content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.deck-detail-action-heading h2 {
    margin-bottom: .35rem;
    font-size: 1.08rem;
    font-weight: 700;
}

.deck-detail-action-heading p {
    margin-bottom: 0;
    color: #6c757d;
    font-size: .82rem;
    line-height: 1.3;
}

.deck-detail-action-button {
    height: 100%;
    min-height: 6.5rem;
    max-width: 100%;
    padding: .65rem .5rem .55rem;
    color: var(--deck-action-color);
    background: var(--deck-action-background);
    border: 1px solid color-mix(in srgb, var(--deck-action-color) 24%, transparent);
    border-radius: .5rem;
    box-shadow: 0 .16rem .35rem rgba(55, 86, 62, .045);
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    white-space: normal;
}

a.deck-detail-action-button:hover,
a.deck-detail-action-button:focus-visible {
    color: var(--deck-action-color);
    background: color-mix(in srgb, var(--deck-action-background) 70%, #fff);
    border-color: color-mix(in srgb, var(--deck-action-color) 42%, transparent);
    box-shadow: 0 .3rem .65rem rgba(55, 86, 62, .1);
    transform: translateY(-1px);
}

.deck-detail-action-button.disabled {
    filter: grayscale(.35);
    opacity: .52;
}

.deck-detail-action-vocabulary-review {
    --deck-action-color: var(--study-sakura-dark);
    --deck-action-background: var(--study-sakura-pale);
}

.deck-detail-action-kanji-review {
    --deck-action-color: var(--study-yellow-dark);
    --deck-action-background: var(--study-yellow-soft);
}

.deck-detail-action-vocabulary-learning {
    --deck-action-color: #9a5367;
    --deck-action-background: var(--study-sakura-learning-soft);
}

.deck-detail-action-kanji-learning {
    --deck-action-color: #765d27;
    --deck-action-background: var(--study-yellow-learning-soft);
}

.deck-detail-action-label {
    min-width: 0;
    text-align: center;
    line-height: 1.25;
}

.deck-detail-action-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    min-height: 1.45rem;
    padding: 0 .45rem;
    color: #fff;
    background: var(--deck-action-color);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
}

.deck-detail-action-list {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
}

.deck-detail-action-button.deck-action-link {
    flex-direction: column;
    gap: .4rem;
    justify-content: center;
}

.deck-detail-action-button .deck-action-icons {
    justify-content: center;
    width: 30%;
    min-width: 2.6rem;
    min-height: 2rem;
}

.deck-detail-action-button .deck-action-icons .deck-stat-icon {
    width: 1.3rem;
    height: 1.3rem;
}

.deck-action-link {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    justify-content: flex-start;
}

.page-toolbar .deck-action-link {
    justify-content: center;
}

.deck-action-icons {
    display: inline-flex;
    flex: 0 0 auto;
    gap: .1rem;
    align-items: center;
}

.deck-action-icons .deck-stat-icon {
    width: .82rem;
    height: .82rem;
}

.deck-detail-chart-header {
    padding: 1rem 1.25rem 0;
}

.deck-detail-chart-header h2 {
    margin-bottom: .25rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.deck-detail-chart-header p {
    margin-bottom: 0;
    color: #6c757d;
}

.deck-detail-chart-wrap {
    /* height: clamp(14rem, 34vw, 21rem); */
    height: 170px;
    padding: .75rem 1.25rem 1rem;
}

.deck-settings-header {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.deck-settings-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: flex-end;
}

.deck-setting-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .25rem .6rem;
    color: #6c757d;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
}

.deck-setting-chip.is-enabled {
    color: #0f5132;
    background: #d1e7dd;
    border-color: #a3cfbb;
}

.card-search {
    width: min(100%, 18rem);
}

.compact-card-table th {
    color: #6c757d;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.compact-card-table {
    table-layout: fixed;
}

.compact-card-table td,
.compact-card-table th {
    padding: .85rem 1.25rem;
}

.card-front-column {
    width: 11rem;
}

.card-translation-column {
    width: auto;
}

.card-progress-column {
    width: 11rem;
}

.card-review-column {
    width: 10rem;
}

.clickable-card-row {
    cursor: pointer;
}

.clickable-card-row:focus {
    outline: 2px solid #86b7fe;
    outline-offset: -2px;
}

.card-front-cell {
    font-size: 1.1rem;
    font-weight: 400;
    white-space: nowrap;
}

.card-translation-cell {
    min-width: 0;
}

.translation-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.translation-primary {
    font-weight: 400;
}

.translation-alternative {
    color: #6c757d;
    font-weight: 400;
}

.card-comment-cell {
    max-width: 16rem;
    color: #6c757d;
}

.translation-pill {
    display: inline-block;
    margin: .125rem;
    padding: .2rem .5rem;
    color: #495057;
    background: #f1f3f5;
    border-radius: 999px;
    font-size: .85rem;
}

.translation-header {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.translation-header span {
    color: #6c757d;
    font-size: .9rem;
}

.translation-list {
    display: grid;
    gap: .5rem;
}

.affix-row {
    flex-wrap: nowrap;
}

.affix-input {
    flex: 0 0 4rem;
    max-width: 4rem;
    text-align: center;
}

.kanji-input-group {
    position: relative;
}

.kanji-affix-addon {
    justify-content: center;
    background: #f8f9fa;
}

.translation-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: center;
}

.translation-input-group {
    min-width: 0;
}

.translation-input-group .form-control {
    min-width: 0;
}

.srs-progress {
    display: grid;
    gap: .15rem;
    color: #6c757d;
    font-size: .85rem;
}

.srs-badge {
    display: inline-flex;
    width: fit-content;
    padding: .2rem .5rem;
    color: #0f5132;
    background: #d1e7dd;
    border-radius: 999px;
    font-weight: 700;
}

.card-actions {
    display: flex;
    gap: .4rem;
    justify-content: flex-end;
}

.icon-button {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.icon-button svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.delete-card-preview {
    color: #6c757d;
    font-weight: 700;
}

.learn-shell {
    display: grid;
    gap: 1rem;
}

.learn-panel {
    overflow: hidden;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
}

.learn-panel-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    color: #6c757d;
    border-bottom: 1px solid #dee2e6;
    font-weight: 700;
}

.learn-back-link {
    color: #495057;
    text-decoration: none;
    font-weight: 700;
}

.learn-back-link:hover,
.learn-back-link:focus {
    color: #0d6efd;
    text-decoration: underline;
}

.learn-front-band {
    display: grid;
    min-height: clamp(11rem, 28vh, 18rem);
    place-items: center;
    padding: 2rem;
    color: #102a43;
    background: linear-gradient(135deg, #dbeafe, #ecfdf5);
    text-align: center;
}

[data-learning-quiz][data-quiz-direction="front"],
[data-learning-quiz][data-quiz-direction="kanji_translation"] {
    background: #fff;
    border-color: #efb6c4;
}

[data-learning-quiz][data-quiz-direction="front"] .learn-front-band,
[data-learning-quiz][data-quiz-direction="kanji_translation"] .learn-front-band {
    background: var(--study-sakura-soft);
}

[data-learning-quiz][data-quiz-direction="back"] {
    background: #fff;
    border-color: #a6cf9b;
}

[data-learning-quiz][data-quiz-direction="back"] .learn-front-band {
    background: var(--study-matcha-soft);
}

[data-learning-quiz][data-quiz-direction="kanji_reading"] {
    background: #fff;
    border-color: #e5c56e;
}

[data-learning-quiz][data-quiz-direction="kanji_reading"] .learn-front-band {
    background: var(--study-yellow-soft);
}

.learn-front-band [data-study-front],
.learn-front-band [data-quiz-prompt] {
    width: 100%;
}

.learn-front-prompt {
    display: grid;
    gap: .65rem;
    place-items: center;
    width: 100%;
}

.learn-front-prompt-single {
    font-size: clamp(2.75rem, 8vw, 6rem);
    font-weight: 800;
    line-height: 1.05;
}

.learn-front-reading {
    color: #486581;
    font-size: clamp(1.05rem, 3vw, 1.85rem);
    font-weight: 600;
    line-height: 1.15;
}

.learn-front-main {
    font-size: clamp(2.75rem, 8vw, 6rem);
    font-weight: 800;
    line-height: 1.05;
}

.learn-translation-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    padding: 1.25rem;
}

.learn-translation-tile {
    padding: .65rem .9rem;
    color: #243b53;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    font-weight: 700;
}

.learn-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid #dee2e6;
}

.quiz-answer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
    justify-items: center;
    padding: 1.25rem;
    background: #fff;
}

.quiz-answer-field {
    position: relative;
    width: 100%;
    min-width: 0;
}

.quiz-answer-row .form-control {
    width: 100%;
    min-width: 0;
    padding-right: 3.5rem;
    padding-left: 3.5rem;
    background: #fff;
    border-color: #adb5bd;
    border-width: 2px;
}

.quiz-answer-status-icon {
    position: absolute;
    top: 50%;
    right: 1rem;
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    background: rgba(255, 255, 255, .86);
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

.quiz-answer-status-icon:empty {
    display: none;
}

.quiz-answer-status-icon[data-status="correct"] {
    color: #146c43;
    border: 1px solid #75b798;
}

.quiz-answer-status-icon[data-status="wrong"] {
    color: #b02a37;
    border: 1px solid #ea868f;
}

.quiz-answer-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
}

.quiz-answer-icon-button {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    padding: 0;
    place-items: center;
}

.quiz-action-icon {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    background-color: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.quiz-action-icon-check {
    -webkit-mask-image: url("../vendor/lucide/check.svg");
    mask-image: url("../vendor/lucide/check.svg");
}

.quiz-action-icon-next {
    -webkit-mask-image: url("../vendor/lucide/arrow-right.svg");
    mask-image: url("../vendor/lucide/arrow-right.svg");
}

.quiz-direction-wrap {
    position: relative;
}

.quiz-direction-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.45rem;
    padding: .45rem 1.25rem;
    color: var(--study-sakura-dark);
    background: #f2ccd7;
    border-top: 1px solid rgba(137, 68, 90, .18);
    border-bottom: 1px solid rgba(137, 68, 90, .18);
    font-size: .82rem;
    font-weight: 800;
}

[data-learning-quiz][data-quiz-direction="back"] .quiz-direction-bar {
    color: var(--study-matcha-dark);
    background: #c8dfc0;
    border-color: rgba(45, 90, 55, .16);
}

[data-learning-quiz][data-quiz-direction="kanji_reading"] .quiz-direction-bar {
    color: var(--study-yellow-dark);
    background: #f4d98d;
    border-color: rgba(112, 83, 27, .18);
}

.review-toast-slot {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 2rem);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.review-inline-toast {
    width: auto;
    max-width: min(100%, 18rem);
    margin: 0;
    text-align: center;
    font-weight: 700;
}

.review-deck-label {
    min-width: 0;
    max-width: min(22rem, 45vw);
    padding: .25rem .6rem;
    color: #6c757d;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-inline-toast .toast-body {
    white-space: nowrap;
}

.quiz-answer-row [data-quiz-answer] {
    text-align: center;
}

.quiz-answer-row .form-control.is-correct {
    color: #0f5132;
    background-color: #c7ead3;
    border-color: #198754;
    border-width: 2px;
    box-shadow: 0 0 0 .3rem rgba(25, 135, 84, .2);
    opacity: 1;
}

.quiz-answer-row .form-control.is-wrong {
    color: #842029;
    background-color: #f6cbd0;
    border-color: #dc3545;
    border-width: 2px;
    box-shadow: 0 0 0 .3rem rgba(220, 53, 69, .2);
    opacity: 1;
}

.quiz-answer-row .form-control.shake {
    animation: answer-shake .28s ease-in-out;
}

.solution-card {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    text-align: center;
}

.solution-values {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

.solution-value-tile {
    padding: .65rem .9rem;
    color: #243b53;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    font-weight: 700;
}

.solution-note {
    max-width: 44rem;
    margin: 1rem auto 0;
    color: #6c757d;
}

.kanji-review-due {
    display: block;
    margin-top: .35rem;
    color: #6c757d;
    font-size: .76rem;
    white-space: nowrap;
}

@keyframes answer-shake {
    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-.35rem);
    }

    50% {
        transform: translateX(.35rem);
    }

    75% {
        transform: translateX(-.2rem);
    }
}

.learn-complete-copy {
    padding: 1.25rem;
}

.learn-complete-copy h2 {
    font-size: 1.35rem;
    font-weight: 700;
}

.learn-complete-copy p {
    color: #6c757d;
    margin-bottom: 0;
}

[data-learning-complete] form {
    padding: 0 1.25rem 1.25rem;
}

.review-complete-actions {
    padding: 0 1.25rem 1.25rem;
}

.admin-grid {
    display: grid;
    gap: 1.5rem;
}

.admin-table th {
    color: #6c757d;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-table td,
.admin-table th {
    padding: .85rem 1.25rem;
}

.admin-form-block {
    padding: 1.25rem;
    border-bottom: 1px solid #dee2e6;
}

.admin-user-panel {
    max-width: 44rem;
}

.admin-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin: 1.25rem 0;
}

.vocabulary-formset-list {
    display: grid;
    gap: 1rem;
}

.vocabulary-formset-row {
    display: grid;
    gap: .75rem;
    align-items: start;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eef0f2;
}

.vocabulary-formset-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.vocabulary-formset-row-translation {
    grid-template-columns: minmax(14rem, 1fr) auto;
}

.vocabulary-formset-row-examples {
    grid-template-columns: minmax(16rem, 1.2fr) minmax(16rem, 1fr) minmax(10rem, .7fr);
}

.vocabulary-formset-row-forms {
    grid-template-columns: minmax(10rem, .8fr) minmax(12rem, 1fr) minmax(12rem, 1fr);
}

[data-skk-dictionary-url] {
    position: relative;
}

.skk-suggestion-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1080;
    display: grid;
    width: min(100%, 22rem);
    max-height: 14rem;
    overflow-y: auto;
    margin-top: .25rem;
    padding: .25rem;
    background: #fff;
    border: 1px solid #b7c1ce;
    border-radius: .5rem;
    box-shadow: 0 .75rem 1.5rem rgba(31, 41, 55, .16);
}

.kanji-input-group .skk-suggestion-panel {
    right: 4rem;
    left: 4rem;
    width: auto;
}

.skk-suggestion-option {
    width: 100%;
    padding: .45rem .65rem;
    color: #1f2937;
    background: transparent;
    border: 0;
    border-radius: .35rem;
    text-align: left;
    font-size: 1.05rem;
}

.skk-suggestion-option:hover,
.skk-suggestion-option:focus,
.skk-suggestion-option[aria-selected="true"] {
    color: #0a58ca;
    background: #eef6ff;
}

.vocabulary-edit-table th,
.vocabulary-edit-table td {
    vertical-align: top;
}

.vocabulary-grammar-row {
    cursor: pointer;
}

.vocabulary-grammar-row:hover,
.vocabulary-grammar-row:focus {
    background: #f8f9fa;
}

.vocabulary-grammar-row:focus {
    outline: 2px solid #86b7fe;
    outline-offset: -2px;
}

.grammar-value-cell {
    font-weight: 700;
}

.grammar-stem {
    min-width: 5rem;
    justify-content: center;
    font-weight: 700;
}

@media (max-width: 768px) {
    .vocabulary-formset-row,
    .vocabulary-formset-row-translation,
    .vocabulary-formset-row-examples,
    .vocabulary-formset-row-forms {
        grid-template-columns: 1fr;
    }
}

/* Matcha and sakura visual theme */
.app-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: .55rem 0;
    background: rgba(255, 247, 232, .94);
    border-bottom: 1px solid rgba(221, 194, 150, .72);
    box-shadow: 0 .35rem 1.2rem rgba(55, 86, 62, .07);
    backdrop-filter: blur(12px);
}

.app-brand {
    display: inline-flex;
    gap: .7rem;
    align-items: center;
    padding: 0;
    color: var(--app-ink);
}

.app-brand:hover,
.app-brand:focus {
    color: var(--app-matcha-deep);
}

.app-brand-mark {
    display: block;
    width: 3.35rem;
    height: 3.35rem;
    overflow: hidden;
    background: var(--app-cream);
    border: 2px solid var(--app-matcha-dark);
    border-radius: 50%;
    box-shadow: 0 .25rem .7rem rgba(36, 53, 45, .16);
}

.app-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.32);
}

.app-brand-copy {
    display: grid;
    line-height: 1.05;
}

.app-brand-name {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: .01em;
}

.app-brand-tagline {
    margin-top: .28rem;
    color: var(--app-matcha-dark);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.app-navbar .navbar-nav {
    gap: .25rem;
    margin-left: 1.35rem;
}

.app-navbar .nav-link {
    padding: .5rem .85rem;
    color: #536259;
    border-radius: 999px;
    font-weight: 700;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    color: var(--app-matcha-deep);
    background: rgba(143, 203, 129, .18);
    transform: translateY(-1px);
}

.app-navbar .nav-link.active {
    color: #fff;
    background: var(--app-matcha-dark);
    box-shadow: 0 .25rem .65rem rgba(77, 122, 83, .22);
}

.app-navbar .navbar-text {
    color: var(--app-muted);
    font-size: .88rem;
}

.app-navbar .navbar-toggler {
    padding: .4rem .55rem;
    border-color: rgba(77, 122, 83, .42);
    border-radius: .75rem;
}

.app-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2324352d' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.app-main {
    min-height: calc(100vh - 12rem);
    padding-top: 2rem !important;
    padding-bottom: 3rem !important;
}

.app-footer {
    padding: 1rem 0 0;
}

.app-footer-panel {
    width: 100%;
    overflow: hidden;
    color: #edf7eb;
    background: linear-gradient(145deg, #345f3e, #243f2e);
    border-top: 1px solid rgba(77, 122, 83, .7);
    box-shadow: 0 1rem 2.5rem rgba(36, 53, 45, .16);
}

.app-footer-main {
    display: grid;
    grid-template-columns: minmax(14rem, 1.15fr) minmax(20rem, 1.85fr);
    gap: clamp(2rem, 6vw, 5rem);
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: clamp(1.75rem, 4vw, 2.75rem);
}

.app-footer-about {
    max-width: 24rem;
}

.app-footer-about p {
    margin: 1rem 0 0;
    color: rgba(237, 247, 235, .72);
    font-size: .9rem;
    line-height: 1.7;
}

.app-footer-brand {
    display: inline-flex;
    gap: .8rem;
    align-items: center;
    color: #fff;
    text-decoration: none;
}

.app-footer-brand:hover,
.app-footer-brand:focus {
    color: #fff;
}

.app-footer-brand-mark {
    display: block;
    width: 4rem;
    height: 4rem;
    overflow: hidden;
    background: var(--app-cream);
    border: 2px solid rgba(255, 255, 255, .75);
    border-radius: 50%;
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .2);
}

.app-footer-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.32);
}

.app-footer-brand strong,
.app-footer-brand small {
    display: block;
}

.app-footer-brand strong {
    font-size: 1.4rem;
    font-weight: 900;
}

.app-footer-brand small {
    margin-top: .2rem;
    color: #cbe4c4;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.app-footer-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.app-footer-column {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    align-items: flex-start;
}

.app-footer-column h2 {
    margin: 0 0 .25rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.app-footer-column a,
.app-footer-link-pending {
    color: rgba(237, 247, 235, .76);
    font-size: .9rem;
    text-decoration: none;
}

.app-footer-column a {
    transition: color .18s ease, transform .18s ease;
}

.app-footer-column a:hover,
.app-footer-column a:focus {
    color: #fff;
    transform: translateX(.18rem);
}

.app-footer-link-pending {
    cursor: default;
    opacity: .68;
}

.app-social-link {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
}

.app-social-link svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.app-social-link .app-social-fill {
    fill: currentColor;
    stroke: none;
}

.app-footer-slogans {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: .85rem clamp(1.25rem, 4vw, 2.75rem);
    color: rgba(255, 255, 255, .88);
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    font-size: .9rem;
}

.app-footer-slogans > span {
    flex: 1 1 0;
}

.app-footer-slogans > span:nth-child(2) {
    text-align: center;
}

.app-footer-slogans > span:last-child {
    text-align: right;
}

.app-footer-icon {
    margin-right: .35rem;
    color: var(--app-sakura);
    font-weight: 900;
}

.app-footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: .75rem clamp(1.25rem, 4vw, 2.75rem);
    color: rgba(237, 247, 235, .58);
    font-size: .76rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--app-ink);
    letter-spacing: -.015em;
}

.text-secondary,
.text-muted {
    color: var(--app-muted) !important;
}

.page-heading,
.auth-panel,
.empty-state,
.table-panel,
.deck-detail-chart-panel,
.learn-panel,
.solution-card,
.modal-content {
    background: var(--app-surface);
    border-color: var(--app-cream-deep);
    border-radius: 1.25rem;
    box-shadow: var(--app-shadow);
}

.page-heading {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 2.35rem);
    border-width: 1px;
}

.page-heading::after {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    color: rgba(245, 163, 183, .5);
    content: "✿";
    font-size: 4.5rem;
    line-height: 1;
    transform: translateY(-50%) rotate(12deg);
    pointer-events: none;
}

.page-heading > * {
    position: relative;
    z-index: 1;
}

.page-heading h1 {
    font-weight: 900;
}

.page-heading p {
    color: var(--app-muted);
}

.page-toolbar {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    min-height: 3.6rem;
    padding: .55rem .75rem;
    background: rgba(255, 253, 247, .62);
    border: 1px solid rgba(218, 201, 170, .72);
    border-radius: .9rem;
    box-shadow: 0 .25rem .8rem rgba(55, 86, 62, .045);
}

.app-main > .page-toolbar:first-child {
    margin-top: -2rem;
    background: rgba(255, 250, 240, .9);
    border-top: 0;
    border-radius: 0 0 .9rem .9rem;
    box-shadow: 0 .4rem .9rem rgba(55, 86, 62, .06);
}

.page-toolbar-context {
    display: flex;
    flex: 0 1 auto;
    gap: .75rem;
    align-items: center;
    min-width: 0;
}

.page-toolbar-title-row {
    display: flex;
    gap: .7rem;
    align-items: center;
}

.page-toolbar h1 {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 850;
    line-height: 1.2;
}

.deck-filter-compact {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    justify-content: flex-end;
    width: calc(100% - 2rem);
    min-height: 2.8rem;
    margin: -.4rem auto 0 !important;
    padding: .72rem .65rem .32rem;
    background: rgba(250, 247, 239, .72);
    border: 1px solid rgba(218, 201, 170, .55);
    border-top: 0;
    border-radius: 0 0 .8rem .8rem;
    box-shadow: 0 .3rem .75rem rgba(55, 86, 62, .035);
}

.deck-filter-compact .deck-search-field {
    flex: 0 1 14rem;
    width: 14rem;
    min-width: 10rem;
    margin-left: .2rem;
}

.deck-filter-compact .form-control {
    min-height: 2rem;
}

.deck-filter-compact .btn-sm {
    padding: .3rem .65rem;
    font-size: .74rem;
}

.page-toolbar p {
    max-width: 28rem;
    overflow: hidden;
    margin: .18rem 0 0;
    color: var(--app-muted);
    font-size: .76rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-toolbar-copy {
    min-width: 0;
}

.page-toolbar-back {
    display: inline-flex;
    flex: 0 0 auto;
    gap: .35rem;
    align-items: center;
    padding: .35rem .55rem;
    color: var(--app-muted);
    border-right: 1px solid #e5d9c5;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 750;
}

.page-toolbar-back:hover,
.page-toolbar-back:focus {
    color: var(--app-matcha-deep);
}

.page-toolbar-filters {
    display: flex;
    flex: 1 1 24rem;
    gap: .55rem;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.page-toolbar-filters .deck-search-field {
    flex: 1 1 12rem;
    width: min(15rem, 100%);
    min-width: 10rem;
    max-width: 15rem;
    margin-left: 0;
}

.page-toolbar-filters .form-control {
    min-height: 2rem;
}

.page-toolbar-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.page-toolbar .btn-sm {
    padding: .38rem .7rem;
    font-size: .76rem;
}

.page-toolbar-menu {
    min-width: 14.5rem;
    padding: .4rem;
    background: #fffdf8;
    border-color: #ddccb0;
    border-radius: .8rem;
    box-shadow: var(--app-shadow);
}

.page-toolbar-menu .dropdown-item {
    color: var(--app-ink);
    border-radius: .5rem;
    font-size: .86rem;
}

.page-toolbar-menu .dropdown-item:hover,
.page-toolbar-menu .dropdown-item:focus {
    color: var(--app-matcha-deep);
    background: #e7f2e1;
}

.page-toolbar-menu .dropdown-header {
    color: var(--app-muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-toolbar-menu .dropdown-item-text {
    color: var(--app-muted);
    font-size: .76rem;
}

.page-toolbar-deck .page-toolbar-context {
    flex: 1 1 16rem;
}

.page-toolbar-settings {
    flex: 0 1 auto;
}

.page-toolbar .deck-setting-chip {
    min-height: 1.75rem;
    padding: .2rem .5rem;
    font-size: .72rem;
}

@media (max-width: 1199.98px) {
    .page-toolbar-deck .page-toolbar-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
        padding-top: .55rem;
        border-top: 1px solid rgba(218, 201, 170, .64);
    }
}

@media (max-width: 767.98px) {
    .page-toolbar {
        align-items: stretch;
    }

    .page-toolbar-context,
    .page-toolbar-filters,
    .page-toolbar-actions,
    .page-toolbar-settings {
        flex-basis: 100%;
    }

    .page-toolbar-filters {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-top: .55rem;
        border-top: 1px solid rgba(218, 201, 170, .64);
    }

    .page-toolbar-filters .deck-search-field {
        flex-basis: 100%;
        max-width: none;
    }

    .page-toolbar-actions,
    .page-toolbar-deck .page-toolbar-actions {
        justify-content: flex-start;
        margin-left: 0;
    }

    .page-toolbar-deck .page-toolbar-context {
        align-items: flex-start;
    }

    .page-toolbar p {
        white-space: normal;
    }

    .deck-filter-compact {
        width: calc(100% - 1rem);
        justify-content: flex-start;
    }

    .deck-filter-compact .deck-search-field {
        flex-basis: 100%;
        width: 100%;
        max-width: none;
        margin-left: 0;
    }
}

.auth-panel {
    position: relative;
    overflow: hidden;
    padding: 2.25rem;
}

.auth-panel::before {
    position: absolute;
    top: -1rem;
    right: -1rem;
    display: grid;
    width: 5rem;
    height: 5rem;
    place-items: center;
    color: var(--app-matcha-dark);
    background: var(--app-sakura-soft);
    border-radius: 50%;
    content: "あ";
    font-size: 2rem;
    font-weight: 900;
    transform: rotate(8deg);
}

.auth-panel h1 {
    font-weight: 900;
}

.btn {
    border-radius: 999px;
    font-weight: 750;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.btn:hover:not(:disabled):not(.disabled),
.btn:focus-visible:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-matcha-dark);
    --bs-btn-border-color: var(--app-matcha-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-matcha-deep);
    --bs-btn-hover-border-color: var(--app-matcha-deep);
    --bs-btn-active-bg: #294f33;
    --bs-btn-active-border-color: #294f33;
    --bs-btn-disabled-bg: #91a795;
    --bs-btn-disabled-border-color: #91a795;
    box-shadow: 0 .3rem .7rem rgba(77, 122, 83, .18);
}

.btn-success {
    --bs-btn-color: #173620;
    --bs-btn-bg: var(--app-matcha);
    --bs-btn-border-color: #79b66d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-matcha-dark);
    --bs-btn-hover-border-color: var(--app-matcha-dark);
    --bs-btn-active-bg: var(--app-matcha-deep);
    --bs-btn-active-border-color: var(--app-matcha-deep);
}

.btn-outline-primary {
    --bs-btn-color: var(--app-matcha-dark);
    --bs-btn-border-color: #77a77e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-matcha-dark);
    --bs-btn-hover-border-color: var(--app-matcha-dark);
    --bs-btn-active-bg: var(--app-matcha-deep);
    --bs-btn-active-border-color: var(--app-matcha-deep);
}

.btn-outline-success {
    --bs-btn-color: var(--app-matcha-deep);
    --bs-btn-border-color: #79b66d;
    --bs-btn-hover-color: #173620;
    --bs-btn-hover-bg: #b9dda9;
    --bs-btn-hover-border-color: #79b66d;
}

.btn-outline-secondary,
.btn-light {
    --bs-btn-color: var(--app-ink);
    --bs-btn-bg: #fffdf7;
    --bs-btn-border-color: #d9c7a8;
    --bs-btn-hover-color: var(--app-matcha-deep);
    --bs-btn-hover-bg: #f7eedc;
    --bs-btn-hover-border-color: #cbb58d;
}

.btn-outline-warning {
    --bs-btn-color: #6d5123;
    --bs-btn-border-color: #e7be73;
    --bs-btn-hover-color: #4e3916;
    --bs-btn-hover-bg: #f8ddb0;
    --bs-btn-hover-border-color: #dca94f;
}

.btn-vocabulary-review {
    --bs-btn-color: #4f2130;
    --bs-btn-bg: var(--study-sakura);
    --bs-btn-border-color: #d97992;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #cf6f89;
    --bs-btn-hover-border-color: #c96580;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #bd5b76;
    --bs-btn-active-border-color: #b4516c;
}

.btn-vocabulary-learning {
    --bs-btn-color: #542936;
    --bs-btn-bg: var(--study-sakura-learning);
    --bs-btn-border-color: #dc94a7;
    --bs-btn-hover-color: #542936;
    --bs-btn-hover-bg: #eaa4b6;
    --bs-btn-hover-border-color: #d8869c;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #cf7890;
    --bs-btn-active-border-color: #c86e86;
}

.btn-kanji-review {
    --bs-btn-color: #4f3a10;
    --bs-btn-bg: var(--study-yellow);
    --bs-btn-border-color: #d5aa42;
    --bs-btn-hover-color: #4f3a10;
    --bs-btn-hover-bg: #e5b94f;
    --bs-btn-hover-border-color: #cb9d30;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #bd8e24;
    --bs-btn-active-border-color: #b1831d;
}

.btn-kanji-learning {
    --bs-btn-color: #55431d;
    --bs-btn-bg: var(--study-yellow-learning);
    --bs-btn-border-color: #d7bb73;
    --bs-btn-hover-color: #55431d;
    --bs-btn-hover-bg: #eccd83;
    --bs-btn-hover-border-color: #ceb063;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #c39d45;
    --bs-btn-active-border-color: #b99138;
}

[data-learning-quiz][data-quiz-direction="front"] .quiz-answer-icon-button,
[data-learning-quiz][data-quiz-direction="kanji_translation"] .quiz-answer-icon-button {
    --bs-btn-color: #4f2130;
    --bs-btn-bg: var(--study-sakura);
    --bs-btn-border-color: #d97992;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #cf6f89;
    --bs-btn-hover-border-color: #c96580;
}

[data-learning-quiz][data-quiz-direction="back"] .quiz-answer-icon-button {
    --bs-btn-color: #173620;
    --bs-btn-bg: var(--study-matcha);
    --bs-btn-border-color: #79b66d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-matcha-dark);
    --bs-btn-hover-border-color: var(--app-matcha-dark);
}

[data-learning-quiz][data-quiz-direction="kanji_reading"] .quiz-answer-icon-button {
    --bs-btn-color: #4f3a10;
    --bs-btn-bg: var(--study-yellow);
    --bs-btn-border-color: #d5aa42;
    --bs-btn-hover-color: #4f3a10;
    --bs-btn-hover-bg: #e5b94f;
    --bs-btn-hover-border-color: #cb9d30;
}

.btn-danger,
.btn-outline-danger {
    --bs-btn-bg: #dc718b;
    --bs-btn-border-color: #dc718b;
    --bs-btn-hover-bg: #bf536d;
    --bs-btn-hover-border-color: #bf536d;
}

.btn-outline-danger {
    --bs-btn-color: #b84360;
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: #fff;
}

.form-control,
.form-select,
.input-group-text {
    color: var(--app-ink);
    background-color: #fffdf8;
    border-color: #dbc9aa;
    border-radius: .8rem;
}

.form-control,
.form-select {
    min-height: 2.65rem;
}

.input-group > :not(:first-child) {
    border-left-color: #eadcc4;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--app-matcha);
    box-shadow: 0 0 0 .25rem rgba(143, 203, 129, .24);
}

.form-check-input:checked {
    background-color: var(--app-matcha-dark);
    border-color: var(--app-matcha-dark);
}

.form-label {
    color: #405047;
    font-weight: 700;
}

.modal-header,
.modal-footer,
.table-panel-header,
.learn-panel-header {
    border-color: #eadcc4;
}

.modal-content {
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(90deg, rgba(143, 203, 129, .14), rgba(245, 163, 183, .1));
}

.modal-title {
    font-weight: 800;
}

.alert {
    border-radius: 1rem;
    box-shadow: 0 .35rem .9rem rgba(55, 86, 62, .07);
}

.alert-success {
    color: #285035;
    background: #e3f3dd;
    border-color: #b6dbaa;
}

.alert-info {
    color: #275565;
    background: #e2f4f8;
    border-color: var(--app-sky);
}

.badge {
    border-radius: 999px;
    font-weight: 750;
}

.text-bg-primary {
    color: #fff !important;
    background-color: var(--app-matcha-dark) !important;
}

.text-bg-success {
    color: #173620 !important;
    background-color: #b9dda9 !important;
}

.text-bg-light,
.bg-light {
    color: var(--app-ink) !important;
    background-color: #f8efdf !important;
}

.table {
    --bs-table-color: var(--app-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: #eee1cd;
    --bs-table-hover-bg: rgba(143, 203, 129, .12);
}

.table thead th {
    color: #53665a;
    background: rgba(143, 203, 129, .1);
}

.empty-state {
    border: 2px dashed #dfc9a5;
}

.deck-tile {
    min-height: 12rem;
    color: var(--app-ink);
    background: linear-gradient(145deg, rgba(255, 255, 252, .98), rgba(249, 242, 225, .96));
    border-color: #e4cfaa;
    border-radius: 1.25rem;
    box-shadow: var(--app-shadow);
}

.deck-tile::before {
    position: absolute;
    top: -.8rem;
    right: -.5rem;
    color: rgba(245, 163, 183, .28);
    content: "✿";
    font-size: 4.75rem;
    line-height: 1;
    transform: rotate(16deg);
}

.deck-tile:hover,
.deck-tile:focus {
    color: var(--app-ink);
    background: linear-gradient(145deg, #fffdf7, #e9f4df);
    border-color: var(--app-matcha);
    box-shadow: 0 1rem 2rem rgba(77, 122, 83, .16);
}

.deck-tile p,
.deck-tile:hover p,
.deck-tile:focus p {
    color: var(--app-muted);
}

.deck-progress-pill,
.deck-tile:hover .deck-progress-pill,
.deck-tile:focus .deck-progress-pill {
    color: #2f5b39;
    background: #e2f2db;
    border-color: #a9d09d;
}

.deck-setting-chip {
    color: #667269;
    background: #faf4e8;
    border-color: #dfcfb5;
}

.deck-setting-chip.is-enabled,
.srs-badge {
    color: #285536;
    background: #e0f1da;
    border-color: #a1cc96;
}

.deck-detail-action-card {
    background: linear-gradient(145deg, #fffdf7, #f3ead8);
}

.learn-front-band {
    color: var(--app-ink);
    background: linear-gradient(135deg, #e6f3de, #fff2e0);
}

.learn-back-link {
    color: var(--app-matcha-dark);
}

.learn-back-link:hover,
.learn-back-link:focus {
    color: var(--app-matcha-deep);
}

.learn-translation-tile,
.solution-value-tile {
    color: var(--app-ink);
    background: #fffaf0;
    border-color: #e2cfad;
    border-radius: .85rem;
}

.review-deck-label,
.translation-pill,
.kanji-affix-addon {
    color: #506157;
    background: #f7efdf;
    border-color: #dfcfb5;
}

.clickable-card-row:focus,
.vocabulary-grammar-row:focus {
    outline-color: var(--app-matcha);
}

.skk-suggestion-panel {
    background: #fffdf8;
    border-color: #d8c5a5;
    border-radius: .85rem;
    box-shadow: var(--app-shadow);
}

.skk-suggestion-option {
    color: var(--app-ink);
}

.skk-suggestion-option:hover,
.skk-suggestion-option:focus,
.skk-suggestion-option[aria-selected="true"] {
    color: var(--app-matcha-deep);
    background: #e5f2df;
}

@media (max-width: 991.98px) {
    .app-navbar .navbar-collapse {
        margin-top: .75rem;
        padding: .85rem;
        background: #fffaf0;
        border: 1px solid #ead8b8;
        border-radius: 1rem;
        box-shadow: var(--app-shadow);
    }

    .app-navbar .navbar-nav {
        gap: .2rem;
        margin-left: 0;
    }

    .app-navbar form {
        flex-wrap: wrap;
        padding: .4rem .85rem 0;
    }

    .app-footer-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .app-brand-tagline,
    .app-navbar .navbar-text {
        display: none;
    }

    .app-main {
        padding-top: 1.25rem !important;
    }

    .app-main > .page-toolbar:first-child {
        margin-top: -1.25rem;
    }

    .page-heading,
    .auth-panel {
        padding: 1.35rem;
    }

    .page-heading::after {
        right: -.5rem;
        opacity: .5;
    }

    .app-footer-main {
        gap: 1.75rem;
        padding: 1.5rem;
    }

    .app-footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-footer-slogans,
    .app-footer-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .app-footer-slogans {
        padding: 1rem 1.5rem;
    }

    .app-footer-slogans > span,
    .app-footer-slogans > span:nth-child(2),
    .app-footer-slogans > span:last-child {
        flex-basis: auto;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .app-navbar .nav-link,
    .deck-tile {
        transition: none;
    }
}

.kanji-srs-badge {
    color: #15576b;
    background: #e2f4f8;
    border-color: #91d6e4;
}