*{margin:0;padding:0;box-sizing:border-box} :root{ --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', Arial, sans-serif; --bg: #000000; --bg-elevated: #0A0A0C; --surface: #141416; --surface-hover: #1C1C1F; --hairline: rgba(255,255,255,0.08); --hairline-strong: rgba(255,255,255,0.14); --text-primary: rgba(255,255,255,0.96); --text-secondary: rgba(255,255,255,0.62); --text-tertiary: rgba(255,255,255,0.38); --accent: #FF3B5C; --accent-dim: #C4293F; --accent-glow: rgba(255,59,92,0.16); --accent-soft: rgba(255,59,92,0.10); --line: var(--hairline); } *{margin:0;padding:0;box-sizing:border-box} html,body{ background:var(--bg); color:var(--text-primary); font-family:var(--font-sans); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; } body{ background-image: radial-gradient(ellipse 900px 500px at 15% -5%, var(--accent-soft), transparent), radial-gradient(ellipse 700px 400px at 95% 105%, rgba(255,255,255,0.02), transparent); } ::selection{background:var(--accent);color:#fff} .stage{ max-width:640px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; padding:0 24px; } .nav{ position:sticky; top:0; padding:16px 0; display:flex; justify-content:space-between; align-items:center; z-index:50; background:linear-gradient(var(--bg) 70%, transparent); } .nav-logo{ font-weight:700; font-size:17px; letter-spacing:-0.02em; display:flex; align-items:center; gap:8px; } .nav-logo .dot{ width:8px;height:8px;border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent-glow); } .nav-user{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--text-secondary); } .nav-user button{ background:none;border:none; color:var(--text-tertiary); cursor:pointer;font-size:12px; letter-spacing:0.05em; transition:color .2s; } .nav-user button:hover{color:var(--accent)} .staff-badge{ font-size:11px;padding:4px 10px; background:var(--surface); border:1px solid var(--hairline-strong); color:var(--accent); border-radius:100px; font-weight:600; letter-spacing:0.02em; } .page{display:none} .page.active{display:block;animation:fadeUp .6s cubic-bezier(.16,1,.3,1) both} @keyframes fadeUp{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} } .tag{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-tertiary); font-weight:600; margin-bottom:14px; } .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; border:none;font-family:var(--font-sans);cursor:pointer; transition:all .25s cubic-bezier(.16,1,.3,1); font-weight:600;letter-spacing:-0.01em; } .btn-primary{ background:var(--accent);color:#fff; padding:16px 34px;font-size:15px; border-radius:100px; } .btn-primary:hover{ background:var(--accent-dim); transform:translateY(-1px) scale(1.01); box-shadow:0 12px 32px var(--accent-glow); } .btn-primary:active{transform:translateY(0) scale(0.98)} .btn-primary:disabled{ opacity:0.3;cursor:default; transform:none;box-shadow:none; } .btn-secondary{ background:var(--surface); color:var(--text-primary); border:1px solid var(--hairline-strong); padding:14px 28px;font-size:14px; border-radius:100px; } .btn-secondary:hover{background:var(--surface-hover);border-color:var(--hairline-strong)} .btn-block{width:100%} .btn-sm{padding:10px 20px;font-size:13px} .card{ background:var(--surface); border:1px solid var(--hairline-strong); border-radius:22px; padding:28px 24px; margin-bottom:16px; animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both; } .card h2{ font-size:20px;font-weight:700; letter-spacing:-0.02em; margin-bottom:6px; } .card p{color:var(--text-secondary);font-size:14px;line-height:1.6} .form-group{margin-bottom:20px} .form-group label{ display:block;font-size:12px; font-weight:600;letter-spacing:0.04em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:8px; } .form-group input, .form-group select, .form-group textarea{ width:100%;padding:14px 16px; background:var(--bg-elevated); border:1px solid var(--hairline); border-radius:14px; color:var(--text-primary); font-size:15px;font-family:var(--font-sans); transition:all .2s cubic-bezier(.16,1,.3,1); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); } .form-group input::placeholder{color:var(--text-tertiary)} .form-group textarea{resize:vertical;min-height:80px} .checkbox-label{ display:flex;align-items:flex-start;gap:10px; font-size:13px;color:var(--text-secondary); line-height:1.5;cursor:pointer; } .checkbox-label input[type="checkbox"]{ width:18px;height:18px;accent-color:var(--accent); margin-top:1px;flex-shrink:0; } .checkbox-label a{color:var(--accent);text-decoration:none} .landing{ flex:1;display:flex;flex-direction:column; justify-content:center;padding:60px 0 80px; animation:fadeUp .8s cubic-bezier(.16,1,.3,1) both; } .landing h1{ font-size:32px;line-height:1.3; font-weight:700;letter-spacing:-0.03em; margin-bottom:14px; } .landing .subtitle{ color:var(--text-secondary); font-size:15px;line-height:1.7; margin-bottom:40px; } .landing-stats{ display:flex;gap:32px;margin-bottom:40px; } .stat-item{text-align:center} .stat-num{ font-size:28px;font-weight:700; color:var(--accent);letter-spacing:-0.02em; } .stat-label{font-size:12px;color:var(--text-tertiary);margin-top:4px} .quiz-wrap{padding:20px 0 60px} .quiz-progress{ position:sticky;top:60px; padding:16px 0 12px; background:linear-gradient(var(--bg) 80%, transparent); z-index:10; } .quiz-track{ height:1px;background:var(--hairline); position:relative; } .quiz-fill{ height:1px;background:var(--accent); width:0%; transition:width .5s cubic-bezier(.4,0,.2,1); position:relative; } .quiz-fill::after{ content:'';position:absolute; right:-3px;top:50%; width:6px;height:6px;border-radius:50%; background:var(--accent); transform:translateY(-50%); box-shadow:0 0 8px var(--accent); } .quiz-meta{ display:flex;justify-content:space-between; font-size:11px;letter-spacing:0.08em; color:var(--text-tertiary); margin-top:10px; } .quiz-question{ font-size:18px;font-weight:600; line-height:1.6;letter-spacing:-0.01em; margin:32px 0 24px; } .quiz-options{display:flex;flex-direction:column;gap:10px} .quiz-option{ padding:16px 18px; background:var(--surface); border:1px solid var(--hairline); border-radius:16px; cursor:pointer; font-size:14.5px;line-height:1.5; color:var(--text-secondary); transition:all .2s cubic-bezier(.16,1,.3,1); } .quiz-option:hover{ border-color:var(--accent); background:var(--surface-hover); color:var(--text-primary); } .quiz-option.selected{ border-color:var(--accent); background:var(--accent-soft); color:var(--text-primary); } .match-hero{ text-align:center;padding:40px 20px; animation:fadeUp .6s cubic-bezier(.16,1,.3,1) both; } .match-avatar{ width:96px;height:96px;border-radius:50%; margin:0 auto 20px; background:linear-gradient(135deg, var(--accent-soft), transparent); display:flex;align-items:center;justify-content:center; border:2px solid var(--hairline-strong); } .match-avatar img{width:80px;height:80px;border-radius:50%} .match-score{ font-size:56px;font-weight:800; color:var(--accent);line-height:1; letter-spacing:-0.03em; } .match-score-label{ font-size:13px;color:var(--text-tertiary); letter-spacing:0.1em;text-transform:uppercase; margin-bottom:16px; } .match-name{ font-size:22px;font-weight:700; letter-spacing:-0.02em;margin-bottom:4px; } .match-meta{ font-size:14px;color:var(--text-secondary); margin-bottom:24px; } .match-reason{ text-align:left; background:var(--bg-elevated); border:1px solid var(--hairline); border-radius:18px; padding:20px; font-size:14px;line-height:1.7; color:var(--text-secondary); margin-bottom:28px; } .chat-stage{ position:fixed;inset:0; background:var(--bg); z-index:100; display:flex;flex-direction:column; animation:fadeUp .3s cubic-bezier(.16,1,.3,1) both; } .chat-header{ padding:14px 20px; display:flex;align-items:center;gap:14px; border-bottom:1px solid var(--hairline); background:linear-gradient(var(--bg) 90%, transparent); } .chat-header img{ width:42px;height:42px;border-radius:50%; border:2px solid var(--hairline-strong); } .chat-header .info{flex:1} .chat-header .name{font-weight:600;font-size:15px;letter-spacing:-0.01em} .chat-header .meta{font-size:12px;color:var(--text-tertiary);margin-top:2px} .chat-header .back-btn, .chat-header .report-btn{ background:none;border:none; color:var(--text-tertiary); cursor:pointer;font-size:18px; padding:6px; transition:color .2s; } .chat-header .back-btn:hover, .chat-header .report-btn:hover{color:var(--text-primary)} .chat-header .report-btn:hover{color:var(--accent)} .chat-match-reason{ padding:12px 20px; background:var(--bg-elevated); border-bottom:1px solid var(--hairline); font-size:12px;color:var(--text-tertiary); line-height:1.6; } .chat-messages{ flex:1;overflow-y:auto; padding:20px;display:flex; flex-direction:column;gap:12px; } .msg{display:flex;max-width:78%} .msg.me{align-self:flex-end} .msg.them{align-self:flex-start} .msg.system{align-self:center} .msg-bubble{ padding:12px 16px;border-radius:18px; font-size:14.5px;line-height:1.55; word-break:break-word; } .msg.me .msg-bubble{ background:var(--accent);color:#fff; border-bottom-right-radius:4px; } .msg.them .msg-bubble{ background:var(--surface); border:1px solid var(--hairline-strong); color:var(--text-primary); border-bottom-left-radius:4px; } .msg.system .msg-bubble{ background:var(--bg-elevated); border:1px solid var(--hairline); color:var(--text-tertiary); font-size:12px;padding:8px 14px; border-radius:12px; } .msg-time{ font-size:11px;color:var(--text-tertiary); margin-top:4px;text-align:right; } .chat-input-area{ padding:14px 20px 24px; border-top:1px solid var(--hairline); display:flex;gap:10px; background:var(--bg); } .chat-input-area input{ flex:1;padding:12px 18px; background:var(--surface); border:1px solid var(--hairline); border-radius:100px; color:var(--text-primary); font-size:14.5px; transition:all .2s; } .chat-input-area input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); } .chat-input-area input::placeholder{color:var(--text-tertiary)} .chat-input-area button{ padding:12px 22px; background:var(--accent);color:#fff; border:none;border-radius:100px; font-size:14px;font-weight:600; cursor:pointer; transition:all .2s; } .chat-input-area button:hover{ background:var(--accent-dim); box-shadow:0 8px 24px var(--accent-glow); } .safety-toast{ background:var(--bg-elevated); border:1px solid var(--hairline); border-radius:14px; padding:14px 18px; font-size:12.5px; color:var(--text-tertiary); line-height:1.6; margin-bottom:16px; } .safety-toast strong{color:var(--text-secondary)} .loading{ text-align:center;padding:60px 20px; color:var(--text-tertiary); } .spinner{ width:32px;height:32px; border:2px solid var(--hairline); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; margin:0 auto 16px; } @keyframes spin{to{transform:rotate(360deg)}} .overlay{ position:fixed;inset:0; background:rgba(0,0,0,0.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex;align-items:center;justify-content:center; z-index:200;padding:20px; animation:overlayFadeIn .25s ease both; } @keyframes overlayFadeIn{from{opacity:0}to{opacity:1}} .overlay-panel{ background:var(--surface); border:1px solid var(--hairline-strong); border-radius:24px; padding:32px; max-width:420px;width:100%; animation:panelPopIn .35s cubic-bezier(.16,1,.3,1) both; } @keyframes panelPopIn{ from{opacity:0;transform:translateY(14px) scale(0.96)} to{opacity:1;transform:translateY(0) scale(1)} } .overlay-panel h3{ font-size:20px;font-weight:700; margin-bottom:8px;letter-spacing:-0.02em; } .overlay-panel p{color:var(--text-secondary);font-size:14px;margin-bottom:24px} @media(min-width:768px){ .chat-stage{position:relative;max-width:520px;margin:0 auto;border-radius:24px;border:1px solid var(--hairline);overflow:hidden;height:80vh;top:10vh} }
基于心理学测评的聊天匹配

找到真正
契合的聊天伙伴

融合依恋理论、大五人格、爱之语与价值观匹配。
20道精选题目，AI 深度解读，匹配灵魂共鸣。

20
道题目
3
分钟测评
92%
匹配精度

无需密码，通过邮箱魔法链接安全登录。
你的数据仅存储于本设备。

⚠️ 年龄限制：本平台仅限16岁以上中学生及大学生使用。请确保你已达到法定年龄并同意用户协议。
测评中1 / 20
关系模式快速测评

20道精选题目

基于依恋理论、大五人格、爱之语与价值观匹配。答题过程中不会提示每题具体测量什么，以保证结果的真实性。

完善社交资料

建立你的社交画像

这些信息仅用于匹配，不会公开你的邮箱

--
--