/* Contact page —— Overview / Sales / Distributors tabs */

.ct-hero{padding:80px 0 44px;overflow:visible;position:relative;z-index:2}
.ct-hero-inner{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.ct-hero-text{text-align:left;max-width:680px}
.ct-hero h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.03em;margin:0 0 16px}
.ct-hero p{color:var(--ink-soft);font-size:clamp(16px,1.9vw,20px);line-height:1.65;margin:0}
.ct-hero-figure{margin:0;padding:0;align-self:stretch;display:flex;align-items:flex-end;justify-content:flex-start}
.ct-hero-figure img{width:100%;max-width:540px;height:auto;display:block;margin-bottom:-64px}

.ct-tabs-section{padding-top:0;position:relative;z-index:1}
.ct-tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:36px}
.ct-tab{position:relative;padding:14px 18px;font-size:15px;font-weight:700;color:var(--muted);background:none;border:none;cursor:pointer;transition:.2s}
.ct-tab:hover{color:var(--ink)}
.ct-tab.active{color:var(--blue)}
.ct-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue)}

.ct-panel{display:none;animation:ctFade .25s ease}
.ct-panel.active{display:block}
@keyframes ctFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.ct-panel-head{margin-bottom:28px}
.ct-panel-head h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin:0 0 8px}
.ct-panel-head p{color:var(--muted);font-size:17px;margin:0}

.ct-overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ct-info-card{padding:28px 26px}
.ct-info-label{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ct-info-value{font-size:18px;font-weight:700;color:var(--ink);line-height:1.5}

.ct-sales-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
.ct-sales-aside{display:flex;flex-direction:column;gap:20px}
.ct-form{padding:32px 30px;display:flex;flex-direction:column;gap:20px}
.ct-form-row{display:flex;flex-direction:column;gap:8px}
.ct-form-row label{font-size:14px;font-weight:700;color:var(--ink)}
.ct-label-line{display:flex;align-items:baseline;gap:6px}
.ct-opt{font-size:12px;font-weight:500;color:var(--muted)}
.ct-form-row input,
.ct-form-row textarea,
.ct-form-row select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:15px;background:#fff;transition:.2s}

/* —— 应用场景下拉：去原生外观，自绘 chevron，与输入框同一设计语言 —— */
.ct-form-row select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:12px 42px 12px 14px;
  background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A919C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px 16px;
  color:var(--ink);cursor:pointer;
}
.ct-form-row select:hover{border-color:#C8D8FF}
.ct-form-row select option{color:var(--ink);background:#fff}
/* 未选择时（停在「请选择…」占位项）文字用弱化色，选后恢复正常（触屏原生视图沿用） */
.ct-form-row select:has(option[value=""]:checked){color:var(--muted)}

/* —— 桌面端自定义下拉（js/scenario-select.js 注入；触屏不增强、不产生这些节点） —— */
.ct-select{position:relative}
/* 增强后真 select 视觉隐藏（display:none 也行，但保留可聚焦性无意义，直接藏干净） */
.ct-select-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.ct-select-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 42px 12px 14px;border:1px solid var(--line);border-radius:12px;
  font-size:15px;color:var(--ink);background:#fff;text-align:left;cursor:pointer;transition:.2s;
  font-family:inherit;line-height:1.4;
}
.ct-select-btn > svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);transition:transform .22s ease;flex:none}
.ct-select-btn:hover{border-color:#C8D8FF}
.ct-select-btn:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)}
.ct-select.open .ct-select-btn{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)}
.ct-select.open .ct-select-btn > svg{transform:translateY(-50%) rotate(180deg)}
.ct-select.is-placeholder .ct-select-btn span{color:var(--muted)}

