:root,
[data-bs-theme="light"] {
    --cur-word-cursor-bg: #f8d7b7;   /* gray-400，浅色背景上够明显 */
}
[data-bs-theme="dark"] {
    --cur-word-cursor-bg: #504141;   /* gray-600，深色背景上够明显 */
}


* {
    padding: 0;
    margin: 0;
}

body {
    color: #cc8603;
}



/***************************** 布局与滚动核心样式：请勿修改，start *****************************/
/**
 * 结构层级：
 *   .split-layout
 *     └─ .split-item（.word-split-item / .detail-split-item）
 *          └─ .split-content
 *
 * 职责说明：
 *   .split-layout      控制整体方向（横屏左右 / 竖屏上下）
 *   .split-item        控制各分屏的宽高占比
 *   .split-content     撑满分屏高度，并在内容超出时纵向滚动
 *
 * 注意：
 *   这些样式决定了分屏比例和滚动行为，
 *   任何修改都可能破坏布局或导致滚动失效。
 */

/* 小屏 / 竖屏下 offcanvas 从上方弹出，高度不足，将默认 30vh 提升至 40vh */
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
    --bs-offcanvas-height: 40vh;
}

/* 竖屏 / 小屏（<576px）：上下布局，上 20% 单词区，下 80% 释义区 */
@media (max-width: 575.98px) {
    .split-layout {
        flex-direction: column;
    }
    .word-split-item {
        width: 100% !important;
        height: 20%;
    }
    .detail-split-item {
        width: 100% !important;
        height: 80%;
    }
}

/* 横屏 / 大屏（≥576px）：左右布局，左 40% 单词区，右 60% 释义区 */
@media (min-width: 576px) {
    .split-layout {
        flex-direction: row;
    }
    .word-split-item {
        width: 40%;
        height: 100% !important;
    }
    .detail-split-item {
        width: 60%;
        height: 100% !important;
    }
}

/* 分屏内容区：始终撑满高度，内容超出时纵向滚动 */
.split-content {
    height: 100%;
    overflow: auto;
}

/* Split.js 会在两个分屏之间插入 .gutter，并给分屏写内联宽/高。
   下面只负责让分屏可收缩、gutter 可点击和主题适配，不覆盖 Split.js 的尺寸。 */
.split-item {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
}

#wordCard > .gutter {
    position: relative;
    flex: 0 0 auto;
    background-color: var(--bs-border-color);
    background-repeat: no-repeat;
    background-position: 50%;
    touch-action: none;
    transition: background-color .15s ease;
}

#wordCard > .gutter:hover,
#wordCard > .gutter:focus-visible {
    background-color: var(--bs-primary);
}

#wordCard > .gutter:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

#wordCard > .gutter.gutter-horizontal {
    cursor: col-resize;
}

#wordCard > .gutter.gutter-vertical {
    cursor: row-resize;
}

/* 中央握把提示：桌面竖点，手机横点 */
#wordCard > .gutter::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 28px;
    transform: translate(-50%, -50%);
    border-radius: 2px;
    background: var(--bs-secondary-color);
    pointer-events: none;
}

@media (max-width: 575.98px) {
    #wordCard > .gutter::after {
        width: 28px;
        height: 2px;
    }
}

/***************************** 布局与滚动核心样式：请勿修改，end *****************************/



#curPageWordType {
    display: inline;
}

#mainDiv {
    /*color: gray;*/
}

/* 单词释义 */
#meaningDiv {
}
/*.word-split-item .card-body{position: relative;}*/
/*.word-split-item .progress{position: absolute; top: 1px; left: 0;}*/

.word_item {
    /*font-size: 1.2em;*/
    /*display: inline-block;*/
    /*cursor: pointer;*/
    /*border: 1px solid gray;*/
    /*margin: 1px 2px;*/
    /*padding: 1px 1px;*/
    /*border-radius: 4px;*/
}

.cur-word-cursor {
    background-color: var(--cur-word-cursor-bg);
}


