.phrase-toolbar { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.phrase-toolbar input { flex:1; min-width:160px; padding:.65rem; border:1px solid #d1d5db; border-radius:6px; }
.phrase-card-title { border:0; background:transparent; color:inherit; text-align:left; font:inherit; font-size:1.2rem; font-weight:600; cursor:pointer; padding:0; }
.phrase-category { color:#6b7280; font-size:.85rem; margin:.5rem 0; }
.phrase-example { padding:1rem 0; border-top:1px solid #e5e7eb; }
.phrase-example p { margin:.3rem 0; }
.phrase-example p + p { color:#6b7280; }
.phrase-states { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0; }
.phrase-states button[aria-pressed="true"] { background:#2563eb; color:#fff; }
.phrase-editor { border:0; border-radius:12px; padding:1.5rem; width:min(640px,calc(100vw - 32px)); max-height:85vh; overflow:auto; box-sizing:border-box; color:#1f2937; }
.phrase-editor::backdrop { background:rgba(0,0,0,.45); }
.phrase-editor label { display:block; margin:.75rem 0; }
.phrase-editor input,.phrase-editor textarea { display:block; box-sizing:border-box; width:100%; margin-top:.35rem; border:1px solid #d1d5db; border-radius:6px; padding:.6rem; font:inherit; }
.phrase-editor textarea { min-height:75px; resize:vertical; }
.phrase-example-editor { padding:.75rem; border:1px solid #e5e7eb; border-radius:8px; margin:.75rem 0; }
.phrase-editor-actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:1rem; }
.phrase-error { color:#b91c1c; padding:.5rem 0; }
#english-phrases-section .word-card { cursor:pointer; }
#phrase-detail[hidden] { display:none; }
#phrase-detail { padding:16px; box-sizing:border-box; }
#english-view .phrase-detail-card { width:100%; max-width:680px; max-height:85vh; overflow-y:auto; overscroll-behavior:contain; box-sizing:border-box; box-shadow:0 20px 60px #0f172a33; overflow-wrap:anywhere; }
.phrase-detail-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; color:#8590a3; font-size:13px; }
#phrase-detail .modal-close-btn { min-width:32px; min-height:32px; }
#phrase-detail .word-header { gap:1rem; flex-wrap:wrap; }
#english-phrases-section .word-header { gap:1rem; flex-wrap:wrap; }
@media(max-width:600px) { .phrase-editor { padding:1rem; } }
#english-words-section, #english-phrases-section { display:flex; flex-direction:column; flex:1; min-height:0; }
#english-words-section[hidden], #english-phrases-section[hidden] { display:none; }

/* English learning: one navigation row, with the same visual hierarchy in both sections. */
#english-view { padding:0; border:1px solid #e6eaf0; border-radius:16px; box-shadow:0 2px 12px #0f172a05; color:#24324b; }
#english-view .english-heading { justify-content:flex-start; gap:12px; padding:24px 28px 16px; margin:0; flex-shrink:0; }
#english-view .english-heading h2 { font-size:22px; font-weight:650; letter-spacing:-.5px; color:#18253e; }
#english-view .english-heading p { margin:5px 0 0; font-size:13px; color:#8590a3; }
.english-heading-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:#eef2ff; color:#5362c4; font:600 24px Georgia,serif; flex-shrink:0; }
#english-view .english-navigation { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 28px; border-bottom:1px solid #e8ecf2; flex-shrink:0; }
#english-view .english-sections { align-self:stretch; display:flex; gap:28px; padding:0; }
#english-view .english-sections button { position:relative; padding:17px 4px; border:0; border-radius:0; background:transparent; color:#7b869a; font-size:15px; font-weight:550; cursor:pointer; white-space:nowrap; }
#english-view .english-sections button:hover { color:#4258bd; }
#english-view .english-sections button[aria-selected="true"] { color:#465cc6; background:transparent; font-weight:650; }
#english-view .english-sections button[aria-selected="true"]::after { content:''; position:absolute; height:3px; border-radius:3px 3px 0 0; background:#5368d4; bottom:-1px; left:0; right:0; }
#english-view .view-header-actions { gap:8px; padding:8px 0; flex-wrap:wrap; }
#english-view .view-header-actions[hidden] { display:none; }
#english-view .primary-btn, #english-view .secondary-btn, #english-view .pagination-btn, #english-view .english-search button { min-height:36px; padding:8px 13px; border:1px solid #e1e6ef; border-radius:8px; background:#fff; color:#58667b; font-size:13px; line-height:1.4; font-weight:500; box-shadow:none; cursor:pointer; }
#english-view .primary-btn { border-color:#5368d4; background:#5368d4; color:#fff; }
#english-view .primary-btn:hover { background:#4459c2; border-color:#4459c2; }
#english-view .secondary-btn:hover, #english-view .pagination-btn:hover:not(:disabled), #english-view .english-search button:hover { background:#f4f6fc; border-color:#bdc8e1; box-shadow:none; }
#english-view button:focus-visible, #english-view input:focus-visible, #english-view textarea:focus-visible { outline:2px solid #5368d4; outline-offset:3px; }
#english-view button:disabled { cursor:not-allowed; opacity:.45; }
#english-view .english-content { padding:22px 28px; gap:0; scrollbar-gutter:stable; }
#english-view .english-stats { gap:6px; margin:0 0 18px; flex-wrap:wrap; }
#english-view .stat-card { padding:8px 12px; border:1px solid transparent; border-radius:8px; background:transparent; color:#778298; box-shadow:none; gap:8px; min-height:38px; transform:none; }
#english-view .stat-card:hover { background:#f4f6fb; transform:none; box-shadow:none; }
#english-view .stat-card.active { background:#edf1fc; color:#4058bc; border-color:#e4eafb; box-shadow:none; }
#english-view .stat-title { opacity:1; font-size:13px; font-weight:500; white-space:nowrap; }
#english-view .stat-value { padding:2px 6px; min-width:24px; text-align:center; background:#edf0f4; color:#7b879c; border-radius:5px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
#english-view .stat-card.active .stat-value { background:#dce4fa; color:#4058bc; }
#english-view .phrase-toolbar, #english-view .english-search { display:flex; gap:8px; margin:0 0 22px; align-items:center; }
#english-view .phrase-toolbar input, #english-view .english-search input { min-width:0; min-height:40px; width:0; flex:1; box-sizing:border-box; padding:10px 13px; background:#f8f9fc; border:1px solid #e8ecf2; border-radius:9px; color:#24324b; font-size:13px; box-shadow:none; }
#english-view input::placeholder { color:#97a0b0; }
#english-view .word-card { padding:20px; border:1px solid #e5eaf2; border-radius:12px; box-shadow:none; }
#english-view .word-card:hover { border-color:#c6d0e6; box-shadow:0 3px 12px #24324b05; }
#english-view .word-text, #english-view .phrase-card-title { color:#24324b; font-size:21px; line-height:1.5; font-weight:600; overflow-wrap:anywhere; }
#english-view #phrase-list { grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); align-items:stretch; }
#english-view #phrase-list .word-header { display:block; }
#english-view #phrase-list .word-header .phrase-category { display:block; margin:8px 0 0; }
#english-view #phrase-list > .empty-state, #english-view #phrase-list > .loading-message { grid-column:1 / -1; }
#english-view .word-definition { color:#69778f; font-size:14px; line-height:1.65; }
#english-view .word-example { background:#f8f9fc; border-left-color:#c5cfee; border-radius:0 8px 8px 0; color:#768398; line-height:1.65; }
#english-view .word-translation { color:#5d6d88; font-size:14px; line-height:1.7; margin-top:6px; }
#english-view .phrase-category { color:#8b95a7; font-size:12px; }
#english-view .phrase-states { gap:4px; margin:14px 0; }
#english-view .phrase-states button { min-height:30px; font-size:12px; padding:5px 10px; border-color:transparent; color:#8a94a6; background:#f8f9fc; }
#english-view .phrase-states button[aria-pressed="true"] { background:#edf1fc; color:#465cc6; border-color:#dce4fa; }
#english-view .phrase-example { margin-top:10px; padding:16px; background:#f8f9fc; border:0; border-radius:9px; line-height:1.65; }
#english-view .phrase-example p + p { font-size:13px; color:#8590a3; }
#english-view .phrase-example p:first-child { color:#34435c; }
#english-view #phrase-detail h4 { margin:24px 0 10px; font-size:14px; font-weight:600; }
#english-view #phrase-detail > .word-card > p { color:#7b879a; font-size:13px; line-height:1.8; }
#english-view .pagination-controls { gap:12px; padding:14px 0; margin:12px 0 0; flex-wrap:wrap; }
#english-view .pagination-info, #english-view #phrase-page-info { font-size:12px; color:#8590a3; }
#english-view .empty-state { padding:48px 20px; background:#fafbfe; border:1px dashed #dce3ee; border-radius:12px; color:#8590a3; font-size:14px; line-height:1.8; }
@media (max-width:600px) {
    #english-view .english-heading { padding:18px 16px 10px; }
    #english-view .english-heading h2 { font-size:20px; }
    #english-view .english-heading p { font-size:12px; }
    #english-view .english-navigation { padding:0 16px 10px; flex-wrap:wrap; gap:0; }
    #english-view .english-sections { width:100%; gap:24px; border-bottom:1px solid #e8ecf2; }
    #english-view .english-sections button { padding:14px 4px; }
    #english-view .view-header-actions { width:100%; justify-content:flex-end; padding:12px 0 0; }
    #english-view .english-content { padding:16px; scrollbar-gutter:auto; }
    #english-view .english-stats { gap:4px; }
    #english-view .stat-card { flex:1; justify-content:center; padding:7px 4px; gap:5px; }
    #english-view .stat-title { font-size:12px; }
    #english-view .stat-value { font-size:11px; padding:2px 4px; min-width:18px; }
    #english-view .phrase-toolbar, #english-view .english-search { gap:6px; margin-bottom:16px; }
    #english-view .word-card { padding:16px; }
    #english-view .word-text, #english-view .phrase-card-title { font-size:19px; }
    #english-view .word-header { flex-wrap:wrap; gap:12px; }
    #english-view .word-actions { flex-wrap:wrap; }
    #english-view .english-search button, #english-view #phrase-search-form button { padding:8px 10px; }
}
@media (prefers-reduced-motion:reduce) { #english-view * { transition:none !important; } }