/* ===== CSS Variables ===== */
:root {
    --bg-color: #1a1e24;
    --card-bg: #222731;
    --text-color: #e2e8f0;
    --text-muted: #94a3b8;
    --border-color: #334155;
    --active-gray: #475569;
    --danger-color: #b13e3e;
    --success-color: #2b6e5e;
    --again-color: var(--danger-color);
    --hard-color: #b8953a;
    --good-color: var(--success-color);
    --easy-color: #3b89c4;
    --radius: 12px;
    --font-stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --highlight-bg: #2a3a4a;
    --tab-height: 56px;
    --tab-icon-size: 22px;
    --tab-label-size: 10px;
    --beginner-color: #c45a5a;
    --intermediate-color: #b8953a;
    --advanced-color: #4a8c7a;
    --shadow-color: rgba(0, 0, 0, 0.08);
    --shadow-color-strong: rgba(0, 0, 0, 0.15);
}

[data-theme='light'] {
    --bg-color: #f5f7fa;
    --card-bg: #ffffff;
    --text-color: #1a1f2e;
    --text-muted: #6b7a8f;
    --border-color: #e4e8ef;
    --active-gray: #dce1e9;
    --danger-color: #b13e3e;
    --success-color: #2b6e5e;
    --highlight-bg: #eef1f5;
    --shadow-color: rgba(0, 0, 0, 0.05);
    --shadow-color-strong: rgba(0, 0, 0, 0.1);
}

/* ===== Reset ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

input[type='text'],
input[type='number'],
textarea,
.editable-item input[type='text'] {
    user-select: text;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--font-stack);
    font-weight: 400;
    line-height: 1.7;
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
    transition:
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 32px 32px;
}
[data-theme='light'] body {
    background-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
::-webkit-scrollbar-corner {
    background: transparent;
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

/* ===== App Layout ===== */
.app-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 16px 12px 16px;
    padding-bottom: calc(12px + var(--tab-height) + 12px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.app-content:has(#view-word-edit.active) {
    padding-bottom: calc(12px + var(--tab-height) + 72px + env(safe-area-inset-bottom, 0px));
}
/* Test view: no scroll, no bounce */
.app-content:has(#view-test.active) {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
}

/* ===== Header ===== */
.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 8px 16px;
    flex-shrink: 0;
    min-height: 48px;
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    transition:
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    min-height: 36px;
}

.back-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
    color: var(--text-color);
    background: none;
    border: none;
    padding: 0;
    border-radius: 50%;
    transition:
        background 0.15s ease,
        transform 0.15s ease;
    flex-shrink: 0;
}
.back-btn:active {
    background: var(--active-gray);
    transform: scale(0.92);
}
.back-btn.visible {
    display: inline-flex;
}
.back-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-color);
    display: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-title.visible {
    display: block;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ===== Tab Bar ===== */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    z-index: 100;
    transition:
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -2px 12px var(--shadow-color);
}
[data-theme='dark'] .tab-bar {
    background: rgba(34, 39, 49, 0.92);
}
[data-theme='light'] .tab-bar {
    background: rgba(255, 255, 255, 0.92);
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 1px;
    cursor: pointer;
    color: var(--text-muted);
    background: none;
    border: none;
    padding: 4px 0;
    font-family: var(--font-stack);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
}
.tab-item:active {
    opacity: 0.6;
}
.tab-item.active {
    color: var(--text-color);
}
.tab-item .tab-icon {
    width: var(--tab-icon-size);
    height: var(--tab-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tab-item.active .tab-icon {
    transform: translateY(-2px);
}
.tab-item:active .tab-icon {
    transform: scale(0.85);
    transition: transform 0.1s ease;
}
.tab-item .tab-label {
    font-size: var(--tab-label-size);
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.2;
    transition: opacity 0.2s ease;
}

/* ===== Views ===== */
#view-add {
    position: relative;
}
.view {
    display: none;
    min-height: auto;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#view-groups.active {
    min-height: auto;
}
.view.active {
    display: block;
    opacity: 1;
    height: auto;
    min-height: 100%;
}
/* Groups view uses normal app scrolling */
#view-groups {
    min-height: auto;
    height: auto;
    overflow: visible;
    padding-top: 0;
}

#view-groups.active {
    height: auto;
    min-height: 100%;
    overflow: visible;
}
/* Test view uses flex layout */
#view-test {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
}
#view-test.active {
    display: flex;
}

/* ===== Typography ===== */
.nav-title,
.test-word,
.result-header,
.settings-stat-grid .stat-number,
.settings-proficiency-grid .prof-count {
    letter-spacing: -0.3px;
}

/* ===== Existing styles (adapted) ===== */
input[type='text'],
input[type='number'],
textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-family: var(--font-stack);
    font-size: 16px;
    background-color: var(--card-bg);
    color: var(--text-color);
    outline: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
input[type='text']:focus,
input[type='number']:focus,
textarea:focus {
    border-color: var(--text-muted);
    box-shadow: 0 0 0 3px rgba(43, 110, 94, 0.15);
}
input[type='text'] {
    margin-bottom: 24px;
}
textarea {
    resize: none;
    height: 100px;
    margin-bottom: 16px;
}

button {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-family: var(--font-stack);
    font-size: 14px;
    color: var(--text-color);
    cursor: pointer;
    outline: none;
    transition:
        background-color 0.15s ease,
        border-color 0.2s ease,
        transform 0.1s ease;
}
button:active {
    background-color: var(--active-gray);
    transform: scale(0.96);
}
button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

.scrollable-word-wrapper {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.scrollable-word-wrapper::-webkit-scrollbar {
    height: 2px;
}
.scrollable-word-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-color);
}
.scrollable-word-wrapper .word-name {
    display: inline-block;
}

.audio-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    cursor: pointer;
    vertical-align: middle;
    color: var(--text-muted);
    transition:
        color 0.15s ease,
        transform 0.15s ease;
    background: none;
    border: none;
    padding: 0;
    flex-shrink: 0;
}
.audio-icon:active {
    color: var(--text-color);
    transform: scale(0.85);
}

.search-loading-box {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    margin: -12px 0 0 0;
}
.search-loading-bar {
    width: 40%;
    height: 100%;
    background-color: var(--text-muted);
    position: absolute;
    left: -40%;
    animation: line-load 1.2s infinite ease-in-out;
    border-radius: 2px;
}
@keyframes line-load {
    0% {
        left: -40%;
        width: 40%;
    }
    50% {
        width: 60%;
    }
    100% {
        left: 100%;
        width: 20%;
    }
}

.result-card {
    margin-top: 0;
    padding: 0 0 4px 0;
}

/* ===== Result header - Add view ===== */
.result-header-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 2px 0;
    width: 100%;
}

.result-header {
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: -0.3px;
    word-break: break-word;
    line-height: 1.3;
    max-width: 100%;
    display: block;
}

.result-phonetic {
    font-size: 15px;
    color: var(--text-muted);
    font-weight: 400;
    cursor: pointer;
    word-break: break-all;
    line-height: 1.4;
    max-width: 100%;
    display: block;
}

/* Phonetic row: audio icon on the left, phonetic wraps on the right */
.result-phonetic-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
}
.result-phonetic-row .audio-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    cursor: pointer;
    color: var(--text-muted);
    transition:
        color 0.15s ease,
        transform 0.15s ease;
    background: none;
    border: none;
    padding: 0;
    flex-shrink: 0;
    margin-left: 0;
}
.result-phonetic-row .result-phonetic {
    flex: 1;
    min-width: 0;
    margin-left: 0;
}

.result-meta {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
    font-style: italic;
}

.result-definition {
    font-size: 15px;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    cursor: pointer;
}
.result-definition .pos-block {
    margin-bottom: 12px;
}
.result-definition .pos-title {
    font-style: italic;
    color: var(--text-muted);
    font-size: 14px;
}

.add-extra-section {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.add-extra-block {
    margin-bottom: 12px;
}
.add-extra-block:last-child {
    margin-bottom: 0;
}
.add-extra-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 6px;
}
.add-extra-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.add-extra-item {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.6;
    word-break: break-word;
}

.result-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}

.result-left-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-add-action {
    border-color: var(--success-color);
    color: var(--success-color);
    padding: 8px 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-add-action:active {
    transform: scale(0.96);
}
.btn-add-action.added {
    border-color: var(--border-color);
    color: var(--text-muted);
}

.more-link {
    font-size: 14px;
    color: #6a9fb5;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    display: inline-block;
    transition: opacity 0.2s ease;
}
.more-link:active {
    opacity: 0.7;
}
.more-link:visited {
    color: #6a9fb5;
}

[data-theme='light'] .more-link {
    color: #4a7a8a;
}
[data-theme='light'] .more-link:visited {
    color: #4a7a8a;
}

/* ===== Word List ===== */
.word-list {
    list-style: none;
    position: relative;
    padding: 0;
    padding-bottom: 8px;
}

.word-item {
    background: var(--card-bg);
    border-radius: var(--radius);
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px var(--shadow-color);
    transition:
        transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.3s ease,
        opacity 0.3s ease,
        background-color 0.2s ease;
    border: 1px solid var(--border-color);
    box-shadow:
        0 1px 3px var(--shadow-color),
        inset 0 0 0 1px var(--card-bg);
}
.word-item .delete-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 79px;
    background-color: var(--danger-color);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    z-index: 1;
    cursor: pointer;
    border-radius: 0 var(--radius) var(--radius) 0;
    transition: opacity 0.15s ease;
    min-width: 60px;
    max-width: 100%;
    flex-shrink: 0;
    transform: translateX(-1px);
}

.word-item .word-main-content {
    display: flex;
    width: 100%;
    padding: 14px 12px;
    position: relative;
    z-index: 2;
    background-color: var(--card-bg);
    transition:
        transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        background-color 0.2s ease;
    border-radius: var(--radius);
    overflow: hidden;
}

.word-item .word-row {
    display: flex;
    align-items: center;
    width: 100%;
    flex-wrap: nowrap;
    gap: 2px 6px;
    overflow: hidden;
}

.word-item .word-name-box {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 45%;
}

.word-item .word-name-box::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
    width: 0;
    height: 0;
}
.word-item .word-name-box::-webkit-scrollbar-thumb {
    background: var(--border-color);
}
.word-item .word-name-box.limited {
    max-width: 180px;
    overflow-x: auto;
}
.word-item .word-name-box.queued-word {
    max-width: 220px;
}
.word-item .word-name-box.unlimited {
    max-width: 100%;
    overflow-x: auto;
}

.word-item .word-name {
    font-weight: 600;
    white-space: nowrap;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
}

