:root {
    --card-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    --primary-color: #0d6efd;
    --danger-color: #dc3545;
    --focus-btn: #258cfb; /* 關注輸入框 */
    --brand: #6f8fff; /* 主品牌色 */
    --brand-600: #5f7fff; /* 深一階：按鈕/hover */
    --brand-700: #506fe6; /* 更深：active */
    --brand-25: #e6f1ff; /* 很淺：背景點綴 */
    --text-strong: #222;
    --text-muted: #6b7280;
    --ring: rgba(229, 96, 24, .28);
    --card-shadow: 0 10px 30px rgba(18, 29, 51, .08);

    --card-bg: #ffffff;
    --card-border: #e5e7eb;
    --card-hover-bg: #f9fafb;
    --primary-green: #16a34a;
    --primary-blue: #1465df;
    --text-main: #1f2937;
    --text-muted: #4b5563;
    --text-green: #16a34a;
    --text-blue: #1465df;
}

/*#region 整體設定() */
html { font-size: 1rem; }
body { font-family: "Times New Roman", "Noto Sans TC", "Microsoft JhengHei", PingFang, STHeiti, sans-serif, serif; }
body, h1, h2, h3, h4, h5, h6 { font-size: 1rem; }
h1 { font-size: 2rem; } /* 32px */
h2 { font-size: 1.75rem; } /* 28px */
h3 { font-size: 1.5rem; } /* 24px */
h4 { font-size: 1.25rem; } /* 20px */
h5 { font-size: 1rem; } /* 16px */
h6 { font-size: 0.875rem; } /* 14px */

a { text-decoration: none; }

