/* ═══════════════════════════════════════════════════════════════════
   雅思教练 · 全局搜索面板样式
   ───────────────────────────────────────────────────────────────────
   定位：⌘K 唤起的命令面板（command palette）。
   视觉上与判卷工作台、错题本这些「工作区」区分开 ——
   它是浮层，不是页面。

   配色：全部走 CSS 变量，跟随 5 套配色与明暗主题自动切换。
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════ 1. 遮罩与容器 ═══════ */
.gs-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(12 * var(--u));
  background: color-mix(in srgb, var(--n-950) 62%, transparent);
  backdrop-filter: blur(calc(6 * var(--u)));
  -webkit-backdrop-filter: blur(calc(6 * var(--u)));
}
body[data-gs="open"] .gs-panel { display: flex; }

/* 面板本体 —— 真实容器，头/体/脚在同一张卡里 */
.gs-box {
  display: flex; flex-direction: column;
  width: min(calc(760 * var(--u)), calc(100vw - calc(28 * var(--u))));
  max-height: min(calc(560 * var(--u)), calc(100vh - calc(60 * var(--u))));
  border-radius: calc(16 * var(--u));
  background: var(--n-850);
  border: 1px solid var(--glass-line-2);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ═══════ 2. 输入头 ═══════ */
.gs-head {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  height: calc(54 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(16 * var(--u));
  border-bottom: 1px solid var(--glass-line);
  flex: 0 0 auto;
}
.gs-ic {
  width: calc(18 * var(--u)); height: calc(18 * var(--u));
  color: var(--ink-4); flex: 0 0 auto;
}
.gs-in {
  flex: 1 1 auto; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--ink);
  font-family: inherit; font-size: var(--fs-6);
  line-height: calc(22 * var(--u));
}
.gs-in::placeholder { color: var(--ink-4); }
.gs-x {
  flex: 0 0 auto;
  width: calc(26 * var(--u)); height: calc(26 * var(--u));
  border-radius: calc(7 * var(--u));
  border: 1px solid var(--glass-line);
  background: none; color: var(--ink-3);
  display: grid; place-items: center; cursor: pointer;
  transform: rotate(90deg);
  transition: background .16s var(--e-out), color .16s var(--e-out);
}
.gs-x:hover { background: var(--hover); color: var(--ink-1); }
.gs-x svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

/* ═══════ 3. 结果区 ═══════ */
.gs-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  scrollbar-width: thin;
}

.gs-grp { margin-bottom: calc(10 * var(--u)); }
.gs-grp:last-child { margin-bottom: 0; }
.gs-grp-h {
  display: flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(5 * var(--u));
  font-size: var(--fs-2); font-weight: 800;
  letter-spacing: calc(.8 * var(--u));
  color: var(--ink-4); text-transform: uppercase;
  position: sticky; top: calc(-8 * var(--u));
  background: var(--n-850);
  z-index: 1;
}
.gs-grp-h svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.gs-grp-h span {
  font-weight: 700; color: var(--ink-4); opacity: .7;
  letter-spacing: 0;
}

.gs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "t g" "b g";
  align-items: baseline;
  gap: calc(2 * var(--u)) calc(10 * var(--u));
  width: 100%;
  padding: calc(8 * var(--u)) calc(9 * var(--u));
  border: none; background: none;
  border-radius: calc(9 * var(--u));
  text-align: left; cursor: pointer;
  font-family: inherit;
  transition: background .12s var(--e-out);
}
.gs-row:hover, .gs-row.on { background: var(--hover); }
.gs-row.on { box-shadow: inset 2px 0 0 var(--acc); }

.gs-row-t {
  grid-area: t;
  font-size: var(--fs-5); font-weight: 650;
  color: var(--ink-1); line-height: calc(21 * var(--u));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gs-row-b {
  grid-area: b;
  font-size: var(--fs-3); line-height: calc(16 * var(--u));
  color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gs-row-g {
  grid-area: g;
  align-self: center;
  font-size: var(--fs-2); font-weight: 700;
  color: var(--ink-4);
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  border: 1px solid var(--glass-line);
  border-radius: calc(999 * var(--u));
  white-space: nowrap;
}

/* 空状态 / 提示 */
.gs-tip {
  padding: calc(26 * var(--u)) calc(16 * var(--u));
  text-align: center;
}
.gs-tip b {
  display: block;
  font-size: var(--fs-5); font-weight: 700;
  color: var(--ink-1); margin-bottom: calc(10 * var(--u));
}
.gs-hint {
  display: flex; flex-wrap: wrap; gap: calc(6 * var(--u));
  justify-content: center; margin-bottom: calc(12 * var(--u));
}
.gs-hint span {
  font-size: var(--fs-3);
  color: var(--ink-3);
  padding: calc(3 * var(--u)) calc(9 * var(--u));
  border: 1px solid var(--glass-line);
  border-radius: calc(999 * var(--u));
}
.gs-count2 {
  font-size: var(--fs-3); color: var(--ink-4);
}

/* ═══════ 4. 底部提示条 ═══════ */
.gs-foot {
  display: flex; align-items: center; gap: calc(14 * var(--u));
  flex: 0 0 auto;
  padding: calc(9 * var(--u)) calc(16 * var(--u));
  border-top: 1px solid var(--glass-line);
  font-size: var(--fs-2); color: var(--ink-4);
  background: var(--n-800);
}
.gs-foot span { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); }
.gs-foot kbd {
  display: inline-grid; place-items: center;
  min-width: calc(17 * var(--u)); height: calc(17 * var(--u));
  padding: 0 calc(4 * var(--u));
  border: 1px solid var(--glass-line-2);
  border-radius: calc(4 * var(--u));
  background: var(--n-800);
  font-family: inherit; font-size: var(--fs-1);
  font-weight: 700; color: var(--ink-3);
}
.gs-count { margin-left: auto; font-weight: 700; color: var(--ink-3); }

/* ═══════ 5. 首页搜索框的 ⌘K 提示 ═══════ */
.fs-kbd {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  height: calc(17 * var(--u)); padding: 0 calc(5 * var(--u));
  border: 1px solid var(--glass-line-2);
  border-radius: calc(4 * var(--u));
  background: var(--n-750);
  font-family: inherit;
  font-size: var(--fs-1); font-weight: 700;
  color: var(--ink-4);
  pointer-events: none;
}

/* ═══════ 6. 窄屏 ═══════ */
@media (max-width: 620px) {
  .gs-panel { padding-top: calc(8 * var(--u)); }
  .gs-box {
    width: calc(100vw - calc(16 * var(--u)));
    max-height: calc(100vh - calc(24 * var(--u)));
  }
  .gs-foot { display: none; }
  .gs-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "b" "g"; }
  .gs-row-g { justify-self: start; margin-top: calc(3 * var(--u)); }
  .fs-kbd { display: none; }
}