.word-item .word-name-box.queued-word .word-name {
    max-width: calc(100% - 46px);
}
.word-item.expanded .word-name {
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}
.word-item .word-phonetic {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 2px;
    flex-shrink: 0;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
}
.word-item .word-phonetic.phonetic-short {
    max-width: 80px;
}
.word-item .word-spacer {
    display: inline-block;
    width: 8px;
    flex-shrink: 0;
}

.word-item .word-preview {
    color: var(--text-muted);
    font-size: 14px;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    word-break: keep-all;
}
.word-item.expanded .word-phonetic {
    order: 3;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    word-break: break-all;
    margin-left: 0;
    overflow: visible;
    text-overflow: clip;
}

.word-item.expanded .word-row {
    flex-wrap: wrap;
}

.word-item.expanded .word-name-box {
    flex: 0 0 100%;
    max-width: 100%;
    order: 1;
}

.word-item.expanded .word-phonetic {
    order: 3;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    word-break: break-all;
    margin-left: 0;
    overflow: visible;
    text-overflow: clip;
}

.word-item.expanded .audio-icon.item-list-speaker {
    flex: 0 0 auto;
    order: 2;
    align-self: flex-start;
    margin-top: 0;
    margin-right: 6px;
}
/* ===== Group Card ===== */
.group-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px var(--shadow-color);
    transition:
        transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.3s ease,
        opacity 0.3s ease,
        background-color 0.2s ease;
    border: 1px solid var(--border-color);
    box-shadow:
        0 1px 3px var(--shadow-color),
        inset 0 0 0 1px var(--card-bg);
}
.group-card .delete-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 79px;
    background-color: var(--danger-color);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    z-index: 1;
    cursor: pointer;
    border-radius: 0 var(--radius) var(--radius) 0;
    transition: opacity 0.15s ease;
    min-width: 60px;
    max-width: 100%;
    flex-shrink: 0;
    transform: translateX(-1px);
}
.group-card .group-main-content {
    display: flex;
    width: 100%;
    padding: 14px 12px;
    position: relative;
    z-index: 2;
    background-color: var(--card-bg);
    transition:
        transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        background-color 0.2s ease;
    border-radius: var(--radius);
    overflow: hidden;
}
.group-card .group-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 6px;
}
.group-card .group-name {
    font-weight: 600;
    font-size: 16px;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}
.group-card .group-count {
    font-size: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 8px;
}
.group-card .group-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: var(--text-muted);
    background: none;
    border: none;
    padding: 0;
    border-radius: var(--radius);
    transition:
        color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
    flex-shrink: 0;
}
.group-card .group-edit-btn:active {
    color: var(--text-color);
    background: var(--active-gray);
    transform: scale(0.85);
}
.group-card .group-detail-grid {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.group-card.expanded .group-detail-grid {
    grid-template-rows: 1fr;
}
.group-card .group-detail-overflow {
    overflow: hidden;
}
.group-card .group-detail {
    font-size: 14px;
    color: var(--text-color);
    padding-top: 4px;
    padding-bottom: 8px;
    background-color: var(--card-bg);
}
.group-card .group-word-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px 0;
}
.group-card .group-word-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.6;
    font-family: var(--font-stack);
    word-break: break-word;
    text-align: left;
    margin: 0;
}
.group-card .group-word-tag:active {
    transform: scale(0.94);
    background: var(--active-gray);
}
.group-card .group-detail-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 4px 0;
}

.group-card .group-static-box {
    display: block;
}
.group-card .group-edit-box {
    display: none;
    padding: 0;
}
.group-card.editing .group-static-box {
    display: none;
}
.group-card.editing .group-edit-box {
    display: block;
}
.group-card .group-edit-box .edit-container {
    padding: 6px 0 2px 0;
    border: none;
    background: transparent;
}
.group-card .group-edit-box .edit-container .group-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.group-card .group-edit-box .edit-container .group-edit-row input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    outline: none;
    margin: 0;
}
.group-card .group-edit-box .edit-container .group-edit-row input:focus {
    border-color: var(--active-gray);
    box-shadow: 0 0 0 2px rgba(43, 110, 94, 0.12);
}
.group-card .group-edit-box .edit-container .group-edit-row button {
    padding: 6px 14px;
    height: 36px;
    font-size: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 500;
}
.group-card .group-edit-box .edit-container .group-edit-row button:active {
    background: var(--active-gray);
    transform: scale(0.92);
}
.group-card .group-edit-box .edit-container .group-edit-row .btn-save {
    border-color: var(--success-color);
    color: var(--success-color);
}
.group-card .group-edit-box .edit-container .group-edit-row .btn-save:active {
    background: rgba(43, 110, 94, 0.15);
}
.group-card .group-edit-box .edit-container .group-edit-row .btn-cancel {
    color: var(--text-muted);
}

.group-card .group-edit-box .edit-container {
    margin-top: 0;
}
.group-card.entering {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: none;
}
.group-card.entering.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity 0.3s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ===== Group Manage Mode ===== */
.group-card .group-manage-btn-wrap {
    padding: 6px 0 2px 0;
}
.group-card .group-manage-btn {
    background: none;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    text-align: center;
    font-weight: 500;
}
.group-card .group-manage-btn:active {
    background: var(--active-gray);
    transform: scale(0.96);
}
.group-card .group-manage-container {
    margin-top: 4px;
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
}
.group-card .group-manage-list {
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
}
.group-card .group-manage-list::-webkit-scrollbar {
    width: 3px;
}
.group-card .group-manage-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}
.group-card .group-manage-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
    border-bottom: 1px solid var(--border-color);
    min-height: 32px;
}
.group-card .group-manage-item:last-child {
    border-bottom: none;
}
.group-card .group-manage-item input[type='checkbox'] {
    width: 18px;
    height: 18px;
    accent-color: var(--success-color);
    cursor: pointer;
    flex-shrink: 0;
    transition: accent-color 0.2s ease;
}
.group-card .group-manage-word-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.group-card .group-manage-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 0;
    text-align: center;
}
.group-card .group-manage-actions {
    display: flex;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
}
.group-card .group-manage-actions button {
    flex: 1;
    padding: 6px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
}
.group-card .group-manage-actions button:active {
    transform: scale(0.96);
    background: var(--active-gray);
}
.group-card .group-manage-actions .group-manage-save {
    border-color: var(--success-color);
    color: var(--success-color);
}
.group-card .group-manage-actions .group-manage-save:active {
    background: rgba(43, 110, 94, 0.15);
}
.group-card.manage-mode .delete-btn {
    display: none;
}
.group-card.manage-mode .group-main-content {
    pointer-events: none;
}
.group-card.manage-mode .group-manage-container {
    pointer-events: auto;
}
.group-card.manage-mode .group-manage-list {
    pointer-events: auto;
}
.group-card.manage-mode .group-manage-actions {
    pointer-events: auto;
}
.word-item .word-detail-grid {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}
.word-item.expanded .word-detail-grid {
    grid-template-rows: 1fr;
}

.word-item .word-detail-overflow {
    overflow: hidden;
}

.word-item .word-detail {
    font-size: 14px;
    color: var(--text-color);
    padding-top: 4px;
    padding-bottom: 8px;
    background-color: var(--card-bg);
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.word-item.expanded .word-preview,
.word-item.expanded .word-spacer {
    display: none;
}

.word-item.editing .word-row {
    display: none;
}
.word-item.editing .word-detail-grid {
    grid-template-rows: 1fr;
}

/* ===== Family Group ===== */
.family-group {
    margin-bottom: 8px;
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 1px 3px var(--shadow-color);
    transition:
        box-shadow 0.3s ease,
        background-color 0.2s ease;
}
.family-group:last-child {
    margin-bottom: 0;
}

.family-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 10px 14px;
    cursor: pointer;
    user-select: none;
    background: var(--bg-color);
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--border-color);
}
.family-group-header:active {
    background: var(--active-gray);
}

.family-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.family-group-title .family-icon-svg {
    flex-shrink: 0;
    color: var(--text-muted);
}
.family-group-title .family-root {
    font-weight: 600;
    font-size: 15px;
}
.family-group-title .family-count {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 2px;
}

.family-group-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.family-group-controls .family-toggle-svg {
    color: var(--text-muted);
    transition: transform 0.2s ease;
    cursor: pointer;
}
.family-group-controls .family-toggle-svg.expanded {
    transform: rotate(180deg);
}

.family-group-body {
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 0.25s ease;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
}
.family-group-body.expanded {
    max-height: 5000px;
    opacity: 1;
}

.family-group-body .word-item {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--border-color);
}
.family-group-body .word-item:last-child {
    border-bottom: none;
}
.family-group-body .word-item .word-main-content {
    padding: 12px 11px;
    border-radius: 0;
}
.family-group-body .word-item .delete-btn {
    border-radius: 0;
}
.family-group-body .word-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.family-group-body .word-item:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ===== Test Zone ===== */
.test-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    padding: 8px 0 8px 0;
    overflow: hidden;
    position: relative;
    overscroll-behavior: none;
}

.test-word-box {
    text-align: center;
    padding: 4px 0 6px 0;
    flex-shrink: 0;
}

.test-word {
    font-size: 33px;
    font-weight: 700;
    margin-bottom: 2px;
    letter-spacing: -0.3px;
    line-height: 54px;
    min-height: 54px;
    white-space: nowrap;
}

.test-phonetic {
    font-size: 16px;
    color: var(--text-muted);
    font-weight: 400;
    min-height: 24px;
    display: block;
    line-height: 1.4;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}
.test-status-tag {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.5px;
    line-height: 1.5 !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 8px auto 12px auto;
    text-align: center;
    flex-shrink: 0 !important;
    max-width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.test-def-wrapper {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    margin: 8px 0 12px 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
}

.test-def-box {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 12px;
    font-size: 15px;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
    opacity: 0.7;
    transition: opacity 0.35s ease;
    -webkit-overflow-scrolling: touch;
    cursor: default;
    overscroll-behavior: contain;
}
.test-extra-block {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.test-extra-title {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 600;
}
.test-blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
    letter-spacing: 0.5px;
    cursor: pointer;
    z-index: 5;
    opacity: 1;
    transition: none; /* Instant appear, no enter animation */
    background-color: rgba(var(--card-bg-rgb, 34, 39, 49), 0.6);
    --card-bg-rgb: 34, 39, 49;
    border-radius: inherit;
}

[data-theme='light'] .test-blur-overlay {
    --card-bg-rgb: 255, 255, 255;
    background-color: rgba(255, 255, 255, 0.6);
}

.test-blur-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
    background: transparent;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
}

.test-blur-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease; /* Fade out animation */
}

.test-actions-vertical {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    flex-shrink: 0;
    padding-bottom: 4px;
}
.test-actions-vertical button {
    width: 100%;
    height: 50px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.test-actions-vertical button:active {
    transform: scale(0.96);
}

#btnAgain {
    border-color: var(--again-color);
    color: var(--again-color);
}
#btnAgain:active {
    background-color: rgba(177, 62, 62, 0.15);
}

