/* ============================================================
   style.css - 狄奧國際英文村 (冰原歷險風格 - 終極全配版)
   ============================================================ */

/* 1. 全域變數：冰原色票 */
:root {
 

  /* 背景 */
  --bg-color: #0d1b2a;       /* 深海藍 */
  --bg-image: url('bg/ice_bg.webp'); 
  
  /* 冰塊材質 */
  --ice-dark: #1b3a57;       /* 深冰藍 (邊框) */
  --ice-light: #48cae4;      /* 亮冰藍 (按鈕/強調) */
  --ice-hover: #90e0ef;      /* 發光藍 */
  --frost-bg: rgba(224, 247, 250, 0.85); /* 結霜玻璃 */
  --frost-border: rgba(72, 202, 228, 0.5);
  
  /* 文字 */
  --text-main: #023e8a;      /* 深藍字 */
  --text-light: #fff;        /* 白字 */
  
  /* 功能色 */
  --primary: #00b4d8;        /* 主色 */
  --danger: #e63946;         /* 警告紅 */
  --success: #2a9d8f;        /* 成功綠 */
  --mod-color: #0077b6;      /* 版主標示色 */
  
  /* 特效 */
  --ice-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  --ice-glow: 0 0 15px rgba(72, 202, 228, 0.8);
  
  /* 字型 */
  --font-main: 'Inter', "Microsoft JhengHei", sans-serif;
}
  
  /* 2. 基礎設定 */
  body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text-main);
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
  }
  
  h1, h2, h3 {
    color: #fff;
    text-shadow: 0 0 10px #48cae4, 0 0 20px #48cae4, 2px 2px 2px rgba(0,0,0,0.5);
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 800;
  }
  
  /* 3. 卡片容器 (結霜風格) */
  .login-container, 
  .container, 
  .question-card, 
  .result-card,
  .modal-content,
  .edit-card,
  .entry-card {
    background: var(--frost-bg);
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    border: 3px solid var(--frost-border);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--ice-shadow), 0 0 20px rgba(72, 202, 228, 0.3);
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
  }
  
  /* 4. 按鈕風格 (冰磚) */
  button, .btn, .btn-login, .btn-start, .btn-google, .btn-submit, .action-btn, .tab-btn, .btn-action {
    background: linear-gradient(180deg, var(--ice-light) 0%, #0096c7 100%);
    color: var(--text-light);
    border: 2px solid #caf0f8;
    border-bottom-width: 5px;
    border-radius: 15px;
    padding: 8px 20px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 4px 10px rgba(0, 180, 216, 0.4);
  }
  
  button:hover, .btn:hover {
    background: linear-gradient(180deg, var(--ice-hover) 0%, var(--ice-light) 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 180, 216, 0.6), var(--ice-glow);
    border-color: #fff;
  }
  
  /* 特殊按鈕 */
  .btn-nav { background: linear-gradient(180deg, #74b9ff 0%, #0984e3 100%); }
  .btn-danger, .btn-ban, .logout-btn { background: linear-gradient(180deg, #ff6b6b 0%, #c0392b 100%); border-color: #ffcccc; }
  .btn-success, .btn-approve { background: linear-gradient(180deg, #55efc4 0%, #00b894 100%); border-color: #dff9fb; }
  
  /* 5. 輸入元件 */
  input, select, textarea, .editable-input {
    background-color: rgba(255, 255, 255, 0.8);
    border: 2px solid var(--ice-light);
    padding: 10px;
    border-radius: 10px;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box;
    color: var(--text-main);
  }
  input:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    background-color: #fff;
    box-shadow: var(--ice-glow);
  }
  
  /* =========================================
     6. Dashboard (成績總表) 專屬樣式
     ========================================= */
  /* 過濾器與選單排版 */
  .controls-area { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .controls-area select { max-width: 200px; }
  
  .filter-info { 
    background: rgba(255, 255, 255, 0.5); 
    border: 1px solid var(--ice-light);
    padding: 8px 15px; 
    border-radius: 10px; 
    color: var(--text-main); 
    font-weight: bold; 
    font-size: 0.9em; 
    display: flex; align-items: center; gap: 5px; 
  }
  
  /* 成績球 (Ice Balls) */
  .score-history { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .score-badge { 
    padding: 4px 8px; border-radius: 10px; font-size: 0.85em; 
    /* 小冰球外觀 */
    background: linear-gradient(135deg, #fff 0%, #e0f7fa 100%); 
    border: 1px solid var(--ice-light); 
    display: flex; flex-direction: column; align-items: center; min-width: 45px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  .score-val { font-weight: bold; color: var(--text-main); font-size: 1.1em; }
  .score-time { font-size: 0.65em; color: #555; margin-top: 2px; }
  
  /* 滿分與不及格特效 */
  .perfect { 
    border-color: var(--success); color: var(--success); 
    box-shadow: 0 0 10px rgba(46, 213, 115, 0.4); 
    background: #e8f5e9;
  }
  .fail { 
    border-color: var(--danger); color: var(--danger); 
    background: #ffebee;
  }
  
  /* 缺考標籤 */
  .status-missing {
    background: rgba(255, 255, 255, 0.5); 
    border: 1px dashed var(--danger); 
    color: var(--danger);
    padding: 6px 12px; border-radius: 20px; 
    font-weight: bold; font-size: 0.9em; 
    display: inline-flex; align-items: center; gap: 5px;
  }
  
  /* 讀取中文字 */
  .loading-text { color: var(--text-main); text-align: center; padding: 30px; font-style: italic; }
  
  
  /* =========================================
     7. admin.html 專屬功能樣式
     ========================================= */
  #security-curtain {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #001219; z-index: 999999;
    display: flex; justify-content: center; align-items: center;
    color: var(--ice-light); font-family: monospace; font-size: 1.5em;
    backdrop-filter: blur(15px);
  }
  
  .upload-box {
    background: rgba(255, 255, 255, 0.3); padding: 25px; border-radius: 15px;
    text-align: center; border: 3px dashed var(--ice-light); transition: 0.3s;
  }
  .upload-box:hover { background: rgba(255, 255, 255, 0.5); border-color: #fff; }
  
  .tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid rgba(255,255,255,0.3); padding-bottom: 10px; }
  .tab-btn { background: none; border: none; color: var(--text-main); box-shadow: none; border-radius: 0; padding: 10px 20px; }
  .tab-btn:hover { background: none; transform: none; box-shadow: none; color: var(--ice-light); }
  .tab-btn.active { color: var(--primary); border-bottom: 3px solid var(--primary); text-shadow: 0 0 10px var(--ice-light); }
  .tab-content { display: none; animation: fadeIn 0.5s; }
  .tab-content.active { display: block; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  
  /* 表格優化 */
  .user-table, .score-table {
    width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 20px;
    border-radius: 15px; overflow: hidden; border: 1px solid var(--ice-light);
  }
  .user-table th, .score-table th, .user-table td, .score-table td { padding: 12px; text-align: left; border-bottom: 1px solid rgba(0,0,0,0.1); vertical-align: middle; }
  .user-table th, .score-table th { background: rgba(0, 119, 182, 0.8); color: white; }
  .user-table tr:hover, .score-table tr:hover { background-color: rgba(255,255,255,0.5); }
  
  /* 狀態標籤 */
  .status-badge { padding: 4px 10px; border-radius: 20px; font-size: 0.8em; color: white; font-weight: bold; }
  .status-pending { background: #f39c12; }
  .status-active { background: #27ae60; }
  .status-banned { background: #c0392b; }
  
  /* 模態視窗 */
  .modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(13, 27, 42, 0.9); z-index: 1000;
    justify-content: center; align-items: center; backdrop-filter: blur(5px);
  }
  .modal-content { max-width: 500px; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  
  .unit-checkbox-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 300px; overflow-y: auto; }
  .unit-label { display: flex; align-items: center; cursor: pointer; padding: 8px; background: rgba(255,255,255,0.5); border-radius: 5px; transition: 0.2s; }
  .unit-label:hover { background: #fff; }
  
  .school-tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 10px; background: rgba(255,255,255,0.3); border-radius: 10px; min-height: 40px; }
  .school-tag { background: var(--mod-color); color: white; padding: 5px 12px; border-radius: 20px; font-size: 0.9em; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
  .school-tag i { cursor: pointer; transition: 0.2s; }
  .school-tag i:hover { color: #ffcccc; transform: scale(1.2); }
  
  .edit-card { border-left: 5px solid var(--primary); padding: 15px; margin-bottom: 10px; background: rgba(255,255,255,0.6); }
  .edit-card.grammar-card { border-left-color: #f1c40f; }
  
  /* =========================================
     8. 其他頁面通用
     ========================================= */
  .navbar, .header, .top-bar {
    width: 100%; max-width: 1200px; display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; background: rgba(2, 62, 138, 0.7); backdrop-filter: blur(5px);
    padding: 15px 25px; border-radius: 20px; border: 1px solid rgba(72, 202, 228, 0.5);
    box-shadow: var(--ice-shadow);
    /* ★★★ 加入這行，導覽列才不會衝破螢幕 ★★★ */
  box-sizing: border-box;
}
  



  
  .card-container { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }
  .entry-card { width: 260px; height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; }
  .entry-card:hover { transform: translateY(-10px) scale(1.05); border-color: #fff; box-shadow: 0 0 40px var(--ice-light); }
  .entry-card .icon-box { font-size: 5em; margin-bottom: 20px; color: var(--ice-light); text-shadow: var(--ice-glow); }
  .entry-card h2 { color: var(--text-main); text-shadow: none; font-size: 1.6em; }
  .entry-card p { color: #555; }
  
  .input-group { margin-bottom: 15px; text-align: left; }
  .input-group label { display: block; margin-bottom: 5px; color: var(--text-main); font-weight: bold; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); }
  .bottom-tabs { display: flex; justify-content: space-between; margin-top: 20px; border-top: 2px dashed rgba(72, 202, 228, 0.5); padding-top: 20px; }
  
  



  /* 測驗頁 */
  .score-circle {
    border-color: var(--ice-light); color: #0077b6; background: rgba(255,255,255,0.7);
    box-shadow: var(--ice-glow), inset 0 0 20px var(--ice-light);
  }
  .timer-badge { background: #fff; color: var(--text-main); border-color: var(--ice-light); box-shadow: var(--ice-glow); }
  .timer-badge.urgent { color: var(--danger); border-color: var(--danger); box-shadow: 0 0 15px var(--danger); }
  .q-sentence { text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }




  /* =========================================
   11. index.html (登入頁) 專用功能與修補
   ========================================= */

/* 功能性隱藏 (切換分頁用) - 絕對不能刪！ */
#register-fields, #forgot-fields { display: none; }

/* 機器人陷阱 (Honeypot) - 隱藏欄位 */
.hp-field { position: absolute; left: -9999px; opacity: 0; }

/* 錯誤訊息文字 */
.error-msg { 
  color: var(--danger); 
  font-size: 0.9em; 
  margin-top: 15px; 
  min-height: 20px; 
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* 增加可讀性 */
  font-weight: bold;
}

/* 登入框的呼吸動畫 (可選，讓登入框看起來更有生命力) */
@keyframes breath { 
  0%, 100% { border-color: rgba(72, 202, 228, 0.5); box-shadow: 0 0 20px rgba(72, 202, 228, 0.2); } 
  50% { border-color: #fff; box-shadow: 0 0 40px rgba(72, 202, 228, 0.6); } 
}
.login-container {
  animation: breath 4s ease-in-out infinite;
}



/* =========================================
   12. student_sub01.html (單字卡) 專用樣式
   ========================================= */

/* 過濾器容器 */
.filter-wrapper { width: 100%; max-width: 600px; margin-bottom: 20px; }

/* 單字卡舞台 (設定 3D 景深) */
#vocab-area { display: flex; flex-direction: column; align-items: center; perspective: 1000px; width: 100%; max-width: 600px; }
.vocab-scene { width: 100%; height: 400px; cursor: pointer; margin-bottom: 20px; }

/* 卡片內層 (負責旋轉的容器) */
.vocab-card-inner { 
  width: 100%; height: 100%; position: relative; 
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); /* 讓翻轉更滑順 */
  transform-style: preserve-3d; border-radius: 20px; 
}

/* ★★★ 新增片語樣式 ★★★ */
.vocab-phrase {
  margin-top: 10px;
  padding: 5px 10px;
  background: rgba(255, 215, 0, 0.15); /* 淡金色背景 */
  border-left: 3px solid #FFD700;
  color: #FFD700; /* 文字顏色 */
  font-weight: bold; /* 加粗會更清楚 (選用) */
  font-size: 0.9em;
  text-align: left;
  width: 90%;
  border-radius: 0 5px 5px 0;
}
.vocab-phrase .label {
  color: #FFD700;
  font-weight: bold;
  margin-right: 5px;
}


/* 翻轉狀態 */
.vocab-scene.is-flipped .vocab-card-inner { transform: rotateY(180deg); }

/* 卡片正反面通用設定 (冰原玻璃質感) */
.card-face { 
  position: absolute; width: 100%; height: 100%; 
  backface-visibility: hidden; /* 關鍵：藏起背面 */
  border-radius: 20px; padding: 30px; box-sizing: border-box; 
  
  /* 冰塊材質 */
  background: rgba(224, 247, 250, 0.9); 
  backdrop-filter: blur(10px);
  border: 3px solid var(--ice-light);
  
  display: flex; flex-direction: column; justify-content: center; align-items: center; 
  box-shadow: 0 10px 30px rgba(0, 180, 216, 0.3); text-align: center; 
}

/* 正面樣式 */
.card-face-front { 
  border-top: 8px solid var(--primary); /* 頂部加厚冰層 */
}

/* 背面樣式 (深海冰層，讓白色文字更清晰) */
.card-face-back { 
  border-bottom: 8px solid var(--primary); 
  transform: rotateY(180deg); 
  background: linear-gradient(135deg, #023e8a 0%, #0077b6 100%); 
  border-color: #00b4d8;
}

/* sub01文字樣式調整 */
.en-word { font-size: 2.1em; font-weight: 800; margin-bottom: 10px; color: var(--text-main); text-shadow: 0 2px 5px rgba(255,255,255,0.5); }
/* 修正版：優先使用系統支援度最好的字體 */
.kk-yin { 
  color: var(--primary); 
  font-size: 1.3em; 
  margin-bottom: 15px; 
  /* 改用這串字體設定，手機就能正常顯示了 */
  font-family: "Lucida Sans Unicode", "Arial Unicode MS", "Roboto", "Segoe UI", sans-serif;
  letter-spacing: 1px; /* 稍微拉開一點間距，閱讀更舒適 */
}
.pos-tag { background: var(--ice-light); color: white; padding: 2px 10px; border-radius: 10px; font-size: 0.9em; margin-bottom: 10px; }
.ex-en { font-style: italic; color: #555; margin-top: 10px; font-size: 1.1em; line-height: 1.4; }

/* SUB01背面文字 (白字) */
.card-face-back .ch-meaning { font-size: 1.2em; font-weight: bold; color: #fff; text-shadow: 0 0 10px var(--ice-light); }
.card-face-back .ex-ch { color: #caf0f8; font-size: 1.2em; line-height: 1.6; margin-top: 15px; border-top: 1px dashed rgba(255,255,255,0.3); padding-top: 15px; width: 100%; }

/* 操控按鈕區 */
.vocab-controls { display: flex; gap: 15px; width: 100%; max-width: 600px; }
.control-btn { 
  flex: 1; padding: 15px; border-radius: 15px; font-size: 1.1em; font-weight: bold; cursor: pointer; border: none; 
  /* 按鈕樣式繼承 */
  color: white; box-shadow: 0 5px 0 rgba(0,0,0,0.2); transition: 0.2s;
}
.control-btn:active { transform: translateY(3px); box-shadow: none; }

.btn-prev { background: linear-gradient(180deg, #95a5a6 0%, #7f8c8d 100%); border: 1px solid #bdc3c7; }
.btn-next { background: linear-gradient(180deg, var(--ice-light) 0%, #0096c7 100%); border: 1px solid #caf0f8; }



/* =========================================
   13. student_sub02.html (測驗) 專用樣式
   ========================================= */

/* 進度條 */
.progress-container { width: 100%; background: rgba(0,0,0,0.3); height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 15px; border: 1px solid rgba(255,255,255,0.1); }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary) 0%, var(--success) 100%); width: 0%; transition: width 0.5s ease; box-shadow: 0 0 10px rgba(0, 180, 216, 0.5); }

/* 狀態列 */
.status-bar { 
  display: flex; justify-content: space-between; align-items: center; 
  background: rgba(2, 62, 138, 0.4); padding: 10px 20px; border-radius: 15px; 
  border: 1px solid rgba(72, 202, 228, 0.3);
}

/* 填空題輸入框 (覆蓋全域 input 樣式，改回底線風格) */
input.answer-input { 
  border: none !important; 
  border-bottom: 3px solid var(--primary) !important; 
  background: transparent !important; 
  border-radius: 0 !important;
  color: var(--primary); 
  font-size: 1.5em; 
  text-align: center; 
  width: 250px; 
  padding: 5px; 
  box-shadow: none !important;
  letter-spacing: 2px;
  font-weight: bold;
}
input.answer-input::placeholder { color: rgba(255,255,255,0.3); font-size: 0.6em; font-weight: normal; letter-spacing: 0; }
input.answer-input:focus { border-bottom-color: var(--success) !important; }

/* 計時器動畫 */
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } }
.timer-badge.urgent { animation: pulse 1s infinite; background: var(--danger); color: white; border-color: white; }

/* 結果頁資訊網格 */
.result-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px;
  text-align: left; background: rgba(0,0,0,0.2); padding: 20px; border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.1);
}
.info-item { font-size: 0.9em; color: #caf0f8; }
.info-val { display: block; font-size: 1.2em; color: white; font-weight: bold; margin-top: 5px; text-shadow: 0 0 5px var(--ice-light); }

/* 題目文字優化 */
.q-sentence { font-size: 1.6em; line-height: 1.6; margin-bottom: 30px; font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }

/* 設定與測驗區塊佈局 */
#setup-area, #quiz-area { width: 100%; max-width: 800px; display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
#result-area { width: 100%; max-width: 600px; text-align: center; }
.result-header { font-size: 2em; font-weight: bold; margin-bottom: 20px; color: white; text-shadow: 0 0 15px var(--primary); letter-spacing: 3px; }


/* =========================================
   14. student_sub04.html (文法試煉場) 專用樣式
   ========================================= */

/* 1. 定義文法專用色 (金色/黃色，在冰原藍中很顯眼) */
:root {
    --grammar: #ffe600; /* 金幣黃 */
  }
  
  /* 2. 防複製 (禁止選取文字) */
  .no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* 3. 遊戲狀態列 (覆蓋通用設定) */
  .game-status-bar {
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 20px; color: var(--ice-light); font-size: 0.9em;
    background: rgba(0,0,0,0.3); padding: 10px 20px; border-radius: 15px;
    border: 1px solid var(--ice-dark);
  }
  .timer-container { 
    flex-grow: 1; margin: 0 15px; background: rgba(255,255,255,0.1); 
    height: 8px; border-radius: 4px; overflow: hidden; 
  }
  .timer-bar { 
    height: 100%; background: var(--grammar); /* 金色計時條 */
    width: 100%; transition: width 1s linear; box-shadow: 0 0 10px var(--grammar);
  }
  .timer-text { font-weight: bold; color: var(--grammar); width: 40px; text-align: right; }
  .timer-text.urgent { color: var(--danger); animation: pulse 0.5s infinite alternate; }
  
  /* 4. 題目卡片 (繼承通用卡片，但加入翻轉功能) */
  .single-quiz-card {
    background: var(--frost-bg); backdrop-filter: blur(10px);
    border: 3px solid var(--ice-light); border-radius: 20px; padding: 40px;
    box-shadow: var(--ice-shadow);
    min-height: 350px; display: flex; flex-direction: column; justify-content: center;
    transition: transform 0.5s;
  }
  
  /* 翻轉動畫 */
  .card-flip-out { transform: rotateY(-90deg); opacity: 0.5; }
  .card-flip-in { animation: flipIn 0.5s forwards; }
  @keyframes flipIn { from { transform: rotateY(90deg); opacity: 0.5; } to { transform: rotateY(0); opacity: 1; } }
  
  /* 題目文字 */
  .quiz-question { font-size: 1.5em; margin-bottom: 30px; line-height: 1.6; text-align: center; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
  .quiz-question span { border-bottom: 3px solid var(--grammar); display: inline-block; min-width: 60px; text-align: center; color: var(--grammar); }
  
  /* 5. 選項按鈕 (冰磚風格但針對選項優化) */
  .quiz-options { display: grid; gap: 15px; }
  .quiz-btn {
    background: rgba(255,255,255,0.1); 
    border: 2px solid var(--ice-light);
    color: #fff; padding: 15px; border-radius: 12px; cursor: pointer;
    font-size: 1.1em; transition: 0.2s; text-align: left;
    display: block; width: 100%; /* 強制滿寬 */
  }
  .quiz-btn:hover { 
    background: rgba(255,255,255,0.3); 
    transform: translateX(5px); /* 選項懸停時向右滑動 */
  }
  
  /* 答題回饋狀態 */
  .quiz-btn.feedback-correct { 
    background: rgba(46, 213, 115, 0.3); border-color: var(--success); color: #fff; 
    box-shadow: 0 0 15px var(--success);
  }
  .quiz-btn.feedback-wrong { 
    background: rgba(255, 71, 87, 0.3); border-color: var(--danger); color: #fff; 
    box-shadow: 0 0 15px var(--danger);
  }
  .quiz-btn.feedback-timeout { border-color: #666; color: #888; opacity: 0.6; } 
 
  

  
/* =========================================
   共用元件：結算分數圓環 (毛玻璃 + 旋轉漸層環)
   ========================================= */


   @keyframes spin-border {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  /* 1. 容器主體 (負責對齊文字，不放背景) */
  .score-circle {
    position: relative;
    width: 160px;
    height: 160px;
    
 /* ★★★ 強制主體為圓形，並清除任何殘留的矩形光暈 ★★★ */
 border-radius: 50% !important; 
 box-shadow: none !important;   
 
 /* 移除原本的背景和毛玻璃，把它們交給 ::after */
 background: transparent !important;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
    
    /* 確保文字在最上層 */
    z-index: 1; 
  }
  
  /* 2. 底層：旋轉的漸層大圓盤 (比本體大 10px) */
  .score-circle::before {
    content: '';
    position: absolute;
    inset: -10px; /* 往外擴張，形成 10px 厚度的邊框感 */
    border-radius: 50%;
    z-index: -2;  /* 放在最底層 */
    
    background: conic-gradient(
      from 0deg,
      #66fcf1, #00a8ff, #f7d716, #00a8ff, #66fcf1
    );
    animation: spin-border 10s linear infinite;
    
    /* 外圍的發光陰影放在這裡 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(102, 252, 241, 0.3);
  }
  
  /* 3. 中層：深灰毛玻璃小圓盤 (剛好蓋住中間，只露出邊緣) */
  .score-circle::after {
    content: '';
    position: absolute;
    inset: 0; /* 剛好 160x160 大小 */
    border-radius: 50%;
    z-index: -1; /* 蓋在漸層盤上面，但在文字下面 */
    
    /* 深灰微透明 + 毛玻璃效果 */
    background: rgba(40, 44, 51, 0.85); /* 稍微調深一點點，避免後面的光透太多出來 */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* 內部的立體感陰影 */
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05);
  }
  
  /* === 數字與文字樣式 (維持不變) === */
  .score-number {
    font-size: 4em;
    font-weight: bold;
    color: #f7d716;
    font-family: 'Share Tech Mono', sans-serif;
    line-height: 1;
    margin-top: 5px;
    text-shadow: 0 0 15px rgba(247, 215, 22, 0.4);
  }
  
  .score-label {
    font-size: 1.2em;
    color: #fff;
    margin-top: 5px;
    opacity: 0.9;
  }

/* =========================================
   共用元件：結算分數圓環 (動態立體版)語法結束
   ========================================= */


  .user-info-display { 
    margin-bottom: 30px; font-size: 1.1em; padding: 15px; 
    background: rgba(0, 0, 0, 0.591); border-radius: 10px; 
    color: #ded9d9; border: 1px solid var(--ice-light);
  }
  
  .result-stats { display: flex; justify-content: space-around; margin-bottom: 20px; font-size: 1.2em; font-weight: bold; }
  
  /* 錯題解析卡片 (修復 JS 產生的 class) */
  .review-card { 
    text-align: left; 
    background: rgba(44, 1, 4, 0.954); 
    border-left: 4px solid var(--danger); 
    padding: 15px; margin-bottom: 10px; border-radius: 5px; 
    border: 1px solid rgba(255,71,87,0.3);
  }
  .review-exp { 
    margin-top: 10px; padding-top: 10px; 
    border-top: 1px dashed rgba(255,255,255,0.2); 
    color: #ddd; font-size: 0.95em; 
  }
  .retry-btn { 
    background: linear-gradient(180deg, var(--grammar) 0%, #ff9f43 100%);
    color: #000; border: none; padding: 15px 40px;
    font-size: 1.2em; font-weight: bold; border-radius: 50px; 
    cursor: pointer; margin-top: 30px;
    box-shadow: 0 0 20px rgba(255, 230, 0, 0.4); 
  }
  .retry-btn:hover { transform: scale(1.05); filter: brightness(1.1); }


  /* =========================================
   15. student.html (主選單) 專用配色
   ========================================= */

/* 1. 定義各區塊專屬色 */
:root {
    --c-vocab: #00fff2;      /* 單字學習 - 青色 */
    --c-vocab-test: #2ed573; /* 單字測驗 - 綠色 */
    --c-grammar: #ff6b81;    /* 文法學習 - 粉紅 */
    --c-grammar-quiz: #ffe600; /* 文法測驗 - 金黃 */
  }
  
  /* 2. 個別卡片配色 (覆蓋預設冰藍色) */
  
  /* 單字自學館 */
  .card-vocab { border-left: 5px solid var(--c-vocab); }
  .card-vocab i, .card-vocab h2 { color: #00b4d8; text-shadow: 0 0 5px var(--c-vocab); }
  .card-vocab:hover { border-color: var(--c-vocab); box-shadow: 0 0 20px var(--c-vocab); }
  
  /* 單字技擊館 */
  .card-vocab-test { border-left: 5px solid var(--c-vocab-test); }
  .card-vocab-test i, .card-vocab-test h2 { color: var(--c-vocab-test); text-shadow: 0 0 5px rgba(46, 213, 115, 0.5); }
  .card-vocab-test:hover { border-color: var(--c-vocab-test); box-shadow: 0 0 20px var(--c-vocab-test); }
  
  /* 文法研習坊 */
  .card-grammar-learn { border-left: 5px solid var(--c-grammar); }
  .card-grammar-learn i, .card-grammar-learn h2 { color: var(--c-grammar); text-shadow: 0 0 5px rgba(255, 107, 129, 0.5); }
  .card-grammar-learn:hover { border-color: var(--c-grammar); box-shadow: 0 0 20px var(--c-grammar); }
  
  /* 文法試煉場 */
  .card-grammar-quiz { border-left: 5px solid var(--c-grammar-quiz); }
  .card-grammar-quiz i, .card-grammar-quiz h2 { color: var(--c-grammar-quiz); text-shadow: 0 0 5px rgba(255, 230, 0, 0.5); }
  .card-grammar-quiz:hover { border-color: var(--c-grammar-quiz); box-shadow: 0 0 20px var(--c-grammar-quiz); }
  
  /* 3. 頂部按鈕微調 (讓它在冰原背景更清楚) */
  .btn-action { 
    background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.3); color: #fff; 
    padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: 0.3s; 
    font-size: 0.9em; display: flex; align-items: center; gap: 5px;
  }
  .btn-action:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
  
  .btn-logout { border-color: var(--danger); color: var(--danger); }
  .btn-logout:hover { background: var(--danger); color: white; }
  
  .btn-mod-switch { border-color: var(--success); color: var(--success); }
  .btn-mod-switch:hover { background: var(--success); color: white; }


/* =========================================
   17. 底部版權宣告 (Windows 工作列風格)
   ========================================= */
   .copyright {
    /* 1. 位置定位：固定在螢幕最底部 */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;  /* 寬度佔滿 */
    z-index: 9999; /* 確保在一般內容之上，但在雪花之下(視需求) */
    
    /* 2. 排版設定 */
    text-align: center;
    padding: 12px 0;
    margin: 0;
    
    /* 3. 視覺風格：深藍色漸層 (Windows Taskbar 風格) */
    background: linear-gradient(180deg, rgba(27, 58, 87, 0.95) 0%, rgba(10, 20, 35, 1) 100%);
    
    /* 4. 邊框與材質細節 */
    border-top: 1px solid rgba(72, 202, 228, 0.3); /* 頂部做一點冰藍色反光 */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5); /* 往上的陰影，增加立體感 */
    backdrop-filter: blur(5px); /* 毛玻璃效果，讓背景隱約透出 */
    
    /* 5. 文字設定 */
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85em;
    font-weight: 400;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  }
  
  /* 為了避免內容被底部的工作列擋住，給 body 加一點底部留白 */
  body {
    padding-bottom: 80px; /* 預留空間給 footer */
  }