/* =========================================================
   观澜堂 · UI 精修 ui-refine.css
   在 style.css + typography.css 之后加载。
   只做“细节对齐、层次、交互态”的收拾，不改布局骨架与配色。
   ========================================================= */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --radius-card:6px;
  --radius-mat:5px;
  --radius-img:3px;
  --ring:0 0 0 3px rgba(182,135,74,.28);
}

/* 键盘焦点态统一 */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- 2. 按钮：高度统一 + 按压反馈 ---------- */
.btn{min-height:44px;padding:0 26px;box-shadow:0 1px 2px rgba(20,19,15,.04)}
.btn-lg{min-height:50px;padding:0 34px}
.nav-cta .btn{min-height:38px;padding:0 18px}
.btn:active{transform:translateY(0) scale(.985)}
.btn-gold:hover{box-shadow:0 10px 24px rgba(182,135,74,.26)}
.btn-outline:hover{box-shadow:0 10px 24px rgba(20,19,15,.12)}
.hero .cta .btn-gold{box-shadow:0 12px 30px rgba(182,135,74,.3)}
.chip{min-height:38px;padding:8px 18px;transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease}
.chip:hover{box-shadow:0 4px 12px rgba(182,135,74,.16)}

/* ---------- 3. 卡片系统：内边距随列数收缩 ---------- */
.card,.info-card{border-radius:var(--radius-card);padding:clamp(22px,2.3vw,30px);border-color:var(--line)}
.card:hover{box-shadow:var(--shadow-m)}
.card .ic{width:46px;height:46px;border-radius:9px}
.grid-4 .card{padding:clamp(18px,1.8vw,24px)}
.grid-4 .card .ic{width:42px;height:42px;font-size:17px;margin-bottom:12px}
.sec-head{margin-bottom:clamp(26px,3vw,42px)}
.works-head{gap:20px}
.works-head .filters{padding-bottom:4px}

/* ---------- 4. 作品墙：装裱更精致 ---------- */
.works-grid{column-gap:18px;margin-top:30px}
.work{margin-bottom:18px}
.work .mat{padding:10px;border-radius:var(--radius-mat);border-color:rgba(20,19,15,.06);background:#fff}
.work img{border-radius:var(--radius-img);background:var(--paper-2)}
.work:hover .mat{transform:translateY(-6px);box-shadow:0 22px 48px rgba(20,19,15,.18)}
.work .cap{padding:10px 2px 2px;font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.work .cap b{font-size:12.5px;font-weight:600;color:var(--ink-3);letter-spacing:.04em}
.work:hover .cap b{color:var(--gold-ink)}
.works-more{margin-top:30px}

/* ---------- 5. 深色页头与纸色衔接 ---------- */
.page-head{padding:clamp(52px,6.2vw,78px) 0 clamp(44px,5.2vw,64px)}
.page-head:after{background:linear-gradient(180deg,transparent 62%,rgba(247,244,238,.06) 100%),radial-gradient(closest-side,rgba(208,167,101,.16),transparent 70%)}
.page-head .crumb{margin-bottom:16px;letter-spacing:.04em}
.page-head h1{max-width:18em}
.page-head p{margin-top:18px;max-width:640px}

/* ---------- 6. 联系页：左右卡片对齐、信息行更好读 ---------- */
.info-card h3,.lead-form h3{font-size:19.5px;line-height:1.4;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.lead-form{padding:clamp(22px,2.3vw,30px);border-radius:var(--radius-card)}
.lead-form .desc{margin-bottom:18px}
.info-card .contact-line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;margin:12px 0;line-height:1.7}
.info-card .contact-line b{width:auto;min-width:72px;padding-top:1px;color:var(--muted)}
.info-card .contact-line a{word-break:break-all}
.field{margin-bottom:16px}
.field label{margin-bottom:8px;color:var(--ink-3);font-weight:500}
.field input,.field select,.field textarea{min-height:48px;border-radius:10px;background:#fbf9f4;padding:12px 16px}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 21px) calc(50% + 1px),calc(100% - 16px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:44px;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(182,135,74,.42)}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:var(--ring)}
.lead-form .btn[type=submit]{min-height:50px;margin-top:10px}

/* ---------- 7. 表格与榜单 ---------- */
.table-wrap{border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--line)}
table.tier{border-collapse:separate;border-spacing:0}
table.tier th{padding:13px 16px}
table.tier td{padding:13px 16px}
table.tier tbody tr:nth-child(even){background:rgba(20,19,15,.018)}
table.tier tbody tr:last-child td{border-bottom:0}

/* ---------- 8. 页脚 ---------- */
.site-footer .cols{gap:clamp(24px,3vw,40px)}
.site-footer a{padding:5px 0}
.site-footer .bottom{padding-top:18px;letter-spacing:.02em}

/* ---------- 9. 悬浮客服：不抢视线 ---------- */
.cs-launcher{opacity:.94;box-shadow:0 14px 34px rgba(20,19,15,.3)}
.cs-launcher:hover{opacity:1}
@media(max-width:860px){.cs-launcher{bottom:84px;right:14px}}

/* ---------- 10. 图片与细节 ---------- */
.frame img{border-radius:var(--radius-img)}
::selection{background:rgba(208,167,101,.42);color:var(--ink)}
section[id],h2[id],h3[id],div[id]{scroll-margin-top:104px}

/* ---------- 11. 窄屏 ---------- */
@media(max-width:680px){
  .btn{min-height:46px}
  .btn-lg{min-height:48px;padding:0 26px}
  .card,.info-card{padding:20px}
  .works-grid{column-gap:12px}
  .work{margin-bottom:14px}
  .work .mat{padding:7px}
  .work .cap{padding-top:8px}
  .info-card .contact-line{grid-template-columns:1fr;gap:2px}
  .info-card .contact-line b{min-width:0}
}

/* ---------- 12. 两个客服入口不要叠在一起 ----------
   gl-chat-fab（AI 咨询）：主入口，固定右下角
   cs-launcher（在线咨询）：次入口，挪到 AI 按钮正上方
   两个面板都抬高，避免互相遮挡 */
.gl-chat-fab{right:22px;bottom:22px;height:52px;padding:0 17px 0 13px;font-size:14.5px}
.gl-chat-fab:hover{transform:translateY(-2px)}
.gl-chat-panel{bottom:86px}

.cs-launcher{right:22px;bottom:88px;font-size:13.5px;padding:11px 17px 11px 13px}
.cs-panel{right:22px;bottom:88px;z-index:10000;height:min(540px,calc(100vh - 150px))}

/* 打开任一面板时，把另一个入口让开，避免按钮压住面板内容 */
@media(max-width:860px){
  .gl-chat-fab{right:14px;bottom:76px}
  .gl-chat-panel{right:12px;left:12px;width:auto;bottom:140px;height:min(560px,calc(100vh - 210px))}
  .cs-launcher{right:14px;bottom:138px}
  .cs-panel{right:12px;left:12px;bottom:140px;width:auto;height:min(540px,calc(100vh - 215px))}
}