/* 書籍詳細頁樣式：自 book_detail.cshtml 內嵌 <style> 原樣抽出（2026-09 Vue 3 改版；除 @@ 逃逸還原與 Razor 註解移除外零改動）。
   檔尾附原本位於 body 內的 #MediaDailog 影音 Modal 樣式（工單 #0005887），保持較晚的 cascade 順序。 */
            /* 工單 0005788：書籍詳情頁不顯示角色專區導覽列（.role-section），
               --nav-section-height 歸零讓 nav-override.css 的 body 讓位收斂為 navbar 單列高。 */
            #nav-root .role-section { display: none !important; }
            html.mosme-logged-in { --nav-section-height: 0px; }

            :root {
                --theme-primary-color: #002FA7;
                --theme-secondary-color: #2E6BB6;
                --theme-hover-color: #C4EBEF;
            }

            .shareBtn {

                position: relative;
                background: rgba(255, 255, 255, 0.15);
                padding: 6px;
                border-radius: 5px;
            }
            .openBookReltiveBtnContainer {
                display:flex;
                justify-content:flex-start;
                align-items: center;
                gap: 7px;
                margin-bottom: 10px;
            }
            .tooltipContainer {
                position: absolute;
                bottom: calc(100% + 6px);
                background: rgba(0, 0, 0, 0.9);
                color: white;
                white-space: nowrap;
                font-size: 12px;
                font-weight: 500;
                border-radius: 5px;
                padding: 2px 5px;
                left: 50%;
                transform: translateX(-50%);
            }
            .tooltipArrow {
                position: absolute;
                top: 100%;
                border-top: 6px solid black;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                right: 50%;
            }
            .salesProfile a:hover {
                color: blue !important;
            }
            #countHeatEngagementMobile {
                justify-content: left;
                display: none !important;
            }
            #countHeatEngagementDesktop{
                justify-content: left;
                display: flex !important;
            }
            #duplicatePurchaseProductSetMessage {
                justify-content: left;
            }
            .bookPrice {
                justify-content: left;
            }
            .player_container {
                height: initial;
                max-height: initial;
            }

