/* seedance_2_0.html style block 1 */
:root { --bg-color:#ffffff; --text-color:#111827; --text-secondary:#64748b; --border-color:rgba(15,23,42,0.1); --header-height:78px; }
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; min-height:100%; overflow-x:hidden; }
body { font-family:"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:linear-gradient(180deg, #ffffff 0%, #f8fbff 58%, #ffffff 100%); color:var(--text-color); line-height:1.6; }
a { color:inherit; }
.navbar { position:fixed; top:0; left:0; right:0; height:var(--header-height); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:space-between; padding:0 40px; z-index:1000; }
.nav-left { display:flex; align-items:center; gap:40px; }
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:#111827; font-size:18px; font-weight:760; letter-spacing:0; }
.nav-brand img { width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(239, 68, 68, 0.18)); }
.nav-links { display:flex; align-items:center; gap:34px; }
.nav-link { text-decoration:none; color:#64748b; font-size:14px; font-weight:620; transition:color 0.2s; }
.nav-link:hover, .nav-link.active { color:#111827; }
.nav-links > .nav-link { display:inline-flex; align-items:center; min-height:44px; }
.nav-dropdown { position:relative; display:flex; align-items:center; }
.nav-dropdown-trigger { display:inline-flex; align-items:center; gap:6px; min-height:44px; }
.nav-dropdown-trigger::after { content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-top:-3px; opacity:0.7; transition:transform 0.2s ease; }
.nav-dropdown:hover .nav-dropdown-trigger::after { transform:rotate(225deg); margin-top:3px; }
.nav-mega { position:absolute; top:calc(100% + 12px); left:50%; width:226px; padding:8px; border-radius:16px; background:rgba(255, 255, 255, 0.98); border:1px solid #e5e7eb; box-shadow:0 18px 44px rgba(15, 23, 42, 0.12); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); opacity:0; visibility:hidden; transform:translate(-50%, -8px); transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; pointer-events:none; z-index:1400; }
.nav-dropdown:hover .nav-mega { opacity:1; visibility:visible; transform:translate(-50%, 0); pointer-events:auto; }
.nav-dropdown:first-child .nav-mega { left:0; transform:translate(0, -8px); }
.nav-dropdown:first-child:hover .nav-mega { transform:translate(0, 0); }
.nav-mega::before { content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.nav-mega-grid { display:grid; grid-template-columns:1fr; gap:4px; }
.nav-mega-card { position:relative; display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 10px; border-radius:11px; color:#111827; text-decoration:none; background:#fff; border:1px solid transparent; overflow:hidden; transition:background 0.18s ease, border-color 0.18s ease; }
.nav-mega-card:hover { background:#f8fafc; border-color:#e2e8f0; transform:none; box-shadow:none; }
.nav-mega-icon { width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 28px; background:#f8fafc; color:var(--mega-accent, #111827); font-size:13px; font-weight:800; }
.nav-mega-copy { min-width:0; }
.nav-mega-title { display:flex; align-items:center; gap:8px; color:#111827; font-size:14px; font-weight:760; line-height:1.25; margin-bottom:0; }
.nav-mega-title span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-mega-badge, .nav-mega-desc, .nav-mega-tags { display:none; }
.model-mega { width:226px; }
.nav-actions { display:flex; align-items:center; gap:16px; }
.header-dropdown-style { position:relative; display:inline-block; }
.user-profile { display:flex; align-items:center; gap:10px; color:#111827; background:#fff; min-height:36px; padding:0 14px; border-radius:999px; font-size:13px; font-weight:680; border:1px solid #e5e7eb; box-shadow:0 10px 26px rgba(15, 23, 42, 0.08); text-decoration:none; transition:background 0.2s ease, border-color 0.2s ease; }
.user-profile:hover { background:#f8fafc; border-color:#dbe3ee; }
.user-avatar { width:26px; height:26px; border-radius:50%; background:#e2e8f0; color:#64748b; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex:0 0 26px; }
.header-user-menu { position:absolute; top:100%; right:0; width:240px; background:#fff; border-radius:12px; padding:16px; margin-top:10px; box-shadow:0 18px 48px rgba(15, 23, 42, 0.14); border:1px solid #eef2f7; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index:1200; color:#333; text-align:left; }
.header-dropdown-style:not(.not-logged-in):hover .header-user-menu { opacity:1; visibility:visible; transform:translateY(0); }
.popup-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid #eef2f7; }
.popup-avatar { width:40px; height:40px; background:#111827; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; flex:0 0 40px; }
.popup-info { flex:1; min-width:0; }
.popup-name { font-weight:800; font-size:15px; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.popup-email { font-size:11px; color:#64748b; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.popup-stats-single { margin-bottom:16px; }
.stat-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:13px; }
.stat-label { color:#64748b; }
.stat-value { font-weight:800; color:#111827; }
.stat-bar { height:6px; background:#f1f5f9; border-radius:999px; overflow:hidden; }
.stat-progress { height:100%; background:#111827; border-radius:999px; width:0%; }
.popup-menu { display:flex; flex-direction:column; gap:4px; }
.menu-item { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:8px; cursor:pointer; font-size:14px; color:#333; transition:background 0.2s; text-decoration:none; }
.menu-item:hover { background:#f8fafc; }
.menu-divider { height:1px; background:#eef2f7; margin:4px 0; }
.text-red { color:#dc2626 !important; }
.text-red svg { color:#dc2626 !important; }
.hero { padding:calc(var(--header-height) + 28px) 20px 12px; position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; left:50%; top:8px; width:min(980px, 86vw); height:320px; transform:translateX(-50%); background:radial-gradient(circle at 50% 36%, rgba(14, 165, 233, 0.13), transparent 56%); pointer-events:none; }
.hero-shell { max-width:1180px; margin:0 auto; display:block; }
.breadcrumb { position:relative; z-index:1; max-width:1180px; margin:0 auto 18px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:#64748b; font-size:13px; }
.breadcrumb a { color:#64748b; text-decoration:none; }
.breadcrumb a:hover { color:#111827; }
.breadcrumb span { color:#111827; font-weight:700; }
.hero-kicker { display:inline-flex; align-items:center; gap:8px; min-height:28px; padding:0 12px; border-radius:999px; background:#eef6ff; color:#0c4a6e; border:1px solid #d7ebff; font-size:12px; font-weight:800; margin-bottom:14px; box-shadow:0 10px 24px rgba(14, 165, 233, 0.08); }
.hero-kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:#ff5a3d; }
.hero-copy { position:relative; z-index:1; max-width:920px; margin:0 auto; text-align:center; }
.hero h1 { font-size:clamp(38px, 4.8vw, 66px); line-height:1.04; letter-spacing:0; font-weight:880; margin-bottom:16px; color:#0f172a; }
.hero-lead { max-width:820px; color:#526173; font-size:16px; line-height:1.66; font-weight:520; margin:0 auto 18px; }
.hero-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.primary-btn, .secondary-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px; border-radius:999px; font-size:14px; font-weight:800; text-decoration:none; transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.primary-btn { background:#111827; color:#fff; }
.primary-btn:hover { transform:translateY(-2px); background:#000; }
.secondary-btn { background:#fff; color:#111827; border:1px solid #e5e7eb; }
.secondary-btn:hover { transform:translateY(-2px); border-color:#cbd5e1; background:#f8fafc; }
.hero-links { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.hero-links a { display:inline-flex; align-items:center; min-height:30px; padding:0 11px; border-radius:999px; background:#f8fafc; color:#475569; border:1px solid #e2e8f0; text-decoration:none; font-size:12px; font-weight:700; }
.hero-panel { position:relative; display:flex; flex-direction:column; gap:18px; }
.hero-visual { display:none; position:relative; min-height:178px; border-radius:26px; background:linear-gradient(145deg, #0b0f19 0%, #151b2c 56%, #273044 100%); overflow:hidden; border:1px solid #e5e7eb; box-shadow:0 24px 70px rgba(15, 23, 42, 0.14); }
.hero-visual::before { content:"Seedance 2.0"; position:absolute; top:22px; left:22px; color:rgba(255,255,255,0.9); font-size:13px; font-weight:820; }
.video-frame { position:absolute; right:24px; top:22px; width:92px; aspect-ratio:9 / 16; border-radius:18px; background:linear-gradient(180deg, #f97316 0%, #facc15 42%, #111827 42.3%, #111827 100%); box-shadow:0 18px 38px rgba(0, 0, 0, 0.28); overflow:hidden; }
.video-frame::before { content:""; position:absolute; inset:16px 18px auto; height:58px; border-radius:13px 13px 5px 5px; background:linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%); box-shadow:0 10px 22px rgba(15, 23, 42, 0.22); }
.video-frame::after { content:"商品展示"; position:absolute; left:10px; right:10px; bottom:12px; height:24px; border-radius:9px; background:rgba(255,255,255,0.12); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; }
.motion-card { position:absolute; left:22px; right:142px; top:56px; padding:0; color:#fff; }
.motion-card h2 { font-size:21px; line-height:1.22; margin-bottom:9px; color:#fff; }
.motion-card p { font-size:12px; color:rgba(226,232,240,0.86); line-height:1.7; }
.metric-grid { position:absolute; left:22px; right:142px; bottom:18px; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.metric { padding:8px 8px; border-radius:12px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.12); }
.metric strong { display:block; font-size:14px; color:#fff; line-height:1; margin-bottom:5px; }
.metric span { display:block; font-size:10px; color:rgba(226,232,240,0.78); font-weight:700; }
.input-section { padding:4px 20px 52px; position:relative; z-index:2; }
.input-section .section-inner { max-width:1180px; }
.input-section .section-head { max-width:760px; margin:0 auto 18px; text-align:center; }
.chatbot-demo { width:100%; margin:0 auto; transform:none; }
.chatbot { display:flex; flex-direction:column; width:100%; background:rgba(255,255,255,0.92); border-radius:28px; overflow:visible; box-shadow:0 26px 80px rgba(15, 23, 42, 0.11); border:1px solid #dbe8f5; min-height:224px; pointer-events:auto; position:relative; z-index:10; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.input-row { display:flex; }
.input-area { flex:1; display:flex; flex-direction:column; padding:0; }
.text-input-container { flex:1; position:relative; }
.seedance-preview-strip { position:absolute; left:44px; bottom:18px; display:flex; align-items:center; gap:10px; max-width:320px; min-height:38px; }
.seedance-preview-strip.is-empty { display:none; }
.seedance-preview-item { position:relative; width:38px; height:38px; border-radius:12px; border:1px solid #dbe3ee; background:#fff; box-shadow:0 8px 20px rgba(15, 23, 42, 0.08); flex:0 0 38px; }
.seedance-preview-item img { width:100%; height:100%; object-fit:cover; display:block; }
.seedance-preview-remove { position:absolute; right:-7px; top:-7px; width:18px; height:18px; border-radius:50%; border:1px solid #fff; background:#111827; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1; cursor:pointer; box-shadow:0 5px 14px rgba(15, 23, 42, 0.2); padding:0; }
.seedance-preview-remove:hover { background:#ef4444; }
.seedance-preview-overflow { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border-radius:999px; border:1px solid #dbe3ee; background:#fff; color:#64748b; font-size:12px; font-weight:800; box-shadow:0 8px 20px rgba(15, 23, 42, 0.08); }
.text-input-container textarea { width:100%; height:100%; min-height:148px; background:transparent; border:none; border-radius:0; color:#374151; font-size:18px; line-height:1.6; font-weight:650; padding:44px 86px 18px 44px; resize:none; outline:none; font-family:inherit; }
.text-input-container textarea::placeholder { color:#7b8494; opacity:1; }
.landing-expand-btn { position:absolute; right:34px; top:36px; width:42px; height:42px; border-radius:15px; border:1px solid #dbe3ee; background:#f8fafc; color:#64748b; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.landing-expand-btn svg { width:20px; height:20px; }
.control-bar { display:flex; justify-content:space-between; align-items:center; padding:16px 34px 24px; gap:18px; flex-wrap:nowrap; }
.left-controls, .right-controls { display:flex; align-items:center; gap:9px; flex-wrap:nowrap; min-width:0; }
.left-controls { flex:1 1 auto; }
.right-controls { flex:0 0 auto; }
.upload-widget, .person-asset-trigger, .model-btn-trigger, .setting-tag, .prompt-generate-btn { position:relative; min-height:42px; display:flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(226, 232, 240, 0.72); background:rgba(255, 255, 255, 0.82); color:#374151; font-size:14px; font-weight:760; cursor:pointer; box-shadow:0 12px 28px rgba(15, 23, 42, 0.055); padding:0 15px; font-family:inherit; white-space:nowrap; }
.upload-widget[data-tooltip]::after, .person-asset-trigger[data-tooltip]::after, .setting-tag[data-tooltip]::after, .seedance-select[data-tooltip]::after, .prompt-generate-btn[data-tooltip]::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:rgba(17, 24, 39, 0.92); color:#fff; padding:6px 10px; border-radius:6px; font-size:12px; line-height:1.4; white-space:nowrap; box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); opacity:0; visibility:hidden; transition:opacity 0.2s ease; pointer-events:none; z-index:1600; min-width:max-content; }
.person-asset-trigger[data-tooltip]::after { bottom:calc(100% + 12px); left:0; transform:none; }
.upload-widget[data-tooltip]::after { left:0; transform:translateX(18px); }
.upload-widget[data-tooltip]:hover::after, .person-asset-trigger[data-tooltip]:hover::after, .setting-tag[data-tooltip]:hover::after, .seedance-select[data-tooltip]:hover::after, .prompt-generate-btn[data-tooltip]:hover::after { opacity:1; visibility:visible; }
.upload-widget:hover, .person-asset-trigger:hover { border-color:#cbd5e1; background:#fff; color:#111827; }
.seedance-select { appearance:none; -webkit-appearance:none; padding-right:34px; background-image:linear-gradient(45deg, transparent 50%, #9aa3b2 50%), linear-gradient(135deg, #9aa3b2 50%, transparent 50%); background-position:calc(100% - 18px) 18px, calc(100% - 12px) 18px; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
.fixed-model-pill { width:168px; cursor:pointer; justify-content:center; gap:7px; color:#273449; background:rgba(255, 255, 255, 0.76); opacity:1; }
.fixed-model-pill:disabled { color:#273449; opacity:1; cursor:pointer; }
.fixed-model-pill::after { display:none; }
.seedance-model-selector { position:relative; flex:0 0 auto; }
.seedance-model-selector .model-dropdown { position:absolute; left:0; bottom:calc(100% + 12px); min-width:330px; padding:10px; border-radius:16px; border:1px solid rgba(226, 232, 240, 0.95); background:rgba(255,255,255,0.98); box-shadow:0 24px 70px rgba(15, 23, 42, 0.18); opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none; z-index:1800; transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; }
.seedance-model-selector.is-open .model-dropdown { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.seedance-model-selector .model-content { display:grid; gap:8px; }
.seedance-model-selector .model-option { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid transparent; cursor:pointer; background:#fff; }
.seedance-model-selector .model-option:hover { border-color:#dbe3ee; background:#f8fafc; }
.seedance-model-selector .model-option.selected { border-color:#111827; background:#f8fafc; }
.seedance-model-selector .model-option.disabled { cursor:not-allowed; opacity:0.5; background:#f8fafc; }
.seedance-model-selector .model-option.disabled:hover { border-color:transparent; background:#f8fafc; }
.seedance-model-selector .model-option.disabled .model-name::after { content:""; display:none; }
.seedance-model-selector .model-checkbox { margin-top:3px; }
.seedance-model-selector .model-info { min-width:0; }
.seedance-model-selector .model-name { font-size:14px; font-weight:850; color:#111827; line-height:1.25; }
.seedance-model-selector .model-option[data-recommended="true"] .model-name { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.seedance-model-selector .model-option[data-recommended="true"] .model-name::after { content:"推荐使用"; display:inline-flex; align-items:center; height:18px; padding:0 7px 0 20px; border:1px solid rgba(253, 186, 116, 0.72); border-radius:999px; background:#fff7ed url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.7 4.3L18 9l-4.3 1.7L12 15l-1.7-4.3L6 9l4.3-1.7L12 3z'/%3E%3Cpath d='M19 14l.8 1.8L22 17l-2.2 1.2L19 20l-.8-1.8L16 17l2.2-1.2L19 14z'/%3E%3C/svg%3E") 6px center / 11px 11px no-repeat; color:#c2410c; font-size:10px; font-weight:780; line-height:16px; white-space:nowrap; }
.seedance-model-selector .model-description { margin-top:3px; font-size:12px; color:#64748b; line-height:1.5; }
.setting-wrap { position:relative; flex:0 0 auto; }
.setting-tag { width:220px; justify-content:center; }
.setting-tag::before { content:""; order:99; width:7px; height:7px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform:translateY(-2px) rotate(45deg); opacity:0.65; margin-left:6px; transition:transform 0.18s ease, opacity 0.18s ease; }
.setting-wrap.is-open .setting-tag { background:#fff; border-color:#cbd5e1; color:#111827; box-shadow:0 16px 34px rgba(15, 23, 42, 0.09); }
.setting-wrap.is-open .setting-tag::before { transform:translateY(2px) rotate(-135deg); opacity:0.95; }
.seedance-settings-popup { position:absolute; left:50%; bottom:calc(100% + 12px); width:360px; padding:20px; border-radius:18px; border:1px solid rgba(226, 232, 240, 0.95); background:rgba(255, 255, 255, 0.98); box-shadow:0 24px 70px rgba(15, 23, 42, 0.18); transform:translate(-50%, -10px); opacity:0; visibility:hidden; pointer-events:none; z-index:1800; transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; }
.setting-wrap.is-open .seedance-settings-popup { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 0); }
.settings-group { margin-bottom:24px; }
.settings-group:last-child { margin-bottom:0; }
.settings-label { color:#374151; font-size:17px; font-weight:850; line-height:1.2; margin-bottom:14px; }
.segmented-options { display:flex; align-items:center; gap:0; padding:8px; border-radius:18px; background:#f1f3f7; }
.setting-option { position:relative; flex:1; min-height:46px; border:0; border-radius:15px; background:transparent; color:#6b7280; font-size:15px; font-weight:850; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:inherit; transition:background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }
.setting-option:hover { color:#111827; }
.setting-option.is-active { background:#fff; color:#111827; box-shadow:0 12px 28px rgba(15, 23, 42, 0.08); }
.setting-option.is-disabled { color:#c6cbd5; cursor:not-allowed; background:transparent; box-shadow:none; }
.member-badge { display:inline-flex; align-items:center; justify-content:center; min-height:18px; padding:0 7px; border-radius:999px; background:#111827; color:#fff; font-size:10px; font-weight:850; line-height:1; }
.setting-option.is-disabled .member-badge { background:#cbd5e1; color:#64748b; }
.ratio-options { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.ratio-option { border:0; background:transparent; cursor:pointer; color:#6b7280; font-family:inherit; font-size:14px; font-weight:850; display:flex; flex-direction:column; align-items:center; gap:8px; min-height:72px; }
.ratio-shape { width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.ratio-shape::before { content:""; display:block; border:2px solid #d1d5db; border-radius:11px; background:#fff; transition:border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
.ratio-option[data-value="9:16"] .ratio-shape::before { width:17px; height:34px; }
.ratio-option[data-value="16:9"] .ratio-shape::before { width:42px; height:25px; }
.ratio-option[data-value="1:1"] .ratio-shape::before { width:32px; height:32px; }
.ratio-option:hover { color:#111827; }
.ratio-option.is-active { color:#111827; }
.ratio-option.is-active .ratio-shape::before { border-color:#111827; background:#f8fafc; box-shadow:0 8px 18px rgba(15, 23, 42, 0.08); }
#seedanceLanguage { width:124px; }
.prompt-generate-btn { width:112px; }
.upload-widget, .person-asset-trigger { width:44px; padding:0; flex:0 0 44px; font-size:22px; font-weight:500; }
.person-asset-trigger svg { width:18px; height:18px; stroke:currentColor; }
.person-asset-trigger.is-member-locked { border-color:rgba(203, 213, 225, 0.8); background:rgba(229, 231, 235, 0.82); color:#94a3b8; box-shadow:none; }
.person-asset-trigger.is-member-locked:hover { border-color:rgba(203, 213, 225, 0.95); background:rgba(229, 231, 235, 0.92); color:#64748b; }
.person-asset-trigger.is-selected { border-color:#111827; background:#111827; color:#fff; overflow:visible; }
.person-asset-trigger.is-selected::before { content:""; position:absolute; inset:4px; border-radius:999px; background-image:var(--person-asset-trigger-image); background-size:cover; background-position:center; }
.person-asset-trigger.is-selected svg { opacity:0; }
.person-asset-trigger.is-member-locked::before { display:none; }
.person-asset-trigger.is-member-locked svg { opacity:1; }
.person-asset-clear { position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:50%; border:1px solid #fff; background:#111827; color:#fff; display:none; align-items:center; justify-content:center; font-size:14px; line-height:1; cursor:pointer; z-index:3; box-shadow:0 5px 14px rgba(15, 23, 42, 0.2); padding:0; }
.person-asset-trigger.is-selected:hover .person-asset-clear { display:flex; }
.person-asset-clear:hover { background:#ef4444; }
.seedance-file-input { display:none; }
.upload-widget.has-images { border-style:solid; border-color:#111827; background:#111827; color:#fff; }
.upload-icon-box { width:18px; height:18px; display:flex; align-items:center; justify-content:center; }
.upload-icon-box svg { width:18px; height:18px; }
.setting-tag { gap:8px; }
.divider { color:#cbd5e1; }
.prompt-generate-btn { white-space:nowrap; }
.prompt-generate-btn.loading { cursor:wait; color:#94a3b8; background:#f8fafc; }
.credits-text { display:flex; align-items:center; gap:8px; color:#64748b; font-size:15px; font-weight:820; white-space:nowrap; }
.credits-price { color:#6b7280; }
.credits-price.is-discounted { text-decoration:line-through; text-decoration-thickness:2px; }
.credits-free-badge { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 14px; border-radius:999px; border:1px solid #fed7aa; background:#fff7ed; color:#c2410c; font-size:14px; font-weight:850; text-decoration:none; }
.generate-btn { width:50px; height:50px; border-radius:50%; background:#050505; color:#fff; border:2px solid rgba(255,255,255,0.72); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 12px 24px rgba(15, 23, 42, 0.24); flex:0 0 50px; }
.generate-btn svg { width:23px; height:23px; }
.seedance-inline-error { min-height:18px; color:#ef4444; font-size:12px; font-weight:700; padding:0 16px 14px; display:none; }
.seedance-inline-error.is-visible { display:block; }
.person-asset-modal { position:fixed; z-index:2200; display:none; background:transparent; padding:0; pointer-events:none; }
.person-asset-modal.is-active { display:block; }
.person-asset-dialog { width:100%; height:min(404px, calc(100vh - 120px)); background:#fff; border-radius:18px; box-shadow:0 24px 70px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(17, 17, 17, 0.06); overflow:hidden; display:flex; flex-direction:column; border:1px solid rgba(17, 17, 17, 0.1); pointer-events:auto; }
.person-asset-header { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid #ededed; color:#111; font-size:15px; font-weight:800; background:#fff; }
.person-asset-title { display:flex; align-items:center; gap:10px; }
.person-asset-title svg { width:20px; height:20px; }
.person-asset-close { width:36px; height:36px; border:1px solid transparent; border-radius:50%; background:transparent; color:#525252; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.person-asset-close:hover { background:#f6f6f6; border-color:#e5e5e5; color:#000; }
.person-asset-close svg { width:18px; height:18px; }
.person-asset-body { flex:1; min-height:0; display:grid; grid-template-columns:minmax(220px, 26%) 1fr; background:#fff; }
.person-asset-upload-panel { border-right:1px solid #ededed; padding:18px; display:flex; background:#fbfbfb; }
.person-asset-upload-card { position:relative; flex:1; border:1.5px dashed #d6d6d6; border-radius:16px; background:#fff; color:#111; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; cursor:pointer; overflow:hidden; font-family:inherit; }
.person-asset-upload-card:hover { border-color:#111; background:#fafafa; box-shadow:0 16px 36px rgba(0, 0, 0, 0.08); }
.person-asset-upload-card.is-loading { pointer-events:none; opacity:0.72; }
.person-asset-upload-card.has-preview { border-style:solid; border-color:#111; background:#111; }
.person-asset-upload-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; background:#111; }
.person-asset-upload-card.has-preview .person-asset-upload-preview { display:block; }
.person-asset-upload-card.has-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.76) 100%); pointer-events:none; }
.person-asset-upload-icon { position:relative; z-index:1; width:48px; height:48px; border-radius:14px; background:#111; color:#fff; display:flex; align-items:center; justify-content:center; }
.person-asset-upload-icon svg { width:23px; height:23px; }
.person-asset-upload-title { position:relative; z-index:1; font-size:16px; font-weight:850; line-height:1.2; }
.person-asset-upload-sub { position:relative; z-index:1; font-size:12px; color:#737373; }
.person-asset-upload-card.has-preview .person-asset-upload-title, .person-asset-upload-card.has-preview .person-asset-upload-sub { color:#fff; text-shadow:0 1px 8px rgba(0, 0, 0, 0.36); }
.person-asset-list-panel { position:relative; min-width:0; display:flex; flex-direction:column; }
.person-asset-grid { flex:1; min-height:0; overflow:auto; padding:18px; display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); align-content:start; gap:12px; }
.person-asset-item { position:relative; aspect-ratio:1 / 1; border:1px solid #e5e5e5; border-radius:12px; overflow:hidden; background:#f7f7f7; cursor:pointer; }
.person-asset-item:hover, .person-asset-item.is-selected { border-color:#111; box-shadow:0 10px 24px rgba(0, 0, 0, 0.1); }
.person-asset-item.is-pending { cursor:wait; border-color:#111; }
.person-asset-item.is-pending::after { content:"处理中..."; position:absolute; inset:auto 8px 8px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(17, 17, 17, 0.78); color:#fff; font-size:12px; font-weight:700; backdrop-filter:blur(8px); }
.person-asset-item img { width:100%; height:100%; object-fit:cover; display:block; }
.person-asset-delete { position:absolute; top:8px; right:8px; width:26px; height:26px; border:none; border-radius:50%; background:rgba(0, 0, 0, 0.72); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; }
.person-asset-item:hover .person-asset-delete { opacity:1; }
.person-asset-delete:hover { background:#111; }
.person-asset-empty, .person-asset-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#8a8a8a; font-size:16px; font-weight:700; pointer-events:none; }
.section { padding:62px 20px; }
.section-inner { max-width:1180px; margin:0 auto; }
.section-head { max-width:780px; margin:0 auto 24px; text-align:center; }
.section-eyebrow { display:inline-flex; align-items:center; min-height:28px; padding:0 12px; border-radius:999px; background:#eef6ff; color:#0c4a6e; border:1px solid #d7ebff; font-size:12px; font-weight:800; margin-bottom:12px; }
.section h2, .input-section h2 { font-size:32px; line-height:1.18; margin-bottom:10px; letter-spacing:0; color:#111827; }
.section-head p { color:#64748b; font-size:15px; line-height:1.8; }
.card-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.info-card { border:1px solid #e2e8f0; border-radius:18px; padding:24px; background:#fff; box-shadow:0 16px 42px rgba(15, 23, 42, 0.055); transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.info-card:hover { transform:translateY(-3px); border-color:#cfe3f7; box-shadow:0 22px 54px rgba(15, 23, 42, 0.08); }
.info-card h3 { font-size:18px; margin-bottom:9px; color:#111827; }
.info-card p { color:#64748b; font-size:14px; line-height:1.8; }
.model-intro { padding:74px 20px; background:linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%); color:#111827; position:relative; overflow:hidden; border-top:1px solid #edf2f7; border-bottom:1px solid #edf2f7; }
.model-intro::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14, 165, 233, 0.08), transparent 32%, rgba(249, 115, 22, 0.07)); pointer-events:none; }
.model-intro .section-inner { position:relative; z-index:1; }
.model-intro-head { max-width:980px; margin:0 auto 34px; text-align:center; }
.model-intro h2 { color:#111827; font-size:clamp(34px, 4.6vw, 58px); line-height:1.08; letter-spacing:0; margin-bottom:18px; }
.model-intro h2 span { color:#0ea5e9; }
.model-intro-lead { color:#526173; font-size:17px; line-height:1.9; font-weight:650; }
.model-intro-lead strong { color:#0c4a6e; }
.model-capabilities { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.capability-card { border:1px solid #dbe8f5; border-radius:18px; padding:22px; background:rgba(255,255,255,0.86); box-shadow:0 16px 42px rgba(15, 23, 42, 0.055); }
.capability-card b { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:10px; background:#111827; color:#fff; font-size:12px; margin-bottom:14px; }
.capability-card h3 { color:#111827; font-size:17px; margin-bottom:8px; }
.capability-card p { color:#64748b; font-size:13px; line-height:1.75; }
.steps { counter-reset:step; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.step-card { position:relative; padding:24px; border-radius:18px; background:#fff; border:1px solid #e2e8f0; box-shadow:0 14px 38px rgba(15, 23, 42, 0.045); }
.step-card::before { counter-increment:step; content:counter(step); width:30px; height:30px; border-radius:10px; background:#111827; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; margin-bottom:16px; }
.step-card h3 { font-size:17px; margin-bottom:8px; }
.step-card p { color:#64748b; font-size:13px; line-height:1.75; }
.seo-copy { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(320px, 0.8fr); gap:22px; align-items:start; }
.copy-panel { border-radius:24px; border:1px solid #e5e7eb; padding:26px; background:linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); }
.copy-panel h2 { font-size:28px; }
.copy-panel p { color:#64748b; font-size:15px; line-height:1.9; margin-bottom:14px; }
.copy-panel a { color:#111827; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.link-panel { border-radius:22px; background:linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); color:#111827; padding:24px; border:1px solid #dbe8f5; box-shadow:0 16px 42px rgba(15, 23, 42, 0.055); }
.link-panel h2 { color:#111827; font-size:22px; margin-bottom:14px; }
.link-panel ul { list-style:none; display:grid; gap:10px; }
.link-panel a { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid #e2e8f0; color:#475569; text-decoration:none; font-size:14px; }
.link-panel a:hover { color:#0c4a6e; }
.faq-section { background:linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); color:#111827; padding-top:68px; padding-bottom:68px; border-top:1px solid #edf2f7; }
.faq-section .section-head { max-width:900px; margin:0 auto 18px; text-align:center; }
.faq-section .section-eyebrow { background:#eef6ff; color:#0c4a6e; }
.faq-section h2 { color:#111827; }
.faq-list { border:1px solid #dbe8f5; border-radius:22px; background:#fff; overflow:hidden; box-shadow:0 18px 52px rgba(15, 23, 42, 0.06); }
.faq-item { border-bottom:1px solid #e2e8f0; background:#fff; }
.faq-item:last-child { border-bottom:0; }
.faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:22px; min-height:82px; color:#111827; font-size:22px; font-weight:760; line-height:1.35; padding:0 24px; transition:background 0.18s ease; }
.faq-item summary:hover { background:#f8fbff; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::before { content:""; width:11px; height:11px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(-45deg); flex:0 0 11px; color:#0ea5e9; transition:transform 0.18s ease, color 0.18s ease; }
.faq-item[open] summary::before { transform:rotate(45deg); color:#f97316; }
.faq-item summary span { color:#0ea5e9; }
.faq-item p { color:#64748b; font-size:15px; line-height:1.9; max-width:920px; padding:0 28px 26px 58px; }
.bottom-section { margin-top:40px; background:#f8fbff; border-top:1px solid #e2e8f0; color:#111827; }
.footer { padding:64px 40px 34px; border-top:none; }
.footer-content { max-width:1240px; margin:0 auto; display:flex; justify-content:space-between; gap:68px; }
.footer-brand { flex:2; }
.footer-brand h3 { color:#111827; font-size:22px; font-weight:760; letter-spacing:0; margin-bottom:12px; }
.footer-brand p { color:#64748b; font-size:13px; line-height:1.8; max-width:360px; }
.footer-links-wrapper { flex:3; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:34px; }
.footer-col h4 { color:#111827; font-size:13px; font-weight:720; letter-spacing:0; margin-bottom:14px; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:9px; }
.footer-col ul a { color:#64748b; text-decoration:none; font-size:13px; transition:color 0.2s; }
.footer-col ul a:hover { color:#0c4a6e; }
.footer-bottom { max-width:1240px; margin:46px auto 0; padding-top:22px; border-top:1px solid #e2e8f0; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; color:#64748b; font-size:12px; }
@media (max-width: 980px) {
.navbar { padding:0 24px; }
.nav-links, .nav-mega { display:none !important; }
.nav-actions { display:flex; }
.seo-copy { grid-template-columns:1fr; }
.hero-panel { max-width:680px; width:100%; margin:0 auto; }
.hero-visual { min-height:178px; }
.card-grid, .steps, .model-capabilities { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
:root { --header-height:56px; }
.navbar { height:var(--header-height); padding:0 18px; }
.nav-left { width:auto; justify-content:flex-start; gap:0; }
.nav-brand { font-size:18px; gap:9px; }
.nav-actions { gap:0; }
.user-profile { min-height:34px; padding:0 10px; gap:7px; font-size:12px; }
.user-avatar { width:24px; height:24px; flex-basis:24px; font-size:12px; }
.header-user-role-badge { display:none !important; }
.hero { padding:calc(var(--header-height) + 18px) 14px 24px; }
.breadcrumb { margin-bottom:18px; font-size:12px; }
.hero-shell { display:block; }
.hero-kicker { min-height:24px; padding:0 10px; font-size:10px; margin-bottom:10px; }
.hero h1 { font-size:29px; line-height:1.12; margin-bottom:10px; }
.hero-lead { font-size:13px; line-height:1.55; margin-bottom:12px; }
.hero-actions { align-items:stretch; margin-bottom:12px; }
.primary-btn, .secondary-btn { width:100%; min-height:38px; }
.hero-links { display:none; }
.hero-visual { display:none; }
.chatbot { min-height:0; border-radius:16px; }
.input-area { padding:12px 12px 0; }
.text-input-container textarea { min-height:96px; padding:14px 52px 12px 14px; font-size:13px; font-weight:650; }
.seedance-preview-strip { position:static; padding:0 14px 12px; max-width:none; gap:8px; min-height:0; }
.seedance-preview-item { width:34px; height:34px; border-radius:10px; flex-basis:34px; }
.seedance-preview-overflow { min-width:34px; height:34px; padding:0 8px; font-size:11px; }
.landing-expand-btn { right:14px; top:12px; width:36px; height:36px; border-radius:12px; }
.input-section { padding:10px 14px 32px; }
.chatbot-demo { max-width:none; }
.control-bar { flex-direction:column; align-items:stretch; padding:10px 0 0; gap:10px; }
.left-controls, .right-controls { width:100%; justify-content:space-between; }
.left-controls { gap:8px; }
.upload-widget, .person-asset-trigger, .model-btn-trigger, .setting-tag, .prompt-generate-btn { min-height:38px; font-size:12px; padding:0 12px; }
.upload-widget, .person-asset-trigger { width:40px; flex-basis:40px; }
.person-asset-modal { left:12px !important; right:12px !important; width:auto !important; max-width:none !important; }
.person-asset-dialog { height:min(420px, calc(100vh - 90px)); }
.person-asset-body { grid-template-columns:1fr; grid-template-rows:160px 1fr; }
.person-asset-upload-panel { border-right:none; border-bottom:1px solid #ededed; }
.fixed-model-pill { width:134px; }
.seedance-model-selector .model-dropdown { width:min(240px, calc(100vw - 24px)); }
.setting-wrap { flex:1 1 auto; min-width:0; }
.setting-tag { width:100%; min-width:190px; }
.seedance-settings-popup { position:fixed; left:12px; right:12px; bottom:88px; width:auto; transform:translateY(8px); border-radius:18px; padding:18px; max-height:calc(100vh - 130px); overflow:auto; }
.setting-wrap.is-open .seedance-settings-popup { transform:translateY(0); }
.seedance-settings-popup::after { display:none; }
.seedance-model-selector .model-dropdown { left:0; right:0; width:auto; max-width:none; }
.ratio-options { gap:10px; }
.settings-label { font-size:15px; margin-bottom:12px; }
.setting-option { min-height:42px; font-size:13px; }
.seedance-select { max-width:100%; padding-right:30px; background-position:calc(100% - 17px) 16px, calc(100% - 11px) 16px; background-size:6px 6px, 6px 6px; }
.credits-text { font-size:13px; }
.credits-free-badge { min-height:30px; padding:0 12px; font-size:12px; }
.generate-btn { width:44px; height:44px; }
.generate-btn svg { width:20px; height:20px; }
.section { padding:42px 14px; }
.section h2 { font-size:25px; }
.model-intro { padding:48px 14px; }
.model-intro h2 { font-size:34px; }
.model-intro-lead { font-size:14px; line-height:1.78; }
.card-grid, .steps, .model-capabilities { grid-template-columns:1fr; }
.capability-card { padding:18px; }
.faq-section { padding-top:46px; padding-bottom:46px; }
.faq-item summary { min-height:72px; gap:14px; font-size:18px; }
.faq-item summary::before { width:9px; height:9px; border-width:2px; flex-basis:9px; }
.faq-item p { padding:0 0 22px 26px; font-size:13px; line-height:1.75; }
.copy-panel, .link-panel { padding:20px; border-radius:20px; }
.footer { width:100%; max-width:none; box-sizing:border-box; padding:34px 18px 24px; }
.footer-content { width:100%; max-width:none; display:grid; grid-template-columns:1fr; gap:26px; margin:0; }
.footer-brand p { max-width:none; margin-bottom:0; font-size:12px; line-height:1.72; color:#64748b; }
.footer-links-wrapper { width:100%; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 16px; }
.footer-col h4 { font-size:12px; margin-bottom:10px; }
.footer-col ul li { margin-bottom:8px; }
.footer-col ul a { font-size:12px; }
.footer-col:nth-child(4) { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px; border:1px solid #e2e8f0; border-radius:18px; background:#fff; }
.footer-col:nth-child(4) h4 { margin-bottom:0; }
.footer-col:nth-child(4) img { width:74px !important; height:74px !important; margin-top:0 !important; border-radius:12px; }
.footer-bottom { width:100%; max-width:none; margin:28px 0 0; padding-top:18px; flex-direction:column; gap:8px; font-size:11px; line-height:1.4; text-align:center; }
}
@media (max-width: 768px) {
html, body { width:100%; max-width:100%; overflow-x:hidden; }
.input-section { padding-left:12px; padding-right:12px; }
.control-bar { overflow:visible; }
.left-controls {
flex-wrap:nowrap;
justify-content:flex-start;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding-bottom:2px;
}
.left-controls::-webkit-scrollbar { display:none; }
.left-controls > * { flex:0 0 auto; }
.right-controls { justify-content:flex-end; }
.fixed-model-pill { width:auto; min-width:132px; }
.setting-wrap { position:static; flex:0 0 auto; min-width:0; }
.setting-tag { width:auto; min-width:178px; }
.seedance-select {
width:auto;
min-width:112px;
flex:0 0 auto;
}
.seedance-settings-popup {
position:fixed !important;
left:12px !important;
right:12px !important;
bottom:12px !important;
top:auto !important;
width:auto !important;
max-width:none !important;
max-height:calc(100dvh - 24px) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
transform:translateY(10px) !important;
z-index:13050 !important;
}
.setting-wrap.is-open .seedance-settings-popup { transform:translateY(0) !important; }
.segmented-options {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(84px, 1fr));
}
.ratio-options { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.setting-option,
.ratio-option {
min-width:0;
white-space:normal;
}
.person-asset-modal {
position:fixed !important;
left:12px !important;
right:12px !important;
top:auto !important;
bottom:12px !important;
width:auto !important;
max-width:none !important;
z-index:13060 !important;
}
.person-asset-dialog {
height:min(78dvh, 560px) !important;
max-height:calc(100dvh - 24px) !important;
overflow:hidden !important;
}
}
.watermark-switch-container { display:flex; align-items:center; gap:8px; position:relative; opacity:0.75; }
.watermark-switch-container::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background-color:rgba(17, 24, 39, 0.92); color:#fff; padding:6px 10px; border-radius:6px; font-size:12px; line-height:1.4; white-space:nowrap; box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); opacity:0; visibility:hidden; transition:opacity 0.2s ease; pointer-events:none; z-index:10000; min-width:max-content; }
.watermark-switch-container:hover::after { opacity:1; visibility:visible; }
.watermark-switch { position:relative; display:inline-block; width:36px; height:20px; }
.watermark-switch input { opacity:0; width:0; height:0; }
.watermark-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#d1d5db; transition:0.3s; border-radius:10px; }
.watermark-slider:before { position:absolute; content:""; height:14px; width:14px; left:3px; bottom:3px; background-color:white; transition:0.3s; border-radius:50%; box-shadow:0 2px 5px rgba(0, 0, 0, 0.15); }
.watermark-switch input:checked + .watermark-slider { background-color:#111827; }
.watermark-switch input:checked + .watermark-slider:before { transform:translateX(16px); }
.watermark-switch input:disabled + .watermark-slider { cursor:not-allowed; }
.watermark-label { font-size:12px; color:#111827; font-weight:600; }