/* ============================================================
   HSK 工具 · 统一界面（hsk-ui.css）
   2026-10-07 新建：给「HSK 词表三版对照」这套 7 个功能页做统一外观。
   只负责视觉与布局，不改任何查询 / 数据逻辑。

   加载顺序（重要）：
     ../../assets/style.css   ← 全站基础（顶部导航等）
     页面内 <style>            ← 历史样式（各功能面板的细节）
     hsk-ui.css               ← 本文件，最后加载，统一覆盖
   ============================================================ */

:root{
  --hsk-page-bg:      #F5F8F6;
  --hsk-surface:      #FFFFFF;
  --hsk-surface-soft: #F0F7F3;
  --hsk-primary:      #168060;
  --hsk-primary-hover:#116B50;
  --hsk-primary-act:  #0D5942;
  --hsk-primary-soft: #E6F4EE;
  --hsk-text:         #1F332C;
  --hsk-text-2:       #66756F;
  --hsk-text-3:       #8C9994;
  --hsk-border:       #DDE7E2;
  --hsk-border-2:     #C9D8D1;
  --hsk-warning-bg:   #FFF7E5;
  --hsk-warning-tx:   #946619;
  --hsk-danger:       #C85C54;
  --hsk-radius-card:  14px;
  --hsk-radius-input: 10px;
  --hsk-radius-btn:   9px;
  --hsk-shadow:       0 1px 2px rgba(31,51,44,.05);
  --hsk-shadow-2:     0 6px 20px rgba(22,128,96,.09);
  --hsk-gap:          8px;
}

/* ---------- 页面基底 ---------- */
body.hsk-page{background:var(--hsk-page-bg);color:var(--hsk-text)}
body.hsk-page .wsep{color:var(--hsk-border)}
body.hsk-page a{color:inherit}

/* 顶部导航缩到与正文同宽，视觉上对齐 */
body.hsk-page .topbar-in{max-width:1280px;padding:11px 32px}
body.hsk-page .wrap{max-width:1280px;margin:0 auto;padding:26px 32px 72px}