/*                    #bookTypeInfo1 {
                display: none;
            }

            #bookTypeInfo2 {
                display: none;
            }*/
            .shareLinkContainer {
                border-radius: 10px;
                padding: 2px 8px;
                margin-right: 10px;
                font-weight: 600;
                display: flex;
                gap: 5px;
                flex-direction: column;
                align-items: center;
            }

            @media screen and (min-width:992px) {
                .player_container {
                    height: calc(37.5vw - 25px);
                    max-height: 582px;
                }
            }
            .tr{
                display:table-row;
            }
            .td{
                display:table-cell;
            }
            
            .indent-2 {
                text-indent: 2em;
            }
            .content-menu2 {
                width: 100%;
                left: 0;
                margin-top: -3.5rem;
                z-index: 10;
            }
            .imgBlock{
                padding-left: 0px !important;
            }
            @media screen and (max-width: 768px) {
                .bookTabContent {
		            width: 350px;
	            }
            }
            @media only screen and (max-width: 767px){
                #countHeatEngagementMobile {
                    justify-content: center;
                }
                #countHeatEngagementDesktop {
                    justify-content: center;
                }
                .bookPrice {
                    justify-content: center;
                }
                .imgBlock {
                    padding-left: 15px !important;
                }
            }
            @media only screen and (max-width:  378px) {
                .bookTabContent {
                    width: 100%;
                }
            }
            /*訂閱方案modal*/
            .SubsInfo_flexFlow{
                flex-direction: row;
                flex-wrap: nowrap;
            }
            .SubsInfo_content{
                margin-right:10px;
                margin-left:10px;
            }
            .SubsInfo_button:hover {
                background: rgb(232, 132, 57) !important;
                color: white !important;
            }
            .SubsInfo_subscribebutton:hover {
                box-shadow: 0 0 5px 0.6px lightgray;
            }
            .SubsInfoTitleSize{
                font-size: 1.2rem;
            }
            @media only screen and (max-width: 987px) {
                .SubsInfo_flexFlow {
                    flex-direction: column;

                }
                .SubsInfo_content {
                    margin-right: 0px !important;
                    margin-left: 0px !important;
                }

            }
            @media only screen and (max-width: 390px){
                .SubsInfoTitleSize {
                    font-size: 18px;
                }
            }
            /*END 訂閱方案modal*/
            .simulationRuleButton{
                width: fit-content;
            }
            .simulationRuleTitle {
                margin-bottom: 0px;
            }
            .simulationRule {
                margin-bottom: 0px;
                text-align: left;
            }
            .simulationRuleContainer {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .simulationRuleExplanation {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .openorserialbtnrowItem {
                font-weight: 600;
                line-height: 1.42857143;
                text-align: center;
                white-space: nowrap;
                display: inline-block;
                padding: 6px 30px;
                border-radius: 3px;
                user-select: none;
                box-shadow: 1px 1px 2px 0.5px lightgray;
            }
            .openorserialbtnrow {
                box-shadow: none;
                display: inline-flex;
                align-content: center;
                gap: 7px;
                margin-top:0px !important;
            }
            .bg_blue {
                background: #2E6BB6;
                background: var(--theme-secondary-color);
            }
            .bg_orange {
                background: hsl(28, 90%, 50%);
            }
            .bg_blue:hover {
                background: var(--theme-hover-color);
                color: var(--theme-primary-color);
            }

            .bg_orange:hover {
                background: #ffe68a;
                color: hsl(28, 90%, 50%) !important;
            }
            .differentIdentityBG {
                background: var(--theme-primary-color);
            }
            .navContainer {
                background: transparent;
                margin: 0px;
                padding-left: 30px;
                display: flex;
                gap: 5px;
                height: 36px;
                user-select: none;
            }
            .navContainer > li > a {
                padding: 4px 12px;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
                font-weight: 600;
                background: var(--theme-secondary-color);
                text-decoration: none;
                height: 36px;
                white-space: nowrap;
            }
            .navContainer > li > a:hover {
                background: var(--theme-hover-color);
                color: var(--theme-primary-color);
            }
            .navContainer > li > a:focus {
                outline-color: white !important;
            }
            .navContainer > li.active > a {
                background: white;
                color: var(--theme-primary-color);
                outline-color: white !important;
            }
            .navItem {
                display: inline-block;
                cursor: pointer;
            }
            .btnIcon{
                display: none;
            }
            .mobileNavDropdown {
                display: none;
            }
            .navbarBG{
                background: transparent;
            }
            .navDropdownContainer {
                display: grid;
                grid-gap: 10px;
                grid-template-columns: calc(33% - 20px) calc(33% - 20px) calc(33% - 20px);
                justify-content: center;
                justify-items: center;
                z-index: 10;
            }
            .navDropdownItem:hover{
                text-decoration: none;

            }
            #menu-container{
                border: none;
            }
            .howopenrow a:hover {
                color: yellow;
                text-decoration: none;
            }

            @media only screen and (max-width: 540px) {
                .navDropdownContainer {
                    grid-template-columns: calc(50% - 20px) calc(50% - 20px);
                }
            }
            @media only screen and (max-width:769px) {
                .openBookReltiveBtnContainer{
                    justify-content:center;
                }
                #countHeatEngagementMobile {
                    display: flex !important;
                }
                #countHeatEngagementDesktop{
                    display: none !important;
                }
                #menu-container {
                    border-bottom: 1px solid lightgray;
                }
                .simulationRuleTitle {
                    margin-bottom: 10px;
                }
                .simulationRule {
                    margin-bottom: 5px;
                    align-self: flex-start;
                }
                .simulationRuleContainer{
                    flex-direction: column;
                    align-items:flex-start;
                }
                .simulationRuleExplanation {
                    flex-direction: column;
                    align-items: normal;
                }
                .simulationRuleButton {
                    width: 100%;
                }

                .openorserialbtnrow {
                    position: fixed;
                    bottom: 10px;
                    width: calc(100vw - 30px);
                    z-index: 2;
                    display: flex;
                    box-shadow: 0px 2px 3px 0.5px gray;
                    border-radius: 40px;
                    overflow: hidden;
                    left: 50%;
                    transform: translateX(-50%);
                    margin-top: 5px !important;
                    gap:0px;
                }

                .openorserialbtnrowItem {
                    flex: 1;
                    border-radius: 0px;
                    height: 50px;
                    font-size: 14px;
                    font-weight: 600;
                    border: none;
                    display: flex;
                    padding: 6px 20px;
                    justify-content: center;
                    align-items: center;
                    gap: 3px;
                }
                .navContainer {
                    background: white;
                    padding-left: 10px;
                    width: 100% !important;
                    overflow: auto;
                    scrollbar-width: none;
                }
                .navContainer > li > a {
                    background: white;
                    color: #404040;
                    border-bottom: 2px solid white;
                }
                .navContainer > li > a:hover{
                    background : white;
                    color: black;
                }
                .navContainer > li.active > a {
                  color: var(--theme-primary-color)
                }
                .navContainer > li.active {
                    border-bottom: 3px solid var(--theme-primary-color);
                }
                .btnIcon {
                    display: block;
                }
                .bg_blue {
                    background: var(--theme-primary-color);
                }
                .mobileNavDropdown {
                    display: block;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .navbarBG{
                    background: white;
                }
                .navDropdownItem {
                    width: 100%;
                    padding: 5px 0px;
                    color: #363636;
                    background: #e6e6e6;
                    border-radius: 5px;
                    white-space: nowrap;
                    cursor: pointer;
                    user-select: none;
                    text-align: center;
                }
                .navDropdownItem span{
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                }
                .navDropdownItem.active {
                    background: var(--theme-primary-color);
                    color: white;
                }
            }

            .ai-banner {
                background: linear-gradient(to right, #f76b1c, #f9a825); /* 橘色漸層 */
                color: white;
                padding: 16px 20px;
                border-radius: 10px;
                font-family: "Segoe UI", sans-serif;
                display: flex;
                align-items: flex-start;
                gap: 10px;
                max-width: 100%;
                box-sizing: border-box;
            }

                .ai-banner .icon img {
                    width: 20px;
                    height: 20px;
                    object-fit: contain;
                }

                .ai-banner .text {
                    display: flex;
                    flex-direction: column;
                }

                .ai-banner .title {
                    font-weight: bold;
                    font-size: 16px;
                }

                .ai-banner .desc {
                    font-size: 14px;
                    margin-top: 2px;
                    line-height: 1.4;
                }

            .status-notice-wrapper {
                display: flex;
                flex-wrap: wrap; /* 若太多項會自動換行 */
                gap: 8px; /* 每個項目間距 */
                align-items: center;
            }

            @media (max-width: 767.98px) {
                .status-notice-wrapper {
                    justify-content: center; /* 手機時置中 */
                }
            }


            /*更新紀錄*/
            .update-notice {
                background: rgba(255,255,255,0.15);
                padding: 20px;
                border-radius: 8px;
                margin-bottom: 20px;
                border-left: 4px solid #fbbf24;
            }

            .update-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 15px;
            }

            .update-title {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .view-more-btn {
                color: rgba(255,255,255,0.9) !important;
                text-decoration: none;
                font-size: 14px;
                padding: 5px 10px;
                border-radius: 4px;
                transition: background 0.3s;
                cursor: pointer;
                font-weight:600;
            }


                .update-icon {
                    width: 20px;
                    height: 20px;
                    background: #fbbf24;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    font-size: 12px;
                    font-weight: bold;
                }

            .update-title-text {
                font-size: 18px;
                font-weight: 600;
            }

            .update-latest {
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: rgba(255,255,255,0.1);
                padding: 12px 15px;
                border-radius: 6px;
            }

            .update-latest-content {
                flex: 1;
            }

            .update-filename {
                font-weight: 500;
                color: white;
            }

            .update-date {
                color: rgba(255,255,255,0.8);
                font-size: 14px;
                margin-left: 10px;
            }

            .update-log-container {
                overflow-y: auto !important;
                max-height: 600px !important;
            }

            .update-log-container h3 {
                margin: 0 0 25px 0;
                color: #333;
                font-size: 24px;
                border-bottom: 2px solid #4fd1c7;
                padding-bottom: 10px;
            }

            .update-entry {
                background: #f8f9fa;
                border-radius: 8px;
                padding: 20px;
                margin-bottom: 20px;
                border-left: 4px solid #4fd1c7;
            }

            .update-entry-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 15px;
                border-bottom: 1px solid #e9ecef;
                padding-bottom: 10px;
            }

                .update-entry-header h4 {
                    margin: 0;
                    color: #333;
                    font-size: 18px;
                }

            .update-entry-date {
                color: #666;
                font-size: 14px;
            }

            .update-entry-content {
                color: #555;
            }

                .update-entry-content p {
                    margin: 0 0 10px 0;
                    font-weight: 500;
                }

                .update-entry-content ul {
                    margin: 0;
                    padding-left: 20px;
                }

                .update-entry-content li {
                    margin-bottom: 5px;
                }

                .update-item-file {
                    font-size: 15px;
                    color: #333;
                    margin-bottom: 8px;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                }

                .update-item-note.default {
                    color: #999;
                    white-space: pre-line !important;
                }

                .update-item-note {
                    font-size: 14px;
                    color: #666;
                    padding-left: 24px;
                    line-height: 1.6;
                }

                .finished {
                    text-align: center;
                    padding: 10px;
                    color: #999;
                }
            /*更新紀錄 End*/

            /*修正office報表內容位置*/
            .passImg {
                top: 130px !important;
                left: 700px !important;
            }

            .infoB {
                top: 60px !important;
                left: 580px !important;
            }

            .StudentTestInfo {
                width: 760px !important;
            }
            /*修正office報表內容位置 End*/

            /*認證專區的"國際認證"頁籤中平台超連結*/
            .platform-hyperlink {
                color: #337ab7 !important;
            }
            /*認證專區的"國際認證"頁籤中平台超連結 END*/

            /* 序號登錄 Modal 書籍資訊卡（與首頁統一樣式） */
            .modal-book-info {
                display: flex;
                gap: 1rem;
                padding: 1rem;
                background: #f9fafb;
                border-radius: 0.75rem;
                margin-bottom: 1rem;
            }
            .modal-book-info .modal-book-cover {
                width: 60px;
                height: 80px;
                object-fit: cover;
                border-radius: 0.375rem;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .modal-book-info .modal-book-details {
                flex: 1;
                min-width: 0;
            }
            .modal-book-info .modal-book-id {
                margin: 0 0 0.25rem;
                font-size: 0.75rem;
                color: #6b7280;
            }
            .modal-book-info .modal-book-title {
                margin: 0 0 0.25rem;
                font-size: 0.875rem;
                font-weight: 600;
                color: #111827;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .modal-book-info .modal-book-author {
                margin: 0;
                font-size: 0.75rem;
                color: #6b7280;
            }
            /*
               =========================================================
               自主學習排程
               =========================================================
            */

            /* ── 自主學習排程：色票變數 ── */
            :root {
                --teal: #3bbfb0;
                --teal-dark: #1a9e90;
                --teal-bg: #e6f7f5;
                --teal-soft: #c8eeea;
                --amber: #f59e0b;
                --rose: #f43f5e;
                --green: #10b981;
                --indigo: #6366f1;
                --muted: #6b8280;
                --border: #d0e8e5;
                --bg: #f5fffe;
            }

            /* ── 自主學習排程：入口按鈕 ── */
            .btn-schedule {
                background: #fff;
                color: var(--teal-dark);
                border: 1.5px solid var(--teal);
                padding: 5px 12px;
                border-radius: 6px;
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
                font-family: 'Noto Sans TC', sans-serif;
                transition: all .15s;
                display: inline-flex;
                align-items: center;
                gap: 5px;
                margin-left: 8px;
                vertical-align: middle;
            }

                .btn-schedule:hover {
                    background: var(--teal-bg);
                }

                .btn-schedule.running {
                    background: var(--teal-bg);
                    color: var(--teal-dark);
                    border-color: var(--teal);
                }

                .btn-schedule.paused {
                    background: #fff7ed;
                    color: #b45309;
                    border-color: var(--amber);
                }

                /* 暫停後的「繼續 ALE」：實心強調色，與未開通的外框樣式做出區隔（工單 0005822 §5.2） */
                .btn-schedule.resume {
                    background: var(--teal);
                    color: #fff;
                    border-color: var(--teal);
                }

                    .btn-schedule.resume:hover {
                        background: var(--teal-dark);
                        border-color: var(--teal-dark);
                    }

            /* 章節表頭「章節」文字 + ALE自適應學習按鈕：桌機維持同一行，
               手機寬度不夠時改成上下堆疊，避免擠壓「總題數」等其他欄位、或按鈕文字被截斷/蓋住。*/
            @media (max-width: 768px) {
                .schedBtnContainer {
                    display: block;
                    margin-top: 6px;
                }

                    .schedBtnContainer .btn-schedule {
                        margin-left: 0;
                    }
            }

            /* ── ALE 圖示列解說彈窗（工單 0005822 §4）── */
            /* Bootstrap 的 .modal 預設 display:none / position:fixed，比照其他 ALE modal 覆寫 */
            #ovAleFx > .modal {
                display: block !important;
                position: relative !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                max-width: 92vw;
                max-height: 90vh;
                overflow-y: auto;
                background: #fff;
                border-radius: 16px;
                padding: 26px 24px;
                box-shadow: 0 20px 60px rgba(0,0,0,.2);
            }

            /* ── ALE 圖示列解說彈窗（工單 0005822 §4，樣式對齊展示模型）── */
            #ovAleFx .mtitle {
                text-align: center;
            }

            .ale-fx-ico {
                font-size: 36px;
                line-height: 1;
                text-align: center;
                margin-bottom: 6px;
            }

            .ale-fx-desc {
                font-size: 13.5px;
                line-height: 1.85;
                color: #374151;
                background: var(--bg);
                border: 1px solid var(--border);
                border-radius: 11px;
                padding: 12px 14px;
                margin: 12px 0 18px;
            }

                .ale-fx-desc b {
                    color: var(--teal-dark);
                }

                .ale-fx-desc .fx-danger {
                    color: var(--rose);
                    font-weight: 900;
                }

            #ovAleFx .mactions {
                justify-content: flex-end;
            }

                #ovAleFx .btn-cancel,
                #ovAleFx .btn-ok {
                    flex: none;
                    padding: 11px 18px;
                }

            /* ── 排程規劃設定畫面（工單 0005823）── */
            .plan-license {
                display: flex;
                flex-wrap: wrap;
                gap: 6px 16px;
                background: var(--teal-bg);
                border: 1px solid var(--teal-soft);
                border-radius: 10px;
                padding: 9px 14px;
                margin: 12px 0 16px;
                font-size: 13px;
                font-weight: 700;
                color: var(--teal-dark);
            }

            .plan-hint {
                font-size: 12.5px;
                color: var(--muted);
                margin-top: 8px;
                line-height: 1.6;
            }

            .plan-hint-over {
                color: var(--rose);
                font-weight: 700;
            }

            .plan-star-tip {
                background: #fffbeb;
                border: 1px solid #fde68a;
                color: #92660a;
                border-radius: 8px;
                padding: 7px 11px;
                font-size: 12px;
                font-weight: 700;
                margin-top: 10px;
            }

            #customPlanDaysWrap {
                align-items: center;
            }

            /* 章／節勾選清單 */
            .plan-range-list {
                margin-top: 12px;
                max-height: 320px;
                overflow-y: auto;
                border: 1px solid var(--border);
                border-radius: 10px;
            }

            .rl-chap {
                border-bottom: 1px solid var(--border);
            }

                .rl-chap:last-child {
                    border-bottom: none;
                }

            .rl-chaphd {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 10px 12px;
                background: #fff;
            }

            .rl-chap.rl-disabled .rl-chaphd {
                opacity: .45;
            }

            .rl-name {
                flex: 1;
                font-size: 13.5px;
                font-weight: 800;
                color: var(--ink);
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .rl-chk {
                width: 18px;
                height: 18px;
                flex-shrink: 0;
                border: 1.5px solid var(--border);
                border-radius: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                font-weight: 900;
                color: #fff;
                background: #fff;
                cursor: pointer;
            }

                .rl-chk.on {
                    background: var(--teal);
                    border-color: var(--teal);
                }

                .rl-chk.partial {
                    background: var(--teal-soft);
                    border-color: var(--teal);
                    color: var(--teal-dark);
                }

            .rl-stars {
                flex-shrink: 0;
                letter-spacing: 1px;
            }

            .rl-star {
                color: #d7e1e0;
                cursor: pointer;
                font-size: 14px;
            }

                .rl-star.on {
                    color: var(--amber);
                }

            .rl-cv {
                flex-shrink: 0;
                color: var(--muted);
                cursor: pointer;
                font-size: 12px;
                transition: transform .15s;
            }

            .rl-chap.open .rl-cv {
                transform: rotate(90deg);
            }

            .rl-body {
                display: none;
                background: #f8fbfb;
            }

            .rl-chap.open .rl-body {
                display: block;
            }

            .rl-sec {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px 12px 8px 26px;
                border-top: 1px solid var(--border);
            }

                .rl-sec.off {
                    opacity: .45;
                }

            .rl-secname {
                flex: 1;
                font-size: 12.5px;
                color: var(--ink);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .rl-secinfo {
                flex-shrink: 0;
                font-size: 11px;
                color: var(--muted);
                min-width: 42px;
                text-align: right;
            }

            /* ── ALE 總覽面板（工單 0005824 + 2026-07-27「ALE_分頁與總覽面板_樣式模板」）── */
            .ale-book-progress {
                display: flex;
                gap: 0;
                flex-wrap: wrap;
                align-items: stretch;
                margin-bottom: 14px;
                background: #fff;
                border: 1px solid var(--border);
                border-radius: 14px;
                overflow: hidden;
            }

            /* 授權期限 */
            .ale-lic {
                flex: 0 0 250px;
                min-width: 230px;
                padding: 18px;
                background: var(--teal-bg);
                border-right: 1px solid var(--border);
            }

            .alic-hd {
                font-size: 13px;
                font-weight: 900;
                color: var(--ink);
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .alic-days {
                margin-top: 10px;
                display: flex;
                align-items: baseline;
                gap: 6px;
            }

                .alic-days .n {
                    font-size: 30px;
                    font-weight: 900;
                    color: var(--teal-dark);
                    line-height: 1;
                }

                .alic-days .u {
                    font-size: 14px;
                    font-weight: 700;
                    color: var(--teal-dark);
                }

                .alic-days .k {
                    font-size: 12.5px;
                    color: var(--muted);
                    margin-left: 2px;
                }

                /* 已到期：專屬 class 名避開頁面既有的 .expired 樣式；中文比數字長，字級調小 */
                .alic-days.alic-over .n {
                    font-size: 20px;
                    color: var(--rose);
                }

            .alic-date {
                margin-top: 6px;
                font-size: 12.5px;
                color: var(--muted);
            }

                .alic-date b {
                    color: var(--ink);
                    font-weight: 700;
                }

            .alic-note {
                margin-top: 12px;
                padding: 8px 10px;
                background: #fff;
                border: 1px solid var(--border);
                border-radius: 8px;
                font-size: 12px;
                color: var(--muted);
                line-height: 1.65;
            }

            /* 全書／排程範圍進度 */
            .ale-prog {
                flex: 1;
                min-width: 300px;
                padding: 18px;
                display: flex;
                flex-direction: column;
                gap: 11px;
            }

            .aprog-hd {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                gap: 12px;
                flex-wrap: wrap;
            }

            .aprog-ttl {
                font-size: 13px;
                font-weight: 700;
                color: var(--muted);
            }

                .aprog-ttl .n {
                    font-size: 24px;
                    font-weight: 900;
                    color: var(--ink);
                }

                .aprog-ttl .u {
                    font-size: 14px;
                    font-weight: 700;
                    color: var(--ink);
                }

            .aprog-mas {
                text-align: right;
            }

                .aprog-mas .lb {
                    font-size: 12px;
                    font-weight: 700;
                    color: var(--muted);
                }

                .aprog-mas .n {
                    font-size: 24px;
                    font-weight: 900;
                    color: var(--ink);
                }

                .aprog-mas .u {
                    font-size: 14px;
                    font-weight: 700;
                    color: var(--ink);
                }

                .aprog-mas .hint {
                    display: block;
                    font-size: 11.5px;
                    color: #8aa3a1;
                    margin-top: 1px;
                }

            .ale-bar {
                display: flex;
                width: 100%;
                height: 26px;
                border-radius: 13px;
                overflow: hidden;
                background: #eef3f2;
                border: 1px solid #dbe7e5;
            }

                /* 章／節內嵌條：尺寸與 max-width 對齊展示模型，避免條長到蓋過「總題數」欄（PM 2026-07-29） */
                .ale-bar.lg {
                    height: 19px;
                    border-radius: 9px;
                    max-width: 360px;
                    box-shadow: inset 0 0 0 1px rgba(20,60,58,.06);
                }

                .ale-bar.sm {
                    height: 16px;
                    border-radius: 8px;
                    max-width: 340px;
                    box-shadow: inset 0 0 0 1px rgba(20,60,58,.06);
                }

                    /* 章／節條的「還沒練」用純色；斜線紋只留給總覽面板的大條 */
                    .ale-bar.lg .seg-untouched,
                    .ale-bar.sm .seg-untouched {
                        background: #dfe9e7;
                        color: #889c9a;
                    }

            .ale-seg {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                font-size: 10.5px;
                font-weight: 800;
                color: #fff;
                white-space: nowrap;
                overflow: hidden;
                transition: width .35s ease;
            }

            .ale-bar.lg .ale-seg {
                font-size: 13px;
            }

            .ale-bar.sm .ale-seg {
                font-size: 11.5px;
            }

            .seg-mastered {
                background: linear-gradient(180deg, #fde047, #eab308 60%, #d99a06);
            }

            .seg-practicing {
                background: linear-gradient(180deg, #5cd4c5, var(--teal) 60%, #2a9c8f);
            }

            /* 還沒練用斜線紋而不是純灰，讓「空的」看起來是「還沒填」而不是壞掉 */
            .seg-untouched {
                background: repeating-linear-gradient(-45deg, #e4edec 0 6px, #eff4f3 6px 12px);
                color: #64748b;
            }

            .aprog-lg {
                display: flex;
                gap: 18px;
                flex-wrap: wrap;
                font-size: 12.5px;
                color: var(--muted);
            }

            .alg {
                display: inline-flex;
                align-items: center;
                gap: 6px;
            }

                .alg i {
                    width: 12px;
                    height: 12px;
                    border-radius: 4px;
                    display: inline-block;
                    flex-shrink: 0;
                }

                .alg i.seg-untouched {
                    background: repeating-linear-gradient(-45deg, #e4edec 0 4px, #eff4f3 4px 8px);
                    border: 1px solid #cfdcda;
                }

                .alg b {
                    color: var(--ink);
                    font-weight: 900;
                    font-size: 13.5px;
                }

            .aprog-note {
                display: flex;
                align-items: flex-start;
                gap: 7px;
                padding: 9px 11px;
                background: var(--teal-bg);
                border-radius: 9px;
                font-size: 12.5px;
                font-weight: 700;
                color: var(--teal-dark);
                line-height: 1.6;
            }

            /* 章／節列下方獨立展開的內嵌進度條列 */
            tr.ale-bar-row > td {
                padding: 0 14px 9px 14px !important;
                border-top: none !important;
            }

            tr.ale-bar-row.is-chapter > td {
                background: #fbfffe;
                padding-bottom: 11px !important;
            }

            /* 節列的條往內縮，與章列拉開層級 */
            tr.ale-bar-row:not(.is-chapter) > td {
                padding-left: 26px !important;
            }

            .ale-out-of-plan {
                display: inline-block;
                background: #fffbeb;
                border: 1px solid #fde68a;
                color: #92660a;
                border-radius: 10px;
                padding: 1px 9px;
                margin-top: 2px;
                font-size: 12px;
                font-weight: 700;
            }

            /* 進度追蹤 ＋ 今日建議範圍（§9） */
            .ale-track {
                margin-bottom: 14px;
                padding: 11px 15px;
                border: 1.5px solid var(--teal-soft);
                border-radius: 12px;
                background: var(--teal-bg);
                font-size: 12.5px;
                line-height: 1.75;
                color: #374151;
            }

            .alt-track {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
                margin-top: 4px;
            }

            .alt-badge {
                border-radius: 20px;
                padding: 1px 9px;
                font-size: 11px;
                font-weight: 800;
            }

                .alt-badge.behind {
                    background: #fff1f2;
                    color: var(--rose);
                    border: 1px solid #fecdd3;
                }

                .alt-badge.ahead {
                    background: #f0fdf4;
                    color: #059669;
                    border: 1px solid #bbf7d0;
                }

            .alt-suggest {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
                margin-top: 6px;
                padding-top: 6px;
                border-top: 1px dashed var(--teal-soft);
            }

            @media (max-width:576px) {
                .rl-secinfo {
                    display: none;
                }

                .aprog-lg {
                    gap: 6px 12px;
                    font-size: 11.5px;
                }

                /* 手機：表格橫捲時進度條固定在左側，不會被捲出畫面（對齊展示模型） */
                tr.ale-bar-row > td {
                    padding: 0 0 10px 0 !important;
                }

                tr.ale-bar-row .ale-bar {
                    position: sticky;
                    left: 10px;
                    width: calc(100vw - 44px);
                }
            }

            @media (max-width:640px) {
                .ale-lic {
                    flex: 1 1 100%;
                    border-right: none;
                    border-bottom: 1px solid var(--border);
                }

                .ale-prog {
                    min-width: 0;
                }
            }

            #chapterData table th:first-child,
            #chapterData table td:first-child {
                min-width: 150px;
            }


            .dot-pulse {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--green);
                display: inline-block;
                animation: dp 1.4s ease infinite;
            }

            .dot-amber {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--amber);
                display: inline-block;
            }

            /* ── 自主學習排程：共用 Overlay ── */
            .overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                justify-content: center;
                align-items: center;
                background: rgba(0,0,0,0.5);
                z-index: 9999;
            }

                .overlay .modal {
                    background: #fff;
                    border-radius: 12px;
                    padding: 20px;
                    max-width: 600px;
                    width: 90%;
                }

                .overlay.show {
                    display: flex !important;
                }

            /* ── 自主學習排程：Dashboard ── */
            .dashboard {
                display: none;
                background: #fff;
                border: 1.5px solid var(--border);
                border-radius: 16px;
                padding: 22px 26px;
                margin-bottom: 22px;
                box-shadow: 0 2px 16px rgba(30,100,90,.08);
                animation: sdown .4s ease;
            }

                .dashboard.show {
                    display: block;
                }

            .dash-hd {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 16px;
                flex-wrap: wrap;
                gap: 10px;
            }

            .dash-title {
                font-size: 18px;
                font-weight: 900;
                display: flex;
                align-items: center;
                gap: 8px;
            }

                .dashboard.expired-disabled {
                    background: #f3f4f6 !important;
                    border-color: #d1d5db !important;
                    filter: grayscale(.35);
                    opacity: .72;
                }

                    .dashboard.expired-disabled button,
                    .dashboard.expired-disabled a,
                    .dashboard.expired-disabled [role="button"] {
                        pointer-events: none !important;
                        cursor: not-allowed !important;
                    }

                    .dashboard.expired-disabled .dash-actions button,
                    .dashboard.expired-disabled [data-dash="aiRefreshBtn"],
                    .dashboard.expired-disabled [data-dash="mCoinsLock"] button {
                        opacity: .45 !important;
                        background: #e5e7eb !important;
                        border-color: #d1d5db !important;
                        color: #6b7280 !important;
                        box-shadow: none !important;
                    }


            .status-pill {
                font-size: 13px;
                font-weight: 700;
                padding: 3px 10px;
                border-radius: 20px;
            }

                .status-pill.run {
                    background: var(--teal-bg);
                    color: var(--teal-dark);
                }

                .status-pill.pause {
                    background: #fff7ed;
                    color: #b45309;
                }

            .btn-sm {
                padding: 7px 14px;
                border-radius: 8px;
                border: 1.5px solid;
                font-size: 14px;
                font-weight: 700;
                cursor: pointer;
                font-family: 'Noto Sans TC', sans-serif;
                transition: all .15s;
                display: flex;
                align-items: center;
                gap: 5px;
            }

                .btn-sm.amber {
                    border-color: var(--amber);
                    color: #b45309;
                    background: #fff;
                }

                    .btn-sm.amber:hover {
                        background: #fff7ed;
                    }

                .btn-sm.green {
                    border-color: var(--green);
                    color: #059669;
                    background: #fff;
                }

                    .btn-sm.green:hover {
                        background: #f0fdf4;
                    }

            .dash-actions {
                display: flex;
                gap: 8px;
                align-items: center;
            }

            .btn-icon {
                width: 38px;
                height: 38px;
                padding: 0;
                border-radius: 8px;
                border: 1.5px solid;
                font-size: 18px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #fff;
                position: relative;
                transition: all .15s;
            }

                .btn-icon.indigo {
                    border-color: #6366f1;
                    color: #4f46e5;
                }

                /* 切換學習模式（工單 0005822 §3.1） */
                .btn-icon.teal {
                    border-color: var(--teal);
                    color: var(--teal-dark);
                }

                    .btn-icon.teal:hover {
                        background: var(--teal-bg);
                    }

                    .btn-icon.indigo:hover {
                        background: #eef2ff;
                    }

                .btn-icon.amber {
                    border-color: var(--amber);
                    color: #b45309;
                }

                    .btn-icon.amber:hover {
                        background: #fff7ed;
                    }

                .btn-icon.rose {
                    border-color: var(--rose);
                    color: var(--rose);
                }

                    .btn-icon.rose:hover {
                        background: #fff0f3;
                    }

                .btn-icon .tt {
                    display: block;
                    position: absolute;
                    bottom: calc(100% + 7px);
                    left: 50%;
                    transform: translateX(-50%) translateY(3px);
                    background: #1c2b2a;
                    color: #fff;
                    font-size: 12px;
                    font-weight: 700;
                    padding: 5px 10px;
                    border-radius: 6px;
                    white-space: nowrap;
                    pointer-events: none;
                    opacity: 0;
                    visibility: hidden;
                    transition: all .15s;
                    z-index: 999;
                }

                    .btn-icon .tt::after {
                        content: '';
                        position: absolute;
                        top: 100%;
                        left: 50%;
                        transform: translateX(-50%);
                        border: 4px solid transparent;
                        border-top-color: #1c2b2a;
                    }

                .btn-icon:hover .tt {
                    opacity: 1;
                    visibility: visible;
                    transform: translateX(-50%) translateY(0);
                }

                .btn-row-modal {
                    display: flex;
                    gap: 10px;
                    width: 100%;
                }

                .btn-confirm {
                    flex: 1;
                    padding: 11px;
                    border-radius: 10px;
                    border: none;
                    font-size: 13px;
                    font-weight: 700;
                    cursor: pointer;
                    font-family: 'Noto Sans TC', sans-serif;
                    color: #fff;
                    appearance: none;
                    -webkit-appearance: none;
                    box-shadow: none;
                    outline: none;
                }

                    .btn-confirm:hover {
                        opacity: .92;
                    }

                    .btn-confirm:focus,
                    .btn-confirm:active {
                        outline: none;
                        box-shadow: none;
                    }

                    .btn-confirm.amber {
                        background: var(--amber);
                        color: #fff;
                    }

                    .btn-confirm.rose {
                        background: var(--rose);
                        color: #fff;
                    }


            /* 自主學習排程儀錶板字級等比例放大（以 10px -> 12px，倍率 1.2） */
                .dashboard [data-dash="mChapCount"] {
                    font-size: 13.2px !important;
                }

                .dashboard [data-dash="mCoinsLock"] {
                    font-size: 12px !important;
                }

                .dashboard [data-dash="estimatedFinish"] {
                    font-size: 14.4px !important;
                }

                .dashboard [data-dash="todayTask"] > div:first-child > div:first-child {
                    font-size: 13.2px !important;
                }

                .dashboard [data-dash="todayTaskText"] {
                    font-size: 15.6px !important;
                }

                .dashboard [data-dash="streakBadge"] {
                    font-size: 13.2px !important;
                }

                .dashboard [data-dash="todayTask"] > div:last-child > div:first-child {
                    font-size: 13.2px !important;
                }

                .dashboard [data-dash="aiRefreshBtn"] {
                    font-size: 14.4px !important;
                }

                .dashboard [data-dash="aiText"] {
                    font-size: 14.4px !important;
                }

            /* ── 自主學習排程：AI 提示區 ── */
            .ai-box {
                background: linear-gradient(135deg, #f0f9ff, #e8f7f5);
                border: 1.5px solid var(--teal-soft);
                border-radius: 12px;
                padding: 13px 16px;
                margin-bottom: 18px;
                display: flex;
                align-items: flex-start;
                gap: 10px;
                font-size: 13px;
                line-height: 1.7;
            }

            .ai-ico {
                font-size: 20px;
                flex-shrink: 0;
                margin-top: 1px;
            }

            /* ── 自主學習排程：指標卡片 ── */
            .metrics {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 12px;
                margin-bottom: 18px;
            }

            .metric {
                background: var(--bg);
                border: 1.5px solid var(--border);
                border-radius: 12px;
                padding: 14px 12px;
                text-align: center;
                position: relative;
                overflow: visible;
            }

                .metric::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 3px;
                }

                .metric.m1::after {
                    background: linear-gradient(90deg, var(--teal), #5be0d4);
                }

                .metric.m2::after {
                    background: linear-gradient(90deg, var(--green), #34d399);
                }

                .metric.m3::after {
                    background: linear-gradient(90deg, var(--amber), #fbbf24);
                }

                .metric.m4::after {
                    background: linear-gradient(90deg, var(--indigo), #818cf8);
                }

            .mval {
                font-size: 31px;
                font-weight: 900;
                line-height: 1.1;
                margin-bottom: 4px;
            }

            .metric.m1 .mval {
                color: var(--teal-dark);
            }

            .metric.m2 .mval {
                color: var(--green);
            }

            .metric.m3 .mval {
                color: var(--amber);
            }

            .metric.m4 .mval {
                color: var(--indigo);
            }

                .expiry-banner {
                    margin-bottom: 14px;
                    padding: 12px 14px;
                    border-radius: 10px;
                    font-size: 13px;
                    font-weight: 700;
                    line-height: 1.6;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 10px;
                }

                    .expiry-banner.warn {
                        background: #fffbeb;
                        border: 1.5px solid #fcd34d;
                        color: #92400e;
                    }

                    .expiry-banner.danger {
                        background: #fff1f2;
                        border: 1.5px solid #fb7185;
                        color: #be123c;
                    }

                .expiry-banner-close {
                    border: none;
                    background: transparent;
                    color: inherit;
                    font-size: 18px;
                    font-weight: 900;
                    cursor: pointer;
                    line-height: 1;
                }

            .mlbl {
                font-size: 13px;
                color: var(--muted);
                line-height: 1.4;
            }

            .coin-row {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
            }

            .ibtn,
            .iBtn {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background: #ddd;
                border: none;
                cursor: pointer;
                font-size: 12px;
                font-weight: 900;
                color: #666;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                position: relative;
            }

            .tt {
                display: none;
                position: absolute;
                bottom: calc(100% + 6px);
                left: 50%;
                transform: translateX(-50%);
                background: #000;
                color: #fff;
                font-size: 13px;
                white-space: nowrap;
                padding: 6px 10px;
                border-radius: 7px;
                z-index: 30;
                line-height: 1.6;
                font-weight: 400;
                box-shadow: 0 4px 12px rgba(0,0,0,.25);
            }

                .tt::after {
                    content: '';
                    position: absolute;
                    top: 100%;
                    left: 50%;
                    transform: translateX(-50%);
                    border: 5px solid transparent;
                    border-top-color: var(--ink);
                }

            .iBtn:hover .tt,
            .iBtn:focus .tt {
                display: block;
            }

            .predict-mini {
                margin-top: 6px;
            }

            .pbar {
                height: 5px;
                background: #e5e7eb;
                border-radius: 3px;
                overflow: hidden;
            }

            .pfill {
                height: 100%;
                border-radius: 3px;
                transition: width .8s ease;
            }

            /* ── 自主學習排程：進度條 ── */
            .prog-hd {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                margin-bottom: 6px;
            }

            .prog-name {
                font-size: 15px;
                font-weight: 700;
            }

            .prog-pct {
                font-size: 22px;
                font-weight: 900;
                color: var(--teal-dark);
            }

            .prog-bar {
                height: 11px;
                background: var(--teal-bg);
                border-radius: 6px;
                overflow: hidden;
            }

            .prog-fill {
                height: 100%;
                border-radius: 6px;
                background: linear-gradient(90deg, var(--teal-dark), var(--teal));
                transition: width 1s cubic-bezier(.34,1.56,.64,1);
                position: relative;
            }

                .prog-fill::after {
                    content: '';
                    position: absolute;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    width: 22px;
                    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45));
                    animation: shim 1.8s infinite;
                }

            /* ── 自主學習排程：重排提示 ── */
            .rebalance-alert {
                background: linear-gradient(135deg, #fffbeb, #fef3c7);
                border: 1.5px solid #fcd34d;
                border-radius: 10px;
                padding: 12px 16px;
                font-size: 13px;
                line-height: 1.7;
                color: #92400e;
                margin-top: 14px;
                display: none;
                animation: sdown .3s ease;
            }

                .rebalance-alert.show {
                    display: block;
                }

            /* ── 自主學習排程：排程 Modal ── */
            #ovSchedule {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,.5);
                z-index: 9999;
                align-items: center;
                justify-content: center;
            }

                #ovSchedule .modal {
                    display: block !important;
                    position: relative;
                    background: #fff;
                    border-radius: 20px;
                    padding: 34px 30px;
                    width: 560px;
                    max-width: 95vw;
                    max-height: 92vh;
                    overflow-y: auto;
                    box-shadow: 0 20px 60px rgba(0,0,0,.2);
                    font-family: 'Noto Sans TC', sans-serif;
                }

                #ovSchedule .preset-btn:disabled,
                #ovSchedule .preset-btn.disabled {
                    opacity: .45;
                    cursor: not-allowed;
                    pointer-events: none;
                    filter: grayscale(.2);
                }

            @media only screen and (max-width: 769px) {
                .schedule-row {
                    grid-template-columns: 1fr !important;
                    gap: 10px !important;
                }

                    .schedule-row > div:last-child {
                        min-width: 0 !important;
                    }
            }

            .preview-box {
                background: var(--teal-bg);
                border: 1.5px solid var(--teal-soft);
                border-radius: 13px;
                padding: 16px;
                margin-bottom: 16px;
                max-height: 280px;
                overflow-y: auto;
            }

            .preview-title {
                font-size: 13px;
                font-weight: 700;
                color: var(--teal-dark);
                margin-bottom: 10px;
            }

            .ai-plan-box {
                background: #f0fdf4;
                border: 1.5px solid #bbf7d0;
                border-radius: 10px;
                padding: 13px 15px;
                font-size: 13px;
                line-height: 1.7;
                color: #065f46;
            }

                /* ALE 排程天數選擇 RWD */
                #planDaysPresetRow {
                    display: grid !important;
                    grid-template-columns: repeat(5, minmax(0, 1fr));
                    gap: 12px;
                }

                    #planDaysPresetRow .plan-days-btn {
                        min-width: 0 !important;
                        width: 100%;
                        padding-left: 4px !important;
                        padding-right: 4px !important;
                        white-space: nowrap;
                    }

                .plan-days-grid {
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    gap: 5px;
                    align-items: center;
                }

                /* 輸入框改由 #customPlanDaysWrap 控制顯示，原本的 display:none 與 grid 定位是舊版面殘留 */
                #customPlanDays {
                    width: 120px;
                    box-sizing: border-box;
                    border-radius: 8px;
                    border: 1.5px solid var(--teal);
                    padding: 7px 8px;
                    font-size: 13px;
                    font-family: 'Noto Sans TC', sans-serif;
                    outline: none;
                    color: var(--ink);
                    background: #fff;
                }

                .deadline-badge {
                    grid-column: 1 / span 3;
                    grid-row: 2;
                    background: #fff;
                    border: 1.5px solid var(--teal-soft);
                    border-radius: 999px;
                    padding: 5px 12px;
                    color: var(--teal-dark);
                    text-align: left;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                @media (max-width: 430px) {
                    #planDaysPresetRow {
                        display: grid !important;
                        grid-template-columns: repeat(12, minmax(0, 1fr));
                        gap: 5px !important;
                        align-items: center;
                    }

                    #planDaysPresetRow .plan-days-btn {
                        grid-row: 1;
                        grid-column: span 3;
                        width: 100%;
                        min-width: 0 !important;
                    }

                    #customPlanDaysBtn {
                        grid-column: 1 / span 2;
                        grid-row: 2;
                        min-width: 0 !important;
                        padding-left: 4px !important;
                        padding-right: 4px !important;
                    }

                    #customPlanDays {
                        grid-column: 3 / span 2;
                        grid-row: 2;
                        width: 100%;
                        min-width: 0;
                        box-sizing: border-box;
                        padding-left: 4px;
                        padding-right: 4px;
                    }

                    .deadline-badge {
                        grid-column: 5 / span 8;
                        grid-row: 2;
                        width: 100%;
                        min-width: 0;
                        box-sizing: border-box;
                        padding: 5px 8px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    #aiChatInput {
                        min-width: 0 !important;
                    }

                    #aiChatBtn {
                        padding-left: 10px !important;
                        padding-right: 10px !important;
                        flex-shrink: 0;
                    }
                }

            #ovSchedule .wstar {
                cursor: pointer;
                transition: color .1s;
            }

                #ovSchedule .wstar.on {
                    color: var(--amber);
                }

            #ovSchedule .weak-hint {
                background: #f0fdf4;
                border: 1.5px solid #bbf7d0;
                border-radius: 10px;
                padding: 13px 15px;
                font-size: 13px;
                line-height: 1.7;
                color: #065f46;
            }

            .ai-reset-btn {
                background: none;
                border: 1.5px solid #bbf7d0;
                border-radius: 6px;
                padding: 3px 9px;
                font-size: 12px;
                color: #065f46;
                cursor: pointer;
                font-family: 'Noto Sans TC', sans-serif;
                white-space: nowrap;
                flex-shrink: 0;
                transition: background .15s;
            }

                .ai-reset-btn:hover {
                    background: #dcfce7;
                }

            /* 弱點清單列：全寬 grid 佈局 */
            #weakList .wi {
                display: grid;
                grid-template-columns: 1fr auto auto auto auto;
                gap: 8px;
                align-items: center;
                padding: 9px 12px;
                margin-bottom: 5px;
                border: 1.5px solid var(--border);
                border-radius: 10px;
                background: var(--bg);
                transition: border-color .15s, background .15s;
            }

                #weakList .wi.sel {
                    border-color: var(--amber);
                    background: #fffbeb;
                }

                #weakList .wi.skipped-row {
                    opacity: 0.45;
                }

                #weakList .wi.non-leaf {
                    background: var(--teal-bg);
                    border-color: var(--teal-soft);
                }

            #weakList .wi-name {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 13px;
                font-weight: 700;
                color: #1c2b2a;
                cursor: default;
            }

            #weakList .wi-info {
                font-size: 11px;
                color: var(--muted);
                white-space: nowrap;
            }

            #weakList .wi-time {
                font-size: 12px;
                font-weight: 700;
                color: var(--teal-dark);
                white-space: nowrap;
                min-width: 38px;
                text-align: right;
            }

                #weakList .wi-time.non-leaf-time {
                    color: var(--muted);
                    font-weight: 600;
                }

            #weakList .wi-stars {
                display: flex;
                gap: 2px;
                font-size: 19px;
                color: #d1d5db;
                min-width: 68px;
                justify-content: flex-end;
            }

            .skip-btn {
                background: none;
                border: 1px solid var(--border);
                border-radius: 5px;
                padding: 2px 7px;
                font-size: 11px;
                color: var(--muted);
                cursor: pointer;
                font-family: 'Noto Sans TC', sans-serif;
                white-space: nowrap;
                transition: border-color .15s, color .15s;
            }

                .skip-btn:hover {
                    border-color: var(--rose);
                    color: var(--rose);
                }

                .skip-btn.skipped {
                    border-color: var(--rose);
                    color: var(--rose);
                }

            /* 行動版：章節名稱浮層 */
            .wi-name-popup {
                position: absolute;
                left: 8px;
                right: 8px;
                background: #fff;
                border: 1.5px solid var(--teal-soft);
                border-radius: 8px;
                padding: 8px 12px;
                font-size: 13px;
                color: #1c2b2a;
                z-index: 99;
                box-shadow: 0 4px 16px rgba(0,0,0,.1);
                line-height: 1.5;
            }

            @media (max-width: 480px) {
                #weakList .wi {
                    grid-template-columns: 1fr auto auto;
                    grid-template-rows: auto auto;
                }

                #weakList .wi-stars {
                    grid-column: 2;
                    grid-row: 1;
                    min-width: 0;
                }

                #weakList .wi-skip {
                    grid-column: 3;
                    grid-row: 1;
                }

                #weakList .wi-info {
                    grid-column: 1;
                    grid-row: 2;
                }

                #weakList .wi-time {
                    grid-column: 2 / span 2;
                    grid-row: 2;
                    text-align: right;
                    min-width: 0;
                }
            }

            /* ── 學習成果 CSS ──────────────────────────────────────────── */
            .hx-card{border:1.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:10px;background:#fff}
            .hx-card-header{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;background:var(--bg);user-select:none;font-size:16px;font-weight:700;color:var(--ink)}
            .hx-card-header:hover{background:#f1f5f9}
            .hx-card.expanded .hx-card-header{background:var(--teal-bg);border-bottom:1.5px solid var(--teal-soft)}
            .hx-card-icon{font-size:19px;flex-shrink:0}.hx-card-title{flex:1}.hx-card-chevron{font-size:13px;color:var(--muted)}
            .hx-card-body{padding:14px}
            .hx-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
            .hx-student-info{display:flex;flex-direction:column;gap:5px}
            .hx-book-name{font-size:16px;font-weight:900;color:var(--ink);line-height:1.4}
            .hx-student-name,.hx-chapter-count{font-size:14px;color:var(--muted)}
            .hx-level-badge{display:inline-flex;align-items:center;gap:6px;margin-top:6px;background:#fffbeb;border:1.5px solid #fde68a;border-radius:20px;padding:4px 10px;font-size:14px;font-weight:700;color:#92400e}
            .hx-metrics-grid{display:flex;flex-direction:column;gap:8px}
            .hx-metric-card{background:var(--teal-bg);border:1.5px solid var(--teal-soft);border-radius:10px;padding:9px 12px}
            .hx-metric-value{font-size:24px;font-weight:900;color:var(--teal-dark);font-family:'DM Mono',monospace}
            .hx-metric-label{font-size:13px;font-weight:700;color:var(--muted);margin-top:1px}
            .hx-metric-sub{font-size:12px;color:var(--muted);margin-top:2px}
            .hx-cert-btn{padding:8px 18px;border-radius:8px;border:none;background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;font-size:16px;font-weight:700;cursor:pointer;font-family:'Noto Sans TC',sans-serif}
            .hx-info-row{display:flex;align-items:flex-start;gap:6px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:8px 10px;margin-bottom:12px;font-size:14px;color:#065f46}
            .hx-info-text{flex:1;line-height:1.55}
            .hx-insight{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.6}
            .hx-level-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;border:1.5px solid var(--border)}
            .hx-level-row.current{border-width:2px}.hx-level-row.reached{opacity:0.45}.hx-level-row.locked{background:#f8fafc;border-color:#e2e8f0}
            .hx-level-color-bar{width:5px;border-radius:3px;align-self:stretch;flex-shrink:0}
            .hx-level-emoji{font-size:53px;flex-shrink:0}.hx-level-emoji.locked{opacity:0.18}.hx-level-row.current .hx-level-emoji{font-size:67px}
            .hx-level-name{font-size:20px;font-weight:900;flex:1}.hx-level-threshold{font-size:14px;color:var(--muted);margin-left:auto}
                .hx-grade-list {
                    display: flex;
                    flex-direction: column;
                    gap: 6px;
                    margin-top: 4px;
                }

                .hx-grade-row {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    padding: 0 14px;
                    border-radius: 12px;
                    border: 1.5px solid;
                    transition: all .35s;
                }

                .hx-grade-emoji {
                    flex-shrink: 0;
                }

                .hx-grade-name {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    min-width: 0;
                    white-space: nowrap;
                }

                .hx-grade-now {
                    font-size: 13px;
                    font-weight: 700;
                    padding: 2px 10px;
                    border-radius: 20px;
                    color: #fff;
                    white-space: nowrap;
                }

                .hx-grade-desc {
                    font-size: 13px;
                    white-space: nowrap;
                }

                .hx-grade-num {
                    font-family: 'DM Mono', monospace;
                    flex-shrink: 0;
                    text-align: right;
                }

                .hx-grade-footer {
                    margin-top: 12px;
                }

                .hx-grade-progress {
                    height: 5px;
                    background: #f1f5f9;
                    border-radius: 3px;
                    overflow: hidden;
                    margin-bottom: 6px;
                }

                .hx-grade-progress-fill {
                    height: 100%;
                    border-radius: 3px;
                    transition: width .5s;
                }

                .hx-grade-hint {
                    display: flex;
                    justify-content: space-between;
                    gap: 8px;
                    font-size: 13px;
                    color: var(--light);
                }

                    .hx-grade-hint strong {
                        color: var(--ink);
                    }
            .hx-current-badge{font-size:12px;font-weight:700;padding:2px 7px;border-radius:10px;white-space:nowrap}
            .hx-chart-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
            .hx-grain-btns,.hx-view-btns{display:flex;gap:4px}
            .hx-grain-btn,.hx-view-btn{padding:4px 10px;border-radius:6px;border:1.5px solid var(--border);background:#fff;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;font-family:'Noto Sans TC',sans-serif}
            .hx-grain-btn.on,.hx-view-btn.on{border-color:var(--teal);background:var(--teal-bg);color:var(--teal-dark)}
            .hx-level-footer{margin-top:10px;font-size:14px;color:var(--muted);line-height:1.7}
            .hx-level-prog-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:6px}
            .hx-level-prog-fill{height:100%;border-radius:3px;transition:width .6s ease}
            /* ── 每題作答結果（工單 0005799）── */
            .hx-qgrid-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding:0 0 4px}
            .hx-qgrid-preview.hidden{display:none}
            .hx-qgrid-chip{font-size:13px;font-weight:700;padding:3px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
            .hx-qgrid-coll{overflow:hidden;transition:max-height .35s ease;max-height:0}
            .hx-qgrid-coll.open{max-height:20000px}
            .hx-qgrid-arrow{display:inline-block;transition:transform .25s;color:var(--muted);font-size:13px}
            .hx-qgrid-arrow.open{transform:rotate(180deg)}
            .hx-qgrid-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;margin-bottom:14px}
            .hx-qgrid-sec-lbl{font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
            .hx-qgrid-sec-lbl:first-child{margin-top:0}
            .hx-qgrid-dots{display:flex;flex-wrap:wrap;gap:5px}
            .hx-qd{width:58px;height:66px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1.5px solid;flex-shrink:0}
            .hx-qd-circles{display:flex;gap:3px}
            .hx-qd-circle{width:18px;height:18px;border-radius:50%;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:700}
            .hx-qgrid-acc{border:1.5px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:8px}
            .hx-qgrid-acc:last-child{margin-bottom:0}
            .hx-qgrid-acc-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg);cursor:pointer;user-select:none;gap:8px}
            .hx-qgrid-acc-hd:hover{background:#f1f5f9}
            .hx-qgrid-acc-title{font-size:13px;font-weight:700;color:var(--ink)}
            .hx-qgrid-acc-meta{display:flex;align-items:center;gap:7px;flex-shrink:0}
            .hx-qgrid-badge{font-size:11px;font-weight:700;padding:2px 9px;border-radius:10px;white-space:nowrap}
            .hx-qgrid-acc-arr{font-size:12px;color:var(--muted);transition:transform .22s;flex-shrink:0}
            .hx-qgrid-acc.open .hx-qgrid-acc-arr{transform:rotate(90deg)}
            .hx-qgrid-acc-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
            .hx-qgrid-acc.open .hx-qgrid-acc-body{max-height:8000px}
            .hx-qgrid-acc-inner{padding:14px 16px}
            @media (max-width:520px){
                .hx-summary-grid{grid-template-columns:1fr}
                .hx-metrics-grid{flex-direction:row;flex-wrap:wrap}
                .hx-metric-card{flex:1;min-width:100px}
            }
            .hx-overlay-card.expanded{position:relative;z-index:2001}.hx-overlay-card.expanded .hx-card-body{box-shadow:0 8px 32px rgba(0,0,0,.18)}
            .hx-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.28);z-index:2000;cursor:pointer}
            .hx-arc{cursor:pointer}.hx-tooltip{position:fixed;background:rgba(30,41,59,.9);color:#fff;padding:6px 10px;border-radius:8px;font-size:14px;pointer-events:none;z-index:9999;white-space:nowrap;display:none;font-family:'Noto Sans TC',sans-serif;line-height:1.5}
                                   .hx-card {
    background:#fff;
    border:1.5px solid var(--border);
    border-radius:18px;
    box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.06);
    overflow:hidden;
    margin-bottom:14px;
}

.hx-card-header {
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px 18px;
    cursor:pointer;
    background:#fff;
    user-select:none;
    color:var(--ink);
    border-bottom:1px solid var(--border);
}

.hx-card-title {
    flex:1;
    font-size:20px;
    font-weight:900;
}

.hx-card-icon {
    font-size:22px;
}

.hx-card-chevron {
    font-size:14px;
    color:var(--ghost);
}

.hx-card-body {
    padding:18px;
}

.hx-card-sub {
    font-size:14px;
    color:var(--light);
    margin-bottom:12px;
    line-height:1.6;
}

                .hx-hero {
                    display: flex;
                    align-items: stretch;
                    border: 1.5px solid var(--border);
                    border-radius: 18px;
                    overflow: hidden;
                }

                .hx-hero-stripe {
                    width: 5px;
                    background: linear-gradient(180deg,var(--blue,#2563eb),var(--teal,#0d9488));
                    flex-shrink: 0;
                    border-radius: 18px 0 0 18px;
                }

.hx-hero-id {
    flex:1;
    min-width:0;
    padding:18px 20px;
    border-right:1px solid var(--border);
}

.hx-book-name {
    font-size:20px;
    font-weight:900;
    color:var(--ink);
    line-height:1.4;
    margin-bottom:6px;
}

.hx-student-name,
.hx-chapter-count {
    font-size:14px;
    color:var(--muted);
    line-height:1.7;
}

.hx-level-badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    background:#fffbeb;
    border:1.5px solid #fde68a;
    border-radius:20px;
    padding:4px 10px;
    font-size:14px;
    font-weight:700;
    color:#92400e;
}

.hx-hero-stats {
    display:flex;
    flex:1.2;
}

.hx-hero-stat {
    flex:1;
    min-width:120px;
    padding:18px 16px;
    border-right:1px solid var(--border);
}

.hx-hero-stat:last-child {
    border-right:none;
}

.hx-metric-label {
    font-size:13px;
    font-weight:700;
    color:var(--light);
    margin-bottom:7px;
}

.hx-metric-value {
    font-size:31px;
    font-weight:900;
    line-height:1;
    font-family:'DM Mono',monospace;
}

.hx-blue { color:var(--blue,#2563eb); }
.hx-teal { color:var(--teal,#0d9488); }
.hx-green { color:var(--green,#16a34a); }

.hx-metric-sub {
    font-size:13px;
    color:var(--light);
    margin-top:7px;
    line-height:1.5;
}

.hx-hero-actions {
    display:flex;
    align-items:center;
    padding:18px;
}

.hx-cert-btn {
    padding:10px 16px;
    border-radius:12px;
    border:none;
    background:var(--ink);
    color:#fff;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
    font-family:'Noto Sans TC',sans-serif;
    white-space:nowrap;
}

.hx-info-row {
    display:flex;
    align-items:flex-start;
    gap:8px;
    padding:10px 14px;
    background:var(--blue-l,#eff6ff);
    border-left:3px solid var(--blue,#2563eb);
    border-radius:0 10px 10px 0;
    font-size:16px;
    color:var(--blue-d,#1d4ed8);
    line-height:1.7;
    margin-bottom:14px;
}

.hx-curve-wrap {
    height:auto;
    overflow-x:auto;
    width:100%;
}

.hx-curve-wrap svg {
    height:100%;
}

.hx-insight {
    font-size:16px;
    color:var(--muted);
    line-height:1.7;
    margin-top:12px;
}

.hx-two-col {
    display:grid;
    grid-template-columns:380px 1fr;
    gap:16px;
    align-items:stretch;
}

.hx-chart-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.hx-grain-btns,
.hx-view-btns {
    display:flex;
    gap:4px;
    padding:3px;
    border:1.5px solid var(--border);
    border-radius:30px;
    background:var(--bg);
}

.hx-grain-btn,
.hx-view-btn {
    padding:5px 13px;
    border-radius:26px;
    border:none;
    background:transparent;
    font-size:14px;
    font-weight:700;
    color:var(--light);
    cursor:pointer;
    font-family:'Noto Sans TC',sans-serif;
}

.hx-grain-btn.on,
.hx-view-btn.on {
    background:#fff;
    color:var(--blue,#2563eb);
    box-shadow:0 1px 6px rgba(0,0,0,.08);
}

.hx-chart-area {
    min-height:280px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
}

@media (max-width:768px) {
    .hx-hero,
    .hx-hero-stats {
        flex-direction:column;
    }

    .hx-hero-id,
    .hx-hero-stat {
        border-right:none;
        border-bottom:1px solid var(--border);
    }

    .hx-two-col {
        grid-template-columns:1fr;
    }

    .hx-chart-toolbar {
        flex-direction:column;
        align-items:flex-start;
    }
}
            /* ── History body layout ──────────────────────────────────── */
            .body{padding:20px 0 80px;display:flex;flex-direction:column;gap:16px}
            .card{background:var(--white,#fff);border-radius:20px;border:1.5px solid var(--border);box-shadow:var(--sh,0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.06));overflow:visible}
            .cp{padding:20px}
            .ch{display:flex;align-items:center;gap:8px;margin-bottom:4px}
            .ct{font-size:20px;font-weight:900;color:var(--ink)}
            .csub{font-size:14px;color:var(--light);margin-bottom:10px}
            .ch-right{margin-left:auto;display:flex;align-items:center;gap:8px}
            /* ── info-btn / insight / curve-wrap / tgw / tg / ftabs ──────── */
                .info-btn {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background: #fff;
                    border: 1.5px solid var(--teal-s,#99f6e4);
                    color: var(--teal-d,#0f766e);
                    font-size: 13px;
                    font-weight: 900;
                    cursor: default;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                }
                .info-pop {
                    display: none !important;
                    position: fixed !important;
                    visibility: hidden !important;
                    opacity: 0 !important;
                    width: 0 !important;
                    height: 0 !important;
                    overflow: hidden !important;
                }
            .info-btn:hover .info-pop{display:block}
            .insight{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;background:var(--blue-l,#eff6ff);border-left:3px solid var(--blue,#2563eb);border-radius:0 10px 10px 0;margin-bottom:14px;font-size:16px;color:var(--blue-d,#1d4ed8);line-height:1.7}
            .insight strong{font-weight:700}
            .curve-wrap{overflow-x:auto;width:100%;text-align:center}
            .tgw{display:inline-flex;background:var(--bg);border-radius:30px;padding:3px;gap:2px;border:1.5px solid var(--border)}
            .tg{padding:5px 13px;border-radius:26px;font-size:14px;font-weight:700;color:var(--light);cursor:pointer;transition:all .18s;border:none;background:none;font-family:inherit}
            .tg.on{background:var(--white);color:var(--blue);box-shadow:0 1px 6px rgba(0,0,0,.08)}
            .ftabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:5px;margin-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--ghost) transparent;-webkit-overflow-scrolling:touch;touch-action:pan-x;padding-bottom:2px}
            .ftabs::-webkit-scrollbar{height:3px}
            .ftabs::-webkit-scrollbar-thumb{background:var(--ghost);border-radius:2px}
            .ftabs::-webkit-scrollbar-track{background:transparent}
            .ft{flex-shrink:0;padding:5px 12px;border-radius:20px;font-size:14px;font-weight:700;color:var(--light);cursor:pointer;border:1.5px solid var(--border);background:var(--white);font-family:inherit;transition:all .2s;white-space:nowrap;user-select:none}
            .ft.on{background:var(--blue,#2563eb);color:#fff;border-color:var(--blue,#2563eb)}
            /* .card context: reset hx-card internal padding (cp handles outer spacing) */
            .card .hx-card-header{padding:0;border:none;background:transparent;margin-bottom:4px}
            .card.hx-card.expanded .hx-card-header{background:transparent;border:none}
            .card .hx-card-body{padding:0}
            /* 等級進程／能力雷達並排：能力雷達標題列右側多了章/節、雷達/趨勢切換鈕（約 36px 高），
               若不統一高度，等級進程標題（只有純文字）會因列高較矮而偏高，兩張卡標題看起來沒對齊 */
            .hx-two-col .hx-card-header{min-height:36px}
            .card.hx-card{margin-bottom:0}
            /* ── Hero Card (hc-*) ─────────────────────────────────────── */
            .hc-book{font-size:16px;font-weight:700;color:var(--teal);margin-bottom:4px;display:flex;align-items:center;gap:6px}
            .hc-book::before{content:'';width:14px;height:2px;background:var(--teal);border-radius:2px;flex-shrink:0}
            .hc-name{font-family:'Noto Serif TC',serif;font-size:26px;font-weight:900;color:var(--ink);letter-spacing:1px;line-height:1.2;margin-bottom:6px}
            .hc-meta{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:8px}
            .hc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
            .hc-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:13px;font-weight:700;border:1.5px solid}
            .hc-tag.b{background:var(--blue-l,#eff6ff);color:var(--blue-d,#1d4ed8);border-color:var(--blue-s,#bfdbfe)}
            .hc-tag.t{background:var(--teal-l,#f0fdfa);color:var(--teal-d,#0f766e);border-color:var(--teal-s,#99f6e4)}
            .hc-tag.g{background:var(--green-l,#f0fdf4);color:var(--green,#16a34a);border-color:var(--green-s,#bbf7d0)}
            .hc-stat-lbl{display:flex;align-items:center;gap:5px;margin-bottom:6px}
            .hc-stat-lbl-txt{font-size:13px;font-weight:700;color:var(--light);letter-spacing:.4px;text-transform:uppercase}
            .hc-stat-info{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border);background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);cursor:default;flex-shrink:0;position:relative}
            /*.hc-stat-info::after{content:attr(data-tip);display:none;position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;padding:6px 10px;border-radius:8px;font-size:11px;line-height:1.55;width:200px;white-space:normal;font-weight:400;z-index:99999;pointer-events:none;font-family:'Noto Sans TC',sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.2);text-transform:none;letter-spacing:0}
            .hc-stat-info:hover::after{display:block}*/
                #hc-tip-box {
                    position: fixed;
                    display: none;
                    opacity: 0;
                    background: #1e293b;
                    color: #fff;
                    padding: 6px 10px;
                    border-radius: 8px;
                    font-size: 13px;
                    line-height: 1.55;
                    width: 200px;
                    white-space: normal;
                    font-weight: 400;
                    z-index: 999999;
                    pointer-events: none;
                    font-family: 'Noto Sans TC',sans-serif;
                    box-shadow: 0 4px 12px rgba(0,0,0,.2);
                }
            .hc-stat-v{font-size:31px;font-weight:900;font-family:'DM Mono',monospace;line-height:1;margin-bottom:5px}
            .hc-stat-v.blue{color:var(--blue-d,#1d4ed8)}.hc-stat-v.teal{color:var(--teal-d,#0f766e)}.hc-stat-v.green{color:var(--green,#16a34a)}
            .hc-stat-d{font-size:13px;color:var(--light);line-height:1.6}
            .hc-btn-s{padding:10px 16px;border-radius:12px;border:1.5px solid var(--border);background:#fff;color:var(--ink);font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
            /* Raddonut header / filter controls */
            .hx-card-header-right{display:flex;align-items:center;gap:4px;margin-left:auto;padding-right:4px}
            .hx-tgw{display:flex;gap:3px;padding:3px;border:1.5px solid var(--border);border-radius:30px;background:var(--bg,#f8fafc)}
            .hx-tg{padding:4px 11px;border-radius:26px;border:none;background:transparent;font-size:14px;font-weight:700;color:var(--light);cursor:pointer;font-family:'Noto Sans TC',sans-serif}
            .hx-tg.on{background:#fff;color:var(--blue,#2563eb);box-shadow:0 1px 6px rgba(0,0,0,.08)}
            .hx-tg-divider{width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0}
            .hx-info-btn{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border);background:#fff;font-size:13px;color:var(--muted);cursor:default;display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;padding:0}
            .hx-info-pop{display:none;position:absolute;top:22px;right:0;background:#1e293b;color:#fff;padding:8px 12px;border-radius:8px;font-size:14px;line-height:1.6;width:240px;z-index:50;white-space:normal;font-weight:400;font-family:'Noto Sans TC',sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.2)}
            .hx-info-btn:hover .hx-info-pop{display:block}
            .hx-ftabs{display:flex;gap:6px;flex-wrap:wrap;padding:8px 4px}
            /* ── 弱點分析與今日建議 ──────────────────────────────────────── */
            .hx-weak-title-row{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:14px}
            .hx-weak-ai-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:#1e3a5f;color:#fff;letter-spacing:.3px;flex-shrink:0}
            .hx-weak-info-btn{position:relative;width:22px;height:22px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--muted);cursor:default;font-size:12px;display:flex;align-items:center;justify-content:center}
            .hx-weak-info-pop{display:none;position:absolute;top:26px;right:0;background:#1e293b;color:#fff;padding:8px 12px;border-radius:8px;font-size:13px;line-height:1.6;width:240px;z-index:50;white-space:normal;font-weight:400;text-align:left;box-shadow:0 4px 12px rgba(0,0,0,.2)}
            .hx-weak-info-btn:hover .hx-weak-info-pop{display:block}
            @media (max-width:620px){.hx-weak-info-pop{width:72vw}}
            .hx-weak-regen-btn{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--teal);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}
            .hx-weak-regen-btn:disabled{opacity:.5;cursor:not-allowed}
            .hx-weak-regen-btn.spinning{animation:hxWeakSpin 1s linear infinite}
            .hx-weak-regen-btn.used-up{border-style:dashed;border-color:#cbd5e1;color:#94a3b8}
            @keyframes hxWeakSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
            .hx-weak-summary-text{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:14px}
            .hx-weak-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
            .hx-weak-stat{border:1.5px solid var(--border);border-radius:14px;padding:14px 8px;text-align:center;background:var(--bg,#f8fafc)}
            .hx-weak-stat .v{font-size:24px;font-weight:900;color:var(--ink);line-height:1}
            .hx-weak-stat .l{font-size:11px;color:var(--muted);margin-top:5px;font-weight:700;letter-spacing:.2px}
            .hx-weak-stat.acc{background:#fff7ed;border-color:#fed7aa}
            .hx-weak-stat.acc .v{color:#c2410c}
            .hx-weak-stat.weak{background:#fff1f2;border-color:#fecdd3}
            .hx-weak-stat.weak .v{color:var(--rose)}
            .hx-weak-stat.crit{background:#fefce8;border-color:#fde047}
            .hx-weak-stat.crit .v{color:#854d0e}
            .hx-weak-stat.mastery{background:#f0fdf4;border-color:#bbf7d0}
            .hx-weak-stat.mastery .v{color:var(--green)}
            .hx-weak-group-hd{margin:14px 0 8px;padding-top:10px;border-top:1.5px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
            .hx-weak-group-hd:first-child{margin-top:0;padding-top:0;border-top:none}
            .hx-weak-group-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:#fff;font-size:11px;font-weight:900;flex-shrink:0}
            .hx-weak-group-hd.critical .hx-weak-group-icon{background:#ca8a04}
            .hx-weak-group-hd.critical .hx-weak-group-label{color:#854d0e}
            .hx-weak-group-hd.warn .hx-weak-group-icon{background:var(--rose)}
            .hx-weak-group-hd.warn .hx-weak-group-label{color:var(--rose)}
            .hx-weak-group-hd.mastery .hx-weak-group-icon{background:var(--green)}
            .hx-weak-group-hd.mastery .hx-weak-group-label{color:var(--green)}
            .hx-weak-group-label{font-size:14px;font-weight:900}
            .hx-weak-group-desc{font-size:12px;color:var(--muted);font-weight:500}
            .hx-weak-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;border:1.5px solid var(--border);background:#fff}
            .hx-weak-row.tier-critical{border-color:#fde047;background:#fefce8}
            .hx-weak-row.tier-warn{border-color:#fecdd3;background:#fff1f2}
            .hx-weak-row-dot{font-size:11px;flex-shrink:0}
            .hx-weak-row-main{flex:1;min-width:0}
            .hx-weak-row-title{font-size:14px;font-weight:700;color:var(--ink)}
            .hx-weak-row-explain{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}
            .hx-weak-row-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;width:64px}
            .hx-weak-row-bar{width:100%;height:5px;background:var(--border);border-radius:3px;overflow:hidden}
            .hx-weak-row-bar .fill{height:100%;border-radius:3px;transition:width .5s}
            .hx-weak-row-pct{font-weight:900;font-size:15px}
            .hx-weak-mastery-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
            .hx-weak-mastery-chip{font-size:12px;font-weight:700;color:var(--green);background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:20px;padding:3px 10px}
            .hx-weak-row.skeleton{background:#f8fafc;border-style:dashed}
            .hx-weak-skel-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);animation:dp 1s infinite;display:inline-block;margin-right:8px;flex-shrink:0}
            .hx-weak-skel-bar{flex:1;height:12px;background:#e2e8f0;border-radius:6px}
            .hx-weak-empty{padding:24px 16px;text-align:center;color:var(--muted);font-size:13px}
            .hx-weak-sum-hd{font-size:12px;font-weight:700;color:var(--muted);margin:16px 0 6px;padding-top:12px;border-top:1.5px solid var(--border);letter-spacing:.3px}
            .hx-weak-sum-row{display:flex;align-items:baseline;gap:8px;padding:3px 0;flex-wrap:wrap}
            .hx-weak-sum-badge{flex-shrink:0;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}
            .hx-weak-sum-badge.critical{background:#fefce8;color:#854d0e;border:1px solid #fde047}
            .hx-weak-sum-badge.warn{background:#fff1f2;color:var(--rose);border:1px solid #fecdd3}
            .hx-weak-sum-badge.mastery{background:#f0fdf4;color:var(--green);border:1px solid #bbf7d0}
            .hx-weak-sum-list{font-size:12px;color:var(--muted)}
            @media (max-width:520px){.hx-weak-stats{grid-template-columns:1fr 1fr}}
            /* ── 你的學習習慣／這本書的狀況（10 張卡片）──────────────────────────── */
            .hx-stat-section{margin-bottom:16px}
            .hx-stat-section-title{font-size:14px;font-weight:900;color:var(--ink);margin-bottom:10px}
            .hx-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-bottom:16px}
            .hx-stat-grid.status{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
            .hx-stat-card{position:relative;border:1.5px solid var(--border);border-radius:14px;padding:12px;background:#fff;min-width:0;transition:transform .16s,box-shadow .16s}
            @media (hover:hover){.hx-stat-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08)}}
            .hx-stat-card.habit{background:#f0fdfa;border-color:#99f6e4}
            .hx-stat-card.status{background:#eff6ff;border-color:#bfdbfe}
            .hx-stat-card.insufficient{border-style:dashed;background:#f8fafc}
            .hx-stat-card-hd{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:8px}
            .hx-stat-card-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.2px}
            .hx-stat-info-btn{position:relative;width:13px;height:13px;border:none;background:transparent;color:var(--muted);font-size:12px;line-height:1;cursor:pointer;padding:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
            .hx-stat-info-btn::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
            .hx-stat-card-value{font-size:15px;font-weight:900;color:var(--ink);line-height:1.3;min-height:20px;word-break:break-word}
            .hx-stat-card-value .num{font-size:20px}
            .hx-stat-card-visual{margin-top:8px}
            .hx-stat-insufficient-text{font-size:10px;color:var(--muted);line-height:1.5}
            .hx-stat-dotrow{display:flex;gap:3px;flex-wrap:wrap}
            .hx-stat-dot{width:8px;height:8px;border-radius:50%;background:var(--border)}
            .hx-stat-dot.dark{background:var(--teal,#0d9488)}
            .hx-stat-ratio-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--border)}
            .hx-stat-ratio-bar .seg.green{background:var(--green,#16a34a)}
            .hx-stat-ratio-bar .seg.orange{background:#f97316}
            .hx-stat-ratio-label{font-size:10px;color:var(--muted);margin-top:4px}
            .hx-stat-weekbar{display:flex;align-items:flex-end;gap:2px;height:36px}
            .hx-stat-weekbar .bar{flex:1;background:var(--border);border-radius:2px 2px 0 0;min-height:2px}
            .hx-stat-weekbar .bar.dark{background:var(--teal,#0d9488)}
            .hx-stat-weekbar-labels{display:flex;gap:2px;margin-top:2px}
            .hx-stat-weekbar-labels span{flex:1;text-align:center;font-size:10px;color:var(--muted)}
            .hx-stat-progress-bar{height:8px;border-radius:4px;background:var(--border);overflow:hidden}
            .hx-stat-progress-bar .fill{height:100%;background:var(--blue,#2563eb)}
            .hx-stat-progress-bar.orange .fill{background:#f97316}
            .hx-stat-progress-sub{font-size:10px;color:var(--muted);margin-top:4px;word-break:break-word}
            @media (max-width:620px){.hx-stat-grid,.hx-stat-grid.status{grid-template-columns:repeat(2,1fr)}}
            @media (min-width:621px) and (max-width:900px){.hx-stat-grid,.hx-stat-grid.status{grid-template-columns:repeat(3,1fr)}}
            @media (min-width:901px){.hx-stat-grid{grid-template-columns:repeat(4,1fr)}.hx-stat-grid.status{grid-template-columns:repeat(3,1fr)}}
            .hx-stat-tip-pop{position:fixed;z-index:9999;background:#1e293b;color:#fff;font-size:12px;line-height:1.6;padding:10px 12px;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.25);max-width:240px;display:none}
            @media (max-width:620px){.hx-stat-tip-pop{max-width:72vw}}

            /* ── End 學習成果 CSS ──────────────────────────────────────── */

            .mtitle {
                font-size: 19px;
                font-weight: 900;
                margin-bottom: 5px;
            }

            .msub {
                font-size: 13px;
                color: var(--muted);
                margin-bottom: 22px;
                line-height: 1.6;
            }

            /* ── 自主學習排程：步驟條 ── */
            #ovSchedule .steps {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-bottom: 22px;
            }

            #ovSchedule .sdot2 {
                width: 27px;
                height: 27px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                font-weight: 700;
                border: 2px solid var(--border);
                color: var(--muted);
                background: #fff;
                flex-shrink: 0;
            }

                #ovSchedule .sdot2.active {
                    border-color: var(--teal);
                    color: var(--teal-dark);
                }

                #ovSchedule .sdot2.done {
                    background: var(--teal);
                    border-color: var(--teal);
                    color: #fff;
                }

            #ovSchedule .sline {
                flex: 1;
                height: 2px;
                background: var(--border);
                border-radius: 1px;
            }

                #ovSchedule .sline.done {
                    background: var(--teal);
                }

            /* ── 自主學習排程：表單元件 ── */
            #ovSchedule .flbl {
                display: block;
                font-size: 11.5px;
                font-weight: 700;
                letter-spacing: .7px;
                text-transform: uppercase;
                color: var(--muted);
                margin-bottom: 9px;
            }

            #ovSchedule .days-row {
                display: flex;
                gap: 5px;
                flex-wrap: nowrap;
            }

            #ovSchedule .day-btn {
                width: 38px;
                height: 38px;
                border-radius: 8px;
                border: 1.5px solid var(--border);
                background: var(--bg);
                color: var(--muted);
                font-size: 13px;
                font-weight: 700;
                cursor: pointer;
                transition: all .15s;
                flex-shrink: 0;
                font-family: 'Noto Sans TC', sans-serif;
            }

                #ovSchedule .day-btn.on {
                    border-color: var(--teal);
                    background: var(--teal);
                    color: #fff;
                    box-shadow: 0 3px 10px rgba(62,207,191,.3);
                }

            #ovSchedule .stepper {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            #ovSchedule .step-btn {
                width: 40px;
                height: 40px;
                border-radius: 9px;
                border: 1.5px solid var(--border);
                background: #fff;
                font-size: 20px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all .15s;
            }

                #ovSchedule .step-btn:hover {
                    border-color: var(--teal);
                    color: var(--teal);
                }

            #ovSchedule .step-val {
                flex: 1;
                text-align: center;
                background: var(--teal-bg);
                border: 1.5px solid var(--teal-soft);
                border-radius: 9px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 17px;
                font-weight: 700;
                color: var(--teal-dark);
            }

            #ovSchedule .preset-row {
                display: flex;
                gap: 7px;
                flex-wrap: wrap;
            }

            #ovSchedule .preset-btn {
                flex: 1;
                min-width: 88px;
                padding: 9px 8px;
                border-radius: 10px;
                border: 1.5px solid var(--border);
                background: var(--bg);
                font-size: 12.5px;
                font-weight: 700;
                color: #1c2b2a;
                cursor: pointer;
                font-family: 'Noto Sans TC', sans-serif;
                transition: all .15s;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 2px;
            }

                #ovSchedule .preset-btn span {
                    font-size: 10.5px;
                    font-weight: 400;
                    color: var(--muted);
                }

                #ovSchedule .preset-btn:hover,
                #ovSchedule .preset-btn.on {
                    border-color: var(--teal);
                    background: var(--teal-bg);
                    color: var(--teal-dark);
                }

                    #ovSchedule .preset-btn.on span {
                        color: var(--teal-dark);
                    }

            #ovSchedule .date-mode-btn {
                padding: 5px 10px;
                border-radius: 8px;
                border: 1.5px solid var(--border);
                background: var(--bg);
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
                font-family: 'Noto Sans TC', sans-serif;
                color: var(--muted);
                transition: all .15s;
            }

                #ovSchedule .date-mode-btn.on {
                    border-color: var(--teal);
                    background: var(--teal-bg);
                    color: var(--teal-dark);
                }

            #ovSchedule input[type="date"] {
                width: 100%;
                padding: 7px 10px;
                border: 1.5px solid var(--border);
                border-radius: 8px;
                font-size: 13px;
                font-family: 'Noto Sans TC', sans-serif;
                color: #1c2b2a;
                background: #fff;
            }

                #ovSchedule input[type="date"]:focus {
                    outline: none;
                    border-color: var(--teal);
                }

            #ovSchedule #aiChatBody input[type="text"] {
                flex: 1;
                padding: 9px 12px;
                border: 1.5px solid var(--border);
                border-radius: 9px;
                font-size: 13px;
                font-family: 'Noto Sans TC', sans-serif;
                color: #1c2b2a;
                background: #fff;
                outline: none;
            }

            /* ── 自主學習排程：可行度分析 ── */
            #ovSchedule .feasibility {
                background: var(--bg);
                border: 1.5px solid var(--border);
                border-radius: 12px;
                padding: 14px 16px;
            }

            #ovSchedule .fr {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px 0;
                border-bottom: 1px solid var(--border);
                font-size: 13px;
            }

                #ovSchedule .fr:last-child {
                    border-bottom: none;
                }

            #ovSchedule .fk {
                color: var(--muted);
            }

            #ovSchedule .fv {
                font-weight: 700;
            }

                #ovSchedule .fv.ok {
                    color: var(--green);
                }

                #ovSchedule .fv.warn {
                    color: var(--amber);
                }

                #ovSchedule .fv.bad {
                    color: var(--rose);
                }

                #ovSchedule .fv.def {
                    color: var(--teal-dark);
                }

            #ovSchedule .fbar {
                height: 9px;
                background: #eee;
                border-radius: 5px;
                overflow: hidden;
                margin-top: 9px;
            }

            #ovSchedule .fbfill {
                height: 100%;
                border-radius: 5px;
                transition: width .6s ease, background .4s;
            }

            #ovSchedule .fsug {
                margin-top: 9px;
                font-size: 12px;
                color: var(--muted);
                line-height: 1.7;
                display: none;
            }

            /* ── 自主學習排程：操作按鈕 ── */
            .mactions {
                display: flex;
                gap: 10px;
                margin-top: 24px;
            }

            .btn-cancel {
                flex: 1;
                padding: 12px;
                border-radius: 10px;
                border: 1.5px solid var(--border);
                background: #fff;
                color: var(--muted);
                font-size: 14px;
                font-weight: 700;
                cursor: pointer;
                font-family: 'Noto Sans TC', sans-serif;
            }

                .btn-cancel:hover {
                    border-color: var(--rose);
                    color: var(--rose);
                }

            .btn-ok {
                flex: 2;
                padding: 12px;
                border-radius: 10px;
                border: none;
                background: linear-gradient(135deg, var(--teal-dark), var(--teal));
                color: #fff;
                font-size: 14px;
                font-weight: 900;
                cursor: pointer;
                font-family: 'Noto Sans TC', sans-serif;
                box-shadow: 0 4px 16px rgba(62,207,191,.3);
            }

            /* note button */
            .btn-note {
                background: none;
                border: none;
                cursor: pointer;
                font-size: 15px;
                padding: 4px 6px;
                border-radius: 6px;
                opacity: .5;
                transition: opacity .15s;
                vertical-align: middle;
                margin-left: 4px
            }

                .btn-note:hover {
                    opacity: 1;
                    background: var(--teal-bg)
                }

            /* ── 自主學習排程：恢復 Modal ── */
            #ovResume {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,.5);
                z-index: 9999;
                align-items: center;
                justify-content: center;
            }

                #ovResume.show {
                    display: flex !important;
                }

                #ovResume > .modal {
                    display: block !important;
                    position: relative !important;
                    background: #fff;
                    border-radius: 16px;
                    padding: 28px;
                    width: 520px;
                    max-width: 95vw;
                    max-height: 90vh;
                    overflow-y: auto;
                    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
                }

            #ovNote {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,.5);
                z-index: 9999;
                align-items: center;
                justify-content: center;
            }

                #ovNote.show {
                    display: flex !important;
                }

                #ovNote .modal {
                    display: block !important;
                    position: relative !important;
                    background: #fff;
                    border-radius: 16px;
                    width: 520px;
                    max-width: 95vw;
                    max-height: 90vh;
                    overflow-y: auto;
                    padding: 26px 28px;
                    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
                }

            #ovReflectNotes {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,.5);
                z-index: 9999;
                align-items: center;
                justify-content: center;
            }

                #ovReflectNotes.show {
                    display: flex !important;
                }

                #ovReflectNotes .modal {
                    display: block !important;
                    position: relative !important;
                    background: #fff;
                    border-radius: 16px;
                    width: 480px;
                    max-width: 95vw;
                    max-height: 90vh;
                    overflow-y: auto;
                    padding: 26px 28px;
                    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
                }

                #ovResetA {
                    display: none;
                    position: fixed;
                    inset: 0;
                    background: rgba(0,0,0,.5);
                    z-index: 9999;
                    align-items: center;
                    justify-content: center;
                    backdrop-filter: blur(4px);
                }

                    #ovResetA.show {
                        display: flex !important;
                    }

                    #ovResetA > .modal {
                        display: block !important;
                        position: relative !important;
                        top: auto !important;
                        left: auto !important;
                        right: auto !important;
                        bottom: auto !important;
                        width: 420px;
                        max-width: 92vw;
                        max-height: 90vh;
                        overflow-y: auto;
                        background: #fff;
                        border-radius: 20px;
                        padding: 30px 28px;
                        box-shadow: 0 20px 60px rgba(0,0,0,.2);
                        animation: mpop .3s cubic-bezier(.34,1.56,.64,1);
                    }

                #ovResetB {
                    display: none;
                    position: fixed;
                    inset: 0;
                    background: rgba(0,0,0,.5);
                    z-index: 9999;
                    align-items: center;
                    justify-content: center;
                    backdrop-filter: blur(4px);
                }

                    #ovResetB.show {
                        display: flex !important;
                    }

                    #ovResetB > .modal {
                        display: block !important;
                        position: relative !important;
                        top: auto !important;
                        left: auto !important;
                        right: auto !important;
                        bottom: auto !important;
                        width: 420px;
                        max-width: 92vw;
                        max-height: 90vh;
                        overflow-y: auto;
                        background: #fff;
                        border-radius: 20px;
                        padding: 30px 28px;
                        box-shadow: 0 20px 60px rgba(0,0,0,.2);
                        animation: mpop .3s cubic-bezier(.34,1.56,.64,1);
                    }

                #ovDelete {
                    display: none;
                    position: fixed;
                    inset: 0;
                    background: rgba(0,0,0,.5);
                    z-index: 9999;
                    align-items: center;
                    justify-content: center;
                    backdrop-filter: blur(4px);
                }

                    #ovDelete.show {
                        display: flex !important;
                    }

                    #ovDelete > .modal {
                        display: block !important;
                        position: relative !important;
                        top: auto !important;
                        left: auto !important;
                        right: auto !important;
                        bottom: auto !important;
                        width: 420px;
                        max-width: 92vw;
                        max-height: 90vh;
                        overflow-y: auto;
                        background: #fff;
                        border-radius: 20px;
                        padding: 30px 28px;
                        box-shadow: 0 20px 60px rgba(0,0,0,.2);
                        animation: mpop .3s cubic-bezier(.34,1.56,.64,1);
                    }

                    #ovResetA .modal-title,
                    #ovResetB .modal-title,
                    #ovDelete .modal-title {
                        display: block !important;
                        margin: 0 0 16px 0 !important;
                        padding: 0 !important;
                        float: none !important;
                        width: 100% !important;
                        font-size: 17px !important;
                        font-weight: 900 !important;
                        line-height: 1.4 !important;
                        color: var(--ink) !important;
                    }

                    #ovResetA .modal-body,
                    #ovResetB .modal-body,
                    #ovDelete .modal-body {
                        display: block !important;
                        margin: 0 0 20px 0 !important;
                        padding: 0 !important;
                        float: none !important;
                        width: 100% !important;
                        font-size: 13px !important;
                        line-height: 1.8 !important;
                        color: #374151 !important;
                    }

            /* ── 自主學習排程：完成獎勵視窗 ── */
            .complete-ov {
                display: none;
                position: fixed;
                inset: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(0,0,0,.7);
                z-index: 10000;
                align-items: center;
                justify-content: center;
                backdrop-filter: blur(6px);
            }

                .complete-ov.show {
                    display: flex !important;
                }

                .complete-ov > .complete-card {
                    display: block !important;
                    position: relative !important;
                    top: auto !important;
                    left: auto !important;
                    right: auto !important;
                    bottom: auto !important;
                    margin: 0 auto !important;
                    transform: none !important;
                    background: #fff;
                    border-radius: 24px;
                    padding: 44px 36px;
                    text-align: center;
                    max-width: 460px;
                    width: 90vw;
                    max-height: 90vh;
                    overflow-y: auto;
                    box-shadow: 0 30px 80px rgba(0,0,0,.25);
                    animation: cpop .5s cubic-bezier(.34,1.56,.64,1);
                }


            .ctrophy {
                font-size: 60px;
                margin-bottom: 28px;
                display: block;
                animation: bounce 1s ease infinite alternate;
            }

            .ctitle {
                font-size: 24px;
                font-weight: 900;
                margin-bottom: 8px;
            }

            .csub {
                font-size: 13px;
                color: var(--muted);
                line-height: 1.7;
                margin-bottom: 28px;
            }

            .coins-box {
                background: linear-gradient(135deg, #fffbeb, #fef3c7);
                border: 2px solid #fcd34d;
                border-radius: 14px;
                padding: 20px 16px 22px;
                margin-bottom: 20px;
            }

            .coin-spin {
                font-size: 36px;
                display: block;
                margin-bottom: 14px;
                animation: cspin 2.5s linear infinite;
            }

            .coin-big-text {
                font-size: 21px;
                font-weight: 900;
                color: #b45309;
                line-height: 1.35;
                margin-bottom: 8px
            }

            .coin-sub {
                font-size: 12px;
                color: #92400e;
                margin-top: 3px;
            }

            .btn-claim {
                display: block;
                width: 100%;
                padding: 14px;
                border-radius: 12px;
                border: none;
                background: linear-gradient(135deg, #f59e0b, #fbbf24);
                color: #fff;
                font-size: 15px;
                font-weight: 900;
                cursor: pointer;
                font-family: 'Noto Sans TC', sans-serif;
                box-shadow: 0 5px 18px rgba(245,158,11,.4);
                transition: all .2s;
            }

                .btn-claim:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 9px 26px rgba(245,158,11,.5);
                }

            /* ── 自主學習排程：Toast 訊息 ── */
            .toasts {
                position: fixed;
                bottom: 22px;
                right: 22px;
                z-index: 500;
                display: flex;
                flex-direction: column;
                gap: 7px;
            }

            .toast {
                background: #fff;
                border-radius: 12px;
                padding: 12px 15px;
                min-width: 255px;
                max-width: 315px;
                display: flex;
                align-items: flex-start;
                gap: 9px;
                box-shadow: 0 6px 26px rgba(0,0,0,.13);
                animation: tin .3s ease;
                border: 1.5px solid var(--border);
            }

                .toast.ok {
                    border-left: 4px solid var(--teal);
                }

                .toast.win {
                    border-left: 4px solid var(--amber);
                }

                .toast.warn {
                    border-left: 4px solid var(--rose);
                }

                .toast.out {
                    animation: tout .3s ease forwards;
                }

            .tio {
                font-size: 19px;
                flex-shrink: 0;
                margin-top: 1px;
            }

            .tb {
                font-size: 13px;
                line-height: 1.55;
            }

                .tb strong {
                    color: var(--teal-dark);
                }

            /* ── 自主學習排程：Analytics 面板 ── */
            /* 分頁：白色滑塊式分段控制器。底槽用較深的薄荷綠，選中的分頁是浮起的白色滑塊。 */
            .dash-tabs {
                display: inline-flex;
                gap: 3px;
                padding: 4px;
                margin-bottom: 20px;
                background: #d9f0ec;
                border-radius: 13px;
            }

            .dash-tab {
                font-family: 'Noto Sans TC', sans-serif;
                font-size: 14px;
                font-weight: 700;
                background: transparent;
                border: none;
                padding: 9px 20px;
                cursor: pointer;
                color: #5d7573;
                border-radius: 10px;
                display: inline-flex;
                align-items: center;
                gap: 7px;
                transition: background .18s, color .18s, box-shadow .18s;
            }

                .dash-tab svg {
                    width: 15px;
                    height: 15px;
                    flex-shrink: 0;
                }

                .dash-tab.on {
                    color: #0f6e56;
                    background: #fff;
                    box-shadow: 0 1px 2px rgba(15,110,86,.12), 0 2px 6px rgba(15,110,86,.10);
                }

                .dash-tab.on:hover {
                    color: #0f6e56;
                    background: #fff;
                }

                .dash-tab:hover:not(.on) {
                    color: #0f6e56;
                    background: rgba(255,255,255,.55);
                }

                .dash-tab:active {
                    transform: scale(.97);
                }

            .dash-panel {
                display: none;
            }

                .dash-panel.on {
                    display: block;
                }

            .viz-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 18px;
                margin-bottom: 18px;
            }

            .viz-card {
                background: var(--bg);
                border: 1.5px solid var(--border);
                border-radius: 14px;
                padding: 18px;
            }

                .viz-card.full {
                    grid-column: 1 / -1;
                }

            .viz-title {
                font-size: 15px;
                font-weight: 900;
                color: var(--ink);
                margin-bottom: 14px;
                display: flex;
                align-items: center;
                gap: 7px;
            }

                .viz-title span {
                    font-size: 21px;
                }

            .viz-empty {
                text-align: center;
                color: var(--muted);
                font-size: 15px;
                padding: 28px 0;
                line-height: 1.8;
            }

            /* ── 自主學習排程：章節解鎖狀態 ── */
            .sched-min-badge {
                display: inline-block;
                font-size: 12px;
                font-weight: 700;
                padding: 2px 7px;
                border-radius: 10px;
                margin-left: 6px;
                vertical-align: middle;
                white-space: nowrap;
                background: #e6f7f5;
                color: #1a9e90;
                border: 1px solid #c8eeea;
            }

            .sched-locked-btn {
                background: #bbb !important;
                border-color: #bbb !important;
                color: #fff !important;
                cursor: not-allowed !important;
                pointer-events: none;
            }

            .sched-passed-row td {
                background: #f0fdf9 !important;
            }

            .sched-active-row td {
                background: #fffbeb !important;
            }

            .sched-lock-icon {
                display: inline-block;
                margin-right: 4px;
                font-size: 13px;
                color: #bbb;
            }

            .sched-pass-icon {
                display: inline-block;
                margin-right: 4px;
                font-size: 13px;
                color: #10b981;
            }

            .chapter-label {
                display: inline-flex;
                align-items: center;
                gap: 6px;
            }

            .sdot {
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 6px;
                vertical-align: middle;
                flex-shrink: 0;
            }

                .sdot.pass {
                    background: var(--green);
                }

                .sdot.act {
                    background: var(--amber);
                    animation: dp 1.4s infinite;
                }

                .sdot.lock {
                    background: #ccc;
                }

            .tbadge {
                display: inline-block;
                font-size: 13px;
                font-weight: 700;
                padding: 2px 7px;
                border-radius: 10px;
                margin-left: 5px;
                white-space: nowrap;
                vertical-align: middle;
            }

                .tbadge.time {
                    background: var(--teal-bg);
                    color: var(--teal-dark);
                }

                .tbadge.heavy {
                    background: #fef3c7;
                    color: #b45309;
                }

                .tbadge.weak {
                    background: #fff0f3;
                    color: var(--rose);
                }

                .tbadge.err {
                    background: #fef2f2;
                    color: #dc2626;
                }

                .tbadge.auto {
                    background: #f0fdf4;
                    color: #059669;
                }

            /* ── 自主學習排程：動畫 ── */
            @keyframes sdown {
                from {
                    opacity: 0;
                    transform: translateY(-14px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @keyframes shim {
                0%,100% {
                    opacity: 0;
                }

                50% {
                    opacity: 1;
                }
            }

            @keyframes mpop {
                from {
                    opacity: 0;
                    transform: scale(.92);
                }

                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }

            @keyframes dp {
                0%,100% {
                    opacity: 1;
                    transform: scale(1);
                }

                50% {
                    opacity: .3;
                    transform: scale(.5);
                }
            }

            @keyframes cpop {
                from {
                    opacity: 0;
                    transform: scale(.8) rotate(-3deg);
                }

                to {
                    opacity: 1;
                    transform: scale(1) rotate(0);
                }
            }

            @keyframes bounce {
                from {
                    transform: translateY(0);
                }

                to {
                    transform: translateY(-8px);
                }
            }

            @keyframes cspin {
                0%,100% {
                    transform: rotateY(0);
                }

                50% {
                    transform: rotateY(180deg);
                }
            }

            @keyframes tin {
                from {
                    transform: translateX(110%);
                    opacity: 0;
                }

                to {
                    transform: translateX(0);
                    opacity: 1;
                }
            }

            @keyframes tout {
                to {
                    transform: translateX(110%);
                    opacity: 0;
                }
            }

            /* ── 自主學習排程：RWD ── */
            @media (max-width: 640px) {
                .metrics {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            @media (max-width: 700px) {
                .viz-grid {
                    grid-template-columns: 1fr;
                }
            }

            /* ── 排程設定畫面字級／尺寸對齊展示模型（PM 2026-07-29「大小請同模板」）──
               放在 style 最後，確保蓋得過前面既有的 #ovSchedule 規則 */
            #ovSchedule .modal {
                max-width: 420px;
            }

            #ovSchedule .mtitle {
                font-size: 18px;
                font-weight: 900;
                text-align: left;
            }

            #ovSchedule .msub {
                font-size: 13px;
                text-align: left;
                margin-bottom: 14px;
            }

            #ovSchedule .flbl {
                font-size: 14px;
                font-weight: 900;
                margin: 16px 0 8px;
            }

            #ovSchedule .fg:first-of-type .flbl {
                margin-top: 0;
            }

            #ovSchedule .preset-btn {
                font-size: 13px;
                font-weight: 700;
                padding: 8px 15px;
                border-radius: 9px;
            }

            #ovSchedule .day-btn {
                height: 36px;
                max-width: 46px;
                border-radius: 9px;
                font-weight: 700;
            }

            #ovSchedule .step-btn {
                width: 34px;
                height: 34px;
                border-radius: 9px;
                font-size: 19px;
            }

            #ovSchedule .step-val {
                font-size: 16px;
                font-weight: 900;
                width: 66px;
            }

            #ovSchedule .plan-hint {
                font-size: 12px;
            }

            #ovSchedule .plan-star-tip {
                font-size: 12px;
                padding: 9px 12px;
                border-radius: 10px;
            }

            #ovSchedule #customPlanDays {
                font-size: 14px;
                padding: 8px 12px;
            }

            #ovSchedule .mactions {
                justify-content: flex-end;
                gap: 10px;
                margin-top: 20px;
            }

                #ovSchedule .mactions button {
                    padding: 10px 22px;
                    font-size: 13.5px;
                }

