/**
 * \file
 * \brief Main stylesheet for the default theme.
 */

* {
    margin: 0;
    padding: 0;
}

.music-page,
.music-study-page {
    max-width: 1180px;
    margin: 0 auto 2.5rem;
}

.music-page-header,
.music-study-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.music-page-header h2,
.music-study-header h2 {
    margin: 0.2rem 0 0;
    color: var(--color-text-strong);
}

.music-study-header p,
.music-track-row p,
.music-empty p,
.music-player-note {
    color: var(--color-text-muted);
}

.music-kicker {
    display: inline-flex;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.music-btn,
.music-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.55rem 0.82rem;
    border: 1px solid var(--button-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--button-text);
    font-weight: 700;
    text-decoration: none;
}

.music-btn--primary {
    border-color: var(--button-primary-border);
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

.music-track-list,
.music-form,
.music-empty {
    display: grid;
    gap: 0.8rem;
}

.music-track-row,
.music-empty,
.music-form {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    padding: 1rem;
}

.music-track-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.music-track-row h3,
.music-track-row p {
    margin: 0;
}

.music-track-row h3 {
    margin-bottom: 0.25rem;
}

.music-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.music-search-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: end;
    padding: 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-muted);
}

.music-search-results {
    grid-column: 1 / -1;
    display: none;
    gap: 0.45rem;
}

.music-search-results.has-results {
    display: grid;
}

.music-search-result {
    width: 100%;
    padding: 0.62rem 0.72rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.music-embed-probe {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0.01;
    pointer-events: none;
}

.music-form label,
.music-lyrics-field {
    display: grid;
    gap: 0.35rem;
    color: var(--color-text-muted);
    font-weight: 800;
}

.music-form input,
.music-form select,
.music-form textarea {
    width: 100%;
    box-sizing: border-box;
}

.music-lyrics-field textarea {
    min-height: 26rem;
    line-height: 1.55;
}

.music-actions,
.music-study-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.music-study-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.music-player-panel,
.music-lyrics-panel,
.music-term-panel {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.music-player-panel,
.music-lyrics-panel {
    padding: 0.9rem;
}

.music-player-external-link {
    margin-top: 0.5rem;
}

.music-youtube-player {
    width: 100%;
    min-height: 260px;
    background: #111;
}

.music-embed-fallback {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.8rem;
    border: 1px solid var(--color-warning-border);
    border-radius: 8px;
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
}

.music-embed-fallback.hide {
    display: none;
}

.music-embed-fallback h3,
.music-embed-fallback p {
    margin: 0;
}

.music-lyrics-text {
    font-size: var(--reading-font-size, 1.24rem);
    line-height: 1.85;
}

@media screen and (max-width: 1100px) {
    .music-study-layout {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 720px) {
    .music-page-header,
    .music-study-header,
    .music-track-row,
    .music-actions {
        display: grid;
    }

    .music-form-grid {
        grid-template-columns: 1fr;
    }

    .music-search-box {
        grid-template-columns: 1fr;
    }
}

body {
    /* Semantic theme contract. Legacy aliases below keep existing CSS and user themes working. */
    /* Interface atmosphere */
    --interface-bg: #fcfaf4;
    --interface-surface: #fffdfa;
    --interface-surface-subtle: #faf7f0;
    --interface-surface-muted: #f1eadf;
    --interface-surface-hover: #f7f1e7;
    --interface-panel: #fffdfa;
    --interface-panel-muted: #f2ece2;
    --interface-border: #d8cdbc;
    --interface-border-muted: #e4dacb;
    --interface-border-strong: #c9baa6;
    --interface-text: #293d47;
    --interface-text-strong: #19313a;
    --interface-text-soft: #536872;
    --interface-text-muted: #697983;
    --interface-text-faint: #a6b0b2;
    --interface-text-inverse: #fffdf8;
    --interface-accent: #4f7587;
    --interface-accent-hover: #426779;
    --interface-accent-hover-light: #648b9b;
    --interface-accent-hover-dark: #3a5d6d;
    --interface-accent-soft: #edf2f1;
    --interface-accent-border: #86a9b2;
    --interface-accent-border-soft: #c8d8d7;
    --interface-accent-border-muted: #b8c8c9;

    /* Reading environment */
    --reading-environment-bg: var(--interface-bg);
    --reading-environment-text: var(--interface-text);
    --reading-environment-surface: var(--interface-surface);
    --reading-environment-surface-muted: var(--interface-panel-muted);
    --reading-environment-border: var(--interface-border);
    --reading-environment-border-muted: var(--interface-border-muted);
    --reading-environment-link: var(--interface-accent);
    --reading-environment-link-hover: #9f463b;
    --reading-environment-highlight: #fff7df;
    --reading-color-scheme: light;

    /* Highlight palette */
    --highlight-unknown: #d5e7ea;
    --highlight-difficult: #e3aa9d;
    --highlight-learning: #e7c27f;
    --highlight-familiarizing: #d8c879;
    --highlight-comfortable: #bdcd89;
    --highlight-known: #a9cfaa;
    --highlight-ignored: #e7ded6;
    --highlight-well-known: #67ad73;

    /* Chart palette */
    --chart-status-0: #6695a2;
    --chart-status-1: #bf7468;
    --chart-status-2: #bd9146;
    --chart-status-3: #aa9948;
    --chart-status-4: #84985c;
    --chart-status-5: #6a9d70;
    --chart-status-98: #ae8379;
    --chart-status-99: #4c8f58;
    --chart-status-separator: var(--interface-surface);
    --chart-series-1: #587f91;
    --chart-series-2: #6a956e;
    --chart-series-3: #a97f52;
    --chart-series-4: #85759d;
    --chart-series-5: #ad6962;
    --chart-series-6: #5d8d89;
    --chart-series-7: #9f884b;
    --chart-series-8: #717d85;

    /* Legacy compatibility aliases */
    --color-bg: var(--interface-bg);
    --color-surface: var(--interface-surface);
    --color-surface-subtle: var(--interface-surface-subtle);
    --color-surface-muted: var(--interface-surface-muted);
    --color-surface-hover: var(--interface-surface-hover);
    --color-panel: var(--interface-panel);
    --color-panel-muted: var(--interface-panel-muted);
    --color-border: var(--interface-border);
    --color-border-muted: var(--interface-border-muted);
    --color-border-strong: var(--interface-border-strong);
    --color-text: var(--interface-text);
    --color-text-strong: var(--interface-text-strong);
    --color-text-soft: var(--interface-text-soft);
    --color-text-muted: var(--interface-text-muted);
    --color-text-faint: var(--interface-text-faint);
    --color-text-inverse: var(--interface-text-inverse);

    --color-primary: var(--interface-accent);
    --color-primary-hover: var(--interface-accent-hover);
    --color-primary-hover-light: var(--interface-accent-hover-light);
    --color-primary-hover-dark: var(--interface-accent-hover-dark);
    --color-primary-soft: var(--interface-accent-soft);
    --color-primary-border: var(--interface-accent-border);
    --color-primary-border-soft: var(--interface-accent-border-soft);
    --color-primary-border-muted: var(--interface-accent-border-muted);
    --color-focus-border: var(--interface-accent-border);
    --color-focus-ring: rgba(88, 127, 145, 0.18);

    --color-success: #3f8f52;
    --color-success-soft: #eef8ef;
    --color-success-text: #2e653c;
    --color-warning: #a67f35;
    --color-warning-soft: #fff7df;
    --color-warning-border: #dfca93;
    --color-warning-text: #66552c;
    --color-danger: #a2483d;
    --color-danger-soft: #fff1ec;
    --color-danger-border: #d4a094;
    --color-danger-text: #81392f;
    --color-info: var(--interface-accent);
    --color-info-text: var(--color-text-inverse);
    --color-link: var(--reading-environment-link);
    --color-link-hover: var(--reading-environment-link-hover);
    --color-selection: var(--color-primary-soft);
    --color-highlight: var(--reading-environment-highlight);

    --shadow-soft: 0 6px 16px var(--shadow-soft-color, rgba(20, 38, 58, 0.09));
    --shadow-medium: 0 10px 22px var(--shadow-medium-color, rgba(20, 38, 58, 0.14));
    --shadow-panel: 0 16px 34px var(--shadow-panel-color, rgba(16, 41, 66, 0.07));

    --button-bg-end: #f0ebe3;
    --button-bg: linear-gradient(180deg, var(--color-surface) 0%, var(--button-bg-end) 100%);
    --button-bg-hover: linear-gradient(180deg, var(--color-surface) 0%, var(--button-bg-end) 100%);
    --button-border: #cec2b1;
    --button-text: #263b45;
    --button-primary-bg: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    --button-primary-bg-hover: linear-gradient(180deg, var(--color-primary-hover-light) 0%, var(--color-primary-hover-dark) 100%);
    --button-primary-border: var(--color-primary-border);
    --button-primary-text: var(--color-text-inverse);

    --input-bg: #fbf8f1;
    --input-bg-focus: var(--color-surface);
    --input-border: var(--color-border-strong);
    --input-placeholder: var(--color-text-faint);

    --card-bg: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-hover) 100%);
    --card-border: var(--color-border);
    --sticky-bar-bg: color-mix(in srgb, var(--color-surface) 92%, transparent);
    --sticky-bar-border: var(--color-border);
    --sticky-bar-shadow: 0 14px 32px var(--shadow-soft-color, rgba(16, 41, 66, 0.12));
    --hero-bg: radial-gradient(circle at top left, var(--hero-accent-color, rgba(118, 170, 224, 0.16)), transparent 34%),
        linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-muted) 100%);

    --audio-color-1: #6da9e9;
    --audio-color-2: #ff5252;
    --audio-color-3: var(--color-panel-muted);
    --audio-color-4: #79b7e7;
    --audio-color-5: #d6edff;
    --audio-border-color: #d7e6f4;
    --audio-marker-border-color: #89c2f9;
    --audio-control-bg: var(--color-surface-muted);
    --audio-control-bg-hover: var(--color-primary-soft);
    --audio-control-bg-active: var(--color-primary-soft);
    --audio-control-text: var(--color-text);
    --audio-control-text-active: var(--color-text-strong);
    --audio-chip-bg: var(--color-primary-soft);
    --audio-chip-text: var(--color-primary);
    --audio-speed-bg: var(--color-surface-muted);
    --audio-speed-border: var(--color-border-muted);
    --audio-speed-option-text: var(--color-text-muted);
    --audio-speed-option-hover-text: var(--color-text-strong);
    --audio-speed-option-active-bg: var(--color-surface);
    --audio-speed-option-active-text: var(--color-text-strong);
    --validation-ok-color: var(--color-success);
    --validation-error-color: var(--color-danger);
    --toggle-off-color: var(--color-text-muted);
    --toggle-on-color: var(--color-primary);

    --background-color: var(--color-bg);
    --font-color: var(--color-text);
    --menu-surface-color: var(--color-surface);
    --menu-text-color: var(--color-text);
    --menu-muted-text-color: #53616f;
    --menu-border-color: #cfd8e3;
    --menu-hover-color: #edf5fc;
    --logo-filter: none;
    --media-badge-bg: rgba(16, 35, 55, 0.72);
    --media-badge-text: #fff;
    --media-chip-bg: rgba(255, 255, 255, 0.94);
    --media-chip-text: #223447;
    --media-control-bg: rgba(255, 255, 255, 0.92);
    --media-control-bg-hover: rgba(248, 251, 255, 0.98);
    --media-control-text: #223447;
    --media-control-border: rgba(197, 188, 174, 0.95);
    --media-control-menu-bg: rgba(255, 255, 255, 0.98);
    --media-control-menu-text: #223447;

    --status-0-color: var(--highlight-unknown);
    --status-1-color: var(--highlight-difficult);
    --status-2-color: var(--highlight-learning);
    --status-3-color: var(--highlight-familiarizing);
    --status-4-color: var(--highlight-comfortable);
    --status-5-color: var(--highlight-known);

    --status-98-color: var(--highlight-ignored);
    --status-99-color: var(--highlight-well-known);
    --status-chart-0-color: var(--chart-status-0);
    --status-chart-1-color: var(--chart-status-1);
    --status-chart-2-color: var(--chart-status-2);
    --status-chart-3-color: var(--chart-status-3);
    --status-chart-4-color: var(--chart-status-4);
    --status-chart-5-color: var(--chart-status-5);
    --status-chart-98-color: var(--chart-status-98);
    --status-chart-99-color: var(--chart-status-99);
    --status-chart-separator-color: var(--chart-status-separator);

    --reading-bg: var(--reading-environment-bg);
    --reading-text: var(--reading-environment-text);
    --reading-surface: var(--reading-environment-surface);
    --reading-surface-muted: var(--reading-environment-surface-muted);
    --reading-border: var(--reading-environment-border);
    --reading-border-muted: var(--reading-environment-border-muted);
    --reading-link: var(--reading-environment-link);
    --reading-link-hover: var(--reading-environment-link-hover);
    --reading-highlight: var(--reading-environment-highlight);
    --reading-menu-bg: var(--reading-bg);
    --reading-menu-border: var(--color-primary-border-soft);
    --reading-menu-hover: var(--color-border-muted);
    --reading-menu-surface: var(--color-surface);
    --reading-menu-surface-muted: var(--color-surface-muted);
    --reading-menu-text: var(--color-text);
    --reading-menu-text-strong: var(--color-text-strong);
    --reading-menu-text-muted: var(--color-text-muted);
    --reading-menu-control-bg: var(--reading-control-bg);
    --reading-menu-control-hover: var(--reading-control-bg-hover);
    --reading-menu-control-border: var(--reading-control-border);
    --reading-menu-control-active-bg: var(--reading-control-active-bg);
    --reading-menu-control-active-border: var(--reading-control-active-border);
    --reading-menu-control-shadow: var(--reading-control-shadow);
    --reading-menu-width: min(23rem, calc(100vw - 2rem));
    --reading-right-pane-width: min(21rem, calc(100vw - 2.5rem));
    --reading-menu-edge-gap: 1.25rem;
    --reading-menu-radius: 0 18px 18px 0;
    --reading-menu-shadow: 8px 0 22px rgba(16, 41, 66, 0.10);
    --reading-right-pane-shadow: -8px 0 22px rgba(16, 41, 66, 0.10);
    --reading-bottom-pane-shadow: 0 -8px 22px rgba(16, 41, 66, 0.10);
    --reading-word-hover-border: var(--color-primary);
    --reading-word-marked-border: var(--color-danger);
    --reading-status-0-bg: var(--status-0-color);
    --reading-status-1-bg: var(--status-1-color);
    --reading-status-2-bg: var(--status-2-color);
    --reading-status-3-bg: var(--status-3-color);
    --reading-status-4-bg: var(--status-4-color);
    --reading-status-5-bg: var(--status-5-color);
    --reading-status-98-bg: var(--status-98-color);
    --reading-status-99-bg: var(--status-99-color);
    --reading-status-text: var(--reading-text);
    --reading-status-0-text: var(--reading-status-text);
    --reading-status-1-text: var(--reading-status-text);
    --reading-status-2-text: var(--reading-status-text);
    --reading-status-3-text: var(--reading-status-text);
    --reading-status-4-text: var(--reading-status-text);
    --reading-status-5-text: var(--reading-status-text);
    --reading-status-98-text: var(--reading-status-text);
    --reading-status-99-text: var(--reading-status-text);
    --reading-header-shadow: 0 10px 18px rgba(16, 41, 66, 0.08);
    --reading-header-radius: 0 0 14px 14px;
    --reading-popup-bg: var(--reading-surface);
    --reading-popup-text: var(--reading-text);
    --reading-popup-title: var(--color-text-strong);
    --reading-popup-muted: var(--color-text-muted);
    --reading-popup-border: var(--reading-border);
    --reading-popup-section-border: var(--reading-border-muted);
    --reading-popup-tag-bg: var(--reading-surface-muted);
    --reading-popup-tag-border: var(--reading-border-muted);
    --reading-popup-tag-text: var(--reading-text);
    --reading-popup-radius: 22px;
    --reading-popup-shadow: 0 28px 72px rgba(16, 41, 66, 0.10), 0 8px 24px rgba(16, 41, 66, 0.07);
    --reading-control-bg: var(--color-surface);
    --reading-control-bg-hover: var(--color-surface-hover);
    --reading-control-border: var(--color-border-strong);
    --reading-control-border-hover: var(--color-primary-border);
    --reading-control-text: var(--reading-text);
    --reading-control-muted: var(--color-text-muted);
    --reading-control-active-bg: var(--color-primary-soft);
    --reading-control-active-border: var(--color-primary-border);
    --reading-control-active-text: var(--color-text-strong);
    --reading-control-shadow: 0 2px 6px rgba(42, 77, 112, 0.12);
    --reading-control-icon: var(--reading-control-text);
    --reading-control-icon-filter: none;
    --read-slider-track-bg: var(--color-border-muted);
    --read-slider-track-border: var(--color-border-strong);
    --read-slider-fill-start: var(--color-primary);
    --read-slider-color: var(--color-primary-hover-light);
    --read-slider-thumb-bg: var(--read-slider-color);
    --read-slider-thumb-border: var(--color-surface);
    --read-slider-thumb-shadow: 0 3px 10px rgba(31, 89, 135, 0.24), 0 0 0 1px rgba(59, 121, 170, 0.28);
    --read-slider-disabled-bg: var(--color-surface-muted);
    --read-slider-disabled-fill: var(--color-border-strong);
    --read-slider-disabled-thumb: var(--color-border-strong);

    --form-border-color: var(--color-border);
    --form-border-radius: 3px;

    background-color: var(--background-color);
    color: var(--font-color);

    font: 100%/1.25 "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Caecilia LT Pro", "KaiTi", sans-serif;
}

/* Main container div for Lute site content. */
.container {
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Caecilia LT Pro", "KaiTi", sans-serif;
}

.dev-environment-banner {
    background-color: var(--color-info);
    color: var(--color-info-text);
    margin: 2px;
    padding: 2px;
}

 .lutelogo_small
 {
     margin-right: 2px;
     float: left;
     width: 68px;
     height: auto;
 }

.header {
    display: flex;
    align-items: center; /* Vertically center the items */
}

a.home-link {
    text-decoration: none;
    color: var(--menu-text-color) !important;
}

a.home-link:hover {
    text-decoration: none !important; /* Remove underline on hover */
}

.lutelogo {
    width: auto; /* Reset the width to auto */
    height: 4.1em; /* Give the square logo visual weight closer to the old wide mark. */
    margin-right: 10px;
}

.lutelogo,
.lutelogo_small {
    filter: var(--logo-filter);
}

.title-container {
    flex: 1; /* Allow the title to take up remaining space */
}

p.version {
    margin: 0px;
    font-size: 0.6em;
    font-style: italic;
}

/* Style for the menu bar */

.menu-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.7rem 0;
}

.title {
    font-size: 18px;
    font-weight: bold;
}

.menu {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
    font-family: "Inter", "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 0.92rem;
    line-height: 1.2;
}

.menu-item {
    position: relative; /* Required for sub-menu positioning */
}

/* main menu item text (not links) */
.menu-item > span {
    text-decoration: none;
    display: block;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--menu-text-color) !important;
    padding: 0.25rem 0;
}

.menu-item > a:hover {
    text-decoration: none;
}

.menu-account-item {
    margin-left: 0.3rem;
}

.menu-account-item > .menu-account-avatar {
    text-transform: none;
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    box-sizing: border-box;
    border: 1px solid var(--reading-control-border);
    border-radius: 50%;
    background: var(--reading-control-bg);
    color: var(--menu-text-color) !important;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    padding: 0;
    overflow: hidden;
}

.account-sub-menu {
    min-width: 17rem;
}

.sub-menu .menu-account-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.7rem;
    white-space: normal;
}

.menu-account-summary-avatar,
.account-header-avatar {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid var(--reading-control-border);
    border-radius: 50%;
    background: var(--reading-control-bg);
    color: var(--menu-text-color);
    font-weight: 800;
    line-height: 1;
    overflow: hidden;
}

.menu-account-avatar img,
.menu-account-summary-avatar img,
.account-header-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.menu-account-summary-avatar {
    width: 2.3rem;
    height: 2.3rem;
    font-size: 0.72rem;
}

.menu-account-summary-text {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.menu-account-summary-text strong,
.menu-account-summary-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-account-summary-text strong {
    color: var(--menu-text-color);
    font-size: 0.88rem;
}

.menu-account-summary-text small {
    color: var(--menu-muted-text-color);
    font-size: 0.76rem;
}

.sub-menu .account-menu-section-label {
    padding: 0.6rem 0.62rem 0.18rem;
    color: var(--menu-muted-text-color);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.sub-menu .account-font-row {
    display: grid;
    gap: 0.5rem;
    padding: 0.5rem 0.62rem 0.65rem;
    white-space: normal;
}

.account-font-row-label {
    color: var(--menu-text-color);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.25;
}

.account-font-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.sub-menu {
    display: none;
    position: absolute;
    list-style-type: none;
    margin: 0;
    min-width: 11rem;
    padding: 0.35rem;
    background-color: var(--menu-surface-color);
    color: var(--menu-text-color);
    box-shadow: 0 10px 24px rgba(20, 38, 58, 0.12), 0 2px 6px rgba(20, 38, 58, 0.08);
    z-index: 1000;
    border: 1px solid var(--menu-border-color);
    border-radius: 14px;
}

.last-sub-menu {
    right: 0; /* Align the right edge of the sub-menu with the right edge of its container */
}

.sub-menu li {
    margin: 0;
    padding: 0.28rem 0.62rem;
    white-space: nowrap;
    color: var(--menu-muted-text-color);
    font-size: 0.8rem;
    line-height: 1.35;
}

.sub-menu a,
.sub-menu a:link,
.sub-menu a:visited {
    display: block;
    margin: -0.28rem -0.62rem;
    border-radius: 14px;
    padding: 0.48rem 0.62rem;
    color: var(--menu-text-color);
    text-decoration: none;
}

.sub-menu a:hover,
.sub-menu a:focus,
.sub-menu a:active {
    background-color: var(--menu-hover-color);
    color: var(--menu-text-color);
    text-decoration: none;
}

.sub-menu hr {
    margin: 0.35rem 0;
    border: 0;
    border-top: 1px solid var(--menu-border-color);
}

.menu-item:hover .sub-menu {
    display: block;
}

/* end menu bar. */

/* Authentication screens */

.auth-page {
    min-height: calc(100vh - 2rem);
    display: grid;
    place-items: center;
    padding: clamp(1.75rem, 6vh, 4rem) 1.25rem;
}

.auth-panel {
    width: min(100%, 26rem);
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 16px 36px rgba(20, 38, 58, 0.06);
    padding: 2rem;
}

.auth-login-panel {
    width: min(100%, 23.25rem);
    padding: 1.72rem;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.auth-brand img {
    width: 3.2rem;
    height: auto;
}

.auth-brand span {
    font-family: "Inter", "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 2.1rem;
    line-height: 1;
    font-weight: 800;
    color: var(--color-text-strong);
}

.auth-login-panel .auth-brand {
    margin-bottom: 1.22rem;
}

.auth-login-panel .auth-brand img {
    width: 2.72rem;
}

.auth-login-panel .auth-brand span {
    font-size: 1.92rem;
    font-weight: 820;
}

.auth-copy {
    margin-bottom: 1.5rem;
}

.auth-login-panel .auth-copy {
    margin-bottom: 1.12rem;
}

.auth-copy h2 {
    margin: 0 0 0.45rem;
    font-family: "Inter", "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 1.75rem;
    line-height: 1.15;
    color: var(--color-text-strong);
}

.auth-login-panel .auth-copy h2 {
    font-size: 1.48rem;
    font-weight: 780;
}

.auth-copy p,
.auth-provider-message p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 0.95rem;
    line-height: 1.42;
}

.auth-language-form {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.auth-language-form label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.auth-language-row {
    display: flex;
    min-width: 0;
}

.auth-language-row select {
    min-height: 1.6rem;
    box-sizing: border-box;
    border-radius: 7px;
    font: inherit;
    width: auto;
    max-width: 12rem;
    min-width: 0;
    border: 1px solid transparent;
    background: transparent;
    color: color-mix(in srgb, var(--color-text-muted) 82%, transparent);
    padding: 0.05rem 0.15rem;
    font-size: 0.72rem;
    font-weight: 540;
    text-align: center;
}

.auth-language-row select:focus {
    outline: none;
    border-color: var(--color-focus-border);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.auth-provider-list {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0.72rem;
}

.auth-recent-account {
    display: grid;
    margin-bottom: 0.62rem;
}

.auth-recent-account-button {
    min-height: 2.62rem;
    border-color: transparent;
    background: color-mix(in srgb, var(--button-primary-bg) 10%, var(--color-surface));
    color: var(--color-text-strong);
    padding: 0.52rem 0.86rem;
}

.auth-recent-account-button:hover,
.auth-recent-account-button:focus {
    border-color: color-mix(in srgb, var(--button-primary-border) 22%, transparent);
    background: color-mix(in srgb, var(--button-primary-bg) 14%, var(--color-surface));
}

.auth-recent-account-text {
    min-width: 0;
    line-height: 1.15;
}

.auth-recent-account-text strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-provider-button,
.auth-provider-button:link,
.auth-provider-button:visited {
    min-height: 2.48rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--input-border) 82%, transparent);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-strong);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 720;
    padding: 0 0.78rem;
    text-decoration: none;
}

.auth-provider-button-subtle,
.auth-provider-button-subtle:link,
.auth-provider-button-subtle:visited {
    min-height: 1.35rem;
    border-color: transparent;
    background: transparent;
    color: color-mix(in srgb, var(--color-text-muted) 86%, transparent);
    font-size: 0.75rem;
    font-weight: 560;
    padding: 0;
}

.auth-provider-button:hover,
.auth-provider-button:focus {
    border-color: var(--color-focus-border);
    background: var(--color-surface-hover);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
    text-decoration: none;
}

.auth-provider-button-subtle:hover,
.auth-provider-button-subtle:focus {
    border-color: transparent;
    background: transparent;
    color: var(--color-text-strong);
    box-shadow: none;
    text-decoration: underline;
}

.auth-provider-mark {
    width: 1.1rem;
    height: 1.1rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #fff;
    color: #1f1f1f;
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1;
}

.auth-provider-mark-google {
    border: 0;
    background: transparent;
}

.auth-provider-mark-google img {
    display: block;
    width: 1.02rem;
    height: 1.02rem;
}

.auth-divider {
    display: block;
    margin: 0.04rem 0 0.44rem;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 560;
    text-align: center;
}

.auth-divider::before,
.auth-divider::after {
    content: none;
}

.auth-config-hint {
    display: grid;
    gap: 0.45rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: var(--color-surface-muted);
    padding: 0.8rem 0.9rem;
    margin-top: 0.9rem;
}

.auth-config-hint p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.auth-form {
    display: grid;
    gap: 0;
}

.auth-form label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.auth-email-row {
    display: grid;
    gap: 0.5rem;
}

.auth-form input[type="email"] {
    width: 100%;
    min-height: 2.5rem;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--input-border) 72%, var(--color-text-soft));
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface) 92%, var(--input-bg-focus));
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
    padding: 0.56rem 0.72rem;
}

.auth-form input[type="email"]::placeholder {
    color: var(--color-text-soft);
    opacity: 0.82;
}

.auth-form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-focus-border);
    background: var(--color-surface);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.auth-primary-button {
    min-height: 2.5rem;
    border: 1px solid var(--button-primary-border);
    border-radius: 8px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 740;
    cursor: pointer;
    margin-top: 0;
    padding: 0 0.9rem;
}

.auth-primary-button:hover,
.auth-primary-button:focus {
    background: var(--button-primary-bg-hover);
}

.auth-dev-link {
    display: grid;
    gap: 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-muted);
    padding: 0.85rem;
}

.auth-dev-link span {
    color: var(--color-text-strong);
    font-size: 0.88rem;
    font-weight: 800;
}

.auth-dev-link a {
    overflow-wrap: anywhere;
    color: var(--color-link);
    font-size: 0.9rem;
    line-height: 1.4;
}

.account-page {
    display: grid;
    gap: 1.2rem;
    max-width: 46rem;
    margin: 2.5rem 0 0;
}

.account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.account-header h2 {
    margin: 0 0 0.35rem;
    font-size: 1.8rem;
    color: var(--color-text-strong);
}

.account-header p,
.account-card-header p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.account-header-avatar {
    width: 3.4rem;
    height: 3.4rem;
    flex: 0 0 auto;
    font-size: 1rem;
}

.account-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: var(--shadow-panel);
    padding: 1.25rem;
}

.account-card-header {
    margin-bottom: 1.2rem;
}

.account-card-header h3 {
    margin: 0 0 0.35rem;
    color: var(--color-text-strong);
    font-size: 1.05rem;
}

.account-form {
    display: grid;
    gap: 0.75rem;
    max-width: 28rem;
}

.account-form label {
    color: var(--color-text-strong);
    font-weight: 750;
    font-size: 0.9rem;
}

.account-form input {
    min-height: 2.75rem;
    box-sizing: border-box;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--color-text);
    font: inherit;
    padding: 0.65rem 0.8rem;
}

