/* ═══════════════════════════════════════════════════
   研途 · 院校库模块
   筛选 / 收藏 / 多校对比
   类名统一 ms- 前缀 颜色只用 main.css 的设计令牌
   ═══════════════════════════════════════════════════ */

/* ─── 页面骨架 ─────────────────────────────────── */
.ms-page{padding-bottom:128px}
/* 说明文字两行均分，避免最后两个字孤行 */
.ms-page .page-head .lede{text-wrap:balance}

/* ─── 筛选区 ───────────────────────────────────── */
.ms-filters{margin-bottom:16px}
.ms-field{flex:1 1 200px;min-width:200px;max-width:320px;margin-left:auto}
.ms-field input{width:100%;min-width:0}
.ms-field-x{
  display:grid;place-items:center;width:20px;height:20px;flex:none;
  border-radius:50%;color:var(--ink-4);font-size:12px;
  transition:color var(--t-2),background var(--t-2),transform var(--t-1) var(--spring);
}
.ms-field-x:hover{color:var(--ink);background:var(--paper-2);transform:scale(1.12)}
.ms-field-x:active{transform:scale(.9)}
.ms-field-x[hidden]{display:none}

/* ─── 工具栏 ───────────────────────────────────── */
.ms-toolbar{align-items:flex-end;gap:10px 12px;margin:4px 0 10px}
.ms-toolbar .yt-hint{padding-bottom:8px;line-height:1.2}
.ms-count{padding-bottom:8px;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ms-count b{color:var(--ink);font-weight:700}
.ms-count.zero b{color:var(--ink-4)}

.ms-favonly{gap:6px;flex:none}
.ms-favonly .ic{font-size:12px;transition:transform var(--t-3) var(--spring),fill var(--t-2)}
.ms-favonly.on{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue-ink)}
.ms-favonly.on .ic{fill:currentColor;transform:scale(1.1)}
.ms-favonly:active{transform:scale(.97)}

.ms-favcount{transition:color var(--t-2)}

.ms-reset{flex:none;gap:6px}
.ms-reset .ic{font-size:12px;transition:transform var(--t-3) var(--ease-io)}
.ms-reset:hover .ic{transform:rotate(-90deg)}
.ms-reset:active{transform:scale(.97)}

/* ─── 卡片 ─────────────────────────────────────── */
.ms-grid{margin-top:2px}
.ms-card{
  padding:20px;
  animation:ms-card-in var(--t-3) var(--ease-out) backwards;
}
.ms-grid.ms-silent > .ms-card{animation:none}
@keyframes ms-card-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ms-card-out{to{opacity:0;transform:translateY(-6px) scale(.955)}}
.ms-card.ms-out{animation:ms-card-out 190ms var(--ease-io) forwards}
.ms-card.is-cmp{border-color:var(--blue-line);background-image:linear-gradient(150deg,var(--blue-soft),transparent 58%)}

/* 整卡点击热区：不包裹按钮 保证 a 内没有可交互元素 */
.ms-hit{position:absolute;inset:0;z-index:1;border-radius:inherit}
.ms-hit:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}

.ms-card-h{align-items:center;gap:8px}
.ms-badges{display:flex;align-items:center;gap:8px;min-width:0}
.ms-act{display:flex;align-items:center;gap:5px;flex:none;margin-left:auto;
  position:relative;z-index:2}
.ms-act .yt-star{width:27px;height:27px;border-radius:8px}
.ms-act .yt-star:hover{transform:scale(1.1)}
.ms-pop{animation:ms-star-pop var(--t-3) var(--spring)}
@keyframes ms-star-pop{0%{transform:scale(1)}42%{transform:scale(1.3) rotate(-9deg)}100%{transform:scale(1)}}

.ms-card h3{margin-top:2px}
.ms-card p{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:43px;
}

.ms-foot{justify-content:space-between;gap:10px;flex-wrap:wrap}
.ms-foot-l{display:inline-flex;align-items:center;gap:6px;min-width:0}
.ms-foot-l .ic{font-size:12px;color:var(--ink-4)}
.ms-dot{font-style:normal;color:var(--ink-4)}

