/* ============================================================
   sidebar.css —— 积木块：右侧栏（快捷按钮组 + 课程九宫格）
   作用域前缀 .sidebar / .grid-item，不碰其他块
   ============================================================ */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar__panel {
  padding: 16px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
}

/* —— 快捷按钮组 —— */
.sidebar__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar__hint {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-text-3);
}

/* —— 九宫格入口 —— */
.sidebar__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-text);
}

/* 只有右侧计数是小字，标题本身要正常大小 */
.sidebar__title [data-role='count'] {
  font-size: 12px;
  font-weight: 400;
  color: var(--c-text-3);
}

.sidebar__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 2px 8px;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  font-size: 12.5px;
  color: var(--c-text-2);
  cursor: pointer;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}

.grid-item:hover {
  background: var(--c-card-soft);
  color: var(--c-text);
}

.grid-item.is-active {
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
}

.grid-item__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.14);
  transition: transform 0.18s var(--ease);
}

.grid-item:hover .grid-item__icon {
  transform: translateY(-2px);
}

/* 入口图标配色（按顺序循环取用） */
.grid-item__icon--0 { background: linear-gradient(135deg, #7c8ba1, #4b586d); }
.grid-item__icon--1 { background: linear-gradient(135deg, #35c4f0, #1a7fe0); }
.grid-item__icon--2 { background: linear-gradient(135deg, #45d39a, #12a06f); }
.grid-item__icon--3 { background: linear-gradient(135deg, #a78bfa, #6f4fe0); }
.grid-item__icon--4 { background: linear-gradient(135deg, #f6b04c, #e07d22); }
.grid-item__icon--5 { background: linear-gradient(135deg, #f28fb4, #d94b82); }

/* —— 窄屏：侧栏变成可横向滚动的两块 —— */
@media (max-width: 980px) {
  .sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
  }
}