/* ==========================================================================
   sds.ruban.asia —— 危险化学品 SDS 查询站（独立视觉层）
   --------------------------------------------------------------------------
   只在 sds 子域加载（见 base.html 的 {% if sds %} 分支），全部规则作用域限定在
   body.sds-site，不污染主站页面。

   设计取向刻意与主站工具页区分开：
     · 不用主站那种深蓝渐变的 .tool-hero 大框，标题直接落在浅灰底上，靠留白分层；
     · 以「大搜索框」为页面唯一主角，用尺寸 / 描边 / 投影建立层级，而不是色块堆叠；
     · 品牌深蓝与橙只出现在文字和按钮上，不铺大面积底色。
   ========================================================================== */

body.sds-site{background:#F4F6F9;color:#16232E}
body.sds-site main{max-width:820px;margin:0 auto;padding:0 20px 56px}

/* ---------- 页头：细条，不做成"框" ---------- */
.sds-nav{background:#0A2A44;color:#fff}
.sds-nav-inner{max-width:820px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:12px}
.sds-mark{flex:none;font:700 14px/1 ui-monospace,Consolas,monospace;letter-spacing:.06em;
  padding:8px 9px;border-radius:7px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2)}
.sds-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.sds-copy strong{font-size:16px;font-weight:600;letter-spacing:.01em}
.sds-copy small{font-size:12px;color:#A3BED6;line-height:1.4}

/* ---------- 标题区（替代主站深蓝 hero）---------- */
.sds-intro{padding:42px 0 26px;text-align:center}
.sds-intro h1{margin:0 0 11px;font-size:29px;font-weight:700;line-height:1.3;
  color:#0A2A44;letter-spacing:.01em}
.sds-intro p{margin:0 auto;max-width:540px;font-size:14px;line-height:1.8;color:#6B7A88}
/* 已有查询词时收起标题区，把结果顶上来（搜索框保持在标题下方） */
.sds-intro.compact{padding:24px 0 16px}
.sds-intro.compact h1{font-size:22px;margin:0}

/* ---------- 大搜索框：页面主角 ---------- */
.sds-search{display:flex;align-items:center;gap:10px;height:64px;padding:0 8px 0 20px;
  background:#fff;border:1.5px solid #DDE5EE;border-radius:16px;
  box-shadow:0 1px 2px rgba(16,42,67,.04),0 14px 30px -16px rgba(16,42,67,.2);
  transition:border-color .18s ease,box-shadow .18s ease}
.sds-search:focus-within{border-color:#E8703A;
  box-shadow:0 0 0 4px rgba(232,112,58,.12),0 14px 30px -16px rgba(16,42,67,.24)}
.sds-si{flex:none;width:21px;height:21px;fill:none;stroke:#A6B4C1;stroke-width:1.9;
  stroke-linecap:round;transition:stroke .18s}
.sds-search:focus-within .sds-si{stroke:#E8703A}
.sds-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;
  font-size:16px;color:#16232E;font-family:inherit}
.sds-search input::placeholder{color:#9FAEBB}
.sds-search button{flex:none;height:48px;padding:0 32px;border:0;border-radius:11px;
  background:#E8703A;color:#fff;font-size:15.5px;font-weight:600;font-family:inherit;
  cursor:pointer;transition:background .15s}
.sds-search button:hover{background:#CE5A26}
.sds-search button:active{transform:translateY(1px)}

/* 热门检索：让搜索区不至于只有一根光杆输入框 */
.sds-hot{margin-top:16px;text-align:center;font-size:13px;color:#93A2AF;line-height:2.3}
.sds-hot a{display:inline-block;margin:0 3px;padding:4px 12px;border-radius:18px;background:#fff;
  border:1px solid #E3EAF2;color:#4E6172;text-decoration:none;font-size:13px;
  transition:border-color .15s,color .15s}
.sds-hot a:hover{border-color:#E8703A;color:#CE5A26}

/* ---------- 结果区 ---------- */
.result-meta{margin:24px 0 14px;color:#66757F;font-size:13.5px}
.result-meta b{color:#0A2A44;font-size:16px}
.res-list{display:flex;flex-direction:column;gap:10px}
.res-item{display:flex;align-items:center;gap:16px;padding:17px 20px;background:#fff;
  border:1px solid #E3EAF2;border-radius:13px;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.res-item:hover{border-color:#C6D6E4;box-shadow:0 8px 22px -12px rgba(16,42,67,.28);
  transform:translateY(-1px)}
.res-name{font-size:16px;font-weight:600;color:#0A2A44}
.res-sub{margin-top:6px;display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:#7A8A97}
.res-sub .mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
.aliases-line{color:#8C9BA8}
.res-thi{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.res-arrow{color:#C3CFDA;transition:color .15s,transform .15s}
.res-item:hover .res-arrow{color:#E8703A;transform:translateX(3px)}
.badge.blue{background:#0A2A44}
.wh-pager{display:flex;gap:12px;justify-content:center;align-items:center;margin:22px 0 4px;flex-wrap:wrap}
.wh-pager .btn-outline{background:#fff;border-color:#DDE5EE;color:#0A2A44}
.wh-pager .btn-outline:hover{border-color:#E8703A;color:#CE5A26}

/* 空状态 / 未找到 */
.empty{padding:44px 22px;margin-top:22px;background:#fff;border:1px solid #E3EAF2;
  border-radius:15px;color:#7A8A97;font-size:14px;line-height:2;text-align:center}
.empty small{color:#9AA9B6;font-size:12.5px}

/* ---------- 详情页（whpdj_substance）在 sds 站下的微调 ---------- */
.sds-site .sub-head h1{font-size:26px}
.sds-site .back{color:#7A8A97}

/* ---------- 页脚 ---------- */
.sds-foot{margin-top:40px;padding:18px 20px 28px;border-top:1px solid #E3EAF2;
  text-align:center;font-size:12.5px;color:#8C9BA8;line-height:1.95}
.sds-foot a{color:#8C9BA8}

/* ---------- 手机 ---------- */
@media (max-width:640px){
  body.sds-site main{padding:0 15px 40px}
  .sds-nav-inner{padding:11px 15px;gap:10px}
  .sds-copy strong{font-size:15px}
  .sds-copy small{font-size:11.5px}
  .sds-intro{padding:28px 0 20px}
  .sds-intro h1{font-size:23px}
  .sds-intro p{font-size:13px;line-height:1.75}
  .sds-intro.compact{padding:15px 0 12px}
  .sds-intro.compact h1{font-size:18px}
  /* 搜索框在窄屏仍是「输入 + 按钮」一行，按钮不换行、不塌成整条 */
  .sds-search{height:56px;padding:0 6px 0 15px;gap:8px;border-radius:14px}
  .sds-si{width:19px;height:19px}
  .sds-search input{font-size:15px}
  .sds-search button{height:44px;padding:0 20px;font-size:14.5px;border-radius:10px}
  .sds-hot{margin-top:13px;font-size:12.5px}
  .sds-hot a{padding:3px 10px;font-size:12.5px}
  .res-item{padding:15px 16px;gap:11px;border-radius:12px}
  .res-name{font-size:15px}
  .res-sub{gap:10px;font-size:12.5px}
  .empty{padding:34px 18px}
  .sds-foot{margin-top:30px;padding:16px 15px 24px}
}