/* === 智教耘·智慧画布课堂 - Shared Design Tokens === */
/* v1.0.0043 —— 严格对齐 开发文档/ui-design(1).md（Figma 智教耘 规范导出，2026-06-30）
   基准：品牌主色 #5B67D3；思源黑体 CN；1920×1080 参照分辨率。
   任何页面的 :root 仅允许覆盖极少数模块专属变量（例如大屏端 --canvas-bg），
   通用 token 一律沿用本文件，禁止再局部重定义 --primary / --border / --text 等。 */

:root {
  /* —— 品牌 & 状态色 —— */
  --primary: #5B67D3;
  --primary-hover: #4B57C1;
  --primary-soft: rgba(91, 103, 211, 0.1);   /* 主色 10% 透明：悬浮/软标签 */
  --primary-selected: #EEF2F6;               /* 侧栏选中项底色（§2.1） */
  --primary-tinted: #EEF0FB;                 /* 主色淡紫软底（弹窗/软 CTA） */

  --success: #379373;
  --warning: #E58617;
  --danger:  #F55757;

  --status-blue:  #1C7CE5;                   /* “进行中”文字 */
  --status-green: #0CAA63;                   /* “已完成”文字 */

  /* —— 中性色 —— */
  --bg: #F0F4F8;                             /* 平台背景 */
  --surface: #FFFFFF;                        /* 纯白卡片底 */
  --surface-2: #FBFBFC;                      /* 二级卡片/模块背景 */
  --border: #EDEDEE;                         /* 分割线色 */
  --border-2: #E5E5E5;                       /* 禁用/浅边框 */

  --text: #142234;                           /* 标题黑 */
  --text-2: #5E6976;                         /* 正文/次级 */
  --text-weak: #AAB1BC;                      /* 占位符/时间戳 */
  --text-icon: #627084;                      /* 次级图标 */

  /* —— 标签底色（§2.2） —— */
  --tag-blue-bg:   #E3EBFA;
  --tag-purple-bg: #F1EAFF;
  --tag-green-bg:  #D9F5F0;
  --tag-neutral-bg:#F2F2F4;

  /* —— 布局尺寸（§4.2） —— */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 60px;
  --nav-item-h: 56px;
  --nav-sub-item-h: 36px;

  /* —— 圆角（§五） —— */
  --radius-sm: 4px;
  --radius: 8px;          /* 按钮 / 输入框 / 菜单项 */
  --radius-card: 12px;    /* 卡片 / 面板 / 弹窗 */
  --radius-cta: 27px;     /* CTA 按钮 */
  --radius-pill: 9999px;

  /* —— 阴影（§8.1） —— */
  --shadow-toast:   0 8px 12px rgba(0,0,0,.05);
  --shadow-card:    0 6.4px 25.6px rgba(0,0,0,.1);
  --shadow-lg:      0 8px 32px rgba(0,0,0,.1);
  --shadow-badge:   0 1px 2px rgba(0,0,0,.05);
  --shadow:         var(--shadow-toast);     /* 页面默认阴影 */

  /* —— 毛玻璃（§8.2） —— */
  --topbar-glass-bg: rgba(255,255,255,0.9);
  --topbar-glass-blur: blur(5.85px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Source Han Sans CN", "Source Han Sans SC", "PingFang SC",
               "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100vh;
}

/* === Layout Shell === */
.app { display: flex; height: 100vh; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  background: var(--topbar-glass-bg);
  backdrop-filter: var(--topbar-glass-blur);
  -webkit-backdrop-filter: var(--topbar-glass-blur);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 20px; gap: 12px; flex-shrink: 0;
}
.topbar h1 { font-size: 16px; font-weight: 600; color: var(--primary); }
.topbar .spacer { flex: 1; }
.brand-logo { height: 28px; margin-right: 4px; }

.main { display: flex; flex: 1; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  overflow-y: auto;
  flex-shrink: 0;
}
.content { flex: 1; overflow: auto; padding: 24px; }
.panel { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; }

/* === Sidebar Nav (spec §6.5) === */
.nav-group {
  font-size: 11px; color: var(--text-weak);
  padding: 12px 12px 4px;
  text-transform: uppercase; letter-spacing: 1px;
}
.nav-group:first-child { padding-top: 4px; }

.nav-item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 4px;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--primary-soft); color: var(--primary); }
.nav-item.active { background: var(--primary-selected); color: var(--primary); font-weight: 500; }