#btnHard {
    border-color: var(--hard-color);
    color: var(--hard-color);
}
#btnHard:active {
    background-color: rgba(184, 149, 58, 0.15);
}

#btnGood {
    border-color: var(--good-color);
    color: var(--good-color);
}
#btnGood:active {
    background-color: rgba(43, 110, 94, 0.15);
}

#btnEasy {
    border-color: var(--easy-color);
    color: var(--easy-color);
}
#btnEasy:active {
    background-color: rgba(59, 137, 196, 0.15);
}

.test-settings-toggle {
    display: flex;
    justify-content: flex-end;
    margin: 4px 0 8px 0;
}
.test-settings-toggle button {
    padding: 4px 12px;
    font-size: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.test-settings-toggle button:active {
    background: var(--active-gray);
    transform: scale(0.96);
}
.test-settings-toggle button.active {
    border-color: var(--text-color);
    color: var(--text-color);
    background: var(--active-gray);
}

/* ===== Settings Overlays ===== */
.test-settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 997;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}
.test-settings-overlay.show {
    opacity: 1;
    visibility: visible;
}

.test-settings-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 80vh;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    z-index: 998;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    border-radius: 16px 16px 0 0;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
.test-settings-panel.show {
    transform: translateY(0);
}

.test-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 17px;
    position: sticky;
    top: 0;
    background: var(--card-bg);
    padding: 20px 20px 12px 20px;
    z-index: 5;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.test-settings-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    transition: transform 0.15s ease;
}
.test-settings-close:active {
    transform: scale(0.85);
}

.test-mode-selector {
    display: flex;
    gap: 8px;
    margin: 4px 0 12px 0;
}
.test-mode-selector button {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.test-mode-selector button:active {
    transform: scale(0.96);
}
.test-mode-selector button.active {
    border-color: var(--text-color);
    color: var(--text-color);
    background: var(--active-gray);
}
.test-mode-selector button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
}

.test-group-selector {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0 4px 0;
}
.test-group-selector .group-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    cursor: pointer;
    min-width: 0;
}
.test-group-selector .group-check-item input[type='checkbox'] {
    width: 18px;
    height: 18px;
    accent-color: var(--success-color);
    cursor: pointer;
    flex-shrink: 0;
    transition: accent-color 0.2s ease;
}
.test-group-selector .group-check-item .group-name {
    font-size: 13px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.test-group-selector .group-check-item .group-count-badge {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 4px;
}

/* ===== Edit Container ===== */
.edit-container {
    margin-top: 8px;
    padding: 12px;
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}
.edit-container textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-family: var(--font-stack);
    font-size: 14px;
    background: var(--bg-color);
    color: var(--text-color);
    outline: none;
    resize: vertical;
    min-height: 60px;
    margin-bottom: 8px;
}
.edit-container .edit-field {
    margin-bottom: 8px;
}
.edit-container .edit-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    margin-bottom: 2px;
    font-weight: 600;
}
#addEditWordTitle {
    word-break: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}
.edit-container .sm2-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 6px 0;
}
.edit-container .sm2-row label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-muted);
}
.edit-container .sm2-row input {
    width: 44px;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 13px;
    text-align: center;
    outline: none;
    margin-bottom: 0;
}
.edit-container .sm2-row input:focus {
    border-color: var(--active-gray);
    box-shadow: 0 0 0 2px rgba(43, 110, 94, 0.12);
}
.edit-buttons {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-end;
}
.edit-buttons button {
    padding: 6px 14px;
    border-radius: var(--radius);
    font-size: 12px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    height: auto;
    width: auto;
    font-weight: 500;
    transition: all 0.15s ease;
}
.edit-buttons button:active {
    background: var(--active-gray);
    transform: scale(0.96);
}
.edit-buttons .btn-save {
    border-color: var(--success-color);
    color: var(--success-color);
}
.edit-buttons .btn-save:active {
    background: rgba(43, 110, 94, 0.15);
}
.edit-buttons .btn-reset {
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* ===== Filter ===== */
.filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
    transition:
        background 0.15s ease,
        transform 0.15s ease;
    height: 40px;
    flex-shrink: 0;
    font-weight: 500;
}
.filter-toggle-btn:active {
    background: var(--active-gray);
    transform: scale(0.96);
}
.filter-toggle-btn .badge {
    background: var(--active-gray);
    color: var(--text-color);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.filter-toggle-btn.hidden-filter-btn {
display: none !important;
}

.view-mode-toggle {
    display: inline-flex;
    width: 46px;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 13px;
    font-family: var(--font-stack);
    font-weight: 500;
    cursor: pointer;
    height: 40px;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}

.view-mode-toggle svg {
    display: block;
    pointer-events: none;
}
.view-mode-toggle:active {
    background: var(--active-gray);
    transform: scale(0.96);
}

.filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 997;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}
.filter-overlay.show {
    opacity: 1;
    visibility: visible;
}

.filter-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 80vh;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    z-index: 998;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    border-radius: 16px 16px 0 0;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
.filter-panel.show {
    transform: translateY(0);
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 17px;
    position: sticky;
    top: 0;
    background: var(--card-bg);
    padding: 20px 20px 12px 20px;
    z-index: 5;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.filter-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    transition: transform 0.15s ease;
}
.filter-close:active {
    transform: scale(0.85);
}

.filter-section {
    margin-bottom: 18px;
}
.filter-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    font-weight: 600;
}

.filter-slider-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 2px;
    height: 40px;
}
.filter-slider-track {
    flex: 1;
    position: relative;
    height: 3px;
    background: var(--border-color);
    border-radius: 2px;
}
.filter-slider-track input[type='range'] {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: -8px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
    outline: none;
    pointer-events: none;
    margin: 0;
    padding: 0;
}
.filter-slider-track input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--active-gray);
    cursor: pointer;
    pointer-events: auto;
    border: 2px solid var(--bg-color);
    box-shadow: 0 0 0 1px var(--border-color);
    position: relative;
    z-index: 2;
    transition:
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.filter-slider-track input[type='range']::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--active-gray);
    cursor: pointer;
    pointer-events: auto;
    border: 2px solid var(--bg-color);
    box-shadow: 0 0 0 1px var(--border-color);
    position: relative;
    z-index: 2;
}
.filter-slider-track input[type='range']::-ms-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--active-gray);
    cursor: pointer;
    pointer-events: auto;
    border: 2px solid var(--bg-color);
    box-shadow: 0 0 0 1px var(--border-color);
    position: relative;
    z-index: 2;
}
.filter-slider-track input[type='range']::-webkit-slider-track {
    height: 3px;
    background: transparent;
    border-radius: 2px;
}
.filter-slider-track input[type='range']::-moz-range-track {
    height: 3px;
    background: transparent;
    border-radius: 2px;
    border: none;
}
.filter-slider-track input[type='range']::-ms-track {
    height: 3px;
    background: transparent;
    border-radius: 2px;
    border: none;
}
.filter-slider-values {
    font-size: 13px;
    min-width: 76px;
    color: var(--text-muted);
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    cursor: pointer;
}
.filter-checkbox input[type='checkbox'] {
    width: 18px;
    height: 18px;
    accent-color: var(--success-color);
    cursor: pointer;
    transition: accent-color 0.2s ease;
}

.filter-groups-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    padding: 4px 0;
}
.filter-groups-grid .filter-checkbox {
    padding: 2px 0;
    font-size: 14px;
    min-width: 0;
}
.filter-groups-grid .group-count {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
}
.filter-groups-grid .group-name-truncated {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.filter-actions {
    display: flex;
    gap: 10px;
    padding: 12px 20px 20px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-shrink: 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.filter-actions button {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.filter-actions button:active {
    transform: scale(0.96);
}

.btn-reset {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}
.btn-apply {
    border-color: var(--success-color);
    color: var(--success-color);
}
.btn-apply:active {
    background: rgba(43, 110, 94, 0.15);
}

.group-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.group-input-row input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
    outline: none;
    margin-bottom: 0;
}
.group-input-row input:focus {
    border-color: var(--active-gray);
    box-shadow: 0 0 0 2px rgba(43, 110, 94, 0.12);
}
.group-input-row button {
    padding: 6px 14px;
    height: auto;
    font-size: 12px;
    white-space: nowrap;
    font-weight: 500;
    transition: all 0.15s ease;
}
.group-input-row button:active {
    transform: scale(0.96);
}
.group-input-row .btn-add-group {
    border-color: var(--success-color);
    color: var(--success-color);
}
.group-input-row .btn-add-group:active {
    background: rgba(43, 110, 94, 0.15);
}

/* ===== Group Selector ===== */
.group-selector-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s,
        visibility 0.2s;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.group-selector-overlay.show {
    opacity: 1;
    visibility: visible;
}

.group-selector-panel {
    background: var(--card-bg);
    border-radius: 16px 16px 0 0;
    padding: 0 0 30px;
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: 500px;
    max-height: 70vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.group-selector-overlay.show .group-selector-panel {
    transform: translateY(0);
}

.group-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 17px;
    min-width: 0;
    position: sticky;
    top: 0;
    background: var(--card-bg);
    padding: 20px 20px 12px 20px;
    z-index: 5;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.group-selector-header .close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.group-selector-header .close-btn:active {
    transform: scale(0.85);
}
.group-selector-header .header-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-selector-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    min-width: 0;
}
.group-selector-item:last-child {
    border-bottom: none;
}
.group-selector-item input[type='checkbox'] {
    width: 18px;
    height: 18px;
    accent-color: var(--success-color);
    cursor: pointer;
    flex-shrink: 0;
    transition: accent-color 0.2s ease;
}
.group-selector-item .group-name {
    font-size: 14px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.group-selector-item .group-count {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 4px;
}

.group-selector-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding: 16px 20px 0 20px;
    border-top: 1px solid var(--border-color);
}
.group-selector-actions button {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.group-selector-actions button:active {
    transform: scale(0.96);
}
.group-selector-actions .btn-cancel {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}
.group-selector-actions .btn-save-groups {
    border-color: var(--success-color);
    color: var(--success-color);
}
.group-selector-actions .btn-save-groups:active {
    background: rgba(43, 110, 94, 0.15);
}

/* ===== List Header ===== */
.list-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 0 12px 0;
    position: sticky;
    top: -16px;
    z-index: 10;
    background-color: var(--bg-color);
}
.list-header .search-box {
    flex: 1;
    position: relative;
}
.list-header .search-box input {
    width: 100%;
    padding: 8px 40px 8px 38px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 14px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
    margin-bottom: 0;
    height: 40px;
}
.list-header .search-box input:focus {
    border-color: var(--text-muted);
    box-shadow: 0 0 0 3px rgba(43, 110, 94, 0.12);
}
.list-header .search-box .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.list-header .search-box .clear-search {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    display: none;
    padding: 0;
    transition: transform 0.15s ease;
}
.list-header .search-box .clear-search:active {
    transform: translateY(-50%) scale(0.85);
}
.list-header .search-box .clear-search.visible {
    display: block;
}

/* ===== Toast ===== */
#toastMessage {
    position: fixed;
    bottom: calc(80px + var(--tab-height) + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: var(--card-bg);
    color: var(--text-color);
    padding: 12px 24px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px var(--shadow-color-strong);
    z-index: 1000;
    display: none;
    font-size: 14px;
    max-width: calc(100% - 32px);
    text-align: center;
    pointer-events: auto;
    overflow-wrap: anywhere;
    max-height: 60vh;
    overflow-y: auto;
    opacity: 0;
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.35s ease;
}
#toastMessage.show {
    display: block;
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
#toastMessage.success {
    border-color: var(--success-color);
}

/* ===== Misc ===== */
.edit-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--text-muted);
    transition:
        color 0.15s ease,
        transform 0.15s ease;
    background: none;
    border: none;
    padding: 0;
}
.edit-action-icon:active {
    color: var(--text-color);
    transform: scale(0.85);
}