.account-form input:focus {
    outline: none;
    border-color: var(--color-focus-border);
    background: var(--input-bg-focus);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.account-form input[readonly] {
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
}

.account-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: var(--color-surface-muted);
    padding: 0.7rem 0.8rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.account-meta strong {
    color: var(--color-text-strong);
}

.account-primary-button {
    justify-self: start;
    min-height: 2.75rem;
    border: 1px solid var(--button-primary-border);
    border-radius: 8px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    padding: 0 1.1rem;
    margin-top: 0.35rem;
}

.account-primary-button:hover,
.account-primary-button:focus {
    background: var(--button-primary-bg-hover);
}

@media (max-width: 640px) {
    .auth-page {
        align-items: start;
        padding-top: 2rem;
    }

    .auth-panel {
        padding: 1.35rem;
    }

    .auth-brand span {
        font-size: 1.8rem;
    }

    .auth-login-panel {
        padding: 1.25rem;
    }

    .auth-login-panel .auth-brand span {
        font-size: 1.62rem;
    }

    .auth-language-form {
        justify-content: center;
        gap: 0.35rem;
    }

    .auth-language-row select {
        width: auto;
        max-width: 9.5rem;
    }
}

/* Book listing */

div#divbooktable {
    width: 70% !important;
    display: table;
    margin-right: auto;
    margin-left: auto;
}

div.dt-search {
    /* Change to inline so that it's shown on the same line as the #defaultLanguageSelect. */
    display: inline;
}

#datatables_config_widget {
    display: inline;
    cursor: pointer;
    margin-right: 0.25rem;
}

div#booktable_wrapper div.dt-info {
    display: inline;
}

.terms-page {
    display: grid;
    gap: 1.2rem;
    padding-bottom: 2rem;
}

.terms-page-card {
    background: var(--color-surface);
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 24px;
    box-shadow: none;
}

.terms-page-toolbar {
    display: flex;
    justify-content: flex-end;
}

.terms-page-card {
    padding: 1.2rem 1.25rem 1.25rem;
}

.terms-page-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.terms-page-card-header h3 {
    margin: 0;
    color: var(--button-text);
    line-height: 1.2;
}

.terms-page .terms-filter-toggle,
.terms-page .terms-filter-actions button,
.terms-page .term-action-button {
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--button-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform 130ms ease, box-shadow 130ms ease, background-color 130ms ease;
}

.terms-page .terms-filter-toggle:hover,
.terms-page .terms-filter-actions button:hover,
.terms-page .term-action-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20, 38, 58, 0.10);
    background: var(--color-surface-hover);
}

.terms-page .terms-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
}

.terms-page .terms-filter-toggle-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    border: 1px solid #a9c7e3;
    background: var(--color-primary-soft);
}

.terms-page .terms-filter-toggle-icon::before,
.terms-page .terms-filter-toggle-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 1.5px;
    background: #3d5d7d;
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.terms-page .terms-filter-toggle-icon::after {
    width: 1.5px;
    height: 8px;
}

.terms-page .terms-filter-toggle-icon.is-open::after {
    display: none;
}

.terms-page .terms-filter-panel {
    padding-top: 0.45rem;
}

.terms-page .terms-filter-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    align-items: end;
}

.terms-page .terms-filter-tile {
    display: flex;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.terms-page .terms-filter-tile--context {
    grid-column: 1 / -1;
}

.terms-page .terms-filter-tile--language {
    grid-column: span 3;
}

.terms-page .terms-filter-tile--toggle {
    grid-column: span 2;
}

.terms-page .terms-filter-tile--age {
    grid-column: span 2;
}

.terms-page .terms-filter-tile--status {
    grid-column: span 3;
}

.terms-page .terms-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    color: #34495e;
}

.terms-page .terms-filter-field > span {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--button-text);
}

.terms-page .terms-filter-field--toggle {
    justify-content: center;
    min-height: 44px;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 16px;
    background: var(--color-surface-subtle);
    gap: 0.7rem;
    cursor: pointer;
}

.terms-page .terms-filter-field--toggle > span:first-child {
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
}

.terms-page .terms-filter-togglebox {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
}

.terms-page .terms-filter-field--toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.terms-page .terms-filter-checkbox-ui {
    position: relative;
    width: 50px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--color-primary-border-soft);
    background: var(--color-primary-soft);
    box-shadow: inset 0 1px 2px rgba(50, 69, 89, 0.08);
    transition: background 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}

.terms-page .terms-filter-checkbox-ui::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 2px 6px rgba(36, 57, 82, 0.18);
    transition: transform 130ms ease;
}

.terms-page .terms-filter-field--toggle input:checked + .terms-filter-checkbox-ui {
    border-color: var(--button-primary-border);
    background: #dcecff;
}

.terms-page .terms-filter-field--toggle input:checked + .terms-filter-checkbox-ui::after {
    transform: translateX(20px);
}

.terms-page .terms-filter-field--toggle input:focus-visible + .terms-filter-checkbox-ui {
    box-shadow: 0 0 0 4px rgba(126, 174, 226, 0.16);
}

.terms-page .terms-filter-inline {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.terms-page .terms-filter-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
    min-width: 0;
    border: 1px solid var(--color-border-muted);
    border-radius: 16px;
    background: var(--color-surface-subtle);
    overflow: hidden;
}

.terms-page .terms-filter-subfield {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.75rem 0.8rem 0.8rem;
}

.terms-page .terms-filter-subfield + .terms-filter-subfield {
    border-left: 1px solid var(--color-border-muted);
}

.terms-page .terms-filter-subfield-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6a7f95;
}

.terms-page .terms-filter-control:not(select) {
    width: 100%;
    min-height: 42px;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--input-border);
    border-radius: 14px;
    background: var(--color-surface);
    color: var(--button-text);
    font: inherit;
    line-height: 1.25;
    box-shadow: none;
    transition: border-color 130ms ease, box-shadow 130ms ease, background-color 130ms ease;
}

.terms-page select.terms-filter-control,
table#termtable .term-status-select {
    --lute-select-min-height: 42px;
    --lute-select-padding: 0.55rem 2.4rem 0.55rem 0.8rem;
    --lute-select-radius: 14px;
    background-color: var(--color-surface);
    box-shadow: none;
}

.terms-page .terms-filter-control:not(select):focus {
    border-color: var(--color-focus-border);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    outline: none;
}

.terms-page .terms-filter-control::placeholder {
    color: #9baabd;
    opacity: 1;
}

.terms-page .terms-filter-control[type="text"] {
    min-width: 0;
}

.terms-page .terms-filter-control select,
.terms-page .terms-filter-control option {
    font: inherit;
}

.terms-page .terms-filter-input-small {
    width: 100%;
}

.terms-page .terms-filter-field--context {
    gap: 0.55rem;
}

.terms-page .terms-filter-context {
    padding: 0.85rem 1rem;
    border: 1px dashed var(--color-primary-border-soft);
    border-radius: 16px;
    background: var(--color-surface-subtle);
    color: #526477;
}

.terms-page .terms-filter-context-copy {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.terms-page .terms-filter-context-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 32px;
    padding: 0.35rem 0.8rem;
    border: 1px solid #bfd5ea;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--button-text);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terms-page .terms-filter-context-tag.hide {
    display: none;
}

.terms-page .terms-filter-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.9rem;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.terms-page .terms-filter-actions button {
    padding: 0.68rem 1rem;
}

.term-status-modal.hide {
    display: none;
}

.term-status-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
}

.term-status-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 44, 64, 0.34);
    backdrop-filter: blur(3px);
}

.term-status-modal-dialog {
    position: relative;
    width: min(880px, calc(100vw - 2rem));
    margin: 6vh auto 0;
    padding: 1.3rem 1.35rem 1.2rem;
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 24px;
    background: var(--color-surface);
    box-shadow: 0 24px 64px rgba(22, 40, 60, 0.18);
}

.term-status-modal-close {
    position: absolute;
    top: 0.7rem;
    right: 0.8rem;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 999px;
    background: var(--color-surface);
    color: #48647f;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.term-status-modal-head {
    padding-right: 2.8rem;
}

.term-status-modal-kicker {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6a7f95;
}

.term-status-modal-head h3 {
    margin: 0.3rem 0 0;
    color: var(--button-text);
}

.term-status-modal-summary {
    margin: 0.45rem 0 0;
    color: #5b738b;
}

.term-status-modal-body {
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: 1.2rem;
    align-items: center;
    margin-top: 1.2rem;
}

.term-status-modal-body.is-loading {
    grid-template-columns: minmax(260px, 0.95fr) minmax(260px, 1.05fr);
    gap: clamp(1rem, 3vw, 2rem);
}

.term-status-modal-chart-shell {
    position: relative;
    aspect-ratio: 1;
    min-height: 260px;
    padding: 0.6rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 22px;
    background: var(--color-surface-subtle);
}

.term-status-modal-chart-shell.is-loading {
    border-color: color-mix(in srgb, var(--color-primary-border-soft) 70%, transparent);
    background:
        radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--color-primary-soft) 46%, transparent) 0%, transparent 64%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 94%, transparent) 0%, var(--color-surface-subtle) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-surface) 84%, transparent);
}

.term-status-modal-chart-shell canvas.is-loading {
    opacity: 0;
}

.term-status-modal-chart-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(0.8rem, 3vw, 1.6rem);
}

.term-status-modal-chart-loading img {
    width: min(90%, 20rem);
    height: auto;
    filter: drop-shadow(0 18px 28px var(--shadow-soft-color, rgba(16, 41, 66, 0.14)));
}

.term-status-modal-legend {
    display: grid;
    gap: 0.7rem;
}

.term-status-modal-legend-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 16px;
    background: var(--color-surface-subtle);
    text-align: left;
    cursor: pointer;
    transition: transform 130ms ease, box-shadow 130ms ease, border-color 130ms ease, background-color 130ms ease;
}

.term-status-modal-legend-row:hover,
.term-status-modal-legend-row:focus-visible {
    transform: translateY(-1px);
    border-color: #b9d1ea;
    background: var(--color-surface-hover);
    box-shadow: 0 8px 20px rgba(20, 38, 58, 0.08);
    outline: none;
}

.term-status-modal-swatch {
    width: 12px;
    height: 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-surface-subtle);
}

.term-status-modal-legend-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.14rem;
}

.term-status-modal-legend-copy strong {
    color: var(--button-text);
}

.term-status-modal-legend-copy span,
.term-status-modal-legend-percent {
    color: #6a7f95;
}

.term-status-modal-empty {
    padding: 1rem;
    border: 1px dashed var(--color-primary-border-soft);
    border-radius: 16px;
    background: var(--color-surface-subtle);
    color: #60778f;
}

.term-status-modal-loading-card {
    display: grid;
    align-self: center;
    max-width: 30rem;
    gap: 0.9rem;
    justify-items: start;
    padding: 0.2rem 0 0.2rem 1.15rem;
    border-left: 3px solid var(--color-primary);
}

.term-status-modal-loading-copy {
    display: grid;
    gap: 0.28rem;
}

.term-status-modal-loading-copy strong {
    color: var(--color-text-strong);
    font-size: clamp(1.05rem, 1.8vw, 1.24rem);
    line-height: 1.2;
}

.term-status-modal-loading-copy span {
    color: var(--color-text-muted);
    font-size: 0.98rem;
    line-height: 1.35;
}

.term-status-modal-loading-dots {
    display: inline-flex;
    gap: 0.32rem;
    align-items: center;
}

.term-status-modal-loading-dots span {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: var(--color-primary);
    animation: term-status-loading-pulse 1s ease-in-out infinite;
}

.term-status-modal-loading-dots span:nth-child(2) {
    animation-delay: 0.14s;
}

.term-status-modal-loading-dots span:nth-child(3) {
    animation-delay: 0.28s;
}

@keyframes term-status-loading-pulse {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-0.18rem);
    }
}

#defaultLanguageSelect {
    text-align: left;
    padding: 4px;  /* copied padding from datatables css. */
    margin-right: 10px;
}

div.toolbar {
    float: right;
    margin-right: 1rem;
}

/* blank space to hang completed_book bullets while maintaining proper justification on the whole column */
a.book-title:before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
/* flex fixes wrapping issue */
.book-title {
    display: inline-flex;
    gap: 0.5rem;
    align-items: flex-start;
}

/* show a check mark for completed books */
a.completed_book:before {
    content: url('/static/icn/tick.png');
}

/**
  *  when the books list contains NO completed books, get rid of the awkward indent
  */
table#booktable:not(:has(a.completed_book)) a.book-title:before {
    display: none;
}

.refresh {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("../icn/reload.png");
    background-size: 80%;
    border-radius: 14px;
    background-repeat: no-repeat;
    background-position: center;

    vertical-align: middle;
    margin-left: 0.5rem;
}

.refresh:hover {
    background-color: #dadada;
}

.refresh:active {
    background-color: #9f9f9f;
}

.refreshed {
    background-image: url("../icn/waiting2.gif");
    background-repeat: no-repeat;
}

.book-action-dropdown {
    position: relative;
    display: inline-block;
}

.book-action-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 14px;
    padding: 5px;
}

.book-action-dropdown-content a {
    color: black;
    padding: 5px 10px;
    text-decoration: none;
    display: block;
}

.book-action-dropdown-content a:hover {
    background-color: #f0f0f0;
}

.book-action-dropdown:hover .book-action-dropdown-content {
    display: block;
}

/* End book listing */

/* Home cards */
.book-cards-home {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 2.5rem;
}

.book-cards-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin: 0.4rem 0 1rem 0;
}

.book-cards-title {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1;
}

.book-cards-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.book-cards-language-picker {
    position: relative;
}

.book-cards-language-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 999px;
    background: #f4f6fa;
    color: #13253a;
    padding: 0.2rem 0.52rem 0.2rem 0.28rem;
    min-height: 2.55rem;
    cursor: pointer;
}

.book-cards-language-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.book-cards-language-flag-img,
.book-cards-language-fallback {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.book-cards-language-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dce6f3;
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 700;
}

.book-cards-language-known {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.book-cards-language-chevron {
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-text-strong);
    border-bottom: 2px solid var(--color-text-strong);
    transform: rotate(45deg) translateY(-2px);
    margin-right: 0.2rem;
}

.book-cards-language-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 280px;
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: 0 10px 28px rgba(22, 39, 57, 0.16);
    z-index: 1300;
    padding: 0.3rem 0;
}

.book-cards-language-item {
    width: calc(100% - 0.6rem);
    margin: 0.12rem 0.3rem;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: #13253a;
    padding: 0.5rem 0.65rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    outline: none;
}

.book-cards-language-item:hover {
    background: var(--color-primary-soft);
}

.book-cards-language-item:focus-visible {
    box-shadow: inset 0 0 0 2px #9ec8ed;
}

.book-cards-language-item-left {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.book-cards-language-item-right {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.book-cards-language-item-known {
    color: #354a5f;
    font-weight: 700;
}

.book-cards-language-row-action {
    width: 26px;
    height: 26px;
    border: 1px solid #bfd5ea;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-hover);
    color: #2b4863;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.94);
    transition: opacity 120ms ease, transform 120ms ease;
}

.book-cards-language-item.show-row-action .book-cards-language-row-action {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

@media (hover: none) {
    .book-cards-language-row-action {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
    }
}

.book-cards-language-row-action:hover {
    background: #e8f0f9;
}

.book-cards-language-action-icon {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.book-cards-language-section-title {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: #63758a;
    padding: 0.3rem 0.75rem 0.2rem 0.75rem;
}

.book-cards-language-divider {
    border-top: 1px solid #e2ebf5;
    margin: 0.35rem 0.55rem 0.15rem 0.55rem;
}

.book-cards-language-empty {
    padding: 0.45rem 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.book-cards-language-add {
    display: block;
    margin: 0.25rem 0.4rem 0 0.4rem;
    border-top: 1px solid #e2ebf5;
    padding: 0.55rem 0.35rem 0.25rem 0.35rem;
    text-decoration: none;
}

.book-cards-select,
.book-cards-search {
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 14px;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.35rem 0.5rem;
    font-size: 0.95rem;
}

.book-cards-search {
    width: 13rem;
}

.book-cards-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    border: 1px solid #b8c9da;
    border-radius: 14px;
    color: var(--color-text-strong);
    background: var(--color-surface-subtle);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    font-weight: 650;
    padding: 0.52rem 0.8rem;
    box-shadow: 0 1px 2px rgba(18, 46, 74, 0.06);
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.book-cards-cta:hover {
    border-color: var(--color-border-strong);
    background: var(--color-primary-soft);
    color: var(--color-text-strong);
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(18, 46, 74, 0.11);
    transform: translateY(-1px);
}

.book-cards-cta:link,
.book-cards-cta:visited,
.book-folder-add-link:link,
.book-folder-add-link:visited {
    color: var(--color-text-strong);
}

.book-cards-cta:focus,
.book-cards-cta:active,
.book-folder-add-link:focus,
.book-folder-add-link:active {
    color: var(--color-text-strong);
}

.book-cards-secondary-btn,
.book-cards-folder-submit,
.book-cards-folder-cancel {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.35rem 0.6rem;
    cursor: pointer;
}

.book-cards-folder-composer {
    margin: 0 0 0.9rem 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.book-cards-folder-input {
    min-width: 220px;
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 14px;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.42rem 0.55rem;
    font-size: 0.95rem;
}

.book-cards-folder-notice {
    margin: 0 0 0.9rem 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-success);
    border-radius: 14px;
    background: var(--color-success-soft);
    color: var(--color-success-text);
}

.book-cards-folder-notice.book-cards-folder-notice-error {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
}

.book-cards-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
    padding: 0.68rem 0.75rem;
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 14px;
    background: var(--color-primary-soft);
}

.book-cards-selection-count {
    color: var(--color-text-strong);
    font-size: 0.88rem;
    font-weight: 750;
}

.book-cards-selection-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.book-cards-selection-btn {
    min-height: 2rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-text-strong);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.book-cards-selection-btn {
    padding: 0.42rem 0.68rem;
}

.book-cards-selection-btn:hover,
.book-cards-selection-btn:focus-visible {
    background: var(--color-surface-hover);
    border-color: var(--color-primary-border);
    outline: none;
}

.book-cards-selection-btn.is-destructive {
    color: var(--color-danger-text);
}

.book-cards-selection-btn.is-destructive:hover,
.book-cards-selection-btn.is-destructive:focus-visible {
    background: var(--color-danger-soft);
    border-color: var(--color-danger-border);
}

.book-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.book-folder-section {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-muted) 100%);
    padding: 0.8rem;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease, opacity 120ms ease;
}

.book-folder-section.drag-over {
    border-color: var(--color-primary);
    background:
        linear-gradient(180deg, rgba(235, 246, 255, 0.94) 0%, rgba(247, 251, 255, 0.98) 100%);
    box-shadow: inset 0 0 0 2px rgba(111, 174, 229, 0.2);
}

.book-folder-section.is-folder-dragging {
    opacity: 0.38;
    box-shadow: inset 0 0 0 2px var(--color-primary-border-soft);
}

.book-folder-section.folder-drag-over-before,
.book-folder-section.folder-drag-over-after {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(111, 174, 229, 0.14);
}

.book-folder-section.folder-drag-over-before::before,
.book-folder-section.folder-drag-over-after::after {
    content: "";
    display: block;
    height: 3px;
    border-radius: 999px;
    background: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.book-folder-section.folder-drag-over-before::before {
    margin: -0.5rem 0 0.7rem;
}

.book-folder-section.folder-drag-over-after::after {
    margin: 0.7rem 0 -0.5rem;
}

.book-folder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.7rem;
}

.book-folder-header[draggable="true"] {
    cursor: grab;
}

.book-folder-header[draggable="true"]:active {
    cursor: grabbing;
}

.book-folder-drag-preview {
    opacity: 0.96;
    background: var(--color-surface);
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 14px;
    padding: 0.72rem 0.85rem;
    box-shadow: 0 20px 44px rgba(14, 38, 62, 0.22), 0 4px 12px rgba(14, 38, 62, 0.12);
    z-index: 3000;
    will-change: transform;
}

.book-folder-actions {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    justify-content: flex-end;
}

.book-folder-actions-shell {
    position: relative;
    display: inline-flex;
}

.book-folder-actions-trigger {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 0.16rem;
    font: inherit;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(18, 46, 74, 0.05);
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.book-folder-actions-trigger:hover,
.book-folder-actions-trigger:focus-visible,
.book-folder-actions-trigger.is-open {
    background: var(--color-surface-hover);
    border-color: var(--color-primary-border);
    box-shadow: 0 5px 14px rgba(18, 46, 74, 0.1);
    outline: none;
}

.book-folder-actions-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 11.5rem;
    padding: 0.35rem;
    border: 1px solid var(--media-control-border);
    border-radius: 12px;
    background: var(--media-control-menu-bg);
    box-shadow: 0 16px 36px rgba(14, 38, 62, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    z-index: 35;
}

.book-folder-action-item {
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--media-control-menu-text);
    text-align: left;
    text-decoration: none;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 0.56rem 0.7rem;
    cursor: pointer;
}

.book-folder-action-item:hover,
.book-folder-action-item:focus-visible {
    background: var(--color-primary-soft);
    color: var(--media-control-menu-text);
    text-decoration: none;
    outline: none;
}

.book-folder-action-item.is-destructive {
    color: var(--color-danger-text);
}

.book-folder-action-item.is-destructive:hover,
.book-folder-action-item.is-destructive:focus-visible {
    background: var(--color-danger-soft);
}

.book-folder-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.book-folder-toggle {
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.book-folder-toggle:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border);
}

.book-folder-toggle-arrow {
    width: 0.48rem;
    height: 0.48rem;
    display: block;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    margin: 0;
    transform-origin: 50% 50%;
}

.book-folder-section.is-collapsed .book-folder-toggle-arrow {
    transform: rotate(-45deg);
    margin: 0;
}

.book-folder-icon {
    color: var(--color-primary);
    font-size: 0.9rem;
}

.book-folder-title {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text-strong);
}

.book-folder-count {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.book-folder-add-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.38rem 0.72rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface-subtle);
    color: var(--color-text-strong);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(18, 46, 74, 0.05);
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.book-folder-add-link:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-primary-border);
    color: var(--color-text-strong);
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(18, 46, 74, 0.1);
    transform: translateY(-1px);
}

.book-folder-dropzone {
    min-height: 72px;
    overflow: hidden;
    opacity: 1;
    height: auto;
    transition:
        height 380ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 280ms ease;
}

.book-folder-section:not(.is-collapsed) .book-folder-dropzone {
    overflow: visible;
}

.book-folder-section.is-collapsed .book-folder-dropzone {
    min-height: 0;
    opacity: 0;
    pointer-events: none;
}

.book-folder-section.is-collapsed .book-folder-header {
    margin-bottom: 0;
}

.book-folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

.book-folder-empty {
    min-height: 72px;
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem;
    text-align: center;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.72);
}

.book-card {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: visible;
    background: var(--color-surface);
    box-shadow: 0 2px 14px rgba(18, 52, 86, 0.08);
    cursor: grab;
    transition: box-shadow 140ms ease, opacity 120ms ease, background-color 120ms ease;
}

.book-card.is-selected {
    border-color: var(--color-primary-border);
    box-shadow: inset 0 0 0 2px var(--color-primary-border-soft), 0 4px 18px rgba(18, 52, 86, 0.12);
}