/* ── 以下：原 body 內 #MediaDailog 影音 Modal 樣式 ── */
        #MediaDailog .modal-dialog {
            /* 寬度取四者最小：960 桌機上限 / 90vw / 視窗寬-32px（左右各留 16px）/ 由 85vh 可視高度換算的等效寬 */
            /* ponytail: 73px = modal-header 實高（40px 關閉鈕 + 上下 padding 32 + 下框線 1），下方標題鎖一行保證此常數成立 */
            width: min(960px, 90vw, calc(100vw - 32px), calc((85vh - 73px) * 16 / 9));
            max-width: none;
            margin: auto;
            flex: 0 1 auto !important; /* 覆蓋 inline flex:1，改由上方公式決定寬度 */
        }
        #MediaDailog .modal-content {
            height: auto;
            border: 0; /* 去掉 1px 邊框，讓影片區寬度精準等於公式值（960 而非 958） */
            /* 注意：不可覆蓋 inline flex:1 —— 線上 .modal-content 是 display:block，
               改成 flex:0 1 auto 會 shrink-to-fit 只剩約 314px（實機驗證抓到） */
        }
        #MediaDailog .modal-body {
            height: auto !important; /* 覆蓋 inline height:100% */
            aspect-ratio: 16 / 9;
        }
        #MediaDailog #videoPlayer {
            display: block;
            width: 100%;
            height: 100%;
        }
        #MediaDailog .modal-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* 工單 #0005887 追加：Modal 垂直置中（原本貼齊上緣、下方大片空白）
           根因：.modal 開啟時是 block 佈局，.modal-dialog 的 margin:auto 垂直方向解析為 0。
           改用 flex 置中；transform 那條是防呆——本頁 Bootstrap 3/4 命名混用
           （BS3 靠 .modal.in 歸零 transform，本頁掛的是 BS4 的 .show），避免殘留 translate(0,-25%) */
        #MediaDailog.modal.show {
            display: flex !important;
            align-items: center;
            justify-content: center;
        }
        #MediaDailog.modal.show .modal-dialog {
            transform: none !important;
        }
        #MediaDailog .close {
            min-width: 40px;
            min-height: 40px;
            font-size: 28px;
            line-height: 1;
        }