/*
❶❷❸❹❺❺❻❼❽❾❿
①②③④⑤⑥⑦⑧⑨⑩
*/
/* 基础样式：只写一次 */
[class^="lv"]:before,
[class*=" lv"]:before {
}

/* 内容一一对应 */
.lv1:before  { content: '①'; }
.lv2:before  { content: '②'; }
.lv3:before  { content: '③'; }
.lv4:before  { content: '④'; }
.lv5:before  { content: '⑤'; }
.lv6:before  { content: '⑥'; }
.lv7:before  { content: '⑦'; }
.lv8:before  { content: '⑧'; }
.lv9:before  { content: '⑨'; }
.lv10:before { content: '⑩'; }

/* 三色循环：柔和、语义化、随主题变 */
.lv1:before, .lv4:before, .lv7:before, .lv10:before { color: var(--bs-danger); }
.lv2:before, .lv5:before, .lv8:before              { color: var(--bs-warning); }
.lv3:before, .lv6:before, .lv9:before              { color: var(--bs-primary); }

.fp { border-left:  4px solid var(--bs-primary); }
.mp { border-right: 4px solid var(--bs-purple); }
.mm { border-top:   4px solid var(--bs-success); }
.wr { border-bottom: 4px solid var(--bs-danger); }
.sim {
    border-radius: 12px;
    /*color: deepskyblue;*/
}

/*.btns {*/
/*    width: 100%;*/
/*    margin: 1px 0;*/
/*    text-align: center;*/
/*}*/

#curWord {
    display: inline-block;
    width: 200px;
    cursor: text;
    user-select: text;
}

.word_speaker {
    margin: 0 1px;
    display: inline-block;
    position: relative;
    top: 3px;
    width: 1rem;
    height: 1rem;
    background-color: #888;                 /* 图标颜色 */
    -webkit-mask: url("/static/img/speaker.svg") no-repeat center / contain;
    mask: url("/static/img/speaker.svg") no-repeat center / contain;
}

/* 声音小喇叭 */
.tts_us {
    cursor: pointer;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    top: 2px;
    margin: 0px 0px;
    width: 15px;
    height: 15px;
    background-image: url("/static/img/spkr_b.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.tts_br {
    cursor: pointer;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    top: 2px;
    margin: 0px 0px;
    width: 15px;
    height: 15px;
    background-image: url("/static/img/spkr_r.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


/***************************** 词典查词弹窗样式，start *****************************/
/*
 * 词典弹窗由 words.html 的 #wordDictModalTemplate 提供。
 * 结构：
 *   .word-dict-dialog
 *     ├─ .word-dict-buttons   词典 Tab
 *     ├─ .word-dict-panels   词典内容面板（每个面板内一个 dict-content iframe）
 *     └─ .word-dict-bottom-controls 始终显示：上一本/关闭/下一本
 *
 * 样式集中放在 words.css，和词典弹窗的 HTML/JS 一起维护。
 */
.word-dict-modal-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.word-dict-dialog {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* 弹窗容器只用于接收词典快捷键焦点，不显示额外轮廓。 */
.word-dict-dialog:focus {
    outline: none;
}

.word-dict-dialog > .card-header,
.word-dict-buttons {
    flex: 0 0 auto;
}

.word-dict-panels {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

.word-dict-panels > .word-dict-panel:not(.d-none) {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.word-dict-panels iframe {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
}

.word-dict-bottom-controls {
    /* 电脑、平板、手机始终显示；固定在弹窗底部，避免被词典内容遮挡。 */
    z-index: 1060;
}
/***************************** 词典查词弹窗样式，end *****************************/


/***************************** 词典 iframe 加载占位，start *****************************/
/*
 * dict-content iframe 加载慢时，在面板上覆盖 loading，避免出现长时间空白。
 * 面板必须是定位容器，loading 才能覆盖整个 iframe 区域。
 */
.word-dict-panel {
    position: relative;
}

.word-dict-loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--bs-secondary-color);
    text-align: center;
    background: var(--bs-body-bg);
}

.word-dict-loading-text {
    font-size: 0.9rem;
}
/***************************** 词典 iframe 加载占位，end *****************************/