.book-card-select {
    position: absolute;
    top: 0.62rem;
    left: 0.62rem;
    z-index: 4;
    width: 2.18rem;
    height: 2.18rem;
    border-radius: 999px;
    background: var(--media-control-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(16, 36, 56, 0.16);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 140ms ease, transform 140ms ease, background-color 120ms ease;
}

.book-card:hover .book-card-select,
.book-card:focus-within .book-card-select,
.book-card.is-selected .book-card-select {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.book-card-select-checkbox {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.book-card:has(.book-card-actions-menu:not(.hide)) {
    z-index: 20;
}

.book-card.is-dragging {
    opacity: 0.36;
    background: var(--color-surface-muted);
    box-shadow: inset 0 0 0 2px var(--color-primary-border-soft), 0 2px 10px rgba(18, 52, 86, 0.05);
}

.book-card-drag-preview {
    opacity: 0.96;
    box-shadow: 0 22px 44px rgba(14, 38, 62, 0.24), 0 4px 12px rgba(14, 38, 62, 0.14);
    cursor: grabbing;
    z-index: 3000;
    will-change: transform;
}

.book-card-top-shell {
    position: relative;
}

.book-card-actions-shell {
    position: absolute;
    top: 0.62rem;
    right: 3.46rem;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.book-card-actions-shell.no-tts {
    right: 0.62rem;
}

.book-card:hover .book-card-actions-shell,
.book-card:focus-within .book-card-actions-shell,
.book-card-actions-shell:has(.book-card-actions-menu:not(.hide)) {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.book-card-actions-trigger {
    width: 2.18rem;
    height: 2.18rem;
    border: none;
    border-radius: 999px;
    background: var(--media-control-bg);
    color: var(--media-control-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 8px 20px rgba(16, 36, 56, 0.16);
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms ease;
}

.book-card-actions-trigger:hover,
.book-card-actions-trigger:focus-visible,
.book-card-actions-trigger.is-open {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(16, 36, 56, 0.22);
    background: var(--media-control-bg-hover);
}

.book-card-actions-trigger:focus-visible {
    outline: 2px solid var(--color-focus-border);
    outline-offset: 2px;
}

.book-card-actions-icon-svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.book-card-actions-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 10.6rem;
    padding: 0.35rem;
    border: 1px solid var(--media-control-border);
    border-radius: 12px;
    background: var(--media-control-menu-bg);
    box-shadow: 0 16px 36px rgba(14, 38, 62, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.book-card-actions-item {
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--media-control-menu-text);
    text-align: left;
    font-size: 0.9rem;
    padding: 0.56rem 0.7rem;
    cursor: pointer;
}

.book-card-actions-item:hover,
.book-card-actions-item:focus-visible {
    background: var(--color-primary-soft);
    outline: none;
}

.book-card-actions-item:disabled {
    cursor: progress;
    opacity: 0.68;
}

.book-card-actions-item.is-destructive {
    color: var(--color-danger-text);
}

.book-card-actions-item.is-destructive:hover,
.book-card-actions-item.is-destructive:focus-visible {
    background: var(--color-danger-soft);
}

.book-card-top {
    position: relative;
    display: block;
    height: 108px;
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
    text-decoration: none;
    overflow: hidden;
}

.book-card-top-has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15, 32, 50, 0.24) 0%,
        rgba(15, 32, 50, 0.05) 45%,
        rgba(15, 32, 50, 0.34) 100%
    );
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms ease;
}

.book-card:hover .book-card-top-has-image::after,
.book-card:focus-within .book-card-top-has-image::after {
    opacity: 1;
}

.book-card-cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
}

.book-card-generation-state {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--media-chip-text);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.22rem 0.58rem;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(16, 36, 56, 0.14);
}

.book-card.is-generating-card-image .book-card-top {
    filter: saturate(0.92);
}

.book-card-tts-btn {
    position: absolute;
    top: 0.62rem;
    right: 0.62rem;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 999px;
    background: var(--media-control-bg);
    color: var(--media-control-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    box-shadow: 0 8px 20px rgba(16, 36, 56, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 140ms ease, transform 140ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms ease;
}

.book-card:hover .book-card-tts-btn,
.book-card:focus-within .book-card-tts-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.book-card-tts-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(16, 36, 56, 0.24);
    background: var(--media-control-bg-hover);
}

.book-card-tts-btn:disabled {
    cursor: progress;
}

.book-card-tts-btn.is-completed {
    background: rgba(240, 251, 243, 0.98);
    color: #1c7b46;
}

.book-card-tts-btn.is-partial_ready {
    background: rgba(239, 248, 255, 0.98);
    color: #1b6aa8;
}

.book-card-tts-btn.is-failed {
    background: rgba(255, 245, 245, 0.98);
    color: #b24848;
}

.book-card-tts-progress {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.book-card-tts-progress-track,
.book-card-tts-progress-ring {
    fill: none;
    stroke-width: 2.6;
}

.book-card-tts-progress-track {
    stroke: rgba(125, 160, 196, 0.24);
}

.book-card-tts-progress-ring {
    stroke: #4a96ee;
    stroke-linecap: round;
    stroke-dasharray: 0 100;
    transition: stroke-dasharray 180ms ease, stroke 180ms ease;
}

.book-card-tts-btn.is-completed .book-card-tts-progress-ring {
    stroke: #38a169;
}

.book-card-tts-btn.is-partial_ready .book-card-tts-progress-ring {
    stroke: #2b8bd8;
}

.book-card-tts-btn.is-failed .book-card-tts-progress-ring {
    stroke: #d66a6a;
}

.book-card-tts-icon-wrap {
    position: relative;
    z-index: 1;
    width: 1.08rem;
    height: 1.08rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.book-card-tts-icon-svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.book-card-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 1.24rem;
    margin-top: 0.1rem;
    background: var(--media-badge-bg);
    color: var(--media-badge-text);
    font-weight: 640;
    border-radius: 999px;
    padding: 0 0.34rem;
    font-size: 0.68rem;
    line-height: 1;
}

.book-card-badge-text {
    display: block;
    transform: translateY(0.055em);
}

.book-card-language {
    position: absolute;
    right: 0.62rem;
    bottom: 0.62rem;
    z-index: 2;
    background: var(--media-chip-bg);
    color: var(--media-chip-text);
    border-radius: 999px;
    padding: 0.14rem 0.42rem;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.book-card:hover .book-card-language,
.book-card:focus-within .book-card-language {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.book-card-body {
    position: relative;
    padding: 0.42rem 0.68rem 0.72rem 0.68rem;
}

.book-card-drag-label {
    display: flex;
    max-width: calc(100% - 4.25rem);
    min-height: 1rem;
    margin-bottom: 0.28rem;
    overflow: hidden;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-2px);
    transition: opacity 160ms ease 0s, clip-path 180ms ease 0s, transform 160ms ease 0s;
}

.book-card:hover .book-card-drag-label,
.book-card:focus-within .book-card-drag-label {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
    transition-delay: 1s;
}

.book-card-title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.06rem;
    line-height: 1.25;
    text-decoration: none;
    color: var(--color-text-strong);
    min-height: 2.6rem;
}

.book-card-title-row {
    display: flex;
    align-items: flex-start;
    gap: 0.52rem;
    min-width: 0;
}

.book-card-meta {
    position: relative;
    margin: 0.28rem 0 0.45rem 0;
    color: var(--color-text-muted);
    font-size: 0.84rem;
    min-height: 1rem;
}

.book-card-chapter-count {
    display: inline-flex;
    width: fit-content;
    margin: -0.1rem 0 0.45rem 0;
    padding: 0.12rem 0.42rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.book-card-tags {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
}

.book-card-tags-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    max-width: 100%;
    min-height: 1.35rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    cursor: pointer;
}

.book-card-tags-trigger:hover,
.book-card-tags-trigger:focus-visible {
    color: var(--color-primary);
    outline: none;
}

.book-card-tags-trigger:focus-visible {
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    border-radius: 999px;
}

.book-card-tags-trigger.no-tags {
    width: 1.35rem;
    justify-content: center;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface-muted);
}

.book-card-tags-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-card-tag-icon-svg {
    width: 0.92rem;
    height: 0.92rem;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.book-card-tags-editor {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: calc(100% - 0.35rem);
    margin-top: 0.45rem;
    margin-right: 0.35rem;
    padding: 0.42rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 6px 16px var(--shadow-soft-color, rgba(20, 38, 58, 0.09));
    box-sizing: border-box;
}

.book-card-tags-editor.hide {
    display: none;
}

.book-card-tags-input {
    min-width: 0;
    flex: 1 1 auto;
    height: 2rem;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 0 0.55rem;
    font: inherit;
    font-size: 0.82rem;
    box-sizing: border-box;
}

.book-card-tags-save,
.book-card-tags-cancel {
    height: 1.85rem;
    border: 1px solid var(--button-border);
    border-radius: 8px;
    background: var(--color-surface-muted);
    color: var(--button-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.book-card-tags-save {
    flex: 0 0 auto;
    padding: 0 0.58rem;
    font-size: 0.78rem;
}

.book-card-tags-cancel {
    flex: 0 0 1.85rem;
    width: 1.85rem;
    padding: 0;
    font-size: 1rem;
}

.book-card-tags-editor.is-saving {
    opacity: 0.72;
    pointer-events: none;
}

.book-card-statline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    color: var(--color-text-soft);
    font-size: 0.84rem;
}

.book-card-dot {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: var(--color-primary);
}

.book-card-meter {
    height: 6px;
    display: flex;
    border-radius: 999px;
    margin-top: 0.46rem;
    background: #eff6fd;
    border: 1px solid rgba(195, 213, 231, 0.52);
    box-sizing: border-box;
    position: relative;
    isolation: isolate;
}

.book-card-meter-empty {
    overflow: hidden;
}

.book-card-meter-segment {
    min-width: 2px;
    height: 100%;
    position: relative;
    display: block;
    filter: saturate(1.45) brightness(0.98);
    outline: none;
}

.book-card-meter-segment:first-child {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.book-card-meter-segment:last-child {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.book-card-meter-segment:hover,
.book-card-meter-segment:focus-visible {
    z-index: 2;
    filter: saturate(1.65) brightness(1.02);
}

.book-card-meter-tooltip {
    position: absolute;
    bottom: calc(100% + 0.44rem);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    width: max-content;
    max-width: 11rem;
    padding: 0.28rem 0.44rem;
    border: 1px solid rgba(196, 213, 230, 0.95);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 22px rgba(14, 38, 62, 0.13);
    color: #21364b;
    font-size: 0.68rem;
    line-height: 1.1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
}

.book-card-meter-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 8px;
    height: 8px;
    transform: translateX(-50%) rotate(45deg);
    border-right: 1px solid rgba(196, 213, 230, 0.95);
    border-bottom: 1px solid rgba(196, 213, 230, 0.95);
    background: rgba(255, 255, 255, 0.98);
}

.book-card-meter-segment:hover .book-card-meter-tooltip,
.book-card-meter-segment:focus-visible .book-card-meter-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.book-card-meter-segment:first-child .book-card-meter-tooltip {
    left: 0;
    transform: translateX(0) translateY(3px);
}

.book-card-meter-segment:first-child:hover .book-card-meter-tooltip,
.book-card-meter-segment:first-child:focus-visible .book-card-meter-tooltip {
    transform: translateX(0) translateY(0);
}

.book-card-meter-segment:first-child .book-card-meter-tooltip::after {
    left: 0.58rem;
}

.book-card-meter-segment:last-child .book-card-meter-tooltip {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(3px);
}

.book-card-meter-segment:last-child:hover .book-card-meter-tooltip,
.book-card-meter-segment:last-child:focus-visible .book-card-meter-tooltip {
    transform: translateX(0) translateY(0);
}

.book-card-meter-segment:last-child .book-card-meter-tooltip::after {
    left: auto;
    right: 0.58rem;
}

.book-card-meter-tooltip-swatch {
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.book-card-meter-tooltip-label {
    color: #51677d;
}

.book-card-meter-tooltip strong {
    font-weight: 700;
    color: var(--color-text-strong);
}

.book-card-footer {
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    color: var(--color-text-muted);
    font-size: 0.74rem;
}

.book-cards-empty {
    margin-top: 1rem;
    padding: 0.8rem;
    border-radius: 14px;
    border: 1px dashed var(--color-primary-border-soft);
    color: var(--color-text-muted);
}

.book-cards-action-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.book-cards-action-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 30, 45, 0.46);
    backdrop-filter: blur(2px);
}

.book-cards-action-modal-dialog {
    position: relative;
    width: min(100%, 24rem);
    border-radius: 18px;
    border: 1px solid #d9e6f2;
    background: var(--color-surface);
    box-shadow: 0 28px 56px rgba(15, 39, 63, 0.22);
    padding: 1.1rem 1.1rem 1rem 1.1rem;
}

.book-cards-action-modal-title {
    margin: 0 0 0.35rem 0;
    color: #152f49;
    font-size: 1.15rem;
}

.book-cards-action-modal-body {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.book-cards-move-label {
    display: block;
    margin: 1rem 0 0.35rem;
    color: var(--color-text-strong);
    font-size: 0.84rem;
    font-weight: 700;
}

.book-cards-move-select {
    width: 100%;
    min-height: 2.65rem;
    box-sizing: border-box;
    border: 1px solid var(--input-border);
    border-radius: 14px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    padding: 0.55rem 0.75rem;
}

.book-cards-move-select:focus {
    outline: none;
    border-color: var(--color-focus-border);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.book-cards-action-modal-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
}

.book-cards-action-cancel,
.book-cards-action-confirm,
.book-cards-move-confirm {
    min-height: 2.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: 14px;
    border: 1px solid #c6d8ea;
    background: var(--color-surface);
    color: #1b3651;
    font-weight: 700;
    cursor: pointer;
}

.book-cards-action-cancel:hover,
.book-cards-action-cancel:focus-visible {
    background: var(--color-surface-hover);
    outline: none;
}

.book-cards-move-confirm {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-text-strong);
}

.book-cards-move-confirm:hover,
.book-cards-move-confirm:focus-visible {
    background: var(--color-surface-hover);
    outline: none;
}

.book-cards-move-confirm:disabled,
.book-cards-action-confirm:disabled,
.book-cards-action-cancel:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.book-cards-action-confirm {
    border-color: #e3b6b6;
    background: var(--color-danger-soft);
    color: #a13333;
}

.book-cards-action-confirm:hover,
.book-cards-action-confirm:focus-visible {
    background: var(--color-danger-soft);
    outline: none;
}

.book-cards-action-cancel:disabled,
.book-cards-action-confirm:disabled,
.book-card-actions-item:disabled {
    cursor: wait;
    opacity: 0.7;
}

div.dt-buttons>.dt-button {
    padding: 3px !important;
    margin: 5px 0 0 10px !important;
}

.dt-input {
    min-height: 40px;
    padding: 0.52rem 0.68rem;
    border: 1px solid var(--input-border);
    border-radius: 14px;
    background: var(--color-surface-subtle);
    color: var(--button-text);
    font: inherit;
    box-sizing: border-box;
}

select.dt-input {
    padding-right: 2.4rem;
}

.dt-search input.dt-input,
.dt-length select.dt-input {
    width: auto;
}

.dt-paging .dt-paging-button {
    min-height: 34px;
    min-width: 34px;
    border-radius: 14px !important;
}


.flash-notice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-sizing: border-box;
    max-width: 1180px;
    margin: 0.85rem auto 1.2rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-warning-border);
    border-left: 4px solid var(--color-warning);
    border-radius: 8px;
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.35;
    box-shadow: 0 8px 20px var(--shadow-soft-color, rgba(20, 38, 58, 0.07));
}

.flash-notice::before {
    content: "";
    flex: 0 0 0.56rem;
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 50%;
    background: var(--color-warning);
}

.flash-notice-success {
    border-color: var(--color-success);
    border-left-color: var(--color-success);
    background: var(--color-success-soft);
    color: var(--color-success-text);
}

.flash-notice-success::before {
    background: var(--color-success);
}

.flash-notice-error,
.flash-notice-danger {
    border-color: var(--color-danger-border);
    border-left-color: var(--color-danger);
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
}

.flash-notice-error::before,
.flash-notice-danger::before {
    background: var(--color-danger);
}

.flash-notice-message {
    border-color: var(--color-primary-border-soft);
    border-left-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-text-strong);
}

.flash-notice-message::before {
    background: var(--color-primary);
}

.flash-notice-narrow {
    margin-top: 2px;
    padding: 2px;
    background-color: var(--color-warning-soft);
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
}

.small-flash-notice {
    margin-top: 3px;
    padding: 3px;
    background-color: var(--color-warning-soft);
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
}

/* Screen layouts - two columns ************************/

div#term_form_left {
    width: 50%;
}

div#term_form_right {
    width: 50%;
    position: fixed;
    top: 120px;
    right: 0;
    height: 95%;
}

div#read_pane_left {
    width: 50%;
    margin: 0 auto;
}

div#read_pane_right {
    display: grid;
    grid-template-rows: 50% 1fr;
    row-gap: 0.7rem;
    container: reading-right-pane / inline-size;
    position: static;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: fixed;
    right: auto;
    left: var(--reading-right-pane-left, auto);
    width: min(var(--reading-right-pane-width), var(--reading-right-pane-available-width, var(--reading-right-pane-width)));
    max-width: var(--reading-right-pane-available-width, var(--reading-right-pane-width));
    height: 100vh;
    top: 0;
    padding: 0.75rem 0.7rem 0.8rem 0.75rem;
    background: linear-gradient(180deg, var(--reading-surface-muted) 0%, var(--reading-surface) 100%);
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease-out;
}

.read-pane-right-close-btn {
    display: none;
}

.reading_header_container {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 2rem;
    justify-items: center;
    align-items: center;
    padding: 1.5rem 2.2rem 0 2.2rem;
}

.reading_header_mid {
    width: 100%;
}

.reading_header_page {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    justify-self: end;
}

.reading-sidebar-toggle-btn {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 14px;
    border: 1px solid var(--reading-control-border);
    background: var(--reading-control-bg);
    color: var(--reading-control-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.reading-sidebar-toggle-btn:hover {
    border-color: var(--reading-control-border-hover);
    background: var(--reading-control-bg-hover);
    box-shadow: var(--reading-control-shadow);
}

.reading-sidebar-toggle-btn:active {
    transform: translateY(1px);
}

.reading-sidebar-toggle-icon {
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    display: block;
    mask: url("/static/icn/book-open-text.svg") center / contain no-repeat;
    -webkit-mask: url("/static/icn/book-open-text.svg") center / contain no-repeat;
    transition: opacity 120ms ease, transform 120ms ease;
}

.reading-sidebar-toggle-btn.sidebar-hidden .reading-sidebar-toggle-icon {
    opacity: 0.58;
}

#reading-header {
    background-color: var(--reading-surface);
    padding-bottom: 0.8rem;
    margin-bottom: 2rem;
    position: sticky;
    top: 0;
    z-index: 1001;
    border-radius: var(--reading-header-radius);
    box-shadow: var(--reading-header-shadow);
}

#page_indicator {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--reading-control-text);
}

.reading_header_mid_top {
    display: grid;
    grid-template-columns: auto 1fr;
    /* display: flex;
    justify-content: space-between; */
    margin: 0 1.6rem;
    margin-bottom: 0.58rem;
    gap: 1rem;
    align-items: end;
}
    
/* End layouts *****************************************/

/* Reader slide-in hamburger menu. *********************/

/* The hamburger slices. */
span.hamburger {
  width: 20px;
  height: 4px;
  /* margin-bottom: 3px; */
  background: var(--reading-control-icon);
  border-radius: 3px;
  display: block;
}

.hamburger-btn {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border: 1px solid var(--reading-control-border);
    border-radius: 6.9px;
    background: var(--reading-control-bg);
    color: var(--reading-control-text);
    padding: 0.5rem;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.hamburger-btn:hover {
    border-color: var(--reading-control-border-hover);
    background: var(--reading-control-bg-hover);
    box-shadow: var(--reading-control-shadow);
}

#reading_menu.open-menu {
  transform: translateX(0);
}

#reading_menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1004; /* higher than audio, header and right_pane (for mobile view) */
  height: 100vh;
  width: min(var(--reading-menu-width), var(--reading-menu-available-width, var(--reading-menu-width)));
  border-right: 1px solid var(--reading-menu-border);
  border-radius: var(--reading-menu-radius);
  box-shadow: var(--reading-menu-shadow);
  box-sizing: border-box;
  background: linear-gradient(180deg, var(--reading-menu-surface) 0%, var(--reading-menu-bg) 100%);
  color: var(--reading-menu-text);
  overflow: hidden;

  transform-origin: 0% 0%;
  transform: translate(calc(-100% - 2rem), 0);
  transition: transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0);
}

#reading_menu .reading-menu-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1.2rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

#reading_menu ul {
  margin: 0;
  list-style: none;
}

#reading_menu .reading-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0 1rem 1rem;
}

#reading_menu .reading-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    min-height: 2.55rem;
    padding: 0.42rem 0.72rem;
    border-radius: 8px;
    color: var(--reading-menu-text);
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.25;
    font-size: 1rem;
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.close-btn:hover,
#reading_menu .reading-menu-item:hover,
.text-options-button:hover {
    background-color: var(--reading-menu-control-hover);
    cursor: pointer;
}

#reading_menu .reading-menu-item:hover,
#reading_menu .reading-menu-item:focus-visible {
    color: var(--reading-menu-text-strong);
    outline: none;
}

.close-btn {
  background-image: url("/static/icn/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background-size: 42.4%;
  background-color: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.reading-menu-close-btn {
  margin-left: auto;
}

#reading_menu .text-options-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem;
  padding: 0;
  margin: 0 1.35rem;
}

#reading_menu .text-options-button {
  width: 100%;
  height: 2.35rem;
  border: 1px solid var(--reading-menu-control-border);
  border-radius: 8px;
  background-color: var(--reading-menu-control-bg);
  background-size: 1.32rem;
  box-shadow: none;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

#reading_menu .text-options-button:hover,
#reading_menu .text-options-button:focus-visible {
  border-color: var(--reading-menu-control-active-border);
  box-shadow: var(--reading-menu-control-shadow);
  outline: none;
}

.text-options-btn-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  padding: 0;
  border-radius: 8px;
}

.reading_header_left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.reading_menu_logo_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0;
  background: var(--reading-menu-surface-muted);
  border-bottom: 1px solid var(--reading-menu-border);
  padding: 0.9rem 1rem;
}

.reading-menu-home-link {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    padding: 0.18rem;
}

.reading-menu-home-link:hover {
    background-color: var(--reading-menu-control-hover);
}

#reading_menu .lutelogo_small {
    float: none;
    width: 4.5rem;
    margin: 0;
}

.reading-menu-section {
    margin-inline: 1rem;
}

#focus-container,
#tap_sets_status-container,
.reading-menu-toggle-row {
    display: flex;
    justify-content: space-between;
    gap: 0.9rem;
    align-items: center;
    min-height: 2.45rem;
}

#tap_sets_status-container {
    /* Toggled later in mobile media check. */
    display:none;
}

#focus,
#tap_sets_status {
    appearance: none;
    display: block;
    background-color: var(--reading-menu-control-bg);
    border: 1px solid var(--reading-menu-control-border);
    width: 2.9rem;
    height: 1.55rem;
    border-radius: 999px;
    padding: 0.2rem;
    flex: 0 0 auto;
    box-sizing: border-box;
    cursor: pointer;

    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

#focus-container label,
#tap_sets_status-container label {
    color: var(--reading-menu-text-strong);
    font-weight: 700;
    line-height: 1.2;
}

#focus::after,
#tap_sets_status::after {
    content: "";
    display: block;
    background-color: var(--toggle-off-color);
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;

    transition: transform 0.2s, background-color 0.2s;
}

.focus-mode-active #focus::after,
.tap_sets_status-active #tap_sets_status::after {
    transform: translate(1.32rem, 0);
    background-color: var(--toggle-on-color);
}

.focus-mode-active #focus,
.tap_sets_status-active #tap_sets_status {
    background-color: var(--reading-menu-control-active-bg);
    border-color: var(--reading-menu-control-active-border);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

#tap_sets_status-container label,
#tap_sets_status-container input {
  display: inline-block;
  vertical-align: middle;
}

.focus-mode-active #read_pane_right {
    transform: translateX(calc(100% + 1.5rem));
    opacity: 0;
    pointer-events: none;
}

.reading-menu-top-level {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.reading-menu-top-level::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.72;
    flex: 0 0 auto;
}

.reading-menu-top-level-li {
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

.reading-menu-sublist {
    display: none;
    position: absolute;
    left: calc(100% + 0.6rem);
    min-width: 14rem;
    width: max-content;
    max-width: 18rem;
    background-color: var(--reading-menu-surface);
    top: 0;
    border: 1px solid var(--reading-menu-border);
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
    padding: 0.35rem;
}

#page-operations-li:hover #page-operations-menu,
#bookmark-operations-li:hover #bookmark-operations-menu,
#screen-interactions-li:hover #screen-interactions-menu {
    display: block;
}

.reading-menu-sublist.active,
#page-operations-li:hover #page-operations-menu,
#bookmark-operations-li:hover #bookmark-operations-menu,
#screen-interactions-li:hover #screen-interactions-menu {
    display: block;
    position: static;
    flex: 0 0 100%;
    min-width: 0;
    max-width: none;
    width: 100%;
    margin-top: 0.35rem;
    box-shadow: none;
}

#page-operations-menu .reading-menu-item:hover,
#bookmark-operations-menu .reading-menu-item:hover,
#screen-interactions-menu .reading-menu-item:hover {
    background-color: var(--reading-menu-control-hover);
}

.reading-menu-mode-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.3rem;
    padding: 0.14rem 0.42rem;
    border: 1px solid var(--reading-menu-control-border);
    border-radius: 999px;
    color: var(--reading-menu-text-muted);
    background: var(--reading-menu-control-bg);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Reading menu, mobile */
@media screen and (max-width: 980px) {

    #reading_menu {
        width: min(90vw, 24rem, var(--reading-menu-available-width, 90vw));
    }

    .reading_menu_logo_container {
        margin-bottom: 0;
    }

    #focus-container {
        display: none;
    }

    #tap_sets_status-container {
        display: flex;
    }

    #reading_menu .text-options-container {
        gap: 0.5rem !important;
        margin: 0 1.15rem;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #reading_menu .text-options-button {
        width: 100%;
        height: 2.55rem;
    }

    .text-options-btn-container:nth-child(3),
    .text-options-btn-container:nth-child(4) {
        display: none;
    }

    #reading_menu .reading-menu-item {
        font-size: 1.05rem;
        padding: 0.55rem 0.6rem;
    }

    .reading-menu-sublist {
        position: relative; /* relative to the parent */
        left: 0; /* below the parent */
        top: 0; /* at the same level as the parent */
        min-width: 0;
        max-width: none;
        width: 100%; /* Full width of the parent container */
        margin-top: 0.35rem;
        border-radius: 8px;
        box-shadow: none;
    }

    .reading-menu-sublist.active {
        display: block;
    }

    #page-operations-li:hover #page-operations-menu,
    #screen-interactions-li:hover #screen-interactions-menu {
        position: relative; /* Prevent overflow issues */
    }

}
/* End reading menu, mobile */

/* End reader slide-in hamburger menu. *********************/

.read_page_nav {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    color: var(--reading-control-icon);
    transition: color 120ms ease, transform 120ms ease;
}

.read_page_nav::before {
    content: "";
    width: 0.74rem;
    height: 0.74rem;
    border-top: 0.22rem solid currentColor;
    border-right: 0.22rem solid currentColor;
    border-radius: 1px;
    box-sizing: border-box;
}

.read-page-nav-prev::before {
    transform: rotate(-135deg);
}

.read-page-nav-next::before {
    transform: rotate(45deg);
}

.read_page_nav:not(.read_page_disabled):hover {
    color: var(--reading-control-active-text);
    transform: translateY(-1px);
}

.read_page_disabled {
    color: var(--reading-control-muted);
    cursor: default;
}

.read_page_nav.read_page_disabled {
    color: var(--reading-control-muted);
}

.reading-footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    margin: 2.2rem auto 0;
}

.texttitlecontainer {
    overflow: hidden;
    white-space: nowrap;
}

.texttitlecontainer.has-chapter-menu {
    overflow: visible;
}

#headertexttitle {
    font-size: 0.9rem;
    font-weight: normal;
    margin: 0;
}

#thetexttitle {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    word-wrap: break-word;
}

#thetexttitle,
div#thetext {
    padding: 0 2.2rem;
    padding: 0 2.2rem;
}

div#thetext p {
    line-height: 1.25;
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 0;
}

span.drag-handle {
    cursor: pointer;
    color: grey;
}

.valign {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

input[type=text].form-control-narrower {
    min-width: 8rem;
    /* padding: 5px 5px; */
    margin: 2px 0;
    box-sizing: border-box;
}

.formfieldcomment {
    font-size: 0.85em;
    font-style: italic;
}

.nomarginblock {
    margin-block-start: 0px;
    margin-block-end: 0px;
}

p
{
    margin: 5px 0 5px 0;
    padding: 0;
}

h1 {
    margin: 1rem 0;
}

h2 {
    margin: 0.8rem 0;
}

h3
{
    margin: 0px 0 0px 0;
    padding: 0;
}

h4
{
    margin: 5px 0 10px 0;
    padding: 0;
}

span.flashtextcopy {
    background-color: var(--reading-highlight) !important;
}

span.status0 {
    background-color: var(--reading-status-0-bg);
    color: var(--reading-status-0-text);
}

span.status1 {
    background-color: var(--reading-status-1-bg);
    color: var(--reading-status-1-text);
}

span.status2 {
    background-color: var(--reading-status-2-bg);
    color: var(--reading-status-2-text);
}

span.status3 {
    background-color: var(--reading-status-3-bg);
    color: var(--reading-status-3-text);
}

span.status4 {
    background-color: var(--reading-status-4-bg);
    color: var(--reading-status-4-text);
}

span.status5 {
    background-color: var(--reading-status-5-bg);
    color: var(--reading-status-5-text);
}

span.textitem:is(.status0, .status1, .status2, .status3, .status4, .status5) {
    border-radius: 0.16em;
    padding: 0.08em 0.06em 0.1em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

span.textitem:is(.status0, .status1, .status2, .status3, .status4, .status5):has(+ span.textitem:is(.status0, .status1, .status2, .status3, .status4, .status5)) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

span.textitem:is(.status0, .status1, .status2, .status3, .status4, .status5) + span.textitem:is(.status0, .status1, .status2, .status3, .status4, .status5) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -0.06em;
}

/* span.status99, span.status98 have no styles, just regular text. */

span.hasflash:after {
    content: "*";
    color: black;
}

span.overlapped:before {
    content: "\207A";
    color: black;
}

span.textsentence {
     /* The weird "font-size: 0%" prevents excess space between the spans! */
     /* span.textitem then re-sets the font size for the words. */
    font-size: 0%;
}

@keyframes sentence-page-return-marker {
    0% {
        background-color: color-mix(in srgb, var(--color-primary-soft) 48%, transparent);
    }
    62% {
        background-color: color-mix(in srgb, var(--color-primary-soft) 22%, transparent);
    }
    100% {
        background-color: transparent;
    }
}

@keyframes sentence-page-return-underline {
    0% {
        text-decoration-color: color-mix(in srgb, var(--color-primary) 42%, transparent);
    }
    62% {
        text-decoration-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
    }
    100% {
        text-decoration-color: transparent;
    }
}

@keyframes sentence-page-return-rail {
    0% {
        opacity: 1;
        transform: scaleY(1);
    }
    70% {
        opacity: 0.72;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform: scaleY(0.96);
    }
}

span.textsentence.sentence-page-return-marker {
    border-radius: 0.28rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: sentence-page-return-marker 2.4s ease-out;
}

span.textsentence.sentence-page-return-marker span.textitem {
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 42%, transparent);
    animation: sentence-page-return-underline 2.4s ease-out;
}

.sentence-page-return-rail {
    position: absolute;
    width: 0.28rem;
    min-height: 2rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-soft) 70%, transparent);
    pointer-events: none;
    transform-origin: center;
    animation: sentence-page-return-rail 2.4s ease-out forwards;
    z-index: 20;
}

/* A word shown in the reading pane. */
span.textitem {
    font-size: 16px;
    color: var(--reading-text);
    font-family: var(--lute-reading-font-family, inherit);

    /* disallow select, only allow mouse-down-drag-up to define multiword
   terms. */
    user-select: none;
    -webkit-user-select: none;

    /* Add a transparent border so that when the .wordhover or .kwordmarked
   style is added, things don't get pushed around. */
    border-bottom: 1px solid transparent;
}

/* .click */
/* { */
    /* cursor: pointer; */
    /* color: var(--reading-link-hover); */
/* } */

.hide
{
    display: none;
}

a {
    text-decoration: none;
    color: var(--color-link);
}

a:link {
    color: var(--color-link);
}

a:visited {
    color: var(--color-link);
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

a:focus {
    color: var(--color-link-hover);
}

a:active {
    color: var(--color-link-hover);
}

#read_pane_container a,
#reading_menu a,
#thetext a {
    color: var(--reading-link);
}

#read_pane_container a:hover,
#reading_menu a:hover,
#thetext a:hover,
#read_pane_container a:focus,
#reading_menu a:focus,
#thetext a:focus {
    color: var(--reading-link-hover);
}
 
 
img
{
    border: 0pt none;
}

.wordhover
{
    border-bottom: 1px solid var(--reading-word-hover-border) !important;
}

.kwordmarked
{
    border-bottom: 1px solid var(--reading-word-marked-border) !important;
}

.newmultiterm
{
    background: var(--reading-highlight) !important;
}

#termtags
{
    width: 340px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 2px;
}

#texttags
{
    width: 340px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 2px;
}

.nowrap
{
    white-space: nowrap;
    margin-left: 20pt;
}

/* Tooltip shown on copy or anki card creation. */
.manual-tooltip {
    position: absolute;
    background-color: white;
    color: black;
    border: 1px solid black;
    padding: 5px;
    border-radius: 3px;
    font-size: 12pt;
    white-space: pre-line;  /* break if the text contains "\n" */
    z-index: 500;  /* Initial z-index */
}

.manual-tooltip.hovered {
    z-index: 10000;  /* Higher z-index when hovered */
}

/* Widening the tooltip. */
div.ui-tooltip {
    max-width: 400px !important;
    z-index: 1000; /*higher than audio because of words on the bottom, but lower than header and side menu */
    word-wrap: break-word;
    padding: 0 !important;
    border: 1px solid var(--reading-popup-border) !important;
    border-radius: var(--reading-popup-radius) !important;
    background: var(--reading-popup-bg) !important;
    color: var(--reading-popup-text) !important;
    box-shadow: var(--reading-popup-shadow) !important;
    overflow: hidden;
}

div.ui-tooltip.ui-widget.ui-widget-content,
div.ui-tooltip.ui-widget-shadow {
    border: 1px solid var(--reading-popup-border) !important;
    border-radius: var(--reading-popup-radius) !important;
    background: var(--reading-popup-bg) !important;
    box-shadow: var(--reading-popup-shadow) !important;
    opacity: 1 !important;
}

div.ui-tooltip .ui-tooltip-content {
    padding: 0 !important;
    border-radius: inherit;
    background: transparent;
}

div.term-hover-tooltip {
    padding: 0 !important;
    border: 1px solid var(--reading-popup-border) !important;
    border-radius: var(--reading-popup-radius) !important;
    background: var(--reading-popup-bg) !important;
    color: var(--reading-popup-text);
    box-shadow: var(--reading-popup-shadow) !important;
    z-index: 2200 !important;
    line-height: 1.38;
    overflow: hidden;
}

.termpopup {
    min-width: 9.5rem;
    padding: 1.28rem 1.35rem;
}

.termpopup-header {
    display: grid;
    gap: 0.35rem;
}

.termpopup-title {
    color: var(--reading-popup-title);
    font-size: 1.42em;
    font-weight: 700;
    line-height: 1.18;
}

.termpopup-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.termpopup-romanization {
    margin-top: 0.45rem;
    color: var(--reading-popup-muted);
    font-size: 1.15em;
    font-style: italic;
}

.termpopup-translation {
    margin-top: 0.55rem;
    font-size: 1.12em;
}

