.workbench-page {
    padding: 1rem;
}

.workbench-header {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 auto 1rem;
    max-width: 1440px;
}

.workbench-header h1 {
    margin: 0;
    color: #17282c;
    font-size: 1.65rem;
    font-weight: 750;
    letter-spacing: 0;
}

.workbench-header p {
    max-width: 48rem;
    margin: 0.25rem 0 0;
    color: #4c5960;
    font-size: 0.95rem;
}

.snapshot-meter {
    display: grid;
    grid-template-columns: repeat(3, minmax(3.5rem, 1fr));
    align-content: center;
    min-width: 17rem;
    border: 1px solid #c8b987;
    border-radius: 6px;
    background: #fffaf0;
}

.snapshot-meter span,
.snapshot-meter small {
    display: flex;
    justify-content: center;
}

.snapshot-meter span {
    padding-top: 0.55rem;
    color: #7d2e25;
    font-size: 1.15rem;
    font-weight: 750;
}

.snapshot-meter small {
    padding-bottom: 0.55rem;
    color: #52656b;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.notice,
.loading-panel {
    max-width: 1440px;
    margin: 0 auto 1rem;
    border-radius: 6px;
    padding: 0.75rem 0.9rem;
}

.notice {
    border: 1px solid #d19a4c;
    background: #fff6df;
    color: #6c4617;
}

.loading-panel {
    border: 1px solid #bed2d4;
    background: #edf7f6;
    color: #244347;
}

.startup-splash {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;
    width: min(35.125rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border: 1px solid #555;
    background: #fff;
    box-shadow: 0 0.4rem 1.25rem rgb(0 0 0 / 28%);
}

.startup-splash-art {
    position: relative;
}

.startup-splash-art img {
    display: block;
    width: 100%;
    height: auto;
}

.startup-splash-version {
    position: absolute;
    top: 28.2%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 10rem;
    padding: 0.05rem 0.45rem;
    background: rgb(255 255 255 / 82%);
    color: #252525;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(0.8rem, 2.2vw, 1.15rem);
    font-weight: 700;
    text-align: center;
    text-shadow: 0 1px #fff;
}

.startup-splash p {
    margin: 0;
    padding: 0.45rem 0.6rem 0.2rem;
    text-align: center;
}

.startup-splash progress {
    display: block;
    width: calc(100% - 1.2rem);
    height: 0.85rem;
    margin: 0 0.6rem 0.6rem;
    accent-color: #214d84;
}

.workbench-grid {
    display: grid;
    grid-template-columns: minmax(14rem, 0.9fr) minmax(28rem, 2.2fr) minmax(21rem, 1.2fr);
    grid-template-areas:
        "texts reader dictionary"
        "scope scope inspector";
    gap: 0.9rem;
    max-width: 1440px;
    margin: 0 auto;
}

.reader-list,
.reader-stage,
.dictionary-panel,
.word-dictionary-window,
.inspector-panel,
.scope-panel {
    min-width: 0;
    border: 1px solid #c8d1cf;
    border-radius: 6px;
    background: #fffdf8;
    box-shadow: 0 1px 4px rgb(29 37 40 / 8%);
}

.reader-list {
    grid-area: texts;
    overflow: hidden;
}

.reader-stage {
    grid-area: reader;
    display: flex;
    flex-direction: column;
    min-height: 30rem;
}

.reader-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.55rem 0.65rem 0;
    border-bottom: 1px solid #d7ddd9;
    background: #edf4f1;
    overflow-x: auto;
}

.reader-tabs button {
    min-height: 2rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    padding: 0 0.65rem;
    background: transparent;
    color: #356d76;
    font-size: 0.82rem;
    font-weight: 750;
    white-space: nowrap;
}

.reader-tabs button:hover,
.reader-tabs button:focus-visible,
.reader-tabs button.selected {
    border-color: #c8d1cf;
    background: #fffdf8;
    color: #7d2e25;
    outline: none;
}

.dictionary-panel {
    grid-area: dictionary;
    overflow: hidden;
}

.word-dictionary-window {
    grid-area: word;
    overflow: hidden;
}

.inspector-panel {
    grid-area: inspector;
    padding-bottom: 0.75rem;
}

.scope-panel {
    grid-area: scope;
    display: grid;
    grid-template-columns: minmax(22rem, 1.4fr) minmax(12rem, 0.8fr) minmax(12rem, 0.8fr);
    gap: 1rem;
    padding: 0.8rem;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #d7ddd9;
    background: #edf4f1;
}

.panel-heading h2,
.subpanel-heading h3,
.scope-panel h2,
.frequency-box h3 {
    margin: 0;
    color: #18363a;
    font-size: 0.9rem;
    font-weight: 750;
    letter-spacing: 0;
}

.panel-heading span {
    color: #7d2e25;
    font-weight: 750;
}

.window-close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.05rem;
    margin-left: auto;
    border: 1px solid #5f7583;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    padding: 0;
    background: linear-gradient(#ffffff, #c5d0d8);
    color: #0a1a21;
    font-family: inherit;
    font-size: 0.72rem;
    line-height: 1;
}

.window-close-button:hover,
.window-close-button:focus-visible {
    border-color: #2f5f80;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    background: linear-gradient(#ffffff, #9fc0d6);
    outline: none;
}

.panel-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 3.4rem;
    min-height: 1.25rem;
    margin-left: auto;
    border: 1px solid #5f7583;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    padding: 0 0.45rem;
    background: linear-gradient(#ffffff, #c5d0d8);
    color: #0a1a21;
    font-family: inherit;
    font-size: 0.72rem;
    line-height: 1;
}

.panel-action-button + .panel-action-button {
    margin-left: 0.25rem;
}

.panel-action-button:hover,
.panel-action-button:focus-visible {
    border-color: #2f5f80;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    background: linear-gradient(#ffffff, #9fc0d6);
    outline: none;
}

.subpanel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid #d7ddd9;
    background: #f7fbfa;
}

.subpanel-heading span {
    color: #7d2e25;
    font-size: 0.78rem;
    font-weight: 800;
}

.text-list,
.entry-list {
    overflow: auto;
}

.text-list {
    max-height: 28rem;
}

.local-reader-form {
    display: grid;
    gap: 0.45rem;
    padding: 0.65rem;
    border-top: 1px solid #d7ddd9;
    background: #faf7ec;
}

.local-reader-form input,
.local-reader-form textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0.45rem 0.5rem;
    color: #17282c;
}

.local-reader-form textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.local-reader-form button {
    min-height: 2rem;
    border: 1px solid #a98b3d;
    border-radius: 4px;
    background: #e8c46a;
    color: #2f2a18;
    font-weight: 800;
}

.local-reader-form button:hover,
.local-reader-form button:focus-visible {
    background: #f1d88a;
    outline: 2px solid #356d76;
    outline-offset: 1px;
}

.local-reader-form button:disabled {
    border-color: #c8d1cf;
    background: #e6e9e7;
    color: #7a8588;
}

.local-reader-status {
    margin: 0;
}

.text-row,
.entry-row {
    display: grid;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #eee6d4;
    background: transparent;
    color: inherit;
    text-align: left;
}

.text-row {
    grid-template-columns: 1fr auto;
    gap: 0.2rem 0.6rem;
    padding: 0.7rem 0.75rem;
}

.text-row:hover,
.text-row.selected,
.entry-row:hover,
.entry-row.selected,
.text-row:focus-visible,
.entry-row:focus-visible {
    background: #fff2c8;
    outline: none;
}

.text-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-row span {
    color: #356d76;
    font-size: 0.75rem;
    font-weight: 750;
}

.text-row small {
    grid-column: 1 / -1;
    color: #657377;
}

.toolbar {
    display: flex;
    gap: 0.4rem;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid #d7ddd9;
    background: #faf7ec;
}

.toolbar button,
.search-line button {
    min-height: 2.1rem;
    border: 1px solid #a98b3d;
    border-radius: 4px;
    padding: 0 0.65rem;
    background: #e8c46a;
    color: #2f2a18;
    font-weight: 700;
}

.toolbar button:hover,
.toolbar button:focus-visible,
.search-line button:hover,
.search-line button:focus-visible {
    background: #f1d88a;
    outline: 2px solid #356d76;
    outline-offset: 1px;
}

.toolbar button:disabled,
.search-line button:disabled {
    border-color: #c8d1cf;
    background: #e6e9e7;
    color: #7a8588;
}

.reader-paper {
    flex: 1;
    margin: 0.8rem;
    border: 1px solid #ddd3ba;
    border-radius: 4px;
    padding: 0.9rem;
    background: #fffef9;
}

.reader-status {
    margin: 0.8rem;
    border: 1px solid #bed2d4;
    border-radius: 4px;
    padding: 0.8rem;
    background: #edf7f6;
    color: #244347;
}

.reader-status.compact {
    margin: 0.75rem 0 0;
    padding: 0.55rem 0.65rem;
}

.reader-titlebar {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #eee2ca;
    padding-bottom: 0.7rem;
}

.reader-titlebar h2 {
    margin: 0;
    color: #17282c;
    font-size: 1rem;
    font-weight: 800;
}

.reader-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.3rem;
}

.reader-meta span {
    border: 1px solid #d7ddd9;
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    background: #f7fbfa;
    color: #52656b;
    font-size: 0.76rem;
    font-weight: 700;
}

.reader-title-actions {
    display: grid;
    justify-items: end;
    gap: 0.4rem;
}

.reader-title-actions.compact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.reader-title-select {
    align-items: center;
    display: flex;
    gap: 0.35rem;
    min-height: 2rem;
    color: #52656b;
    font-size: 0.76rem;
    font-weight: 800;
}

.reader-title-select select {
    min-height: 2rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0 0.45rem;
    background: #f7fbfa;
    color: #244347;
    font-size: 0.78rem;
    font-weight: 700;
}

.reader-find-control {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) auto auto 3rem;
    align-items: center;
    gap: 0.35rem;
}

.reader-find-control input {
    width: 100%;
    min-width: 0;
    min-height: 2rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0 0.45rem;
    color: #244347;
    font-size: 0.78rem;
}

.reader-find-control button {
    min-height: 2rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0 0.55rem;
    background: #f7fbfa;
    color: #244347;
    font-size: 0.76rem;
    font-weight: 800;
}

.reader-find-control button:hover,
.reader-find-control button:focus-visible {
    border-color: #7d2e25;
    background: #fff2c8;
    color: #7d2e25;
    outline: none;
}

.reader-find-control button:disabled {
    border-color: #d7ddd9;
    background: #eef0ef;
    color: #7a8588;
}

.reader-find-control span {
    color: #52656b;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.reader-word-nav {
    display: grid;
    grid-template-columns: minmax(4rem, 7rem) auto auto 3rem;
    align-items: center;
    gap: 0.35rem;
}

.reader-word-nav span {
    overflow: hidden;
    color: #7d2e25;
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 0.95rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-word-nav button {
    min-height: 2rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0 0.55rem;
    background: #f7fbfa;
    color: #244347;
    font-size: 0.76rem;
    font-weight: 800;
}

.reader-word-nav button:hover,
.reader-word-nav button:focus-visible {
    border-color: #7d2e25;
    background: #fff2c8;
    color: #7d2e25;
    outline: none;
}

.reader-word-nav small {
    color: #52656b;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.reader-copy-actions {
    display: grid;
    grid-template-columns: auto auto minmax(4rem, 1fr);
    align-items: center;
    gap: 0.35rem;
}

.reader-copy-actions button {
    min-height: 2rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0 0.55rem;
    background: #f7fbfa;
    color: #244347;
    font-size: 0.76rem;
    font-weight: 800;
}

.reader-copy-actions button:hover,
.reader-copy-actions button:focus-visible {
    border-color: #7d2e25;
    background: #fff2c8;
    color: #7d2e25;
    outline: none;
}

.reader-copy-actions button:disabled {
    border-color: #d7ddd9;
    background: #eef0ef;
    color: #7a8588;
}

.reader-copy-actions span {
    overflow: hidden;
    color: #52656b;
    font-size: 0.74rem;
    font-weight: 800;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-page-control {
    display: grid;
    grid-template-columns: auto 4rem auto auto;
    align-items: center;
    gap: 0.35rem;
}

.reader-page-control input {
    width: 100%;
    min-width: 0;
    min-height: 2rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0 0.35rem;
    color: #244347;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
}

.reader-page-control button {
    min-height: 2rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0 0.55rem;
    background: #f7fbfa;
    color: #244347;
    font-size: 0.76rem;
    font-weight: 800;
}

.reader-page-control button:hover,
.reader-page-control button:focus-visible {
    border-color: #7d2e25;
    background: #fff2c8;
    color: #7d2e25;
    outline: none;
}

.reader-page-control button:disabled {
    border-color: #d7ddd9;
    background: #eef0ef;
    color: #7a8588;
}

.reader-page-control span {
    color: #52656b;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.reader-title-action {
    min-height: 2rem;
    border: 1px solid #a98b3d;
    border-radius: 4px;
    padding: 0 0.65rem;
    background: #e8c46a;
    color: #2f2a18;
    font-size: 0.78rem;
    font-weight: 800;
}

.reader-title-action:hover,
.reader-title-action:focus-visible {
    background: #f1d88a;
    outline: 2px solid #356d76;
    outline-offset: 1px;
}

.reader-title-action:disabled {
    border-color: #c8d1cf;
    background: #e6e9e7;
    color: #7a8588;
}

.reader-warning {
    margin: 0.75rem 0 0;
    border: 1px solid #d19a4c;
    border-radius: 4px;
    padding: 0.55rem 0.65rem;
    background: #fff6df;
    color: #6c4617;
}

.reader-edit-panel {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.reader-edit-panel > p {
    margin: 0;
    color: #42585c;
    font-size: 0.78rem;
}

.reader-stage[data-reader-editing-active="true"] .inline-reader-char {
    cursor: text;
}

.reader-edit-panel textarea {
    width: 100%;
    min-height: 9rem;
    max-height: 16rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0.65rem 0.75rem;
    background: #fbfefa;
    color: #17282c;
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 1.08rem;
    line-height: 1.55;
    resize: vertical;
}

.reader-edit-panel textarea:focus {
    border-color: #356d76;
    outline: 2px solid #c8d7da;
    outline-offset: 1px;
}

.reader-edit-actions {
    display: grid;
    grid-template-columns: auto auto minmax(4rem, 1fr);
    align-items: center;
    gap: 0.4rem;
}

.reader-edit-actions button {
    min-height: 2rem;
    border: 1px solid #2f6e5b;
    border-radius: 4px;
    padding: 0 0.65rem;
    background: #d8efe5;
    color: #173c33;
    font-size: 0.78rem;
    font-weight: 800;
}

.reader-edit-actions button:hover,
.reader-edit-actions button:focus-visible {
    border-color: #18363a;
    background: #c4e7d9;
    outline: 2px solid #7d2e25;
    outline-offset: 1px;
}

.reader-edit-actions button:disabled {
    border-color: #c8d1cf;
    background: #e6e9e7;
    color: #7a8588;
}

.reader-edit-actions span {
    overflow: hidden;
    color: #52656b;
    font-size: 0.74rem;
    font-weight: 800;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-analysis-band {
    display: grid;
    grid-template-columns: repeat(5, auto) minmax(0, 1fr);
    gap: 0.65rem;
    align-items: stretch;
    margin-top: 0.8rem;
}

.document-analysis-band > div:not(.document-top-characters) {
    display: grid;
    align-content: center;
    min-width: 5.2rem;
    border: 1px solid #d7ddd9;
    border-radius: 4px;
    padding: 0.35rem 0.55rem;
    background: #f7fbfa;
}

.document-analysis-band strong {
    color: #7d2e25;
    font-size: 1rem;
}

.document-analysis-band span {
    color: #657377;
    font-size: 0.7rem;
    font-weight: 700;
}

.document-top-characters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.7rem, 1fr));
    gap: 0.35rem;
    min-width: 0;
}

.document-top-characters button {
    display: grid;
    align-content: center;
    justify-items: center;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    background: #fffdf8;
}

.document-top-characters button:hover,
.document-top-characters button:focus-visible,
.document-top-characters button.selected {
    border-color: #7d2e25;
    background: #fbe7df;
    outline: none;
}

.document-top-characters button strong {
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 1.2rem;
}

.document-word-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.document-word-strip.wide-word-spacing {
    gap: 0.85rem;
}

.document-word-strip button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.15rem 0.35rem;
    min-width: 0;
    border: 1px solid #c8d1cf;
    border-left-width: 3px;
    border-radius: 4px;
    padding: 0.45rem 0.55rem;
    background: #f7fbfa;
    color: inherit;
    text-align: left;
}

.document-word-strip button.known-entry {
    border-left-color: #2f7d61;
}

.document-word-strip button.need-entry {
    border-left-color: #b45a3c;
}

.document-word-strip button:hover,
.document-word-strip button:focus-visible {
    border-color: #c8b987;
    background: #fff2c8;
    outline: none;
}

.document-word-strip strong,
.document-word-strip small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-word-strip strong {
    color: #18363a;
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 1rem;
}

.document-word-strip span {
    color: #7d2e25;
    font-size: 0.78rem;
    font-weight: 800;
}

.document-word-strip small {
    grid-column: 1 / -1;
    color: #52656b;
    font-size: 0.72rem;
}

.reader-lines {
    display: grid;
    gap: 0.45rem;
    max-height: 18rem;
    margin-top: 0.8rem;
    overflow: auto;
}

.reader-frequency-list,
.study-entry-list,
.word-study-entry-list {
    display: grid;
    gap: 0.35rem;
    max-height: 24rem;
    margin-top: 0.8rem;
    overflow: auto;
}

.word-study-entry-list.wide-word-spacing {
    gap: 0.65rem;
}

.reader-frequency-row,
.study-entry-row,
.word-study-entry-row {
    display: grid;
    align-items: center;
    width: 100%;
    border: 1px solid #eee6d4;
    border-radius: 4px;
    background: #fffdf8;
    color: inherit;
    text-align: left;
}

.reader-frequency-row {
    grid-template-columns: 4rem 3rem minmax(5rem, 1fr);
    gap: 0.6rem;
    padding: 0.35rem 0.55rem;
}

.reader-frequency-row.details-hidden {
    grid-template-columns: 4rem minmax(3rem, 1fr);
}

.reader-frequency-row:hover,
.reader-frequency-row:focus-visible,
.reader-frequency-row.selected,
.study-entry-row:hover,
.study-entry-row:focus-visible,
.study-entry-row.selected,
.word-study-entry-row:hover,
.word-study-entry-row:focus-visible,
.word-study-entry-row.selected {
    border-color: #c8b987;
    background: #fff2c8;
    outline: none;
}

.reader-frequency-row span,
.reader-frequency-row small {
    color: #657377;
    font-size: 0.78rem;
    font-weight: 700;
}

.reader-frequency-row strong {
    color: #18363a;
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 1.55rem;
}

.study-entry-row {
    grid-template-columns: 3rem 7rem minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
}

.study-entry-row span,
.word-study-entry-row span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    border-radius: 4px;
    background: #edf4f1;
    color: #18363a;
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 1.45rem;
    font-weight: 750;
}

.word-study-entry-row {
    grid-template-columns: minmax(4rem, 6rem) minmax(5rem, 8rem) minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
}

.word-study-entry-row span {
    overflow: hidden;
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.word-study-entry-row .study-word-focused-character {
    border-bottom: 2px solid #7d2e25;
    background: #ffe49a;
    color: inherit;
    font: inherit;
}

.word-study-entry-row.known-entry {
    border-left: 3px solid #2f7d61;
}

.word-study-entry-row.need-entry {
    border-left: 3px solid #b45a3c;
}

.study-entry-row strong,
.study-entry-row small,
.word-study-entry-row strong,
.word-study-entry-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.study-entry-row strong,
.word-study-entry-row strong {
    color: #7d2e25;
}

.study-entry-row small,
.word-study-entry-row small {
    color: #465a5f;
}

.reader-line {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: baseline;
    border-bottom: 1px solid #f3ead7;
    padding-bottom: 0.35rem;
}

.reader-line.find-hit {
    border-left: 3px solid #c8b987;
    padding-left: 0.35rem;
    background: #fff8e6;
}

.reader-line-number {
    color: #9b8f74;
    font-family: Consolas, monospace;
    font-size: 0.78rem;
}

.reader-line p {
    margin: 0;
    color: #17282c;
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 1.55rem;
    line-height: 1.55;
}

.inline-reader-char {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    min-height: 1.9rem;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 0 0.08rem;
    background: transparent;
    color: #17282c;
    font: inherit;
    vertical-align: baseline;
}

.inline-reader-char.word-match {
    border-bottom-color: #7d2e25;
    border-bottom-width: 2px;
    border-radius: 3px 3px 0 0;
}

.inline-reader-char.word-start {
    margin-left: 2px;
}

.inline-reader-char.word-need {
    border-bottom-color: #b45a3c;
    border-bottom-style: dotted;
    border-bottom-width: 2px;
    border-radius: 3px 3px 0 0;
}

.inline-reader-char.word-match.word-need {
    border-bottom-style: solid;
}

.inline-reader-char.word-match.word-need::after {
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        var(--ct-reader-need-indicator-color, #ff00ff) 0 2px,
        transparent 2px 4px);
    content: "";
}

.inline-reader-char.word-known::after {
    position: absolute;
    bottom: 0.15rem;
    left: 0.18rem;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 999px;
    background: #2f7d61;
    content: "";
}

.inline-reader-char.word-focused {
    border-color: #c8b987;
    background: #fff2c8;
    color: #7d2e25;
}

.inline-reader-char:hover,
.inline-reader-char:focus-visible,
.inline-reader-char.selected {
    border-color: #c8b987;
    background: #fff2c8;
    color: #7d2e25;
    outline: none;
}

.character-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3.1rem, 1fr));
    gap: 0.45rem;
    margin-top: 0.85rem;
}

.character-tile {
    aspect-ratio: 1;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    background: #f7fbfa;
    color: #18363a;
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 1.6rem;
}

.character-tile:hover,
.character-tile:focus-visible,
.character-tile.selected {
    border-color: #7d2e25;
    background: #fbe7df;
    outline: none;
}

.search-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    padding: 0.65rem;
    border-bottom: 1px solid #d7ddd9;
    background: #faf7ec;
}

.search-line input {
    min-width: 0;
    min-height: 2.1rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0 0.55rem;
}

.word-selection-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.4rem;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid #d7ddd9;
    background: #fffdf8;
}

.word-selection-strip.wide-word-spacing {
    gap: 0.75rem;
}

.word-selection-strip .inline-warning {
    grid-column: 1 / -1;
}

.word-selection-strip button {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    border: 1px solid #c8b987;
    border-radius: 4px;
    padding: 0.4rem 0.5rem;
    background: #fff8e6;
    color: #4f4a36;
    text-align: left;
}

.word-selection-strip button:hover,
.word-selection-strip button:focus-visible {
    border-color: #7d2e25;
    background: #fff2c8;
    outline: none;
}

.word-selection-strip strong {
    overflow: hidden;
    color: #18363a;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.word-selection-strip span {
    overflow: hidden;
    color: #657377;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.word-dictionary-box {
    border-bottom: 1px solid #d7ddd9;
    background: #fffdf8;
}

.word-search-form {
    border-bottom: 1px solid #d7ddd9;
    background: #faf7ec;
}

.word-search-line {
    border-bottom: 0;
    padding-bottom: 0.5rem;
}

.word-search-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0 0.65rem 0.65rem;
}

.word-search-options label {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    color: #52656b;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.word-search-options select {
    min-width: 0;
    min-height: 2rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    background: #fff;
    color: #17282c;
}

.word-search-case-option {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.word-search-case-option input {
    width: 1rem;
    height: 1rem;
}

.custom-word-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.4rem;
    margin: 0 0.65rem 0.6rem;
}

.custom-word-form input,
.custom-word-form textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0.42rem 0.5rem;
    color: #17282c;
}

.custom-word-form textarea {
    grid-column: 1 / -1;
    min-height: 4rem;
    resize: vertical;
}

.custom-word-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
}

.custom-word-form button,
.word-note-form button,
.custom-word-import,
.reader-title-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    border: 1px solid #2f6e5b;
    border-radius: 4px;
    background: #d8efe5;
    color: #173c33;
    font-weight: 800;
}

.custom-word-import,
.reader-title-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.custom-word-import input,
.reader-title-upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.custom-word-form button:hover,
.custom-word-form button:focus-visible,
.word-note-form button:hover,
.word-note-form button:focus-visible,
.custom-word-import:hover,
.custom-word-import:focus-within,
.reader-title-upload:hover,
.reader-title-upload:focus-within {
    border-color: #18363a;
    background: #c4e7d9;
    outline: 2px solid #7d2e25;
    outline-offset: 1px;
}

.custom-word-form button:disabled,
.word-note-form button:disabled {
    border-color: #c8d1cf;
    background: #e6e9e7;
    color: #7a8588;
}

.custom-word-status {
    grid-column: 1 / -1;
    margin: 0;
}

.word-dictionary-status {
    margin: 0 0.65rem 0.55rem;
}

.word-exclusion-status {
    margin: 0 0.65rem 0.55rem;
}

.hidden-word-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0.65rem 0.55rem;
}

.hidden-word-actions button,
.hidden-word-actions .hidden-word-import {
    min-width: 8.25rem;
}

.hidden-word-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0.65rem 0.6rem;
    border: 1px solid #d7ddd9;
    border-radius: 4px;
    padding: 0.4rem;
    background: #f7fbfa;
}

.hidden-word-strip.wide-word-spacing {
    gap: 0.65rem;
}

.hidden-word-strip > span {
    color: #52656b;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.hidden-word-strip button {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 0.25rem;
    min-height: 1.85rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0 0.45rem;
    background: #fffdf8;
    color: #244347;
}

.hidden-word-strip button:hover,
.hidden-word-strip button:focus-visible {
    border-color: #7d2e25;
    background: #fff2c8;
    color: #7d2e25;
    outline: none;
}

.hidden-word-strip strong {
    color: inherit;
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 0.9rem;
}

.hidden-word-strip small {
    color: #657377;
    font-size: 0.68rem;
    font-weight: 800;
}

.word-detail-card {
    display: grid;
    gap: 0.25rem;
    margin: 0 0.65rem 0.6rem;
    border: 1px solid #c8b987;
    border-radius: 4px;
    padding: 0.55rem 0.65rem;
    background: #fff8e6;
}

.word-detail-fields {
    display: grid;
    grid-template-columns: 4.7rem minmax(0, 1fr);
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
}

.word-detail-fields > span {
    align-self: center;
    color: #465a5f;
    font-size: 0.76rem;
}

.word-detail-fields > strong,
.word-detail-fields > p,
.word-detail-fields > small {
    min-width: 0;
    border: 1px solid #d7ddd9;
    border-radius: 3px;
    padding: 0.28rem 0.4rem;
    background: #fff;
}

.word-detail-fields > strong {
    color: #18363a;
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 1.25rem;
}

.word-detail-fields > p,
.word-detail-fields > small {
    color: #465a5f;
}

.word-detail-fields > p {
    margin: 0;
    font-weight: 750;
}

.word-detail-fields > small {
    line-height: 1.35;
}

.word-note-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: stretch;
    margin-top: 0.25rem;
}

.word-note-form textarea {
    width: 100%;
    min-width: 0;
    min-height: 3.2rem;
    max-height: 7rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0.42rem 0.5rem;
    color: #17282c;
    resize: vertical;
}

.word-note-form button {
    min-height: 2rem;
}

.word-component-status {
    margin: 0;
}

.word-component-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.word-component-strip.wide-word-spacing {
    gap: 0.65rem;
}

.word-component-strip button {
    display: inline-grid;
    gap: 0.05rem;
    min-width: 4rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0.3rem 0.45rem;
    background: #f7fbfa;
    color: #244347;
    text-align: left;
}