.word-actions-bottom {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    align-items: center;
}
.word-actions-bottom .more-link {
    margin-right: auto;
}
.word-actions-bottom .action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--text-muted);
    background: none;
    border: none;
    padding: 0;
    border-radius: var(--radius);
    transition:
        color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}
.word-actions-bottom .action-icon:active {
    color: var(--text-color);
    background: var(--active-gray);
    transform: scale(0.85);
}

.import-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}
.import-confirm-overlay.show {
    opacity: 1;
    visibility: visible;
}

.import-confirm-box {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 24px;
    max-width: 340px;
    width: 90%;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px var(--shadow-color-strong);
}
.import-confirm-box .title {
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 12px;
}
.import-confirm-box .desc {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
}
.import-confirm-box .actions {
    display: flex;
    gap: 10px;
}
.import-confirm-box .actions button {
    flex: 1;
    padding: 10px;
    font-weight: 600;
    transition: all 0.15s ease;
}
.import-confirm-box .actions button:active {
    transform: scale(0.96);
}
.import-confirm-box .actions .btn-merge {
    border-color: var(--success-color);
    color: var(--success-color);
}
.import-confirm-box .actions .btn-overwrite {
    border-color: var(--danger-color);
    color: var(--danger-color);
}
.import-confirm-box .actions .btn-cancel-import {
    border-color: var(--border-color);
    color: var(--text-muted);
}

.confirm-box {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 24px;
    max-width: 340px;
    width: 90%;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px var(--shadow-color-strong);
}
.confirm-box .title {
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 8px;
}
.confirm-box .desc {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
    word-break: break-all;
    overflow-wrap: break-word;
}
.confirm-box .actions {
    display: flex;
    gap: 10px;
}
.confirm-box .actions button {
    flex: 1;
    padding: 10px;
    font-weight: 600;
    transition: all 0.15s ease;
}
.confirm-box .actions button:active {
    transform: scale(0.96);
}
.confirm-box .actions .btn-confirm-cancel {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}
.confirm-box .actions .btn-confirm-delete {
    border-color: var(--danger-color);
    color: var(--danger-color);
}
.confirm-box .actions .btn-confirm-delete:active {
    background: rgba(177, 62, 62, 0.15);
}
.confirm-box .actions .btn-confirm-save {
    border-color: var(--success-color);
    color: var(--success-color);
}
.confirm-box .actions .btn-confirm-save:active {
    background: rgba(43, 110, 94, 0.15);
}
.definition-more-row {
    margin-top: 8px;
    text-align: left;
}
.definition-more-row .more-link {
    font-size: 13px;
}

.btn-new-group {
    background: none;
    border: 1px dashed var(--border-color);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: var(--radius);
    font-size: 12px;
    cursor: pointer;
    margin-top: 4px;
    width: 100%;
    transition: all 0.15s ease;
}
.btn-new-group:active {
    background: var(--active-gray);
    transform: scale(0.96);
}

.filter-group-item {
    display: flex;
    align-items: center;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    transition: background 0.15s;
    min-height: 36px;
    gap: 4px;
}
.filter-group-item:last-child {
    border-bottom: none;
}
.filter-group-item .group-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    position: relative;
}
.filter-group-item .group-info input[type='checkbox'] {
    width: 18px;
    height: 18px;
    accent-color: var(--success-color);
    cursor: pointer;
    flex-shrink: 0;
    transition: accent-color 0.2s ease;
}
.filter-group-item .group-name-display {
    font-size: 14px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filter-group-item .group-name-display.editing {
    display: none;
}
.filter-group-item .group-name-input {
    display: none;
    flex: 1;
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
    outline: none;
    min-width: 0;
    height: 28px;
    margin: 0;
}
.filter-group-item .group-name-input:focus {
    border-color: var(--active-gray);
    box-shadow: 0 0 0 2px rgba(43, 110, 94, 0.12);
}
.filter-group-item .group-name-input.visible {
    display: block;
}
.filter-group-item .group-count {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 4px;
}
.filter-group-item .group-actions {
    display: none;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}
.filter-group-item .group-actions.visible {
    display: flex;
}
.filter-group-item .group-actions button {
    padding: 4px;
    height: 28px;
    width: 28px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.15s ease;
}
.filter-group-item .group-actions button:active {
    background: var(--active-gray);
    transform: scale(0.92);
}
.filter-group-item .group-actions .btn-group-delete {
    color: var(--danger-color);
    border-color: var(--danger-color);
}
.filter-group-item .group-actions .btn-group-delete:active {
    background: rgba(177, 62, 62, 0.15);
}
.filter-group-item .group-actions .btn-group-edit {
    color: var(--text-color);
}
.filter-group-item .group-edit-confirm {
    display: none;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}
.filter-group-item .group-edit-confirm.visible {
    display: flex;
}
.filter-group-item .group-edit-confirm button {
    padding: 2px 6px;
    height: 26px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.filter-group-item .group-edit-confirm button:active {
    transform: scale(0.92);
}
.filter-group-item .group-edit-confirm .btn-confirm {
    border-color: var(--success-color);
    color: var(--success-color);
}
.filter-group-item .group-edit-confirm .btn-confirm:active {
    background: rgba(43, 110, 94, 0.15);
}
.filter-group-item .group-edit-confirm .btn-cancel-edit {
    color: var(--text-muted);
}
.filter-group-item .group-actions .btn-group-edit svg,
.filter-group-item .group-actions .btn-group-delete svg,
.filter-group-item .group-edit-confirm button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.filter-group-item .group-actions .btn-group-delete svg {
    stroke: var(--danger-color);
}
.filter-group-item .group-edit-confirm .btn-confirm svg {
    stroke: var(--success-color);
}
.filter-group-item.highlighted {
    background: var(--active-gray);
    border-radius: var(--radius);
}

.confirm-delete-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}
.confirm-delete-overlay.show {
    opacity: 1;
    visibility: visible;
}

.word-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.word-actions .action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--text-muted);
    background: none;
    border: none;
    padding: 0;
    border-radius: var(--radius);
    transition:
        color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}
.word-actions .action-icon:active {
    color: var(--text-color);
    background: var(--active-gray);
    transform: scale(0.85);
}

.pos-badge {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin-right: 4px;
}

.test-more-row {
    margin-top: 12px;
    text-align: center;
}
.test-more-row .more-link {
    font-size: 13px;
}

.test-settings-actions .btn-apply-settings {
    border-color: var(--success-color);
    color: var(--success-color);
    transition: all 0.15s ease;
}
.test-settings-actions .btn-apply-settings:active {
    background: rgba(43, 110, 94, 0.15);
    transform: scale(0.96);
}

/* ===== Family ===== */
.family-compact {
    margin: 6px 0;
}
.family-row {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 2px 0;
    user-select: none;
}
.family-row:active {
    opacity: 0.6;
}
.family-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 11px;
    color: var(--text-muted);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.family-arrow.expanded {
    transform: rotate(90deg);
}
.family-tags-wrap {
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 0.25s ease;
    opacity: 0;
}
.family-tags-wrap.expanded {
    max-height: 1000px;
    opacity: 1;
}
.family-label {
    font-size: 13px;
    color: var(--text-muted);
}
.family-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px 0 2px 0;
}
.family-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.6;
}
.family-tag:active {
    transform: scale(0.94);
    background: var(--active-gray);
}
.family-tag.current {
    border-color: var(--text-color);
    background: var(--active-gray);
    cursor: default;
}
.family-tag.current:active {
    transform: none;
}

/* ===== Synonyms ===== */
.synonym-section {
    margin: 6px 0;
    display: none;
}
.synonym-row {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 2px 0;
    user-select: none;
}
.synonym-row:active {
    opacity: 0.6;
}
.synonym-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 11px;
    color: var(--text-muted);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.synonym-arrow.expanded {
    transform: rotate(90deg);
}
.synonym-label {
    font-size: 13px;
    color: var(--text-muted);
}
.synonym-tags-wrap {
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 0.25s ease;
    opacity: 0;
}
.synonym-tags-wrap.expanded {
    max-height: 1000px;
    opacity: 1;
}
.synonym-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px 0 2px 14px;
}
.synonym-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.6;
}
.synonym-tag:active {
    transform: scale(0.94);
    background: var(--active-gray);
}
.synonym-loading {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 0 2px 14px;
}

.family-root-edit .family-root-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
    outline: none;
    margin: 0;
}
.family-root-edit .family-root-input:focus {
    border-color: var(--active-gray);
    box-shadow: 0 0 0 2px rgba(43, 110, 94, 0.12);
}
.family-root-edit .family-reset-btn {
    padding: 4px 10px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    display: none;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.family-root-edit .family-reset-btn:active {
    background: var(--active-gray);
    transform: scale(0.96);
}
.family-root-edit .family-reset-btn.visible {
    display: inline-block;
}
.family-root-edit .family-preview {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
    min-height: 20px;
    word-break: break-word;
}

.mode-selector {
    display: flex;
    gap: 8px;
    margin: 4px 0 12px 0;
}
.mode-selector button {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.mode-selector button:active {
    transform: scale(0.96);
}
.mode-selector button.active {
    border-color: var(--text-color);
    color: var(--text-color);
    background: var(--active-gray);
}

/* ===== Examples & Phrases ===== */
.sub-section {
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
    padding-top: 4px;
    overflow: visible;
}
.sub-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 3px 0;
    cursor: default;
    user-select: none;
    flex-wrap: wrap;
    font-size: 13px;
}
.sub-section-header .label {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-color);
}
.sub-section-header .badge-count {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 0px;
}
.sub-section-header .header-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    flex-shrink: 0;
}
.sub-section-header .header-actions button {
    padding: 2px 10px;
    font-size: 11px;
    height: 26px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    min-width: 32px;
    transition: all 0.15s ease;
    font-weight: 500;
}
.sub-section-header .header-actions button:active {
    background: var(--active-gray);
    transform: scale(0.92);
}
.sub-section-header .header-actions .ai-btn {
    border-color: var(--success-color);
    color: var(--success-color);
    position: relative;
}
.sub-section-header .header-actions .ai-btn:active {
    background: rgba(43, 110, 94, 0.15);
}
.sub-section-header .header-actions .add-btn {
    border-color: var(--text-color);
    color: var(--text-color);
    font-size: 13px;
    padding: 2px 8px;
    min-width: 28px;
}