.termpopup-images {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.termpopup-section {
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--reading-popup-section-border);
}

.termpopup-section-title {
    margin-bottom: 0.45rem;
    color: var(--reading-popup-muted);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
}

.termpopup-related-term + .termpopup-related-term {
    margin-top: 0.65rem;
}

.termpopup-related-title {
    color: var(--reading-popup-title);
    font-weight: 700;
}

.termpopup-related-romanization {
    color: var(--reading-popup-muted);
    font-style: italic;
}

.termpopup-related-translation {
    margin-top: 0.1rem;
}

.termpopup-flash {
    margin-top: 0.65rem;
}

.tooltip-image {
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
}

ul.sentencelist {
    margin-block-start: 3px;
}

.term-sentences-body {
    margin: 0;
    padding: 0;
    background: #f4f6f9;
    color: #15283d;
    font-family: "Inter", "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.term-sentences-shell {
    padding: 0.95rem;
}

.term-sentences-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}

.term-sentences-expand {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-primary-border-muted);
    border-radius: 14px;
    background: var(--color-surface-subtle);
    color: var(--color-text-soft);
    cursor: pointer;
}

.term-sentences-expand::before {
    content: "";
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    margin: auto;
    background-color: currentColor;
    mask: url("../icn/open.svg") center / contain no-repeat;
    -webkit-mask: url("../icn/open.svg") center / contain no-repeat;
}

.term-sentences-expand:hover,
.term-sentences-expand:focus-visible {
    background: var(--color-primary-soft);
    border-color: var(--color-border-strong);
    color: var(--color-text-strong);
    outline: none;
}

.term-sentences-kicker {
    margin: 0 0 0.18rem;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.term-sentences-title {
    margin: 0;
    color: var(--color-text-strong);
    font-size: 1.35rem;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: 0;
}

.term-sentence-group {
    margin-top: 1rem;
}

.term-sentence-group:first-of-type {
    margin-top: 0;
}

.term-sentence-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0 0.1rem;
}

.term-sentence-group-header h2 {
    margin: 0;
    color: #263d55;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.2;
}

.term-sentence-group-header span {
    flex: 0 0 auto;
    color: #6e8194;
    font-size: 0.72rem;
    font-weight: 700;
}

.term-sentence-list {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.term-sentence-card {
    border: 1px solid #d9e3ee;
    border-left: 5px solid #78b3e8;
    border-radius: 14px;
    background: var(--color-surface);
    padding: 0.86rem 0.95rem 0.8rem;
    box-shadow: 0 8px 18px rgba(28, 52, 78, 0.07);
}

.term-sentence-text {
    color: #0f1f31;
    font-family: "KaiTi", "STKaiti", "Kaiti SC", "Kaiti TC", serif;
    font-size: 1.16rem;
    line-height: 1.72;
    overflow-wrap: anywhere;
}

.term-sentence-text b {
    color: #0d5ea8;
    background: #e6f3ff;
    border-radius: 0.22rem;
    padding: 0.02rem 0.18rem;
    font-weight: 800;
}

.term-sentence-source {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    max-width: 100%;
    margin-top: 0.55rem;
    color: #245d8f;
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}

.term-sentence-source:hover {
    color: #143f64;
    text-decoration: none;
}

.term-sentence-source-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.term-sentence-source-page {
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: #49677f;
    padding: 0.1rem 0.42rem;
    font-size: 0.72rem;
    font-weight: 750;
}

.term-sentences-empty {
    border: 1px dashed #bed2e7;
    border-radius: 14px;
    background: var(--color-surface);
    padding: 1rem;
    color: #324961;
    font-size: 0.9rem;
    line-height: 1.45;
}

.term-sentences-empty p {
    margin: 0 0 0.55rem;
    font-weight: 700;
}

.term-sentences-empty ul {
    margin: 0.35rem 0 0.75rem;
    padding-left: 1.1rem;
}

.term-sentences-empty a {
    color: #245d8f;
    font-weight: 700;
}

.term-sentences-reading-modal.hidden {
    display: none;
}

.term-sentences-reading-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
}

.term-sentences-reading-dialog {
    position: fixed;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-primary-border-muted);
    border-radius: 12px;
    box-shadow: 0 22px 54px rgba(20, 38, 58, 0.2);
    pointer-events: auto;
}

.term-sentences-reading-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid #d8e4ef;
    background: var(--color-surface);
}

.term-sentences-reading-modal-kicker {
    margin: 0 0 0.16rem;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.term-sentences-reading-modal-header h3 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.15;
}

.term-sentences-reading-modal-close {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-soft);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.term-sentences-reading-modal-close:hover,
.term-sentences-reading-modal-close:focus-visible {
    background: var(--color-primary-soft);
    color: var(--color-text-strong);
    outline: none;
}

.term-sentences-reading-modal-content {
    overflow: auto;
    padding: 0.9rem;
}

.term-sentences-reading-loading {
    color: var(--color-text-soft);
    font-weight: 700;
}

.term-sentence-list-expanded {
    gap: 0.9rem;
}

.term-sentence-card-expanded {
    border-left-width: 4px;
}

.term-sentence-text-expanded {
    font-family: inherit;
}

.term-sentence-text-expanded p {
    margin: 0;
    line-height: 1.85;
}

.term-sentence-text-expanded span.textsentence {
    font-size: 0%;
    white-space: normal;
}

.term-sentence-text-expanded span.textitem {
    white-space: normal;
}

.term-sentence-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 1rem 0 0;
}

.term-sentence-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid var(--color-primary-border-muted);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.term-sentence-page-link:hover,
.term-sentence-page-link:focus-visible {
    background: var(--color-primary-soft);
    border-color: var(--color-border-strong);
    color: var(--color-text-strong);
    outline: none;
}

.term-sentence-page-link-disabled {
    opacity: 0.35;
}

.term-sentence-page-status {
    min-width: 4.5rem;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 750;
    text-align: center;
}

@media screen and (max-width: 680px) {
    .term-sentences-shell {
        padding: 0.72rem;
    }

    .term-sentences-title {
        font-size: 1.16rem;
    }

    .term-sentence-card {
        border-radius: 13px;
        padding: 0.75rem 0.78rem;
    }

    .term-sentence-text {
        font-size: 1.04rem;
        line-height: 1.68;
    }
}

@media screen and (max-width: 980px) {
    .term-sentences-reading-modal {
        z-index: 2000;
        pointer-events: auto;
        background: rgba(20, 38, 58, 0.32);
    }

    .term-sentences-reading-dialog {
        position: fixed;
        inset: 0.8rem;
        width: auto;
        max-width: none;
        max-height: none;
    }
}

.termpopup-tag {
    display: inline-flex;
    align-items: center;
    min-height: 1.2em;
    padding: 0.05rem 0.28rem;
    border: 1px solid var(--reading-popup-tag-border);
    border-radius: 999px;
    background-color: var(--reading-popup-tag-bg);
    color: var(--reading-popup-tag-text);
    font-size: 0.72em;
    font-weight: 600;
    line-height: 1.1;
}

.image-reading-panel {
  display: grid;
  gap: 1rem;
  padding: 1rem 0 2rem;
  position: relative;
}

.image-reading-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.image-reading-toolbar-copy strong,
.image-reading-toolbar-copy span {
  display: block;
}

.image-reading-toolbar-copy span,
.image-reading-status,
.image-line-modal-kicker,
.image-line-modal-meta {
  color: #6d6357;
  font-size: 0.95rem;
}

.image-reading-toolbar-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.image-reading-stage {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

.image-reading-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(66, 47, 29, 0.15);
}

.image-reading-markers,
.image-reading-boxes {
  position: absolute;
  inset: 0;
}

.image-reading-boxes {
  pointer-events: none;
  display: none;
}

.image-reading-boxes.visible {
  display: block;
}

.image-reading-box {
  fill: rgba(163, 59, 42, 0.08);
  stroke: #a33b2a;
  stroke-width: 2;
}

.image-reading-marker {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fffaf4;
  background: #8a4b2a;
  color: var(--color-surface);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(66, 47, 29, 0.22);
}

.image-reading-toggle {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.image-reading-select {
  min-width: 170px;
}

.image-line-modal.hidden {
  display: none;
}

.image-line-modal {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 40;
  width: 0;
  height: 0;
}

.image-line-modal-backdrop {
  display: none;
}

.image-line-modal-dialog {
  position: absolute;
  width: min(28rem, calc(100vw - 8rem));
  max-width: min(28rem, calc(100vw - 8rem));
  margin: 0;
  background: #fffaf4;
  border-radius: 18px;
  padding: 0.95rem 1rem 0.9rem;
  border: 1px solid rgba(186, 198, 212, 0.95);
  box-shadow: 0 24px 64px rgba(35, 28, 24, 0.24);
}

.image-line-modal-close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: #6d6357;
  font-size: 1.35rem;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
}

.image-line-modal-close:hover,
.image-line-modal-close:focus-visible {
  background: rgba(186, 198, 212, 0.22);
  color: #2a3746;
  outline: none;
}

.image-line-modal-content {
  max-height: min(18rem, 42vh);
  overflow: auto;
  padding-top: 0.3rem;
  padding-right: 2rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.image-line-modal-content span.textsentence {
  font-size: 0%;
  white-space: normal;
}

.image-line-modal-content span.textitem {
  white-space: normal;
  line-height: 1.8;
}

@media (max-width: 980px) {
  .image-line-modal {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    z-index: 2000;
  }

  .image-line-modal-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(35, 28, 24, 0.45);
  }

  .image-line-modal-dialog {
    position: relative;
    width: min(28rem, calc(100vw - 2rem));
    max-width: min(28rem, calc(100vw - 2rem));
    margin: 8vh auto 0;
  }
}

/* error handler */

div.bug_report {
    margin: 20px;
    padding: 5px;
    border: 1px solid grey;
}

div.code {
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.5;
    padding: 20px;
    background-color: #f8f9fa;
}

div.code pre {
    white-space: pre-wrap;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 15px;
    overflow: auto;
    font-size: 14px;
    color: #212529;
}


/********************************
 * Type controls menu
 */

.text-options-button {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    border: 2px solid var(--color-border-muted);
    background-color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}

.menu-font-plus-container {
    display: flex;
    align-items: center;
}

.reading-header-font-plus {
    margin-right: 0;
}

.quick-font-control {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.quick-font-toggle {
    width: 32px;
    height: 32px;
    border: 1px solid var(--reading-control-border);
    border-radius: 14px;
    background: var(--reading-control-bg);
    color: var(--reading-control-text);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.reading-font-family-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--reading-control-border);
    border-radius: 14px;
    background: var(--reading-control-bg);
    color: var(--reading-control-text);
    cursor: pointer;
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    padding: 0;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.quick-font-toggle:hover,
.quick-font-control.open .quick-font-toggle,
.quick-font-control:focus-within .quick-font-toggle,
.reading-font-family-btn:hover,
.reading-font-family-btn:focus-visible {
    border-color: var(--reading-control-border-hover);
    background: var(--reading-control-bg-hover);
    box-shadow: var(--reading-control-shadow);
}

.reading-font-family-btn:active {
    transform: translateY(1px);
}

.quick-font-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    display: none;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--reading-control-border);
    border-radius: 14px;
    background: var(--reading-control-bg);
    box-shadow: var(--shadow-medium);
    z-index: 1200;
}

.quick-font-control:hover .quick-font-menu,
.quick-font-control:focus-within .quick-font-menu,
.quick-font-control.open .quick-font-menu {
    display: inline-flex;
}

.quick-font-action {
    min-width: 30px;
    height: 30px;
    border: 1px solid var(--reading-control-border);
    border-radius: 14px;
    background: var(--reading-control-bg);
    color: var(--reading-control-text);
    cursor: pointer;
    font-size: 14px;
    padding: 0 8px;
}

.account-font-actions .account-font-action {
    min-width: 2rem;
    height: 2rem;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.account-font-actions .account-font-action-reset {
    flex: 1;
    min-width: 0;
    padding: 0 0.65rem;
    font-size: 0.76rem;
}

.account-font-actions .account-font-action:hover,
.account-font-actions .account-font-action:focus {
    border-color: var(--reading-control-border-hover);
    background: var(--reading-control-bg-hover);
    box-shadow: var(--reading-control-shadow);
}

.font-plus {
    background-image: url("/static/icn/font-increase.svg");
}

.font-minus {
    background-image: url("/static/icn/font-decrease.svg");
}

.lh-plus {
    background-image: url("/static/icn/line-spacing-increase.svg");
}

.lh-minus {
    background-image: url("/static/icn/line-spacing-decrease.svg");
}

.width-plus {
    background-image: url("/static/icn/caret-right.svg");
}

.width-minus {
    background-image: url("/static/icn/caret-left.svg");
}

.column-one {
    background-image: url("/static/icn/text-column-one.svg");
}

.column-two {
    background-image: url("/static/icn/text-column-two.svg");
}

/*********************************
 * read page layout
 */

#read_pane_container {
    --read-grid-margin: 0; /*(100 - 95) / 2 -> do not use calc here. does not work*/
    width: 100%;
}

#wordframeid {
    height: 100% !important;
    background: var(--reading-surface);
    color-scheme: var(--reading-color-scheme);
}

.wordframecontainer,
.dictcontainer {
    background: #f2f4f7;
    border: 1px solid var(--color-border-muted);
    border-radius: 24px;
    box-shadow: 0 12px 26px rgba(22, 40, 60, 0.14), 0 2px 4px rgba(22, 40, 60, 0.08);
    overflow: hidden;
    min-height: 0;
}

.wordframecontainer {
    margin: 0;
}

.rightreadingframe {
    border: none;
    border-radius: inherit;
    background: var(--reading-surface);
}

/* resize */

/* border */
#read_pane_right::after {
    content: '';
    background-color: #dbefff;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    cursor: col-resize;
}

/* border */
.dictcontainer::after {
    content: '';
    background-color: #dbefff;
    /* background-image: linear-gradient(to right, #dbefff 50%, #dbefff 50%); */
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    cursor: row-resize;
}

.dictcontainer {
    position: relative;
    display: none;
    height: 100%;
    margin: 0;
}


/* read slider */
#read-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.72rem;
    margin: 0;
    border: 1px solid var(--read-slider-track-border);
    background-color: var(--read-slider-track-bg);
    border-radius: 999px;
    box-sizing: border-box;
    background-size: 0% 100%;
    background-image: linear-gradient(90deg, var(--read-slider-fill-start) 0%, var(--read-slider-color) 100%);
    background-repeat: no-repeat;
    box-shadow: inset 0 1px 2px rgba(24, 45, 64, 0.14);
    cursor: pointer;
    transition: box-shadow 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

#read-slider:not(.read_page_disabled):hover {
    border-color: var(--reading-control-border-hover);
    box-shadow: inset 0 1px 2px rgba(24, 45, 64, 0.14), 0 0 0 4px var(--color-focus-ring);
}

#read-slider:focus-visible {
    outline: none;
    border-color: var(--color-focus-border);
    box-shadow: inset 0 1px 2px rgba(24, 45, 64, 0.14), 0 0 0 4px var(--color-focus-ring);
}

#read-slider::-moz-range-thumb {
    width: 1.32rem;
    height: 1.32rem;
    border: 3px solid var(--read-slider-thumb-border);
    border-radius: 999px;
    background-color: var(--read-slider-thumb-bg);
    box-shadow: var(--read-slider-thumb-shadow);
    padding: 0;
    box-sizing: border-box;
}

#read-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.32rem;
    height: 1.32rem;
    border: 3px solid var(--read-slider-thumb-border);
    border-radius: 999px;
    background-color: var(--read-slider-thumb-bg);
    box-shadow: var(--read-slider-thumb-shadow);
    padding: 0;
    box-sizing: border-box;
}

#read-slider.read_page_disabled {
    background-color: var(--read-slider-disabled-bg);
    background-image: linear-gradient(var(--read-slider-disabled-fill), var(--read-slider-disabled-fill));
    border-color: var(--reading-control-border);
    cursor: default;
    box-shadow: inset 0 1px 2px rgba(24, 45, 64, 0.08);
}

#read-slider.read_page_disabled::-moz-range-thumb {
    border-color: var(--read-slider-thumb-border);
    background-color: var(--read-slider-disabled-thumb);
    box-shadow: 0 1px 4px rgba(24, 45, 64, 0.12);
}

#read-slider.read_page_disabled::-webkit-slider-thumb {
    border-color: var(--read-slider-thumb-border);
    background-color: var(--read-slider-disabled-thumb);
    box-shadow: 0 1px 4px rgba(24, 45, 64, 0.12);
}

#read-slider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
}

#read-slider::-moz-range-track {
  box-shadow: none;
  border: none;
}

.read-slide-container {
    display: grid;
    grid-template-columns: auto minmax(8rem, 1fr) auto;
    align-items: center;
    gap: 0.78rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.05rem 0.35rem 0.1rem;
}

#sentence_mode_controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

#sentence_mode_controls.hide {
    display: none;
}

.sentence-mode-picker {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    padding: 1.5rem 2.2rem 0.8rem;
    border: 1px solid var(--color-warning-border);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--color-warning-soft) 0%, var(--color-surface-muted) 100%);
    box-shadow: 0 16px 32px rgba(94, 72, 31, 0.14);
    box-sizing: border-box;
}

.sentence-mode-picker.hide {
    display: none;
}

.sentence-mode-picker-copy {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.sentence-mode-picker-kicker {
    color: var(--color-warning);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sentence-mode-picker-title {
    color: var(--color-warning-text);
    font-size: 1rem;
    line-height: 1.3;
}

.sentence-mode-picker-help {
    color: var(--color-warning-text);
    line-height: 1.45;
}

.sentence-mode-picker-cancel {
    min-height: 2.6rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--color-warning-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-warning-text);
    font-weight: 700;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.sentence-mode-picker-cancel:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(76, 54, 11, 0.08);
}

#read_pane_container.sentence-mode-pick-active #thetext span.word {
    cursor: pointer;
}

#read_pane_container.sentence-mode-pick-active #thetext span.word:hover {
    background: rgba(255, 220, 120, 0.32);
    border-radius: 0.24rem;
    box-shadow: 0 0 0 1px rgba(195, 150, 57, 0.24);
}

#read_pane_container.sentence-mode-active #page_indicator,
#read_pane_container.sentence-mode-active .read-slide-container,
#read_pane_container.sentence-mode-active #reading-footer,
#read_pane_container.listening-mode-active #page_indicator,
#read_pane_container.listening-mode-active .read-slide-container,
#read_pane_container.listening-mode-active #reading-footer {
    display: none;
}

.sentence-mode-btn {
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 14px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
}

.sentence-mode-btn:disabled {
    color: #999;
    border-color: #ddd;
    cursor: default;
}

#sentence_indicator {
    font-size: 0.9rem;
    font-weight: 500;
}

#sentence_mode_content {
    padding-bottom: clamp(5rem, 14vh, 8rem);
}

.sentence-translation-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 0.8rem;
}

.sentence-audio-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 1rem;
}

.sentence-audio-controls-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.sentence-audio-button {
    width: 3.5rem;
    height: 3.5rem;
    border: none;
    border-radius: 999px;
    background: var(--audio-control-bg);
    color: var(--audio-control-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.sentence-audio-button:hover {
    transform: translateY(-1px);
    background: var(--audio-control-bg-hover);
}

.sentence-audio-button.is-disabled,
.sentence-audio-button:disabled {
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: not-allowed;
    transform: none;
}

.sentence-audio-button.is-blocked {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    box-shadow: inset 0 0 0 1px var(--color-danger-border);
}

.sentence-audio-button.is-blocked .sentence-audio-icon {
    width: 1.2rem;
    height: 1.2rem;
    background: transparent;
    border: 2px solid currentColor;
    border-radius: 50%;
    mask: none;
    -webkit-mask: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sentence-audio-button.is-blocked .sentence-audio-icon::before {
    content: "!";
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
}

.sentence-audio-button.loading {
    background: var(--audio-control-bg-active);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.sentence-audio-button.playing {
    background: var(--audio-control-bg-active);
    color: var(--audio-control-text-active);
    box-shadow: 0 0 0 6px var(--color-focus-ring);
}

.sentence-audio-speed-control {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.sentence-audio-speed-control.is-disabled {
    opacity: 0.5;
}

.sentence-audio-speed-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--audio-chip-bg);
    color: var(--audio-chip-text);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sentence-audio-speed-segments {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: var(--audio-speed-bg);
    box-shadow: inset 0 0 0 1px var(--audio-speed-border);
}

.sentence-audio-speed-option {
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--audio-speed-option-text);
    cursor: pointer;
    min-width: 3.35rem;
    min-height: 2.15rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 700;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.sentence-audio-speed-option:hover {
    color: var(--audio-speed-option-hover-text);
    transform: translateY(-1px);
}

.sentence-audio-speed-option.is-active {
    background: var(--audio-speed-option-active-bg);
    color: var(--audio-speed-option-active-text);
    box-shadow: 0 6px 14px rgba(52, 76, 102, 0.14);
}

.sentence-audio-speed-option:focus-visible {
    outline: 2px solid var(--color-focus-border);
    outline-offset: 1px;
}

.sentence-audio-speed-option:disabled {
    cursor: not-allowed;
    transform: none;
}

.sentence-audio-icon {
    width: 1.45rem;
    height: 1.45rem;
    background-color: currentColor;
    mask: url("/static/icn/volume.svg") center / contain no-repeat;
    -webkit-mask: url("/static/icn/volume.svg") center / contain no-repeat;
}

.sentence-audio-button.loading .sentence-audio-icon {
    animation: sentence-audio-pulse 1.1s ease infinite;
}

.sentence-audio-status {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.sentence-audio-status.error {
    color: var(--color-danger-text);
}

.sentence-audio-status.hide {
    display: none;
}

@keyframes sentence-audio-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.92); opacity: 0.66; }
    100% { transform: scale(1); opacity: 1; }
}

.sentence-translation-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-soft);
    cursor: pointer;
    font-size: 0.98rem;
    text-decoration: underline;
    text-underline-offset: 0.15rem;
}

.sentence-translation-toggle:hover {
    color: var(--color-text-strong);
}

.sentence-translation-toggle.is-disabled,
.sentence-translation-toggle:disabled {
    color: var(--color-text-faint);
    cursor: not-allowed;
    text-decoration: none;
}

.sentence-translation-chevron {
    font-size: 0.8rem;
    transition: transform 0.16s ease;
}

.sentence-translation-toggle.expanded .sentence-translation-chevron {
    transform: rotate(180deg);
}

.sentence-translation-output {
    max-width: min(100%, 48rem);
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--color-primary-border);
    border-radius: 0 8px 8px 0;
    background: var(--color-surface-muted);
    color: var(--color-text);
    line-height: 1.5;
}

.sentence-translation-status {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.sentence-translation-status.error {
    color: var(--color-danger-text);
}

.sentence-translation-output.hide,
.sentence-translation-status.hide {
    display: none;
}

.sentence-ai-panel {
    container-type: inline-size;
    margin: 1.3rem auto clamp(2.75rem, 7vh, 5rem);
    width: min(calc(100% - clamp(2rem, 6vw, 5rem)), 54rem);
    box-sizing: border-box;
    padding: clamp(1.05rem, 2.4vw, 1.45rem);
    border: 1px solid #d9e4ef;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(115, 187, 255, 0.14), transparent 28%),
        linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-hover) 100%);
    box-shadow: 0 14px 30px rgba(18, 38, 57, 0.08);
}

@media screen and (max-width: 640px) {
    .sentence-ai-panel {
        width: calc(100% - 1.5rem);
        margin-top: 1rem;
        margin-bottom: 2.25rem;
        padding: 0.9rem;
        border-radius: 18px;
    }
}

.sentence-ai-panel.hide {
    display: none;
}

.sentence-ai-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.sentence-ai-panel-kicker {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.52rem;
    border-radius: 999px;
    background: rgba(53, 120, 196, 0.12);
    color: #235786;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sentence-ai-panel-title {
    margin: 0.48rem 0 0.16rem;
    color: #15314e;
    font-size: 1.18rem;
}

.sentence-ai-panel-help {
    margin: 0;
    color: #617488;
    line-height: 1.5;
}

.sentence-ai-panel-model {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(187, 206, 225, 0.9);
    color: #39566f;
    font-size: 0.76rem;
    font-weight: 700;
}

.sentence-ai-context-card {
    margin-top: 0.9rem;
    padding: 0.82rem 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(210, 223, 237, 0.95);
}

.sentence-ai-context-label {
    display: inline-flex;
    color: #5a7287;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sentence-ai-context-text {
    margin: 0.4rem 0 0;
    color: #17324f;
    line-height: 1.7;
}

.sentence-ai-context-mount {
    margin-top: 0.42rem;
}

.sentence-ai-context-mount #sentence_mode_content {
    padding-bottom: 0;
}

.sentence-ai-context-mount #sentence_mode_content p {
    margin: 0;
}

.sentence-ai-context-mount .sentence-audio-container {
    margin-top: 0.85rem;
}

.sentence-ai-context-mount .sentence-translation-container {
    margin-top: 0.7rem;
}

.sentence-ai-messages {
    margin-top: 0.9rem;
    max-height: 22rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-right: 0.1rem;
}

.sentence-ai-messages.hide {
    display: none;
}

.sentence-ai-empty-state {
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px dashed #c8d9ea;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.sentence-ai-message {
    max-width: min(100%, 42rem);
    padding: 0.78rem 0.9rem 0.82rem;
    border-radius: 18px;
    border: 1px solid transparent;
    box-shadow: 0 8px 18px rgba(19, 38, 57, 0.06);
}

.sentence-ai-message.is-user {
    align-self: flex-end;
    background: var(--button-primary-bg);
    color: var(--color-surface);
}

.sentence-ai-message.is-assistant {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--color-border-muted);
    color: var(--color-text-strong);
}

.sentence-ai-message-label {
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.82;
}

.sentence-ai-message-body {
    line-height: 1.6;
    white-space: normal;
    word-break: break-word;
}

.sentence-ai-status {
    margin-top: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.sentence-ai-status.error {
    color: var(--color-danger-text);
}

.sentence-ai-status.hide {
    display: none;
}

.sentence-ai-form {
    margin-top: 0.9rem;
}

.sentence-ai-form-label {
    display: block;
    margin-bottom: 0.38rem;
    color: var(--color-text-strong);
    font-size: 0.9rem;
    font-weight: 700;
}

.sentence-ai-input {
    width: 100%;
    min-height: 6.4rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 16px;
    background: var(--color-surface);
    color: var(--color-text-strong) !important;
    -webkit-text-fill-color: var(--color-text-strong);
    caret-color: var(--color-text-strong);
    opacity: 1;
    text-shadow: none;
    padding: 0.84rem 0.95rem;
    font-size: 1rem;
    line-height: 1.55;
    resize: vertical;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    box-sizing: border-box;
}

.sentence-ai-input:focus {
    outline: none;
    border-color: var(--color-focus-border);
    box-shadow: 0 0 0 4px rgba(120, 171, 223, 0.16);
}

.sentence-ai-input:disabled {
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
}

.sentence-ai-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.72rem;
}

.sentence-ai-submit {
    min-height: 2.8rem;
    padding: 0.62rem 1.05rem;
    border: 1px solid var(--color-primary-border);
    border-radius: 13px;
    background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-surface-muted) 100%);
    color: var(--color-text-strong);
    font-weight: 700;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.sentence-ai-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(31, 72, 111, 0.1);
}

.sentence-ai-submit:disabled {
    cursor: default;
    opacity: 0.62;
    transform: none;
    box-shadow: none;
}

@container (max-width: 34rem) {
    .sentence-ai-panel-header {
        gap: 0.55rem;
    }

    .sentence-ai-panel-title {
        margin-top: 0.34rem;
        font-size: 1.06rem;
    }

    .sentence-ai-panel-help {
        line-height: 1.4;
    }

    .sentence-ai-panel-model {
        min-height: 1.7rem;
        padding: 0.22rem 0.52rem;
    }

    .sentence-ai-context-card,
    .sentence-ai-empty-state,
    .sentence-ai-message {
        padding: 0.56rem 0.68rem;
    }

    .sentence-ai-context-card,
    .sentence-ai-messages,
    .sentence-ai-form {
        margin-top: 0.58rem;
    }

    .sentence-ai-input {
        min-height: 4.2rem;
        padding: 0.6rem 0.72rem;
    }

    .sentence-ai-actions {
        margin-top: 0.56rem;
    }

    .sentence-ai-submit {
        min-height: 2.5rem;
        padding: 0.5rem 0.92rem;
    }
}

.shadowing-panel {
    margin: 1rem auto 0;
    width: min(100%, 54rem);
    padding: 1rem 1.05rem;
    border: 1px solid #e3d5b7;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(245, 183, 76, 0.16), transparent 30%),
        linear-gradient(180deg, #fffdf8 0%, #fbf6ea 100%);
    box-shadow: 0 14px 30px rgba(65, 46, 16, 0.08);
}

.shadowing-panel.hide,
.shadowing-status.hide {
    display: none;
}

.shadowing-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.shadowing-panel-kicker {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.52rem;
    border-radius: 999px;
    background: rgba(166, 121, 35, 0.13);
    color: #775313;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.shadowing-panel-title {
    margin: 0.48rem 0 0.16rem;
    color: #35270f;
    font-size: 1.18rem;
}

.shadowing-panel-help {
    margin: 0;
    color: var(--color-warning-text);
    line-height: 1.5;
}

.shadowing-ai-rank-btn,
.shadowing-icon-btn {
    min-height: 2.35rem;
    border: 1px solid #d1b474;
    border-radius: 8px;
    background: #fff9ea;
    color: #4d3811;
    font-weight: 800;
    cursor: pointer;
}

.shadowing-ai-rank-btn {
    padding: 0.48rem 0.82rem;
}

.shadowing-ai-rank-btn:hover,
.shadowing-icon-btn:hover {
    background: #fff0ca;
}

.shadowing-ai-rank-btn:disabled {
    opacity: 0.58;
    cursor: default;
}

.shadowing-status {
    margin-top: 0.8rem;
    color: var(--color-warning-text);
    font-size: 0.92rem;
}

.shadowing-status.error {
    color: var(--color-danger-text);
}

.shadowing-list {
    margin-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
}

.shadowing-empty-state {
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px dashed #dbc89e;
    color: var(--color-warning-text);
    line-height: 1.55;
}

.shadowing-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.82rem 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(223, 204, 161, 0.95);
}

