/* ═══════════════════════════════════════════════════════════════
   exam.css —— exam 站专用（quiz 答题页 + 目录页）
   来源：原 styles.css 剪切。变量/reset/按钮色板/.pw/.op/admin 表格
        已移至 common.css，本文件不含。
   ⚠ 改动前必读：quiz 显示优先！改完必须回归 quiz（桌面+手机）
   ═══════════════════════════════════════════════════════════════ */

/* ---------- ⓪ quiz 答题页 body 布局（基础外观在 common.css） ---------- */
body{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}

/* ---------- ⑤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:卡片少时铺满整行(覆盖上面的 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}

/* ═══════════════════════════════════════════════════════════════
   ⑥ ★微调区 —— 调"选项圆圈/方框/钩"只看这段
   ═══════════════════════════════════════════════════════════════ */
/* 【微调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;钩的大小: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)}

/* ═══════════════════════════════════════════════════════════════
   ⑦ 手机适配区
   ═══════════════════════════════════════════════════════════════ */
/* 抽屉按钮:桌面隐藏,窄屏显示 */
#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}


/* 安装横幅:占满一行,插在 grid 之前 */
.install-banner{
  display:flex; align-items:center; gap:12px;
  background:#eef2ff; border:1px solid #c7d2fe;
  border-radius:12px; padding:12px 14px;
  margin:0 0 16px;
}
.install-banner.hidden{ display:none; }
.install-banner .ib-icon{ font-size:24px; }
.install-banner .ib-text{ flex:1; display:flex; flex-direction:column; }
.install-banner .ib-text b{ font-size:14px; color:#1e1b4b; }
.install-banner .ib-text span{ font-size:12px; color:#4b5563; }
.install-banner .ib-btn{
  border:0; border-radius:8px; padding:8px 14px;
  background:#4f46e5; color:#fff; font-weight:600; cursor:pointer;
}
.install-banner .ib-close{
  border:0; background:none; font-size:18px;
  color:#9ca3af; cursor:pointer; padding:4px;
}
/* ★ 已安装用户:强制隐藏,pwa.js 会给 body 加这个类 */
.pwa-standalone .install-banner{ display:none !important; }

.q-img{display:block;max-width:min(100%,480px);margin:8px 0;border-radius:6px;}