* { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f3ee; color: #2c2a26; font-size: 14px; } .topbar { background: #3a3530; color: #f0ece4; padding: 10px 18px; display: flex; align-items: center; gap: 16px; } .topbar .brand { font-weight: 700; letter-spacing: 1px; } /* 品牌名是可点的回首页链接：不能继承普通导航链接的小字号/浅色 */ .topbar a.brand { color: #f7f2e8; font-size: 15px; text-decoration: none; cursor: pointer; } .topbar a.brand:hover { color: #fff; } .topbar a, .topbar .logout { color: #d8cfbf; text-decoration: none; cursor: pointer; font-size: 13px; } .topbar .spacer { flex: 1; } .topbar .me { color: #c9bfa9; font-size: 13px; } .wrap { max-width: 640px; margin: 22px auto; padding: 0 16px 60px; } h2 { margin: 4px 0 16px; } .card { background: #fff; border: 1px solid #e4ded2; border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04); } label { display: block; margin: 10px 0 4px; font-weight: 600; color: #4a453d; } input[type=text], input[type=password], input[type=date], textarea, select { width: 100%; padding: 9px 10px; border: 1px solid #cfc7b6; border-radius: 7px; font-size: 14px; background: #fff; font-family: inherit; } textarea { min-height: 64px; resize: vertical; } .row { display: flex; gap: 10px; flex-wrap: wrap; } .row > div { flex: 1; min-width: 120px; } .btn { background: #6b5b45; color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-size: 14px; cursor: pointer; } .btn:hover { background: #594b38; } .btn.ghost { background: #efe9dc; color: #4a453d; } .btn.sm { padding: 5px 12px; font-size: 13px; } .meta { color: #8a8377; font-size: 13px; margin-bottom: 10px; } .section { margin-top: 16px; } .section .h { font-weight: 700; color: #3a3530; border-left: 4px solid #b89f74; padding-left: 8px; margin-bottom: 8px; } .tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl th, .tbl td { border: 1px solid #e4ded2; padding: 6px 8px; text-align: left; vertical-align: top; } .tbl th { background: #f3efe6; } .chip { display: inline-block; background: #efe9dc; border: 1px solid #ddd3bf; border-radius: 6px; padding: 4px 9px; margin: 3px 4px 3px 0; font-size: 13px; } .chip.hook { background: #fff7e6; border-color: #ffd591; color: #ad6800; cursor: pointer; } .chip.hook:hover { background: #ffe7ba; } .chip-sep { color: #9a9488; font-size: 12px; padding: 0 4px; align-self: center; } .warn { background: #fbf3e6; border-color: #e9d3a8; } .sub { color: #8a8377; font-size: 13px; margin-top: 6px; } .rel { color: #9a5b2e; font-weight: 600; } .pts { margin: 0; padding-left: 18px; } .pts li { margin: 4px 0; } .seg { margin: 10px 0; } .seg.tip { background: #f3f6f1; border-radius: 8px; padding: 8px 12px; } .result { background: #faf7f0; } .ziwarn { display: none; background: #fbe9e9; color: #b23b3b; border: 1px solid #eecaca; padding: 10px 14px; border-radius: 8px; margin: 12px 0; } .feedback-box { background: #f7f4ec; border: 1px solid #e4ded2; border-radius: 8px; padding: 12px 14px; margin-top: 10px; } .cmt { border-top: 1px solid #ece6da; padding: 8px 0; } .cmt .who { font-weight: 600; font-size: 13px; } .cmt.admin .who { color: #9a5b2e; } .cmt .time { color: #a59c8c; font-size: 12px; margin-left: 8px; } .cmt .ai { background: #e8eef7; color: #355; font-size: 11px; padding: 1px 6px; border-radius: 4px; margin-left: 6px; } .err { color: #b23b3b; font-size: 13px; margin-top: 8px; min-height: 16px; } /* 同一个人话说「成功/中性提示」的场景（如「验证码已发送」）：沿用 .err 的位置，但换成中性绿，别再像报错 */ .err.ok { color: #2f7a4f; } .center { text-align: center; margin-top: 40px; } .stat { display: flex; gap: 14px; flex-wrap: wrap; } .stat .box { flex: 1; min-width: 120px; background: #faf7f0; border: 1px solid #e4ded2; border-radius: 8px; padding: 12px; text-align: center; } .stat .num { font-size: 24px; font-weight: 700; color: #6b5b45; } .stat .lab { color: #8a8377; font-size: 12px; } .case-item { cursor: pointer; } .case-item:hover { border-color: #c9b48a; } .tag { display: inline-block; background: #eceae1; border-radius: 4px; padding: 1px 7px; font-size: 12px; margin-right: 4px; } /* 进度条 / 加载提示 */ .progress { height: 8px; background: #ece6da; border-radius: 6px; overflow: hidden; margin-top: 14px; } .progress .bar { height: 100%; width: 40%; background: linear-gradient(90deg,#b89f74,#6b5b45); border-radius: 6px; animation: indet 1.1s ease-in-out infinite; } @keyframes indet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } .loading-note { color: #8a8377; font-size: 13px; margin-top: 8px; } /* 随机抽牌转盘（意象符号版） */ .wheel { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .slot { flex: 1; min-width: 110px; border: 1px solid rgba(220,192,138,.38); border-radius: 12px; padding: 12px 8px 10px; text-align: center; background: rgba(18,10,36,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .slot .role { font-size: 12px; color: #b9a7d6; margin-bottom: 6px; letter-spacing: 1px; } .slot .gz-ico { height: 58px; display: flex; align-items: center; justify-content: center; } .slot .gz-ico .wico, .slot .gz-ico svg { width: 50px; height: 50px; display: block; } .slot .gz-ico:not(:has(svg)) { font-size: 26px; color: #cdb9e6; font-weight: 700; } /* 占位 ？ */ .slot .gz-cap { font-size: 12px; color: #d9c79a; margin-top: 4px; min-height: 16px; line-height: 1.3; } .slot.reveal .gz-ico { animation: pop .5s ease; } /* 滚轮转动中：轻微虚化+缩放，配合符号高速翻动，像吃角子老虎机转轮 */ .slot.drawing { background: rgba(40,24,70,.6); border-color: rgba(232,204,150,.55); } .slot.drawing .gz-ico { animation: wheelblur .16s linear infinite; } @keyframes pop { 0% { transform: scale(.6); opacity:.3; } 100% { transform: scale(1); opacity:1; } } @keyframes wheelblur { 0% { filter: blur(0); transform: translateY(0) scale(1); } 50% { filter: blur(.7px); transform: translateY(-1px) scale(1.06); } 100% { filter: blur(0); transform: translateY(0) scale(1); } } .timing { margin-top: 12px; font-size: 13px; color: #d9c79a; display: flex; align-items: center; gap: 8px; } .timing .tz-ico { display: inline-flex; } .timing .tz-ico .wico, .timing .tz-ico svg { width: 24px; height: 24px; display: block; } /* 实像库标签页 / 徽标 / 弹窗 */ .badge { display: inline-block; border-radius: 4px; padding: 1px 7px; font-size: 11px; margin-left: 6px; vertical-align: middle; } .badge.seed { background: #e8eef7; color: #355; } .badge.ai { background: #f3e6f7; color: #7a3a8a; } .badge.user { background: #eaf3e6; color: #3a7a3a; } .toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; } .toolbar input, .toolbar select { width: auto; flex: 0 1 auto; } .pager { margin-top: 10px; display: flex; gap: 8px; align-items: center; } .btn.danger { background: #b23b3b; } .btn.danger:hover { background: #983131; } .modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: none; align-items: center; justify-content: center; z-index: 50; } .modal.show { display: flex; } .modal-box { background: #fff; border-radius: 10px; padding: 18px 20px; width: min(620px, 92vw); max-height: 86vh; overflow: auto; } .modal-box label { margin-top: 10px; } .modal-actions { margin-top: 14px; display: flex; gap: 10px; justify-content: flex-end; } /* 问事页：左任务 / 右聊天 分栏（参考 WorkBuddy） */ .layout { display: flex; gap: 18px; align-items: flex-start; } .col-left { flex: 1 1 380px; min-width: 0; } .col-right { flex: 1 1 380px; min-width: 0; } .chat-panel { background: #fff; border: 1px solid #e4ded2; border-radius: 10px; padding: 14px 16px; position: sticky; top: 14px; display: flex; flex-direction: column; max-height: 84vh; } .chat-panel .ph { font-weight: 700; color: #3a3530; border-left: 4px solid #b89f74; padding-left: 8px; margin-bottom: 8px; font-size: 15px; } .chat-scroll { flex: 1; overflow: auto; max-height: 52vh; border: 1px solid #e3ddd0; border-radius: 8px; padding: 8px 10px; background: #fbf9f4; margin-bottom: 8px; } .chat-empty { color: #8a8377; font-size: 13px; padding: 10px; } .suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .suggest .chip { cursor: pointer; } .suggest .chip:hover { background: #e7dcc4; } .chat-input { display: flex; gap: 8px; align-items: flex-end; } .chat-input textarea { flex: 1; min-height: 44px; } .chat-err { color: #b23b3b; font-size: 12px; min-height: 14px; margin-top: 4px; } /* 聊天消息气泡（问事页 / 我的案例共用） */ .msg { margin: 6px 0; } .msg .who { font-size: 11px; color: #9a9488; margin-right: 6px; } .msg.me { text-align: right; } .msg.me .who { color: #b06a3a; } .msg.me div { display: inline-block; text-align: left; background: #fff3e6; border: 1px solid #f0d9bf; border-radius: 8px; padding: 6px 9px; max-width: 90%; white-space: pre-wrap; line-height: 1.6; } .msg.ai div { display: inline-block; background: #eef4ea; border: 1px solid #cfe0c4; border-radius: 8px; padding: 6px 9px; max-width: 90%; white-space: pre-wrap; line-height: 1.6; } .chat-note { margin: 6px 2px; padding: 7px 11px; border-radius: 8px; font-size: 13px; line-height: 1.6; background: #fff4e5; color: #a05a00; border: 1px solid #f3d9b5; white-space: pre-wrap; } .chat-note:last-child { background: #eef2fb; color: #5a6aa0; border-color: #cdd6ee; } /* 每轮会话标签（敏感话题红色高亮） */ .ctag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; margin: 2px 4px 0 0; background: #eef4ea; color: #5a6b54; border: 1px solid #cfe0c4; } /* 游客：注册引导 / 续聊入口 */ .reg-prompt { background: #fdeaf1 !important; color: #a23b6b !important; border-color: #f3c6d8 !important; } .reg-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; } .reg-slogan { margin-top: 6px; font-size: 12px; letter-spacing: 1px; opacity: .85; } .ctag.danger { background: #ffe3e3; color: #c0392b; border-color: #f0b4b4; font-weight: 600; } .tags { margin-top: 6px; } @media (max-width: 780px) { .layout { flex-direction: column; } .col-right { position: static; } .chat-panel { max-height: none; } .chat-scroll { max-height: 48vh; } } /* ========== 二次元风格背景（仅登录/问事页：） ========== */ body.anime-bg { background: transparent; min-height: 100vh; } /* 天空渐变 + 光晕 + 云朵 + 星点（固定底层） */ body.anime-bg::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(165deg, #bfe3ff 0%, #d8c6fb 46%, #fcd3e8 100%), radial-gradient(circle at 15% 12%, rgba(255,255,255,.55), transparent 26%), radial-gradient(circle at 85% 9%, rgba(255,255,255,.5), transparent 22%), radial-gradient(circle at 72% 90%, rgba(255,205,235,.5), transparent 42%), radial-gradient(ellipse 110px 38px at 16% 16%, rgba(255,255,255,.6), transparent 72%), radial-gradient(ellipse 90px 30px at 78% 24%, rgba(255,255,255,.5), transparent 72%), radial-gradient(ellipse 130px 42px at 50% 68%, rgba(255,255,255,.34), transparent 74%), radial-gradient(circle 1.6px at 8% 18%, rgba(255,255,255,.9), transparent 60%), radial-gradient(circle 1.3px at 28% 38%, rgba(255,255,255,.7), transparent 60%), radial-gradient(circle 1.5px at 62% 14%, rgba(255,255,255,.85), transparent 60%), radial-gradient(circle 1.2px at 44% 52%, rgba(255,255,255,.6), transparent 60%), radial-gradient(circle 1.6px at 88% 56%, rgba(255,255,255,.85), transparent 60%), radial-gradient(circle 1.2px at 72% 78%, rgba(255,255,255,.6), transparent 60%), radial-gradient(circle 1.4px at 20% 82%, rgba(255,255,255,.7), transparent 60%), radial-gradient(circle 1.2px at 92% 88%, rgba(255,255,255,.6), transparent 60%); background-repeat: no-repeat; } /* 飘落花瓣（固定层，缓慢下落循环） */ body.anime-bg::after { content: ""; position: fixed; inset: -20% 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiB2aWV3Qm94PSIwIDAgMjIwIDIyMCI+CiAgPGcgZmlsbD0icmdiKDI1NSwxOTYsMjIyKSIgZmlsbC1vcGFjaXR5PSIwLjkyIj4KICAgIDxlbGxpcHNlIGN4PSI0MCIgY3k9IjUwIiByeD0iOCIgcnk9IjMuNCIgdHJhbnNmb3JtPSJyb3RhdGUoMjUgNDAgNTApIi8+CiAgICA8ZWxsaXBzZSBjeD0iMTUwIiBjeT0iMzAiIHJ4PSI3IiByeT0iMyIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1IDE1MCAzMCkiIGZpbGwtb3BhY2l0eT0iMC43MiIvPgogICAgPGVsbGlwc2UgY3g9Ijk1IiBjeT0iMTIwIiByeD0iOSIgcnk9IjMuNiIgdHJhbnNmb3JtPSJyb3RhdGUoNDAgOTUgMTIwKSIvPgogICAgPGVsbGlwc2UgY3g9IjE4MCIgY3k9IjE1MCIgcng9IjYuNSIgcnk9IjIuOCIgdHJhbnNmb3JtPSJyb3RhdGUoMTAgMTgwIDE1MCkiIGZpbGwtb3BhY2l0eT0iMC44MiIvPgogICAgPGVsbGlwc2UgY3g9IjYwIiBjeT0iMTkwIiByeD0iNy41IiByeT0iMy4yIiB0cmFuc2Zvcm09InJvdGF0ZSgtMzAgNjAgMTkwKSIgZmlsbC1vcGFjaXR5PSIwLjY4Ii8+CiAgPC9nPgo8L3N2Zz4="); background-size: 220px 220px; background-repeat: repeat; opacity: .85; animation: petalfall 24s linear infinite; } @keyframes petalfall { from { background-position: 0 -220px; } to { background-position: 0 100vh; } } /* 卡片在二次元背景上「浮起」 */ body.anime-bg .card, body.anime-bg .chat-panel { background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border-color: rgba(255,255,255,.6); box-shadow: 0 10px 28px rgba(126,92,165,.20); } body.anime-bg .topbar { background: rgba(58,53,48,.92); } body.anime-bg h2 { color: #4a3f63; text-shadow: 0 1px 2px rgba(255,255,255,.6); } /* ========== 语音播报条（播音员头像 + 控制） ========== */ .voicebar { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.72); border: 1px solid rgba(184,159,116,.55); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; } .v-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #b89f74; background: #eee; flex: 0 0 auto; transition: box-shadow .3s; } .v-avatar.playing { box-shadow: 0 0 0 4px rgba(184,159,116,.35), 0 0 16px rgba(184,159,116,.6); animation: avpulse 1.4s ease-in-out infinite; } @keyframes avpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .v-mid { flex: 1; min-width: 0; } .v-name { font-weight: 700; color: #4a3f63; font-size: 14px; } .v-select { width: auto; margin-top: 4px; font-size: 13px; } .v-btns { display: flex; gap: 6px; flex: 0 0 auto; } .v-btns .btn.sm:disabled { opacity: .5; cursor: default; } .v-btns .btn.sm.v-auto.off { background: #efe9dc; color: #4a453d; } .v-spk { border: 1px solid #cfc7b6; background: #fff; border-radius: 50%; width: 26px; height: 26px; font-size: 13px; cursor: pointer; margin-left: 6px; vertical-align: middle; line-height: 1; flex: 0 0 auto; } .v-spk:hover { background: #f3ead8; } /* 语速滑块（紧挨播音员下拉框） */ .v-speed { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .v-speed .vs-cap { font-size: 12px; color: #7a6f5d; flex: 0 0 auto; } .v-speed .vs-range { width: 96px; max-width: 34vw; accent-color: #b89f74; cursor: pointer; flex: 0 0 auto; } .v-speed .vs-val { font-size: 12px; color: #4a3f63; font-weight: 700; min-width: 34px; flex: 0 0 auto; font-variant-numeric: tabular-nums; } @media (max-width: 520px) { .voicebar { flex-wrap: wrap; } .v-btns { width: 100%; justify-content: flex-end; } } /* ===== AI 批改作业面板 ===== */ .grading { margin: 12px 0 4px; border: 1px dashed #d8cfbd; border-radius: 10px; padding: 10px 12px; background: #fdfbf6; } .grading .g-title { font-size: 13px; font-weight: 700; color: #5a5147; margin-bottom: 8px; } .grading .g-title span { display: block; font-size: 11px; font-weight: 400; color: #9a9488; margin-top: 3px; line-height: 1.5; } .grading .g-rates { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .grading .g-rate { font-size: 12px; padding: 5px 11px; border: 1px solid #e0d8c8; border-radius: 999px; cursor: pointer; background: #fff; color: #6b6257; user-select: none; } .grading .g-rate:hover { background: #f6efe1; } .grading .g-rate.on { background: #b89f74; border-color: #b89f74; color: #fff; } .grading .g-text { width: 100%; min-height: 56px; font-size: 13px; line-height: 1.6; } .grading .g-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .grading .g-status { font-size: 12px; color: #8a8275; margin-top: 6px; } /* 全站页脚：给访客的信 + 免责说明 */ .sitefoot { max-width: 980px; margin: 26px auto 30px; padding: 12px 16px; text-align: center; font-size: 12px; color: #9a9488; line-height: 1.7; border-top: 1px dashed #e3ddd0; } .sitefoot a { color: #b06a3a; text-decoration: none; } .sitefoot a:hover { text-decoration: underline; } .sitefoot .sep { margin: 0 8px; color: #cfc7b8; } .sitefoot .police-icon { height: 14px; width: auto; vertical-align: -2px; margin-right: 4px; } /* AI 生成标记 / 人工校验状态 */ .ai-badge { display: inline-block; font-size: 11px; padding: 1px 9px; border-radius: 999px; background: #eef2f7; color: #5b6b80; border: 1px solid #d3deec; margin-left: 6px; vertical-align: middle; } .review-box { margin-top: 12px; padding: 10px 12px; background: #fbf7ee; border: 1px solid #ecdfc6; border-radius: 10px; line-height: 1.7; } .review-box .rb-t { font-weight: 600; color: #8a6a3a; margin-bottom: 4px; } .review-box .rb-status { font-size: 12px; color: #9a9488; } .review-box textarea { width: 100%; min-height: 60px; font-size: 13px; line-height: 1.6; margin-top: 6px; } .regen-banner { margin: 10px 0 4px; padding: 10px 14px; background: #eef4ea; border: 1px solid #cfe0c4; border-radius: 10px; font-size: 13px; color: #4d5b46; line-height: 1.7; } .regen-banner b { color: #3a3530; } .cmt.ref { border-left: 3px solid #b89f74; } .cmt.ref .who::after { content: ' · 已纳入AI学习'; color: #b06a3a; font-size: 11px; } /* 问事页：直给风格提醒 */ .direct-note { margin-top: 8px; font-size: 12px; line-height: 1.6; color: #8a6a3a; background: #fbf7ee; border: 1px solid #ecdfc6; border-radius: 8px; padding: 7px 10px; } .direct-note b { color: #b06a3a; } /* 问事页：AI 生成 标记行 */ .ai-gen-note { background: #eef2f7; border: 1px solid #d3deec; color: #5b6b80; } /* ===== 校准弹窗：发牌员带牌互动 ===== */ .modal.show .modal-box.calib-box { animation: modalIn .38s cubic-bezier(.2,.9,.3,1.25) both; } .modal.closing .modal-box.calib-box { animation: modalOut .26s ease both; } @keyframes modalIn { 0% { transform: translateY(18px) scale(.94); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes modalOut { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(12px) scale(.96); opacity: 0; } } .calib-box { text-align: left; } .calib-dealer { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .calib-dealer-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #d8c8a4; box-shadow: 0 2px 8px rgba(0,0,0,.18); animation: floaty 3.4s ease-in-out infinite; background: #efe7d6; } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .calib-dealer-talk { font-size: 14px; color: #6b5b45; background: linear-gradient(180deg,#f7f1e6,#f3ecdc); border: 1px solid #e6dcc6; border-radius: 12px; padding: 8px 12px; flex: 1; position: relative; line-height: 1.5; } .calib-dealer-talk:after { content: ''; position: absolute; left: -7px; top: 16px; border: 7px solid transparent; border-right-color: #f3ecdc; } .calib-step { font-size: 12px; color: #a89e8c; margin-bottom: 8px; letter-spacing: .08em; } .flip-card { perspective: 900px; margin: 0 0 12px; } /* 2026-10-25：牌面高度改为「随内容撑开」。 原来两面都是 absolute + inset:0，父级高度写死 98px，推演文字一多就溢出对话框。 现在用 grid 把两面叠在同一格，容器自动取最高那一面；再给正面加 max-height 兜底可滚动。 */ .flip-inner { position: relative; display: grid; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,.8,.3,1); min-height: 120px; } .flip-inner.flipped { transform: rotateY(180deg); } .flip-back, .flip-front { grid-area: 1 / 1; position: relative; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .flip-back { background: linear-gradient(135deg,#5b4a8a,#3a2e5c); color: #e8defb; box-shadow: inset 0 0 0 3px rgba(255,255,255,.12), 0 6px 18px rgba(60,40,90,.35); cursor: pointer; flex-direction: column; } .flip-back-art { font-size: 42px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); } .flip-back-tip { position: absolute; bottom: 10px; font-size: 12px; opacity: .82; } .flip-front { transform: rotateY(180deg); background: linear-gradient(180deg,#fffdf8,#f6efe0); border: 1px solid #e7dcc4; box-shadow: 0 6px 18px rgba(90,70,40,.18); padding: 14px 16px; text-align: left; align-items: flex-start; } /* 极长推演：最高到视口一半，再多就内部滚动，绝不撑破弹窗 */ .flip-front { max-height: 46vh; overflow: auto; } #calibModalStatement { max-height: 44vh; overflow: auto; } /* P3 综合结果：档位徽章（A 有利/B 下功夫/C 吃力，不骑墙） */ .sum-band { display: inline-block; border-radius: 999px; padding: 4px 14px; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .5px; } .band-A { background: linear-gradient(135deg,#2fae6a,#1f8a51); box-shadow: 0 6px 16px rgba(47,174,106,.32); } .band-B { background: linear-gradient(135deg,#e0a13f,#c8812a); box-shadow: 0 6px 16px rgba(224,161,63,.32); } .band-C { background: linear-gradient(135deg,#d9694f,#b74a34); box-shadow: 0 6px 16px rgba(217,105,79,.32); } /* 追问引导弹窗的引导语 */ .fu-lead { font-size: 14.5px; line-height: 1.75; color: #4a4235; background: #fbf6ea; border: 1px solid #ece0c6; border-radius: 12px; padding: 11px 13px; } #calibModalStatement { line-height: 1.7; font-size: 15px; color: #3a3328; } #calibModalStatement .role-tag { display: inline-block; background: #f3e9ff; color: #6a3ea1; border-radius: 6px; padding: 1px 8px; font-size: 13px; margin-right: 6px; } .calib-ask { font-size: 13px; color: #8a8377; margin: 2px 0 10px; text-align: center; } .calib-btns { display: flex; gap: 10px; } .calib-pick { flex: 1; border: none; border-radius: 12px; padding: 11px 0; font-size: 15px; font-weight: 600; cursor: pointer; color: #fff; transition: transform .12s, box-shadow .2s, filter .2s; box-shadow: 0 4px 12px rgba(0,0,0,.15); font-family: inherit; } .calib-pick .cp-ic { font-size: 17px; margin-right: 4px; } .cp-hit { background: linear-gradient(135deg,#e0795a,#c85a3c); } .cp-miss { background: linear-gradient(135deg,#7a6f9c,#5b4a8a); } .calib-pick:hover { transform: translateY(-2px); filter: brightness(1.05); } .calib-pick:active { transform: scale(.95); } .calib-pick.picked { animation: poppick .3s ease; } @keyframes poppick { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } } .calib-hint { display: none; font-size: 12px; color: #c0392b; margin: 8px 0 2px; } .calib-reason-wrap { max-height: 0; overflow: hidden; transition: max-height .3s ease, opacity .3s ease; opacity: 0; } .calib-reason-wrap.open { max-height: 170px; opacity: 1; margin-top: 8px; } .calib-reason-label { font-size: 13px; color: #6b5b45; display: block; margin-bottom: 4px; } .calib-reason { width: 100%; height: 64px; resize: none; box-sizing: border-box; border: 1px solid #ddd2bb; border-radius: 10px; padding: 9px; font-family: inherit; font-size: 14px; } .calib-actions { margin-top: 14px; } /* ===== 发牌员「桌宠」大图角色：桌面端填充两侧空白并展示动作 ===== */ /* 关键：定位必须写在基础层（不依赖媒体查询），否则 fixed 会退回文档流落到页面左下角 */ .fp-actor-wrap { position: fixed; bottom: 0; z-index: 55; pointer-events: none; display: flex; align-items: flex-end; line-height: 0; } .fp-actor-wrap.fp-interactive { pointer-events: auto; cursor: pointer; } .fp-left { left: 0; } .fp-right { right: 0; } .fp-img { display: block; width: auto; height: auto; filter: drop-shadow(0 18px 34px rgba(0,0,0,.45)); } /* 双 max 约束 → 等比缩放不拉伸；底部渐隐融进背景，不像贴了张方块图 */ .fp-left .fp-img, .fp-right .fp-img { max-height: 86vh; max-width: calc((100vw - 640px) / 2 - 6px); -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 9%); mask-image: linear-gradient(to top, transparent 0%, #000 9%); } .fp-right { opacity: .15; } .fp-right .fp-img { transform: scaleX(-1); } /* 气泡（2026-10-25 加特效：弹出回弹 + 金边高亮 + 更久停留） */ .fp-bubble { position: absolute; background: linear-gradient(180deg,#fffdf7 0%,#fbf4e6 100%); color: #33291f; border: 1.5px solid rgba(198,152,74,.75); border-radius: 16px; padding: 11px 15px; font-size: 14.5px; font-weight: 600; line-height: 1.55; box-shadow: 0 10px 26px rgba(0,0,0,.42), 0 0 0 3px rgba(255,214,140,.18), inset 0 1px 0 rgba(255,255,255,.9); opacity: 0; transform: translateY(10px) scale(.86); transform-origin: 20% 100%; transition: opacity .2s ease, transform .2s ease; max-width: 240px; pointer-events: none; letter-spacing: .2px; } .fp-talking .fp-bubble { opacity: 1; transform: translateY(0) scale(1); animation: fpBubblePop .5s cubic-bezier(.34,1.56,.64,1) both; } @keyframes fpBubblePop { 0% { opacity: 0; transform: translateY(10px) scale(.84); } 55% { opacity: 1; transform: translateY(-4px) scale(1.08); } 75% { transform: translateY(1px) scale(.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* 气泡存在期间持续轻微呼吸，别像贴了张死图 */ .fp-talking .fp-bubble { animation: fpBubblePop .5s cubic-bezier(.34,1.56,.64,1) both, fpBubbleGlow 2.6s ease-in-out .5s infinite; } @keyframes fpBubbleGlow { 0%,100% { box-shadow: 0 10px 26px rgba(0,0,0,.42), 0 0 0 3px rgba(255,214,140,.18), inset 0 1px 0 rgba(255,255,255,.9); } 50% { box-shadow: 0 12px 30px rgba(0,0,0,.48), 0 0 0 5px rgba(255,214,140,.34), inset 0 1px 0 rgba(255,255,255,.95); } } .fp-bubble:after { content: ''; position: absolute; border: 8px solid transparent; } .fp-left .fp-bubble { left: 8px; top: 8vh; } .fp-left .fp-bubble:after { left: 26px; bottom: -14px; border-top-color: #fdfaf3; } /* 窄屏：右下浮动小宠（桌面两侧大图隐藏） */ .fp-mobile { right: 6px; bottom: 8px; z-index: 60; } .fp-mobile .fp-img { max-height: 30vh; max-width: 40vw; } .fp-mobile .fp-bubble { right: 4px; bottom: calc(30vh + 10px); max-width: 170px; font-size: 13px; } .fp-mobile .fp-bubble:after { right: 20px; bottom: -14px; border-top-color: #fdfaf3; } .fp-actor-wrap.fp-mobile { animation: fpBob 3.4s ease-in-out infinite; } /* 显隐切换：宽屏只显示侧栏，窄屏只显示浮动宠 */ @media (min-width: 1000px) { .fp-mobile { display: none; } } /* 弹窗（校准对话）打开时，桌宠整体让位 —— 否则手机端浮窗会压住弹窗按钮与文字 */ .fp-actor-wrap { transition: opacity .18s ease, transform .18s ease; } .fp-actor-wrap.fp-hide { opacity: 0; transform: translateY(14px) scale(.92); pointer-events: none; visibility: hidden; } @media (max-width: 999px) { .fp-left, .fp-right { display: none; } } /* 动作：发牌 / 开心 / 思考（作用于整组角色容器，与 idle 互斥） */ .fp-actor-wrap.fp-left { animation: fpBob 3.6s ease-in-out infinite; } .fp-actor-wrap.fp-right { animation: fpBob 3.6s ease-in-out infinite; } .fp-actor-wrap.fp-deal { animation: fpDeal .6s ease !important; } .fp-actor-wrap.fp-happy { animation: fpHappy .55s ease !important; } .fp-actor-wrap.fp-think { animation: fpThink .6s ease !important; } @keyframes fpBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes fpDeal { 0% { transform: rotate(0); } 20% { transform: rotate(-9deg) scale(1.05); } 45% { transform: rotate(9deg) scale(1.05); } 70% { transform: rotate(-4deg); } 100% { transform: rotate(0); } } @keyframes fpHappy { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-20px) scale(1.06); } } @keyframes fpThink { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 65% { transform: rotate(5deg); } } /* ===== 校准弹窗：改为「大角色 + 对话」衍生样式 ===== */ .calib-stage { display: flex; gap: 14px; align-items: flex-start; } .calib-dealer-big { flex: 0 0 42%; max-width: 210px; position: relative; } .calib-dealer-big img { width: 100%; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.3); display: block; animation: fpBob 3.6s ease-in-out infinite; } .calib-dealer-big.cd-nod img { animation: fpHappy .5s ease; } .calib-dealer-big.cd-think img { animation: fpThink .6s ease; } .calib-dealer-big.cd-deal img { animation: fpDeal .6s ease; } .calib-dealer-talk { font-size: 13px; color: #6b5b45; background: linear-gradient(180deg,#f7f1e6,#f3ecdc); border: 1px solid #e6dcc6; border-radius: 12px; padding: 7px 11px; margin-top: 8px; line-height: 1.5; } .calib-panel { flex: 1; min-width: 0; } @media (max-width: 520px) { .calib-stage { flex-direction: column; } .calib-dealer-big { flex: none; max-width: 170px; margin: 0 auto; } } /* ============================================================ 星夜紫皮肤（首页 / 问心事） 深空底 + 金线星盘 + 纸感卡，取代原来的粉紫天光 + 飘落花瓣 ============================================================ */ body.skin-night { background: #0b0614; color: #e7ddf6; } /* 深空底：覆盖 anime-bg 的粉紫天光 */ body.skin-night.anime-bg::before { background: radial-gradient(1100px 720px at 50% -16%, rgba(124,68,166,.55) 0%, rgba(58,30,92,.62) 34%, rgba(23,12,39,.92) 68%, #0b0614 100%), radial-gradient(760px 520px at 82% 86%, rgba(70,40,110,.40), transparent 68%), radial-gradient(680px 480px at 10% 72%, rgba(52,32,86,.44), transparent 70%); background-repeat: no-repeat; } /* 花瓣退场，换成星尘层 */ body.skin-night.anime-bg::after { display: none; } /* 装饰层：星盘 / 星点 / 噪点 / 地平雾（纯 CSS，无图片依赖） */ .night-deco { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .night-deco .nd-ring { position: absolute; left: 50%; top: 50%; width: 148vh; height: 148vh; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(228,200,148,.62) 0deg .4deg, transparent .4deg 9deg); -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,.18) 10%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.85) 66%, transparent 82%); mask-image: radial-gradient(closest-side, rgba(0,0,0,.18) 10%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.85) 66%, transparent 82%); opacity: .42; animation: ndspin 300s linear infinite; } /* 两道金环，让星盘在深空里立起来 */ .night-deco .nd-ring::before, .night-deco .nd-ring::after { content: ''; position: absolute; inset: 5%; border-radius: 50%; border: 1px solid rgba(228,200,148,.30); } .night-deco .nd-ring::after { inset: 20%; border-color: rgba(228,200,148,.22); box-shadow: 0 0 120px rgba(158,108,200,.26) inset; } .night-deco .nd-stars { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.95), transparent), radial-gradient(1.6px 1.6px at 28% 34%, rgba(255,255,255,.8), transparent), radial-gradient(2.4px 2.4px at 64% 12%, rgba(255,255,255,.95), transparent), radial-gradient(1.6px 1.6px at 44% 56%, rgba(255,255,255,.75), transparent), radial-gradient(2.2px 2.2px at 88% 46%, rgba(255,255,255,.9), transparent), radial-gradient(1.6px 1.6px at 76% 74%, rgba(255,255,255,.7), transparent), radial-gradient(2px 2px at 18% 82%, rgba(255,255,255,.85), transparent), radial-gradient(1.6px 1.6px at 94% 88%, rgba(255,255,255,.7), transparent), radial-gradient(2.6px 2.6px at 34% 92%, rgba(232,204,150,.8), transparent), radial-gradient(2px 2px at 52% 26%, rgba(255,241,214,.9), transparent), radial-gradient(1.5px 1.5px at 6% 52%, rgba(255,255,255,.75), transparent), radial-gradient(2px 2px at 70% 62%, rgba(255,255,255,.8), transparent), radial-gradient(1.8px 1.8px at 40% 8%, rgba(255,255,255,.85), transparent), radial-gradient(1.5px 1.5px at 84% 28%, rgba(255,255,255,.7), transparent); animation: ndtwinkle 9s ease-in-out infinite alternate; } .night-deco .nd-noise { position: absolute; inset: 0; opacity: .13; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); background-size: 180px 180px; } .night-deco .nd-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 30vh; background: linear-gradient(to top, rgba(6,3,12,.92), rgba(6,3,12,0)); } @keyframes ndspin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes ndtwinkle { 0% { opacity: .5; } 100% { opacity: .95; } } /* 顶栏：深空玻璃条 + 金线 */ body.skin-night .topbar { background: rgba(10,6,18,.72); border-bottom: 1px solid rgba(220,192,138,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } body.skin-night .topbar a, body.skin-night .topbar .logout { color: #b9abcc; } body.skin-night .topbar .me { color: #8d80a4; } body.skin-night .topbar a.brand { color: #f6ead2; letter-spacing: .16em; } /* 标题：宋体 + 金字，去掉卡通感 */ body.skin-night h2 { color: #f5ecdc; font-family: "Songti SC", "STSong", "SimSun", "宋体", "Noto Serif SC", "Source Han Serif SC", serif; letter-spacing: .22em; font-weight: 600; text-shadow: 0 2px 22px rgba(0,0,0,.7); } /* 页脚：深空下改浅字 */ body.skin-night .sitefoot { color: #8b7fa3; border-top-color: rgba(220,192,138,.18); } body.skin-night .sitefoot a { color: #d9bb80; } body.skin-night .sitefoot .sep { color: #5d5373; } /* 卡片：深空玻璃 + 金边（去掉米白纸感的「土」，全站统一） */ body.skin-night .card, body.skin-night .chat-panel { background: rgba(26,15,46,.92); border: 1px solid rgba(220,192,138,.4); box-shadow: 0 22px 54px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); color: #ece4f6; } /* 主按钮：暗金 */ body.skin-night .btn { background: linear-gradient(180deg, #8b7047, #6b5b45); color: #fdf6e8; box-shadow: 0 8px 20px rgba(0,0,0,.34); } body.skin-night .btn:hover { background: linear-gradient(180deg, #9c7d51, #7a684e); } /* 弹窗：深空玻璃 + 金边，去掉米白纸感的「土」 */ body.skin-night .modal { background: rgba(5,3,11,.82); } body.skin-night .modal-box { background: rgba(26,15,46,.94); border: 1px solid rgba(220,192,138,.46); box-shadow: 0 34px 80px rgba(0,0,0,.72), 0 0 0 4px rgba(220,192,138,.10); color: #ece4f6; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } /* 弹窗内文字与对话气泡：深紫玻璃 + 浅金字 */ body.skin-night .calib-step { color: #9a8fc0; } body.skin-night .calib-ask { color: #b8aed0; } body.skin-night .calib-dealer-talk { background: linear-gradient(180deg, rgba(60,38,96,.92), rgba(42,26,70,.94)); border: 1px solid rgba(220,192,138,.42); color: #e9defb; text-shadow: 0 1px 6px rgba(0,0,0,.4); } body.skin-night .calib-dealer-talk:after { border-right-color: rgba(50,32,82,.94); } body.skin-night .flip-front { background: linear-gradient(180deg, rgba(42,26,70,.96), rgba(28,16,48,.98)); border: 1px solid rgba(220,192,138,.4); box-shadow: 0 6px 18px rgba(0,0,0,.5); color: #ece4f6; } body.skin-night #calibModalStatement { color: #ece4f6; } body.skin-night #calibModalStatement .role-tag { background: rgba(232,204,148,.16); color: #e8c98f; border: 1px solid rgba(232,204,148,.4); } body.skin-night .calib-reason { background: rgba(18,10,34,.85); color: #ece4f6; border-color: rgba(220,192,138,.32); } body.skin-night .calib-reason-label { color: #d8c8ec; } body.skin-night .calib-hint { color: #ff9a8a; } /* 聊天「对话窗」：深空玻璃，告别米白纸感（普通信息卡仍保留纸感作对比） */ body.skin-night .chat-card { background: rgba(26,15,46,.9); border: 1px solid rgba(220,192,138,.44); box-shadow: 0 22px 54px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); color: #ece4f6; } body.skin-night .chat-card .chat-scroll { background: rgba(16,9,30,.66); border: 1px solid rgba(220,192,138,.26); } body.skin-night .chat-card .msg .who { color: #9a8fc0; } body.skin-night .chat-card .msg.me .who { color: #e0a878; } body.skin-night .chat-card .msg.me div { background: linear-gradient(180deg, rgba(132,88,176,.55), rgba(104,68,150,.5)); border: 1px solid rgba(220,192,138,.3); color: #f3ecff; } body.skin-night .chat-card .msg.ai div { background: linear-gradient(180deg, rgba(52,34,86,.92), rgba(38,24,64,.94)); border: 1px solid rgba(220,192,138,.28); color: #e7ddf6; } body.skin-night .chat-card .chat-note { background: rgba(58,38,92,.5); color: #e8c98f; border: 1px solid rgba(220,192,138,.3); } body.skin-night .chat-card .chat-note:last-child { background: rgba(40,52,92,.5); color: #aebbe8; border-color: rgba(150,170,230,.3); } body.skin-night .chat-card textarea, body.skin-night .chat-card input { background: rgba(18,10,34,.85); color: #ece4f6; border-color: rgba(220,192,138,.3); } /* 语音条：深玻璃，避免顶部白条突兀 */ body.skin-night .voicebar { background: rgba(26,15,46,.82); border: 1px solid rgba(220,192,138,.4); color: #ece4f6; } body.skin-night .v-name { color: #e8c98f; } body.skin-night .v-avatar { border-color: rgba(220,192,138,.6); } /* ============================================================ 星夜紫：页面级色值兜底 各页