/*
 * style.css - 样式文件（修复：恢复原始布局，缩小间距，添加交互）
 */

/* =========================================================================
 * 1. 基础变量 (Colors and Themes)
 * ========================================================================= */
:root{
  --primary: #1e90ff;
  --primary-dark: #0b63d6;
  --yellow: #f6c85f;
  --green: #27ae60;
  --red: #e74c3c;
  --started-color: #ffc107; 
  --answer-hint-color: var(--yellow);

  --text: #111;
  --bg: #f5f9ff;
  --card: #ffffff;
  --border: #e5e5e5;
  --shadow-color: rgba(0,0,0,0.08);

  --nav-correct: var(--green);
  --nav-wrong: var(--red);
  --nav-current: var(--primary); 
  --nav-started: var(--started-color); 
  --nav-unsubmitted: rgba(0,0,0,0.2);
  --font-size-base: 16px; 
}

/* 深色模式（优化对比度） */
.dark{
  --bg: #0d1117;
  --card: #161b22;
  --text: #e6edf3;
  --border: rgba(255,255,255,0.15); 
  --shadow-color: rgba(255,255,255,0.08);
  --nav-unsubmitted: rgba(255,255,255,0.25); 
  --started-color: #9b7201; 
}

/* =========================================================================
 * 2. 全局和布局样式
 * ========================================================================= */
*{box-sizing:border-box}
body{
  margin:0;
  padding:20px; 
  font-family:system-ui,-apple-system,Segoe UI,Roboto;
  font-size: var(--font-size-base); 
  background:var(--bg);
  color:var(--text);
  display:flex;
  justify-content:center;
}

.container{
  width:920px;
  max-width:96vw;
  background:var(--card);
  padding:25px; 
  border-radius:12px;
  border-top:6px solid var(--primary-dark);
  box-shadow:0 8px 30px var(--shadow-color);
}

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

.header-title-group{
  display: flex;
  align-items: center; 
  gap: 12px; 
}

.title{margin:0; font-size: 1.5em;}

.header-logo{
  height: 1.2em; /* 恢复原始 Logo 高度 */
  object-fit: contain; 
  max-width: 50px; /* 恢复原始 Logo 宽度 */
}

.header-controls {
    display: flex;
    gap: 6px; /* 缩小顶部按钮间距 */
    align-items: center;
    flex-wrap: wrap; 
}

.search-input{
  padding:8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  min-width:180px; 
  flex-grow: 1; 
}

/* 颜色选择器样式：圆角正方形 */
.color-picker-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    padding: 0;
    border-radius: 8px; 
    cursor: pointer;
    overflow: hidden;
    background: transparent;
    flex-shrink: 0;
}
.color-picker-btn::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker-btn::-webkit-color-swatch { 
    border: none; 
    border-radius: 6px; 
    margin: 3px;
}
.color-picker-btn::-moz-color-swatch {
    border: none;
    border-radius: 6px;
}


.controls-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 8px; /* 缩小水平间距 (18px -> 8px) */
  margin-top:10px;
  margin-bottom: 20px; 
  align-items:center;
}

.controls-row label.control-label{
  flex-shrink:0;
  display: block; 
}

.select{
  padding:8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  flex-grow: 1; 
  min-width: 150px; 
}

.btn{
  background:var(--primary);
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:600;
  transition:all 0.15s ease-in-out;
  flex-shrink:0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 增加默认阴影 */
}
/* 🚨 修复: 增加按钮交互 */
.btn:hover:not(:disabled) {
    background: var(--primary-dark);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}
.btn:active:not(:disabled) {
    background: var(--primary-dark);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transform: translateY(1px);
}


/* 导航/统计/主题按钮样式 (ghost) */
.btn.ghost{
  background:rgba(0,0,0,0.03); 
  color:var(--primary-dark); 
  border:1px solid var(--border); 
  height: 38px;
  box-shadow: none; /* Ghost 按钮无阴影 */
}
.btn.ghost.nav-btn, .btn.ghost.stats-btn, .btn.ghost#themeToggle {
    min-width: 50px;
    padding: 0 10px;
}
/* 🚨 修复: 增加 Ghost 按钮交互 */
.btn.ghost:hover:not(:disabled) {
    background: rgba(0,0,0,0.06);
    transform: none; /* Ghost 按钮不移动 */
    box-shadow: none;
}
.dark .btn.ghost:hover:not(:disabled) {
    background: rgba(255,255,255,0.1);
}
.btn.ghost:active:not(:disabled) {
    background: rgba(0,0,0,0.1);
    transform: scale(0.98); /* 缩小反馈 */
    box-shadow: none;
}