.sub-section-body {
    overflow: visible;
}
.sub-section-body .item-list {
    padding: 3px 0 5px 0;
}

/* ===== Sub-items ===== */
.item-list {
    padding: 4px 0;
}

.item-row {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
    transition: none;
}
.item-row:last-child {
    border-bottom: none;
}

.item-row .item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 6px 3px;
    transition: transform 0.2s ease;
    background: var(--card-bg);
    position: relative;
    z-index: 2;
    width: 100%;
}

.item-row .item-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    padding-right: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.item-row .edit-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0;
    transition: color 0.15s ease;
}
.item-row .edit-btn:active {
    color: var(--text-color);
    transform: none;
}

.item-row .delete-area {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    background: var(--danger-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0;
    z-index: 1;
    pointer-events: none;
}
.item-row.swiped .delete-area {
    pointer-events: auto;
}

.ai-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    z-index: 999;
    min-width: 120px;
    display: none;
    box-shadow: 0 4px 16px var(--shadow-color-strong);
    padding: 4px 0;
    margin-top: 2px;
}
.ai-dropdown.visible {
    display: block;
}
.ai-dropdown .opt {
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-color);
    transition: background 0.1s ease;
}
.ai-dropdown .opt:active {
    background: var(--active-gray);
}
.ai-dropdown .opt.disabled {
    color: var(--text-muted);
    opacity: 0.4;
    cursor: not-allowed;
}

.api-key-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1002;
    display: none;
    align-items: center;
    justify-content: center;
}
.api-key-modal.visible {
    display: flex;
}
.api-key-modal .modal-box {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 24px;
    max-width: 360px;
    width: 90%;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px var(--shadow-color-strong);
}
.api-key-modal .modal-box .title {
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 8px;
}
.api-key-modal .modal-box .desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
    word-break: break-all;
}
.api-key-modal .modal-box input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
    outline: none;
    margin-bottom: 12px;
}
.api-key-modal .modal-box input:focus {
    border-color: var(--active-gray);
    box-shadow: 0 0 0 2px rgba(43, 110, 94, 0.12);
}
.api-key-modal .modal-box .actions {
    display: flex;
    gap: 10px;
}
.api-key-modal .modal-box .actions button {
    flex: 1;
    padding: 8px;
    font-size: 13px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.api-key-modal .modal-box .actions button:active {
    transform: scale(0.96);
}
.api-key-modal .modal-box .actions .btn-save-key {
    border-color: var(--success-color);
    color: var(--success-color);
}
.api-key-modal .modal-box .actions .btn-save-key:active {
    background: rgba(43, 110, 94, 0.15);
}
.api-key-modal .modal-box .actions .btn-cancel-key {
    color: var(--text-muted);
}
.api-key-modal .modal-box .key-display {
    font-size: 13px;
    color: var(--text-muted);
    word-break: break-all;
    background: var(--bg-color);
    padding: 6px 10px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
}
.api-key-modal .modal-box .key-status-text {
    font-size: 12px;
    margin-bottom: 8px;
}
.api-key-modal .modal-box .key-status-text.set {
    color: var(--success-color);
}
.api-key-modal .modal-box .key-status-text.unset {
    color: var(--danger-color);
}

/* ===== AI Panel ===== */
.ai-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.ai-panel-overlay.show {
    opacity: 1;
    visibility: visible;
}
.ai-panel {
    background: var(--card-bg);
    border-radius: 16px 16px 0 0;
    padding: 0 0 calc(30px + env(safe-area-inset-bottom, 0px)) 0;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
.ai-panel-overlay.show .ai-panel {
    transform: translateY(0);
}
.ai-panel .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 17px;
    position: sticky;
    top: 0;
    background: var(--card-bg);
    padding: 20px 20px 12px 20px;
    z-index: 5;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.ai-panel .header .close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.ai-panel .header .close-btn:active {
    transform: scale(0.85);
}
.ai-panel .desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 14px;
    padding: 8px 20px 0 20px;
}
.ai-panel .ai-difficulty {
    padding: 0 20px;
}
.ai-panel .count-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    padding: 0 20px;
}
.ai-panel .count-grid button {
    padding: 12px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
}
.ai-panel .count-grid button:active {
    background: var(--active-gray);
    transform: scale(0.92);
}
.ai-panel .count-grid button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
}
.ai-panel .loading-bar {
    width: auto;
    height: 3px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    display: none;
    margin: 4px 20px 0;
}
.ai-panel .loading-bar .bar {
    width: 40%;
    height: 100%;
    background: var(--text-muted);
    position: relative;
    left: -40%;
    animation: line-load 1.2s infinite ease-in-out;
    border-radius: 2px;
}
.ai-panel .loading-bar.active {
    display: block;
}

/* ===== Settings ===== */
.settings-section {
    margin-bottom: 24px;
}
.settings-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}

.settings-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.3s ease;
    box-shadow: 0 1px 3px var(--shadow-color);
}
/* Desired Retention - single slider */
#retentionSlider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 2px;
    outline: none;
    margin: 4px 0;
    cursor: pointer;
}

#retentionSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--active-gray);
    cursor: pointer;
    border: 2px solid var(--bg-color);
    box-shadow: 0 0 0 1px var(--border-color);
}

#retentionSlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--active-gray);
    cursor: pointer;
    border: 2px solid var(--bg-color);
    box-shadow: 0 0 0 1px var(--border-color);
}

#retentionButtons {
    display: flex;
    gap: 10px;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    overflow: hidden;
    margin-top: 0;
    transition:
        max-height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        margin-top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#retentionButtons.show {
    max-height: 60px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    margin-top: 10px;
}

#retentionCancel {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    transition:
        transform 0.15s ease,
        background 0.15s ease;
}

#retentionCancel:active {
    background: var(--active-gray);
    transform: scale(0.96);
}

#retentionSave {
    background: transparent;
    border: 1px solid var(--success-color);
    color: var(--success-color);
    transition:
        transform 0.15s ease,
        background 0.15s ease;
}

#retentionSave:active {
    background: rgba(43, 110, 94, 0.15);
    transform: scale(0.96);
}
/* ===== Audio Management Sliders ===== */
#audioRateSlider,
#audioPitchSlider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 2px;
    outline: none;
    margin: 4px 0;
    cursor: pointer;
}
#audioRateSlider::-webkit-slider-thumb,
#audioPitchSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--active-gray);
    cursor: pointer;
    border: 2px solid var(--bg-color);
    box-shadow: 0 0 0 1px var(--border-color);
}
#audioRateSlider::-moz-range-thumb,
#audioPitchSlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--active-gray);
    cursor: pointer;
    border: 2px solid var(--bg-color);
    box-shadow: 0 0 0 1px var(--border-color);
}
.settings-option {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    gap: 12px;
    transition: background 0.15s ease;
}
.settings-option:last-child {
    border-bottom: none;
}
.settings-option:active {
    background: var(--active-gray);
}
.settings-option .opt-label {
    flex: 1;
    font-size: 14px;
}
.settings-option .opt-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        border-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.settings-option .opt-check.active {
    border-color: var(--success-color);
    background: var(--success-color);
    transform: scale(1);
}
.settings-option .opt-check.active::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popIn {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

.settings-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1px;
    background: var(--border-color);
}
.settings-stat-grid .stat-item {
    background: var(--card-bg);
    padding: 14px 10px;
    text-align: center;
}
.settings-stat-grid .stat-number {
    font-size: 22px;
    font-weight: 700;
    display: block;
    letter-spacing: -0.3px;
}
.settings-stat-grid .stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    font-weight: 500;
}
.settings-proficiency-grid .prof-header {
    background: var(--bg-color);
    padding: 8px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.settings-proficiency-grid .prof-header .prof-header-label {
    display: block;
}
.settings-proficiency-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1px;
    row-gap: 0;
    background: var(--border-color);
}

.settings-proficiency-grid .prof-item {
    background: var(--card-bg);
    padding: 4px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.settings-proficiency-grid .prof-header {
    background: var(--bg-color);
    padding: 4px 10px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
}

.settings-proficiency-grid .prof-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.settings-proficiency-grid .prof-dot.beginner {
    background: var(--beginner-color);
}

.settings-proficiency-grid .prof-dot.intermediate {
    background: var(--intermediate-color);
}

.settings-proficiency-grid .prof-dot.advanced {
    background: var(--advanced-color);
}

.settings-proficiency-grid .prof-count {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.3px;
    min-width: 24px;
    text-align: right;
}

.settings-proficiency-grid .prof-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}
.settings-action {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    gap: 12px;
    transition: background 0.15s ease;
}
.settings-action:last-child {
    border-bottom: none;
}
.settings-action:active {
    background: var(--active-gray);
}
.settings-action .action-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.settings-action .action-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}
.settings-action .action-status {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.settings-action .action-status.set {
    color: var(--success-color);
}
.settings-action .action-status.unset {
    color: var(--danger-color);
}
.settings-action .action-arrow {
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 300;
}

.settings-no-words {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    padding: 20px 0;
}

/* ===== Responsive ===== */
@media (max-width: 480px) {
    .settings-stat-grid .stat-number {
        font-size: 18px;
    }
    .settings-proficiency-grid .prof-count {
        font-size: 14px;
    }
    .word-item .word-name {
        font-size: 15px;
    }
}

@media (min-width: 600px) {
    body {
        max-width: 480px;
        margin: 0 auto;
        border-left: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
    }
    .tab-bar {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%);
    }
    .word-edit-actions-wrapper {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
    #toastMessage {
        max-width: 400px;
    }
    /* Clip fixed overlays to the phone frame */
    .test-settings-overlay,
    .filter-overlay,
    .learn-new-overlay,
    .group-selector-overlay,
    .ai-panel-overlay,
    .confirm-delete-overlay,
    .import-confirm-overlay,
    .auth-modal {
        left: 50%;
        right: auto;
        width: 100%;
        max-width: 480px;
        transform: translateX(-50%);
    }
    /* Center bottom-sheet panels to the phone frame */
    .test-settings-panel,
    .filter-panel,
    .learn-new-panel {
        left: 50%;
        width: 100%;
        max-width: 480px;
        transform: translate(-50%, 100%);
    }
    .test-settings-panel.show,
    .filter-panel.show,
    .learn-new-panel.show {
        transform: translate(-50%, 0);
    }
}
/* ===== List Enter Animation ===== */
.word-item.entering {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: none;
}
.word-item.entering.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity 0.3s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.family-group.entering {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: none;
}
.family-group.entering.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity 0.3s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== Empty State ===== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}
.empty-state .empty-icon {
    width: 64px;
    height: 64px;
    stroke: var(--border-color);
    fill: none;
    stroke-width: 1.5;
    margin-bottom: 16px;
    opacity: 0.6;
}
.empty-state .empty-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
}
.empty-state .empty-desc {
    font-size: 14px;
}

