.dictionary-page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 auto;
    max-width: 560px;
    min-height: calc(100vh - 65px);
    min-height: calc(100svh - 65px);
    padding: 0 8px 8px;
    width: 100%;
}

.dictionary-level-tabs {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 -8px;
    min-height: clamp(52px, 9svh, 70px);
    position: sticky;
    top: 65px;
    z-index: 9;
}

.dictionary-stat-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dictionary-action-panel {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: auto -8px -8px;
    min-height: clamp(72px, 12svh, 112px);
    position: sticky;
    bottom: 0;
}

.dictionary-progress-page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 auto;
    max-width: 560px;
    min-height: calc(100vh - 65px);
    min-height: calc(100svh - 65px);
    padding: 8px 8px calc(74px + env(safe-area-inset-bottom));
    width: 100%;
}

.dictionary-progress-filters {
    align-items: flex-end;
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: -10px;
}

.dictionary-progress-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dictionary-progress-list > .dictionary-word-card {
    flex: 0 0 auto;
}

.dictionary-word-main {
    align-items: flex-start;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.dictionary-word-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.dictionary-word-progress {
    align-items: flex-start;
    display: flex;
    gap: clamp(18px, 8vw, 34px);
}

.word-testing-page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: calc(100vh - 65px);
    height: calc(100svh - 65px);
    margin: 0 auto;
    max-width: 560px;
    min-height: 0;
    overflow: hidden;
    padding: 8px 8px 0;
    width: 100%;
}

.word-testing-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.word-testing-status-card {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.word-testing-errors-head {
    align-items: center;
    display: flex;
    gap: 8px;
}

.word-testing-error-list {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

.word-testing-options-panel {
    flex: 0 0 auto;
    margin: auto -8px 0;
    position: sticky;
    bottom: 0;
    z-index: 8;
}

.word-testing-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.word-study-page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: calc(100vh - 65px);
    height: calc(100svh - 65px);
    margin: 0 auto;
    max-width: 560px;
    min-height: 0;
    overflow: hidden;
    padding: 8px 8px 0;
    width: 100%;
}

.word-check-page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: calc(100vh - 65px);
    height: calc(100svh - 65px);
    margin: 0 auto;
    max-width: 560px;
    min-height: 0;
    overflow: hidden;
    padding: 8px 8px 0;
    width: 100%;
}

.word-study-screen {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.word-check-screen {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.word-study-center {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    min-height: 0;
    width: 100%;
}

.word-study-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    min-width: 0;
}

.word-study-panel {
    flex: 0 0 auto;
    margin: auto -8px 0;
    position: sticky;
    bottom: 0;
    z-index: 8;
}

.word-check-panel {
    flex: 0 0 auto;
    margin: auto -8px 0;
    position: sticky;
    bottom: 0;
    z-index: 8;
}

.word-check-finish {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 8px;
}

.word-check-finish .dictionary-progress-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

.word-study-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-height: 34svh;
    overflow-y: auto;
}

.word-study-options--wide {
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-height: none;
    overflow: visible;
    width: 100%;
}

.word-study-spacer {
    flex: 1 1 auto;
    min-height: clamp(28px, 8svh, 80px);
}

.word-study-keyboard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.word-study-keyboard-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    width: 100%;
}


.dictionary-course-card,
.dictionary-summary-card,
.dictionary-stat-card,
.dictionary-progress-head-card,
.dictionary-progress-empty-card,
.dictionary-word-card,
.word-testing-translate-card,
.word-testing-status-card,
.word-testing-errors-info-card,
.word-testing-options-panel,
.word-testing-empty-card,
.word-study-task-card,
.word-study-status-card,
.word-study-panel,
.word-check-task-card,
.word-check-status-card,
.word-check-panel,
.word-check-finish-card,
.word-check-finish-info-card,
.word-check-finish-actions-card {
    background: rgb(238 250 255 / 86%);
    border: 1px solid rgb(182 213 255 / 78%);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
    box-sizing: border-box;
    color: #174ea6;
    overflow: hidden;
    padding: 10px;
}

