/* --- Main Area & Views --- */
        .main-area { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; background-color: var(--word-workspace); position: relative; }
        .page-view { flex-grow: 1; padding: 40px 50px; overflow-y: auto; background: var(--word-page); color: var(--word-text); }
        .support-bmc-host { margin-top: 28px; min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
        
        .workspace { flex-grow: 1; display: flex; overflow: hidden; padding: 20px; gap: 20px; justify-content: center; }

        /* 浮動考規提示：可拖曳、可調大小、可調字級（位置／尺寸／字級存 localStorage） */
        .skill-rules-hint {
            --sr-font: 12.5px;
            position: fixed;
            right: max(12px, env(safe-area-inset-right, 0px));
            bottom: max(88px, env(safe-area-inset-bottom, 0px));
            left: auto;
            top: auto;
            z-index: 150;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: min(400px, calc(100vw - 20px));
            max-width: calc(100vw - 16px);
            box-sizing: border-box;
            font-family: var(--ui-font);
            pointer-events: auto;
        }
        .skill-rules-hint.skill-rules-hint--custom-pos {
            right: auto !important;
            bottom: auto !important;
        }
        .skill-rules-hint__chrome {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            gap: 0;
            flex-shrink: 0;
            min-width: 0;
        }
        .skill-rules-hint__drag {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            flex-shrink: 0;
            border: 1px solid var(--word-border);
            border-right: none;
            border-radius: 8px 0 0 0;
            background: var(--word-ribbon-active);
            color: var(--word-text-light);
            cursor: grab;
            font-size: 14px;
            line-height: 1;
            user-select: none;
            touch-action: none;
        }
        .skill-rules-hint--collapsed .skill-rules-hint__drag {
            border-radius: 8px 0 0 8px;
        }
        .skill-rules-hint__drag:active {
            cursor: grabbing;
        }
        .skill-rules-hint__tab {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex: 1;
            min-width: 0;
            padding: 8px 10px;
            border: 1px solid var(--word-border);
            border-radius: 0 8px 0 0;
            background: var(--word-page);
            color: var(--word-text);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 -4px 18px rgba(0,0,0,0.12);
            transition: background 0.2s, border-color 0.2s;
            user-select: none;
        }
        .skill-rules-hint--collapsed .skill-rules-hint__tab {
            border-radius: 0 8px 8px 0;
            box-shadow: 0 4px 18px rgba(0,0,0,0.12);
        }
        .skill-rules-hint:not(.skill-rules-hint--collapsed) .skill-rules-hint__tab {
            border-bottom: none;
            border-radius: 0;
        }
        .skill-rules-hint:not(.skill-rules-hint--collapsed) .skill-rules-hint__drag {
            border-radius: 0;
            border-bottom: none;
        }
        .skill-rules-hint__tab:hover {
            background: var(--word-ribbon-active);
        }
        .skill-rules-hint__tab-chev {
            font-size: 10px;
            opacity: 0.75;
            transition: transform 0.2s;
            flex-shrink: 0;
        }
        .skill-rules-hint:not(.skill-rules-hint--collapsed) .skill-rules-hint__tab-chev {
            transform: rotate(180deg);
        }
        .skill-rules-hint__tools {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 8px;
            border: 1px solid var(--word-border);
            border-left: none;
            border-radius: 0 8px 0 0;
            background: var(--word-page);
            flex-shrink: 0;
        }
        .skill-rules-hint--collapsed .skill-rules-hint__tools {
            border-radius: 0 8px 8px 0;
            border-left: 1px solid var(--word-border);
        }
        .skill-rules-hint:not(.skill-rules-hint--collapsed) .skill-rules-hint__tools {
            border-bottom: none;
            border-radius: 0;
        }
        .skill-rules-hint__tools label {
            font-size: 11px;
            color: var(--word-text-light);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 0;
            cursor: pointer;
        }
        .skill-rules-hint__tools input[type="range"] {
            width: 64px;
            vertical-align: middle;
        }
        .skill-rules-hint:not(.skill-rules-hint--collapsed) {
            height: min(52vh, 420px);
            min-height: 200px;
            min-width: 260px;
            max-height: 88vh;
            max-width: min(560px, 94vw);
            resize: both;
            overflow: hidden;
        }
        .skill-rules-hint--collapsed {
            resize: none;
            height: auto !important;
            min-height: 0;
        }
        .skill-rules-hint__panel {
            border: 1px solid var(--word-border);
            border-top: none;
            border-radius: 0 0 8px 8px;
            background: var(--word-page);
            color: var(--word-text);
            font-size: var(--sr-font);
            line-height: 1.55;
            padding: 12px 14px 14px;
            flex: 1 1 auto;
            min-height: 0;
            min-width: 0;
            overflow: auto;
            box-sizing: border-box;
            box-shadow: 0 8px 24px rgba(0,0,0,0.14);
        }
        .skill-rules-hint--collapsed .skill-rules-hint__panel {
            display: none;
        }
        .skill-rules-hint__panel h4 {
            font-size: calc(var(--sr-font) * 1.08);
            font-weight: 600;
            color: var(--word-blue);
            margin: 0 0 8px 0;
        }
        .skill-rules-hint__panel p { margin: 0 0 10px 0; }
        .skill-rules-hint__panel ul {
            margin: 0 0 10px 1em;
            padding: 0;
        }
        .skill-rules-hint__panel li { margin-bottom: 6px; }
        .skill-rules-hint__note {
            font-size: calc(var(--sr-font) * 0.92);
            color: var(--word-text-light);
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--word-border);
        }
        body.dark-mode .skill-rules-hint__tab,
        body.dark-mode .skill-rules-hint__panel,
        body.dark-mode .skill-rules-hint__tools,
        body.dark-mode .skill-rules-hint__drag {
            background: var(--word-page);
            border-color: var(--word-border);
        }
        body.dark-mode .skill-rules-hint__drag {
            background: #2b2b2b;
        }
        @media (max-width: 900px) {
            .skill-rules-hint:not(.skill-rules-hint--custom-pos) {
                right: 8px;
                bottom: 72px;
            }
        }
        .skill-rules-hint--fully-hidden {
            display: none !important;
        }
        .skill-rules-hint__close {
            flex-shrink: 0;
            margin: 0 2px 0 4px;
            padding: 0 6px;
            border: none;
            background: transparent;
            color: var(--word-text-light);
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            border-radius: 4px;
            align-self: center;
        }
        .skill-rules-hint__close:hover {
            background: rgba(0,0,0,0.06);
            color: var(--word-text);
        }
        body.dark-mode .skill-rules-hint__close:hover {
            background: rgba(255,255,255,0.08);
        }
        .skill-rules-hint-restore {
            display: none;
            position: fixed;
            right: max(12px, env(safe-area-inset-right, 0px));
            bottom: max(88px, env(safe-area-inset-bottom, 0px));
            z-index: 150;
            padding: 8px 14px;
            font-size: 13px;
            font-weight: 600;
            font-family: var(--ui-font);
            border: 1px solid var(--word-border);
            border-radius: 8px;
            background: var(--word-page);
            color: var(--word-blue);
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(0,0,0,0.12);
        }
        .skill-rules-hint-restore:hover {
            background: var(--word-ribbon-active);
        }
        @media (max-width: 900px) {
            /* Bottom-left: avoids overlap with .mobile-tab-fab (bottom-right). */
            .skill-rules-hint-restore {
                right: auto;
                left: max(8px, env(safe-area-inset-left, 0px));
                bottom: max(40px, calc(10px + env(safe-area-inset-bottom, 0px)));
            }
        }
        
        .page-container {
            flex: 1; max-width: 800px; 
            display: block; 
            overflow-y: auto; overflow-x: visible;
            padding-bottom: 120px; height: 100%; box-sizing: border-box;
        }

        .page-title { font-size: 13px; color: var(--word-text-light); margin-bottom: 8px; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; }

        .a4-page {
            width: 100%; min-height: 800px; background-color: var(--word-page); box-shadow: 0 1px 4px rgba(0,0,0,0.2);
            position: relative; transition: background-color 0.3s;
            padding: 50px 70px 100px 70px; 
            margin: 0 auto 40px auto; 
            display: block; 
        }
        
        .physical-paper { 
            background-color: #FCFCFA; 
            border-top: 15px solid #e0e0d5; 
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        body.dark-mode .physical-paper { background-color: #2b2b28; border-top: 15px solid #1a1a18; }
        .typing-paper { border-top: 15px solid transparent; }

        .document-format {
            font-family: var(--doc-font); font-size: 18px; line-height: 2.2;
            text-align: justify; letter-spacing: 0.5px; word-wrap: break-word; white-space: pre-wrap;
            tab-size: 4; -moz-tab-size: 4; color: var(--word-text); transition: color 0.3s;
            font-variant-ligatures: none;
            width: 100%; border: none; background: transparent; outline: none; margin: 0; padding: 0;
            display: block; box-sizing: border-box; resize: none; overflow: hidden;
        }
        body.dark-mode .document-format { color: #f0f0f0; }

        #sourceText { flex-grow: 1; overflow: visible; }
        /* 淨速上標 SVG 會略高於行框，不可沿用 textarea 的 overflow:hidden */
        #sourceText.document-format { overflow: visible; }
        
        textarea#typingInput { flex-grow: 1; vertical-align: top; color: inherit; -webkit-appearance: none; appearance: none; border-radius: 0; }
        textarea#typingInput:disabled { opacity: 1; color: var(--word-text-light); }

        /* 淨速上標：零寬錨點＋絕對定位 SVG，不撐開字距；折角向左伸入前字下方（同官方試卷） */
        .wpm-mark-anchor {
            display: inline-block;
            width: 0;
            height: 0;
            line-height: 0;
            vertical-align: baseline;
            position: relative;
            overflow: visible;
            user-select: none;
        }
        .wpm-mark-flyout {
            position: absolute;
            left: 0;
            bottom: 0;
            transform: translate(-46%, 1.1em);
            pointer-events: auto;
            z-index: 4;
            line-height: 0;
        }
        .wpm-mark-flyout svg {
            display: block;
            overflow: visible;
        }
        .wpm-mark-svg polyline {
            transform-box: fill-box;
            transform-origin: bottom right;
            transform: translateY(-0.12em) scaleY(0.92);
        }
        .wpm-mark-flyout--ca { color: var(--wpm-mark-ca); }
        .wpm-mark-flyout--aco { color: var(--wpm-mark-aco); }
        /* 同一詞尾同時掛 CA／ACO 時略為錯開，避免完全重疊 */
        .wpm-mark-flyout--stacked {
            margin-left: 1.05em;
        }
        /* 上標「僅數字」模式：置於字隙／詞界正中上方（與有線版竪線對齊點一致），避免偏去下一字開頭 */
        .wpm-mark-anchor--numbers-only .wpm-mark-flyout.wpm-mark-flyout--numbers-only {
            left: 0;
            bottom: 0;
            top: auto;
            transform: translate(calc(-50% - 0.55em), -0.62em);
        }
        .wpm-mark-anchor--numbers-only.wpm-mark-anchor--stacked-offset .wpm-mark-flyout--numbers-only {
            transform: translate(calc(-50% - 0.55em + 0.78em), -0.62em);
        }
        .wpm-mark-num {
            display: inline-block;
            text-align: center;
            font-family: var(--ui-font);
            font-size: 0.68em;
            font-weight: 700;
            line-height: 1;
            letter-spacing: -0.02em;
            white-space: nowrap;
        }
        @media (max-width: 900px) {
            .wpm-mark-num {
                font-size: 0.65em;
            }
            .wpm-mark-anchor--numbers-only .wpm-mark-flyout.wpm-mark-flyout--numbers-only {
                transform: translate(calc(-50% - 0.55em), -0.78em);
            }
            .wpm-mark-anchor--numbers-only.wpm-mark-anchor--stacked-offset .wpm-mark-flyout--numbers-only {
                transform: translate(calc(-50% - 0.55em + 0.78em), -0.78em);
            }
            .wpm-mark-flyout {
                transform: translate(-46%, 0.85em);
            }
            .wpm-mark-flyout svg {
                width: 1.68em;
                height: 2.5em;
            }
            .wpm-mark-svg polyline {
                transform-box: fill-box;
                transform-origin: bottom right;
                transform: scaleY(0.72);
            }
        }

        .c-correct { color: #1f4373; background-color: rgba(43, 87, 154, 0.22); border-bottom: 1px solid rgba(43, 87, 154, 0.45); } 
        .c-wrong { color: #c5221f; background-color: rgba(197, 34, 31, 0.1); text-decoration: underline; text-decoration-style: wavy; }
        .c-current { background-color: rgba(255, 204, 64, 0.32); border-bottom: 2px solid #b06000; }
        body.dark-mode .c-correct { color: #cfe0ff; background-color: rgba(122, 165, 235, 0.18); border-bottom: 1px solid rgba(122, 165, 235, 0.4); }
        body.dark-mode .c-wrong { color: #ff6b6b; }
        body.dark-mode .c-current { background-color: rgba(122, 165, 235, 0.2); border-bottom: 2px solid var(--word-blue); }

        /* 考試模式：參考區須完全不變（像紙本），不顯示對／錯／游標等任何提示 */
        .exam-mode-active .c-correct,
        .exam-mode-active .c-wrong,
        .exam-mode-active .c-current,
        body.dark-mode .exam-mode-active .c-correct,
        body.dark-mode .exam-mode-active .c-wrong,
        body.dark-mode .exam-mode-active .c-current {
            color: inherit !important;
            background-color: transparent !important;
            border-bottom: none !important;
            text-decoration: none !important;
        }