/* Sort selector - reuse mode-selector styles */
#sortSelector .active {
    border-color: var(--text-color);
    color: var(--text-color);
    background: var(--active-gray);
}
/* Forcefully disable scroll and overscroll during slider drag */
.no-scroll {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: auto !important;
}
/* ===== Markdown Link Styles ===== */
.markdown-link {
    color: #6a9fb5 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

[data-theme='light'] .markdown-link {
    color: #4a7a8a !important;
}

.markdown-link:visited {
    color: #6a9fb5 !important;
}

[data-theme='light'] .markdown-link:visited {
    color: #4a7a8a !important;
}

.markdown-link:hover,
.markdown-link:active {
    opacity: 0.7;
}
/* ===== Markdown Blockquote Styles ===== */
blockquote {
    margin: 4px 0 4px 0;
    padding: 4px 12px 4px 16px;
    border-left: 3px solid var(--text-muted);
    background-color: var(--bg-color);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

[data-theme='light'] blockquote {
    background-color: var(--card-bg);
    border-left-color: #b0b8c4;
}
hr {
    margin-top: 8px;
    margin-bottom: -10px;
    border: none;
    border-top: 1px solid var(--border-color);
}

ul {
    margin-top: 4px;
    margin-bottom: -14px;
    padding-left: 16px;
}

ul li {
    margin: 0;
    padding: 0;
    line-height: 1.3;
}

ul li + li {
    margin-top: 0px;
}
code {
    background: var(--bg-color);
    border-radius: 8px;
    padding: 0 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: var(--text-color);
    line-height: 1.4;
}
/* Test mode: disable scroll and bounce on app-content */
.app-content.test-mode {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
}
/* ===== Text Selection ===== */
.word-name,
.word-preview,
.word-detail,
.result-header,
.result-definition,
.result-phonetic,
.test-word,
.test-def-box,
.family-root,
.family-tag,
.synonym-tag,
.item-text,
.group-name,
.group-word-tag,
.test-status-tag,
.nav-title,
.settings-stat-grid .stat-number,
.settings-proficiency-grid .prof-count {
    user-select: text;
    -webkit-user-select: text;
}

/* Allow selection in input fields and textareas */
input[type='text'],
input[type='number'],
textarea {
    user-select: text;
    -webkit-user-select: text;
}

/* Allow selection in definition content and markdown-rendered content */
.inline-render-box,
.result-definition .pos-block,
.test-def-box,
.word-detail {
    user-select: text;
    -webkit-user-select: text;
}

/* But keep buttons, icons, and interactive elements non-selectable */
button,
.audio-icon,
.action-icon,
.tab-item,
.more-link,
.delete-btn,
.filter-toggle-btn,
.group-edit-btn,
.back-btn,
.family-group-header,
.sub-section-header {
    user-select: none;
    -webkit-user-select: none;
}
/* Audio Management buttons */
#audioButtons {
    display: flex;
    gap: 10px;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    overflow: hidden;
    margin-top: 0;
    transition:
        max-height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        margin-top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#audioButtons.show {
    max-height: 60px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    margin-top: 10px;
}
.filter-panel .filter-section,
.test-settings-panel .filter-section {
    padding-left: 20px;
    padding-right: 20px;
}
/* ===== Listen & Spell Mode ===== */
.test-mode-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
#listenSpellMode {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1 1 0;
}
.test-mode-content.active {
    display: flex;
}
#listenSpellMode .test-word-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding: 16px 0 4px 0;
    width: 100%;
    gap: 2px;
    position: relative;
}

#listenSpellMode .listen-spell-def {
    flex: 1 1 0;
    min-height: 40px;
    margin: 4px 0 0 0;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
#listenSpellMode .listen-spell-def .test-def-box {
    height: 100%;
    padding: 12px;
    font-size: 15px;
    text-align: left;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    opacity: 1;
}

#listenSpellMode .listen-spell-bottom {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    flex-direction: column;
}
#listenSpellMode .listen-spell-input-area {
    width: 100%;
}

#listenSpellMode .listen-spell-input-area input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    font-family: var(--font-stack);
    font-size: 18px;
    background-color: var(--card-bg);
    color: var(--text-color);
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    box-sizing: border-box;
}

#listenSpellMode .listen-spell-input-area input:focus {
    border-color: var(--text-muted);
    box-shadow: 0 0 0 3px rgba(43, 110, 94, 0.15);
}

#listenSpellMode .listen-spell-input-area input.correct {
    border-color: var(--success-color);
    background-color: rgba(43, 110, 94, 0.08);
}

#listenSpellMode .listen-spell-input-area input.incorrect {
    border-color: var(--danger-color);
    background-color: rgba(177, 62, 62, 0.08);
}

#listenSpellMode .listen-spell-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 4px 4px;
    min-height: 50px;
    height: 50px;
    flex-shrink: 0;
    flex-grow: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#listenSpellMode .listen-spell-feedback .feedback-result {
    font-size: 16px;
    font-weight: 600;
}

#listenSpellMode .listen-spell-feedback .feedback-result.correct {
    color: var(--success-color);
}

#listenSpellMode .listen-spell-feedback .feedback-result.incorrect {
    color: var(--danger-color);
}

#listenSpellMode .listen-spell-feedback .feedback-correct {
    font-size: 14px;
    color: var(--text-muted);
}

#listenSpellMode .btn-easy-spell {
    padding: 6px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--easy-color);
    color: var(--easy-color);
    background: transparent;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    margin-left: 8px;
}

#listenSpellMode .btn-easy-spell:active {
    background: rgba(59, 137, 196, 0.15);
    transform: scale(0.96);
}

/* Test Type Selector (below Mode) */
#testTypeSelector {
    margin-top: 2px;
}

#testTypeSelector button {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

#testTypeSelector button:active {
    transform: scale(0.96);
}

#testTypeSelector button.active {
    border-color: var(--text-color);
    color: var(--text-color);
    background: var(--active-gray);
}

#testTypeSelector button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
}
/* Listen & Spell Feedback Area */

#listenSpellMode .listen-spell-input-area {
    width: 100%;
    flex-shrink: 0;
    margin-top: 10px;
}

#listenSpellMode .listen-spell-input-area input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    font-family: var(--font-stack);
    font-size: 18px;
    background-color: var(--card-bg);
    color: var(--text-color);
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    box-sizing: border-box;
}

#listenSpellMode .listen-spell-input-area input:focus {
    border-color: var(--text-muted);
    box-shadow: 0 0 0 3px rgba(43, 110, 94, 0.15);
}

#listenSpellMode .listen-spell-input-area input.correct {
    border-color: var(--success-color);
    background-color: rgba(43, 110, 94, 0.08);
}

#listenSpellMode .listen-spell-input-area input.incorrect {
    border-color: var(--danger-color);
    background-color: rgba(177, 62, 62, 0.08);
}

#listenSpellMode .listen-spell-feedback .feedback-message {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

#listenSpellMode .listen-spell-feedback .feedback-correct {
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#listenSpellMode .listen-spell-feedback .feedback-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
    flex-wrap: nowrap;
}

#listenSpellMode .listen-spell-feedback .feedback-result.incorrect {
    color: var(--danger-color);
}

#listenSpellMode .listen-spell-feedback .feedback-correct {
    font-size: 14px;
    color: var(--text-muted);
}

#listenSpellMode .listen-spell-feedback .feedback-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

#listenSpellMode .listen-spell-feedback .feedback-actions button {
    padding: 10px 24px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    min-height: 44px;
}

#listenSpellMode .listen-spell-feedback .feedback-actions button:active {
    transform: scale(0.96);
}
#listenSpellMode .listen-spell-feedback .feedback-actions .btn-feedback-hard {
    border-color: var(--hard-color);
    color: var(--hard-color);
}

#listenSpellMode .listen-spell-feedback .feedback-actions .btn-feedback-hard:active {
    background: rgba(184, 149, 58, 0.15);
}
#listenSpellMode .listen-spell-feedback .feedback-actions .btn-feedback-good {
    border-color: var(--good-color);
    color: var(--good-color);
}

#listenSpellMode .listen-spell-feedback .feedback-actions .btn-feedback-good:active {
    background: rgba(43, 110, 94, 0.15);
}

#listenSpellMode .listen-spell-feedback .feedback-actions .btn-feedback-easy {
    border-color: var(--easy-color);
    color: var(--easy-color);
}

#listenSpellMode .listen-spell-feedback .feedback-actions .btn-feedback-easy:active {
    background: rgba(59, 137, 196, 0.15);
}

#listenSpellMode .listen-spell-feedback .feedback-actions .btn-feedback-next {
    border-color: var(--border-color);
    color: var(--text-color);
}

#listenSpellMode .listen-spell-feedback .feedback-actions .btn-feedback-next:active {
    background: var(--active-gray);
}
/* ===== Custom Keyboard for Listen & Spell ===== */
#listenSpellMode .listen-spell-input-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    width: 100%;
}

