/* ==========================================================================
   教室工具箱 · 控制台样式（仿 QQ 开放平台控制台：左栏分类 + 主区列表）
   仅作用于 body.page-console；浅色为默认，跟随站点主题切换深色。
   ========================================================================== */

/* 关掉站点默认的深空背景 / 网格 / 装饰光晕 */
body.page-console {
  background: var(--cs-bg);
  color: var(--cs-text);
}
body.page-console::before { display: none; }
body.page-console .orbs,
body.page-console .scanlines,
body.page-console .scanbeam,
body.page-console .topbar,
body.page-console .nav,
body.page-console .footer { display: none !important; }

/* ── 主题变量（浅色默认）─────────────────────────────────────────────── */
body.page-console {
  --cs-bg: #f2f4f8;
  --cs-surface: #ffffff;
  --cs-surface-2: #f7f9fc;
  --cs-border: #e6e9f0;
  --cs-border-strong: #d8dde8;
  --cs-text: #1f2733;
  --cs-dim: #8a93a3;
  --cs-faint: #aab2c0;
  --cs-accent: #2f6bff;
  --cs-accent-soft: #eaf1ff;
  --cs-sidebar-w: 232px;
  --cs-row-hover: #f5f8ff;
  --cs-shadow: 0 1px 2px rgba(16, 30, 54, 0.04), 0 8px 28px rgba(16, 30, 54, 0.06);
  --cs-banner-bg: #eaf3ff;
  --cs-banner-border: #cfe2ff;
  --cs-banner-text: #2b6fd6;
  --cs-cyan: #35d6ff;
  --cs-violet: #8b7bff;
  --cs-green: #34d399;
  --cs-red: #ef3b52;
  --cs-amber: #f6b73c;
  --cs-blue: #4a9eff;
}
html[data-theme='dark'] body.page-console {
  --cs-bg: #0d1220;
  --cs-surface: #141b2b;
  --cs-surface-2: #111827;
  --cs-border: #232f47;
  --cs-border-strong: #2c3a57;
  --cs-text: #e6edf7;
  --cs-dim: #92a0b6;
  --cs-faint: #6c7a92;
  --cs-accent: #5b9bff;
  --cs-accent-soft: #16263f;
  --cs-row-hover: #18233a;
  --cs-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.35);
  --cs-banner-bg: #11203a;
  --cs-banner-border: #1e335a;
  --cs-banner-text: #79b0ff;
}

/* ── 顶栏 ─────────────────────────────────────────────────────────────── */
.cs-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 58px;
  padding: 0 22px;
  background: var(--cs-surface);
  border-bottom: 1px solid var(--cs-border);
}
.cs-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cs-text);
  text-decoration: none;
}
.cs-brand__mark img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
}
.cs-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.cs-brand__text strong { font-size: 15px; font-weight: 700; }
.cs-brand__text span { font-size: 10.5px; color: var(--cs-faint); letter-spacing: 0.04em; }
.cs-header__spacer { flex: 1; }
.cs-header__nav { display: flex; align-items: center; gap: 4px; }
.cs-header__nav a {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--cs-dim);
  text-decoration: none;
  transition: all 0.18s ease;
}
.cs-header__nav a:hover { color: var(--cs-text); background: var(--cs-surface-2); }
.cs-header__nav a[aria-current='page'] { color: var(--cs-accent); background: var(--cs-accent-soft); }

/* 主题切换按钮（复用站点 .theme-toggle 的基础样式，这里只调色） */
body.page-console .theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--cs-border);
  background: var(--cs-surface-2);
  color: var(--cs-text);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.18s ease;
}
body.page-console .theme-toggle:hover { border-color: var(--cs-border-strong); }

/* ── 外壳：左栏 + 主区 ────────────────────────────────────────────────── */
.cs-shell {
  display: grid;
  grid-template-columns: var(--cs-sidebar-w) 1fr;
  align-items: start;
  min-height: calc(100vh - 58px);
}

/* ── 左栏 ─────────────────────────────────────────────────────────────── */
.cs-sidebar {
  position: sticky;
  top: 58px;
  align-self: start;
  height: calc(100vh - 58px);
  overflow-y: auto;
  padding: 20px 14px;
  background: var(--cs-surface);
  border-right: 1px solid var(--cs-border);
}
.cs-sidebar__title {
  padding: 4px 10px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cs-faint);
}
.cs-nav { display: flex; flex-direction: column; gap: 2px; }
.cs-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--cs-dim);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.16s ease;
}
.cs-nav__item:hover { background: var(--cs-surface-2); color: var(--cs-text); }
.cs-nav__item.is-active {
  background: var(--cs-accent-soft);
  color: var(--cs-accent);
  font-weight: 600;
}
.cs-nav__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--cs-faint);
}
.cs-nav__dot--cyan { background: var(--cs-cyan); }
.cs-nav__dot--violet { background: var(--cs-violet); }
.cs-nav__dot--green { background: var(--cs-green); }
.cs-nav__dot--red { background: var(--cs-red); }
.cs-nav__dot--amber { background: var(--cs-amber); }
.cs-nav__dot--blue { background: var(--cs-blue); }
.cs-nav__label { flex: 1; }
.cs-nav__count {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--cs-faint);
  padding: 1px 7px;
  border-radius: 99px;
  border: 1px solid var(--cs-border);
}

/* ── 主区 ─────────────────────────────────────────────────────────────── */
.cs-main {
  padding: 28px 30px 60px;
  max-width: 1080px;
  width: 100%;
}
.cs-hero { margin-bottom: 18px; }
.cs-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cs-hero p { margin: 0; color: var(--cs-dim); font-size: 14.5px; line-height: 1.7; }

