/* ============================================================
   10-14：dict.html 专用样式 · 紫主题
   依赖 shared-orange.css 已登记 --o-violet-* 家族
   范围：页面骨架 + hero + 搜索框 + 推荐卡 + 详情层
   M2 时详情层抽 word-detail.js/css，本文件仅保留页面骨架
   ============================================================ */

/* ---- 页面底色（贴参考图浅紫底） ---- */
body{
  background:
    radial-gradient(1200px 600px at 50% -120px, var(--o-violet-50) 0%, transparent 60%),
    var(--o-bg);
  min-height:100vh;
}

/* ---- 返回按钮（10-14 柴「返回按钮移至最右侧」：
   hero 行末 · margin-left:auto 推到右端，与 IP / 文案同一行同轴心。
   曾为 fixed + 左上角 (M5)，再为 hero 行首 (M12 初版误读箭头方向)，
   最终位置：hero 行末（柴原话"返回放至最右侧，而非左侧"）——
   三轮的位置变迁都标在源码注释里以防再误改） ---- */
.dict-back{
  flex:none;
  margin-left:auto;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--o-r-full);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border:1px solid var(--o-violet-200);
  color:var(--o-text-2);
  box-shadow:var(--o-sh-2);
  transition:.18s;
}
.dict-back svg{width:18px;height:18px;}
.dict-back:hover{
  background:var(--o-violet-500);border-color:var(--o-violet-500);color:#fff;
  transform:translateY(-2px);box-shadow:var(--o-sh-3);
}
.dict-back:active{transform:translateY(0) scale(.96);}
@media (max-width:768px){
  .dict-back{width:38px;height:38px;}
}

/* ---- 页面主区（10-14 柴「整个搜索页面内容区域在页面中始终保持垂直居中对齐」） ----
   · min-height 撑满视口 + 上下「弹性占位伪元素」→ 内容恒垂直居中。
     用弹性 spacer 而非 justify-content:center —— 后者在内容高于视口时会把顶部裁掉
     （spacer 在空间不足时自动收缩到 0，内容照常从头显示、页面可滚）。
   · M8 的固定顶距 88 / 窄屏 64（「让整体下移」）已被"垂直居中"取代 → 改为对称安全边距 40px。 */
.dict-main{
  max-width:760px;width:100%;margin:0 auto;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  padding:40px 28px;box-sizing:border-box;
}
.dict-main::before,.dict-main::after{content:'';flex:1 1 0;min-height:0;}

/* ---- Hero 块（10-14 柴：IP 居左 + 文案右侧 · 全部左对齐 · IP 纯静态；
   10-14 柴「左右向内缩放 + 适当增加左右边距，与下面的输入框形成错落感」
   → hero 行左右各内缩 56px（窄屏逐级收档），比 .dict-search 窄一圈 → 错落） ---- */
.dict-hero{
  display:flex;align-items:center;
  gap:20px;margin-bottom:34px;
  padding:0 56px;
}
.dict-hero-txt{flex:1 1 auto;min-width:0;text-align:left;}
.dict-hero h1{
  font-size:30px;font-weight:800;color:var(--o-text);
  letter-spacing:.5px;
}
.dict-hero .sub{
  margin-top:8px;font-size:14px;color:var(--o-text-3);
}

/* IP 形象：纯静态 —— 10-14 柴「删除IP动效」：静默浮动(上轮) + hover 摆动 + 点击弹动 三档全撤，
   无任何 animation / transition / :hover 态。仅保留 cursor:pointer 与「点击聚焦搜索框」功能 */
.dict-ip-wrap{
  flex:none;display:block;line-height:0;
}
.dict-ip{
  display:block;width:104px;height:auto;cursor:pointer;
  filter:drop-shadow(0 10px 16px rgba(124,77,255,.16));
}

/* ---- Hero 窄屏适配 ----
   ⚠️ 必须写在 .dict-hero / .dict-ip 定义之后：同特异性按源码顺序决胜，
      写在前面会被 base 定义覆盖（曾致 390 档 IP 不缩、gap 不收）。
   10-14 柴「左右向内缩放 + 适当增加左右边距，与下面的输入框形成错落感」——
      hero 比 .dict-search 窄一圈形成错落：1440 内缩 56px / 1024 内缩 36px / 768 内缩 16px。
   M8 固定顶距 64px 已被「弹性 spacer 垂直居中」取代 → 这里不再加 padding-top。 */
