/* ═══════════════════════════════════════════
   common.css — 悬赏令公共样式
   所有页面共享：token、reset、body、布局、卡片、表单、按钮、toast
   ═══════════════════════════════════════════ */

/* ═══ Design Tokens ═══ */
:root {
  --surface: #0d0b09;
  --surface-raised: #1c1812;
  --text: #f0ead6;
  --text-body: #c4b89c;
  --text-dim: #948c78;
  --amber: #f0a030;
  --amber-dark: #c88020;
  --amber-light: #f5c060;
  --amber-glow: rgba(240,160,48,0.18);
  --amber-glow-strong: rgba(240,160,48,0.35);
  --rust: #c46030;
  --danger: #c03030;
  --border: #2a241c;
  --neon: #00e5ff;
  --green: #5ec962;
  --radius: 5px;
  --radius-full: 9999px;
  --space-sm: 10px;
  --space-md: 18px;
  --space-xl: 44px;
  --space-2xl: 60px;
  --text-xs: 0.8rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-inverse: #0d0b09;
  --font-display: "Source Han Serif SC VF","Noto Serif SC","STSong","Songti SC","思源宋体",serif;
  --font-body: "Inter","SF Pro Text",-apple-system,"PingFang SC",sans-serif;
  --font-mono: "JetBrains Mono","SF Mono","Cascadia Code",monospace;
  --font-wanted: "Old Standard TT","Georgia","Times New Roman",serif;
  --font-impact: "Bebas Neue","Impact","Arial Black",sans-serif;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --duration-normal: 280ms;
  --duration-slow: 500ms;
}

/* ═══ Reset ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  background: url(bg-hunter.png) center 28% / cover no-repeat fixed;
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* ═══ Noise grain ═══ */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px;
}

/* ═══ Page layout ═══ */
.page{
  min-height:100dvh;display:flex;
  flex-direction:column;justify-content:flex-end;
  position:relative;z-index:1;
}

/* ═══ Card — 底部毛玻璃 ═══ */
@keyframes card-in{
  0%{transform:translateY(24px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
.card{
  position:relative;
  width:100%;max-width:460px;
  margin:0 auto;
  padding:44px 32px 36px;
  animation:card-in 0.7s var(--ease-out) both;
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(28,24,18,0.3) 65%, rgba(28,24,18,0.55) 100%);
  border-radius:20px 20px 0 0;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-top:1px solid rgba(240,160,48,0.08);
}

/* ═══ Back link ═══ */
.back{
  position:fixed;top:18px;left:20px;
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-display);
  font-size:0.78rem;color:var(--text-body);
  text-decoration:none;letter-spacing:0.04em;
  transition:color 0.25s ease;
  z-index:2;
  text-shadow:0 0 8px rgba(0,0,0,.85);
}
.back:hover{color:var(--amber)}
.back svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* ═══ Header ═══ */
.wanted-tag{margin-bottom:8px;text-align:center}
.wanted-tag span{
  font-family:var(--font-wanted);
  font-size:9px;font-weight:700;letter-spacing:0.35em;
  color:var(--amber);border:1px solid rgba(240,160,48,0.25);
  padding:2px 14px;
}
h1{
  font-family:var(--font-display);
  font-size:1.7rem;font-weight:900;text-align:center;
  letter-spacing:0.12em;margin-bottom:5px;
  color:var(--amber-light);
  text-shadow:0 0 12px var(--amber-glow);
}
.sub{
  text-align:center;
  font-family:var(--font-display);
  font-size:0.8rem;color:var(--text);
  letter-spacing:0.04em;margin-bottom:28px;
}

/* ═══ Form ═══ */
.form-group{margin-bottom:16px}
.form-group label{
  display:block;
  font-family:var(--font-display);
  font-size:0.75rem;font-weight:600;color:var(--text);
  letter-spacing:0.05em;margin-bottom:5px;
}
.input-wrap{position:relative}
.input-wrap input,.input-wrap textarea{
  width:100%;
  padding:11px 14px;
  background:rgba(13,11,9,0.75);
  border:1px solid rgba(200,170,120,0.16);
  border-radius:10px;
  font-family:var(--font-body);
  font-size:0.85rem;color:var(--text);
  letter-spacing:0.03em;
  outline:none;
  transition:border-color 0.3s ease, box-shadow 0.3s ease, background 0.25s ease;
}
.input-wrap input::placeholder,.input-wrap textarea::placeholder{color:var(--text-dim)}
.input-wrap input:focus,.input-wrap textarea:focus{
  border-color:rgba(240,160,48,0.45);
  background:rgba(20,16,10,0.88);
  box-shadow:0 0 0 3px rgba(240,160,48,0.07), 0 0 14px rgba(240,160,48,0.05);
}
.input-wrap input.error,.input-wrap textarea.error{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(192,48,48,0.08);
}
.input-wrap input.error:focus,.input-wrap textarea.error:focus{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(192,48,48,0.08),0 0 14px rgba(192,48,48,0.06);
}
.input-wrap .err-msg{
  font-family:var(--font-display);
  font-size:0.65rem;color:var(--danger);
  margin-top:4px;display:none;
}
.input-wrap input.error + .err-msg,.input-wrap textarea.error + .err-msg{display:block}

/* ═══ Submit btn ═══ */
@keyframes btn-glow-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(240,160,48,0)}
  50%{box-shadow:0 0 0 3px rgba(240,160,48,0.1)}
}
.btn-submit{
  display:block;width:100%;
  padding:12px 0;
  background:rgba(20,16,10,0.94);
  color:var(--amber);
  border:1px solid rgba(240,160,48,0.4);
  border-radius:9999px;
  font-family:var(--font-display);
  font-size:0.9rem;font-weight:700;
  letter-spacing:0.12em;cursor:pointer;
  animation:btn-glow-pulse 3s ease-in-out infinite;
  transition:transform 0.25s var(--ease-spring),box-shadow 0.35s ease,background 0.25s ease,border-color 0.25s ease,color 0.25s ease;
}
.btn-submit:hover{
  background:rgba(30,24,14,0.96);
  border-color:rgba(240,160,48,0.65);
  color:var(--amber-light);
  transform:translateY(-2px);
  animation:none;
  box-shadow:0 0 24px rgba(240,160,48,0.25),0 0 0 1px rgba(240,160,48,0.18),0 8px 28px rgba(0,0,0,0.5);
}
.btn-submit:active{
  transform:translateY(1px) scale(0.97);
  transition-duration:0.05s;
}
.btn-submit:disabled{
  opacity:0.4;cursor:not-allowed;animation:none;transform:none;
}