#listenSpellMode .listen-spell-input-row input {
    flex: 1;
    padding: 0 14px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    font-family: var(--font-stack);
    font-size: 20px;
    letter-spacing: 2px;
    background-color: var(--card-bg);
    color: var(--text-color);
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    box-sizing: border-box;
    text-align: left;
    height: 52px;
    line-height: 52px;
    /* Enable scrolling */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    /* Show scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

#listenSpellMode .listen-spell-input-row input::-webkit-scrollbar {
    height: 4px;
}

#listenSpellMode .listen-spell-input-row input::-webkit-scrollbar-track {
    background: transparent;
}

#listenSpellMode .listen-spell-input-row input::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

#listenSpellMode .listen-spell-input-row input:focus {
    border-color: var(--text-muted);
    box-shadow: 0 0 0 3px rgba(43, 110, 94, 0.15);
}

#listenSpellMode .listen-spell-input-row input.correct {
    border-color: var(--success-color);
    background-color: rgba(43, 110, 94, 0.08);
}

#listenSpellMode .listen-spell-input-row input.incorrect {
    border-color: var(--danger-color);
    background-color: rgba(177, 62, 62, 0.08);
}

#listenSpellMode .listen-spell-input-row input::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#listenSpellMode .listen-spell-input-row input:focus {
    border-color: var(--text-muted);
    box-shadow: 0 0 0 3px rgba(43, 110, 94, 0.15);
}

#listenSpellMode .listen-spell-input-row input.correct {
    border-color: var(--success-color);
    background-color: rgba(43, 110, 94, 0.08);
}

#listenSpellMode .listen-spell-input-row input.incorrect {
    border-color: var(--danger-color);
    background-color: rgba(177, 62, 62, 0.08);
}

#listenSpellMode .listen-spell-input-row .btn-submit-spell {
    padding: 0 20px;
    height: 52px;
    width: 90px;
    border-radius: var(--radius);
    border: 1px solid var(--success-color);
    color: var(--success-color);
    background: transparent;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

#listenSpellMode .listen-spell-input-row .btn-submit-spell:active {
    background: rgba(43, 110, 94, 0.15);
    transform: scale(0.96);
}
#listenSpellMode .listen-spell-input-row .btn-submit-spell.submitted {
    border-color: var(--border-color);
    color: var(--text-muted);
}

#listenSpellMode .listen-spell-keyboard {
    width: 100%;
    margin-top: 10px;
    padding-bottom: 4px;
    user-select: none;
    -webkit-user-select: none;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); /* 添加这行 */
}

#listenSpellMode .listen-spell-keyboard .keyboard-row {
    display: grid;
    gap: 6px;
    margin-bottom: 6px;
}

#listenSpellMode .listen-spell-keyboard .keyboard-row:last-child {
    margin-bottom: 0;
}

#listenSpellMode .listen-spell-keyboard .keyboard-row[data-row='1'] {
    grid-template-columns: repeat(10, 1fr);
}

#listenSpellMode .listen-spell-keyboard .keyboard-row[data-row='2'] {
    grid-template-columns: 0.5fr repeat(9, 1fr) 0.5fr;
}

#listenSpellMode .listen-spell-keyboard .keyboard-row[data-row='3'] {
    grid-template-columns: 1.5fr repeat(7, 1fr) 2fr 0.5fr;
}

#listenSpellMode .listen-spell-keyboard .key-btn {
    height: 48px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: var(--font-stack);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#listenSpellMode .listen-spell-keyboard .key-btn:active {
    background: var(--active-gray);
    transform: scale(0.92);
}

#listenSpellMode .listen-spell-keyboard .key-btn-spacer {
    visibility: hidden;
    pointer-events: none;
}

#listenSpellMode .listen-spell-keyboard .key-btn-delete {
    border-color: var(--border-color);
    color: var(--text-muted);
    grid-column: span 1;
    min-width: 65px;
}

#listenSpellMode .listen-spell-keyboard .key-btn-delete:active {
    background: var(--active-gray);
    transform: scale(0.92);
}

/* ===== Custom Keyboard Click Feedback ===== */
#listenSpellMode .listen-spell-keyboard .key-btn {
    transition: all 0.08s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    will-change: transform, background-color, color, border-color;
}

/* Normal keys - subtle gray feedback */
#listenSpellMode .listen-spell-keyboard .key-btn:active,
#listenSpellMode .listen-spell-keyboard .key-btn.key-pressed {
    background: var(--active-gray);
    color: var(--text-color);
    transform: scale(0.88);
    border-color: var(--active-gray);
}

/* Delete key - subtle red feedback */
#listenSpellMode .listen-spell-keyboard .key-btn-delete:active,
#listenSpellMode .listen-spell-keyboard .key-btn-delete.key-pressed {
    background: rgba(177, 62, 62, 0.35);
    color: var(--danger-color);
    border-color: rgba(177, 62, 62, 0.4);
    transform: scale(0.88);
}

#listenSpellMode .listen-spell-keyboard .key-btn.key-inactive {
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
    transition: none !important;
}

#listenSpellMode .listen-spell-keyboard .key-btn.key-pressed {
    transition: all 0.02s ease;
}
#listenSpellKeyboard {
    padding-bottom: 20px !important;
}
/* FSRS data display - compact font */
.fsrs-data-display,
.add-fsrs-data {
    font-size: 11.5px !important;
}
.add-fsrs-data div,
.fsrs-data-display div {
    font-size: 11.5px !important;
}
/* Listen & Spell - No words message */

#listenSpellMode .test-word-box .test-phonetic {
    min-height: 24px;
}

#listenSpellMode .test-word-box .test-control-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: 6px;
    min-height: 40px;
}

#listenSpellMode .test-word-box .test-control-row .test-settings-toggle {
    justify-self: end;
    margin: 0;
}
#listenSpellMode .test-control-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: 6px;
    min-height: 40px;
    flex-shrink: 0;
}
/* ===== Queued tag in word list ===== */
.queued-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--active-gray);
    color: var(--text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.5;
    margin-right: 6px;
    flex-shrink: 0;
    vertical-align: middle;
    text-transform: lowercase;
}

/* ===== Stats two rows ===== */
.settings-stat-grid.stats-two-rows {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--border-color);
}
.settings-stat-grid.stats-two-rows .stat-item:nth-child(-n + 3) {
    grid-column: span 2;
}
.settings-stat-grid.stats-two-rows .stat-item:nth-child(n + 4) {
    grid-column: span 3;
}

/* ===== Learn New button in test view ===== */
.learn-new-btn {
    padding: 4px 12px;
    font-size: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--success-color);
    background: transparent;
    color: var(--success-color);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.learn-new-btn:active {
    background: rgba(43, 110, 94, 0.15);
    transform: scale(0.96);
}
.learn-new-btn .learn-new-count {
    font-weight: 600;
}

/* ===== Learn New panel ===== */
.learn-new-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 997;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}
.learn-new-overlay.show {
    opacity: 1;
    visibility: visible;
}
.learn-new-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 80vh;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    z-index: 998;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    border-radius: 16px 16px 0 0;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
.learn-new-panel.show {
    transform: translateY(0);
}

.learn-new-panel .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 17px;
    position: sticky;
    top: 0;
    background: var(--card-bg);
    padding: 20px 20px 12px 20px;
    z-index: 5;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.learn-new-panel .header .close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.learn-new-panel .header .close-btn:active {
    transform: scale(0.85);
}
.learn-new-info {
    padding: 10px 20px 6px;
    font-size: 13px;
    color: var(--text-muted);
}
.learn-new-shortcuts {
    display: flex;
    gap: 8px;
    padding: 0 20px 10px;
}
.learn-new-shortcuts button {
    flex: 1;
    padding: 6px 0;
    font-size: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
}
.learn-new-shortcuts button:active {
    background: var(--active-gray);
    transform: scale(0.96);
}
/* Learn New panel: sort selector */
.learn-new-sort {
    display: flex;
    gap: 8px;
    padding: 0 20px 8px;
}
.learn-new-sort button {
    flex: 1;
    padding: 6px 0;
    font-size: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.learn-new-sort button:active {
    background: var(--active-gray);
    transform: scale(0.96);
}
.learn-new-sort button.active {
    border-color: var(--text-color);
    color: var(--text-color);
    background: var(--active-gray);
}
.learn-new-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    max-height: 40vh;
    -webkit-overflow-scrolling: touch;
}
.learn-new-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}
.learn-new-item:last-child {
    border-bottom: none;
}
.learn-new-item input[type='checkbox'] {
    width: 18px;
    height: 18px;
    accent-color: var(--success-color);
    cursor: pointer;
    flex-shrink: 0;
}
.learn-new-word {
    font-size: 14px;
    word-break: break-word;
}
.learn-new-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 24px 0;
    font-size: 14px;
}
.learn-new-actions {
    display: flex;
    gap: 10px;
    padding: 12px 20px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-shrink: 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.learn-new-actions button {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.learn-new-actions button:active {
    transform: scale(0.96);
}
#learnNewCancel {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}
#learnNewConfirm {
    background: transparent;
    border: 1px solid var(--success-color);
    color: var(--success-color);
}
/* ===== List view reset loading bar ===== */
.list-reset-loading {
    display: none;
    width: 100%;
    height: 3px;
    background-color: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    margin: 8px 0 4px 0;
    position: relative;
}
.list-reset-loading .search-loading-bar {
    width: 40%;
    height: 100%;
    background-color: var(--text-muted);
    position: absolute;
    left: -40%;
    animation: line-load 1.2s infinite ease-in-out;
    border-radius: 2px;
}
/* ===== Auth modal ===== */
.auth-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.auth-modal.visible {
    display: flex;
}

.auth-box {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 24px;
    max-width: 360px;
    width: 100%;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px var(--shadow-color-strong);
}
.auth-title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 6px;
}
.auth-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.auth-box input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
    outline: none;
    margin-bottom: 8px;
}
.auth-box input:focus {
    border-color: var(--active-gray);
    box-shadow: 0 0 0 2px rgba(43, 110, 94, 0.12);
}
.auth-error {
    font-size: 12px;
    color: var(--danger-color);
    min-height: 16px;
    margin-bottom: 8px;
}
.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.auth-actions button {
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    transition: all 0.15s ease;
}
.auth-actions button:active {
    transform: scale(0.96);
}
.auth-primary {
    border-color: var(--success-color) !important;
    color: var(--success-color);
}
.auth-primary:active {
    background: rgba(43, 110, 94, 0.15);
}

.auth-skip {
    margin-top: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    width: 100%;
    padding: 6px;
}
/* ===== Offline banner ===== */
body {
    transition: padding-top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body.offline {
    padding-top: 26px;
}
.offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hard-color);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: center;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.offline .offline-banner {
    transform: translateY(0);
}

/* Desktop: match body max-width */
@media (min-width: 600px) {
    .offline-banner {
        max-width: 480px;
        left: 50%;
        transform: translate(-50%, -100%);
    }
    body.offline .offline-banner {
        transform: translate(-50%, 0);
    }
}

/* ===== CEFR Badge ===== */
.cefr-badge {
    display: inline-block;
    padding: 0 5px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    line-height: 1.5;
    vertical-align: middle;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--font-stack);
    letter-spacing: 0.3px;
}

/* Add view: word + badge share a line, badge wraps with the word */
.result-header-container .result-word-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    min-height: 32px;
}
.result-header-container .result-word-line .result-header {
    display: inline;
    max-width: 100%;
    word-break: break-word;
    line-height: 1.3;
}

/* List view: small gap between phonetic and badge */
.word-item .word-phonetic + .cefr-badge {
    margin-left: 4px;
}

/* Collapsed: outer badge visible, inner hidden */
.word-item .cefr-badge-inner {
    display: none;
}
.word-item .cefr-badge-outer {
    display: inline-block;
}