@media (max-width:1024px){
  .dict-hero{padding:0 36px;}            /* 中等屏内缩 36px */
}
@media (max-width:768px){
  .dict-ip{width:80px;}
  .dict-hero{gap:14px;padding:0 16px;}   /* 窄屏内缩 16px · 与 gap 同步收档 */
  .dict-hero .sub{font-size:13px;}
}

/* ---- 搜索框（贴参考图） ---- */
.dict-search{
  background:var(--o-white);border:1px solid #eae6f2;border-radius:14px;
  padding:6px 8px 6px 22px;display:flex;align-items:center;gap:12px;
  box-shadow:6px 4px 18px rgba(90,60,180,.08);
  transition:.18s;
}
.dict-search:focus-within{border-color:var(--o-violet-300);box-shadow:6px 6px 24px rgba(124,77,255,.18);}
.dict-search .ico{color:var(--o-text-3);flex:0 0 auto;display:flex;}
.dict-search input{
  flex:1;border:0;outline:none;font-size:15px;background:transparent;
  color:var(--o-text);font-family:inherit;padding:14px 0;
}
.dict-search input::placeholder{color:#b7b2c4;}
.dict-search .btn{
  background:var(--o-violet-500);color:#fff;border:0;border-radius:10px;
  padding:13px 28px;font-size:15px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:.18s;white-space:nowrap;
}
.dict-search .btn:hover{background:var(--o-violet-600);transform:translateY(-1px);}
.dict-search .btn:active{transform:translateY(0);}
.dict-hint{
  text-align:center;font-size:12.5px;color:var(--o-text-4);margin-top:12px;
  min-height:18px;
}
.dict-hint.is-err{color:var(--o-danger);}
.dict-hint.is-ok{color:var(--o-success);}

/* ---- 卡片容器（最近搜索 · 贴参考图；10-14 删今日推荐后仅余此卡） ---- */
.dict-card{
  background:var(--o-white);border:1px solid #eae6f2;border-radius:14px;
  padding:22px 24px;margin-top:22px;
}
.dict-card-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.dict-card-head .t{font-size:15.5px;font-weight:700;color:var(--o-text);}
.dict-card-head .r{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--o-text-3);}
.dict-card-head .r .lk{
  cursor:pointer;transition:.18s;user-select:none;
}
.dict-card-head .r .lk:hover{color:var(--o-violet-500);}
.dict-card-head .r .lk.is-del{color:var(--o-danger);}
.dict-card-head .r .lk.is-del:hover{color:var(--o-danger-deep);}
.dict-card-head .r .ico-btn{
  cursor:pointer;background:transparent;border:0;padding:4px;color:var(--o-text-3);
  display:flex;align-items:center;border-radius:6px;transition:.16s;
}
.dict-card-head .r .ico-btn:hover{background:var(--o-violet-50);color:var(--o-violet-500);}

/* ---- 搜索历史 chips ---- */
.dict-chips{display:flex;flex-wrap:wrap;gap:10px;}
.dict-chip{
  background:var(--o-violet-50);border-radius:999px;padding:7px 18px;
  font-size:13px;color:#4a4260;cursor:pointer;transition:.16s;
  border:1px solid transparent;display:inline-flex;align-items:center;gap:6px;
}
.dict-chip:hover{background:var(--o-violet-100);border-color:var(--o-violet-200);color:var(--o-violet-600);}
.dict-chip.is-edit .x{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:var(--o-violet-200);color:#fff;
  font-size:10px;font-weight:700;
}
.dict-chip.is-edit .x:hover{background:var(--o-danger);}

/* 10-14 柴「无搜索记录时，默认为不显示」：.dict-chip-empty（「暂无搜索记录」空态）随改动撤除 ——
   空记录时整卡 hidden，不再有"卡在但里面是空文案"的中间态。
   .dict-card[hidden] 显式兜底：UA 的 [hidden]{display:none} 会被后续任何 .dict-card 的
   display 声明覆盖，写死一条避免以后加 display 时静默失效 */
.dict-card[hidden]{display:none;}