.word-component-strip button:hover,
.word-component-strip button:focus-visible {
    border-color: #7d2e25;
    background: #fff2c8;
    color: #7d2e25;
    outline: none;
}

.word-component-strip button.known-entry {
    border-left: 3px solid #2f7d61;
}

.word-component-strip button.need-entry {
    border-left: 3px solid #b45a3c;
}

.word-component-strip strong {
    color: inherit;
    font-size: 0.94rem;
}

.word-component-strip span {
    overflow: hidden;
    color: #52656b;
    font-size: 0.68rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.word-character-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.word-character-strip button {
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    background: #f7fbfa;
    color: #244347;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
}

.word-character-strip button:hover,
.word-character-strip button:focus-visible {
    border-color: #7d2e25;
    background: #fff2c8;
    color: #7d2e25;
    outline: none;
}

.word-entry-list {
    display: grid;
    gap: 0;
    max-height: 16rem;
    overflow: auto;
    padding: 0 0.65rem 0.65rem;
}

.word-entry-list.wide-word-spacing {
    gap: 0.35rem;
}

.word-entry-row {
    display: grid;
    grid-template-columns: minmax(3.6rem, auto) minmax(4.6rem, 0.55fr) minmax(0, 1.45fr);
    gap: 0;
    width: 100%;
    border: 1px solid #eee6d4;
    border-bottom: 0;
    border-radius: 0;
    padding: 0;
    background: #fffdf8;
    color: inherit;
    text-align: left;
}

.word-entry-row:last-child {
    border-bottom: 1px solid #eee6d4;
}

.word-entry-list.wide-word-spacing .word-entry-row {
    border-bottom: 1px solid #eee6d4;
    border-radius: 4px;
}

.word-entry-row.known-entry {
    border-left: 3px solid #2f7d61;
}

.word-entry-row.need-entry {
    border-left: 3px solid #b45a3c;
}

.word-entry-row:hover,
.word-entry-row:focus-visible,
.word-entry-row.selected {
    border-color: #c8b987;
    background: #fff2c8;
    outline: none;
}

.word-entry-row span {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}

.word-entry-row span,
.word-entry-row small {
    border-right: 1px solid #eee6d4;
    padding: 0.35rem 0.45rem;
}

.word-entry-row small:last-child {
    border-right: 0;
}

.word-entry-row strong {
    overflow: hidden;
    color: #18363a;
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.word-entry-row em {
    overflow: hidden;
    color: #657377;
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.word-entry-row small {
    overflow: hidden;
    color: #465a5f;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-list {
    max-height: 30rem;
}

.entry-row {
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.65rem;
}

.entry-row.known-entry,
.study-entry-row.known-entry {
    border-left: 3px solid #2f7d61;
}

.entry-row.need-entry,
.study-entry-row.need-entry {
    border-left: 3px solid #b45a3c;
}

.entry-hanzi {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    border-radius: 4px;
    background: #edf4f1;
    color: #18363a;
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 1.75rem;
    font-weight: 700;
}

.entry-main {
    min-width: 0;
}

.entry-main strong,
.entry-main small {
    display: block;
}

.entry-main strong {
    color: #7d2e25;
}

.entry-main small {
    overflow: hidden;
    color: #465a5f;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-main em,
.study-entry-row em {
    display: inline-flex;
    margin-left: 0.35rem;
    border: 1px solid #c8b987;
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
    background: #fff8e6;
    color: #7d2e25;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 800;
}

.entry-main em:empty,
.study-entry-row em:empty {
    display: none;
}

.empty-state {
    padding: 1rem;
    color: #657377;
}

.empty-state.compact {
    padding: 0.35rem 0;
}

.character-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    margin: 0.75rem;
    border-radius: 6px;
    background: #17363a;
    color: #fffaf0;
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 5rem;
}

.facts {
    margin: 0;
    padding: 0 0.85rem;
}

.detail-facts {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0.25rem 0.55rem;
}

.facts dt {
    color: #7d2e25;
    font-weight: 800;
}

.facts dd {
    margin: 0 0 0.7rem;
    color: #465a5f;
}

.dictionary-detail-status {
    margin: 0 0.8rem 0.7rem;
}

.character-index-status {
    margin: 0.45rem 0.65rem 0;
}

.study-list-status {
    margin-top: 0.75rem;
}

.study-state-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    margin: 0.1rem 0.85rem 0.75rem;
}

.study-state-control button {
    min-height: 2rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    background: #f7fbfa;
    color: #18363a;
    font-size: 0.78rem;
    font-weight: 800;
}

.study-state-control button:hover,
.study-state-control button:focus-visible,
.study-state-control button.selected {
    border-color: #7d2e25;
    background: #fff2c8;
    color: #7d2e25;
    outline: none;
}

.study-state-control button:disabled {
    border-color: #d7ddd9;
    background: #eef0ef;
    color: #7a8588;
}

.character-review-control {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) auto auto;
    align-items: center;
    gap: 0.35rem;
    margin: 0.1rem 0.85rem 0.75rem;
}

.character-review-control select,
.character-review-control button {
    min-height: 1.9rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    background: #f7fbfa;
    color: #18363a;
    font-size: 0.76rem;
    font-weight: 800;
}

.character-review-control select {
    min-width: 0;
    padding: 0 0.35rem;
}

.character-review-control button {
    padding: 0 0.55rem;
}

.character-review-control button:hover,
.character-review-control button:focus-visible,
.character-review-control select:focus-visible {
    border-color: #7d2e25;
    background: #fff2c8;
    color: #7d2e25;
    outline: none;
}

.character-review-control button:disabled {
    border-color: #d7ddd9;
    background: #eef0ef;
    color: #7a8588;
}

.character-review-control small {
    grid-column: 1 / -1;
    color: #465a5f;
    font-size: 0.72rem;
    font-weight: 800;
}

.word-detail-card .word-study-state-control {
    display: grid;
    margin: 0.25rem 0 0;
}

.word-detail-card .word-study-state-status {
    display: block;
    margin: 0;
}

.word-locate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.1rem;
}

.dictionary-copy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.1rem 0.85rem 0.75rem;
}

.word-exclude-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-height: 1.85rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0 0.55rem;
    background: #f7fbfa;
    color: #465a5f;
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
}

.word-exclude-button:hover,
.word-exclude-button:focus-visible {
    border-color: #7d2e25;
    background: #fff2c8;
    color: #7d2e25;
    outline: none;
}

.word-exclude-button:disabled {
    border-color: #d7ddd9;
    background: #eef0ef;
    color: #7a8588;
}

.character-import-mode {
    min-height: 1.85rem;
    max-width: 10rem;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0 0.35rem;
    background: #fff;
    color: #465a5f;
    font-size: 0.76rem;
    font-weight: 800;
}

.character-import-mode:focus-visible {
    border-color: #7d2e25;
    background: #fff2c8;
    color: #7d2e25;
    outline: none;
}

.dictionary-copy-status {
    margin: 0 0.85rem 0.75rem;
}

.dictionary-note {
    margin: 0.1rem 0.85rem 0.75rem;
    border-left: 3px solid #c8b987;
    padding-left: 0.65rem;
    color: #465a5f;
    font-size: 0.86rem;
    line-height: 1.45;
}

.variant-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.2rem, 1fr));
    gap: 0.4rem;
    margin: 0.1rem 0.85rem 0.75rem;
}

.variant-strip button {
    display: grid;
    justify-items: center;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    padding: 0.35rem;
    background: #f7fbfa;
    color: #18363a;
}

.variant-strip button:hover,
.variant-strip button:focus-visible {
    border-color: #7d2e25;
    background: #fbe7df;
    outline: none;
}

.variant-strip strong {
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 1.35rem;
}

.variant-strip span {
    color: #657377;
    font-size: 0.65rem;
    font-weight: 700;
}

.frequency-box {
    margin: 0.8rem;
    border-top: 1px solid #d7ddd9;
    padding-top: 0.7rem;
}

.frequency-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
    color: #465a5f;
}

.frequency-row strong {
    color: #18363a;
}

.frequency-browser,
.scope-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-content: flex-start;
    min-width: 0;
}

.scope-panel h2 {
    flex-basis: 100%;
}

.frequency-list-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.45rem;
    width: 100%;
}

.frequency-list-button {
    display: grid;
    gap: 0.15rem;
    min-height: 3rem;
    border: 1px solid #c8b987;
    border-radius: 4px;
    padding: 0.45rem 0.55rem;
    background: #fff8e6;
    color: #4f4a36;
    text-align: left;
}

.frequency-list-button:hover,
.frequency-list-button:focus-visible,
.frequency-list-button.selected {
    border-color: #7d2e25;
    background: #fff2c8;
    outline: none;
}

.frequency-list-button strong {
    overflow: hidden;
    color: #18363a;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frequency-list-button span {
    color: #657377;
    font-size: 0.72rem;
}

.inline-status,
.inline-warning {
    flex-basis: 100%;
    border-radius: 4px;
    padding: 0.45rem 0.55rem;
    font-size: 0.8rem;
}

.inline-status {
    border: 1px solid #bed2d4;
    background: #edf7f6;
    color: #244347;
}

.inline-warning {
    border: 1px solid #d19a4c;
    background: #fff6df;
    color: #6c4617;
}

.rank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr));
    gap: 0.35rem;
    width: 100%;
    max-height: 14rem;
    overflow: auto;
}

.rank-tile {
    display: grid;
    align-content: center;
    justify-items: center;
    aspect-ratio: 1;
    border: 1px solid #b8c8c5;
    border-radius: 4px;
    background: #f7fbfa;
    color: #18363a;
}

.rank-tile:hover,
.rank-tile:focus-visible,
.rank-tile.selected {
    border-color: #7d2e25;
    background: #fbe7df;
    outline: none;
}

.rank-tile span {
    color: #657377;
    font-size: 0.65rem;
    font-weight: 700;
}

.rank-tile strong {
    font-family: "Microsoft JhengHei", "Noto Sans CJK TC", serif;
    font-size: 1.4rem;
}

.scope-group > span {
    border: 1px solid #c8b987;
    border-radius: 4px;
    padding: 0.25rem 0.45rem;
    background: #fff8e6;
    color: #4f4a36;
    font-size: 0.78rem;
}

@media (max-width: 1180px) {
    .workbench-grid {
        grid-template-columns: minmax(16rem, 1fr) minmax(24rem, 1.6fr);
        grid-template-areas:
            "texts reader"
            "dictionary dictionary"
            "inspector scope";
    }
}

@media (max-width: 760px) {
    .workbench-page {
        padding: 0.7rem;
    }

    .workbench-header,
    .scope-panel {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .snapshot-meter {
        min-width: 0;
    }

    .workbench-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "reader"
            "dictionary"
            "inspector"
            "texts"
            "scope";
    }

    .reader-line p {
        font-size: 1.25rem;
    }

    .reader-titlebar,
    .reader-title-actions {
        align-items: stretch;
        justify-items: stretch;
    }

    .reader-titlebar {
        flex-direction: column;
    }

    .document-analysis-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .document-top-characters {
        grid-column: 1 / -1;
    }
}

/* Word Dictionary native-form restoration.  The saved Windows page is a
   492px x 292px fixed record form: its large word field begins at 75,8; the
   Pinyin/Zhuyin, Definition, and Notes frames begin at 75,79/106/134/199;
   and the two total rows occupy the lower-right corner. */
.word-dictionary-native-window {
    justify-self: start;
    align-self: start;
    width: min(30.75rem, 100%);
    min-width: 0;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    background: #e1e5f0;
    color: #000;
    font-family: Tahoma, Arial, sans-serif;
    container-type: inline-size;
}

.word-dictionary-native-window > .panel-heading {
    min-height: 1.35rem;
    background: #f0f0f0;
}

.word-dictionary-native-window > .panel-heading h2 {
    color: #666;
    font: 1rem/1 Tahoma, Arial, sans-serif;
}

.word-dictionary-native-record {
    position: relative;
    width: 30.75rem;
    height: 18.25rem;
    margin: 0;
    color: #000;
    font: 1rem/1 Tahoma, Arial, sans-serif;
}

/* The modern search, paging, import, and export utilities remain in the
   component for the wider workbench workflow.  They are not part of the
   native Word Dictionary window and must not displace its 292px record form. */
.word-dictionary-native-window .word-dictionary-native-extensions {
    display: none;
}

.word-dictionary-native-record .word-native-label,
.word-dictionary-native-record .word-native-customized-control,
.word-dictionary-native-record .word-native-known-control,
.word-dictionary-native-record .word-native-need-control,
.word-dictionary-native-record .word-native-known-total,
.word-dictionary-native-record .word-native-need-total,
.word-dictionary-native-record .word-native-remove-customization,
.word-dictionary-native-record input,
.word-dictionary-native-record textarea {
    position: absolute;
    box-sizing: border-box;
}

.word-dictionary-native-record .word-native-label {
    left: 0.5625rem;
    display: block;
    color: #000;
    font: 1rem/1.3 Tahoma, Arial, sans-serif;
}

.word-dictionary-native-record .word-native-word-label {
    top: 0.5625rem;
    width: 3.625rem;
}

.word-dictionary-native-record .word-native-pinyin-label {
    top: 4.9375rem;
}

.word-dictionary-native-record .word-native-zhuyin-label {
    top: 6.6875rem;
}

.word-dictionary-native-record .word-native-definition-label {
    top: 8.4375rem;
}

.word-dictionary-native-record .word-native-notes-label {
    top: 12.5rem;
}

.word-dictionary-native-record .word-native-word,
.word-dictionary-native-record .word-native-pinyin,
.word-dictionary-native-record .word-native-zhuyin,
.word-dictionary-native-record .word-native-definition,
.word-dictionary-native-record .word-native-notes {
    left: 4.6875rem;
    width: 25.4375rem;
    padding: 0.12rem 0.3rem;
    border-radius: 0;
    background: #fff;
    color: #000;
    resize: none;
}

.word-dictionary-native-record .word-native-word {
    top: 0.5rem;
    height: 3.875rem;
    border: 2px solid #001eff;
    font: 1.75rem/1.15 "Microsoft JhengHei", "Noto Sans CJK TC", serif;
}

.word-dictionary-native-record .word-native-pinyin {
    top: 4.9375rem;
    height: 1.25rem;
    border: 2px solid #e00b00;
    font: 1rem/1 Tahoma, Arial, sans-serif;
}

.word-dictionary-native-record .word-native-zhuyin {
    top: 6.625rem;
    height: 1.375rem;
    border: 1px solid #222;
    font: 1rem/1 "Microsoft JhengHei", "Noto Sans CJK TC", serif;
}

.word-dictionary-native-record .word-native-definition {
    top: 8.375rem;
    height: 3.625rem;
    border: 2px solid #e00b00;
    font: 1rem/1.2 Tahoma, Arial, sans-serif;
    overflow: auto;
}

.word-dictionary-native-record .word-native-notes {
    top: 12.4375rem;
    height: 2.4375rem;
    border: 2px solid #e00b00;
    font: 1rem/1.2 Tahoma, Arial, sans-serif;
}

.word-dictionary-native-record .word-native-word:focus-visible {
    outline: 1px solid #001eff;
    outline-offset: 1px;
}

.word-dictionary-native-record .word-native-customized-control,
.word-dictionary-native-record .word-native-known-control,
.word-dictionary-native-record .word-native-need-control {
    display: flex;
    align-items: center;
    height: 1.125rem;
    white-space: nowrap;
}

.word-dictionary-native-record .word-native-customized-control {
    top: 15.25rem;
    left: 4.6875rem;
}

.word-dictionary-native-record .word-native-known-control {
    top: 15.25rem;
    left: 14rem;
}

.word-dictionary-native-record .word-native-need-control {
    top: 16.6875rem;
    left: 14rem;
}

.word-dictionary-native-record .word-native-customized-control input,
.word-dictionary-native-record .word-native-known-control input,
.word-dictionary-native-record .word-native-need-control input {
    position: static;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 0.35rem 0 0;
    accent-color: #fff;
    border: 2px solid #e00b00;
    border-radius: 0;
}

.word-dictionary-native-record .word-native-remove-customization {
    top: 16.6875rem;
    left: 4.6875rem;
    width: 7.75rem;
    height: 1.125rem;
    padding: 0;
    border: 1px solid #222;
    border-radius: 0;
    background: #fff;
    color: #000;
    font: 0.82rem/1 Tahoma, Arial, sans-serif;
}

.word-dictionary-native-record .word-native-remove-customization:disabled {
    color: #b8b8b8;
}

.word-dictionary-native-record .word-native-known-total,
.word-dictionary-native-record .word-native-need-total {
    left: 24.1875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.125rem;
    white-space: nowrap;
}

.word-dictionary-native-record .word-native-known-total {
    top: 15.25rem;
}

.word-dictionary-native-record .word-native-need-total {
    top: 16.6875rem;
}

.word-dictionary-native-record .word-native-known-total output,
.word-dictionary-native-record .word-native-need-total output {
    display: inline-block;
    width: 3.125rem;
    min-height: 1.0625rem;
    padding: 0.08rem 0.2rem;
    box-sizing: border-box;
    background: #fff;
    color: #000;
    text-align: center;
}

/* Unlike the adjacent Character Dictionary, the Windows Word Dictionary uses
   the neutral dialog face through its record area.  Keep that local instead of
   inheriting the workbench's blue tool-window background. */
.word-dictionary-native-window {
    background: #e3e6f0;
}

.word-dictionary-native-window > .panel-heading {
    background: #d1d4dd;
}

/* First desktop-reproduction pass: closer to the original Windows program. */
.workbench-page {
    min-height: calc(100vh - 4.2rem);
    padding: 0.45rem;
    background: rgb(156 177 222 / 82%);
}

.workbench-header {
    align-items: center;
    max-width: none;
    min-height: 2rem;
    margin: 0 0 0.45rem;
    border: 2px solid #0038d8;
    border-top-color: #001f8c;
    border-left-color: #001f8c;
    border-radius: 0;
    padding: 0.28rem 0.45rem;
    background: #a9bce8;
    box-shadow:
        inset 0 0 0 1px #8ea8e1,
        0 1px 0 #dce8ff;
}

.workbench-header > div:first-child {
    display: flex;
    align-items: center;
    min-width: 0;
}

.workbench-header h1 {
    color: #000;
    font-size: 0.9rem;
    font-weight: 400;
}

.workbench-header p {
    display: none;
}

.snapshot-meter {
    min-width: 15rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.snapshot-meter span {
    border: 2px solid #ff2a16;
    background: #fff;
    color: #090909;
    font-size: 0.82rem;
    font-weight: 400;
    padding: 0.12rem 0.45rem;
}

.snapshot-meter small {
    align-items: center;
    color: #000;
    font-size: 0.76rem;
    font-weight: 400;
    padding: 0 0.25rem;
    text-transform: none;
}

.notice,
.loading-panel {
    max-width: none;
    margin: 0 0 0.45rem;
    border-radius: 0;
}

.workbench-grid {
    grid-template-columns: minmax(32rem, 0.96fr) minmax(34rem, 1.04fr);
    grid-template-areas:
        "reader inspector"
        "reader word"
        "texts dictionary"
        "scope scope";
    align-items: start;
    gap: 0.45rem;
    max-width: none;
}

.reader-list,
.reader-stage,
.dictionary-panel,
.word-dictionary-window,
.inspector-panel,
.scope-panel {
    border: 2px solid #0038d8;
    border-radius: 0;
    background: #a9bce8;
    box-shadow:
        inset 0 0 0 1px #87a4de,
        2px 2px 0 rgb(0 0 0 / 25%);
}

.reader-stage {
    min-height: calc(100vh - 5.4rem);
}

.inspector-panel,
.word-dictionary-window {
    min-height: 20rem;
}

.accessory-window,
.reader-list,
.scope-panel {
    opacity: 0.96;
}

.panel-heading,
.subpanel-heading {
    min-height: 1.55rem;
    border: 0;
    border-bottom: 1px solid #1745a8;
    padding: 0.16rem 0.4rem;
    background: linear-gradient(#f0fff9 0%, #78c6ab 45%, #1d7e8f 100%);
    color: #000;
}

.panel-heading::before,
.subpanel-heading::before {
    width: 1rem;
    height: 1rem;
    border: 1px solid #d99b00;
    background: #ffe25b;
    content: "";
}

.panel-heading h2,
.subpanel-heading h3,
.scope-panel h2,
.frequency-box h3 {
    color: #000;
    font-size: 0.78rem;
    font-weight: 400;
}

.panel-heading span,
.subpanel-heading span {
    color: #000;
    font-size: 0.76rem;
    font-weight: 400;
}

.reader-tabs {
    gap: 0;
    padding: 0.35rem 0.4rem 0;
    border-bottom: 2px solid #111;
    background: #a9bce8;
}

.reader-tabs button {
    min-height: 2rem;
    border: 2px solid #111;
    border-radius: 0;
    margin-right: -2px;
    padding: 0 0.7rem;
    background: #f9f9f9;
    color: #000;
    font-size: 0.78rem;
    font-weight: 400;
}

.reader-tabs button:hover,
.reader-tabs button:focus-visible,
.reader-tabs button.selected {
    position: relative;
    top: 2px;
    border-color: #111;
    border-bottom-color: #f9f9f9;
    background: #fff;
    color: #000;
}

.toolbar,
.search-line,
.word-search-form,
.local-reader-form {
    border-bottom-color: #7d91c6;
    background: #a9bce8;
}

.word-search-options {
    background: #a9bce8;
}

.word-search-options select {
    border: 2px inset #d7d7d7;
    border-radius: 0;
    background: #fff;
    color: #000;
}

.character-import-mode {
    min-height: 1.9rem;
    border: 2px inset #d7d7d7;
    border-radius: 0;
    background: #fff;
    color: #000;
    font-size: 0.78rem;
    font-weight: 400;
}

.toolbar button,
.search-line button,
.local-reader-form button,
.reader-title-action,
.reader-find-control button,
.reader-word-nav button,
.reader-copy-actions button,
.reader-page-control button,
.custom-word-form button,
.word-note-form button,
.document-properties-body button,
.word-exclude-button {
    min-height: 1.9rem;
    border: 2px solid #808080;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    border-radius: 0;
    background: #f1f1f1;
    color: #000;
    font-size: 0.78rem;
    font-weight: 400;
    box-shadow: 1px 1px 0 #3d3d3d;
}

.toolbar button:hover,
.toolbar button:focus-visible,
.search-line button:hover,
.search-line button:focus-visible,
.local-reader-form button:hover,
.local-reader-form button:focus-visible,
.reader-title-action:hover,
.reader-title-action:focus-visible,
.reader-find-control button:hover,
.reader-find-control button:focus-visible,
.reader-word-nav button:hover,
.reader-word-nav button:focus-visible,
.reader-copy-actions button:hover,
.reader-copy-actions button:focus-visible,
.reader-page-control button:hover,
.reader-page-control button:focus-visible,
.custom-word-form button:hover,
.custom-word-form button:focus-visible,
.word-note-form button:hover,
.word-note-form button:focus-visible,
.document-properties-body button:hover,
.document-properties-body button:focus-visible,
.word-exclude-button:hover,
.word-exclude-button:focus-visible {
    border-color: #0046d5;
    background: #eaf2ff;
    color: #000;
    outline: none;
}

.toolbar button:disabled,
.search-line button:disabled,
.local-reader-form button:disabled,
.reader-title-action:disabled,
.reader-find-control button:disabled,
.reader-copy-actions button:disabled,
.reader-page-control button:disabled,
.custom-word-form button:disabled,
.word-note-form button:disabled,
.document-properties-body button:disabled,
.word-exclude-button:disabled {
    border-color: #b1b1b1;
    background: #e4e4e4;
    color: #777;
    box-shadow: none;
}

.text-row,
.entry-row {
    border-bottom-color: #7591d2;
    background: #a9bce8;
}

.text-row:hover,
.text-row.selected,
.entry-row:hover,
.entry-row.selected,
.text-row:focus-visible,
.entry-row:focus-visible {
    background: #d9e6ff;
}

.text-row span,
.text-row small,
.entry-main small {
    color: #000;
}

.reader-paper {
    margin: 0.45rem;
    border: 1px solid #6f86bd;
    border-radius: 0;
    padding: 0.45rem;
    background: #a9bce8;
}

.reader-titlebar {
    align-items: center;
    border-bottom: 1px solid #7d91c6;
    padding-bottom: 0.45rem;
}

.reader-titlebar h2 {
    color: #000;
    font-size: 0.86rem;
    font-weight: 400;
}

.reader-meta span,
.document-analysis-band > div:not(.document-top-characters),
.reader-frequency-row,
.study-entry-row,
.word-study-entry-row,
.frequency-list-button,
.rank-tile,
.scope-group > span,
.word-selection-strip button,
.word-detail-card,
.word-entry-row,
.variant-strip button,
.word-character-strip button,
.word-component-strip button,
.hidden-word-strip {
    border-radius: 0;
    background: #fff;
}

.reader-meta span {
    border-color: #ff2a16;
    color: #000;
    font-size: 0.72rem;
    font-weight: 400;
}

.reader-lines {
    gap: 0;
    max-height: 18.5rem;
    border: 1px dotted #1e32d8;
    padding: 0.35rem;
    background: #fff;
}

.reader-line {
    grid-template-columns: 2.4rem minmax(0, 1fr);
    border-bottom: 0;
    padding-bottom: 0;
}

.reader-line-number {
    color: #555;
    font-size: 0.72rem;
}

.reader-line p {
    color: #8784a5;
    font-family: "Times New Roman", "Microsoft JhengHei", "Noto Serif CJK TC", serif;
    font-size: 1.62rem;
    line-height: 1.35;
}

.inline-reader-char {
    min-width: 1.35rem;
    min-height: 1.55rem;
    border-radius: 0;
    color: #8784a5;
}

.inline-reader-char.word-match,
.inline-reader-char.word-need,
.inline-reader-char.word-known,
.inline-reader-char.selected {
    color: #001eff;
    text-decoration: underline;
}

.inline-reader-char:hover,
.inline-reader-char:focus-visible,
.inline-reader-char.selected,
.inline-reader-char.word-focused {
    border-color: #001eff;
    background: #d9e6ff;
    color: #001eff;
}

.document-analysis-band {
    gap: 0.4rem;
    align-items: start;
}

.document-analysis-band > div:not(.document-top-characters),
.document-top-characters button,
.character-tile,
.rank-tile {
    border: 1px solid #6f86bd;
}

.document-analysis-band > div:not(.document-top-characters) {
    align-self: start;
    min-height: 3.05rem;
    padding: 0.3rem 0.5rem;
}

.document-top-characters {
    align-self: start;
    grid-template-columns: repeat(auto-fill, minmax(2.35rem, 1fr));
    max-height: 6.9rem;
    overflow: auto;
}

.document-top-characters button {
    min-height: 2.8rem;
}

.document-analysis-band strong,
.document-top-characters button strong,
.rank-tile strong,
.character-tile {
    color: #001eff;
}

.document-analysis-band span,
.document-top-characters button span,
.rank-tile span {
    color: #000;
}

.document-top-characters button,
.character-tile,
.rank-tile {
    border-radius: 0;
    background: #fff;
}

.document-top-characters button:hover,
.document-top-characters button:focus-visible,
.document-top-characters button.selected,
.character-tile:hover,
.character-tile:focus-visible,
.character-tile.selected,
.rank-tile:hover,
.rank-tile:focus-visible,
.rank-tile.selected {
    border-color: #001eff;
    background: #d9e6ff;
}

.character-strip {
    gap: 0.25rem;
    margin-top: 0.45rem;
}

.reader-legacy-page-footer,
.reader-legacy-footer {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.5rem;
    color: #000;
    font-size: 0.8rem;
}

.reader-legacy-page-footer {
    margin-top: 0.2rem;
}

.reader-page-strip,
.reader-stats-strip,
.reader-document-name {
    display: grid;
    align-items: center;
    gap: 0.35rem;
}

.reader-page-strip {
    grid-template-columns: minmax(7rem, auto) auto 3rem auto 2.6rem minmax(7rem, auto);
    justify-content: end;
}

.reader-list-page-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.35rem 0.45rem;
    border-top: 1px solid #808080;
    background: #efefef;
    color: #000;
    font-size: 0.76rem;
}

.reader-list-page-strip label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.reader-list-page-strip input {
    width: 3.5rem;
    min-height: 1.7rem;
    border: 2px inset #d7d7d7;
    background: #fff;
    text-align: center;
}

.reader-list-page-strip button {
    min-height: 1.75rem;
    border: 2px solid #808080;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 0;
    background: #f1f1f1;
    color: #000;
}

.reader-list-page-strip button:disabled {
    color: #777;
    box-shadow: none;
}

.pwa-status {
    position: fixed;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    max-width: min(34rem, calc(100vw - 1.5rem));
    padding: 0.55rem 0.65rem;
    border: 2px solid #0000c0;
    background: #ffffe1;
    color: #000;
    box-shadow: 2px 2px 0 rgb(0 0 0 / 35%);
    font-size: 0.78rem;
}

.pwa-status[hidden] {
    display: none;
}

.pwa-status span {
    flex: 1 1 auto;
}

.pwa-status button {
    flex: 0 0 auto;
    min-height: 1.8rem;
    border: 1px solid #6f86bd;
    background: #eef4ff;
    color: #000;
}

@media (min-width: 700px) {
    .pwa-status {
        top: 0.18rem;
        right: 5.25rem;
        bottom: auto;
        max-width: min(31rem, calc(100vw - 20rem));
        min-height: 1.35rem;
        padding: 0.08rem 0.35rem;
        border-width: 1px;
        box-shadow: none;
        font-size: 0.68rem;
        line-height: 1.1;
    }

    .pwa-status button {
        min-height: 1.25rem;
        padding: 0.05rem 0.35rem;
        font-size: 0.68rem;
        line-height: 1;
    }
}

.reader-stats-strip {
    grid-template-columns: auto 4rem auto 4rem auto 3rem;
}

.reader-document-name {
    grid-template-columns: auto minmax(0, 1fr) auto auto minmax(4rem, 0.35fr);
}

.reader-page-strip button,
.reader-document-name button {
    min-height: 1.75rem;
    border: 2px solid #808080;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    border-radius: 0;
    background: #f1f1f1;
    color: #000;
    font-size: 0.78rem;
    font-weight: 400;
    box-shadow: 1px 1px 0 #3d3d3d;
}

.reader-page-strip button:hover,
.reader-page-strip button:focus-visible,
.reader-document-name button:hover,
.reader-document-name button:focus-visible {
    border-color: #0046d5;
    background: #eaf2ff;
    outline: none;
}

.reader-page-strip button:disabled,
.reader-document-name button:disabled {
    border-color: #b1b1b1;
    background: #e4e4e4;
    color: #777;
    box-shadow: none;
}

.reader-page-strip input,
.reader-document-name input,
.reader-stats-strip strong {
    min-height: 1.55rem;
    border: 2px solid #ff2a16;
    border-radius: 0;
    background: #fff;
    color: #000;
    font-weight: 400;
    text-align: center;
}

.reader-document-name input {
    width: 100%;
    min-width: 0;
    padding: 0 0.4rem;
    text-align: left;
}

.reader-document-name input[readonly] {
    background: #f5f5f5;
    color: #555;
}

.reader-document-name small {
    overflow: hidden;
    color: #244347;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-stats-strip strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
}

.character-display {
    min-height: 7rem;
    border: 2px solid #001eff;
    border-radius: 0;
    background: #fff;
    color: #000;
    font-size: 5.2rem;
}

.character-dictionary-card {
    margin: 0.65rem 0.75rem 0.45rem;
}

.entry-total-line {
    display: grid;
    grid-template-columns: auto 4.2rem auto 4.4rem;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
    color: #000;
    font-size: 0.82rem;
}

.entry-total-line strong,
.entry-total-line input {
    border: 2px solid #ff2a16;
    background: #fff;
    color: #000;
    border-radius: 0;
    font: inherit;
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
}

.entry-total-line input {
    min-width: 0;
    padding: 0 0.1rem;
}

.character-dictionary-grid {
    display: grid;
    grid-template-columns: minmax(7.2rem, 1fr) minmax(5.8rem, 6.4rem) minmax(6rem, 0.85fr);
    align-items: center;
    gap: 0.35rem;
}

.character-dictionary-grid .character-display {
    min-height: 6.9rem;
    margin: 0;
    font-size: 5rem;
}

.variant-board,
.radical-strokes-board {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    color: #000;
}

.variant-board h3,
.radical-strokes-board h3 {
    margin: 0 0 0.25rem;
    color: #000;
    font-size: 0.78rem;
    font-weight: 400;
    text-align: center;
}

.variant-row {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
}

.variant-row > span {
    font-size: 0.72rem;
}

.variant-cells {
    display: grid;
    grid-template-columns: repeat(4, 1.25rem);
    gap: 0;
    min-width: 0;
}

.variant-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.45rem;
    border: 1px solid #fff;
    border-right-color: #b8c6e8;
    border-bottom-color: #b8c6e8;
    background: #fff;
    color: #001eff;
    font-family: "Times New Roman", "Microsoft JhengHei", "Noto Serif CJK TC", serif;
    font-size: 1.1rem;
}