.shadowing-item-main {
    min-width: 0;
}

.shadowing-item-text {
    margin: 0;
    color: #2f2411;
    line-height: 1.65;
}

.shadowing-item-pronunciation {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    margin-top: 0.38rem;
    color: #6f5b32;
    font-size: 0.92rem;
    line-height: 1.45;
}

.shadowing-pronunciation-part {
    display: inline-flex;
    align-items: baseline;
    gap: 0.28rem;
    padding: 0.1rem 0.42rem;
    border-radius: 999px;
    background: #f8efd9;
}

.shadowing-pronunciation-term {
    font-weight: 700;
}

.shadowing-pronunciation-reading {
    color: #8a6b2b;
}

.shadowing-item-meta,
.shadowing-item-focus {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
    color: #71654f;
    font-size: 0.8rem;
    font-weight: 700;
}

.shadowing-item-pill,
.shadowing-item-focus span {
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: #f4ecd9;
}

.shadowing-item-reason {
    margin: 0.5rem 0 0;
    color: var(--color-warning-text);
    font-size: 0.9rem;
    line-height: 1.45;
}

.shadowing-item-actions {
    display: flex;
    gap: 0.45rem;
    flex-shrink: 0;
}

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

.shadowing-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.shadowing-icon-play {
    -webkit-mask: url("/static/icn/play.svg") center / contain no-repeat;
    mask: url("/static/icn/play.svg") center / contain no-repeat;
}

.shadowing-icon-pause {
    display: none;
    -webkit-mask: url("/static/icn/pause.svg") center / contain no-repeat;
    mask: url("/static/icn/pause.svg") center / contain no-repeat;
}

.shadowing-icon-loop {
    background-color: transparent;
    background-image: url("/static/icn/arrow-repeat.png");
}

.shadowing-play-btn.is-playing .shadowing-icon-play {
    display: none;
}

.shadowing-play-btn.is-playing .shadowing-icon-pause {
    display: block;
}

.shadowing-loop-btn.is-active {
    background: #e6b95d;
    border-color: #c99a3c;
    color: #2f2108;
}

.listening-mode-panel {
    margin-top: 1.15rem;
    max-width: min(100%, 50rem);
    padding: 1.05rem 1.1rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-muted) 100%);
    box-shadow: 0 10px 24px rgba(20, 38, 58, 0.06);
    box-sizing: border-box;
}

.listening-mode-header {
    margin-bottom: 0.75rem;
}

.listening-mode-kicker {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.48rem;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.listening-mode-title {
    margin: 0.48rem 0 0.2rem;
    color: var(--color-text-strong);
    font-size: 1.28rem;
}

.listening-mode-help {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.listening-mode-help code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    padding: 0.05rem 0.32rem;
    border-radius: 6px;
    background: var(--color-primary-soft);
    color: var(--color-text-strong);
    font-weight: 700;
}

.listening-mode-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-text-strong);
    font-size: 0.9rem;
    font-weight: 700;
}

.listening-mode-input {
    display: block;
    width: min(100%, 36rem);
    max-width: 100%;
    min-height: 6rem;
    border: 1px solid var(--input-border);
    border-radius: 14px;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.82rem 0.95rem;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.55;
    resize: vertical;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.listening-mode-input:focus {
    outline: none;
    border-color: var(--color-focus-border);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.listening-mode-input[readonly] {
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
}

.listening-mode-actions {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.78rem;
}

.listening-mode-submit,
.listening-mode-next {
    min-height: 2.7rem;
    padding: 0.58rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--button-border);
    background: var(--color-surface);
    color: var(--button-text);
    font-weight: 700;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.listening-mode-submit {
    background: var(--button-primary-bg);
    border-color: var(--button-primary-border);
    color: var(--button-primary-text);
}

.listening-mode-submit:hover,
.listening-mode-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(26, 48, 72, 0.08);
}

.listening-mode-submit:disabled,
.listening-mode-next:disabled {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: default;
    transform: none;
    box-shadow: none;
}

.listening-mode-feedback {
    margin-top: 1rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--color-border-muted);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.listening-mode-feedback.hide {
    display: none;
}

.listening-mode-feedback-section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.listening-mode-feedback-label {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.listening-mode-feedback-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.listening-feedback-token,
.listening-feedback-empty {
    display: inline-flex;
    align-items: center;
    min-height: 1.45em;
    padding: 0.08em 0.36em;
    border-radius: 999px;
    line-height: 1.25;
}

.listening-feedback-token,
.listening-feedback-token.textitem {
    font-size: var(--lute-reading-font-size, 16px);
    font-family: inherit;
    font-weight: normal;
}

.listening-feedback-empty {
    font-weight: 700;
}

.listening-feedback-token.is-correct {
    background: var(--color-success-soft);
    color: var(--color-success-text);
}

.listening-feedback-token.is-incorrect {
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
}

.listening-feedback-token.is-missing {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.listening-feedback-empty {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.view-mode-menu,
.reading-chapter-menu {
    position: relative;
}

.sentence-ai-toggle-btn {
    width: 42px;
    min-width: 42px;
    height: 32px;
    border: 1px solid var(--reading-control-border);
    border-radius: 14px;
    background: var(--reading-control-bg);
    color: var(--reading-control-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.sentence-ai-toggle-btn:hover {
    transform: translateY(-1px);
    border-color: var(--reading-control-border-hover);
    background: var(--reading-control-bg-hover);
    box-shadow: var(--reading-control-shadow);
}

.sentence-ai-toggle-btn.is-active {
    background: var(--reading-control-active-bg);
    border-color: var(--reading-control-active-border);
    color: var(--reading-control-active-text);
}

.sentence-ai-toggle-btn.is-disabled,
.sentence-ai-toggle-btn:disabled {
    opacity: 0.56;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.sentence-ai-toggle-btn.hide {
    display: none;
}

.sentence-ai-toggle-icon {
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1;
}

.view-mode-icon-btn,
.reading-chapter-icon-btn {
    position: relative;
    min-width: 56px;
    height: 32px;
    border: 1px solid var(--reading-control-border);
    border-radius: 14px;
    background: var(--reading-control-bg);
    color: var(--reading-control-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.65rem;
    gap: 0.55rem;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.view-mode-icon-btn:hover,
.view-mode-menu.is-open .view-mode-icon-btn,
.reading-chapter-icon-btn:hover,
.reading-chapter-menu.is-open .reading-chapter-icon-btn {
    border-color: var(--reading-control-border-hover);
    background: var(--reading-control-bg-hover);
    box-shadow: var(--reading-control-shadow);
}

.view-mode-icon-btn.hide {
    display: none;
}

.reading-chapter-icon-btn {
    min-width: 54px;
    gap: 0.44rem;
}

.view-mode-icon {
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: var(--reading-control-icon-filter);
}

.reading-chapter-icon {
    width: 1.08rem;
    height: 1.08rem;
    display: block;
    flex: 0 0 auto;
    background: currentColor;
    mask: url("/static/icn/book-chapters.svg") center / contain no-repeat;
    -webkit-mask: url("/static/icn/book-chapters.svg") center / contain no-repeat;
}

.view-mode-icon-btn[data-current-mode="sentence"] .view-mode-icon {
    background-image: url("/static/icn/text-column-one.svg");
}

.view-mode-icon-btn[data-current-mode="page"] .view-mode-icon {
    background-image: url("/static/icn/text-column-two.svg");
}

.view-mode-icon-btn[data-current-mode="listening"] .view-mode-icon {
    background-image: url("/static/icn/volume.svg");
}

.view-mode-icon-btn[data-current-mode="shadowing"] .view-mode-icon {
    background-image: url("/static/icn/person-speaking.svg");
}

.view-mode-caret {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    display: inline-block;
    flex: 0 0 auto;
    margin-top: -2px;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.14s ease;
}

.view-mode-menu.is-open .view-mode-caret,
.reading-chapter-menu.is-open .view-mode-caret {
    margin-top: 2px;
    transform: rotate(-135deg);
}

.view-mode-dropdown,
.reading-chapter-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 170px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--reading-control-bg);
    border: 1px solid var(--reading-control-border);
    border-radius: 12px;
    padding: 0.35rem;
    box-shadow: var(--shadow-medium);
    z-index: 1200;
}

.view-mode-dropdown {
    width: min(18.5rem, calc(100vw - 1.5rem));
}

.reading-chapter-dropdown {
    left: 0;
    right: auto;
    width: min(21rem, calc(100vw - 2rem));
    max-height: min(24rem, calc(100vh - 9rem));
    overflow-y: auto;
}

.view-mode-dropdown.hide,
.reading-chapter-dropdown.hide {
    display: none;
}

.view-mode-option,
.view-mode-action,
.reading-chapter-option {
    width: 100%;
    min-height: 2.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--reading-control-text);
    cursor: pointer;
    text-align: left;
    font-weight: 600;
}

.view-mode-option:hover,
.view-mode-action:hover,
.reading-chapter-option:hover {
    background: var(--reading-control-bg-hover);
}

.view-mode-option.is-active,
.reading-chapter-option.is-active {
    background: var(--reading-control-active-bg);
    color: var(--reading-control-active-text);
}

.view-mode-divider {
    height: 1px;
    margin: 0.3rem 0.35rem;
    background: color-mix(in srgb, var(--reading-control-border) 72%, transparent);
}

.reading-chapter-option {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.16rem;
}

.reading-chapter-option-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reading-chapter-option-meta {
    color: color-mix(in srgb, currentColor 68%, transparent);
    font-size: 0.78rem;
    font-weight: 600;
}

.view-mode-option-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: var(--reading-control-icon-filter);
}

.view-mode-option-icon-page {
    background-image: url("/static/icn/text-column-two.svg");
}

.view-mode-option-icon-sentence {
    background-image: url("/static/icn/text-column-one.svg");
}

.view-mode-option-icon-listening {
    background-image: url("/static/icn/volume.svg");
}

.view-mode-option-icon-shadowing {
    background-image: url("/static/icn/person-speaking.svg");
}

.view-mode-option-icon-known {
    background-image: url("/static/icn/list-checks.svg");
}


/* STYLES FOR PAGE BOOKMARKS */
.read-bkm-btn {
    font-size: 1.6rem;
    color: var(--read-slider-color);
}

.read-bkm-btn {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    padding: 0;
    border-radius: 50%;
  
    background-color: white;
    cursor: pointer;
    user-select: none;
    --webkit-user-select: none;

    display: none; /*temporarily*/
}

/* .read-bookmark-buttons-container { */
    /* display: grid; */
    /* grid-template-columns: min-content min-content; */
    /* gap: 0.4rem; */
/* } */

/* #read-bkm-save-btn {
    background-image: url("/static/icn/bookmark-off.svg");
    height: 28px;
    width: 28px;

    border-radius: unset;
    background-size: 67%;
    background-color: transparent;
} */
  
/* #read-bkm-prev-btn {
    background-image: url("/static/icn/prev.svg");
    height: 28px;
    width: 28px;
}
  
#read-bkm-next-btn {
    background-image: url("/static/icn/next.svg");
    height: 28px;
    width: 28px;
} */

/* .read-bookmark-jump-container {
    display: flex;
    align-items: center;
    gap: 0.3rem;
} */

/* .read-bookmark-buttons-container {
    display: flex;
} */


/* COMMON FORM STYLES */
#text,
#translation,
#romanization,
#book #title, 
#book #source_uri,
#backup_dir, 
#mecab_path, 
#custom_styles,
#language input,
#comment {
    font-size: 0.9rem;
    font-family: inherit;
    padding: 0.2rem 0.2rem;
    border: 1px solid var(--form-border-color);
    border-radius: 14px;
    box-sizing: border-box;
}

/* GENERAL FORM STYLES */
input,
select,
textarea {
    font-family: inherit;
}

.form-control:not(select):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-control-narrower {
    min-height: 40px;
    box-sizing: border-box;
    padding: 0.58rem 0.72rem;
    border: 1px solid var(--input-border);
    border-radius: 14px;
    background-color: var(--input-bg);
    color: var(--color-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
    font: inherit;
    line-height: 1.35;
    transition: border-color 130ms ease, box-shadow 130ms ease, background-color 130ms ease;
}

.form-control:not(select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.form-control-narrower:focus {
    border-color: var(--color-focus-border);
    background-color: var(--input-bg-focus);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    outline: none;
}

.lute-select,
.dt-length select {
    width: 100%;
    min-height: var(--lute-select-min-height, 44px);
    min-width: 0;
    box-sizing: border-box;
    padding: var(--lute-select-padding, 0.66rem 2.4rem 0.66rem 0.78rem);
    border: 1px solid var(--input-border);
    border-radius: var(--lute-select-radius, 14px);
    background-color: var(--color-surface-subtle);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text-soft) 50%),
        linear-gradient(135deg, var(--color-text-soft) 50%, transparent 50%);
    background-position:
        calc(100% - 24px) calc(50% - 2px),
        calc(100% - 17px) calc(50% - 2px);
    background-size: 7px 7px, 7px 7px;
    background-repeat: no-repeat;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
    color: var(--button-text);
    font: inherit;
    line-height: 1.35;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 130ms ease, box-shadow 130ms ease, background-color 130ms ease;
}

.lute-select:focus,
.dt-length select:focus {
    border-color: var(--color-focus-border);
    background-color: var(--color-surface);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    outline: none;
}

.lute-custom-select-source {
    display: none !important;
}

.lute-custom-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.lute-custom-select-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    min-height: var(--lute-select-min-height, 44px);
    min-width: 0;
    padding: var(--lute-select-padding, 0.66rem 2.4rem 0.66rem 0.78rem);
    border: 1px solid var(--input-border);
    border-radius: var(--lute-select-radius, 14px);
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-subtle) 100%);
    box-shadow:
        inset 0 1px 0 var(--input-highlight-shadow, rgba(255, 255, 255, 0.26)),
        0 8px 18px var(--shadow-soft-color, rgba(20, 38, 58, 0.08));
    box-sizing: border-box;
    color: var(--button-text);
    cursor: pointer;
    font: inherit;
    line-height: 1.25;
    text-align: left;
    transition: border-color 130ms ease, box-shadow 130ms ease, background 130ms ease, transform 130ms ease;
}

.lute-custom-select-button:hover {
    border-color: var(--color-primary-border-soft);
    transform: translateY(-1px);
}

.lute-custom-select-button:focus {
    border-color: var(--color-focus-border);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    outline: none;
}

.lute-custom-select-button:disabled {
    cursor: wait;
    opacity: 0.7;
    transform: none;
}

.lute-custom-select-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lute-custom-select-caret {
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--color-text-soft);
    border-bottom: 2px solid var(--color-text-soft);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 130ms ease;
}

.lute-custom-select.is-open .lute-custom-select-caret {
    transform: rotate(225deg) translate(-1px, -1px);
}

.lute-custom-select-menu {
    position: fixed;
    z-index: 2005;
    display: grid;
    gap: 0.18rem;
    max-height: min(19rem, 52vh);
    margin: 0;
    padding: 0.38rem;
    border: 1px solid var(--color-border);
    border-radius: var(--lute-select-menu-radius, 16px);
    background: var(--color-surface);
    box-shadow: 0 18px 42px rgba(16, 41, 66, 0.16);
    box-sizing: border-box;
    list-style: none;
    overflow-y: auto;
}

.lute-custom-select-menu.hide {
    display: none;
}

.lute-custom-select-option {
    display: flex;
    align-items: center;
    min-height: 2.3rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    line-height: 1.25;
    text-align: left;
}

.lute-custom-select-option:hover,
.lute-custom-select-option:focus {
    background: var(--color-surface-hover);
    color: var(--color-text-strong);
    outline: none;
}

.lute-custom-select-option.is-selected {
    background: var(--color-primary-soft);
    color: var(--color-text-strong);
    font-weight: 750;
}

.arrow_only_dropdown {
    appearance: none; /* Hides default styling */
    width: 20px; /* Only show the dropdown arrow */
    overflow: hidden;
    border: none;
    background: none;
    cursor: pointer;
}

textarea {
    width: 100%;
    resize: both;
}

/* focus on fields makes border same as tags */
form input:focus,
form textarea:focus,
form select:not(.lute-select):focus {
    border: 1px solid var(--tagify__tag-bg) !important;
    outline: none !important;
}

form input[type="checkbox"]:focus,
form input[type="file"]:focus {
    outline: 1px solid var(--tagify__tag-bg) !important;
}

form input[type="checkbox"]:focus,
form input[type="file"]:focus {
    border: none !important;
}
/* / */

::placeholder {
    font-family: inherit;
    font-size: 0.8rem;
    color: #D8D8D8;
    opacity: 0.7;
}

:focus::placeholder {
    opacity: 1;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem 1rem;
    border: 1px solid var(--button-border);
    border-radius: 14px;
    background: var(--button-bg);
    color: var(--button-text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 16px var(--shadow-soft-color, rgba(20, 38, 58, 0.09));
    transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease;
    cursor: pointer;
    box-sizing: border-box;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px var(--shadow-medium-color, rgba(20, 38, 58, 0.14));
    text-decoration: none;
}

.btn-primary {
    border-color: var(--button-primary-border);
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    text-shadow: 0 1px 0 rgba(30, 64, 92, 0.25);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--button-primary-bg-hover);
}

/* TABLE STYLES */
th, td {
    padding: 2px;
}

tbody {
    vertical-align: top;
}

table input:not([type="checkbox"]) {
    width: 100%;
}

div#mappingContainer input:not([type="checkbox"]) {
    width: 40%;
}

.statsWordsRead th, 
.statsWordsRead td { 
    padding: 5px; 
}

#book,
#termimport,
#language,
.settingstable {
    width: 80%;
}

#edit-page-table {
    width: 50%;
}

#edit-page-table textarea {
    height: 18rem;
}

#termimport td:first-child,
.settingstable td:first-child {
    width: 20rem;
}

#shortcutstable th {
    text-align: left;
}

#shortcutstable .settingcategory {
    font-size: 1.2em;
    font-weight: bold;
}

#shortcutstable input[type=text] {
    max-width: 8rem;
}

.dupShortcut {
    background-color: #FFCCCB;
}

#book td:first-child,
#language td:first-child {
    width: 15rem;
}

#predefined-lang-container {
    margin-left: 0.3rem;
    margin-bottom: 0.4rem;
}

#predefined {
    margin-left: 5.3rem;
}

.smallfilename {
    font-size: 0.9em;
}

div.help-text {
    font-size: 0.8em;
    font-style: italic;
    color: gray !important;
}


/* TERM FORM STYLES */
#term-form-container {
    padding: 0.82rem 0.86rem 0.55rem;
}

#translation-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem 0.6rem;
}

#romanization {
    width: 100%;
}

#translation {
    height: 42px;
    min-height: 42px;
    vertical-align: top /* removes annoying extra space below */
}

#term {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
}

#term-bulk-form-fields {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#term-form #text {
    width: 100%;
}

#term #languageSel {
    display: flex;
    justify-content: space-between;
}

#load-dicts-btn {
    background: url("../icn/book-open-text.svg");
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    border: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 14px;
}

#load-dicts-btn:hover {
    background-color: var(--color-warning);
    filter: invert();
}

#status-container {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    align-items: center;
}

#sync-status-container {
    text-align: right;
}

input[type="checkbox"][disabled] + label {
  color: var(--color-text-faint);
}

#term-button-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.6rem;
}

.zoomableTermImage {
    transition: transform 0.2s; /* Animation */
    border-radius: var(--form-border-radius);
    border: 1px solid var(--form-border-color);
    box-sizing: border-box;
    width: 40px;
    display: none;
}

.clickedZoomableImage {
    border: 1px solid var(--color-danger);
}

.zoomableTermImage:hover {
    transform: scale(4) translate(-17px, 5px);
}

/* DICT TABS */
#dicttabs {
    display: flex;
    justify-content: space-between;
    background: var(--color-border-muted);
    border-bottom: 1px solid var(--color-border-strong);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 0.5rem 0.35rem 0 0.35rem;
}

#dicttabslayout {
    display: grid;
}

#dictframes {
    width: 100%;
    flex: 1;
    background: var(--color-surface);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    overflow: hidden;
}

#dict-menu-container {
    position: relative;
    border: 1px solid var(--color-primary-border-muted);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: none;
    left: 0;
    display: flex;
}

#dict-menu-container .dict-btn{
    height: 100%;
    border: none;
}

.dict-btn {
    position: relative;
    padding: 0.24rem 0.86rem;
    border: none;
    color: var(--color-text-soft);
    background-color: var(--color-surface-muted);
    box-sizing: border-box;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 1;
    overflow: hidden;
    white-space: nowrap;

    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 0.3rem;
}

.dict-btn:not(#dict-image-btn) {
    width: 100%;
}

#dicttabsstatic {
    display: flex;
    margin-left: 0.55rem;
}

/* after element is for hiding text at the edges */
#dicttabslayout .dict-btn::after,
#dicttabslayout .dict-menu-item::after {
    display: none;
}

#dicttabslayout .dict-menu-item::after {
    border-color: var(--color-panel-muted);
}

#dicttabslayout .dict-btn-active::after {
    border-color: var(--color-primary);
}

#dicttabslayout .dict-btn.dict-btn-external::after,
#dicttabslayout .dict-menu-item.dict-btn-external::after {
    border-right-width: 1.5rem;
}

#dicttabslayout .dict-btn-select.dict-btn-external::after {
    border-right-width: 2.6rem
}

#dicttabslayout .dict-btn:not(.dict-btn-active):not(.dict-btn.dict-btn-external):hover::after,
#dicttabslayout .dict-btn:not(.dict-btn-active):hover::after {
    border-color: var(--color-panel-muted);
}

.dict-btn-fav-img,
.dict-btn-list-img,
.dict-btn-external-img {
    height: 60%;
}

.dict-btn-list-img,
.dict-btn-external-img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0.4;
}

.dict-btn-list-img {
    /* src needs to be set here instead of js. explanation in createTabBtn */
    content: url("../icn/list.svg");
    right: 0;
    opacity: 1;
    /* add padding so clicking area is bigger */
    padding: 0.3rem;
}

.dict-btn-external-img{
    content: url("../icn/open.svg");
    right: 0.3rem;
}

.dict-btn-select .dict-btn-external-img {
    right: 1.4rem;
}

.dict-btn:not(.dict-btn-active):not(.dict-btn.dict-btn-external) img {
    opacity: 0.5;
}

.dict-btn:hover + #dict-select,
.dict-btn:not(.dict-btn-active):hover {
    background-color: var(--color-surface-hover);
}

#dict-image-btn:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text-strong);
}

.dict-btn.dict-btn-active,
.dict-btn.dict-btn-active + #dict-select {
    background-color: var(--color-surface);
    color: var(--color-text-strong);
    z-index: 2;
}

.dict-btn:not(.dict-btn-select):not(#dict-image-btn) {
    border: 1px solid var(--color-primary-border-muted);
    border-bottom: none;
    border-right: none;
}

#dicttabsstatic .dict-btn.dict-sentences-btn {
    width: 2.35rem;
    min-width: 2.35rem;
    border: 1px solid var(--color-primary-border-muted);
    border-bottom: none;
    justify-content: center;
    cursor: pointer;
}

#sentences-btn::before {
    content: "";
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    background-color: currentColor;
    mask: url("../icn/book-open-text.svg") center / contain no-repeat;
    -webkit-mask: url("../icn/book-open-text.svg") center / contain no-repeat;
}

#sentences-btn:not(.dict-btn-active):hover {
    background-color: var(--color-surface-hover);
}

#sentences-btn:focus {
    outline: none;
}

#sentences-btn:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-focus-border);
}

.dict-btn:not(#dict-image-btn):not(.dict-btn-select):last-of-type {
    border-right: 1px solid var(--color-primary-border-muted);
}

.dict-btn-active:not(.dict-btn-select):not(#dict-image-btn) {
    box-shadow: inset 0 0 0 2px var(--color-focus-border);
}

.dict-btn.dict-btn-external {
    color: var(--color-text-muted);
}

#dict-image-btn.dict-btn-active {
    background-color: var(--color-surface);
    color: var(--color-text-strong);
}

.dictframe {
    display: none;
    border: none;
    border-top: none;
}

.dict-active {
    display: block;

    width: 100%;
    height: 100%;
}

#dict-image-btn {
    width: 2.35rem;
    min-width: 2.35rem;
    border: 1px solid var(--color-primary-border-muted);
    border-bottom: none;
    justify-content: center;
    cursor: pointer;
}

#dict-image-btn::before {
    content: "";
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    background-color: currentColor;
    mask: url("../icn/images.svg") center / contain no-repeat;
    -webkit-mask: url("../icn/images.svg") center / contain no-repeat;
}

#dict-list-container.dict-list-hide {
    opacity: 0;
    pointer-events: none;
    /* clip-path: rect(0 0 0 114%); */
}

#dict-list-container {
    opacity: 1;
    pointer-events: unset;

    position: absolute;
    background-color: var(--color-surface);
    min-width: 100%;
    top: 100%;
    right: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid var(--color-primary-border-muted);
    border-top: none;
    box-sizing: border-box;
    box-shadow: 0 8px 16px rgba(22, 40, 60, 0.18);
    overflow: hidden; 

    transition: opacity 0.1s;
}

#dict-menu-container:hover .dict-btn-select:not(.dict-btn-active) {
    background-color: var(--reading-surface-muted);
}

#dict-menu-container:hover .dict-btn-select:not(.dict-btn-active)::after {
    border-color: var(--color-panel-muted);
}

.dict-btn-select {
    display: flex;
    justify-content: flex-end;
    padding-inline: 0.5rem;
}

.dict-menu-item {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    position: relative;
}

.dict-menu-item:hover {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

#dict-menu-container .dict-menu-item:hover::after {
    border-color: var(--color-primary);
}

/* STATUS RADIO */

#status input {
    display: none;
}

#status {
    display: flex;
    align-items: center;
    list-style: none;

    --status-select-color: #4e4f51c4;
    --status-hover-color: #4e4f5156;
}

#status label {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 30px;
    height: 30px;
    border: 1px solid #a5a5a5;
    color: var(--reading-text);

    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}

/* thicker border for Ign */
#status label[for="status-6"] {
    border-width: 2px;
    /* border-color: #a5a5a5; */
}
/* same as checked, but more transparent */
#status label:hover {
    box-shadow: inset 0 0 0 2px var(--status-hover-color);
    border: none;
}

#status label[for="status-6"]:hover {
    background-color: #f5c6c0;
}

#status input:checked + label {
    /* background-color: #6da8e8; */
    font-weight: 700;
    box-shadow: inset 0 0 0 2px var(--status-select-color);
    border: none;
}

#status #status-6:checked + label {
    background-color: var(--reading-status-98-bg);
}

#status #status-5:checked + label::after,
#status #status-6:checked + label::after {
    filter: invert(1);
}

/* move label back(border width amount) */
#status label[for="status-5"]:hover {
    padding-right: 1px;
}

#status label[for="status-0"]:hover {
    padding-left: 1px;
}

#status-0:checked + label {
    padding-left: 1px;
}

#status-5:checked + label {
    padding-right: 1px;
}

#status label[for="status-0"] {
    background-color: var(--reading-status-1-bg);

    border-top-left-radius: var(--form-border-radius);
    border-bottom-left-radius: var(--form-border-radius);

    border-right: none;
}

#status label[for="status-1"],
#status label[for="status-2"],
#status label[for="status-3"],
#status label[for="status-4"] {
    border-right: none;
    border-left: none;
}

#status label[for="status-1"] {
    background-color: var(--reading-status-2-bg);
}

#status label[for="status-2"] {
    background-color: var(--reading-status-3-bg);
}

#status label[for="status-3"] {
    background-color: var(--reading-status-4-bg);
}

#status label[for="status-4"] {
    background-color: var(--reading-status-5-bg);
}

#status label[for="status-5"] {
    background-color: var(--reading-status-99-bg);

    border-top-right-radius: var(--form-border-radius);
    border-bottom-right-radius: var(--form-border-radius);

    border-left: none;
}

#status label[for="status-6"] {
    background-color: var(--reading-bg);

    border-radius: var(--form-border-radius);

    margin-left: 10px;
}

/* hide Wkn and Ign */
#status label[for="status-5"],
#status label[for="status-6"] {
    font-size: 0;
}

#status label[for="status-5"]::after,
#status label[for="status-6"]::after {
    content: "";
    background-size: cover;
    background-repeat: no-repeat;
    width: 1.2rem;
    height: 1.2rem;
    /* color black */
    filter: invert(0);
}

#status label[for="status-5"]::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');
}

#status label[for="status-6"]::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636" /></svg>');
}

input[name='status']:disabled + label {
    color: grey; /* Make the label text grey */
    cursor: not-allowed; /* Change cursor to indicate non-interactivity */
    opacity: 0.6; /* Dim the appearance */
}