.btn.small-btn {
    padding: 8px 12px;
    font-size: 14px;
}

.dark .btn.ghost{
  background:rgba(255,255,255,0.06); 
}

.btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
  box-shadow: none; /* 禁用时无阴影 */
  transform: none; /* 禁用时无位移 */
}

.stem{
  margin-top: 15px; 
}

.options{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.opt{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  cursor:pointer;
}

/* 题目选项按钮样式 */
.btn-circle,.btn-square{
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  border:2px solid var(--primary); 
  color:var(--primary);
  background-color: var(--card); 
  flex-shrink:0;
  transition: all 0.15s ease-in-out;
}

.btn-circle{border-radius:50%;}
.btn-square{border-radius:8px;}

/* 题目选项状态 */
.opt:hover .btn-circle, .opt:hover .btn-square {
    background-color: var(--primary-dark);
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.opt.state-selected .btn-circle, .opt.state-selected .btn-square {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.opt.state-correct .btn-circle, .opt.state-correct .btn-square {
    background: var(--green);
    color: white;
    border-color: var(--green);
}
.opt.state-wrong .btn-circle, .opt.state-wrong .btn-square {
    background: var(--red);
    color: white;
    border-color: var(--red);
}
.opt.state-answer .btn-circle, .opt.state-answer .btn-square {
    background: var(--green);
    color: white;
    border-color: var(--green);
}

.blank-input{
  width:100%;
  padding:12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
}

/* =========================================================================
 * 3. 模态框和倒计时样式
 * ========================================================================= */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6); 
  display:none; 
  align-items:center;
  justify-content:center;
  z-index:999;
  backdrop-filter: blur(3px); 
}
.modal[aria-hidden="false"]{
    display:flex;
}

.modal-content{
  background:var(--card);
  padding:18px;
  border-radius:12px;
  width:90%;
  max-width:720px;
  border:1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.modal[aria-hidden="false"] .modal-content {
    transform: scale(1);
    opacity: 1;
}

.modal-nav .modal-content{
  max-width:96vw;
  width:800px;
}

.close{
  float:right;
  background:var(--primary); 
  color:white; 
  border:none;
  font-size:24px;
  line-height: 1; 
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor:pointer;
  opacity: 0.8;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: -10px -10px 0 0; 
}
.close:hover {
    opacity: 1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* --- 倒计时框位置: 右上角 --- */
.countdown-box {
    position: fixed;
    top: 20px;
    right: 20px;
    left: auto; 
    transform: none; 
    width: 60px; 
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary);
    color: white;
    font-size: 30px; 
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    opacity: 0.95;
}
.countdown-box[aria-hidden="true"] {
    display: none;
}

/* --- 加载指示器 (Loading Indicator) --- */
.loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}

.loading-indicator[aria-hidden="true"] {
    display: none !important; 
    opacity: 0;
    pointer-events: none;
}

/* =========================================================================
 * 4. 底部操作行 和 导航面板 (修复)
 * ========================================================================= */

/* 桌面端 .action-row 布局 */
.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px; /* 缩小底部按钮间距 */
  margin-top: 20px;
}
.nav-count {
  margin-left: auto; /* 将题号推到最右边 */
  font-weight: 600;
  color: var(--primary);
}


.nav-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 10px;
  margin-top: 15px;
  max-height: 70vh;
  overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px; 
    width: 100%;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px; 
    transition: all 0.15s;
    
    /* 默认状态 (未答题) */
    background-color: var(--card);
    border: 1px solid var(--border); 
    color: var(--text);
    opacity: 0.9;
}
.nav-item:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.05);
}
.dark .nav-item:hover {
    background-color: rgba(255,255,255,0.05);
}


/* 导航按钮状态颜色 (匹配 stats.js 中的类名: current, correct, wrong, started) */