button.variant-cell {
    padding: 0;
}

button.variant-cell:hover,
button.variant-cell:focus-visible {
    border-color: #001eff;
    background: #d9e6ff;
    outline: none;
}

.radical-strokes-board > div {
    display: grid;
    grid-template-columns: 3.8rem minmax(1.35rem, 1fr) 1.55rem;
    align-items: center;
    gap: 0.18rem;
}

.radical-strokes-board span {
    font-size: 0.72rem;
}

.radical-strokes-board strong,
.radical-strokes-board em,
.radical-strokes-board .radical-character-link {
    min-height: 1.55rem;
    border: 1px solid #fff;
    border-right-color: #b8c6e8;
    border-bottom-color: #b8c6e8;
    background: #fff;
    color: #000;
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
}

.radical-strokes-board .radical-character-link {
    padding: 0;
    font: inherit;
}

.radical-strokes-board .radical-character-link:hover,
.radical-strokes-board .radical-character-link:focus-visible {
    border-color: #001eff;
    background: #d9e6ff;
    color: #001eff;
    outline: none;
}

.radical-strokes-board small {
    justify-self: center;
    color: #000;
    font-size: 0.78rem;
}

.entry-hanzi,
.study-entry-row span,
.word-study-entry-row span {
    border: 1px solid #6f86bd;
    border-radius: 0;
    background: #fff;
    color: #001eff;
}

.word-detail-fields {
    grid-template-columns: 4.9rem minmax(0, 1fr);
    gap: 0.18rem;
}

.word-detail-fields > span {
    color: #000;
    font-size: 0.72rem;
}

.word-detail-fields > strong,
.word-detail-fields > p,
.word-detail-fields > small,
.word-note-form textarea {
    min-height: 1.55rem;
    border: 1px solid #fff;
    border-right-color: #b8c6e8;
    border-bottom-color: #b8c6e8;
    border-radius: 0;
    padding: 0.15rem 0.35rem;
    background: #fff;
    color: #000;
}

.word-detail-fields > strong {
    font-size: 1rem;
    font-weight: 700;
}

.entry-main strong,
.study-entry-row strong,
.word-study-entry-row strong,
.word-entry-row strong,
.word-detail-card strong,
.variant-strip strong,
.word-component-strip strong {
    color: #001eff;
}

.entry-main em,
.study-entry-row em {
    border-color: #ff2a16;
    border-radius: 0;
    background: #fff;
    color: #000;
}

.reader-find-control input,
.reader-page-control input,
.reader-page-strip input,
.reader-document-name input,
.search-line input,
.local-reader-form input,
.local-reader-form textarea,
.document-properties-body input,
.document-analysis-settings-body input[type="number"],
.settings-dialog-body input[type="number"],
.custom-word-form input,
.custom-word-form textarea,
.word-note-form textarea {
    border: 2px solid #ff2a16;
    border-radius: 0;
    background: #fff;
    color: #000;
    box-shadow: none;
}

.dictionary-panel,
.word-dictionary-window,
.reader-list,
.inspector-panel {
    overflow: hidden;
}

.character-dictionary-window {
    max-height: 32rem;
    overflow: auto;
}

.word-dictionary-window {
    min-height: 23rem;
}

.entry-list,
.word-entry-list,
.text-list,
.rank-grid,
.reader-frequency-list,
.study-entry-list,
.word-study-entry-list {
    scrollbar-color: #6683c7 #d9e6ff;
}

.scope-panel {
    grid-template-columns: minmax(18rem, 1.3fr) minmax(11rem, 0.9fr) minmax(11rem, 0.9fr);
    gap: 0.55rem;
    padding: 0.45rem;
}

.document-properties-window,
.document-analysis-settings-window,
.settings-dialog-window {
    grid-column: 1 / -1;
    border: 2px solid #0038d8;
    border-radius: 0;
    background: #a9bce8;
    box-shadow:
        inset 0 0 0 1px #87a4de,
        2px 2px 0 rgb(0 0 0 / 25%);
}

.document-analysis-settings-body {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(7rem, auto);
    gap: 0.45rem 0.65rem;
    align-items: center;
    padding: 0.45rem;
    color: #000;
    font-size: 0.82rem;
}

.document-analysis-settings-body > label:not(.document-analysis-settings-option) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-analysis-settings-body input[type="number"] {
    min-height: 1.9rem;
    padding: 0 0.35rem;
}

.document-analysis-settings-option {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.45rem;
    align-items: center;
}

.document-analysis-settings-option input {
    width: 1rem;
    height: 1rem;
}

.document-analysis-settings-option.disabled {
    color: #555;
}

.document-analysis-settings-summary {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(9rem, 0.9fr) minmax(0, 1.1fr);
    gap: 0.28rem 0.55rem;
    border: 1px solid #6f86bd;
    background: #fff;
    padding: 0.45rem;
}

.document-analysis-settings-summary span {
    color: #333;
}

.document-analysis-settings-summary strong {
    min-width: 0;
    overflow: hidden;
    color: #000;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-analysis-settings-note {
    grid-column: 1 / -1;
    min-height: 1.2rem;
    margin: 0;
    color: #000;
    line-height: 1.35;
}

.settings-dialog-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    min-height: 0;
    gap: 0.5rem;
    padding: 0.45rem;
    color: #000;
    font-size: 0.78rem;
    overflow: auto;
    overscroll-behavior: contain;
}

.settings-dialog-footer {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding: 1.25rem 0.75rem;
}

.settings-dialog-footer button {
    min-width: 7rem;
    min-height: 2.75rem;
    font-size: 1rem;
}

.settings-dialog-body fieldset {
    min-width: 0;
    border: 1px solid #6f86bd;
    margin: 0;
    background: #d9e6ff;
    padding: 0.55rem;
}

.settings-dialog-body legend {
    color: #000;
    font-size: 0.78rem;
}

.settings-dialog-body label {
    min-width: 0;
}

.settings-dialog-body input[type="checkbox"],
.settings-dialog-body input[type="radio"] {
    width: 1rem;
    height: 1rem;
}

.settings-dialog-body input[type="number"] {
    min-height: 1.9rem;
    padding: 0 0.35rem;
}

.settings-radio-row,
.settings-check-grid,
.settings-reader-options {
    display: grid;
    gap: 0.4rem;
}

.settings-current-font {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
}

.settings-current-font output {
    min-width: 0;
    border: 1px solid #6f86bd;
    background: #fff;
    padding: 0.15rem 0.35rem;
    font-family: var(--ct-reader-font, MingLiU, SimSun, serif);
}

.settings-color-subheading {
    margin: 0.55rem 0 0.25rem;
    color: #273f75;
    font-weight: 700;
    text-align: center;
}

.settings-radio-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-radio-row label,
.settings-check-grid label,
.settings-reader-options label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem;
    align-items: center;
}

.settings-reader-options input:disabled + span {
    color: #5a5a5a;
}

.settings-capability-note {
    display: block;
    color: #5a5a5a;
    font-size: 0.72rem;
    line-height: 1.25;
}

.settings-wide-option,
.settings-reader-options,
.settings-dialog-body > p {
    grid-column: 1 / -1;
}

.settings-number-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(2.5rem, 3.5rem) auto !important;
    gap: 0.35rem;
    align-items: center;
}

.settings-reader-size-value {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    height: 2.75rem;
    min-width: 0;
    padding: 0.125rem 0.25rem;
    border: 1px solid #7d7d7d;
    background: #f4f4f4;
    color: #202020;
    font-variant-numeric: tabular-nums;
    font-size: 2rem;
    line-height: 1;
    text-align: center;
}

.settings-reader-size-spinner {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    box-sizing: border-box;
    width: 2rem;
    height: 2.75rem;
    overflow: hidden;
    border: 1px solid #626262;
    background: #e8e8e8;
}

.settings-reader-size-spinner button {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #202020;
    font-size: 0.75rem;
    line-height: 1;
}

.settings-reader-size-spinner button + button {
    border-top: 1px solid #9a9a9a;
}

.settings-reader-size-spinner button:hover:not(:disabled) {
    background: #c9dcf6;
}

.settings-reader-size-spinner button:disabled {
    color: #999;
}

.settings-dialog-body > p {
    min-height: 1.2rem;
    margin: 0;
}

.copyright-acknowledgments-window {
    border: 2px solid #0038d8;
    border-radius: 0;
    background: #a9bce8;
    box-shadow:
        inset 0 0 0 1px #87a4de,
        2px 2px 0 rgb(0 0 0 / 25%);
}

.web-links-window,
.help-window {
    border: 2px solid #0038d8;
    border-radius: 0;
    background: #a9bce8;
    box-shadow:
        inset 0 0 0 1px #87a4de,
        2px 2px 0 rgb(0 0 0 / 25%);
}

.parity-status-window {
    border: 2px solid #0038d8;
    border-radius: 0;
    background: #a9bce8;
    box-shadow:
        inset 0 0 0 1px #87a4de,
        2px 2px 0 rgb(0 0 0 / 25%);
}

.search-window {
    border: 2px solid #0038d8;
    border-radius: 0;
    background: #a9bce8;
    box-shadow:
        inset 0 0 0 1px #87a4de,
        2px 2px 0 rgb(0 0 0 / 25%);
}

.copyright-acknowledgments-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.45rem;
    color: #000;
    font-size: 0.78rem;
}

.copyright-acknowledgments-body > div {
    min-width: 0;
    border: 1px solid #6f86bd;
    background: #fff;
    padding: 0.45rem;
}

.copyright-acknowledgments-body h3 {
    margin: 0 0 0.25rem;
    color: #001eff;
    font-size: 0.82rem;
    font-weight: 700;
}

.copyright-acknowledgments-body p {
    margin: 0;
    line-height: 1.35;
}

.copyright-acknowledgments-body a {
    display: inline-block;
    margin-top: 0.25rem;
    color: #001eff;
    overflow-wrap: anywhere;
}

.web-links-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.45rem;
    font-size: 0.78rem;
}

.web-links-body a {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    border: 1px solid #6f86bd;
    background: #fff;
    color: #000;
    padding: 0.45rem;
    text-decoration: none;
}

.web-links-body a:hover,
.web-links-body a:focus-visible {
    border-color: #001eff;
    background: #f2f6ff;
    outline: none;
}

.web-links-body strong {
    color: #001eff;
    font-size: 0.82rem;
}

.web-links-body span {
    line-height: 1.3;
}

.web-links-section-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    border-top: 1px solid #d7ddd9;
    padding-top: 0.45rem;
    color: #465a5f;
}

.web-links-section-title strong {
    color: #465a5f;
}

.web-links-section-title span {
    font-size: 1.1rem;
    font-weight: 900;
}

.context-link-encoding-grid,
.context-link-builder {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.context-link-editor-toolbar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto auto minmax(8rem, 1fr) auto auto;
    gap: 0.35rem;
    align-items: center;
}

.context-link-editor-toolbar span {
    color: #465a5f;
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
}

.context-link-encoding-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.context-link-encoding {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    min-height: 3.35rem;
    border: 1px solid #6f86bd;
    background: #eef3ff;
    color: #000;
    padding: 0.35rem;
    text-align: left;
}

.context-link-encoding.is-selected {
    border-color: #001eff;
    background: #fff;
    box-shadow: inset 0 0 0 1px #001eff;
}

.context-link-encoding:disabled {
    opacity: 0.5;
}

.context-link-encoding strong {
    color: #001eff;
    font-size: 0.74rem;
}

.context-link-encoding span {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.72rem;
    line-height: 1.2;
}

.context-link-builder {
    grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr) minmax(10rem, 0.45fr) auto;
    align-items: end;
}

.context-link-builder label {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.context-link-builder label > span {
    color: #465a5f;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.context-link-builder input {
    min-width: 0;
    height: 2rem;
    border: 1px solid #6f86bd;
    background: #fff;
    padding: 0 0.35rem;
    font-size: 0.78rem;
}

.context-link-save-button,
.context-link-editor-toolbar button,
.context-link-saved-row button {
    min-height: 2rem;
    border: 1px solid #6f86bd;
    background: #eef3ff;
    color: #001eff;
    padding: 0 0.55rem;
    font-size: 0.76rem;
    font-weight: 800;
}

.context-link-save-button:hover,
.context-link-save-button:focus-visible,
.context-link-editor-toolbar button:hover,
.context-link-editor-toolbar button:focus-visible,
.context-link-saved-row button:hover,
.context-link-saved-row button:focus-visible {
    border-color: #001eff;
    background: #fff;
    outline: none;
}

.context-link-save-button:disabled,
.context-link-editor-toolbar button:disabled {
    cursor: default;
    opacity: 0.55;
}

.context-link-saved-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.4rem;
    align-items: stretch;
    min-width: 0;
}

.context-link-saved-row.is-selected > a {
    border-color: #001eff;
    box-shadow: inset 0 0 0 1px #001eff;
}

.web-links-body a.context-link-card span {
    overflow-wrap: anywhere;
}

.web-links-body a.context-link-card.is-disabled {
    cursor: default;
    opacity: 0.58;
}

.web-links-body a.context-link-card.is-disabled:hover,
.web-links-body a.context-link-card.is-disabled:focus-visible {
    border-color: #6f86bd;
    background: #fff;
}

.help-body {
    display: grid;
    gap: 0.45rem;
    padding: 0.45rem;
    color: #000;
    font-size: 0.78rem;
}

.help-body article {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    border: 1px solid #6f86bd;
    background: #fff;
    padding: 0.45rem;
}

.help-body h3 {
    margin: 0;
    color: #001eff;
    font-size: 0.82rem;
    font-weight: 700;
}

.help-body a {
    color: #001eff;
    overflow-wrap: anywhere;
}

.help-body a:hover,
.help-body a:focus-visible {
    border-color: #001eff;
    background: #f2f6ff;
    outline: none;
}

.help-body p,
.help-body dl {
    margin: 0;
    line-height: 1.35;
}

.help-body dl {
    display: grid;
    grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
    gap: 0.25rem 0.5rem;
}

.help-body dt {
    color: #000;
    font-weight: 700;
}

.help-body dd {
    margin: 0;
    line-height: 1.35;
}

.parity-status-body {
    display: grid;
    gap: 0.45rem;
    padding: 0.45rem;
    color: #000;
    font-size: 0.78rem;
}

.parity-status-message {
    border: 1px solid #d99b00;
    background: #fff6d2;
    color: #3a2700;
    padding: 0.35rem 0.45rem;
}

.parity-status-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
}

.parity-status-summary span {
    min-width: 0;
    border: 1px solid #6f86bd;
    background: #fff;
    padding: 0.4rem;
    text-align: center;
}

.parity-status-summary strong {
    display: block;
    color: #001eff;
    font-size: 0.95rem;
}

.parity-feature-list {
    display: grid;
    gap: 0.35rem;
    max-height: 24rem;
    overflow: auto;
}

.parity-feature-row {
    min-width: 0;
    border: 1px solid #6f86bd;
    background: #fff;
    padding: 0.45rem;
}

.parity-feature-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.parity-feature-row h3 {
    margin: 0;
    color: #001eff;
    font-size: 0.82rem;
}

.parity-feature-row p {
    margin: 0.25rem 0;
    line-height: 1.35;
}

.parity-feature-row small {
    display: block;
    color: #344;
    overflow-wrap: anywhere;
}

.parity-status-badge {
    flex: 0 0 auto;
    border: 1px solid #6f86bd;
    background: #eef3ff;
    padding: 0.1rem 0.35rem;
    font-size: 0.68rem;
    text-transform: uppercase;
}

.parity-status-badge.done {
    border-color: #317a43;
    background: #e6f6df;
}

.parity-status-badge.partial {
    border-color: #b17c00;
    background: #fff2c7;
}

.parity-status-badge.pending {
    border-color: #8c4537;
    background: #ffe3dc;
}

.parity-status-badge.excluded {
    border-color: #67717a;
    background: #eef0f2;
}

.search-window-body {
    display: grid;
    gap: 0.38rem;
    padding: 0.45rem;
}

.search-window-body fieldset {
    min-width: 0;
    margin: 0;
    border: 1px solid #8792a8;
}

.search-window-body legend {
    padding: 0 0.2rem;
    color: #000;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.search-window-criteria {
    display: grid;
    gap: 0.22rem;
    padding: 0.25rem 0.35rem 0.35rem;
}

.search-window-criteria-heading,
.search-window-criterion {
    display: grid;
    grid-template-columns: 5.4rem minmax(8rem, 1fr) minmax(11rem, auto);
    gap: 0.38rem;
    align-items: center;
    min-width: 0;
}

.search-window-criteria-heading {
    padding: 0 0.2rem;
    color: #43506b;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.search-window-criterion > label {
    color: #000;
    font-size: 0.72rem;
    font-weight: 700;
}

.search-window-criterion > input[type="text"] {
    width: 100%;
    min-width: 0;
    min-height: 1.72rem;
    border: 2px solid #ff2a16;
    border-radius: 0;
    background: #fff;
    color: #000;
    padding: 0 0.35rem;
}

.search-window-criterion-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.55rem;
    align-items: center;
}

.search-window-criterion-options label,
.search-window-scopes label,
.search-window-close-option {
    display: flex;
    gap: 0.26rem;
    align-items: center;
    min-width: 0;
    color: #000;
    font-size: 0.7rem;
    white-space: nowrap;
}

.search-window-body input[type="checkbox"] {
    width: 0.95rem;
    height: 0.95rem;
    min-height: 0;
    margin: 0;
    accent-color: #163f9c;
}

.search-window-scopes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem 0.65rem;
    padding: 0.3rem 0.45rem 0.4rem;
}

.search-window-footer {
    display: flex;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
}

.search-window-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(6.8rem, auto));
    gap: 0.35rem;
}

.search-window-actions button {
    min-height: 1.9rem;
    border: 1px solid #6f86bd;
    background: #eef4ff;
    color: #000;
}

.search-window-actions button:hover,
.search-window-actions button:focus-visible {
    border-color: #001eff;
    background: #fff;
    outline: none;
}

.search-window-actions button:disabled {
    color: #666;
}

.search-window-body[aria-busy="true"] .search-window-criteria,
.search-window-body[aria-busy="true"] .search-window-scopes {
    opacity: 0.72;
}

.search-window-status {
    margin: 0;
    min-height: 1.2rem;
    color: #000;
    font-size: 0.78rem;
}

.document-properties-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem 0.65rem;
    align-items: center;
    padding: 0.45rem;
    color: #000;
    font-size: 0.82rem;
}

.document-properties-body > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-properties-body > input {
    min-height: 1.9rem;
}

.document-properties-body > strong {
    min-width: 5rem;
    min-height: 1.55rem;
    border: 2px solid #ff2a16;
    background: #fff;
    color: #000;
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
}

.document-properties-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(7rem, 10rem));
    justify-content: center;
    gap: 1rem;
    margin-top: 0.25rem;
}

.document-properties-status {
    grid-column: 1 / -1;
    margin: 0;
    min-height: 1.2rem;
    font-size: 0.78rem;
}

.radical-information-window {
    /* The legacy companion is a short fixed-information window.  Do not let
       a historic user resize persist as a large blank desktop panel after its
       contents have returned to the native two-column form. */
    height: auto !important;
    min-height: 0;
    border: 2px solid #0038d8;
    border-radius: 0;
    background: #a9bce8;
    box-shadow:
        inset 0 0 0 1px #87a4de,
        2px 2px 0 rgb(0 0 0 / 25%);
}

.character-understanding-review-window {
    height: auto !important;
    min-height: 0;
    border: 2px solid #0038d8;
    border-radius: 0;
    background: #a9bce8;
    box-shadow:
        inset 0 0 0 1px #87a4de,
        2px 2px 0 rgb(0 0 0 / 25%);
}

.character-understanding-review-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.4rem;
    align-items: start;
    padding: 0.3rem 0.45rem;
    color: #000;
    font-size: 0.72rem;
}

.character-understanding-review-body section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(1.1rem, auto);
    gap: 0.25rem 0.35rem;
    align-items: center;
}

.character-understanding-review-body label,
.character-review-state-line {
    display: contents;
}

.character-understanding-review-body span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character-review-state-fields select,
.character-review-state-toggle,
.character-review-readonly {
    min-height: 1.25rem;
    box-sizing: border-box;
    background: #fff;
    color: #000;
    font: inherit;
    line-height: 1.15;
}

.character-review-state-fields select,
.character-review-state-toggle {
    width: 1.3rem;
    border: 1px solid #ff2a16;
    border-radius: 0;
    padding: 0;
    text-align: center;
}

.character-review-state-fields select {
    appearance: none;
}

.character-review-state-fields .character-review-readonly,
.character-review-navigation-fields .character-review-readonly {
    border: 1px solid #fff;
    border-right-color: #b8c6e8;
    border-bottom-color: #b8c6e8;
    padding: 0.03rem 0.25rem;
}

.character-review-date-scope {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.3rem;
    gap: 0.35rem;
    align-items: center;
    border-top: 1px solid #7d91c6;
    padding-top: 0.22rem;
    line-height: 1.15;
}

.character-review-date-scope-toggle {
    width: 1.3rem;
    min-height: 1.25rem;
    border: 1px solid #ff2a16;
    border-radius: 0;
    background: #fff;
    color: #000;
    font: inherit;
    line-height: 1.15;
    padding: 0;
    text-align: center;
}

/* The native compact dialog keeps traversal on the selected main glyph.
   Retain equivalent commands for non-pointer interaction without adding a
   generic button row to the Windows-style form. */
.character-review-keyboard-navigation {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.character-review-readonly {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character-review-status {
    margin: 0 0.45rem 0.45rem;
    font-size: 0.72rem;
}

.radical-information-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.9fr);
    gap: 0.3rem;
    padding: 0.3rem 0.45rem;
    color: #000;
    font-size: 0.72rem;
}

.radical-information-body section {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.24rem 0.35rem;
    align-items: center;
}

.radical-information-body h3 {
    grid-column: 1 / -1;
    margin: 0;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 400;
}

.radical-information-body label {
    display: contents;
}

.radical-information-body label > span {
    white-space: nowrap;
}

.radical-information-body strong {
    min-height: 1.25rem;
    border: 1px solid #ff2a16;
    background: #fff;
    color: #000;
    font-weight: 400;
    line-height: 1.15;
    padding: 0.03rem 0.22rem;
}

.radical-information-flags input {
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
    accent-color: #fff;
    opacity: 1;
}

.radical-information-auto-display {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem;
    align-items: center;
    margin: 0 0.45rem 0.3rem;
    padding-top: 0.18rem;
    border-top: 1px solid #7d91c6;
    color: #000;
    font-size: 0.62rem;
    line-height: 1.15;
}