/* Modern term-form controls (read side panel + term pages) */
#term-form-container #term input[type="text"],
#term-form-container #term textarea,
#term-bulk-form-fields input[type="text"],
#term-bulk-form-fields textarea,
#term-bulk-form-fields select {
    border: 1px solid var(--input-border);
    border-radius: 14px;
    background: var(--color-surface-subtle);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    min-height: 42px;
    padding: 0.5rem 0.72rem;
    line-height: 1.25;
    transition: border-color 130ms ease, box-shadow 130ms ease, background-color 130ms ease;
}

#term-form-container #term textarea,
#term-bulk-form-fields textarea {
    border-radius: 14px;
    resize: vertical;
}

#term-form-container #term .tagify,
#term-bulk-form-fields .tagify {
    border: 1px solid var(--input-border);
    border-radius: 14px;
    background: var(--color-surface-subtle);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    min-height: 42px;
    padding: 4px 8px;
    transition: border-color 130ms ease, box-shadow 130ms ease, background-color 130ms ease;
}

#term-form-container #term input[type="text"]::placeholder,
#term-form-container #term textarea::placeholder,
#term-bulk-form-fields input[type="text"]::placeholder,
#term-bulk-form-fields textarea::placeholder {
    color: var(--input-placeholder);
    opacity: 0.95;
}

#term-form-container #term input[type="text"]:focus,
#term-form-container #term textarea:focus,
#term-bulk-form-fields input[type="text"]:focus,
#term-bulk-form-fields textarea:focus,
#term-bulk-form-fields select:focus,
#term-form-container #term .tagify--focus,
#term-bulk-form-fields .tagify--focus {
    border-color: var(--color-focus-border) !important;
    background: var(--color-surface);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    outline: none !important;
}

#term-form-container #term #translation,
#term-bulk-form-fields #translation {
    min-height: 58px;
}

#term-form-container #status-container,
#term-bulk-form-fields #status-container {
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

#term-form-container #status,
#term-bulk-form-fields #status {
    gap: 0;
    margin: 0;
    padding: 2px;
    border: 1px solid #cad8e8;
    border-radius: 14px;
    background: #eff4fa;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    flex-wrap: nowrap;
}

#term-form-container #status li,
#term-bulk-form-fields #status li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#term-form-container #status label,
#term-bulk-form-fields #status label {
    width: 31px;
    height: 31px;
    border: none;
    border-radius: 14px;
    margin: 0;
    font-size: 15px;
    line-height: 1;
    font-weight: 650;
    color: var(--button-text);
    transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease;
}

#term-form-container #status label:hover,
#term-bulk-form-fields #status label:hover {
    border: none;
    box-shadow: 0 0 0 1px rgba(32, 65, 95, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
    padding: 0;
}

#term-form-container #status input:checked + label,
#term-bulk-form-fields #status input:checked + label {
    border: none;
    box-shadow: 0 0 0 2px #6ea5d6, 0 2px 6px rgba(46, 78, 107, 0.18);
    color: #0f2940;
    transform: translateY(-1px);
    padding: 0;
}

#term-form-container #status label[for="status-0"],
#term-bulk-form-fields #status label[for="status-0"] {
    border-radius: 9px;
    background: #ffe39a;
}

#term-form-container #status label[for="status-1"],
#term-bulk-form-fields #status label[for="status-1"] {
    background: #f7e8b9;
}

#term-form-container #status label[for="status-2"],
#term-bulk-form-fields #status label[for="status-2"] {
    background: #f9efcf;
}

#term-form-container #status label[for="status-3"],
#term-bulk-form-fields #status label[for="status-3"] {
    background: #fcf5de;
}

#term-form-container #status label[for="status-4"],
#term-bulk-form-fields #status label[for="status-4"] {
    background: #f5f7e6;
}

#term-form-container #status label[for="status-5"],
#term-bulk-form-fields #status label[for="status-5"] {
    background: var(--color-surface);
    margin-left: 3px;
    font-size: 0;
}

#term-form-container #status label[for="status-6"],
#term-bulk-form-fields #status label[for="status-6"] {
    background: var(--color-surface);
    margin-left: 3px;
    border: none;
    font-size: 0;
}

#term-form-container #status label[for="status-5"]::after,
#term-bulk-form-fields #status label[for="status-5"]::after,
#term-form-container #status label[for="status-6"]::after,
#term-bulk-form-fields #status label[for="status-6"]::after {
    width: 13px;
    height: 13px;
}

#term-form-container #sync-status-container,
#term-bulk-form-fields #sync-status-container {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #4d6277;
    font-weight: 620;
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
}

#term-form-container #sync_status,
#term-bulk-form-fields #sync_status {
    width: 14px;
    height: 14px;
    accent-color: #5f9bd0;
    cursor: pointer;
}

#term-form-container #term-button-container,
#term-bulk-form-fields #term-button-container {
    gap: 0.4rem;
    margin-top: 0.25rem;
}

#term-form-container #term-button-container .btn,
#term-bulk-form-fields #term-button-container .btn {
    min-width: 72px;
    height: 30px;
    padding: 3px 10px;
    border-radius: 9px;
    border: 1px solid var(--button-border);
    background: linear-gradient(180deg, var(--color-surface) 0%, #f2f5f9 100%);
    color: var(--button-text);
    font-size: 12.5px;
    line-height: 1;
    font-weight: 620;
    box-shadow: 0 2px 6px var(--shadow-soft-color, rgba(20, 38, 58, 0.09));
    transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease;
}

#term-form-container #term-button-container .btn:hover,
#term-bulk-form-fields #term-button-container .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(20, 38, 58, 0.16);
}

#term-form-container #term-button-container .btn:active,
#term-bulk-form-fields #term-button-container .btn:active {
    transform: translateY(0);
}

#term-form-container #term-button-container .btn:focus-visible,
#term-bulk-form-fields #term-button-container .btn:focus-visible {
    outline: 2px solid #78abda;
    outline-offset: 2px;
}

#term-form-container #term-button-container #delete,
#term-bulk-form-fields #term-button-container #delete {
    border-color: #e8c0c0;
    background: linear-gradient(180deg, #fff6f6 0%, var(--color-danger-soft) 100%);
    color: #7b2e2e;
}

#term-form-container #term-button-container #delete:hover,
#term-bulk-form-fields #term-button-container #delete:hover {
    box-shadow: 0 5px 12px rgba(120, 40, 40, 0.2);
}

#term-form-container #term-button-container #btnsubmit,
#term-bulk-form-fields #term-button-container #btnsubmit {
    border-color: var(--button-primary-border);
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    text-shadow: 0 1px 0 rgba(30, 64, 92, 0.25);
}

#term-form-container #term-button-container #btnsubmit:hover,
#term-bulk-form-fields #term-button-container #btnsubmit:hover {
    background: var(--button-primary-bg-hover);
}

/* SETTINGS TABLE */
#custom_styles {
    height: 100px;
    font-size: 1rem;
    font-family: 'Courier New', Courier, monospace;
}

#txtSetParent,
#dict_tabs {
    width: 8rem;
    box-sizing: border-box;
    border: 1px solid var(--form-border-color);
    border-radius: 14px;
    padding: 0.5rem 0.72rem;
}


/* CREATE BOOK TABLE */
#book #text {
    height: 420px;
}


@media screen and (max-width: 980px) {

    #thetexttitle,
    div#thetext {
        padding: 0 1rem;
        padding-top: 2rem; /* Ensure space for first line */
        overflow: visible !important;
    }

    div#thetext p {
        line-height: 1.6; /* Prevents top/bottom clipping of tall characters */
    }

    .menu-icon {
        width: 2rem;
        height: 2rem;
    }

    .close-btn {
        padding: 1.3rem;
    }

    .read-pane-right-close-btn {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        transform: translateY(-100%);
        background-image: url("/static/icn/close-white.svg");
        background-color: var(--color-primary-hover-light);
        border-top-left-radius: 0;
        
        display: block;
    }

    .read-pane-right-close-btn:hover {
        background-color: var(--color-primary-hover-light);
    }

    #reading-header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        background: rgba(var(--background-color-rgb, 255, 255, 255), 0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        height: 8rem; /* Increased significantly to prevent clipping */
        z-index: 1001;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid var(--reading-border-muted);
        border-radius: var(--reading-header-radius);
        box-shadow: var(--reading-header-shadow);
    }

    div.ui-tooltip {
        z-index: 1002;
    }

    #read_pane_left {
        width: unset !important;
        margin-top: 8rem; /* Matches the reading-header height */
        padding-top: 1rem; /* Extra breathing room */
    }

    .sentence-ai-panel {
        margin-top: 9rem;
    }

    .reading_header_container {
        padding-right: 3.2em;
        padding-left: 3.2em;
        align-items: end;
        gap: 0.5rem;
        padding: 0.5rem 0.5rem 0 0.5rem;
    }

    .reading_header_left {
        align-items: flex-end;
    }

    div#read_pane_right {
        background: linear-gradient(180deg, var(--color-surface-hover) 0%, #f2f4f7 100%);
        border: 1px solid var(--color-border-muted);
        border-radius: 28px;
        box-shadow: var(--reading-bottom-pane-shadow);
        padding: 0.55rem;
        z-index: 1003;
        transform: translateY(100%);
        /* transition: all creates issues for drag resizing (laggy, slow)*/
        transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0), 
                    opacity 0.2s cubic-bezier(0.77,0.2,0.05,1.0);
        width: calc(100% - 1rem) !important;
        height: 100vh !important; /* unset height set when player is sticky */
        top: auto;
        bottom: 0;
        left: 0.5rem;
        opacity: 0;
        /* for touch drag resize to work */
        touch-action: none;
    }

    #read_pane_right::after {
        content: '';
        background-color: var(--color-primary-hover-light);
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
        width: 90%;
        height: 6px;
        border-radius: 999px;
        cursor: row-resize;
    }

    /*drag button*/
    #read_pane_right::before,
    .dictcontainer::before {
        content: '';
        background-color: var(--color-primary-hover-light);
        position: absolute;
        top: 0;
        cursor: row-resize;
        
        background-image: url("/static/icn/drag-handle.svg");
        background-position: center;
        background-repeat: no-repeat;
    }

    #read_pane_right::before {
        right: 0;
        transform: translate(0, -100%);
        width: 50px;
        height: 42px;
        border-top-left-radius: 5px;
        background-size: 91%;
    }

    .dictcontainer::before {
        left: 50%;
        width: 100px;
        height: 25px;
        transform: translate(-50%, -85%);
        background-size: 30%;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .dictcontainer::after {
        background-color: var(--color-primary-hover-light);
    }

    #dicttabs {
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        padding-top: 0.45rem;
    }

    #read-slider {
        height: 0.58rem;
    }

    #read-slider::-moz-range-thumb {
        width: 1.16rem;
        height: 1.16rem;
    }

    #read-slider::-webkit-slider-thumb {
        width: 1.16rem;
        height: 1.16rem;
    }

    .reading_header_mid_top {
        margin-left: 2.3rem;
        margin-right: 2.3rem;
        margin-bottom: 0.44rem;
    }

    .read_page_nav {
        width: 1.76rem;
        height: 1.76rem;
    }

    .read_page_nav::before {
        width: 0.64rem;
        height: 0.64rem;
        border-top-width: 0.2rem;
        border-right-width: 0.2rem;
    }

    .read-slide-container {
        gap: 0.46rem;
        padding: 0 0.35rem 0.08rem;
    }

    #sentence_mode_controls {
        margin-top: 0.2rem;
        gap: 0.4rem;
    }

    .sentence-mode-picker {
        padding: 0.5rem 0.5rem 0.8rem;
        gap: 0.75rem;
    }

    .sentence-mode-picker-cancel {
        width: 100%;
    }

    .sentence-mode-btn {
        padding: 0.15rem 0.45rem;
    }

    .view-mode-icon-btn {
        min-width: 52px;
        height: 30px;
        padding: 0 0.58rem;
        gap: 0.48rem;
    }

    .view-mode-icon {
        width: 15px;
        height: 15px;
    }

    .view-mode-dropdown {
        min-width: min(17.5rem, calc(100vw - 1.5rem));
    }

    #page_indicator,
    #headertexttitle {
        font-size: 1.1rem;
    }

    .reading_header_page {
        gap: 0.3rem;
    }

    span.hamburger {
        width: 24px;
        height: 5px;
    }

    .lutelogo_small {
        width: 62px;
    }

    .sentence-audio-controls-row {
        gap: 0.6rem;
        align-items: flex-start;
    }

    .sentence-audio-speed-segments {
        gap: 0.18rem;
        padding: 0.18rem;
    }

    .sentence-audio-speed-option {
        min-width: 3rem;
        min-height: 2.35rem;
        padding: 0.45rem 0.7rem;
    }

    .listening-mode-panel {
        padding: 0.9rem;
    }

    .listening-mode-input {
        width: 100%;
    }

    .listening-mode-actions {
        flex-direction: column;
        align-items: stretch;
    }

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

    .book-cards-controls {
        width: 100%;
        flex-wrap: wrap;
    }

    .book-cards-language-picker {
        flex: 1;
        min-width: 12rem;
    }

    .book-cards-language-trigger {
        width: 100%;
        justify-content: space-between;
    }

    .book-cards-language-menu {
        width: 100%;
        min-width: 0;
    }

    .book-cards-select,
    .book-cards-search {
        flex: 1;
        min-width: 9rem;
    }

    .book-cards-cta {
        text-align: center;
    }

    .book-cards-folder-input {
        width: 100%;
        min-width: 0;
    }

    .book-folder-grid {
        grid-template-columns: 1fr;
    }

    #booktable td:nth-child(2),
    #booktable th:nth-child(2),
    #booktable td:nth-child(3),
    #booktable th:nth-child(3) {
        display: none;
    }

    table#term {
        width: 100% !important;
    }
}


/* status stats */

.status-bar-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 100%;
    border-radius: 3px;
    box-sizing: border-box;
    background-color: #787878;
    border: 1px solid #787878;
}

#booktable td:has(.status-bar-container) {
    padding-right: 1.5rem;
}

.book-stats-ajax-cell {
    font-style: italic;
}

.status-bar-container-empty {
    border-color: #e6e6e6;
    background-color: var(--color-surface);
}

.status-bar {
    display: flex;
    align-items: center;
    height: 0.7rem;
    font-size: 0.8rem;
    box-sizing: border-box;
    /* saturate the colors  */
    filter: saturate(2.4) brightness(0.95); 
}

.status-bar0 {
    background-color: var(--reading-status-0-bg);
}

.status-bar1 {
    background-color: var(--reading-status-1-bg);
}

.status-bar2 {
    background-color: var(--reading-status-2-bg);
}

.status-bar3 {
    background-color: var(--reading-status-3-bg);
}

.status-bar4 {
    background-color: var(--reading-status-4-bg);
}

.status-bar5 {
    background-color: var(--reading-status-5-bg);
}

.status-bar98 {
    background-color: var(--reading-status-98-bg);
    filter: saturate(1.4);
}

.status-bar99 {
    background-color: var(--reading-status-99-bg);
    filter: saturate(1.4);
}

#booktable td {
    vertical-align: middle;
}


.term-listing-image {
    max-width: 250px;
    max-height: 250px;
}

/** Term listing (/term) action dropdown. ********************/

table#termtable .tagify,
table#termtable .translationDiv {
    border: 1px solid transparent;  /* Prevent elements pushing others around on hover. */
    box-sizing: border-box;
}

table#termtable .tagify:hover,
table#termtable .translationDiv:hover {
    border: 1px solid;
}

.term-action-container {
    display: flex;
}

#bulkEditDiv {
    margin: 0;
    width: auto;
    border: none;
}

/* The container <div> to position the dropdown content */
.terms-page .term-action-dropdown {
    position: relative;
    display: inline-block;
}

.terms-page .term-action-button {
    min-width: 138px;
    padding: 0.8rem 1.1rem;
    font-size: 0.95rem;
}

/* Dropdown Content (Hidden by Default) */
.terms-page .term-action-content {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    background: var(--color-surface);
    min-width: 190px;
    box-shadow: 0 10px 24px rgba(20, 38, 58, 0.10);
    z-index: 1;
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 18px;
    padding: 0.45rem;
}

.terms-page .term-action-content a {
    text-decoration: none;
    color: var(--color-text);
    padding: 0.8rem 0.9rem;
    display: block;
    border-radius: 12px;
}

.terms-page .term-action-content a:hover {
    background-color: var(--color-surface-muted);
}

.terms-page .term-action-content a.actionDisabled {
    color: #9ba5af;
}

.terms-page .terms-column-picker {
    position: relative;
}

.terms-page .terms-column-picker-button {
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--button-text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.65rem 0.95rem;
    min-width: 126px;
    transition: transform 130ms ease, box-shadow 130ms ease, background-color 130ms ease;
}

.terms-page .terms-column-picker-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20, 38, 58, 0.10);
    background: var(--color-surface-hover);
}

.terms-page .terms-column-picker-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 5;
    min-width: 190px;
    padding: 0.45rem;
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 10px 24px rgba(20, 38, 58, 0.10);
}

.terms-page .terms-column-picker.is-open .terms-column-picker-menu {
    display: grid;
    gap: 0.1rem;
}

.terms-page .terms-column-picker-menu label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.6rem;
    border-radius: 14px;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
}

.terms-page .terms-column-picker-menu label:hover {
    background: var(--color-surface-muted);
}

.terms-page .terms-column-picker-menu input {
    width: 1rem;
    height: 1rem;
}

.terms-page .terms-column-picker-menu button {
    margin-top: 0.35rem;
    border: 1px solid var(--color-primary-border-soft);
    border-radius: 14px;
    background: var(--color-surface-hover);
    color: var(--button-text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.55rem 0.6rem;
}

.terms-page .terms-column-picker-menu button:hover {
    background: var(--color-primary-soft);
}

/* Hover shows content. */
.terms-page .term-action-dropdown:hover .term-action-content {
    display: block;
}

div#termtable_wrapper div.dt-buttons {
    display: none;
}

.terms-page-card--bulk-edit {
    background: var(--color-surface);
    border-color: var(--color-primary-border-soft);
}

.terms-page-card--table {
    overflow-x: auto;
}

.terms-page-card--table #termtable_wrapper {
    margin-top: 0.2rem;
}

.terms-page-card--table table#termtable {
    width: 100% !important;
    min-width: 940px;
    table-layout: fixed;
}

.terms-page-card--table .dt-layout-row:first-child {
    margin-bottom: 1rem;
}

.terms-page-card--table .dt-layout-cell {
    align-items: center;
}

.terms-page-card--table .dt-search input,
.terms-page-card--table .dt-length select {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    min-height: 42px;
    padding: 0.5rem 0.8rem;
    color: var(--button-text);
}

.terms-page-card--table table.dataTable thead th {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-strong);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.terms-page-card--table table.dataTable thead > tr > th.dt-orderable-asc,
.terms-page-card--table table.dataTable thead > tr > th.dt-orderable-desc,
.terms-page-card--table table.dataTable thead > tr > th.dt-ordering-asc,
.terms-page-card--table table.dataTable thead > tr > th.dt-ordering-desc {
    padding-right: 24px;
}

.terms-page-card--table table.dataTable thead > tr > th:first-child {
    padding-right: 10px !important;
}

.terms-page-card--table table.dataTable thead > tr > th:first-child span.dt-column-order {
    display: none !important;
}

.terms-page-card--table table.dataTable thead > tr > th span.dt-column-order {
    right: 8px;
    top: 50%;
    bottom: auto;
    height: 18px;
    transform: translateY(-50%);
    width: 10px;
}

.terms-page-card--table table.dataTable thead > tr > th span.dt-column-title {
    color: var(--color-text-strong);
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terms-page-card--table table.dataTable thead > tr > th span.dt-column-order:before,
.terms-page-card--table table.dataTable thead > tr > th span.dt-column-order:after {
    content: "";
    left: 0;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--color-text-muted);
    border-bottom: 1.5px solid var(--color-text-muted);
    opacity: 0.45;
    line-height: 1;
}

.terms-page-card--table table.dataTable thead > tr > th span.dt-column-order:before {
    top: calc(50% - 8px);
    transform: rotate(225deg);
}

.terms-page-card--table table.dataTable thead > tr > th span.dt-column-order:after {
    top: calc(50% + 1px);
    transform: rotate(45deg);
}

.terms-page-card--table table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
.terms-page-card--table table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after {
    opacity: 0.95;
    border-color: var(--color-text-strong);
}

.terms-page-card--table table.dataTable thead th,
.terms-page-card--table table.dataTable tbody td {
    box-sizing: border-box;
}

.terms-page-card--table table.dataTable tbody td {
    vertical-align: middle;
}

.terms-page-card--table table.dataTable tbody tr:hover {
    background-color: var(--color-surface-hover);
}

.terms-page-card--table .terms-col-select {
    width: 36px;
}

.terms-page-card--table .terms-col-term {
    width: var(--terms-term-col-width, 9rem);
    max-width: 14rem;
}

.terms-page-card--table .terms-col-pronunciation {
    width: 6.5rem;
    max-width: 6.5rem;
    font-family: "Inter", "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-kerning: normal;
    letter-spacing: 0;
    word-spacing: normal;
}

.terms-page-card--table .terms-pronunciation-text {
    display: inline-block;
    font-family: "Inter", "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    letter-spacing: 0;
    word-spacing: normal;
    white-space: nowrap;
}

.terms-page-card--table .terms-col-parents {
    width: 8rem;
    max-width: 8rem;
}

.terms-page-card--table .terms-col-translation {
    width: 16rem;
    max-width: 16rem;
}

.terms-page-card--table .terms-col-tags {
    width: 7rem;
    max-width: 7rem;
}

.terms-page-card--table .terms-col-status {
    width: 7rem;
    min-width: 7rem;
    max-width: 7rem;
}

.terms-page-card--table .terms-col-frequency {
    width: 4.5rem;
    max-width: 4.5rem;
    text-align: right;
}

.terms-page-card--table .terms-col-language {
    width: 6rem;
    max-width: 6rem;
}

.terms-page-card--table .terms-col-added {
    width: 6rem;
    max-width: 6rem;
    white-space: nowrap;
}

.terms-page-card--table .terms-cell-link,
.terms-page-card--table .terms-cell-text,
.terms-page-card--table .translationDiv {
    display: block;
    font: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terms-page-card--table .terms-col-pronunciation,
.terms-page-card--table .terms-col-parents,
.terms-page-card--table .terms-col-translation,
.terms-page-card--table .terms-col-tags,
.terms-page-card--table .terms-col-language {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terms-page-card--table .terms-cell-term-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.terms-page-card--table .terms-cell-term-wrap .terms-cell-link {
    flex: 1 1 auto;
    min-width: 0;
}

.terms-page-card--table .terms-term-usage-btn {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-primary-border-muted);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    position: relative;
    opacity: 0;
    transform: translateX(-6px) scale(0.92);
    pointer-events: none;
    transition: opacity 160ms ease, transform 180ms ease, background-color 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
}

.terms-page-card--table .terms-term-usage-btn::before {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    margin: 0.48rem auto 0;
    background-color: currentColor;
    mask: url("../icn/book-open-text.svg") center / contain no-repeat;
    -webkit-mask: url("../icn/book-open-text.svg") center / contain no-repeat;
}

.terms-page-card--table td:hover .terms-term-usage-btn,
.terms-page-card--table .terms-cell-term-wrap:focus-within .terms-term-usage-btn {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.terms-page-card--table .terms-term-usage-btn:hover,
.terms-page-card--table .terms-term-usage-btn:focus-visible {
    background: var(--color-surface-hover);
    border-color: var(--color-primary-border);
    color: var(--color-text);
    box-shadow: 0 8px 18px rgba(20, 38, 58, 0.10);
    outline: none;
}

.terms-page-card--table .terms-cell-link,
.terms-page-card--table .terms-cell-link:link,
.terms-page-card--table .terms-cell-link:visited {
    color: var(--button-text);
    text-decoration: none;
}

.terms-page-card--table .terms-cell-link:hover,
.terms-page-card--table .terms-cell-link:focus {
    color: var(--color-text-strong);
    text-decoration: underline;
}

.terms-page-card--table .translationDiv:focus {
    overflow: visible;
    white-space: normal;
}

.terms-page-card--table table#termtable .tagify {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
}

.terms-page-card--table table#termtable .tagify__tag {
    min-width: 0;
    max-width: 100%;
}

.terms-page-card--table table#termtable .tagify__tag-text,
.terms-page-card--table table#termtable .tagify__input {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terms-page-card--table table#termtable .term-status-select {
    width: 100%;
    min-width: 0;
    padding-left: 0.45rem;
    padding-right: 1.6rem;
    background-position:
        calc(100% - 15px) calc(50% - 2px),
        calc(100% - 10px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
}

@media (max-width: 920px) {
    .terms-page-toolbar,
    .terms-page-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .terms-page .term-action-dropdown,
    .terms-page .term-action-button,
    .terms-page .terms-column-picker,
    .terms-page .terms-column-picker-button {
        width: 100%;
    }

    .terms-page .term-action-content,
    .terms-page .terms-column-picker-menu {
        left: 0;
        right: auto;
        width: min(100%, 320px);
    }
}

@media (max-width: 640px) {
    .terms-page-toolbar,
    .terms-page-card {
        padding: 1.1rem;
        border-radius: 20px;
    }

    .terms-page .terms-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .terms-page .terms-filter-tile--language,
    .terms-page .terms-filter-tile--toggle,
    .terms-page .terms-filter-tile--age,
    .terms-page .terms-filter-tile--status {
        grid-column: span 1;
    }

    .terms-page .terms-filter-split {
        grid-template-columns: 1fr;
    }

    .terms-page .terms-filter-subfield + .terms-filter-subfield {
        border-left: none;
        border-top: 1px solid var(--color-border-muted);
    }

    .terms-page .terms-filter-input-small {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .terms-page .terms-filter-grid {
        grid-template-columns: 1fr;
    }

    .term-status-modal-dialog {
        width: calc(100vw - 1rem);
        margin-top: 2vh;
        padding: 1rem;
        border-radius: 20px;
    }

    .term-status-modal-body {
        grid-template-columns: 1fr;
    }

    .term-status-modal-body.is-loading {
        grid-template-columns: 1fr;
    }

    .term-status-modal-chart-shell {
        min-height: 220px;
    }

    .term-status-modal-loading-card {
        max-width: none;
        padding: 1rem 0 0;
        border-left: 0;
        border-top: 3px solid var(--color-primary);
    }
}

.ajax-saved-checkmark {
    position: fixed;            /* JS now uses fixed coords (getBoundingClientRect) */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    background: var(--color-success);
    color: var(--color-surface);
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;             /* neutral – flex handles centering */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    pointer-events: none;       /* never intercept clicks */
    z-index: 9999;
}

/** Term image search ****************/

div#termimagesearch p.termimagesearchtitle {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

div#termimagesearch .initial {
    border: solid 2px transparent;
}

div#termimagesearch .highlight {
    border: solid 2px var(--color-danger) !important;
}

div#termimagesearch .saved {
    border: solid 2px var(--color-success) !important;
}

div#termimagesearch span > img {
    display:inline;
}

div#termimagesearch span.imageAction {
    text-decoration: underline;
}

div#termimagesearch span.imageAction:hover {
    color: var(--reading-link-hover);
    cursor: pointer;
}


/* Reading sidebar full redesign */
div#read_pane_right {
    grid-template-rows: 40% 1fr;
    row-gap: 0;
    padding: 0;
    border-radius: 30px;
    border: 1px solid #d6dbe4;
    overflow: hidden;
    background: #f1f2f4;
    box-shadow: var(--reading-right-pane-shadow);
}

div#read_pane_right::after {
    width: 6px;
    background: rgba(120, 172, 217, 0.42);
}

.wordframecontainer,
.read-sidebar-lower,
.dictcontainer {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.wordframecontainer {
    grid-row: 1;
    border-bottom: 1px solid #ccd3dc;
}

.read-sidebar-lower {
    grid-row: 2;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    min-width: 0;
}

#wordframeid {
    width: 100%;
    height: 100% !important;
    border: none;
    background: var(--reading-surface);
    color-scheme: var(--reading-color-scheme);
}

.dictcontainer {
    grid-row: 2;
    display: none;
    flex-direction: column;
    gap: 0.62rem;
    padding: 0 0.72rem 0.72rem;
    min-height: 0;
    min-width: 0;
}

.dictcontainer::after {
    display: none;
}

.dictcontainer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
}

.dictcontainer-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-strong);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dictcontainer-manage {
    color: var(--color-text-strong);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.1rem 0.2rem;
    border-radius: 14px;
}

.dictcontainer-manage:hover {
    background: #e6ebf2;
}

/* Inline save notice — lives inside .dictcontainer-header, never shifts layout */
.read-sidebar-save-notice {
    flex: 1;                 /* fills space between title and Administrar link */
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    padding: 0.12rem 0.42rem;
    border-radius: 14px;
    background: #eaf6ee;
    color: var(--color-success-text);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 140ms ease, border-color 140ms ease;
}

.read-sidebar-save-notice.show {
    opacity: 1;
    border-color: #bfe0cb;
    pointer-events: auto;
}

.read-sidebar-save-notice.error {
    background: #fceced;
    color: #962f39;
    border-color: #edc1c6;
}

.pronunciation-compose-toolbar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.2rem 0.35rem;
    border-bottom: 1px solid var(--color-border-muted);
}

.pronunciation-compose-toolbar.is-active {
    background: linear-gradient(180deg, rgba(233, 244, 255, 0.9) 0%, rgba(245, 250, 255, 0.96) 100%);
}