html, body { height: 100%; margin: 0; }
body >.page { min-height: 100vh; /* 至少和螢幕一樣高 */ display: flex; flex-direction: column; /* 垂直排列 */ }
body >.page > main { flex: 1; /* 重點：撐開剩餘高度 */ display:flex; justify-content:center; align-items:center; }
body >.page > main > article{ flex: 1; }
/* === 背景裝飾設定 === */
body { background-color: #f9f8f4; background-image: linear-gradient(#F1F1F1 1px, transparent 1px), linear-gradient(90deg, #F1F1F1 1px, transparent 1px); background-size: 48px 48px; }
body >.page > main > article { position:relative;}
body >.page > main > article > .circles{ width: 100%; height: 100vh; overflow: hidden;z-index: 0;pointer-events: none; position: fixed; top: 0; left: 0;}
body > .page > main > article > .circles + div{position:relative;}
body > .page > main > article > .circles span { 
    /*position: absolute;*/
    display:block;
    width: 500px; 
    height: 500px; 
    border-radius: 50%; 
    background: radial-gradient(circle at 80% 90%, #f9f8f4 60%, transparent 80%)
    , radial-gradient(circle at 50% 50%, rgb(27 101 193), transparent 90%)
    , radial-gradient(circle at 20% 20%, rgb(233 13 13 / 0%), #000000b0 0% 70%) ;
    filter: blur(0px); 
    mix-blend-mode: multiply; 
    opacity: 0.3; 
}
body > .page > main > article > .circles > .parner{position:absolute; top: 0%; right: 5%;}
body > .page > main > article > .circles span:nth-child(1) { transform: rotate(180deg); }
@media (min-width: 1200px) { body > .page > main > article > .circles > .parner{right: 10%;} }

/* === 導盲磚手機版隱藏 === */
.acc-key { position: absolute; top: 0; left: 0; z-index: 1000; margin-left: 5px; text-decoration: none; color: #000; }
@media (max-width: 767.98px) { .acc-key { display: none; } }

/* === 物件寬度控制 === */
.R_MaxWidth1200 { max-width: 1200px; width: 100%; }
.R_MaxWidth1000 { max-width: 1000px; width: 100%; }
.R_MaxWidth800 { max-width: 800px; width: 100%; }
.R_MaxWidth600 { max-width: 600px; width: 100%; }
.R_MaxWidth500 { max-width: 500px; width: 100%; }
.R_MaxWidth400 { max-width: 500px; width: 100%; }
.R_MaxWidth350 { max-width: 350px; width: 100%; }
.R_MaxWidth300 { max-width: 300px; width: 100%; }
.R_MaxWidth200 { max-width: 200px; width: 100%; }

/* === 自訂顏色控制 === */
.bg_FFF{background-color:#fff;}

/* === 物件效果控制 === */
.blur_glass { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background-color: #ffffff24; }
.fade-up { opacity: 0; transform: translateY(24px); animation: fadeUp 0.45s cubic-bezier(.22,.61,.36,1) forwards; }

/*#region 分頁控制按鈕設定*/
.pageHandlerPanelBox { display: flex; justify-content: center; }
.pageHandlerPanelBox .pageHandlerPanel { display: flex; justify-content: center; align-items: center; gap: 16px; }

/*#region 測驗文字的換行*/
.R_preLine { white-space: pre-line; }
/*#endregion*/
@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}
/*#endregion  */
/*#region mainNavBox 導覽列*/
.sidebar{position:relative; z-index:1;}
/* === 上層 === */
.mainNavBox .dropdown-item { white-space: nowrap; width: 100%; }
.mainNavBox .dropdown-menu { min-width: 160px; }
.mainNavBox .dropdown-menu .dropdown-item {text-align: center;padding: 12px 20px;}
.mainNavBox .dropdown-submenu {position: relative;}
.mainNavBox .mainNavTop .nav-link:hover {text-shadow: 1px 1px 2px rgba(109, 79, 25, .25);}
.mainNavBox .mainNavTop .no_shadow:hover { text-shadow: none; }
.mainNavBox .mainNavTop .have_shadow:hover { text-shadow: 1px 1px 2px rgba(109, 79, 25, .25); }
.mainNavBox .mainNavTop .left_line {position: relative;display: inline-block;padding-left: 0.75rem;margin-left: 0.75rem;line-height: 1.2;}
.mainNavBox .mainNavTop .left_line::before {content: '';position: absolute;left: -0.5rem;top: 0.15em;bottom: 0.15em; width: 2px;background-color: #6d4f19;}
.mainNavBox .mainNavTop .user_icon { width: 24px;height: 24px;border-radius: 50%;object-fit: cover; }
.mainNavBox .mainNavTop .user_box { margin:0 1rem; }
/* 使用者徽章與登出按鈕 */
.user-pill { color: #7A726C;background-color: #F0F0F0;border-radius: 999px;transition: background-color 0.2s ease;cursor: default;flex: 0 0 auto; }
.user-pill:hover { background-color: #EBEBEB; }
.user-pill-img { width: 2rem;height: 2rem;border-radius: 50%;object-fit: cover;background-color: #fff;padding: 2px; }
.logout-link { text-decoration: none; }
/* 子選單展開右側 */
.mainNavBox .dropdown-submenu > .dropdown-menu { top: 0;right: 100%;margin-top: -1px;display: none; }
.mainNavBox .logo img{ width:100%; max-width:400px; }
.mainNavBox .collapse.navbar-collapse { flex-grow:unset; }
.mainNavBox .collapse.navbar-collapse .navUlBox .navUl {  margin-left: auto; }
.mainNavBox .mainNavTop .nav-link { color:#7A726C; font-weight:bold;padding:0; margin: .5rem}
/* === 下層 === */
.mainNavBox .mainNavBottom .dropdown-menu { padding: 0; border-radius: 10px;}
/* 第一個 dropdown-item，加上上圓角 */
.mainNavBox .mainNavBottom .dropdown-menu li:first-child .dropdown-item { border-radius: 10px 10px 0 0;}
/* 最後一個 dropdown-item，加上下圓角 */
.mainNavBox .mainNavBottom .dropdown-menu li:last-child .dropdown-item {border-radius: 0 0 10px 10px;}
.mainNavBox .mainNavBottom .dropdown-menu .dropdown-item:hover,
.mainNavBox .mainNavBottom .nav-link:hover:not(.active) { color:#004643;font-weight:bold;background-color:#F1BD58;}
.mainNavBox .mainNavBottom .nav-link { margin: 0 1em 0 0; padding-left: 30px; padding-right: 30px; }
.mainNavBox .nav-link { width: 100%; }
.mainNavBox .mainNavBottom .nav-link.active,
.mainNavBox .mainNavBottom .dropdown-item.active { background-color: #F1BD58;color: #704411 !important;font-weight:bold; }
/* 桌機版（hover 展開） */
@media (min-width: 768px) {
    .mainNavBox .nav-link {text-align: center;}
    .mainNavBox .dropdown-submenu:hover > .dropdown-menu,
    .mainNavBox .dropdown-submenu > .dropdown-menu.show {
        display: block;
    }
}
@media (max-width: 767.98px) {
    .mainNavBox .mainNavBottom .dropdown-menu { padding: 0; border-radius: 10px;}
    /* 第一個 dropdown-item，加上上圓角 */
    .mainNavBox .mainNavBottom .dropdown-menu li:first-child .dropdown-item { border-radius: 10px 10px 0 0;}
    /* 最後一個 dropdown-item，加上下圓角 */
    .mainNavBox .mainNavBottom .dropdown-menu li:last-child .dropdown-item {border-radius: 0 0 10px 10px;}
    .mainNavBox .mainNavBottom .dropdown-menu .dropdown-item { border-radius: 10px;}
    .mainNavBox .nav-link {padding-left: 1rem}
    .mainNavTop, .mainNavBottom {display: flex;flex-direction: column}
    .mainNavTop ul, .mainNavBottom ul {width: 100%;}
    .mainNavBox .mainNavBottom .nav-link {margin: 0;}
    .mainNavBox .dropdown-item {padding: 12px 16px;text-align: left;}
    .mainNavBox .dropdown-toggle::after {float: right;margin-top: 0.5rem;}
    .mainNavBox .dropdown-submenu:hover > .dropdown-menu {display: none;}
    .mainNavBox .dropdown-submenu .dropdown-menu.show {display: block;position: relative;left: 0;top: 0;margin: 0;}
    /* === 箭頭不影響排版 === */
    .mainNavBox .dropdown-toggle {position: relative;}
    .mainNavBox .dropdown-toggle::after {position: absolute;right: 1rem;top: 50%;transform: translateY(-50%);margin: 0;}
    .mainNavBox .collapse.navbar-collapse .navUlBox .navUl { margin-left: 0; margin-right: auto; flex-grow: 1; }
    /* === 手機版隱藏橫豎 === */
    .mainNavBox .mainNavTop .left_line {padding-left: 0;margin-left: 0;}
    .mainNavBox .mainNavTop .left_line::before { display: none; }
    .mainNavBox .mainNavTop .user_box { margin-left:0; }
}
@media (max-width: 575.98px){
    .mainNavBox .logo img { width: 100%; max-width: 250px; }
}
/*#endregion  */
/*#region mainFooterBox 頁尾*/
.mainFooterBox { background-color: #ffeddf; color: #000; padding-top: 20px; }
.mainFooterBox .copyrightBox{text-align:center; padding:15px;}
.mainFooterBox .infoBox{text-align:center;}
.mainFooterBox .infoBox .infoItem div{margin:8px 0;}
/*#endregion  */
/*#region Loading設定 兩個layout版*/
.loaderBox { width: 100vw; min-height: 100vh; height: 100%; background-color: #00000099; position: fixed; inset: 0; z-index: 999; display: flex; justify-content: center; align-items: center; }
.loaderBox .loader { width: 48px; height: 48px; border: 10px solid #FFF; border-radius: 50%; position: relative; transform: rotate(45deg); box-sizing: border-box; }
.loaderBox .loader::before { content: ""; position: absolute; box-sizing: border-box; inset: -10px; border-radius: 50%; border: 10px solid #FF3D00; animation: prixClipFix 2s infinite linear; }
@keyframes prixClipFix {
    0% { clip-path: polygon(50% 50%,0 0,0 0,0 0,0 0,0 0) }
    25% { clip-path: polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0) }
    50% { clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%) }
    75% { clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%) }
    100% { clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0) }
}
/*#endregion*/
/*#region Login.razor 會員登入畫面系列(包含忘記密碼、密碼重設)*/
/*🚩共用*/
.CaseBox_login { max-width: 650px; border-radius:1rem; margin: 0 auto 3rem; padding: 2rem 0; display: flex; flex-direction: column; justify-content: center; border-radius: 0 0 .5rem .5rem; box-shadow: 3px 3px 8px #00000027; padding: 1.5rem; border: 1px solid #c8c8c8; }
.CaseBox_login .Title{ /*background-color:#855f19; color:#fff;*/ text-align:center; padding:.5rem 0; border-radius:.5rem .5rem 0 0; margin-bottom:0; }
.CaseBox_login .password-toggle-btn { position: absolute; top: 50%; right: .75rem; transform: translateY(-50%); background: none; border: none; color: #6c757d; cursor: pointer; border-radius: 8px; transition: background .2s ease, color .2s ease; }
.CaseBox_login .password-toggle-btn:hover { color: var(--brand-600); background: rgba(229,96,24,.06); }
.CaseBox_login .password-toggle-btn:focus { outline: 2px solid #000; outline-offset: 2px; }
.CaseBox_login .errorBox { margin: 0 0 1rem 0;background: #FFF; border-left:3px solid var(--danger-color);border-right:3px solid var(--danger-color); border-radius:14px;background: linear-gradient( 135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9) );box-shadow:2px 2px 5px rgba(0, 0, 0, .2) }
.CaseBox_login .validation-error {color:#D94869; font-size:1rem; letter-spacing:2px;}
.CaseBox_login .validation-error::before { content: '';display: inline-block;width: 1.2em;height: 1.2em;background-image: url('/images/icon/warning.svg');background-size: contain;background-repeat: no-repeat;background-position: center;margin-right: 0.5rem;vertical-align: middle;animation: shake 0.3s ease-in-out 1; }
.CaseBox_login .PWD_RuleBox { background: linear-gradient(to right, #e9c24c 10px, #fffcfa 10px); padding: 15px 15px 15px 35px; box-shadow: 3px 3px 8px var(--boxShadow_color); border-radius: 2px 8px 8px 2px; margin-top: 15px; }

.CaseBox_login .iconBox {display:flex; justify-content:center; align-items:center;}
.CaseBox_login .iconBox .iconhead { width: 100%; height: 150px; background-image: url("../images/icon/login.svg"); background-repeat: no-repeat; background-position: center; background-size: 80% 80%; } 
.CaseBox_login .iconBox.iconBoxForgot .iconhead { background-image: url("../images/icon/forgot_password.svg");  } 
.CaseBox_login .iconBox.iconBoxRevise .iconhead { background-image: url("../images/icon/forgot_password.svg");  } 
.CaseBox_login .iconBox.iconBoxRegis .iconhead { background-image: url("../images/icon/signup.svg");  }
.CaseBox_login .text-emerald { color: #10b981; text-decoration: none; }
.CaseBox_login .text-emerald:hover { color: #059669; text-decoration: underline; }
.CaseBox_login .divider { display: flex; align-items: center; text-align: center; color: #0d6145; margin: 2rem 0; font-weight: 600; }
.CaseBox_login .divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #f0f4fd; }
.CaseBox_login .divider:not(:empty)::before { margin-right: .5em; }
.CaseBox_login .divider:not(:empty)::after { margin-left: .5em; }
/*#endregion*/
/*#region Home.razor */
.homeBox .header .logo { max-width:100%; }
.exam-wrapper { padding: 2rem 1rem 2rem; text-align: left; }
.page-title { width: 100%;letter-spacing:5px }
.button:disabled { cursor: not-allowed !important;opacity: 0.6; }
/* 按鈕容器主體 */
.introLogin .introLoginBtn { width: 100%; background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 0.75rem; padding: 2rem; text-align: left; transition: all 0.2s ease; cursor: pointer; display: flex; flex-direction: column; }
.introLogin .introLoginBtn:hover { background-color: var(--card-hover-bg); border-color: #d1d5db; }
.introLogin .title { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.introLogin .icon { background-color: var(--primary-green); color: white; border-radius: 50%; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; transition: transform 0.2s ease; }
.introLogin .introLoginBtn:hover .icon { transform: scale(1.15); }
.introLogin .con1 { font-size: 2rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.25rem; }
.introLogin .con2 { font-size: 1.2rem; color: var(--text-green); font-weight: 500; }
.introLogin .introList { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; padding-bottom:.8rem; border-bottom: 1px solid var(--text-muted); }
.introLogin .introWord { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 1.1rem; }
.introLogin .introWord.less { text-decoration:line-through; }
.introLogin .introWord span { color: var(--primary-green); font-weight: bold; }
.introLogin .enter { font-size: 1.5rem; font-weight: 500; color: var(--text-green); }
.introLogin .enter svg { width: 1.75rem; height: 1.75rem; margin-left: 0.25rem; transition: transform 0.2s ease; }
.introLogin .introLoginBtn:hover .enter svg { transform: translateX(4px); }
.introLogin .introLoginBtn.btn_Quick .icon { background-color: var(--primary-blue); }
.introLogin .introLoginBtn.btn_Quick .con2 { color: var(--text-blue); }
.introLogin .introLoginBtn.btn_Quick .introWord span { color: var(--text-blue); }
.introLogin .introLoginBtn.btn_Quick .enter { color: var(--text-blue); }

/*#endregion*/
/*#region ExamContainer.razor */
.mainExamBox .mECaseBox{ border:1px solid #d7d7d7; padding:.5rem; margin:.2rem; border-radius:.2rem;}
.mainExamBox .mECaseBox_Up{display:flex;}
.mainExamBox .mECaseBox_Up .mECaseBox_User{}
.mainExamBox .mECaseBox_Up .mECaseBox_Info{ flex-grow:1; text-align:center;}
.mainExamBox .mECaseBox_Down { min-height:55vh; display: flex; flex-direction: column; }
.mainExamBox .mECaseBox_Down .ExamContent { flex:1; display:flex; flex-direction:column; justify-content:space-between; margin-top:1rem; }
.mainExamBox .mECaseBox_Down .ExamContent { font-size:1.8rem; }
.mainExamBox .mECaseBox_Down .ExamContent * { font-size: inherit !important; } /*這句是讓ExamContent 以下的東西，字體都繼承我(例如btn會有bootstrap 預設的字體大小)*/
.mainExamBox .mECaseBox_Down .ExamContent .ExamWorkToolBox .timeWord { text-align:end; }
.mainExamBox .mECaseBox_Down .QuestionBox .OptionBtnBox button { padding:.7rem 3rem; border:1px solid #b0b0b0; }
/*.mainExamBox .mECaseBox_Down .QuestionBox .OptionBtnBox button:hover { border:2px solid #e28f8f; color:#e28f8f; }*/ /*hover在手機端會殘留，造成選項誤會*/
.mainExamBox .mECaseBox_Down .QuestionBox .OptionBtnBox button.choosed { border:2px solid #cb2b2b; color:#cb2b2b; }

/*#region 單選有文字的效果 */
/* 隱藏原生 Radio 圓圈，但保留無障礙焦點 */
.mainExamBox .mECaseBox_Down .QuestionBox .OptionBtnBox.single .custom-radio-input { position: absolute; opacity: 0; width: 0; height: 0; }
/* 基礎標籤樣式 (模擬按鈕) */
.mainExamBox .mECaseBox_Down .QuestionBox .OptionBtnBox.single .btn-style-label { display: inline-flex; align-items: center; padding: 8px 15px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; transition: all 0.2s; background-color: white; width: 100%; /* 依需求調整 */ }
/* 懸停效果 */
.mainExamBox .mECaseBox_Down .QuestionBox .OptionBtnBox.single .btn-style-label:hover { background-color: #fff; border-color: #e28f8f; color: #e28f8f; }
/* 選中狀態 (對應你的 .choosed) */
.mainExamBox .mECaseBox_Down .QuestionBox .OptionBtnBox.single .custom-radio-input:checked + .btn-style-label,
.mainExamBox .mECaseBox_Down .QuestionBox .OptionBtnBox.single .btn-style-label.choosed { background-color: #fff; color: #cb2b2b; border-color: #cb2b2b; }
/* 無障礙：鍵盤聚焦時的視覺外框 */
.mainExamBox .mECaseBox_Down .QuestionBox .OptionBtnBox.single .custom-radio-input:focus-visible + .btn-style-label { outline: 2px solid #000; outline-offset: 2px; }
/*#endregion*/

.mainExamBox .mECaseBox_Down .QuestionBox .OptionPicBox { display:flex; flex-wrap:wrap; }
.mainExamBox .mECaseBox_Down .QuestionBox .OptionPicBox button { padding:.7rem 3rem; border:1px solid #b0b0b0; max-width:300px; }
/*.mainExamBox .mECaseBox_Down .QuestionBox .OptionPicBox button:hover { border:2px solid #e28f8f; color:#e28f8f; }*/ /*hover在手機端會殘留，造成選項誤會*/
.mainExamBox .mECaseBox_Down .QuestionBox .OptionPicBox button.choosed { border:2px solid #cb2b2b; color:#cb2b2b; }
.mainExamBox .exam_font { font-size:1rem; }
.mainExamBox .Score_Box { background: #FFF3CD; }
.mainExamBox .Score_Result { min-width:10rem; text-align:center; font-size:1.2rem}
.mainExamBox .Score_Icon { max-width:60px }


/*#endregion*/
/*#region SurveyQ.razor */
.mainSurveyQBox .survey-container { background-color: white; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.1); padding: 40px; margin-bottom: 30px; }
.mainSurveyQBox .survey-container .survey-header { border-bottom: 3px solid #0d6efd; padding-bottom: 20px; margin-bottom: 30px; }
.mainSurveyQBox .survey-container .question-block { margin-bottom: 30px; padding: 20px; background-color: #f8f9fa; border-radius: 8px; }
.mainSurveyQBox .survey-container .question-title { font-weight: 600; margin-bottom: 15px; color: #212529; }
.mainSurveyQBox .survey-container .required { color: #dc3545; }
/*#endregion*/
/*#region ExamScorePage.razor */
.mianExamScoreBox .mECaseBox_Down { max-width: 1400px; margin: 0 auto; }
.mianExamScoreBox .examResult .examTypeBox .examSectionBox { font-size:1.3em; margin: 3rem 0; padding: 2rem; background-color: #f8fffa; border: 1px solid #26a92d; border-radius: 1rem; overflow-wrap: break-word; word-break: normal; }
.mianExamScoreBox .examResult .examTypeBox .table *  { background-color:transparent; }
.mianExamScoreBox .examResult .examTypeBox .table tr  { background-color:#ffffff3d; }
.mianExamScoreBox .examResult .examTypeBox .examSectionBox .examSectionTitle { margin-bottom:1rem; padding-left: .9rem; color: forestgreen; background: linear-gradient( to right, forestgreen .5rem, transparent .5rem); }
.mianExamScoreBox .examResult .examTypeBox .examSectionBox .optionCard { background-color: #ffffff78; border-radius: .5rem; padding: .5rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 8px rgba(0,0,0,0.15); }
.mianExamScoreBox .examResult .examTypeBox .examSectionBox .optionCard .optionNumBox { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; background-color: #034d03; }
.mianExamScoreBox .examResult .examTypeBox .examSectionBox .optionCard .optionNumBox .optionNumItem { color:#fff; }
.mianExamScoreBox .examResult .examTypeBox .examSectionBox .resultBox { background-color: #ffffff78; border-radius: .5rem; padding: .5rem; box-shadow: inset 0 5px 8px rgba(255,255,255,0.8), 0 8px 8px rgba(0,0,0,0.15); border: 2px solid #105f1063; line-height: 2.5rem; }
.mianExamScoreBox .examResult .examTypeBox .examSectionBox .AnsWrongTag { background-color: #ff000017; }
.mianExamScoreBox .examResult .examTypeBox .examSectionBox .AnsWrongTag .resultBox { border: 2px solid #ad2117; }
.mianExamScoreBox .examResult .examTypeBox .examSectionBox .stuRecordBox audio { filter: invert(0%) sepia(60%) saturate(1200%) hue-rotate( 179deg) brightness(100%) contrast(119%); }
/*#endregion*/
/*#region wqanalyzeBox.razor 錯題分析 */
/* === 上方數據欄 === */
.wqanalyzeBox .dataCardBox .dataCardBg { background: linear-gradient( 0deg, #ffe0a7 20%, #f3f2f2, #ffffff ); border-radius: 1.5rem; border: 1px solid #f2e6cf; }
.wqanalyzeBox .dataCardBox .dataCardBg.dataCardQuan { background: linear-gradient( 0deg, #bda7ff 20%, #f3f2f2, #ffffff ); border:1px solid #f8e6ff;}
.wqanalyzeBox .dataCardBox .dataCardBg .dataCard { color:#37808d; font-size:1.5rem; padding: 1.5rem; border-radius: 1.5rem; /* 玻璃核心 */ background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); /* 邊框 + 陰影 */ border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1); text-align: center; }
.wqanalyzeBox .dataCardBox .dataCardBg .dataCard .content span { font-size:2.5rem; margin:0 .5rem; font-weight:bold;}
/* === 錯題數據卡 === */
.wqanalyzeBox .analysis_container { border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); background-color: white; overflow: hidden; }
/* 頂部標題列 */
.wqanalyzeBox .analysis_container .header-bar { background-color: #a3c9b8; padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; }
.wqanalyzeBox .analysis_container .level-title { color: #333;text-shadow: 1px 1px #fff; font-weight: 700; font-size: 1.25rem; margin: 0; }
.wqanalyzeBox .analysis_container .btn-resource { background-color: white; color: #2d7a5e; border-radius: 50px; padding: 6px 18px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.wqanalyzeBox .analysis_container .btn-resource:hover { background-color: #2d7a5e; color: white; }
/* 自定義 Grid 表頭 (僅在桌面端顯示) */
.wqanalyzeBox .analysis_container .grid-header { background-color: #f1f5f3; font-weight: 600; color: #6c757d; padding: 12px 25px; border-bottom: 1px solid #e9ecef; }
/* 數據列設計 */
.wqanalyzeBox .analysis_container .data-row { padding: 20px 25px; border-bottom: 1px solid #eee; align-items: center; transition: background-color 0.2s; }
.wqanalyzeBox .analysis_container .data-row:hover { background-color: #fafafa; }
.wqanalyzeBox .analysis_container .data-row:last-child { border-bottom: none; }
/* 標籤顯示 (僅在手機端顯示) */
.wqanalyzeBox .analysis_container .mobile-label { display: none; font-size: 0.8rem; color: #6c757d; margin-bottom: 2px; }
/* 查看按鈕 */
.wqanalyzeBox .analysis_container .btn-view { background-color: #2d7a5e; color: white; border: none; border-radius: 8px; padding: 8px 0; width: 100%; max-width: 120px; font-size: 0.9rem; transition: all 0.2s; }
.wqanalyzeBox .analysis_container .btn-view:hover { background-color: #24634c; color: white; box-shadow: 0 4px 8px rgba(45, 122, 94, 0.2); }
.wqanalyzeBox .analysis_container .btn-view:focus { border:2px dashed #000; }
/* 響應式斷點調整 */
@media (max-width: 767.98px) {
    .wqanalyzeBox .analysis_container .grid-header { display: none; /* 隱藏桌面端表頭 */ }
    .wqanalyzeBox .analysis_container .data-row { padding: 20px; text-align: left; }
    .wqanalyzeBox .analysis_container .mobile-label { display: block; /* 顯示數據標籤 */ }
    .wqanalyzeBox .analysis_container .data-col { margin-bottom: 12px; }
    .wqanalyzeBox .analysis_container .btn-view { max-width: 100%; /* 按鈕在手機端滿版 */ margin-top: 10px; }
    .wqanalyzeBox .analysis_container .header-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
    .wqanalyzeBox .analysis_container .btn-resource { width: 100%; text-align: center; }
}

/* AC2: 中級 (藍色系) */
.wqanalyzeBox .analysis_container.ac2 .header-bar { background-color: #8AB6F9; }
.wqanalyzeBox .analysis_container.ac2 .grid-header { background-color: #f8fdff; }
.wqanalyzeBox .analysis_container.ac2 .btn-resource { color: #3d76cc; }
.wqanalyzeBox .analysis_container.ac2 .btn-resource:hover { background-color: #3d76cc; color: white; }
.wqanalyzeBox .analysis_container.ac2 .btn-view { background-color: #3d76cc; }
.wqanalyzeBox .analysis_container.ac2 .btn-view:hover { background-color: #2a5699; }
/* AC3: 中高級 (橘黃色系) */
.wqanalyzeBox .analysis_container.ac3 .header-bar { background-color: #FFD89C; }
.wqanalyzeBox .analysis_container.ac3 .grid-header { background-color: #fffcf6; }
.wqanalyzeBox .analysis_container.ac3 .btn-resource { color: #d48a15; }
.wqanalyzeBox .analysis_container.ac3 .btn-resource:hover { background-color: #d48a15; color: white; }
.wqanalyzeBox .analysis_container.ac3 .btn-view { background-color: #e69516; }
/* 稍深於標題 */
.wqanalyzeBox .analysis_container.ac3 .btn-view:hover { background-color: #bf7c12; }
/* AC4: 高級 (粉紅/紅色系) */
.wqanalyzeBox .analysis_container.ac4 .header-bar { background-color: #F6A6A6; }
.wqanalyzeBox .analysis_container.ac4 .grid-header { background-color: #fff9f9; }
.wqanalyzeBox .analysis_container.ac4 .btn-resource { color: #d65a5a; }
.wqanalyzeBox .analysis_container.ac4 .btn-resource:hover { background-color: #d65a5a; color: white; }
.wqanalyzeBox .analysis_container.ac4 .btn-view { background-color: #e06e6e; }
.wqanalyzeBox .analysis_container.ac4 .btn-view:hover { background-color: #bc5555; }
/* AC5: 優級 (灰色系) */
.wqanalyzeBox .analysis_container.ac5 .header-bar { background-color: #BDBDBD; }
.wqanalyzeBox .analysis_container.ac5 .grid-header { background-color: #f7f7f7; }
.wqanalyzeBox .analysis_container.ac5 .btn-resource { color: #555; }
.wqanalyzeBox .analysis_container.ac5 .btn-resource:hover { background-color: #555; color: white; }
.wqanalyzeBox .analysis_container.ac5 .btn-view { background-color: #757575; }
.wqanalyzeBox .analysis_container.ac5 .btn-view:hover { background-color: #555555; }


.wqanalyzeBox .wqaCardBox { background-color: #FFF; border-radius: .5rem; box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1); }
.wqanalyzeBox .wqaCardBox .cardHead { padding: .5rem; font-weight: bold; font-size:1.2rem; border-radius: .5rem .5rem 0 0; }
.wqanalyzeBox .wqaCardBox.wqaCardBoxL1 { background-color: #f7fff7;}
.wqanalyzeBox .wqaCardBox.wqaCardBoxL1 .cardHead { background-color: #A3CFBB;}
.wqanalyzeBox .wqaCardBox.wqaCardBoxL2 { background-color: #f8fdff;}
.wqanalyzeBox .wqaCardBox.wqaCardBoxL2 .cardHead { background-color: #8AB6F9;}
.wqanalyzeBox .wqaCardBox.wqaCardBoxL3 { background-color: #fffcf6;}
.wqanalyzeBox .wqaCardBox.wqaCardBoxL3 .cardHead { background-color: #FFD89C;}
.wqanalyzeBox .wqaCardBox.wqaCardBoxL4 { background-color: #fff9f9;}
.wqanalyzeBox .wqaCardBox.wqaCardBoxL4 .cardHead { background-color: #F6A6A6;}
.wqanalyzeBox .wqaCardBox.wqaCardBoxL5 { background-color: #f7f7f7;}
.wqanalyzeBox .wqaCardBox.wqaCardBoxL5 .cardHead { background-color: #BDBDBD;}
.wqanalyzeBox .wqaCardBox .cardContent{padding:1rem 2rem;}
.wqanalyzeBox .wqaCardBox .cardBtn{padding:1rem; text-align:end;}
/*#endregion*/
/*#region ExamAnalyze.razor 歷程數據 */
.examanalyzeBox .chart-container { position: relative; height: clamp(280px, 35vw, 420px); width: 100%; }
.examanalyzeBox .chart-container canvas { max-width: 100%; }
.examanalyzeBox .chartBox { background: #f3f3f3; padding: 1rem; border: 1px solid #c1c1c1; border-radius: 1rem; }
/*#endregion*/
/*#region ExamHistory.razor 作答歷程 */
.examhistoryBox .rowTable .listItem .examTitle{font-weight:bold; font-size:1.2rem;}
.examhistoryBox .rowTable .listItem .examTime {color:#575757; }
.examhistoryBox .rowTable .listItem .scoreBox { display: inline-flex; flex-direction: column; width: fit-content; max-width: 100%; }
.examhistoryBox .rowTable .listItem .scoreBox .scoreTitle { padding: .2rem .6rem; background-color: #255473; color: #fff; text-align: center; border-radius: .2rem .2rem 0 0; white-space: nowrap; }
.examhistoryBox .rowTable .listItem .scoreBox .scoreContent { display: flex; border: 1px solid #b9b9b9; border-top:none; border-radius: 0 0 .2rem .2rem; background-color:#fff; width: fit-content; max-width: 100%; }
.examhistoryBox .rowTable .listItem .scoreBox .contentBox { min-width: 80px; padding: .5rem; box-sizing: border-box; text-align: center; border-right: 1px solid #e0e0e0; }
.examhistoryBox .rowTable .listItem .scoreBox .contentBox:last-child { border-right: none; }
.examhistoryBox .rowTable .listItem .scoreBox .contentBox .contentNum { font-weight:900; color:#9d0e0e; font-size:1.5rem; }
/*#endregion*/
/*#region ExamScorePage.razor */
.mianExamScoreBox .examResult .examSectionBox .OptionPicBox { display: flex; flex-wrap: wrap; }
.mianExamScoreBox .examResult .examSectionBox .OptionPicBox .optionItem { padding: .7rem 3rem; max-width: 200px; }
.mianExamScoreBox .examResult .RW_Box { padding: 2rem 1rem; border-radius: 5px; border: 5px solid #ffa6a6; border-top: none; border-bottom: none; background-color: #ff000008; }
.mianExamScoreBox .examResult .RW_Box.RW_BoxW { border: 5px solid #7ec9b4; border-top: none; border-bottom: none; background-color: #00fff308; }
.mianExamScoreBox .examResult .examSectionBox .groupQMQ { border: 8px solid; border-bottom: 1px solid; border-top: 1px solid; border-radius: 1rem; margin: 1rem 0; padding: 1rem; }
/*#endregion*/
/*#region MemData.razor */
.MemDataBox .cancelBox .alertbox { background-color: #fffbee; }
.MemDataBox .cancelBox .alertbox .info_text{border:1px dashed #ccc; padding:1rem; border-radius:.5rem;}
/*#endregion*/