/* Expanded: badge follows the word name */
.word-item.expanded .cefr-badge-inner {
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
}
.word-item.expanded .cefr-badge-outer {
    display: none;
}

/* ===== CEFR Filter Selector ===== */
.cefr-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 12px 0;
}
.cefr-selector button {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 44px;
    font-family: var(--font-stack);
}
.cefr-selector button:active {
    transform: scale(0.96);
}
.cefr-selector button.active {
    border-color: var(--text-color);
    color: var(--text-color);
    background: var(--active-gray);
}
.cefr-selector button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
}

        /* 2x2 chip grid for status flags */
        .chip-selector {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin: 4px 0 12px 0;
        }
        .chip-selector button {
            padding: 8px 10px;
            font-size: 12px;
            font-weight: 500;
            border-radius: var(--radius);
            border: 1px solid var(--border-color);
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.15s ease;
            font-family: var(--font-stack);
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0;
        }
        .chip-selector button:active {
            transform: scale(0.96);
        }
        .chip-selector button.active {
            border-color: var(--text-color);
            color: var(--text-color);
            background: var(--active-gray);
        }

/* ===== Algorithm Panel ===== */
.algo-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 997;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}
.algo-overlay.show {
    opacity: 1;
    visibility: visible;
}

.algo-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 80vh;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    z-index: 998;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    border-radius: 16px 16px 0 0;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
.algo-panel.show {
    transform: translateY(0);
}
.algo-panel .algo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 17px;
    position: sticky;
    top: 0;
    background: var(--card-bg);
    padding: 20px 20px 12px 20px;
    z-index: 5;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.algo-panel .algo-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    transition: transform 0.15s ease;
}
.algo-panel .algo-close:active {
    transform: scale(0.85);
}
.algo-panel .algo-content {
    padding: 12px 20px 8px 20px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-color);
}
.algo-panel .algo-actions {
    padding: 8px 20px 20px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
}
.algo-panel .algo-reset-btn {
    width: 100%;
    border-color: var(--danger-color);
    color: var(--danger-color);
    padding: 10px;
    font-weight: 600;
    font-size: 13px;
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.algo-panel .algo-reset-btn:active {
    background: rgba(177, 62, 62, 0.15);
    transform: scale(0.96);
}
.algo-panel .algo-reset-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.4;
}
@media (min-width: 600px) {
    .algo-panel {
        max-width: 480px;
        left: 50%;
        transform: translate(-50%, 100%);
    }
    .algo-panel.show {
        transform: translate(-50%, 0);
    }
    .algo-overlay {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%);
    }
}
/* ===== Word Edit View ===== */
.word-edit-nav {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    position: sticky;
    top: -16px;
    z-index: 5;
    background: var(--bg-color);
    padding: 16px 0 8px 0;
}
.word-edit-nav-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
}
.word-edit-nav-btn:active {
    background: var(--active-gray);
    transform: scale(0.96);
}
.word-edit-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
}
.word-edit-content {
    position: relative;
    background: var(--bg-color);
}
.word-edit-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.3;
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.word-edit-title .word-edit-title-text {
    word-break: break-word;
    min-width: 0;
}
.word-edit-title .cefr-badge-edit {
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

.word-edit-field {
    margin-bottom: 16px;
}
.word-edit-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.4px;
    margin-bottom: 4px;
    font-weight: 600;
}

.word-edit-input,
.word-edit-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text-color);
    font-family: var(--font-stack);
    font-size: 15px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    box-sizing: border-box;
    margin: 0;
}
.word-edit-input:focus,
.word-edit-textarea:focus {
    border-color: var(--text-muted);
    box-shadow: 0 0 0 3px rgba(43, 110, 94, 0.12);
}
.word-edit-textarea {
    resize: none;
    line-height: 1.5;
}
.word-edit-textarea-def {
    height: 155px;
    overflow-y: auto;
}

.word-edit-root-wrap,
.word-edit-phonetic-wrap,
.word-edit-def-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.word-edit-root-wrap .word-edit-input,
.word-edit-phonetic-wrap .word-edit-input {
    margin: 0;
}
.word-edit-reset-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
}
.word-edit-root-preview {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--text-muted);
    word-break: break-word;
}
.word-edit-root-reset,
.word-edit-field-reset {
    margin-left: auto;
    flex-shrink: 0;
    padding: 3px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.word-edit-root-reset:active,
.word-edit-field-reset:active {
    background: var(--active-gray);
    transform: scale(0.96);
}

.word-edit-section {
    margin-bottom: 20px;
}
.word-edit-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.word-edit-section-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.4px;
    font-weight: 600;
}
.word-edit-section-count {
    font-size: 11px;
    color: var(--text-muted);
}
.word-edit-ai-btn {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius);
    border: 1px solid var(--success-color);
    color: var(--success-color);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.word-edit-ai-btn:active {
    background: rgba(43, 110, 94, 0.15);
    transform: scale(0.96);
}
.word-edit-ai-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
}

.word-edit-input-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.word-edit-item {
    position: relative;
}
.word-edit-item-del {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        color 0.15s ease,
        background 0.15s ease;
    padding: 0;
    border-radius: 50%;
}
.word-edit-item-del:active {
    background: rgba(177, 62, 62, 0.2);
    color: var(--danger-color);
}
.word-edit-item-empty .word-edit-item-del {
    display: none;
}
.word-edit-item-input {
    width: 100%;
    padding: 8px 36px 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text-color);
    font-family: var(--font-stack);
    font-size: 14px;
    line-height: 1.4;
    outline: none;
    resize: none;
    overflow-y: auto;
    min-height: 38px;
    max-height: 78px;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    margin: 0;
}
.word-edit-item-input:focus {
    border-color: var(--text-muted);
    box-shadow: 0 0 0 3px rgba(43, 110, 94, 0.12);
}
.word-edit-item-empty .word-edit-item-input {
    border-style: dashed;
    color: var(--text-color);
}
.word-edit-item-empty .word-edit-item-input::placeholder {
    color: var(--text-muted);
}

.word-edit-actions-wrapper {
    position: fixed;
    bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    display: none;
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
    z-index: 50;
}
.word-edit-actions-wrapper.show {
    display: block;
}
.word-edit-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
}
.word-edit-actions button {
    flex: 1;
    padding: 12px 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
}
.word-edit-actions button:active {
    transform: scale(0.96);
}
.word-edit-actions .word-edit-btn-reset {
    border-color: var(--danger-color);
    color: var(--danger-color);
}
.word-edit-actions .word-edit-btn-reset:active {
    background: rgba(177, 62, 62, 0.15);
}
.word-edit-actions .word-edit-btn-save {
    border-color: var(--success-color);
    color: var(--success-color);
}
.word-edit-actions .word-edit-btn-save:active {
    background: rgba(43, 110, 94, 0.15);
}
/* Snapshot layer for view transitions */
.snapshot-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    background-color: var(--bg-color);
    background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 32px 32px;
}
[data-theme='light'] .snapshot-layer {
    background-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
}
.infl-checkbox input[type='checkbox'] {
    width: 16px;
    height: 16px;
    accent-color: var(--success-color);
    cursor: pointer;
    flex-shrink: 0;
}
.infl-checkbox span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.infl-regular-toggle:active {
    background: var(--active-gray);
    transform: none;
}
.infl-regular-actions button {
    flex: 1;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-stack);
}
.infl-regular-actions button:active {
    background: var(--active-gray);
    transform: scale(0.96);
}
.infl-regular-group:last-child {
    margin-bottom: 0;
}
.infl-filter-actions button {
    flex: 1;
    padding: 8px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font-stack);
}
.infl-filter-actions button:active {
    transform: scale(0.96);
}

/* Unified sheet handle: sticky, zero-height, pinned to panel top */
.test-settings-handle,
.filter-handle,
.algo-panel .algo-handle,
.learn-new-panel .handle,
.ai-panel .handle,
.group-selector-handle {
    position: sticky;
    top: 0;
    height: 0;
    margin: 0;
    z-index: 10;
    pointer-events: none;
}
.test-settings-handle::before,
.filter-handle::before,
.algo-panel .algo-handle::before,
.learn-new-panel .handle::before,
.ai-panel .handle::before,
.group-selector-handle::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    margin: 8px auto 0;
}

/* Show-all button for family tags */
.family-show-all-btn {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.family-show-all-btn:active {
    background: var(--active-gray);
    transform: scale(0.96);
}

/* ===== Add view skeleton loading ===== */
/* Lock phonetic height so layout does not shift between states */
.result-phonetic {
    min-height: 21px;
}
.result-phonetic.skeleton-phonetic {
    display: block;
    height: 21px;
    line-height: 21px;
    color: transparent;
    background: transparent;
    position: relative;
    pointer-events: none;
}
.result-phonetic.skeleton-phonetic::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 0;
    width: 110px;
    height: 15px;
    border-radius: 4px;
    background-color: var(--border-color);
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        var(--active-gray) 50%,
        transparent 100%
    );
    background-size: 60px 100%;
    background-repeat: no-repeat;
    animation: skeleton-phon-shimmer 1.4s infinite ease-in-out;
}
@keyframes skeleton-phon-shimmer {
    0%   { background-position: -60px 0; }
    100% { background-position: 110px 0; }
}
/* Skeleton mimics real content: pos line + indented content lines */
.skeleton-def {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 115px;
}
.skeleton-line {
    height: 15px;
    /* (25.5px line-height - 15px block) / 2 */
    margin: 5.25px 0;
    border-radius: 4px;
    background: var(--border-color);
    position: relative;
    overflow: hidden;
}
.skeleton-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, var(--active-gray) 50%, transparent 100%);
    animation: skeleton-shimmer-block 1.4s infinite;
}
.skeleton-line.sk-pos {
    width: 28%;
}
.skeleton-line.sk-content {
    width: 88%;
    margin-left: 16px;
}
.skeleton-line.sk-content-short {
    width: 58%;
    margin-left: 16px;
}
@keyframes skeleton-shimmer {
    0% {
        background-position: -110px 0;
    }
    100% {
        background-position: 110px 0;
    }
}
@keyframes skeleton-shimmer-block {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
[data-theme='light'] .result-phonetic.skeleton-phonetic::before {
    background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100%);
}
[data-theme='light'] .skeleton-line::after {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100%);
}




/* ===== Startup fade-in ===== */
.header-bar,
.app-content,
.tab-bar {
    transition: opacity 200ms ease;
}
html.booting .header-bar,
html.booting .app-content,
html.booting .tab-bar {
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    .header-bar,
    .app-content,
    .tab-bar {
        transition: none;
    }
}

/* Group selector list padding after panel horizontal padding removal */
#groupSelectorList {
    padding: 8px 20px 0 20px;
}