.pronunciation-compose-btn {
    border: 1px solid #b9cadc;
    background: #f4f8fb;
    color: #1c3550;
    border-radius: 999px;
    padding: 0.34rem 0.68rem;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.pronunciation-compose-btn.is-active {
    background: #dcecff;
    border-color: #7ea8d0;
}

.pronunciation-compose-hint {
    font-size: 0.72rem;
    line-height: 1.25;
    color: #516274;
}

#dicttabs {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    min-width: 0;
}

#dicttabslayout,
#dicttabsstatic {
    display: flex;
    gap: 0.26rem;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: thin;
}

#dicttabslayout {
    flex: 1;
    min-width: 0;
}

#dicttabslayout::-webkit-scrollbar,
#dicttabsstatic::-webkit-scrollbar {
    height: 4px;
}

#dicttabslayout::-webkit-scrollbar-thumb,
#dicttabsstatic::-webkit-scrollbar-thumb {
    background: #bfd1e2;
    border-radius: 999px;
}

#dict-menu-container {
    position: relative;
    border: none;
    border-radius: 0;
    left: auto;
}

.dict-btn,
.dict-menu-item {
    border: 1px solid #d9dfe7 !important;
    border-radius: 9px;
    padding: 0.2rem 0.56rem;
    min-height: 1.72rem;
    background: #e7ebf0;
    color: #243a52;
    box-shadow: none;
    font-size: 0.73rem;
    font-weight: 600;
    gap: 0.3rem;
    white-space: nowrap;
}

.dict-btn:hover,
.dict-menu-item:hover,
.dict-btn:not(.dict-btn-active):hover {
    background: #dde5ee;
    color: #1b334b;
}

.dict-btn.dict-btn-active,
.dict-btn.dict-btn-active + #dict-select {
    background: var(--color-surface);
    border-color: #8fb2d2 !important;
    color: #17304b;
    box-shadow: 0 2px 6px rgba(33, 63, 92, 0.14);
}

.dict-btn.dict-btn-external {
    color: #33485e;
}

.dict-btn.dict-btn-external .dict-btn-external-img,
.dict-btn-select .dict-btn-external-img {
    display: none;
}

#dicttabslayout .dict-btn::after,
#dicttabslayout .dict-menu-item::after {
    display: none;
}

#dict-menu-container .dict-btn-select {
    border-radius: 11px;
}

#dict-list-container {
    right: 0;
    border: 1px solid #cad6e2;
    border-radius: 12px;
    border-top-right-radius: 4px;
    padding: 0.2rem;
    background: var(--color-surface-muted);
    box-shadow: 0 10px 20px rgba(22, 40, 60, 0.16);
}

.dict-results-title {
    margin: 0.12rem 0 -0.12rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-text-strong);
}

#dictframes {
    border-radius: 0;
    border: none;
    background: transparent;
    min-height: 0;
    min-width: 0;
    flex: 1;
    box-shadow: none;
    overflow: hidden;
}

.dictframe {
    border: none;
    border-radius: 0;
}

.dict-active {
    width: 100%;
    height: 100%;
}


/* Redesigned term form in read-side iframe */
.read-termform-body {
    background: #f1f2f4;
    color: var(--color-text-strong);
}

.read-termform-body .term-form-reading-redesign {
    height: 100%;
    padding: 0.62rem 0.65rem 0.35rem;
    box-sizing: border-box;
    overflow-x: hidden;
}

.read-termform-body .term-form-reading-redesign #term-form,
.read-termform-body .term-form-reading-redesign #term {
    height: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.read-termform-body .term-form-reading-redesign #term {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.read-termform-body .term-form-reading-redesign #languageSel {
    display: none !important;
}

.read-termform-body .term-form-reading-redesign .reading-term-head {
    display: block;
}

.read-termform-body .term-form-reading-redesign .reading-term-head-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
    min-width: 0;
}

.read-termform-body .term-form-reading-redesign .reading-hidden-edit-field {
    display: none;
}

.read-termform-body .term-form-reading-redesign .reading-term-display {
    font-family: "Inter", "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 1.96rem;
    font-weight: 700;
    line-height: 1.04;
    color: #101e2f;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.read-termform-body .term-form-reading-redesign .reading-term-display.reading-term-display-zh {
    font-family: "KaiTi", "STKaiti", "Kaiti SC", "Kaiti TC", serif;
    font-weight: 600;
}

.read-termform-body .term-form-reading-redesign .reading-romanization-display {
    min-width: 0;
    color: #4f5d70;
    font-family: "Inter", "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 620;
    line-height: 1.24;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.read-termform-body .term-form-reading-redesign .reading-favorite-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    border: 1px solid #cad8e6;
    background: var(--color-surface-hover);
    color: #8ca1b6;
    cursor: pointer;
    transition: border-color 130ms ease, background 130ms ease, color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

.read-termform-body .term-form-reading-redesign .reading-favorite-toggle:hover {
    border-color: #96b4d2;
    color: #4f6f91;
    transform: translateY(-1px);
}

.read-termform-body .term-form-reading-redesign .reading-favorite-toggle.is-active {
    border-color: #f0c46d;
    background: #fff7df;
    color: #d49a1f;
    box-shadow: 0 6px 14px rgba(212, 154, 31, 0.18);
}

.read-termform-body .term-form-reading-redesign .reading-favorite-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.read-termform-body .term-form-reading-redesign .reading-favorite-star {
    font-size: 1.08rem;
    line-height: 1;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-builder {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.18rem;
    margin: 0.16rem 0 0.2rem;
    padding: 0.34rem 0.48rem 0.34rem 0.58rem;
    border: 1px dashed #b8c9db;
    border-radius: 14px;
    background: rgba(249, 252, 255, 0.72);
    cursor: pointer;
    min-width: 0;
    transition: border-color 130ms ease, background 130ms ease, box-shadow 130ms ease;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot:hover,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot:focus,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot:focus-within {
    border-color: #86aed2;
    background: var(--color-surface-hover);
    box-shadow: 0 0 0 3px rgba(120, 172, 217, 0.12);
    outline: none;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot.is-composing {
    border-color: var(--color-primary-border);
    background: #f2f8ff;
}

.read-termform-body .term-form-reading-redesign .reading-romanization-display {
    flex: 1;
    min-width: 0;
    min-height: 1.4rem;
    color: #4b5f76;
    font-weight: 700;
    line-height: 1.35;
    outline: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.read-termform-body .term-form-reading-redesign .reading-romanization-display:empty::before {
    content: attr(data-placeholder);
    color: #aab8c8;
    font-weight: 650;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle {
    border: 1px solid #bfd0e1;
    background: var(--color-surface-muted);
    color: #22415f;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1;
    padding: 0.28rem 0.58rem;
    cursor: pointer;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 130ms ease, transform 130ms ease, background 130ms ease, border-color 130ms ease;
    white-space: nowrap;
    flex: 0 0 auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle.is-active {
    background: #dfeeff;
    border-color: var(--color-primary-border);
    color: #173a5d;
}

.read-termform-body .term-form-reading-redesign .term-parents-row {
    display: none;
}

.read-termform-body .term-form-reading-redesign .term-tags-row {
    order: 3;
}

.read-termform-body .term-form-reading-redesign .term-tags-row.reading-meta-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 1.55rem;
    color: #4f5966;
}

.read-termform-body .term-form-reading-redesign .reading-level-icon {
    font-size: 0.92rem;
    line-height: 1;
}

.read-termform-body .term-form-reading-redesign .reading-level-value {
    font-size: 0.92rem;
    font-weight: 620;
}

.read-termform-body .term-form-reading-redesign .reading-meta-divider {
    width: 1px;
    height: 1.2rem;
    background: #c6ced8;
    margin-right: 0.2rem;
}

.read-termform-body .term-form-reading-redesign .reading-tag-field {
    flex: 1;
}

.read-termform-body .term-form-reading-redesign .reading-tag-field .tagify {
    min-height: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.read-termform-body .term-form-reading-redesign .reading-tag-field .tagify__input::before {
    color: var(--color-text-strong);
    opacity: 0.95;
    font-size: 0.72rem;
}

.read-termform-body .term-form-reading-redesign .reading-translation-container {
    order: 4;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    margin-top: 0.08rem;
    padding-top: 0.36rem;
    border-top: 1px solid #cfd5de;
}

.read-termform-body .term-form-reading-redesign .reading-meaning-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #566474;
}

.read-termform-body .term-form-reading-redesign .reading-meaning-body {
    display: flex;
    align-items: stretch;
    gap: 0.46rem;
    min-width: 0;
}

.read-termform-body .term-form-reading-redesign .term-translation-row {
    flex: 1 1 auto;
    min-width: 0;
}

.read-termform-body .term-form-reading-redesign .term-translation-row #translation {
    width: 100%;
    min-height: 3.05rem;
    border-radius: 14px;
    border: 1px solid #cdd5df;
    background: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    color: #16283d;
    padding: 0.45rem 0.55rem;
    font-size: 0.85rem;
    line-height: 1.2;
    resize: vertical;
}

.read-termform-body .term-form-reading-redesign .term-translation-row #translation::placeholder {
    color: #8a95a3;
    opacity: 1;
}

.read-termform-body .term-form-reading-redesign .reading-meaning-image {
    flex: 0 0 3.2rem;
    align-self: stretch;
    width: 3.2rem;
    min-height: 3.05rem;
    max-height: 4.2rem;
    object-fit: cover;
    border-radius: 14px;
    background: #e6ebf1;
}

.read-termform-body .term-form-reading-redesign .reading-meaning-image:hover {
    transform: scale(3.1) translate(-14px, 3px);
}

.read-termform-body .term-form-reading-redesign #status-container {
    display: none;
}

.read-termform-body .term-form-reading-redesign #sync-status-container {
    display: none;
}

.read-termform-body .term-form-reading-redesign #status {
    width: 100%;
    justify-content: space-between;
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.read-termform-body .term-form-reading-redesign #status li {
    flex: 1;
    display: flex;
    justify-content: center;
}

.read-termform-body .term-form-reading-redesign #status label {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    border: 2px solid #c4ccd6;
    background: #eef1f5;
    font-size: 1.02rem;
    font-weight: 600;
    color: #3a454f;
    transform: none;
    box-shadow: none;
    margin: 0;
}

.read-termform-body .term-form-reading-redesign #status label:hover {
    transform: none;
    box-shadow: 0 0 0 3px rgba(108, 157, 203, 0.14);
}

.read-termform-body .term-form-reading-redesign #status input:checked + label {
    transform: none;
    border-color: #86b79b;
    background: #eef8f1;
    box-shadow: none;
    color: #236842;
}

.read-termform-body .term-form-reading-redesign #status label[for="status-0"],
.read-termform-body .term-form-reading-redesign #status label[for="status-1"],
.read-termform-body .term-form-reading-redesign #status label[for="status-2"],
.read-termform-body .term-form-reading-redesign #status label[for="status-3"],
.read-termform-body .term-form-reading-redesign #status label[for="status-4"] {
    background: #eef1f5;
}

.read-termform-body .term-form-reading-redesign #status label[for="status-5"],
.read-termform-body .term-form-reading-redesign #status label[for="status-6"] {
    border-width: 2px;
    margin-left: 0;
    font-size: 0;
}

.read-termform-body .term-form-reading-redesign #status label[for="status-5"]::after,
.read-termform-body .term-form-reading-redesign #status label[for="status-6"]::after {
    width: 1.3rem;
    height: 1.3rem;
}

.read-termform-body .term-form-reading-redesign #status #status-6:checked + label {
    border-color: #d2a3a3;
    background: #fbeeee;
}

.read-termform-body .term-form-reading-redesign #term-button-container {
    display: none;
}

.read-termform-body .term-form-reading-redesign #term-button-container .btn {
    min-width: 4rem;
    height: 1.95rem;
    font-size: 0.78rem;
}

#term-form-container .term-favorite-row {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.35rem 0 0.2rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #22374d;
    cursor: pointer;
}

#term-form-container .term-favorite-checkbox {
    margin: 0;
}

#read_sidebar_status_dock {
    grid-row: 1;
    align-self: start;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    border: 1px solid var(--color-border);
    margin: 0.72rem 0.72rem 0.58rem;
    padding: 0.5rem 0.64rem;
    min-height: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 247, 250, 0.98) 100%);
    box-shadow: 0 4px 14px rgba(22, 40, 60, 0.09);
    min-width: 0;
}

#read_sidebar_status_dock.hide {
    display: none;
}

.status-dock-side {
    width: 2.35rem;
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 0;
}

.status-dock-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    flex: 1;
    min-width: 0;
}

.status-dock-btn {
    position: relative;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 2px solid #c1c8d1;
    background: #f0f3f6;
    color: #3b444f;
    font-size: 0.95rem;
    font-weight: 620;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}

.status-dock-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(36, 59, 82, 0.16);
}

.status-dock-btn[data-tooltip]::before {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.18rem);
    transition: opacity 70ms ease 45ms, transform 70ms ease 45ms;
    z-index: 20;
}

.status-dock-btn[data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 0.42rem);
    width: max-content;
    max-width: min(15rem, 70vw);
    padding: 0.35rem 0.48rem;
    border: 1px solid #bcc7d3;
    border-radius: 8px;
    background: var(--color-surface);
    color: #253243;
    box-shadow: 0 6px 16px rgba(22, 40, 60, 0.16);
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.status-dock-btn[data-tooltip]:hover::before,
.status-dock-btn[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

.status-dock-side-left .status-dock-btn[data-tooltip]::before {
    left: 0;
    transform: translate(0, 0.18rem);
}

.status-dock-side-left .status-dock-btn[data-tooltip]:hover::before,
.status-dock-side-left .status-dock-btn[data-tooltip]:focus-visible::before {
    transform: translate(0, 0);
}

.status-dock-side-right .status-dock-btn[data-tooltip]::before {
    left: auto;
    right: 0;
    transform: translate(0, 0.18rem);
}

.status-dock-side-right .status-dock-btn[data-tooltip]:hover::before,
.status-dock-side-right .status-dock-btn[data-tooltip]:focus-visible::before {
    transform: translate(0, 0);
}

.status-dock-btn.active {
    border-color: #83b498;
    color: #1f6b3e;
    background: #ebf7ef;
    box-shadow: 0 3px 8px rgba(51, 124, 79, 0.18);
}

.status-dock-delete {
    color: #233447;
}

.status-dock-delete.hide {
    visibility: hidden;
    pointer-events: none;
}

.status-dock-known {
    border-color: #9ec5ac;
    font-size: 1.35rem;
    line-height: 1;
}

.internal-dictionary-picker {
    display: grid;
    gap: 0.78rem;
    margin-bottom: 1rem;
    padding: 0.92rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.internal-dictionary-picker-header h4 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: 1rem;
}

.internal-dictionary-picker-header p {
    margin: 0.25rem 0 0 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.internal-dictionary-package-list {
    display: grid;
    gap: 0.55rem;
}

.internal-dictionary-package {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    min-height: 3.5rem;
    padding: 0.68rem 0.78rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-subtle);
}

.internal-dictionary-package strong,
.internal-dictionary-package span,
.internal-dictionary-package small {
    display: block;
}

.internal-dictionary-package strong {
    color: var(--color-text-strong);
}

.internal-dictionary-package span,
.internal-dictionary-package small {
    color: var(--color-text-muted);
}

.internal-dictionary-package .language-editor-btn:disabled {
    opacity: 0.62;
    cursor: default;
    transform: none;
}

.dict_entry.dict-entry-highlight {
    border-color: var(--color-focus-border);
    background: var(--color-focus-ring);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.internal-dictionary-body {
    margin: 0;
    background: var(--color-surface);
}

.internal-dictionary-shell {
    display: grid;
    gap: 0.85rem;
    padding: 0.9rem;
    color: var(--color-text);
}

.internal-dictionary-header {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: start;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.72rem;
}

.internal-dictionary-header h1 {
    margin: 0.1rem 0 0 0;
    color: var(--color-text-strong);
    font-size: 1.35rem;
}

.internal-dictionary-kicker,
.internal-dictionary-source,
.internal-dictionary-match,
.internal-dictionary-license {
    color: var(--color-text-muted);
}

.internal-dictionary-kicker {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.internal-dictionary-source {
    font-size: 0.8rem;
    font-weight: 750;
    text-align: right;
}

.internal-dictionary-results {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.internal-dictionary-entry {
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-subtle);
}

.internal-dictionary-card-top {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 0.62rem;
    border-bottom: 1px solid var(--color-border-muted);
}

.internal-dictionary-headword-group {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.internal-dictionary-headword-group h2 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: 1.5rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.internal-dictionary-section {
    display: grid;
    gap: 0.42rem;
    padding: 0.72rem 0;
    border-bottom: 1px solid var(--color-border-muted);
}

.internal-dictionary-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.internal-dictionary-section-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.internal-dictionary-match-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 0.16rem 0.62rem;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.internal-dictionary-match-badge-exact {
    background: var(--color-success-soft);
    color: var(--color-success-text);
}

.internal-dictionary-copy-line {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 0.55rem;
    align-items: center;
    justify-content: space-between;
}

.internal-dictionary-pronunciation-line {
    justify-content: flex-start;
    font-family: "Inter", "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-kerning: normal;
    letter-spacing: 0;
    word-spacing: normal;
    white-space: nowrap;
}

.internal-dictionary-copy-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.internal-dictionary-pronunciation-line .internal-dictionary-copy-text {
    overflow-wrap: normal;
    word-break: keep-all;
    white-space: nowrap;
}

.internal-dictionary-copy-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-primary);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.internal-dictionary-copy-button:hover,
.internal-dictionary-copy-button:focus {
    transform: translateY(-1px);
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 4px 8px rgba(63, 120, 171, 0.2);
    outline: none;
}

.internal-dictionary-copy-button.copied {
    border-color: var(--color-success);
    background: var(--color-success-soft);
    color: var(--color-success-text);
    font-size: 0.6rem;
    letter-spacing: 0;
}

.internal-dictionary-definitions {
    display: grid;
    gap: 0;
}

.internal-dictionary-definition-line {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border-muted);
    line-height: 1.45;
}

.internal-dictionary-definition-line:last-child {
    border-bottom: 0;
}

.internal-dictionary-empty {
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-subtle);
}

.internal-dictionary-empty h1,
.internal-dictionary-empty p {
    margin: 0;
}

.internal-dictionary-license {
    border-top: 1px solid var(--color-border);
    padding-top: 0.62rem;
    font-size: 0.78rem;
}

@container reading-right-pane (max-width: 360px) {
    div#read_pane_right {
        grid-template-rows: 44% 1fr;
        row-gap: 0.42rem;
        padding: 0.58rem 0.42rem 0.55rem;
    }

    .dictcontainer {
        gap: 0.42rem;
        padding: 0 0.38rem 0.48rem;
    }

    .dictcontainer-header {
        gap: 0.3rem;
    }

    .dictcontainer-title {
        font-size: 0.9rem;
    }

    .dictcontainer-manage {
        font-size: 0.7rem;
        padding: 0.08rem 0;
    }

    .read-sidebar-save-notice {
        display: none;
    }

    #dicttabs {
        gap: 0.18rem;
    }

    #dicttabslayout,
    #dicttabsstatic {
        gap: 0.18rem;
    }

    .dict-btn,
    .dict-menu-item {
        min-height: 1.48rem;
        border-radius: 8px;
        padding: 0.16rem 0.42rem;
        font-size: 0.66rem;
    }

    .dict-results-title {
        font-size: 0.78rem;
        margin-top: 0;
    }

    #read_sidebar_status_dock {
        gap: 0.26rem;
        margin: 0.48rem 0.38rem 0.42rem;
        padding: 0.36rem 0.34rem;
        border-radius: 14px;
    }

    .status-dock-side {
        width: 1.55rem;
    }

    .status-dock-steps {
        gap: 0.16rem;
        justify-content: space-between;
    }

    .status-dock-btn {
        width: 1.45rem;
        height: 1.45rem;
        border-width: 1px;
        font-size: 0.74rem;
    }

    .status-dock-known {
        font-size: 0.98rem;
    }
}

@container reading-right-pane (max-width: 240px) {
    div#read_pane_right {
        grid-template-rows: 40% 1fr;
        row-gap: 0.32rem;
        padding-inline: 0.34rem;
    }

    #read_sidebar_status_dock {
        margin-inline: 0.22rem;
        padding-inline: 0.22rem;
    }

    .status-dock-side {
        width: 1.32rem;
    }

    .status-dock-steps {
        gap: 0.1rem;
    }

    .status-dock-btn {
        width: 1.28rem;
        height: 1.28rem;
        font-size: 0.66rem;
    }

    .status-dock-known {
        font-size: 0.84rem;
    }

    .dictcontainer-title {
        font-size: 0.82rem;
    }

    .dictcontainer-manage {
        max-width: 4.1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media screen and (max-width: 430px) {
    .read-termform-body .term-form-reading-redesign {
        padding: 0.48rem 0.5rem 0.3rem;
    }

    .read-termform-body .term-form-reading-redesign #term {
        gap: 0.22rem;
    }

    .read-termform-body .term-form-reading-redesign .reading-term-display {
        font-size: 1.62rem;
        line-height: 1.02;
    }

    .read-termform-body .term-form-reading-redesign .reading-pronunciation-slot {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.32rem;
        min-height: 0;
        margin: 0.08rem 0 0.12rem;
        padding: 0 1.48rem 0.24rem 0;
        border-radius: 0;
    }

    .read-termform-body .term-form-reading-redesign .reading-romanization-display {
        min-height: 1.15rem;
        font-size: 0.78rem;
        line-height: 1.25;
    }

    .read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle {
        width: 1.18rem;
        height: 1.18rem;
        justify-self: auto;
        padding: 0;
    }

    .read-termform-body .term-form-reading-redesign .term-tags-row.reading-meta-row {
        gap: 0.34rem;
        min-height: 1.3rem;
    }

    .read-termform-body .term-form-reading-redesign .reading-translation-container {
        gap: 0.16rem;
        padding-top: 0.28rem;
    }

    .read-termform-body .term-form-reading-redesign .reading-meaning-header {
        font-size: 0.66rem;
    }

    .read-termform-body .term-form-reading-redesign .term-translation-row #translation {
        min-height: 2.55rem;
        border-radius: 12px;
        padding: 0.38rem 0.45rem;
        font-size: 0.78rem;
    }

    .internal-dictionary-shell {
        gap: 0.58rem;
        padding: 0.58rem;
    }

    .internal-dictionary-header {
        gap: 0.45rem;
        padding-bottom: 0.52rem;
    }

    .internal-dictionary-header h1 {
        font-size: 1.05rem;
        line-height: 1.12;
    }

    .internal-dictionary-kicker,
    .internal-dictionary-section-label {
        font-size: 0.64rem;
    }

    .internal-dictionary-source {
        font-size: 0.68rem;
    }

    .internal-dictionary-entry {
        padding: 0.55rem;
    }

    .internal-dictionary-card-top {
        gap: 0.45rem;
        padding-bottom: 0.48rem;
    }

    .internal-dictionary-headword-group h2 {
        font-size: 1.32rem;
    }

    .internal-dictionary-section {
        gap: 0.32rem;
        padding: 0.55rem 0;
    }

    .internal-dictionary-copy-line {
        gap: 0.34rem;
        font-size: 0.86rem;
    }

    .internal-dictionary-copy-button {
        width: 1.34rem;
        height: 1.34rem;
        font-size: 0.9rem;
    }

    .internal-dictionary-definition-line {
        padding: 0.38rem 0;
        line-height: 1.35;
    }
}

@media screen and (max-width: 260px) {
    .read-termform-body .term-form-reading-redesign {
        padding: 0.4rem 0.38rem 0.26rem;
    }

    .read-termform-body .term-form-reading-redesign .reading-term-display {
        font-size: 1.42rem;
    }

    .read-termform-body .term-form-reading-redesign .reading-favorite-toggle {
        width: 1.85rem;
        height: 1.85rem;
    }

    .read-termform-body .term-form-reading-redesign .reading-romanization-display:empty::before {
        font-size: 0.72rem;
    }

    .read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle {
        font-size: 0.6rem;
    }

    .read-termform-body .term-form-reading-redesign .term-translation-row #translation {
        min-height: 2.25rem;
        font-size: 0.72rem;
    }

    .internal-dictionary-shell {
        padding: 0.44rem;
    }

    .internal-dictionary-header {
        display: block;
    }

    .internal-dictionary-source {
        display: none;
    }

    .internal-dictionary-entry {
        padding: 0.46rem;
    }

    .internal-dictionary-card-top {
        display: block;
    }

    .internal-dictionary-match-badge {
        display: inline-flex;
        margin-top: 0.34rem;
        padding: 0.12rem 0.42rem;
        font-size: 0.62rem;
    }

    .internal-dictionary-copy-line {
        font-size: 0.8rem;
    }
}


@media screen and (max-width: 980px) {
    #read_sidebar_status_dock {
        gap: 0.5rem;
        padding: 0.46rem 0.48rem;
        border-radius: 16px;
    }

    .status-dock-side {
        width: 2.05rem;
    }

    .status-dock-steps {
        gap: 0.42rem;
    }

    .status-dock-btn {
        width: 1.98rem;
        height: 1.98rem;
        font-size: 0.9rem;
    }
    div#read_pane_right {
        grid-template-rows: 42% 1fr;
        border-radius: 24px;
    }

    div#read_pane_right::after {
        width: 90%;
        height: 6px;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
        background-color: var(--color-primary-hover-light);
    }

    .dictcontainer {
        padding: 0 0.56rem 0.62rem;
    }

    .reading-sidebar-toggle-btn {
        display: none;
    }

    .dictcontainer-title {
        font-size: 0.95rem;
    }

    #dictframes {
        min-height: 8.1rem;
    }

    .read-termform-body .term-form-reading-redesign {
        padding: 0.52rem 0.5rem 0.32rem;
    }

    .read-termform-body .term-form-reading-redesign .term-text-row #text {
        font-size: 1.42rem;
    }

    .read-termform-body .term-form-reading-redesign .term-translation-row #translation {
        min-height: 2.5rem;
    }

    .read-termform-body .term-form-reading-redesign #status label {
        width: 2.2rem;
        height: 2.2rem;
    }

    .status-dock-btn {
        width: 1.86rem;
        height: 1.86rem;
    }
}

/* Reading definition panel editorial pass */
div#read_pane_right {
    --reading-term-frame-height: max(11rem, 24%);
    grid-template-rows: minmax(11rem, 24%) minmax(0, 1fr);
    width: min(var(--reading-right-pane-width), var(--reading-right-pane-available-width, var(--reading-right-pane-width)));
    max-width: var(--reading-right-pane-available-width, var(--reading-right-pane-width));
    z-index: 1002;
    border-color: var(--reading-border-muted);
    border-radius: 34px;
    background: var(--reading-surface);
    box-shadow: var(--reading-right-pane-shadow);
}

div#read_pane_right::after {
    width: 4px;
    height: var(--reading-term-frame-height);
    background: color-mix(in srgb, var(--reading-link) 34%, transparent);
}

@media screen and (min-width: 981px) {
    div#read_pane_right::after {
        display: none;
    }
}

.wordframecontainer {
    border-bottom: 0;
    background: transparent;
}

.read-sidebar-lower {
    position: relative;
    isolation: isolate;
    grid-template-rows: auto minmax(0, 1fr);
    margin-inline: -1px;
    padding-inline: 1px;
    border-top: 0;
    border-radius: 30px 30px 0 0;
    background: var(--reading-surface-muted);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--reading-border-muted) 72%, transparent);
    overflow: hidden;
}

.read-sidebar-lower::before {
    display: none;
}

.read-sidebar-lower::after {
    display: none;
}

.read-sidebar-lower > * {
    position: relative;
    z-index: 2;
}

.dictcontainer {
    gap: 1rem;
    padding: 0.1rem 1.2rem 1.35rem;
}

.dictcontainer-header {
    align-items: baseline;
    gap: 0.75rem;
}

.dictcontainer-title {
    font-size: 1rem;
    font-weight: 720;
    letter-spacing: 0;
    color: #18304a;
}

.dictcontainer-manage {
    margin-left: auto;
    color: rgba(54, 112, 171, 0.76);
    font-size: 0.74rem;
    font-weight: 650;
    padding: 0;
    border-radius: 0;
}

.dictcontainer-manage:hover {
    background: transparent;
    color: var(--color-primary);
    text-decoration: underline;
}

.read-sidebar-save-notice {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 0.7rem;
}

#dicttabs {
    gap: 0.45rem;
    align-items: center;
}

#dicttabslayout,
#dicttabsstatic {
    gap: 0.38rem;
}

.dict-btn,
.dict-menu-item {
    min-height: 1.72rem;
    border-color: rgba(176, 194, 213, 0.54) !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    color: #28445f;
    box-shadow: none;
    padding: 0.24rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 650;
}

.dict-btn:hover,
.dict-menu-item:hover,
.dict-btn:not(.dict-btn-active):hover {
    background: rgba(242, 247, 252, 0.92);
    border-color: rgba(125, 163, 201, 0.58) !important;
    color: #15324f;
}

.dict-btn.dict-btn-active,
.dict-btn.dict-btn-active + #dict-select {
    border-color: rgba(74, 137, 203, 0.64) !important;
    background: rgba(255, 255, 255, 0.92);
    color: #17314c;
    box-shadow: 0 2px 8px rgba(43, 91, 141, 0.08);
}

#dict-menu-container .dict-btn-select {
    border-radius: 999px;
}

.dict-results-title {
    margin: 0.2rem 0 -0.35rem;
    color: rgba(24, 48, 74, 0.82);
    font-size: 0.88rem;
    font-weight: 680;
    letter-spacing: 0;
}

#dictframes {
    background: transparent;
    overflow: hidden;
}