.radical-information-auto-display input {
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
}

.frequency-browser,
.scope-group {
    gap: 0.35rem;
}

.word-selection-strip {
    display: block;
    padding: 0.55rem 0.65rem;
    background: #a9bce8;
}

.word-selection-strip button {
    width: 100%;
    min-height: 2.85rem;
    border: 1px solid #6f86bd;
    padding: 0.35rem 0.45rem;
    text-align: left;
}

.word-selection-strip strong {
    color: #000;
    font-size: 0.95rem;
    font-weight: 400;
}

.word-selection-strip span {
    color: #505050;
    font-size: 0.72rem;
    font-weight: 400;
}

.custom-word-form {
    gap: 0;
}

.custom-word-form input + input {
    border-left: 0;
}

.custom-word-form textarea,
.custom-word-actions {
    margin-top: 0.35rem;
}

.frequency-list-button,
.word-selection-strip button,
.word-detail-card,
.word-entry-row,
.reader-frequency-row,
.study-entry-row,
.word-study-entry-row {
    border-color: #6f86bd;
}

.word-entry-row:last-child,
.word-entry-row span,
.word-entry-row small {
    border-color: #6f86bd;
}

.frequency-list-button:hover,
.frequency-list-button:focus-visible,
.frequency-list-button.selected,
.word-selection-strip button:hover,
.word-selection-strip button:focus-visible,
.word-entry-row:hover,
.word-entry-row:focus-visible,
.word-entry-row.selected,
.reader-frequency-row:hover,
.reader-frequency-row:focus-visible,
.reader-frequency-row.selected,
.study-entry-row:hover,
.study-entry-row:focus-visible,
.study-entry-row.selected,
.word-study-entry-row:hover,
.word-study-entry-row:focus-visible,
.word-study-entry-row.selected {
    border-color: #001eff;
    background: #d9e6ff;
}

.facts dt {
    color: #000;
    font-weight: 400;
}

.facts dd,
.frequency-row,
.word-detail-card span,
.word-detail-card p,
.word-detail-card small,
.word-entry-row small,
.word-entry-row em {
    color: #000;
}

.frequency-box {
    border-top-color: #7d91c6;
}

.workbench-page .reader-line p {
    font-size: var(--reader-character-size, 26px);
}

.workbench-page.chinese-font-mingliu .reader-line p,
.workbench-page.chinese-font-mingliu .character-strip,
.workbench-page.chinese-font-mingliu .document-top-characters strong,
.workbench-page.chinese-font-mingliu .document-word-strip strong,
.workbench-page.chinese-font-mingliu .character-display,
.workbench-page.chinese-font-mingliu .entry-hanzi,
.workbench-page.chinese-font-mingliu .word-entry-row strong,
.workbench-page.chinese-font-mingliu .word-detail-fields strong,
.workbench-page.chinese-font-mingliu .variant-cell {
    font-family: MingLiU, "Microsoft JhengHei", "Noto Serif CJK TC", serif;
}

.workbench-page.chinese-font-simsun .reader-line p,
.workbench-page.chinese-font-simsun .character-strip,
.workbench-page.chinese-font-simsun .document-top-characters strong,
.workbench-page.chinese-font-simsun .document-word-strip strong,
.workbench-page.chinese-font-simsun .character-display,
.workbench-page.chinese-font-simsun .entry-hanzi,
.workbench-page.chinese-font-simsun .word-entry-row strong,
.workbench-page.chinese-font-simsun .word-detail-fields strong,
.workbench-page.chinese-font-simsun .variant-cell {
    font-family: SimSun, NSimSun, "Noto Sans CJK SC", serif;
}


@media (max-width: 1180px) {
    .workbench-grid {
        grid-template-columns: minmax(22rem, 1fr) minmax(24rem, 1.4fr);
        grid-template-areas:
            "reader reader"
            "inspector word"
            "texts dictionary"
            "scope scope";
    }
}

@media (max-width: 760px) {
    .workbench-page {
        padding: 0.35rem;
    }

    .workbench-header {
        align-items: stretch;
        flex-direction: column;
    }

    .snapshot-meter {
        min-width: 0;
    }

    .workbench-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "reader"
            "inspector"
            "word"
            "texts"
            "dictionary"
            "scope";
    }

    .scope-panel {
        grid-template-columns: 1fr;
    }

    .reader-tabs button {
        min-width: 7rem;
    }

    .character-dictionary-grid {
        grid-template-columns: 1fr;
    }

    .character-dictionary-grid .character-display {
        justify-self: center;
        width: min(100%, 10rem);
    }

    .reader-page-strip,
    .reader-stats-strip,
    .reader-document-name {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .word-detail-fields,
    .word-entry-row {
        grid-template-columns: 1fr;
    }

    .word-entry-row span,
    .word-entry-row small {
        border-right: 0;
        border-bottom: 1px solid #6f86bd;
    }

    .word-entry-row small:last-child {
        border-bottom: 0;
    }

    .reader-line p {
        font-size: 1.28rem;
    }
}

/* Main-window composition: Reader, Character Dictionary, and Word Dictionary
   start tiled. Each can be closed, reopened, moved, and resized with the same
   window controller used by the modeless accessory windows below. */
.workbench-grid {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(34rem, 1.35fr) minmax(26rem, 0.95fr);
    grid-template-areas:
        "reader inspector"
        "reader word";
    align-items: stretch;
    gap: 0.55rem;
    max-width: none;
}

.reader-stage {
    min-height: calc(100vh - 5.4rem);
}

.character-dictionary-window {
    max-height: calc((100vh - 6rem) * 0.55);
    min-height: 20rem;
}

.word-dictionary-window {
    min-height: calc((100vh - 6rem) * 0.45);
}

.accessory-dock {
    position: fixed;
    inset: 3.3rem 0 0;
    z-index: 15;
    display: block;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 3.3rem);
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    background: transparent;
    isolation: isolate;
    pointer-events: none;
}

@media (min-width: 1000px) {
    .workbench-grid[data-accessory-controller="active"] > .primary-window[data-accessory-managed="true"] {
        position: absolute;
        top: var(--ct-accessory-top, 0);
        right: auto;
        bottom: auto;
        left: var(--ct-accessory-left, 0);
        z-index: var(--ct-accessory-z-index, 1);
        grid-area: auto;
        box-sizing: border-box;
        width: min(var(--ct-accessory-width, 100%), calc(100% - 0.5rem));
        height: var(--ct-accessory-height, auto);
        max-width: calc(100% - 0.5rem);
        max-height: calc(100% - 0.5rem);
        margin: 0;
    }

    .workbench-grid[data-accessory-controller="active"] > .primary-window[data-accessory-active="true"] {
        box-shadow:
            inset 0 0 0 1px #87a4de,
            3px 3px 0 rgb(0 0 0 / 34%);
    }

    .workbench-grid[data-accessory-controller="active"] > .primary-window > .panel-heading {
        cursor: move;
        touch-action: none;
        user-select: none;
    }

    .workbench-grid[data-accessory-controller="active"] > .primary-window[data-accessory-dragging="true"] > .panel-heading {
        cursor: grabbing;
    }

    .workbench-grid[data-accessory-controller="active"] > .primary-window[data-accessory-resizable="true"]::after {
        position: absolute;
        right: 1px;
        bottom: 1px;
        z-index: 3;
        width: 16px;
        height: 16px;
        border-right: 2px solid #365184;
        border-bottom: 2px solid #365184;
        background: repeating-linear-gradient(
            135deg,
            transparent 0 3px,
            rgb(54 81 132 / 72%) 3px 5px);
        content: "";
        cursor: nwse-resize;
        pointer-events: auto;
        touch-action: none;
    }

    .workbench-grid[data-accessory-controller="active"] > .primary-window[data-accessory-resizing="true"] {
        cursor: nwse-resize;
        user-select: none;
    }

    .workbench-grid[data-accessory-controller="active"] > .primary-window > .panel-heading button,
    .workbench-grid[data-accessory-controller="active"] > .primary-window > .panel-heading a,
    .workbench-grid[data-accessory-controller="active"] > .primary-window > .panel-heading input,
    .workbench-grid[data-accessory-controller="active"] > .primary-window > .panel-heading select,
    .workbench-grid[data-accessory-controller="active"] > .primary-window > .panel-heading textarea {
        cursor: default;
        touch-action: manipulation;
        user-select: auto;
    }
}

.accessory-dock > .account-panel,
.accessory-dock > .reader-list,
.accessory-dock > .dictionary-panel,
.accessory-dock > .search-window,
.accessory-dock > .settings-dialog-window,
.accessory-dock > .document-properties-window,
.accessory-dock > .document-analysis-settings-window,
.accessory-dock > .copyright-acknowledgments-window,
.accessory-dock > .web-links-window,
.accessory-dock > .help-window,
.accessory-dock > .parity-status-window,
.accessory-dock > .radical-information-window,
.accessory-dock > .frequency-browser,
.accessory-dock > .character-understanding-review-window,
.accessory-dock > .scope-panel {
    min-width: 0;
    max-height: calc(100dvh - 4.35rem);
    border: 2px solid #0038d8;
    border-radius: 0;
    background: #a9bce8;
    box-shadow:
        inset 0 0 0 1px #87a4de,
        2px 2px 0 rgb(0 0 0 / 25%);
    opacity: 0.96;
    overflow: auto;
    pointer-events: auto;
}

/* The controller leaves the server-rendered fallback in normal flow, then
   promotes each modeless accessory to its own independently positioned window
   once client interactivity is available. */
.accessory-dock:not([data-accessory-controller="active"]) > .accessory-window {
    width: min(42rem, 100%);
    margin: 0 0 0.55rem;
}

.accessory-dock[data-accessory-controller="active"] > .accessory-window {
    position: absolute;
    top: var(--ct-accessory-top, 0);
    right: auto;
    bottom: auto;
    left: var(--ct-accessory-left, 0);
    z-index: var(--ct-accessory-z-index, 1);
    width: min(var(--ct-accessory-width, 42rem), calc(100% - 0.5rem));
    height: var(--ct-accessory-height, auto);
    max-width: calc(100% - 0.5rem);
    margin: 0;
}

/* Settings stays centered even when an older saved accessory placement exists.
   Its content scrolls independently so the heading and Close button stay in view. */
.accessory-dock:has(> #settings-dialog) {
    inset: 0;
    z-index: 1500;
    max-height: 100dvh;
    padding: 0;
    overflow: visible;
}

.accessory-dock > #settings-dialog {
    position: fixed;
    z-index: 2000;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: min(clamp(28.333rem, 46.667vw, 42rem), calc(100vw - 2rem));
    height: auto;
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: 0;
    overflow: hidden;
}

.accessory-dock > #settings-dialog > .panel-heading {
    flex-shrink: 0;
    cursor: default;
    touch-action: auto;
    user-select: auto;
}

.accessory-dock[data-accessory-controller="active"] > .accessory-window[data-accessory-active="true"] {
    box-shadow:
        inset 0 0 0 1px #87a4de,
        3px 3px 0 rgb(0 0 0 / 34%);
    opacity: 1;
}

.accessory-dock[data-accessory-controller="active"] > .accessory-window > .panel-heading {
    cursor: move;
    touch-action: none;
    user-select: none;
}

.accessory-dock[data-accessory-controller="active"] > .accessory-window[data-accessory-dragging="true"] > .panel-heading {
    cursor: grabbing;
}

.accessory-dock[data-accessory-controller="active"] > .accessory-window[data-accessory-resizable="true"]::after {
    position: absolute;
    right: 1px;
    bottom: 1px;
    z-index: 2;
    width: 16px;
    height: 16px;
    border-right: 2px solid #365184;
    border-bottom: 2px solid #365184;
    background: repeating-linear-gradient(
        135deg,
        transparent 0 3px,
        rgb(54 81 132 / 72%) 3px 5px);
    content: "";
    cursor: nwse-resize;
    pointer-events: auto;
    touch-action: none;
}

.accessory-dock[data-accessory-controller="active"] > .radical-information-window {
    overflow: hidden;
}

.accessory-dock[data-accessory-controller="active"] > .radical-information-window::after {
    display: none;
}

.accessory-dock[data-accessory-controller="active"] > .character-understanding-review-window {
    width: min(31.5rem, calc(100% - 0.5rem)) !important;
    overflow: hidden;
}

.accessory-dock[data-accessory-controller="active"] > .character-understanding-review-window::after {
    display: none;
}

.accessory-dock[data-accessory-controller="active"] > .accessory-window[data-accessory-resizing="true"] {
    cursor: nwse-resize;
    user-select: none;
}

.accessory-dock[data-accessory-controller="active"] > .accessory-window > .panel-heading button,
.accessory-dock[data-accessory-controller="active"] > .accessory-window > .panel-heading a,
.accessory-dock[data-accessory-controller="active"] > .accessory-window > .panel-heading input,
.accessory-dock[data-accessory-controller="active"] > .accessory-window > .panel-heading select,
.accessory-dock[data-accessory-controller="active"] > .accessory-window > .panel-heading textarea {
    cursor: default;
    touch-action: manipulation;
    user-select: auto;
}

/* InputFile renders its input inside a child component, outside NavMenu's
   isolated-CSS scope. Keep the native chooser available through its label
   without letting the browser's file control bleed through the legacy menu. */
.menu-dropdown-upload input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.accessory-dock > .reader-list,
.accessory-dock > .dictionary-panel {
    grid-area: auto;
}

.accessory-dock > .frequency-browser {
    padding: 0.45rem;
}

.accessory-dock > .frequency-browser > .panel-heading {
    flex-basis: 100%;
    width: 100%;
}

.accessory-dock > .scope-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.accessory-dock > .scope-panel > .panel-heading {
    grid-column: 1 / -1;
}

@media (max-width: 1180px) {
    .workbench-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "reader"
            "inspector"
            "word";
    }

    .reader-stage {
        min-height: 34rem;
    }

    .character-dictionary-window {
        max-height: none;
    }

}

@media (max-width: 760px) {
    .workbench-grid,
    .accessory-dock,
    .accessory-dock.snap-enabled {
        display: grid;
        grid-template-columns: 1fr;
        align-content: start;
        gap: 0.55rem;
        max-width: none;
    }

    .copyright-acknowledgments-body {
        grid-template-columns: 1fr;
    }

    .web-links-body {
        grid-template-columns: 1fr;
    }

    .context-link-encoding-grid,
    .context-link-builder,
    .context-link-editor-toolbar,
    .context-link-saved-row {
        grid-template-columns: 1fr;
    }

    .parity-status-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-dialog-body {
        grid-template-columns: 1fr;
    }

    .search-window-criteria-heading {
        display: none;
    }

    .search-window-criterion {
        grid-template-columns: 4.7rem minmax(0, 1fr);
        padding: 0.12rem 0;
    }

    .search-window-criterion-options {
        grid-column: 2;
    }

    .search-window-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .search-window-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-window-scopes {
        grid-template-columns: 1fr;
    }

    .accessory-dock > .scope-panel {
        grid-template-columns: 1fr;
    }

    .accessory-dock,
    .accessory-dock.snap-enabled {
        inset: 4.8rem 0.2rem 0.2rem;
        max-height: calc(100dvh - 5rem);
        padding: 0.2rem;
        overflow: auto;
    }

    .accessory-dock[data-accessory-controller="active"] > .accessory-window {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        z-index: auto;
        width: auto;
        height: auto;
        max-width: none;
        margin: 0;
    }

    .accessory-dock[data-accessory-controller="active"] > .accessory-window > .panel-heading {
        cursor: default;
        touch-action: auto;
        user-select: auto;
    }

    .accessory-dock[data-accessory-controller="active"] > .accessory-window[data-accessory-resizable="true"]::after {
        display: none;
    }

    .accessory-dock > .reader-list,
    .accessory-dock > .dictionary-panel,
    .accessory-dock > .search-window,
    .accessory-dock > .settings-dialog-window,
    .accessory-dock > .document-properties-window,
    .accessory-dock > .document-analysis-settings-window,
    .accessory-dock > .copyright-acknowledgments-window,
    .accessory-dock > .web-links-window,
    .accessory-dock > .help-window,
    .accessory-dock > .parity-status-window,
    .accessory-dock > .radical-information-window,
    .accessory-dock > .frequency-browser,
    .accessory-dock > .scope-panel {
        max-height: calc(100dvh - 5.6rem);
    }
}

/* Legacy parity pass: keep the browser-hosted shell visually close to the
   original three-window Chinese Toolbox desktop layout. */
.app-shell {
    background: #a9bce8;
}

.workspace {
    min-height: calc(100vh - 3.55rem);
}

.workbench-page {
    min-height: calc(100vh - 3.55rem);
    padding: 0.2rem;
}

.workbench-header {
    justify-content: flex-end;
    max-width: none;
    min-height: 1.2rem;
    margin: 0 0 0.15rem;
}

.workbench-header > div:first-child {
    display: none;
}

.snapshot-meter {
    grid-template-columns: repeat(3, 3.25rem);
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.snapshot-meter span,
.snapshot-meter small {
    min-height: 0.72rem;
    padding: 0;
    color: #000;
    font-size: 0.62rem;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
}

.snapshot-meter span {
    border: 1px solid #ff2a16;
    background: #fff;
}

.workbench-grid {
    grid-template-columns: minmax(36rem, 1.35fr) minmax(27rem, 0.98fr);
    column-gap: 0.55rem;
    row-gap: 0.2rem;
}

.reader-stage,
.character-dictionary-window,
.word-dictionary-window {
    border: 2px solid #0038d8;
    border-radius: 0;
    background: #a9bce8;
    box-shadow: none;
}

.reader-stage {
    min-height: calc(100vh - 4.95rem);
}

.character-dictionary-window {
    max-height: calc((100vh - 5.2rem) * 0.55);
}

.word-dictionary-window {
    min-height: calc((100vh - 5.2rem) * 0.45);
}

.panel-heading,
.reader-window-heading {
    min-height: 1.55rem;
    padding: 0.12rem 0.35rem;
    border: 0;
    border-bottom: 1px solid #8a8a8a;
    background: #f3f3f3;
    color: #8a8a8a;
}

.panel-heading h2,
.reader-window-heading h2 {
    color: #8a8a8a;
    font-size: 0.82rem;
    font-weight: 400;
}

.panel-heading span,
.reader-window-heading span {
    color: #000;
    font-size: 0.7rem;
    font-weight: 400;
}

.reader-tabs {
    padding-top: 0.35rem;
}

.reader-paper {
    margin: 0.3rem;
}

/* Reference-viewport parity: the 2019 Windows client keeps Reader on the left,
   Character Dictionary above Word Dictionary on the right, and the working
   document/details ahead of secondary analysis and management utilities. */
.workbench-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* The Windows workbench gives the full Character Dictionary form just over
       three fifths of the right column; the Word Dictionary occupies the
       remainder. This keeps the bottom of the native Notes frame visible at a
       standard desktop viewport. */
    grid-template-rows: minmax(0, 62fr) minmax(0, 38fr);
    grid-template-areas:
        "reader inspector"
        "reader word";
}

.reader-titlebar {
    gap: 0.35rem;
    padding-bottom: 0.25rem;
}

.reader-tabs button {
    min-width: 0;
    padding-right: 0.32rem;
    padding-left: 0.32rem;
    font-size: 0.72rem;
}

/* The Windows Reader exposes eight modes in a compact 4x2 control grid. Keep
   the same order and let Import retain its original clipboard action. */
.reader-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.18rem;
    padding: 0.32rem;
    border-bottom: 2px solid #111;
    overflow: visible;
}

.reader-tabs button,
.reader-view-upload {
    position: relative;
    top: 0;
    display: grid;
    min-width: 0;
    min-height: 1.9rem;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid #111;
    border-radius: 0;
    margin: 0;
    padding: 0.12rem 0.2rem;
    overflow: hidden;
    background: #f9f9f9;
    color: #000;
    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
}

.reader-tabs button:hover,
.reader-tabs button:focus-visible,
.reader-tabs button.selected,
.reader-view-upload:hover,
.reader-view-upload:focus-within {
    top: 0;
    border-color: #111;
    background: #fff;
    color: #000;
    outline: 2px solid transparent;
    box-shadow: inset 0 0 0 2px #a9bce8;
}

.reader-report-view,
.reader-search-results-view {
    min-height: 0;
    overflow: auto;
}

.reader-report {
    margin: 0;
    padding: 0.65rem;
    overflow: auto;
    color: #111;
    font: inherit;
    line-height: 1.45;
    white-space: pre-wrap;
}

.reader-search-result-list + .reader-search-result-list {
    border-top: 2px solid #7d91c6;
}

/* Settings-dialog colors are scoped to one workbench instance. These states
   correspond to the named legacy Reader colors instead of changing unrelated
   dictionary chrome. */