/* ---------- 页面标题区 ---------- */
.hsk-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hsk-crumb{font-size:12.5px;color:var(--hsk-text-3);margin:0 0 10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hsk-crumb a{color:var(--hsk-text-2);text-decoration:none}
.hsk-crumb a:hover{color:var(--hsk-primary);text-decoration:underline}
.hsk-pagehead{margin:0 0 20px}
.hsk-pagehead h1{
  font-family:var(--sans);font-weight:700;font-size:clamp(26px,3.4vw,34px);line-height:1.2;
  letter-spacing:-.01em;color:var(--hsk-text);margin:0 0 10px;
}
.hsk-lede{font-size:15px;line-height:1.8;color:var(--hsk-text-2);margin:0;max-width:70ch}
.hsk-meta{font-size:12.5px;color:var(--hsk-text-3);margin:10px 0 0}

/* ---------- 七项功能导航（HskToolNavigation） ---------- */
.hsk-tools{
  display:flex;align-items:stretch;gap:4px;background:var(--hsk-surface);
  border:1px solid var(--hsk-border);border-radius:var(--hsk-radius-card);
  padding:6px;margin:0 0 20px;overflow-x:auto;scrollbar-width:thin;
  box-shadow:var(--hsk-shadow);
}
.hsk-tools::-webkit-scrollbar{height:6px}
.hsk-tools::-webkit-scrollbar-thumb{background:var(--hsk-border-2);border-radius:99px}
.hsk-tool{
  flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;
  border:0;background:transparent;cursor:pointer;white-space:nowrap;
  font-family:var(--sans);font-size:14px;color:var(--hsk-text-2);
  padding:11px 14px;border-radius:10px;position:relative;min-height:44px;
  transition:background .15s,color .15s;
}
.hsk-tool svg{width:17px;height:17px;flex:none}
.hsk-tool:hover{background:var(--hsk-primary-soft);color:var(--hsk-primary-hover)}
.hsk-tool:focus-visible{outline:2px solid var(--hsk-primary);outline-offset:2px}
.hsk-tool[aria-selected="true"]{
  background:var(--hsk-primary-soft);color:var(--hsk-primary);font-weight:600;
}
.hsk-tool[aria-selected="true"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;
  background:var(--hsk-primary);
}

/* ---------- 卡片 ---------- */
body.hsk-page .card{
  background:var(--hsk-surface);border:1px solid var(--hsk-border);
  border-radius:var(--hsk-radius-card);padding:22px 24px;margin-bottom:16px;
  box-shadow:var(--hsk-shadow);
}
body.hsk-page .card h2{
  font-family:var(--sans);font-size:17px;font-weight:700;color:var(--hsk-text);
  margin:0 0 6px;display:flex;align-items:center;gap:9px;
}
body.hsk-page .card h2 svg{width:18px;height:18px;color:var(--hsk-primary);flex:none}
.hsk-card-sub,.hsk-page .card .hint{font-size:13.5px;line-height:1.75;color:var(--hsk-text-2);margin:0 0 16px}

/* ---------- 表单控件 ---------- */
body.hsk-page input[type=text],body.hsk-page textarea,body.hsk-page select{
  font-family:var(--sans);font-size:14.5px;color:var(--hsk-text);background:var(--hsk-surface);
  border:1px solid var(--hsk-border);border-radius:var(--hsk-radius-input);
  padding:11px 14px;transition:border-color .15s,box-shadow .15s;
}
body.hsk-page input[type=text]{flex:1;min-width:220px;font-size:16px}
body.hsk-page input[type=text]:focus,body.hsk-page textarea:focus,body.hsk-page select:focus{
  outline:0;border-color:var(--hsk-primary);box-shadow:0 0 0 3px rgba(22,128,96,.13);background:var(--hsk-surface);
}
body.hsk-page input[type=text]:disabled,body.hsk-page textarea:disabled,body.hsk-page select:disabled{
  background:#F2F5F3;color:var(--hsk-text-3);cursor:not-allowed;
}
body.hsk-page input::placeholder,body.hsk-page textarea::placeholder{color:var(--hsk-text-3)}

/* ---------- 按钮 ---------- */
body.hsk-page button.go{
  font-family:var(--sans);font-size:14.5px;font-weight:600;cursor:pointer;
  background:var(--hsk-primary);color:#fff;border:1px solid var(--hsk-primary);
  border-radius:var(--hsk-radius-btn);padding:11px 20px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s,border-color .15s,transform .06s;
}
body.hsk-page button.go:hover{background:var(--hsk-primary-hover);border-color:var(--hsk-primary-hover)}
body.hsk-page button.go:active{background:var(--hsk-primary-act);transform:scale(.99)}
body.hsk-page button.go:focus-visible{outline:2px solid var(--hsk-primary);outline-offset:2px}
body.hsk-page button.go.ghost{background:var(--hsk-surface);color:var(--hsk-text);border-color:var(--hsk-border-2)}
body.hsk-page button.go.ghost:hover{background:var(--hsk-surface-soft);border-color:var(--hsk-primary);color:var(--hsk-primary-hover)}
body.hsk-page button.go[disabled],body.hsk-page button.go[aria-busy="true"]{
  opacity:.62;cursor:not-allowed;transform:none;
}

/* ---------- 查询区 ---------- */
.hsk-search-card{padding:24px 26px}
.hsk-search-row{display:flex;gap:12px;align-items:stretch;margin:0}
.hsk-search-row input[type=text]{height:48px;font-size:16px}
.hsk-search-row .go{flex:0 0 128px;height:48px;font-size:15px}
.hsk-search-row .go svg{width:17px;height:17px}
.hsk-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 0}
.hsk-chips .lb{font-size:12.5px;color:var(--hsk-text-3);margin-right:2px}
.hsk-chip{
  border:1px solid var(--hsk-border);background:var(--hsk-surface);color:var(--hsk-text-2);
  border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer;font-family:var(--sans);
  transition:background .15s,border-color .15s,color .15s;min-height:34px;
}
.hsk-chip:hover{background:var(--hsk-primary-soft);border-color:var(--hsk-primary);color:var(--hsk-primary-hover)}
.hsk-chip:focus-visible{outline:2px solid var(--hsk-primary);outline-offset:2px}