/* ── 序號登錄 / 教師開通 modal（原 Views/Shared/_studentOrTeacherAcitve.cshtml 內嵌 <style> 原樣搬入；新版 modal 改為 Vue 元件，不再引用該 partial） ── */
    .info-box {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        border: 1px solid #bfdbfe;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }

    .info-title {
        font-weight: 600;
        color: #1e40af;
        margin-bottom: 15px;
        font-size: 15px;
    }

    .example-text {
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 12px;
        padding: 8px 12px;
        background: #f9fafb;
        border-radius: 6px;
        border-left: 3px solid #3b82f6;
    }

    .error-message {
        margin-top: 8px;
        font-size: 14px;
        color: #dc2626;
        display: none;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        background: #fef2f2;
        border-radius: 6px;
        border-left: 3px solid #ef4444;
    }

        .error-message.show {
            display: flex;
        }

    .info-list {
        space-y: 12px;
    }

    .info-item {
        display: flex;
        align-items: flex-start;
        font-size: 14px;
        color: #374151;
        margin-bottom: 12px;
        line-height: 1.5;
    }

    .info-number {
        font-weight: 600;
        margin-right: 10px;
        color: #1e40af;
        min-width: 20px;
    }

    .checkbox-group {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 15px;
        background: #f8fafc;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }

    .checkbox {
        width: 18px;
        height: 18px;
        margin-top: 2px;
        accent-color: #3b82f6;
        cursor: pointer;
    }

    .checkbox-label {
        font-size: 14px;
        color: #374151;
        cursor: pointer;
        line-height: 1.5;
    }

    .d-inline {
        display: inline !important;
    }

    .btn-container {
        position: relative;
    }

    .tooltip-student-active {
        position: absolute;
        bottom: calc(100% + 8px);
        right: 0;
        padding: 10px 12px;
        background: #1f2937;
        color: white;
        font-size: 12px;
        border-radius: 6px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        z-index: 10;
        opacity: 0;
        transform: translateY(4px);
        transition: all 0.2s;
        pointer-events: none;
        white-space: nowrap;
    }

        .tooltip-student-active.show {
            opacity: 1;
            transform: translateY(0);
        }

        .tooltip-student-active::after {
            content: '';
            position: absolute;
            top: 100%;
            right: 20px;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #1f2937;
        }

    .tooltip-text {
        display: block;
    }