/* 数智工坊 · 主题样式
   主色：砖红 #a53f3f / 金色 #c9a227 / 象牙白 #fdfbf7
*/
:root {
  --brick: #a53f3f;
  --brick-dark: #7c2e2e;
  --gold: #c9a227;
  --gold-light: #f3e5ab;
  --ivory: #fdfbf7;
  --paper: #ffffff;
  --ink: #2c2c2c;
  --ink-light: #5a5a5a;
  --border: #e8e2d6;
  --shadow: rgba(0,0,0,0.06);
  --radius: 12px;
  --sidebar-w: 240px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  background: var(--ivory);
  color: var(--ink);
  height: 100%;
}

.hidden { display: none !important; }

/* 登录页 */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fdfbf7 0%, #f3e5ab 100%);
}
.login-card {
  background: var(--paper);
  padding: 48px 40px;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px var(--shadow);
  width: 420px;
  text-align: center;
}
.brand .logo {
  width: 72px; height: 72px;
  margin: 0 auto 16px;
  background: var(--brick);
  color: var(--gold-light);
  font-size: 36px;
  font-weight: bold;
  line-height: 72px;
  border-radius: 50%;
}
.brand h1 { margin: 0 0 6px; font-size: 24px; color: var(--brick-dark); }
.brand p { margin: 0 0 28px; color: var(--ink-light); }
.login-form label {
  display: block;
  text-align: left;
  margin-bottom: 16px;
}
.login-form label span { display: block; font-size: 14px; margin-bottom: 6px; color: var(--ink-light); }
.login-form input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: border-color .2s;
}
.login-form input:focus { border-color: var(--brick); }
.btn-primary {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 8px;
  background: var(--brick);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background .2s;
}
.btn-primary:hover { background: var(--brick-dark); }
.error-msg { color: #c0392b; margin-top: 12px; font-size: 14px; min-height: 20px; }
.demo-accounts { margin-top: 20px; color: #888; line-height: 1.6; }

/* 主应用 */
.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-w);
  background: var(--paper);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.sidebar-header {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
.logo-sm {
  width: 40px; height: 40px;
  background: var(--brick);
  color: var(--gold-light);
  font-size: 20px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  border-radius: 10px;
}
.app-title { font-weight: bold; font-size: 16px; color: var(--brick-dark); }
.app-sub { font-size: 12px; color: var(--ink-light); }

.nav { flex: 1; padding: 12px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--ink-light);
  text-decoration: none;
  margin-bottom: 6px;
  transition: all .15s;
}
.nav-item:hover { background: #f8f4eb; color: var(--brick-dark); }
.nav-item.active { background: var(--brick); color: #fff; }
.nav-item .icon { font-size: 18px; }

.user-bar {
  padding: 16px;
  border-top: 1px solid var(--border);
}
.user-info { margin-bottom: 10px; }
.user-name { font-weight: bold; font-size: 14px; }
.user-role { font-size: 12px; color: var(--gold); }
.btn-ghost {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-light);
}
.btn-ghost:hover { border-color: var(--brick); color: var(--brick); }

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  height: 64px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
}
.topbar h2 { margin: 0; font-size: 20px; color: var(--brick-dark); }
.course-select select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  min-width: 180px;
}

.content {
  flex: 1;
  padding: 24px 28px;
  overflow-y: auto;
  position: relative;  /* 供星云冲关等全屏模块 absolute 填充 */
}

/* 通用卡片 */
.card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px var(--shadow);
}
.card h3 { margin-top: 0; color: var(--brick-dark); border-bottom: 2px solid var(--gold-light); padding-bottom: 10px; }