/* ═══ Divider ═══ */
.divider{
  display:flex;align-items:center;gap:12px;
  margin:22px 0;
  font-family:var(--font-display);
  font-size:0.7rem;color:var(--text-body);
  letter-spacing:0.04em;
}
.divider::before,.divider::after{
  content:"";flex:1;height:1px;
  background:rgba(200,170,120,0.12);
}

/* ═══ Social login ═══ */
.social-login{display:flex;gap:12px;justify-content:center;margin-bottom:22px}
.social-btn{
  width:44px;height:44px;border-radius:50%;
  background:rgba(13,11,9,0.7);
  border:1px solid rgba(200,170,120,0.15);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:border-color 0.25s ease,box-shadow 0.25s ease,transform 0.2s var(--ease-spring);
}
.social-btn:hover{
  border-color:rgba(240,160,48,0.35);
  box-shadow:0 0 16px rgba(240,160,48,0.1);
  transform:translateY(-2px);
}
.social-btn svg{width:18px;height:18px;stroke:var(--text-body);fill:none;stroke-width:1.6}
.social-btn:hover svg{stroke:var(--amber)}

/* ═══ Footer ═══ */
.foot-text{
  text-align:center;
  font-family:var(--font-display);
  font-size:0.75rem;color:var(--text-body);
  letter-spacing:0.04em;
}
.foot-text a{color:var(--amber);text-decoration:none}

/* ═══ Toast ═══ */
@keyframes toast-in{
  0%{transform:translate(-50%,16px);opacity:0}
  100%{transform:translate(-50%,0);opacity:1}
}
@keyframes toast-out{
  0%{transform:translate(-50%,0);opacity:1}
  100%{transform:translate(-50%,-8px);opacity:0}
}
.toast{
  position:fixed;bottom:40px;left:50%;transform:translate(-50%,0);z-index:100;
  padding:10px 24px;
  background:rgba(28,24,18,0.95);
  border:1px solid rgba(240,160,48,0.3);
  border-radius:9999px;
  font-family:var(--font-display);
  font-size:0.78rem;color:var(--amber-light);
  letter-spacing:0.05em;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  animation:toast-in 0.3s var(--ease-out);
  pointer-events:none;
}
.toast.out{animation:toast-out 0.25s ease forwards}