.nav-item.current { 
    background-color: var(--nav-current); 
    color: white;
    border: 2px solid var(--nav-current); 
    opacity: 1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.nav-item.correct { 
    background-color: var(--nav-correct);
    color: white;
    border-color: var(--nav-correct);
    opacity: 1;
}

.nav-item.wrong { 
    background-color: var(--nav-wrong);
    color: white;
    border-color: var(--nav-wrong);
    opacity: 1;
}

.nav-item.started { 
    background-color: var(--nav-started);
    color: var(--text); 
    border-color: var(--nav-started);
    opacity: 1;
}

/* =========================================================================
 * 5. 响应式优化 (Media Queries)
 * ========================================================================= */
@media (max-width:768px){
    /* 调整倒计时在移动端的位置 */
    .countdown-box {
        top: 10px;
        right: 10px;
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

  :root {
    --font-size-base: 15px; 
  }
  body{
    padding: 10px;
  }
  .container{
    padding: 15px;
  }
  
  .title{
      font-size: 1.2em; 
  }

  .header{
    flex-direction:column;
    align-items:flex-start;
    gap: 10px; 
  }
  
  .header-title-group{
    width:100%;
  }
  .header-title-group .header-logo {
        height: 1.1em;
        width: 1.1em;
        max-width: 30px; 
  }
  
  .header-controls{
      width: 100%;
      display: grid;
      grid-template-columns: 1fr repeat(4, auto); 
      gap: 5px;
      padding-top: 5px; 
  }

  .search-input{
      grid-column: 1 / 6; 
      order: 1;
      min-width: unset;
  }
  
  .btn.ghost, .color-picker-btn {
      height: 38px;
      padding: 0 4px; 
      font-size: 14px;
      min-width: 0; 
  }
  .nav-btn { grid-column: 1 / 2; }
  .stats-btn { grid-column: 2 / 3; }
  #themeToggle { grid-column: 3 / 4; }
  .color-picker-btn { 
      grid-column: 5 / 6; 
      width: 38px; 
      height: 38px;
  }
  
  .controls-row{
    gap: 8px; /* 确保移动端间距也缩小 */
    justify-content: flex-start; 
  }
  
  .controls-row label.control-label{
      display: none; 
  }

  .controls-row #quizSelect{
    flex-basis: 100%; 
    order: 3;
  }
  
  .controls-row #modeSelect{
    order: 4;
    flex-grow: 1;
    min-width: 100px;
  }
  .controls-row #loadBtn{
    order: 5;
    flex-grow: 1;
    min-width: 100px;
  }
  
  .controls-row #toggleSelectAllBtn, .controls-row #shareBtn{
      order: 1;
      flex-grow: 1;
      min-width: 120px;
  }
  .controls-row #shareBtn {
      order: 2;
  }

  /* 提交/导航按钮行 */
  .action-row{
    margin-top: 15px;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px; /* 确保移动端按钮间有空隙 */
  }
  .action-row .btn {
      flex-basis: 100%; 
      margin-bottom: 0; /* 移除旧的 margin-bottom */
      padding: 12px 0;
      font-size: 16px;
  }
  .action-row .btn:first-child {
      margin-top: 5px;
  }
  .nav-count{
      flex-basis: 100%;
      text-align: center;
      margin-left: 0;
      order: 10;
      margin-top: 10px;
  }
}

/* 考试大倒计时 */
.countdown-box.exam {
    background: #e74c3c;
    font-size: 22px;
    width: 100px;
    height: 56px;
    top: 15px;
    right: 15px;
    border: 3px solid #fff;
}

/* 移动端固定底部操作栏 */
@media (max-width: 768px) {
    .action-row {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--card);
        padding: 12px 10px;
        border-top: 1px solid var(--border);
        border-radius: 0;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
        z-index: 200;
        gap: 10px;
    }
    .container { padding-bottom: 90px; }
}

/* 标记题目样式 */
.nav-item.flagged { background:#f39c12 !important; color:#fff !important; border-color:#e67e22 !important; }
.opt.flagged { border-left: 5px solid #f39c12; }

/* 提交后禁用选项点击 */
.options.submitted .opt { pointer-events:none; opacity:0.65; cursor:not-allowed; }

/* 深色模式按钮优化 */
.dark .btn.ghost:hover { background:rgba(255,255,255,0.12) !important; }