/* === Buttons (spec §6.2) === */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius); border: none;
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-cta { border-radius: var(--radius-cta); padding: 8px 20px; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-icon {
  padding: 6px; border-radius: 50%; background: transparent;
  border: none; cursor: pointer; color: var(--text-icon);
}
.btn-icon:hover { background: var(--bg); }

/* === Inputs (spec §6.3) === */
.input {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: inherit; font-size: 14px; background: var(--surface);
  color: var(--text); outline: none;
  transition: border-color .15s;
}
.input:focus { border-color: var(--primary); }
.input::placeholder { color: var(--text-weak); }
.form-group { margin-bottom: 12px; }
.form-group label {
  display: block; font-size: 13px; font-weight: 500;
  margin-bottom: 4px; color: var(--text-2);
}

/* === Cards (spec §6.1) === */
.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
.card-body { padding: 16px; }

/* === Badges / Tags (spec §6.4) === */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
.badge-info    { background: var(--tag-blue-bg);   color: var(--primary); }
.badge-success { background: var(--tag-green-bg);  color: var(--success); }
.badge-warning { background: #FBEBCE;              color: var(--warning); }
.badge-danger  { background: #F9D6D6;              color: var(--danger); }
.badge-purple  { background: var(--tag-purple-bg); color: #6D4FB8; }
.badge-neutral { background: var(--tag-neutral-bg); color: var(--text-2); }

/* “进行中/已完成” 语义徽章 —— spec §2.2 状态色 */
.badge-ongoing   { background: var(--tag-blue-bg);  color: var(--status-blue); }
.badge-completed { background: var(--tag-green-bg); color: var(--status-green); }

/* === Data Table === */
table.data-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border-radius: var(--radius-card);
  overflow: hidden; box-shadow: var(--shadow);
}
table.data-table th, table.data-table td {
  padding: 12px; text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
table.data-table th { background: var(--surface-2); color: var(--text-2); font-weight: 500; }
table.data-table tr:last-child td { border-bottom: none; }

/* === Overlay / Modal === */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: none; align-items: center; justify-content: center;
  z-index: 500;
}
.overlay.on { display: flex; }
.modal {
  background: var(--surface);
  border-radius: 14px;
  padding: 24px;
  min-width: 380px; max-width: 92vw; max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal h2 { font-size: 20px; font-weight: 500; margin-bottom: 12px; }

/* === Student Thumbnail Grid (Teacher Monitor) === */
.monitor-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; padding: 8px;
}
.monitor-card {
  border: 2px solid var(--border); border-radius: var(--radius);
  padding: 8px; cursor: pointer; transition: border-color .15s;
  text-align: center; background: var(--surface);
}
.monitor-card:hover { border-color: var(--primary); }
.monitor-card.active { border-color: var(--success); }
.monitor-card.idle { opacity: .6; }
.monitor-card .thumb {
  width: 100%; aspect-ratio: 4/3;
  background: var(--surface-2); border-radius: var(--radius-sm);
  margin-bottom: 4px; display: flex; align-items: center; justify-content: center;
  color: var(--text-weak); font-size: 12px;
}
.monitor-card .name { font-size: 12px; font-weight: 500; }
.monitor-card .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.status-dot.active  { background: var(--success); }
.status-dot.idle    { background: var(--warning); }
.status-dot.offline { background: var(--danger); }

/* === Full-screen Display === */
.display-full {
  position: fixed; inset: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; z-index: 9999;
}
.display-code { text-align: center; }
.display-code .code {
  font-size: 64px; font-weight: 700; letter-spacing: 8px;
  color: #7F94FA; margin: 24px 0;
}
.display-code .label { font-size: 16px; color: #999; }

/* === Responsive (Pad priority, C5e 10.4" = 2000x1200) === */
@media (max-width: 768px) {
  .sidebar { display: none; }
  :root { --sidebar-w: 0; }
}
@media (min-width: 1200px) {
  .monitor-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9AA6B5; }
::-webkit-scrollbar-track { background: transparent; }