.ms-cmptag{
  position:relative;z-index:2;flex:none;
  height:26px;padding:0 10px;font-size:12px;gap:5px;
}
.ms-cmptag .ic{font-size:12px}
.ms-cmptag.on{background:var(--blue);border-color:var(--blue);color:var(--ink)}
.ms-cmptag.on:hover{filter:brightness(1.12)}
.ms-cmptag:active{transform:scale(.95)}

.ms-page .tag:active{transform:scale(.97)}

/* 空状态 */
.ms-empty{animation:ms-rise var(--t-3) var(--ease-out) backwards}
.ms-empty .btn{margin-top:18px}
.ms-empty .btn:hover{transform:translateY(-1px) scale(1.02)}
.ms-empty .btn:active{transform:scale(.97)}

/* ─── 底部对比条 ───────────────────────────────── */
.ms-cmpbar{
  position:fixed;left:50%;bottom:24px;z-index:120;
  width:min(720px,calc(100vw - 40px));
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,30px) scale(.96);
  transition:transform var(--t-3) var(--ease-out),
             opacity var(--t-2) var(--ease-out),
             visibility var(--t-2),
             bottom var(--t-3) var(--ease-out);
}
.ms-cmpbar.on{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0) scale(1);
}
/* 提示条出现时让位，避免和 toast 叠在一起 */
.ms-cmpbar.ms-lift{bottom:88px}
.ms-cmpbar-in{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px 10px 16px;border-radius:var(--r-full);
  border:1px solid var(--line);
  background-color:var(--bg);
  background-image:linear-gradient(var(--paper),var(--paper));
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:var(--sh-3);
}
.ms-cmpbar-lbl{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:12px;letter-spacing:.06em;color:var(--ink-4);
}
.ms-cmpbar-lbl .ic{font-size:13px}

.ms-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;flex:1}
.ms-chip{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px 0 12px;
  border-radius:var(--r-full);border:1px solid var(--blue-line);
  background:var(--blue-soft);color:var(--blue-ink);
  font-size:12.5px;font-weight:600;
  animation:ms-chip-in var(--t-2) var(--spring) backwards;
  transition:transform var(--t-1) var(--spring),background var(--t-2),color var(--t-2),opacity var(--t-2);
}
.ms-chip:hover{transform:scale(1.04);background:var(--blue);border-color:var(--blue);color:var(--ink)}
.ms-chip:active{transform:scale(.94)}
.ms-chip i{display:grid;place-items:center;font-style:normal;opacity:.72;font-size:12px}
.ms-chip:hover i{opacity:1}
@keyframes ms-chip-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

.ms-cmpgo{flex:none}
.ms-cmpgo:hover{transform:scale(1.02)}
.ms-cmpgo:active{transform:scale(.97)}
.ms-cmpgo:disabled{opacity:.5;cursor:default}
.ms-cmpclear{
  display:grid;place-items:center;width:28px;height:28px;flex:none;
  border-radius:50%;color:var(--ink-4);font-size:13px;
  transition:color var(--t-2),background var(--t-2),transform var(--t-1) var(--spring);
}
.ms-cmpclear:hover{color:var(--ink);background:var(--paper-2);transform:scale(1.1)}
.ms-cmpclear:active{transform:scale(.9)}

.ms-cmpbar.ms-bump .ms-cmpbar-in{animation:ms-shake 300ms var(--ease-io)}
@keyframes ms-shake{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-6px)}
  46%{transform:translateX(5px)}
  70%{transform:translateX(-3px)}
  88%{transform:translateX(2px)}
}

