/* GoInterview · 全站共用样式 v2（2026-09-30 改版；2026-10-02 D-55 第 3 条只改了 --muted 一处，其余与 v1 相同）
   放在这里的：色彩、字体、页头、页尾、语言切换、按钮、弹窗、焦点环。
   改动这份文件必须换版本号（site.v2.css）并同步改每个页面的引用：服务器对样式文件缓存 7 天。 */

:root{
  --bg:#FFFFFF;
  --bg-soft:#FAFAFB;
  --bg-tint:#F9EFFB;
  --line:#EAE9EE;
  --brand:#A21CAF;
  --brand-deep:#7C1585;
  --ink:#111111;
  --body:#55525C;
  --sub:#706A78;      /* 小号说明文字：对白底约 5:1 */
  --muted:#706A78;    /* 只用于装饰和非必要的辅助信息。D-55 第 3 条：原 #A3A1AA 白底对比 2.55，调深一档到 #706A78（白底 5.22），与 --sub 同色 */
  --danger:#C4281B;

  --r-btn:10px;
  --r-card:12px;
  --r-panel:16px;
  --r-tag:6px;

  --container:1200px;
  --gutter:32px;
  --nav-h:76px;

  --font:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root:lang(en){ --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; }
:root:lang(ko){ --font:system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; }

@media (max-width:1023px){ :root{ --gutter:28px; --nav-h:68px; } }
@media (max-width:767px){ :root{ --gutter:20px; --nav-h:60px; } }
@media (max-width:340px){ :root{ --gutter:16px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:6px;
}

.container{
  width:100%;
  max-width:calc(var(--container) + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ── 按钮 ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:10px 22px;
  border-radius:var(--r-btn);
  border:1.5px solid transparent;
  font:inherit; font-size:16px; font-weight:600; line-height:1.25;
  text-align:center; text-decoration:none;
  cursor:pointer;
  transition:background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--brand); color:#fff; }
.btn--primary:hover{ background:var(--brand-deep); }
.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--bg-tint); border-color:var(--brand-deep); color:var(--brand-deep); }
.btn--sm{ min-height:40px; padding:7px 16px; font-size:14.5px; }
.btn[disabled]{ background:#E7E3EA; border-color:#E7E3EA; color:var(--sub); cursor:default; transform:none; }
.btn svg{ flex:none; }

/* ── 页头 ─────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.nav.is-scrolled{ border-bottom-color:var(--line); }
.nav__inner{
  display:flex; align-items:center; gap:20px;
  height:var(--nav-h);
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; flex:0 1 auto; color:var(--ink); text-decoration:none; }
.brand__mark{ width:28px; height:28px; border-radius:8px; overflow:hidden; flex:none; display:block; }
.brand__mark img{ display:block; width:100%; height:100%; object-fit:cover; }
.brand__word{ display:block; width:132px; height:auto; min-width:0; flex:0 1 132px; }
.nav__links{ display:flex; gap:32px; margin-inline:auto; font-size:15px; font-weight:500; flex:none; }
.nav__links a{ color:var(--ink); text-decoration:none; padding-block:6px; border-bottom:2px solid transparent; transition:border-color .14s ease, color .14s ease; }
.nav__links a:hover{ color:var(--brand-deep); border-bottom-color:var(--brand); }
.nav__cta{ display:flex; align-items:center; gap:14px; flex:none; }
.nav__toggle{
  display:none; flex:none;
  width:40px; height:40px; padding:0; align-items:center; justify-content:center;
  background:#fff; color:var(--ink);
  border:1.5px solid var(--ink); border-radius:var(--r-btn);
  cursor:pointer;
}
.nav__drawer{ display:none; }

@media (max-width:899px){
  .nav__inner{ gap:10px; }
  .nav__links{ display:none; }
  .nav__cta{ margin-left:auto; }
  .nav__cta .btn{ display:none; }
  .nav__toggle{ display:flex; }
  .nav__drawer.is-open{ display:block; padding:4px 0 20px; border-top:1px solid var(--line); }
  .nav__drawer ul{ margin:0; padding:0; list-style:none; display:grid; }
  .nav__drawer a:not(.btn){ display:block; padding:13px 2px; font-size:16px; font-weight:500; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
  .nav__drawer .btn{ width:100%; margin-top:16px; }
}
@media (max-width:360px){
  .nav__toggle{ width:36px; height:36px; }
}

/* ── 语言切换 ─────────────────────────────────────────── */
.langsw{
  display:inline-flex; align-items:center; flex:none;
  border:1px solid var(--line); border-radius:999px; overflow:hidden;
  font-size:13px; line-height:1; background:#fff; white-space:nowrap;
}
.langsw > *{ padding:8px 11px; font-weight:600; text-decoration:none; }
.langsw__cur{ background:var(--ink); color:#fff; cursor:default; }
.langsw__alt{ color:var(--ink); }
.langsw__alt:hover{ background:var(--bg-tint); color:var(--brand-deep); }
@media (max-width:899px){
  .langsw > *{ padding:8px 8px; }
}

/* ── 页尾 ─────────────────────────────────────────────── */
.footer{ border-top:1px solid var(--line); padding-block:40px 44px; }
.footer__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; font-size:14px; line-height:1.6; color:var(--sub); }
.footer__inner .brand__word{ width:118px; flex-basis:118px; }
.footer__links{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-left:auto; }
.footer__links a{ color:var(--body); text-decoration:none; }
.footer__links a:hover{ color:var(--brand-deep); text-decoration:underline; text-underline-offset:3px; }
.footer__legal{ width:100%; margin:6px 0 0; font-size:13px; color:var(--sub); }
.footer__legal a{ color:var(--body); text-decoration:underline; text-underline-offset:3px; }
.footer__notice{ width:100%; margin:0; font-size:13px; line-height:1.6; color:var(--sub); }
@media (max-width:767px){
  .footer__links{ margin-left:0; width:100%; }
}

/* ── 弹窗（客服、付款前填邮箱）────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
}
.modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.modal__mask{ position:absolute; inset:0; background:rgba(17,17,17,.45); }
.modal__panel{
  position:relative; z-index:1;
  width:min(100%, 420px);
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  box-shadow:0 24px 60px -24px rgba(17,17,17,.35);
  padding:28px 24px 24px;
  text-align:center;
  transform:translateY(8px);
  transition:transform .2s ease;
}
#emailModal .modal__panel{ width:min(100%, 460px); }
.modal.is-open .modal__panel{ transform:none; }
.modal__title{ font-size:19px; font-weight:700; color:var(--ink); line-height:1.3; }
.modal__sub{ margin:10px 0 0; font-size:14.5px; line-height:1.6; color:var(--body); }
.modal__sub strong{ color:var(--ink); }
.modal__plan{
  margin:14px 0 0; padding:10px 14px;
  background:var(--bg-tint); border-radius:var(--r-btn);
  font-size:14.5px; font-weight:600; color:var(--brand-deep);
}
.modal__plan[hidden]{ display:none; }
.modal__qr{
  display:block; margin:20px auto 0; padding:10px;
  width:240px; height:240px; max-width:100%;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:#fff; object-fit:contain;
}
.modal__close{ margin-top:18px; width:100%; }
.modal__fine{ margin:12px 0 0; font-size:12.5px; color:var(--sub); }
.modal__x{
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; border:0; border-radius:8px;
  background:transparent; color:var(--sub); cursor:pointer;
  font-size:22px; line-height:1;
}
.modal__x:hover{ background:var(--bg-soft); color:var(--ink); }

.mailform{ margin-top:18px; text-align:left; }
.mailform label{ display:block; margin-bottom:6px; font-size:14px; font-weight:600; color:var(--ink); }
.mailform input{
  width:100%; height:48px; padding:0 14px;
  font:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-btn);
  outline:none;
}
.mailform input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(162,28,175,.14); }
.mailform input[aria-invalid="true"]{ border-color:var(--danger); }
.mailform__err{ margin:8px 0 0; font-size:13.5px; font-weight:600; line-height:1.5; color:var(--danger); }
.mailform__err[hidden]{ display:none; }
.mailform__hint{ margin:8px 0 0; font-size:13px; line-height:1.55; color:var(--sub); }
.mailform__alt{ margin:14px 0 0; font-size:13.5px; line-height:1.5; text-align:center; }
.mailform__alt a{ color:var(--brand-deep); text-decoration:underline; text-underline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}