/* ═══ Responsive ═══ */
@media(max-width:768px){
  .card{max-width:100%;padding:36px 20px 28px;margin:0 8px}
  h1{font-size:1.5rem}
  .sub{font-size:0.82rem;margin-bottom:20px}
  .back{top:12px;left:12px;font-size:0.8rem}
  .social-login{gap:10px;margin-bottom:18px}
  .social-btn{width:40px;height:40px}
  .btn-submit{padding:14px 0;font-size:0.9rem}
  .form-group{margin-bottom:14px}
  .form-group label{font-size:0.8rem}
  .input-wrap input,.input-wrap textarea{padding:14px;font-size:0.9rem}
  .divider{margin:18px 0;font-size:0.72rem}
  .toast{bottom:24px;padding:10px 20px;font-size:0.8rem;max-width:90vw;text-align:center}
  .foot-text{font-size:0.78rem}
}
/* ═══ CS Dialog Body & Messages (shared) ═══ */
.cs-dialog-body{padding:16px;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.cs-dialog-body::-webkit-scrollbar{width:4px}
.cs-dialog-body::-webkit-scrollbar-track{background:transparent}
.cs-dialog-body::-webkit-scrollbar-thumb{background:rgba(240,160,48,0.15);border-radius:2px}
.cs-dialog-body::-webkit-scrollbar-thumb:hover{background:rgba(240,160,48,0.3)}
.cs-msg{display:flex;gap:8px;max-width:92%;animation:csMsgIn 0.3s var(--ease-out)}
@keyframes csMsgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.cs-msg.agent{align-self:flex-start}
.cs-msg.user{align-self:flex-end;flex-direction:row-reverse}
.cs-msg .cs-msg-avatar{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.65rem}
.cs-msg.agent .cs-msg-avatar{background:linear-gradient(135deg,rgba(240,160,48,0.12),rgba(196,96,48,0.06));border:1px solid rgba(240,160,48,0.2);color:var(--amber)}
.cs-msg.user .cs-msg-avatar{background:linear-gradient(135deg,rgba(0,229,255,0.08),rgba(0,180,200,0.04));border:1px solid rgba(0,229,255,0.15);color:var(--neon)}
.cs-msg .cs-msg-content{display:flex;flex-direction:column;gap:2px}
.cs-msg .cs-msg-sender{font-family:var(--font-display);font-size:0.58rem;font-weight:600;letter-spacing:0.04em;padding:0 2px}
.cs-msg.agent .cs-msg-sender{color:var(--amber)}
.cs-msg.user .cs-msg-sender{color:var(--neon);text-align:right}
.cs-msg .cs-msg-bubble{font-family:var(--font-display);font-size:0.74rem;line-height:1.6;padding:8px 12px;border-radius:8px;word-break:break-word}
.cs-msg.agent .cs-msg-bubble{background:rgba(240,160,48,0.06);border:1px solid rgba(240,160,48,0.1);border-top-left-radius:2px;color:var(--text-body)}
.cs-msg.user .cs-msg-bubble{background:rgba(240,160,48,0.1);border:1px solid rgba(240,160,48,0.2);border-top-right-radius:2px;color:var(--text)}

@media(max-width:480px){
  .card{padding:32px 16px 24px;margin:0 auto;max-width:calc(100% - 8px)}
  h1{font-size:1.3rem;letter-spacing:0.08em}
  .wanted-tag span{font-size:9px;padding:3px 10px}
  .btn-submit{font-size:0.85rem;padding:14px 0}
}

/* ═══ CS Dialog Shared Styles ═══ */
.cs-dialog-input-bar{display:flex;gap:8px;padding:12px 16px;border-top:1px solid rgba(240,160,48,0.1);background:rgba(13,11,9,0.5)}
.cs-dialog-input{flex:1;padding:9px 12px;border-radius:8px;border:1px solid rgba(240,160,48,0.14);background:rgba(13,11,9,0.6);color:var(--text);font-family:var(--font-display);font-size:0.74rem;outline:none;transition:all 0.2s}
.cs-dialog-input::placeholder{color:var(--text-dim);opacity:0.6}
.cs-dialog-input:focus{border-color:rgba(240,160,48,0.45);box-shadow:0 0 0 3px rgba(240,160,48,0.06),0 0 12px var(--amber-glow)}
.cs-dialog-send{padding:8px 16px;border-radius:8px;border:1px solid rgba(240,160,48,0.35);background:rgba(240,160,48,0.12);color:var(--amber);font-family:var(--font-display);font-size:0.72rem;font-weight:600;cursor:pointer;letter-spacing:0.06em;transition:all 0.2s;white-space:nowrap}
.cs-dialog-send:hover{background:rgba(240,160,48,0.22);border-color:rgba(240,160,48,0.5);color:var(--amber-light);box-shadow:0 0 16px var(--amber-glow);transform:translateY(-1px)}
.cs-dialog-send:active{transform:translateY(0);transition:transform 0.05s}
@media(max-width:480px){
  .cs-dialog{max-height:calc(100vh - 80px)!important;width:calc(100vw - 32px)!important;left:16px!important;right:16px!important;bottom:40px!important;top:auto!important}
  .cs-dialog-input{font-size:16px!important}
}