/* =====================================================================
   styles.css(整理版)
   结构:① 变量/基础 ② 顶部导航 ③ 题目区/选项 ④ 侧栏/答题卡
        ⑤ 目录页/卡片 ⑥ ★微调区(永远保持在文件最末尾)
   ===================================================================== */

/* ---------- ① 变量 & 基础 ---------- */
:root { --primary-color:#1890ff; --success-color:#52c41a; --error-color:#f5222d; --warning-color:#faad14; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,sans-serif; background:#f4f6f8; color:#333; line-height:1.6; height:100vh; display:flex; flex-direction:column; overflow:hidden; }

/* ---------- ② 顶部级联导航 ---------- */
.app-header { background:#fff; padding:10px 24px 8px; box-shadow:0 2px 8px rgba(0,0,0,.05); flex-shrink:0; }
.top-nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; position:relative; z-index:100; }
.crumb { position:relative; }
.crumb-btn { display:inline-flex; align-items:center; justify-content:space-between; gap:8px; min-width:130px; padding:8px 14px; border-radius:8px; background:#f5f7fa; border:1px solid #e5e9f0; font-size:14px; cursor:pointer; transition:.2s; }
.crumb-btn:hover:not(:disabled) { border-color:var(--primary-color); color:var(--primary-color); }
.crumb.open .crumb-btn { border-color:var(--primary-color); color:var(--primary-color); background:#e6f7ff; }
.crumb.disabled .crumb-btn { opacity:.45; cursor:not-allowed; }
.crumb-btn .caret { border:4px solid transparent; border-top-color:#999; margin-top:3px; }
.crumb-sep { color:#ccc; font-size:16px; }
/* 面板:纯白不透明、压住下层;展开的格子整体抬到最上层 */
.crumb-panel { display:none; position:absolute; left:0; top:calc(100% + 6px); background:#fff; border:1px solid #e5e9f0; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:14px; gap:20px; max-width:90vw; max-height:70vh; overflow:auto; flex-wrap:wrap; z-index:1050; }
.crumb.open { z-index:1050; }
.crumb.open .crumb-panel { display:flex; }
.crumb-panel.to-right { left:calc(100% + 8px); top:0; }      /* 默认向右展开 */
.crumb-panel.drop-down { left:0; top:calc(100% + 6px); }     /* 右侧溢出时改向下 */
.panel-col { min-width:170px; max-height:400px; overflow-y:auto; }
.col-title { font-size:12px; color:#999; font-weight:700; margin-bottom:6px; position:sticky; top:0; background:#fff; }
.col-item { padding:7px 10px; border-radius:6px; cursor:pointer; font-size:14px; white-space:nowrap; transition:.15s; }
.col-item:hover { background:#f0f7ff; color:var(--primary-color); }
.col-item.active { background:var(--primary-color); color:#fff; }
.col-item.muted, .col-item.loading { color:#bbb; cursor:default; }
.col-item.muted:hover, .col-item.loading:hover { background:none; color:#bbb; }
.btn-start { margin-left:8px; background:linear-gradient(135deg,#1890ff,#36cfcf); color:#fff; border:none; border-radius:8px; padding:9px 20px; font-size:14px; cursor:pointer; transition:.2s; }
.btn-start:hover:not(:disabled) { filter:brightness(1.08); }
.btn-start:disabled { opacity:.4; cursor:not-allowed; }
.header-right { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:6px; }
.header-right h1 { font-size:17px; }
.global-stats strong { color:var(--primary-color); margin:0 2px; }

/* ---------- ③ 主区 / 题目 / 选项 ---------- */
.main-container { display:flex; flex:1; padding:16px 20px; gap:20px; overflow:hidden; }
.question-area { flex:1; display:flex; flex-direction:column; background:#fff; border-radius:8px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.05); overflow-y:auto; }
.question-card { flex:1; }
.q-title { font-size:20px; font-weight:bold; margin-bottom:15px; display:flex; align-items:baseline; gap:8px; }
.q-tag { font-size:12px; padding:2px 6px; border-radius:4px; color:#fff; flex-shrink:0; }
.tag-single { background:var(--primary-color); }
.tag-multiple { background:#722ed1; }
.tag-true_false { background:var(--warning-color); }
.case-bg { background:#e6f7ff; padding:12px; border-radius:6px; margin-bottom:15px; font-size:14px; color:#0050b3; border-left:3px solid var(--primary-color); }
.options-list { list-style:none; display:grid; gap:10px; }

/* 选项容器:对错状态全靠这里变色(标识本身不变色,样式在末尾微调区) */
.option-item { padding:12px 15px; border:1px solid #d9d9d9; border-radius:6px; cursor:pointer; transition:all .2s; user-select:none; display:flex; align-items:flex-start; gap:10px; }
.option-item:hover:not(.disabled) { border-color:var(--primary-color); color:var(--primary-color); }
.option-item.selected { border-color:var(--primary-color); background:#e6f7ff; }
.option-item.disabled { pointer-events:none; opacity:.85; cursor:default; }
.option-item.right-answer { border-color:var(--success-color); background:#f6ffed; color:var(--success-color); }
.option-item.wrong-answer { border-color:var(--error-color); background:#fff2f0; color:var(--error-color); border-width:2px; font-weight:bold; }
.option-item.missed-answer { border:2px dashed var(--success-color); background:#f6ffed; color:var(--success-color); border-width:2px; font-weight:bold; }

/* 标识基础形状:18px 圆/方框,白底灰边(选中样式在末尾微调区) */
.opt-marker { flex:0 0 auto; width:18px; height:18px; border:2px solid #bfbfbf; background:#fff; position:relative; transition:all .15s; }
.opt-marker.radio { border-radius:50%; }     /* 单选/判断:圆形 */
.opt-marker.checkbox { border-radius:4px; }  /* 多选:方形 */

.answer-hint { margin-top:15px; font-size:16px; font-weight:bold; min-height:24px; }
.submit-btn { margin-top:10px; padding:8px 20px; background:#722ed1; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:14px; }
.submit-btn:disabled { opacity:.5; cursor:not-allowed; }
.controls { display:flex; align-items:center; gap:10px; margin-top:20px; padding-top:15px; border-top:1px dashed #eee; flex-wrap:wrap; flex-shrink:0; }
button { font-family:inherit; padding:8px 16px; border:none; border-radius:6px; cursor:pointer; font-size:14px; transition:opacity .2s; }
button:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--primary-color); color:#fff; }
.btn-outline { background:#fff; border:1px solid #d9d9d9; color:#333; }
.btn-warning { background:var(--warning-color); color:#fff; }
.auto-jump-controls { display:flex; align-items:center; gap:6px; margin-left:auto; font-size:13px; color:#666; }
.auto-jump-controls input[type="number"] { width:50px; padding:4px; border:1px solid #d9d9d9; border-radius:4px; text-align:center; }

/* ---------- ④ 侧栏 / 答题卡 / 错题集 ---------- */
.sidebar { width:320px; display:flex; flex-direction:column; gap:15px; flex-shrink:0; }
.answer-sheet, .wrong-list { background:#fff; border-radius:8px; padding:15px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.answer-sheet { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.wrong-list { flex-shrink:0; display:flex; flex-direction:column; }
.sheet-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; border-bottom:1px solid #eee; padding-bottom:8px; }
.sheet-header h3 { font-size:15px; color:#333; margin:0; }
.quick-nav { display:flex; gap:6px; }
.nav-btn { font-size:12px; padding:2px 8px; border:1px solid var(--primary-color); color:var(--primary-color); background:#fff; border-radius:4px; cursor:pointer; transition:.2s; }
.nav-btn:hover { background:var(--primary-color); color:#fff; }
.sheet-container { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.sheet-group-title { font-size:13px; color:#999; font-weight:bold; margin-top:5px; display:flex; align-items:center; gap:6px; }
.sheet-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.sheet-item { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border:1px solid #d9d9d9; border-radius:4px; font-size:12px; cursor:pointer; transition:.2s; }
.sheet-item:hover { border-color:var(--primary-color); }
.sheet-item.answered { background:#e6f7ff; border-color:var(--primary-color); color:var(--primary-color); }
.sheet-item.correct { background:#f6ffed; border-color:var(--success-color); color:var(--success-color); }
.sheet-item.wrong { background:#fff2f0; border-color:var(--error-color); color:var(--error-color); }
.wrong-container { max-height:calc(1.8em*6 + 30px); overflow-y:auto; display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.wrong-item { padding:4px 0; text-align:center; font-size:12px; background:#fff2f0; border-radius:4px; color:var(--error-color); cursor:pointer; border:1px solid transparent; }
.wrong-item:hover { border-color:var(--error-color); }
.toggle-arrow { display:inline-block; width:16px; font-size:12px; }

/* ---------- 提示 / 解析 / 其他 ---------- */
.answer-analysis { margin-top:15px; padding:12px 15px; background:#f0f9ff; border-left:4px solid #1890ff; border-radius:4px; font-size:20px; line-height:1.6; color:#333; }
.answer-analysis strong { color:#1890ff; margin-right:5px; }
.empty-tip { color:#999; text-align:center; padding:60px 20px; font-size:15px; }
.mark-svg { width:1.25em; height:1.25em; vertical-align:-0.25em; }

/* ---------- ⑤ nginx 目录页 + 门户 ---------- */
body.listing-page, body.portal { height:auto; min-height:100vh; overflow:auto; display:block; }
.ai-page { max-width:1100px; margin:0 auto; padding:24px; }
.ai-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.ai-header h1 { font-size:22px; }
.ai-up { color:var(--primary-color); text-decoration:none; padding:6px 12px; border:1px solid var(--primary-color); border-radius:6px; }
.ai-up:hover { background:var(--primary-color); color:#fff; }
.ai-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.portal-header { display:flex; justify-content:space-between; align-items:center; max-width:1100px; margin:0 auto; padding:24px 24px 0; }
.portal-header h1 { font-size:24px; }
.portal-link { color:var(--primary-color); text-decoration:none; }

/* 卡片基础外观 */
.card { background:#fff; border-radius:12px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.06); transition:.2s; border:1px solid transparent; }
.card:hover { transform:translateY(-3px); border-color:var(--primary-color); box-shadow:0 6px 16px rgba(24,144,255,.15); }

/* 卡片横向布局:图标与文字同一行(首页/目录页通用,唯一版本) */
.card { display:flex; align-items:center; gap:12px; text-align:left; padding:14px 16px; }
.card .card-icon { font-size:26px; line-height:1; display:block; flex:0 0 auto; }
.card .card-name { margin:0; flex:1 1 auto; min-width:0; }
.card .card-sub { margin:0 0 0 auto; font-size:12px; color:#999; flex:0 0 auto; }

/* 目录页:面包屑 / 分组标题 / 空提示 */
.ai-crumbs { font-size:14px; margin-bottom:18px; color:#666; }
.ai-crumbs a { color:var(--primary-color); text-decoration:none; }
.ai-crumbs a:hover { text-decoration:underline; }
.ai-crumbs span { margin:0 6px; color:#ccc; }
.ai-section { font-size:13px; color:#999; font-weight:700; margin:18px 0 10px; }
.ai-empty { color:#999; text-align:center; padding:80px 0; font-size:15px; }

/* =====================================================================
   ⑥ ★★★ 微调区 —— 调"选项圆圈/方框/钩"只看这一段,永远放文件最末尾 ★★★
   ===================================================================== */

/* 【微调1】标识与选项第一行文字的垂直位置:数值越大越往下(当前 7px) */
.opt-marker { margin-top:7px !important; }

/* 【微调2】单选/判断 选中:白底 + 蓝色圆环 + 中心实心点 */
.option-item.selected .opt-marker.radio { background:#fff !important; border-color:var(--primary-color) !important; }
/* 中心点大小:width/height 两个数一起改(当前 8px) */
.option-item.selected .opt-marker.radio::after {
  content:''; position:absolute; left:50%; top:50%;
  width:8px; height:8px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--primary-color);
}

/* 【微调3】多选 选中:白底 + 蓝色方框 + 线条钩 */
.option-item.selected .opt-marker.checkbox { background:#fff !important; border-color:var(--primary-color) !important; }
/* 钩的上下位置:只改 calc 里的 -2px(-3px 更高 / -1px 更低 / 0px 正居中)
   钩的大小:width / height(当前 5px × 9px) */
.option-item.selected .opt-marker.checkbox::after {
  content:''; position:absolute; left:50%; top:50%;
  width:5px; height:9px;
  border:solid var(--primary-color); border-width:0 2px 2px 0;
  transform:translate(-50%, calc(-50% - 2px)) rotate(45deg);
}

/* =====================================================================
   ⑦ 手机适配区(合并最终版) —— 整段放 styles.css 最末尾
   ===================================================================== */

/* 抽屉按钮:桌面隐藏,窄屏显示 */
#btn-sheet { display:none; }

@media (max-width: 860px) {

  #btn-sheet { display:inline-block; }

  /* 允许整页滚动 */
  body { height:auto; min-height:100vh; overflow:auto; }

  /* 主区改为上下堆叠 */
  .main-container { display:block; overflow:visible; padding:10px 12px; }
  .question-area { overflow:visible; padding:14px; margin-bottom:12px; }

  /* 侧栏变成右侧抽屉 */
  .sidebar {
    position:fixed; top:0; right:0; z-index:2000;
    width:min(85vw, 320px); height:100vh; overflow-y:auto;
    background:#f4f6f8; padding:12px;
    transform:translateX(100%); transition:transform .25s ease;
    box-shadow:-4px 0 20px rgba(0,0,0,.15);
  }
  .sidebar.open { transform:translateX(0); }

  /* 顶部导航收紧 */
  .app-header { padding:8px 12px 6px; }
  .top-nav { gap:6px; }
  .crumb-btn { min-width:0; padding:7px 10px; font-size:13px; }
  .crumb-sep { display:none; }

  /* 级联面板近乎全屏 */
  .crumb-panel { max-width:calc(100vw - 24px); max-height:60vh; padding:10px; gap:12px; }
  .panel-col { min-width:130px; max-height:260px; }

  /* 答题卡/错题集网格 + 字号 */
  .sheet-grid { grid-template-columns:repeat(6,1fr); gap:5px; }
  .wrong-container { grid-template-columns:repeat(6,1fr); }
  .q-title { font-size:17px; }
  .answer-analysis { font-size:16px; }
  .answer-hint { font-size:15px; }
  .option-item { padding:12px 12px; }
}

@media (max-width: 480px) {
  .q-title { font-size:16px; flex-wrap:wrap; }
  .answer-analysis { font-size:15px; }
  .sheet-grid { grid-template-columns:repeat(5,1fr); }
  .wrong-container { grid-template-columns:repeat(5,1fr); }
  .option-item { padding:10px 10px; gap:8px; }
  .opt-marker { width:20px; height:20px; margin-top:3px !important; }
  .auto-jump-controls { margin-left:0; width:100%; }
  .header-right h1 { font-size:15px; }
}


/* =====================================================================
   ⑨ 导航防挤压:开始刷题永远第一行,三个下拉均分剩余空间
   ===================================================================== */
.top-nav { flex-wrap:nowrap; }
.crumb { min-width:0; flex:1 1 0; }              /* 三个下拉均分剩余空间 */
.crumb-btn { width:100%; max-width:none; min-width:0; }
#cl1, #cl2, #cl3 {
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.btn-start { flex:0 0 auto; margin-left:8px; position:relative; z-index:10; }



/* ---------- ⑤b 外置化补丁(原 list.js 内嵌迁移) ---------- */
.btn-quiz-home{display:block;width:100%;margin:0 0 18px 0;padding:14px 20px;border:none;border-radius:12px;cursor:pointer;font-family:inherit;background:linear-gradient(135deg,#1890ff,#36cfcf);color:#fff;font-size:16px;font-weight:700;box-shadow:0 4px 14px rgba(24,144,255,.25);transition:.2s;}
.btn-quiz-home:hover{filter:brightness(1.08);transform:translateY(-2px);}
.btn-quiz-home:active{transform:translateY(0);}

/* 网格改 auto-fit:卡片少时铺满整行(原内嵌版行为;styles.css 原来是 auto-fill) */
.ai-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}

/* 补齐:卡片主体撑满 / 标题两行省略 / 副标题换行显示 */
.card .card-main{flex:1 1 auto;min-width:0;}
.card .card-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card .card-sub{margin:4px 0 0;}

.question-card .controls { margin-top:12px; }

/* 限制用户名区域最大宽度，超长自动省略 */
.header-right span[style*="inline-flex"] { max-width: 9em; overflow: hidden; }