/* 输入框下方的状态 / 错误提示 */
.hsk-notice{
  display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.7;
  border-radius:var(--hsk-radius-input);padding:11px 14px;margin:12px 0 0;
  background:var(--hsk-surface-soft);color:var(--hsk-text-2);border:1px solid var(--hsk-border);
}
.hsk-notice[hidden]{display:none}
.hsk-notice svg{width:16px;height:16px;flex:none;margin-top:3px}
.hsk-notice.warn{background:var(--hsk-warning-bg);border-color:#F0E0BC;color:var(--hsk-warning-tx)}
.hsk-notice.danger{background:#FDF2F1;border-color:#F1D6D3;color:var(--hsk-danger)}

/* ---------- 结果区 ---------- */
.hsk-results{margin:16px 0 0}
.hsk-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:1px dashed var(--hsk-border-2);border-radius:var(--hsk-radius-card);
  background:rgba(255,255,255,.55);padding:44px 20px;color:var(--hsk-text-3);text-align:center;
}
.hsk-empty svg{width:30px;height:30px;color:var(--hsk-border-2)}
.hsk-empty p{margin:0;font-size:13.5px}
body.hsk-page .empty{
  border:1px dashed var(--hsk-border-2);border-radius:var(--hsk-radius-card);
  background:rgba(255,255,255,.6);padding:18px 20px;color:var(--hsk-text-2);font-size:13.5px;line-height:1.8;
}
body.hsk-page .empty code{background:var(--hsk-surface-soft);border-radius:6px;padding:1px 6px}

/* 词条卡 */
body.hsk-page .hit{border:0;border-top:1px solid var(--hsk-border);padding:20px 0 0;margin:20px 0 0}
body.hsk-page .hit:first-child{border-top:0;padding-top:0;margin-top:0}
body.hsk-page .word{font-family:var(--sans);font-weight:700;font-size:30px;color:var(--hsk-text)}
body.hsk-page .py{font-family:var(--mono);font-size:14.5px;color:var(--hsk-primary)}
body.hsk-page .gloss{font-size:13.5px;color:var(--hsk-text-2)}

/* 版本徽章：保留「一版一色」的数据编码，只把形状换成新皮肤 */
body.hsk-page .badges{gap:12px}
body.hsk-page .badge{
  border:1px solid var(--hsk-border);border-left-width:3px;border-radius:12px;
  background:var(--hsk-surface);padding:12px 15px;min-width:140px;box-shadow:var(--hsk-shadow);
}
body.hsk-page .badge .bt{font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--hsk-text-3)}
body.hsk-page .badge .bv{font-family:var(--sans);font-size:20px;font-weight:700}
body.hsk-page .badge .bn{font-size:12px;color:var(--hsk-text-3)}

/* 小标签 */
body.hsk-page .tag{
  font-family:var(--sans);font-size:11.5px;border-radius:6px;padding:2px 8px;
  border:1px solid var(--hsk-border);background:var(--hsk-surface-soft);color:var(--hsk-text-2);
}

/* 表格 */
body.hsk-page .scroll{border:1px solid var(--hsk-border);border-radius:12px;overflow:auto;background:var(--hsk-surface)}
body.hsk-page .scroll table{border-collapse:separate;border-spacing:0}
body.hsk-page table.wide-table,body.hsk-page .scroll table{width:100%}
body.hsk-page .scroll th{background:var(--hsk-surface-soft);color:var(--hsk-text-2);font-weight:600}
body.hsk-page .scroll th,body.hsk-page .scroll td{border-bottom:1px solid var(--hsk-border)}
body.hsk-page .scroll tr:last-child td{border-bottom:0}
body.hsk-page .scroll tbody tr:hover{background:var(--hsk-primary-soft)}

/* ---------- 版本说明 + 使用提示 双栏 ---------- */
.hsk-info-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin:16px 0 0;align-items:start}
.hsk-info-grid .card{margin-bottom:0;height:100%}
.hsk-info-soft{background:var(--hsk-surface-soft);border-color:#DCEBE2}
.hsk-vtags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 12px}
.hsk-vtag{
  font-size:12.5px;border-radius:999px;padding:5px 12px;border:1px solid var(--hsk-border);
  background:var(--hsk-surface);color:var(--hsk-text-2);
}
.hsk-vtag.o{border-color:#D5DDE4;background:#F4F7FA;color:#5A6B80}
.hsk-vtag.n{border-color:#EBDDBF;background:#FDF8EE;color:#8A6224}
.hsk-vtag.w{border-color:#CBE3D8;background:#EDF7F2;color:#1B6B4F}
.hsk-info-grid p{font-size:13.5px;line-height:1.85;color:var(--hsk-text-2);margin:0 0 8px}
.hsk-info-grid ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.9;color:var(--hsk-text-2)}
.hsk-info-grid li{margin-bottom:4px}

/* ---------- 其它面板的公共观感 ---------- */
body.hsk-page .panel{margin:0}
body.hsk-page .ctl{display:flex;flex-wrap:wrap;gap:12px}
body.hsk-page .field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--hsk-text-2)}
body.hsk-page .field label{font-weight:600;color:var(--hsk-text-2)}
body.hsk-page .stats{display:flex;gap:12px;flex-wrap:wrap}
body.hsk-page .stat{border:1px solid var(--hsk-border);border-radius:12px;background:var(--hsk-surface);padding:12px 16px}
body.hsk-page .stat .sv{font-size:20px;font-weight:700;color:var(--hsk-text)}
body.hsk-page .stat .sn{font-size:12px;color:var(--hsk-text-3)}
body.hsk-page .chip{
  display:inline-block;font-size:12.5px;border:1px solid var(--hsk-border);border-radius:999px;
  padding:4px 11px;margin:3px 4px 3px 0;cursor:pointer;background:var(--hsk-surface);color:var(--hsk-text-2);
}
body.hsk-page .chip:hover{background:var(--hsk-primary-soft);border-color:var(--hsk-primary);color:var(--hsk-primary-hover)}
body.hsk-page .note{
  border:1px solid var(--hsk-border);border-left:3px solid var(--hsk-primary);
  border-radius:12px;background:var(--hsk-surface-soft);padding:12px 16px;margin-top:14px;
  font-size:13px;line-height:1.85;color:var(--hsk-text-2);
}
body.hsk-page footer#foot{
  margin-top:26px;padding:18px 2px 0;border-top:1px solid var(--hsk-border);
  font-size:12.5px;line-height:1.9;color:var(--hsk-text-3);
}
body.hsk-page footer#foot b{color:var(--hsk-text-2)}
body.hsk-page .kv{color:var(--hsk-text-3)}