.dictionary-action-panel {
    background: rgb(238 250 255 / 50%);
    border: 1px solid rgb(182 213 255 / 78%);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -3px 8px rgb(0 75 110 / 12%);
    box-sizing: border-box;
    padding: 10px 8px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.dictionary-progress-head-card {
    background: rgb(255 237 173 / 92%);
    border-color: rgb(255 255 255 / 72%);
}

.dictionary-progress-head-card h1 {
    border-bottom: 1px solid rgb(119 199 255 / 50%);
    color: #7271cb;
    font-size: clamp(16px, 4.2vw, 22px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    padding-bottom: 8px;
}

.dictionary-progress-reset-row {
    display: flex;
    justify-content: flex-start;
    padding-top: 10px;
}

.dictionary-progress-reset-warning {
    border-bottom: 1px solid rgb(119 199 255 / 42%);
    color: tomato;
    font-size: clamp(12px, 3.8vw, 15px);
    font-weight: 700;
    line-height: 1.25;
    margin: 10px 0 0;
    padding-bottom: 10px;
}

.dictionary-progress-notes {
    color: #777;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: clamp(13px, 3.6vw, 16px);
    font-weight: 700;
    line-height: 1.35;
    padding-top: 10px;
}

.dictionary-progress-notes p {
    margin: 0;
}

.dictionary-progress-notes p::before {
    content: "* ";
}

.dictionary-progress-level {
    font-family: "Nunito", Arial, sans-serif;
}

.dictionary-word-card {
    background: rgb(255 255 255 / 96%);
    border-color: rgb(255 255 255 / 80%);
    border-radius: 22px;
    color: #777;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.dictionary-word-card--known .dictionary-word-dot--repeat {
    background: #64b5f6;
}

.dictionary-word-title {
    min-width: 0;
}

.dictionary-word-title h2 {
    color: #ff634f;
    font-family: "Nunito", Arial, sans-serif;
    font-size: clamp(20px, 5.6vw, 22px);
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 4px;
    overflow-wrap: anywhere;
}

.dictionary-word-title span {
    color: #a583bb;
    display: block;
    font-family: "Nunito", Arial, sans-serif;
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 900;
    line-height: 1.05;
}

.dictionary-word-translate {
    border-bottom: 1px solid #dedede;
    border-top: 1px solid #dedede;
    color: #1b82bf;
    font-size: clamp(13px, 3.8vw, 16px);
    font-weight: 900;
    line-height: 1.25;
    padding: 6px 0;
}

.dictionary-word-progress-group {
    min-width: 0;
}

.dictionary-word-progress-group span {
    color: #777;
    display: block;
    font-size: clamp(12px, 3.4vw, 14px);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 4px;
}

.dictionary-word-dots {
    display: flex;
    gap: 3px;
}

.dictionary-word-dot {
    background: #cfd8dc;
    border-radius: 999px;
    display: block;
    flex: 0 0 clamp(14px, 3.9vw, 18px);
    height: 9px;
    width: clamp(14px, 3.9vw, 18px);
}

.dictionary-word-dot--repeat {
    background: #64b5f6;
}

.dictionary-word-dot--error {
    background: #ff8a80;
}

.dictionary-progress-divider {
    align-self: center;
    background: #ffdd39;
    border: 2px solid rgb(255 255 255 / 68%);
    border-radius: 0 0 16px 16px;
    border-top: 0;
    box-sizing: border-box;
    color: #555;
    font-family: "Nunito", Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    margin-top: -8px;
    min-width: 104px;
    padding: 8px 16px;
    position: relative;
    text-align: center;
    z-index: 1;
}

.dictionary-progress-empty-card {
    color: #777;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
}

.dictionary-course-card {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: clamp(60px, 10svh, 76px);
    text-align: center;
}

.dictionary-course-card h1 {
    color: #ff6b00;
    font-size: clamp(12px, 5vw, 16px);
    font-weight: 900;
    line-height: 1.22;
    margin: 0;
    text-transform: uppercase;
}

.dictionary-course-name {
    font-family: "Nunito", Arial, sans-serif;
}

.dictionary-summary-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    min-height: clamp(86px, 14svh, 108px);
}

.dictionary-summary-numbers {
    align-items: center;
    color: #0300ff;
    display: flex;
    flex-wrap: wrap;
    font-family: "Nunito", Arial, sans-serif;
    font-size: clamp(13px, 4.2vw, 16px);
    font-weight: 900;
    gap: 8px;
    justify-content: center;
    line-height: 1.1;
}

.dictionary-summary-numbers strong {
    font-weight: 900;
}

.dictionary-progress-wrap {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.dictionary-progress-track,
.dictionary-stat-line {
    background: #d8d8d8;
    border-radius: 999px;
    height: clamp(8px, 1.5svh, 10px);
    overflow: hidden;
    width: 100%;
}

.dictionary-progress-track span,
.dictionary-stat-line span {
    background: #22c91c;
    display: block;
    height: 100%;
}

.dictionary-progress-label {
    align-items: center;
    background: #20cf1e;
    border-radius: 24px;
    color: #fff;
    display: inline-flex;
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    min-width: clamp(130px, 40vw, 150px);
    padding: clamp(8px, 1.4svh, 9px) clamp(14px, 4vw, 15px);
    text-align: center;
    text-decoration: none;
}

.dictionary-stat-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    min-height: clamp(76px, 11svh, 96px);
    padding: 8px 12px;
}

.dictionary-stat-card h2 {
    color: #505050;
    font-size: clamp(11px, 3.2vw, 14px);
    font-weight: 900;
    line-height: 1.05;
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

.dictionary-stat-card strong {
    font-family: "Nunito", Arial, sans-serif;
    font-size: clamp(22px, 6.5vw, 26px);
    font-weight: 900;
    line-height: 1;
}

.dictionary-stat-card--started strong {
    color: #ff9800;
}

.dictionary-stat-card--repeat-3 strong {
    color: #18b62a;
}

.dictionary-stat-card--repeat-7 strong {
    color: #004dff;
}

.dictionary-stat-card--repeat-21 strong {
    color: #e02fe4;
}

.word-testing-translate-card {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    min-height: clamp(104px, 20svh, 132px);
    text-align: center;
}

.word-testing-translate {
    color: #6b72d3;
    font-size: clamp(22px, 6vw, 28px);
    font-weight: 900;
    line-height: 1.2;
}

.word-testing-status-card {
    flex: 0 0 auto;
    min-height: 58px;
}

.word-testing-counter {
    align-items: center;
    background: #fff176;
    border: 2px solid rgb(245 200 50 / 70%);
    border-radius: 14px;
    box-sizing: border-box;
    color: #795f00;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: "Nunito", Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    justify-content: center;
    min-height: 38px;
    min-width: 56px;
    padding: 6px 10px;
}

.word-testing-errors-info-card {
    background: rgb(220 244 255 / 88%);
    border-color: rgb(119 199 255 / 72%);
    flex: 0 0 auto;
}

.word-testing-errors-head {
    color: #667079;
    font-size: clamp(12px, 3.6vw, 14px);
    font-weight: 900;
    line-height: 1.2;
}

.word-testing-error-count {
    align-items: center;
    background: #fff176;
    border-radius: 12px;
    color: #2445c4;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: "Nunito", Arial, sans-serif;
    font-size: 16px;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
}

.word-testing-mistake-card {
    flex: 0 0 auto;
}

.word-testing-mistake-card .dictionary-word-main {
    align-items: center;
}

.word-testing-options-panel {
    background: rgb(238 250 255 / 72%);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    padding: 14px 8px calc(14px + env(safe-area-inset-bottom));
}

.word-testing-empty-card {
    color: #667079;
    font-size: 16px;
    font-weight: 900;
    margin-top: 8px;
    text-align: center;
}

.word-study-status-card {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-height: 58px;
}

.word-check-status-card {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-height: 58px;
}

.word-study-counter {
    align-items: center;
    background: #fff176;
    border: 2px solid rgb(245 200 50 / 70%);
    border-radius: 14px;
    box-sizing: border-box;
    color: #795f00;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: "Nunito", Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    min-height: 38px;
    min-width: 56px;
    padding: 6px 10px;
}

.word-study-task-card {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    min-height: clamp(118px, 21svh, 154px);
}

.word-check-task-card {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    min-height: clamp(128px, 24svh, 168px);
}

.word-study-word {
    background: rgb(255 255 255 / 80%);
    border: 1px solid rgb(182 213 255 / 78%);
    border-radius: 14px;
    box-shadow: 0 2px 5px rgb(0 75 110 / 16%);
    box-sizing: border-box;
    color: #243070;
    display: inline-flex;
    font-family: "Nunito", Arial, sans-serif;
    font-size: clamp(26px, 7vw, 32px);
    font-weight: 900;
    line-height: 1.05;
    margin: 0;
    overflow-wrap: anywhere;
    padding: 8px 12px;
    text-align: center;
}

.word-study-translate {
    color: #6b72d3;
    font-size: clamp(22px, 6vw, 26px);
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}

.word-study-translate-part {
    display: inline;
}

.word-study-translate-part--1 {
    color: #4056be;
}

.word-study-translate-part--2 {
    color: #6f7fda;
}

.word-study-translate-part--3 {
    color: #92a0ee;
}

.word-study-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.word-study-letter-slot {
    align-items: center;
    background: #dfe6ea;
    border: 2px solid #d4dadd;
    border-radius: 12px;
    box-sizing: border-box;
    color: #174ea6;
    display: inline-flex;
    font-family: "Nunito", Arial, sans-serif;
    font-size: clamp(18px, 5.4vw, 24px);
    font-weight: 900;
    height: clamp(38px, 10vw, 46px);
    justify-content: center;
    min-width: clamp(34px, 9vw, 44px);
    padding: 4px 8px;
    text-transform: lowercase;
}

.word-study-letter-slot--filled {
    background: #29c535;
    border-color: rgb(255 255 255 / 68%);
    color: #fff;
}

.word-study-panel {
    background: rgb(238 250 255 / 72%);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    padding: 14px 8px calc(14px + env(safe-area-inset-bottom));
}

.word-check-panel {
    background: rgb(238 250 255 / 72%);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    padding: 14px 8px calc(14px + env(safe-area-inset-bottom));
}

.word-check-finish-card {
    align-items: stretch;
    background: rgb(220 244 255 / 88%);
    border-color: rgb(119 199 255 / 72%);
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.word-check-finish-info-card {
    background: rgb(220 244 255 / 88%);
    border-color: rgb(119 199 255 / 72%);
    flex: 0 0 auto;
}

.word-check-finish-title-row {
    align-items: center;
    display: flex;
    gap: 10px;
}

.word-check-finish-icon {
    align-items: center;
    background: #20c91c;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.word-check-finish-icon img {
    display: block;
    filter: brightness(0) invert(1);
    height: 24px;
    width: 24px;
}

.word-check-finish-card h1 {
    color: #234dc5;
    font-size: clamp(18px, 5vw, 24px);
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
}

.word-check-finish-text {
    color: #666;
    display: block;
    font-size: clamp(13px, 3.8vw, 15px);
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.word-check-finish-actions-card {
    align-items: center;
    background: rgb(220 244 255 / 88%);
    border-color: rgb(119 199 255 / 72%);
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    justify-content: space-between;
}

.word-check-result-card--wrong {
    background: rgb(255 238 235 / 96%);
    border-color: rgb(255 143 126 / 70%);
}

.dictionary-main-action {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    background: linear-gradient(90deg, #41c548 0%, #28d800 50%, #389b3d 100%);
    border: 0;
    border-radius: 28px;
    box-shadow: 0 4px 8px rgb(0 75 110 / 22%);
    box-sizing: border-box;
    color: #fff;
    display: inline-flex;
    font: inherit;
    font-size: clamp(22px, 7vw, 26px);
    font-weight: 900;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1;
    min-height: clamp(60px, 10svh, 76px);
    min-width: clamp(190px, 64vw, 240px);
    overflow: hidden;
    padding: 10px clamp(22px, 8vw, 30px);
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 0.08s ease, filter 0.08s ease;
}

.dictionary-main-action--shine::after {
    animation: dictionary-main-action-shine 2.8s ease-in-out infinite;
    background: linear-gradient(115deg, transparent 0%, transparent 42%, rgb(255 255 255 / 42%) 50%, transparent 58%, transparent 100%);
    content: "";
    inset: -35% -60%;
    pointer-events: none;
    position: absolute;
    transform: translateX(-70%);
}

.dictionary-progress-filter {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    background: rgb(255 142 126 / 94%);
    border: 2px solid rgb(255 255 255 / 68%);
    border-radius: 16px 16px 0 0;
    box-sizing: border-box;
    color: #fff;
    display: inline-flex;
    font: inherit;
    font-size: clamp(13px, 3.6vw, 16px);
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    min-height: 40px;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgb(0 0 0 / 16%);
}

.dictionary-progress-filter--active {
    background: rgb(48 181 103 / 96%);
}

.dictionary-progress-reset-confirm {
    display: inline-flex;
    margin: 0;
}

.dictionary-word-action {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    background: #dfe6ea;
    border: 2px solid #d4dadd;
    border-radius: 14px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    height: clamp(34px, 10vw, 36px);
    justify-content: center;
    padding: 0;
    transition: transform 0.08s ease, filter 0.08s ease, background-color 0.08s ease;
    width: clamp(34px, 10vw, 36px);
}

.dictionary-word-action--known.dictionary-word-action--active {
    background: #ffeb66;
    border-color: #f3ca32;
    box-shadow: 0 2px 5px rgb(150 120 0 / 22%);
}

.dictionary-word-action img {
    display: block;
    height: clamp(20px, 5.8vw, 22px);
    object-fit: contain;
    width: clamp(20px, 5.8vw, 22px);
}

.dictionary-progress-up {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    background: #17a8ee;
    border: 0;
    border-radius: 18px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 3px 9px rgb(0 75 110 / 24%);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 16px;
    font-weight: 900;
    justify-content: center;
    left: 50%;
    line-height: 1;
    min-height: 44px;
    min-width: 64px;
    opacity: 0;
    padding: 8px 14px;
    pointer-events: none;
    position: fixed;
    text-align: center;
    transform: translateX(-50%) translateY(10px);
    transition: opacity 0.12s ease, transform 0.12s ease, filter 0.08s ease;
    z-index: 12;
}

.dictionary-progress-up--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%);
}

.dictionary-progress-up img {
    display: block;
    filter: brightness(0) invert(1);
    height: 26px;
    width: 26px;
}

.dictionary-main-action:active,
.dictionary-progress-filter:active,
.dictionary-word-action:active {
    filter: brightness(0.96);
    transform: translateY(1px) scale(0.98);
}

.dictionary-progress-up:active {
    filter: brightness(0.96);
    transform: translateX(-50%) translateY(1px) scale(0.98);
}

.word-check-finish-home {
    background: rgb(238 250 255 / 90%);
    border-color: rgb(182 213 255 / 84%);
    border-radius: 12px;
    height: 56px;
    text-decoration: none;
    width: 56px;
}

.word-check-finish-home img {
    height: 30px;
    width: 30px;
}

.word-check-finish-next {
    text-decoration: none;
}



.exercise-puzzle--wide .word-study-translate-part {
    color: #fff;
    display: inline;
}

.word-study-audio-button {
    height: clamp(58px, 16vw, 72px);
    width: clamp(58px, 16vw, 72px);
}

.word-study-audio-button img {
    height: clamp(34px, 9vw, 42px);
    width: clamp(34px, 9vw, 42px);
}

.word-study-key {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    background: rgb(255 255 255 / 90%);
    border: 1px solid rgb(182 213 255 / 82%);
    border-radius: 12px;
    box-shadow: 0 2px 5px rgb(0 69 112 / 14%);
    box-sizing: border-box;
    color: #174ea6;
    cursor: pointer;
    display: inline-flex;
    flex: 1 1 0;
    font: inherit;
    font-family: "Nunito", Arial, sans-serif;
    font-size: clamp(18px, 5.6vw, 22px);
    font-weight: 900;
    height: clamp(44px, 11vw, 48px);
    justify-content: center;
    line-height: 1;
    max-width: 42px;
    min-width: 0;
    padding: 2px 0 0;
    text-align: center;
    text-transform: uppercase;
    transition: transform 0.08s ease, filter 0.08s ease, background-color 0.08s ease;
}

.word-study-key:active,
.word-study-key--pressed {
    background: #fff6a8;
    border-color: #ffd45c;
    box-shadow: inset 0 2px 4px rgb(122 93 0 / 20%);
}

.word-study-key--space {
    flex: 1 1 60%;
    font-size: clamp(16px, 4.8vw, 20px);
    max-width: none;
    text-transform: uppercase;
}

.word-study-key--backspace {
    background: rgb(255 231 226 / 92%);
    border-color: rgb(247 132 114 / 58%);
    color: #f05f4c;
    flex: 0 0 clamp(58px, 17vw, 68px);
    font-size: clamp(20px, 6vw, 24px);
    max-width: none;
    padding-bottom: 2px;
}

.word-study-key--backspace img {
    display: block;
    filter: invert(52%) sepia(89%) saturate(1569%) hue-rotate(326deg) brightness(96%) contrast(95%);
    height: clamp(22px, 6vw, 26px);
    width: clamp(22px, 6vw, 26px);
}

@keyframes dictionary-main-action-shine {
    0% {
        transform: translateX(-70%);
    }

    48%,
    100% {
        transform: translateX(70%);
    }
}


.word-study-input {
    background: rgb(255 255 255 / 96%);
    border: 2px solid #d4dadd;
    border-radius: 16px;
    box-sizing: border-box;
    color: #174ea6;
    font: inherit;
    font-family: "Nunito", Arial, sans-serif;
    font-size: clamp(24px, 7vw, 34px);
    font-weight: 900;
    line-height: 1;
    max-width: 300px;
    min-height: clamp(54px, 13vw, 66px);
    outline: none;
    padding: 10px 14px;
    text-align: center;
    transition: background-color 0.08s ease, border-color 0.08s ease, box-shadow 0.08s ease;
    width: 100%;
}

.word-study-input:focus {
    border-color: #174ea6;
}

.word-study-input:disabled {
    opacity: 1;
}

.word-study-input--correct {
    background: rgb(224 255 221 / 96%);
    border-color: #29c535;
    box-shadow: 0 0 0 3px rgb(41 197 53 / 18%);
}

.word-study-input--wrong {
    background: rgb(255 221 216 / 96%);
    border-color: tomato;
    box-shadow: 0 0 0 3px rgb(255 99 71 / 20%);
}