.workbench-page,
.workbench-page .reader-paper,
.workbench-page .reader-lines {
    background-color: var(--ct-main-interface-color, #fff);
}

.workbench-page .reader-lines {
    border-color: var(--ct-page-border-color, #0000c0);
}

.workbench-page .reader-stage,
.workbench-page .character-dictionary-window,
.workbench-page .word-dictionary-window,
.workbench-page .accessory-window {
    border-color: var(--ct-page-border-color, #0000c0);
}

.workbench-page .reader-line p,
.workbench-page .inline-reader-char {
    color: var(--ct-reader-regular-text-color, #0000ff);
}

.workbench-page .inline-reader-char.word-match {
    border-bottom-color: var(--ct-reader-word-underline-color, #0000c0);
    color: var(--ct-reader-regular-text-color, #0000ff);
    text-decoration-color: var(--ct-reader-word-underline-color, #0000c0);
}

.workbench-page .inline-reader-char.word-need {
    border-bottom-color: var(--ct-reader-need-indicator-color, #ff00ff);
    text-decoration-color: var(--ct-reader-need-indicator-color, #ff00ff);
}

.workbench-page .inline-reader-char.word-match.word-need {
    border-bottom-color: var(--ct-reader-word-underline-color, #0000c0);
}

.workbench-page .inline-reader-char.character-known {
    color: var(--ct-reader-known-text-color, #808080);
}

.workbench-page .inline-reader-char.character-need::before {
    position: absolute;
    top: 0.08rem;
    right: 0.08rem;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 999px;
    background: var(--ct-reader-need-indicator-color, #ff00ff);
    content: "";
}

.workbench-page .inline-reader-char.word-exists::after,
.workbench-page .inline-reader-char.word-known::after {
    position: absolute;
    bottom: 0.08rem;
    left: 0.08rem;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 999px;
    background: var(--ct-reader-word-exists-indicator-color, #e6e6e6);
    content: "";
}

.workbench-page .inline-reader-char.previously-read {
    background: var(--ct-reader-already-read-color, #e6e6e6);
}

.workbench-page .inline-reader-char.extended-selection {
    background: var(--ct-reader-extended-selection-color, #c0c0c0);
}

.workbench-page .inline-reader-char.word-focused {
    background: var(--ct-reader-extended-selection-color, #c0c0c0);
}

.reader-selection-announcement {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.workbench-page .inline-reader-char:hover,
.workbench-page .inline-reader-char:focus-visible,
.workbench-page .inline-reader-char.selected,
.workbench-page .inline-reader-char.word-focused {
    border-color: var(--ct-reader-selection-color, #000);
    box-shadow: inset 0 0 0 1px var(--ct-reader-selection-color, #000);
}

.reader-title-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
}

.reader-find-control {
    grid-template-columns: minmax(5.5rem, 8rem) auto auto;
    gap: 0.2rem;
}

.reader-find-control > span:empty,
.reader-copy-actions > span:empty {
    display: none;
}

.reader-copy-actions {
    grid-template-columns: auto auto;
    gap: 0.2rem;
}

.reader-page-control {
    display: none;
}

.reader-find-control input,
.reader-find-control button,
.reader-copy-actions button,
.reader-title-action {
    min-height: 1.55rem;
}

.reader-lines {
    margin-top: 0.35rem;
    height: 20rem;
    max-height: 20rem;
    box-sizing: border-box;
    overflow: hidden;
}

.workbench-context-menu-dismiss-layer {
    position: fixed;
    inset: 0;
    z-index: 1390;
    background: transparent;
}

.workbench-context-menu {
    position: fixed;
    left: max(0.5rem, min(var(--workbench-context-x), calc(100vw - min(30rem, calc(100vw - 1rem)) - 0.5rem)));
    top: max(0.5rem, min(var(--workbench-context-y), calc(100vh - 6.5rem)));
    z-index: 1400;
    display: grid;
    font-size: var(--ct-menu-entry-font-size, 1.56rem);
    line-height: 1.25;
    box-sizing: border-box;
    width: min(30rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    padding: 0.2rem;
    border: 1px solid #6d6554;
    border-radius: 0.15rem;
    background: #fffef8;
    box-shadow: 0 0.35rem 1rem rgba(42, 37, 26, 0.3);
}

.workbench-context-menu button,
.workbench-context-menu a[role="menuitem"] {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.45rem 0.75rem;
    border: 0;
    border-radius: 0.1rem;
    background: transparent;
    color: #28251f;
    font: inherit;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

.workbench-context-menu button:hover,
.workbench-context-menu button:focus-visible,
.workbench-context-menu a[role="menuitem"]:hover,
.workbench-context-menu a[role="menuitem"]:focus-visible {
    outline: 0;
    background: #234b7b;
    color: #fff;
}

.workbench-context-menu button:disabled {
    color: #817b6e;
    cursor: not-allowed;
}

.character-context-menu,
.word-context-menu {
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.character-context-target:focus-visible,
.word-context-target:focus-visible {
    outline: 2px solid var(--ct-reader-selection-color, #000);
    outline-offset: 2px;
}

.word-context-target {
    cursor: context-menu;
}

.reader-line {
    grid-template-columns: minmax(0, 1fr);
}

.reader-line-number {
    display: none;
}

.reader-line p {
    min-height: 1.35em;
    white-space: pre-wrap;
    overflow-wrap: normal;
    word-break: normal;
}

.reader-line.find-hit {
    border-left: 0;
    padding-left: 0;
    box-shadow: inset 3px 0 0 #c8b987;
}

.reader-pagination-probe {
    position: fixed;
    top: 0;
    left: -100000px;
    z-index: -1;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    visibility: hidden;
    overflow: visible;
    contain: layout style;
    pointer-events: none;
}

.reader-pagination-probe .reader-line {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}

.reader-pagination-probe .reader-line p {
    margin: 0;
    padding: 0;
}

.reader-page-strip .reader-go-to-button {
    min-width: 3.8rem;
}

.character-dictionary-card {
    margin: 0.35rem 0.5rem 0.25rem;
}

.entry-total-line {
    margin-bottom: 0.25rem;
}

.character-dictionary-grid {
    gap: 0.2rem;
}

.character-dictionary-grid .character-display {
    min-height: 5.6rem;
    font-size: 4.2rem;
}

.variant-board,
.radical-strokes-board {
    gap: 0.2rem;
}

.variant-timestamp {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.2rem;
    align-items: center;
    color: #000;
    font-size: 0.68rem;
}

.variant-timestamp time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-facts {
    gap: 0.12rem 0.35rem;
    padding: 0 0.5rem;
}

.facts dd {
    margin-bottom: 0.2rem;
}

.character-note-form {
    margin: 0.2rem 0.5rem 0.35rem;
}

.character-note-form textarea {
    min-height: 2.5rem;
}

.study-state-control,
.character-review-control,
.dictionary-copy-actions {
    margin-right: 0.5rem;
    margin-bottom: 0.35rem;
    margin-left: 0.5rem;
}

.study-state-control button {
    min-height: 1.55rem;
}

.word-selection-strip {
    padding: 0.3rem 0.4rem;
}

.word-selection-strip button {
    min-height: 2.2rem;
    padding: 0.22rem 0.35rem;
}

.word-dictionary-status {
    margin: 0 0.4rem 0.3rem;
    padding: 0.2rem 0.4rem;
    line-height: 1.15;
}

.word-search-line {
    padding: 0.3rem 0.4rem 0.2rem;
}

.word-search-options {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.25rem;
    padding: 0 0.4rem 0.3rem;
}

.word-search-options label {
    gap: 0.05rem;
}

.word-search-options select {
    min-height: 1.55rem;
}

.word-search-case-option {
    grid-column: auto;
    grid-template-columns: auto auto;
    min-height: 1.55rem;
}

.word-detail-card {
    gap: 0.15rem;
    margin: 0 0.4rem 0.35rem;
    padding: 0.35rem 0.4rem;
}

.word-detail-fields {
    gap: 0.12rem;
}

.word-detail-fields > strong,
.word-detail-fields > p,
.word-detail-fields > small,
.word-note-form textarea {
    min-height: 1.35rem;
    padding: 0.1rem 0.3rem;
}

@media (min-width: 761px) {
    .workbench-page {
        box-sizing: border-box;
        height: calc(100vh - 3.15rem);
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .workbench-grid {
        height: 100%;
    }

    .reader-stage,
    .character-dictionary-window,
    .word-dictionary-window {
        min-height: 0;
        max-height: none;
    }

    .reader-stage {
        height: 100%;
        overflow: hidden;
    }

    .reader-paper {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .character-dictionary-window,
    .word-dictionary-window {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .character-dictionary-window > .panel-heading,
    .word-dictionary-window > .panel-heading {
        position: sticky;
        top: 0;
        z-index: 2;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .document-analysis-band {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .document-analysis-band > div:not(.document-top-characters) {
        min-width: 0;
    }

    .document-top-characters {
        grid-column: 1 / -1;
    }

    .custom-word-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .workbench-page {
        height: auto;
        min-height: calc(100vh - 3.15rem);
        overflow: visible;
    }

    .workbench-grid {
        height: auto;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "reader"
            "inspector"
            "word";
    }

    .reader-stage,
    .character-dictionary-window,
    .word-dictionary-window {
        height: auto;
        min-height: 24rem;
        max-height: none;
    }

    .reader-stage,
    .reader-paper {
        overflow: visible;
    }

    .toolbar {
        flex-wrap: wrap;
    }
}

.legacy-confirmation-dialog {
    width: min(25rem, calc(100vw - 2rem));
    max-width: none;
    padding: 0;
    color: #111;
    background: #f0f0f0;
    border: 1px solid #5b5b5b;
    border-radius: 0;
    box-shadow: 0 0.65rem 1.5rem rgb(0 0 0 / 38%);
    font: 0.84rem "Segoe UI", Tahoma, sans-serif;
}

.legacy-confirmation-dialog::backdrop {
    background: rgb(0 0 0 / 22%);
}

.legacy-confirmation-form {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 0 0.9rem 0.85rem;
}

.legacy-confirmation-titlebar {
    margin: 0 -0.9rem;
    padding: 0.26rem 0.55rem;
    color: #fff;
    background: linear-gradient(90deg, #0a246a, #3a6ea5);
}

.legacy-confirmation-titlebar h2 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
}

.legacy-confirmation-dialog p {
    margin: 0.2rem 0 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.legacy-confirmation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.legacy-confirmation-progress {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 1.8rem;
    color: #252525;
}

.legacy-confirmation-progress > span {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid #9a9a9a;
    border-top-color: #0a64ad;
    border-radius: 50%;
    animation: legacy-confirmation-spin 0.8s linear infinite;
}

@keyframes legacy-confirmation-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .legacy-confirmation-progress > span {
        animation: none;
        border-top-color: #9a9a9a;
    }
}

.legacy-confirmation-actions button {
    min-width: 4.7rem;
    padding: 0.2rem 0.7rem;
    color: #111;
    background: #f4f4f4;
    border: 1px solid #777;
    border-radius: 0;
    font: inherit;
}

.legacy-confirmation-actions button:focus-visible {
    outline: 1px dotted #111;
    outline-offset: -4px;
    box-shadow: 0 0 0 1px #0a64ad;
}

/* The native Character Dictionary keeps its record fields in view and puts
   secondary commands in menus. Keep the hosted record equally immediate at
   the reference desktop height; the complete command surface remains one
   explicit disclosure away rather than forcing every record to scroll. */
.character-dictionary-window {
    scrollbar-gutter: stable;
    /* Sampled from the original Character Dictionary work frame.  The shared
       workbench blue is close, but this slightly quieter steel-blue is what
       keeps the field board visually continuous with the native form. */
    background: #9bbedc;
    border-color: #0000c0;
}

.character-dictionary-window .character-dictionary-card {
    /* The desktop form leaves a deliberate breath between its glyph board and
       first editable field; without it the lower record frames collapse into
       the top third of this fixed-height window. */
    margin: 0.14rem 0.4rem 1.35rem;
}

.character-dictionary-window .entry-total-line {
    grid-template-columns: auto 3.55rem auto 3.75rem;
    gap: 0.22rem;
    margin-bottom: 0.2rem;
    font-size: 0.82rem;
}

.character-dictionary-window .entry-total-line strong {
    line-height: 1.25;
}

.character-dictionary-window .entry-total-line input {
    line-height: 1.25;
    border-color: #e00b00;
}

.character-dictionary-window .entry-total-line strong {
    border-color: #e00b00;
}

/* The original red Entry # frame gains a blinking blue selection box on the
   first click, before the second click clears its contents. */
.character-dictionary-window .entry-total-line input.entry-number-armed {
    animation: character-entry-number-armed 0.8s steps(2, end) infinite;
    box-shadow: 0 0 0 1px #001eff;
    outline: 1px dashed #001eff;
    outline-offset: 2px;
}

@keyframes character-entry-number-armed {
    50% {
        box-shadow: 0 0 0 2px #001eff;
    }
}

.character-dictionary-window .character-dictionary-grid {
    grid-template-columns: minmax(6.5rem, 1fr) minmax(4.7rem, 5.3rem) minmax(5.25rem, 0.8fr);
    gap: 0.15rem;
}

.character-dictionary-window .character-glyph-board {
    display: grid;
    align-content: start;
    gap: 0.08rem;
    min-width: 0;
}

.character-dictionary-window .character-dictionary-grid .character-display {
    min-height: 5.25rem;
    /* ctsf_CHAR_SINGLE is a 3px bright-blue Windows work frame, with a
       white upper-left and black lower-right inset edge. */
    border: 3px solid #0000ff;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000;
    font-size: 4.5rem;
    line-height: 1;
}

.character-dictionary-window .character-glyph-supplementary-fallback {
    font-family: Consolas, "Courier New", monospace;
    font-size: 1rem;
    letter-spacing: 0;
    white-space: nowrap;
}

.character-dictionary-window .character-codepoint {
    display: block;
    align-self: center;
    min-width: 4.7rem;
    min-height: 1.05rem;
    box-sizing: border-box;
    border: 1px solid #fff;
    border-right-color: #b8c6e8;
    border-bottom-color: #b8c6e8;
    background: #fff;
    color: #000;
    font-size: 0.62rem;
    line-height: 1;
    padding: 0.1rem 0.2rem;
    text-align: center;
}

.character-dictionary-window .variant-board,
.character-dictionary-window .radical-strokes-board {
    gap: 0.1rem;
}

.character-dictionary-window .variant-board h3,
.character-dictionary-window .radical-strokes-board h3 {
    margin-bottom: 0.08rem;
    font-size: 0.78rem;
}

.character-dictionary-window .variant-row {
    grid-template-columns: 3.85rem minmax(0, 1fr);
    gap: 0.1rem;
}

.character-dictionary-window .variant-row > span,
.character-dictionary-window .radical-strokes-board span {
    font-size: 0.72rem;
}

.character-dictionary-window .variant-cells {
    grid-template-columns: repeat(4, 1.15rem);
}

.character-dictionary-window .simplified-variant-cells {
    grid-template-columns: repeat(2, 1.15rem);
}

.character-dictionary-window .compatibility-variant-cells {
    grid-template-columns: 1.15rem;
}

.character-dictionary-window .variant-cell {
    width: 1.15rem;
    height: 1.2rem;
    /* The saved Windows form records a white upper-left bevel with a
       #0000C0 lower-right edge on each 21px character cell. */
    border-right-color: #0000c0;
    border-bottom-color: #0000c0;
    color: #000;
    font-size: 1.1rem;
    line-height: 1;
}

.character-dictionary-window .variant-timestamp {
    grid-template-columns: 1fr;
    gap: 0;
    font-size: 0.57rem;
}

.character-dictionary-window .radical-strokes-board > div {
    grid-template-columns: 2.85rem 1.3rem 0.85rem 1.75rem;
    gap: 0.08rem;
}

.character-dictionary-window .radical-strokes-board strong,
.character-dictionary-window .radical-strokes-board em,
.character-dictionary-window .radical-strokes-board .radical-character-link {
    min-height: 1.3rem;
    border-right-color: #0000c0;
    border-bottom-color: #0000c0;
    line-height: 1;
    font-size: 1.1rem;
}

/* The Windows board uses two fixed text frames at x=434 for the arithmetic
   separator: radical + additional strokes.  Total keeps the same column as a
   blank spacer so all three result cells share one vertical edge. */
.character-dictionary-window .radical-strokes-board .radical-stroke-operator {
    display: grid;
    place-items: center;
    min-height: 1.3rem;
    color: #000;
    font-size: 1.1rem;
    line-height: 1;
}

.character-dictionary-window .detail-facts {
    grid-template-columns: 4.15rem minmax(0, 1fr);
    gap: 0.28rem 0.25rem;
    padding: 0 0.4rem;
    font-size: 0.7rem;
}

.character-dictionary-window .detail-facts dt,
.character-dictionary-window .detail-facts dd {
    min-height: 1.3rem;
    margin: 0;
    padding: 0.1rem 0.25rem;
    line-height: 1.05;
}

.character-dictionary-window .character-text-fields dt,
.character-dictionary-window .character-lexicon-form label {
    align-self: center;
    color: #000;
    font-weight: 400;
}

.character-dictionary-window .character-lexicon-form,
.character-dictionary-window .character-note-form {
    /* The saved Pinyin, Zhuyin, Definition, and Notes labels use 16px
       Windows text.  Keep their editable values at the same scale. */
    font-size: 0.78rem;
}

.character-dictionary-window .character-lexicon-form label {
    padding: 0.1rem 0.25rem;
    font-size: 0.78rem;
    line-height: 1.05;
}

.character-dictionary-window .character-lexicon-form label[for="character-definition"] {
    align-self: start;
    padding-top: 0.15rem;
}

.character-dictionary-window .character-text-fields .character-text-value {
    border-color: #e00b00;
    background: #fff;
    color: #000;
}

.character-dictionary-window .character-text-fields .character-definition-value {
    min-height: 6.2rem;
    line-height: 1.25;
    overflow: auto;
}

.character-dictionary-window .character-lexicon-form input,
.character-dictionary-window .character-lexicon-form textarea {
    min-width: 0;
    box-sizing: border-box;
    font: inherit;
}

.character-dictionary-window .character-lexicon-form input {
    min-height: 1.3rem;
}

.character-dictionary-window .character-lexicon-form textarea {
    resize: vertical;
}

.character-dictionary-window .character-note-form {
    grid-template-columns: 4.15rem minmax(0, 1fr);
    align-items: stretch;
    margin: 0.55rem 0.4rem 0.1rem;
}

.character-dictionary-window .character-note-form label {
    align-self: start;
    padding: 0.15rem 0.25rem;
    color: #000;
    font-size: 0.78rem;
    line-height: 1.05;
}

.character-dictionary-window .character-note-form textarea {
    min-height: 3.2rem;
    height: 3.2rem;
    resize: vertical;
    border-color: #e00b00;
}

/* The Windows frame keeps its labeled, empty record visible before a
   character is selected.  Preserve that geometry without presenting blank
   fields as editable controls. */
.character-dictionary-window .character-dictionary-empty-card {
    pointer-events: none;
}

.character-dictionary-window .character-empty-field {
    display: block;
    min-height: 1.05rem;
    box-sizing: border-box;
    border: 1px solid #fff;
    border-right-color: #b8c6e8;
    border-bottom-color: #b8c6e8;
    background: #fff;
}

/* DisplayAsEmpty keeps the Character Dictionary's radical/stroke character
   frames in place.  They must retain the same 21px blue-edged geometry as a
   populated record, not collapse to a generic read-only field. */
.character-dictionary-window .character-dictionary-empty-card .radical-strokes-board .character-empty-field {
    min-height: 1.3rem;
    border-right-color: #0000c0;
    border-bottom-color: #0000c0;
}

.character-dictionary-window .character-empty-text-frame {
    display: block;
    min-height: 1.3rem;
    box-sizing: border-box;
    border: 2px solid #e00b00;
    background: #fff;
}

.character-dictionary-window .character-empty-definition-frame {
    min-height: 6.2rem;
}

.character-dictionary-window .character-note-form .character-empty-text-frame {
    min-height: 3.2rem;
    height: 3.2rem;
}

.character-dictionary-empty-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.character-dictionary-window .study-state-control {
    display: flex;
    gap: 0.15rem;
    margin: 0.1rem 0.4rem;
}

.character-dictionary-window .study-state-control button {
    min-height: 1.3rem;
    padding: 0.08rem 0.35rem;
    font-size: 0.7rem;
}

.character-secondary-tools,
.character-frequency-tools {
    display: block;
    margin: 0.14rem 0.4rem;
    border-top: 1px solid #8aa2d6;
    color: #000;
    font-size: 0.72rem;
}

.character-secondary-tools > summary,
.character-frequency-tools > summary {
    width: fit-content;
    padding: 0.13rem 0.28rem;
    color: #001eff;
    cursor: pointer;
    user-select: none;
}

.character-secondary-tools > summary:focus-visible,
.character-frequency-tools > summary:focus-visible {
    outline: 1px dotted #001eff;
    outline-offset: 1px;
}

.character-secondary-tools-body {
    padding-top: 0.16rem;
}

.character-secondary-tools .character-review-control,
.character-secondary-tools .dictionary-copy-actions,
.character-secondary-tools .word-locate-actions,
.character-secondary-tools .dictionary-copy-status,
.character-secondary-tools .dictionary-note {
    margin-right: 0;
    margin-left: 0;
}

.character-frequency-tools .frequency-box {
    margin: 0.15rem 0 0;
}

/* Character Dictionary native-form restoration.  The persisted Windows work
   frame is 484 x 357 pixels below its title bar: a compact record card, not a
   vertically stretched dashboard.  These positions follow the saved frame
   coordinates (notably the 111px glyph at 214,4; timestamp at 93,116; record
   number at 246,120; and the two state rows at 74,319 / 74,339). */
.character-dictionary-window {
    justify-self: start;
    align-self: start;
    width: min(30.5rem, 100%);
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    container-type: inline-size;
    scrollbar-gutter: auto;
    padding: 0;
}

.character-dictionary-window > .panel-heading {
    min-height: 1.35rem;
}

.character-dictionary-window .character-dictionary-native-record {
    position: relative;
    width: 30.25rem;
    height: 22.3125rem;
    overflow: hidden;
    color: #000;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 0.875rem;
}

.character-dictionary-window .character-dictionary-native-record > .character-dictionary-card {
    position: absolute;
    inset: 0;
    width: auto;
    height: 8.8rem;
    margin: 0;
}

.character-dictionary-window .character-dictionary-native-record .entry-total-line {
    position: absolute;
    z-index: 2;
    top: 7.5rem;
    left: 15.375rem;
    display: block;
    width: 3.1rem;
    margin: 0;
}

.character-dictionary-window .character-dictionary-native-record .entry-total-line input {
    display: block;
    width: 3.1rem;
    min-width: 0;
    min-height: 0.95rem;
    height: 1.05rem;
    padding: 0 0.08rem;
    border: 1px solid #e00b00;
    box-sizing: border-box;
    color: #000;
    font: 0.78rem/1 Tahoma, Arial, sans-serif;
    text-align: center;
}

.character-dictionary-window .character-dictionary-native-record .character-empty-entry-frame {
    display: block;
    width: 3.1rem;
    height: 1.05rem;
    box-sizing: border-box;
    border: 1px solid #e00b00;
    background: #fff;
}

.character-dictionary-window .character-dictionary-native-record .character-dictionary-grid {
    position: absolute;
    inset: 0;
    display: block;
}

.character-dictionary-window .character-dictionary-native-record .variant-board {
    position: absolute;
    top: 0.75rem;
    left: 0.625rem;
    width: 11.95rem;
    gap: 0.12rem;
}

.character-dictionary-window .character-dictionary-native-record .variant-board h3,
.character-dictionary-window .character-dictionary-native-record .radical-strokes-board h3 {
    margin: 0 0 0.5rem;
    color: #000;
    font: 0.875rem/1 Tahoma, Arial, sans-serif;
    text-align: center;
}

.character-dictionary-window .character-dictionary-native-record .variant-row {
    grid-template-columns: 5.45rem minmax(0, 1fr);
    gap: 0.12rem;
    min-height: 1.35rem;
    align-items: center;
}

.character-dictionary-window .character-dictionary-native-record .variant-row > span,
.character-dictionary-window .character-dictionary-native-record .radical-strokes-board span {
    color: #000;
    font: 0.875rem/1 Tahoma, Arial, sans-serif;
}

.character-dictionary-window .character-dictionary-native-record .variant-cells {
    grid-template-columns: repeat(4, 1.3rem);
}

.character-dictionary-window .character-dictionary-native-record .simplified-variant-cells {
    grid-template-columns: repeat(2, 1.3rem);
}

.character-dictionary-window .character-dictionary-native-record .compatibility-variant-cells {
    grid-template-columns: 1.3rem;
}

.character-dictionary-window .character-dictionary-native-record .variant-cell {
    width: 1.3rem;
    height: 1.3rem;
    font-size: 1.15rem;
}

.character-dictionary-window .character-dictionary-native-record .character-glyph-board {
    position: absolute;
    top: 0.25rem;
    left: 13.375rem;
    display: block;
    width: 6.94rem;
    height: 8.3rem;
}

.character-dictionary-window .character-dictionary-native-record .character-dictionary-grid .character-display {
    width: 6.94rem;
    min-height: 6.94rem;
    height: 6.94rem;
    box-sizing: border-box;
    font-size: 5.9rem;
    line-height: 1;
}

.character-dictionary-window .character-dictionary-native-record .character-codepoint {
    position: absolute;
    top: 7.18rem;
    /* In the Windows form the Unicode label/value pair begins at x=362,
       directly beneath the radical rows: glyph x=214 plus this 148px offset. */
    left: 9.25rem;
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    column-gap: 0.25rem;
    width: 8rem;
    min-width: 0;
    min-height: 1.05rem;
    padding: 0;
    border: 0;
    background: transparent;
    font: 0.78rem/1 Tahoma, Arial, sans-serif;
    text-align: left;
    white-space: nowrap;
}

.character-dictionary-window .character-dictionary-native-record .character-codepoint > span {
    overflow: hidden;
}

.character-dictionary-window .character-dictionary-native-record .radical-strokes-board {
    position: absolute;
    top: 0.75rem;
    left: 21.95rem;
    width: 7.9rem;
    gap: 0.22rem;
}

.character-dictionary-window .character-dictionary-native-record .radical-strokes-board > div {
    grid-template-columns: 3.35rem 1.3rem 0.55rem 1.35rem;
    gap: 0.08rem;
}

.character-dictionary-window .character-dictionary-native-record .radical-strokes-board strong,
.character-dictionary-window .character-dictionary-native-record .radical-strokes-board em,
.character-dictionary-window .character-dictionary-native-record .radical-strokes-board .radical-character-link,
.character-dictionary-window .character-dictionary-native-record .radical-strokes-board .radical-stroke-operator {
    min-height: 1.3rem;
    font-size: 1.1rem;
}

.character-dictionary-window .character-timestamp {
    position: absolute;
    z-index: 2;
    top: 7.25rem;
    left: 0.875rem;
    display: block;
    width: 11.75rem;
    height: 1.05rem;
    color: #000;
    font: 0.78rem/1.05rem Tahoma, Arial, sans-serif;
    white-space: nowrap;
}

.character-dictionary-window .character-timestamp > span {
    display: block;
    width: 4.9375rem;
}

.character-dictionary-window .character-timestamp output {
    position: absolute;
    top: 0;
    left: 4.9375rem;
    display: block;
    width: 6.82rem;
    overflow: hidden;
    /* The native 109px timestamp value uses the smaller Windows-form font,
       keeping yyyy-MM-dd HH:mm:ss on one line. */
    font: 0.65rem/1.05rem Tahoma, Arial, sans-serif;
    white-space: nowrap;
}

.character-dictionary-window .character-dictionary-native-record > .character-lexicon-form {
    position: absolute;
    top: 8.85rem;
    left: 0;
    display: grid;
    width: 29.875rem;
    grid-template-columns: 4.85rem minmax(0, 1fr);
    grid-template-rows: 1.1rem 1.1rem 3.5rem;
    gap: 0.36rem 0;
    padding: 0;
    font-size: 0.875rem;
}

.character-dictionary-window .character-dictionary-native-record .character-lexicon-form label {
    padding: 0.12rem 0.625rem;
    color: #000;
    font-size: 0.875rem;
}

.character-dictionary-window .character-dictionary-native-record .character-lexicon-form input,
.character-dictionary-window .character-dictionary-native-record .character-lexicon-form textarea {
    width: 100%;
    min-height: 0;
    height: 1.1rem;
    padding: 0.05rem 0.15rem;
    border: 2px solid #e00b00;
    border-radius: 0;
    background: #fff;
    color: #000;
    font: 0.875rem/1 Tahoma, Arial, sans-serif;
    resize: none;
}

.character-dictionary-window .character-dictionary-native-record .character-text-fields .character-definition-value {
    height: 3.5rem;
    min-height: 3.5rem;
    line-height: 1.15;
    overflow: auto;
}

.character-dictionary-window .character-dictionary-native-record .character-empty-definition-frame {
    height: 3.5rem;
    min-height: 3.5rem;
}

.character-dictionary-window .character-dictionary-native-record > .character-note-form {
    position: absolute;
    top: 15.9rem;
    left: 0;
    display: grid;
    width: 29.875rem;
    height: 3.15rem;
    grid-template-columns: 4.85rem minmax(0, 1fr);
    /* Override the generic word-note gap: its 6.4px column gap shifted this
       field to the right of Definition in the hosted form. */
    gap: 0;
    margin: 0;
    font-size: 0.875rem;
}

.character-dictionary-window .character-dictionary-native-record .character-note-form label {
    padding: 0.25rem 0.625rem;
    color: #000;
    font-size: 0.875rem;
}

.character-dictionary-window .character-dictionary-native-record .character-note-form textarea {
    width: 100%;
    min-height: 3.15rem;
    height: 3.15rem;
    padding: 0.12rem 0.15rem;
    border: 2px solid #e00b00;
    border-radius: 0;
    box-sizing: border-box;
    color: #000;
    font: 0.875rem/1.1 Tahoma, Arial, sans-serif;
    resize: none;
}

.character-dictionary-window .character-dictionary-native-record .character-note-form .character-empty-text-frame {
    height: 3.15rem;
    min-height: 3.15rem;
}

.character-dictionary-window .character-study-state {
    position: absolute;
    top: 19.55rem;
    left: 4.625rem;
    width: 25.25rem;
    height: 2.1rem;
    color: #000;
    font: 0.78rem/1 Tahoma, Arial, sans-serif;
}

.character-dictionary-window .character-study-state label,
.character-dictionary-window .character-study-total {
    position: absolute;
    display: flex;
    align-items: center;
    height: 1rem;
    white-space: nowrap;
}

.character-dictionary-window .character-known-checkbox,
.character-dictionary-window .character-need-checkbox {
    left: 0;
}

.character-dictionary-window .character-need-checkbox,
.character-dictionary-window .character-study-total-need {
    top: 1.25rem;
}

.character-dictionary-window .character-study-state input {
    width: 0.9rem;
    height: 0.9rem;
    margin: 0 0.25rem 0 0;
    accent-color: #fff;
}

.character-dictionary-window .character-study-total {
    right: 0;
    gap: 0.45rem;
}

.character-dictionary-window .character-study-total output {
    display: inline-block;
    width: 4.1rem;
    min-height: 1rem;
    padding: 0.08rem 0.2rem;
    box-sizing: border-box;
    background: #fff;
    color: #000;
    text-align: center;
}

.character-dictionary-window .character-note-status {
    position: absolute;
    right: 0.4rem;
    bottom: 0.1rem;
    max-width: 18rem;
    margin: 0;
    padding: 0.05rem 0.2rem;
    font-size: 0.65rem;
}

/* The hosted desktop may give this window a narrower workbench column than
   the fixed Windows form.  Scale the complete form as one unit instead of
   cropping its radical cells or its state totals. */
@container (max-width: 30rem) {
    .character-dictionary-window .character-dictionary-native-record {
        /* zoom participates in layout, unlike transform, so the window ends
           directly beneath the final legacy state row instead of keeping the
           unused height of an unscaled record. Chromium is the supported PWA
           runtime for the hosted desktop application. */
        zoom: 0.875;
    }
}

@media (max-width: 760px) {
    .character-dictionary-window {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    .character-dictionary-window .character-dictionary-native-record {
        width: 100%;
        height: auto;
        min-height: 0;
        display: grid;
        gap: 0.5rem;
        padding: 0.4rem;
        box-sizing: border-box;
    }

    .character-dictionary-window .character-dictionary-native-record > .character-dictionary-card,
    .character-dictionary-window .character-dictionary-native-record > .character-lexicon-form,
    .character-dictionary-window .character-dictionary-native-record > .character-note-form,
    .character-dictionary-window .character-study-state {
        position: static;
        width: auto;
        height: auto;
    }

    .character-dictionary-window .character-dictionary-native-record .character-dictionary-card {
        min-height: 13rem;
    }
}

/* Word Dictionary final native-window cascade.  This deliberately follows the
   broad workbench themes above, whose generic dashboard styling otherwise
   changes the Windows dialog's title placement, control type size, and face. */
.word-dictionary-window.word-dictionary-native-window {
    min-height: 0;
    overflow: hidden;
    background: #e3e6f0;
}

.word-dictionary-window.word-dictionary-native-window > .panel-heading {
    justify-content: flex-start;
    gap: 0.25rem;
    padding: 0.12rem 0.35rem;
    background: #d1d4dd;
}

.word-dictionary-window.word-dictionary-native-window > .panel-heading h2 {
    color: #000;
    font: 0.875rem/1 Tahoma, Arial, sans-serif;
}

.word-dictionary-window.word-dictionary-native-window > .panel-heading::before {
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    border: 1px solid #a2a2a2;
    background: #d1d4dd url('/chinese-toolbox-legacy-16.bmp') center / 1rem 1rem no-repeat;
}

.word-dictionary-window.word-dictionary-native-window .word-dictionary-native-record {
    background: #e3e6f0;
}

.word-dictionary-window.word-dictionary-native-window .word-native-label {
    font: 0.75rem/1.3 Tahoma, Arial, sans-serif;
}

.word-dictionary-window.word-dictionary-native-window .word-native-pinyin,
.word-dictionary-window.word-dictionary-native-window .word-native-definition,
.word-dictionary-window.word-dictionary-native-window .word-native-notes {
    font: 0.75rem/1.2 Tahoma, Arial, sans-serif;
}

.word-dictionary-window.word-dictionary-native-window .word-native-word {
    color: #0000ff;
}

.word-dictionary-window.word-dictionary-native-window .word-native-customized-control,
.word-dictionary-window.word-dictionary-native-window .word-native-known-control,
.word-dictionary-window.word-dictionary-native-window .word-native-need-control,
.word-dictionary-window.word-dictionary-native-window .word-native-known-total,
.word-dictionary-window.word-dictionary-native-window .word-native-need-total {
    font: 0.875rem/1 Tahoma, Arial, sans-serif;
}

.word-dictionary-window.word-dictionary-native-window .word-native-customized-control input,
.word-dictionary-window.word-dictionary-native-window .word-native-known-control input,
.word-dictionary-window.word-dictionary-native-window .word-native-need-control input {
    width: 1rem;
    height: 1rem;
}

/* Reader final native-window cascade. The Windows client presents Reader as a
   compact document dialog, not as a dashboard with analytics below the page.
   Keep its native width while using the full companion-dictionary stack
   height so the page and both right-side windows share one baseline. */
.workbench-grid {
    grid-template-columns: 30.875rem minmax(30rem, 1fr);
    align-items: start;
}

.reader-stage.reader-native-window {
    width: 30.875rem;
    min-width: 30.875rem;
    /* Match the combined Character and Word Dictionary stack so all three
       default windows share one bottom edge. The additional Reader space is
       also available to its measured page viewport. */
    height: 44.4rem;
    min-height: 44.4rem;
    max-height: 44.4rem;
    overflow: hidden;
    border: 1px solid #111;
    border-radius: 0;
    background: #f3f3f3;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 25%);
    color: #000;
    font-family: Tahoma, Arial, sans-serif;
}

.reader-stage.reader-native-window > .reader-window-heading {
    position: relative;
    flex: 0 0 1.65rem;
    min-height: 1.65rem;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 0.35rem;
    padding: 0.23rem 1.8rem 0.2rem 0.42rem;
    border-bottom: 1px solid #7d7d7d;
    background: #e9e9ed;
}

.reader-stage.reader-native-window > .reader-window-heading::before {
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    border: 1px solid #a2a2a2;
    background: #d1d4dd url('/chinese-toolbox-legacy-16.bmp') center / 1rem 1rem no-repeat;
}

.reader-stage.reader-native-window > .reader-window-heading::after {
    position: absolute;
    top: 0.06rem;
    right: 0.48rem;
    color: #555;
    content: "×";
    font: 1.55rem/1 Tahoma, Arial, sans-serif;
}

.reader-stage.reader-native-window > .reader-window-heading h2 {
    color: #000;
    font: 0.875rem/1 Tahoma, Arial, sans-serif;
}

.reader-stage.reader-native-window > .reader-window-heading span {
    display: none;
}

.reader-stage.reader-native-window > .reader-tabs {
    flex: 0 0 3.25rem;
    box-sizing: border-box;
    gap: 0.08rem;
    padding: 0.1rem 0.35rem;
    border: 0;
    background: #f3f3f3;
}

.reader-stage.reader-native-window > .reader-tabs button,
.reader-stage.reader-native-window > .reader-tabs .reader-view-upload {
    min-height: 1.43rem;
    border: 1px solid #111;
    border-radius: 0;
    padding: 0.04rem 0.12rem;
    background: #fff;
    color: #000;
    font: 0.72rem/1 Tahoma, Arial, sans-serif;
    box-shadow: inset 0 0 0 1px #eee;
}

.reader-stage.reader-native-window > .reader-tabs button:hover,
.reader-stage.reader-native-window > .reader-tabs button:focus-visible,
.reader-stage.reader-native-window > .reader-tabs button.selected,
.reader-stage.reader-native-window > .reader-tabs .reader-view-upload:hover,
.reader-stage.reader-native-window > .reader-tabs .reader-view-upload:focus-visible {
    border-color: #111;
    background: #fff;
    color: #000;
    outline: 1px solid #4a79b3;
    outline-offset: -3px;
    box-shadow: none;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] > .reader-paper {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0;
    margin: 0;
    padding: 0.35rem 0.42rem 0.22rem;
    overflow: hidden;
    border: 0;
    background: #fff;
}

/* These hosted-only dashboard affordances remain implemented for commands and
   accessibility, but they are not part of the native Current Document form. */
.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-titlebar,
.reader-stage.reader-native-window[data-reader-view="current-document"] .document-analysis-band,
.reader-stage.reader-native-window[data-reader-view="current-document"] .document-word-strip,
.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-legacy-footer,
.reader-stage.reader-native-window[data-reader-view="current-document"] .character-strip {
    display: none;
}

.reader-stage.reader-native-window[data-reader-view="current-document"][data-reader-editing-active="false"] .reader-edit-panel {
    display: none;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-lines {
    min-height: 0;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #fff;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-line {
    display: block;
    margin: 0 0 0.33rem;
    padding: 0;
    border: 0;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-line-number {
    display: none;
}

.workbench-page .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-line p {
    min-height: 0;
    margin: 0;
    color: var(--ct-reader-regular-text-color, #0000ff);
    font-family: "Times New Roman", "Microsoft JhengHei", "Noto Serif CJK TC", serif;
    /* Keep the native Reader presentation while honoring the size selected in
       Settings. Inline character buttons inherit this value from the line. */
    font-size: var(--reader-character-size, 26px);
    line-height: 1.31;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .inline-reader-char {
    display: inline;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    vertical-align: baseline;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .inline-reader-char.word-match,
.reader-stage.reader-native-window[data-reader-view="current-document"] .inline-reader-char.word-need,
.reader-stage.reader-native-window[data-reader-view="current-document"] .inline-reader-char.word-known,
.reader-stage.reader-native-window[data-reader-view="current-document"] .inline-reader-char.selected {
    color: var(--ct-reader-regular-text-color, #0000ff);
}

/* A focused Reader word is a hosted navigation state.  The Windows reader
   marks words with underlines but does not box every member of that state. */
.workbench-page .reader-stage.reader-native-window[data-reader-view="current-document"] .inline-reader-char.word-focused {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--ct-reader-regular-text-color, #0000ff);
}

/* The Windows Reader leaves every character's one-pixel box in place, then
   colors the current one with ReaderSelectBox.  Keeping that reserved border
   makes selection visible without changing wrapping or the native row pitch.
   This follows word-focused so the exact current character stays boxed when
   it also belongs to the focused word. */
.workbench-page .reader-stage.reader-native-window[data-reader-view="current-document"] .inline-reader-char.selected {
    border-color: var(--ct-reader-selection-color, #ff0000);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--ct-reader-selection-color, #ff0000);
}

/* SetCharColor in the Windows Reader always gives Known characters their
   ReaderKnownText color, even while the current-character rectangle or word
   focus is present.  Keep this after the native selection resets above so a
   Space-marked character immediately turns gray without losing its red box. */
.workbench-page .reader-stage.reader-native-window[data-reader-view="current-document"] .inline-reader-char.character-known {
    color: var(--ct-reader-known-text-color, #808080);
}

/* Paint a recognized word at the bottom of each complete character box rather
   than using per-glyph text decoration. Adjacent boxes meet edge-to-edge, so
   the result is one continuous legacy-style rule across the full word; using
   the box bottom also preserves clear air below every glyph and descender. */
.workbench-page .reader-stage.reader-native-window[data-reader-view="current-document"] .inline-reader-char.word-match {
    background-image: linear-gradient(
        var(--ct-reader-word-underline-color, #0000c0),
        var(--ct-reader-word-underline-color, #0000c0));
    background-repeat: no-repeat;
    background-position: left calc(100% - 0.04em);
    background-size: 100% 2px;
    background-origin: border-box;
    background-clip: border-box;
    text-decoration: none;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-legacy-page-footer {
    display: block;
    margin: 0;
    padding: 0.75rem 0 0;
    color: #000;
    font: 0.72rem/1 Tahoma, Arial, sans-serif;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-page-strip {
    display: grid;
    grid-template-columns: 7.5rem 3.55rem 4.25rem auto 1.95rem 6.9rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.12rem;
    padding-right: 1.2rem;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-page-strip button {
    min-height: 2.6rem;
    border: 1px solid #454545;
    border-radius: 0;
    padding: 0.05rem 0.15rem;
    background: #f6f6f6;
    color: #000;
    box-shadow: none;
    font: 0.68rem/1 Tahoma, Arial, sans-serif;
    white-space: nowrap;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-page-strip button:disabled {
    border-color: #b0b0b0;
    background: #f3f3f3;
    color: #aaa;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-page-strip input,
.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-page-strip strong {
    min-height: 2.6rem;
    height: 2.6rem;
    box-sizing: border-box;
    border: 1px solid #e00b00;
    border-radius: 0;
    background: #fff;
    color: #000;
    font: 0.72rem/1.15rem Tahoma, Arial, sans-serif;
    text-align: center;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-page-strip strong {
    display: grid;
    place-items: center;
    padding: 0.1rem 0.15rem;
    font-weight: 400;
}

@media (max-width: 999px) {
    .workbench-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .reader-stage.reader-native-window {
        width: 100%;
        min-width: 0;
        height: min(44.4rem, calc(100dvh - 5rem));
        min-height: 0;
        max-height: none;
    }
}

/* Desktop finishing pass: the Reader has a deliberately fixed native height,
   so fractional grid rows distribute the right column against that height and
   create a conspicuous empty band before Word Dictionary at browser zoom.
   Size each right-side row from its own native window instead. */
.workbench-grid {
    /* The Character Dictionary's fixed native frame is 388px high including
       its title strip.  Reserving that row prevents its absolute record
       controls from overflowing into the Word Dictionary row. */
    grid-template-rows: 24.25rem auto;
    align-content: start;
}

.workbench-grid > .word-dictionary-window.word-dictionary-native-window {
    align-self: start;
}

/* Keep the arithmetic readable as "radical + strokes" rather than allowing
   the strokes frame to crowd the plus sign in the compact native board. */
.character-dictionary-window .character-dictionary-native-record .radical-strokes-board .radical-stroke-operator {
    margin-right: 0.15rem;
}

/* The localized label is wider than the original generic button text.  Keep
   the full action visible without wrapping it into the study-state controls. */
.word-dictionary-window.word-dictionary-native-window .word-native-remove-customization {
    width: 8.25rem;
    font-size: 0.74rem;
    white-space: nowrap;
}

/* The fixed desktop dictionary row is declared after the main responsive
   cascade. Restore content-sized rows on narrow screens so the fixed-height
   Reader occupies its full grid row instead of painting beneath Character
   Dictionary. */
@media (max-width: 760px) {
    .workbench-grid {
        grid-template-rows: auto;
    }
}

/* Visual themes ----------------------------------------------------------
   Classic intentionally receives no workbench overrides so the migrated
   Windows appearance remains pixel-compatible. The other themes modernize
   the same semantic structure without changing the native window geometry. */
html[data-ct-theme="professional"] {
    color-scheme: light;
    --ct-theme-canvas: #e8eef5;
    --ct-theme-canvas-accent: #d7e2ee;
    --ct-theme-surface: #f8fafc;
    --ct-theme-surface-soft: #edf3f8;
    --ct-theme-title: #dce7f2;
    --ct-theme-title-strong: #16324f;
    --ct-theme-border: #7890a7;
    --ct-theme-field-border: #6d91ba;
    --ct-theme-accent: #2563a6;
    --ct-theme-accent-strong: #174b7c;
    --ct-theme-text: #172536;
    --ct-theme-muted: #5d6d7e;
    --ct-theme-shadow: 0 12px 28px rgb(30 52 73 / 16%);
    --ct-theme-radius: 0.7rem;
    --ct-theme-control-radius: 0.42rem;
    --ct-theme-font: Inter, Aptos, "Segoe UI", sans-serif;
}

html[data-ct-theme="playful"] {
    color-scheme: light;
    --ct-theme-canvas: #f5edff;
    --ct-theme-canvas-accent: #ddf8f2;
    --ct-theme-surface: #fffaff;
    --ct-theme-surface-soft: #f7efff;
    --ct-theme-title: #ead9ff;
    --ct-theme-title-strong: #582297;
    --ct-theme-border: #9b6bd1;
    --ct-theme-field-border: #dd5f8b;
    --ct-theme-accent: #7c3aed;
    --ct-theme-accent-strong: #5b21b6;
    --ct-theme-text: #30213f;
    --ct-theme-muted: #745f84;
    --ct-theme-shadow: 0 12px 28px rgb(91 33 182 / 17%);
    --ct-theme-radius: 1rem;
    --ct-theme-control-radius: 0.7rem;
    --ct-theme-font: "Trebuchet MS", Aptos, "Segoe UI", sans-serif;
}

html[data-ct-theme="young-learner"] {
    color-scheme: light;
    --ct-theme-canvas: #fff4c7;
    --ct-theme-canvas-accent: #dff6ff;
    --ct-theme-surface: #fffef8;
    --ct-theme-surface-soft: #eaf8ff;
    --ct-theme-title: #bcecff;
    --ct-theme-title-strong: #075985;
    --ct-theme-border: #3a82b4;
    --ct-theme-field-border: #e17745;
    --ct-theme-accent: #f27a34;
    --ct-theme-accent-strong: #bd4a18;
    --ct-theme-text: #173344;
    --ct-theme-muted: #4f6875;
    --ct-theme-shadow: 0 12px 25px rgb(7 89 133 / 17%);
    --ct-theme-radius: 1.1rem;
    --ct-theme-control-radius: 0.75rem;
    --ct-theme-font: "Arial Rounded MT Bold", "Trebuchet MS", Aptos, sans-serif;
}

html[data-ct-theme]:not([data-ct-theme="classic"]) body,
html[data-ct-theme]:not([data-ct-theme="classic"]) button,
html[data-ct-theme]:not([data-ct-theme="classic"]) input,
html[data-ct-theme]:not([data-ct-theme="classic"]) select,
html[data-ct-theme]:not([data-ct-theme="classic"]) textarea {
    font-family: var(--ct-theme-font);
}

html[data-ct-theme]:not([data-ct-theme="classic"]) body,
html[data-ct-theme]:not([data-ct-theme="classic"]) body .app-shell {
    background:
        radial-gradient(circle at 9% 10%, rgb(255 255 255 / 72%) 0 0.32rem, transparent 0.36rem),
        radial-gradient(circle at 91% 15%, rgb(255 255 255 / 46%) 0 0.22rem, transparent 0.26rem),
        linear-gradient(135deg, var(--ct-theme-canvas), var(--ct-theme-canvas-accent));
    color: var(--ct-theme-text);
}

html[data-ct-theme="professional"] body .app-chrome,
html[data-ct-theme="playful"] body .app-chrome,
html[data-ct-theme="young-learner"] body .app-chrome {
    border: 0;
    border-bottom: 1px solid var(--ct-theme-border);
    background: var(--ct-theme-surface);
    box-shadow: 0 4px 18px rgb(20 36 52 / 15%);
}

html[data-ct-theme="professional"] body .title-row,
html[data-ct-theme="playful"] body .title-row,
html[data-ct-theme="young-learner"] body .title-row {
    min-height: 2rem;
    padding: 0.22rem 0.65rem;
    border: 0;
    background: linear-gradient(110deg, var(--ct-theme-title-strong), var(--ct-theme-accent));
    color: #fff;
}

html[data-ct-theme="playful"] body .title-row {
    background: linear-gradient(105deg, #6d28d9 0%, #a855f7 52%, #ec4899 100%);
}

html[data-ct-theme="young-learner"] body .title-row {
    background: linear-gradient(105deg, #087ca7 0%, #10a7bd 58%, #29b98f 100%);
}

html[data-ct-theme]:not([data-ct-theme="classic"]) body .brand {
    gap: 0.45rem;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

html[data-ct-theme]:not([data-ct-theme="classic"]) body .brand img {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0.08rem;
    border-radius: 0.3rem;
    background: rgb(255 255 255 / 90%);
}

html[data-ct-theme]:not([data-ct-theme="classic"]) body .status-strip span {
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 0.28rem;
    background: rgb(255 255 255 / 16%);
    color: #fff;
}

html[data-ct-theme]:not([data-ct-theme="classic"]) body .menu-bar {
    min-height: 2.95rem;
    padding: 0.12rem 0.38rem;
    border: 0;
    background: var(--ct-theme-surface);
}

html[data-ct-theme]:not([data-ct-theme="classic"]) body .menu-item {
    min-height: 2.75rem;
    padding: 0.25rem 0.84rem;
    border-radius: 0.4rem;
    color: var(--ct-theme-text);
    font-size: var(--ct-themed-menu-item-font-size, 1.52rem);
    font-weight: 600;
}

html[data-ct-theme]:not([data-ct-theme="classic"]) body .menu-item:hover,
html[data-ct-theme]:not([data-ct-theme="classic"]) body .menu-item:focus-visible,
html[data-ct-theme]:not([data-ct-theme="classic"]) body .menu-item.active,
html[data-ct-theme]:not([data-ct-theme="classic"]) body .menu-group.open > .menu-item,
html[data-ct-theme]:not([data-ct-theme="classic"]) body .menu-group:focus-within > .menu-item,
html[data-ct-theme]:not([data-ct-theme="classic"]) body .menu-group:hover > .menu-item {
    border-color: transparent;
    background: var(--ct-theme-title);
    color: var(--ct-theme-title-strong);
}

html[data-ct-theme]:not([data-ct-theme="classic"]) body .menu-dropdown {
    border: 1px solid var(--ct-theme-border);
    border-radius: 0.7rem;
    background: var(--ct-theme-surface);
    box-shadow: var(--ct-theme-shadow);
}

html[data-ct-theme]:not([data-ct-theme="classic"]) body .menu-dropdown-item {
    color: var(--ct-theme-text);
}

html[data-ct-theme]:not([data-ct-theme="classic"]) body .menu-dropdown-item:hover,
html[data-ct-theme]:not([data-ct-theme="classic"]) body .menu-dropdown-item:focus-visible,
html[data-ct-theme]:not([data-ct-theme="classic"]) body .menu-dropdown-upload:focus-within {
    background: var(--ct-theme-title);
    color: var(--ct-theme-title-strong);
}

/* Keep the enlarged menu hit areas while adapting only their text to the
   available viewport. The upper tablet bound includes landscape iPad Pro
   widths; wider touch-first displays retain the same tablet text scale. */
@media (min-width: 768px) and (max-width: 1439px) {
    html {
        --ct-menu-item-font-size: 1.152rem;
        --ct-themed-menu-item-font-size: 1.216rem;
        --ct-menu-entry-font-size: 1.248rem;
        --ct-menu-arrow-font-size: 1.6rem;
    }
}

@media (pointer: coarse) and (min-width: 1440px) {
    html {
        --ct-menu-item-font-size: 1.152rem;
        --ct-themed-menu-item-font-size: 1.216rem;
        --ct-menu-entry-font-size: 1.248rem;
        --ct-menu-arrow-font-size: 1.6rem;
    }
}

@media (max-width: 767px) {
    html {
        --ct-menu-item-font-size: 0.72rem;
        --ct-themed-menu-item-font-size: 0.76rem;
        --ct-menu-entry-font-size: 0.78rem;
        --ct-menu-arrow-font-size: 1rem;
    }
}

.workbench-page:not(.visual-theme-classic) {
    background-color: transparent !important;
    color: var(--ct-theme-text);
}

.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window,
.workbench-page:not(.visual-theme-classic) .character-dictionary-window,
.workbench-page:not(.visual-theme-classic) .word-dictionary-window.word-dictionary-native-window,
.workbench-page:not(.visual-theme-classic) .accessory-window {
    border: 1px solid var(--ct-theme-border);
    border-radius: var(--ct-theme-radius);
    background: var(--ct-theme-surface);
    box-shadow: var(--ct-theme-shadow);
    color: var(--ct-theme-text);
}

.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window,
.workbench-page:not(.visual-theme-classic) .character-dictionary-native-record,
.workbench-page:not(.visual-theme-classic) .word-dictionary-native-record,
.workbench-page:not(.visual-theme-classic) .word-dictionary-window.word-dictionary-native-window .word-dictionary-native-record,
.workbench-page:not(.visual-theme-classic) .settings-dialog-body,
.workbench-page:not(.visual-theme-classic) .document-properties-body,
.workbench-page:not(.visual-theme-classic) .document-analysis-settings-body {
    background: var(--ct-theme-surface);
    color: var(--ct-theme-text);
}

.workbench-page:not(.visual-theme-classic) .panel-heading,
.workbench-page:not(.visual-theme-classic) .reader-window-heading,
.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window > .reader-window-heading,
.workbench-page:not(.visual-theme-classic) .word-dictionary-window.word-dictionary-native-window > .panel-heading {
    border-bottom: 1px solid var(--ct-theme-border);
    background: linear-gradient(100deg, var(--ct-theme-title), var(--ct-theme-surface-soft));
    color: var(--ct-theme-title-strong);
}

.workbench-page:not(.visual-theme-classic) .panel-heading h2,
.workbench-page:not(.visual-theme-classic) .reader-window-heading h2,
.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window > .reader-window-heading h2,
.workbench-page:not(.visual-theme-classic) .word-dictionary-window.word-dictionary-native-window > .panel-heading h2 {
    color: var(--ct-theme-title-strong);
    font-family: var(--ct-theme-font);
    font-weight: 700;
}

.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window > .reader-window-heading::before,
.workbench-page:not(.visual-theme-classic) .word-dictionary-window.word-dictionary-native-window > .panel-heading::before {
    border-color: color-mix(in srgb, var(--ct-theme-border) 70%, white);
    border-radius: 0.25rem;
    background-color: rgb(255 255 255 / 70%);
}

.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window > .reader-window-heading::after {
    color: var(--ct-theme-muted);
}

.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window > .reader-tabs {
    border-bottom: 1px solid color-mix(in srgb, var(--ct-theme-border) 45%, white);
    background: var(--ct-theme-surface-soft);
}

.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window > .reader-tabs button,
.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window > .reader-tabs .reader-view-upload,
.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-page-strip button,
.workbench-page:not(.visual-theme-classic) .word-dictionary-window.word-dictionary-native-window .word-native-remove-customization,
.workbench-page:not(.visual-theme-classic) .settings-dialog-body button,
.workbench-page:not(.visual-theme-classic) .settings-dialog-footer button,
.workbench-page:not(.visual-theme-classic) .document-analysis-settings-body button,
.workbench-page:not(.visual-theme-classic) .document-properties-body button {
    border: 1px solid var(--ct-theme-border);
    border-radius: var(--ct-theme-control-radius);
    background: linear-gradient(#fff, var(--ct-theme-surface-soft));
    color: var(--ct-theme-text);
    box-shadow: 0 1px 2px rgb(31 45 61 / 10%);
}

.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window > .reader-tabs button:hover,
.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window > .reader-tabs button:focus-visible,
.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window > .reader-tabs button.selected,
.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window > .reader-tabs .reader-view-upload:hover,
.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window > .reader-tabs .reader-view-upload:focus-visible,
.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-page-strip button:hover,
.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-page-strip button:focus-visible,
.workbench-page:not(.visual-theme-classic) .word-dictionary-window.word-dictionary-native-window .word-native-remove-customization:hover,
.workbench-page:not(.visual-theme-classic) .word-dictionary-window.word-dictionary-native-window .word-native-remove-customization:focus-visible,
.workbench-page:not(.visual-theme-classic) .settings-dialog-body button:hover,
.workbench-page:not(.visual-theme-classic) .settings-dialog-body button:focus-visible,
.workbench-page:not(.visual-theme-classic) .settings-dialog-footer button:hover,
.workbench-page:not(.visual-theme-classic) .settings-dialog-footer button:focus-visible {
    border-color: var(--ct-theme-accent);
    background: var(--ct-theme-title);
    color: var(--ct-theme-accent-strong);
    outline: 2px solid color-mix(in srgb, var(--ct-theme-accent) 24%, transparent);
    outline-offset: 1px;
}

.workbench-page:not(.visual-theme-classic) input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.workbench-page:not(.visual-theme-classic) textarea,
.workbench-page:not(.visual-theme-classic) select,
.workbench-page:not(.visual-theme-classic) .character-empty-text-frame,
.workbench-page:not(.visual-theme-classic) .character-empty-entry-frame,
.workbench-page:not(.visual-theme-classic) .character-empty-field,
.workbench-page:not(.visual-theme-classic) .reader-page-strip input,
.workbench-page:not(.visual-theme-classic) .reader-page-strip strong,
.workbench-page:not(.visual-theme-classic) .character-study-total output {
    border-color: var(--ct-theme-field-border);
    border-radius: var(--ct-theme-control-radius);
    background: #fff;
    color: var(--ct-theme-text);
    box-shadow: inset 0 1px 2px rgb(31 45 61 / 7%);
}

/* The fixed native form rules are intentionally more specific than the
   generic theme controls. Match that specificity so Definition and Notes use
   the same themed field treatment as Pinyin and Zhuyin. */
.workbench-page:not(.visual-theme-classic) .character-dictionary-window .character-dictionary-native-record .character-text-fields .character-definition-value,
.workbench-page:not(.visual-theme-classic) .character-dictionary-window .character-dictionary-native-record .character-note-form textarea {
    border-color: var(--ct-theme-field-border);
    border-radius: var(--ct-theme-control-radius);
    background: #fff;
    color: var(--ct-theme-text);
    box-shadow: inset 0 1px 2px rgb(31 45 61 / 7%);
}

.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-page-strip button:disabled,
.workbench-page:not(.visual-theme-classic) .word-dictionary-window.word-dictionary-native-window .word-native-remove-customization:disabled {
    border-color: color-mix(in srgb, var(--ct-theme-border) 55%, white);
    background: var(--ct-theme-surface-soft);
    color: var(--ct-theme-muted);
    box-shadow: none;
    outline: none;
    opacity: 0.72;
}

.workbench-page:not(.visual-theme-classic) input[type="checkbox"],
.workbench-page:not(.visual-theme-classic) input[type="radio"] {
    accent-color: var(--ct-theme-accent);
}

.workbench-page:not(.visual-theme-classic) .reader-paper,
.workbench-page:not(.visual-theme-classic) .reader-lines,
.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window[data-reader-view="current-document"] > .reader-paper,
.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-lines {
    background-color: var(--ct-main-interface-color, #fff);
}

.workbench-page:not(.visual-theme-classic) .settings-dialog-body fieldset {
    border-color: color-mix(in srgb, var(--ct-theme-border) 65%, white);
    border-radius: 0.65rem;
    background: var(--ct-theme-surface-soft);
}

.workbench-page:not(.visual-theme-classic) .settings-dialog-body legend,
.workbench-page:not(.visual-theme-classic) .settings-color-subheading {
    color: var(--ct-theme-title-strong);
    font-weight: 700;
}

.workbench-page.visual-theme-playful .reader-stage.reader-native-window,
.workbench-page.visual-theme-playful .character-dictionary-window,
.workbench-page.visual-theme-playful .word-dictionary-window.word-dictionary-native-window,
.workbench-page.visual-theme-playful .accessory-window {
    box-shadow:
        0 0 0 3px rgb(255 255 255 / 52%),
        var(--ct-theme-shadow);
}

.workbench-page.visual-theme-playful .panel-heading,
.workbench-page.visual-theme-playful .reader-window-heading,
.workbench-page.visual-theme-playful .reader-stage.reader-native-window > .reader-window-heading,
.workbench-page.visual-theme-playful .word-dictionary-window.word-dictionary-native-window > .panel-heading {
    background: linear-gradient(100deg, #ead9ff, #d9f8f1);
}

.workbench-page.visual-theme-young-learner .menu-item,
.workbench-page.visual-theme-young-learner button {
    font-weight: 700;
}

.workbench-page.visual-theme-young-learner .panel-heading,
.workbench-page.visual-theme-young-learner .reader-window-heading,
.workbench-page.visual-theme-young-learner .reader-stage.reader-native-window > .reader-window-heading,
.workbench-page.visual-theme-young-learner .word-dictionary-window.word-dictionary-native-window > .panel-heading {
    background: linear-gradient(100deg, #bcecff, #e7f9c9);
}

.workbench-page.visual-theme-young-learner .panel-heading h2,
.workbench-page.visual-theme-young-learner .reader-window-heading h2 {
    font-size: 0.9rem;
}

/* Theme chooser: visible in every theme, including Classic. */
.settings-theme-picker {
    overflow: hidden;
}

.settings-theme-intro {
    margin: 0 0 0.55rem;
    color: inherit;
    line-height: 1.35;
}

.settings-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.settings-dialog-body .settings-theme-card {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 1rem minmax(0, 1fr);
    grid-template-rows: 2.75rem auto;
    gap: 0.28rem 0.35rem;
    align-items: center;
    border: 1px solid #8da0c7;
    border-radius: 0.55rem;
    background: #fff;
    padding: 0.38rem;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.settings-dialog-body .settings-theme-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgb(45 55 72 / 13%);
}

.settings-dialog-body .settings-theme-card:has(input:checked) {
    border-color: var(--ct-theme-accent, #174fbb);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ct-theme-accent, #174fbb) 22%, transparent);
}

.settings-dialog-body .settings-theme-card > input {
    grid-row: 2;
    margin: 0;
}

.settings-theme-preview {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: 0.58rem 1fr;
    width: 100%;
    height: 2.75rem;
    overflow: hidden;
    border: 1px solid rgb(28 39 56 / 24%);
    border-radius: 0.38rem;
    background: var(--preview-canvas);
}

.settings-theme-preview span:first-child {
    grid-column: 1 / -1;
    background: var(--preview-title);
}

.settings-theme-preview span:nth-child(2) {
    border-right: 1px solid var(--preview-border);
    background: var(--preview-surface);
}

.settings-theme-preview span:nth-child(3) {
    margin: 0.28rem;
    border: 1px solid var(--preview-border);
    border-radius: 0.18rem;
    background: var(--preview-panel);
}

.settings-theme-card[data-theme-preview="classic"] {
    --preview-canvas: #a9bce8;
    --preview-title: linear-gradient(#f6feff, #3894a8);
    --preview-surface: #f3f3f3;
    --preview-panel: #d1d4dd;
    --preview-border: #0038d8;
}

.settings-theme-card[data-theme-preview="professional"] {
    --preview-canvas: #e8eef5;
    --preview-title: linear-gradient(90deg, #16324f, #2563a6);
    --preview-surface: #f8fafc;
    --preview-panel: #dce7f2;
    --preview-border: #7890a7;
}

.settings-theme-card[data-theme-preview="playful"] {
    --preview-canvas: #f5edff;
    --preview-title: linear-gradient(90deg, #6d28d9, #ec4899);
    --preview-surface: #fffaff;
    --preview-panel: #d9f8f1;
    --preview-border: #9b6bd1;
}

.settings-theme-card[data-theme-preview="young-learner"] {
    --preview-canvas: #fff4c7;
    --preview-title: linear-gradient(90deg, #087ca7, #29b98f);
    --preview-surface: #fffef8;
    --preview-panel: #bcecff;
    --preview-border: #3a82b4;
}

.settings-theme-copy {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.settings-theme-copy strong,
.settings-theme-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-theme-copy strong {
    color: var(--ct-theme-text, #111);
    font-size: 0.73rem;
}

.settings-theme-copy small {
    color: var(--ct-theme-muted, #596273);
    font-size: 0.64rem;
}

@media (max-width: 760px) {
    .settings-theme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    .settings-theme-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.account-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    width: min(35rem, calc(100vw - 2rem));
    height: min(41rem, calc(100vh - 8rem));
    min-width: min(24rem, calc(100vw - 2rem));
    min-height: 26rem;
    overflow: hidden;
    background: var(--ct-theme-surface, #f5f7fa);
}

.account-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: #eef4f7;
}

.account-adoption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--ct-theme-border, #a8b6c3);
    background: var(--ct-theme-surface, #f7fafc);
}

.account-adoption > div {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.account-adoption span {
    color: var(--ct-theme-muted, #596273);
    font-size: 0.72rem;
}

.account-adoption button {
    flex: none;
    padding: 0.48rem 0.72rem;
    border: 1px solid color-mix(in srgb, var(--ct-theme-accent, #16877f) 70%, #0000);
    border-radius: 0.55rem;
    color: white;
    background: var(--ct-theme-accent, #16877f);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.account-adoption button:disabled { opacity: 0.58; cursor: wait; }

.account-adoption-status {
    padding: 0.45rem 0.85rem;
    border-top: 1px solid var(--ct-theme-border, #a8b6c3);
    color: var(--ct-theme-muted, #596273);
    background: var(--ct-theme-surface, #f7fafc);
    font-size: 0.72rem;
}

/* Guided Reader navigation and learning counselor ----------------------- */
.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-legacy-page-footer {
    min-width: 0;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-character-navigation {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.25rem;
    padding-right: 1.2rem;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-character-navigation-button {
    display: grid;
    width: 3rem;
    min-width: 3rem;
    min-height: 2.65rem;
    place-items: center;
    border: 1px solid #454545;
    border-radius: 0.3rem;
    background: linear-gradient(#fff, #ececec);
    color: #102d52;
    box-shadow: 0 1px 2px rgb(0 0 0 / 16%);
    font: 700 1.7rem/1 "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
    touch-action: manipulation;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-character-navigation-button:hover,
.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-character-navigation-button:focus-visible {
    border-color: #174fbb;
    background: #e8f1ff;
    outline: 2px solid rgb(23 79 187 / 22%);
    outline-offset: 1px;
}

.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-character-navigation-button:disabled {
    border-color: #b0b0b0;
    background: #f3f3f3;
    color: #aaa;
    box-shadow: none;
}

.reader-character-navigation-status {
    overflow: hidden;
    color: #4b5563;
    font: 0.72rem/1.15 Tahoma, Arial, sans-serif;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.learning-counselor-window {
    grid-area: counselor;
    display: flex;
    width: 100%;
    min-width: 15rem;
    min-height: 20rem;
    max-height: 44.4rem;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #365184;
    border-radius: 0.55rem;
    background: #f7f9fc;
    box-shadow: 1px 2px 5px rgb(18 38 63 / 18%);
    color: #172536;
    font-family: Aptos, "Segoe UI", sans-serif;
}

.learning-counselor-window > .panel-heading {
    flex: 0 0 auto;
    min-height: 1.7rem;
    border-bottom: 1px solid #8da0b7;
    background: linear-gradient(100deg, #dce8f5, #f5f8fb);
}

.learning-counselor-window > .panel-heading h2 {
    color: #173b65;
    font-weight: 700;
}

.learning-counselor-body,
.learning-review {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.7rem;
    padding: 0.75rem;
    overflow: auto;
}

.learning-recommendation {
    display: grid;
    gap: 0.42rem;
    padding: 0.75rem;
    border: 1px solid #9eb6d1;
    border-radius: 0.65rem;
    background: linear-gradient(145deg, #fff, #edf5ff);
    box-shadow: 0 5px 14px rgb(37 99 166 / 10%);
}

.learning-recommendation-eyebrow {
    color: #2563a6;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.learning-counselor-window h3,
.learning-counselor-window p {
    margin: 0;
}

.learning-counselor-window h3 {
    color: #173b65;
    font-size: 1rem;
}

.learning-recommendation > p {
    font-size: 0.8rem;
    line-height: 1.38;
}

.learning-recommendation-reason {
    color: #53657a;
}

.learning-primary-action,
.learning-secondary-action,
.learning-review-ratings button {
    border: 1px solid #6f90b5;
    border-radius: 0.5rem;
    background: #fff;
    color: #173b65;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.learning-primary-action {
    min-height: 2.7rem;
    padding: 0.48rem 0.75rem;
    border-color: #1d5f9d;
    background: linear-gradient(120deg, #174b7c, #2874b9);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 750;
}

.learning-primary-action:hover,
.learning-primary-action:focus-visible {
    background: linear-gradient(120deg, #123f6a, #1f67a8);
    outline: 3px solid rgb(37 99 166 / 22%);
    outline-offset: 1px;
}

.learning-primary-action:disabled {
    opacity: 0.58;
    cursor: wait;
}

.learning-recommendation > small,
.learning-privacy-note {
    color: #68788a;
    font-size: 0.66rem;
    line-height: 1.3;
}

.learning-today,
.learning-week {
    display: grid;
    gap: 0.42rem;
}

.learning-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.learning-metric-grid > div {
    display: grid;
    gap: 0.08rem;
    padding: 0.48rem;
    border: 1px solid #c7d4e3;
    border-radius: 0.48rem;
    background: #fff;
}

.learning-metric-grid strong {
    color: #174b7c;
    font-size: 1.05rem;
}

.learning-metric-grid span,
.learning-week span,
.learning-week p {
    color: #596b7f;
    font-size: 0.67rem;
}

.learning-week > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.learning-balance-bar {
    height: 0.55rem;
    overflow: hidden;
    border-radius: 99px;
    background: #dbcdf3;
}

.learning-balance-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563a6, #2aa89a);
}

.learning-science-note {
    padding: 0.55rem 0.65rem;
    border: 1px solid #c7d4e3;
    border-radius: 0.48rem;
    background: #fff;
    font-size: 0.7rem;
    line-height: 1.4;
}

.learning-science-note summary {
    color: #294f78;
    font-weight: 700;
    cursor: pointer;
}

.learning-science-note p {
    margin-top: 0.45rem;
}

.learning-science-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
}

.learning-science-links a {
    color: #155e9a;
}

.learning-counselor-window > .learning-counselor-status {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 0.4rem 0.7rem;
    border-top: 1px solid #c7d4e3;
    background: #edf4fb;
    font-size: 0.68rem;
}

.learning-review {
    grid-template-rows: auto auto auto auto;
    align-content: start;
}

.learning-review-progress {
    display: grid;
    gap: 0.28rem;
    color: #53657a;
    font-size: 0.72rem;
}

.learning-review-progress progress {
    width: 100%;
    height: 0.55rem;
    accent-color: #2563a6;
}

.learning-review-prompt {
    display: grid;
    gap: 0.65rem;
    padding: 0.8rem;
    border: 1px solid #b8c9dc;
    border-radius: 0.65rem;
    background: #fff;
    text-align: center;
}

.learning-review-prompt > p:last-child {
    color: #53657a;
    font-size: 0.75rem;
    line-height: 1.35;
}

.learning-review-hanzi,
.learning-review-context {
    font-family: "Microsoft JhengHei", "Noto Serif CJK TC", serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.35;
}

.learning-review-context mark {
    border-radius: 0.22rem;
    padding: 0 0.08em;
    background: #fff2a8;
    color: #8a2f16;
}

.learning-review-answer {
    display: grid;
    gap: 0.6rem;
}

.learning-review-answer dl {
    display: grid;
    gap: 0.38rem;
    margin: 0;
}

.learning-review-answer dl > div {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 0.45rem;
    padding: 0.45rem;
    border: 1px solid #c7d4e3;
    border-radius: 0.42rem;
    background: #fff;
}

.learning-review-answer dt {
    color: #607286;
    font-size: 0.68rem;
    font-weight: 700;
}

.learning-review-answer dd {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.35;
}

.learning-review-answer > p {
    color: #40556d;
    font-size: 0.72rem;
}

.learning-review-ratings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
}

.learning-review-ratings button {
    display: grid;
    min-height: 3.2rem;
    gap: 0.12rem;
    place-content: center;
    padding: 0.4rem;
}

.learning-review-ratings button:hover,
.learning-review-ratings button:focus-visible {
    border-color: #2563a6;
    background: #edf5ff;
    outline: 2px solid rgb(37 99 166 / 20%);
}

.learning-review-ratings .again { border-color: #c66a66; }
.learning-review-ratings .easy { border-color: #4c9b79; }
.learning-review-ratings strong { font-size: 0.76rem; }
.learning-review-ratings span { color: #68788a; font-size: 0.61rem; }

.learning-secondary-action {
    min-height: 2rem;
    padding: 0.35rem 0.6rem;
    color: #53657a;
    font-size: 0.72rem;
}

/* The fourth primary pane fills the unused right side when the viewport can
   accommodate three useful columns. */
.workbench-grid {
    grid-template-areas:
        "reader inspector"
        "reader word"
        "counselor counselor";
}

@media (min-width: 1280px) {
    .workbench-grid {
        grid-template-columns: 30.875rem 30.875rem minmax(15rem, 1fr);
        grid-template-rows: minmax(0, 55fr) minmax(0, 45fr);
        grid-template-areas:
            "reader inspector counselor"
            "reader word counselor";
    }
}

@media (min-width: 1000px) {
    .workbench-grid {
        /* The compact status header is 1.2rem high with a 0.15rem margin.
           Subtract it so the panel frame, not merely its positioning
           container, ends inside the containing browser window. */
        height: calc(100% - 1.35rem);
        min-height: 0;
    }

    .reader-stage.reader-native-window,
    .learning-counselor-window {
        height: 100%;
        min-height: 0;
        max-height: none;
    }

    .character-dictionary-window,
    .workbench-grid > .word-dictionary-window.word-dictionary-native-window {
        align-self: start;
        height: 100%;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }
}

@media (min-width: 1000px) and (max-width: 1279px) {
    .workbench-grid {
        /* Keep all four primary windows inside the same native-height frame.
           A third counselor row made this layout taller than a maximized
           Chrome PWA on Windows 11. */
        grid-template-rows: minmax(0, 55fr) minmax(0, 45fr);
        grid-template-areas:
            "reader inspector"
            "counselor word";
    }
}

@media (min-width: 1000px) {
    .workbench-grid[data-learning-counselor-visible="false"] {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        grid-template-columns: minmax(34rem, 1.35fr) minmax(26rem, 0.95fr);
        grid-template-rows: minmax(0, 55fr) minmax(0, 45fr);
        grid-template-areas:
            "reader inspector"
            "reader word";
    }

    .workbench-grid[data-learning-counselor-visible="false"] > #reader {
        position: relative;
        inset: auto;
        z-index: auto;
        grid-area: reader;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
    }

    .workbench-grid[data-learning-counselor-visible="false"] > .character-dictionary-window,
    .workbench-grid[data-learning-counselor-visible="false"] > .word-dictionary-window.word-dictionary-native-window {
        justify-self: stretch;
        width: 100%;
    }

    .workbench-grid[data-learning-counselor-visible="false"] > .primary-window::after {
        display: none;
    }
}

@media (max-width: 999px) {
    .workbench-page:not(.compact-primary-mode) .workbench-grid > .primary-window:not(#reader) {
        display: none;
    }

    .workbench-grid {
        display: block;
    }

    .workbench-grid > .primary-window {
        grid-area: auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
    }

    .learning-counselor-window {
        min-width: 0;
        min-height: calc(100dvh - 5rem);
        max-height: none;
        border-radius: 0;
    }

    .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-character-navigation {
        grid-template-columns: 4.25rem minmax(0, 1fr) 4.25rem;
        padding-right: 0;
    }

    .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-character-navigation-button {
        width: 4.25rem;
        min-width: 4.25rem;
        min-height: 3.1rem;
        font-size: 2rem;
    }
}

@media (max-width: 599px) {
    .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-page-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.25rem;
        padding-right: 0;
    }

    .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-page-strip > button:first-child {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-page-strip > button:last-child {
        grid-column: 3 / 5;
        grid-row: 1;
    }

    .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-page-strip input {
        min-width: 0;
        width: 100%;
    }
}

/* Let modern visual themes carry through the new pane and touch controls. */
.workbench-page:not(.visual-theme-classic) .learning-counselor-window {
    border-color: var(--ct-theme-border);
    border-radius: var(--ct-theme-radius);
    background: var(--ct-theme-surface);
    box-shadow: var(--ct-theme-shadow);
    color: var(--ct-theme-text);
}

.workbench-page:not(.visual-theme-classic) .learning-recommendation,
.workbench-page:not(.visual-theme-classic) .learning-review-prompt,
.workbench-page:not(.visual-theme-classic) .learning-metric-grid > div,
.workbench-page:not(.visual-theme-classic) .learning-science-note,
.workbench-page:not(.visual-theme-classic) .learning-review-answer dl > div {
    border-color: color-mix(in srgb, var(--ct-theme-border) 62%, white);
    background: var(--ct-theme-surface-soft);
}

.workbench-page:not(.visual-theme-classic) .learning-primary-action {
    border-color: var(--ct-theme-accent-strong);
    background: linear-gradient(120deg, var(--ct-theme-accent-strong), var(--ct-theme-accent));
}

.workbench-page:not(.visual-theme-classic) .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-character-navigation-button {
    border-color: var(--ct-theme-border);
    border-radius: var(--ct-theme-control-radius);
    background: linear-gradient(#fff, var(--ct-theme-surface-soft));
    color: var(--ct-theme-accent-strong);
}

/* Dictionary study controls use the same window edge and a larger physical
   target than the compact Windows-form checkboxes.  Keep space between the
   two rows so they remain easy to select on touch screens. */
.character-dictionary-window,
.word-dictionary-window.word-dictionary-native-window {
    width: min(30.75rem, 100%);
}

.character-dictionary-window .character-dictionary-native-record {
    height: 24.25rem;
}

.character-dictionary-window .character-study-state {
    width: 25.625rem;
    height: 4.25rem;
}

.character-dictionary-window .character-study-state label,
.character-dictionary-window .character-study-total {
    height: 1.75rem;
}

.character-dictionary-window .character-need-checkbox,
.character-dictionary-window .character-study-total-need {
    top: 2.25rem;
}

.character-dictionary-window .character-study-state input,
.word-dictionary-window.word-dictionary-native-window .word-native-customized-control input,
.word-dictionary-window.word-dictionary-native-window .word-native-known-control input,
.word-dictionary-window.word-dictionary-native-window .word-native-need-control input {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    margin-right: 0.45rem;
}

.word-dictionary-window.word-dictionary-native-window .word-dictionary-native-record {
    height: 19.75rem;
}

.word-dictionary-window.word-dictionary-native-window .word-native-customized-control,
.word-dictionary-window.word-dictionary-native-window .word-native-known-control,
.word-dictionary-window.word-dictionary-native-window .word-native-need-control,
.word-dictionary-window.word-dictionary-native-window .word-native-known-total,
.word-dictionary-window.word-dictionary-native-window .word-native-need-total {
    height: 1.75rem;
}

.word-dictionary-window.word-dictionary-native-window .word-native-need-control,
.word-dictionary-window.word-dictionary-native-window .word-native-need-total,
.word-dictionary-window.word-dictionary-native-window .word-native-remove-customization {
    top: 17.5rem;
}

@media (max-width: 999px) {
    .character-dictionary-window,
    .word-dictionary-window.word-dictionary-native-window {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .character-dictionary-window .character-study-state {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem 0.75rem;
    }

    .character-dictionary-window .character-study-state label,
    .character-dictionary-window .character-study-total {
        position: static;
    }
}

/* Keep transient command feedback below the working windows.  The workbench
   yields only the status row's actual height, so showing it never displaces
   the windows from the top of the display. */
.workbench-command-status {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0.25rem 0 0;
}

@media (min-width: 761px) {
    /* Derive the workspace height from the chrome's measured flex height.
       iPadOS can enlarge the title and menu bars, so subtracting a fixed rem
       value from 100vh leaves the final Reader and dictionary rows offscreen. */
    .app-shell {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .app-shell > .app-chrome {
        flex: 0 0 auto;
    }

    .app-shell > .workspace {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }

    .workbench-page {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .workbench-page > .workbench-grid {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }
}

/* At multi-window widths, make the two dictionary records consume their
   assigned grid rows.  Their study controls stay against the lower edge while
   the lexical fields divide all remaining space without a panel scrollbar. */
@media (min-width: 1000px) {
    .character-dictionary-window,
    .word-dictionary-window.word-dictionary-native-window {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow: hidden;
    }

    .character-dictionary-window > .panel-heading,
    .word-dictionary-window.word-dictionary-native-window > .panel-heading {
        flex: 0 0 auto;
    }

    .character-dictionary-window .character-dictionary-native-record {
        position: relative;
        display: grid;
        flex: 1 1 auto;
        grid-template-rows:
            8.8rem
            minmax(0, 3fr)
            minmax(0, 2fr)
            4.25rem;
        row-gap: 0.15rem;
        width: 30.25rem;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    .character-dictionary-window .character-dictionary-native-record > .character-dictionary-card {
        position: relative;
        grid-row: 1;
    }

    .character-dictionary-window .character-dictionary-native-record > .character-lexicon-form {
        position: relative;
        top: auto;
        left: auto;
        grid-row: 2;
        grid-template-rows:
            minmax(0, 0.7fr)
            minmax(0, 0.7fr)
            minmax(0, 2.5fr);
        width: 29.875rem;
        height: 100%;
    }

    .character-dictionary-window .character-dictionary-native-record .character-lexicon-form input,
    .character-dictionary-window .character-dictionary-native-record .character-lexicon-form textarea,
    .character-dictionary-window .character-dictionary-native-record .character-text-fields .character-definition-value {
        height: 100%;
        min-height: 0;
    }

    .character-dictionary-window .character-dictionary-native-record > .character-note-form {
        position: relative;
        top: auto;
        left: auto;
        grid-row: 3;
        width: 29.875rem;
        height: 100%;
        min-height: 0;
    }

    .character-dictionary-window .character-dictionary-native-record .character-note-form textarea,
    .character-dictionary-window .character-dictionary-native-record .character-note-form .character-empty-text-frame {
        height: 100%;
        min-height: 0;
    }

    .character-dictionary-window .character-study-state {
        position: relative;
        top: auto;
        left: auto;
        grid-row: 4;
        align-self: end;
        width: calc(100% - 4.625rem);
        height: 4.25rem;
        margin-left: 4.625rem;
    }

    .word-dictionary-window.word-dictionary-native-window .word-dictionary-native-record {
        position: relative;
        display: grid;
        flex: 1 1 auto;
        grid-template-columns: 4rem minmax(0, 1fr);
        grid-template-rows:
            minmax(0, 1.3fr)
            minmax(0, 0.5fr)
            minmax(0, 0.5fr)
            minmax(0, 1.2fr)
            minmax(0, 1fr)
            1.75rem
            1.75rem;
        gap: 0.25rem 0.5rem;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0.5rem 0.625rem;
        overflow: hidden;
        box-sizing: border-box;
    }

    .word-dictionary-window.word-dictionary-native-window .word-dictionary-native-record > * {
        position: static;
    }

    .word-dictionary-window.word-dictionary-native-window .word-native-label {
        align-self: center;
        width: auto;
    }

    .word-dictionary-window.word-dictionary-native-window .word-native-word-label,
    .word-dictionary-window.word-dictionary-native-window .word-native-word {
        grid-row: 1;
    }

    .word-dictionary-window.word-dictionary-native-window .word-native-pinyin-label,
    .word-dictionary-window.word-dictionary-native-window .word-native-pinyin {
        grid-row: 2;
    }

    .word-dictionary-window.word-dictionary-native-window .word-native-zhuyin-label,
    .word-dictionary-window.word-dictionary-native-window .word-native-zhuyin {
        grid-row: 3;
    }

    .word-dictionary-window.word-dictionary-native-window .word-native-definition-label,
    .word-dictionary-window.word-dictionary-native-window .word-native-definition {
        grid-row: 4;
    }

    .word-dictionary-window.word-dictionary-native-window .word-native-notes-label,
    .word-dictionary-window.word-dictionary-native-window .word-native-notes {
        grid-row: 5;
    }

    .word-dictionary-window.word-dictionary-native-window .word-native-word,
    .word-dictionary-window.word-dictionary-native-window .word-native-pinyin,
    .word-dictionary-window.word-dictionary-native-window .word-native-zhuyin,
    .word-dictionary-window.word-dictionary-native-window .word-native-definition,
    .word-dictionary-window.word-dictionary-native-window .word-native-notes {
        grid-column: 2;
        align-self: start;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .word-dictionary-window.word-dictionary-native-window .word-native-customized-control,
    .word-dictionary-window.word-dictionary-native-window .word-native-known-control,
    .word-dictionary-window.word-dictionary-native-window .word-native-need-control,
    .word-dictionary-window.word-dictionary-native-window .word-native-known-total,
    .word-dictionary-window.word-dictionary-native-window .word-native-need-total,
    .word-dictionary-window.word-dictionary-native-window .word-native-remove-customization {
        grid-column: 2;
        align-self: center;
        top: auto;
    }

    .word-dictionary-window.word-dictionary-native-window .word-native-customized-control,
    .word-dictionary-window.word-dictionary-native-window .word-native-known-control,
    .word-dictionary-window.word-dictionary-native-window .word-native-known-total {
        grid-row: 6;
    }

    .word-dictionary-window.word-dictionary-native-window .word-native-need-control,
    .word-dictionary-window.word-dictionary-native-window .word-native-need-total,
    .word-dictionary-window.word-dictionary-native-window .word-native-remove-customization {
        grid-row: 7;
    }

    .word-dictionary-window.word-dictionary-native-window .word-native-known-control,
    .word-dictionary-window.word-dictionary-native-window .word-native-need-control {
        justify-self: start;
        margin-left: 9.3125rem;
    }

    .word-dictionary-window.word-dictionary-native-window .word-native-known-total,
    .word-dictionary-window.word-dictionary-native-window .word-native-need-total {
        justify-self: end;
    }

    .word-dictionary-window.word-dictionary-native-window .word-native-remove-customization {
        justify-self: start;
        height: 1.5rem;
    }

    .workbench-page .workbench-grid > .character-dictionary-window,
    .workbench-page .workbench-grid > .word-dictionary-window.word-dictionary-native-window {
        overflow: hidden;
    }
}

/* Readable Character Dictionary -------------------------------------------------
   The everyday view emphasizes the character, the learner's preferred reading,
   the definition, and study state. Details mode keeps the complete legacy data
   available in a responsive layout and temporarily reduces Word Dictionary to a
   restore strip without unmounting it or changing the user's window choices. */
.character-dictionary-readable-window {
    --character-surface: var(--ct-theme-surface, #f7fafc);
    --character-surface-soft: var(--ct-theme-surface-soft, #edf3f8);
    --character-border: var(--ct-theme-border, #7890a7);
    --character-field-border: var(--ct-theme-field-border, #6d91ba);
    --character-accent: var(--ct-theme-accent, #2563a6);
    --character-accent-strong: var(--ct-theme-accent-strong, #174b7c);
    --character-text: var(--ct-theme-text, #172536);
    --character-muted: var(--ct-theme-muted, #607286);
    --character-radius: var(--ct-theme-control-radius, 0.5rem);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border-color: var(--character-border);
    background: var(--character-surface);
    color: var(--character-text);
    overflow: hidden !important;
    scrollbar-gutter: auto;
}

.workbench-page.chinese-font-mingliu .character-dictionary-readable-window,
.workbench-page.chinese-font-mingliu .word-dictionary-readable-window {
    --ct-chinese-font-family: MingLiU, PMingLiU, "Microsoft JhengHei", "Noto Sans CJK TC", serif;
}

.workbench-page.chinese-font-simsun .character-dictionary-readable-window,
.workbench-page.chinese-font-simsun .word-dictionary-readable-window {
    --ct-chinese-font-family: SimSun, NSimSun, "Noto Sans CJK SC", serif;
}

.character-dictionary-readable-window > .panel-heading {
    flex: 0 0 auto;
    min-height: 2.7rem;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
}

.character-dictionary-heading-copy {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.character-dictionary-readable-window .character-dictionary-heading-copy h2 {
    margin: 0;
    color: var(--character-accent-strong);
    font-size: 0.98rem;
    font-weight: 750;
    line-height: 1.1;
}

.character-dictionary-readable-window .character-dictionary-heading-copy > span {
    color: var(--character-muted);
    font-size: 0.67rem;
    line-height: 1;
}

.character-dictionary-heading-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.35rem;
}

.character-dictionary-view-toggle,
.word-dictionary-restore-button {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    border: 1px solid var(--character-field-border, #6d91ba);
    border-radius: var(--character-radius, 0.5rem);
    background: linear-gradient(#fff, var(--character-surface-soft, #edf3f8));
    color: var(--character-accent-strong, #174b7c);
    box-shadow: 0 1px 2px rgb(31 45 61 / 10%);
    font: 700 0.75rem/1 system-ui, sans-serif;
    white-space: nowrap;
}

.character-dictionary-view-toggle:hover,
.character-dictionary-view-toggle:focus-visible,
.word-dictionary-restore-button:hover,
.word-dictionary-restore-button:focus-visible {
    border-color: var(--character-accent, #2563a6);
    background: var(--character-surface-soft, #edf3f8);
    outline: 3px solid color-mix(in srgb, var(--character-accent, #2563a6) 22%, transparent);
    outline-offset: 1px;
}

.character-note-presence {
    display: inline-flex;
    min-height: 1.45rem;
    align-items: center;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--character-accent) 13%, white);
    color: var(--character-accent-strong);
    font-size: 0.66rem;
    font-weight: 750;
}

.character-note-presence::before {
    width: 0.38rem;
    height: 0.38rem;
    margin-right: 0.28rem;
    border-radius: 50%;
    background: var(--character-accent);
    content: "";
}

.character-dictionary-readable-window > .character-dictionary-native-record {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: clamp(0.65rem, 1.8cqi, 1rem);
    box-sizing: border-box;
    background: var(--character-surface);
    color: var(--character-text);
    font: 1rem/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
    zoom: 1 !important;
}

.character-dictionary-readable-window .character-dictionary-native-record > .character-dictionary-card,
.character-dictionary-readable-window .character-dictionary-native-record > .character-lexicon-form,
.character-dictionary-readable-window .character-dictionary-native-record > .character-note-form,
.character-dictionary-readable-window .character-dictionary-native-record > .character-study-state,
.character-dictionary-readable-window .character-dictionary-native-record > .character-timestamp {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    box-sizing: border-box;
}

.character-dictionary-readable-window .character-dictionary-native-record > .character-dictionary-card,
.character-dictionary-readable-window .character-dictionary-native-record > .character-lexicon-form,
.character-dictionary-readable-window .character-dictionary-native-record > .character-note-form {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.character-dictionary-readable-window .character-dictionary-native-record .character-lexicon-form label,
.character-dictionary-readable-window .character-dictionary-native-record .character-note-form label {
    align-self: end;
    padding: 0;
    color: var(--character-muted);
    font: 750 0.76rem/1.15 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.015em;
}

.character-dictionary-readable-window .character-dictionary-native-record .character-lexicon-form input,
.character-dictionary-readable-window .character-dictionary-native-record .character-lexicon-form textarea,
.character-dictionary-readable-window .character-dictionary-native-record .character-note-form textarea,
.character-dictionary-readable-window .character-empty-text-frame {
    width: 100%;
    min-width: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--character-field-border);
    border-radius: var(--character-radius);
    box-sizing: border-box;
    background: #fff;
    color: var(--character-text);
    box-shadow: inset 0 1px 2px rgb(31 45 61 / 7%);
    font: 1.05rem/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
    resize: none;
}

.character-dictionary-readable-window .character-dictionary-native-record .character-lexicon-form input:focus,
.character-dictionary-readable-window .character-dictionary-native-record .character-lexicon-form textarea:focus,
.character-dictionary-readable-window .character-dictionary-native-record .character-note-form textarea:focus {
    border-color: var(--character-accent);
    outline: 3px solid color-mix(in srgb, var(--character-accent) 18%, transparent);
}

.character-dictionary-readable-window .character-dictionary-native-record .character-study-state {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: repeat(2, minmax(2.65rem, auto));
    gap: 0.45rem 0.65rem;
    color: var(--character-text);
    font: 0.88rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.character-dictionary-readable-window .character-study-state label,
.character-dictionary-readable-window .character-study-total {
    position: static;
    display: flex;
    min-width: 0;
    height: auto;
    min-height: 2.65rem;
    align-items: center;
    box-sizing: border-box;
    border: 0;
    background: transparent;
}

.character-dictionary-readable-window .character-study-state label {
    padding: 0.38rem 0;
    border-radius: 0;
    font-weight: 650;
}

.character-dictionary-readable-window .character-study-state input {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0 0.55rem 0 0;
    accent-color: var(--character-accent);
}

.character-dictionary-readable-window .character-study-total {
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.32rem 0;
    border-radius: 0;
    color: var(--character-muted);
    white-space: nowrap;
}

.character-dictionary-readable-window .character-study-total output {
    display: grid;
    min-width: 3.55rem;
    min-height: 1.9rem;
    place-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 0;
    background: transparent;
    color: var(--character-text);
    font-size: 1rem;
    font-weight: 750;
}

/* Everyday view */
.character-dictionary-readable-window.is-everyday-view > .character-dictionary-native-record {
    display: grid;
    grid-template-columns: minmax(11.5rem, 0.82fr) minmax(0, 1.55fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
        "glyph fields"
        "study study";
    gap: clamp(0.65rem, 1.8cqi, 1rem);
    overflow: hidden;
}

.character-dictionary-readable-window.is-everyday-view .character-dictionary-card {
    grid-area: glyph;
    display: grid;
    grid-template-rows: auto auto;
    min-height: 0;
    align-content: start;
    justify-items: center;
    gap: 0.35rem;
    padding: clamp(0.65rem, 1.8cqi, 0.95rem);
    padding-block-start: calc(clamp(0.65rem, 1.8cqi, 0.95rem) + 1.225rem);
}

.character-dictionary-readable-window.is-everyday-view .variant-board,
.character-dictionary-readable-window.is-everyday-view .radical-strokes-board,
.character-dictionary-readable-window.is-everyday-view .character-codepoint,
.character-dictionary-readable-window.is-everyday-view .character-timestamp,
.character-dictionary-readable-window.is-everyday-view .character-note-form {
    display: none !important;
}

.character-dictionary-readable-window.is-everyday-view .entry-total-line {
    position: static;
    display: flex !important;
    grid-row: 2;
    width: auto;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
    color: var(--character-muted);
    font: 700 0.72rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.character-dictionary-readable-window.is-everyday-view .entry-total-line > span,
.character-dictionary-readable-window.is-everyday-view .character-dictionary-empty-card .entry-total-line {
    display: none !important;
}

.character-dictionary-readable-window.is-everyday-view .entry-total-line input {
    display: block;
    width: 4.2rem;
    min-width: 0;
    min-height: 2rem;
    height: 2rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--character-field-border);
    border-radius: var(--character-radius);
    background: #fff;
    color: var(--character-text);
    font: 0.9rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    text-align: center;
}

.character-dictionary-readable-window.is-everyday-view .character-dictionary-grid {
    position: static;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-row: 1;
    height: auto;
    align-self: start;
    place-items: start center;
}

.character-dictionary-readable-window.is-everyday-view .character-glyph-board {
    position: static;
    display: grid;
    width: 100%;
    height: auto;
    min-height: 0;
    place-items: start center;
    place-content: start center;
}

.character-dictionary-readable-window.is-everyday-view .character-dictionary-grid .character-display {
    display: grid;
    width: calc(1em + 0.75rem);
    max-width: 100%;
    height: calc(1em + 0.75rem);
    min-height: 0;
    aspect-ratio: auto;
    place-items: center;
    border: 1px solid var(--character-field-border);
    border-radius: var(--character-radius);
    box-sizing: border-box;
    background: #fff;
    color: var(--character-text);
    box-shadow: inset 0 1px 2px rgb(31 45 61 / 7%);
    font-family: var(--ct-chinese-font-family, MingLiU, "Microsoft JhengHei", sans-serif);
    font-size: clamp(7rem, 15.2vh, 9rem);
    line-height: 1;
}

.character-dictionary-readable-window.is-everyday-view .character-lexicon-form {
    grid-area: fields;
    display: grid;
    min-height: 0;
    align-content: stretch;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 2.7rem auto minmax(clamp(5rem, 10.5vh, 7.5rem), 1fr);
    gap: 0.35rem;
    padding: clamp(0.65rem, 1.8cqi, 0.95rem);
    padding-inline-start: 0;
}

.character-dictionary-readable-window.is-everyday-view .character-lexicon-form label {
    align-self: end;
}

.character-dictionary-readable-window.is-everyday-view .character-definition-label {
    align-self: end;
    margin-block-start: 0.25rem;
    padding-top: 0;
}

.character-dictionary-readable-window.is-everyday-view[data-character-pronunciation="pinyin"] .character-lexicon-form,
.character-dictionary-readable-window.is-everyday-view[data-character-pronunciation="zhuyin"] .character-lexicon-form {
    grid-template-rows: auto 2.7rem auto minmax(clamp(5rem, 10.5vh, 7.5rem), 1fr);
}

.character-dictionary-readable-window.is-everyday-view .character-lexicon-form input {
    min-height: 2.7rem;
    height: 2.7rem;
}

.character-dictionary-readable-window.is-everyday-view .character-lexicon-form .character-definition-value,
.character-dictionary-readable-window.is-everyday-view .character-empty-definition-frame {
    height: 100%;
    min-height: clamp(5rem, 10.5vh, 7.5rem);
    overflow: auto;
}

.character-dictionary-readable-window.is-everyday-view .character-study-state {
    grid-area: study;
}

.character-dictionary-readable-window.is-everyday-view[data-character-pronunciation="pinyin"] .character-zhuyin-label,
.character-dictionary-readable-window.is-everyday-view[data-character-pronunciation="pinyin"] .character-zhuyin-value,
.character-dictionary-readable-window.is-everyday-view[data-character-pronunciation="zhuyin"] .character-pinyin-label,
.character-dictionary-readable-window.is-everyday-view[data-character-pronunciation="zhuyin"] .character-pinyin-value {
    display: none !important;
}

/* Details view */
.character-dictionary-readable-window.is-details-view > .character-dictionary-native-record {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto 2.35rem auto minmax(5rem, 1fr) auto;
    align-content: stretch;
    gap: 0.45rem 0.75rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.character-dictionary-readable-window.is-details-view .character-dictionary-card {
    grid-column: 1 / -1;
    grid-row: auto;
    display: grid;
    grid-template-columns: 6.75rem repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    gap: 0.75rem;
    padding: 0;
}

.character-dictionary-readable-window.is-details-view .entry-total-line {
    position: static;
    display: flex;
    width: auto;
    align-items: center;
    grid-column: 2 / -1;
    grid-row: 1;
    justify-self: start;
    gap: 0.35rem;
    color: var(--character-muted);
    font: 700 0.72rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.character-dictionary-readable-window.is-details-view .entry-total-line input {
    width: 4.2rem;
    min-width: 0;
    min-height: 2rem;
    height: 2rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--character-field-border);
    border-radius: var(--character-radius);
    background: #fff;
    color: var(--character-text);
    font: 0.9rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    text-align: center;
}

.character-dictionary-readable-window.is-details-view .character-dictionary-grid {
    position: static;
    inset: auto;
    display: contents;
}

.character-dictionary-readable-window.is-details-view .variant-board,
.character-dictionary-readable-window.is-details-view .radical-strokes-board,
.character-dictionary-readable-window.is-details-view .character-glyph-board {
    position: static;
    width: auto;
    height: auto;
    min-width: 0;
}

.character-dictionary-readable-window.is-details-view .variant-board {
    grid-column: 1 / 3;
    grid-row: 3;
}

.character-dictionary-readable-window.is-details-view .radical-strokes-board {
    grid-column: 3;
    grid-row: 3;
}

.character-dictionary-readable-window.is-details-view .variant-board,
.character-dictionary-readable-window.is-details-view .radical-strokes-board {
    display: grid;
    align-content: start;
    gap: 0.25rem;
}

.character-dictionary-readable-window.is-details-view .variant-board h3,
.character-dictionary-readable-window.is-details-view .radical-strokes-board h3 {
    margin: 0 0 0.15rem;
    color: var(--character-accent-strong);
    font: 750 0.88rem/1.1 system-ui, -apple-system, "Segoe UI", sans-serif;
    text-align: left;
}

.character-dictionary-readable-window.is-details-view .variant-row {
    display: grid;
    grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
    gap: 0.35rem;
    align-items: center;
}

.character-dictionary-readable-window.is-details-view .variant-row > span,
.character-dictionary-readable-window.is-details-view .radical-strokes-board span {
    color: var(--character-muted);
    font: 0.76rem/1.1 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.character-dictionary-readable-window.is-details-view .variant-cells,
.character-dictionary-readable-window.is-details-view .simplified-variant-cells,
.character-dictionary-readable-window.is-details-view .compatibility-variant-cells {
    display: flex;
    min-width: 0;
    gap: 0.22rem;
}

.character-dictionary-readable-window.is-details-view .variant-cell,
.character-dictionary-readable-window.is-details-view .radical-strokes-board strong,
.character-dictionary-readable-window.is-details-view .radical-strokes-board em,
.character-dictionary-readable-window.is-details-view .radical-character-link,
.character-dictionary-readable-window.is-details-view .character-empty-field {
    display: grid;
    width: 1.55rem;
    min-width: 1.55rem;
    height: 1.55rem;
    min-height: 1.55rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--character-text);
    font: 1.22rem/1 var(--ct-chinese-font-family, MingLiU, "Microsoft JhengHei", sans-serif);
    font-style: normal;
}

.character-dictionary-readable-window.is-details-view .radical-strokes-board > div {
    display: grid;
    grid-template-columns: minmax(3.2rem, auto) 1.55rem 0.7rem 1.55rem;
    gap: 0.18rem;
    align-items: center;
}

.character-dictionary-readable-window.is-details-view .radical-stroke-operator {
    display: grid;
    min-height: 1.55rem;
    place-items: center;
    margin: 0;
    color: var(--character-muted);
    font-size: 1rem;
}

.character-dictionary-readable-window.is-details-view .character-glyph-board {
    display: contents;
}

.character-dictionary-readable-window.is-details-view .character-dictionary-grid .character-display {
    display: grid;
    grid-column: 1;
    grid-row: 1 / 3;
    width: 6.75rem;
    min-height: 0;
    aspect-ratio: 1;
    place-items: center;
    justify-self: start;
    border: 1px solid var(--character-field-border);
    border-radius: var(--character-radius);
    background: #fff;
    color: var(--character-text);
    box-shadow: inset 0 1px 2px rgb(31 45 61 / 7%);
    font-family: var(--ct-chinese-font-family, MingLiU, "Microsoft JhengHei", sans-serif);
    font-size: 5.1rem;
    line-height: 1;
}

.character-dictionary-readable-window.is-details-view .character-codepoint {
    position: static;
    display: flex;
    grid-column: 2 / -1;
    grid-row: 2;
    align-self: start;
    justify-self: start;
    width: auto;
    min-width: 0;
    min-height: 0;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--character-muted);
    font: 0.72rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.character-dictionary-readable-window.is-details-view .character-timestamp {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    padding: 0 0.25rem;
    color: var(--character-muted);
    font: 0.68rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
    white-space: normal;
}

.character-dictionary-readable-window.is-details-view .character-timestamp > span,
.character-dictionary-readable-window.is-details-view .character-timestamp output {
    position: static;
    display: inline;
    width: auto;
    color: inherit;
    font: inherit;
    white-space: normal;
}

.character-dictionary-readable-window.is-details-view .character-lexicon-form,
.character-dictionary-readable-window.is-details-view .character-note-form {
    display: contents;
}

.character-dictionary-readable-window.is-details-view .character-lexicon-form label,
.character-dictionary-readable-window.is-details-view .character-note-form label {
    align-self: end;
}

.character-dictionary-readable-window.is-details-view .character-pinyin-label {
    grid-column: 1;
    grid-row: 3;
}

.character-dictionary-readable-window.is-details-view .character-pinyin-value {
    grid-column: 1;
    grid-row: 4;
}

.character-dictionary-readable-window.is-details-view .character-zhuyin-label {
    grid-column: 2;
    grid-row: 3;
}

.character-dictionary-readable-window.is-details-view .character-zhuyin-value {
    grid-column: 2;
    grid-row: 4;
}

.character-dictionary-readable-window.is-details-view .character-definition-label {
    grid-column: 1;
    grid-row: 5;
    align-self: end;
    margin-block-start: 0.2rem;
    padding-top: 0;
}

.character-dictionary-readable-window.is-details-view .character-definition-value,
.character-dictionary-readable-window.is-details-view .character-empty-definition-frame {
    grid-column: 1;
    grid-row: 6;
}

.character-dictionary-readable-window.is-details-view .character-note-form label {
    grid-column: 2;
    grid-row: 5;
}

.character-dictionary-readable-window.is-details-view .character-note-form textarea,
.character-dictionary-readable-window.is-details-view .character-note-form .character-empty-text-frame {
    grid-column: 2;
    grid-row: 6;
}

.character-dictionary-readable-window.is-details-view .character-lexicon-form input {
    min-height: 2.35rem;
    height: 2.35rem;
}

.character-dictionary-readable-window.is-details-view .character-lexicon-form .character-definition-value,
.character-dictionary-readable-window.is-details-view .character-empty-definition-frame,
.character-dictionary-readable-window.is-details-view .character-note-form textarea,
.character-dictionary-readable-window.is-details-view .character-note-form .character-empty-text-frame {
    align-self: stretch;
    height: 100%;
    min-height: 5rem;
    max-height: none;
    overflow: auto;
}

.character-dictionary-readable-window.is-details-view .character-study-state {
    grid-column: 1 / -1;
    grid-row: 7;
    align-self: stretch;
}

.character-dictionary-readable-window .character-note-status {
    position: static;
    grid-column: 1 / -1;
    justify-self: end;
    max-width: none;
    margin: 0;
    padding: 0.2rem 0.35rem;
    color: var(--character-muted);
    font-size: 0.7rem;
}

/* Keep the complete Character Dictionary in context while preserving the Word
   Dictionary component and all of its local edit state as a compact restore bar. */
.word-dictionary-window.word-dictionary-native-window.is-temporarily-collapsed > :not(.panel-heading) {
    display: none !important;
}

.word-dictionary-window.word-dictionary-native-window.is-temporarily-collapsed > .panel-heading {
    min-height: 2.55rem;
    box-sizing: border-box;
}

.word-dictionary-window.word-dictionary-native-window.is-temporarily-collapsed .word-dictionary-restore-button {
    margin-left: auto;
    margin-right: 2rem;
}

.workbench-grid[data-accessory-controller="active"] > .primary-window[data-accessory-layout-locked="true"] > .panel-heading {
    cursor: default;
}

.workbench-grid[data-accessory-controller="active"] > .primary-window[data-accessory-layout-locked="true"]::after {
    display: none;
}

@media (min-width: 1000px) {
    .workbench-page.character-dictionary-details-mode .workbench-grid > .character-dictionary-readable-window {
        position: relative !important;
        inset: auto !important;
        z-index: 1 !important;
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: stretch;
        justify-self: stretch;
        width: 100% !important;
        height: 100% !important;
        min-height: 0;
        max-height: none;
        margin: 0 !important;
        transform: none !important;
    }

    .workbench-page.character-dictionary-details-with-word .workbench-grid > .character-dictionary-readable-window {
        height: calc(100% - 2.8rem) !important;
    }

    .workbench-page.character-dictionary-details-mode .workbench-grid > .word-dictionary-window.is-temporarily-collapsed {
        position: relative !important;
        inset: auto !important;
        z-index: 2 !important;
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: end;
        justify-self: stretch;
        width: 100% !important;
        height: 2.55rem !important;
        min-height: 2.55rem !important;
        max-height: 2.55rem !important;
        margin: 0 !important;
        transform: none !important;
        overflow: hidden !important;
    }
}

@container (max-width: 28rem) {
    .character-dictionary-readable-window.is-details-view > .character-dictionary-native-record {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto 2.35rem auto 2.35rem auto minmax(5rem, auto) auto minmax(5rem, auto) auto;
    }

    .character-dictionary-readable-window.is-details-view .character-dictionary-card,
    .character-dictionary-readable-window.is-details-view .character-timestamp,
    .character-dictionary-readable-window.is-details-view .character-study-state,
    .character-dictionary-readable-window.is-details-view .character-note-status {
        grid-column: 1;
    }

    .character-dictionary-readable-window.is-details-view .character-dictionary-card {
        grid-row: 1;
    }

    .character-dictionary-readable-window.is-details-view .character-timestamp {
        grid-row: 2;
    }

    .character-dictionary-readable-window.is-details-view .character-pinyin-label {
        grid-column: 1;
        grid-row: 3;
    }

    .character-dictionary-readable-window.is-details-view .character-pinyin-value {
        grid-column: 1;
        grid-row: 4;
    }

    .character-dictionary-readable-window.is-details-view .character-zhuyin-label {
        grid-column: 1;
        grid-row: 5;
    }

    .character-dictionary-readable-window.is-details-view .character-zhuyin-value {
        grid-column: 1;
        grid-row: 6;
    }

    .character-dictionary-readable-window.is-details-view .character-definition-label {
        grid-column: 1;
        grid-row: 7;
    }

    .character-dictionary-readable-window.is-details-view .character-definition-value,
    .character-dictionary-readable-window.is-details-view .character-empty-definition-frame {
        grid-column: 1;
        grid-row: 8;
    }

    .character-dictionary-readable-window.is-details-view .character-note-form label {
        grid-column: 1;
        grid-row: 9;
    }

    .character-dictionary-readable-window.is-details-view .character-note-form textarea,
    .character-dictionary-readable-window.is-details-view .character-note-form .character-empty-text-frame {
        grid-column: 1;
        grid-row: 10;
    }

    .character-dictionary-readable-window.is-details-view .character-study-state {
        grid-row: 11;
    }
}

@container (max-width: 25rem) {
    .character-dictionary-readable-window > .panel-heading {
        align-items: flex-start;
    }

    .character-dictionary-readable-window .character-dictionary-heading-copy > span,
    .character-note-presence {
        display: none;
    }

    .character-dictionary-readable-window.is-everyday-view > .character-dictionary-native-record {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "glyph"
            "fields"
            "study";
        overflow-y: auto;
    }

    .character-dictionary-readable-window.is-everyday-view .character-dictionary-card {
        min-height: 9rem;
    }

    .character-dictionary-readable-window.is-everyday-view .character-dictionary-grid .character-display {
        width: 8rem;
        height: 8rem;
        font-size: 6.5rem;
    }

    .character-dictionary-readable-window .character-dictionary-native-record .character-study-state {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        gap: 0.35rem;
    }

    .character-dictionary-readable-window .character-dictionary-native-record .character-study-state label,
    .character-dictionary-readable-window .character-dictionary-native-record .character-study-total {
        border-radius: var(--character-radius);
    }

    .character-dictionary-readable-window .character-dictionary-native-record .character-study-total {
        justify-content: space-between;
    }

    .character-dictionary-readable-window.is-details-view .character-dictionary-card {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
    }

    .character-dictionary-readable-window.is-details-view .character-dictionary-grid .character-display {
        width: 5.5rem;
        font-size: 4.6rem;
    }

    .character-dictionary-readable-window.is-details-view .variant-board {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .character-dictionary-readable-window.is-details-view .radical-strokes-board {
        grid-column: 1 / -1;
        grid-row: 4;
    }
}

@media (max-width: 999px) {
    .workbench-page.compact-primary-mode > .workbench-grid {
        align-self: stretch;
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 760px) {
    .app-shell {
        overflow-x: clip;
    }
}

/* A fixed menu must remain above the other dictionary/Reader windows even
   when its owning window normally has a lower stacking order. */
.workbench-page > .workbench-grid > .primary-window.accessory-window:has(.workbench-context-menu) {
    z-index: 1380 !important;
}

/* Reading controls remain distinct from the page-navigation buttons. */
.reader-stage.reader-native-window[data-reader-view="current-document"] .reader-character-navigation {
    grid-template-columns: 3rem minmax(3rem, 6rem) 3rem;
    justify-content: center;
    gap: 0.75rem;
    margin-block: 0.55rem 0.85rem;
    padding-inline: 0;
}

.reader-edge-navigation {
    display: none;
}

@media (pointer: coarse) and (min-width: 768px) {
    .app-shell:has(.reader-edge-navigation) {
        box-sizing: border-box;
        padding-left: calc(3rem + env(safe-area-inset-left, 0px));
        padding-right: calc(3rem + env(safe-area-inset-right, 0px));
    }

    .reader-edge-navigation {
        display: contents;
    }

    .reader-edge-button {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 30;
        display: grid;
        place-items: center;
        box-sizing: border-box;
        width: calc(3rem + env(safe-area-inset-left, 0px));
        height: 100dvh;
        min-height: 0;
        padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
        border: 1px solid var(--ct-theme-border, #7890a7);
        border-radius: 0;
        background: var(--ct-theme-surface-soft, #dce7f2);
        color: var(--ct-theme-accent-strong, #174f7f);
        font: 700 1.5rem/1 system-ui, sans-serif;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
    }

    .reader-edge-button.previous { left: 0; }
    .reader-edge-button.next {
        right: 0;
        width: calc(3rem + env(safe-area-inset-right, 0px));
    }

    .reader-edge-button:active:not(:disabled) {
        background: var(--ct-theme-accent, #2563a6);
        color: #fff;
    }

    .reader-edge-button:focus-visible {
        outline: 3px solid var(--ct-theme-accent, #2563a6);
        outline-offset: -4px;
    }

    .reader-edge-button:disabled {
        color: var(--ct-theme-muted, #718096);
        opacity: 0.65;
    }

    .app-shell:has(.reader-edge-navigation) .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-character-navigation {
        display: none;
    }
}

@media (max-width: 767px) {
    .reader-stage.reader-native-window[data-reader-view="current-document"] .reader-character-navigation {
        grid-template-columns: 4.25rem minmax(3rem, 5rem) 4.25rem;
    }
}

/* Account for the thumb-control gutters when sizing tiled tablet panes. */
@media (pointer: coarse) and (min-width: 1000px) {
    .app-shell:has(.reader-edge-navigation) .workbench-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .app-shell:has(.reader-edge-navigation) .workbench-grid > #reader {
        min-width: 0;
        width: 100%;
    }
}

@media (pointer: coarse) and (min-width: 1280px) {
    .app-shell:has(.reader-edge-navigation) .workbench-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(12rem, 0.6fr);
    }
}

@media (pointer: coarse) and (min-width: 1000px) {
    .app-shell:has(.reader-edge-navigation) .workbench-grid[data-learning-counselor-visible="false"] {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
    }
}

/* Either dictionary can use the shared dictionary column for its Details view. */
.character-dictionary-readable-window.is-temporarily-collapsed > :not(.panel-heading) {
    display: none !important;
}

.character-dictionary-readable-window.is-temporarily-collapsed > .panel-heading {
    min-height: 2.55rem;
    box-sizing: border-box;
}

.character-dictionary-readable-window.is-temporarily-collapsed .character-dictionary-heading-copy > span {
    display: none;
}

@media (min-width: 1000px) {
    .workbench-page.word-dictionary-details-mode .workbench-grid > .word-dictionary-window {
        position: relative !important;
        inset: auto !important;
        z-index: 1 !important;
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: stretch;
        justify-self: stretch;
        width: 100% !important;
        height: 100% !important;
        min-height: 0;
        max-height: none;
        margin: 0 !important;
        transform: none !important;
    }

    .workbench-page.word-dictionary-details-with-character .workbench-grid > .word-dictionary-window {
        height: calc(100% - 2.8rem) !important;
        align-self: end;
    }

    .workbench-page.word-dictionary-details-mode .workbench-grid > .character-dictionary-readable-window.is-temporarily-collapsed {
        position: relative !important;
        inset: auto !important;
        z-index: 2 !important;
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: start;
        justify-self: stretch;
        width: 100% !important;
        height: 2.55rem !important;
        min-height: 2.55rem !important;
        max-height: 2.55rem !important;
        margin: 0 !important;
        transform: none !important;
        overflow: hidden !important;
    }
}