/* 悬浮返回胶囊 & 署名：跟着新配色走 */
body.hsk-page #site-back{background:rgba(255,255,255,.94);border-color:var(--hsk-border);color:var(--hsk-text-2)}
body.hsk-page #site-back a{color:var(--hsk-text)}
body.hsk-page #sig-corner{background:rgba(255,255,255,.9);border-color:var(--hsk-border);color:var(--hsk-text-3)}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .hsk-info-grid{grid-template-columns:1fr}
  body.hsk-page .topbar-in{padding:11px 24px}
  body.hsk-page .wrap{padding:24px 24px 64px}
}
@media (max-width:760px){
  .hsk-tools{border-radius:12px;padding:5px}
  .hsk-tool{font-size:13.5px;padding:10px 12px}
  .hsk-search-row{flex-direction:column}
  .hsk-search-row .go{flex:1 1 auto;width:100%}
  .hsk-search-card{padding:20px 18px}
}
@media (max-width:640px){
  body.hsk-page .topbar-in{padding:10px 16px}
  body.hsk-page .wrap{padding:20px 16px 56px}
  body.hsk-page .card{padding:18px 16px;border-radius:12px}
  .hsk-pagehead h1{font-size:24px}
  .hsk-lede{font-size:14px}
  body.hsk-page input[type=text]{min-width:0}
  .hsk-tool{min-height:44px}
}

/* ---------- 动画偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .hsk-tool,.hsk-chip,body.hsk-page button.go,body.hsk-page input{transition:none}
}

/* ---------- 护眼模式（html[data-theme="dim"]） ----------
   页面本体没做深色皮肤，这里只把这次新增/改动的组件对齐站内暗色底，
   避免出现「深色背景 + 刺眼白卡」。色值取自 assets/style.css 的 dim 变量。 */
html[data-theme="dim"]{
  --hsk-page-bg:#241e19;
  --hsk-surface:#312922;
  --hsk-surface-soft:#2b241f;
  --hsk-primary:#8fbfa4;
  --hsk-primary-hover:#a8d2ba;
  --hsk-primary-act:#7fae94;
  --hsk-primary-soft:rgba(143,191,164,.14);
  --hsk-text:#f0e7d9;
  --hsk-text-2:#c2b5a3;
  --hsk-text-3:#a99c8b;
  --hsk-border:#4a3f35;
  --hsk-border-2:#5a4d42;
  --hsk-warning-bg:#3a3020;
  --hsk-warning-tx:#e0c48a;
  --hsk-shadow:none;
  --hsk-shadow-2:none;
}
html[data-theme="dim"] body.hsk-page button.go{color:#1c2a22}
html[data-theme="dim"] body.hsk-page .hsk-empty{background:rgba(49,41,34,.6)}
html[data-theme="dim"] body.hsk-page .scroll th{background:#342c25}
html[data-theme="dim"] body.hsk-page .note{border-left-color:var(--hsk-primary)}
html[data-theme="dim"] .hsk-tools{background:var(--hsk-surface)}

/* 加载中的小转圈 */
.hsk-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;animation:hsk-spin .7s linear infinite}
@keyframes hsk-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hsk-spin{animation-duration:1.6s}}

/* ---------- 打印 ---------- */
@media print{
  body.hsk-page{background:#fff}
  .hsk-tools,.hsk-chips,.topbar,.nav-toggle,#site-back{display:none!important}
  body.hsk-page .card{box-shadow:none;break-inside:avoid}
}