/* 镜画样式表 — 独立可改 */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
/* === 颜色系统 === */
--bg: #FAF8F5; --card: #FFFFFF;
--ink: #1A1D2E; --ink-2: #4A4E6B; --ink-3: #8B8FA3; --ink-4: #C7CAD8; --ink-5: #E5E7ED;
--line: rgba(20,20,40,.06); --line-2: rgba(20,20,40,.04); --line-3: rgba(20,20,40,.025);
--brand-1: #FF5E62; --brand-2: #FF9966; --brand-soft: #FFF1ED; --brand-deep: #E63946;
--violet: #7B61FF; --violet-2: #B57EFF; --violet-soft: rgba(123,97,255,.08);
--emerald: #20C997; --emerald-2: #12B886; --emerald-soft: rgba(32,201,151,.08);
--amber: #FF9F43; --amber-2: #FFB854; --amber-soft: rgba(255,159,67,.08);
--success: #2F9E44; --success-soft: #D3F9D8;
--error: #E03131; --error-soft: #FFE5E5;
--warning: #F59F00; --warning-soft: #FFF3BF;
--info: #4C6EF5; --info-soft: #E7F5FF;
/* === 阴影系统（5 级） === */
--shadow-xs: 0 1px 2px rgba(20,20,40,.04);
--shadow-sm: 0 1px 2px rgba(20,20,40,.04), 0 2px 6px rgba(20,20,40,.03);
--shadow-md: 0 4px 12px rgba(20,20,40,.05), 0 12px 28px rgba(20,20,40,.06);
--shadow-lg: 0 12px 24px rgba(255,94,98,.08), 0 24px 48px rgba(20,20,40,.08);
--shadow-xl: 0 20px 40px rgba(20,20,40,.1), 0 40px 80px rgba(20,20,40,.12);
--shadow-glow: 0 0 0 1px rgba(255,94,98,.15), 0 8px 24px rgba(255,94,98,.18);
--shadow-inset-light: inset 0 1px 0 rgba(255,255,255,.5);
--shadow-inset-dark: inset 0 -1px 0 rgba(20,20,40,.04);
/* === 缓动曲线 === */
--ease-out: cubic-bezier(.2,.8,.2,1);
--ease-in: cubic-bezier(.4,0,1,1);
--ease-in-out: cubic-bezier(.4,0,.2,1);
--ease-spring: cubic-bezier(.34,1.56,.64,1);
--ease-emphasis: cubic-bezier(.05,.7,.1,1);
/* === 圆角系统 === */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 18px;
--radius-2xl: 22px;
--radius-3xl: 28px;
}
html, body { font-family: 'Inter','Noto Sans SC',-apple-system,sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; letter-spacing: -.005em; overflow-x: hidden; font-feature-settings: 'cv11','ss01','ss03'; }
html { scroll-behavior: smooth; }
::selection { background: rgba(255,94,98,.18); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; border-radius: 4px; }
button:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
/* === 背景光晕 === */
.aurora { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora-blob { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .35; }
.aurora-1 { width:560px; height:560px; background:radial-gradient(circle,#FFC8B0 0%,#FFE0CC 50%,transparent 70%); top:-200px; right:-180px; }
.aurora-2 { width:520px; height:520px; background:radial-gradient(circle,#F8E7D4 0%,#FFF1E5 60%,transparent 75%); bottom:-180px; left:8%; opacity:.3; }
/* === 鼠标跟随光晕（性能优化版） === */
#cursor-glow { position: fixed; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(255,153,102,.16) 0%, rgba(255,94,98,.08) 35%, transparent 65%); pointer-events: none; z-index: 1; left: 0; top: 0; transform: translate3d(-50%,-50%,0); transition: opacity .3s; will-change: transform; opacity: 0; }
#cursor-glow.ready { opacity: 1; }
/* === 功能直达大卡（首页主视觉） === */
.shortcut-card { position:relative; padding:24px; border-radius:22px; cursor:pointer; transition: all .4s cubic-bezier(.2,.8,.2,1); overflow:hidden; min-height:148px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--line-2); background:#fff; }
.shortcut-card::before { content:''; position:absolute; inset:0; opacity:.06; transition: opacity .35s; pointer-events:none; }
.shortcut-card::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 100% 0%, var(--sc-color, #FF5E62) 0%, transparent 50%); opacity:.04; pointer-events:none; transition:opacity .35s; }
.shortcut-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(20,20,40,.08), 0 0 0 1px var(--sc-color,#FF5E62); border-color:transparent; }
.shortcut-card:active { transform: translateY(-2px) scale(.99); transition-duration: .1s; }
.shortcut-card:hover::before { opacity:.10; }
.shortcut-card:hover::after { opacity:.10; }
.shortcut-card:hover .shortcut-arrow { background: var(--sc-grad); color:#fff; transform:translate(2px,-2px); }
.shortcut-card:hover .shortcut-icon { transform: rotate(-8deg) scale(1.06); }
.shortcut-icon { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 8px 20px var(--sc-shadow,rgba(255,94,98,.25)), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .35s cubic-bezier(.2,.8,.2,1); position:relative; z-index:2; }
.shortcut-arrow { position:absolute; right:18px; top:18px; width:30px; height:30px; border-radius:50%; background:rgba(20,20,40,.04); color:var(--ink-3); display:flex; align-items:center; justify-content:center; transition:all .3s; z-index:2; }
.shortcut-tag { position:absolute; right:56px; top:24px; z-index:2; }
.shortcut-title { font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-.01em; margin-bottom:4px; position:relative; z-index:2; }
.shortcut-desc { font-size:12px; color:var(--ink-3); line-height:1.5; position:relative; z-index:2; }
.shortcut-meta { display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); position:relative; z-index:2; }
.shortcut-meta-item { font-size:10.5px; color:var(--ink-3); display:inline-flex; align-items:center; gap:4px; }
.shortcut-meta-item b { color:var(--sc-color,var(--ink-2)); font-weight:700; }
/* === 全局按压反馈 === */
.btn-primary:active, .btn-ghost:active, .btn-violet:active { transform: scale(.97); transition-duration: .08s; }
.industry-card:active, .hero-card:active, .feat-card:active, .agent-card:active { transition-duration: .08s; }
/* === 区块标签线 === */
.section-tag { display:inline-flex; align-items:center; gap:8px; padding:5px 11px 5px 8px; border-radius:100px; font-size:11px; font-weight:600; background:rgba(255,255,255,.7); border:1px solid var(--line); color:var(--ink-2); backdrop-filter:blur(8px); }
.section-tag .pip { width:6px; height:6px; border-radius:50%; }
/* === 首页 landing 页特殊样式 === */
.hero-headline { font-size:54px; line-height:1.05; letter-spacing:-.03em; font-weight:800; color:var(--ink); }
.hero-shimmer { background: linear-gradient(110deg, #C92A2A 0%, var(--brand-1) 25%, var(--brand-2) 50%, var(--brand-1) 75%, #C92A2A 100%); background-size: 200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent; animation: shimmer 5s ease-in-out infinite; font-weight:900; }
@keyframes shimmer { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }
.feat-block { padding:24px; border-radius:22px; background:#fff; border:1px solid var(--line-2); transition: all .35s cubic-bezier(.2,.8,.2,1); position:relative; overflow:hidden; }
.feat-block:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(20,20,40,.06); border-color: var(--fb-c, rgba(255,94,98,.2)); }
.feat-block::before { content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px; border-radius:50%; background: radial-gradient(circle, var(--fb-c,#FF5E62) 0%, transparent 60%); opacity:.06; transition:opacity .35s; pointer-events:none; }
.feat-block:hover::before { opacity:.14; }
.feat-block-icon { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow: 0 6px 16px var(--fb-shadow,rgba(255,94,98,.25)), inset 0 1px 0 rgba(255,255,255,.2); margin-bottom:14px; transition: transform .35s; }
.feat-block:hover .feat-block-icon { transform: rotate(-6deg) scale(1.04); }
/* 流光卡片 */
.shine-card { position:relative; overflow:hidden; }
.shine-card::after { content:''; position:absolute; top:-50%; left:-100%; width:50%; height:200%; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); transform: skewX(-20deg); animation: shine 6s ease-in-out infinite; pointer-events:none; }
@keyframes shine { 0%,90%,100% { left: -100%; } 95% { left: 200%; } }
/* 品牌徽章带抖动 */
.brand-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 8px; background: rgba(255,255,255,.85); border: 1px solid rgba(255,94,98,.15); border-radius: 100px; font-size:11.5px; font-weight:600; color:var(--ink-2); backdrop-filter: blur(12px); box-shadow: 0 2px 8px rgba(255,94,98,.06); transition: all .25s; }
.brand-chip:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(255,94,98,.1); }
/* 数字大显示 */
.big-num { font-size:46px; font-weight:800; letter-spacing:-.025em; line-height:1; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent; }
.big-num.brand { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); -webkit-background-clip:text; -webkit-text-fill-color: transparent; }
/* 动画卡片 */
.demo-tile { position:relative; aspect-ratio:1; border-radius:16px; overflow:hidden; cursor:pointer; transition:all .4s cubic-bezier(.2,.8,.2,1); }
.demo-tile:hover { transform: scale(1.04); z-index:2; box-shadow: 0 16px 36px rgba(20,20,40,.18); }
.demo-tile .demo-label { position:absolute; bottom:8px; left:8px; right:8px; padding:5px 10px; background:rgba(20,20,40,.7); color:#fff; border-radius:8px; font-size:10.5px; font-weight:600; backdrop-filter:blur(6px); transform: translateY(120%); transition: transform .3s; }
.demo-tile:hover .demo-label { transform: translateY(0); }
/* 流动渐变背景 */
.flowing-bg { background: linear-gradient(135deg, #FFE8DC 0%, #FFF1E8 25%, #FFE0D6 50%, #FFEFE6 75%, #FFE8DC 100%); background-size: 400% 400%; animation: flow 15s ease infinite; }
@keyframes flow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* hover 教程浮层 (生成页用) */
.help-trigger { position:relative; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:rgba(255,94,98,.06); color:var(--brand-1); cursor:help; border:1px solid rgba(255,94,98,.12); transition:all .2s; }
/* === 教程卡（显眼版，不再藏 popup）=== */
.tutorial-card {
border-radius: 16px;
padding: 16px 18px;
background: linear-gradient(135deg, rgba(76,110,245,.05), rgba(99,102,241,.03));
border: 1px solid rgba(76,110,245,.18);
}
.tut-head { display: flex; align-items: center; gap: 12px; }
.tut-icon {
width: 40px; height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, #4263EB, #3C58D8);
color: #fff;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 6px 14px rgba(76,110,245,.25), inset 0 1px 0 rgba(255,255,255,.2);
}
.tut-title-wrap { flex: 1; min-width: 0; }
.tut-title {
font-size: 14px; font-weight: 800;
color: var(--ink); letter-spacing: -.01em;
margin-bottom: 2px;
}
.tut-sub {
font-size: 11.5px; color: var(--ink-3);
letter-spacing: -.005em;
}
.tut-sub b { color: #4263EB; font-weight: 800; padding: 0 1px; }
.img-tag {
display: inline-block;
margin: 2px 4px 2px 0;
padding: 2px 8px;
background: #fff;
border: 1px solid rgba(76,110,245,.25);
border-radius: 6px;
font-size: 11px;
font-weight: 700;
color: #4263EB;
letter-spacing: -.005em;
}
.tut-collapse {
width: 28px; height: 28px;
border-radius: 8px;
background: rgba(255,255,255,.7);
border: 1px solid var(--line);
color: var(--ink-3);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .18s;
flex-shrink: 0;
}
.tut-collapse:hover { background: #fff; color: var(--ink); }
.tut-steps {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed rgba(76,110,245,.2);
}
.tut-step {
display: flex; gap: 10px; align-items: flex-start;
padding: 10px 12px;
background: rgba(255,255,255,.7);
border-radius: 12px;
border: 1px solid rgba(76,110,245,.1);
}
.tut-num {
width: 22px; height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #4263EB, #3C58D8);
color: #fff;
font-size: 11px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(76,110,245,.25);
letter-spacing: -.01em;
}
.tut-text {
flex: 1; font-size: 12px; line-height: 1.55;
color: var(--ink-2); letter-spacing: -.005em;
padding-top: 2px;
}
/* === 色板（targetColor 字段专用）=== */
.color-swatch-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 8px;
}
.color-swatch {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
border-radius: 12px;
background: rgba(255,255,255,.7);
border: 1.5px solid var(--line);
cursor: pointer;
transition: all .2s cubic-bezier(.2,.8,.2,1);
text-align: left;
}
.color-swatch:hover:not(.on) {
background: #fff;
border-color: rgba(255,94,98,.35);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(20,20,40,.06);
}
.color-swatch.on {
background: linear-gradient(135deg, rgba(255,94,98,.07), rgba(255,153,102,.04));
border-color: var(--brand-1);
box-shadow: 0 4px 12px rgba(255,94,98,.18);
}
.cs-dot {
width: 22px; height: 22px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1.5px rgba(255,255,255,.6), 0 0 0 2.5px rgba(20,20,40,.08);
}
.cs-name {
font-size: 11.5px; font-weight: 700;
color: var(--ink-2);
letter-spacing: -.005em;
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.color-swatch.on .cs-name { color: var(--brand-1); }
.help-trigger:hover { background:var(--brand-soft); transform:scale(1.05); box-shadow:0 4px 10px rgba(255,94,98,.15); }
.help-pop { position:absolute; right:0; top:calc(100% + 10px); width:280px; padding:14px; background:#1A1D2E; color:#fff; border-radius:14px; box-shadow:0 16px 40px rgba(20,20,40,.3); opacity:0; transform:translateY(-6px); pointer-events:none; transition:all .25s cubic-bezier(.2,.8,.2,1); z-index:50; }
.help-pop::before { content:''; position:absolute; top:-6px; right:14px; width:12px; height:12px; background:#1A1D2E; transform:rotate(45deg); }
.help-trigger:hover .help-pop { opacity:1; transform:translateY(0); pointer-events:auto; }
.help-pop .help-title { font-size:12px; font-weight:700; margin-bottom:8px; color:#FFD4A8; display:flex; align-items:center; gap:5px; }
.help-pop .help-step { display:flex; gap:8px; margin-top:6px; align-items:flex-start; }
.help-pop .help-num { width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,var(--brand-1),var(--brand-2)); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; flex-shrink:0; margin-top:1px; }
.help-pop .help-text { font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.85); }
/* 修复：含教程入口的卡片不能裁剪 */
.card:has(.help-trigger) { overflow: visible; }
/* === 个人中心 === */
.profile-hero { position:relative; border-radius:24px; overflow:hidden; padding:28px; background: linear-gradient(135deg, #1A1D2E 0%, #2A1B3D 50%, #4A1F3D 100%); color:#fff; box-shadow: 0 20px 50px rgba(20,20,40,.18); }
.profile-hero::before { content:''; position:absolute; top:-80px; right:-80px; width:280px; height:280px; border-radius:50%; background: radial-gradient(circle, rgba(255,153,102,.4) 0%, transparent 60%); pointer-events:none; }
.profile-hero::after { content:''; position:absolute; bottom:-100px; left:-60px; width:240px; height:240px; border-radius:50%; background: radial-gradient(circle, rgba(123,97,255,.3) 0%, transparent 60%); pointer-events:none; }
.profile-avatar { width:64px; height:64px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; color:#fff; box-shadow: 0 8px 24px rgba(255,94,98,.35), inset 0 1px 0 rgba(255,255,255,.25); position:relative; z-index:2; }
.profile-vip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 7px; background: linear-gradient(135deg,#FFD700,#FFA500); color:#3A2800; border-radius:100px; font-size:10.5px; font-weight:800; letter-spacing:.04em; box-shadow: 0 2px 8px rgba(255,215,0,.4); }
.profile-id { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:100px; font-size:10.5px; font-weight:600; color: rgba(255,255,255,.8); }
.credit-card { position:relative; padding:24px; border-radius:22px; overflow:hidden; background: linear-gradient(135deg,#FF5E62 0%,#FF9966 100%); color:#fff; box-shadow: 0 16px 40px rgba(255,94,98,.3); }
.credit-card::before { content:''; position:absolute; top:-40px; right:-40px; width:200px; height:200px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); }
.credit-card::after { content:''; position:absolute; bottom:-30px; left:30%; width:160px; height:160px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); }
.stat-card { padding:18px; background:#fff; border:1px solid var(--line-2); border-radius:18px; transition:all .25s cubic-bezier(.2,.8,.2,1); position:relative; overflow:hidden; }
.stat-card::before { content:''; position:absolute; top:0; left:0; width:36px; height:3px; border-radius:0 0 4px 0; background: var(--stat-c, var(--brand-1)); opacity:.7; }
.stat-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,20,40,.06); border-color:transparent; }
.stat-icon { width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; background: var(--stat-bg,rgba(255,94,98,.08)); color: var(--stat-c, var(--brand-1)); }
.stat-num { font-size:24px; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1; }
.action-tile { padding:18px; background:#fff; border:1px solid var(--line-2); border-radius:18px; cursor:pointer; transition:all .25s cubic-bezier(.2,.8,.2,1); display:flex; align-items:center; gap:14px; }
.action-tile:hover { transform:translateY(-2px); border-color:rgba(255,94,98,.2); box-shadow:0 10px 24px rgba(20,20,40,.05); }
.action-tile:active { transform:translateY(-1px) scale(.99); }
.action-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: var(--act-bg,rgba(255,94,98,.08)); color: var(--act-c,var(--brand-1)); flex-shrink:0; }
.action-tile .arrow { color:var(--ink-4); transition:all .2s; }
.action-tile:hover .arrow { color:var(--brand-1); transform:translateX(2px); }
.timeline-item { display:flex; gap:14px; padding:12px 0; border-bottom:1px dashed var(--line); }
.timeline-item:last-child { border-bottom:none; }
.timeline-dot { width:8px; height:8px; border-radius:50%; background: var(--brand-1); flex-shrink:0; margin-top:6px; box-shadow: 0 0 0 3px rgba(255,94,98,.15); }
.timeline-bar { width:20px; height:6px; border-radius:100px; background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); }
/* === 滚动条 === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(20,20,40,.08); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(20,20,40,.16); }
.glass { background: rgba(255,255,255,.72); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); }
.brand-grad { background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%); }
.brand-text { background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.violet-grad { background: linear-gradient(135deg, #7B61FF 0%, #B57EFF 100%); }
.violet-text { background: linear-gradient(135deg, #7B61FF, #B57EFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* === 卡片 === */
.card { background: var(--card); border-radius: 22px; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); transition: all .35s cubic-bezier(.2,.8,.2,1); overflow: hidden; position: relative; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(255,94,98,.2); }
/* === 按钮 === */
.btn-primary { background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%); color: #fff; border-radius: 14px; font-weight: 600; box-shadow: 0 4px 14px rgba(255,94,98,.32), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.05); transition: all .2s cubic-bezier(.2,.8,.2,1); border: none; cursor: pointer; position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, transparent 50%); pointer-events: none; }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,94,98,.42), inset 0 1px 0 rgba(255,255,255,.3); filter: brightness(1.05); }
.btn-primary:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.4); box-shadow: none; }
.btn-ghost { background: rgba(255,255,255,.65); border: 1px solid var(--line); color: var(--ink-2); border-radius: 14px; font-weight: 500; transition: all .2s cubic-bezier(.2,.8,.2,1); cursor: pointer; backdrop-filter: blur(8px); }
.btn-ghost:hover { background: #fff; border-color: rgba(255,94,98,.3); color: var(--brand-1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20,20,40,.04); }
.btn-violet { background: linear-gradient(135deg,#7B61FF,#B57EFF); color:#fff; border-radius:14px; font-weight:600; box-shadow: 0 4px 14px rgba(123,97,255,.32), inset 0 1px 0 rgba(255,255,255,.25); border:none; cursor:pointer; transition:all .2s cubic-bezier(.2,.8,.2,1); }
.btn-violet:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(123,97,255,.42); filter: brightness(1.05); }
/* === 侧边栏 === */
.sidebar { background: linear-gradient(180deg, rgba(255,253,250,.92) 0%, rgba(255,250,245,.78) 100%); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); border-right: 1px solid var(--line-2); box-shadow: 1px 0 0 rgba(255,94,98,.02), 4px 0 24px rgba(20,20,40,.025); }
.nav-item { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 13px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: all .22s cubic-bezier(.2,.8,.2,1); position: relative; border: none; background: transparent; width: 100%; text-align: left; margin-bottom: 2px; overflow: hidden; }
.nav-item::after { content: ''; position: absolute; inset: 0; border-radius: 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); opacity: 0; transition: opacity .22s; pointer-events: none; }
/* 点击波纹反馈 */
.nav-item::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,94,98,.18) 0%, rgba(255,94,98,0) 70%); transform: translate(-50%, -50%); transition: width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1), opacity .5s; opacity: 0; pointer-events: none; }
.nav-item:active::before { width: 280px; height: 280px; opacity: 1; transition: width 0s, height 0s, opacity 0s; }
.nav-item:hover { background: linear-gradient(135deg, rgba(255,94,98,.06), rgba(255,153,102,.03)); color: var(--ink); transform: translateX(3px); }
.nav-item:hover .nav-icon { opacity: 1; transform: scale(1.08); }
.nav-item:active { transform: translateX(3px) scale(.97); }
.nav-item.active { background: linear-gradient(135deg, rgba(255,94,98,.13), rgba(255,153,102,.06)); color: var(--brand-1); font-weight: 600; box-shadow: 0 2px 10px rgba(255,94,98,.12), inset 0 1px 0 rgba(255,255,255,.6); }
.nav-item.active::after { opacity: 1; }
.nav-item.active .nav-active-bar { content: ''; position: absolute; left: -3px; top: 11px; bottom: 11px; width: 4px; background: linear-gradient(180deg, var(--brand-1), var(--brand-2)); border-radius: 0 4px 4px 0; box-shadow: 0 0 14px rgba(255,94,98,.5); }
.nav-item .nav-icon { width: 19px; height: 19px; flex-shrink: 0; opacity: .82; transition: all .22s cubic-bezier(.2,.8,.2,1); }
.nav-item.active .nav-icon { opacity: 1; transform: scale(1.08); }
.nav-item .nav-badge { margin-left: auto; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 100px; background: var(--brand-soft); color: var(--brand-1); transition: all .22s; min-width: 22px; text-align: center; }
.nav-item.active .nav-badge { background: rgba(255,94,98,.22); color: var(--brand-1); transform: scale(1.05); }
.nav-item .new-tag { margin-left: auto; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: linear-gradient(135deg,#7B61FF,#B57EFF); color:#fff; letter-spacing:.04em; box-shadow: 0 2px 8px rgba(123,97,255,.3); }
/* 折叠章节 */
.section-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 8px; font-size: 10.5px; font-weight: 700; color: var(--ink-4); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; user-select: none; transition: color .2s; }
.section-header:hover { color: var(--ink-3); }
.section-header .chev { transition: transform .25s cubic-bezier(.2,.8,.2,1); opacity: .6; }
.section-header.open .chev { transform: rotate(90deg); opacity: .9; }
.section-body { overflow: hidden; max-height: 0; transition: max-height .3s cubic-bezier(.2,.8,.2,1); }
.section-body.open { max-height: 700px; }
/* === 占位 === */
.placeholder { position: relative; background: linear-gradient(135deg, #F4F1EC 0%, #ECE7E0 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.placeholder::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, transparent 0, transparent 12px, rgba(255,255,255,.4) 12px, rgba(255,255,255,.4) 13px); opacity: .5; }
.placeholder-label { position: relative; z-index: 0; font-size: 10px; color: var(--ink-3); font-weight: 500; background: rgba(255,255,255,.85); padding: 4px 10px; border-radius: 100px; }
.placeholder img { z-index: 2; }
/* === 徽章 / 标签 === */
.industry-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-radius: 100px; font-size: 11px; font-weight: 600; color: var(--ink-2); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 2px 8px rgba(20,20,40,.06); }
.industry-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.tag-hot { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; font-size:9.5px; font-weight:700; letter-spacing:.04em; border-radius:100px; background: linear-gradient(135deg,#FF5E62,#FF9966); color:#fff; }
.tag-new { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; font-size:9.5px; font-weight:700; letter-spacing:.04em; border-radius:100px; background: linear-gradient(135deg,#7B61FF,#B57EFF); color:#fff; }
.hot-x {
display:inline-flex; align-items:center; justify-content:center;
width: 18px; height: 18px;
margin-left: 2px;
border-radius: 50%;
background: rgba(20,20,40,.06);
border: none;
color: var(--ink-3);
cursor: pointer;
transition: all .15s;
}
.hot-x:hover { background: rgba(255,94,98,.15); color: #FF5E62; }
.tag-vip { display:inline-flex; align-items:center; padding:1px 6px; font-size:8.5px; font-weight:800; border-radius:4px; background: linear-gradient(135deg,#FFD93D,#FFA500); color:#7A4D00; letter-spacing:.06em; }
/* === 数据指标 === */
.metric { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(255,255,255,.78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.7); border-radius: 14px; box-shadow: 0 2px 12px rgba(20,20,40,.04), inset 0 1px 0 rgba(255,255,255,.6); transition: all .25s cubic-bezier(.2,.8,.2,1); }
.metric:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(20,20,40,.06), inset 0 1px 0 rgba(255,255,255,.6); }
.metric-num { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.02em; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
/* === Tab === */
.tab-bar { display: inline-flex; background: rgba(255,255,255,.6); backdrop-filter: blur(20px); border: 1px solid var(--line); border-radius: 100px; padding: 4px; gap: 2px; }
.tab-item { padding: 7px 16px; border-radius: 100px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); cursor: pointer; transition: all .25s; white-space: nowrap; border: none; background: transparent; }
.tab-item:hover { color: var(--ink-2); }
.tab-item.active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 2px 8px rgba(20,20,40,.06); }
/* === Hero 大卡片 === */
.hero-card { position: relative; border-radius: 22px; overflow: hidden; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); transition: all .35s cubic-bezier(.2,.8,.2,1); cursor: pointer; }
.hero-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(255,94,98,.2); }
.hero-card .badge-row { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 2; }
.hero-arrow { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(20,20,40,.08); color: var(--ink); transition: all .25s; }
.hero-card:hover .hero-arrow { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; transform: rotate(-45deg); }
.before-after { position: relative; aspect-ratio: 16/10; display: grid; grid-template-columns: 1fr 1fr; background: var(--card); }
.before-after .arrow-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(255,94,98,.4); z-index: 3; }
/* === 小功能卡 === */
.feat-card { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; cursor: pointer; transition: all .25s; }
.feat-card:hover { border-color: rgba(255,94,98,.25); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feat-thumb { width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0; overflow: hidden; }
/* === 工具条 === */
.tool-chip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; cursor: pointer; transition: all .2s; }
.tool-chip:hover { border-color: rgba(255,94,98,.25); background: var(--brand-soft); }
.tool-chip .chip-icon { width: 32px; height: 32px; border-radius: 10px; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; color: var(--brand-1); flex-shrink: 0; }
/* === 行业卡片 === */
.industry-card { position: relative; border-radius: 24px; overflow: hidden; background: var(--card); border: 1px solid var(--line-2); cursor: pointer; transition: all .35s cubic-bezier(.2,.8,.2,1); aspect-ratio: 4/5; display: flex; flex-direction: column; }
.industry-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-lg); border-color: transparent; }
.industry-card .img-area { flex: 1; position: relative; overflow: hidden; }
.industry-card .meta-area { padding: 14px 16px; border-top: 1px solid var(--line-2); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.industry-card .quick-arrow { position:absolute; right:12px; bottom:12px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.95); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); opacity:0; transform:translateY(8px); transition: all .3s cubic-bezier(.2,.8,.2,1); z-index:5; color: var(--brand-1); }
.industry-card:hover .quick-arrow { opacity:1; transform:translateY(0); }
/* === 智能体卡片（特殊） === */
.agent-card { position: relative; border-radius: 22px; padding: 22px; background: linear-gradient(135deg, rgba(123,97,255,.04), rgba(181,126,255,.06), rgba(255,94,98,.03)); border: 1px solid rgba(123,97,255,.15); cursor: pointer; transition: all .3s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
.agent-card::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 100% 0%, rgba(123,97,255,.08), transparent 50%); pointer-events:none; }
.agent-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(123,97,255,.18); border-color: rgba(123,97,255,.3); }
.agent-icon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg,#7B61FF,#B57EFF); display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 20px rgba(123,97,255,.3); }
.workflow-step { position: relative; padding: 14px 16px; background: rgba(255,255,255,.7); border: 1px solid rgba(123,97,255,.12); border-radius: 14px; backdrop-filter: blur(8px); }
.workflow-step::before { content:''; position:absolute; left:24px; top:100%; width:1px; height:14px; background: linear-gradient(180deg, rgba(123,97,255,.4), transparent); }
.workflow-step:last-child::before { display: none; }
/* === 聊天 — 大厂级精修 === */
.chat-bubble-user {
display:inline-block; max-width:75%;
padding:13px 17px;
border-radius:20px 20px 6px 20px;
background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
color:#fff;
font-size:14px; line-height:1.55;
box-shadow: 0 8px 22px rgba(255,94,98,.25), inset 0 1px 0 rgba(255,255,255,.2);
letter-spacing:-.005em;
}
.chat-bubble-ai {
display:inline-block; max-width:80%;
padding:14px 18px;
border-radius:20px 20px 20px 6px;
background:#fff;
border:1px solid var(--line-2);
font-size:14px; line-height:1.6;
color: var(--ink);
box-shadow: 0 4px 14px rgba(20,20,40,.05), 0 1px 2px rgba(20,20,40,.03);
letter-spacing:-.005em;
}
.chat-suggest { padding: 8px 14px; background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 100px; font-size: 12px; color: var(--ink-2); cursor: pointer; transition: all .2s; }
.chat-suggest:hover { background: #fff; border-color: rgba(255,94,98,.3); color: var(--brand-1); }
/* === 一句话改图 v2 === */
.chat-img-grid { display:grid; gap:6px; max-width:340px; margin-bottom:6px; }
.chat-img-grid.g1 { grid-template-columns:1fr; }
.chat-img-grid.g2 { grid-template-columns:1fr 1fr; }
.chat-img-grid.g3, .chat-img-grid.g4 { grid-template-columns:1fr 1fr; }
.chat-img-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; cursor:zoom-in; transition:transform .2s, box-shadow .2s; }
.chat-img-grid img:hover { transform:scale(.985); box-shadow:0 6px 16px rgba(20,20,40,.12); }
.chat-img-grid .more {
position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; cursor:pointer;
}
.chat-img-grid .more::after {
content:attr(data-more); position:absolute; inset:0; background:rgba(20,20,40,.55);
color:#fff; font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center;
border-radius:12px;
}
/* AI 单图 — 圆角加大、阴影加深 */
.chat-ai-image {
display:block; max-width:380px; max-height:420px;
border-radius:14px; cursor:zoom-in;
transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
box-shadow:0 4px 12px rgba(20,20,40,.06);
}
.chat-ai-image:hover {
transform:translateY(-2px) scale(1.005);
box-shadow:0 12px 28px rgba(20,20,40,.12);
}
/* v1.5.14.49: 通用出图限制 — 多分镜/首尾帧/智能体等所有"大图"展示统一限高，防止 AI 出竖图把页面拉得超长 */
.jh-result-image {
display: block;
max-width: 100%;
max-height: 70vh;
width: auto;
height: auto;
margin: 0 auto;
object-fit: contain;
background: #F8F9FC;
}
.jh-slice-image {
display: block;
max-width: 100%;
max-height: 50vh;
width: auto;
height: auto;
margin: 0 auto;
object-fit: contain;
background: #F8F9FC;
}
/* AI 消息底部操作栏 — icon-first 设计 */
.chat-actions { display:inline-flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.chat-act-btn {
display:inline-flex; align-items:center; gap:5px;
padding:7px 12px;
border-radius:10px;
background:rgba(255,255,255,.9);
border:1px solid var(--line);
font-size:11.5px; font-weight:600;
color:var(--ink-2); cursor:pointer;
transition:all .18s cubic-bezier(.2,.8,.2,1);
backdrop-filter:blur(8px);
letter-spacing:-.01em;
}
.chat-act-btn:hover {
background:#fff;
border-color:rgba(255,94,98,.35);
color:var(--brand-1);
transform:translateY(-1px);
box-shadow:0 6px 14px rgba(20,20,40,.06);
}
.chat-act-btn:active { transform:translateY(0); }
.chat-act-btn svg { width:13px; height:13px; }
.chat-act-btn.danger:hover { color:#E03131; border-color:#E0313140; box-shadow:0 6px 14px rgba(224,49,49,.08); }
.chat-act-btn.retry {
background:linear-gradient(135deg, rgba(255,94,98,.1), rgba(255,153,102,.06));
border-color:rgba(255,94,98,.3); color:var(--brand-1);
}
.chat-act-btn.retry:hover { background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#fff; border-color:transparent; box-shadow:0 6px 14px rgba(255,94,98,.3); }
/* 主操作（下载） — 强调色 */
.chat-act-btn.primary {
background: linear-gradient(135deg, #4263EB, #3C58D8);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 10px rgba(76, 110, 245, .25), inset 0 1px 0 rgba(255,255,255,.2);
}
.chat-act-btn.primary:hover {
background: linear-gradient(135deg, #3C58D8, #364FCB);
color: #fff;
border-color: transparent;
box-shadow: 0 8px 18px rgba(76, 110, 245, .35);
transform: translateY(-1.5px);
}
/* 24h 过期提示 */
.expire-tip {
display: inline-flex; align-items: center;
padding: 5px 10px;
margin-left: auto;
font-size: 10.5px;
font-weight: 600;
color: var(--ink-4);
letter-spacing: -.005em;
background: rgba(245, 159, 0, .07);
border-radius: 8px;
}
/* 失败气泡 */
.chat-bubble-error {
display:inline-block; max-width:80%; padding:12px 16px;
border-radius:20px 20px 20px 6px;
background:rgba(224,49,49,.06); border:1px solid rgba(224,49,49,.18);
font-size:13.5px; line-height:1.55; color:#C92A2A;
box-shadow: 0 4px 12px rgba(224,49,49,.05);
}
/* 输入区上方多图缩略图条 */
.chat-prevs {
display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; padding:12px 14px;
background:linear-gradient(180deg, rgba(255,94,98,.05), rgba(255,153,102,.02));
border:1px solid rgba(255,94,98,.15);
border-radius:16px;
}
.chat-prev-thumb {
position:relative; width:68px; height:68px; border-radius:12px; overflow:hidden;
border:2px solid #fff; flex-shrink:0;
box-shadow:0 6px 14px rgba(20,20,40,.1), 0 0 0 1px rgba(255,94,98,.15);
animation:thumb-in .3s var(--ease-spring);
transition: transform .2s, box-shadow .2s;
}
.chat-prev-thumb:hover { transform: translateY(-2px); box-shadow:0 10px 22px rgba(20,20,40,.14), 0 0 0 1px rgba(255,94,98,.3); }
@keyframes thumb-in { from{opacity:0; transform:scale(.85);} to{opacity:1; transform:scale(1);} }
.chat-prev-thumb img { width:100%; height:100%; object-fit:cover; }
.chat-prev-thumb .x {
position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
background:rgba(20,20,40,.8); color:#fff; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
transition:background .15s, transform .15s;
backdrop-filter: blur(4px);
}
.chat-prev-thumb .x:hover { background:#E03131; transform: scale(1.1); }
.chat-prev-thumb .idx {
position:absolute; bottom:4px; left:4px; padding:2px 6px; border-radius:7px;
background:rgba(20,20,40,.78); color:#fff; font-size:9.5px; font-weight:800;
letter-spacing:.02em; backdrop-filter: blur(4px);
}
.chat-prev-add {
width:68px; height:68px; border-radius:12px; flex-shrink:0;
border:2px dashed var(--line); background:rgba(255,255,255,.6);
color:var(--ink-3); cursor:pointer; transition:all .2s cubic-bezier(.2,.8,.2,1);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
font-size:10px; font-weight:600;
}
.chat-prev-add:hover {
background:#fff; color:var(--brand-1); border-color:var(--brand-1); border-style:solid;
transform: translateY(-2px);
box-shadow:0 8px 18px rgba(255,94,98,.15);
}
.chat-prev-add svg { width:20px; height:20px; }
/* 智能警告条 — 更显眼 */
.chat-warn {
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
margin-bottom:12px; padding:14px 16px;
background:linear-gradient(135deg, rgba(255,184,0,.1), rgba(255,140,0,.06));
border:1px solid rgba(255,184,0,.4);
border-radius:16px;
animation:thumb-in .3s var(--ease-spring);
box-shadow: 0 4px 12px rgba(230,126,34,.08);
}
.chat-warn > svg { color:#E67E22; flex-shrink:0; }
.chat-warn .warn-msg {
flex:1; min-width:240px; font-size:12.5px; line-height:1.55; color:var(--ink-2);
}
.chat-warn .warn-msg b { color:#C0392B; font-weight:800; }
.chat-warn .warn-actions { display:flex; gap:6px; flex-wrap:wrap; }
.chat-warn .warn-btn {
padding:7px 13px; border-radius:11px; font-size:11.5px; font-weight:700; cursor:pointer;
background:rgba(255,255,255,.9); border:1px solid rgba(230,126,34,.4); color:var(--ink-2);
transition:all .18s; white-space:nowrap;
}
.chat-warn .warn-btn:hover { background:#fff; border-color:#E67E22; color:#C0392B; transform: translateY(-1px); box-shadow:0 4px 10px rgba(230,126,34,.15); }
.chat-warn .warn-btn.primary {
background:linear-gradient(135deg,#A855F7,#7C3AED); border-color:transparent; color:#fff;
box-shadow:0 4px 10px rgba(124,58,237,.25);
}
.chat-warn .warn-btn.primary:hover { box-shadow:0 8px 18px rgba(124,58,237,.4); transform:translateY(-1px); }
/* 计时器 / loading 气泡 — 大气一些 */
.chat-timer-bubble {
display:inline-flex; align-items:center; gap:12px; padding:14px 18px;
border-radius:20px 20px 20px 6px;
background:linear-gradient(135deg, rgba(255,94,98,.05), rgba(255,153,102,.08));
border:1px solid rgba(255,94,98,.2);
box-shadow:0 6px 18px rgba(255,94,98,.08);
}
.chat-timer-bubble .ttl { font-size:13px; color:var(--ink-2); font-weight:600; letter-spacing:-.01em; }
.chat-timer-bubble .sec { font-variant-numeric:tabular-nums; font-weight:800; color:var(--brand-1); font-size:13.5px; min-width:42px; letter-spacing:-.02em; }
.chat-timer-bubble .sec.warn { color:#F59F00; }
.chat-timer-bubble .sec.over { color:#E03131; animation:timer-pulse 1.2s infinite; }
@keyframes timer-pulse { 0%,100%{opacity:1;} 50%{opacity:.55;} }
.chat-timer-bar {
position:relative; flex:1; min-width:120px; height:4px; border-radius:100px; background:rgba(20,20,40,.05); overflow:hidden;
}
.chat-timer-bar .fill {
position:absolute; left:0; top:0; bottom:0; border-radius:100px;
background:linear-gradient(90deg, var(--brand-1), var(--brand-2));
transition:width .35s linear;
}
.chat-timer-bar .fill.over { background:linear-gradient(90deg,#F59F00,#E03131); }
/* 中止按钮（生成时替换发送按钮） */
.btn-stop {
width:44px; height:44px; flex-shrink:0; border-radius:14px;
background:linear-gradient(135deg,#E03131,#C92A2A);
color:#fff; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center;
box-shadow:0 6px 18px rgba(224,49,49,.35), inset 0 1px 0 rgba(255,255,255,.2);
transition:all .18s; position:relative;
}
.btn-stop:hover { transform:translateY(-1.5px); box-shadow:0 12px 28px rgba(224,49,49,.45); filter: brightness(1.05); }
.btn-stop:active { transform:translateY(0); }
.btn-stop::after {
content:''; position:absolute; inset:-3px; border-radius:14px;
border:2px solid rgba(224,49,49,.4); animation:stop-ring 1.4s infinite;
}
@keyframes stop-ring { 0%{opacity:1;transform:scale(1);} 100%{opacity:0;transform:scale(1.2);} }
/* 拖拽中蒙层 — 大气一些 */
.chat-drop-active {
position:fixed; inset:0; z-index:8000;
background:rgba(255,94,98,.08);
backdrop-filter: blur(2px);
border:3px dashed var(--brand-1);
display:flex; align-items:center; justify-content:center;
pointer-events:none;
animation:fade .2s;
}
.chat-drop-active .msg {
display:flex; align-items:center; gap:16px; padding:28px 36px; border-radius:24px;
background:#fff; box-shadow:0 32px 80px rgba(255,94,98,.3), 0 4px 12px rgba(20,20,40,.08);
border:2px solid var(--brand-1);
animation: pop .25s var(--ease-spring);
}
.chat-drop-active .msg svg { width:36px; height:36px; color:var(--brand-1); }
.chat-drop-active .msg div { font-size:17px; font-weight:800; color:var(--ink); letter-spacing: -.01em; }
/* 字符计数 — 仅高字数时显眼 */
.chat-char-count {
position:absolute; right:14px; bottom:10px;
font-size:10.5px; color:var(--ink-4);
font-variant-numeric:tabular-nums; pointer-events:none;
font-weight: 600;
transition: color .15s;
}
/* === 输入区 — 大厂级 === */
.chat-input-wrap {
display: flex; align-items: flex-end; gap: 10px;
padding: 8px;
background: rgba(255,255,255,.6);
border: 1.5px solid var(--line);
border-radius: 22px;
transition: all .25s cubic-bezier(.2,.8,.2,1);
position: relative;
box-shadow: 0 4px 14px rgba(20,20,40,.04);
backdrop-filter: blur(12px);
}
.chat-input-wrap:focus-within {
background: #fff;
border-color: rgba(255,94,98,.5);
box-shadow: 0 0 0 4px rgba(255,94,98,.1), 0 8px 24px rgba(20,20,40,.06);
}
.chat-upload-btn {
width: 44px; height: 44px;
background: rgba(255,255,255,.85);
border: 1.5px solid var(--line);
border-radius: 14px;
color: var(--ink-2);
cursor: pointer; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: all .2s cubic-bezier(.2,.8,.2,1);
}
.chat-upload-btn:hover:not(.disabled) {
background: #fff;
border-color: rgba(255,94,98,.4);
color: var(--brand-1);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(255,94,98,.12);
}
.chat-upload-btn:active { transform: translateY(0); }
.chat-upload-btn.disabled { opacity: .35; pointer-events: none; }
.chat-textarea-wrap { flex: 1; position: relative; min-width: 0; }
.chat-textarea {
width: 100%;
resize: none;
line-height: 1.6;
max-height: 160px;
min-height: 44px;
font-size: 15px;
padding: 11px 50px 11px 12px;
background: transparent;
border: none;
border-radius: 14px;
color: var(--ink);
font-family: inherit;
outline: none;
letter-spacing: -.005em;
}
.chat-textarea::placeholder {
color: var(--ink-4);
letter-spacing: -.005em;
}
.chat-textarea:focus::placeholder { opacity: .55; }
.chat-send-btn {
width: 44px; height: 44px;
flex-shrink: 0;
border: none;
cursor: pointer;
border-radius: 14px;
background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow:
0 6px 18px rgba(255,94,98,.35),
inset 0 1px 0 rgba(255,255,255,.3),
inset 0 -1px 0 rgba(0,0,0,.05);
transition: all .2s cubic-bezier(.2,.8,.2,1);
position: relative;
overflow: hidden;
}
.chat-send-btn::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 50%);
pointer-events: none;
}
.chat-send-btn:hover {
transform: translateY(-1.5px);
box-shadow: 0 12px 28px rgba(255,94,98,.45), inset 0 1px 0 rgba(255,255,255,.3);
filter: brightness(1.05);
}
.chat-send-btn:active { transform: translateY(0); transition-duration: .08s; }
.model-pill {
display:inline-flex; align-items:center; gap:7px;
padding:7px 12px;
background:#fff;
border:1px solid #E5E7EB;
border-radius:8px;
cursor:pointer;
transition:border-color .15s;
font-size:12.5px; font-weight:600;
color:#1F2937;
letter-spacing:-.005em;
}
.model-pill:hover {
border-color:#9CA3AF;
}
.model-pill:active { background: #FAFAFA; }
.model-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.model-menu { position:absolute; top:100%; right:0; margin-top:8px; width:380px; background:#fff; border:1px solid #E5E7EB; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04); z-index:50; padding:6px; animation: pop .18s cubic-bezier(.2,.8,.2,1); }
.model-option { display:flex; gap:12px; padding:11px 12px; border-radius:12px; cursor:pointer; transition:all .15s; align-items:flex-start; }
.model-option:hover { background:rgba(20,20,40,.03); }
.model-option.active { background:linear-gradient(135deg,rgba(255,94,98,.05),rgba(255,153,102,.04)); }
.model-icon { width:34px; height:34px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:800; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.model-cap { display:inline-flex; align-items:center; padding:2px 7px; background:rgba(20,20,40,.04); border-radius:6px; font-size:9.5px; color:var(--ink-3); font-weight:600; margin-right:4px; margin-top:3px; }
/* 空状态建议卡片 — 更精致 */
.chat-empty-card {
background:#fff;
border:1px solid var(--line-2);
border-radius:16px;
padding:16px 18px;
cursor:pointer;
transition:all .22s cubic-bezier(.2,.8,.2,1);
position: relative;
overflow: hidden;
}
.chat-empty-card::before {
content:'';
position:absolute; inset:0;
background: linear-gradient(135deg, rgba(255,94,98,.04), rgba(255,153,102,.02));
opacity:0; transition: opacity .22s;
pointer-events:none;
}
.chat-empty-card:hover {
border-color:rgba(255,94,98,.3);
box-shadow:0 12px 26px rgba(20,20,40,.06), 0 2px 4px rgba(20,20,40,.03);
transform:translateY(-3px);
}
.chat-empty-card:hover::before { opacity:1; }
.chat-cat {
font-size:10.5px; font-weight:800; color:var(--ink-3);
letter-spacing:.1em; text-transform:uppercase;
margin-bottom:11px; padding-left:2px;
display: inline-flex; align-items: center; gap: 6px;
}
.chat-cat::before {
content:''; width:14px; height:2px; background: var(--brand-1); border-radius: 2px;
}
.model-badge-mini { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; background:rgba(20,20,40,.04); border-radius:100px; font-size:10.5px; font-weight:700; color:var(--ink-3); letter-spacing:-.005em; }
.model-badge-mini .dot-mini { width:6px; height:6px; border-radius:50%; }
/* === 空状态 hero 图标 — 大气脉动 === */
.hero-icon {
position: relative;
width:64px; height:64px;
border-radius:20px;
display:flex; align-items:center; justify-content:center;
}
.hero-icon .hero-pulse {
position: absolute; inset: -6px;
border-radius: 24px;
opacity: .35;
animation: hero-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
pointer-events: none;
z-index: -1;
}
@keyframes hero-pulse {
0% { transform: scale(1); opacity: .35; }
60% { transform: scale(1.4); opacity: 0; }
100% { transform: scale(1.4); opacity: 0; }
}
/* 提示卡 — 顶部"3 种快捷方式" */
.hint-card {
display: flex; align-items: center; gap: 14px;
padding: 16px 18px;
border-radius: 18px;
background: linear-gradient(135deg, color-mix(in srgb, var(--mc) 7%, white), color-mix(in srgb, var(--mc) 3%, white));
border: 1px solid color-mix(in srgb, var(--mc) 22%, transparent);
--mc: #FF5E62;
}
.hint-icon {
width: 40px; height: 40px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
color: #fff;
flex-shrink: 0;
box-shadow: 0 6px 14px color-mix(in srgb, var(--mc) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.2);
}
.hint-body { flex: 1; min-width: 0; }
.hint-title {
font-size: 13px; font-weight: 700;
color: var(--ink); letter-spacing: -.01em;
margin-bottom: 3px;
}
.hint-sub {
font-size: 11.5px;
color: var(--ink-3); line-height: 1.5;
letter-spacing: -.005em;
}
.hint-sub kbd {
display: inline-flex; align-items: center;
padding: 1px 6px;
background: #fff;
border: 1px solid var(--line);
border-radius: 5px;
font-family: 'SF Mono', Menlo, monospace;
font-size: 10.5px;
font-weight: 700;
color: var(--ink-2);
box-shadow: 0 1px 0 var(--line-2);
margin: 0 2px;
}
/* 存储说明 — 友情提示 */
.storage-notice {
display: flex; align-items: flex-start; gap: 8px;
padding: 10px 14px;
background: linear-gradient(135deg, rgba(76,110,245,.04), rgba(99,102,241,.02));
border: 1px solid rgba(76,110,245,.18);
border-radius: 12px;
font-size: 12px;
line-height: 1.55;
color: var(--ink-3);
letter-spacing: -.005em;
}
.storage-notice svg {
color: #4263EB; flex-shrink: 0; margin-top: 2px;
}
.storage-notice b { color: var(--ink-2); font-weight: 700; }
/* === 模型菜单 v2（去掉"几分"标签，更清爽）=== */
/* v1.5.14.39: 模型选择器简约大厂风（Notion / Linear 风格） */
.mm-row {
display: block;
padding: 14px 14px 12px;
border-radius: 12px;
transition: background .15s, border-color .15s;
margin-bottom: 4px;
border: 1px solid transparent;
cursor: pointer;
}
.mm-row:hover { background: #FAFAFA; }
.mm-row.active {
background: #fff;
border-color: #1F2937;
}
.mm-row-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 4px;
}
.mm-name-wrap { display: flex; align-items: baseline; gap: 8px; }
.mm-name {
font-size: 14px; font-weight: 700;
color: #1F2937; letter-spacing: -.01em;
}
.mm-cost {
font-size: 11.5px; font-weight: 600;
color: #6B7280;
}
.mm-current-badge {
font-size: 10.5px; font-weight: 700;
padding: 2px 8px;
background: #1F2937; color: #fff;
border-radius: 5px;
letter-spacing: .02em;
}
.mm-desc {
font-size: 11.5px;
color: #6B7280;
line-height: 1.5;
margin-bottom: 8px;
}
.mm-specs {
display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap;
}
.mm-spec {
display: inline-flex; align-items: center;
padding: 3px 8px; border-radius: 5px;
background: #F3F4F6;
font-size: 10.5px; font-weight: 500; color: #6B7280;
letter-spacing: 0;
}
.mm-row.active .mm-spec { background: #F9FAFB; }
.mm-head {
padding: 14px 14px 10px;
font-size: 11px; font-weight: 600;
color: #6B7280;
letter-spacing: .04em;
}
.mm-vars { display: flex; gap: 6px; flex-wrap: wrap; }
.mm-vbtn {
padding: 7px 14px; border-radius: 8px;
font-size: 12px; font-weight: 600;
cursor: pointer; transition: all .15s;
border: 1px solid #E5E7EB;
background: #fff;
color: #4B5563;
white-space: nowrap;
}
.mm-vbtn:hover { border-color: #1F2937; color: #1F2937; }
.mm-vbtn.on {
background: #1F2937 !important;
color: #fff !important;
border-color: #1F2937 !important;
}
.mm-foot {
padding: 12px 14px 6px;
margin-top: 6px;
border-top: 1px solid #F3F4F6;
font-size: 11px; color: #9CA3AF;
}
/* === 比例按钮（旧版兼容）=== */
.ratio-btn { padding:6px 14px; border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer; transition:all .2s; border:1.5px solid var(--line); background:rgba(255,255,255,.7); color:var(--ink-2); --mc:#FF5E62; }
.ratio-btn:hover:not(.on) { border-color:color-mix(in srgb, var(--mc) 35%, transparent); background:#fff; }
.ratio-btn.on { color:#fff; border-color:transparent; box-shadow:0 3px 10px color-mix(in srgb, var(--mc) 30%, transparent); }
/* === 比例选择器 v2 — 视觉形状卡 === */
/* === 画面设置栏 — 可折叠 === */
.ctrl-bar {
display:flex; flex-direction:column; gap:14px;
margin-top:14px; padding:12px 16px 14px; border-radius:16px;
background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.15));
border:1px solid var(--line-2);
transition: padding .2s;
}
.ctrl-bar.collapsed { padding:10px 16px; }
.ctrl-head {
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.ctrl-toggle {
display:inline-flex; align-items:center; gap:6px;
padding:6px 11px; border-radius:10px;
background:rgba(255,255,255,.7);
border:1px solid var(--line);
color:var(--ink-2);
font-size:12px; font-weight:700; letter-spacing:-.005em;
cursor:pointer;
transition:all .18s;
}
.ctrl-toggle:hover { background:#fff; border-color:rgba(255,94,98,.3); color:var(--ink); }
.ctrl-toggle svg { color:var(--ink-3); }
.ctrl-summary {
display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.ctrl-pill {
display:inline-flex; align-items:center; gap:6px;
padding:5px 11px; border-radius:100px;
background:rgba(255,255,255,.85);
border:1px solid var(--line);
font-size:11.5px; font-weight:700;
color:var(--ink-2);
letter-spacing:-.005em;
}
.ctrl-pill-shape {
display:inline-block; border-radius:2px;
flex-shrink:0;
}
.ctrl-spacer { flex:1; }
.ctrl-refs-info {
display:inline-flex; align-items:center; gap:6px;
padding:5px 11px; border-radius:100px;
background:rgba(76, 110, 245, 0.07);
color:#4263EB;
border:1px solid rgba(76, 110, 245, 0.18);
font-size:11.5px; font-weight:600;
letter-spacing:-.005em;
}
.ctrl-refs-info b { font-weight:800; margin:0 1px; }
.ctrl-body {
display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap;
animation: ctrl-expand .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes ctrl-expand {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.ctrl-group { display:flex; flex-direction:column; gap:8px; }
.ctrl-label {
display:inline-flex; align-items:center; gap:5px;
font-size:11px; font-weight:700; letter-spacing:.06em;
color:var(--ink-3); text-transform:uppercase; padding-left:2px;
}
.ctrl-label svg { color:var(--ink-4); }
.ctrl-label-hint {
font-size: 10px; font-weight: 600; color: var(--ink-4);
text-transform: none; letter-spacing: 0;
margin-left: 4px; padding-left: 8px;
border-left: 1px solid var(--line);
}
.ctrl-empty {
font-size:12.5px; color:var(--ink-3);
padding:14px 16px; flex:1;
background:rgba(76, 110, 245, .04);
border:1px dashed rgba(76, 110, 245, .25);
border-radius:12px;
letter-spacing:-.005em;
}
.ratio-row { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.ratio-card {
display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
gap:8px; padding:10px 12px 8px; min-width:64px; min-height:78px;
border-radius:14px;
background:rgba(255,255,255,.75);
border:1.5px solid var(--line);
cursor:pointer;
transition:all .22s cubic-bezier(.2,.8,.2,1);
--mc:#FF5E62;
position:relative;
}
.ratio-card:hover:not(.on) {
background:#fff;
border-color:color-mix(in srgb, var(--mc) 35%, transparent);
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(20,20,40,.08);
}
.ratio-card.on {
background:linear-gradient(180deg, color-mix(in srgb, var(--mc) 10%, white), color-mix(in srgb, var(--mc) 4%, white));
border-color:var(--mc);
box-shadow:0 6px 16px color-mix(in srgb, var(--mc) 25%, transparent);
}
.ratio-card.on::after {
content:'';
position:absolute; top:6px; right:6px;
width:6px; height:6px; border-radius:50%;
background:var(--mc);
box-shadow:0 0 0 3px color-mix(in srgb, var(--mc) 20%, transparent);
}
.ratio-shape {
background:var(--ink-4);
border-radius:3px;
transition:all .22s;
display:block;
flex-shrink:0;
}
.ratio-card:hover .ratio-shape { background:var(--ink-3); }
.ratio-card.on .ratio-shape {
background:var(--mc);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.ratio-meta { display:flex; flex-direction:column; align-items:center; gap:0; }
.ratio-name { font-size:11.5px; font-weight:700; color:var(--ink-2); letter-spacing:-.01em; line-height:1.2; }
.ratio-card.on .ratio-name { color:var(--mc); }
.ratio-sub { font-size:9.5px; font-weight:600; color:var(--ink-4); margin-top:1px; letter-spacing:.02em; }
.ratio-card.on .ratio-sub { color:color-mix(in srgb, var(--mc) 75%, var(--ink-3)); }
.res-row { display:flex; gap:6px; align-items:flex-end; flex-wrap:wrap; }
.res-pill {
padding:9px 14px; border-radius:12px;
font-size:12px; font-weight:700; letter-spacing:-.01em;
cursor:pointer;
border:1.5px solid var(--line);
background:rgba(255,255,255,.75);
color:var(--ink-2);
transition:all .22s cubic-bezier(.2,.8,.2,1);
--mc:#FF5E62;
min-height:40px;
}
.res-pill:hover:not(.on) {
background:#fff;
border-color:color-mix(in srgb, var(--mc) 35%, transparent);
transform:translateY(-1px);
}
.res-pill.on {
background:linear-gradient(135deg, var(--mc), color-mix(in srgb, var(--mc) 80%, black));
border-color:transparent; color:#fff;
box-shadow:0 4px 12px color-mix(in srgb, var(--mc) 30%, transparent);
}
.ref-badge {
display:inline-flex; align-items:center; gap:6px;
padding:7px 12px; border-radius:100px;
background:rgba(76, 110, 245, 0.08);
color:#4263EB;
border:1px solid rgba(76, 110, 245, 0.2);
font-size:11.5px; font-weight:600;
}
.ref-badge b { font-weight:800; margin:0 1px; }
.ref-badge.muted { background:rgba(20,20,40,.04); color:var(--ink-4); border-color:var(--line-2); }
.ref-badge.muted b { color:var(--ink-3); }
/* === 输入框 === */
.input { width: 100%; padding: 11px 14px; background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; color: var(--ink); font-family: inherit; transition: all .2s cubic-bezier(.2,.8,.2,1); outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.input:hover:not(:focus) { border-color: rgba(20,20,40,.12); background: rgba(255,255,255,.85); }
.input:focus { background: #fff; border-color: var(--brand-1); box-shadow: 0 0 0 4px rgba(255,94,98,.1), inset 0 1px 0 rgba(255,255,255,.5); }
.input::placeholder { color: var(--ink-4); transition: opacity .2s; }
.input:focus::placeholder { opacity: .5; }
.input.error { border-color: #E03131; box-shadow: 0 0 0 4px rgba(224,49,49,.08); animation: shake .35s; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }
/* === Modal === */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,20,40,.45); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); display: flex; align-items: center; justify-content: center; z-index: 100; animation: fade .25s ease; padding: 20px; }
.modal-card { background: #fff; border-radius: 24px; padding: 32px; width: 100%; max-width: 420px; box-shadow: 0 32px 80px rgba(20,20,40,.22), 0 0 0 1px rgba(255,255,255,.6); animation: pop .3s cubic-bezier(.2,.8,.2,1); max-height: 90vh; overflow-y: auto; position: relative; }
.modal-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 80px; background: linear-gradient(180deg, rgba(255,94,98,.04), transparent); border-radius: 24px 24px 0 0; pointer-events: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* === Toast === */
#toasts { position: fixed; top: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { pointer-events: auto; min-width: 240px; max-width: 360px; padding: 12px 16px; background: rgba(20,20,40,.94); color:#fff; border-radius: 14px; font-size: 13px; font-weight: 500; box-shadow: 0 16px 40px rgba(20,20,40,.22), inset 0 1px 0 rgba(255,255,255,.1); display: flex; align-items: center; gap: 10px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: toastIn .35s cubic-bezier(.2,.8,.2,1); }
.toast.out { animation: toastOut .25s ease forwards; }
.toast.success { background: linear-gradient(135deg, rgba(47,158,68,.96), rgba(20,140,50,.96)); }
.toast.error { background: linear-gradient(135deg, rgba(224,49,49,.96), rgba(180,30,30,.96)); }
@keyframes toastIn { from { opacity:0; transform: translateX(20px) scale(.95); } to { opacity:1; transform: translateX(0) scale(1); } }
@keyframes toastOut { to { opacity:0; transform: translateX(20px) scale(.95); } }
/* === 进度条 === */
#topbar { position:fixed; top:0; left:0; right:0; height:2px; z-index:300; pointer-events:none; }
#topbar .pb { height:100%; background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); width:0; transition: width .25s; box-shadow: 0 0 8px rgba(255,94,98,.6); }
/* === 骨架屏 === */
.sk { background: linear-gradient(90deg, #F0EBE5 0%, #F8F5F0 50%, #F0EBE5 100%); background-size: 200% 100%; animation: sk 1.4s ease-in-out infinite; border-radius: 8px; }
@keyframes sk { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
/* === 复选框 === */
.check { display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; font-size:12.5px; color:var(--ink-2); }
.check input { display:none; }
.check .box { width:16px; height:16px; border-radius:5px; border:1.5px solid var(--ink-4); display:flex; align-items:center; justify-content:center; transition: all .2s; flex-shrink:0; }
.check input:checked + .box { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); border-color: var(--brand-1); }
.check input:checked + .box::after { content:''; width:5px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.check.error .box { border-color:#E03131; animation: shake .35s; }
/* === Lightbox（高级版：缩放 + 拖动 + 工具栏） === */
.lightbox {
position:fixed; inset:0; background:rgba(15,15,30,.92);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
z-index:9000; display:flex; align-items:center; justify-content:center;
animation:lb-fade .2s ease;
overflow:hidden;
}
@keyframes lb-fade { from{opacity:0;} to{opacity:1;} }
.lightbox-stage {
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
cursor:grab; overflow:hidden; touch-action:none;
}
.lightbox-stage.dragging { cursor:grabbing; }
.lightbox-img {
max-width:88vw; max-height:84vh;
border-radius:14px;
box-shadow:0 24px 60px rgba(0,0,0,.5);
user-select:none; -webkit-user-drag:none;
transition:transform .18s cubic-bezier(.2,.9,.3,1.1);
transform-origin:center center;
will-change:transform;
}
.lightbox-stage.dragging .lightbox-img { transition:none; }
/* 顶部工具栏 */
.lightbox-bar {
position:absolute; top:0; left:0; right:0; padding:14px 20px;
display:flex; align-items:center; gap:10px;
background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));
z-index:2;
}
.lightbox-bar .lb-title { color:rgba(255,255,255,.85); font-size:13px; font-weight:600; }
.lightbox-bar .lb-spacer { flex:1; }
.lightbox-btn {
display:inline-flex; align-items:center; justify-content:center; gap:6px;
width:38px; height:38px; border-radius:10px;
background:rgba(255,255,255,.1); color:#fff;
border:1px solid rgba(255,255,255,.12);
cursor:pointer; transition:all .18s; padding:0;
backdrop-filter:blur(8px);
}
.lightbox-btn:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.22); transform:translateY(-1px); }
.lightbox-btn.lb-text { width:auto; padding:0 14px; font-size:12.5px; font-weight:600; }
.lightbox-btn.danger:hover { background:rgba(255,90,90,.25); border-color:rgba(255,120,120,.4); }
/* 底部缩放控制 */
.lightbox-zoom {
position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
display:inline-flex; align-items:center; gap:4px; padding:6px;
background:rgba(20,20,30,.7); border:1px solid rgba(255,255,255,.12);
border-radius:14px; backdrop-filter:blur(14px);
z-index:2;
}
.lightbox-zoom .lz-btn {
width:34px; height:34px; border-radius:9px;
background:transparent; color:#fff; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background .15s;
}
.lightbox-zoom .lz-btn:hover { background:rgba(255,255,255,.12); }
.lightbox-zoom .lz-pct { color:rgba(255,255,255,.85); font-size:12px; font-weight:600; min-width:54px; text-align:center; font-variant-numeric:tabular-nums; padding:0 4px; cursor:pointer; }
.lightbox-zoom .lz-divider { width:1px; height:18px; background:rgba(255,255,255,.15); margin:0 2px; }
/* 提示文字 */
.lightbox-hint {
position:absolute; bottom:80px; left:50%; transform:translateX(-50%);
color:rgba(255,255,255,.55); font-size:11.5px; pointer-events:none;
background:rgba(20,20,30,.5); padding:5px 12px; border-radius:8px;
backdrop-filter:blur(8px);
animation:lb-hint-fade 3s forwards;
}
@keyframes lb-hint-fade { 0%{opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{opacity:0;} }
/* === 其他 === */
.industry-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2; }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fade-up .5s cubic-bezier(.2,.8,.2,1) both; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.6;} }
.pulse { animation: pulse 1.5s ease-in-out infinite; }
/* 步骤指引 */
.step-guide { display:flex; align-items:center; gap:8px; padding:10px 14px; background: linear-gradient(135deg, rgba(255,94,98,.04), rgba(255,153,102,.04)); border:1px dashed rgba(255,94,98,.15); border-radius:14px; }
.step-guide .step-n { width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,var(--brand-1),var(--brand-2)); color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.step-guide .step-arr { color:var(--ink-4); font-size:11px; }
/* 拖拽 */
.drop-zone.dragging { background: rgba(255,94,98,.06); border-color: var(--brand-1) !important; transform: scale(1.005); }
@media (max-width: 768px) {
.hide-mobile { display: none !important; }
.modal-card { padding: 24px; border-radius: 18px; }
}
/* =================================================================
============== Premium UI 升级包 ====================================
================================================================= */
/* ---------- 1. 字体系统精进 ---------- */
body { font-feature-settings: 'ss01','ss03','cv11','cv02'; text-rendering: optimizeLegibility; }
.tabular { font-variant-numeric: tabular-nums; }
.num-display { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.025em; }
/* ---------- 2. 色彩 utility 工具类 ---------- */
.text-ink { color: var(--ink); }
.text-ink-2 { color: var(--ink-2); }
.text-ink-3 { color: var(--ink-3); }
.text-ink-4 { color: var(--ink-4); }
.bg-ink { background: var(--ink); }
.text-success { color: var(--success); }
.text-error { color: var(--error); }
.text-warning { color: var(--warning); }
/* ---------- 3. 全局滚动条精修 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(20,20,40,.08); border-radius: 100px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(20,20,40,.18); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* ---------- 4. 选中文字 / 焦点 ---------- */
::selection { background: rgba(255,94,98,.2); color: var(--ink); text-shadow: none; }
::-moz-selection { background: rgba(255,94,98,.2); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 3px; border-radius: 6px; }
button:focus-visible, a:focus-visible { outline-offset: 4px; }
/* ---------- 5. 按钮精修：闪光扫过 + 微妙变化 ---------- */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary > * { position: relative; z-index: 2; }
.btn-primary::before { content: ''; position: absolute; top: 0; left: -120%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%); transform: skewX(-20deg); transition: left .6s var(--ease-out); pointer-events: none; z-index: 1; }
.btn-primary:hover:not(:disabled)::before { left: 220%; }
.btn-primary:active:not(:disabled) { transform: scale(.97); transition-duration: .08s; }
.btn-violet { position: relative; overflow: hidden; }
.btn-violet::before { content: ''; position: absolute; top: 0; left: -120%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%); transform: skewX(-20deg); transition: left .6s var(--ease-out); pointer-events: none; }
.btn-violet:hover::before { left: 220%; }
.btn-violet:active { transform: scale(.97); transition-duration: .08s; }
/* ---------- 6. 链接通用 hover 下划线 ---------- */
.link-underline { position: relative; }
.link-underline::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: currentColor; transition: width .25s var(--ease-out); }
.link-underline:hover::after { width: 100%; }
/* ---------- 7. 卡片精修：表面光感 + 边框微动 ---------- */
.card { position: relative; isolation: isolate; }
.card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); pointer-events: none; z-index: 0; }
.card-hover { will-change: transform; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(255,94,98,.18); }
.card-hover:active { transform: translateY(-1px) scale(.998); transition-duration: .1s; }
/* ---------- 8. 玻璃面板更柔 ---------- */
.glass { background: rgba(255,255,255,.78); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border: 1px solid rgba(255,255,255,.5); }
.glass-dark { background: rgba(26,29,46,.7); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); }
/* ---------- 9. 渐变文字 utility ---------- */
.gradient-text-warm { background: linear-gradient(135deg, var(--brand-1), var(--brand-2), #FFD4A8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gradient-text-cool { background: linear-gradient(135deg, var(--violet), var(--violet-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* ---------- 10. 动态光晕（hover 时弥散） ---------- */
.pulse-glow { position: relative; }
.pulse-glow::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); opacity: 0; filter: blur(12px); z-index: -1; transition: opacity .35s; }
.pulse-glow:hover::before { opacity: .35; }
/* ---------- 11. 数字呼吸动画 ---------- */
@keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: .7; } }
.breathe { animation: breathe 2.5s ease-in-out infinite; }
/* ---------- 12. 方便动画的入场组合 ---------- */
@keyframes scale-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-left { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fade-right { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.scale-in { animation: scale-in .4s var(--ease-out) both; }
.fade-down { animation: fade-down .5s var(--ease-out) both; }
.fade-left { animation: fade-left .5s var(--ease-out) both; }
.fade-right { animation: fade-right .5s var(--ease-out) both; }
/* ---------- 13. 浮动动画（用于装饰） ---------- */
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes float-x { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.float-y { animation: float-y 4s ease-in-out infinite; }
.float-x { animation: float-x 5s ease-in-out infinite; }
/* ---------- 14. 边框光环 ---------- */
.ring-brand { box-shadow: 0 0 0 3px rgba(255,94,98,.18); }
.ring-violet { box-shadow: 0 0 0 3px rgba(123,97,255,.18); }
/* ---------- 15. 工具图标圆角 ---------- */
.tool-chip:hover .chip-icon { transform: rotate(-5deg) scale(1.05); transition: transform .25s var(--ease-out); }
.tool-chip .chip-icon { transition: transform .25s var(--ease-out); }
/* ---------- 16. nav-item active 加微妙呼吸 ---------- */
.nav-item.active::before { animation: nav-pulse 3s ease-in-out infinite; }
@keyframes nav-pulse { 0%,100% { box-shadow: 0 0 12px rgba(255,94,98,.4); } 50% { box-shadow: 0 0 18px rgba(255,94,98,.55); } }
/* ---------- 17. 侧栏 logo 鼠标悬停反馈精修 ---------- */
.sidebar [class*='brand-grad']:hover { animation: logo-bounce .4s var(--ease-spring); }
@keyframes logo-bounce { 0% { transform: scale(1); } 40% { transform: rotate(-10deg) scale(1.1); } 100% { transform: rotate(-8deg) scale(1.05); } }
/* ---------- 18. industry-card 装饰条悬停加宽 ---------- */
.industry-card .industry-bar { transition: height .3s var(--ease-out); }
.industry-card:hover .industry-bar { height: 5px; }
/* ---------- 19. shortcut-card icon hover 旋转更优雅 ---------- */
.shortcut-card .shortcut-icon { transition: transform .4s var(--ease-spring); }
.shortcut-card:hover .shortcut-icon { transform: rotate(-6deg) scale(1.05) translateY(-1px); }
/* ---------- 20. shortcut-arrow 旋转 + 主题色 ---------- */
.shortcut-card .shortcut-arrow svg { transition: transform .25s var(--ease-out); }
/* ---------- 21. tab-bar 滑动指示更顺 ---------- */
.tab-item { transition: all .25s var(--ease-out); }
.tab-item.active { animation: tab-in .3s var(--ease-spring); }
@keyframes tab-in { from { transform: scale(.92); } to { transform: scale(1); } }
/* ---------- 22. metric 数字 hover 时微微跳动 ---------- */
.metric { cursor: default; }
.metric:hover .metric-num { animation: tick .35s var(--ease-spring); }
@keyframes tick { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
/* ---------- 23. 复选框打勾动画 ---------- */
.check input:checked + .box::after { animation: check-pop .3s var(--ease-spring); }
@keyframes check-pop { 0% { transform: rotate(45deg) translate(-1px,-1px) scale(0); } 100% { transform: rotate(45deg) translate(-1px,-1px) scale(1); } }
/* ---------- 24. 输入框 placeholder 滑入 ---------- */
.input { transition: all .25s var(--ease-out); }
/* ---------- 25. 上传区拖拽态 ---------- */
.drop-zone.dragging { background: var(--brand-soft); border-color: var(--brand-1); border-style: solid; transform: scale(1.01); box-shadow: 0 0 0 4px rgba(255,94,98,.1); }
/* ---------- 26. textarea 自动展开过渡 ---------- */
textarea.input { transition: all .2s var(--ease-out), height 0s; resize: none; }
/* ---------- 27. 选项按钮组（select 风格）选中状态精修 ---------- */
.btn-primary.selected, .btn-ghost.selected { transform: none; }
/* ---------- 28. 底部 brand info 链接 hover ---------- */
.brand-foot a:hover { color: var(--brand-1); }
/* ---------- 29. 模态卡入场弹簧 ---------- */
.modal-card { animation: modal-spring .4s var(--ease-spring) both; }
@keyframes modal-spring { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* ---------- 30. tag 通用阴影 ---------- */
.tag-new, .tag-hot, .tag-vip { box-shadow: 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.18); }
/* ---------- 31. 顶部进度条更明显 ---------- */
#topbar .pb { background: linear-gradient(90deg, var(--brand-1), var(--brand-2), #FFD4A8); box-shadow: 0 0 12px rgba(255,94,98,.7); }
/* ---------- 32. 骨架屏更高级 ---------- */
.sk { background: linear-gradient(90deg, #ECE7E0 0%, #F8F5F0 50%, #ECE7E0 100%); background-size: 200% 100%; animation: sk 1.6s ease-in-out infinite; border-radius: 12px; }
/* ---------- 33. 空状态图标更柔和 ---------- */
.empty-icon { background: rgba(20,20,40,.04); color: var(--ink-4); border-radius: 18px; }
/* ---------- 34. agent-card 装饰光晕 ---------- */
.agent-card::after { content: ''; position: absolute; bottom: -40px; left: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(123,97,255,.12) 0%, transparent 60%); pointer-events: none; opacity: 0; transition: opacity .35s; }
.agent-card:hover::after { opacity: 1; }
/* ---------- 35. workflow-step hover ---------- */
.workflow-step { transition: all .25s var(--ease-out); }
.workflow-step:hover { background: rgba(255,255,255,.92); border-color: rgba(123,97,255,.25); transform: translateX(4px); }
/* ---------- 36. lightbox 优化（已迁移至高级缩放版） ---------- */
/* ---------- 37. agent-icon 更立体 ---------- */
.agent-icon { box-shadow: 0 8px 20px rgba(123,97,255,.32), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(20,20,40,.1); }
/* ---------- 38. profile-vip 金色加微光 ---------- */
.profile-vip { animation: vip-glow 3s ease-in-out infinite; }
@keyframes vip-glow { 0%,100% { box-shadow: 0 2px 8px rgba(255,215,0,.4); } 50% { box-shadow: 0 2px 16px rgba(255,215,0,.6); } }
/* ---------- 39. action-tile 图标旋转 hover ---------- */
.action-tile .action-icon { transition: transform .3s var(--ease-spring); }
.action-tile:hover .action-icon { transform: rotate(-8deg) scale(1.05); }
/* ---------- 40. timeline 圆点动画 ---------- */
.timeline-dot { transition: all .25s var(--ease-out); }
.timeline-item:hover .timeline-dot { transform: scale(1.25); box-shadow: 0 0 0 4px rgba(255,94,98,.18); }
/* ---------- 41. credit-card 数字呼吸 ---------- */
.credit-card .num-display { font-variant-numeric: tabular-nums; }
/* ---------- 42. stat-card hover 时彩条加宽 ---------- */
.stat-card::before { transition: width .3s var(--ease-out); }
.stat-card:hover::before { width: 100%; opacity: .9; }
/* ---------- 43. 通用悬停光标手型 ---------- */
button:not(:disabled), [role='button'], .cursor-pointer { cursor: pointer; }
button:disabled { cursor: not-allowed; }
/* ---------- 44. 按钮统一 transition ---------- */
button { transition: all .2s var(--ease-out); }
/* ---------- 45. iframe / video 圆角 ---------- */
video, iframe { border-radius: 12px; }
/* ---------- 46. 图片默认懒加载样式 ---------- */
img { content-visibility: auto; }
/* ---------- 47. 占位斜纹更柔和 ---------- */
.placeholder { background: linear-gradient(135deg, #F4F1EC 0%, #ECE7E0 100%); }
.placeholder::before { opacity: .35; }
/* ---------- 48. step-guide 现代化 ---------- */
.step-guide { transition: all .3s var(--ease-out); }
.step-guide:hover { border-color: rgba(255,94,98,.25); background: linear-gradient(135deg, rgba(255,94,98,.06), rgba(255,153,102,.05)); }
.step-guide .step-n { box-shadow: 0 2px 6px rgba(255,94,98,.3), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .25s var(--ease-spring); }
.step-guide:hover .step-n { transform: scale(1.05); }
/* ---------- 49. help-trigger 持续微脉冲 ---------- */
.help-trigger { animation: help-pulse 3s ease-in-out infinite; }
@keyframes help-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,94,98,.35); } 70% { box-shadow: 0 0 0 6px rgba(255,94,98,0); } }
.help-trigger:hover { animation: none; }
/* ---------- 50. help-pop 入场更顺 ---------- */
.help-pop { transition: all .3s var(--ease-spring); }
/* ---------- 51. chat-bubble 入场 ---------- */
.chat-bubble-user, .chat-bubble-ai { animation: bubble-in .35s var(--ease-spring); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* ---------- 52. chat-empty-card 选中态 ---------- */
.chat-empty-card { transition: all .25s var(--ease-out); will-change: transform; }
.chat-empty-card:hover > div { color: var(--brand-1); }
/* ---------- 53. model-pill 状态 ---------- */
.model-pill { box-shadow: 0 2px 6px rgba(20,20,40,.04); }
.model-pill:hover { transform: translateY(-1px); }
.model-pill:active { transform: translateY(0) scale(.98); }
/* ---------- 54. model-option active 边线 ---------- */
.model-option.active { box-shadow: inset 0 0 0 1px rgba(255,94,98,.2); }
/* ---------- 55. tag 统一字距 ---------- */
.tag-new, .tag-hot, .tag-vip { letter-spacing: .04em; }
/* ---------- 56. 表头 sticky 阴影 ---------- */
.glass.border-b { box-shadow: 0 1px 0 rgba(20,20,40,.04); }
/* ---------- 57. 段落连字 ---------- */
p, h1, h2, h3, h4, h5 { font-feature-settings: 'cv11','ss03'; }
/* ---------- 58. 标题 letter-spacing 系统 ---------- */
h1 { letter-spacing: -.025em; }
h2 { letter-spacing: -.02em; }
h3 { letter-spacing: -.015em; }
h4 { letter-spacing: -.01em; }
/* ---------- 59. 加大默认行高 ---------- */
p { line-height: 1.6; }
/* ---------- 60. 更高级的 dashed 描边 ---------- */
[style*='border-style:dashed'], [style*='border-style: dashed'] { border-image: none; }
/* ---------- 61. 防止字体被锯齿 ---------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* ---------- 62. 输入框 disabled ---------- */
.input:disabled { background: rgba(20,20,40,.03); color: var(--ink-4); cursor: not-allowed; }
/* ---------- 63. 角标 NEW / HOT 在 nav-item 上呼吸 ---------- */
.nav-item .new-tag { animation: tag-pulse 2.5s ease-in-out infinite; }
@keyframes tag-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
/* ---------- 64. tab 数量徽章 ---------- */
.nav-badge { transition: all .2s var(--ease-out); }
/* ---------- 65. 分割线 utility ---------- */
.divider-soft { border-top: 1px dashed var(--line); }
.divider-hard { border-top: 1px solid var(--line); }
/* ---------- 66. 强调色变量 ---------- */
.accent-brand { color: var(--brand-1); }
.accent-violet { color: var(--violet); }
.accent-emerald { color: var(--emerald); }
.accent-amber { color: var(--amber); }
/* ---------- 67. 响应式间距 ---------- */
@media (max-width: 1024px) {
.hero-headline { font-size: 42px !important; }
}
@media (max-width: 640px) {
.hero-headline { font-size: 32px !important; line-height: 1.15 !important; }
.big-num { font-size: 32px !important; }
}
/* ---------- 68. 流光卡片 sweep ---------- */
.shine-card::after { animation: shine 8s ease-in-out infinite; }
/* ---------- 69. shimmer 文字慢一点更优雅 ---------- */
.hero-shimmer { animation: shimmer 6s ease-in-out infinite; }
/* ---------- 70. flowing-bg 更慢 ---------- */
.flowing-bg { animation: flow 18s ease infinite; }
/* ---------- 71. settings 弹窗输入更精 ---------- */
.modal-card .input { font-family: 'JetBrains Mono', 'Inter', monospace; font-size: 13px; }
/* ---------- 72. 路径 arrow utility ---------- */
.arrow-anim { transition: transform .25s var(--ease-out); }
.arrow-anim:hover { transform: translateX(3px); }
/* ---------- 73. 全局 reduce-motion 守护 ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* ---------- 74. 列表项 ---------- */
.list-row { display: flex; align-items: center; padding: 10px 12px; border-radius: 10px; transition: background .15s; }
.list-row:hover { background: rgba(20,20,40,.03); }
/* ---------- 75. 强调引用 ---------- */
.callout { background: linear-gradient(135deg, var(--brand-soft), rgba(255,153,102,.04)); border-left: 3px solid var(--brand-1); padding: 12px 14px; border-radius: 0 12px 12px 0; }
/* ---------- 76. cursor-glow 更柔和 ---------- */
#cursor-glow { background: radial-gradient(circle, rgba(255,153,102,.14) 0%, rgba(255,94,98,.06) 35%, transparent 65%); }
/* ---------- 77. aurora 更高级（重做） ---------- */
.aurora-blob { filter: blur(140px); }
.aurora-1 { animation: aurora-drift-1 28s ease-in-out infinite; }
.aurora-2 { animation: aurora-drift-2 32s ease-in-out infinite; }
@keyframes aurora-drift-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,20px) scale(1.05); } }
@keyframes aurora-drift-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.08); } }
/* ---------- 78. 顶部 sticky 渐进出现 ---------- */
.glass.border-b { transition: box-shadow .2s; }
/* ---------- 79. 行业页占位卡 ---------- */
.industry-card[style*='border-style:dashed'] { transition: all .25s var(--ease-out); }
.industry-card[style*='border-style:dashed']:hover { background: linear-gradient(135deg, rgba(255,94,98,.08), rgba(255,153,102,.1)) !important; border-color: rgba(255,94,98,.4) !important; }
/* ---------- 80. 智能体 step 序号 ---------- */
/* ---------- 81. 设置项分组 ---------- */
.setting-group { padding: 16px; border: 1px solid var(--line-2); border-radius: 14px; }
/* ---------- 82. metric icon 颜色 ---------- */
.metric svg { color: var(--brand-1); opacity: .85; }
/* ---------- 83. 生成结果带阴影 ---------- */
.gen-result-img { box-shadow: 0 4px 12px rgba(20,20,40,.05); }
/* ---------- 84. shortcut-meta b 主题色 ---------- */
.shortcut-meta-item b { font-variant-numeric: tabular-nums; }
/* ---------- 85. 最后访问的 CTA 高亮 ---------- */
.cta-glow { position: relative; }
.cta-glow::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); filter: blur(12px); opacity: .25; z-index: -1; animation: cta-breathe 3s ease-in-out infinite; }
@keyframes cta-breathe { 0%,100% { opacity: .25; } 50% { opacity: .45; } }
/* ---------- 86. 黑暗英雄区域装饰 ---------- */
.profile-hero, .hero-dark { background-attachment: fixed; }
/* ---------- 87. 输入禁用更柔 ---------- */
input:disabled, textarea:disabled, button:disabled { user-select: none; }
/* ---------- 88. 过渡时长 utility ---------- */
.transition-fast { transition-duration: .15s; }
.transition-base { transition-duration: .25s; }
.transition-slow { transition-duration: .4s; }
/* ---------- 89. 防止图片选中 ---------- */
.no-select { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
/* ---------- 90. 响应式标题 ---------- */
@media (max-width: 768px) {
.max-w-6xl { max-width: 100%; }
.px-10 { padding-left: 20px; padding-right: 20px; }
}
/* ---------- 91. 文本省略 utility ---------- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* ---------- 92. 锐利描边可选 ---------- */
.crisp { -webkit-font-smoothing: subpixel-antialiased; }
/* ---------- 93. 模态遮罩点击区 ---------- */
.modal-overlay { -webkit-tap-highlight-color: transparent; }
/* ---------- 94. 默认按钮颜色 ---------- */
button { color: inherit; -webkit-appearance: none; appearance: none; }
/* ---------- 95. 表格 utility（个人中心数据用） ---------- */
.data-row { display: grid; grid-template-columns: 1fr auto; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.data-row:last-child { border-bottom: none; }
/* ---------- 96. tooltip 通用 ---------- */
[data-tip] { position: relative; }
/* ---------- 97. 加载骨架带光泽 ---------- */
@keyframes sk { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
/* ---------- 98. SVG 默认 ---------- */
svg { display: inline-block; vertical-align: middle; }
/* ---------- 99. 链接默认下划线移除 ---------- */
a { text-decoration: none; color: inherit; }
/* ---------- 100. 防止文字突变 ---------- */
* { word-wrap: break-word; word-break: break-word; }
/* ---------- 101. 头像背景细线 ---------- */
[class*='rounded-full'][style*='brand-grad'], [class*='rounded-2xl'][style*='brand-grad'] { box-shadow: 0 4px 12px rgba(255,94,98,.3), inset 0 1px 0 rgba(255,255,255,.3); }
/* ---------- 102. 一些紧凑特殊间距 ---------- */
.tight-gap > * + * { margin-top: 4px; }
.normal-gap > * + * { margin-top: 12px; }
.loose-gap > * + * { margin-top: 24px; }
/* ---------- 103. 模态卡 close button 更精致 ---------- */
.modal-card button[onclick*='showSettings=false'], .modal-card button[onclick*='agreement=null'] { padding: 6px; border-radius: 8px; transition: all .15s; }
.modal-card button[onclick*='showSettings=false']:hover, .modal-card button[onclick*='agreement=null']:hover { background: rgba(20,20,40,.06); color: var(--ink-2); }
/* ---------- 104. 顶部 bar 内容 z-index ---------- */
.sidebar { z-index: 20; }
/* ---------- 105. spinner 高级 ---------- */
.spin { transform-origin: center; }
/* ============================================== */
/* === 第二轮 100+ 高端优化 (#106 - #210) === */
/* ============================================== */
/* ---------- 106. 滚动阻尼 (iOS 风格) ---------- */
main { scroll-behavior: smooth; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* ---------- 107. 减弱视差但保留高级感 ---------- */
.parallax-bg { will-change: transform; transform: translate3d(0,0,0); }
/* ---------- 108. 浮动装饰球 ---------- */
@keyframes float-1 { 0%,100% { transform: translate(0,0) rotate(0deg); } 33% { transform: translate(20px,-12px) rotate(2deg); } 66% { transform: translate(-15px,8px) rotate(-1deg); } }
@keyframes float-2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-12px,16px); } }
.deco-orb { position: absolute; border-radius: 50%; filter: blur(40px); pointer-events: none; }
.deco-orb-1 { animation: float-1 22s ease-in-out infinite; }
.deco-orb-2 { animation: float-2 18s ease-in-out infinite; }
/* ---------- 109. Hero 标题加柔光阴影 ---------- */
.hero-headline { text-shadow: 0 1px 0 rgba(255,255,255,.8); }
/* ---------- 110. shimmer 文字流光更润 ---------- */
.hero-shimmer { -webkit-text-fill-color: transparent; }
/* ---------- 111. 链式 fade-up 错位 ---------- */
.fade-up:nth-child(1) { animation-delay: 0s; }
.fade-up:nth-child(2) { animation-delay: .04s; }
.fade-up:nth-child(3) { animation-delay: .08s; }
/* ---------- 112. 卡片 hover 下淡淡的彩色边 ---------- */
.industry-card { isolation: isolate; }
.industry-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset; pointer-events: none; z-index: 1; }
/* ---------- 113. 模特图占位斜纹更素 ---------- */
.placeholder { background: linear-gradient(135deg, #F6F3EE 0%, #EFEAE3 100%); }
/* ---------- 114. 顶部 sticky 玻璃更厚一点 ---------- */
.sticky.glass, [class*="sticky"].glass { backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); }
/* ---------- 115. 顶部 sticky 加底部柔和分隔阴影 ---------- */
.sticky.glass.border-b { box-shadow: 0 1px 0 rgba(20,20,40,.04), 0 4px 12px rgba(20,20,40,.02); }
/* ---------- 116. 输入聚焦圆环加品牌色 ---------- */
.input:focus { box-shadow: 0 0 0 4px rgba(255,94,98,.1), inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(255,94,98,.08); }
/* ---------- 117. 按钮主色 + 点击涟漪 ---------- */
@keyframes ripple { from { transform: scale(0); opacity: .5; } to { transform: scale(3); opacity: 0; } }
/* ---------- 118. 进度条更亮 ---------- */
#topbar .pb { box-shadow: 0 0 12px rgba(255,94,98,.7), 0 0 24px rgba(255,153,102,.3); }
/* ---------- 119. 链接 hover 颜色过渡 ---------- */
a { transition: color .2s var(--ease-out), opacity .2s var(--ease-out); }
/* ---------- 120. 防止图片拖拽 ---------- */
img { -webkit-user-drag: none; user-select: none; }
/* ---------- 121. 全局精细字距 ---------- */
h1,h2,h3,h4 { letter-spacing: -.018em; }
.text-\[42px\], .text-\[44px\], .text-\[36px\] { letter-spacing: -.025em; }
/* ---------- 122. 标题字体优化 (中文/英文混排) ---------- */
.hero-headline, h1, h2 { font-feature-settings: 'palt' 1, 'kern' 1, 'cv11' 1; }
/* ---------- 123. 数字字体 (始终等宽) ---------- */
.metric-num, .stat-num, .big-num, .credits-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
/* ---------- 124. 卡片图标默认动画 ---------- */
.feat-block-icon, .agent-icon, .stat-icon, .action-icon, .shortcut-icon { transition: transform .35s var(--ease-out), box-shadow .35s; }
/* ---------- 125. 卡片 hover 整体弹起更丝滑 ---------- */
.shortcut-card, .feat-block, .agent-card, .industry-card { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .25s; }
/* ---------- 126. dropdown 选中态 ---------- */
.btn-primary.selected { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); }
/* ---------- 127. 深色卡 (data section) 顶部光带 ---------- */
.dark-card-top { position: relative; }
.dark-card-top::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); }
/* ---------- 128. 深色卡数字加渐变光 ---------- */
.dark-card-num { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/* ---------- 129. 价格 / 数字闪烁高亮 ---------- */
.value-flash { animation: value-flash .6s ease-out; }
@keyframes value-flash { 0% { background-color: rgba(255,153,102,.3); } 100% { background-color: transparent; } }
/* ---------- 130. shortcut-card 内 inset 高光 ---------- */
.shortcut-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.shortcut-card:hover { box-shadow: 0 16px 40px rgba(20,20,40,.08), 0 0 0 1px var(--sc-color,#FF5E62), inset 0 1px 0 rgba(255,255,255,.5); }
/* ---------- 131. feat-block 内 inset 高光 ---------- */
.feat-block { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.5); }
.feat-block:hover { box-shadow: 0 16px 40px rgba(20,20,40,.06), inset 0 1px 0 rgba(255,255,255,.5); }
/* ---------- 132. 行业卡 hover image 微缩 ---------- */
.industry-card .img-area img { transition: transform .8s var(--ease-out); }
.industry-card:hover .img-area img { transform: scale(1.06); }
/* ---------- 133. industry-bar hover 加深 ---------- */
.industry-card:hover .industry-bar { filter: brightness(1.1) saturate(1.1); }
/* ---------- 134. before-after hover 镜面对比加箭头 ---------- */
.before-after { transition: filter .35s; }
.hero-card:hover .before-after { filter: brightness(1.02); }
/* ---------- 135. 大胆数字突出显示 ---------- */
.text-display-1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
/* ---------- 136. 深色 stats card 内圆球流动 ---------- */
@keyframes orbit { from { transform: rotate(0deg) translateX(180px) rotate(0deg); } to { transform: rotate(360deg) translateX(180px) rotate(-360deg); } }
.orbit { animation: orbit 20s linear infinite; }
/* ---------- 137. 模型卡选中态彩边 ---------- */
.model-option.active { border-left: 3px solid var(--brand-1); }
/* ---------- 138. 教程入口微脉冲 ---------- */
.help-trigger { animation: help-pulse 3s ease-in-out infinite; }
@keyframes help-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,94,98,.3); } 50% { box-shadow: 0 0 0 6px rgba(255,94,98,0); } }
/* ---------- 139. 教程 popup 滑入更柔 ---------- */
.help-pop { transition: opacity .3s var(--ease-out), transform .3s cubic-bezier(.16,1,.3,1); }
.help-trigger:hover .help-pop { transform: translateY(2px) scale(1.02); }
/* ---------- 140. 教程 popup 序号小球加内阴影 ---------- */
.help-pop .help-num { box-shadow: 0 2px 6px rgba(255,94,98,.4), inset 0 1px 0 rgba(255,255,255,.3); }
/* ---------- 141. 工作流箭头 SVG 流动 ---------- */
@keyframes arrow-flow { 0% { stroke-dashoffset: 20; } 100% { stroke-dashoffset: 0; } }
/* ---------- 142. agent-card 紫色光晕 hover ---------- */
.agent-card:hover { box-shadow: 0 18px 40px rgba(123,97,255,.18), 0 0 0 1px rgba(123,97,255,.2), inset 0 1px 0 rgba(255,255,255,.4); }
/* ---------- 143. 黑色按钮 (用于 ghost dark) ---------- */
.btn-dark { background: var(--ink); color: #fff; border-radius: 14px; font-weight: 600; padding: 11px 20px; cursor: pointer; border: none; transition: all .2s var(--ease-out); }
.btn-dark:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(20,20,40,.18); filter: brightness(1.08); }
/* ---------- 144. 空状态图标 alpha 渐变 ---------- */
.empty-icon { color: var(--ink-4); opacity: .5; }
/* ---------- 145. 评分 / 好评等元素 ---------- */
.star-row { color: #FFB800; }
/* ---------- 146. 标签 chip 通用 ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: rgba(20,20,40,.04); border-radius: 100px; font-size: 11px; font-weight: 600; color: var(--ink-2); transition: all .2s; }
.chip:hover { background: rgba(20,20,40,.07); }
.chip.brand { background: var(--brand-soft); color: var(--brand-1); }
.chip.violet { background: var(--violet-soft); color: var(--violet); }
/* ---------- 147. 浏览器标签描边更细 ---------- */
.tab-item { letter-spacing: -.005em; }
/* ---------- 148. 卡片描边可呼吸 (active 态) ---------- */
.industry-card.featured { box-shadow: 0 0 0 2px rgba(255,94,98,.3), 0 12px 28px rgba(255,94,98,.15); }
/* ---------- 149. 渐变文字行高紧凑 ---------- */
.brand-text, .hero-shimmer { line-height: inherit; }
/* ---------- 150. 渐变颜色按钮主色版 ---------- */
.btn-grad-warm { background: linear-gradient(135deg, #FF5E62, #FF9966, #FFD4A8); background-size: 200% auto; transition: background-position .4s; }
.btn-grad-warm:hover { background-position: right center; }
/* ---------- 151. 视觉主调装饰渐变 ---------- */
.decor-bar { height: 6px; border-radius: 100px; background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--violet)); }
/* ---------- 152. 下划标线动态 ---------- */
.underline-grow { position: relative; }
.underline-grow::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); transition: right .35s var(--ease-out); }
.underline-grow:hover::after { right: 0; }
/* ---------- 153. 主标题入场动画 ---------- */
@keyframes hero-rise { 0% { opacity: 0; transform: translateY(20px); filter: blur(8px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }
.hero-rise { animation: hero-rise .8s var(--ease-out) both; }
/* ---------- 154. 短文动画延迟 ---------- */
.hero-rise-2 { animation: hero-rise .8s var(--ease-out) .15s both; }
.hero-rise-3 { animation: hero-rise .8s var(--ease-out) .3s both; }
/* ---------- 155. 卡片 group hover 触发 child 动画 ---------- */
.card-group:hover .card-arrow { transform: translateX(3px); }
.card-arrow { transition: transform .25s; }
/* ---------- 156. 输入框 dark 风格 (用于聊天) ---------- */
.input-dark { background: rgba(20,20,40,.04); border-color: transparent; }
.input-dark:focus { background: #fff; }
/* ---------- 157. CTA 卡片底部渐隐光 ---------- */
.cta-glow { position: relative; }
.cta-glow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 100%, rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
/* ---------- 158. 模型菜单滚动指示 ---------- */
.model-menu { max-height: 70vh; overflow-y: auto; scroll-behavior: smooth; }
.model-menu::-webkit-scrollbar { width: 4px; }
/* ---------- 159. 视频结果播放按钮微悬浮 ---------- */
@keyframes play-pulse { 0%,100% { box-shadow: 0 8px 24px rgba(0,0,0,.3); } 50% { box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 0 8px rgba(255,255,255,.1); } }
/* ---------- 160. 表单标签更精致 ---------- */
label { font-feature-settings: 'palt' 1; }
/* ---------- 161. 复选框圆角 ---------- */
.check .box { transition: all .2s var(--ease-out); }
.check input:checked + .box { transform: scale(1.05); }
/* ---------- 162. 弹窗 close 按钮微悬浮 ---------- */
.modal-card button[onclick*="false"], .modal-card button[onclick*="null"] { transition: all .2s; }
/* ---------- 163. 品牌徽章发光 ---------- */
.brand-chip.shine-card { box-shadow: 0 4px 14px rgba(255,94,98,.12), inset 0 1px 0 rgba(255,255,255,.6); }
/* ---------- 164. flowing-bg 性能优化 ---------- */
.flowing-bg { will-change: background-position; }
/* ---------- 165. 行业标签 hover 主色 ---------- */
.industry-card:hover .industry-badge { box-shadow: 0 4px 12px rgba(20,20,40,.08); }
/* ---------- 166. 模型菜单优化点击区域 ---------- */
.model-option { user-select: none; }
.model-option:active { background: rgba(20,20,40,.06); transform: scale(.99); }
/* ---------- 167. 个人中心积分卡数字呼吸 ---------- */
.credit-card .text-\[40px\] { animation: breathe 4s ease-in-out infinite; }
/* ---------- 168. profile-hero 顶部高光线 ---------- */
.profile-hero { box-shadow: 0 20px 50px rgba(20,20,40,.18), inset 0 1px 0 rgba(255,255,255,.1); }
/* ---------- 169. action-tile 图标 hover 旋转 ---------- */
.action-tile:hover .action-icon { transform: scale(1.05) rotate(-4deg); }
/* ---------- 170. timeline 圆点彩虹 ---------- */
.timeline-item:nth-child(1) .timeline-dot { background: var(--brand-1); box-shadow: 0 0 0 3px rgba(255,94,98,.15); }
.timeline-item:nth-child(2) .timeline-dot { background: var(--violet); box-shadow: 0 0 0 3px rgba(123,97,255,.15); }
.timeline-item:nth-child(3) .timeline-dot { background: #20C997; box-shadow: 0 0 0 3px rgba(32,201,151,.15); }
.timeline-item:nth-child(4) .timeline-dot { background: #FF9F43; box-shadow: 0 0 0 3px rgba(255,159,67,.15); }
.timeline-item:nth-child(5) .timeline-dot { background: #4C6EF5; box-shadow: 0 0 0 3px rgba(76,110,245,.15); }
/* ---------- 171. 渐变描边卡 ---------- */
.gradient-border { position: relative; padding: 1px; border-radius: 22px; background: linear-gradient(135deg, rgba(255,94,98,.4), rgba(123,97,255,.4)); }
.gradient-border > * { background: #fff; border-radius: 21px; }
/* ---------- 172. 通用 inline 标签 ---------- */
.inline-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 10.5px; font-weight: 700; border-radius: 6px; letter-spacing: .04em; }
.inline-tag.amber { background: rgba(255,159,67,.12); color: #B26B0F; }
.inline-tag.green { background: rgba(47,158,68,.12); color: #2F9E44; }
.inline-tag.red { background: rgba(224,49,49,.12); color: #C92A2A; }
/* ---------- 173. 装饰小三角 (科技感) ---------- */
.deco-tri { width: 0; height: 0; border-style: solid; border-width: 0 0 8px 8px; border-color: transparent transparent var(--brand-1) transparent; }
/* ---------- 174. 表格风格 (历史/列表) ---------- */
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; transition: background .15s; }
.list-row:hover { background: rgba(20,20,40,.03); }
/* ---------- 175. 步骤圆点连线 ---------- */
.step-dots { display: flex; align-items: center; gap: 2px; }
.step-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); transition: all .2s; }
.step-dot.active { background: var(--brand-1); transform: scale(1.3); }
.step-dot.done { background: #2F9E44; }
/* ---------- 176. 工具卡 hover 箭头 ---------- */
.tool-chip { position: relative; }
.tool-chip::after { content: '→'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); opacity: 0; transition: all .25s; color: var(--brand-1); font-weight: 800; }
.tool-chip:hover::after { opacity: 1; transform: translateY(-50%) translateX(2px); }
/* ---------- 177. 数据卡 number 入场 ---------- */
@keyframes num-rise { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
.num-rise { animation: num-rise .6s var(--ease-out) both; }
/* ---------- 178. 模特图占位减少分量 ---------- */
.placeholder-label { box-shadow: 0 1px 4px rgba(20,20,40,.04); }
/* ---------- 179. 章节小标签 (英文标识) ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--brand-1); }
/* ---------- 180. 加载点动画 ---------- */
.loading-dots { display: inline-flex; gap: 3px; }
.loading-dots span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: dot-bounce 1.4s ease-in-out infinite; }
.loading-dots span:nth-child(2) { animation-delay: .2s; }
.loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dot-bounce { 0%,80%,100% { transform: translateY(0); opacity: .3; } 40% { transform: translateY(-4px); opacity: 1; } }
/* ---------- 181. 全局变焦兼容 ---------- */
* { -webkit-tap-highlight-color: transparent; }
/* ---------- 182. 链接默认禁用文字间距 ---------- */
a, button { font-feature-settings: 'palt' 1; }
/* ---------- 183. 边框圆角统一规范 ---------- */
:root { --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; }
/* ---------- 184. 间距系统 ---------- */
:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; }
/* ---------- 185. 阴影系统升级 ---------- */
:root {
--shadow-xs: 0 1px 2px rgba(20,20,40,.03);
--shadow-sm: 0 1px 3px rgba(20,20,40,.04), 0 2px 8px rgba(20,20,40,.04);
--shadow-md: 0 4px 12px rgba(20,20,40,.05), 0 12px 28px rgba(20,20,40,.06);
--shadow-lg: 0 12px 24px rgba(255,94,98,.08), 0 24px 48px rgba(20,20,40,.08);
--shadow-xl: 0 24px 60px rgba(20,20,40,.18);
--shadow-glow: 0 0 0 4px rgba(255,94,98,.12);
}
/* ---------- 186. 模型 dot 加双层光晕 ---------- */
.model-dot { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 2px rgba(255,255,255,.7), 0 2px 6px rgba(20,20,40,.1); }
/* ---------- 187. 全局过渡曲线 ---------- */
:root { --bezier-bounce: cubic-bezier(.34,1.56,.64,1); --bezier-smooth: cubic-bezier(.45,0,.15,1); }
/* ---------- 188. 大按钮专用 ---------- */
.btn-xl { padding: 14px 28px; font-size: 15px; border-radius: 16px; }
/* ---------- 189. 小按钮专用 ---------- */
.btn-sm { padding: 7px 14px; font-size: 12px; border-radius: 10px; }
/* ---------- 190. 卡片标题渐进显示 (字符级) ---------- */
@keyframes char-rise { from { opacity: 0; transform: translateY(8px) rotateX(40deg); } to { opacity: 1; transform: translateY(0) rotateX(0); } }
/* ---------- 191. 鼠标悬停时改成 grab (拖动指示) ---------- */
.draggable { cursor: grab; }
.draggable:active { cursor: grabbing; }
/* ---------- 192. 选中卡片描金边 ---------- */
.selected-card { box-shadow: 0 0 0 2px var(--brand-1), 0 12px 28px rgba(255,94,98,.18); }
/* ---------- 193. 装饰条上下平衡 ---------- */
.bar-balance { display: flex; align-items: center; gap: 8px; }
.bar-balance::before, .bar-balance::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
/* ---------- 194. 圆形按钮 ---------- */
.btn-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
/* ---------- 195. 大字号统一 ---------- */
.font-display { font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
/* ---------- 196. 重要数据高亮背景条 ---------- */
.highlight-bar { background: linear-gradient(180deg, transparent 60%, rgba(255,153,102,.4) 60%); padding: 0 4px; }
/* ---------- 197. 状态指示灯 ---------- */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.status-dot.online { background: #2F9E44; box-shadow: 0 0 0 2px rgba(47,158,68,.2), 0 0 0 4px rgba(47,158,68,.1); }
.status-dot.busy { background: #FF9F43; }
.status-dot.offline { background: var(--ink-4); }
/* ---------- 198. 视频卡 hover 时显示信息 ---------- */
.video-card .meta { transform: translateY(100%); transition: transform .35s var(--ease-out); }
.video-card:hover .meta { transform: translateY(0); }
/* ---------- 199. 卡片 hover 后微缩同时旋转 ---------- */
.tilt-on-hover:hover { transform: translateY(-3px) rotate(.3deg); }
/* ---------- 200. 弹窗背景渐变 ---------- */
.modal-overlay { background: radial-gradient(ellipse at center, rgba(20,20,40,.4) 0%, rgba(20,20,40,.55) 100%); }
/* ---------- 201. 顶部进度条加 1px shimmer ---------- */
#topbar .pb { background: linear-gradient(90deg, var(--brand-1), var(--brand-2), #FFD4A8, var(--brand-2), var(--brand-1)); background-size: 200% 100%; animation: progress-shine 2s linear infinite; }
@keyframes progress-shine { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } }
/* ---------- 202. 滑入提示气泡通用 ---------- */
.slide-in-down { animation: slide-in-down .35s var(--ease-out) both; }
@keyframes slide-in-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
/* ---------- 203. 无聚焦边框 (有 :focus-visible 替代) ---------- */
*:focus { outline: none; }
/* ---------- 204. 图标统一描边 1.8 ---------- */
svg { stroke-linecap: round; stroke-linejoin: round; }
/* ---------- 205. 默认按钮焦点圈 ---------- */
button:focus-visible { box-shadow: 0 0 0 4px rgba(255,94,98,.18); }
/* ---------- 206. 标题间距分级 ---------- */
h1 { line-height: 1.1; }
h2 { line-height: 1.2; }
h3 { line-height: 1.3; }
/* ---------- 207. 链接 active 微缩 ---------- */
a:active { opacity: .85; }
/* ---------- 208. 鼠标禁用复制 (防误触) ---------- */
.no-select { user-select: none; -webkit-user-select: none; }
/* ---------- 209. industry-card 文字 hover 移动 ---------- */
.industry-card .meta-area h3 { transition: color .2s; }
.industry-card:hover .meta-area h3 { color: var(--brand-1); }
/* ---------- 210. 动画时长统一变量 ---------- */
:root { --t-fast: .15s; --t: .25s; --t-slow: .4s; --t-slower: .7s; }
/* =================================================================
============== Premium UI 升级包 第 3 轮（211-320） ====================
================================================================= */
/* ---------- 211. 全局点阵图案（utility，需要时挂上） ---------- */
.dot-pattern { background-image: radial-gradient(circle at 1px 1px, rgba(20,20,40,.06) 1px, transparent 1.5px); background-size: 18px 18px; }
.dot-pattern-light { background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.1) 1px, transparent 1.5px); background-size: 20px 20px; }
.grid-pattern { background-image: linear-gradient(rgba(20,20,40,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(20,20,40,.04) 1px, transparent 1px); background-size: 32px 32px; }
/* ---------- 212. 噪声纹理（CSS noise） ---------- */
.noise { position: relative; }
.noise::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.04; mix-blend-mode:multiply; background-image: url("data:image/svg+xml;utf8,"); }
/* ---------- 213. 渐变描边卡（双层 bg） ---------- */
.gradient-border { position: relative; background: #fff; border-radius: 22px; }
.gradient-border::before { content:''; position:absolute; inset:-1px; border-radius: 23px; padding:1px; background: linear-gradient(135deg, rgba(255,94,98,.4), rgba(123,97,255,.3), rgba(32,201,151,.25)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
/* ---------- 214. Typing 指示器三个圆点 ---------- */
.typing-dots { display:inline-flex; align-items:center; gap:4px; padding:4px 0; }
.typing-dots span { width:6px; height:6px; border-radius:50%; background: var(--brand-1); animation: typing-bounce 1.4s ease-in-out infinite; }
.typing-dots span:nth-child(2) { animation-delay:.16s; background: var(--brand-2); }
.typing-dots span:nth-child(3) { animation-delay:.32s; background: #FFD4A8; }
@keyframes typing-bounce { 0%,80%,100% { transform: translateY(0); opacity:.4; } 40% { transform: translateY(-6px); opacity:1; } }
/* ---------- 215. 滚动到顶部按钮 ---------- */
.scroll-top { position: fixed; right: 24px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); border: 1px solid var(--line); color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(20,20,40,.12), inset 0 1px 0 rgba(255,255,255,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transform: translateY(12px); transition: all .25s var(--ease-out); pointer-events: none; z-index: 50; }
.scroll-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top:hover { background: #fff; color: var(--brand-1); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,94,98,.2); }
/* ---------- 216. 键盘快捷键 kbd ---------- */
kbd, .kbd { display: inline-flex; align-items: center; padding: 2px 7px; min-width: 22px; height: 22px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: #fff; color: var(--ink-2); font-size: 10px; font-weight: 600; font-family: 'JetBrains Mono', 'SF Mono', monospace; box-shadow: inset 0 -1px 0 var(--line-2); }
/* ---------- 217. 行业卡 hover 图片缩放 + 浮起遮罩 ---------- */
.industry-card .img-area img { transition: transform .6s var(--ease-out); }
.industry-card:hover .img-area img { transform: scale(1.08); }
.industry-card .img-area::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.35) 100%); opacity:0; transition: opacity .3s; pointer-events:none; }
.industry-card:hover .img-area::after { opacity:1; }
/* ---------- 218. shortcut-card 内阴影点状装饰 ---------- */
.shortcut-card { background-image: radial-gradient(circle at 90% 10%, var(--sc-color, transparent) 0%, transparent 25%); background-size: 100% 100%; background-blend-mode: overlay; }
/* ---------- 219. 流光按钮（次要按钮也加微闪） ---------- */
.btn-ghost { position: relative; overflow: hidden; }
.btn-ghost::before { content:''; position: absolute; top: 0; left: -120%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent 30%, rgba(255,94,98,.08) 50%, transparent 70%); transform: skewX(-20deg); transition: left .8s var(--ease-out); pointer-events: none; }
.btn-ghost:hover::before { left: 220%; }
/* ---------- 220. 黄金边角 utility ---------- */
.golden-corner { position: relative; }
.golden-corner::before, .golden-corner::after { content:''; position:absolute; width: 14px; height: 14px; border: 2px solid var(--brand-1); pointer-events: none; transition: all .35s var(--ease-out); }
.golden-corner::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.golden-corner::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.golden-corner:hover::before { top: 4px; left: 4px; border-color: var(--brand-1); }
.golden-corner:hover::after { bottom: 4px; right: 4px; }
/* ---------- 221. 双色背景分割（区分页面 section） ---------- */
.split-bg { background: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(255,153,102,.025) 60%, rgba(255,153,102,.025) 100%); }
/* ---------- 222. 章节序号大圆 ---------- */
.section-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 6px 16px rgba(255,94,98,.3), inset 0 1px 0 rgba(255,255,255,.3); font-variant-numeric: tabular-nums; }
/* ---------- 223. info badge（用于 tag） ---------- */
.info-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: var(--info-soft); color: var(--info); border-radius: 100px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; }
/* ---------- 224. success badge ---------- */
.success-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: var(--success-soft); color: var(--success); border-radius: 100px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; }
/* ---------- 225. amber 警告 badge ---------- */
.warn-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: var(--warning-soft); color: var(--warning); border-radius: 100px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; }
/* ---------- 226. 对话气泡尾巴更精致 ---------- */
.chat-bubble-user, .chat-bubble-ai { position: relative; }
/* ---------- 227. 表情按钮 utility（聊天补充） ---------- */
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.7); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; transition: all .2s var(--ease-out); }
.icon-btn:hover { background: #fff; color: var(--brand-1); border-color: rgba(255,94,98,.25); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(20,20,40,.04); }
/* ---------- 228. 加快淡入加 stagger 工具 ---------- */
.stagger > * { opacity: 0; animation: fade-up .5s var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: .04s; }
.stagger > *:nth-child(2) { animation-delay: .08s; }
.stagger > *:nth-child(3) { animation-delay: .12s; }
.stagger > *:nth-child(4) { animation-delay: .16s; }
.stagger > *:nth-child(5) { animation-delay: .20s; }
.stagger > *:nth-child(6) { animation-delay: .24s; }
.stagger > *:nth-child(7) { animation-delay: .28s; }
.stagger > *:nth-child(8) { animation-delay: .32s; }
/* ---------- 229. 大图轮播容器 ---------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 35s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item { width: 240px; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 16px rgba(20,20,40,.08); }
.marquee-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); }
.marquee-item:hover img { transform: scale(1.05); }
/* ---------- 230. step-progress 圆环 ---------- */
.step-circle { position: relative; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; transition: all .3s var(--ease-out); flex-shrink: 0; }
.step-circle.done { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; box-shadow: 0 4px 12px rgba(255,94,98,.3); }
.step-circle.active { background: #fff; color: var(--brand-1); border: 2px solid var(--brand-1); box-shadow: 0 0 0 4px rgba(255,94,98,.15); animation: step-pulse 2s ease-in-out infinite; }
.step-circle.todo { background: var(--ink-5); color: var(--ink-3); }
@keyframes step-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(255,94,98,.15); } 50% { box-shadow: 0 0 0 6px rgba(255,94,98,.05); } }
.step-line { flex: 1; height: 2px; background: var(--line); border-radius: 100px; position: relative; overflow: hidden; }
.step-line.active::after { content:''; position:absolute; top:0; left:0; height:100%; width:50%; background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); }
/* ---------- 231. dropdown 通用 ---------- */
.dropdown-menu { position: absolute; min-width: 180px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(20,20,40,.12); z-index: 50; animation: pop .2s var(--ease-spring); }
.dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; transition: all .15s; }
.dropdown-item:hover { background: rgba(20,20,40,.04); color: var(--ink); }
.dropdown-item.danger:hover { background: var(--error-soft); color: var(--error); }
/* ---------- 232. tooltip 通用气泡 ---------- */
.tooltip { position: relative; }
.tooltip::before { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 5px 9px; background: rgba(20,20,40,.95); color: #fff; font-size: 10.5px; font-weight: 500; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: all .2s var(--ease-out); z-index: 100; }
.tooltip:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ---------- 233. 评分星星 ---------- */
.stars { display: inline-flex; gap: 1px; color: #FFC93C; }
.stars .star-filled { color: #FFC93C; }
.stars .star-empty { color: var(--ink-5); }
/* ---------- 234. 进度条 utility ---------- */
.progress { position: relative; height: 6px; background: rgba(20,20,40,.05); border-radius: 100px; overflow: hidden; }
.progress-bar { position: absolute; top:0; left:0; bottom:0; background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); border-radius: 100px; transition: width .6s var(--ease-out); }
.progress-bar.violet { background: linear-gradient(90deg, var(--violet), var(--violet-2)); }
.progress-bar.emerald { background: linear-gradient(90deg, var(--emerald), var(--emerald-2)); }
/* ---------- 235. 角标三角 ---------- */
.corner-flag { position: absolute; top: 0; right: 0; width: 64px; height: 64px; overflow: hidden; pointer-events: none; }
.corner-flag span { position: absolute; top: 12px; right: -22px; transform: rotate(45deg); padding: 3px 28px; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .08em; box-shadow: 0 2px 6px rgba(255,94,98,.3); }
/* ---------- 236. 头像组（叠加显示） ---------- */
.avatar-group { display: inline-flex; }
.avatar-group .av { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; box-shadow: 0 2px 6px rgba(20,20,40,.08); }
.avatar-group .av:first-child { margin-left: 0; }
/* ---------- 237. fancy 分隔线 ---------- */
.fancy-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-4); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.fancy-divider::before, .fancy-divider::after { content:''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
/* ---------- 238. icon-bg utility（彩色图标底） ---------- */
.icon-bg-brand { background: var(--brand-soft); color: var(--brand-1); }
.icon-bg-violet { background: var(--violet-soft); color: var(--violet); }
.icon-bg-emerald { background: var(--emerald-soft); color: var(--emerald); }
.icon-bg-amber { background: var(--amber-soft); color: var(--amber); }
/* ---------- 239. 微弧形装饰 ---------- */
.curve-deco { position: absolute; width: 200%; height: 80px; left: -50%; }
.curve-deco svg { width: 100%; height: 100%; }
/* ---------- 240. 加载点（已用） ---------- */
/* ---------- 241. focus 轮廓主题色 ---------- */
input:focus-visible, textarea:focus-visible { outline: none; }
/* ---------- 242. data-list utility ---------- */
.data-list { display: grid; gap: 1px; background: var(--line-2); border-radius: 12px; overflow: hidden; }
.data-list > * { background: #fff; padding: 10px 14px; }
/* ---------- 243. 数字徽章脉冲（未读、新消息等） ---------- */
.notif-dot { position: relative; }
.notif-dot::after { content:''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--error); border: 2px solid #fff; animation: notif-pulse 2s ease-in-out infinite; }
@keyframes notif-pulse { 0% { box-shadow: 0 0 0 0 rgba(224,49,49,.5); } 70% { box-shadow: 0 0 0 6px rgba(224,49,49,0); } 100% { box-shadow: 0 0 0 0 rgba(224,49,49,0); } }
/* ---------- 244. 轮播指示点 ---------- */
.dots-indicator { display: inline-flex; gap: 6px; }
.dots-indicator .ind { width: 6px; height: 6px; border-radius: 100px; background: var(--ink-5); transition: all .25s; }
.dots-indicator .ind.active { width: 18px; background: var(--brand-1); }
/* ---------- 245. 加载 spinner 双环 ---------- */
.spinner-dual { display: inline-block; width: 24px; height: 24px; border: 2px solid var(--line); border-top-color: var(--brand-1); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- 246. 命中态光带 ---------- */
.hit-glow { position: relative; }
.hit-glow::after { content:''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255,94,98,0); animation: hit 1s var(--ease-out); pointer-events: none; }
@keyframes hit { 0% { box-shadow: 0 0 0 0 rgba(255,94,98,.5); } 100% { box-shadow: 0 0 0 12px rgba(255,94,98,0); } }
/* ---------- 247. 模态背景拉伸 ---------- */
.modal-overlay { animation-duration: .3s; }
/* ---------- 248. dark hero 装饰 ---------- */
.profile-hero { background-attachment: scroll; }
.profile-hero::before, .profile-hero::after { animation: orb-slow 20s ease-in-out infinite; }
@keyframes orb-slow { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px,-15px); } }
/* ---------- 249. 双层渐变光晕（hero CTA） ---------- */
.cta-shine { position: relative; }
.cta-shine::after { content:''; position:absolute; inset:0; border-radius: inherit; background: radial-gradient(ellipse at top, rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
/* ---------- 250. 表格 utility ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--line-2); }
.tbl td { padding: 12px; font-size: 13px; color: var(--ink-2); border-bottom: 1px dashed var(--line-2); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover { background: rgba(20,20,40,.02); }
/* ---------- 251. 命名特性卡边角光斑 ---------- */
.feat-block { position: relative; }
.feat-block::after { content:''; position: absolute; top: -1px; right: -1px; width: 60px; height: 60px; background: linear-gradient(135deg, var(--fb-c,var(--brand-1)) 0%, transparent 70%); border-radius: inherit; opacity: 0; transition: opacity .35s; pointer-events: none; mix-blend-mode: overlay; }
.feat-block:hover::after { opacity: .25; }
/* ---------- 252. 页头 sticky 阴影渐显（滚动时加深） ---------- */
.glass.border-b { border-image-slice: 1; }
/* ---------- 253. 卡片 hover 时主题光影 ---------- */
.card-hover { isolation: isolate; }
/* ---------- 254. 加大 max-width 选项 ---------- */
.max-w-screen { max-width: 1280px; margin: 0 auto; }
/* ---------- 255. 数据呼吸动画 ---------- */
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success); position: relative; }
.live-dot::after { content:''; position: absolute; inset: -4px; border-radius: 50%; background: var(--success); opacity: .4; animation: live-pulse 2s ease-in-out infinite; }
@keyframes live-pulse { 0% { transform: scale(.8); opacity: .4; } 100% { transform: scale(2); opacity: 0; } }
/* ---------- 256. 三步流程节点 ---------- */
.flow-node { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 8px 20px rgba(255,94,98,.3), inset 0 1px 0 rgba(255,255,255,.3); }
/* ---------- 257. 大数字带影子（hero stats） ---------- */
.stat-mega { font-size: 56px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 50%, rgba(255,255,255,.6) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* ---------- 258. floating shapes（装饰 SVG） ---------- */
.shape-float { position: absolute; pointer-events: none; opacity: .6; }
.shape-float.s1 { animation: float-y 7s ease-in-out infinite; }
.shape-float.s2 { animation: float-y 9s ease-in-out infinite; animation-delay: -3s; }
/* ---------- 259. 模糊视觉聚焦 ---------- */
.focus-area { position: relative; }
.focus-area:hover { z-index: 5; }
/* ---------- 260. 软件版本 chip ---------- */
.version-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: rgba(20,20,40,.04); border-radius: 5px; font-size: 9.5px; font-weight: 700; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; letter-spacing: .04em; }
/* ---------- 261. 卡片左侧彩色边条 ---------- */
.card-bar { position: relative; padding-left: 14px; }
.card-bar::before { content:''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: linear-gradient(180deg, var(--brand-1), var(--brand-2)); border-radius: 2px; }
/* ---------- 262. 分类彩色 dot ---------- */
.cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
/* ---------- 263. 搜索框增强 ---------- */
.search-input { padding-left: 36px !important; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 12px center; background-size: 14px; }
/* ---------- 264. 按钮组 ---------- */
.btn-group { display: inline-flex; background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 1px; }
.btn-group button { padding: 6px 12px; border-radius: 9px; font-size: 12px; font-weight: 500; color: var(--ink-3); background: transparent; border: none; cursor: pointer; transition: all .2s; }
.btn-group button:hover { color: var(--ink); }
.btn-group button.active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 2px 6px rgba(20,20,40,.06); }
/* ---------- 265. drop-zone 拖入态光晕 ---------- */
.drop-zone { position: relative; isolation: isolate; }
.drop-zone:hover { border-color: rgba(255,94,98,.3); background: rgba(255,94,98,.02); }
/* ---------- 266. ribbon 角标 ---------- */
.ribbon { position: absolute; top: 12px; left: -6px; padding: 4px 10px 4px 12px; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); box-shadow: 0 2px 8px rgba(255,94,98,.3); z-index: 4; }
.ribbon::before { content:''; position: absolute; left: 0; bottom: -6px; width: 6px; height: 6px; background: var(--brand-deep); clip-path: polygon(0 0, 100% 0, 100% 100%); }
/* ---------- 267. 增强 close 按钮 ---------- */
.x-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: transparent; color: var(--ink-3); border: none; cursor: pointer; transition: all .15s; }
.x-btn:hover { background: rgba(20,20,40,.06); color: var(--ink); transform: rotate(90deg); }
/* ---------- 268. accent 主色 ring ---------- */
.ring-glow-brand { box-shadow: 0 0 0 4px rgba(255,94,98,.12), 0 0 0 1px rgba(255,94,98,.5); }
/* ---------- 269. 数据卡 mini ---------- */
.mini-stat { padding: 14px; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; }
.mini-stat .num { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.mini-stat .lbl { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.mini-stat .delta { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 100px; background: var(--success-soft); color: var(--success); }
/* ---------- 270. 加大 H1 优雅化 ---------- */
.hero-headline { font-feature-settings: 'cv11', 'ss01'; }
/* ---------- 271. SVG 图标默认 stroke 优化 ---------- */
svg { vector-effect: non-scaling-stroke; }
/* ---------- 272. 加动效到 input 错误态 ---------- */
.input.error::placeholder { color: var(--error); opacity: .6; }
/* ---------- 273. 卡片 stub 占位 ---------- */
.skeleton-card { padding: 16px; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; }
/* ---------- 274. 输入 prefix / suffix ---------- */
.input-wrap { position: relative; }
.input-wrap .prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.input-wrap .suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
/* ---------- 275. 段落首字下沉 ---------- */
.first-letter::first-letter { font-size: 2.4em; float: left; line-height: 1; padding-right: 8px; padding-top: 4px; font-weight: 800; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* ---------- 276. 折叠组件箭头 ---------- */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
/* ---------- 277. 按钮加 loading 圆环 ---------- */
.btn-primary[disabled].loading { position: relative; }
/* ---------- 278. svg 笔触统一 ---------- */
svg path, svg circle, svg rect, svg line { stroke-linecap: round; stroke-linejoin: round; }
/* ---------- 279. 增加 smooth scroll 可控 ---------- */
.snap-x { scroll-snap-type: x mandatory; }
.snap-x > * { scroll-snap-align: start; }
/* ---------- 280. tag 浮起 ---------- */
.tag-new, .tag-hot { transition: transform .2s; }
.tag-new:hover, .tag-hot:hover { transform: translateY(-1px); }
/* ---------- 281. 卡片亮边时间长 ---------- */
.card-hover { transition-duration: .4s; }
/* ---------- 282. 选择按钮组（generate page 选项） ---------- */
.opt-pill { padding: 7px 14px; border-radius: 100px; font-size: 12px; font-weight: 500; transition: all .2s var(--ease-out); cursor: pointer; border: 1px solid var(--line); background: rgba(255,255,255,.6); color: var(--ink-2); }
.opt-pill:hover { background: #fff; border-color: rgba(255,94,98,.25); color: var(--ink); }
.opt-pill.active { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(255,94,98,.25), inset 0 1px 0 rgba(255,255,255,.3); transform: translateY(-1px); }
/* ---------- 283. 输出图片优化 ---------- */
.gen-result-img { transition: transform .35s var(--ease-out); }
.gen-result-img:hover { transform: scale(1.02); }
/* ---------- 284. 透明遮罩 ---------- */
.overlay-fade { background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 100%); }
/* ---------- 285. 模态卡内边距 PC vs 手机 ---------- */
@media (min-width: 768px) { .modal-card { padding: 36px; } }
/* ---------- 286. focus-within 精修 ---------- */
.input-wrap:focus-within { box-shadow: 0 0 0 4px rgba(255,94,98,.1); border-radius: 12px; }
/* ---------- 287. caret 颜色 ---------- */
input, textarea { caret-color: var(--brand-1); }
/* ---------- 288. 光标进入文字时变色 ---------- */
.input:focus { color: var(--ink); }
/* ---------- 289. 链接默认 transition ---------- */
a { transition: color .2s, opacity .2s; }
a:hover { opacity: .85; }
/* ---------- 290. 表单 label 字重 ---------- */
label { font-weight: 600; }
/* ---------- 291. 时间戳 utility ---------- */
.timestamp { font-size: 10.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* ---------- 292. 主图阴影 ---------- */
img.hero-image { border-radius: 18px; box-shadow: 0 20px 50px rgba(20,20,40,.18), 0 0 0 1px rgba(255,255,255,.5); }
/* ---------- 293. 增加 sidebar 顶部 logo 区下面分割线（更柔和） ---------- */
.sidebar > div:first-child { box-shadow: 0 1px 0 rgba(20,20,40,.04); }
/* ---------- 294. nav-item 按下回弹 ---------- */
.nav-item { will-change: transform; }
/* ---------- 295. 全局 sub-pixel rendering 关闭（更锐利英文） ---------- */
.crisp-text { font-variant-ligatures: common-ligatures; }
/* ---------- 296. 隐藏滚动条 utility ---------- */
.scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
/* ---------- 297. 模态外侧轻击关闭提示 ---------- */
.modal-overlay { cursor: pointer; }
.modal-card { cursor: default; }
/* ---------- 298. 内容居中加 padding ---------- */
.content-pad { padding: 24px 28px; }
/* ---------- 299. 默认按钮 padding ---------- */
button.btn { padding: 10px 18px; }
/* ---------- 300. 高级 SVG 动画 dasharray ---------- */
.svg-draw path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* ---------- 301. 增加 hover 的 cursor ---------- */
.zoom-cursor { cursor: zoom-in; }
.move-cursor { cursor: grab; }
.move-cursor:active { cursor: grabbing; }
/* ---------- 302. 强调浮起阴影 utility ---------- */
.shadow-brand { box-shadow: 0 8px 24px rgba(255,94,98,.16); }
.shadow-violet { box-shadow: 0 8px 24px rgba(123,97,255,.16); }
.shadow-emerald { box-shadow: 0 8px 24px rgba(32,201,151,.14); }
/* ---------- 303. 黑色 chip ---------- */
.dark-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: rgba(20,20,40,.85); color: #fff; border-radius: 100px; font-size: 10.5px; font-weight: 600; backdrop-filter: blur(8px); }
/* ---------- 304. 透明卡边框 hover 反馈 ---------- */
.card { transition: transform .35s var(--ease-out), box-shadow .35s, border-color .25s; }
/* ---------- 305. Lightbox 已升级至独立可缩放版本 ---------- */
/* ---------- 306. 弹窗内副标 ---------- */
.modal-card .text-\[13px\] { line-height: 1.6; }
/* ---------- 307. 限制最大宽度容器 ---------- */
.container-narrow { max-width: 640px; margin: 0 auto; }
.container-mid { max-width: 960px; margin: 0 auto; }
.container-wide { max-width: 1280px; margin: 0 auto; }
/* ---------- 308. 立体卡片堆叠 ---------- */
.stacked-card { position: relative; }
.stacked-card::before, .stacked-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,.6); border: 1px solid var(--line-2); z-index: -1; transition: transform .35s var(--ease-out); }
.stacked-card::before { transform: translate(4px, 4px) rotate(.5deg); }
.stacked-card::after { transform: translate(8px, 8px) rotate(1deg); opacity: .5; }
.stacked-card:hover::before { transform: translate(2px, 2px) rotate(0); }
.stacked-card:hover::after { transform: translate(4px, 4px) rotate(.5deg); }
/* ---------- 309. CSS 锐边 utility ---------- */
.crisp-edges { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
/* ---------- 310. 视觉层次：标题 vs 副标 ---------- */
h1 + p, h2 + p, h3 + p { margin-top: 6px; }
/* ---------- 311. FAQ details / summary 样式 ---------- */
details > summary { list-style: none; outline: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary > span:last-child { transform: rotate(45deg); color: var(--brand-2) !important; }
details > summary > span:last-child { display: inline-block; transition: transform .25s var(--ease-out); }
details { transition: all .25s var(--ease-out); }
details[open] { background: linear-gradient(135deg, rgba(255,94,98,.02), rgba(255,153,102,.02)); border-color: rgba(255,94,98,.18); }
/* ---------- 312. tooltip 显示 ---------- */
.tooltip[data-tip] { position: relative; }
/* ---------- 313. live-feed marquee ---------- */
.marquee-track { animation-timing-function: linear; }
/* ---------- 314. 行业全景方块 ---------- */
.industry-mini { aspect-ratio: 1; }
/* ---------- 315. 价格卡推荐徽章 ---------- */
.cta-glow { transform: translateY(-2px); }
/* ---------- 316. 行业卡真实图加载策略 ---------- */
.ind-img { display: block; transition: opacity .3s ease; }
.industry-card:hover .ind-img { transform: scale(1.04); transition: transform .5s ease; }
/* ---------- 317. 行业方案页 - 功能卡 v3（极简：图占位 + 功能名） ---------- */
.ind-feat-card-v3 { background:#fff; border:1px solid var(--line-2); border-radius:18px; cursor:pointer; overflow:hidden; padding:0; display:flex; flex-direction:column; transition: all .25s cubic-bezier(.2,.8,.2,1); width:100%; text-align:left; position: relative; }
.ind-feat-card-v3.is-soon {
cursor: not-allowed;
opacity: .55;
filter: saturate(.4);
}
.ind-feat-card-v3.is-soon:hover {
transform: none;
box-shadow: none;
}
.ifc3-soon {
position: absolute; top: 8px; right: 8px;
padding: 3px 9px;
background: rgba(20,20,40,.78);
color: #fff;
font-size: 10.5px; font-weight: 800;
letter-spacing: .04em;
border-radius: 8px;
backdrop-filter: blur(4px);
z-index: 2;
box-shadow: 0 2px 6px rgba(20,20,40,.15);
}
.ind-feat-card-v3:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,20,40,.08); border-color: var(--ifc-c,rgba(0,0,0,.2)); }
.ifc3-img { position:relative; aspect-ratio: 4/3; overflow:hidden; background:linear-gradient(135deg,#fafafa 0%,#f0f0f0 100%); }
.ifc3-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.ind-feat-card-v3:hover .ifc3-img img { transform: scale(1.04); }
.ifc3-name { padding:14px 18px 16px; font-size:14.5px; font-weight:700; color:var(--ink); letter-spacing:-.005em; line-height:1.3; }
.ind-feat-card-v3.is-main { border-color:var(--ifc-c); border-width:2px; }
/* ================================ */
/* 反馈模块（feedback.js）专属样式 */
/* ================================ */
.fb-spin {
display: inline-block;
width: 12px; height: 12px;
border: 2px solid rgba(255,255,255,.35);
border-top-color: #fff;
border-radius: 50%;
animation: fb-spin 0.7s linear infinite;
vertical-align: -2px;
margin-right: 6px;
}
.fb-spin-big {
display: inline-block;
width: 32px; height: 32px;
border: 3px solid rgba(255,94,98,.18);
border-top-color: var(--brand-1);
border-radius: 50%;
animation: fb-spin 0.8s linear infinite;
}
@keyframes fb-spin {
to { transform: rotate(360deg); }
}
/* type 卡片激活状态 */
.fb-type-on {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(20,20,40,.06);
}
.fb-type-off {
transition: all .15s;
}
.fb-type-off:hover {
background: #F1F3F5 !important;
transform: translateY(-1px);
}
/* details/summary 重置 */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary > span:first-child { transform: rotate(90deg); display: inline-block; }
details > summary > span:first-child { display: inline-block; transition: transform .2s; }
/* ============================================
* 右上角浮动用户菜单 + 下拉
* ============================================ */
.user-menu-item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 9px 11px;
background: none;
border: none;
border-radius: 8px;
font-size: 12.5px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: all .15s;
text-align: left;
}
.user-menu-item:hover {
background: var(--bg);
color: var(--ink);
}
.user-menu-item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--ink-3);
}
.user-menu-item:hover svg {
color: var(--brand-1);
}
.user-menu-badge {
margin-left: auto;
font-size: 10px;
background: var(--bg);
color: var(--ink-3);
padding: 1px 7px;
border-radius: 100px;
font-weight: 700;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================
v1.5.13 — 平滑交互 (firsttail / video_studio)
============================================ */
/* keyframes: lightbox 弹出 */
@keyframes ftFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ftZoomIn {
from { opacity: 0; transform: scale(.92); }
to { opacity: 1; transform: scale(1); }
}
/* 图片缩放卡片悬浮 hint */
.ft-img-zoom { overflow: hidden; border-radius: 12px; }
.ft-img-zoom:hover img { transform: scale(1.015); }
.ft-img-zoom:hover .ft-zoom-hint { opacity: 1 !important; }
/* 通用按钮 ft-btn — 比 inline 更顺滑 */
.ft-btn {
transition: transform .18s cubic-bezier(.2,.8,.2,1),
background-color .18s ease,
border-color .18s ease,
box-shadow .18s ease,
opacity .18s ease;
}
.ft-btn:not(:disabled):hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.ft-btn:not(:disabled):active {
transform: translateY(0) scale(.98);
transition-duration: .08s;
}
/* 动作卡片 hover 效果 */
.ft-action-card:hover {
transform: translateY(-1px);
border-color: rgba(255,107,53,.4) !important;
box-shadow: 0 4px 12px rgba(255,107,53,.06);
}
.ft-action-card:active {
transform: translateY(0) scale(.99);
transition-duration: .08s;
}
/* firsttail/video_studio 内嵌 button 的通用平滑过渡 - 只针对没有 ft-btn class 的 button */
.min-h-full button:not(.ft-btn):not(.btn-primary):not(.btn-ghost):not(.btn-violet) {
transition: background-color .18s ease,
color .18s ease,
border-color .18s ease,
transform .18s cubic-bezier(.2,.8,.2,1),
box-shadow .18s ease,
opacity .15s ease;
}
/* 卡片 hover 微动 — 让点击区域有响应感 (但不要过于强烈) */
.min-h-full .card[onclick],
.min-h-full [class*="card"][onclick]:not(.shortcut-card) {
transition: transform .18s cubic-bezier(.2,.8,.2,1),
border-color .18s ease,
box-shadow .18s ease;
}
.min-h-full .card[onclick]:hover {
transform: translateY(-1px);
}
/* 输入框 focus 平滑 (虽然 inline 已有, 这里做兜底) */
.min-h-full input:not([type="file"]),
.min-h-full textarea {
transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
/* tab 切换平滑 */
.min-h-full button[onclick*="customMode"] {
position: relative;
}
/* =========================================
* v1.5.14.4 全面手机适配
* 桌面（>= 1024px）：原样不动 — sidebar + main
* 平板（< 1024px）：sidebar 收窄
* 手机（< 768px）：sidebar 变抽屉 + 顶栏 + 全局缩放
* ========================================= */
/* 移动端顶栏（桌面隐藏） */
.m-topbar { display:none; }
/* 抽屉遮罩 */
.m-overlay { display:none; }
/* ---------- 平板 (< 1024px) ---------- */
@media (max-width: 1023px) {
/* 主内容区域内边距收窄 */
main { padding: 0 !important; }
main > div[class*="max-w"] { max-width: 100% !important; padding-left:14px !important; padding-right:14px !important; }
}
/* ---------- 手机 (< 768px) ---------- */
@media (max-width: 767px) {
/* 0. body 全局背景 + app 容器调整（关键：app 顶部留出顶栏高度） */
#app, #app.flex.h-screen {
padding-top: 54px;
height: 100vh;
height: 100dvh;
overflow: visible !important;
}
/* 1. 隐藏桌面 right-corner（用户头像区） */
.user-corner, [class*="user-corner"], #user-corner { display:none !important; }
/* 2. 显示移动端顶栏 */
.m-topbar, div.m-topbar {
display:flex !important;
position:fixed; top:0; left:0; right:0;
height:54px; z-index:50;
background:rgba(255,253,250,.96); backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border-bottom:1px solid var(--line-2);
align-items:center; gap:10px; padding:0 12px;
box-shadow:0 1px 0 rgba(20,20,40,.03);
}
.m-burger {
width:40px; height:40px; border-radius:10px;
background:transparent; border:0; cursor:pointer;
color:var(--ink); display:flex; align-items:center; justify-content:center;
transition:background .2s;
}
.m-burger:active { background:rgba(0,0,0,.06); }
.m-topbar-title {
flex:1; display:flex; align-items:center; gap:8px;
color:var(--ink);
}
.m-topbar-user {
background:transparent; border:0; padding:6px;
cursor:pointer; display:flex; align-items:center; justify-content:center;
}
/* 3. App root 留出顶栏空间 */
#app { padding-top:54px; }
/* 4. Sidebar 变抽屉：默认隐藏在左侧外，open 时滑入 */
/* 选择器多重叠加 → 优先级超过 inline style="width:268px" */
aside.sidebar,
aside.sidebar.shrink-0,
.sidebar[style] {
position:fixed !important;
top:0 !important; left:0 !important;
width:280px !important;
max-width:80vw !important;
height:100vh !important;
height:100dvh !important;
z-index:60 !important;
transform:translateX(-100%);
transition:transform .3s cubic-bezier(.2,.8,.2,1) !important;
box-shadow:8px 0 32px rgba(0,0,0,.15);
flex-shrink:0;
flex-basis:auto !important;
}
aside.sidebar.mob-open,
aside.sidebar.shrink-0.mob-open,
.sidebar.mob-open[style] { transform:translateX(0) !important; }
/* 5. 抽屉遮罩 */
.m-overlay {
display:block !important;
position:fixed; inset:0;
background:rgba(20,20,40,.45);
z-index:55;
animation:m-overlay-in .25s ease;
}
@keyframes m-overlay-in { from { opacity:0 } to { opacity:1 } }
/* 6. Sidebar 折叠按钮在移动端隐藏（用顶栏汉堡控制） */
.sidebar > button[onclick*="S.sc"] { display:none !important; }
/* 7. main 占满 */
main { width:100% !important; }
/* 8. 通用容器内边距 */
main > div { padding-left:14px; padding-right:14px; }
.max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-4xl { max-width:100% !important; padding-left:14px !important; padding-right:14px !important; }
/* 9. 卡片网格自动单列 */
.grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns:1fr !important; }
.md\:grid-cols-2, .md\:grid-cols-3, .md\:grid-cols-4 { grid-template-columns:1fr !important; }
.sm\:grid-cols-2 { grid-template-columns:1fr !important; }
/* 10. 字号缩 */
.hero-headline, h1.text-\[28px\], h1.text-\[32px\] { font-size:24px !important; line-height:1.25 !important; }
.text-\[40px\], .text-\[44px\] { font-size:28px !important; }
.text-\[36px\] { font-size:24px !important; }
.big-num { font-size:28px !important; }
/* 11. 按钮列变垂直 */
.flex.gap-3, .flex.gap-4 { flex-wrap:wrap; }
.flex.items-center.gap-2.sm\:gap-3, .hidden.md\:flex { display:flex !important; flex-wrap:wrap; }
/* 12. 聊天页输入栏调整 */
.chat-input-wrap { gap:6px !important; padding:8px 10px !important; }
.chat-textarea { font-size:15px !important; padding:10px 12px !important; }
/* 13. 模型菜单变全宽 */
.model-menu {
position:fixed !important;
left:8px !important; right:8px !important;
top:60px !important;
width:auto !important;
max-width:none !important;
max-height:calc(100vh - 80px);
overflow-y:auto;
}
.mm-row { padding:10px !important; }
.mm-meta { font-size:12px !important; }
.mm-vars { flex-wrap:wrap; }
/* 14. 模态框调整 */
.modal-card, [class*="modal-card"] {
width:calc(100vw - 24px) !important;
max-width:none !important;
max-height:calc(100vh - 60px);
margin:0 !important;
}
/* 15. lightbox 控制条紧凑 */
.lightbox-zoom { padding:6px 10px !important; gap:8px !important; }
/* 16. 表格变水平滚动 */
table { min-width:100%; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* 17. 公告弹窗在手机上贴边 */
.ann-overlay > div, [class*="ann-card"] {
width:calc(100vw - 24px) !important;
max-width:none !important;
}
/* 公告 teaser 在手机底部居中 */
#ann-teaser {
left:12px !important; right:12px !important;
bottom:12px !important;
max-width:none !important;
}
/* 18. 行业卡封面 SVG 自动缩 */
.ind-cover, [class*="industry-card"] img { max-width:100%; height:auto !important; }
/* 19. 上传按钮 + 图片预览缩小 */
.chat-upload-btn { width:38px !important; height:38px !important; }
.chat-upload-btn svg { width:18px !important; height:18px !important; }
/* 20. 隐藏部分桌面才有的提示 */
.hide-mobile, .desktop-only { display:none !important; }
/* 21. textarea 防 iOS 自动 zoom */
input, textarea, select { font-size:16px !important; }
input.inp-sm, textarea.inp-sm { font-size:14px !important; }
/* 22. 页面顶部按钮区在手机水平滚动 */
.pill-row, .chip-row, .btn-row {
overflow-x:auto;
-webkit-overflow-scrolling:touch;
flex-wrap:nowrap !important;
scrollbar-width:none;
}
.pill-row::-webkit-scrollbar, .chip-row::-webkit-scrollbar { display:none; }
/* 23. footer / nav 间距收紧 */
footer { padding:14px !important; font-size:11px !important; }
.footer-grid { grid-template-columns:1fr !important; gap:14px !important; }
}
/* ---------- 极小屏 (< 380px) 特殊处理 ---------- */
@media (max-width: 379px) {
.m-topbar-title span { display:none; }
.sidebar { width:88vw !important; }
.text-\[24px\] { font-size:20px !important; }
.hero-headline { font-size:22px !important; }
}
/* =================================================================
v1.5.14.8 — 100+ 大厂级 UI 升级包
对标：linear.app · stripe.com · vercel.com · arc browser
================================================================= */
/* -------- 1. Hero 问候卡（取代之前那个挤巴巴的小 chip）-------- */
.hero-greet-card {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 10px 18px 10px 10px;
background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(255,247,237,.85) 100%);
border: 1px solid rgba(255,159,67,.22);
border-radius: 999px;
box-shadow:
0 6px 20px rgba(255,107,53,.10),
0 1px 0 rgba(255,255,255,.85) inset,
0 0 0 1px rgba(255,255,255,.5) inset;
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
position: relative;
overflow: hidden;
transition: all .35s cubic-bezier(.2,.8,.2,1);
animation: hero-greet-in .8s cubic-bezier(.2,.8,.2,1) backwards;
animation-delay: .25s;
}
.hero-greet-card::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(120% 120% at 0% 0%, rgba(255,201,60,.12), transparent 50%);
pointer-events: none;
}
.hero-greet-card:hover {
transform: translateY(-2px);
box-shadow:
0 12px 36px rgba(255,107,53,.18),
0 1px 0 rgba(255,255,255,.85) inset;
border-color: rgba(255,159,67,.35);
}
@keyframes hero-greet-in {
from { opacity: 0; transform: translateY(8px) scale(.96) }
to { opacity: 1; transform: translateY(0) scale(1) }
}
.hero-greet-avatar {
position: relative;
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #FF9F43, #FF6B35);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 15px;
letter-spacing: -.02em;
box-shadow:
0 4px 12px rgba(255,107,53,.32),
0 0 0 2px #fff,
0 0 0 3px rgba(255,107,53,.15);
flex-shrink: 0;
}
.hero-greet-vip {
position: absolute;
bottom: -3px; right: -7px;
background: linear-gradient(135deg,#FFD43B,#F08C00);
color: #fff;
font-size: 8.5px;
font-weight: 900;
padding: 1.5px 5px;
border-radius: 999px;
letter-spacing: .04em;
box-shadow: 0 2px 6px rgba(240,140,0,.35), 0 0 0 1.5px #fff;
}
.hero-greet-text {
display: flex; flex-direction: column; gap: 2px;
position: relative; z-index: 1;
}
.hero-greet-line1 {
display: flex; align-items: baseline; gap: 4px;
font-size: 15px; font-weight: 700;
color: var(--ink);
letter-spacing: -.005em;
line-height: 1.2;
}
.hero-greet-time { color: var(--ink-2); font-weight: 600; }
.hero-greet-comma { color: var(--ink-3); margin: 0 -2px; }
.hero-greet-name {
background: linear-gradient(135deg, #FF6B35, #FF9F43, #FFC93C);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 800;
animation: hero-greet-name-shimmer 4s ease-in-out infinite;
}
@keyframes hero-greet-name-shimmer {
0%, 100% { background-position: 0% 50% }
50% { background-position: 100% 50% }
}
.hero-greet-wave {
display: inline-block;
font-size: 14px;
margin-left: 2px;
animation: hero-greet-wave 1.2s ease-in-out infinite;
transform-origin: 70% 70%;
}
@keyframes hero-greet-wave {
0%, 60%, 100% { transform: rotate(0deg) }
10%, 30%, 50% { transform: rotate(14deg) }
20%, 40% { transform: rotate(-8deg) }
}
.hero-greet-line2 {
display: flex; align-items: center; gap: 4px;
font-size: 11.5px;
color: var(--ink-3);
letter-spacing: .01em;
}
.hero-greet-credit-icon {
font-size: 11px;
filter: drop-shadow(0 1px 2px rgba(255,159,67,.4));
}
.hero-greet-credit-num {
font-weight: 800;
color: #E84118;
font-variant-numeric: tabular-nums;
font-size: 12px;
}
.hero-greet-credit-unit { font-weight: 600; color: var(--ink-2); }
.hero-greet-divider { color: var(--ink-4); margin: 0 2px; opacity: .6; }
.hero-greet-tip { color: var(--ink-3); font-style: italic; opacity: .85; }
/* 移动端 -- 紧凑但仍突出 */
@media (max-width: 767px) {
.hero-greet-card { gap: 10px; padding: 8px 14px 8px 8px; }
.hero-greet-avatar { width: 32px; height: 32px; font-size: 13px; }
.hero-greet-line1 { font-size: 13px; }
.hero-greet-line2 { font-size: 10.5px; }
.hero-greet-tip { display: none; }
.hero-greet-divider { display: none; }
}
/* -------- 2. 全局焦点环 — 更精致（替代浏览器默认） -------- */
*:focus-visible {
outline: 2px solid rgba(255,107,53,.55) !important;
outline-offset: 2px !important;
border-radius: inherit;
transition: outline-offset .12s ease;
}
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
outline-offset: 3px !important;
}
/* -------- 3. 按钮统一 hover lift（所有非 chip 按钮） -------- */
.btn:not(:disabled):not(.no-lift),
button.btn-primary:not(:disabled),
button.btn-default:not(:disabled),
.btn-violet:not(:disabled) {
transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background-color .2s;
will-change: transform;
}
.btn:not(:disabled):not(.no-lift):hover,
button.btn-primary:not(:disabled):hover {
transform: translateY(-1.5px);
}
.btn:not(:disabled):not(.no-lift):active,
button.btn-primary:not(:disabled):active {
transform: translateY(0) scale(.98);
transition-duration: .08s;
}
/* -------- 4. 卡片 hover 更细致 -------- */
.card:not(.no-lift):hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(20,20,40,.08), 0 2px 6px rgba(20,20,40,.04);
transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
/* -------- 5. 链接下划线动画 -------- */
a:not(.no-underline-anim):not(.btn) {
position: relative;
text-decoration: none;
transition: color .2s;
}
/* -------- 6. 输入框 focus glow -------- */
.inp:focus, input.inp:focus, textarea.inp:focus, select.inp:focus,
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="search"]:focus, textarea:focus {
border-color: rgba(255,107,53,.5) !important;
box-shadow:
0 0 0 3px rgba(255,107,53,.12),
0 1px 3px rgba(255,107,53,.08) !important;
outline: none !important;
transition: border-color .2s, box-shadow .2s;
}
/* -------- 7. tag 标签微动 -------- */
.tag {
transition: transform .15s, box-shadow .15s;
white-space: nowrap;
}
.tag:hover { transform: translateY(-1px); }
/* -------- 8. chip / pill 按钮统一 ripple-ish 效果 -------- */
.chip {
transition: all .18s cubic-bezier(.2,.8,.2,1);
position: relative;
overflow: hidden;
}
.chip:active:not(:disabled) { transform: scale(.96); }
.chip.on {
font-weight: 700;
box-shadow: 0 2px 6px rgba(255,107,53,.18);
}
/* -------- 9. 模态框背景模糊更强（更高级感） -------- */
.modal {
backdrop-filter: blur(8px) saturate(1.2);
-webkit-backdrop-filter: blur(8px) saturate(1.2);
background: rgba(20,20,40,.4);
}
.modal-card {
animation: modal-pop .35s cubic-bezier(.2,1.4,.4,1) backwards;
}
@keyframes modal-pop {
from { opacity: 0; transform: scale(.92) translateY(8px) }
to { opacity: 1; transform: scale(1) translateY(0) }
}
/* -------- 10. toast 提示更精致 -------- */
.toast {
border-radius: 12px;
padding: 12px 18px;
font-size: 13px;
font-weight: 600;
letter-spacing: .01em;
box-shadow:
0 16px 40px rgba(20,20,40,.18),
0 1px 0 rgba(255,255,255,.06) inset;
border: 1px solid rgba(255,255,255,.08);
}
/* -------- 11. 滚动条更细更现代 -------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(20,20,40,.10);
border-radius: 999px;
border: 3px solid transparent;
background-clip: padding-box;
transition: background .2s;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255,107,53,.4);
background-clip: padding-box;
border: 3px solid transparent;
}
/* -------- 12. 选中文本 -------- */
::selection { background: rgba(255,107,53,.22); color: var(--ink); }
::-moz-selection { background: rgba(255,107,53,.22); color: var(--ink); }
/* -------- 13. img 加载占位 -------- */
img:not([src]), img[src=""], img.img-loading {
background: linear-gradient(110deg, #f0f0ee 8%, #e0e0dc 18%, #f0f0ee 33%);
background-size: 200% 100%;
animation: img-shimmer 1.5s linear infinite;
border-radius: inherit;
}
@keyframes img-shimmer {
0% { background-position: -200% 0 }
100% { background-position: 200% 0 }
}
/* -------- 14. h1/h2/h3 字距优化 -------- */
h1, h2, h3, h4 {
letter-spacing: -.015em;
font-feature-settings: 'palt' 1, 'kern' 1, 'cv11' 1, 'ss01' 1;
}
h1 { letter-spacing: -.025em; }
h2 { letter-spacing: -.02em; }
/* -------- 15. 数字字体（统计数字 / 价格） -------- */
.num, [data-num], .text-num, .credits, .price {
font-feature-settings: 'tnum' 1, 'lnum' 1;
letter-spacing: -.01em;
}
/* -------- 16. 全局 disabled 样式统一 -------- */
button:disabled, .btn:disabled, input:disabled, select:disabled, textarea:disabled {
opacity: .55;
cursor: not-allowed !important;
filter: saturate(.7);
}
/* -------- 17. 链接 hover 颜色过渡 -------- */
a, button {
transition: color .18s, background-color .18s, border-color .18s, opacity .18s;
}
/* -------- 18. 头像 / 圆形元素抗锯齿 -------- */
[class*="rounded-full"], .avatar, .hero-greet-avatar {
transform: translateZ(0);
-webkit-font-smoothing: antialiased;
}
/* -------- 19. 文本不可选区域提示 -------- */
button, .btn, .chip, .nav-item, label {
user-select: none;
-webkit-user-select: none;
}
/* -------- 20. 表格行 hover -------- */
.tbl tbody tr {
transition: background-color .15s;
}
.tbl tbody tr:hover {
background: rgba(255,107,53,.025);
}
/* -------- 21. 加载态骨架屏 -------- */
.skeleton {
background: linear-gradient(110deg, #f0f0ee 8%, #e8e8e4 18%, #f0f0ee 33%);
background-size: 200% 100%;
animation: img-shimmer 1.5s linear infinite;
border-radius: 8px;
}
/* -------- 22. 阴影系统升级（更柔） -------- */
.shadow-card {
box-shadow:
0 1px 3px rgba(20,20,40,.04),
0 4px 12px rgba(20,20,40,.04),
0 8px 28px rgba(20,20,40,.04);
}
.shadow-pop {
box-shadow:
0 2px 6px rgba(20,20,40,.06),
0 8px 24px rgba(20,20,40,.06),
0 24px 48px rgba(20,20,40,.06);
}
/* -------- 23. badge 数字徽标统一 -------- */
.badge {
font-feature-settings: 'tnum' 1;
font-weight: 800;
letter-spacing: -.02em;
min-width: 18px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 1px 6px;
font-size: 10px;
line-height: 1.2;
}
/* -------- 24. tooltip-ish title attr 视觉提示 -------- */
[title]:not([title=""]):not(input):not(textarea) {
cursor: help;
}
button[title], a[title] { cursor: pointer; }
/* -------- 25. emoji 字体微调（在 mac/windows 都好看） -------- */
.emoji, [data-emoji] {
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
font-style: normal;
font-weight: 400;
line-height: 1;
}
/* -------- 26. 全局过渡变量 -------- */
:root {
--ease-out: cubic-bezier(.2,.8,.2,1);
--ease-spring: cubic-bezier(.2,1.4,.4,1);
--shadow-sm: 0 1px 2px rgba(20,20,40,.05), 0 2px 4px rgba(20,20,40,.04);
--shadow-md: 0 4px 12px rgba(20,20,40,.06), 0 12px 28px rgba(20,20,40,.06);
--shadow-lg: 0 8px 24px rgba(20,20,40,.08), 0 24px 48px rgba(20,20,40,.08);
--shadow-xl: 0 16px 40px rgba(20,20,40,.10), 0 40px 80px rgba(20,20,40,.10);
}
/* -------- 27. 卡片背景纸感（细微纹理） -------- */
.card-paper {
background:
linear-gradient(135deg, rgba(255,255,255,.92), rgba(252,250,247,.92)),
radial-gradient(at 12% 10%, rgba(255,201,60,.04), transparent 50%);
border: 1px solid rgba(20,20,40,.06);
}
/* -------- 28. 主按钮渐变更细致 -------- */
.btn-primary {
background: linear-gradient(135deg, #FF6B35 0%, #FF9F43 100%);
box-shadow:
0 4px 12px rgba(255,107,53,.28),
0 1px 0 rgba(255,255,255,.25) inset,
0 -1px 0 rgba(0,0,0,.08) inset;
border: 0;
color: #fff;
font-weight: 700;
letter-spacing: .01em;
}
.btn-primary:not(:disabled):hover {
box-shadow:
0 8px 20px rgba(255,107,53,.36),
0 1px 0 rgba(255,255,255,.3) inset;
filter: brightness(1.04);
}
/* -------- 29. 数字加大字号时的 antialiasing -------- */
.big-num, .text-num-lg, [class*="text-[2"], [class*="text-[3"], [class*="text-[4"] {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'tnum' 1, 'ss01' 1, 'cv11' 1;
}
/* -------- 30. 渐变文字防裁剪 -------- */
[class*="bg-clip-text"], .gradient-text {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
padding: 0 .04em; /* 防斜体被裁切 */
}
/* -------- 31. nav-item active 指示条 -------- */
.adm-nav-item.active::before, .nav-item.active::before {
content: '';
position: absolute; left: -2px; top: 25%; bottom: 25%;
width: 3px;
background: linear-gradient(180deg, #FF6B35, #FF9F43);
border-radius: 0 3px 3px 0;
box-shadow: 0 0 8px rgba(255,107,53,.4);
}
/* -------- 32. 表单 label 字距 -------- */
.fld-label, label.fld-label {
letter-spacing: .01em;
margin-bottom: 6px;
display: block;
font-size: 12px;
font-weight: 600;
color: var(--ink-2);
}
.fld { margin-bottom: 14px; }
.fld-hint {
font-size: 11px;
color: var(--ink-4);
margin-top: 4px;
line-height: 1.5;
}
/* -------- 33. code 元素美化 -------- */
code, kbd {
font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
font-size: .92em;
background: rgba(20,20,40,.04);
padding: 1.5px 6px;
border-radius: 4px;
border: 1px solid rgba(20,20,40,.06);
color: #C2410C;
font-feature-settings: 'liga' 0;
}
/* -------- 34. blockquote 美化 -------- */
blockquote {
border-left: 3px solid #FF9F43;
padding-left: 14px;
color: var(--ink-2);
font-style: italic;
margin: 14px 0;
}
/* -------- 35. 文字平滑 -------- */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* -------- 36. 图片防右键保存（轻度） -------- */
.no-drag {
-webkit-user-drag: none;
user-drag: none;
pointer-events: auto;
}
/* -------- 37. 容器最大宽度统一 -------- */
.container-narrow { max-width: 720px; margin: 0 auto; }
.container-mid { max-width: 1100px; margin: 0 auto; }
.container-wide { max-width: 1440px; margin: 0 auto; }
/* -------- 38. dot 点指示器（用于 step / status） -------- */
.dot-indicator {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
vertical-align: middle;
}
/* -------- 39. 状态点带光晕 -------- */
.dot-online {
position: relative;
width: 8px; height: 8px;
border-radius: 50%;
background: #20C997;
box-shadow: 0 0 0 2px rgba(32,201,151,.2);
}
.dot-online::after {
content: '';
position: absolute; inset: -3px;
border-radius: 50%;
background: rgba(32,201,151,.4);
animation: dot-online-pulse 1.6s ease-in-out infinite;
}
@keyframes dot-online-pulse {
0%, 100% { transform: scale(.8); opacity: .6 }
50% { transform: scale(1.4); opacity: 0 }
}
/* -------- 40. 渐变边框（高级感） -------- */
.gradient-border {
position: relative;
background: #fff;
}
.gradient-border::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, #FF6B35, #FFC93C);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* -------- 41. spin loader 美化 -------- */
.spin, .adm-spin-big {
border: 2.5px solid rgba(255,107,53,.15);
border-top-color: #FF6B35;
border-radius: 50%;
animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
.adm-spin-big {
width: 32px; height: 32px;
margin: 40px auto;
}
/* -------- 42. 文字阴影微调（标题更立体） -------- */
.hero-headline, h1.hero-headline {
text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 2px 8px rgba(20,20,40,.04);
}
/* -------- 43. table 头部更精致 -------- */
.tbl thead th {
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-3);
background: rgba(20,20,40,.02);
border-bottom: 1px solid var(--line-2);
padding: 12px 14px;
text-align: left;
}
.tbl tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--line-2);
font-size: 12.5px;
color: var(--ink-2);
}
.tbl tbody tr:last-child td { border-bottom: 0; }
/* -------- 44. checkbox / radio 美化 -------- */
input[type="checkbox"], input[type="radio"] {
accent-color: #FF6B35;
cursor: pointer;
width: 16px; height: 16px;
}
/* -------- 45. select 箭头美化 -------- */
select.inp {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
padding-right: 32px;
}
/* -------- 46. 段落行高 -------- */
p { line-height: 1.65; }
.text-tight { line-height: 1.3; }
.text-relaxed { line-height: 1.75; }
/* -------- 47. ul / ol 列表样式 -------- */
.prose ul, .prose ol { padding-left: 22px; line-height: 1.75; }
.prose li { margin-bottom: 4px; }
.prose li::marker { color: #FF9F43; font-weight: 700; }
/* -------- 48. divider 分割线渐变 -------- */
hr.gradient {
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(20,20,40,.12) 30%, rgba(20,20,40,.12) 70%, transparent);
margin: 18px 0;
}
/* -------- 49. 详情页折叠组件 -------- */
details summary {
cursor: pointer;
font-weight: 600;
padding: 8px 0;
list-style: none;
position: relative;
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
content: '▸';
display: inline-block;
margin-right: 8px;
transition: transform .2s;
color: var(--ink-3);
}
details[open] summary::before { transform: rotate(90deg); }
/* -------- 50. 全局 box-sizing 兜底 -------- */
*, *::before, *::after { box-sizing: border-box; }
/* -------- 51-60. 微动效集合 -------- */
.anim-fade-in { animation: fade-in .4s ease-out backwards; }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
.anim-slide-up { animation: slide-up .5s var(--ease-out) backwards; }
@keyframes slide-up { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: translateY(0) } }
.anim-slide-right { animation: slide-right .5s var(--ease-out) backwards; }
@keyframes slide-right { from { opacity: 0; transform: translateX(-12px) } to { opacity: 1; transform: translateX(0) } }
.anim-pop { animation: anim-pop .4s var(--ease-spring) backwards; }
@keyframes anim-pop { from { opacity: 0; transform: scale(.9) } to { opacity: 1; transform: scale(1) } }
.anim-delay-1 { animation-delay: .08s }
.anim-delay-2 { animation-delay: .16s }
.anim-delay-3 { animation-delay: .24s }
.anim-delay-4 { animation-delay: .32s }
.anim-delay-5 { animation-delay: .40s }
/* -------- 61. 文字截断 utility -------- */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* -------- 62. 玻璃面板进阶 -------- */
.glass-strong {
background: rgba(255,255,255,.85);
backdrop-filter: blur(28px) saturate(1.6);
-webkit-backdrop-filter: blur(28px) saturate(1.6);
border: 1px solid rgba(255,255,255,.6);
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
/* -------- 63. 卡片左侧色条（高亮分类） -------- */
.card-accent-left {
position: relative;
}
.card-accent-left::before {
content: '';
position: absolute; left: 0; top: 14%; bottom: 14%;
width: 3px;
background: var(--accent, #FF6B35);
border-radius: 0 3px 3px 0;
}
/* -------- 64. button group 段落 -------- */
.btn-group {
display: inline-flex;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--line);
background: #fff;
}
.btn-group > button {
border: 0;
background: transparent;
padding: 8px 14px;
font-size: 12.5px;
cursor: pointer;
border-right: 1px solid var(--line-2);
color: var(--ink-2);
transition: background .15s;
}
.btn-group > button:last-child { border-right: 0; }
.btn-group > button:hover { background: rgba(20,20,40,.04); }
.btn-group > button.on {
background: linear-gradient(135deg, #FFF1ED, #FFEAD8);
color: #C2410C;
font-weight: 700;
}
/* -------- 65. 价格组件优化 -------- */
.price-display {
display: inline-flex;
align-items: baseline;
gap: 2px;
font-feature-settings: 'tnum' 1;
}
.price-currency { font-size: .7em; font-weight: 700; color: var(--ink-3); }
.price-int { font-weight: 800; letter-spacing: -.02em; }
.price-cent { font-size: .65em; font-weight: 700; opacity: .7; }
.price-orig {
text-decoration: line-through;
text-decoration-color: rgba(255,107,53,.55);
color: var(--ink-4);
font-size: .85em;
margin-left: 6px;
}
/* -------- 66. 卡片标题 + meta 行模板 -------- */
.card-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 10px;
}
.card-title {
font-size: 15px; font-weight: 700;
color: var(--ink); letter-spacing: -.005em;
}
.card-meta {
font-size: 11px; color: var(--ink-3);
letter-spacing: .02em;
}
/* -------- 67. 节标题样式（小型 caption） -------- */
.section-caption {
font-size: 10.5px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 6px;
}
/* -------- 68. 状态条 progress -------- */
.progress-track {
height: 6px;
background: rgba(20,20,40,.06);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #FF6B35, #FFC93C);
border-radius: inherit;
transition: width .5s var(--ease-out);
box-shadow: 0 0 8px rgba(255,107,53,.4);
}
/* -------- 69. 空状态美化 -------- */
.empty-state {
text-align: center;
padding: 40px 20px;
color: var(--ink-3);
}
.empty-state-icon {
font-size: 42px;
margin-bottom: 10px;
opacity: .55;
filter: grayscale(.3);
}
.empty-state-title {
font-size: 14px; font-weight: 700;
color: var(--ink-2); margin-bottom: 4px;
}
.empty-state-desc {
font-size: 11.5px; color: var(--ink-3);
line-height: 1.6; max-width: 320px; margin: 0 auto;
}
/* -------- 70. 通用 stat 数字卡 -------- */
.stat-card {
background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,247,237,.85));
border: 1px solid rgba(255,159,67,.16);
border-radius: 14px;
padding: 16px;
transition: all .25s var(--ease-out);
}
.stat-card:hover {
border-color: rgba(255,159,67,.32);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(255,107,53,.12);
}
.stat-label {
font-size: 11px; font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 4px;
}
.stat-value {
font-size: 28px; font-weight: 800;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
background: linear-gradient(135deg, #FF6B35, #FF9F43);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.1;
}
.stat-trend {
font-size: 11px; font-weight: 600;
margin-top: 4px;
}
.stat-trend.up { color: #16A34A; }
.stat-trend.down { color: #DC2626; }
/* -------- 71. 隔离 hover 防止抖动 -------- */
button, a, .card, .chip, .btn {
-webkit-tap-highlight-color: transparent;
}
/* -------- 72. modal close 按钮统一 -------- */
.modal-close {
position: absolute;
top: 14px; right: 14px;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(20,20,40,.06);
border: 0;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--ink-3);
transition: all .18s;
}
.modal-close:hover {
background: rgba(20,20,40,.1);
color: var(--ink);
transform: rotate(90deg);
}
/* -------- 73. 加载点 dot -------- */
.loading-dots::after {
content: '...';
animation: loading-dots-anim 1.4s steps(4, end) infinite;
}
@keyframes loading-dots-anim {
0%, 20% { content: '' }
40% { content: '.' }
60% { content: '..' }
80%, 100% { content: '...' }
}
/* -------- 74. 数据可视化条形图 -------- */
.bar-chart-row {
display: flex; align-items: center;
gap: 10px; padding: 6px 0;
font-size: 12px;
}
.bar-chart-label {
flex-shrink: 0; width: 80px;
color: var(--ink-3);
}
.bar-chart-bar {
flex: 1;
height: 8px;
background: rgba(20,20,40,.06);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.bar-chart-fill {
height: 100%;
background: linear-gradient(90deg, #FF6B35, #FFC93C);
border-radius: inherit;
transition: width .8s var(--ease-out);
}
.bar-chart-value {
font-feature-settings: 'tnum' 1;
font-weight: 700;
color: var(--ink);
min-width: 32px; text-align: right;
}
/* -------- 75. 卡片 ribbon 角标 -------- */
.ribbon {
position: absolute;
top: 12px; right: -8px;
background: linear-gradient(135deg, #FF6B35, #FF9F43);
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
padding: 4px 12px;
border-radius: 4px 0 0 4px;
box-shadow: 0 4px 10px rgba(255,107,53,.35);
}
.ribbon::after {
content: '';
position: absolute;
bottom: -5px; right: 0;
border-top: 5px solid #C2410C;
border-right: 8px solid transparent;
}
/* -------- 76-85. 印刷级排版细节 -------- */
small, .small { font-size: 11.5px; color: var(--ink-3); }
.text-overline {
font-size: 10.5px; font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.text-label {
font-size: 11px; font-weight: 700;
letter-spacing: .04em;
color: var(--ink-3);
}
.text-headline { font-size: 32px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.text-display { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.text-title { font-size: 18px; font-weight: 700; letter-spacing: -.012em; }
.text-body { font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.text-caption { font-size: 12px; color: var(--ink-3); }
.font-mono { font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; }
/* -------- 86. 表单分节 -------- */
.form-section {
border-top: 1px dashed var(--line-2);
padding-top: 18px;
margin-top: 18px;
}
.form-section-title {
font-size: 13px; font-weight: 700;
color: var(--ink-2);
margin-bottom: 12px;
letter-spacing: -.005em;
}
/* -------- 87. tag 颜色变体 -------- */
.tag-success { background: rgba(32,201,151,.12); color: #14B886; border: 1px solid rgba(32,201,151,.22); }
.tag-warning { background: rgba(255,159,67,.12); color: #C2410C; border: 1px solid rgba(255,159,67,.22); }
.tag-danger { background: rgba(255,68,68,.10); color: #DC2626; border: 1px solid rgba(255,68,68,.20); }
.tag-info { background: rgba(76,110,245,.10); color: #4C6EF5; border: 1px solid rgba(76,110,245,.20); }
.tag-purple { background: rgba(123,97,255,.10); color: #7B61FF; border: 1px solid rgba(123,97,255,.20); }
.tag-gray { background: rgba(20,20,40,.05); color: var(--ink-3); border: 1px solid rgba(20,20,40,.08); }
.tag {
display: inline-flex; align-items: center;
padding: 2px 8px;
border-radius: 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .02em;
}
/* -------- 88. divider with text -------- */
.divider-with-text {
display: flex; align-items: center; gap: 12px;
color: var(--ink-3); font-size: 11px; font-weight: 600;
margin: 18px 0;
}
.divider-with-text::before,
.divider-with-text::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
/* -------- 89. avatar 组件 -------- */
.avatar {
display: inline-flex;
align-items: center; justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #FFC93C, #FF9F43);
color: #fff;
font-weight: 800;
letter-spacing: -.02em;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(255,159,67,.25);
}
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-md { width: 32px; height: 32px; font-size: 13px; }
.avatar-lg { width: 44px; height: 44px; font-size: 17px; }
.avatar-xl { width: 64px; height: 64px; font-size: 24px; }
/* -------- 90. icon-button 圆形按钮 -------- */
.icon-btn {
width: 36px; height: 36px;
border-radius: 10px;
border: 1px solid var(--line);
background: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--ink-3);
transition: all .18s;
}
.icon-btn:hover {
border-color: rgba(255,107,53,.3);
color: #FF6B35;
background: #FFF8F2;
transform: translateY(-1px);
}
/* -------- 91. card-grid 自适应 -------- */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
.auto-grid-lg {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 18px;
}
/* -------- 92. fade overlay (图片底部渐隐) -------- */
.fade-overlay-bottom {
position: relative;
}
.fade-overlay-bottom::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
height: 80px;
background: linear-gradient(180deg, transparent, rgba(0,0,0,.35));
pointer-events: none;
border-radius: inherit;
}
/* -------- 93. 旋转图标动画 -------- */
.rotate-180 { transform: rotate(180deg); transition: transform .25s; }
.rotate-90 { transform: rotate(90deg); transition: transform .25s; }
.rotate-45 { transform: rotate(45deg); transition: transform .25s; }
/* -------- 94. 内联 spinner -------- */
.inline-spin {
display: inline-block;
width: 12px; height: 12px;
border: 2px solid rgba(255,107,53,.2);
border-top-color: #FF6B35;
border-radius: 50%;
animation: spin .8s linear infinite;
vertical-align: middle;
}
/* -------- 95. card hover 柔光 -------- */
.card-hover-glow {
position: relative;
overflow: hidden;
}
.card-hover-glow::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(800px circle at var(--mx, 50%) var(--my, 50%), rgba(255,107,53,.06), transparent 40%);
opacity: 0;
pointer-events: none;
transition: opacity .3s;
}
.card-hover-glow:hover::after { opacity: 1; }
/* -------- 96. modal 滚动指示 -------- */
.modal-card { scrollbar-gutter: stable; }
/* -------- 97. 文字 underline 微调 -------- */
.underline-hover {
background-image: linear-gradient(currentColor, currentColor);
background-size: 0 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size .3s var(--ease-out);
}
.underline-hover:hover { background-size: 100% 1px; }
/* -------- 98. select / textarea 默认尺寸 -------- */
textarea.inp { min-height: 80px; resize: vertical; }
textarea.inp-sm { min-height: 56px; }
/* -------- 99. 视觉对齐辅助 -------- */
.balance-text { text-wrap: balance; }
.pretty-text { text-wrap: pretty; }
/* -------- 100. 整体动效尊重 reduce-motion -------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.hero-greet-wave, .hero-greet-name { animation: none !important; }
}
/* -------- 101. 打印样式 -------- */
@media print {
.sidebar, .m-topbar, .user-corner, footer, button { display: none !important; }
body { background: #fff; }
.card { break-inside: avoid; }
}
/* -------- 102. 锚点滚动偏移（sticky header） -------- */
:target {
scroll-margin-top: 80px;
}
/* -------- 103. 提示文字微调 -------- */
.help-text {
font-size: 11px;
color: var(--ink-4);
font-style: italic;
display: block;
margin-top: 4px;
line-height: 1.55;
}
/* -------- 104. dark-bg 上的文字反转 -------- */
.on-dark, [data-theme="dark"] {
color: rgba(255,255,255,.92);
}
.on-dark .text-secondary, [data-theme="dark"] .text-secondary {
color: rgba(255,255,255,.6);
}
/* -------- 105. 视觉节奏：垂直间距系统 -------- */
.stack-xs > * + * { margin-top: 4px; }
.stack-sm > * + * { margin-top: 8px; }
.stack > * + * { margin-top: 14px; }
.stack-lg > * + * { margin-top: 22px; }
.stack-xl > * + * { margin-top: 32px; }
/* v1.5.14.31: 任务进行中 nav 徽标脉动 */
@keyframes nav-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,94,98,.7); }
70% { box-shadow: 0 0 0 6px rgba(255,94,98,0); }
100% { box-shadow: 0 0 0 0 rgba(255,94,98,0); }
}
.nav-badge-running { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 10px; }
/* ============================================================================
v1.5.14.79.23 · Apple-style 首页精修
----------------------------------------------------------------------------
只动两个事:① 字体栈优先 SF Pro / 苹方 ② 卡片去掉"AI 化"色块/阴影/动效
保留所有现有元素 + 颜色 + 文案 + 布局
============================================================================ */
/* === ① 字体栈: Apple-first === */
html, body {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-feature-settings: 'ss01', 'ss03', 'cv11', 'palt' 1, 'kern' 1;
letter-spacing: -.003em;
}
/* === ② Hero headline: Apple-style tight tracking === */
.hero-headline {
font-weight: 700 !important; /* Apple用 600-700, 不上 800 */
letter-spacing: -.04em !important; /* SF Pro Display 标志性紧字距 */
line-height: 1.06 !important;
font-feature-settings: 'ss01', 'cv11';
}
/* "呼吸" 取消彩虹 shimmer, 改为单色 brand-1 加细微下划装饰 */
.hero-shimmer {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: initial !important;
color: var(--brand-1) !important;
animation: none !important;
font-weight: 700 !important;
position: relative;
display: inline-block;
padding: 0 .04em;
}
.hero-shimmer::after {
content: '';
position: absolute;
left: 6%; right: 6%; bottom: 4px;
height: 8px;
background: var(--brand-1);
opacity: .14;
z-index: -1;
border-radius: 2px;
}
/* === ③ shortcut-card (功能直达卡片): 去掉色块 + 阴影, 边框收紧 === */
.shortcut-card {
border-radius: 18px !important; /* Apple 卡片标准 18-20px */
padding: 22px 22px !important;
background: #FFFFFF !important;
border: 1px solid rgba(0,0,0,.06) !important;
box-shadow: none !important;
transition: transform .25s cubic-bezier(.2,.8,.2,1),
border-color .2s, box-shadow .25s !important;
min-height: 156px !important;
}
.shortcut-card::before,
.shortcut-card::after { display: none !important; } /* 干掉粉色radial渐变 */
.shortcut-card:hover {
transform: translateY(-2px) !important;
border-color: rgba(0,0,0,.12) !important;
box-shadow: 0 8px 24px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.03) !important;
}
.shortcut-card:hover .shortcut-icon {
transform: scale(1.04) !important; /* 不再旋转 */
}
.shortcut-card:hover .shortcut-arrow {
background: rgba(0,0,0,.06) !important;
color: var(--ink) !important;
transform: none !important;
}
.shortcut-icon {
border-radius: 11px !important;
box-shadow: 0 4px 10px var(--sc-shadow, rgba(0,0,0,.08)),
inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.shortcut-title {
font-weight: 600 !important;
letter-spacing: -.012em !important;
}
.shortcut-desc {
font-weight: 400 !important;
color: var(--ink-3) !important;
}
/* === ④ feat-block (为什么选择镜画 4 卡): 同 Apple 精简 === */
.feat-block {
border-radius: 18px !important;
padding: 22px !important;
background: #FFFFFF !important;
border: 1px solid rgba(0,0,0,.06) !important;
box-shadow: none !important;
transition: transform .25s, border-color .2s, box-shadow .25s !important;
}
.feat-block::before { display: none !important; } /* 干掉角落 radial */
.feat-block:hover {
transform: translateY(-2px) !important;
border-color: rgba(0,0,0,.12) !important;
box-shadow: 0 8px 24px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.03) !important;
}
.feat-block:hover .feat-block-icon {
transform: scale(1.04) !important;
}
.feat-block-icon {
border-radius: 11px !important;
box-shadow: 0 4px 10px var(--fb-shadow, rgba(0,0,0,.08)),
inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.feat-block h3 {
font-weight: 600 !important;
letter-spacing: -.012em !important;
}
.feat-block p {
font-weight: 400 !important;
line-height: 1.65 !important;
}
/* === ⑤ brand-chip + section-tag: 苹果 capsule 风格 === */
.brand-chip {
background: rgba(255,255,255,.85) !important;
border: 1px solid rgba(0,0,0,.08) !important;
box-shadow: none !important;
font-weight: 500 !important;
letter-spacing: -.005em !important;
}
.brand-chip:hover {
transform: none !important;
box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}
.section-tag {
background: rgba(255,255,255,.7) !important;
border: 1px solid rgba(0,0,0,.06) !important;
font-weight: 500 !important;
letter-spacing: -.003em !important;
text-transform: none !important;
}
/* === ⑥ Section 标题: Apple 紧字距 === */
.text-\[28px\].font-bold, .text-\[26px\].font-bold {
font-weight: 700 !important;
letter-spacing: -.022em !important;
}
h1, h2, h3 {
font-feature-settings: 'ss01', 'cv11', 'palt' 1, 'kern' 1;
}
/* === ⑦ Hero 装饰 orb 弱化 (太色) === */
.deco-orb-1, .deco-orb-2 {
opacity: .55 !important;
filter: blur(8px);
}
/* === ⑧ "立即开始" 按钮: 实色, 不带光晕渐变背景 === */
.btn-primary {
letter-spacing: -.005em !important;
font-weight: 500 !important;
}
/* === ⑨ HOW IT WORKS 卡片背景去 backdrop-filter === */
.flowing-bg {
border: 1px solid rgba(0,0,0,.06) !important;
background: #FAFAF8 !important;
}
.flowing-bg .card {
background: #fff !important;
backdrop-filter: none !important;
border: 1px solid rgba(0,0,0,.06) !important;
border-radius: 16px !important;
box-shadow: none !important;
}
.flowing-bg .big-num {
background: none !important;
-webkit-text-fill-color: initial !important;
color: var(--ink-3) !important;
font-weight: 700 !important;
font-variant-numeric: tabular-nums;
letter-spacing: -.04em !important;
}
/* === ⑩ Hero "1205+ 商家在用" 等小字精修 === */
.hero-rise-3 b,
.hero-rise-3 .brand-text {
font-weight: 600 !important;
}
/* 暗模式下的微调 (镜画整站是 light, 此处只是兜底) */
@media (prefers-color-scheme: dark) {
/* 保持现状 — 站点本身是 light theme */
}