/* 按钮组 */
.btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  margin-right: 8px;
}
.btn:hover { border-color: var(--brick); color: var(--brick); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-danger { border-color: #e74c3c; color: #e74c3c; }
.btn-danger:hover { background: #e74c3c; color: #fff; }

/* 学情预警 / 反馈中心 通用小组件（al-* / fb-* 共用） */
.al-btn, .fb-btn {
  padding: 6px 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}
.al-btn:hover, .fb-btn:hover { border-color: var(--brick); color: var(--brick); }
.al-btn.primary, .fb-btn.primary { background: var(--brick); border-color: var(--brick); color: #fff; }
.al-btn.primary:hover, .fb-btn.primary:hover { background: var(--brick-dark); color: #fff; }
.al-btn.sm, .fb-btn.sm { padding: 4px 9px; font-size: 12px; }
.al-btn.danger, .fb-btn.danger { border-color: #e74c3c; color: #e74c3c; }
.al-btn.danger:hover, .fb-btn.danger:hover { background: #e74c3c; color: #fff; }
.al-btn:disabled, .fb-btn:disabled { opacity: .6; cursor: not-allowed; }

.al-table, .fb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.al-table th, .al-table td, .fb-table th, .fb-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
}
.al-table th, .fb-table th {
  background: #F7F5F0;
  color: var(--ink-light);
  font-weight: 600;
}
.al-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  margin-right: 4px;
}
.al-tag.fail { background: #FDF3F3; color: #a32d2d; }
.al-tag.warn { background: #FFF8E8; color: #854f0b; }
.al-tag.good { background: #EDF7F1; color: #0F6E56; }

.fb-input {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  box-sizing: border-box;
}
.fb-input:focus { outline: none; border-color: var(--brick); }
textarea.fb-input { resize: vertical; }

/* 表格 */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 14px;
}
th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
th { background: #f8f4eb; color: var(--brick-dark); font-weight: 600; }
tr:hover { background: #faf8f3; }

/* 表单 */
.form-row {
  display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.form-row label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.form-row input, .form-row select, .form-row textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 180px;
  font-family: inherit;
}
textarea { min-height: 80px; min-width: 300px; }

/* 考纲树 */
.outline-tree { padding-left: 0; }
.outline-node {
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fff;
}
.outline-node .title { font-weight: 600; }
.outline-node .weight { color: var(--gold); font-size: 13px; margin-left: 8px; }
.outline-children { padding-left: 24px; margin-top: 8px; }

/* 课件 */
.lesson-meta { color: var(--ink-light); font-size: 13px; margin-bottom: 10px; }
.lesson-content { line-height: 1.8; }
.lesson-content p { margin: 10px 0; }
.lesson-content h3 {
  margin: 26px 0 12px;
  padding-left: 10px;
  border-left: 4px solid var(--brick);
  font-size: 18px;
}
.lesson-content h4 {
  margin: 18px 0 8px;
  font-size: 15px;
  color: var(--brick);
}
.lesson-content ol, .lesson-content ul { margin: 10px 0 10px 22px; }
.lesson-content li { margin: 6px 0; }
.lesson-content em { color: var(--brick); font-style: normal; font-weight: 600; }
.lesson-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}
.lesson-content th,
.lesson-content td {
  border: 1px solid #e8e0cf;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.lesson-content th { background: #faf5ea; font-weight: 600; }
.lesson-content tr:nth-child(even) td { background: #fffdf8; }

/* 白话解析区块 */
.plain-box {
  background: #fffaf0;
  border: 1px solid #f0e2c0;
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 12px 0;
}
.plain-box p { margin: 12px 0; }
.plain-box strong { color: var(--brick); }
.plain-box ul { margin: 8px 0 8px 22px; }
.mindmap-placeholder {
  border: 2px dashed var(--gold);
  border-radius: var(--radius);
  padding: 30px;
  text-align: center;
  color: var(--ink-light);
  background: #fffdf5;
}

/* 题库 */
.q-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 6px;
}
.q-tag-single { background: #e8f4fd; color: #2980b9; }
.q-tag-multi { background: #eafaf1; color: #27ae60; }
.q-tag-judge { background: #fdebd0; color: #d35400; }
.q-tag-term { background: #f5eef8; color: #8e44ad; }
.q-tag-essay { background: #f2f3f4; color: #5d6d7e; }

/* 答题 */
.quiz-card { max-width: 760px; margin: 0 auto; }
.quiz-progress { margin-bottom: 16px; color: var(--ink-light); }
.quiz-options { margin: 16px 0; }
.quiz-option {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all .15s;
}
.quiz-option:hover { border-color: var(--brick); background: #fffaf5; }
.quiz-option.selected { border-color: var(--brick); background: #fff0e8; }
.quiz-option.correct { border-color: #27ae60; background: #eafaf1; }
.quiz-option.wrong { border-color: #e74c3c; background: #fdecea; }
.quiz-actions { display: flex; gap: 10px; margin-top: 20px; }
.result-box { padding: 16px; border-radius: 10px; margin-top: 16px; }
.result-box.ok { background: #eafaf1; border: 1px solid #27ae60; }
.result-box.err { background: #fdecea; border: 1px solid #e74c3c; }

/* 流星与星空特效 */
.meteor-layer {
  position: fixed; top:0; left:0; width:100%; height:100%;
  pointer-events: none; z-index: 9999;
}
.starfield-canvas {
  width: 100%; height: 70vh;
  border-radius: var(--radius);
  background: radial-gradient(ellipse at center, #1a0b2e 0%, #000000 100%);
}
.star-name {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 20px var(--gold), 0 0 60px var(--brick);
  pointer-events: none;
  letter-spacing: 12px;
}
.starfield-wrap { position: relative; }

/* 数据看板 */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi-card { background: #fff; border-radius: 10px; padding: 18px; text-align: center; border-top: 4px solid var(--gold); }
.kpi-card .num { font-size: 32px; font-weight: bold; color: var(--brick); }
.kpi-card .label { color: var(--ink-light); font-size: 14px; margin-top: 6px; }

/* 提示条 */
.tip {
  background: #fff8e1;
  border-left: 4px solid var(--gold);
  padding: 12px 16px;
  border-radius: 6px;
  color: var(--ink-light);
  margin-bottom: 16px;
}

/* 权限掩藏
   学生：只留「考纲与必背 / 交互闯关课件 / 星云冲关」
   教师：默认全部可见，但未经负责人郭建伟审批（is-pending）时与学生一致 */
body.role-student .teacher-only,
body.role-student .owner-only,
body.role-teacher .owner-only,
body.is-pending .teacher-only,
body.is-pending .owner-only { display: none !important; }
.nav-label { margin-left: 10px; }

/* 双入口登录 */
.portal-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  background: #f3efe6;
  padding: 5px;
  border-radius: 10px;
}
.portal-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  color: var(--ink-light);
  transition: all .2s;
}
.portal-tab.active {
  background: var(--brick);
  color: #fff;
  font-weight: 600;
}
.portal-hint {
  font-size: 12px;
  color: var(--ink-light);
  margin-bottom: 18px;
  line-height: 1.6;
}
.switch-line {
  margin: 14px 0;
  font-size: 14px;
  color: var(--ink-light);
}
.switch-line a { color: var(--brick); text-decoration: none; font-weight: 600; }
.switch-line a:hover { text-decoration: underline; }
.reg-tip {
  background: #fff8e1;
  border-left: 3px solid var(--gold);
  padding: 8px 12px;
  font-size: 13px;
  color: #7a5c00;
  border-radius: 4px;
  margin-bottom: 12px;
  text-align: left;
}
.user-class { font-size: 12px; color: var(--ink-light); margin-top: 2px; }

/* 全局提示条 */
.notice {
  padding: 10px 28px;
  background: #fff3cd;
  border-bottom: 1px solid #ffe69c;
  color: #7a5c00;
  font-size: 14px;
}

/* 用户管理表格操作 */
.table-actions button { margin-right: 6px; }
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}
.status-ok { background: #eafaf1; color: #27ae60; }
.status-wait { background: #fdecea; color: #c0392b; }
.status-off { background: #f2f3f4; color: #7f8c8d; }

/* ============================================================
   手机 / 平板适配
   500 名师生会用各种尺寸的手机、平板、电脑打开，
   这里统一保证小屏下不横向溢出、按钮够大、表格可横滑。
   ============================================================ */
@media (max-width: 900px) {
  .app { flex-direction: column; }

  /* 侧边栏变成顶部一条：图标 + 横向可滑的导航 */
  .sidebar {
    width: 100%;
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;              /* 第一行：标题+账号；第二行：整条导航 */
    align-items: center;
    gap: 8px 10px;
    padding: 8px 12px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-header { padding: 0; border-bottom: none; flex: 1 1 auto; gap: 8px; order: 1; }
  .logo-sm { width: 34px; height: 34px; line-height: 34px; font-size: 17px; }
  .app-title { font-size: 14px; }
  .app-sub { display: none; }

  /* 导航独占第二行、整宽横滑：不这样的话它会被挤在标题和账号之间，只剩一两个图标位 */
  .nav {
    flex: 1 1 100%;
    order: 3;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 0;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item {
    margin: 0 6px 0 0;
    padding: 10px 14px;
    white-space: nowrap;
    font-size: 13px;
    flex: none;
    min-width: 44px;
    text-align: center;
  }
  .nav-item .icon { font-size: 17px; }
  .nav-item .nav-label { display: none; }      /* 小屏只留图标，避免文字被截断 */

  .user-bar {
    flex: none;
    order: 2;
    padding: 0;
    border-top: none;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .user-info { margin: 0; }
  .user-name { font-size: 13px; }
  .user-class { display: none; }
  .btn-ghost { width: auto; padding: 8px 12px; }

  /* 顶栏与内容区收紧 */
  .topbar {
    height: auto;
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .topbar h2 { font-size: 17px; }
  .course-select select { min-width: 110px; padding: 7px 10px; font-size: 13px; }
  .content { padding: 12px 14px; }
  .card { padding: 16px 14px; overflow-x: auto; }
  .notice { padding: 10px 14px; font-size: 13px; line-height: 1.6; }

  /* 表格横向滑动，避免撑破屏幕 */
  table { font-size: 13px; }
  th, td { padding: 9px 10px; }
  .table-actions { white-space: nowrap; }

  /* 触控友好：按钮最小 40px */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
  .portal-tab { padding: 12px 10px; }

  /* 数据看板两列 */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-card { padding: 14px 10px; }
  .kpi-card .num { font-size: 24px; }
  .kpi-card .label { font-size: 12px; }

  /* 答题卡片占满小屏 */
  .quiz-card { max-width: 100%; }
  .quiz-option { padding: 14px; font-size: 15px; }
  .starfield-canvas { height: 56vh; }
}

@media (max-width: 480px) {
  .login-card {
    width: auto;
    max-width: 100%;
    margin: 14px;
    padding: 26px 18px;
  }
  .brand .logo { width: 60px; height: 60px; line-height: 60px; font-size: 30px; }
  .brand h1 { font-size: 20px; }
  .content { padding: 10px 12px; }
  .card { padding: 14px 12px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar h2 { font-size: 16px; }
  /* 手机上表单输入至少 16px，否则 iOS 会自动放大页面 */
  .login-form input,
  .form-row input,
  .form-row select,
  .form-row textarea { font-size: 16px; }
  .form-row input, .form-row select, .form-row textarea { min-width: 0; width: 100%; }
  textarea { min-width: 0; width: 100%; }
}