/* ========================================================= 超级实验助手 · 大衍堂 UniDayan Apple 风格 UI —— 主色：青 + 黄（克制配色 / 毛玻璃质感 / 弹性动画） ========================================================= */ :root { /* 主色：青 + 黄 两种（深色变体仅用于文字以保证可读性，不引入新色相） */ --c-yellow: #FFC83D; /* 黄（亮，用于填充/渐变/背景） */ --c-yellow-deep: #B57400; /* 黄的深色，仅用于文字可读性 */ --c-cyan: #1FC8E0; /* 青（用于填充/渐变/背景） */ --c-cyan-deep: #0B7A92; /* 青的深色，仅用于文字可读性 */ --c-mint: #25B99A; /* 青绿（青家族延伸，用于"破局/方法"语义） */ --c-mint-deep: #0E7A66; /* 中性色（基底） */ --ink: #1d1d1f; --ink-soft: #6e6e73; --line: rgba(255, 255, 255, 0.7); --glass: rgba(255, 255, 255, 0.62); /* 尺寸与动效 */ --radius-lg: 24px; --radius-md: 18px; --shadow-1: 0 8px 24px rgba(40, 60, 90, 0.10); --shadow-2: 0 24px 70px rgba(20, 40, 70, 0.18); --ease: cubic-bezier(0.22, 1, 0.36, 1); --grad: linear-gradient(135deg, var(--c-yellow), var(--c-cyan)); --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; } body { position: relative; min-height: 100vh; background: #0b1024; /* 兜底色 */ } /* ===================== 全局极光背景（仅 青/黄 同色家族） ===================== */ .aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(120% 120% at 0% 0%, #fff6da 0%, transparent 55%), linear-gradient(135deg, #fbfdff 0%, #eef9fb 40%, #e6f6fb 100%); } .blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: 0.5; mix-blend-mode: multiply; animation: drift 22s ease-in-out infinite; } .blob--1 { width: 46vw; height: 46vw; left: -8vw; top: -10vh; background: radial-gradient(circle at 30% 30%, #FFD86B, var(--c-yellow)); } .blob--2 { width: 42vw; height: 42vw; right: -6vw; top: -8vh; background: radial-gradient(circle at 30% 30%, #5BD7EE, var(--c-cyan)); animation-delay: -5s; } .blob--3 { width: 50vw; height: 50vw; left: 18vw; bottom: -22vh; background: radial-gradient(circle at 30% 30%, var(--c-yellow), #FFE9A8); animation-delay: -10s; } .blob--4 { width: 38vw; height: 38vw; right: 10vw; bottom: -16vh; background: radial-gradient(circle at 30% 30%, var(--c-cyan), #A8ECF6); animation-delay: -15s; } @keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(4vw, 6vh) scale(1.08); } 66% { transform: translate(-3vw, 3vh) scale(0.96); } } /* 细腻噪点质感 */ .grain { position: absolute; inset: 0; opacity: 0.045; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ===================== 视图切换基础 ===================== */ .view { position: fixed; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .view--active { display: flex; opacity: 1; transform: none; } /* ===================== 玻璃质感 ===================== */ .glass { background: var(--glass); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--line); box-shadow: var(--shadow-2); } /* ===================== 登录页 ===================== */ #view-login { padding: 4vh 4vw; } .login-card { width: min(420px, 92vw); padding: 44px 40px 32px; border-radius: var(--radius-lg); text-align: center; animation: rise 0.8s var(--ease) both; } @keyframes rise { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } } .brand__logo { width: 132px; height: auto; margin-bottom: 18px; filter: drop-shadow(0 8px 18px rgba(40, 80, 160, 0.18)); } .login__title { font-size: 30px; font-weight: 700; letter-spacing: 0.5px; background: linear-gradient(120deg, #2a2a3a, #1d1d1f 55%, var(--c-cyan-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; } .login__subtitle { margin-top: 8px; font-size: 14px; color: var(--ink-soft); letter-spacing: 2px; } .login__form { margin-top: 30px; text-align: left; } .field { position: relative; display: block; margin-bottom: 22px; } .field input { width: 100%; height: 50px; padding: 14px 4px 8px; background: transparent; border: 0; border-bottom: 1.5px solid rgba(80, 80, 100, 0.28); font-size: 16px; color: var(--ink); outline: none; transition: border-color 0.3s var(--ease); } .field__label { position: absolute; left: 4px; top: 14px; font-size: 16px; color: var(--ink-soft); pointer-events: none; transition: all 0.25s var(--ease); } .field input:focus ~ .field__label, .field input:not(:placeholder-shown) ~ .field__label { top: -8px; font-size: 12px; color: var(--c-cyan-deep); font-weight: 600; } .field__underline { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--grad); transition: width 0.35s var(--ease); } .field input:focus ~ .field__underline { width: 100%; } .login__error { min-height: 18px; margin: -6px 0 10px; font-size: 13px; color: #e5484d; text-align: center; } /* ===================== 按钮 ===================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600; border-radius: 16px; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } .btn--primary { width: 100%; height: 52px; color: #fff; background: var(--grad); background-size: 180% 180%; box-shadow: 0 12px 26px rgba(230, 160, 30, 0.36); animation: shimmer 6s ease infinite; text-shadow: 0 1px 1px rgba(0,0,0,0.12); } @keyframes shimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(230,160,30,0.44); } .btn--primary:active { transform: translateY(0) scale(0.99); } .btn--ghost { height: 44px; padding: 0 18px; color: var(--ink); background: var(--glass); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--line); } .btn--ghost svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .btn--ghost:hover { transform: translateY(-2px); } .login__foot { margin-top: 26px; font-size: 12px; color: var(--ink-soft); letter-spacing: 0.5px; } /* ===================== 过渡动画 splash（与登录/主页统一：透明，露出同一片极光） ===================== */ .splash { z-index: 30; background: transparent; /* 露出全局 .aurora，与登录/主页背景一致 */ overflow: hidden; } /* 过渡期间在背景上叠加一层缓慢流动的 黄→青 渐变光晕 */ .splash::before { content: ""; position: absolute; inset: -25%; background: conic-gradient(from 0deg, rgba(255, 200, 61, 0) 0deg, rgba(255, 200, 61, 0.22) 90deg, rgba(31, 200, 224, 0.22) 200deg, rgba(255, 200, 61, 0) 360deg); filter: blur(48px); animation: spin 9s linear infinite; pointer-events: none; } @keyframes spin { to { transform: rotate(360deg); } } .splash__inner { position: relative; z-index: 2; text-align: center; padding: 0 6vw; } .splash__mark { position: relative; width: 132px; height: 132px; margin: 0 auto 36px; display: grid; place-items: center; } .splash__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(31, 200, 224, 0.18); animation: pulse-y 2s ease-out infinite; } .splash__ring--2 { animation-name: pulse-c; animation-delay: 1s; } @keyframes pulse-y { 0% { transform: scale(0.65); opacity: 0.85; border-color: rgba(255, 200, 61, 0.75); } 100% { transform: scale(1.5); opacity: 0; border-color: rgba(255, 200, 61, 0); } } @keyframes pulse-c { 0% { transform: scale(0.65); opacity: 0.85; border-color: rgba(31, 200, 224, 0.75); } 100% { transform: scale(1.5); opacity: 0; border-color: rgba(31, 200, 224, 0); } } .splash__badge { position: relative; z-index: 1; width: 86px; height: 86px; border-radius: 24px; display: grid; place-items: center; background: var(--grad); box-shadow: 0 18px 40px rgba(230, 160, 30, 0.42); opacity: 0; transform: scale(0.6); animation: pop 0.9s var(--ease) 0.15s forwards; } .splash__logo { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)); } @keyframes pop { to { opacity: 1; transform: scale(1); } } .splash__slogan { font-size: clamp(26px, 4vw, 44px); font-weight: 700; letter-spacing: 2px; background: linear-gradient(120deg, #1d1d1f 0%, var(--c-cyan-deep) 55%, var(--c-yellow-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(16px); animation: up 0.9s var(--ease) 0.55s forwards; } .splash__sub { margin-top: 14px; font-size: clamp(13px, 1.4vw, 17px); color: var(--ink-soft); letter-spacing: 4px; opacity: 0; transform: translateY(16px); animation: up 0.9s var(--ease) 0.85s forwards; } @keyframes up { to { opacity: 1; transform: none; } } /* ===================== 主页 ===================== */ .home { flex-direction: column; align-items: stretch; justify-content: stretch; padding: 0; gap: 0; } .home__topbar { display: flex; align-items: center; justify-content: space-between; /* 右侧多留 54px，给悬浮的全屏按钮让位 */ padding: 22px calc(clamp(48px, 6vw, 96px) + 54px) 6px clamp(48px, 6vw, 96px); } .topbar__left { display: flex; align-items: center; gap: 14px; } .topbar__logo { height: 44px; width: auto; filter: drop-shadow(0 6px 14px rgba(40,80,160,0.18)); } .topbar__titles { display: flex; flex-direction: column; line-height: 1.15; } .topbar__app { font-size: 18px; font-weight: 700; color: var(--ink); } .topbar__sub { font-size: 12px; color: var(--ink-soft); letter-spacing: 1px; } .userchip { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; } .userchip__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; background: var(--grad); box-shadow: 0 6px 14px rgba(230,160,30,0.32); } .userchip__info { display: flex; flex-direction: column; line-height: 1.2; text-align: left; } .userchip__name { font-size: 14px; font-weight: 600; color: var(--ink); } .userchip__id { font-size: 12px; color: var(--ink-soft); } /* 六模块网格：更小卡片 + 充足留白 */ .home__grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(176px, auto); gap: 20px; align-content: center; width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(16px, 3vh, 34px) clamp(48px, 6vw, 96px) clamp(12px, 2vh, 24px); } /* 模块卡片：统一白玻璃质感 */ .module { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; color: var(--ink); background: var(--glass); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); border: 1px solid var(--line); box-shadow: var(--shadow-1); transform: translateY(18px); opacity: 0; animation: cardIn 0.7s var(--ease) forwards; animation-delay: var(--d, 0s); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); } @keyframes cardIn { to { opacity: 1; transform: none; } } .module::before { /* 顶部高光 */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); pointer-events: none; opacity: 0.6; } .module:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(31, 140, 170, 0.18); border-color: rgba(31, 200, 224, 0.45); } .module:active { transform: translateY(-2px) scale(0.995); } .module__icon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--grad); box-shadow: 0 8px 18px rgba(230, 160, 30, 0.3); } .module__icon svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)); } .module__head { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 1; } .module__no { font-size: 40px; font-weight: 800; line-height: 0.8; color: rgba(20, 40, 60, 0.1); letter-spacing: -1px; } .module__body { position: relative; z-index: 1; } .module__title { font-size: clamp(17px, 1.3vw, 21px); font-weight: 700; letter-spacing: 0.3px; } .module__tag { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; letter-spacing: 1px; background: rgba(31, 200, 224, 0.14); color: var(--c-cyan-deep); } .module__desc { margin-top: 10px; font-size: 13px; line-height: 1.65; color: var(--ink-soft); } .module__cta { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--c-cyan-deep); } .module__cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); } .module:hover .module__cta svg { transform: translateX(4px); } .home__foot { text-align: center; padding: 6px 0 14px; font-size: 12px; color: var(--ink-soft); letter-spacing: 1px; } .home__foot .dot { margin: 0 8px; opacity: 0.5; } /* ===================== 详情（占位） ===================== */ .detail { flex-direction: column; align-items: stretch; justify-content: stretch; padding: 0; } .detail__topbar { display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(48px, 6vw, 96px); } .detail__title { font-size: 20px; font-weight: 700; } .detail__body { flex: 1; display: flex; flex-direction: column; justify-content: safe center; /* 视频列表等内容垂直居中，下方不留大块空白 */ padding: 6px clamp(48px, 6vw, 96px) 4vh; overflow: auto; } .placeholder { margin: auto; max-width: 560px; padding: 48px 40px; border-radius: var(--radius-lg); text-align: center; } .placeholder__icon { width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 24px; display: grid; place-items: center; background: var(--grad); box-shadow: 0 12px 26px rgba(230, 160, 30, 0.32); } .placeholder__icon svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)); } .placeholder h2 { font-size: 26px; font-weight: 700; } .placeholder p { margin-top: 12px; color: var(--ink-soft); font-size: 15px; line-height: 1.7; } .placeholder__badge { margin-top: 22px; display: inline-block; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 999px; color: #fff; background: var(--grad); text-shadow: 0 1px 1px rgba(0,0,0,0.12); } /* ===================== 全屏切换按钮 ===================== */ .fs-toggle { position: fixed; bottom: 18px; left: 18px; z-index: 200; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--glass); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--line); box-shadow: var(--shadow-1); color: var(--ink); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), opacity 0.3s var(--ease); } .fs-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .fs-toggle .icon-exit { display: none; } .fs-toggle.is-active .icon-enter { display: none; } .fs-toggle.is-active .icon-exit { display: block; } .fs-toggle:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(31,140,170,0.2); } .fs-toggle:active { transform: scale(0.95); } /* 过渡动画期间隐藏，避免干扰 */ body.splash-on .fs-toggle { opacity: 0; pointer-events: none; transform: scale(0.8); } /* 隐蔽的公司 logo：右上角，半透明；hover 显现；点击回主页 */ #home-logo { position: fixed; top: 14px; right: 16px; z-index: 200; width: 38px; height: 38px; padding: 4px; border: none; background: transparent; cursor: pointer; opacity: 0.22; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } #home-logo img { width: 100%; height: 100%; object-fit: contain; display: block; } #home-logo:hover { opacity: 0.9; transform: scale(1.06); } body.splash-on #home-logo { opacity: 0; pointer-events: none; } /* ===================== 数学史：视频列表 ===================== */ .vlist { width: 100%; max-width: 1280px; margin: 0 auto; } .vlist__intro { margin-bottom: 22px; } .vlist__intro h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; } .vlist__intro p { margin-top: 8px; color: var(--ink-soft); font-size: clamp(13px, 1.1vw, 16px); max-width: 760px; line-height: 1.7; } .vlist__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .vcard { position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--glass); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--shadow-1); color: var(--ink); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); } .vcard:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(31, 140, 170, 0.2); border-color: rgba(31, 200, 224, 0.45); } .vcard:active { transform: translateY(-2px) scale(0.995); } .vcard:focus-visible { outline: 3px solid rgba(31, 200, 224, 0.6); outline-offset: 2px; } .vcard__media { position: relative; padding: 10px; background: transparent; } .vcard__cover { position: relative; width: 100%; aspect-ratio: 16 / 9; z-index: 0; background-size: cover; background-position: center; border-radius: 12px; box-shadow: 0 4px 12px rgba(20, 40, 70, 0.12); transition: transform 0.5s var(--ease); } .vcard:hover .vcard__cover { transform: scale(1.03); } .vcard__play { position: absolute; bottom: 14px; left: 14px; z-index: 2; } .vcard__play span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 6px 16px rgba(230, 160, 30, 0.4); transition: transform 0.3s var(--ease); } .vcard:hover .vcard__play span { transform: scale(1.1); } .vcard__play svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; } .vcard__no { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; padding: 4px 12px; border-radius: 999px; color: #fff; background: var(--grad); box-shadow: 0 5px 12px rgba(230, 160, 30, 0.32); } .vcard__body { padding: 10px 14px 12px; } .vcard__title { font-size: 15px; font-weight: 700; } .vcard__desc { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ===================== 视频全屏播放舞台 ===================== */ .vstage { position: fixed; inset: 0; z-index: 400; background: #000; display: none; align-items: center; justify-content: center; } .vstage.is-open { display: flex; } .vstage__video { width: 100%; height: 100%; background: #000; object-fit: contain; } .vstage__close { position: fixed; top: 18px; right: 18px; z-index: 5; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); transition: transform 0.25s var(--ease), background 0.25s var(--ease); } .vstage__close:hover { transform: scale(1.08); background: rgba(255, 255, 255, 0.2); } .vstage__close svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; } /* ===================== 知识图谱（主程序内直接渲染静态 SVG） ===================== */ .graph-view { flex-direction: column; align-items: stretch; justify-content: stretch; padding: 0; } .graph-body { flex: 1; min-height: 0; display: flex; flex-direction: row; gap: 18px; padding: 6px clamp(24px, 3vw, 56px) 3vh; } .graph-stage { position: relative; flex: 1 1 64%; min-width: 0; height: 100%; display: flex; flex-direction: column; gap: 8px; } .kg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; flex: none; } #kg-svg { width: 100%; height: auto; flex: 1 1 auto; min-height: 0; display: block; } /* —— SVG 节点 —— */ .kg-node { cursor: pointer; transition: opacity 0.3s var(--ease); } .kg-node rect { fill: rgba(255, 255, 255, 0.9); stroke: var(--line); stroke-width: 1.5; transition: stroke 0.3s var(--ease), fill 0.3s var(--ease); } .kg-node:hover rect { stroke: var(--cat); } .kg-node__tag { font-size: 11px; font-weight: 700; fill: var(--cat); letter-spacing: 1px; } .kg-node__title { font-size: 14px; font-weight: 700; fill: var(--ink); } .kg-node__sub { font-size: 11px; fill: var(--ink-soft); } /* 本节课核心（放大 + 青黄渐变） */ .kg-node--hub rect { fill: url(#kgGradRoot); opacity: 0.95; } .kg-node--hub .kg-node__tag { fill: rgba(255, 255, 255, 0.92); } .kg-node--hub .kg-node__title--hub { fill: #fff; font-size: 24px; } .kg-node--hub .kg-node__sub { fill: rgba(255, 255, 255, 0.92); } /* 外部章节（前置）/ 本课知识点：玻璃底 + 章节色描边；前置加浅青底以示区分 */ .kg-node--external rect { fill: rgba(31, 200, 224, 0.10); stroke: var(--cat); } .kg-node--internal rect { stroke: var(--cat); } .kg-node--external .kg-node__tag, .kg-node--internal .kg-node__tag { fill: var(--cat); } /* 核心思路：浅黄虚框（方法论提炼，区别于具体知识点） */ .kg-node--summary rect { fill: rgba(255, 200, 61, 0.16); stroke: var(--cat); stroke-width: 1.8; stroke-dasharray: 6 4; } .kg-node--summary .kg-node__tag { fill: var(--cat); } .kg-node--summary .kg-node__title { fill: var(--c-yellow-deep); } .kg-node--summary .kg-node__sub { fill: var(--c-yellow-deep); opacity: 0.85; } .kg-node.focused rect { stroke: var(--cat); stroke-width: 3; filter: drop-shadow(0 0 10px var(--cat)); } .kg-node.dimmed { opacity: 0.25; } .kg-node.mastered rect { stroke: var(--c-cyan); stroke-width: 3.5; } .kg-node.wrong rect { stroke: #e5484d; stroke-width: 3.5; } /* —— SVG 连线 —— */ .kg-link { cursor: pointer; } .kg-link--hier path { stroke: #aeb9cc; stroke-width: 1.5; fill: none; pointer-events: none; } .kg-link--rel { transition: opacity 0.3s var(--ease); } .kg-link--rel .kg-link__path { stroke: #9d6fe0; stroke-width: 2; fill: none; opacity: 0.85; transition: stroke 0.3s var(--ease), stroke-width 0.3s var(--ease); } .kg-link--rel:hover .kg-link__path { stroke-width: 3; opacity: 1; } .kg-link.highlight .kg-link__path { stroke: var(--c-yellow); stroke-width: 3; opacity: 1; } .kg-link.dimmed { opacity: 0.18; } .kg-rlabel { font-size: 12px; fill: #4a4a52; font-weight: 600; cursor: pointer; paint-order: stroke; stroke: #fff; stroke-width: 5; stroke-linejoin: round; } /* —— 图例 —— */ .graph-legend { position: static; flex: none; display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ink-soft); background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); } .leg-ch { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .leg-dot { width: 9px; height: 9px; border-radius: 50%; } .leg-divider { width: 1px; height: 14px; background: rgba(20, 40, 60, 0.15); } .leg-line { display: inline-block; width: 22px; vertical-align: middle; } .leg-line--hier { border-top: 2px solid #aeb9cc; } .leg-line--rel { border-top: 2px solid #9d6fe0; } .leg-tip { color: var(--c-cyan-deep); font-weight: 600; } /* —— 图谱标题说明 —— */ .kg-caption { position: static; flex: 1 1 auto; font-size: 13px; color: var(--ink); background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 7px 14px; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); } .kg-caption strong { color: var(--c-cyan-deep); } /* —— 核心节点：本课知识点列表 —— */ .kg-topic { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--c-cyan); background: rgba(31, 200, 224, 0.06); border-radius: 0 10px 10px 0; } .kg-topic__title { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0; } .kg-topic__points { font-size: 12.5px; color: var(--ink-soft); line-height: 1.8; margin: 3px 0 0; } /* —— 图谱下方详情面板 —— */ .graph-panel { flex: 1 1 36%; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; border-radius: var(--radius-lg); padding: 18px; } .kg-relinfo-empty { font-size: 14px; color: var(--ink-soft); text-align: center; padding: 22px 10px; } .kg-relinfo-empty strong { color: var(--c-cyan-deep); } /* —— 详情卡 —— */ .kg-card { background: rgba(255, 255, 255, 0.62); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-1); } .kg-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .kg-card__badge { font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 3px 10px; border-radius: 999px; color: var(--cat, var(--c-cyan-deep)); background: rgba(255, 255, 255, 0.55); background: color-mix(in srgb, var(--cat, #1fc8e0) 14%, transparent); } .kg-card__title { flex: 1; font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; color: var(--ink); } .kg-card__state { font-size: 12px; font-weight: 700; white-space: nowrap; } .kg-card__state--ok { color: var(--c-cyan-deep); } .kg-card__state--bad { color: #e5484d; } .kg-card__body { display: flex; flex-direction: column; } .kg-sec { margin: 10px 0; } .kg-sec__label { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); } .kg-sec__text, .kg-q { line-height: 1.85; font-size: 14.5px; color: var(--ink); margin: 6px 0 0; } .kg-sec__branches { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; } .kg-sec__list { margin: 8px 0 0; padding-left: 22px; } .kg-sec__list li { line-height: 1.8; color: var(--ink); } .kg-figure { margin-top: 10px; padding: 10px 14px; border: 1px dashed rgba(31, 200, 224, 0.4); border-radius: 12px; background: rgba(31, 200, 224, 0.06); font-size: 15px; color: var(--ink); overflow-x: auto; } /* —— 结构化讲解（手册「小贴士」样式：小标题 + 说明） —— */ .kg-notes { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; } .kg-note { padding: 9px 13px; border-left: 3px solid var(--cat, #1fc8e0); background: rgba(31, 200, 224, 0.05); border-radius: 0 10px 10px 0; } .kg-note__h { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--cat, var(--c-cyan-deep)); margin-right: 8px; } .kg-note__t { display: inline; margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--ink); } .kg-q { font-weight: 600; } /* —— 习题 —— */ .kg-opts { display: grid; gap: 8px; margin-top: 10px; } .kg-opt { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.55); cursor: pointer; color: var(--ink); font-family: inherit; transition: all 0.25s var(--ease); } .kg-opt:hover { border-color: rgba(31, 200, 224, 0.5); background: rgba(255, 255, 255, 0.75); } .kg-opt.is-selected { border-color: var(--c-cyan); background: rgba(31, 200, 224, 0.12); box-shadow: 0 6px 16px rgba(31, 200, 224, 0.18); } .kg-opt:disabled { opacity: 0.6; cursor: default; } .kg-opt__letter { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: rgba(20, 40, 60, 0.08); color: var(--ink-soft); } .kg-opt.is-selected .kg-opt__letter { background: var(--grad); color: #fff; } .kg-submit { height: 44px; margin-top: 12px; } .kg-feedback { margin-top: 10px; } .kg-ok { color: var(--c-cyan-deep); font-weight: 700; } .kg-err { color: #e5484d; font-weight: 700; } .kg-solution { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--c-cyan); background: rgba(31, 200, 224, 0.08); border-radius: 0 10px 10px 0; } .kg-solution__label { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); } .kg-solution p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--ink); } /* —— 关联 chips —— */ .kg-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .kg-chip { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.55); color: var(--ink); cursor: pointer; transition: all 0.25s var(--ease); } .kg-chip:hover { border-color: var(--c-cyan); background: rgba(31, 200, 224, 0.12); color: var(--c-cyan-deep); } .kg-chip--pre { border-color: rgba(181, 116, 0, 0.35); color: var(--c-yellow-deep); } .kg-chip--pre:hover { border-color: var(--c-yellow); background: rgba(255, 200, 61, 0.15); color: var(--c-yellow-deep); } /* —— 连线关系卡 —— */ .kg-rel__dir { font-size: 15px; font-weight: 700; color: var(--ink); } .kg-rel__label { font-size: 14px; color: var(--ink); margin: 8px 0 0; } .kg-rel__label strong { color: var(--c-cyan-deep); } .kg-rel__hint { font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin: 8px 0 0; } @media (max-width: 980px) { .graph-body { flex-direction: column; gap: 14px; } .graph-stage { flex: none; height: 48vh; min-height: 360px; } .graph-panel { flex: 1 1 auto; } } @media (max-width: 720px) { .graph-body { padding-left: 16px; padding-right: 16px; } .graph-legend { gap: 6px; padding: 4px 10px; } .leg-tip { display: none; } } .experiment-view { flex-direction: column; align-items: stretch; justify-content: stretch; padding: 0; } .exp-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(48px, 6vw, 96px) 10px; } .exp-topbar__title { font-size: clamp(16px, 1.4vw, 20px); font-weight: 700; } .exp-topbar__right { width: 130px; } /* 与左侧返回按钮等宽，使标题居中 */ .experiment-view__frame { flex: 1; width: 100%; border: 0; margin: 0; background: transparent; /* 露出主程序青·黄极光背景 */ } /* ===================== AI 智能批改讲解 ===================== */ .ai-view { flex-direction: column; align-items: stretch; justify-content: stretch; padding: 0; } .ai-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(40px, 5vw, 96px) 8px; } .ai-topbar__title { font-size: clamp(16px, 1.4vw, 20px); font-weight: 700; } .ai-topbar__right { width: 130px; } .ai-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; justify-content: safe center; /* 轻量子屏(题型/列表/intro)垂直居中；长内容(flex:1)占满或回落顶对齐可滚 */ padding: 4px clamp(40px, 5vw, 96px) 3vh; width: 100%; max-width: 1480px; margin: 0 auto; } .ai-view .card { background: var(--glass); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); } /* —— 顶部标题区：标题 + 副标题同一行 —— */ .ai-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .ai-head h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; } .ai-head p { margin-top: 6px; color: var(--ink-soft); line-height: 1.6; max-width: 62ch; } .ai-head__badge { font-size: 12px; font-weight: 600; color: var(--c-cyan-deep); background: rgba(31, 200, 224, 0.12); padding: 7px 14px; border-radius: 999px; white-space: nowrap; } .ai-head__top { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; } .ai-head__top h2 { margin: 0; } .ai-head__top p { margin: 0; } /* —— 题号跳转条：标题下方整行序号，点击可跳到任意一题 —— */ .ai-jump { display: flex; width: 100%; padding-top: 2px; } .ai-jump__nums { display: flex; gap: 8px; width: 100%; justify-content: center; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; scrollbar-color: rgba(31, 200, 224, .4) transparent; } .ai-jump__nums::-webkit-scrollbar { height: 4px; } .ai-jump__nums::-webkit-scrollbar-thumb { background: rgba(31, 200, 224, 0.35); border-radius: 4px; } .ai-jump__nums::-webkit-scrollbar-track { background: transparent; } .ai-jump__num { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 15px; font-weight: 700; font-family: inherit; color: var(--c-cyan-deep); background: rgba(255, 255, 255, 0.62); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .ai-jump__num:hover { transform: translateY(-1px); background: rgba(31, 200, 224, 0.15); } .ai-jump__num.is-active { background: linear-gradient(135deg, #FFC83D, #1FC8E0); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(31, 140, 170, 0.28); } /* —— 题型网格：宽屏 5 列排满一行 —— */ .ai-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .atype { position: relative; display: flex; flex-direction: column; gap: 10px; text-align: left; cursor: pointer; padding: 22px 20px; min-height: 232px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--glass); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--shadow-1); color: var(--ink); font-family: inherit; opacity: 0; transform: translateY(16px); animation: cardIn 0.6s var(--ease) forwards; animation-delay: var(--d, 0s); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); } .atype:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(31, 140, 170, 0.2); border-color: rgba(31, 200, 224, 0.5); } .atype__tile { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 800; font-size: 20px; box-shadow: 0 8px 18px rgba(230, 160, 30, 0.3); } .atype__tag { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(31, 200, 224, 0.14); color: var(--c-cyan-deep); letter-spacing: 1px; align-self: flex-start; } .atype__title { font-size: clamp(15px, 1.15vw, 18px); font-weight: 700; line-height: 1.35; } .atype__desc { flex: 1; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; } .atype__go { font-size: 13px; font-weight: 600; color: var(--c-cyan-deep); } .ai-crumb { font-size: 14px; color: var(--ink-soft); font-weight: 600; margin-bottom: 16px; letter-spacing: 0.5px; } /* —— 题目列表：auto-fit 自动填满，不留空列 —— */ .ai-qlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; } .qcard { text-align: left; cursor: pointer; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--glass); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--shadow-1); color: var(--ink); font-family: inherit; display: flex; flex-direction: column; gap: 12px; min-height: 188px; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } .qcard:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(31, 140, 170, 0.16); border-color: rgba(31, 200, 224, 0.45); } .qcard__top { display: flex; align-items: center; justify-content: space-between; } .qcard__no { font-size: 13px; font-weight: 700; color: var(--c-cyan-deep); } .qcard__kind { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(255, 200, 61, 0.22); color: var(--c-yellow-deep); } .qcard__stem { flex: 1; font-size: 15px; line-height: 1.7; color: var(--ink); } .qcard__go { font-size: 13px; font-weight: 600; color: var(--c-cyan-deep); } /* —— 作答：左题干 / 右作答区，标准答案跨整行 —— */ .qanswer { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; } .qanswer__left, .qanswer__right { display: flex; flex-direction: column; gap: 14px; } .qanswer__label { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); } .qanswer__stem { padding: 20px 22px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.9; } .qoptions { display: grid; gap: 10px; } .qopt { display: flex; align-items: flex-start; gap: 12px; text-align: left; cursor: pointer; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink); font-family: inherit; transition: all 0.25s var(--ease); } .qopt:hover { border-color: rgba(31, 200, 224, 0.5); background: rgba(255, 255, 255, 0.75); } .qopt.is-selected { border-color: var(--c-cyan); background: rgba(31, 200, 224, 0.12); box-shadow: 0 6px 16px rgba(31, 200, 224, 0.18); } .qopt__letter { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: rgba(20, 40, 60, 0.08); color: var(--ink-soft); } .qopt.is-selected .qopt__letter { background: var(--grad); color: #fff; } .qopt__text { flex: 1; line-height: 1.7; padding-top: 3px; } .qans-hint { font-size: 12.5px; color: var(--ink-soft); } .qphoto { padding: 18px; border-radius: var(--radius-lg); border: 2px dashed rgba(31, 200, 224, 0.45); } .qphoto__drop { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; padding: 22px; } .qphoto__icon { font-size: 32px; } .qphoto__txt { font-size: 15px; font-weight: 600; color: var(--ink); } .qphoto__sub { font-size: 12px; color: var(--ink-soft); } .qphoto__preview { margin-top: 14px; max-width: 100%; max-height: 240px; border-radius: 14px; box-shadow: var(--shadow-1); } .qphoto input[type="file"] { display: none; } .qanswer__submit { height: 48px; } .qanswer__reveal { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; margin-top: 4px; } .qanswer__after { display: flex; } .qanswer__after .btn { min-width: 220px; height: 48px; } /* —— 标准答案面板 —— */ .qstd { padding: 20px 22px; } .qstd__row { margin-bottom: 8px; } .qstd__tag { font-size: 12px; font-weight: 700; letter-spacing: 1px; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--grad); } .qstd__question { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.9; margin-bottom: 14px; color: var(--ink); } .qstd__answer { font-size: clamp(16px, 1.4vw, 20px); font-weight: 700; margin-bottom: 14px; line-height: 1.7; } .qstd__options { display: grid; gap: 10px; margin-bottom: 14px; } .qopt--static, .qopt--static:hover { cursor: default; border-color: var(--line); background: rgba(255, 255, 255, 0.55); } .qopt.is-correct { border-color: var(--c-cyan); background: rgba(31, 200, 224, 0.12); box-shadow: 0 6px 16px rgba(31, 200, 224, 0.18); } .qopt.is-correct .qopt__letter { background: var(--grad); color: #fff; } .qopt__mark { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--c-cyan-deep); } .qstd__steps { margin: 8px 0 0; padding-left: 22px; } .qstd__steps li { margin: 8px 0; line-height: 1.8; color: var(--ink); } /* —— AI 详细解析：左右等高、填满屏高，对话内部滚动 —— */ .explain { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: stretch; } .explain__answer { min-height: 0; overflow: auto; } .explain__chat { min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--line); } .chat__msgs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px; } .bubble { display: flex; gap: 10px; align-items: flex-start; max-width: 100%; } .bubble--user { flex-direction: row-reverse; } .bubble__avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; } .bubble--assistant .bubble__avatar { background: var(--grad); } .bubble--user .bubble__avatar { background: rgba(20, 40, 60, 0.5); } .bubble__text { padding: 10px 14px; border-radius: 14px; line-height: 1.7; font-size: 14px; } .bubble--assistant .bubble__text { background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-top-left-radius: 4px; } .bubble--user .bubble__text { background: var(--grad); color: #fff; border-top-right-radius: 4px; } .bubble.is-loading .bubble__text { opacity: 0.7; } .bubble__err { color: #d34c58; } .bubble__text strong { font-weight: 700; } .bubble__text em { font-style: italic; } .bubble__text hr { border: 0; border-top: 1px solid rgba(20, 40, 60, 0.14); margin: 10px 0; } /* 输入区：语音 / 文字 / 发送 三行分层，互不挤压 */ .chat__bar { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); } .chat__bar textarea { width: 100%; resize: none; min-height: 58px; max-height: 140px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); font-family: inherit; font-size: 14px; color: var(--ink); outline: none; transition: border-color 0.25s var(--ease); } .chat__bar textarea:focus { border-color: var(--c-cyan); } .chat__send { width: 100%; height: 44px; } .mic-btn { width: 100%; height: 44px; border-radius: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--c-cyan-deep); background: rgba(31, 200, 224, 0.14); border: 1px solid rgba(31, 200, 224, 0.35); transition: all 0.25s var(--ease); } .mic-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mic-btn:hover { background: rgba(31, 200, 224, 0.22); } .mic-btn.is-on { background: var(--c-yellow); color: #fff; border-color: var(--c-yellow); animation: micPulse 1.2s ease-in-out infinite; } @keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255, 200, 61, 0.5); } 50% { box-shadow: 0 0 0 10px rgba(255, 200, 61, 0); } } .chat__status { font-size: 12px; color: var(--ink-soft); min-height: 16px; } /* 轻提示 */ .toast { position: fixed; left: 50%; bottom: 36px; transform: translate(-50%, 20px); background: rgba(20, 30, 50, 0.92); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px; z-index: 500; opacity: 0; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); pointer-events: none; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); } .toast.is-show { opacity: 1; transform: translate(-50%, 0); } /* AI 模块自适应 */ @media (max-width: 1180px) { .ai-types { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .ai-types { grid-template-columns: repeat(2, 1fr); } .qanswer { grid-template-columns: 1fr; } .explain { grid-template-columns: 1fr; min-height: 0; } } @media (max-width: 480px) { .ai-types { grid-template-columns: 1fr; } } /* ===================== 横屏优先适配 ===================== */ @media (orientation: portrait) { .home__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(160px, auto); } .vlist__grid { grid-template-columns: repeat(2, 1fr); } .explain { grid-template-columns: 1fr; } } @media (max-width: 720px) { .home__grid { grid-template-columns: 1fr; grid-auto-rows: auto; } .vlist__grid { grid-template-columns: 1fr; } .login-card { padding: 34px 26px 26px; } .topbar__titles { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ===================== 高阶思维训练（thinking · 波利亚四步法） ===================== */ /* —— intro 屏 —— */ .thk-intro { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; } .thk-hero { padding: 26px 30px; text-align: center; } .thk-hero__badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2px; padding: 4px 12px; border-radius: 999px; color: var(--c-cyan-deep); background: rgba(31,200,224,.14); margin-bottom: 10px; } .thk-hero__title { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: var(--ink); margin-bottom: 8px; } .thk-hero__quote { font-size: 15px; line-height: 1.85; color: var(--ink); font-style: italic; max-width: 640px; margin: 0 auto; } .thk-hero__author { font-size: 13px; color: var(--ink-soft); margin-top: 6px; } .thk-isteps { padding: 18px 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .thk-istep { display: flex; gap: 10px; align-items: flex-start; } .thk-istep__no { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--grad); } .thk-istep__name { font-size: 14px; color: var(--ink); } .thk-istep p { font-size: 12px; color: var(--ink-soft); line-height: 1.6; margin-top: 2px; } .thk-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .thk-card { position: relative; padding: 22px 24px; border-radius: var(--radius-lg); cursor: pointer; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .thk-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } .thk-card--mother { border-top: 4px solid var(--c-cyan); } .thk-card--variant { border-top: 4px solid var(--c-mint); } .thk-card__no { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--grad); margin-bottom: 8px; } .thk-card--variant .thk-card__no { background: linear-gradient(135deg, var(--c-mint), var(--c-cyan)); } .thk-card__title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .thk-card__desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; } .thk-card__cta { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--c-cyan-deep); } .thk-intro__tip { font-size: 12.5px; color: var(--ink-soft); text-align: center; } /* —— solve 屏（左右两栏，复用 .explain）—— */ .thk-solve.explain { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 20px; align-items: start; } .thk-solve__left { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; } .thk-stem { padding: 18px 20px; border-radius: var(--radius-lg); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.95; } .thk-stem header { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); margin-bottom: 8px; } .thk-figure-wrap { padding: 14px; border-radius: var(--radius-lg); } .thk-figure { width: 100%; height: auto; display: block; } #thk-fig svg { animation: thkFigIn 0.6s var(--ease); } /* 图象随理解推进淡入 */ @keyframes thkFigIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .thk-plan-recap { margin-bottom: 14px; padding: 14px 16px; border-radius: 12px; border-left: 3px solid var(--c-cyan); } .thk-plan-recap header { font-size: 12px; font-weight: 700; color: var(--c-cyan-deep); margin-bottom: 4px; letter-spacing: 1px; } .thk-plan-recap p { font-size: 14px; line-height: 1.8; color: var(--ink); } .thk-stepbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .thk-step { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.55); color: var(--ink-soft); font-size: 12.5px; font-family: inherit; transition: all .25s var(--ease); } .thk-step b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,40,60,.08); font-size: 12px; } .thk-step.is-active { border-color: var(--c-cyan); background: rgba(31,200,224,.14); color: var(--c-cyan-deep); font-weight: 700; } .thk-step.is-active b { background: var(--c-cyan); color: #fff; } .thk-step.is-done b { background: var(--c-mint); color: #fff; } .thk-stepbar__line { flex: 1; height: 2px; background: rgba(20,40,60,.12); min-width: 10px; } .thk-govariant { margin-top: 4px; height: 42px; } .thk-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .thk-step-head__no { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; background: var(--grad); } .thk-step-head__name { font-size: 19px; font-weight: 700; color: var(--ink); } .thk-step-tip { font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; } /* —— 第1步 理解卡片（三色）—— */ .thk-understand { display: flex; flex-direction: column; gap: 10px; } .thk-ucard { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.7); border-left: 3px solid var(--c-cyan); } .thk-ucard[data-kind="def"] { border-left-color: var(--c-mint); } .thk-ucard[data-kind="question"] { border-left-color: var(--c-yellow); background: rgba(255,200,61,.08); } .thk-ucard__tag { flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(31,200,224,.14); color: var(--c-cyan-deep); height: fit-content; } .thk-ucard[data-kind="def"] .thk-ucard__tag { background: rgba(37,185,154,.16); color: var(--c-mint-deep); } .thk-ucard[data-kind="question"] .thk-ucard__tag { background: rgba(255,200,61,.22); color: var(--c-yellow-deep); } .thk-ucard__body p { line-height: 1.75; } .thk-ucard__trans { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px !important; } /* —— 第2步 思路流（青推理 / 黄卡点 / 青绿破局）—— */ .thk-flow { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .thk-flow-item { padding: 10px 13px; border-radius: 12px; border: 1px solid var(--line); border-left: 3px solid var(--c-cyan); background: linear-gradient(155deg, rgba(255,255,255,.94), rgba(237,247,255,.82)); } .thk-flow-item p { margin: 5px 0 0; line-height: 1.75; } .thk-flow-label { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(31,200,224,.14); color: var(--c-cyan-deep); } .thk-flow-item.role-stuck { border-left-color: var(--c-yellow); background: linear-gradient(155deg, rgba(255,252,242,.96), rgba(255,241,207,.82)); } .thk-flow-item.role-stuck .thk-flow-label { background: rgba(255,200,61,.22); color: var(--c-yellow-deep); } .thk-flow-item.role-method, .thk-flow-item.role-breakthrough { border-left-color: var(--c-mint); background: linear-gradient(155deg, rgba(232,255,249,.96), rgba(214,250,241,.82)); } .thk-flow-item.role-method .thk-flow-label, .thk-flow-item.role-breakthrough .thk-flow-label { background: rgba(37,185,154,.16); color: var(--c-mint-deep); } .thk-outline { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid var(--line); } .thk-outline header { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); margin-bottom: 8px; } .thk-outline__row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(20,40,60,.1); } .thk-outline__row:last-child { border-bottom: 0; } .thk-outline__key { flex: none; width: 84px; font-size: 12px; font-weight: 700; color: var(--c-cyan-deep); } .thk-outline__val { font-size: 13.5px; line-height: 1.7; } /* —— 第3步 解答块 —— */ .thk-solve-block { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.75); border: 1px solid var(--line); border-left: 3px solid var(--c-cyan); margin-bottom: 12px; } .thk-solve-block__tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--grad); margin-bottom: 6px; } .thk-solve-block__think { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin: 4px 0 8px; line-height: 1.6; } .thk-solve-block__body { line-height: 1.85; } .thk-solve-block__tex { margin: 8px 0; padding: 10px 14px; background: rgba(31,200,224,.06); border-left: 3px solid var(--c-cyan); border-radius: 0 10px 10px 0; } .thk-solve-block__ask { margin-top: 10px; display: flex; justify-content: flex-end; } .thk-solve-block__ask .btn { height: 36px; font-size: 13px; } /* —— 第4步 回顾 —— */ .thk-review-ideas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .thk-idea { padding: 11px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.65; background: rgba(255,255,255,.7); border: 1px solid var(--line); } .thk-idea--cyan { border-left: 3px solid var(--c-cyan); } .thk-idea--mint { border-left: 3px solid var(--c-mint); } .thk-idea--yellow { border-left: 3px solid var(--c-yellow); } .thk-open-q { padding: 14px 16px; border-radius: 14px; background: rgba(255,200,61,.1); border: 1px solid rgba(255,200,61,.4); border-left: 3px solid var(--c-yellow); font-size: 14px; line-height: 1.75; margin-bottom: 14px; } /* —— 步内浮层（向波利亚请教）—— */ .thk-tutor-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(20,30,50,.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; } .thk-tutor-dialog { width: min(580px, 94vw); max-height: 86vh; overflow: auto; background: #fff; border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-2); } .thk-tutor__head { display: flex; align-items: center; justify-content: space-between; } .thk-tutor__tag { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; color: #fff; background: var(--grad); } .thk-tutor__close { width: 32px; height: 32px; border: none; background: rgba(20,40,60,.06); border-radius: 50%; cursor: pointer; font-size: 16px; color: var(--ink-soft); } .thk-tutor__close:hover { background: rgba(20,40,60,.12); } .thk-tutor-source { padding: 12px 14px; border-radius: 12px; background: rgba(31,200,224,.06); border-left: 3px solid var(--c-cyan); font-size: 13.5px; line-height: 1.8; } .thk-tutor-source__label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); } .thk-tutor-source__tex { margin-top: 8px; } /* —— variant 屏 —— */ .thk-variant { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .thk-variant__head { display: flex; align-items: center; justify-content: space-between; } .thk-variant__badge { font-size: 12px; font-weight: 700; letter-spacing: 1px; padding: 4px 14px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--c-mint), var(--c-cyan)); } .thk-block { padding: 16px 18px; } .thk-block__head { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 12px; } .thk-upload { margin-bottom: 12px; } .thk-upload__drop { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; padding: 18px; border: 2px dashed rgba(31,200,224,.45); border-radius: 14px; color: var(--c-cyan-deep); font-size: 13px; } .thk-upload__drop svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; } .thk-upload__drop:hover { background: rgba(31,200,224,.06); } .thk-upload__preview { margin-top: 12px; max-width: 100%; max-height: 240px; border-radius: 12px; box-shadow: var(--shadow-1); } .thk-grade-note { font-size: 12px; color: var(--ink-soft); margin-top: 8px; line-height: 1.6; } .thk-standard { padding: 14px 18px; } .thk-standard > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--c-cyan-deep); padding: 4px 0; list-style: none; } .thk-standard > summary::-webkit-details-marker { display: none; } .thk-standard[open] > summary { margin-bottom: 10px; } /* thinking 内对话区高度 */ .thk-solve__right .chat__msgs, .thk-variant .chat__msgs, .thk-tutor-dialog .chat__msgs { max-height: 340px; } /* 右侧步骤内容区(8-10)：固定大小"底板"——无论内容多少，尺寸/位置都不变，内部滚动 */ #thk-step-box { height: calc(100vh - 124px); display: flex; flex-direction: column; overflow: hidden; padding: 16px; background: rgba(255, 255, 255, 0.45); border: 1px solid var(--line); border-radius: var(--radius-lg); } /* 上方滚动区：内容从顶部出现，多了内部滚动；底栏固定在窗口底部(内容少时中间留白) */ .thk-step-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 6px; scroll-behavior: smooth; } .thk-step-scroll::-webkit-scrollbar { width: 7px; } .thk-step-scroll::-webkit-scrollbar-thumb { background: rgba(31, 200, 224, 0.32); border-radius: 4px; } .thk-step-scroll::-webkit-scrollbar-track { background: transparent; } .thk-solve__right .chat__msgs { max-height: none; } /* 聊天消息随滚动区滚动 */ /* 输入区：一个框（文字框 + 发送框），语音钮为圆形、置于右下角 */ #thk-step-box .chat__bar { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; padding: 8px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(40, 60, 90, 0.07); } #thk-step-box .chat__bar textarea { order: 1; flex: 1; min-width: 0; min-height: 44px; max-height: 120px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); font-family: inherit; font-size: 14px; color: var(--ink); resize: none; outline: none; transition: border-color 0.25s var(--ease); } #thk-step-box .chat__bar textarea:focus { border-color: var(--c-cyan); } #thk-step-box .chat__bar .chat__send { order: 2; width: auto; min-width: 72px; height: 52px; padding: 0 22px; border-radius: 14px; border: none; font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #FFC83D, #1FC8E0); box-shadow: 0 6px 16px rgba(31,140,170,0.25); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease); } #thk-step-box .chat__bar .chat__send:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,140,170,0.35); } #thk-step-box .chat__bar .chat__send:active { transform: translateY(0) scale(0.97); } #thk-step-box .chat__bar .mic-btn { order: 3; width: 52px; height: 52px; flex: none; padding: 0; border-radius: 50%; } #thk-step-box .chat__bar .mic-btn svg { width: 24px; height: 24px; } #thk-step-box .chat__bar .mic-btn span { display: none; } @media (max-width: 900px) { .thk-solve.explain { grid-template-columns: 1fr; } .thk-solve__left { position: static; } .thk-isteps { grid-template-columns: repeat(2, 1fr); } .thk-cards { grid-template-columns: 1fr; } } @media (orientation: portrait) { .thk-solve.explain { grid-template-columns: 1fr; } .thk-solve__left { position: static; } } /* —— thinking v3：左栏(题干+阶梯步骤+图象) / 右栏(步骤内容，最大) —— */ .thk-solve { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 16px 24px; align-items: start; max-width: 1360px; margin: 0 auto; } .thk-solve .thk-figure-wrap { display: flex; justify-content: center; padding: 12px; } .thk-solve .thk-figure-wrap.is-empty { display: none; } /* 第1步未到第2卡时不显示图象区 */ .thk-solve .thk-figure-wrap .thk-figure { width: 100%; height: auto; } .thk-solve__left { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 8px; } .thk-stem { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.95; padding: 20px 22px; } /* 阶梯式步骤条：四级矩形台阶（水平排列，当前步高亮） */ .thk-steps { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; } .thk-steps .thk-step { border-radius: 10px; padding: 8px 12px; } .thk-steps .thk-stepbar__line { width: 12px; flex: none; align-self: center; } /* SVG 图象文字（纯 ，用 fill 上色，不依赖 MathJax） */ .thk-fig-tick { font-size: 12px; fill: #6e6e73; font-family: var(--font); } .thk-fig-label { font-size: 15px; fill: #0B7A92; font-weight: 700; font-family: var(--font); } .thk-fig-axis { font-size: 12px; fill: #0E7A66; font-weight: 600; font-family: var(--font); } .thk-fig-eq { font-size: 11px; fill: #B57400; font-weight: 600; font-family: var(--font); } .thk-fig-pt { font-size: 14px; fill: #B57400; font-weight: 700; font-style: italic; } /* 第五模块：与解题步骤同步的数学图解 */ .thk-math-figure { width: 100%; } .thk-figure--math { overflow: visible; } .thk-figure-caption { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: rgba(14,129,151,.07); color: var(--ink); } .thk-figure-caption span { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--c-cyan-deep); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .5px; } .thk-figure-caption strong { font-size: 12px; line-height: 1.5; } .thk-fig-title { fill: #263746; font-family: var(--font); font-size: 12px; font-weight: 800; letter-spacing: .3px; } .thk-fig-note { fill: #5f6f7d; font-family: var(--font); font-size: 10px; } .thk-fig-grid { fill: none; stroke: #758390; stroke-width: 1.45; } .thk-fig-curve { fill: none; stroke: #0B7A92; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } .thk-fig-guide { fill: none; stroke: #B57400; stroke-width: 1.7; stroke-dasharray: 5 4; } .thk-fig-point { fill: #FFC83D; stroke: #fff; stroke-width: 2; } .thk-fig-core { fill: #0B7A92; stroke: #fff; stroke-width: 1.5; } .thk-fig-domain { fill: none; stroke: #25B99A; stroke-width: 7; stroke-linecap: round; opacity: .8; } .thk-fig-range { fill: none; stroke: #9D6FE0; stroke-width: 7; stroke-linecap: round; opacity: .75; } .thk-fig-callout rect { fill: rgba(255,250,232,.97); stroke: #E6B12D; stroke-width: 1.4; } .thk-fig-callout .thk-fig-label { font-size: 12px; fill: #8A5B00; } .thk-fig-callout .thk-fig-axis { font-size: 10px; fill: #665638; } .thk-fig-solid { fill: rgba(31,200,224,.045); stroke: #0B7A92; stroke-width: 2.6; stroke-linejoin: round; } .thk-fig-centerline { stroke: #9EADBA; stroke-width: 1.3; stroke-dasharray: 6 5; } .thk-fig-ball { fill: rgba(255,200,61,.24); stroke: #B57400; stroke-width: 2.2; } .thk-fig-ball--ghost { fill: rgba(255,200,61,.1); stroke-dasharray: 5 4; } .thk-fig-ball--blue { fill: rgba(31,200,224,.13); stroke: #0B7A92; } .thk-fig-ball--purple { fill: rgba(157,111,224,.22); stroke: #7C52B8; } .thk-fig-radius { stroke: #B57400; stroke-width: 1.5; } .thk-fig-contact { fill: none; stroke: #25B99A; stroke-width: 7; stroke-linecap: round; opacity: .75; } .thk-fig-branch { fill: none; stroke: #48A6D8; stroke-width: 2.6; } .thk-fig-branch--secondary { stroke: #9D6FE0; stroke-width: 2.1; } .thk-fig-node { stroke-width: 1.8; } .thk-fig-node--cyan { fill: rgba(31,200,224,.14); stroke: #0B7A92; } .thk-fig-node--yellow { fill: rgba(255,200,61,.18); stroke: #B57400; } .thk-fig-node--red { fill: rgba(242,118,92,.15); stroke: #D85E48; } /* 第 3 步 策略回顾 */ .thk-recap { padding: 14px 16px; border-left: 3px solid var(--c-cyan); } .thk-recap header { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); margin-bottom: 8px; } .thk-strat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .thk-strat { font-size: 13.5px; line-height: 1.7; padding: 8px 12px; border-radius: 10px; border-left: 3px solid var(--c-cyan); background: rgba(255, 255, 255, .55); } .thk-strat span { display: inline-block; font-size: 11px; font-weight: 700; color: var(--c-cyan-deep); margin-right: 8px; } .thk-strat.role-method, .thk-strat.role-breakthrough { border-left-color: var(--c-mint); } .thk-strat.role-method span, .thk-strat.role-breakthrough span { color: var(--c-mint-deep); } .thk-strat.role-stuck { border-left-color: var(--c-yellow); } .thk-strat.role-stuck span { color: var(--c-yellow-deep); } /* 第 4 步 引导文字 */ .thk-fourq__guide { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px !important; line-height: 1.6; } @media (max-width: 980px) { .thk-solve { grid-template-columns: 1fr; } .thk-solve__left { position: static; } .thk-solve .thk-figure-wrap .thk-figure { width: 100%; max-width: 520px; } } @media (orientation: portrait) { .thk-solve { grid-template-columns: 1fr; } .thk-solve__left { position: static; } } /* —— thinking v2 补充（线性流程 / 精确图象 / 四问反思）—— */ .thk-intro__enter { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .thk-intro__lead { font-size: 14px; color: var(--ink-soft); line-height: 1.8; max-width: 560px; } .thk-intro__lead strong { color: var(--c-cyan-deep); } .thk-start { height: 48px; padding: 0 30px; font-size: 15px; } .thk-step-actions { flex: none; margin-top: 12px; padding-top: 12px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; border-top: 1px solid var(--line); } /* 第4步底栏：输入框(整行) + 下一题按钮(右)，一起粘在底板底部 */ .thk-step-actions.thk-foot-chat { flex-direction: column; align-items: stretch; gap: 8px; } .thk-step-actions.thk-foot-chat .chat__bar { width: 100%; } .thk-step-actions.thk-foot-chat > .btn { align-self: flex-end; } /* 理解卡片（带序号，第 1 步逐句） */ .thk-ucard { align-items: flex-start; } .thk-ucard__no { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--grad); } .thk-ucard__src { font-weight: 600; color: var(--ink); } .thk-ucard__trans { font-size: 13px; color: var(--ink-soft); margin-top: 4px !important; } /* 第 2 步 问题清单 */ .thk-problems { padding: 14px 16px; } .thk-problems header { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); margin-bottom: 6px; } .thk-problems ol { margin: 0; padding-left: 22px; } .thk-problems li { font-size: 14px; line-height: 1.9; color: var(--ink); } /* 变式迁移提示 */ .thk-transfer { padding: 14px 16px; border-left: 3px solid var(--c-mint); } .thk-transfer header { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-mint-deep); margin-bottom: 4px; } .thk-transfer p { font-size: 13.5px; line-height: 1.75; color: var(--ink); } /* 第 4 步 四问反思 */ .thk-fourqs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; } .thk-fourq { padding: 13px 16px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid var(--line); border-left: 3px solid var(--c-cyan); } .thk-fourq:nth-child(2) { border-left-color: var(--c-mint); } .thk-fourq:nth-child(3) { border-left-color: var(--c-yellow); } .thk-fourq:nth-child(4) { border-left-color: var(--c-cyan-deep); } .thk-fourq__key { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--grad); margin-bottom: 6px; } .thk-fourq__q { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.6; } .thk-fourq__hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px !important; line-height: 1.6; } /* 精确图象内的文字（SVG foreignObject） */ .thk-figure-wrap { display: flex; justify-content: center; } .thk-fig-tick { font-size: 11px; color: #6e6e73; text-align: center; line-height: 18px; } .thk-fig-label { font-size: 15px; color: #0B7A92; font-weight: 700; text-align: right; line-height: 22px; } .thk-fig-axis { font-size: 11px; color: #0E7A66; font-weight: 600; line-height: 18px; } .thk-fig-eq { font-size: 11px; color: #B57400; font-weight: 600; text-align: center; line-height: 18px; } /* ========================================================= 第六模块「自由探索」—— 两窗口选择 + 自由对话 ========================================================= */ /* —— intro：两窗口选择页 —— */ .explore-intro { max-width: 1080px; margin: 0 auto; width: 100%; } .ewin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch; } /* 窗口卡（