/* ─── 对比面板 ─────────────────────────────────── */
.ms-modal{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:22px}
.ms-modal-mask{
  position:absolute;inset:0;
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 74%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:ms-fade var(--t-2) var(--ease-out) both;
}
.ms-modal-box{
  position:relative;width:min(900px,94vw);max-height:86vh;
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background-color:var(--bg);
  background-image:linear-gradient(var(--paper),var(--paper));
  box-shadow:var(--sh-3);
  animation:ms-pop var(--t-3) var(--spring) both;
  outline:0;
}
.ms-modal.closing .ms-modal-mask{animation:ms-fade var(--t-2) var(--ease-io) reverse both}
.ms-modal.closing .ms-modal-box{animation:ms-pop var(--t-2) var(--ease-io) reverse both}
@keyframes ms-fade{from{opacity:0}to{opacity:1}}
@keyframes ms-pop{from{opacity:0;transform:translateY(14px) scale(.93)}to{opacity:1;transform:none}}
@keyframes ms-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.ms-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:20px 20px 16px;border-bottom:1px solid var(--line-2);flex:none;
}
.ms-modal-titles .eyebrow{margin-bottom:8px}
.ms-modal-x{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:var(--r-full);color:var(--ink-3);font-size:15px;
  transition:color var(--t-2),background var(--t-2),transform var(--t-2) var(--spring);
}
.ms-modal-x:hover{color:var(--ink);background:var(--paper-2);transform:rotate(90deg) scale(1.06)}
.ms-modal-x:active{transform:rotate(90deg) scale(.94)}
.ms-modal-x{position:relative;z-index:1}

.ms-modal-body{overflow:auto;padding:18px 20px 20px;flex:1;min-height:0}
.ms-modal-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--line-2);flex:none;
}
.ms-modal-foot .btn:hover{transform:scale(1.02)}
.ms-modal-foot .btn:active{transform:scale(.97)}

/* 对比表格 */
.ms-compare{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  min-width:460px;
  animation:ms-rise var(--t-3) var(--ease-out) backwards;
}
.ms-cmpcell{
  background:var(--bg);padding:12px 14px;min-width:0;
  font-size:13.5px;color:var(--ink-2);line-height:1.55;
}
.ms-cmpcell-l{
  display:flex;align-items:center;
  font-size:11.5px;letter-spacing:.05em;color:var(--ink-4);
  background:var(--bg);
}
.ms-cmpcell-h,.ms-cmpcell-hl{
  background:var(--blue-soft);
}
.ms-cmpcell-h{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
}
.ms-cmpcell-h .mark{width:34px;height:34px;border-radius:10px;font-size:13px}
.ms-cmpname{font-size:14.5px;font-weight:680;color:var(--ink);line-height:1.3;letter-spacing:-.012em}
.ms-cmpmeta{font-size:11.5px;color:var(--ink-4)}
.ms-num{
  font-size:17px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-right:4px;
}
.ms-unit{font-size:12px;color:var(--ink-4)}
.ms-cmpcell .pill{margin:0 4px 4px 0}
.ms-cmp-tags{display:flex;flex-wrap:wrap;gap:5px}
.ms-tag-a{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;
  border-radius:var(--r-full);background:var(--paper-2);color:var(--ink-2);
  font-size:11.5px;transition:background var(--t-2),color var(--t-2),transform var(--t-2) var(--ease-out);
}
.ms-tag-a:hover{background:var(--blue-soft);color:var(--blue-ink);transform:translateY(-1px)}
.ms-cmplink{
  display:inline-flex;align-items:center;gap:5px;margin-top:2px;
  font-size:12px;color:var(--ink-3);
  transition:color var(--t-2),gap var(--t-2) var(--ease-out);
}
.ms-cmplink:hover{color:var(--blue-ink);gap:8px}
.ms-cmplink .ic{font-size:12px}

/* 打开面板时锁滚动 */
body.ms-lock{overflow:hidden}

/* ─── 响应式 ───────────────────────────────────── */
@media (max-width:980px){
  .ms-field{max-width:none;margin-left:0;flex:1 1 100%}
}
@media (max-width:640px){
  .ms-page{padding-bottom:150px}
  .ms-toolbar{gap:8px}
  .ms-toolbar .spacer{display:none}
  .ms-count{margin-left:auto}
  .ms-cmpbar{bottom:14px;width:calc(100vw - 24px)}
  .ms-cmpbar.ms-lift{bottom:96px}
  .ms-cmpbar-in{flex-wrap:wrap;border-radius:var(--r-lg);padding:12px}
  .ms-chips{flex:1 1 100%}
  .ms-cmpgo{margin-left:auto}
  .ms-modal{padding:12px}
  .ms-modal-box{max-height:92vh;width:100%}
  .ms-modal-body{padding:14px}
  .ms-compare{min-width:440px}
}