/* —— 示例交互 —— */
button:hover { transform: scale(1.1); }
button:hover .tooltip { opacity: 1; }

/* ====== Scheme A：把这一行改为 Flex，杜绝换行错位 ====== */
.row[data-sticky-parent] {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;              /* 不允许换行 */
}
.row[data-sticky-parent] > .columns {
  float: none;                    /* 取消 float，交给 flex 控制 */
  min-width: 0;                   /* 防止内容把列撑爆 */
}

/* 主内容列：占剩余空间 */
#mainCol,
.row[data-sticky-parent] > .medium-9.columns {
  flex: 0 0 75%;
  max-width: 75%;
}

/* 右侧栏默认 25% 宽 */
#rightSidebarCol {
  flex: 0 0 25%;
  max-width: 25%;
  overflow: hidden;
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  transition:
    transform .28s ease,
    opacity .28s ease,
    flex-basis .28s ease,
    max-width .28s ease;
}

/* 打开题库：右侧栏向右滑出并“占位宽度=0” */
body.pset-drawer-open #rightSidebarCol {
  transform: translateX(120%);
  opacity: 0;
  pointer-events: none;
  flex-basis: 0;
  max-width: 0;
}

/* 题库抽屉主体（保持 sticky 行为） */
.pset-drawer {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column; /* 确保内部元素垂直排列 */
  overflow: hidden; /* 保持圆角裁切效果，但配合下面的 flex 布局 */
}


/* 题库列：关闭时 0 宽并左移；打开时展开为 --pset-w */
:root { --pset-w: clamp(220px, 24vw, 320px); }

.pset-col {
  will-change: transform;
  flex: 0 0 0;
  max-width: 0;
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform .28s ease,
    opacity .28s ease,
    flex-basis .28s ease,
    max-width .28s ease;
}