.dictframe {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.read-termform-body {
    background: transparent;
    color: #172b42;
}

.read-termform-body .term-form-reading-redesign {
    padding: 1.18rem 1.2rem 0.9rem;
    overflow-y: auto;
}

.read-termform-body .term-form-reading-redesign #term {
    gap: 0.78rem;
}

.read-termform-body .term-form-reading-redesign .reading-term-head-main {
    align-items: flex-start;
    gap: 0.75rem;
}

.read-termform-body .term-form-reading-redesign .reading-term-display {
    color: #07182b;
    font-size: 2.42rem;
    font-weight: 680;
    line-height: 1;
    letter-spacing: 0;
}

.read-termform-body .term-form-reading-redesign .reading-term-display.reading-term-display-zh {
    font-weight: 560;
}

.read-termform-body .term-form-reading-redesign .reading-favorite-toggle {
    width: 2rem;
    height: 2rem;
    border-color: rgba(152, 174, 198, 0.45);
    background: rgba(255, 255, 255, 0.56);
    color: rgba(93, 115, 139, 0.66);
    box-shadow: none;
}

.read-termform-body .term-form-reading-redesign .reading-favorite-toggle:hover {
    border-color: rgba(118, 151, 184, 0.6);
    background: rgba(255, 255, 255, 0.86);
    color: #557493;
}

.read-termform-body .term-form-reading-redesign .reading-favorite-toggle.is-active {
    border-color: rgba(226, 184, 90, 0.64);
    background: rgba(255, 249, 232, 0.78);
    color: #c69121;
    box-shadow: none;
}

.read-termform-body .term-form-reading-redesign .reading-favorite-star {
    font-size: 0.96rem;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-builder {
    margin-top: -0.45rem;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 0;
    margin: 0;
    padding: 0 0 0.1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: text;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot:hover,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot:focus,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot:focus-within {
    background: transparent;
    box-shadow: none;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot.is-composing {
    background: transparent;
}

.read-termform-body .term-form-reading-redesign .reading-romanization-display {
    min-height: 1.25rem;
    color: #5b6f85;
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.35;
}

.read-termform-body .term-form-reading-redesign .reading-romanization-display:empty {
    min-height: 1.7rem;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.read-termform-body .term-form-reading-redesign .reading-romanization-display:empty::before {
    color: rgba(91, 111, 133, 0.38);
    font-weight: 560;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle {
    align-self: center;
    border: 0;
    background: transparent;
    color: rgba(36, 65, 95, 0.72);
    padding: 0.18rem 0;
    font-size: 0.68rem;
    font-weight: 650;
    text-decoration: underline;
    text-decoration-color: rgba(36, 65, 95, 0.22);
    text-underline-offset: 0.18rem;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle:hover,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle.is-active {
    background: transparent;
    color: #1f5e9c;
    text-decoration-color: rgba(31, 94, 156, 0.42);
}

.read-termform-body .term-form-reading-redesign .reading-translation-container {
    order: 3;
    gap: 0.46rem;
    margin-top: 0;
    padding-top: 0.72rem;
    border-top: 1px solid rgba(190, 204, 218, 0.38);
}

.read-termform-body .term-form-reading-redesign .reading-meaning-header {
    min-height: 0;
    color: rgba(67, 83, 101, 0.78);
    font-size: 0.78rem;
    font-weight: 680;
    letter-spacing: 0;
    text-transform: none;
}

.read-termform-body .term-form-reading-redesign .term-translation-row #translation {
    min-height: 4rem;
    border-color: rgba(168, 188, 209, 0.44);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: none;
    color: #142941;
    padding: 0.78rem 0.9rem;
    font-size: 0.95rem;
    line-height: 1.42;
}

.read-termform-body .term-form-reading-redesign .term-translation-row #translation:focus {
    border-color: rgba(85, 146, 205, 0.65);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 3px rgba(90, 153, 213, 0.12);
    outline: none;
}

.read-termform-body .term-form-reading-redesign .term-translation-row #translation::placeholder {
    color: rgba(89, 108, 128, 0.45);
}

.read-termform-body .term-form-reading-redesign .term-tags-row {
    order: 4;
}

.read-termform-body .term-form-reading-redesign .term-tags-row.reading-meta-row {
    align-items: center;
    gap: 0.55rem;
    min-height: 0;
    color: rgba(65, 83, 103, 0.72);
}

.read-termform-body .term-form-reading-redesign .reading-level-value {
    color: rgba(40, 58, 78, 0.72);
    font-size: 0.78rem;
    font-weight: 650;
}

.read-termform-body .term-form-reading-redesign .reading-meta-divider {
    background: rgba(174, 190, 207, 0.54);
    height: 1rem;
}

.read-termform-body .term-form-reading-redesign .reading-tag-field .tagify__input::before {
    color: rgba(45, 65, 88, 0.62);
    font-size: 0.78rem;
    font-weight: 580;
}

#read_sidebar_status_dock {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem;
    margin: 0.15rem 1.2rem 1rem;
    padding: 0.44rem 0.5rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 0 0 1px rgba(176, 194, 213, 0.35);
}

.status-dock-side {
    width: auto;
}

.status-dock-steps {
    gap: 0.2rem;
    justify-content: space-between;
}

.status-dock-btn {
    width: 1.62rem;
    height: 1.62rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(42, 60, 80, 0.62);
    font-size: 0.76rem;
    font-weight: 680;
    box-shadow: none;
}

.status-dock-btn:hover {
    background: rgba(226, 236, 246, 0.76);
    color: #1e3f62;
    box-shadow: none;
    transform: none;
}

.status-dock-btn.active {
    background: rgba(96, 166, 112, 0.16);
    color: #277044;
    box-shadow: none;
}

.status-dock-delete {
    color: rgba(50, 70, 90, 0.45);
}

.status-dock-known {
    color: rgba(39, 112, 68, 0.72);
    font-size: 1rem;
}

.internal-dictionary-body {
    background: transparent;
    color: #172b42;
    font-size: 1.08rem;
    line-height: 1.5;
}

.internal-dictionary-shell {
    display: block;
    padding: 0.95rem 1.1rem 1.1rem;
}

.internal-dictionary-header {
    display: none;
}

.internal-dictionary-results {
    display: grid;
    gap: 1.1rem;
}

.internal-dictionary-entry {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.internal-dictionary-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding-bottom: 0.75rem;
    border-bottom: 0;
}

.internal-dictionary-headword-group {
    gap: 0.28rem;
}

.internal-dictionary-headword-group h2 {
    color: #0b1e33;
    font-size: 2rem;
    font-weight: 520;
    line-height: 1.08;
    letter-spacing: 0;
}

.internal-dictionary-section {
    gap: 0.3rem;
    padding: 0.38rem 0;
    border-bottom: 0;
}

.internal-dictionary-section + .internal-dictionary-section {
    margin-top: 0.1rem;
}

.internal-dictionary-section-label {
    color: rgba(76, 92, 111, 0.62);
    font-size: 0.84rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.internal-dictionary-match-badge {
    align-self: start;
    border-radius: 999px;
    padding: 0.16rem 0.52rem;
    background: rgba(112, 190, 132, 0.14);
    color: rgba(39, 112, 68, 0.8);
    font-size: 0.75rem;
    font-weight: 650;
}

.internal-dictionary-copy-line {
    gap: 0.5rem;
    color: #152b44;
    font-size: 1.12rem;
    line-height: 1.55;
}

.internal-dictionary-pronunciation-line {
    color: #435d77;
    font-weight: 650;
}

.internal-dictionary-copy-button {
    width: 1.32rem;
    height: 1.32rem;
    border-color: transparent;
    background: transparent;
    color: rgba(46, 111, 176, 0.42);
    font-size: 1rem;
    opacity: 0.55;
}

.internal-dictionary-entry:hover .internal-dictionary-copy-button,
.internal-dictionary-copy-button:hover,
.internal-dictionary-copy-button:focus {
    opacity: 1;
}

.internal-dictionary-copy-button:hover,
.internal-dictionary-copy-button:focus {
    transform: none;
    border-color: rgba(107, 151, 196, 0.42);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
}

.internal-dictionary-definitions {
    gap: 0.1rem;
}

.internal-dictionary-definition-line {
    padding: 0.28rem 0;
    border-bottom: 0;
    line-height: 1.55;
}

.internal-dictionary-empty {
    border: 0;
    background: transparent;
    padding: 0.4rem 0;
    color: rgba(62, 80, 99, 0.75);
}

.internal-dictionary-license {
    border-top: 0;
    margin-top: 1rem;
    padding-top: 0;
    color: rgba(76, 92, 111, 0.55);
    font-size: 0.92rem;
    line-height: 1.35;
}

@container reading-right-pane (max-width: 360px) {
    div#read_pane_right {
        grid-template-rows: minmax(10.5rem, 24%) minmax(0, 1fr);
        padding: 0;
    }

    .dictcontainer {
        gap: 0.82rem;
        padding: 0.05rem 0.95rem 1.1rem;
    }

    #read_sidebar_status_dock {
        margin: 0.05rem 0.95rem 0.85rem;
        padding: 0.4rem 0.42rem;
    }

    .status-dock-btn {
        width: 1.46rem;
        height: 1.46rem;
        font-size: 0.7rem;
    }

    .dictcontainer-title {
        font-size: 0.94rem;
    }

    .dict-btn,
    .dict-menu-item {
        min-height: 1.58rem;
        padding: 0.2rem 0.55rem;
        font-size: 0.7rem;
    }
}

@media screen and (max-width: 430px) {
    .read-termform-body .term-form-reading-redesign {
        padding: 0.98rem 1rem 0.78rem;
    }

    .read-termform-body .term-form-reading-redesign #term {
        gap: 0.64rem;
    }

    .read-termform-body .term-form-reading-redesign .reading-term-display {
        font-size: 2.08rem;
    }

    .read-termform-body .term-form-reading-redesign .reading-pronunciation-slot {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.34rem;
        padding: 0;
        border-radius: 0;
    }

    .read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle {
        width: 1.18rem;
        height: 1.18rem;
        justify-self: auto;
        padding: 0;
    }

    .read-termform-body .term-form-reading-redesign .term-translation-row #translation {
        min-height: 3.35rem;
        padding: 0.68rem 0.76rem;
        font-size: 0.88rem;
    }

    .internal-dictionary-shell {
        padding: 0.82rem 0.95rem 1rem;
    }

    .internal-dictionary-headword-group h2 {
        font-size: 1.72rem;
    }

    .internal-dictionary-copy-line {
        font-size: 1.04rem;
    }
}

@media screen and (max-width: 260px) {
    .read-termform-body .term-form-reading-redesign {
        padding: 0.78rem 0.75rem 0.65rem;
    }

    .read-termform-body .term-form-reading-redesign .reading-term-display {
        font-size: 1.82rem;
    }

    .internal-dictionary-shell {
        padding: 0.72rem 0.78rem 0.9rem;
    }
}

/* Reading definition panel semantic refinement */
.read-termform-body .term-form-reading-redesign {
    padding: 0.84rem 0.98rem 0.62rem;
}

.read-termform-body .term-form-reading-redesign #term {
    gap: 0.4rem;
}

.read-termform-body .term-form-reading-redesign .reading-term-head {
    padding: 0 0 0.12rem;
}

.read-termform-body .term-form-reading-redesign .reading-term-head-main {
    gap: 0.56rem;
    align-items: flex-start;
}

.read-termform-body .term-form-reading-redesign .reading-term-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.24rem;
    flex: 0 0 auto;
    margin-top: 0.04rem;
}

.read-termform-body .term-form-reading-redesign .reading-term-display {
    font-size: 2.02rem;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: 0;
}

.read-termform-body .term-form-reading-redesign .reading-favorite-toggle {
    width: 1.58rem;
    height: 1.58rem;
    margin-top: 0.06rem;
    background: transparent;
    color: rgba(82, 103, 126, 0.48);
    box-shadow: none;
}

.read-termform-body .term-form-reading-redesign .reading-favorite-toggle:hover,
.read-termform-body .term-form-reading-redesign .reading-favorite-toggle.is-active {
    background: rgba(255, 255, 255, 0.42);
    color: #5d89b6;
    box-shadow: inset 0 0 0 1px rgba(166, 187, 210, 0.24);
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-builder {
    margin-top: -0.32rem;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot {
    display: block;
    position: relative;
    padding: 0 1.58rem 0.28rem 0;
    border-bottom: 1px solid rgba(180, 197, 216, 0.22);
}

.read-termform-body .term-form-reading-redesign .reading-romanization-display {
    min-height: 1rem;
    font-size: 0.92rem;
    font-weight: 520;
    color: rgba(49, 71, 95, 0.76);
}

.read-termform-body .term-form-reading-redesign .reading-romanization-display:empty {
    min-height: 1.08rem;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0.1rem;
    width: 1.22rem;
    height: 1.22rem;
    padding: 0;
    border: 1px solid rgba(156, 181, 207, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 0.32rem 0.8rem rgba(36, 61, 86, 0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.08rem);
    transition: opacity 0.14s ease, transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot:hover .reading-pronunciation-compose-toggle,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot:focus-within .reading-pronunciation-compose-toggle,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle:hover,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle:hover,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle.is-active {
    background: rgba(245, 250, 255, 0.94);
    border-color: rgba(80, 143, 205, 0.44);
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-icon {
    display: block;
    position: relative;
    width: 0.76rem;
    height: 0.76rem;
    color: rgba(55, 76, 99, 0.62);
    opacity: 0.78;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle:hover .reading-pronunciation-compose-icon,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle.is-active .reading-pronunciation-compose-icon {
    color: rgba(37, 92, 147, 0.78);
    opacity: 1;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-icon::before,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-icon::after {
    content: "";
    position: absolute;
    width: 0.43rem;
    height: 0.43rem;
    border: 1.5px solid currentColor;
    border-radius: 0.15rem;
    background:
        radial-gradient(circle at 50% 0, currentColor 0 0.06rem, transparent 0.065rem),
        rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-icon::before {
    left: 0.02rem;
    top: 0.08rem;
    transform: rotate(-2deg);
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-icon::after {
    right: 0.02rem;
    bottom: 0.07rem;
    transform: rotate(2deg);
}

.read-termform-body .term-form-reading-redesign .reading-translation-container {
    gap: 0.08rem;
    padding-top: 0.18rem;
    border-top: 0;
}

.read-termform-body .term-form-reading-redesign .reading-meaning-header {
    display: none;
    color: rgba(56, 73, 92, 0.62);
    font-size: 0.68rem;
    font-weight: 620;
}

.read-termform-body .term-form-reading-redesign .reading-meaning-display {
    min-height: 1.5rem;
    border-radius: 10px;
    color: #152d48;
    cursor: text;
    font-size: 0.96rem;
    font-weight: 430;
    line-height: 1.35;
    padding: 0.08rem 0;
    white-space: pre-wrap;
}

.read-termform-body .term-form-reading-redesign .reading-meaning-display:hover {
    color: #0e2d4f;
}

.read-termform-body .term-form-reading-redesign .reading-meaning-display.is-empty {
    color: rgba(83, 103, 125, 0.4);
    font-size: 0.84rem;
}

.read-termform-body .term-form-reading-redesign .reading-editorial-edit-field {
    display: none;
}

.read-termform-body .term-form-reading-redesign .reading-translation-container.is-editing .reading-meaning-display {
    display: none;
}

.read-termform-body .term-form-reading-redesign .reading-translation-container.is-editing .reading-editorial-edit-field {
    display: block;
}

.read-termform-body .term-form-reading-redesign .term-translation-row #translation {
    min-height: 1.76rem !important;
    max-height: 4.4rem;
    field-sizing: content;
    border-width: 0 0 1px !important;
    border-style: solid !important;
    border-radius: 0 !important;
    border-color: rgba(132, 154, 178, 0.26) !important;
    background: transparent !important;
    padding: 0.24rem 0 0.36rem !important;
    color: #173250;
    font-size: 0.9rem;
    line-height: 1.38;
    resize: vertical;
    box-shadow: none !important;
}

.read-termform-body .term-form-reading-redesign .term-translation-row #translation:focus {
    border-width: 0 0 1px !important;
    border-color: rgba(63, 136, 202, 0.52) !important;
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: none !important;
    outline: none !important;
}

.read-termform-body .term-form-reading-redesign .term-translation-row #translation::placeholder {
    color: rgba(83, 103, 125, 0.42);
}

.read-termform-body .term-form-reading-redesign .term-tags-row.reading-meta-row {
    position: relative;
    order: 0;
    gap: 0;
    padding-top: 0;
}

.read-termform-body .term-form-reading-redesign .reading-level-value,
.read-termform-body .term-form-reading-redesign .reading-meta-divider {
    display: none;
}

.read-termform-body .term-form-reading-redesign .reading-tag-field {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.36rem);
    z-index: 3;
    width: min(14rem, calc(100vw - 2.2rem));
}

.read-termform-body .term-form-reading-redesign .term-tags-row.reading-meta-row.is-editing .reading-tag-field {
    display: block;
}

.read-termform-body .term-form-reading-redesign .term-tags-row.reading-meta-row.is-editing .reading-tags-display {
    display: none;
}

.read-termform-body .term-form-reading-redesign .reading-tags-display {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.28rem;
    min-height: 1.58rem;
    cursor: text;
    color: rgba(72, 91, 112, 0.46);
    font-size: 0.76rem;
}

.read-termform-body .term-form-reading-redesign .reading-tags-display.is-empty {
    width: 1.58rem;
    height: 1.58rem;
    min-height: 1.58rem;
    justify-content: center;
    border: 1px solid rgba(166, 187, 210, 0.34);
    border-radius: 999px;
    background: transparent;
    color: rgba(82, 103, 126, 0.52);
    transition: background 130ms ease, color 130ms ease, box-shadow 130ms ease;
}

.read-termform-body .term-form-reading-redesign .reading-tags-display.is-empty:hover,
.read-termform-body .term-form-reading-redesign .term-tags-row.reading-meta-row.is-editing .reading-tags-display.is-empty {
    background: rgba(255, 255, 255, 0.42);
    color: #5d89b6;
    box-shadow: inset 0 0 0 1px rgba(166, 187, 210, 0.24);
}

.read-termform-body .term-form-reading-redesign .reading-tag-placeholder-icon {
    width: 0.82rem;
    height: 0.82rem;
}

.read-termform-body .term-form-reading-redesign .reading-tag-chip {
    border-radius: 999px;
    background: rgba(130, 161, 192, 0.14);
    color: rgba(33, 56, 80, 0.78);
    font-size: 0.72rem;
    font-weight: 540;
    line-height: 1;
    padding: 0.24rem 0.46rem;
}

.read-termform-body .term-form-reading-redesign .reading-tag-field .tagify {
    min-height: 1.88rem;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(152, 177, 204, 0.38) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    padding: 0.22rem 0.52rem !important;
    box-shadow: 0 0.72rem 1.6rem rgba(33, 61, 89, 0.1) !important;
}

.read-termform-body .term-form-reading-redesign .reading-tag-field .tagify__input::before {
    color: rgba(55, 74, 95, 0.44);
    font-size: 0.76rem;
}

#read_sidebar_status_dock {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
        "label current actions"
        "steps steps steps";
    row-gap: 0.3rem;
    column-gap: 0.5rem;
    align-items: center;
    margin: 0.32rem 0.98rem 0.9rem;
    padding: 0.68rem 0.78rem 0.72rem;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 0 0 1px rgba(176, 194, 213, 0.16);
}

.status-dock-label {
    grid-area: label;
    color: rgba(50, 68, 88, 0.62);
    font-size: 0.68rem;
    font-weight: 620;
}

.status-dock-current {
    grid-area: current;
    justify-self: end;
    color: #173757;
    font-size: 0.72rem;
    font-weight: 660;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-dock-side-left {
    display: none;
}

.status-dock-side-right {
    grid-area: known;
    justify-self: end;
}

.status-dock-actions {
    grid-area: actions;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.status-dock-steps {
    grid-area: steps;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.16rem;
    align-items: end;
    padding-top: 0.05rem;
}

.status-dock-btn {
    width: 100%;
    height: 0.86rem;
    border-radius: 999px;
    background: transparent;
    color: rgba(44, 65, 88, 0.52);
    font-size: 0;
    font-weight: 600;
    box-shadow: none;
}

.status-dot {
    display: block;
    width: 100%;
    height: 0.32rem;
    border-radius: 999px;
    background: rgba(139, 160, 183, 0.2);
    transition: background 130ms ease, transform 130ms ease, opacity 130ms ease;
}

.status-dock-btn:hover {
    background: transparent;
    box-shadow: none;
}

.status-dock-btn:hover .status-dot {
    background: rgba(89, 143, 194, 0.42);
}

.status-dock-btn.active,
.status-dock-btn.is-active,
.status-dock-btn[aria-pressed="true"] {
    background: transparent;
    box-shadow: none;
}

.status-dock-btn.active .status-dot,
.status-dock-btn.is-active .status-dot,
.status-dock-btn[aria-pressed="true"] .status-dot {
    background: #4d95d8;
    transform: scaleY(1.45);
}

#read_sidebar_status_dock .status-dock-btn[data-tooltip]::before {
    display: none;
}

.status-dock-delete {
    width: 1.18rem;
    height: 1.18rem;
    font-size: 0.74rem;
    opacity: 0.62;
}

.status-dock-known {
    width: 1.16rem;
    height: 1.16rem;
    justify-self: end;
    background: rgba(105, 184, 126, 0.1);
    color: #2f7d4d;
    font-size: 0.72rem;
    box-shadow: inset 0 0 0 1px rgba(105, 184, 126, 0.18);
}

.status-dock-ignore {
    width: 1.16rem;
    height: 1.16rem;
    color: #8b4c4c;
    font-size: 0.7rem;
    box-shadow: inset 0 0 0 1px rgba(180, 116, 116, 0.2);
}

.status-dock-ignore.active {
    background: rgba(180, 116, 116, 0.14);
    box-shadow: inset 0 0 0 1px rgba(180, 116, 116, 0.34);
}

.dictcontainer {
    gap: 0.58rem;
    padding: 0 1rem 1.12rem;
}

.dictcontainer-header {
    margin-top: 0.06rem;
}

.dictcontainer-title {
    font-size: 0.9rem;
    font-weight: 640;
}

.dict-results-title {
    display: none;
}

/* Right-pane iframes are app-controlled; keep them on the active reading material. */
body.read-termform-body,
.internal-dictionary-body {
    background: var(--reading-surface);
    color: var(--reading-text);
}

.read-termform-body .term-form-reading-redesign .reading-term-display,
.internal-dictionary-headword-group h2 {
    color: var(--reading-text);
}

.read-termform-body .term-form-reading-redesign .reading-romanization-display,
.read-termform-body .term-form-reading-redesign .reading-romanization-display:empty::before,
.read-termform-body .term-form-reading-redesign .reading-meaning-header,
.read-termform-body .term-form-reading-redesign .term-tags-row.reading-meta-row,
.read-termform-body .term-form-reading-redesign .reading-level-value,
.read-termform-body .term-form-reading-redesign .reading-tags-display,
.read-termform-body .term-form-reading-redesign .reading-tags-display.is-empty,
.read-termform-body .term-form-reading-redesign .reading-tag-field .tagify__input::before,
.internal-dictionary-section-label,
.internal-dictionary-source,
.internal-dictionary-license,
.internal-dictionary-empty {
    color: var(--color-text-muted);
}

.read-termform-body .term-form-reading-redesign .reading-meaning-display,
.read-termform-body .term-form-reading-redesign .term-translation-row #translation,
.internal-dictionary-body,
.internal-dictionary-copy-line,
.internal-dictionary-pronunciation-line {
    color: var(--reading-text);
}

.read-termform-body .term-form-reading-redesign .reading-meaning-display:hover,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle:hover,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle.is-active,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle:hover .reading-pronunciation-compose-icon,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle.is-active .reading-pronunciation-compose-icon,
.dictcontainer-title,
.dictcontainer-manage,
.dictcontainer-manage:hover {
    color: var(--reading-link);
}

.read-termform-body .term-form-reading-redesign .reading-favorite-toggle,
.read-termform-body .term-form-reading-redesign .reading-tags-display.is-empty,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle,
.internal-dictionary-copy-button {
    border-color: var(--reading-border-muted);
    background: transparent;
    color: var(--color-text-muted);
    box-shadow: none;
}

.read-termform-body .term-form-reading-redesign .reading-favorite-toggle:hover,
.read-termform-body .term-form-reading-redesign .reading-favorite-toggle.is-active,
.read-termform-body .term-form-reading-redesign .reading-tags-display.is-empty:hover,
.read-termform-body .term-form-reading-redesign .term-tags-row.reading-meta-row.is-editing .reading-tags-display.is-empty,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle:hover,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-toggle.is-active,
.internal-dictionary-copy-button:hover,
.internal-dictionary-copy-button:focus {
    border-color: var(--reading-border);
    background: var(--reading-surface-muted);
    color: var(--reading-link);
    box-shadow: none;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot {
    border-bottom-color: var(--reading-border-muted);
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot:not(.has-value) {
    border-bottom-style: dashed;
    border-bottom-color: var(--reading-border-muted);
    background: transparent;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot:not(.has-value):hover,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot:not(.has-value):focus,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot:not(.has-value):focus-within {
    border-bottom-color: var(--reading-link);
    background: transparent;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot:not(.has-value) .reading-romanization-display:empty {
    min-height: 1rem;
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot:not(.is-composing) .reading-romanization-display:empty::before {
    content: "";
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-slot.is-composing .reading-romanization-display:empty::before {
    content: attr(data-placeholder);
}

.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-icon::before,
.read-termform-body .term-form-reading-redesign .reading-pronunciation-compose-icon::after {
    background:
        radial-gradient(circle at 50% 0, currentColor 0 0.06rem, transparent 0.065rem),
        var(--reading-surface-muted);
    box-shadow: inset 0 0 0 1px var(--reading-border-muted);
}

.read-termform-body .term-form-reading-redesign .term-translation-row #translation {
    border-color: var(--reading-border-muted) !important;
    background: transparent !important;
    caret-color: var(--reading-link);
}

.read-termform-body .term-form-reading-redesign .term-translation-row #translation:focus {
    border-color: var(--reading-link) !important;
    background: color-mix(in srgb, var(--reading-surface-muted) 58%, transparent) !important;
}

.read-termform-body .term-form-reading-redesign .term-translation-row #translation::placeholder,
.read-termform-body .term-form-reading-redesign .reading-meaning-display.is-empty {
    color: color-mix(in srgb, var(--color-text-muted) 62%, transparent);
}

.read-termform-body .term-form-reading-redesign .reading-tag-chip,
.internal-dictionary-match-badge {
    background: color-mix(in srgb, var(--reading-link) 14%, transparent);
    color: var(--reading-text);
}

.read-termform-body .term-form-reading-redesign .reading-tag-field .tagify {
    border-color: var(--reading-border) !important;
    background: var(--reading-surface) !important;
    box-shadow: 0 0.72rem 1.6rem color-mix(in srgb, var(--interface-bg) 18%, transparent) !important;
}

#read_sidebar_status_dock {
    background: color-mix(in srgb, var(--reading-surface-muted) 78%, transparent);
    box-shadow: inset 0 0 0 1px var(--reading-border-muted);
}

.status-dock-label,
.status-dock-btn {
    color: var(--color-text-muted);
}

.status-dock-current {
    color: var(--reading-text);
}

.status-dot {
    background: color-mix(in srgb, var(--color-text-muted) 28%, transparent);
}

.status-dock-btn:hover .status-dot {
    background: color-mix(in srgb, var(--reading-link) 44%, transparent);
}

.status-dock-btn.active .status-dot,
.status-dock-btn.is-active .status-dot,
.status-dock-btn[aria-pressed="true"] .status-dot {
    background: var(--reading-link);
}

.status-dock-known {
    background: color-mix(in srgb, var(--highlight-known) 28%, transparent);
    color: var(--reading-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--highlight-known) 36%, transparent);
}

.status-dock-ignore {
    background: color-mix(in srgb, var(--highlight-ignored) 36%, transparent);
    color: var(--reading-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--highlight-ignored) 52%, transparent);
}

.status-dock-ignore.active {
    background: color-mix(in srgb, var(--highlight-ignored) 64%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--highlight-ignored) 78%, transparent);
}

@container reading-right-pane (max-width: 240px) {
    #read_sidebar_status_dock {
        margin-inline: 0.72rem;
        padding-inline: 0.48rem;
    }

    .status-dock-steps {
        gap: 0.1rem;
    }

    .status-dock-btn {
        width: 1.18rem;
        height: 1.18rem;
        font-size: 0.62rem;
    }

    .status-dock-label {
        font-size: 0.66rem;
    }
}

div#read_pane_right.music-term-panel {
    z-index: 1004;
}

.account-menu-logout-form {
    margin: 0;
}

.account-menu-logout-form button {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
}

.inline-post-form,
.inline-refresh-form {
    display: inline;
    margin: 0;
    padding: 0;
}

.demo-action-line {
    margin: 1em 0;
}

.link-button {
    background: transparent;
    border: 0;
    color: var(--color-link);
    cursor: pointer;
    display: inline;
    font: inherit;
    margin: 0;
    padding: 0;
    text-decoration: underline;
}

div#read_pane_right.music-term-panel.music-term-panel-closed {
    transform: translateX(calc(100% + 1.5rem));
    opacity: 0;
    pointer-events: none;
}

@media screen and (max-width: 980px) {
    div#read_pane_right.music-term-panel.music-term-panel-closed {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }

    div#read_pane_right.music-term-panel.open-dict {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
}