.ct-select-list{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px -14px rgba(31,54,90,.22);
  max-height:min(288px,42vh);overflow:auto;
  /* 自绘浅色滚动条（默认太重，压卡片视觉） */
  scrollbar-width:thin;scrollbar-color:#DCE4EF transparent;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
}
.ct-select-list::-webkit-scrollbar{width:6px}
.ct-select-list::-webkit-scrollbar-track{background:transparent}
.ct-select-list::-webkit-scrollbar-thumb{background:#DCE4EF;border-radius:3px}
.ct-select-list::-webkit-scrollbar-thumb:hover{background:#C8D4E4}
.ct-select.open .ct-select-list{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.ct-select-list li{
  padding:10px 12px;border-radius:8px;font-size:14.5px;color:var(--ink);
  cursor:pointer;line-height:1.4;transition:background .12s ease;
}
.ct-select-list li:hover,
.ct-select-list li.is-active{background:var(--blue-50)}
.ct-select-list li[aria-selected="true"]{color:var(--blue-600);font-weight:700;background:var(--blue-50)}
@media (prefers-reduced-motion:reduce){
  .ct-select-list{transition:none}
  .ct-select-btn > svg{transition:none}
}
.ct-form-row input:focus,
.ct-form-row textarea:focus,
.ct-form-row select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)}
.ct-form .btn-primary{align-self:flex-start}
.ct-form-hint{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.ct-form .btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* 表单提交状态条（sending / success / error） */
.ct-form-status{margin:0;font-size:14px;line-height:1.5;padding:10px 14px;border-radius:10px;border:1px solid transparent;word-break:break-word}
.ct-form-status.is-sending{background:#F2F6FF;border-color:#C8D8FF;color:#2E6BFF}
.ct-form-status.is-success{background:#E9F8EE;border-color:#B7E5C4;color:#1A7F3A}
.ct-form-status.is-error{background:#FDECEC;border-color:#F4C0C0;color:#B23A3A}
/* 状态提示每次变更都重放一次入场动画（含连续失败时文案完全相同的情况） */
.ct-form-status.is-anim{animation:ctStatusIn .3s cubic-bezier(.22,.61,.36,1) both}
.ct-form-status.is-error.is-anim{animation:ctStatusShake .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes ctStatusIn{from{opacity:.4;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes ctStatusShake{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}
  40%,60%{transform:translateX(4px)}
}

.ct-sales-info{padding:32px 30px}
.ct-sales-info h3{font-size:20px;margin:0 0 10px;letter-spacing:-.01em}
.ct-sales-info > p{color:var(--muted);font-size:15px;margin:0 0 22px}
.ct-sales-line{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.ct-sales-line:last-child{border-bottom:none}
.ct-sales-k{color:var(--muted);font-weight:600}
/* 邮箱 / 电话值：纯文本，不再是链接（2026-09-04） */
.ct-sales-line a{color:var(--blue);font-weight:700}
.ct-sales-v{
  display:inline-flex;align-items:center;gap:10px;min-width:0;
  color:var(--ink);font-weight:600;
  font-size:14.5px;word-break:break-all;text-align:right;
}

/* 复制小按钮：贴着邮箱的次要操作，视觉重量要轻于 .btn */
.ct-copy{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  padding:4px 10px 4px 8px;
  border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--muted);
  font:inherit;font-size:12px;font-weight:600;line-height:1;
  cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.ct-copy:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-50)}
.ct-copy:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ct-copy svg{width:13px;height:13px;flex:0 0 13px}
.ct-copy-ok{display:none;color:var(--blue)}
.ct-copy.is-done{border-color:var(--blue);color:var(--blue);background:var(--blue-50)}
.ct-copy.is-done .ct-copy-ico{display:none}
.ct-copy.is-done .ct-copy-ok{display:block}
@media (max-width:520px){
  .ct-sales-line{flex-direction:column;align-items:flex-start;gap:8px}
  .ct-sales-v{text-align:left}
}

.ct-wecom-card{display:flex;flex-direction:row;align-items:center;text-align:left;padding:24px 22px;gap:20px;border:none;border-radius:14px;transition:box-shadow .3s}
.ct-wecom-card.is-flash{animation:ctWecomFlash 1s ease 2}
@keyframes ctWecomFlash{0%,100%{box-shadow:0 0 0 3px rgba(0,115,255,.35),0 8px 28px rgba(0,115,255,.18)}50%{box-shadow:0 0 0 6px rgba(0,115,255,.65),0 14px 42px rgba(0,115,255,.4)}}
.ct-wecom-text{display:flex;flex-direction:column;gap:10px;min-width:0}
.ct-wecom-title{font-size:18px;margin:0;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.ct-wecom-name{display:inline-flex;align-items:center;color:#fff;background:var(--blue);padding:5px 14px;border-radius:999px;font-weight:700;transition:background .2s,transform .1s}
.ct-wecom-title:hover .ct-wecom-name{background:#0a4fd0}
.ct-wecom-title:active .ct-wecom-name{transform:scale(.97)}
.ct-wecom-title:focus-visible{outline:none}
.ct-wecom-title:focus-visible .ct-wecom-name{box-shadow:0 0 0 3px var(--blue-50,rgba(0,115,255,.25))}
.ct-wecom-hint{font-size:12px;font-weight:600;color:var(--muted)}
.ct-wecom-highlight{color:var(--blue);font-weight:700}
.ct-wecom-qr{width:195px;height:195px;flex:0 0 auto;border-radius:10px;object-fit:contain;background:#fff;padding:6px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.ct-wecom-tip{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}

.ct-table-wrap{padding:0;overflow:hidden}
.ct-distributors-table{width:100%;border-collapse:collapse;font-size:15px}
.ct-distributors-table th{text-align:left;padding:18px 22px;background:var(--zone-soft);font-weight:700;color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.ct-distributors-table td{padding:18px 22px;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.ct-distributors-table tbody tr:last-child td{border-bottom:none}
.ct-distributors-table tbody tr:hover{background:#FAFBFD}
.ct-distributors-table a{color:var(--blue);font-weight:600}

@media(max-width:900px){
  .ct-hero-inner{grid-template-columns:1fr auto;gap:8px;align-items:center}
  .ct-hero-figure img{max-width:360px;margin-bottom:-48px}
  .ct-overview-grid{grid-template-columns:1fr}
  .ct-sales-grid{grid-template-columns:1fr}
  .ct-distributors-table th,
  .ct-distributors-table td{padding:14px 16px}
}
@media(max-width:560px){
  .ct-hero{padding:60px 0 28px}
  .ct-hero-inner{grid-template-columns:1fr;gap:18px}
  .ct-hero-figure{justify-content:flex-start}
  .ct-hero-figure img{max-width:300px;margin-bottom:-36px}
  .ct-tabs{gap:4px}
  .ct-tab{padding:12px 12px;font-size:14px}
  .ct-form{padding:24px 20px}
  .ct-sales-info{padding:24px 20px}
}

/* 尊重「减少动态效果」无障碍偏好：状态提示仍即时显示，仅关闭重放动画 */
@media (prefers-reduced-motion: reduce){
  .ct-form-status.is-anim,
  .ct-form-status.is-error.is-anim{animation:none}
}