body.pset-drawer-open .pset-col {
  flex: 0 0 var(--pset-w);
  max-width: var(--pset-w);
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* ====== 题库内部样式（与你原始一致） ====== */
.pset-drawer__header{
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid #eee; background: #fafafa;
  position: sticky; top: 0; z-index: 1;
  border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.pset-drawer__header h5 {
  margin: 0;
  flex: 1 1 auto;   /* 关键：可收缩 */
  min-width: 0;     /* 关键：允许在 flex 容器中“被压缩”，否则 ellipsis 失效 */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pset-list,
#psetFlatList {padding: 8px 0;flex-grow: 1;min-height: 0;overflow-y: auto; overflow-x: hidden;}


.pset-ul{list-style:none;margin:0;padding:0;}
.pset-item{padding:10px 16px;border-bottom:1px dashed #f0f0f0;transition:background .2s ease;}
.pset-item--ac{ background: #b8f6c5; }
.pset-item--active{ outline: 2px solid #3b82f6; outline-offset: -2px; }
.pset-item__main{ display:flex; align-items:center; gap:3px; }
.pset-item__title{flex:1 1 auto;font-weight:500;max-width:220px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.pset-item__title:hover{color:#3b82f6;}
.pset-item__dif{ font-weight:600;flex:0 0 auto;white-space:nowrap;line-height:1; }
.dif-easy{ color:#00AF9B; } .dif-medium{ color:#FFB800; } .dif-hard{ color:#FF2D55; } .dif-none{ color:#000; }

.green-button {
  padding: 10px 16px;
  font-size: 15px;
  margin-left: 8px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #c9ebd6, #ace1bf);
  color: #0f172a;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(74, 222, 128, 0.3);
  transition: all 0.25s ease;
}
.green-button:hover { background: linear-gradient(135deg, #bae8cb, #bcf6d1); box-shadow: 0 6px 16px rgba(16, 171, 73, 0.4); transform: translateY(-2px); }
.green-button:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(16, 171, 73, 0.4); }

.pset-search-row { width: 100%; padding: 8px 12px; border-bottom: 1px solid #eee; background: #fafafa; }
.pset-search { display: flex; align-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 8px; }
.pset-search input { flex: 1; border: none; outline: none; font-size: 13px; }

.section .section__header.clearfix { display: flex; align-items: center; gap: 3px; justify-content: center;  }
.section .section__header.clearfix > * { min-width: 0; }
.section .section__header.clearfix > .float-left {
  float: none;                              /* 在 flex 里禁用 float 的副作用 */
  flex: 1 1 auto;                           /* 让它占满行宽，方便文本居中 */
}
.section .section__header.clearfix .mysection__title {
  margin: 0;
  text-align: center;
}

.mysection__title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pset-item--focus { outline: 2px solid #22c55e; outline-offset: -2px; background: #ecfdf5; transition: background .3s ease, outline-color .3s ease; }
.pset-item__title { font-size: 14px; line-height: 1.2; }
.pset-item__dif { font-size: 14px; }
@media (max-width: 480px) {
  .pset-item__title { font-size: 11px; }
}

/*  视图切换按钮样式 */
.view-mode-toggle {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 38px;
  color: #666;
  margin-left: 8px;
  vertical-align: middle;
}
.view-mode-toggle:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #333;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.view-mode-toggle .icon-list {
  font-style: normal;
}

/* 筛选控件样式 (仅在平铺视图下由 JS 控制显示) */
.pset-filter-row {
  width: 100%;
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  background: #fafafa;
  /* display: none; 由JS控制 */
}
.pset-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pset-filter-select-row {
  display: flex;
  gap: 8px;
}
.pset-filter-select-row > .pset-select {
  flex: 1;
  min-width: 0;
}

.pset-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s;
  color: #333;
}
.pset-select:hover {
  border-color: #d1d5db;
}
.pset-select:focus {
  outline: none;
  border-color: #3b82f6;
}
.pset-checkbox-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  padding: 4px 0;
  color: #333;
}

/* 内部的真实 label 标签 */
.pset-checkbox-label > label {
  cursor: pointer; /* 让文字部分也可点击 */
  font-weight: normal; /* 覆盖浏览器默认的label加粗样式 */
  margin: 0; /* 清除可能存在的默认外边距 */
}

.pset-checkbox {
  cursor: pointer;
  width: 16px;
  height: 16px;
  margin: 0; /* 确保复选框本身没有多余边距 */
}

/* 为平铺视图的列表（如果需要）指定滚动条样式，复用已有选择器 */
#psetFlatList.pset-list::-webkit-scrollbar {
  width: 6px;
}
#psetFlatList.pset-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
#psetFlatList.pset-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
#psetFlatList.pset-list::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* ✨ 调整窄屏幕下的筛选控件 */
@media (max-width: 480px) {
  .pset-filter-group {
    gap: 6px;
  }
  .pset-select,
  .pset-checkbox-label {
    font-size: 12px;
  }
}

/* 抽屉主体 */
.theme--dark .pset-drawer {
  background: #2a2a2a;
  border-color: #444;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

/* 抽屉头部、搜索行和筛选行 */
.theme--dark .pset-drawer__header,
.theme--dark .pset-search-row,
.theme--dark .pset-filter-row {
  background: #333;
  border-bottom-color: #444;
  color: #eee;
}

/* 列表项分隔线 */
.theme--dark .pset-item {
  border-bottom-color: #3f3f46;
}

/* 列表项 - 已通过 (AC) */
.theme--dark .pset-item--ac {
  background: #204e2a;
  color: #c8e6c9;
}
.theme--dark .pset-item--ac .pset-item__title,
.theme--dark .pset-item--ac .pset-item__dif {
  color: inherit;
}
.theme--dark .pset-item--ac .pset-item__title:hover {
  color: #a5d6a7;
}

/* 列表项 - 聚焦 */
.theme--dark .pset-item--focus {
  background: #1b3d2f;
  outline-color: #4ade80;
}

/* 列表项标题 */
.theme--dark .pset-item__title {
  color: #ddd;
}
.theme--dark .pset-item__title:hover {
  color: #7dd3fc;
}

/* 难度 - 无 */
.theme--dark .dif-none {
  color: #ccc;
}

/* 绿色按钮 */
.theme--dark .green-button {
  background: linear-gradient(135deg, #275336, #2d6b42);
  color: #e0f2f1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.theme--dark .green-button:hover {
  background: linear-gradient(135deg, #2e623f, #337a4c);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.theme--dark .green-button:active {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

/* 搜索框 */
.theme--dark .pset-search {
  background: #252525;
  border-color: #444;
}
.theme--dark .pset-search input {
  background: transparent;
  color: #eee;
}
.theme--dark .pset-search input::placeholder {
  color: #888;
}

/* 视图切换按钮 */
.theme--dark .view-mode-toggle {
  background: #3c3c3c;
  border-color: #555;
  color: #ccc;
  box-shadow: none;
}
.theme--dark .view-mode-toggle:hover {
  background: #4a4a4a;
  border-color: #666;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 下拉选择框 */
.theme--dark .pset-select {
  background: #3c3c3c;
  border-color: #555;
  color: #ddd;
}
.theme--dark .pset-select:hover {
  border-color: #666;
}
.theme--dark .pset-select:focus {
  border-color: #3b82f6; /* 保留蓝色焦点 */
}

/* 复选框 */
.theme--dark .pset-checkbox-label,
.theme--dark .pset-checkbox-label > label {
  color: #ccc;
}
.theme--dark .pset-checkbox {
  accent-color: #22c55e;
  color-scheme: dark; /* 增强兼容性 */
}

/* 滚动条 */
.theme--dark .pset-list::-webkit-scrollbar-track,
.theme--dark #psetFlatList.pset-list::-webkit-scrollbar-track {
  background: #2a2a2a;
}
.theme--dark .pset-list::-webkit-scrollbar-thumb,
.theme--dark #psetFlatList.pset-list::-webkit-scrollbar-thumb {
  background: #555;
}
.theme--dark .pset-list::-webkit-scrollbar-thumb:hover,
.theme--dark #psetFlatList.pset-list::-webkit-scrollbar-thumb:hover {
  background: #777;
}