/* 10-14 柴「删除今日推荐」：.dict-rec-grid / .dict-rec 全族（含 8 档 thumb 色阶 + 两条窄屏媒体查询）随卡撤除；
   .dict-card / .dict-card-head 保留 —— 最近搜索卡仍在用 */

/* ---- 详情层（薄委托版 · M2 抽单源后会迁出） ---- */
.dict-detail-mask{
  position:fixed;inset:0;background:rgba(20,12,40,.42);z-index:50;
  display:none;align-items:flex-start;justify-content:center;
  padding:6vh 20px 4vh;
}
.dict-detail-mask.is-on{display:flex;}
.dict-detail{
  background:#fff;width:100%;max-width:640px;max-height:86vh;
  border-radius:16px;box-shadow:0 20px 60px rgba(60,30,140,.28);
  display:flex;flex-direction:column;overflow:hidden;
  animation:dict-rise .26s cubic-bezier(.22,.94,.4,1.0);
}
@keyframes dict-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.dict-detail-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--o-border);
}
.dict-detail-head .ttl{font-size:15px;font-weight:700;color:var(--o-text);}
.dict-detail-head .cl{
  background:transparent;border:0;color:var(--o-text-3);cursor:pointer;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;transition:.16s;
}
.dict-detail-head .cl:hover{background:var(--o-violet-50);color:var(--o-violet-500);}
.dict-detail-body{padding:18px 22px 22px;overflow-y:auto;flex:1;}

/* ---- 详情层内字段 ---- */
.dict-detail .wd-word{
  font-size:32px;font-weight:800;color:var(--o-violet-600);
  letter-spacing:.3px;margin-bottom:8px;
}
.dict-detail .wd-phon{
  display:flex;align-items:center;gap:8px;color:var(--o-text-3);
  font-size:14px;margin-bottom:14px;font-style:italic;
}
.dict-detail .wd-phon .spk{
  background:transparent;border:0;color:var(--o-violet-500);
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:.16s;
}
.dict-detail .wd-phon .spk:hover{background:var(--o-violet-50);}
.dict-detail .wd-means{margin-bottom:16px;}
.dict-detail .wd-means li{font-size:14.5px;color:var(--o-text-2);margin:4px 0;}
.dict-detail .wd-means li b{color:var(--o-violet-600);font-weight:600;margin-right:6px;}
.dict-detail .wd-sect{margin-top:18px;}
.dict-detail .wd-sect h4{
  font-size:13px;color:var(--o-violet-500);font-weight:700;
  margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
.dict-detail .wd-sect h4::before{
  content:'';width:3px;height:13px;background:var(--o-violet-500);border-radius:2px;
}
.dict-detail .wd-usage{font-size:14px;color:var(--o-text-2);line-height:1.7;}
.dict-detail .wd-tip{
  background:linear-gradient(135deg,var(--o-violet-50),#fff);
  border:1px dashed var(--o-violet-200);border-radius:10px;
  padding:12px 16px;font-size:13.5px;color:var(--o-violet-600);
  line-height:1.6;margin-top:14px;
}
.dict-detail .wd-ex .it{
  background:#f7f5fc;border-radius:8px;padding:10px 14px;margin-bottom:8px;
}
.dict-detail .wd-ex .it .en{font-size:14px;color:var(--o-text);font-weight:600;}
.dict-detail .wd-ex .it .zh{font-size:13px;color:var(--o-text-3);margin-top:3px;}
.dict-detail .wd-ex .it .sc{font-size:11px;color:var(--o-violet-500);margin-bottom:4px;display:inline-block;}
.dict-detail .wd-phr li{font-size:14px;color:var(--o-text-2);margin:4px 0;}
.dict-detail .wd-phr li b{color:var(--o-text);margin-right:8px;}
.dict-detail .wd-empty{
  background:var(--o-violet-50);border-radius:10px;padding:18px;text-align:center;
  color:var(--o-violet-600);font-size:13.5px;line-height:1.7;
}
.dict-detail .wd-empty .big{font-size:22px;font-weight:700;color:var(--o-violet-500);}

/* 详情层：简版（DICT_SIMPLE 命中） */
.dict-detail.is-simple .wd-word{font-size:24px;}
.dict-detail.is-simple .wd-mean{
  font-size:16px;color:var(--o-text);font-weight:600;margin-bottom:10px;
}