/* 信息条 */
.cs-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 20px;
  padding: 13px 16px;
  border-radius: 10px;
  background: var(--cs-banner-bg);
  border: 1px solid var(--cs-banner-border);
  color: var(--cs-banner-text);
  font-size: 13.5px;
  line-height: 1.6;
}
.cs-banner__icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--cs-banner-text);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, serif;
  display: grid;
  place-items: center;
}

/* 工具栏：搜索 + 操作 */
.cs-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.cs-search {
  flex: 1;
  min-width: 240px;
  height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--cs-border);
  background: var(--cs-surface);
  color: var(--cs-text);
  font: inherit;
  font-size: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cs-search::placeholder { color: var(--cs-faint); }
.cs-search:focus {
  outline: none;
  border-color: var(--cs-accent);
  box-shadow: 0 0 0 3px var(--cs-accent-soft);
}
.cs-btn-ghost {
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--cs-border);
  background: var(--cs-surface);
  color: var(--cs-dim);
  font: inherit;
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
}
.cs-btn-ghost:hover { color: var(--cs-text); border-color: var(--cs-border-strong); }

/* ── 行列表 ───────────────────────────────────────────────────────────── */
.cs-grouphead {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 26px 0 12px;
  flex-wrap: wrap;
}
.cs-grouphead h3 { margin: 0; font-size: 16px; font-weight: 650; }
.cs-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--cs-faint);
}
.cs-dot--cyan { background: var(--cs-cyan); }
.cs-dot--violet { background: var(--cs-violet); }
.cs-dot--green { background: var(--cs-green); }
.cs-dot--red { background: var(--cs-red); }
.cs-dot--amber { background: var(--cs-amber); }
.cs-dot--blue { background: var(--cs-blue); }
.cs-grouphead__desc { font-size: 13px; color: var(--cs-faint); flex: 1; min-width: 180px; }
.cs-grouphead__count {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--cs-faint);
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--cs-border);
}

.cs-rows {
  border: 1px solid var(--cs-border);
  border-radius: 12px;
  background: var(--cs-surface);
  overflow: hidden;
  box-shadow: var(--cs-shadow);
}
.cs-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--cs-border);
  cursor: pointer;
  transition: background 0.14s ease;
}
.cs-row:last-child { border-bottom: 0; }
.cs-row:hover { background: var(--cs-row-hover); }
.cs-row__icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--cs-accent);
}
.cs-row--cyan .cs-row__icon { background: var(--cs-cyan); color: #06222b; }
.cs-row--violet .cs-row__icon { background: var(--cs-violet); }
.cs-row--green .cs-row__icon { background: var(--cs-green); color: #063025; }
.cs-row--red .cs-row__icon { background: var(--cs-red); }
.cs-row--amber .cs-row__icon { background: var(--cs-amber); color: #382302; }
.cs-row--blue .cs-row__icon { background: var(--cs-blue); }
.cs-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-row__name { font-size: 14.5px; font-weight: 600; color: var(--cs-text); }
.cs-row__desc {
  font-size: 12.5px;
  color: var(--cs-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-row__star {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--cs-faint);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.14s ease;
  opacity: 0;
}
.cs-row:hover .cs-row__star { opacity: 1; }
.cs-row__star.is-fav { opacity: 1; color: #f6b73c; }
.cs-row__arrow {
  flex: none;
  color: var(--cs-faint);
  font-size: 20px;
  line-height: 1;
}

/* 关键词高亮 */
body.page-console mark.lab-hl {
  background: rgba(47, 107, 255, 0.16);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* 最近使用块（列表式） */
.cs-recents { margin-bottom: 8px; }
.cs-recents__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
}
.cs-recents__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cs-accent);
  box-shadow: 0 0 8px var(--cs-accent);
}
.cs-recents__title { font-size: 14px; font-weight: 600; }
.cs-recents__hint { margin-left: auto; font-size: 12px; color: var(--cs-faint); }

/* 加载更多 */
.lab-more {
  display: block;
  width: 100%;
  margin: 18px auto 0;
  max-width: 320px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--cs-border);
  background: var(--cs-surface);
  color: var(--cs-dim);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.lab-more:hover { color: var(--cs-text); border-color: var(--cs-border-strong); }

/* 空状态 */
body.page-console .lab-empty--big {
  text-align: center;
  padding: 56px 20px;
  color: var(--cs-dim);
}
body.page-console .lab-empty--big b { display: block; margin-bottom: 6px; font-size: 15px; color: var(--cs-text); }

/* 工作区弹层（在控制台浅色主题里保证可读） */
html[data-theme='light'] body.page-console .lab-ws__panel { background: #fff; color: #1f2733; }
html[data-theme='light'] body.page-console .lab-ws__title { color: #1f2733; }
html[data-theme='light'] body.page-console .lab-ws__desc { color: #8a93a3; }
html[data-theme='light'] body.page-console .lab-input { background: #fff; color: #1f2733; border-color: var(--cs-border); }
html[data-theme='light'] body.page-console .lab-field__label { color: #4a5365; }

/* ── 响应式 ───────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .cs-shell { grid-template-columns: 1fr; }
  .cs-sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--cs-border);
    padding: 12px 14px;
  }
  .cs-sidebar__title { display: none; }
  .cs-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
  .cs-nav__item { width: auto; white-space: nowrap; }
  .cs-nav__count { display: none; }
  .cs-main { padding: 22px 18px 50px; }
}
@media (max-width: 560px) {
  .cs-header__nav { display: none; }
  .cs-row__desc { display: none; }
}