/* ===== console/styles/tokens.css ===== */ /* 设计令牌：全部 :root 自定义属性与 html[data-theme] 主题覆盖。 亮/暗双主题由 切换（切换器见 console-nav 的 data-theme-choice）。 ⚠️ 变量名保留产品原名：--violet / --violet2 现承载品牌红橙(#ff3148/#ff6a35)，名不符值是上游历史，未改名以免与产品后续版本 diff 冲突。 */ /* 由产品英文版 Demo 移植（shared-css.txt + shared-appCss.txt），保真为先，未做审美再创作。 分桶规则：选择器语义分桶 + 顺序保真定点校正——跨切面规则（同时命中多桶选择器） 一律降到更早加载的桶，确保拆分后层叠顺序与源文件完全一致。 加载顺序固定为 tokens → base → shell → components → views，不可调换。 */ :root { color-scheme:light; --bg:#f4f5f8; --surface:#fff; --soft:#f8f8fb; --ink:#171922; --text:#434754; --muted:#7e8493; --faint:#a5aab6; --line:#e6e7ed; --violet:#6657f2; --violet2:#7a6afa; --violet-soft:#efedff; --green:#16875f; --green-soft:#e8f7f0; --amber:#a96515; --amber-soft:#fff5df; --nav:#171821; --shadow:0 1px 2px rgba(20,22,34,.04),0 10px 28px rgba(20,22,34,.06); /* 上游缺陷修补:源稿仅暗色定义 --shadow-1,亮色缺失致 views.css .review-aligned-workspace 投影为空; 补亮色基准=亮色 --shadow 同款几何(2026-07-31 UI-A 终审裁定,修法①) */ --shadow-1:0 1px 2px rgba(20,22,34,.04),0 10px 28px rgba(20,22,34,.06); --shadow-lg:0 28px 70px rgba(24,27,40,.16); font-family:Inter,"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } /* Airvana homepage-aligned brand layer. Loaded centrally by console-nav.js. */ :root { --bg: #f7f6f2; --surface: #ffffff; --soft: #f6f4ef; --ink: #050505; --muted: #60636f; --line: #e8e4dc; --line-strong: #dcd8d0; --violet: #ff3148; --violet-2: #ff6a35; --violet2: #ff6a35; --violet-soft: #fff0f1; --violet-pale: #fff6f2; --red: #ff3148; --green: #1aa66a; --orange: #ff8a2a; --radius: 18px; --control-height: 34px; --control-height-sm: 30px; --control-radius: 10px; --control-gap: 7px; --control-icon: 16px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; } html[data-theme="dark"] { color-scheme: dark; --bg:#111312; --surface:#181b19; --soft:#202421; --ink:#f7f8f7; --text:#d7dbd8; --muted:#929a96; --line:#2d322f; --violet-soft:#3a2226; } @media (max-width: 620px) { .campaign-right { flex-wrap: wrap; } .workflow-segmented.stepper { width: 100%; order: -1; } .workflow-segmented .step { flex: 1; justify-content: center; padding: 0 5px; } .settings-layer { padding: 0; } .settings-sheet { border-radius: 0; border: 0; } .account-popover { top: 58px; right: 8px; } .invite-trigger { width: var(--control-height); min-width: var(--control-height); padding: 0; } .invite-trigger span { display: none; } .invite-layer { padding: 0; } .invite-dialog { width: 100%; max-height: 100vh; border: 0; border-radius: 0; } .invite-body { padding-left: 16px; padding-right: 16px; } } /* Production English type scale — readable at native browser zoom. */ :root { --type-page-title: 26px; --type-panel-title: 16px; --type-card-title: 14px; --type-body: 14px; --type-supporting: 12px; --type-label: 11px; --control-height: 42px; --control-height-sm: 38px; } @media (max-width: 620px) { :root { --type-page-title: 22px; --type-panel-title: 15px; --type-body: 14px; } .page-heading h1 { font-size: 24px !important; } .campaign-bar h1, .campaign-title-row h1 { font-size: 19px !important; } .workflow-segmented .step { padding-inline: 9px; font-size: 11px; } } /* Chinese-console-inspired dark palette for the shared Step 2 / Step 3 studio. Layout stays untouched; this layer only normalizes surfaces and interaction states. */ html[data-theme="dark"] { --bg: #080e0b; --surface: #101713; --surface-2: #121a16; --surface-3: #18211c; --soft: #151d19; --ink: #f3f7f4; --text: #d7dfda; --muted: #8c9791; --faint: #68746e; --line: #25302a; --line-strong: #303c35; --violet: #6d55f6; --violet-2: #806cff; --violet2: #806cff; --violet-soft: #20223a; --violet-pale: #17192b; --red: #6d55f6; --orange: #806cff; --green: #39d4a1; --green-soft: #102a21; --amber: #e6b65b; --amber-soft: #2a2418; --nav: #0f1713; --nav-2: #151e19; --shadow: 0 1px 2px rgba(0,0,0,.24),0 12px 32px rgba(0,0,0,.18); --shadow-1: 0 1px 2px rgba(0,0,0,.24),0 10px 28px rgba(0,0,0,.18); --shadow-2: 0 24px 70px rgba(0,0,0,.34); } /* ===== console/styles/base.css ===== */ /* 基础层：reset、字体栈、通用元素与 @keyframes/@font-face。 */ /* 由产品英文版 Demo 移植（shared-css.txt + shared-appCss.txt），保真为先，未做审美再创作。 分桶规则：选择器语义分桶 + 顺序保真定点校正——跨切面规则（同时命中多桶选择器） 一律降到更早加载的桶，确保拆分后层叠顺序与源文件完全一致。 加载顺序固定为 tokens → base → shell → components → views，不可调换。 */ html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); } body { min-width:320px; overflow:hidden; } button, input, textarea, select { font:inherit; } button { cursor:pointer; } button:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid rgba(102,87,242,.2); outline-offset:2px; } h1 { margin:0; color:var(--ink); font-size:16px; letter-spacing:-.025em; } @keyframes progress { to{ width:100%}; } @keyframes pulse { 50%{ transform:scale(1.06); box-shadow:0 0 0 9px rgba(102,87,242,.1)}; } html, body { background: var(--bg); color: var(--ink); } body { font-family: Inter, "Noto Sans SC", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } button, input, textarea, select { font: inherit; } button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: rgba(255,49,72,.24) !important; } @keyframes generationFill { from{ transform:translate3d(0,0,0) scaleX(.025)} to{ transform:translate3d(0,0,0) scaleX(1)}; } @keyframes generationShimmer { to{ transform:translate3d(120%,0,0)}; } @keyframes generationDot { 0%,68%,100%{ opacity:.26; transform:scale(.82)} 34%{ opacity:1; transform:scale(1.12)}; } @container settings-panel (max-width: 320px) { .configure-workspace .field-grid, .configure-workspace .tower-card.open .tower-body { grid-template-columns: minmax(0,1fr); } .configure-workspace .footer-actions { padding-left: 10px; padding-right: 10px; } .configure-workspace .footer-actions .unsaved span { display: none; } .configure-workspace .footer-actions .btn { padding-left: 10px; padding-right: 10px; } } @container review-panel (max-width: 320px) { .studio .detail-grid { grid-template-columns: minmax(0,1fr); } .studio .readiness { align-items: flex-start; } .studio .score { width: 46px; height: 46px; flex-basis: 46px; } .studio .inspector-footer { padding-left: 10px; padding-right: 10px; } .studio .inspector-footer .btn { padding-left: 10px; padding-right: 10px; } } @container studio-preview (max-width: 480px) { .studio .preview-panel > .panel-head { padding-left: 8px; padding-right: 8px; } .studio .preview-toolbar { gap: 6px; } .studio .preview-toolbar .tool-group { gap: 4px; } .studio .tool-btn { min-width: 34px; height: 34px; padding: 0 8px; font-size: 9px; } .studio .tool-btn.icon-only { width: 34px; min-width: 34px; height: 34px; } .studio #versionBtn { min-width: 82px; } .studio #deviceBtn { min-width: 100px; } } @container studio-preview (max-width: 380px) { .studio .preview-panel > .panel-head { padding-left: 6px; padding-right: 6px; } .studio .preview-toolbar { gap: 4px; } .studio .preview-toolbar .tool-group { gap: 3px; } .studio .tool-btn { min-width: 32px; height: 32px; padding: 0 6px; } .studio .tool-btn.icon-only { width: 32px; min-width: 32px; height: 32px; } .studio #versionBtn { min-width: 78px; } .studio #deviceBtn { min-width: 92px; } } @keyframes agentStepIn { from{ opacity:0; transform:translateY(5px)} to{ opacity:1; transform:none}; } body { font-size: var(--type-body); } @keyframes kol-spin { to{ transform: rotate(360deg);}; } @keyframes kol-review { from{ transform: translateX(-30%);} to{ transform: translateX(150%);}; } @keyframes wallet-in { from{ opacity: 0; transform: translateY(5px);} to{ opacity: 1; transform: translateY(0);}; } @keyframes optimizationPulse { 50%{ transform:scale(1.06); box-shadow:0 20px 44px rgba(255,62,83,.34);}; } @keyframes optimizationSlide { to{ transform:translateX(138%);}; } body { overflow:hidden; } @keyframes viewIn { from{ opacity:0; transform:translateY(5px)}to{ opacity:1; transform:none}; } @keyframes nodePulse { 50%{ transform:scale(1.2); box-shadow:0 0 0 7px rgba(102,87,242,.09)}; } /* ===== console/styles/shell.css ===== */ /* 应用壳：sidebar / topbar / nav / workspace / page 骨架。 */ /* 由产品英文版 Demo 移植（shared-css.txt + shared-appCss.txt），保真为先，未做审美再创作。 分桶规则：选择器语义分桶 + 顺序保真定点校正——跨切面规则（同时命中多桶选择器） 一律降到更早加载的桶，确保拆分后层叠顺序与源文件完全一致。 加载顺序固定为 tokens → base → shell → components → views，不可调换。 */ .app { height:100vh; display:grid; grid-template-columns:232px minmax(0,1fr); } .sidebar { height:100vh; color:#e9e9ef; background:radial-gradient(circle at 20% 0,rgba(114,96,255,.16),transparent 24%),linear-gradient(180deg,#1a1b25,#15161e 72%); border-right:1px solid rgba(255,255,255,.05); display:flex; flex-direction:column; padding:18px 12px 14px; overflow:hidden; } .brand { height:43px; display:flex; align-items:center; gap:11px; padding:0 7px; margin-bottom:25px; } .brand-mark { width:34px; height:34px; flex:0 0 34px; border-radius:10px; position:relative; background:linear-gradient(145deg,#846fff,#4f6ff5); box-shadow:0 9px 26px rgba(92,75,235,.34); } .brand-mark:before, .brand-mark:after { content:""; position:absolute; background:#fff; transform:rotate(45deg); border-radius:2px; } .brand-mark:before { width:13px; height:13px; left:10px; top:10px; } .brand-mark:after { width:5px; height:5px; right:6px; top:6px; opacity:.65; } .brand strong { display:block; color:#fff; font-size:14px; } .brand small { display:block; color:#818595; font-size:8px; letter-spacing:.14em; font-weight:700; margin-top:3px; } .nav-body { flex:1; overflow:auto; scrollbar-width:none; } .nav-section { margin-bottom:22px; } .nav-label { color:#656977; padding:0 10px 7px; font-size:8px; letter-spacing:.13em; font-weight:800; text-transform:uppercase; } .nav-item { width:100%; height:39px; border:0; border-radius:10px; padding:0 10px; display:flex; align-items:center; gap:11px; color:#969aa8; background:transparent; text-align:left; position:relative; margin:2px 0; transition:.18s; } .nav-item:hover { color:#fff; background:rgba(255,255,255,.055); } .nav-item.active { color:#fff; background:linear-gradient(90deg,rgba(112,92,255,.24),rgba(112,92,255,.1)); } .nav-item.active:before { content:""; position:absolute; left:-12px; top:8px; width:3px; height:23px; border-radius:0 4px 4px 0; background:#8d7cff; box-shadow:0 0 14px rgba(141,124,255,.65); } .nav-icon { width:20px; text-align:center; color:#858998; } .nav-item.active .nav-icon { color:#aa9eff; } .nav-text { font-size:11px; font-weight:620; } .nav-badge { margin-left:auto; min-width:19px; height:19px; padding:0 5px; border-radius:10px; display:grid; place-items:center; color:#d8d3ff; background:rgba(130,111,255,.2); font-size:8px; font-weight:800; } .nav-footer { border-top:1px solid rgba(255,255,255,.06); padding:12px 5px 0; } .workspace-switch { width:100%; border:0; border-radius:10px; padding:8px; display:flex; align-items:center; gap:9px; background:transparent; color:#d9dae1; text-align:left; } .workspace-switch:hover { background:rgba(255,255,255,.05); } .workspace-avatar { width:27px; height:27px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(145deg,#2e3443,#555d70); font-size:8px; font-weight:800; } .workspace-copy strong { display:block; font-size:9px; } .workspace-copy span { display:block; color:#737785; font-size:8px; margin-top:2px; } .main { min-width:0; height:100vh; display:flex; flex-direction:column; overflow:hidden; } .topbar { height:58px; flex:0 0 58px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; background:rgba(255,255,255,.88); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); z-index:10; } .top-left, .top-right { display:flex; align-items:center; gap:9px; } .chrome-btn { width:32px; height:32px; border:1px solid transparent; border-radius:9px; background:transparent; color:#727887; display:grid; place-items:center; } .chrome-btn:hover { color:var(--ink); border-color:var(--line); background:#fff; } .breadcrumb { display:flex; align-items:center; gap:8px; color:#8a8f9c; font-size:10px; } .breadcrumb strong { color:#434856; } .command { width:min(280px,27vw); height:32px; border:1px solid var(--line); border-radius:9px; padding:0 9px; display:flex; align-items:center; gap:8px; color:#9196a3; background:#f8f8fa; font-size:9px; } .command kbd { margin-left:auto; border:1px solid #dedfe5; border-radius:5px; padding:2px 5px; background:#fff; color:#838894; font:8px inherit; } .credits { height:30px; border:0; border-radius:9px; padding:0 10px; color:#5d50d4; background:var(--violet-soft); font-size:9px; font-weight:720; } .avatar { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(145deg,#333846,#6e7587); color:#fff; font-size:8px; font-weight:800; } .page { flex:1; min-height:0; padding:15px 18px 18px; display:flex; flex-direction:column; gap:12px; } .back { width:30px; height:30px; border:1px solid var(--line); border-radius:9px; background:#fff; color:#6f7584; } .campaign-meta { margin-top:5px; color:#8b909d; font-size:9px; display:flex; align-items:center; gap:7px; } .btn.secondary { border:1px solid var(--line); background:#fff; color:#555b69; } .panel-title { display:flex; align-items:center; gap:9px; color:var(--ink); font-size:11px; font-weight:720; } .template-card { position:absolute; top:22px; width:205px; height:270px; border:1px solid var(--line); border-radius:18px; padding:10px; background:#fff; box-shadow:0 20px 45px rgba(26,29,43,.12); transition:.42s cubic-bezier(.2,.8,.2,1); overflow:hidden; cursor:pointer; } .deck-arrow { position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; background:#fff; color:#737987; box-shadow:var(--shadow); z-index:5; } .mode-btn { height:29px; border:0; border-radius:8px; padding:0 10px; color:#838896; background:transparent; font-size:9px; font-weight:680; } .idea-chip { height:25px; border:1px solid var(--line); border-radius:14px; padding:0 9px; color:#7b808e; background:rgba(255,255,255,.7); font-size:8px; } .process-toggle { width:100%; height:38px; border:0; padding:0 10px; display:flex; align-items:center; justify-content:space-between; background:#fafafd; color:#555b69; font-size:8px; font-weight:700; } .tool { height:29px; border:1px solid var(--line); border-radius:8px; padding:0 8px; color:#686e7c; background:#fff; font-size:8px; } .settings-tab { height:100%; border:0; border-bottom:2px solid transparent; background:transparent; color:#9398a5; font-size:9px; font-weight:680; } .segment { height:27px; border:0; border-radius:7px; color:#7d8290; background:transparent; font-size:8px; } /* Shared button system: one vertical rhythm, icon size and alignment model. */ :is( .btn, .credits, .chrome-btn, .command, .command-trigger, .back, .mode-btn, .idea-chip, .deck-arrow, .tool, .tool-btn, .icon-button, .composer-tool, .send, .settings-back, .account-settings-button, .detail-primary, .detail-secondary, .filter-chip, .seg-tab, .segment, .settings-tab, .theme-segment button ) { display: inline-flex; align-items: center; justify-content: center; gap: var(--control-gap); line-height: 1; white-space: nowrap; vertical-align: middle; } :is(.btn, .credits, .command, .command-trigger) { min-height: var(--control-height); border-radius: var(--control-radius); } :is(.chrome-btn, .back, .icon-button, .composer-tool, .send, .settings-back, .account-settings-button) { width: var(--control-height); min-width: var(--control-height); height: var(--control-height); padding: 0; } :is(.nav-item, .workspace-switch, .account-menu-item, .settings-row, .command-item, .brief-toggle, .process-toggle, .tower-head) { display: flex; align-items: center; } :is(.command, .command-trigger) { justify-content: flex-start; } .mode-btn { min-height: var(--control-height); height: var(--control-height); } .idea-chip { min-height: 28px; height: 28px; } :is(.btn, .credits, .chrome-btn, .back, .mode-btn, .idea-chip, .deck-arrow, .tool, .tool-btn, .icon-button, .composer-tool, .send):active:not(:disabled) { transform: scale(.98); } .sidebar { background: #fff !important; color: var(--ink) !important; border-right: 1px solid var(--line) !important; box-shadow: none !important; } .brand { min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 0 18px; cursor: pointer; outline: none; } .brand:focus-visible { border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(255,49,72,.34); } .nav-label { color: #a19f99 !important; letter-spacing: .09em; } .nav-item { color: #5f6168 !important; border: 1px solid transparent; } .nav-item:hover { color: var(--ink) !important; background: var(--soft) !important; border-color: rgba(232,228,220,.9); transform: translateX(1px); } .nav-item.active { color: var(--ink) !important; background: var(--violet-soft) !important; border-color: rgba(255,49,72,.09); box-shadow: none !important; } .nav-item.active::before { background: var(--violet) !important; box-shadow: 0 0 0 4px rgba(255,49,72,.08) !important; } .nav-icon { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; color: #72747a !important; line-height: 1; } .nav-item.active .nav-icon { color: var(--violet) !important; } .nav-badge { color: #d84a5e !important; background: #fff2f4 !important; border: 1px solid rgba(255,49,72,.08); } .nav-footer { border-color: var(--line) !important; } .workspace-switch, .workspace-switcher { width: 100%; position: relative; z-index: 2; color: var(--ink) !important; cursor: pointer; pointer-events: auto !important; touch-action: manipulation; transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .workspace-switch:hover, .workspace-switcher:hover { background: var(--soft) !important; transform: translateY(-1px); } .workspace-switch:active, .workspace-switcher:active { transform: scale(.985); } .workspace-switch[aria-expanded="true"], .workspace-switcher[aria-expanded="true"] { border-color: rgba(255,49,72,.25) !important; background: #fff1f2 !important; box-shadow: 0 0 0 3px rgba(255,49,72,.08); } .workspace-switch:focus-visible, .workspace-switcher:focus-visible { outline: 3px solid rgba(255,49,72,.2); outline-offset: 2px; } .workspace-avatar, .avatar { background: #050505 !important; color: #fff !important; box-shadow: none !important; } .workspace-copy span { color: var(--muted) !important; } .topbar { background: rgba(255,255,255,.92) !important; border-color: var(--line) !important; backdrop-filter: blur(16px); } .top-right { gap: 8px !important; } .top-right > :is(button, .avatar) { flex: 0 0 auto; } .breadcrumb span { color: #95928b !important; } .command, .command-trigger { background: var(--soft) !important; border-color: var(--line) !important; color: var(--muted) !important; } .command:hover, .command-trigger:hover { border-color: #cfcac0 !important; background: #fff !important; } .credits { color: #d91f3b !important; background: var(--violet-soft) !important; border-color: rgba(255,49,72,.11) !important; } .chrome-btn { color: #5f6168 !important; } .chrome-btn:hover { color: var(--ink) !important; background: var(--soft) !important; } .btn.secondary { color: var(--ink); background: #fff; border-color: var(--line); } .config-module-icon.brand-partner { color: #2f80ed; background: #eaf3ff; } .brand-config-body { padding-top: 11px; } .brand-select-label { display: block; margin-bottom: 7px; color: #747a75; font-size: 7px; font-weight: 760; text-transform: uppercase; letter-spacing: .08em; } .brand-select-wrap { min-height: 44px; position: relative; display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 6px; border: 1px solid var(--line); border-radius: 11px; background: #fff; } .brand-token { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #2f80ed; font-size: 10px; font-weight: 850; } .brand-select-wrap select { min-width: 0; flex: 1; height: 32px; appearance: none; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 9px; font-weight: 730; cursor: pointer; } .brand-select-wrap > svg { width: 14px; height: 14px; color: #909590; pointer-events: none; } .brand-config-body > p { margin: 8px 2px 0; color: #8b918c; font-size: 7px; line-height: 1.45; } .brand-picker { position: relative; } .brand-picker-trigger { width: 100%; min-height: 48px; padding: 5px 9px 5px 5px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; text-align: left; } .brand-picker-trigger:hover, .brand-picker.open .brand-picker-trigger { border-color: #cbc5ba; box-shadow: 0 0 0 3px rgba(255,49,72,.055); } .brand-picker-trigger > span:nth-child(2), .brand-picker-menu button > span:nth-child(2) { min-width: 0; flex: 1; } .brand-picker-trigger strong, .brand-picker-menu strong { display: block; color: var(--ink); font-size: 8.5px; line-height: 1.2; } .brand-picker-trigger small, .brand-picker-menu small { display: block; margin-top: 3px; color: #969b97; font-size: 6.5px; } .brand-picker-trigger > svg { width: 14px; height: 14px; color: #8c928d; transition: transform .18s; } .brand-picker.open .brand-picker-trigger > svg { transform: rotate(180deg); } .brand-picker-menu { margin-top: 6px; padding: 4px; display: grid; gap: 3px; border: 1px solid #e3e0da; border-radius: 11px; background: #fff; box-shadow: 0 10px 24px rgba(25,27,25,.1); } .brand-picker-menu[hidden] { display: none !important; } .brand-picker-menu button { width: 100%; min-height: 45px; padding: 4px 7px 4px 4px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; text-align: left; } .brand-picker-menu button:hover { background: #f7f6f2; } .brand-picker-menu button.selected { background: #fff3f4; } .brand-picker-menu button > svg { width: 13px; height: 13px; color: transparent; } .brand-picker-menu button.selected > svg { color: #d91f3b; } .brand-picker-menu .partner-logo { width: 42px; height: 30px; flex-basis: 42px; } .brand-picker-menu .partner-logo img { width: 35px; height: 22px; } .skin-select-wrap { min-height: 54px; position: relative; display: flex; align-items: center; gap: 9px; padding: 5px 9px 5px 5px; border: 1px solid var(--line); border-radius: 11px; background: #fff; } .skin-select-wrap label small { display: block; margin-top: 3px; color: #979c98; font-size: 6.5px; } /* Readable production-scale typography inside the configuration workspace. */ .configure-workspace .panel-title { font-size: 12.5px !important; } /* Account popover and settings sheet */ .top-right .avatar { padding: 0; cursor: pointer; border: 0; appearance: none; pointer-events: auto !important; transition: transform .16s, box-shadow .16s; } .top-right .avatar:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(255,49,72,.12) !important; } .top-right .avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(255,49,72,.16) !important; } html[data-theme="dark"] body, html[data-theme="dark"] .main { background: var(--bg) !important; color: var(--text); } html[data-theme="dark"] .sidebar, html[data-theme="dark"] .topbar, html[data-theme="dark"] .panel, html[data-theme="dark"] .dashboard-card, html[data-theme="dark"] .prompt-panel, html[data-theme="dark"] .configure-workspace, html[data-theme="dark"] .settings-group, html[data-theme="dark"] .account-popover { background: #181b19 !important; border-color: var(--line) !important; } html[data-theme="dark"] .nav-item:hover, html[data-theme="dark"] button.settings-row:hover, html[data-theme="dark"] .account-menu-item:hover { background: #222623 !important; } .nav-icon [data-lucide], .nav-icon svg { width: 17px; height: 17px; } button.icon-only > [data-lucide], button.icon-only > svg.lucide, .chrome-btn > [data-lucide], .chrome-btn > svg.lucide, .composer-tool > [data-lucide], .composer-tool > svg.lucide, .send > [data-lucide], .send > svg.lucide, .deck-arrow > [data-lucide], .deck-arrow > svg.lucide, .back > [data-lucide], .back > svg.lucide { margin-right: 0; } .command > span:first-child svg, .command-trigger > span:first-child svg { width: 14px; height: 14px; } /* Global navigation and page hierarchy. */ .topbar { min-height: 62px !important; height: 62px !important; flex-basis: 62px !important; } .breadcrumb { font-size: 13px !important; } .command, .command-trigger { min-height: 40px !important; height: 40px !important; font-size: 13px !important; } .command kbd, .command-trigger kbd { font-size: 11px !important; } .chrome-btn, .top-right .avatar { width: 38px !important; min-width: 38px !important; height: 38px !important; } .nav-item { min-height: 44px; height: 44px; } .nav-text { font-size: 14px !important; } .nav-label { font-size: 11px !important; } .nav-badge { width: 22px; min-width: 22px; height: 22px; flex: 0 0 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 10px !important; font-weight: 650; line-height: 1; letter-spacing: 0; text-align: center; font-variant-numeric: tabular-nums; } .workspace-copy strong { font-size: 13px !important; } .workspace-copy span { font-size: 11px !important; } .page-heading h1 { font-size: 28px !important; line-height: 1.2; } .page-heading p { font-size: 14px !important; line-height: 1.55; } .campaign-meta { font-size: 12px !important; } .panel-title, .configure-workspace .panel-title { font-size: var(--type-panel-title) !important; } .command-search input { font-size: 14px !important; } .command-search kbd { font-size: 11px !important; } .command-group-label { font-size: 11px !important; } .command-item { min-height: 44px; height: auto !important; font-size: 13px !important; } .command-item kbd { font-size: 11px !important; } /* Nested brand and skin pickers within Experience setup. */ .brand-select-label { font-size: 11px !important; } .brand-select-wrap select { font-size: 13px !important; } .brand-config-body > p { font-size: 12px !important; line-height: 1.45; } .brand-picker-trigger strong, .brand-picker-menu strong { font-size: 13px !important; } .brand-picker-trigger small, .brand-picker-menu small { font-size: 11px !important; line-height: 1.35; } .skin-select-wrap label small { font-size: 11px !important; line-height: 1.35; } .top-right .avatar { position: relative; overflow: visible !important; } .kol-status-orb.approved { color: #d91f3b; background: transparent; box-shadow: none; } .kol-status-orb.approved > svg { width: 62px; height: 66px; fill: var(--violet-soft) !important; stroke: var(--violet) !important; stroke-width: 1.8; filter: drop-shadow(0 12px 12px rgba(217,31,59,.18)); } .kol-status-view.approved .kol-status-kicker { color: #c91d36; } html[data-theme="dark"] .kol-profile-badge svg, html[data-theme="dark"] .kol-avatar-badge svg, html[data-theme="dark"] .kol-status-orb.approved > svg { fill: #20223a !important; stroke: #a99cff !important; } html[data-theme="dark"] .kol-menu-item[data-kol-state="approved"] > svg:first-child, html[data-theme="dark"] .kol-menu-item[data-kol-state="approved"] small, html[data-theme="dark"] .kol-status-view.approved .kol-status-kicker, html[data-theme="dark"] .kol-benefits svg { color: #b8adff; } html[data-theme="dark"] body, html[data-theme="dark"] .main, html[data-theme="dark"] .page { background: var(--bg) !important; color: var(--text); } html[data-theme="dark"] .sidebar, html[data-theme="dark"] .topbar { background: #0f1713 !important; border-color: var(--line) !important; } html[data-theme="dark"] .sidebar { color: var(--text) !important; } html[data-theme="dark"] :is(.breadcrumb strong, .campaign-meta, h1, .panel-title, .configuration-panel-head strong) { color: var(--ink) !important; } html[data-theme="dark"] :is(.breadcrumb span, .campaign-meta, .configuration-panel-head small) { color: var(--muted) !important; } html[data-theme="dark"] .nav-label { color: #65716b !important; } html[data-theme="dark"] .nav-item { color: #aab4af !important; } html[data-theme="dark"] .nav-item:hover { color: var(--ink) !important; background: #18211c !important; border-color: #2a3630; } html[data-theme="dark"] .nav-item.active { color: #b9afff !important; background: #20233a !important; border-color: #2c3050; } html[data-theme="dark"] .nav-item.active::before { background: var(--violet) !important; box-shadow: 0 0 0 4px rgba(109,85,246,.13) !important; } html[data-theme="dark"] .nav-item.active .nav-icon { color: #9e8cff !important; } html[data-theme="dark"] .nav-badge { color: #b8adff !important; background: rgba(109,85,246,.12) !important; border-color: rgba(128,108,255,.14); } html[data-theme="dark"] .workspace-switch { color: var(--text); } html[data-theme="dark"] .workspace-switch:hover { background: #18211c; } html[data-theme="dark"] .workspace-copy span { color: var(--muted); } html[data-theme="dark"] :is(.back,.btn.secondary,.chrome-btn,.command,.command-trigger,.credits,.invite-trigger) { color: #c8d0cc !important; background: #121a16 !important; border-color: var(--line) !important; } html[data-theme="dark"] :is(.back,.btn.secondary,.chrome-btn,.command,.command-trigger,.credits,.invite-trigger):hover { color: var(--ink) !important; background: #1a241f !important; border-color: #37443d !important; box-shadow: none !important; } html[data-theme="dark"] .config-module-copy strong, html[data-theme="dark"] .brand-picker-trigger strong, html[data-theme="dark"] .brand-picker-menu strong, html[data-theme="dark"] .skin-select-wrap label strong { color: var(--ink); } html[data-theme="dark"] :is(.config-module-copy small, .brand-picker-trigger small, .brand-picker-menu small, .skin-select-wrap label small, .brand-config-body>p, .brand-select-label) { color: var(--muted); } html[data-theme="dark"] .config-module-icon.brand-partner { color: #77a9ff; background: #17263a; } html[data-theme="dark"] :is(.brand-select-wrap,.brand-picker-trigger,.brand-picker-menu,.skin-select-wrap,.partner-logo) { color: var(--ink); background: #0c1410; border-color: var(--line); } html[data-theme="dark"] .brand-picker-trigger:hover, html[data-theme="dark"] .brand-picker.open .brand-picker-trigger { border-color: #4f457f; box-shadow: 0 0 0 3px rgba(109,85,246,.12); } html[data-theme="dark"] .brand-picker-menu button { color: var(--text); } html[data-theme="dark"] .brand-picker-menu button:hover { background: #18211c; } html[data-theme="dark"] .brand-picker-menu button.selected { background: #20223a; } html[data-theme="dark"] .brand-picker-menu button.selected > svg { color: #9a89ff; } .nav-body { overflow:auto !important; scrollbar-width:thin; } .workspace-command-layer { position:fixed; inset:0; z-index:230; display:grid; place-items:start center; padding-top:min(14vh,120px); background:rgba(8,12,10,.42); backdrop-filter:blur(7px); opacity:0; transition:.16s; } .workspace-command-layer.show { opacity:1; } .workspace-command-dialog { width:min(620px,calc(100vw - 32px)); overflow:hidden; border:1px solid rgba(224,220,211,.92); border-radius:20px; background:#fff; box-shadow:0 30px 90px rgba(12,15,13,.25); transform:translateY(-8px); transition:.16s; } .workspace-command-layer.show .workspace-command-dialog { transform:none; } .workspace-command-dialog > label { height:62px; padding:0 16px; display:flex; align-items:center; gap:11px; border-bottom:1px solid var(--line); } .workspace-command-dialog > label svg { width:20px; height:20px; color:var(--muted); } .workspace-command-dialog input { min-width:0; flex:1; border:0; outline:0; color:var(--ink); background:transparent; font-size:15px; } .workspace-command-dialog kbd { min-width:28px; padding:4px 6px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:var(--soft); font-size:10px; text-align:center; } .workspace-command-results { max-height:430px; overflow:auto; padding:8px; display:grid; gap:3px; } .workspace-command-results button { min-height:58px; padding:8px 10px; border:0; border-radius:12px; display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; text-align:left; background:transparent; } .workspace-command-results button:hover, .workspace-command-results button:focus-visible { outline:0; background:var(--soft); } .workspace-command-results button > svg { width:18px; height:18px; color:var(--red); justify-self:center; } .workspace-command-results button span { display:grid; gap:3px; } .workspace-command-results strong { color:var(--ink); font-size:13px; } .workspace-command-results small { color:var(--muted); font-size:11px; } .workspace-command-empty { min-height:230px; display:grid; place-items:center; align-content:center; text-align:center; } .workspace-command-empty svg { width:28px; height:28px; color:var(--muted); } .workspace-command-empty strong { margin-top:11px; font-size:14px; } .workspace-command-empty span { margin-top:5px; color:var(--muted); font-size:12px; } html[data-theme="dark"] :is(.recent-session-menu, .workspace-command-dialog, .notification-popover) { color:#f4f7f5; background:#111814; border-color:#303a35; } html[data-theme="dark"] :is(.recent-session-menu button, .workspace-command-results button, .notification-list > button) { color:#f4f7f5; } html[data-theme="dark"] :is(.recent-session-menu button, .workspace-command-results button, .notification-list > button):hover { background:#18201c; } html[data-theme="dark"] .workspace-command-dialog > label, html[data-theme="dark"] .notification-popover > header { border-color:#303a35; } /* Mobile homepage input reliability */ .create-page :is(button,.template-card,.idea-chip),.topbar button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .prototype-layer:not(.show), .workspace-command-layer:not(.show), .notification-popover:not(.show), .account-popover:not(.show), .settings-layer:not(.show), .invite-layer:not(.show), .agent-layer:not(.show), .kol-layer:not(.show), .connectors-layer:not(.show), .generating:not(.show) { pointer-events:none !important; } .nav-item { text-decoration:none; } .page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; } .page-heading h1 { font-size:25px; } .page-heading p { margin:7px 0 0; color:var(--muted); font-size:10px; line-height:1.55; } /* ===== console/styles/components.css ===== */ /* 控件：按钮、卡片、面板、表单、对话框、badge、stepper 等。 */ /* 由产品英文版 Demo 移植（shared-css.txt + shared-appCss.txt），保真为先，未做审美再创作。 分桶规则：选择器语义分桶 + 顺序保真定点校正——跨切面规则（同时命中多桶选择器） 一律降到更早加载的桶，确保拆分后层叠顺序与源文件完全一致。 加载顺序固定为 tokens → base → shell → components → views，不可调换。 */ .stepper { display:flex; align-items:center; justify-content:center; min-height:42px; } .step { min-width:124px; height:32px; border:0; background:transparent; display:flex; align-items:center; gap:8px; color:#9499a6; font-size:9px; font-weight:650; position:relative; padding:0 10px; } .step:not(:last-child):after { content:""; width:42px; height:1px; background:#dfe1e7; position:absolute; right:-21px; top:16px; } .step-num { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; border:1px solid #d9dbe2; background:#fff; color:#8b909d; font-size:8px; z-index:1; } .step.done .step-num { border-color:#b7e2d1; background:var(--green-soft); color:var(--green); } .step.active { color:var(--ink); } .step.active .step-num { color:#fff; border-color:var(--violet); background:var(--violet); box-shadow:0 0 0 4px var(--violet-soft); } .btn { height:34px; border-radius:10px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:9px; font-weight:720; transition:.18s; } .btn.secondary:hover { border-color:#d4d5de; color:var(--ink); box-shadow:var(--shadow); transform:translateY(-1px); } .btn.primary { border:0; color:#fff; background:linear-gradient(135deg,#7463f8,#5e4fe4); box-shadow:0 8px 20px rgba(94,79,228,.22); } .btn.primary:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(94,79,228,.28); } .panel { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; } .panel-head { height:57px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid var(--line); } .panel-icon { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; color:var(--violet); background:var(--violet-soft); } /* toast 必须压过全部弹层(现最高 .kyc 侧 420,连接器 148,命令面板/抽屉 180-230)。 #203 根因:原 z-index:100 低于 .connectors-layer 的 148,弹窗里触发的 toast 被蒙层整个盖住—— 点 Connect 报错、连接成功、断开成功全都"没反馈"。toast 是 pointer-events:none,置顶不挡交互。 */ .toast { position:fixed; z-index:900; left:50%; bottom:22px; transform:translate(-50%,14px); padding:9px 12px; border-radius:9px; color:#fff; background:#20222b; box-shadow:var(--shadow-lg); font-size:8px; opacity:0; pointer-events:none; transition:.22s; } .toast.show { opacity:1; transform:translate(-50%,0); } .mode-btn.active { color:var(--ink); background:#fff; box-shadow:0 2px 7px rgba(24,27,39,.08); } .gen-orb { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#8171ff,#5748df); font-size:18px; animation:pulse 1.1s infinite; } .progress { height:5px; border-radius:8px; background:#ececf2; margin-top:18px; overflow:hidden; } .progress i { display:block; width:15%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--violet),#9c8fff); animation:progress 1.5s ease forwards; } .settings-tab.active { color:var(--ink); border-bottom-color:var(--violet); } .field-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .field label, .range-field label { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; color:#555b68; font-size:8px; font-weight:680; } .field input, .field select { width:100%; height:34px; border:1px solid var(--line); border-radius:9px; padding:0 9px; color:var(--ink); background:#fff; font-size:8px; } .range-field { margin-bottom:12px; } .range-field output { color:var(--violet); font-weight:760; } .range-field input { width:100%; accent-color:var(--violet); } .segmented { display:grid; grid-template-columns:repeat(3,1fr); padding:3px; border-radius:9px; background:#eff0f3; } .segment.active { color:var(--ink); background:#fff; box-shadow:0 2px 7px rgba(24,27,39,.08); } .tabpanel[hidden] { display:none; } .segment { min-height: var(--control-height-sm); height: var(--control-height-sm); } .btn.primary, .send { color: #fff !important; background: linear-gradient(110deg, var(--violet), var(--violet-2)) !important; border-color: transparent !important; box-shadow: 0 8px 22px rgba(255,49,72,.18) !important; } .btn.primary:hover, .send:hover { filter: saturate(1.04) brightness(.98); transform: translateY(-1px); box-shadow: 0 11px 28px rgba(255,49,72,.23) !important; } .btn.secondary:hover { background: var(--soft); border-color: #d7d2c8; } .panel-icon, .tile-icon, .metric-icon, .earn-icon, .gen-orb { color: var(--violet) !important; background: var(--violet-soft) !important; } .mode-btn.active, .segment.active, .settings-tab.active, .filter.active { color: #d91f3b !important; background: var(--violet-soft) !important; } .step.active .step-num, .step.done .step-num { background: var(--violet) !important; border-color: var(--violet) !important; color: #fff !important; } .step.active { color: var(--ink) !important; } .progress i { background: linear-gradient(90deg, var(--violet), var(--violet-2)) !important; } .insight strong { color: #c91d36 !important; } .workflow-segmented.stepper { min-height: 0; height: 38px; flex: 0 0 auto; padding: 3px; display: flex; align-items: center; justify-content: flex-start; gap: 2px; border: 1px solid var(--line); border-radius: 12px; background: #f0f2ef; } .workflow-segmented .step { min-width: 0; height: 30px; padding: 0 13px; display: flex; align-items: center; gap: 4px; border: 0; border-radius: 9px; color: #8d918e; background: transparent; font-size: 8.5px; font-weight: 700; white-space: nowrap; transition: color .16s, background .16s, box-shadow .16s, transform .16s; } .workflow-segmented .step:hover { color: #4e514f; background: rgba(255,255,255,.58); } .workflow-segmented .step.active { color: var(--ink) !important; background: #fff !important; box-shadow: 0 2px 7px rgba(34,37,35,.08) !important; transform: none; } .workflow-segmented .step:not(:last-child)::after { display: none !important; } .workflow-segmented .step-num, .workflow-segmented .step.done .step-num, .workflow-segmented .step.active .step-num { width: auto; height: auto; flex: 0 0 auto; display: inline; border: 0 !important; border-radius: 0; color: inherit !important; background: transparent !important; box-shadow: none !important; font-size: inherit; } .workflow-segmented .step.done .step-num::after { content: none !important; } .workflow-segmented .step.done .step-num span { display: inline !important; } /* Centered preview controls with consistent icon and text alignment. */ .preview-col > .panel-head.preview-controlbar { min-height: 60px; height: 60px; padding: 0 16px; justify-content: center; gap: 10px; background: #faf9f7; } .configure-workspace > .configure-col > .panel-head { min-height: 60px !important; height: 60px !important; flex: 0 0 60px !important; } .preview-controlbar .tool { height: 38px; min-width: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; color: #656b78; background: #fff; font-size: 10.5px; font-weight: 680; line-height: 1; white-space: nowrap; transition: border-color .16s, color .16s, background .16s, transform .16s, box-shadow .16s; } .preview-controlbar .tool:hover { color: var(--ink); border-color: #d2ccc2; background: #fff; box-shadow: 0 5px 14px rgba(24,22,18,.07); transform: translateY(-1px); } .preview-controlbar .tool > svg { width: 17px; height: 17px; margin: 0 !important; vertical-align: middle; } .preview-controlbar .tool .trailing-icon { width: 13px; height: 13px; margin: 0 0 0 2px !important; } .review-aligned-workspace .configure-copilot-panel > .panel-head, .review-aligned-workspace .configure-inspector-panel > .panel-head { min-height: 60px !important; height: 60px !important; flex-basis: 60px !important; } .review-aligned-workspace .configure-preview-panel > .panel-head { min-height: 60px !important; height: 60px !important; flex-basis: 60px !important; } .review-aligned-workspace .footer-actions, .studio .inspector-footer { min-height: 62px !important; height: 62px !important; flex-basis: 62px !important; padding: 10px 14px !important; align-items: center; gap: 7px; } .review-aligned-workspace .footer-actions .btn, .studio .inspector-footer .btn { min-height: 38px !important; height: 38px !important; border-radius: 10px !important; font-size: 10px !important; } .review-aligned-workspace .footer-actions .btn.secondary, .studio .inspector-footer .btn.secondary { flex: 0 0 auto; min-width: 86px; } .review-aligned-workspace .footer-actions .btn.primary, .studio .inspector-footer .btn.primary { min-width: 0; flex: 1 1 auto; } .configure-preview-toolbar .configure-tool-button { height: 38px; min-width: 38px; padding: 0 12px; border-radius: 10px; font-size: 10px; } .configure-preview-toolbar #undoBtn, .configure-preview-toolbar #redoBtn, .configure-preview-toolbar #refreshBtn { width: 40px; padding: 0; } .configure-workspace .setting-section, .configure-workspace .field, .configure-workspace .range-field, .configure-workspace .tower-card, .configure-workspace .segmented { min-width: 0; max-width: 100%; } .configure-workspace .field-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .configure-workspace .segmented { grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; } /* Only the outer studio owns the workspace radius. Its three internal columns must stay square so Step 3 connects exactly like Step 2. */ .studio > .panel { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; } .studio .copilot-panel > .panel-head, .studio .review-panel > .panel-head { min-height: 60px; height: 60px; flex-basis: 60px; } .studio .preview-panel > .panel-head { min-height: 60px; height: 60px; flex-basis: 60px; padding: 0 16px; justify-content: center; background: #faf9f7; } .studio .preview-toolbar .tool-group { height: 100%; gap: 6px; } .studio .preview-toolbar .tool-group + .tool-group { position: relative; padding-left: 0; } .studio .preview-toolbar .tool-group + .tool-group::before { display: none; } .studio #inspectBtn, .studio .tool-separator, .studio .canvas-badge, .studio .annotation, .studio .stage-vignette, .studio .promo { display: none !important; } .studio .tool-btn { min-width: 38px; height: 38px; padding: 0 12px; border-radius: 10px; color: #656b78; background: #fff; font-size: 10.5px; font-weight: 680; } .studio .tool-btn.icon-only { width: 40px; min-width: 40px; height: 38px; padding: 0; } .studio .preview-share-btn { color: #d91f3b; border-color: rgba(255,49,72,.18); background: var(--violet-soft); } .studio .tool-btn.active { color: #d91f3b; border-color: rgba(255,49,72,.22); background: var(--violet-soft); } .studio .inspector-scroll { min-width: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; } .studio .inspector-footer { min-width: 0; min-height: 62px; height: 62px; flex-basis: 62px; } .studio .review-panel > .panel-head, .studio .inspector-scroll, .studio .inspector-footer { width: 100%; max-width: 100%; } .studio .inspector-footer .btn.primary { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .configure-workspace .panel-head > span { font-size: 9.5px !important; } .configure-workspace .field label, .configure-workspace .range-field label, .configure-workspace .field-label { font-size: 9.5px !important; } .configure-workspace .field input, .configure-workspace .field select { height: 38px; font-size: 10px !important; } .configure-workspace .segment { height: 31px; font-size: 9.5px !important; } .configure-workspace .footer-actions .btn { height: 38px; font-size: 10px !important; } .back.is-navigating, .btn.is-navigating { color: #c91d36 !important; background: var(--violet-soft) !important; transform: scale(.96) !important; pointer-events: none; } html[data-theme="dark"] .workflow-segmented.stepper { background: #222623; } html[data-theme="dark"] .workflow-segmented .step.active { color: #fff !important; background: #323734 !important; } html[data-theme="dark"] .preview-col > .panel-head.preview-controlbar { background: #171a18; } html[data-theme="dark"] .preview-controlbar .tool { color: #c4cac6; background: #222623; border-color: var(--line); } .metric-icon [data-lucide], .metric-icon svg, .tile-icon [data-lucide], .tile-icon svg, .panel-icon [data-lucide], .panel-icon svg, .earn-icon [data-lucide], .earn-icon svg { width: 17px; height: 17px; } .step-num svg, .process-step i svg { width: 13px; height: 13px; } .dialog-icon svg { width: 24px; height: 24px; } .btn { min-height: 42px !important; height: 42px !important; padding-inline: 15px; font-size: 13px !important; } .workflow-segmented.stepper { height: 44px; padding: 4px; } .workflow-segmented .step { min-height: 36px; height: 36px; padding-inline: 15px; font-size: 12px; } .panel-top h2, .earn-card h2, .records h2, .agent-panel h2, .insight-list h2 { font-size: 17px !important; } .panel-top select { min-height: 40px; font-size: 13px !important; } .empty-state strong, .insight strong { font-size: 14px !important; } .empty-state span, .insight p { font-size: 12px !important; } .modal h2 { font-size: 18px !important; } .modal p, .modal input { font-size: 13px !important; } .modal input { min-height: 42px; } /* Unified studio headers and preview controls. */ .studio .copilot-panel > .panel-head, .studio .preview-panel > .panel-head, .studio .review-panel > .panel-head, .review-aligned-workspace .configure-copilot-panel > .panel-head, .review-aligned-workspace .configure-preview-panel > .panel-head, .review-aligned-workspace .configure-inspector-panel > .panel-head { min-height: 64px !important; height: 64px !important; flex-basis: 64px !important; padding-inline: 16px !important; } .live-state, .configure-workspace .panel-head > span { font-size: 12px !important; } .panel-icon { width: 34px; height: 34px; border-radius: 10px; } .studio .tool-btn, .configure-preview-toolbar .configure-tool-button { min-height: 42px !important; height: 42px !important; padding-inline: 13px; font-size: 13px !important; } .studio .tool-btn.icon-only, .configure-preview-toolbar #refreshBtn, .studio .preview-share-btn { width: 42px; min-width: 42px; height: 42px !important; } .configure-workspace .field label, .configure-workspace .range-field label, .configure-workspace .field-label { font-size: 12px !important; } .configure-workspace .field input, .configure-workspace .field select, .configure-workspace .segment { min-height: 42px; height: 42px; font-size: 13px !important; } .review-aligned-workspace .footer-actions .btn, .studio .inspector-footer .btn { min-height: 44px !important; height: 44px !important; font-size: 14px !important; } /* Complete transient, modal and secondary-page type audit. These components were still using the original half-scale prototype values. */ .toast { min-height: 40px; padding: 10px 14px; display: flex; align-items: center; border-radius: 10px; font-size: 13px !important; line-height: 1.35; } .popover-title { font-size: 14px !important; } .dialog h2 { font-size: 18px !important; } .dialog > p { font-size: 13px !important; } /* Rewards Wallet — English console reconstruction */ .wallet-page-heading .heading-actions .btn { min-height: 40px; padding: 0 15px; font-size: 13px; font-weight: 750; } .wallet-connect-banner .btn { min-height: 38px; padding: 0 13px; font-size: 12px; font-weight: 760; } .wallet-connect-banner .btn svg { width: 15px; height: 15px; } .wallet-brand-task .btn { min-height: 36px; font-size: 11px; font-weight: 750; } .wallet-brand-task-inline .btn { align-self: center; } .wallet-current-plan .btn.secondary { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); } .wallet-current-plan .btn.secondary:hover { background: rgba(255,255,255,.13); } .wallet-plan-card > .btn { width: 100%; min-height: 39px; margin-top: auto; font-size: 11px; font-weight: 760; } .wallet-billing-card .btn { min-height: 36px; font-size: 10.5px; font-weight: 750; } .wallet-billing-card .btn svg { width: 15px; height: 15px; } html[data-theme="dark"] :is(.btn.primary,.send,.configure-send) { color: #fff !important; background: linear-gradient(135deg,var(--violet),var(--violet-2)) !important; box-shadow: 0 9px 24px rgba(91,69,230,.3) !important; } html[data-theme="dark"] :is(.btn.primary,.send,.configure-send):hover { filter: brightness(1.08); box-shadow: 0 11px 28px rgba(91,69,230,.38) !important; } html[data-theme="dark"] :is(button,input,textarea,select):focus-visible { outline-color: rgba(128,108,255,.42) !important; } html[data-theme="dark"] .workflow-segmented.stepper { background: #111915; border-color: var(--line); } html[data-theme="dark"] .workflow-segmented .step { color: #7f8a84 !important; background: transparent !important; } html[data-theme="dark"] .workflow-segmented .step:hover { color: #cbd3cf !important; background: #18211c !important; } html[data-theme="dark"] .workflow-segmented .step.active { color: #fff !important; background: #242d28 !important; box-shadow: inset 0 0 0 1px #303c35; } html[data-theme="dark"] .configure-workspace .configure-col, html[data-theme="dark"] .configure-workspace .panel-head, html[data-theme="dark"] .configure-workspace .chat-body, html[data-theme="dark"] .configure-workspace .chat-composer, html[data-theme="dark"] .configure-workspace .preview-status, html[data-theme="dark"] .configure-workspace .footer-actions { background: #101713 !important; border-color: var(--line) !important; } html[data-theme="dark"] .configure-workspace .preview-col, html[data-theme="dark"] .review-aligned-workspace .preview-controlbar, html[data-theme="dark"] .preview-col > .panel-head.preview-controlbar { background: #0f1713 !important; } html[data-theme="dark"] .configure-preview-toolbar .configure-tool-button, html[data-theme="dark"] .preview-controlbar .tool { color: #c2cbc6; background: #151e19; border-color: #2b3630; } html[data-theme="dark"] .configure-preview-toolbar .configure-tool-button:hover, html[data-theme="dark"] .preview-controlbar .tool:hover { color: #fff; background: #202a24; border-color: #3a4840; } html[data-theme="dark"] .configure-workspace :is(.field input,.field select) { color: var(--ink); background: #0c1410; border-color: #2b3730; } html[data-theme="dark"] .configure-workspace :is(.field input,.field select):focus { border-color: #6555c8; box-shadow: 0 0 0 3px rgba(109,85,246,.13); outline: 0; } html[data-theme="dark"] .configure-workspace :is(.field label, .range-field label, .field-label) { color: #b7c0bb; } html[data-theme="dark"] .configure-workspace .segmented { background: #0a110e; } html[data-theme="dark"] .configure-workspace .segment { color: #7f8a84 !important; background: transparent !important; } html[data-theme="dark"] .configure-workspace .segment:hover { color: #d4dcd8 !important; background: #18211c !important; } html[data-theme="dark"] .configure-workspace .segment.active { color: #fff !important; background: #242d28 !important; box-shadow: inset 0 0 0 1px #38443e; } html[data-theme="dark"] .configure-workspace .setting-title button, html[data-theme="dark"] .configure-workspace .range-field output { color: #a897ff; } /* Step 3 — same dark palette, no layout changes. */ html[data-theme="dark"] .studio, html[data-theme="dark"] .studio > .panel, html[data-theme="dark"] .studio .panel-head, html[data-theme="dark"] .studio .copilot-panel, html[data-theme="dark"] .studio .review-panel, html[data-theme="dark"] .studio .preview-panel, html[data-theme="dark"] .studio .preview-footer, html[data-theme="dark"] .studio .inspector-footer { color: var(--text); background: #101713 !important; border-color: var(--line) !important; } html[data-theme="dark"] .studio .preview-panel > .panel-head { background: #0f1713 !important; } html[data-theme="dark"] .studio .tool-btn { color: #c2cbc6; background: #151e19; border-color: #2b3630; } html[data-theme="dark"] .studio .tool-btn:hover { color: #fff; background: #202a24; border-color: #3a4840; } html[data-theme="dark"] .studio .tool-btn.active, html[data-theme="dark"] .studio .preview-share-btn { color: #b5a9ff; background: #20223a; border-color: #3b3f68; } html[data-theme="dark"] .studio .tool-btn.active:hover, html[data-theme="dark"] .studio .preview-share-btn:hover { color: #fff; background: #292d4b; border-color: #504f87; } html[data-theme="dark"] .studio .field, html[data-theme="dark"] .studio input, html[data-theme="dark"] .studio select, html[data-theme="dark"] .studio textarea { color: var(--ink); background: #0c1410; border-color: #2b3730; } html[data-theme="dark"] .studio :is(.field,input,select,textarea):focus { border-color: #6555c8; box-shadow: 0 0 0 3px rgba(109,85,246,.13); outline: 0; } .prototype-actions .btn { min-width:112px; } .tabs-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .tile-actions .btn { flex:1; } .panel-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; } .panel-top h2 { margin:0; color:var(--ink); font-size:13px; } .panel-top select { height:31px; border:1px solid var(--line); border-radius:9px; padding:0 10px; color:#656b78; background:#fff; font-size:8px; } .empty-state { min-height:190px; display:grid; place-items:center; text-align:center; color:#9ca1ad; } .empty-state strong { display:block; color:#5e6471; font-size:10px; } .empty-state span { display:block; margin-top:6px; font-size:8px; } .modal-layer { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:18px; background:rgba(18,20,29,.38); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:.2s; } .modal-layer.show { opacity:1; pointer-events:auto; } .modal { width:min(420px,100%); padding:22px; border-radius:18px; background:#fff; box-shadow:var(--shadow-lg); transform:translateY(10px); transition:.2s; } .modal-layer.show .modal { transform:none; } .modal h2 { margin:0; color:var(--ink); font-size:15px; } .modal p { margin:7px 0 16px; color:var(--muted); font-size:8px; line-height:1.5; } .modal input { width:100%; height:37px; border:1px solid var(--line); border-radius:9px; padding:0 10px; font-size:8px; } .modal-actions { margin-top:15px; display:flex; justify-content:flex-end; gap:7px; } /* ===== console/styles/views.css ===== */ /* 页面级样式（五路由）。UI-A 阶段原样收纳，后续随页迁移逐步拆分到各自视图文件。 */ /* 由产品英文版 Demo 移植（shared-css.txt + shared-appCss.txt），保真为先，未做审美再创作。 分桶规则：选择器语义分桶 + 顺序保真定点校正——跨切面规则（同时命中多桶选择器） 一律降到更早加载的桶，确保拆分后层叠顺序与源文件完全一致。 加载顺序固定为 tokens → base → shell → components → views，不可调换。 */ * { box-sizing:border-box; } .campaign-bar { min-height:67px; flex:0 0 67px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .campaign-left { display:flex; align-items:center; gap:12px; } .back:hover { color:var(--ink); box-shadow:var(--shadow); } .meta-dot { width:3px; height:3px; border-radius:50%; background:#b8bbc4; } /* Step 1 */ .create-page { flex:1; min-height:0; display:flex; flex-direction:column; overflow:auto; padding:36px 7vw 28px; } .create-hero { text-align:center; } .create-hero .eyebrow { color:var(--violet); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .create-hero h1 { font-size:28px; margin-top:9px; } .create-hero p { margin:9px auto 0; color:var(--muted); font-size:11px; } .template-stage { flex:0 0 320px; height:320px; min-height:320px; display:grid; place-items:center; position:relative; margin:10px 0; overflow:hidden; } .create-page .template-mode-stage, .create-page .scratch-stage { transition:opacity .2s ease, transform .24s cubic-bezier(.2,.8,.2,1), visibility 0s linear .24s; } .create-page .template-mode-stage { position:absolute; inset:0; display:grid; place-items:center; } .create-page .scratch-stage { position:absolute; left:50%; top:50%; z-index:4; width:min(440px,76vw); min-height:142px; padding:24px 28px; display:flex; align-items:center; gap:18px; border:1px dashed #d8d3ca; border-radius:22px; color:var(--ink); background:rgba(255,255,255,.76); box-shadow:0 16px 38px rgba(25,28,41,.06); opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-46%) scale(.98); } .create-page .scratch-stage-icon { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:15px; color:#d91f3b; background:var(--violet-soft); } .create-page .scratch-stage strong { display:block; color:var(--ink); font-size:16px; line-height:1.3; } .create-page .scratch-stage p { max-width:320px; margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.5; } .create-page[data-create-mode="scratch"] .template-mode-stage { opacity:0; visibility:hidden; pointer-events:none; transform:scale(.985); } .create-page[data-create-mode="scratch"] .scratch-stage { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,-50%) scale(1); transition-delay:.05s,.05s,0s; } .template-deck { width:600px; height:300px; position:relative; } .template-card img { width:100%; height:160px; object-fit:cover; border-radius:12px; } .template-card h3 { margin:11px 2px 0; color:var(--ink); font-size:13px; } .template-card p { margin:4px 2px; color:var(--muted); font-size:8px; } .template-card footer { position:absolute; left:0; right:0; bottom:0; height:37px; padding:0 12px; display:flex; align-items:center; justify-content:space-between; color:#6155c8; background:#f0eeff; font-size:8px; font-weight:720; } .template-card.active { left:50%; transform:translateX(-50%) scale(1.06); z-index:3; border:2px solid var(--violet); box-shadow:0 26px 60px rgba(74,61,188,.22); } .template-card.prev { left:50%; transform:translateX(-130%) rotate(-7deg) scale(.9); z-index:1; opacity:.74; } .template-card.next { left:50%; transform:translateX(30%) rotate(7deg) scale(.9); z-index:1; opacity:.74; } .deck-arrow:hover { color:var(--violet); transform:translateY(-50%) scale(1.05); } .deck-arrow.left { left:2vw; } .deck-arrow.right { right:2vw; } .prompt-panel { max-width:900px; width:100%; margin:0 auto; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 18px 45px rgba(25,28,41,.09); overflow:hidden; } .prompt-panel textarea { width:100%; height:92px; resize:none; border:0; outline:0; padding:18px; color:var(--ink); font-size:11px; } .prompt-footer { min-height:58px; border-top:1px solid var(--line); padding:9px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .mode-toggle { padding:3px; border-radius:10px; background:#eff0f3; display:flex; } .prompt-actions { display:flex; gap:7px; } .idea-chips { max-width:900px; margin:10px auto 0; display:flex; justify-content:center; gap:6px; flex-wrap:wrap; } .idea-chip:hover { color:var(--violet); border-color:#cbc5ff; } .generating { position:fixed; inset:0; z-index:90; display:grid; place-items:center; background:rgba(18,20,29,.38); backdrop-filter:blur(7px); opacity:0; pointer-events:none; transition:.2s; } .generating.show { opacity:1; pointer-events:auto; } .generating-card { width:340px; border-radius:18px; padding:24px; background:#fff; box-shadow:var(--shadow-lg); } .generating-card h2 { margin:16px 0 5px; color:var(--ink); font-size:15px; } .generating-card p { margin:0; color:var(--muted); font-size:9px; } /* Step 2 */ .configure-workspace { flex:1; min-height:0; display:grid; grid-template-columns:minmax(285px,330px) minmax(390px,1fr) minmax(320px,360px); border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); overflow:hidden; } .configure-col { min-width:0; min-height:0; display:flex; flex-direction:column; } .configure-col+.configure-col { border-left:1px solid var(--line); } .chat-body, .settings-body { flex:1; min-height:0; overflow:auto; padding:14px; scrollbar-width:thin; scrollbar-color:#dedfe5 transparent; } .message { max-width:87%; margin-bottom:10px; border-radius:12px; padding:10px 11px; font-size:9px; line-height:1.55; } .message.agent { background:#f1f2f5; color:#4c515e; border-bottom-left-radius:4px; } .message.user { margin-left:auto; background:linear-gradient(145deg,#7462f6,#6152e8); color:#fff; border-bottom-right-radius:4px; } .process-card { border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; margin:3px 0 11px; } .process-steps { display:grid; gap:7px; padding:0 10px 10px; } .process-step { display:flex; align-items:center; gap:7px; color:#777c89; font-size:8px; } .process-step i { width:16px; height:16px; flex:none; /* #187:长文本挤压下保持圆形尺寸 */ border-radius:50%; display:grid; place-items:center; color:var(--green); background:var(--green-soft); font-style:normal; font-size:7px; } .chat-composer { padding:10px; border-top:1px solid var(--line); display:flex; gap:7px; } .chat-composer input { flex:1; height:35px; border:1px solid var(--line); border-radius:9px; padding:0 10px; color:var(--ink); font-size:8px; } .chat-composer button { width:35px; border:0; border-radius:9px; color:#fff; background:var(--violet); } .preview-col { background:#f7f7fa; } .preview-tools { display:flex; align-items:center; gap:6px; } .phone-stage { flex:1; min-height:0; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 45%,#fff,#f0f1f4); } .phone-wrap { transform:scale(.73); } .phone { width:350px; height:700px; padding:7px; border-radius:42px; background:linear-gradient(145deg,#252832,#090a0e); box-shadow:0 36px 65px rgba(25,28,39,.28); } .phone-screen { width:100%; height:100%; border-radius:35px; overflow:hidden; background:#20311c; } .phone iframe { width:100%; height:100%; border:0; } .preview-status { height:36px; border-top:1px solid var(--line); padding:0 12px; display:flex; align-items:center; justify-content:space-between; background:#fff; color:#7d8290; font-size:7px; } .status-live { display:flex; align-items:center; gap:5px; } .status-live i { width:6px; height:6px; border-radius:50%; background:#22ad79; } .settings-tabs { display:flex; gap:14px; height:100%; } .setting-section { margin-bottom:17px; } .setting-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; color:#777d8b; font-size:8px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; } .setting-title button { border:0; background:transparent; color:var(--violet); font-size:7px; text-transform:none; letter-spacing:0; } .tower-card { border:1px solid var(--line); border-radius:11px; margin-bottom:7px; overflow:hidden; } .tower-head { width:100%; height:38px; border:0; padding:0 10px; display:flex; align-items:center; gap:8px; background:#fff; color:#505562; text-align:left; font-size:8px; font-weight:700; } .tower-head img { width:25px; height:25px; object-fit:contain; } .tower-head span:last-child { margin-left:auto; color:#999da8; } .tower-body { display:none; padding:0 10px 10px; } .tower-card.open .tower-body { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } .footer-actions { height:62px; flex:0 0 62px; border-top:1px solid var(--line); padding:10px 14px; display:flex; align-items:center; justify-content:space-between; background:#fff; } .unsaved { display:flex; align-items:center; gap:6px; color:#8b6b2b; font-size:7px; } .unsaved i { width:6px; height:6px; border-radius:50%; background:#d8972c; } .action-group { display:flex; gap:7px; } .save-toast { color:var(--green); } @media(max-width:1180px) { .app{ grid-template-columns:74px minmax(0,1fr)}.brand-copy,.nav-label,.nav-text,.nav-badge,.workspace-copy{ display:none}.brand,.nav-item,.workspace-switch{ justify-content:center; padding-left:0; padding-right:0}.configure-workspace{ grid-template-columns:290px minmax(390px,1fr) 330px}.command{ display:none}; } @media(max-width:920px) { body{ overflow:auto}.app{ display:block; height:auto}.sidebar{ display:none}.main{ height:auto; overflow:visible}.topbar{ position:sticky; top:0}.configure-workspace{ display:flex; flex-direction:column; overflow:visible}.configure-col{ min-height:620px}.configure-col+.configure-col{ border-left:0; border-top:1px solid var(--line)}.create-page{ padding:28px 18px}.template-deck{ width:min(600px,88vw)}; } @media(max-width:600px) { .topbar{ padding:0 12px}.breadcrumb span:not(:last-child),.credits{ display:none}.page{ padding:12px 10px}.campaign-bar{ height:auto; flex-direction:column; align-items:flex-start}.stepper{ justify-content:flex-start; overflow:auto}.step{ min-width:105px}.create-hero h1{ font-size:22px}.template-card{ width:180px}.template-deck{ height:275px}.template-card.prev{ transform:translateX(-110%) rotate(-7deg) scale(.82)}.template-card.next{ transform:translateX(10%) rotate(7deg) scale(.82)}.prompt-footer{ align-items:flex-start; flex-direction:column}.prompt-actions{ width:100%}.prompt-actions .btn{ flex:1}.configure-col{ min-height:580px}.phone-wrap{ transform:scale(.67)}; } @media(max-width:600px) { .create-page .template-stage { flex-basis:288px; height:288px; min-height:288px; } .create-page .scratch-stage { width:min(400px,88vw); min-height:132px; padding:20px; } } @media(prefers-reduced-motion:reduce) { .create-page .template-mode-stage, .create-page .scratch-stage { transition:none; } } .mode-toggle { display: inline-flex; align-items: center; gap: 2px; } :is(.filter-chip, .seg-tab) { min-height: 32px; height: 32px; } button:disabled, button[aria-disabled="true"] { cursor: not-allowed; opacity: .48; } button > svg, button > i[data-lucide] { display: block; flex: 0 0 auto; margin: 0; } .airvana-brand-symbol { width: 36px; height: 40px; display: block; flex: 0 0 36px; position: relative; } .airvana-dot { position: absolute; display: block; border-radius: 50%; } .airvana-dot-red { width: 22px; height: 22px; left: 0; top: 1px; background: #ff3148; } .airvana-dot-black { width: 22px; height: 22px; left: 0; bottom: 0; background: #050505; } .airvana-dot-blue { width: 13px; height: 13px; right: 0; bottom: 4px; background: #2e6cff; } .airvana-wordmark { min-width: 0; display: block !important; position: relative; padding-bottom: 8px; color: #050505 !important; font-size: 26px !important; font-weight: 900 !important; line-height: .88 !important; letter-spacing: -1.6px !important; text-transform: lowercase; } .airvana-wordmark small { position: absolute; right: 1px; bottom: -2px; color: #050505 !important; font-size: 9px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -.2px !important; } .language-trigger[data-locale="zh"] { color: var(--brand, #ff3148) !important; background: var(--soft) !important; } .language-trigger > svg { width: var(--control-icon); height: var(--control-icon); } .invite-trigger { min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(255,49,72,.12); border-radius: 10px; color: #c91d36; background: #fff0f1; font-size: 9px; font-weight: 760; white-space: nowrap; } .invite-trigger:hover { border-color: rgba(255,49,72,.22); background: #ffe8eb; } .invite-trigger > svg { width: 15px; height: 15px; } .filter-chip.active { color: #fff !important; background: #050505 !important; border-color: #050505 !important; } .status-pill, .project-status { background: #050505 !important; color: #fff !important; } .cover-badge:first-child { color: #d91f3b; background: #fff0f1; } input[type="range"] { accent-color: var(--violet); } .template-card footer { color: #c91d36 !important; background: #fff0f1 !important; } .template-card.active { box-shadow: 0 26px 60px rgba(255,49,72,.16) !important; } .message.user, .gen-orb, .chat-composer button { background: linear-gradient(135deg, var(--violet), var(--violet-2)) !important; } .gen-orb { color: #fff !important; box-shadow: 0 9px 24px rgba(255,49,72,.24), 0 0 0 8px rgba(255,49,72,.08) !important; } .gen-orb svg, .gen-orb [data-lucide] { width: 24px !important; height: 24px !important; color: #fff !important; stroke: #fff !important; stroke-width: 2.2 !important; opacity: 1 !important; } .generation-indicator { width: 100%; margin-bottom: 16px; } .generation-status-line { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #696d78; font-size: 8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; } .generation-dots { display: flex; align-items: center; gap: 4px; } .generation-dots i { width: 5px; height: 5px; display: block; border-radius: 50%; background: #ff3148; opacity: .26; transform: scale(.82); will-change: transform,opacity; } .generating.show .generation-dots i { animation: generationDot 1.05s cubic-bezier(.4,0,.2,1) infinite; } .generating.show .generation-dots i:nth-child(2) { animation-delay: .14s; } .generating.show .generation-dots i:nth-child(3) { animation-delay: .28s; } .generation-track { width: 100%; height: 8px; overflow: hidden; position: relative; border-radius: 8px; background: #f0eeea; } .generation-track > i { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; border-radius: inherit; background: linear-gradient(90deg,#ff3148,#ff6a35); box-shadow: 0 0 14px rgba(255,49,72,.22); transform: translate3d(0,0,0) scaleX(.025); transform-origin: left center; backface-visibility: hidden; will-change: transform; } .generation-track > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg,transparent 20%,rgba(255,255,255,.66) 48%,transparent 76%); transform: translate3d(-110%,0,0); will-change: transform; } .generating.show .generation-track > i { animation: generationFill 1.36s cubic-bezier(.22,.72,.18,1) forwards; } .generating.show .generation-track > i::after { animation: generationShimmer .82s linear infinite; } .legacy-generation-progress { display: none !important; } /* Avoid recompositing a full-screen backdrop filter while the progress moves. */ .generating { background: radial-gradient(circle at 50% 38%,rgba(37,38,39,.34),rgba(20,22,21,.56)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .generating-card { contain: paint; backface-visibility: hidden; transform: translate3d(0,0,0); } .upload-drop { color: #c91d36 !important; background: #fff7f5 !important; border-color: rgba(255,49,72,.35) !important; } .insight { background: #fff7f5 !important; } .balance-dark { background: radial-gradient(circle at 90% 0,rgba(255,49,72,.2),transparent 35%),linear-gradient(145deg,#101612,#080b09) !important; } /* Three-step segmented workflow, integrated into the campaign header. */ .campaign-bar { min-height: 58px !important; flex: 0 0 58px !important; } #historyBtn { display: none !important; } .campaign-right { position: relative; flex-wrap: nowrap; margin-left: auto; } #moreBtn { display: none !important; } .campaign-right .save-state { order: 1; } .campaign-right #shareBtn { order: 2; } .campaign-right .workflow-segmented { order: 3; margin-left: 4px; } .create-hero .eyebrow { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 12px; color: #c91d36 !important; background: var(--violet-soft); letter-spacing: .08em !important; } .preview-controlbar .preview-tools { height: 100%; display: flex; align-items: center; gap: 6px; } .preview-controlbar .preview-tools + .preview-tools { position: relative; padding-left: 11px; } .preview-controlbar .preview-tools + .preview-tools::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 22px; background: var(--line); transform: translateY(-50%); } .preview-controlbar #versionBtn { min-width: 112px; } .preview-controlbar #deviceBtn { min-width: 136px; } .preview-controlbar #undoBtn, .preview-controlbar #redoBtn, .preview-controlbar #refreshBtn { width: 40px; padding: 0; } .phone-stage { padding: 12px 8px 18px !important; position: relative; isolation: isolate; display: flex !important; align-items: flex-start !important; justify-content: center !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; scrollbar-width: thin; scrollbar-color: #c9c6c0 transparent; background: radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.9) 0,rgba(235,233,227,.92) 48%,rgba(216,213,205,.96) 100%), linear-gradient(180deg,#efeee9,#d9d6ce) !important; background-attachment: local; } .phone-stage::before { content: ""; position: absolute; z-index: 0; inset: -45px; filter: blur(24px) saturate(.78); opacity: .34; transform: scale(1.08); pointer-events: none; display: none; } .phone-stage::after { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(circle at 50% 44%,rgba(255,255,255,.18),rgba(247,247,244,.66) 74%); pointer-events: none; display: none; } .phone-wrap { width: clamp(320px,46vh,470px) !important; max-width: calc(100% - 8px) !important; height: auto !important; aspect-ratio: 1 / 2; position: relative; z-index: 1; transform: none !important; flex: 0 0 auto; margin: 6px auto 20px; } .phone-wrap .phone { width: 100% !important; height: 100% !important; box-shadow: 0 28px 64px rgba(31,27,21,.28),0 0 0 1px rgba(255,255,255,.55) !important; } .preview-status { min-height: 40px !important; height: 40px !important; padding: 0 14px !important; font-size: 8.5px !important; } .preview-status #buildSize { font-weight: 650; } /* Step 2 now uses the same visual shell and proportions as the review workspace. */ .review-aligned-workspace { grid-template-columns: minmax(360px,1fr) minmax(520px,620px) minmax(380px,1fr) !important; border: 1px solid var(--line-strong) !important; border-radius: 18px !important; box-shadow: var(--shadow-1) !important; } .review-aligned-workspace .configure-copilot-panel, .review-aligned-workspace .configure-preview-panel, .review-aligned-workspace .configure-inspector-panel { min-width: 0; min-height: 0; background: #fff; } .review-aligned-workspace .configure-preview-panel, .review-aligned-workspace .configure-inspector-panel { border-left: 1px solid var(--line) !important; } .review-aligned-workspace .footer-actions { justify-content: flex-end; } .review-aligned-workspace .footer-actions .action-group { width: 100%; min-width: 0; display: flex; align-items: center; gap: 7px; } .campaign-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .campaign-title-row .status-pill { height: 21px; padding: 0 7px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; border-radius: 7px; color: var(--green); background: var(--green-soft); font-size: 8px; font-weight: 720; } .campaign-title-row .status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #23ad7b; } .configure-brief-card { margin: 12px 13px 0; flex: 0 0 auto; overflow: hidden; border: 1px solid #e4e1ff; border-radius: 12px; background: linear-gradient(145deg,#f7f5ff,#fbfbff); } .configure-brief-toggle { width: 100%; min-height: 39px; padding: 0 11px; display: flex; align-items: center; gap: 7px; border: 0; color: #4d456f; background: transparent; font-size: 9px; font-weight: 720; text-align: left; } .configure-brief-toggle > svg { width: 15px; height: 15px; } .configure-brief-toggle .configure-brief-chevron { margin-left: auto; color: #8f87b5; transition: transform .18s; } .configure-brief-card.open .configure-brief-chevron { transform: rotate(180deg); } .configure-brief-content { padding: 0 11px 11px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; } .configure-brief-content:not([hidden]) { display: grid; } .configure-brief-content span { display: block; color: #9a94b4; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; } .configure-brief-content strong { display: block; margin-top: 3px; color: #4a465a; font-size: 8px; font-weight: 650; line-height: 1.35; } .review-aligned-workspace .review-style-chat { padding: 13px; } .review-style-composer { flex: 0 0 auto; padding: 10px 12px 12px !important; display: block !important; border-top: 1px solid var(--line); background: #fff; } .configure-composer-shell { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; transition: border-color .18s, box-shadow .18s; } .configure-composer-shell:focus-within { border-color: #ff9aa6; box-shadow: 0 0 0 3px rgba(255,49,72,.08); } .review-style-composer textarea { width: 100%; min-height: 47px; max-height: 88px; padding: 11px 11px 5px; resize: none; border: 0; outline: 0; color: var(--ink); background: #fff; font: inherit; font-size: 9px; line-height: 1.4; } .review-style-composer textarea::placeholder { color: #a3a7b3; } .configure-composer-tools { height: 34px; padding: 0 6px 6px 7px; display: flex; align-items: center; gap: 3px; } .configure-composer-tools > span { margin-left: 2px; color: #969aa6; font-size: 7px; } .review-style-composer .configure-composer-tool { width: 26px !important; min-width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 7px; color: #828795; background: transparent !important; box-shadow: none !important; } .review-style-composer .configure-composer-tool:hover { color: var(--ink); background: #f3f3f6 !important; } .review-style-composer .configure-composer-tool svg { width: 15px; height: 15px; } .review-style-composer .configure-send { width: 29px !important; min-width: 29px; height: 29px; margin-left: auto; padding: 0; display: grid; place-items: center; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(145deg,var(--red),var(--orange)) !important; box-shadow: 0 6px 14px rgba(255,49,72,.22); } .review-style-composer .configure-send svg { width: 15px; height: 15px; } .review-style-composer .configure-send svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .review-aligned-workspace .preview-controlbar { padding: 0 16px; justify-content: stretch; background: #faf9f7; } .configure-preview-toolbar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .configure-preview-toolbar .configure-tool-group { height: auto; display: flex; align-items: center; gap: 5px; padding: 0 !important; } .configure-preview-toolbar .configure-tool-group::before { display: none !important; } .configure-preview-toolbar #versionBtn { min-width: 112px; } .configure-preview-toolbar #deviceBtn { min-width: 136px; } .review-aligned-workspace .phone-wrap { transform: scale(var(--configure-zoom,1)) !important; transform-origin: top center; transition: transform .2s ease; } .review-style-preview-footer { min-height: 40px !important; height: 40px !important; padding: 0 12px !important; } .configure-quality { display: flex; align-items: center; gap: 6px; color: #6d7280; font-size: 8px; white-space: nowrap; } .configure-quality i { width: 6px; height: 6px; border-radius: 50%; background: #23ac7a; } .configure-zoom { display: flex; align-items: center; gap: 7px; } .configure-zoom button { width: 23px; min-width: 23px; height: 23px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 6px; color: #727887; background: transparent; } .configure-zoom button:hover { color: var(--ink); background: #f2f2f5; } .configure-zoom input { width: 84px; accent-color: var(--red); } .configure-zoom span { min-width: 28px; color: #777c89; font-size: 7px; text-align: right; } /* The preview and setting panels scroll independently inside the fixed workspace. */ .configure-workspace > .configure-col:last-child { min-width: 0; overflow: hidden; container-type: inline-size; container-name: settings-panel; } .configure-workspace .settings-body { width: 100%; min-width: 0; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: stable; overscroll-behavior: contain; } .configure-workspace .tower-card.open .tower-body { grid-template-columns: repeat(3,minmax(0,1fr)); } .configure-workspace input, .configure-workspace select { min-width: 0; max-width: 100%; } .configure-workspace .footer-actions { width: 100%; min-width: 0; position: relative; z-index: 3; } .configure-workspace .footer-actions .action-group { min-width: 0; flex: 0 0 auto; } /* Step 3 uses the same workspace shell and preview language as Step 2. */ .studio > .resizer { display: none !important; } .studio .preview-panel, .studio .review-panel { border-left: 1px solid var(--line); } .studio .preview-panel { container-type: inline-size; container-name: studio-preview; } .studio .review-panel { min-width: 0; overflow: hidden; container-type: inline-size; container-name: review-panel; } .studio .preview-toolbar { width: 100%; justify-content: space-between; gap: 10px; } .studio #versionBtn { min-width: 112px; } .studio #deviceBtn { min-width: 136px; } .studio .preview-share-btn:hover { color: #b91631; border-color: rgba(255,49,72,.3); background: #ffe5e8; } /* Keep the preview header focused: version, device, refresh and share only. */ #undoBtn, #redoBtn { display: none !important; } .studio .preview-toolbar, .review-aligned-workspace .configure-preview-toolbar { justify-content: center !important; gap: 10px; } .preview-toolbar-normalized { padding: 0 !important; } .preview-centered-controls { width: max-content; max-width: 100%; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; } .studio .preview-stage { padding: 12px 8px 18px; display: flex; align-items: flex-start; justify-content: center; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; scrollbar-width: thin; scrollbar-color: #c9c6c0 transparent; background: radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.9) 0,rgba(235,233,227,.92) 48%,rgba(216,213,205,.96) 100%), linear-gradient(180deg,#efeee9,#d9d6ce); background-attachment: local; } .studio .device-wrap { --scale: .72; width: clamp(320px,46vh,470px); max-width: calc(100% - 8px); height: auto; aspect-ratio: 1 / 2; flex: 0 0 auto; margin: 6px auto 20px; transform: scale(var(--scale)) !important; transform-origin: top center; transition: transform .22s ease; } .studio .device { width: 100%; height: 100%; } .studio .preview-footer { min-height: 40px; height: 40px; flex-basis: 40px; padding: 0 14px; font-size: 8.5px; } .studio .bubble.user, .studio .agent-avatar { background: linear-gradient(135deg,var(--violet),var(--violet-2)); } .studio .agent-avatar { box-shadow: 0 5px 14px rgba(255,49,72,.18); } .studio .brief-card { border-color: var(--line); background: #faf9f7; } .studio .brief-toggle { color: #555b68; } .studio .inspector-tab.active { color: #d91f3b; border-bottom-color: var(--violet); } .studio .check-item.complete .check-state { background: var(--violet); box-shadow: 0 5px 12px rgba(255,49,72,.18); } .studio #inspectorMenu { display: none !important; } .studio .inspector-scroll { padding-inline: clamp(10px,1.1vw,14px); scrollbar-gutter: auto; } .studio .section-title { min-width: 0; gap: 8px; } .studio .section-title span { min-width: 0; } .studio .section-title span:last-child { text-align: right; white-space: normal; } .studio .check-main, .studio .readiness, .studio .warning-note, .studio .detail-card { min-width: 0; max-width: 100%; } .studio .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } @media (min-width: 981px) and (max-width: 1399px) { .studio { grid-template-columns: minmax(230px,280px) minmax(340px,1fr) minmax(250px,290px) !important; } } @media (min-width: 1400px) { .studio { grid-template-columns: minmax(300px,min(29%,420px)) minmax(440px,1fr) minmax(320px,min(28%,420px)) !important; } } /* Configure panel information architecture: brand, agents and game rules. */ .configuration-panel-head { min-height: 60px !important; height: 60px !important; padding: 9px 12px !important; align-items: center; } .configuration-panel-head > div { min-width: 0; } .configuration-panel-head strong { display: block; color: var(--ink); font-size: 10.5px; line-height: 1.2; } .configuration-panel-head small { display: block; margin-top: 4px; color: #909590; font-size: 7px; } .configuration-panel-head > span { flex: 0 0 auto; padding: 5px 7px; border-radius: 8px; color: #7d817d; background: #f1f2ef; font-size: 7px; font-weight: 760; } .configure-workspace .settings-body.configuration-sections { padding: 10px; background: #f8f7f4; } .config-module { margin: 0 0 8px; overflow: hidden; border: 1px solid #e2ded6; border-radius: var(--radius-md); background: #fff; box-shadow: 0 2px 7px rgba(28,27,24,.025); } .config-module:last-child { margin-bottom: 0; } .config-module-toggle { width: 100%; min-height: 56px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; border: 0; color: var(--ink); background: #fff; text-align: left; } .config-module-toggle:hover { background: #faf9f6; } .config-module-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 9px; } .config-module-icon.game { color: #d91f3b; background: #fff0f1; } .config-module-icon > svg, .agent-hub-icon > svg { width: 17px; height: 17px; display: block; margin: 0 !important; } .config-module-copy { min-width: 0; flex: 1; } .config-module-copy strong { display: block; color: var(--ink); font-size: 9.5px; line-height: 1.2; } .config-module-copy small { display: block; margin-top: 4px; overflow: hidden; color: #898f8a; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; } .config-module-chevron { width: 15px; height: 15px; flex: 0 0 15px; color: #9ba09c; transition: transform .18s ease; } .config-module.open .config-module-chevron { transform: rotate(180deg); } .config-module-body { padding: 0 9px 9px; border-top: 1px solid #efede7; background: #fbfaf8; } .config-module-body[hidden] { display: none !important; } .partner-logo { width: 46px; height: 34px; flex: 0 0 46px; display: grid; place-items: center; overflow: hidden; border: 1px solid #eeece7; border-radius: 8px; background: #fff; } .partner-logo img { width: 38px; height: 25px; display: block; object-fit: contain; } .game-config-body { padding-top: 10px; } .game-config-body .setting-section { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #eceae4; } .game-config-body .setting-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .skin-preview { width: 48px; height: 42px; flex: 0 0 48px; overflow: hidden; border-radius: 8px; background: #eee; } .skin-preview img { width: 100%; height: 100%; display: block; object-fit: cover; } .skin-select-wrap label { min-width: 0; flex: 1; position: relative; } .skin-select-wrap label strong { display: block; overflow: hidden; color: var(--ink); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; } .skin-select-wrap select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; } .skin-select-wrap > svg { width: 14px; height: 14px; color: #909590; pointer-events: none; } /* Collapsible AI Agent center inside gameplay tuning. */ .agent-hub { margin-bottom: 16px; overflow: hidden; border: 1px solid #ddd9d0; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px rgba(28,27,24,.04); } .agent-hub-toggle { width: 100%; min-height: 62px; padding: 10px 11px; display: flex; align-items: center; gap: 10px; border: 0; color: var(--ink); background: linear-gradient(135deg,#fff8f5,#faf9f6); text-align: left; } .agent-hub-toggle:hover { background: #fff6f3; } .agent-hub-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; color: #d91f3b; background: var(--violet-soft); } .agent-hub-copy { min-width: 0; flex: 1; } .agent-hub-copy strong { display: block; font-size: 11px; line-height: 1.2; } .agent-hub-copy small { display: block; margin-top: 4px; overflow: hidden; color: #858a86; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; } .agent-avatar-stack { display: flex; align-items: center; padding-left: 8px; } .agent-avatar-stack i { width: 24px; height: 24px; margin-left: -8px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #ff3148; font-style: normal; } .agent-avatar-stack i:nth-child(2) { background: #15936f; } .agent-avatar-stack i:nth-child(3) { background: #b47418; } .agent-avatar-stack i:nth-child(4) { background: #5d4bc4; } .agent-avatar-stack span { font-size: 5px; font-weight: 850; letter-spacing: -.02em; } .agent-hub-chevron { width: 15px; height: 15px; color: #919691; transition: transform .18s; } .agent-hub.open .agent-hub-chevron { transform: rotate(180deg); } .agent-hub-body { padding: 0 8px 8px; display: grid; gap: 6px; background: #faf9f7; } .agent-hub-body[hidden] { display: none !important; } .agent-row-card { min-width: 0; min-height: 57px; display: flex; align-items: center; gap: 7px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; } .agent-open { min-width: 0; flex: 1; min-height: 55px; padding: 8px 6px 8px 9px; display: flex; align-items: center; gap: 9px; border: 0; color: #656b67; background: transparent; text-align: left; } .agent-open:hover { background: #faf9f6; } .agent-row-icon { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border-radius: 9px; color: #d91f3b; background: var(--violet-soft); } .agent-row-twin .agent-row-icon { color: #6d55f6; background: #f0ecff; } .agent-row-mood .agent-row-icon { color: #058f75; background: #e4f7f0; } .agent-row-coach .agent-row-icon { color: #3978d7; background: #eaf2ff; } .agent-row-smart-host .agent-row-icon { color: #a56a12; background: #fff3dc; } .agent-row-host .agent-row-icon { color: #0c8e69; background: #e4f7f0; } .agent-row-marketing .agent-row-icon { color: #a56a12; background: #fff3dc; } .agent-open > span:nth-child(2) { min-width: 0; flex: 1; } .agent-open strong { display: block; color: var(--ink); font-size: 9px; line-height: 1.25; } .agent-open small { display: block; margin-top: 3px; overflow: hidden; color: #929793; font-size: 7px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .agent-open em { flex: 0 0 auto; color: #d91f3b; font-size: 7px; font-style: normal; font-weight: 760; } .agent-open > svg:last-child { width: 13px; height: 13px; color: #a9ada9; } .agent-mini-switch { width: 34px; height: 20px; flex: 0 0 34px; margin-right: 9px; padding: 2px; display: flex; align-items: center; border: 0; border-radius: 12px; background: #dfe2df; transition: background .18s; } .agent-mini-switch i { width: 16px; height: 16px; display: block; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(27,31,28,.18); transition: transform .18s; } .agent-mini-switch.on { background: var(--violet); } .agent-mini-switch.on i { transform: translateX(14px); } .agent-hub.config-module { margin-bottom: 8px; border-color: #e2ded6; border-radius: var(--radius-md); box-shadow: 0 2px 7px rgba(28,27,24,.025); } .agent-hub.config-module .agent-hub-toggle { min-height: 56px; padding: 8px 10px; gap: 8px; background: #fff; } .agent-hub.config-module .agent-hub-toggle:hover { background: #faf9f6; } .agent-hub.config-module .agent-hub-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; color: #7b61e8; background: #f0ecff; } .agent-hub.config-module .agent-hub-copy strong { font-size: 9.5px; } .agent-hub.config-module .agent-hub-copy small { font-size: 7px; } .agent-hub.config-module .agent-avatar-stack { display: none; } .agent-hub.config-module .agent-hub-body { padding: 8px; border-top: 1px solid #efede7; background: #fbfaf8; } .agent-hub.config-module .agent-row-card { min-height: 47px; border-color: #e4e1da; border-radius: 10px; box-shadow: none; } .agent-hub.config-module .agent-open { min-height: 45px; } .configure-workspace .chat-composer button { display: grid !important; place-items: center !important; padding: 0 !important; line-height: 0 !important; } .configure-workspace .chat-composer button > svg { width: 18px !important; height: 18px !important; display: block; margin: 0 !important; transform: none !important; } /* Referral entry and dialog. */ body.invite-dialog-open { overflow: hidden; } .invite-layer { position: fixed; z-index: 180; inset: 0; padding: 20px; display: grid; place-items: center; background: rgba(19,21,20,.52); opacity: 0; pointer-events: none; backdrop-filter: blur(7px); transition: opacity .18s ease; } .invite-layer[hidden] { display: none !important; } .invite-layer.show { opacity: 1; pointer-events: auto; } .invite-dialog { width: min(430px,100%); max-height: min(760px,calc(100vh - 40px)); overflow: hidden auto; border: 0; border-radius: 22px; color: var(--ink); background: #fff; box-shadow: 0 30px 90px rgba(12,14,13,.3); transform: translateY(12px) scale(.985); transition: transform .2s ease; } .invite-layer.show .invite-dialog { transform: none; } .invite-hero { min-height: 205px; position: relative; padding: 25px 28px 22px; color: #fff; text-align: center; background: linear-gradient(135deg,#ff3148 0%,#ff6a35 100%); } .invite-close { width: 34px; height: 34px; position: absolute; top: 14px; right: 14px; display: grid; place-items: center; border: 0; border-radius: 10px; color: #fff; background: rgba(255,255,255,.14); } .invite-close:hover { background: rgba(255,255,255,.22); } .invite-gift { width: 48px; height: 48px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.17); } .invite-gift svg { width: 23px; height: 23px; } .invite-hero h2 { margin: 0; color: #fff; font-size: 18px; line-height: 1.2; letter-spacing: -.025em; } .invite-reward { margin-top: 10px; display: flex; align-items: baseline; justify-content: center; gap: 7px; } .invite-reward strong { font-size: 36px; line-height: 1; letter-spacing: -.04em; } .invite-reward span { font-size: 12px; font-weight: 720; } .invite-hero p { margin: 14px 0 0; color: rgba(255,255,255,.84); font-size: 9px; } .invite-body { padding: 20px 24px 23px; } .invite-code-card { min-height: 66px; padding: 11px 12px 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px dashed #d9ddd9; border-radius: 13px; background: #fbfcfb; } .invite-code-card small { display: block; color: #858c87; font-size: 8px; } .invite-code-card strong { display: block; margin-top: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; letter-spacing: .09em; } .invite-code-card button { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; font-size: 8px; font-weight: 740; } .invite-link-button { width: 100%; min-height: 42px; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(110deg,var(--violet),var(--violet-2)); box-shadow: 0 9px 22px rgba(255,49,72,.17); font-size: 9px; font-weight: 760; } .invite-stats { margin-top: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .invite-stats article { min-height: 70px; display: grid; place-items: center; align-content: center; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: center; } .invite-stats strong { color: #d91f3b; font-size: 18px; } .invite-stats span { margin-top: 5px; color: #858c87; font-size: 8px; } .invite-steps { margin: 18px 0 0; padding: 0; display: grid; gap: 10px; list-style: none; } .invite-steps li { display: flex; align-items: center; gap: 10px; color: #434a45; font-size: 8.5px; line-height: 1.4; } .invite-steps li > svg { width: 30px; height: 30px; flex: 0 0 30px; padding: 8px; border-radius: 9px; color: #d91f3b; background: #fff0f1; } .invite-steps b { margin-right: 7px; color: #d91f3b; } .invite-note { margin: 17px 0 0; color: #9aa09b; font-size: 7.5px; line-height: 1.55; } /* Shared agent configuration dialogs. */ body.agent-dialog-open { overflow: hidden; } .agent-layer { position: fixed; z-index: 140; inset: 0; padding: 24px; display: flex; align-items: center; justify-content: center; background: rgba(27,29,27,.46); opacity: 0; pointer-events: none; transition: opacity .18s; } .agent-layer[hidden] { display: none !important; } .agent-layer.show { opacity: 1; pointer-events: auto; } .agent-sheet, .marketing-sheet { width: min(560px,100%); max-height: min(820px,calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.75); border-radius: 24px; color: var(--ink); background: #fff; box-shadow: 0 32px 90px rgba(22,25,23,.28); transform: translateY(12px) scale(.985); transition: transform .2s ease; } .marketing-sheet { width: min(760px,calc(100vw - 40px)); height: min(720px,calc(100vh - 48px)); } .agent-layer.show .agent-sheet, .agent-layer.show .marketing-sheet { transform: none; } .agent-sheet-header { min-height: 82px; flex: 0 0 auto; padding: 15px 18px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); } .agent-sheet-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 13px; color: #d91f3b; background: var(--violet-soft); } .agent-sheet-icon.marketing { color: #a46a13; background: #fff1d7; } .agent-sheet-header > div { min-width: 0; flex: 1; } .agent-sheet-header h2 { margin: 0; color: var(--ink); font-size: 16px; letter-spacing: -.025em; } .agent-sheet-header p { margin: 4px 0 0; color: #858c87; font-size: 8.5px; line-height: 1.4; } .agent-close { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #59625d; background: #f0f3f0; } .agent-close:hover { color: var(--ink); background: #e7ebe7; } .agent-sheet-body { min-height: 0; overflow-y: auto; padding: 18px; background: #fafbf9; } .simple-agent-card { padding: 18px; border-radius: 18px; background: #f2efff; } .simple-agent-card.host { background: #e5f7f1; } .simple-agent-card.agent-role-config.mood, .simple-agent-card.agent-role-config.coach { background: #eef8f4; } .simple-agent-card.agent-role-config.smart-host { background: #fff6e8; } .agent-role-config { display: grid; gap: 0; } .agent-config-section { margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(97,88,149,.14); } .agent-config-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .agent-config-head > span { min-width: 0; } .agent-config-head strong { display: block; color: var(--ink); font-size: 13px; } .agent-config-head small { display: block; margin-top: 3px; color: #77807b; font-size: 11px; line-height: 1.35; } .agent-config-head em { flex: 0 0 auto; color: #6d55f6; font-size: 11px; font-style: normal; font-weight: 720; } .agent-fixed-identity { min-height: 58px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(37,121,93,.15); border-radius: 13px; background: rgba(255,255,255,.8); } .agent-fixed-identity > span { width: 35px; height: 35px; flex: 0 0 35px; display: grid; place-items: center; border-radius: 10px; color: #087f5e; background: #e4f7f0; } .agent-fixed-identity > span svg { width: 17px; height: 17px; } .agent-fixed-identity > div { min-width: 0; flex: 1; } .agent-fixed-identity strong { display: block; color: var(--ink); font-size: 11px; } .agent-fixed-identity small { display: block; margin-top: 4px; color: #7c8580; font-size: 9px; } .agent-fixed-identity em, .agent-policy-pill { flex: 0 0 auto; padding: 5px 7px; border-radius: 7px; color: #087f5e; background: #e7f7f0; font-size: 7.5px; font-style: normal; font-weight: 760; } .agent-role-config.smart-host .agent-fixed-identity { border-color: rgba(165,106,18,.17); } .agent-role-config.smart-host .agent-fixed-identity > span { color: #a56a12; background: #fff0d5; } .agent-role-config.smart-host .agent-fixed-identity em, .agent-role-config.smart-host .agent-policy-pill { color: #8b5b12; background: #ffefd2; } .agent-role-config .agent-sample { margin-top: 15px; align-items: center; } .agent-role-config.twin .agent-policy-pill { color: #5d4bc4; background: #e9e4ff; } .agent-role-config.twin .agent-guardrail { color: #524395; } .host-appearance { margin-top: 14px; } .host-appearance-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .host-appearance-head > span { min-width: 0; } .host-appearance-head strong { display: block; color: var(--ink); font-size: 13px; } .host-appearance-head small { display: block; margin-top: 3px; color: #77807b; font-size: 11px; line-height: 1.35; } .host-appearance-head em { flex: 0 0 auto; color: #087f5e; font-size: 11px; font-style: normal; font-weight: 720; } .host-appearance-grid { margin-top: 9px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; } .host-appearance-card { position: relative; min-width: 0; padding: 7px; display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center; gap: 8px; border: 1px solid #d9e5df; border-radius: 12px; color: #6b746f; background: rgba(255,255,255,.88); text-align: left; transition: border-color .16s,background-color .16s,box-shadow .16s,transform .16s; } .host-appearance-card:hover { border-color: #a99cff; background: #fff; transform: translateY(-1px); } .host-appearance-card.active { border-color: var(--violet); background: #fff; box-shadow: 0 0 0 2px rgba(109,85,246,.12); } .host-appearance-image { width: 46px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: #111915; } .host-appearance-image img { width: 100%; height: 100%; object-fit: contain; } .host-appearance-card > span:nth-child(2) { min-width: 0; } .host-appearance-card strong { display: block; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .host-appearance-card small { display: block; margin-top: 3px; overflow: hidden; color: #858e89; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .host-appearance-card > svg { position: absolute; top: 6px; right: 6px; width: 15px; height: 15px; padding: 3px; border-radius: 50%; color: transparent; background: transparent; } .host-appearance-card.active > svg { color: #fff; background: var(--violet); } .agent-persona { min-height: 58px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border-radius: 13px; background: #fff; } .agent-persona > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #f1edff; font-size: 16px; } .agent-persona strong { display: block; font-size: 10px; } .agent-persona small { display: block; margin-top: 4px; color: #858c88; font-size: 8px; } .agent-option-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; } .agent-option-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); } .agent-option-grid button, .host-moments button { min-height: 36px; border: 1px solid transparent; border-radius: 10px; color: #858c88; background: rgba(255,255,255,.86); font-size: 8.5px; font-weight: 720; } .agent-option-grid button.active { color: #d91f3b; border-color: var(--violet); background: #fff; } .host-moments { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .host-moments button { min-height: 31px; padding: 0 12px; } .host-moments button.active { color: #087f5e; border-color: #0d9a73; } .agent-helper { margin: 12px 0; color: #737b76; font-size: 9px; line-height: 1.55; } .agent-sample { padding: 13px; display: flex; align-items: flex-start; gap: 9px; border-radius: 13px; background: #fff; } .agent-sample > svg { width: 24px; height: 24px; flex: 0 0 24px; padding: 5px; border-radius: 50%; color: #fff; background: var(--violet); } .agent-sample p { margin: 0; color: #525a55; font-size: 9px; line-height: 1.6; } .agent-sample p strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 8px; } .agent-sample small { display: block; margin-top: 5px; color: #8f9691; font-size: 7.5px; } .simple-agent-card.host .agent-sample { margin-top: 12px; display: grid; grid-template-columns: auto minmax(0,1fr) minmax(130px,.62fr); align-items: center; column-gap: 10px; row-gap: 5px; } .simple-agent-card.host .agent-sample > * { min-width: 0; } .simple-agent-card.host .agent-sample small { margin: 0; line-height: 1.4; } .host-live-avatar { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 1px solid #cfe1d8; border-radius: 50%; background: #111915; } .host-live-avatar img { width: 100%; height: 100%; object-fit: contain; } .sample-tag { flex: 0 0 auto; padding: 5px 7px; border-radius: 7px; color: #fff; background: #0b8d68; font-size: 7px; font-style: normal; } .agent-test-line { width: 100%; min-height: 37px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; font-size: 9px; font-weight: 720; } .agent-guardrail { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #352d7d; } .agent-guardrail > span { display: flex; align-items: center; gap: 8px; font-size: 8.5px; } .simple-agent-card.host .agent-guardrail { color: #087f5e; } /* Marketing NPC three-step flow. */ .marketing-steps { min-height: 54px; flex: 0 0 54px; padding: 8px 18px; display: flex; align-items: center; justify-content: center; background: #fafbf9; border-bottom: 1px solid var(--line); } .marketing-steps > i { width: 46px; height: 1px; background: #dddeda; } .marketing-steps button { min-height: 34px; display: flex; align-items: center; gap: 7px; border: 0; color: #929792; background: transparent; font-size: 8.5px; font-weight: 740; } .marketing-steps button span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #8b918d; background: #e9ece9; } .marketing-steps button.active { color: var(--ink); } .marketing-steps button.active span { color: #fff; background: var(--violet); } .marketing-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d8dad6 transparent; } .marketing-step { min-height: 100%; padding: 20px; display: flex; flex-direction: column; } .marketing-step[hidden] { display: none !important; } .marketing-step.active { animation: agentStepIn .2s ease; } .marketing-callout { min-height: 48px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #e4b15c; border-radius: 12px; color: #76521b; background: #fff5df; font-size: 9px; line-height: 1.5; } .marketing-callout > svg { width: 18px; height: 18px; flex: 0 0 18px; } .marketing-lead { margin: 17px 0; color: #646d67; font-size: 10px; line-height: 1.65; } .marketing-lead strong { color: var(--ink); } .marketing-recommendations { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .marketing-recommendations article { min-height: 126px; padding: 14px; border: 1px solid #0b9a70; border-radius: 15px; background: #fcfffd; } .marketing-recommendations article > span { display: flex; align-items: center; gap: 5px; color: #078866; font-size: 8px; font-weight: 760; } .marketing-recommendations article > span svg { width: 13px; height: 13px; } .marketing-recommendations article strong { display: block; margin-top: 7px; color: #087f5e; font-size: 11px; } .marketing-recommendations article p { margin: 6px 0 0; color: #7c8580; font-size: 8.5px; line-height: 1.55; } .marketing-metrics { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 16px; color: #6f7772; font-size: 8.5px; } .marketing-metrics strong { margin-left: 4px; color: #087f5e; } .marketing-actions { margin-top: auto; padding-top: 18px; display: flex; gap: 9px; } .agent-primary, .agent-secondary, .agent-tertiary { min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 9px; font-weight: 760; } .agent-primary { flex: 1.15; border: 0; color: #fff; background: linear-gradient(110deg,var(--violet),var(--violet-2)); box-shadow: 0 9px 22px rgba(255,49,72,.18); } .agent-secondary { flex: 1; border: 1px solid var(--line); color: var(--ink); background: #f0f3f0; } .agent-tertiary { flex: .9; border: 0; color: #5f6762; background: transparent; } .timing-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .timing-legend strong { font-size: 12px; } .timing-legend span { color: #929993; font-size: 8px; } .timing-map { min-height: 220px; margin-top: 12px; padding: 14px 14px 12px; position: relative; overflow: hidden; border-radius: 16px; background: #fafbf9; } .timing-zones { height: 150px; display: grid; grid-template-columns: 1fr .9fr 1.18fr .92fr 1fr; overflow: hidden; border-radius: 10px; } .timing-zones span { display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; color: #087f5e; background: #e7f5f0; font-size: 7.5px; } .timing-zones span.locked { color: #c54242; background: #fbe6e6; } .flow-curve { width: calc(100% - 28px); height: 150px; position: absolute; z-index: 2; left: 14px; top: 14px; overflow: visible; pointer-events: none; } .flow-axis { stroke: #dfe4e0; stroke-width: 1; vector-effect: non-scaling-stroke; } .flow-line { fill: none; stroke: #6857f0; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .timing-marker { position: absolute; z-index: 3; top: 143px; display: grid; justify-items: center; gap: 3px; color: #078866; transform: translateX(-50%); } .timing-marker.marker-one { left: 41%; } .timing-marker.marker-two { left: 89%; } .timing-marker b { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #0b956e; box-shadow: 0 3px 9px rgba(11,149,110,.18); font-size: 8px; } .timing-marker small { font-size: 7px; white-space: nowrap; } .timing-phase-labels { margin-top: 25px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); color: #79817c; font-size: 7.5px; } .timing-phase-labels span:nth-child(2) { text-align: center; } .timing-phase-labels span:last-child { text-align: right; } .placement-list { margin-top: 13px; display: grid; gap: 8px; } .placement-list article { min-width: 0; min-height: 58px; padding: 9px 10px; display: grid; grid-template-columns: 26px minmax(110px,.85fr) minmax(120px,1fr) minmax(145px,1.15fr) auto 32px; align-items: center; gap: 8px; border-radius: 12px; background: #fafbf9; } .placement-list article > b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0b956e; font-size: 8px; } .placement-list article > strong { font-size: 8.5px; } .placement-list select { min-width: 0; width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 9px; padding: 0 8px; color: #525a55; background: #fff; font-size: 8px; } .placement-list article > button:not(.placement-delete) { min-height: 32px; border: 0; color: #6857f0; background: transparent; font-size: 8px; font-weight: 720; } .placement-delete { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #c84a43; background: transparent; } .marketing-stat-grid { margin-top: 13px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; } .marketing-stat-grid article { min-height: 86px; padding: 13px; border-radius: 13px; background: #fafbf9; } .marketing-stat-grid span { display: block; color: #858d88; font-size: 8px; } .marketing-stat-grid strong { display: block; margin-top: 10px; color: var(--ink); font-size: 18px; } .player-preview-layout { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 26px; align-items: start; } .ad-phone { width: 310px; height: 500px; position: relative; overflow: hidden; border-radius: 30px; color: #fff; background: #08110d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .ad-phone-time { position: absolute; top: 20px; left: 20px; color: #c7b6ff; font-size: 9px; } .ad-gamepad { position: absolute; left: 50%; top: 42%; font-size: 34px; transform: translate(-50%,-50%); } .ad-card { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 14px; border: 1px solid #0c8d68; border-radius: 16px; background: #0c2c20; } .ad-card > em { position: absolute; right: 12px; top: -18px; padding: 5px 8px; border-radius: 7px 7px 0 0; color: #fff; background: #0b956e; font-size: 7px; font-style: normal; } .ad-card > div:first-of-type { display: flex; align-items: flex-start; gap: 8px; color: #e5eee9; font-size: 9px; line-height: 1.45; } .ad-card > div:first-of-type svg { width: 18px; height: 18px; flex: 0 0 18px; padding: 4px; border-radius: 50%; color: #fff; background: #0b956e; } .ad-reward { height: 34px; margin-top: 10px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.06); } .ad-card-actions { margin-top: 9px; display: grid; grid-template-columns: 1fr auto; gap: 7px; } .ad-card-actions button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; color: #c6d1ca; background: rgba(255,255,255,.08); font-size: 8.5px; } .ad-card-actions button:first-child, .ad-card-actions button.selected { color: #fff; background: #16a47b; } .preview-explainer h3 { margin: 5px 0 16px; font-size: 14px; } .preview-explainer > p { margin: 0 0 14px; display: flex; align-items: flex-start; gap: 10px; color: #59625d; font-size: 9.5px; line-height: 1.6; } .preview-explainer > p svg { width: 17px; height: 17px; flex: 0 0 17px; color: #0b956e; } .preview-tip { margin-top: 18px; padding: 12px; display: flex; align-items: center; gap: 8px; border-radius: 12px; color: #087f5e; background: #e3f7f0; font-size: 9px; } .preview-tip svg { width: 16px; height: 16px; } .submission-scope { margin: 16px 0 0; color: #7c847f; font-size: 8.5px; line-height: 1.5; } @media (max-width: 820px) { .agent-layer { padding: 10px; } .agent-sheet, .marketing-sheet { width: calc(100vw - 20px); height: calc(100vh - 20px); max-height: calc(100vh - 20px); border-radius: 18px; } .marketing-recommendations, .player-preview-layout { grid-template-columns: 1fr; } .ad-phone { width: min(310px,100%); margin: auto; } .placement-list article { grid-template-columns: 26px minmax(0,1fr) 32px; } .placement-list article > strong { grid-column: 2; } .placement-list select, .placement-list article > button:not(.placement-delete) { grid-column: 2 / -1; } .placement-delete { grid-column: 3; grid-row: 1; } } @media (max-width: 540px) { .agent-sheet-header { padding: 12px; } .agent-sheet-header h2 { font-size: 14px; } .agent-sheet-header p { display: none; } .marketing-steps { padding: 7px 10px; } .marketing-steps > i { width: 14px; } .marketing-steps button { font-size: 7px; } .marketing-step { padding: 14px; } .marketing-actions { flex-direction: column; } .marketing-stat-grid { grid-template-columns: 1fr; } .agent-option-grid.three { grid-template-columns: 1fr; } .simple-agent-card.host .agent-sample { grid-template-columns: auto minmax(0,1fr); } .simple-agent-card.host .agent-sample small { grid-column: 2; } .agent-avatar-stack { display: none; } } .configure-workspace .message { padding: 12px 13px; font-size: 10.5px !important; line-height: 1.58; } .configure-workspace .process-toggle { height: 42px; font-size: 9.5px !important; } .configure-workspace .process-step { gap: 8px; font-size: 9.5px !important; } .configure-workspace .process-step i { width: 18px; height: 18px; } .configure-workspace .chat-composer input { height: 39px; font-size: 10px !important; } .configure-workspace .chat-composer button { width: 39px; } .configure-workspace .settings-tab { font-size: 10.5px !important; } .configure-workspace .setting-title { font-size: 9px !important; } .configure-workspace .setting-title button { font-size: 8.5px !important; } .configure-workspace .tower-head { height: 43px; font-size: 9.5px !important; } .account-popover { position: fixed; z-index: 110; top: 66px; right: 18px; width: min(380px,calc(100vw - 24px)); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: rgba(255,255,255,.98); box-shadow: 0 24px 70px rgba(31,27,22,.18); opacity: 0; pointer-events: none; transform: translateY(-7px) scale(.985); transform-origin: top right; transition: opacity .16s, transform .16s; } .account-popover[hidden] { display: none !important; } .account-popover.show { opacity: 1; pointer-events: auto; transform: none; } .account-profile { min-height: 96px; padding: 18px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); } .account-avatar-large { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #050505; font-size: 13px; font-weight: 800; } .account-identity { min-width: 0; flex: 1; } .account-identity strong { display: block; overflow: hidden; color: var(--ink); font-size: 16px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .account-identity span { display: block; margin-top: 5px; overflow: hidden; color: #7d817e; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .account-settings-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: #747a77; background: #fff; } .account-settings-button:hover { color: var(--ink); background: var(--soft); } .account-settings-button svg { width: 18px; height: 18px; margin: 0 !important; } .account-menu-group { padding: 9px; border-bottom: 1px solid var(--line); } .account-menu-group:last-child { border-bottom: 0; } .account-menu-item { width: 100%; min-height: 68px; padding: 10px 11px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 11px; color: #69706c; background: transparent; text-align: left; } .account-menu-item:hover { background: var(--soft); color: var(--ink); } .account-menu-item > svg:first-child { width: 20px; height: 20px; flex: 0 0 20px; margin: 0 !important; color: #7f8b86; } .account-menu-item > svg:last-child { width: 16px; height: 16px; flex: 0 0 16px; margin-left: auto; color: #afb5b1; } .account-menu-item > span { min-width: 0; flex: 1; } .account-menu-item strong { display: block; color: var(--ink); font-size: 14px; line-height: 1.3; } .account-menu-item small { display: block; margin-top: 3px; overflow: hidden; color: #8a918d; font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .account-menu-item.danger, .account-menu-item.danger strong, .account-menu-item.danger > svg:first-child { color: #e54834; } .account-preferences { padding-top: 9px; padding-bottom: 9px; } .account-theme-row { min-height: 60px; padding: 7px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .account-theme-row > span:first-child { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 14px; font-weight: 650; } .account-theme-row > span:first-child svg { width: 20px; height: 20px; color: #7f8b86; } .theme-segment { padding: 3px; display: flex; border-radius: 10px; background: #edf0ed; } .theme-segment button { height: 34px; padding: 0 12px; border: 0; border-radius: 8px; color: #8a908d; background: transparent; font-size: 12px; font-weight: 700; } .theme-segment button.active { color: var(--ink); background: #fff; box-shadow: 0 2px 6px rgba(25,29,26,.09); } .settings-layer { position: fixed; z-index: 120; inset: 0; display: flex; justify-content: flex-end; padding: 14px; background: rgba(28,30,29,.28); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .18s; } .settings-layer[hidden] { display: none !important; } .settings-layer.show { opacity: 1; pointer-events: auto; } .settings-sheet { width: min(480px,100%); height: 100%; position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; color: var(--ink); background: #f8faf8; box-shadow: 0 30px 90px rgba(25,28,26,.24); transform: translateX(18px); transition: transform .2s ease; } .settings-layer.show .settings-sheet { transform: none; } .settings-sheet-header { min-height: 84px; flex: 0 0 84px; padding: 15px 20px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); } .settings-back { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border: 0; border-radius: 10px; color: #4d5551; background: transparent; } .settings-back:hover { background: var(--soft); } .settings-back svg { width: 18px; height: 18px; margin: 0 !important; } .settings-sheet-header h2 { margin: 0; color: var(--ink); font-size: 20px; line-height: 1.2; } .settings-sheet-header p { margin: 4px 0 0; color: #828a86; font-size: 13px; } .settings-scroll { flex: 1; min-height: 0; overflow: auto; padding: 17px 14px 26px; scrollbar-width: thin; scrollbar-color: #d7dcd8 transparent; } .settings-section + .settings-section { margin-top: 20px; } .settings-section h3 { margin: 0 0 8px 4px; color: #7d8782; font-size: 11px; font-weight: 780; letter-spacing: .07em; text-transform: uppercase; } .settings-group { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; } .settings-row { width: 100%; min-height: 72px; padding: 11px 16px; display: flex; align-items: center; gap: 13px; border: 0; border-bottom: 1px solid var(--line); color: #66706b; background: transparent; text-align: left; } .settings-row:last-child { border-bottom: 0; } button.settings-row:hover { background: var(--soft); } .settings-row > svg:first-child { width: 18px; height: 18px; flex: 0 0 18px; margin: 0 !important; color: #7e8a84; } .settings-row > svg:last-child { width: 15px; height: 15px; margin-left: auto; color: #abb3af; } .settings-row > span { min-width: 0; flex: 1; } .settings-row strong { display: block; color: var(--ink); font-size: 14px; line-height: 1.35; } .settings-row small { display: block; margin-top: 4px; color: #88918d; font-size: 12px; line-height: 1.4; } .settings-row.danger, .settings-row.danger strong, .settings-row.danger > svg:first-child { color: #e54834; } .settings-select-row select { min-width: 124px; height: 40px; padding: 0 32px 0 13px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: #fff; font-size: 13px; font-weight: 720; } .settings-switch { width: 42px; height: 25px; flex: 0 0 42px; padding: 3px; display: flex; align-items: center; border: 0; border-radius: 14px; background: #dfe3e0; transition: background .18s; } .settings-switch i { width: 19px; height: 19px; display: block; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(22,28,24,.18); transform: translateX(0); transition: transform .18s; } .settings-switch[aria-checked="true"] { background: linear-gradient(110deg,var(--violet),var(--violet-2)); } .settings-switch[aria-checked="true"] i { transform: translateX(17px); } .settings-detail { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; background: #f8faf8; opacity: 0; transform: translateX(22px); transition: opacity .18s, transform .2s; } .settings-detail[hidden] { display: none !important; } .settings-detail.show { opacity: 1; transform: none; } .settings-detail-body { flex: 1; min-height: 0; overflow: auto; padding: 18px; scrollbar-width: thin; scrollbar-color: #d7dcd8 transparent; } .detail-profile-head { padding: 18px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 17px; background: #fff; } .detail-link { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: #c91d36; background: #fff; font-size: 8px; font-weight: 750; } .detail-link:hover { background: var(--violet-soft); } .detail-link.danger-text { color: #e54834; } .detail-form { margin-top: 14px; display: grid; gap: 12px; } .detail-form label { display: grid; gap: 6px; color: #6f7873; font-size: 8px; font-weight: 720; } .detail-form input, .detail-form textarea, .detail-form select { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; color: var(--ink); background: #fff; font-size: 9px; font-weight: 500; resize: vertical; } .detail-form input, .detail-form select { height: 40px; } .detail-primary, .detail-secondary { min-height: 40px; padding: 0 15px; border-radius: 11px; font-size: 9px; font-weight: 780; } .detail-primary { border: 0; color: #fff; background: linear-gradient(110deg,var(--violet),var(--violet-2)); box-shadow: 0 8px 20px rgba(255,49,72,.18); } .detail-secondary { border: 1px solid var(--line); color: var(--ink); background: #fff; } .detail-primary:disabled { cursor: not-allowed; opacity: .38; box-shadow: none; } .detail-primary.danger-button { background: linear-gradient(110deg,#eb4936,#ff7047); } .detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .detail-stats > div { min-height: 92px; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); border-radius: 15px; background: #fff; } .detail-stats strong { color: var(--ink); font-size: 15px; } .detail-stats span { margin-top: 5px; color: #89918d; font-size: 8px; } .detail-note { margin-top: 12px; min-height: 60px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; } .detail-note strong { color: var(--ink); font-size: 9px; } .detail-note span { color: #777f7b; font: 9px ui-monospace,SFMono-Regular,Menlo,monospace; } .detail-note .detail-link { margin-left: auto; } .detail-list { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; } .detail-list-row { min-height: 68px; padding: 11px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); } .detail-list-row:last-child { border-bottom: 0; } .detail-list-row > svg { width: 18px; height: 18px; flex: 0 0 18px; color: #7e8a84; } .detail-list-row > span { min-width: 0; flex: 1; } .detail-list-row strong { display: block; color: var(--ink); font-size: 10px; } .detail-list-row small { display: block; margin-top: 4px; color: #8a928e; font-size: 8px; } .detail-list-row em { color: var(--green); font-size: 8px; font-style: normal; font-weight: 720; } .detail-danger { padding: 15px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid rgba(229,72,52,.2); border-radius: 16px; color: #df4a37; background: #fff3f0; } .detail-danger > svg { width: 20px; height: 20px; flex: 0 0 20px; } .detail-danger strong { color: #c93828; font-size: 10px; } .detail-danger p { margin: 6px 0 0; color: #93655e; font-size: 8.5px; line-height: 1.55; } .detail-about { padding: 32px 20px; text-align: center; border: 1px solid var(--line); border-radius: 18px; background: #fff; } .detail-about .airvana-brand-symbol { margin: 0 auto 14px; } .detail-about h3 { margin: 0; color: var(--ink); font-size: 22px; letter-spacing: -1px; } .detail-about p { max-width: 340px; margin: 14px auto; color: #757e79; font-size: 9px; line-height: 1.65; } .detail-about small { color: #9aa19d; font-size: 8px; } .detail-document { padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: #fff; } .detail-document h3 { margin: 0 0 14px; color: var(--ink); font-size: 16px; } .detail-document h4 { margin: 18px 0 6px; color: var(--ink); font-size: 10px; } .detail-document p { margin: 0; color: #747d78; font-size: 9px; line-height: 1.65; } .detail-confirm { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .detail-confirm > svg { width: 34px; height: 34px; color: #e54834; } .detail-confirm h3 { margin: 17px 0 7px; color: var(--ink); font-size: 17px; } .detail-confirm p { max-width: 330px; margin: 0 0 20px; color: #7d8581; font-size: 9px; line-height: 1.55; } .detail-confirm .detail-primary, .detail-confirm .detail-secondary { width: min(280px,100%); margin-top: 8px; } html[data-theme="dark"] .settings-sheet { background: #111412; border-color: var(--line); } html[data-theme="dark"] .settings-detail { background: #111412; } html[data-theme="dark"] .settings-sheet-header { background: rgba(24,27,25,.96); } html[data-theme="dark"] .account-settings-button, html[data-theme="dark"] .settings-select-row select, html[data-theme="dark"] .theme-segment button.active { color: var(--ink); background: #252a27; border-color: var(--line); } html[data-theme="dark"] .theme-segment { background: #0f1110; } html[data-theme="dark"] .airvana-wordmark, html[data-theme="dark"] .airvana-wordmark small { color: #fff !important; } html[data-theme="dark"] .detail-profile-head, html[data-theme="dark"] .detail-form input, html[data-theme="dark"] .detail-form textarea, html[data-theme="dark"] .detail-form select, html[data-theme="dark"] .detail-stats > div, html[data-theme="dark"] .detail-note, html[data-theme="dark"] .detail-list, html[data-theme="dark"] .detail-about, html[data-theme="dark"] .detail-document { color: var(--text); background: #181b19; border-color: var(--line); } html[data-theme="dark"] .phone-stage::after { background: radial-gradient(circle at 50% 44%,rgba(20,23,21,.58),rgba(14,16,15,.88) 68%); } [data-lucide], svg.lucide { width: 15px; height: 15px; display: inline-block; flex: 0 0 auto; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; } button > [data-lucide], button > svg.lucide { width: var(--control-icon); height: var(--control-icon); flex: 0 0 var(--control-icon); display: block; margin: 0 !important; vertical-align: middle; } button .trailing-icon { width: 14px; height: 14px; flex-basis: 14px; margin: 0 0 0 1px !important; } @media (max-width: 1180px) { .airvana-wordmark { display: none !important; } .brand { justify-content: center; padding-left: 0; padding-right: 0; } .airvana-brand-symbol { width: 34px; height: 38px; flex-basis: 34px; } .airvana-dot-red, .airvana-dot-black { width: 21px; height: 21px; } .airvana-dot-blue { width: 12px; height: 12px; } } /* Retina laptops commonly expose a 960–1180 CSS-pixel viewport. Keep all three work areas inside it instead of letting the right settings panel overflow. */ @media (min-width: 921px) and (max-width: 1399px) { .configure-workspace { grid-template-columns: minmax(230px,280px) minmax(340px,1fr) minmax(250px,290px) !important; } .configure-workspace .settings-body { padding: 12px; } .configure-workspace .footer-actions { padding: 9px 10px; } .configure-workspace .footer-actions .unsaved span { display: none; } .configure-workspace .footer-actions .btn { padding-left: 11px; padding-right: 11px; } } @media (min-width: 1400px) { .configure-workspace { grid-template-columns:minmax(300px,min(29%,420px)) minmax(440px,1fr) minmax(320px,min(28%,420px)) !important; } } @media (max-width: 980px) { .campaign-bar { min-height: 58px !important; } .campaign-bar { flex-wrap: wrap; height: auto !important; } .campaign-right { margin-left: auto; } .workflow-segmented .step { padding: 0 9px; } } /* Create brief — align the remaining prototype-scale copy with the English UI type system. */ .create-page .prompt-panel textarea { min-height: 108px; padding: 20px 22px; font-size: var(--type-body) !important; line-height: 1.55; } .create-page .mode-btn { min-height: var(--control-height-sm); height: var(--control-height-sm); padding-inline: 13px; font-size: 13px !important; } .create-page .idea-chip { min-height: 32px; height: 32px; padding-inline: 12px; font-size: var(--type-supporting) !important; } .create-page .idea-chips { gap: 8px; margin-top: 12px; } .invite-trigger { min-height: 40px; font-size: 13px; } .campaign-bar h1, .campaign-title-row h1 { font-size: 22px !important; line-height: 1.2; } .campaign-title-row .status-pill { min-height: 24px; padding-inline: 9px; font-size: 11px; } /* Dashboard cards. */ .filter-chip, .seg-tab { min-height: 38px; height: 38px; padding-inline: 14px; font-size: 13px !important; } .cover-badge, .project-status { min-height: 26px; font-size: 11px !important; } .tile-title strong, .project-content h3 { font-size: 15px !important; line-height: 1.35; } .tile-title span, .project-content > p, .channel-line, .channel-chip { font-size: 12px !important; } .usage strong, .project-stats strong { font-size: 14px !important; } .usage span, .project-stats span { font-size: 11px !important; } .metric-card span { font-size: 13px !important; } .metric-card strong { font-size: 30px !important; } .metric-card small { font-size: 12px !important; } .channel-name strong, .earn-row strong, .agent-row strong { font-size: 13px !important; } .channel-name span, .bar-label, .bar-value span, .earn-row span:last-child, .agent-row span, .agent-row em { font-size: 11px !important; } .bar-value strong { font-size: 15px !important; } .balance-label, .balance-stat span, .balance-footer { font-size: 12px !important; } .balance-stat strong { font-size: 15px !important; } .record-row { min-height: 52px; height: auto; font-size: 12px !important; } .agent-summary strong { font-size: 15px !important; } .agent-summary p { font-size: 12px !important; } .studio #versionBtn, .configure-preview-toolbar #versionBtn { min-width: 118px; } .studio #deviceBtn, .configure-preview-toolbar #deviceBtn { min-width: 142px; } .quality, .configure-quality, .zoom span, .configure-zoom span { font-size: 11px !important; } /* Copilot typography. */ .studio .brief-toggle, .configure-brief-toggle { min-height: 46px; font-size: 13px !important; } .studio .brief-item span, .configure-brief-content span { font-size: 11px !important; } .studio .brief-item strong, .configure-brief-content strong { font-size: 12px !important; } .studio .bubble, .configure-workspace .message { font-size: 14px !important; line-height: 1.55; } .studio .bubble-time { font-size: 11px !important; } .studio .generation-head, .configure-workspace .process-toggle { font-size: 13px !important; } .studio .gen-step, .configure-workspace .process-step { font-size: 12px !important; line-height: 1.4; } .studio .quick-action { min-height: 34px; height: 34px; padding-inline: 11px; font-size: 12px !important; } .studio .composer textarea, .review-style-composer textarea { min-height: 58px; font-size: 14px !important; line-height: 1.45; } .studio .model-tag, .configure-composer-tools > span { font-size: 11px !important; } .studio .composer-tools, .configure-composer-tools { min-height: 40px; height: 40px; } .studio .send, .review-style-composer .configure-send { width: 36px !important; min-width: 36px; height: 36px; border-radius: 10px; } .studio .composer-tool, .review-style-composer .configure-composer-tool { width: 32px !important; min-width: 32px; height: 32px; } /* Experience setup and form controls. */ .configuration-panel-head strong { font-size: 16px !important; } .configuration-panel-head small { font-size: 12px !important; } .config-module-toggle, .agent-hub.config-module .agent-hub-toggle { min-height: 72px; padding: 10px 12px; gap: 11px; } .config-module-icon, .agent-hub.config-module .agent-hub-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; } .config-module-copy strong, .agent-hub.config-module .agent-hub-copy strong { font-size: 14px !important; } .config-module-copy small, .agent-hub.config-module .agent-hub-copy small { font-size: 12px !important; line-height: 1.35; } .agent-hub.config-module .agent-hub-toggle { min-height: 60px; } .agent-hub.config-module .agent-row-card { min-height: 56px; } .agent-hub.config-module .agent-open { min-height: 54px; } .agent-hub.config-module .agent-open strong { font-size: 14px !important; line-height: 1.3; } .agent-hub.config-module .agent-open small { font-size: 12px !important; line-height: 1.35; } .setting-title { font-size: 11px !important; } .configure-workspace .tower-head { min-height: 50px; height: 50px; font-size: 13px !important; } /* Review inspector. */ .studio .inspector-tab { font-size: 13px !important; } .studio .readiness { padding: 16px; } .studio .readiness-copy strong { font-size: 15px !important; } .studio .readiness-copy span, .studio .readiness-copy em { font-size: 12px !important; } .studio .section-title { font-size: 11px !important; } .studio .check-main { min-height: 66px; padding: 11px 12px; } .studio .check-state { width: 30px; height: 30px; flex-basis: 30px; font-size: 12px; } .studio .check-copy strong { font-size: 14px !important; } .studio .check-copy span { font-size: 12px !important; line-height: 1.35; } .studio .check-detail, .studio .warning-note { font-size: 12px !important; } .studio .detail-card span { font-size: 11px !important; } .studio .detail-card strong { font-size: 13px !important; } .review-aligned-workspace .footer-actions, .studio .inspector-footer { min-height: 70px !important; height: 70px !important; flex-basis: 70px !important; } /* Invite dialog — production-scale typography and edge treatment. */ .invite-dialog { border: 0 !important; outline: 0; background-clip: padding-box; } .invite-hero { min-height: 228px; padding: 28px 32px 26px; } .invite-close { width: 40px; height: 40px; top: 16px; right: 16px; border-radius: 12px; } .invite-close svg { width: 20px; height: 20px; } .invite-gift { width: 56px; height: 56px; margin-bottom: 16px; border-radius: 16px; } .invite-gift svg { width: 26px; height: 26px; } .invite-hero h2 { font-size: 24px; line-height: 1.25; } .invite-reward { margin-top: 13px; gap: 9px; } .invite-reward strong { font-size: 48px; } .invite-reward span { font-size: 16px; } .invite-hero p { margin-top: 17px; font-size: 13px; line-height: 1.5; } .invite-body { padding: 24px 26px 28px; } .invite-code-card { min-height: 82px; padding: 14px 15px 14px 17px; border-radius: 15px; } .invite-code-card small { font-size: 12px; } .invite-code-card strong { margin-top: 6px; font-size: 22px; } .invite-code-card button { min-height: 42px; padding-inline: 14px; border-radius: 11px; font-size: 13px; } .invite-code-card button svg { width: 18px; height: 18px; } .invite-link-button { min-height: 48px; margin-top: 12px; border-radius: 13px; font-size: 14px; } .invite-link-button svg { width: 18px; height: 18px; } .invite-stats { margin-top: 14px; gap: 11px; } .invite-stats article { min-height: 88px; border-radius: 14px; } .invite-stats strong { font-size: 24px; } .invite-stats span { margin-top: 7px; font-size: 12px; } .invite-steps { margin-top: 22px; gap: 13px; } .invite-steps li { gap: 12px; font-size: 13px; line-height: 1.5; } .invite-steps li > svg { width: 38px; height: 38px; flex-basis: 38px; padding: 10px; border-radius: 11px; } .invite-steps b { margin-right: 9px; font-size: 13px; } .invite-note { margin-top: 21px; font-size: 12px; line-height: 1.6; } /* Give readable type enough horizontal room at laptop resolutions. */ @media (min-width: 981px) and (max-width: 1399px) { .studio, .review-aligned-workspace { grid-template-columns: minmax(240px,290px) minmax(350px,1fr) minmax(300px,330px) !important; } } .notification { min-height: 60px; padding: 10px !important; gap: 10px !important; } .notification strong { font-size: 13px !important; line-height: 1.35; } .notification span { font-size: 12px !important; line-height: 1.45; } .summary-row { min-height: 34px; font-size: 12px !important; } /* Generation progress dialog. */ .generating-card { width: min(430px,calc(100vw - 32px)); padding: 28px 30px; } .generation-status-line { font-size: 11px !important; } .generating-card h2 { font-size: 22px !important; line-height: 1.25; } .generating-card p { font-size: 14px !important; line-height: 1.5; } /* Smart NPC, AI Host and Marketing NPC configuration sheets. */ .agent-sheet-header h2 { font-size: 18px !important; line-height: 1.25; } .agent-sheet-header p { font-size: 13px !important; line-height: 1.45; } .agent-persona strong { font-size: 14px !important; } .agent-persona small { font-size: 12px !important; line-height: 1.4; } .agent-option-grid button, .host-moments button { min-height: 40px; font-size: 13px !important; } .agent-helper { font-size: 13px !important; line-height: 1.55; } .agent-sample p { font-size: 13px !important; line-height: 1.55; } .agent-sample p strong { font-size: 12px !important; } .agent-sample small { font-size: 11px !important; line-height: 1.45; } .sample-tag { font-size: 11px !important; } .agent-test-line { min-height: 42px; font-size: 13px !important; } .agent-guardrail > span { font-size: 12px !important; line-height: 1.4; } /* Marketing NPC three-step flow. */ .marketing-steps button { font-size: 12px !important; } .marketing-callout { font-size: 13px !important; line-height: 1.5; } .marketing-lead { font-size: 14px !important; line-height: 1.6; } .marketing-recommendations article > span { font-size: 11px !important; } .marketing-recommendations article strong { font-size: 14px !important; } .marketing-recommendations article p { font-size: 12px !important; line-height: 1.5; } .marketing-metrics { font-size: 12px !important; } .agent-primary, .agent-secondary, .agent-tertiary { min-height: 44px; font-size: 13px !important; } .timing-legend strong { font-size: 15px !important; } .timing-legend span { font-size: 12px !important; } .timing-zones span { font-size: 11px !important; } .timing-marker b { font-size: 11px !important; } .timing-marker small { font-size: 10px !important; } .timing-phase-labels { font-size: 11px !important; } .placement-list article > b { font-size: 11px !important; } .placement-list article > strong { font-size: 13px !important; } .placement-list select { min-height: 40px; height: 40px; font-size: 13px !important; } .placement-list article > button:not(.placement-delete) { min-height: 40px; font-size: 12px !important; } .marketing-stat-grid span { font-size: 12px !important; } .marketing-stat-grid strong { font-size: 24px !important; } .ad-phone-time { font-size: 11px !important; } .ad-card > em { font-size: 11px !important; } .ad-card > div:first-of-type { font-size: 12px !important; } .ad-card-actions button { min-height: 40px; font-size: 12px !important; } .preview-explainer h3 { font-size: 17px !important; } .preview-explainer > p { font-size: 13px !important; line-height: 1.55; } .preview-tip { font-size: 13px !important; line-height: 1.45; } .submission-scope { font-size: 12px !important; line-height: 1.5; } /* Settings details and other second-level screens. */ .detail-link { min-height: 38px; font-size: 13px !important; } .detail-form label { font-size: 12px !important; } .detail-form input, .detail-form textarea, .detail-form select { font-size: 13px !important; line-height: 1.45; } .detail-form input, .detail-form select { min-height: 42px; height: 42px; } .detail-primary, .detail-secondary { min-height: 42px; font-size: 13px !important; } .detail-stats strong { font-size: 18px !important; } .detail-stats span { font-size: 12px !important; } .detail-note strong { font-size: 13px !important; } .detail-note span { font-size: 12px !important; } .detail-list-row strong { font-size: 14px !important; } .detail-list-row small, .detail-list-row em { font-size: 12px !important; line-height: 1.4; } .detail-danger strong { font-size: 14px !important; } .detail-danger p { font-size: 12px !important; line-height: 1.55; } .detail-about p { font-size: 13px !important; line-height: 1.6; } .detail-about small { font-size: 12px !important; } .detail-document h3 { font-size: 18px !important; } .detail-document h4 { font-size: 14px !important; } .detail-document p { font-size: 13px !important; line-height: 1.6; } .detail-confirm h3 { font-size: 18px !important; } .detail-confirm p { font-size: 13px !important; line-height: 1.55; } .skin-select-wrap label strong { font-size: 13px !important; } @media (max-width: 620px) { .agent-sheet-header p { font-size: 12px !important; } .marketing-steps button { font-size: 11px !important; } .marketing-steps > i { width: 22px; } } /* KYC and KOL application flow */ .account-avatar-wrap { width: 52px; height: 52px; position: relative; flex: 0 0 52px; } .account-avatar-wrap .account-avatar-large { width: 100%; height: 100%; } .kol-profile-badge, .kol-avatar-badge { position: absolute; display: grid; place-items: center; border: 0; border-radius: 0; color: #d91f3b; background: transparent; filter: drop-shadow(0 4px 5px rgba(217,31,59,.2)); } .kol-profile-badge[hidden], .kol-avatar-badge[hidden], .kol-identity-label[hidden] { display: none !important; } .kol-profile-badge { right: -8px; bottom: -6px; width: 28px; height: 30px; } .kol-profile-badge svg { width: 28px; height: 30px; fill: var(--violet-soft) !important; stroke: var(--violet) !important; stroke-width: 1.9; } .kol-avatar-badge { right: -8px; bottom: -7px; width: 21px; height: 23px; } .kol-avatar-badge svg { width: 21px; height: 23px; fill: var(--violet-soft) !important; stroke: var(--violet) !important; stroke-width: 2; } .kol-verified-avatar { box-shadow: 0 0 0 2px #ff9aa8,0 0 0 4px rgba(217,31,59,.13) !important; } .account-identity strong { display: flex; align-items: center; gap: 7px; } .account-identity .kol-identity-label { flex: 0 0 auto; padding: 4px 10px; border: 1px solid rgba(255,49,72,.38); border-radius: 999px; color: #c91d36; background: var(--violet-soft); font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size: 10px; font-weight: 850; letter-spacing: .1em; line-height: 1.2; } .kol-menu-item[data-kol-state="approved"] > svg:first-child { color: #d91f3b; } .kol-menu-item[data-kol-state="approved"] small { color: #c91d36; } .kol-menu-item[data-kol-state="pending"] > svg:first-child { color: #b47418; } .kol-layer { position: fixed; z-index: 145; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(24,27,25,.46); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .18s ease; } .kol-layer[hidden] { display: none !important; } .kol-layer.show { opacity: 1; pointer-events: auto; } .kol-dialog { width: min(720px,100%); max-height: min(880px,calc(100vh - 44px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(226,229,226,.94); border-radius: 24px; color: var(--ink); background: #fff; box-shadow: 0 34px 110px rgba(20,24,21,.28); transform: translateY(12px) scale(.985); transition: transform .2s ease; } .kol-layer.show .kol-dialog { transform: none; } .kol-dialog-header { min-height: 88px; flex: 0 0 auto; padding: 17px 20px 15px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); } .kol-dialog-heading { min-width: 0; display: flex; align-items: center; gap: 13px; } .kol-dialog-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#ff3148,#ff824b); box-shadow: 0 8px 18px rgba(217,31,59,.2); } .kol-dialog-icon svg { width: 21px; height: 21px; } .kol-dialog-heading h2 { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.25; letter-spacing: -.02em; } .kol-dialog-heading p { margin: 4px 0 0; color: #7f8783; font-size: 13px; line-height: 1.4; } .kol-close { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 0; border-radius: 11px; color: #5f6763; background: transparent; } .kol-close:hover { color: var(--ink); background: var(--soft); } .kol-close svg { width: 20px; height: 20px; } .kol-steps { min-height: 66px; flex: 0 0 66px; padding: 12px 28px; display: flex; align-items: center; border-bottom: 1px solid var(--line); background: #fafaf8; } .kol-steps > span { min-width: 0; display: flex; align-items: center; gap: 9px; color: #9aa19d; } .kol-steps > span > i { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border: 1px solid #dfe3df; border-radius: 50%; background: #fff; font-size: 12px; font-style: normal; font-weight: 780; } .kol-steps > span > i svg { width: 15px; height: 15px; } .kol-steps > span > b { overflow: hidden; font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .kol-steps > span.active { color: var(--ink); } .kol-steps > span.active > i { border-color: #101311; color: #fff; background: #101311; box-shadow: 0 0 0 4px rgba(16,19,17,.06); } .kol-steps > span.complete { color: #15936f; } .kol-steps > span.complete > i { border-color: #15936f; color: #fff; background: #15936f; } .kol-steps > em { height: 1px; min-width: 30px; flex: 1; margin: 0 14px; background: #dfe3df; } .kol-dialog-body { flex: 1; min-height: 0; overflow: auto; padding: 22px 28px 26px; scrollbar-width: thin; scrollbar-color: #d7dcd8 transparent; } .kol-form { display: grid; gap: 17px; } .kol-intro, .kol-verified-callout { padding: 13px 15px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid rgba(21,147,111,.18); border-radius: 14px; color: #4d6860; background: #f1faf6; } .kol-intro > svg { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 1px; color: #15936f; } .kol-intro p { margin: 0; font-size: 13px; line-height: 1.55; } .kol-field { min-width: 0; display: grid; gap: 8px; margin: 0; padding: 0; border: 0; color: #252a27; font-size: 13px; font-weight: 720; } .kol-field legend { margin-bottom: 8px; padding: 0; color: #252a27; font-size: 13px; font-weight: 720; } .kol-field input:not([type="file"]), .kol-field select { width: 100%; height: 44px; padding: 0 13px; border: 1px solid #dfe3df; border-radius: 12px; outline: none; color: var(--ink); background: #fbfcfb; font-size: 14px; font-weight: 520; transition: border-color .16s, box-shadow .16s, background .16s; } .kol-field input:not([type="file"]):focus, .kol-field select:focus { border-color: #ff5264; background: #fff; box-shadow: 0 0 0 3px rgba(255,49,72,.1); } .kol-field input.invalid { border-color: #e54834; box-shadow: 0 0 0 3px rgba(229,72,52,.08); } .kol-field-help { color: #8b938f; font-size: 12px; font-weight: 500; line-height: 1.45; } .kol-segmented { display: flex; gap: 10px; } .kol-segmented button { min-width: 110px; height: 42px; padding: 0 18px; border: 1px solid #dfe3df; border-radius: 12px; color: #555e59; background: #fff; font-size: 13px; font-weight: 700; } .kol-segmented button.active { border-color: #101311; color: #fff; background: #101311; } .kyc-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .kyc-upload { min-height: 154px; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px dashed #cfd5d1; border-radius: 16px; background: #fbfcfb; cursor: pointer; transition: border-color .16s, background .16s; } .kyc-upload:hover { border-color: #ff6978; background: #fff8f8; } .kyc-upload.has-file { border-style: solid; border-color: rgba(21,147,111,.38); background: #f2faf6; } .kyc-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .kyc-upload > span { max-width: 90%; display: grid; justify-items: center; gap: 7px; text-align: center; } .kyc-upload svg { width: 26px; height: 26px; color: #7d8782; } .kyc-upload.has-file svg { color: #15936f; } .kyc-upload b { color: #303632; font-size: 13px; } .kyc-upload small { max-width: 100%; overflow: hidden; color: #8a938e; font-size: 12px; font-weight: 520; text-overflow: ellipsis; white-space: nowrap; } .kol-consent { display: flex; align-items: flex-start; gap: 10px; color: #6f7873; font-size: 12px; line-height: 1.5; cursor: pointer; } .kol-consent input { width: 17px; height: 17px; flex: 0 0 17px; margin: 1px 0 0; accent-color: #d91f3b; } .kol-actions { padding-top: 3px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; } .kol-primary, .kol-secondary { min-height: 44px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-size: 13px; font-weight: 760; } .kol-primary { border: 0; color: #fff; background: linear-gradient(110deg,#e51f3f,#ff7848); box-shadow: 0 9px 22px rgba(229,31,63,.2); } .kol-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(229,31,63,.25); } .kol-primary:disabled { cursor: not-allowed; opacity: .38; box-shadow: none; } .kol-primary svg, .kol-secondary svg { width: 16px; height: 16px; } .kol-secondary { border: 1px solid #dfe3df; color: var(--ink); background: #fff; } .kol-secondary:hover { background: var(--soft); } .kol-verified-callout { align-items: center; } .kol-verified-callout > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; color: #15936f; background: #fff; } .kol-verified-callout svg { width: 18px; height: 18px; } .kol-verified-callout strong { display: block; color: #17684f; font-size: 14px; } .kol-verified-callout p { margin: 3px 0 0; color: #668178; font-size: 12px; line-height: 1.4; } .kol-application-copy { padding: 6px 0 1px; } .kol-application-copy h3 { margin: 7px 0 5px; color: var(--ink); font-size: 18px; line-height: 1.3; } .kol-application-copy p { margin: 0; color: #747d78; font-size: 13px; line-height: 1.55; } .kol-status-kicker { display: inline-block; color: #c72139; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .kol-status-view { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .kol-status-orb { width: 76px; height: 76px; position: relative; display: grid; place-items: center; margin-bottom: 18px; border-radius: 24px; color: #b47418; background: #fff7e8; } .kol-status-orb > svg { width: 34px; height: 34px; } .kol-status-orb > b { position: absolute; inset: -6px; border: 2px solid transparent; border-top-color: #d7982e; border-radius: 28px; animation: kol-spin 1.2s linear infinite; } .kol-status-orb.reviewing { color: #687670; background: #f0f3f1; } .kol-status-orb.reviewing > b { border-top-color: #4d5a54; } .kol-status-view h3 { margin: 8px 0; color: var(--ink); font-size: 22px; line-height: 1.28; letter-spacing: -.02em; } .kol-status-view > p { max-width: 510px; margin: 0; color: #747d78; font-size: 14px; line-height: 1.6; } .kol-review-track { width: min(330px,80%); height: 6px; margin-top: 25px; overflow: hidden; border-radius: 99px; background: #ecefec; } .kol-review-track i { width: 45%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#e51f3f,#ff824b); animation: kol-review 1.1s ease-in-out infinite alternate; } .kol-review-card { width: min(470px,100%); margin-top: 22px; padding: 13px 15px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 13px; background: #fafbf9; text-align: left; } .kol-review-card > span { display: flex; align-items: center; gap: 8px; } .kol-review-card svg { width: 16px; height: 16px; color: #7c8781; } .kol-review-card b { color: var(--ink); font-size: 13px; white-space: nowrap; } .kol-review-card small { min-width: 0; margin-left: auto; overflow: hidden; color: #818985; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .kol-wide-action { width: min(320px,100%); margin-top: 22px; } .kol-benefits { width: min(520px,100%); margin-top: 22px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } .kol-benefits span { min-height: 96px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--line); border-radius: 14px; background: #fafbf9; } .kol-benefits svg { width: 20px; height: 20px; color: #d91f3b; } .kol-benefits b { color: #525b56; font-size: 12px; line-height: 1.35; } html[data-theme="dark"] .kol-dialog, html[data-theme="dark"] .kol-dialog-header { color: var(--text); background: #181b19; border-color: var(--line); } html[data-theme="dark"] .kol-steps, html[data-theme="dark"] .kol-review-card, html[data-theme="dark"] .kol-benefits span, html[data-theme="dark"] .kyc-upload, html[data-theme="dark"] .kol-field input:not([type="file"]), html[data-theme="dark"] .kol-field select, html[data-theme="dark"] .kol-secondary { color: var(--text); background: #202421; border-color: var(--line); } html[data-theme="dark"] .kol-steps > span > i { background: #252a27; border-color: var(--line); } html[data-theme="dark"] .kol-segmented button { color: var(--text); background: #202421; border-color: var(--line); } html[data-theme="dark"] .kol-segmented button.active { color: #111; background: #fff; } html[data-theme="dark"] .kol-field, html[data-theme="dark"] .kol-field legend { color: var(--text); } html[data-theme="dark"] .kol-verified-callout > span { background: #18211d; } html[data-theme="dark"] .kol-profile-badge, html[data-theme="dark"] .kol-avatar-badge { color: #b8adff; filter: drop-shadow(0 4px 6px rgba(109,85,246,.28)); } html[data-theme="dark"] .kol-verified-avatar { box-shadow: 0 0 0 2px #806cff,0 0 0 4px rgba(109,85,246,.18) !important; } html[data-theme="dark"] .kol-identity-label { color: #c4bbff; background: rgba(109,85,246,.16); border-color: rgba(128,108,255,.68); } @media (max-width: 720px) { .kol-layer { padding: 0; align-items: end; } .kol-dialog { width: 100%; max-height: 94vh; border-width: 1px 0 0; border-radius: 24px 24px 0 0; } .kol-dialog-header { min-height: 80px; padding: 14px 16px; } .kol-dialog-icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; } .kol-dialog-heading h2 { font-size: 17px; } .kol-dialog-heading p { font-size: 12px; } .kol-steps { min-height: 60px; flex-basis: 60px; padding: 10px 16px; } .kol-steps > span > b { display: none; } .kol-steps > em { margin: 0 8px; } .kol-dialog-body { padding: 18px 16px 24px; } .kyc-upload-grid { grid-template-columns: 1fr; } .kyc-upload { min-height: 118px; } .kol-actions { grid-template-columns: 1fr; } .kol-actions .kol-primary { order: -1; } .kol-status-view { min-height: 390px; } .kol-benefits { grid-template-columns: 1fr; } .kol-benefits span { min-height: 66px; flex-direction: row; } .kol-review-card { align-items: flex-start; flex-direction: column; } .kol-review-card small { max-width: 100%; margin-left: 0; } } /* Shared publishing connectors opened from Create and the account menu. */ .connectors-layer { position: fixed; z-index: 148; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(24,27,25,.46); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .18s ease; } .connectors-layer[hidden] { display: none !important; } .connectors-layer.show { opacity: 1; pointer-events: auto; } .connectors-dialog { width: min(920px,100%); max-height: min(760px,calc(100vh - 44px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(226,229,226,.94); border-radius: 24px; color: var(--ink); background: #fff; box-shadow: 0 34px 110px rgba(20,24,21,.3); transform: translateY(12px) scale(.985); transition: transform .2s ease; } .connectors-layer.show .connectors-dialog { transform: none; } .connectors-header { min-height: 106px; flex: 0 0 auto; padding: 22px 26px 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-bottom: 1px solid var(--line); } .connectors-header > div { min-width: 0; } .connectors-header h2 { margin: 0; color: var(--ink); font-size: 24px; line-height: 1.2; letter-spacing: -.03em; } .connectors-header p { max-width: 710px; margin: 7px 0 0; color: #7d8782; font-size: 13px; line-height: 1.5; } .connectors-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } .connectors-icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; color: #65706a; background: transparent; } .connectors-icon-button:hover { color: var(--ink); border-color: var(--line); background: var(--soft); } .connectors-icon-button svg { width: 21px; height: 21px; } .connectors-body { flex: 1; min-height: 0; padding: 16px 28px; display: grid; gap: 10px; overflow: auto; scrollbar-width: thin; scrollbar-color: #d7dcd8 transparent; } .connector-card { min-height: 104px; padding: 14px 20px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 16px; border: 1px solid #e2e6e2; border-radius: 18px; background: #fff; } .connector-card.connected { border-color: rgba(255,49,72,.13); background: #fff4f5; } .connector-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: #d91f3b; background: var(--violet-soft); } /* #203:四家统一「白色 glyph + 品牌底色 chip」。素材本身是白色 svg(social-icons/*.svg), 底色必须由 chip 提供——原先已连接态把 chip 置 transparent,白图标直接消失在白卡上(线上实证) */ .connector-icon.brand-tw { background: #111; } .connector-icon.brand-tg { background: #2aabee; } .connector-icon.brand-fb { background: #0866ff; } .connector-icon.brand-ig { background: linear-gradient(135deg, #feda75, #d62976 55%, #4f5bd5); } .connector-icon img { display: block; width: 22px; height: 22px; } .connector-icon.brand-tw img { width: 20px; height: 20px; } .connector-icon svg { width: 23px; height: 23px; } /* 未开放平台：只把「状态胶囊 + 按钮」降一档，品牌标保持满色—— 本单(#203)的诉求就是图标要看得清，再给图标加灰度等于把刚修好的问题换个形式复现 */ .connector-card.soon .connector-state { color: #7c857f; border-style: dashed; } .connector-card.soon .connector-action { color: #79827c; } .connector-copy { min-width: 0; } .connector-title-row { display: flex; align-items: center; gap: 10px; } .connector-title-row h3 { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.3; letter-spacing: -.02em; } .connector-state { padding: 3px 8px; border: 1px solid #dde3df; border-radius: 999px; color: #6f7873; background: #f3f5f3; font-size: 11px; font-weight: 720; line-height: 1.2; } .connector-card.connected .connector-state { color: #c91d36; border-color: rgba(255,49,72,.14); background: #fff; } .connector-copy p { margin: 5px 0 0; color: #7d8782; font-size: 13px; line-height: 1.45; } /* Telegram 连接引导：告诉用户该把哪个 bot 拉进频道。 比描述文案强调一档（有底色 + 左侧色条），因为它是行动指引而非介绍； 不用 .connector-copy p 的样式否则会和上面的描述糊成一片。 */ .connector-copy .connector-hint { margin: 8px 0 0; padding: 8px 11px; border-left: 2px solid rgba(217,31,59,.35); border-radius: 0 8px 8px 0; color: #5a635e; font-size: 12px; line-height: 1.55; background: #f6f7f6; } .connector-copy > strong { display: block; margin-top: 5px; color: #4e5752; font-size: 12px; font-weight: 580; line-height: 1.4; } .connector-copy > small { margin-top: 7px; display: flex; align-items: center; gap: 7px; color: #84908a; font-size: 11px; line-height: 1.4; } .connector-copy > small.warning { color: #bd7714; } .connector-copy > small svg { width: 14px; height: 14px; flex: 0 0 14px; } .connector-action { min-width: 100px; min-height: 42px; padding: 0 15px; border: 1px solid #dfe3df; border-radius: 12px; color: var(--ink); background: #fff; font-size: 12px; font-weight: 720; } .connector-action:hover:not(:disabled) { border-color: rgba(255,49,72,.24); color: #c91d36; background: var(--violet-soft); } .connector-action:disabled { color: #fff; border-color: transparent; background: #b7aefe; opacity: 1; } .connectors-footer { min-height: 58px; flex: 0 0 auto; padding: 13px 28px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); color: #7b8781; background: #fafbf9; font-size: 12px; line-height: 1.45; } .connectors-footer svg { width: 17px; height: 17px; flex: 0 0 17px; } html[data-theme="dark"] .connectors-dialog, html[data-theme="dark"] .connectors-header { color: var(--text); background: #181b19; border-color: var(--line); } html[data-theme="dark"] .connectors-body { background: #111412; } html[data-theme="dark"] .connector-card { border-color: var(--line); background: #181d1a; } html[data-theme="dark"] .connector-card.connected { border-color: #303356; background: #20223a; } html[data-theme="dark"] .connector-icon { color: #b8adff; background: #282b49; } html[data-theme="dark"] .connector-title-row h3, html[data-theme="dark"] .connector-copy > strong { color: var(--ink); } html[data-theme="dark"] .connector-state { color: #aab4af; border-color: #36423c; background: #202722; } html[data-theme="dark"] .connector-card.connected .connector-state { color: #c4bbff; border-color: #3a3e66; background: #282b49; } html[data-theme="dark"] .connector-copy .connector-hint { border-left-color: rgba(184,173,255,.4); color: #b3bdb7; background: #1e2320; } html[data-theme="dark"] .connector-copy p, html[data-theme="dark"] .connector-copy > small { color: var(--muted); } html[data-theme="dark"] .connector-copy > small.warning { color: #e6b65b; } html[data-theme="dark"] .connector-action { color: var(--text); border-color: #39443e; background: #222a25; } html[data-theme="dark"] .connector-action:hover:not(:disabled) { color: #c4bbff; border-color: #555280; background: #282b49; } html[data-theme="dark"] .connector-action:disabled { color: #aaa2e8; border-color: #353858; background: #2a2d4a; } html[data-theme="dark"] .connectors-footer { color: var(--muted); border-color: var(--line); background: #151916; } @media (max-width: 720px) { .connectors-layer { padding: 0; align-items: end; } .connectors-dialog { width: 100%; max-height: 95vh; border-width: 1px 0 0; border-radius: 24px 24px 0 0; } .connectors-header { min-height: 88px; padding: 16px; } .connectors-header h2 { font-size: 20px; } .connectors-header p { font-size: 12px; } .connectors-header-actions { gap: 3px; } .connectors-body { padding: 14px 16px 18px; } .connector-card { padding: 15px; grid-template-columns: 44px minmax(0,1fr); gap: 12px; } .connector-action { grid-column: 2; width: 100%; } .connector-title-row { flex-wrap: wrap; } .connectors-footer { padding: 12px 16px; font-size: 11px; } } @media (max-width: 480px) { .connectors-header p { display: none; } .connector-title-row h3 { font-size: 16px; } .connector-copy p { font-size: 12px; } .connector-copy > strong { font-size: 11px; } } .wallet-page-heading .heading-actions svg { width: 16px; height: 16px; } .wallet-v2 { --wallet-ink: #11110f; --wallet-muted: #73756f; --wallet-line: #e9e5dd; --wallet-soft: #f7f5f0; width: 100%; padding-bottom: 36px; color: var(--wallet-ink); } .wallet-main-tabs { width: fit-content; margin-bottom: 18px; padding: 4px; display: flex; align-items: center; gap: 4px; border: 1px solid var(--wallet-line); border-radius: 12px; background: #efede7; } .wallet-main-tabs button { min-height: 38px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 9px; color: #71736d; background: transparent; font-size: 13px; font-weight: 760; cursor: pointer; transition: color .16s ease, background .16s ease, box-shadow .16s ease; } .wallet-main-tabs button:hover { color: #11110f; } .wallet-main-tabs button.active { color: #11110f; background: #fff; box-shadow: 0 2px 8px rgba(32,28,21,.08); } .wallet-main-tabs svg { width: 16px; height: 16px; } .wallet-tab-panel[hidden] { display: none !important; } .wallet-tab-panel.active { animation: wallet-in .22s ease both; } .wallet-connect-banner { min-height: 68px; margin-bottom: 16px; padding: 12px 14px 12px 17px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #f3d4c9; border-radius: 15px; background: linear-gradient(105deg,#fff7f1 0%,#fffaf6 72%,#fff 100%); } .wallet-connect-banner > span { min-width: 0; display: grid; grid-template-columns: 22px auto; align-items: center; column-gap: 10px; } .wallet-connect-banner > span > svg { width: 20px; height: 20px; grid-row: 1 / 3; color: #e2532f; } .wallet-connect-banner strong { font-size: 13px; line-height: 1.4; } .wallet-connect-banner small { color: #7d766f; font-size: 12px; line-height: 1.45; } .wallet-connect-banner.connected { border-color: #cfe6da; background: linear-gradient(105deg,#f3faf6,#fff); } .wallet-connect-banner.connected > span > svg { color: #168653; } .wallet-overview-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } .wallet-balance-primary, .wallet-metric-card { min-height: 202px; position: relative; overflow: hidden; border-radius: 18px; } .wallet-balance-primary { padding: 22px; color: #fff; background: radial-gradient(circle at 87% 8%,rgba(255,255,255,.24),transparent 24%), linear-gradient(135deg,#161513 0%,#23211d 62%,#3b2724 100%); box-shadow: 0 18px 36px rgba(25,20,17,.13); } .wallet-balance-primary::after { content: ""; width: 150px; height: 150px; position: absolute; right: -55px; bottom: -70px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.035),0 0 0 55px rgba(255,255,255,.025); } .wallet-balance-primary header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.7); font-size: 12px; font-weight: 700; letter-spacing: .02em; } .wallet-balance-primary header svg { width: 22px; height: 22px; color: #ff6a55; } .wallet-balance-value { margin-top: 16px; position: relative; z-index: 1; display: flex; align-items: baseline; gap: 8px; } .wallet-balance-value strong { font-size: clamp(34px,3vw,46px); font-weight: 850; line-height: 1; letter-spacing: -2px; } .wallet-balance-value span { color: rgba(255,255,255,.65); font-size: 12px; font-weight: 800; } .wallet-balance-primary > p { margin: 8px 0 20px; position: relative; z-index: 1; color: rgba(255,255,255,.58); font-size: 12px; } .wallet-primary-actions { position: relative; z-index: 1; display: flex; gap: 8px; } .wallet-solid-button, .wallet-ghost-button, .wallet-convert-button, .wallet-dialog-primary, .wallet-dialog-secondary { min-height: 40px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-size: 12px; font-weight: 780; cursor: pointer; transition: transform .16s ease, filter .16s ease, background .16s ease, border-color .16s ease; } .wallet-solid-button { color: #111; border: 1px solid #fff; background: #fff; } .wallet-ghost-button { color: #fff; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.07); } .wallet-solid-button:hover, .wallet-ghost-button:hover { transform: translateY(-1px); } .wallet-solid-button svg, .wallet-ghost-button svg { width: 15px; height: 15px; } .wallet-metric-card { padding: 22px !important; border-color: var(--wallet-line) !important; } .wallet-metric-card::after { display: none; } .wallet-metric-icon { width: 30px; height: 30px; margin: 0; display: grid; place-items: center; position: absolute; right: 16px; top: 16px; z-index: 1; border-radius: 9px; color: #d72b3e; background: #fff0f1; } .wallet-metric-icon.warm { color: #c36a1d; background: #fff4df; } .wallet-metric-icon.token { color: #d72b3e; background: #fff0f1; } .wallet-metric-icon svg { width: 15px; height: 15px; } .wallet-metric-card > small, .wallet-earn-card header span, .wallet-records-card header span, .wallet-billing-card header span { display: block; color: #85857f; font-size: 11px; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; } .wallet-metric-card > small { padding-right: 40px; } .wallet-metric-card > strong { margin-top: 6px; display: block; font-size: 27px; font-weight: 830; line-height: 1.1; letter-spacing: -1px; } .wallet-metric-card > strong b { color: #8a8a84; font-size: 11px; letter-spacing: 0; } .wallet-metric-card > p { margin: 8px 0 13px; color: #777973; font-size: 12px; line-height: 1.45; } .wallet-metric-card > em { padding: 5px 8px; display: inline-flex; border-radius: 7px; color: #168653; background: #eff8f3; font-size: 10px; font-style: normal; font-weight: 750; } .wallet-metric-card > em.neutral { color: #72746e; background: #f3f2ee; } .wallet-metric-card > em.token { color: #5949b8; background: #f1efff; } .wallet-metric-footer { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .wallet-metric-footer em { padding: 5px 8px; display: inline-flex; border-radius: 7px; color: #5949b8; background: #f1efff; font-size: 10px; font-style: normal; font-weight: 750; } .wallet-convert-entry { min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #ddd6ff; border-radius: 9px; color: #5949b8; background: #f7f5ff; font-size: 10px; font-weight: 780; cursor: pointer; transition: transform .16s ease,background .16s ease,border-color .16s ease; } .wallet-convert-entry:hover { border-color: #c9bfff; background: #efebff; transform: translateY(-1px); } .wallet-convert-entry svg { width: 14px; height: 14px; } .wallet-content-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(0,1.22fr) minmax(330px,.78fr); align-items: stretch; gap: 14px; } .wallet-content-grid > article { height: 100%; } .wallet-feature-grid { margin-top: 14px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; } .wallet-convert-card { min-height: 330px; padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 28px; position: relative; overflow: hidden; border: 1px solid #dcd7cd; border-radius: 18px; color: #fff; background: radial-gradient(circle at 78% 23%,rgba(110,88,255,.32),transparent 28%), radial-gradient(circle at 62% 78%,rgba(255,72,77,.18),transparent 30%), radial-gradient(circle at 14% 92%,rgba(255,255,255,.08),transparent 32%), #171614; } .wallet-convert-card::before, .wallet-convert-card::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; } .wallet-convert-card::before { width: 280px; height: 280px; right: -70px; top: -118px; } .wallet-convert-card::after { width: 160px; height: 160px; right: -28px; top: -58px; } .wallet-convert-copy { max-width: 480px; position: relative; z-index: 1; } .wallet-convert-copy > span { color: #b9abff; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .wallet-convert-copy h2 { max-width: 450px; margin: 12px 0 18px; font-size: clamp(23px,2.2vw,32px); line-height: 1.12; letter-spacing: -1px; } .wallet-convert-rate { width: fit-content; padding: 10px 13px; display: flex; align-items: center; gap: 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; background: rgba(255,255,255,.06); } .wallet-convert-rate span { display: flex; align-items: baseline; gap: 5px; } .wallet-convert-rate b { font-size: 20px; line-height: 1; } .wallet-convert-rate small { color: rgba(255,255,255,.55); font-size: 9px; font-weight: 800; } .wallet-convert-rate svg { width: 17px; height: 17px; color: #b9abff; } .wallet-convert-copy p { margin: 21px 0 5px; color: rgba(255,255,255,.63); font-size: 12px; } .wallet-convert-copy p strong { color: #fff; } .wallet-convert-copy > small { color: rgba(255,255,255,.42); font-size: 10px; } .wallet-convert-button { min-width: 142px; min-height: 46px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; z-index: 2; color: #fff; border: 0; border-radius: 10px; background: linear-gradient(115deg,#ff3148,#ff6a35); box-shadow: 0 14px 32px rgba(255,62,66,.27); font-size: 12px; font-weight: 780; cursor: pointer; transition: transform .16s ease,filter .16s ease; } .wallet-convert-button:hover { transform: translateY(-2px); filter: brightness(1.03); } .wallet-convert-button svg { width: 17px; height: 17px; } .wallet-earn-card { min-height: 330px; padding: 22px !important; border-color: var(--wallet-line) !important; } .wallet-earn-card header, .wallet-records-card header, .wallet-billing-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .wallet-earn-card header h2, .wallet-records-card header h2, .wallet-billing-card header h2 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.35px; } .wallet-earn-card header > svg { width: 22px; height: 22px; color: #dc3142; } .wallet-task-list { margin-top: 13px; } .wallet-task-row { min-height: 42px; padding: 8px 0; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 9px; border-top: 1px solid #efede8; } .wallet-task-row:first-child { border-top: 0; } .wallet-task-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #d82e41; background: #fff1f2; } .wallet-task-icon svg { width: 15px; height: 15px; } .wallet-task-row > div { min-width: 0; } .wallet-task-row strong { display: block; overflow: hidden; font-size: 11.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .wallet-task-row small { display: block; margin-top: 2px; overflow: hidden; color: #8a8b85; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .wallet-task-row em, .wallet-task-row button { padding: 5px 8px; border-radius: 7px; font-size: 9.5px; font-style: normal; font-weight: 780; white-space: nowrap; } .wallet-task-row em.complete { color: #198658; background: #eef8f3; } .wallet-task-row button { color: #c7283b; border: 1px solid #f2cdd2; background: #fff5f6; cursor: pointer; } .wallet-task-row button:hover { border-color: #e9aeb7; background: #ffedef; } .wallet-bottom-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(260px,.55fr); gap: 14px; } .wallet-records-card, .wallet-brand-task, .wallet-billing-card { padding: 22px !important; border-color: var(--wallet-line) !important; } .wallet-record-filters { padding: 3px; display: flex; gap: 2px; border-radius: 9px; background: #f2f0eb; } .wallet-record-filters button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 7px; color: #7e7f79; background: transparent; font-size: 9.5px; font-weight: 760; cursor: pointer; } .wallet-record-filters button.active { color: #111; background: #fff; box-shadow: 0 2px 7px rgba(25,22,18,.08); } .wallet-record-scroll { height: 354px; margin-top: 13px; padding-right: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d8d4cc transparent; } .wallet-record-scroll::-webkit-scrollbar { width: 6px; } .wallet-record-scroll::-webkit-scrollbar-track { background: transparent; } .wallet-record-scroll::-webkit-scrollbar-thumb { border-radius: 8px; background: #d8d4cc; } .wallet-record-list { min-height: 100%; } .wallet-record-row { min-height: 61px; padding: 10px 0; display: grid; grid-template-columns: 38px minmax(0,1fr) auto auto; align-items: center; gap: 11px; border-top: 1px solid #efede8; } .wallet-record-row:first-child { border-top: 0; } .wallet-record-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #5f625d; background: #f4f2ed; } .wallet-record-icon svg { width: 16px; height: 16px; } .wallet-record-row > span:nth-child(2) { min-width: 0; } .wallet-record-row strong { display: block; font-size: 11.5px; } .wallet-record-row small { display: block; margin-top: 3px; overflow: hidden; color: #898a84; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .wallet-record-row > em { min-width: 74px; font-style: normal; text-align: right; } .wallet-record-row time { display: block; color: #9a9b96; font-size: 9px; } .wallet-record-row > em { display: block; margin-top: 3px; font-size: 11px; font-weight: 760; } .wallet-record-row > em.positive { color: #168653; } .wallet-record-empty { min-height: 100%; display: grid; place-items: center; align-content: center; gap: 7px; color: #90918c; text-align: center; } .wallet-record-empty svg { width: 25px; height: 25px; } .wallet-record-empty strong { color: #33342f; font-size: 12px; } .wallet-record-empty small { font-size: 10px; } .wallet-record-pagination { min-height: 48px; margin-top: 10px; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #ebe8e2; } .wallet-record-pagination > span { color: #8a8b85; font-size: 10px; } .wallet-record-pagination > span b { color: #3b3c37; font-weight: 780; } .wallet-page-controls { display: flex; align-items: center; gap: 4px; } .wallet-page-controls button { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 1px solid #e5e1d9; border-radius: 8px; color: #686a64; background: #fff; font-size: 10px; font-weight: 780; cursor: pointer; } .wallet-page-controls button:hover:not(:disabled) { border-color: #d5d0c7; background: #f7f5f1; } .wallet-page-controls button.active { color: #fff; border-color: #111; background: #111; } .wallet-page-controls button:disabled { opacity: .34; } .wallet-page-controls button svg { width: 14px; height: 14px; } .wallet-page-controls > i { width: 18px; color: #a1a29d; font-size: 11px; font-style: normal; text-align: center; } .wallet-brand-task { min-height: 245px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .wallet-brand-task-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; color: #d52d40; background: #fff0f1; } .wallet-brand-task-icon svg { width: 20px; height: 20px; } .wallet-brand-task h2 { margin: 15px 0 7px; font-size: 17px; } .wallet-brand-task p { margin: 0 0 17px; color: #7a7c76; font-size: 11px; line-height: 1.55; } .wallet-brand-task-inline { min-height: 96px; margin-top: 14px; display: grid; grid-template-columns: 43px minmax(0,1fr) auto; align-items: center; gap: 14px; justify-content: initial; } .wallet-brand-task-inline h2 { margin: 0 0 4px; } .wallet-brand-task-inline p { margin: 0; } .wallet-current-plan { min-height: 128px; margin-bottom: 14px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; position: relative; border: 1px solid #e5d5d1; border-radius: 18px; color: #fff; background: radial-gradient(circle at 88% 18%,rgba(255,82,71,.3),transparent 27%), linear-gradient(125deg,#171614,#2a2420); } .wallet-current-plan::after { content: ""; width: 160px; height: 160px; position: absolute; right: -66px; top: -90px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; } .wallet-current-plan > div { position: relative; z-index: 1; } .wallet-current-plan > div:first-child > span { color: #ff8b75; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .wallet-current-plan h2 { margin: 6px 0 5px; font-size: 25px; letter-spacing: -.7px; } .wallet-current-plan p { margin: 0; color: rgba(255,255,255,.55); font-size: 11px; } .wallet-current-plan > div:last-child { display: flex; align-items: center; gap: 18px; } .wallet-current-plan > div:last-child > strong { font-size: 25px; } .wallet-current-plan > div:last-child > strong small { color: rgba(255,255,255,.5); font-size: 10px; } .wallet-plan-grid { display: grid; grid-template-columns: repeat(3,1fr); align-items: stretch; gap: 14px; } .wallet-plan-card { min-height: 350px; padding: 22px !important; position: relative; display: flex; flex-direction: column; border-color: var(--wallet-line) !important; } .wallet-plan-card.featured { border-color: #f0b8c0 !important; box-shadow: 0 14px 34px rgba(255,49,72,.08); } .wallet-plan-card > span:not(.wallet-plan-badge) { color: #898a84; font-size: 10px; } .wallet-plan-badge { padding: 5px 8px; position: absolute; right: 15px; top: 15px; border-radius: 7px; color: #c82438; background: #fff0f1; font-size: 9px; font-weight: 780; } .wallet-plan-card h3 { margin: 9px 0 15px; font-size: 18px; } .wallet-plan-card > div { display: flex; align-items: baseline; gap: 5px; } .wallet-plan-card > div strong { font-size: 31px; line-height: 1; letter-spacing: -1.2px; } .wallet-plan-card > div small { color: #8c8d87; font-size: 10px; } .wallet-plan-card ul { margin: 21px 0 22px; padding: 17px 0 0; display: grid; gap: 11px; border-top: 1px solid #ece9e3; list-style: none; } .wallet-plan-card li { display: flex; align-items: flex-start; gap: 8px; color: #646660; font-size: 10.5px; line-height: 1.4; } .wallet-plan-card li svg { width: 14px; height: 14px; flex: 0 0 14px; color: #168653; } .wallet-billing-card { margin-top: 14px; } .wallet-billing-card header { align-items: center; } .wallet-billing-table { margin-top: 18px; overflow: hidden; border: 1px solid #ebe8e2; border-radius: 12px; } .wallet-billing-row { min-height: 48px; padding: 0 15px; display: grid; grid-template-columns: 1fr 1.7fr .8fr 1.2fr .65fr; align-items: center; gap: 12px; border-top: 1px solid #eeece7; color: #555751; font-size: 10.5px; } .wallet-billing-row:first-child { border-top: 0; } .wallet-billing-row.heading { min-height: 38px; color: #8b8c87; background: #f8f7f3; font-size: 9px; font-weight: 750; text-transform: uppercase; } .wallet-billing-row em { width: fit-content; padding: 4px 7px; border-radius: 6px; color: #168653; background: #edf8f2; font-size: 9px; font-style: normal; font-weight: 780; } .wallet-layer { position: fixed; inset: 0; z-index: 420; padding: 24px; display: grid; place-items: center; opacity: 0; visibility: hidden; background: rgba(13,13,12,.5); backdrop-filter: blur(8px); transition: opacity .18s ease, visibility .18s ease; } .wallet-layer[hidden] { display: none !important; } .wallet-layer.show { opacity: 1; visibility: visible; } .wallet-dialog { width: min(520px,100%); max-height: min(86vh,760px); overflow: hidden; border: 1px solid #e6e2da; border-radius: 22px; color: #11110f; background: #fff; box-shadow: 0 32px 90px rgba(17,14,11,.23); transform: translateY(12px) scale(.985); transition: transform .18s ease; } .wallet-layer.show .wallet-dialog { transform: translateY(0) scale(1); } .wallet-dialog > header { min-height: 79px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #ece9e3; } .wallet-dialog > header > div { min-width: 0; display: flex; align-items: center; gap: 12px; } .wallet-dialog-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 13px; color: #d62d40; background: #fff0f1; } .wallet-dialog-icon svg { width: 20px; height: 20px; } .wallet-dialog h2 { margin: 0; font-size: 17px; letter-spacing: -.3px; } .wallet-dialog header p { margin: 4px 0 0; overflow: hidden; color: #858680; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; } .wallet-dialog-close { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border: 1px solid #e7e3dc; border-radius: 10px; color: #696b65; background: #fff; cursor: pointer; } .wallet-dialog-close:hover { color: #111; background: #f7f5f1; } .wallet-dialog-close svg { width: 17px; height: 17px; } .wallet-dialog-body { max-height: calc(min(86vh,760px) - 80px); padding: 20px; overflow: auto; } .wallet-dialog-tabs { margin-bottom: 20px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 11px; background: #f1efe9; } .wallet-dialog-tabs button { min-height: 37px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 8px; color: #767871; background: transparent; font-size: 11px; font-weight: 750; cursor: pointer; } .wallet-dialog-tabs button.active { color: #111; background: #fff; box-shadow: 0 2px 8px rgba(24,20,16,.08); } .wallet-dialog-tabs svg { width: 15px; height: 15px; } .wallet-connect-panel[hidden] { display: none !important; } .wallet-connect-panel { text-align: center; } .wallet-connect-visual, .wallet-plan-confirm > span { width: 62px; height: 62px; margin: 4px auto 15px; display: grid; place-items: center; border-radius: 19px; color: #d82d40; background: #fff0f1; } .wallet-connect-visual svg, .wallet-plan-confirm > span svg { width: 27px; height: 27px; } .wallet-connect-panel h3, .wallet-dialog-empty h3, .wallet-plan-confirm h3 { margin: 0; font-size: 18px; letter-spacing: -.35px; } .wallet-connect-panel > p, .wallet-dialog-empty p, .wallet-plan-confirm > p { max-width: 410px; margin: 8px auto 17px; color: #777973; font-size: 11px; line-height: 1.6; } .wallet-dialog-note { margin: 0 auto 15px; padding: 10px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #dcebe3; border-radius: 10px; color: #38725a; background: #f3faf6; font-size: 10px; } .wallet-dialog-note svg { width: 15px; height: 15px; } .wallet-dialog-primary, .wallet-dialog-secondary { width: 100%; min-height: 42px; } .wallet-dialog-primary { color: #fff; border: 0; background: linear-gradient(110deg,#ff3148,#ff6a35); box-shadow: 0 10px 24px rgba(255,49,72,.18); } .wallet-dialog-secondary { margin-top: 9px; color: #222; border: 1px solid #e5e1da; background: #fff; } .wallet-dialog-primary:hover:not(:disabled) { filter: brightness(.98); transform: translateY(-1px); } .wallet-dialog-secondary:hover { background: #f7f5f1; } .wallet-dialog-primary svg { width: 16px; height: 16px; } .wallet-form { display: grid; gap: 16px; text-align: left; } .wallet-form fieldset { margin: 0; padding: 0; border: 0; } .wallet-form legend, .wallet-form > label:not(.wallet-consent) { display: grid; gap: 7px; color: #2f302c; font-size: 11px; font-weight: 730; } .wallet-form input:not([type="checkbox"]) { width: 100%; min-height: 43px; padding: 0 13px; border: 1px solid #e2ded6; border-radius: 10px; color: #111; background: #faf9f6; font-size: 12px; } .wallet-form input:not([type="checkbox"]):focus { border-color: #e7a5ad; background: #fff; outline: 3px solid rgba(255,49,72,.08); } .wallet-form input.invalid { border-color: #e04b5d; } .wallet-form label > small { color: #93948e; font-size: 9.5px; font-weight: 500; } .wallet-chain-options { margin-top: 8px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; } .wallet-chain-options button { min-height: 38px; border: 1px solid #e4e0d8; border-radius: 9px; color: #686a64; background: #fff; font-size: 10px; font-weight: 740; cursor: pointer; } .wallet-chain-options button.active { color: #c92539; border-color: #efbbc2; background: #fff2f3; } .wallet-check-list { display: grid; gap: 9px; } .wallet-check-list > div { min-height: 64px; padding: 11px 12px; display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid #e9e5dd; border-radius: 11px; background: #faf9f6; } .wallet-check-list > div > svg { width: 18px; height: 18px; color: #d04c42; } .wallet-check-list > div.passed > svg { color: #178655; } .wallet-check-list strong { display: block; font-size: 11.5px; } .wallet-check-list small { display: block; margin-top: 3px; color: #898a84; font-size: 9.5px; } .wallet-check-list em, .wallet-check-list button { padding: 5px 8px; border-radius: 7px; font-size: 9px; font-style: normal; font-weight: 780; } .wallet-check-list em { color: #168653; background: #eef8f3; } .wallet-check-list > div.required em { color: #aa681b; background: #fff3df; } .wallet-check-list button { color: #c62539; border: 1px solid #efc3c9; background: #fff; cursor: pointer; } .wallet-withdraw-summary { padding: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border: 1px solid #e8e4dc; border-radius: 11px; background: #f8f7f3; } .wallet-withdraw-summary span { min-width: 0; } .wallet-withdraw-summary small { display: block; color: #8c8d87; font-size: 9px; } .wallet-withdraw-summary strong { display: block; margin-top: 4px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .wallet-amount-input { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; border: 1px solid #e2ded6; border-radius: 10px; background: #faf9f6; } .wallet-amount-input input { min-width: 0; border: 0 !important; background: transparent !important; outline: 0 !important; } .wallet-amount-input > span { color: #777973; font-size: 10px; font-weight: 740; } .wallet-amount-input button { margin: 0 6px; padding: 5px 7px; border: 0; border-radius: 6px; color: #c62639; background: #fff0f1; font-size: 9px; font-weight: 780; cursor: pointer; } .wallet-fee-summary { padding: 12px 13px; display: grid; gap: 8px; border: 1px solid #e9e5dd; border-radius: 10px; } .wallet-fee-summary span { display: flex; justify-content: space-between; gap: 14px; color: #7c7e78; font-size: 10px; } .wallet-fee-summary span:last-child { padding-top: 8px; border-top: 1px solid #ece9e3; color: #252622; } .wallet-consent { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 9px !important; color: #686a64 !important; font-size: 10px !important; font-weight: 550 !important; line-height: 1.45; } .wallet-consent input { margin-top: 1px; accent-color: #ff3148; } .wallet-history-list { display: grid; } .wallet-history-list > div { min-height: 68px; padding: 11px 0; display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; gap: 12px; border-top: 1px solid #ece9e3; } .wallet-history-list > div:first-child { border-top: 0; } .wallet-history-list > div > span { min-width: 0; display: grid; grid-template-columns: 33px auto; column-gap: 9px; } .wallet-history-list > div > span svg { width: 16px; height: 16px; grid-row: 1 / 3; align-self: center; color: #d42b3f; } .wallet-history-list strong { font-size: 11px; } .wallet-history-list small { overflow: hidden; color: #898a84; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .wallet-history-list time { color: #93948f; font-size: 9px; } .wallet-history-list em { padding: 5px 7px; border-radius: 6px; color: #b66b16; background: #fff5e3; font-size: 8.5px; font-style: normal; font-weight: 780; } .wallet-history-list em.complete { color: #168653; background: #eef8f3; } .wallet-history-list b { font-size: 10px; text-align: right; } .wallet-dialog-empty { padding: 24px 0 7px; text-align: center; } .wallet-dialog-empty > svg { width: 34px; height: 34px; margin-bottom: 13px; color: #a1a19b; } .wallet-convert-summary { padding: 14px; display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); align-items: center; gap: 12px; border: 1px solid #e7e3dc; border-radius: 12px; background: #f8f7f3; } .wallet-convert-summary > span { min-width: 0; } .wallet-convert-summary small { display: block; color: #8b8c86; font-size: 9px; } .wallet-convert-summary strong { display: block; margin-top: 4px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .wallet-convert-summary > svg { width: 18px; height: 18px; color: #6a58ce; } .wallet-convert-quick { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; } .wallet-convert-quick button { min-height: 34px; border: 1px solid #e4e0d8; border-radius: 8px; color: #666861; background: #fff; font-size: 9.5px; font-weight: 750; cursor: pointer; } .wallet-convert-quick button:hover { color: #c62539; border-color: #efbec5; background: #fff3f4; } .wallet-plan-confirm { text-align: center; } .wallet-plan-confirm > div { margin: 17px 0; padding: 13px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #e7e3dc; border-radius: 10px; background: #f8f7f3; } .wallet-plan-confirm > div small { color: #81827c; font-size: 10px; } .wallet-plan-confirm > div strong { font-size: 18px; } .wallet-subscription-manage { display: grid; gap: 9px; } .wallet-subscription-manage > div { min-height: 67px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e9e5dd; border-radius: 11px; } .wallet-subscription-manage > div > span { min-width: 0; display: grid; grid-template-columns: 31px auto; column-gap: 9px; } .wallet-subscription-manage > div svg { width: 16px; height: 16px; grid-row: 1 / 3; align-self: center; color: #d42b3e; } .wallet-subscription-manage strong { font-size: 11px; } .wallet-subscription-manage small { color: #898a84; font-size: 9.5px; } .wallet-subscription-manage em { color: #30312d; font-size: 10px; font-style: normal; font-weight: 750; } .wallet-subscription-manage button:not(.wallet-dialog-secondary) { padding: 6px 8px; border: 1px solid #e5e1d9; border-radius: 7px; color: #565852; background: #fff; font-size: 9px; font-weight: 750; cursor: pointer; } .wallet-dialog-secondary.danger-text { color: #c62639; } .wallet-rules { display: grid; gap: 10px; } .wallet-rules article { padding: 13px; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 11px; border: 1px solid #e8e4dc; border-radius: 11px; background: #faf9f6; } .wallet-rules article > svg { width: 18px; height: 18px; color: #d42b3e; } .wallet-rules strong { font-size: 11.5px; } .wallet-rules p { margin: 4px 0 0; color: #7c7e78; font-size: 10px; line-height: 1.5; } html[data-theme="dark"] .wallet-v2 { --wallet-ink: #f5f4ef; --wallet-muted: #a3a59f; --wallet-line: #343732; --wallet-soft: #242722; } html[data-theme="dark"] .wallet-main-tabs, html[data-theme="dark"] .wallet-record-filters { background: #242722; border-color: #353832; } html[data-theme="dark"] .wallet-main-tabs button.active, html[data-theme="dark"] .wallet-record-filters button.active { color: #f7f6f2; background: #343832; } html[data-theme="dark"] .wallet-connect-banner { border-color: #53362f; background: #261f1c; } html[data-theme="dark"] .wallet-connect-banner.connected { border-color: #2f4b3d; background: #1d2822; } html[data-theme="dark"] :is(.wallet-metric-card, .wallet-earn-card, .wallet-records-card, .wallet-brand-task, .wallet-plan-card, .wallet-billing-card) { color: #f7f6f2; background: #1d201d !important; border-color: #343732 !important; } html[data-theme="dark"] :is(.wallet-task-row, .wallet-record-row, .wallet-plan-card ul) { border-color: #333630; } html[data-theme="dark"] .wallet-dialog { color: #f7f6f2; background: #1c1f1c; border-color: #353832; } html[data-theme="dark"] .wallet-dialog > header { border-color: #343732; } html[data-theme="dark"] :is(.wallet-dialog-tabs, .wallet-form input:not([type="checkbox"]), .wallet-withdraw-summary, .wallet-convert-summary, .wallet-check-list>div, .wallet-plan-confirm>div, .wallet-rules article) { color: #f5f4ef; background: #252824; border-color: #393c37; } html[data-theme="dark"] .wallet-dialog-tabs button.active { color: #f7f6f2; background: #393c37; } html[data-theme="dark"] .wallet-dialog-close, html[data-theme="dark"] .wallet-dialog-secondary, html[data-theme="dark"] .wallet-chain-options button, html[data-theme="dark"] .wallet-subscription-manage button:not(.wallet-dialog-secondary) { color: #f5f4ef; background: #252824; border-color: #3b3e39; } html[data-theme="dark"] .wallet-convert-entry { color: #c8beff; background: #29263a; border-color: #46405f; } html[data-theme="dark"] .wallet-record-pagination { border-color: #343732; } html[data-theme="dark"] .wallet-record-pagination > span b { color: #f5f4ef; } html[data-theme="dark"] .wallet-page-controls button { color: #d6d7d2; background: #252824; border-color: #3b3e39; } html[data-theme="dark"] .wallet-page-controls button.active { color: #111; background: #fff; border-color: #fff; } @media (max-width: 1120px) { .wallet-plan-grid { grid-template-columns: 1fr 1fr; } .wallet-plan-card:last-child { grid-column: span 2; min-height: 300px; } } @media (max-width: 900px) { .wallet-overview-grid { grid-template-columns: 1fr 1fr; } .wallet-overview-grid > :last-child { grid-column: span 2; } .wallet-content-grid { grid-template-columns: 1fr; } .wallet-task-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; } .wallet-task-row:nth-child(2) { border-top: 0; } } @media (max-width: 780px) { .wallet-page-heading { align-items: flex-start; } .wallet-page-heading .heading-actions { width: 100%; } .wallet-page-heading .heading-actions .btn { flex: 1; } .wallet-overview-grid, .wallet-content-grid, .wallet-plan-grid { grid-template-columns: 1fr; } .wallet-overview-grid > :last-child, .wallet-plan-card:last-child { grid-column: auto; } .wallet-task-list { grid-template-columns: 1fr; } .wallet-task-row:nth-child(2) { border-top: 1px solid #efede8; } .wallet-current-plan { align-items: flex-start; flex-direction: column; } .wallet-current-plan > div:last-child { width: 100%; justify-content: space-between; } .wallet-records-card header, .wallet-billing-card header { align-items: flex-start; flex-direction: column; } .wallet-billing-table { border: 0; overflow: visible; } .wallet-billing-row { padding: 13px; grid-template-columns: 1fr 1fr; border: 1px solid #ebe8e2; border-radius: 10px; } .wallet-billing-row + .wallet-billing-row { margin-top: 8px; } .wallet-billing-row.heading { display: none; } } @media (max-width: 560px) { .wallet-layer { padding: 0; align-items: end; } .wallet-dialog { max-height: 94vh; border-width: 1px 0 0; border-radius: 22px 22px 0 0; } .wallet-dialog-body { max-height: calc(94vh - 80px); padding: 17px 15px 24px; } .wallet-main-tabs { width: 100%; } .wallet-main-tabs button { flex: 1; } .wallet-connect-banner { align-items: stretch; flex-direction: column; } .wallet-connect-banner .btn { width: 100%; } .wallet-record-filters { width: 100%; overflow: auto; } .wallet-record-filters button { flex: 1; } .wallet-record-pagination { align-items: flex-start; flex-direction: column; } .wallet-page-controls { width: 100%; justify-content: space-between; } .wallet-chain-options { grid-template-columns: 1fr; } .wallet-convert-quick { grid-template-columns: 1fr; } .wallet-brand-task-inline { min-height: 180px; grid-template-columns: 43px minmax(0,1fr); } .wallet-brand-task-inline .btn { grid-column: span 2; width: 100%; } .wallet-history-list > div { grid-template-columns: minmax(0,1fr) auto; } .wallet-history-list time { display: none; } } html[data-theme="dark"] .airvana-dot-black { background: #f3f7f4; } /* Step 1 — keep every interactive state in the same dark-purple hierarchy. */ html[data-theme="dark"] .create-hero .eyebrow { color: #b9afff !important; background: #20223a !important; box-shadow: inset 0 0 0 1px #30345a; } html[data-theme="dark"] .create-page .mode-toggle { padding: 4px; background: #0c1410; border: 1px solid var(--line); } html[data-theme="dark"] .create-page .mode-btn { color: #8f9994 !important; background: transparent !important; box-shadow: none !important; } html[data-theme="dark"] .create-page .mode-btn:hover { color: #d2d9d5 !important; background: #18211c !important; } html[data-theme="dark"] .create-page .mode-btn.active { color: #d8d3ff !important; background: #292d4b !important; box-shadow: inset 0 0 0 1px #504f87 !important; } html[data-theme="dark"] .create-page .scratch-stage { color: var(--ink); border-color: #37443d; background: #121a16; box-shadow: 0 18px 42px rgba(0,0,0,.18); } html[data-theme="dark"] .create-page .scratch-stage-icon { color: #d8d3ff; background: #292d4b; box-shadow: inset 0 0 0 1px #504f87; } html[data-theme="dark"] .create-page .idea-chip { color: #aeb8b3 !important; background: #121a16 !important; border-color: var(--line-strong) !important; } html[data-theme="dark"] .create-page .idea-chip:hover, html[data-theme="dark"] .create-page .idea-chip:focus-visible { color: #d8d3ff !important; background: #20223a !important; border-color: #504f87 !important; } html[data-theme="dark"] .create-page .deck-arrow { color: #c8d0cc !important; background: #121a16 !important; border-color: var(--line-strong) !important; box-shadow: 0 8px 20px rgba(0,0,0,.18); } html[data-theme="dark"] .create-page .deck-arrow:hover { color: #d8d3ff !important; background: #20223a !important; border-color: #504f87 !important; } html[data-theme="dark"] .create-page .template-card footer { color: #5e4ce1 !important; background: #f0edff !important; } html[data-theme="dark"] button:disabled, html[data-theme="dark"] button[aria-disabled="true"] { opacity: .38; } /* Step 2 — shared three-column workspace. */ html[data-theme="dark"] .configure-workspace { color: var(--text); background: #101713 !important; border-color: var(--line-strong) !important; box-shadow: 0 18px 48px rgba(0,0,0,.22); } html[data-theme="dark"] .configure-workspace .configure-col + .configure-col { border-color: var(--line); } html[data-theme="dark"] .configure-workspace .message.agent { color: #dbe3df; background: #0b120f; } html[data-theme="dark"] .configure-workspace .message.user { color: #fff; background: linear-gradient(135deg,var(--violet),var(--violet-2)); box-shadow: 0 8px 22px rgba(91,69,230,.23); } html[data-theme="dark"] .configure-workspace .process-card { color: var(--text); background: #111915; border-color: var(--line); } html[data-theme="dark"] .configure-workspace .process-toggle { color: #b9c3be; background: #0d1511; } html[data-theme="dark"] .configure-workspace .process-toggle:hover { color: var(--ink); background: #18211c; } html[data-theme="dark"] .configure-workspace .process-step { color: #929d97; } html[data-theme="dark"] .configure-workspace .process-step i { color: var(--green); background: var(--green-soft); } html[data-theme="dark"] .configure-workspace .chat-composer input, html[data-theme="dark"] .configure-workspace .chat-composer input::placeholder { color: #9aa59f; background: #0c1410; border-color: var(--line); } html[data-theme="dark"] .configure-workspace .chat-composer input:focus { color: var(--ink); border-color: #6555c8; box-shadow: 0 0 0 3px rgba(109,85,246,.14); outline: 0; } html[data-theme="dark"] .configure-brief-card { color: var(--text); background: #111915; border-color: var(--line); } html[data-theme="dark"] .configure-brief-toggle { color: #d1d9d5; } html[data-theme="dark"] .configure-brief-toggle:hover { background: #18211c; } html[data-theme="dark"] .configure-brief-content span { color: #77837d; } html[data-theme="dark"] .configure-brief-content strong { color: #dce3df; } html[data-theme="dark"] .review-style-composer, html[data-theme="dark"] .configure-composer-shell, html[data-theme="dark"] .review-style-composer textarea { color: var(--ink); background: #0c1410 !important; border-color: var(--line); } html[data-theme="dark"] .review-style-composer textarea::placeholder { color: #78837d; } html[data-theme="dark"] .configure-composer-shell:focus-within { border-color: #6555c8; box-shadow: 0 0 0 3px rgba(109,85,246,.14); } html[data-theme="dark"] .review-style-composer .configure-composer-tool { color: #89948e; } html[data-theme="dark"] .review-style-composer .configure-composer-tool:hover { color: var(--ink); background: #1a241f !important; } html[data-theme="dark"] .configure-workspace .phone-stage { background: radial-gradient(circle at 50% 44%,#1a211d 0,#0c120f 68%,#080d0b 100%); } html[data-theme="dark"] .configure-quality, html[data-theme="dark"] .configure-zoom span, html[data-theme="dark"] .configure-zoom button { color: #89948e; } html[data-theme="dark"] .configure-zoom button:hover { color: #fff; background: #1a241f; } html[data-theme="dark"] .configure-zoom input { accent-color: var(--violet); } html[data-theme="dark"] .configure-workspace .settings-body.configuration-sections { color: var(--text); background: #0d1411 !important; } html[data-theme="dark"] .configuration-panel-head > span { color: #aeb8b3; background: #18211c; } html[data-theme="dark"] .config-module, html[data-theme="dark"] .config-module-toggle, html[data-theme="dark"] .config-module-body { color: var(--text); background: #121a16; border-color: var(--line); box-shadow: none; } html[data-theme="dark"] .config-module-toggle:hover { background: #18211c; } html[data-theme="dark"] .config-module-icon.game { color: #ff7184; background: #321c23; } html[data-theme="dark"] .game-config-body .setting-section { border-color: var(--line); } html[data-theme="dark"] .configure-workspace .setting-title { color: #78837d; } html[data-theme="dark"] .configure-workspace .tower-card { background: #0c1410; border-color: var(--line); } html[data-theme="dark"] .configure-workspace .tower-head { color: #d4dcd8; background: #111915; } html[data-theme="dark"] .configure-workspace .tower-head:hover { color: #fff; background: #18211c; } html[data-theme="dark"] .agent-hub.config-module, html[data-theme="dark"] .agent-hub.config-module .agent-hub-toggle, html[data-theme="dark"] .agent-hub.config-module .agent-hub-body { background: #1d2135; border-color: #303652; } html[data-theme="dark"] .agent-hub.config-module .agent-hub-toggle:hover { background: #242841; } html[data-theme="dark"] .agent-hub.config-module .agent-hub-icon { color: #aa9dff; background: #29274a; } html[data-theme="dark"] .agent-hub-copy strong { color: #f3f1ff; } html[data-theme="dark"] .agent-hub-copy small { color: #a7a8b7; } html[data-theme="dark"] .agent-hub.config-module .agent-row-card { color: var(--text); background: #0c1410; border-color: #2b3630; } html[data-theme="dark"] .agent-open { color: #aeb8b3; } html[data-theme="dark"] .agent-open:hover { background: #151e19; } html[data-theme="dark"] .agent-open strong { color: var(--ink); } html[data-theme="dark"] .agent-open small { color: var(--muted); } html[data-theme="dark"] .agent-open em { color: #a897ff; } html[data-theme="dark"] .agent-mini-switch { background: #35413b; } html[data-theme="dark"] .agent-mini-switch.on { background: var(--violet); } html[data-theme="dark"] .studio { border-color: var(--line-strong) !important; box-shadow: 0 18px 48px rgba(0,0,0,.22); } html[data-theme="dark"] .studio .preview-stage { background: radial-gradient(ellipse at 50% 42%,rgba(34,43,38,.82) 0,rgba(17,24,20,.92) 48%,rgba(8,13,11,.98) 100%), linear-gradient(180deg,#141c18,#080d0b); scrollbar-color: #344039 transparent; } html[data-theme="dark"] .studio .brief-card, html[data-theme="dark"] .studio .generation-card, html[data-theme="dark"] .studio .quick-action { color: var(--text); background: #111915; border-color: var(--line); box-shadow: none; } html[data-theme="dark"] .studio .brief-toggle { color: #d1d9d5; } html[data-theme="dark"] .studio .brief-toggle:hover, html[data-theme="dark"] .studio .quick-action:hover { color: #fff; background: #18211c; border-color: #3a4840; } html[data-theme="dark"] .studio .brief-item span { color: #77837d; } html[data-theme="dark"] .studio .brief-item strong, html[data-theme="dark"] .studio .generation-head { color: #dce3df; } html[data-theme="dark"] .studio .gen-step { color: #929d97; } html[data-theme="dark"] .studio .bubble.agent { color: #dbe3df; background: #0b120f; } html[data-theme="dark"] .studio .bubble.user, html[data-theme="dark"] .studio .agent-avatar { color: #fff; background: linear-gradient(135deg,var(--violet),var(--violet-2)); } html[data-theme="dark"] .studio .composer, html[data-theme="dark"] .studio .composer-shell, html[data-theme="dark"] .studio .composer textarea { color: var(--ink); background: #0c1410; border-color: var(--line); } html[data-theme="dark"] .studio .composer textarea::placeholder { color: #78837d; } html[data-theme="dark"] .studio .composer-shell:focus-within { border-color: #6555c8; box-shadow: 0 0 0 3px rgba(109,85,246,.14); } html[data-theme="dark"] .studio .composer-tool { color: #89948e; } html[data-theme="dark"] .studio .composer-tool:hover { color: #fff; background: #1a241f; } html[data-theme="dark"] .studio .inspector-tab { color: #818d87; } html[data-theme="dark"] .studio .inspector-tab:hover { color: #d5ddd9; } html[data-theme="dark"] .studio .inspector-tab.active { color: #b7acff; border-bottom-color: var(--violet); background: transparent !important; } html[data-theme="dark"] .studio .inspector-scroll { background: #101713; } html[data-theme="dark"] .studio .readiness { color: #fff; background: #20243b; box-shadow: 0 12px 30px rgba(0,0,0,.22); } html[data-theme="dark"] .studio .readiness::after { background: rgba(128,108,255,.2); } html[data-theme="dark"] .studio .score { background: conic-gradient(#8f7dff 0 86%,rgba(255,255,255,.13) 86%); } html[data-theme="dark"] .studio .score::before { background: #282c43; } html[data-theme="dark"] .studio .readiness-copy span { color: #c3c5d3; } html[data-theme="dark"] .studio .readiness-copy em { color: #c4bbff; } html[data-theme="dark"] .studio .section-title { color: #77837d; } html[data-theme="dark"] .studio .section-title span:last-child { color: #9ca6a1; } html[data-theme="dark"] .studio :is(.check-item,.detail-card) { color: var(--text); background: #121a16; border-color: var(--line); } html[data-theme="dark"] .studio .check-item:hover { background: #18211c; border-color: #3a3f68; box-shadow: none; } html[data-theme="dark"] .studio .check-copy strong, html[data-theme="dark"] .studio .detail-card strong { color: var(--ink); } html[data-theme="dark"] .studio .check-copy span, html[data-theme="dark"] .studio .check-detail, html[data-theme="dark"] .studio .detail-card span { color: var(--muted); } html[data-theme="dark"] .studio .check-item.complete .check-state { color: #fff; background: var(--violet); box-shadow: 0 5px 14px rgba(91,69,230,.28); } html[data-theme="dark"] .studio .check-item.warning .check-state { color: #e8b95f; background: #2a2418; } html[data-theme="dark"] .studio .check-item.pending .check-state { color: #8b9690; background: #1d2621; } html[data-theme="dark"] .studio .warning-note { color: #e7c47d; background: #2a2418; border-color: #514325; } html[data-theme="dark"] .studio .inline-action { color: #b7acff; background: #20223a; border-color: #3b3f68; } html[data-theme="dark"] .studio .inspector-footer { background: rgba(16,23,19,.97) !important; border-color: var(--line); } /* Agent configuration dialogs — keep the full interaction in the shared dark palette. */ html[data-theme="dark"] .agent-layer { background: rgba(3,7,5,.72); } html[data-theme="dark"] .agent-sheet { color: var(--text); background: #101713; border-color: #303c35; box-shadow: 0 32px 90px rgba(0,0,0,.48); } html[data-theme="dark"] .agent-sheet-header { background: #101713; border-color: #25302a; } html[data-theme="dark"] .agent-sheet-header h2 { color: var(--ink); } html[data-theme="dark"] .agent-sheet-header p { color: var(--muted); } html[data-theme="dark"] .agent-sheet-icon { color: #aa9dff; background: #29274a; } html[data-theme="dark"] .agent-close { color: #aab4af; background: #18211c; } html[data-theme="dark"] .agent-close:hover { color: #fff; background: #232e28; } html[data-theme="dark"] .agent-sheet-body { background: #0c1410; } html[data-theme="dark"] .simple-agent-card { background: #1d2135; } html[data-theme="dark"] .simple-agent-card.host { background: #17251f; } html[data-theme="dark"] .simple-agent-card.agent-role-config.mood, html[data-theme="dark"] .simple-agent-card.agent-role-config.coach { background: #17251f; } html[data-theme="dark"] .simple-agent-card.agent-role-config.smart-host { background: #252116; } html[data-theme="dark"] .agent-helper { color: #b1bcb6; } html[data-theme="dark"] .agent-config-section { border-color: #303c35; } html[data-theme="dark"] .agent-config-head strong { color: var(--ink); } html[data-theme="dark"] .agent-config-head small { color: #89948e; } html[data-theme="dark"] .agent-config-head em { color: #a99cff; } html[data-theme="dark"] .agent-fixed-identity { background: #101713; border-color: #303c35; } html[data-theme="dark"] .agent-fixed-identity > span { color: #75e4bd; background: #18372b; } html[data-theme="dark"] .agent-fixed-identity strong { color: #f3f7f4; } html[data-theme="dark"] .agent-fixed-identity small { color: #9da8a2; } html[data-theme="dark"] .agent-fixed-identity em, html[data-theme="dark"] .agent-policy-pill { color: #75e4bd; background: #18372b; } html[data-theme="dark"] .agent-role-config.smart-host .agent-fixed-identity { border-color: #4a4028; } html[data-theme="dark"] .agent-role-config.smart-host .agent-fixed-identity > span, html[data-theme="dark"] .agent-role-config.smart-host .agent-fixed-identity em, html[data-theme="dark"] .agent-role-config.smart-host .agent-policy-pill { color: #f2c56b; background: #3b301b; } html[data-theme="dark"] .agent-role-config.twin .agent-policy-pill { color: #c4bbff; background: #2b2851; } html[data-theme="dark"] .host-appearance-head strong { color: var(--ink); } html[data-theme="dark"] .host-appearance-head small { color: #89948e; } html[data-theme="dark"] .host-appearance-head em { color: #39d4a1; } html[data-theme="dark"] .host-appearance-card { color: #aeb8b3; background: #101713; border-color: #303c35; } html[data-theme="dark"] .host-appearance-card:hover { background: #18211c; border-color: #5d50a1; } html[data-theme="dark"] .host-appearance-card.active { background: #20223a; border-color: #806cff; box-shadow: 0 0 0 2px rgba(128,108,255,.14); } html[data-theme="dark"] .host-appearance-card strong { color: #f3f7f4; } html[data-theme="dark"] .host-appearance-card small { color: #9da8a2; } html[data-theme="dark"] .host-appearance-image, html[data-theme="dark"] .host-live-avatar { background: #080e0b; border-color: #303c35; } html[data-theme="dark"] .agent-option-grid button, html[data-theme="dark"] .host-moments button { color: #9ca7a1; background: #101713; border-color: #303c35; } html[data-theme="dark"] .agent-option-grid button:hover, html[data-theme="dark"] .host-moments button:hover { color: #fff; background: #18211c; } html[data-theme="dark"] .agent-option-grid button.active { color: #c4bbff; background: #20223a; border-color: #806cff; } html[data-theme="dark"] .host-moments button.active { color: #75e4bd; background: #13271f; border-color: #269b72; } html[data-theme="dark"] .agent-sample, html[data-theme="dark"] .agent-test-line { color: var(--text); background: #0c1410; border-color: #303c35; } html[data-theme="dark"] .agent-sample p { color: #d4dcd8; } html[data-theme="dark"] .agent-sample p strong { color: var(--ink); } html[data-theme="dark"] .agent-sample small { color: #8e9993; } html[data-theme="dark"] .agent-guardrail { color: #b7acff; } html[data-theme="dark"] .simple-agent-card.host .agent-guardrail { color: #75e4bd; } /* 2026-07-31 product-flow completion: templates, lifecycle, history and prototype dialogs */ .two-template-deck .template-card.prev { transform:translateX(-118%) rotate(-6deg) scale(.9) !important; } .two-template-deck .template-card.next { transform:translateX(18%) rotate(6deg) scale(.9) !important; } .two-template-deck .template-card.active { transform:translateX(-50%) scale(1.04) !important; } .template-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-42%); display:flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:999px; color:#fff; background:rgba(18,18,18,.78); font-size:12px; font-weight:750; opacity:0; transition:.18s; backdrop-filter:blur(8px); } .template-play svg { width:14px; height:14px; fill:currentColor; } .template-tile:hover .template-play, .template-tile:focus-visible .template-play { opacity:1; transform:translate(-50%,-50%); } .template-tile:focus-visible { outline:3px solid rgba(255,62,83,.25); outline-offset:3px; } .template-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; max-width:980px; } .template-cover { height:236px !important; } .template-cover img[alt="Airdrop Rush"], .project-cover img[alt*="Airdrop"] { object-position:center 44%; } .project-cover { position:relative; } .project-more { position:absolute; right:10px; bottom:10px; width:34px; height:34px; padding:0; border:1px solid rgba(255,255,255,.52); border-radius:10px; display:grid; place-items:center; color:#fff; background:rgba(18,18,18,.54); backdrop-filter:blur(8px); } .project-more:hover { background:rgba(18,18,18,.8); } .project-more svg { width:17px; height:17px; } .project-status.muted { background:#747a85 !important; } .project-status.review { background:#6557d7 !important; } .project-status.rejected { background:#cf3c4c !important; } .project-empty { min-height:310px; padding:48px; display:grid; place-items:center; align-content:center; text-align:center; } .project-empty > span { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:var(--red); background:var(--red-soft); } .project-empty > span svg { width:24px; height:24px; } .project-empty h2 { margin:15px 0 0; font-size:18px; } .project-empty p { margin:7px 0 18px; color:var(--muted); font-size:13px; } .prototype-layer { position:fixed; inset:0; z-index:190; display:grid; place-items:center; padding:24px; background:rgba(8,12,10,.48); backdrop-filter:blur(8px); opacity:0; transition:.18s; } .prototype-layer.show { opacity:1; } .prototype-dialog { width:min(640px,calc(100vw - 32px)); max-height:min(820px,calc(100vh - 40px)); overflow:hidden; border:1px solid rgba(222,218,209,.9); border-radius:24px; background:#fff; box-shadow:0 30px 90px rgba(15,18,16,.24); transform:translateY(10px) scale(.985); transition:.18s; } .prototype-layer.show .prototype-dialog { transform:none; } .prototype-dialog > header { min-height:84px; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); } .prototype-dialog > header > div { display:flex; align-items:center; gap:12px; min-width:0; } .prototype-dialog-icon { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:var(--red); background:var(--red-soft); } .prototype-dialog-icon svg { width:20px; height:20px; } .prototype-dialog h2 { margin:0; font-size:19px; line-height:1.25; } .prototype-dialog header p { margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.4; } .prototype-close { width:38px; height:38px; padding:0; border:0; border-radius:12px; display:grid; place-items:center; color:var(--muted); background:var(--soft); } .prototype-close:hover { color:var(--ink); background:#eceae4; } .prototype-close svg { width:18px; height:18px; } .prototype-dialog-body { max-height:calc(100vh - 145px); overflow:auto; padding:20px; } .prototype-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; } .template-sandbox-stage { position:relative; height:360px; overflow:hidden; border:1px solid #272a27; border-radius:18px; background:#111; } .template-sandbox-stage > img { width:100%; height:100%; object-fit:cover; filter:saturate(.88) brightness(.76); transition:transform 1.4s ease,filter .3s; } .template-sandbox.playing .template-sandbox-stage > img { transform:scale(1.08); filter:saturate(1.08) brightness(.88); } .template-sandbox.complete .template-sandbox-stage::after { content:"Reward unlocked"; position:absolute; inset:auto 50% 58px auto; transform:translateX(50%); padding:11px 18px; border-radius:999px; color:#fff; background:linear-gradient(135deg,var(--red),var(--orange)); font-size:13px; font-weight:800; box-shadow:0 12px 28px rgba(255,62,83,.3); } .sandbox-hud { position:absolute; left:14px; right:14px; top:14px; display:flex; justify-content:space-between; align-items:center; color:#fff; } .sandbox-hud span { padding:6px 9px; border-radius:999px; background:rgba(18,18,18,.68); font-size:10px; font-weight:800; letter-spacing:.08em; } .sandbox-hud strong { min-width:52px; padding:6px 10px; border-radius:999px; text-align:center; background:rgba(18,18,18,.68); font-size:14px; } .sandbox-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:46px; padding:0 18px; border:0; border-radius:999px; display:flex; align-items:center; gap:8px; color:#fff; background:linear-gradient(135deg,var(--red),var(--orange)); font-size:13px; font-weight:800; box-shadow:0 16px 34px rgba(255,62,83,.26); } .sandbox-play svg { width:17px; height:17px; fill:currentColor; } .sandbox-progress { position:absolute; left:14px; right:14px; bottom:14px; height:5px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.24); } .sandbox-progress i { display:block; width:0; height:100%; border-radius:inherit; background:#fff; transition:width .1s linear; } .template-sandbox > p { margin:12px 2px 0; color:var(--muted); font-size:12px; line-height:1.55; } .project-quick-preview { position:relative; height:360px; overflow:hidden; border-radius:18px; background:#111; } .project-quick-preview img { width:100%; height:100%; object-fit:cover; filter:brightness(.78); } .project-quick-preview span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:8px; padding:11px 16px; border-radius:999px; color:#fff; background:rgba(18,18,18,.72); font-size:13px; font-weight:760; } .project-action-list { display:grid; gap:8px; } .project-action-list button { width:100%; min-height:62px; padding:11px 13px; border:1px solid var(--line); border-radius:14px; display:flex; align-items:center; gap:12px; text-align:left; background:#fff; } .project-action-list button:hover { border-color:#d8d3ca; background:var(--soft); } .project-action-list button > svg { width:19px; height:19px; color:var(--red); } .project-action-list button span { display:grid; gap:3px; } .project-action-list strong { font-size:13px; } .project-action-list small { color:var(--muted); font-size:11px; } .project-action-list .danger strong, .project-action-list .danger > svg { color:#c83243; } .confirm-state, .optimization-state, .optimization-result { padding:20px 6px 4px; text-align:center; } .confirm-state > span, .optimization-result > span { width:54px; height:54px; margin:auto; border-radius:16px; display:grid; place-items:center; color:var(--red); background:var(--red-soft); } .confirm-state h3, .optimization-state h3, .optimization-result h3 { margin:14px 0 0; font-size:18px; } .confirm-state p, .optimization-state p { margin:7px auto 0; max-width:430px; color:var(--muted); font-size:13px; line-height:1.55; } .optimization-orb { width:62px; height:62px; margin:auto; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--red),var(--orange)); box-shadow:0 16px 38px rgba(255,62,83,.25); animation:optimizationPulse 1.2s ease-in-out infinite; } .optimization-track { width:min(380px,90%); height:6px; margin:22px auto 8px; overflow:hidden; border-radius:999px; background:#eeeae4; } .optimization-track i { display:block; width:42%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--red),var(--orange)); animation:optimizationSlide 1s ease-in-out infinite alternate; } .optimization-result ul { margin:18px 0 0; padding:0; display:grid; gap:8px; text-align:left; list-style:none; } .optimization-result li { padding:12px 14px; border-radius:12px; color:#494d49; background:var(--soft); font-size:13px; line-height:1.45; } .conversion-form { display:grid; gap:14px; } .conversion-form label { display:grid; gap:7px; color:var(--ink); font-size:13px; font-weight:700; } .conversion-form :is(input, select) { width:100%; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:#fff; font:500 13px inherit; } .conversion-form :is(input, select):focus { outline:3px solid rgba(255,62,83,.12); border-color:var(--red); } .conversion-check { grid-template-columns:auto 1fr !important; align-items:start; font-weight:500 !important; color:var(--muted) !important; line-height:1.5; } .conversion-check input { width:17px !important; height:17px !important; margin-top:2px; accent-color:var(--red); } .conversion-connected { display:grid; place-items:center; text-align:center; } .conversion-connected > span { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:#189a6e; background:#e8f8f2; } .conversion-connected strong { margin-top:10px; font-size:14px; } .conversion-connected small { margin:5px 0 12px; color:var(--muted); font-size:11px; } html[data-theme="dark"] .prototype-dialog { border-color:#2b332f; background:#111814; } html[data-theme="dark"] .prototype-dialog > header { border-color:#2b332f; } html[data-theme="dark"] .prototype-close, html[data-theme="dark"] .project-action-list button, html[data-theme="dark"] .conversion-form :is(input, select) { color:#f5f7f5; background:#18201c; border-color:#303a35; } html[data-theme="dark"] .optimization-result li { color:#d5d9d6; background:#18201c; } html[data-theme="dark"] .project-empty { background:#111814 !important; } @media(max-width:720px){ .template-grid { grid-template-columns:1fr !important; } .template-cover { height:210px !important; } .prototype-dialog-body { padding:16px; } .template-sandbox-stage,.project-quick-preview { height:300px; } .prototype-actions { flex-wrap:wrap; } .prototype-actions .btn { flex:1; } } .recent-sessions { margin:8px 10px 12px; padding-top:8px; border-top:1px solid var(--line); } .recent-sessions-toggle { width:100%; height:34px; padding:0 8px; border:0; display:flex; align-items:center; justify-content:space-between; color:#98968f; background:transparent; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .recent-sessions-toggle svg { width:14px; height:14px; transition:.18s; } .recent-sessions-list { display:grid; gap:2px; max-height:230px; overflow:auto; } .recent-session-row { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 28px; align-items:center; border-radius:10px; } .recent-session-row:hover { background:var(--soft); } .recent-session-row > button:first-child { min-width:0; min-height:48px; padding:5px 3px 5px 7px; border:0; display:flex; align-items:center; gap:8px; text-align:left; background:transparent; } .recent-session-row > button:first-child > span:first-child { width:27px; height:27px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center; color:var(--red); background:var(--red-soft); } .recent-session-row > button:first-child > span:first-child svg { width:14px; height:14px; } .recent-session-row > button:first-child > span:last-child { min-width:0; display:grid; gap:2px; } .recent-session-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:11px; } .recent-session-row small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:9px; } .recent-session-more { width:26px; height:28px; padding:0; border:0; border-radius:8px; display:grid; place-items:center; color:var(--muted); background:transparent; opacity:0; } .recent-session-row:hover .recent-session-more, .recent-session-more:focus-visible { opacity:1; } .recent-session-more svg { width:14px; height:14px; } .recent-session-menu { position:fixed; z-index:220; width:172px; padding:6px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 16px 44px rgba(16,18,17,.16); } .recent-session-menu button { width:100%; height:36px; padding:0 9px; border:0; border-radius:8px; display:flex; align-items:center; gap:9px; color:var(--ink); background:transparent; font-size:12px; font-weight:650; } .recent-session-menu button:hover { background:var(--soft); } .recent-session-menu svg { width:15px; height:15px; color:var(--red); } /* ================= 通知面板 ================= 限高 + 只让中段滚:改版前面板没有 max-height,一页 15 条全部铺开(约 1200px)超出视口, 而 position:fixed 又不跟页面滚 → 后半截通知永远够不着(用户实测「无限长也找不到」)。 现在头部/筛选/底部三段固定,只有 .notification-scroll 滚动。 注:图标底与按钮底用 --violet-soft(品牌淡底,双主题都有定义);--red-soft 全仓无定义, 沿用它的地方等于没有背景色,故此段不再引用。 */ .notification-popover { position:fixed; z-index:225; right:70px; top:64px; width:min(392px,calc(100vw - 24px)); max-height:min(560px,calc(100vh - 84px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 24px 70px rgba(15,18,16,.2); opacity:0; transform:translateY(-6px); transition:.15s; } .notification-popover.show { opacity:1; transform:none; } .notification-popover > header { flex:0 0 auto; padding:13px 14px 10px; display:grid; gap:10px; border-bottom:1px solid var(--line); } .notification-head-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .notification-popover header > div > div { min-width:0; display:grid; gap:2px; } .notification-popover header strong { font-size:14px; } .notification-popover header span { color:var(--muted); font-size:10.5px; } .notification-mark-read { flex:0 0 auto; height:28px; padding:0 10px; border:0; border-radius:8px; color:var(--red); background:var(--violet-soft); font-size:11px; font-weight:750; cursor:pointer; transition:opacity .14s; } .notification-mark-read:hover { opacity:.82; } .notification-mark-read:disabled { color:var(--faint); background:var(--soft); cursor:default; opacity:1; } .notification-filters { display:flex; gap:6px; } .notification-filters button { height:26px; padding:0 11px; border:1px solid transparent; border-radius:999px; color:var(--muted); background:transparent; font-size:11px; font-weight:650; cursor:pointer; transition:.14s; } .notification-filters button:hover { color:var(--ink); background:var(--soft); } .notification-filters button[aria-pressed="true"] { color:var(--ink); border-color:var(--line); background:var(--soft); } /* 未读数只在副标题出一次;筛选按钮上只给「有没有」的状态点,不再重复数字 */ .notification-filters button.has-unread::after { content:""; display:inline-block; width:5px; height:5px; margin-left:5px; border-radius:50%; background:var(--red); vertical-align:middle; } /* 中段:唯一滚动面。overscroll-behavior 防止滚到底后把整页带着滚 */ .notification-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#d8d5cf transparent; } .notification-scroll::-webkit-scrollbar { width:9px; } .notification-scroll::-webkit-scrollbar-thumb { border:3px solid transparent; border-radius:99px; background-color:#d8d5cf; background-clip:padding-box; } /* 分组标题:粘在滚动面顶部,滚很远也知道自己在哪一段(背景须与面板同色,否则条目会从下面透出来) */ .notification-group-label { position:sticky; top:0; z-index:1; padding:10px 16px 6px; color:var(--faint); background:var(--surface); font-size:9.5px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; } .notification-list { padding:0 8px 6px; display:grid; gap:1px; } .notification-list > button { position:relative; width:100%; padding:9px 10px 10px 13px; border:0; border-radius:12px; display:grid; grid-template-columns:30px minmax(0,1fr); gap:11px; text-align:left; background:transparent; cursor:pointer; transition:background .14s; } .notification-list > button:hover { background:var(--soft); } .notification-list > button:focus-visible { outline:2px solid var(--red); outline-offset:-2px; } /* 未读:左侧竖条(整行染色在同类通知连排时会糊成一片色块,竖条更好扫) */ .notification-list > button.unread::before { content:""; position:absolute; left:4px; top:14px; bottom:14px; width:2.5px; border-radius:2px; background:var(--red); } .notification-icon { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--red); background:var(--violet-soft); } .notification-icon.ok { color:var(--green); background:var(--green-soft); } .notification-icon.warn { color:var(--amber); background:var(--amber-soft); } .notification-icon.neutral { color:var(--muted); background:var(--soft); } .notification-body { min-width:0; display:grid; gap:2px; } /* min-width:0 不能省:grid 子项默认 min-width:auto,标题的 nowrap 会把整行撑破, 窄屏下时间戳被顶出面板右边界(390px 实测) */ .notification-title-row { min-width:0; display:flex; align-items:baseline; gap:8px; } .notification-title-row strong { flex:1 1 auto; min-width:0; color:var(--ink); font-size:12.5px; font-weight:650; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .notification-list > button.unread .notification-title-row strong { font-weight:750; } .notification-count { flex:0 0 auto; height:15px; padding:0 5px; border-radius:99px; color:var(--muted); background:var(--soft); font-size:9.5px; font-style:normal; font-weight:750; line-height:15px; } .notification-list > button:hover .notification-count { background:var(--surface); } .notification-title-row time { flex:0 0 auto; color:var(--faint); font-size:10px; font-weight:600; white-space:nowrap; } /* 正文截两行:同类通知的区分度都在正文(作品名),所以留两行而不是一行 */ .notification-body small { color:var(--muted); font-size:11.5px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .notification-popover > footer { flex:0 0 auto; padding:9px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); } .notification-popover > footer > span { color:var(--faint); font-size:10.5px; } .notification-more { height:28px; padding:0 11px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:transparent; font-size:11px; font-weight:650; cursor:pointer; transition:background .14s; } .notification-more:hover { background:var(--soft); } .notification-more:disabled { color:var(--muted); cursor:default; opacity:.6; } .notification-skeleton { padding:10px 10px 10px 13px; display:grid; grid-template-columns:30px minmax(0,1fr); gap:11px; } .notification-skeleton i, .notification-skeleton u { display:block; border-radius:8px; background:var(--soft); animation:notif-pulse 1.3s ease-in-out infinite; } .notification-skeleton i { width:30px; height:30px; } .notification-skeleton u:first-of-type { width:58%; height:11px; margin-bottom:7px; } .notification-skeleton u:last-of-type { width:88%; height:11px; } @keyframes notif-pulse { 50% { opacity:.45 } } @media (prefers-reduced-motion:reduce) { .notification-skeleton i, .notification-skeleton u { animation:none } } .notification-empty { min-height:190px; display:grid; place-items:center; align-content:center; text-align:center; padding:26px 24px; } .notification-empty svg { width:26px; height:26px; color:var(--faint); } .notification-empty strong { margin-top:11px; font-size:13.5px; } .notification-empty span { margin-top:5px; color:var(--muted); font-size:11.5px; line-height:1.5; } .notification-empty .notification-more { margin-top:13px; } html[data-theme="dark"] .notification-group-label { background:#111814; /* 与暗色面板底同值(见 shell.css 的 .notification-popover 暗色覆盖) */ } html[data-theme="dark"] .notification-scroll { scrollbar-color:#39433d transparent; } html[data-theme="dark"] .notification-scroll::-webkit-scrollbar-thumb { background-color:#39433d; } html[data-theme="dark"] .notification-list > button:hover .notification-count { background:#202823; } /* 窄屏:贴两侧边,并把高度让给视口(桌面档 right:70px 会把面板推出左边界) */ @media (max-width:620px) { .notification-popover { top:58px; right:10px; left:10px; width:auto; max-height:calc(100vh - 74px); border-radius:16px; } } .game-setting-mode { margin:12px 0 2px; padding:3px; border-radius:10px; display:grid; grid-template-columns:1fr 1fr; background:var(--soft); } .game-setting-mode button { height:32px; border:0; border-radius:8px; color:var(--muted); background:transparent; font-size:11px; font-weight:750; } .game-setting-mode button.active { color:var(--ink); background:#fff; box-shadow:0 2px 8px rgba(18,20,18,.08); } .advanced-game-settings { display:grid; gap:10px; } .setting-title em { color:#7568d8; font-size:9px; font-style:normal; font-weight:800; text-transform:uppercase; letter-spacing:.06em; } .advanced-setting-row { min-height:58px; padding:9px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) 128px; align-items:center; gap:10px; } .advanced-setting-row > span { display:grid; gap:3px; } .advanced-setting-row strong { font-size:11px; } .advanced-setting-row small { color:var(--muted); font-size:9px; } .advanced-setting-row select { width:100%; height:34px; padding:0 8px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; font-size:10px; } .asset-selector-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:9px; } .asset-selector-grid button { min-height:86px; padding:9px 7px; border:1px solid var(--line); border-radius:11px; display:grid; place-items:center; align-content:center; gap:4px; text-align:center; background:#fff; } .asset-selector-grid button:hover, .asset-selector-grid button.selected { border-color:var(--red); background:var(--red-soft); } .asset-selector-grid button > span { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:var(--red); background:var(--red-soft); } .asset-selector-grid svg { width:14px; height:14px; } .asset-selector-grid strong { font-size:10px; } .asset-selector-grid small { color:var(--muted); font-size:8px; } .config-save-feedback { margin-bottom:8px; padding:7px 9px; border-radius:9px; display:flex; align-items:center; gap:7px; color:var(--muted); background:var(--soft); font-size:10px; font-weight:700; transition:.16s; } .config-save-feedback svg { width:14px; height:14px; } .config-save-feedback.saving { color:#9b6c11; background:#fff5dc; } .config-save-feedback.saved { color:#12875f; background:#e8f8f2; } html[data-theme="dark"] .game-setting-mode { background:#0d1410; } html[data-theme="dark"] .game-setting-mode button.active, html[data-theme="dark"] :is(.advanced-setting-row select, .asset-selector-grid button) { color:#f4f7f5; background:#18201c; border-color:#303a35; } @media(max-width:900px) { .recent-sessions{ display:none;}; } .template-card { pointer-events:auto; } [hidden] { display:none !important; } @media(max-width:600px){ .topbar .command,.topbar .command-trigger { display:none !important; } .topbar .invite-trigger { width:40px !important;padding:0 !important;justify-content:center !important; } .topbar .invite-trigger span { display:none !important; } .topbar .top-right { gap:4px !important; } .topbar { min-width:0; } .topbar .breadcrumb { min-width:0; } .topbar .breadcrumb strong { max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } } .dashboard-main { flex:1; min-height:0; overflow:auto; padding:28px 30px 44px; scrollbar-width:thin; scrollbar-color:#dcdde4 transparent; } .dashboard-view { display:none; max-width:1500px; margin:0 auto; } .dashboard-view.active { display:block; animation:viewIn .24s ease; } .heading-actions { display:flex; gap:8px; } .dashboard-card { border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow); } .filter-row { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:20px; } .filter-chip { height:31px; border:1px solid var(--line); border-radius:16px; padding:0 12px; color:#747a88; background:#fff; font-size:9px; font-weight:650; } .filter-chip:hover { color:var(--ink); border-color:#d2d4dc; } .filter-chip.active { border-color:#20232c; color:#fff; background:#20232c; } .template-grid, .project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .template-tile { padding:10px; cursor:pointer; transition:.2s; } .template-tile:hover, .project-tile:hover { transform:translateY(-3px); box-shadow:0 16px 38px rgba(25,28,41,.1); border-color:#d6d1ff; } .template-cover, .project-cover { height:190px; border-radius:12px; overflow:hidden; position:relative; background:#eee; } .template-cover img, .project-cover img { width:100%; height:100%; object-fit:cover; transition:transform .35s; } .template-tile:hover img, .project-tile:hover img { transform:scale(1.025); } .cover-badge { position:absolute; top:9px; left:9px; height:23px; padding:0 8px; border-radius:12px; display:flex; align-items:center; color:#9a5a12; background:#fff0cc; font-size:8px; font-weight:750; } .category-badge { left:auto; right:9px; color:#5d6270; background:rgba(255,255,255,.9); } .tile-meta { padding:12px 3px 4px; display:flex; align-items:center; justify-content:space-between; } .tile-title { display:flex; gap:9px; align-items:center; } .tile-icon { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; color:var(--violet); background:var(--violet-soft); } .tile-title strong { display:block; color:var(--ink); font-size:11px; } .tile-title span { display:block; margin-top:3px; color:#9297a4; font-size:8px; } .usage { text-align:right; } .usage strong { display:block; color:var(--ink); font-size:11px; } .usage span { display:block; color:#9a9eaa; font-size:7px; margin-top:2px; } .upload-drop { display:none; margin-bottom:18px; padding:24px; border:1px dashed #bcb5ff; border-radius:14px; text-align:center; color:#7165c7; background:#f8f7ff; font-size:9px; } .upload-drop.show { display:block; } .metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:22px; } .metric-card { min-height:126px; padding:18px; position:relative; } .metric-card .metric-icon { position:absolute; right:16px; top:16px; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--violet); background:var(--violet-soft); } .metric-card span { color:#858b98; font-size:9px; } .metric-card strong { display:block; margin-top:17px; color:var(--ink); font-size:25px; letter-spacing:-.04em; } .metric-card small { display:block; margin-top:8px; color:var(--violet); font-size:8px; font-weight:680; } .seg-tabs { padding:3px; border-radius:10px; display:flex; background:#eceed1; background:#eceef1; } .seg-tab { height:31px; border:0; border-radius:8px; padding:0 12px; color:#858a97; background:transparent; font-size:9px; font-weight:680; } .seg-tab.active { color:var(--ink); background:#fff; box-shadow:0 2px 7px rgba(24,27,39,.08); } .project-tile { padding:10px 10px 12px; transition:.2s; } .project-status { position:absolute; right:9px; top:9px; height:23px; padding:0 8px; border-radius:12px; display:flex; align-items:center; gap:5px; color:#fff; background:var(--violet); font-size:7px; font-weight:750; } .project-status:before { content:""; width:5px; height:5px; border-radius:50%; background:#fff; } .project-content { padding:12px 2px 0; } .project-content h3 { margin:0; color:var(--ink); font-size:12px; } .project-content>p { margin:4px 0 10px; color:#8b909d; font-size:8px; } .channels { padding:9px; border:1px solid var(--line); border-radius:10px; background:#fafafd; } .channel-line { display:flex; align-items:center; justify-content:space-between; color:#717784; font-size:8px; } .channel-chips { display:flex; gap:5px; margin-top:7px; flex-wrap:wrap; } .channel-chip { height:20px; padding:0 7px; border:1px solid var(--line); border-radius:10px; display:flex; align-items:center; gap:4px; background:#fff; color:#626875; font-size:7px; } .channel-chip i { width:5px; height:5px; border-radius:50%; background:#111; } .project-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:10px 1px 0; } .project-stats strong { display:block; color:var(--ink); font-size:10px; } .project-stats span { color:#9a9eaa; font-size:7px; } .tile-actions { display:flex; gap:6px; margin-top:10px; } .marketing-panel { padding:20px; margin-bottom:16px; } .channel-bars { display:grid; gap:15px; } .channel-row { display:grid; grid-template-columns:135px minmax(0,1fr) 64px; align-items:center; gap:14px; } .channel-name { display:flex; align-items:center; gap:9px; } .channel-logo { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#fff; background:#222; font-size:9px; font-weight:800; } .channel-logo.telegram { background:#2698e4; } .channel-logo.direct { background:#858a96; } .channel-name strong { display:block; color:#414654; font-size:9px; } .channel-name span { display:block; margin-top:2px; color:#9a9eaa; font-size:7px; } .bar-label { display:flex; justify-content:space-between; color:#8b909d; font-size:7px; margin-bottom:5px; } .bar-track { height:7px; border-radius:8px; overflow:hidden; background:#eef0f2; } .bar-fill { height:100%; border-radius:inherit; background:#24262e; } .bar-fill.blue { background:#2698e4; } .bar-fill.gray { background:#9da2ad; } .bar-value { text-align:right; } .bar-value strong { display:block; color:var(--violet); font-size:11px; } .bar-value span { color:#9a9eaa; font-size:7px; } .marketing-bottom { display:grid; grid-template-columns:1.4fr .8fr; gap:16px; } .insight-list { padding:16px; } .insight-list h2 { margin:0 0 10px; color:var(--ink); font-size:12px; } .insight { padding:10px; border-radius:10px; background:#f7f6ff; margin-top:7px; } .insight strong { display:block; color:#5a50ab; font-size:8px; } .insight p { margin:4px 0 0; color:#858a98; font-size:7px; line-height:1.5; } .wallet-tabs { margin-bottom:18px; } .wallet-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:16px; } .balance-card { overflow:hidden; } .balance-dark { padding:24px; color:#fff; background:radial-gradient(circle at 90% 0,rgba(118,101,255,.24),transparent 35%),linear-gradient(145deg,#101a16,#0a120f); } .balance-label { color:#929b96; font-size:9px; } .balance-amount { margin-top:13px; font-size:32px; font-weight:760; letter-spacing:-.04em; } .balance-amount small { font-size:12px; color:#b2b8b5; } .balance-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:23px; } .balance-stat { padding:12px; border:1px solid rgba(255,255,255,.11); border-radius:11px; background:rgba(255,255,255,.07); } .balance-stat span { display:block; color:#929b96; font-size:7px; } .balance-stat strong { display:block; margin-top:7px; font-size:13px; } .balance-actions { display:flex; gap:7px; margin-top:17px; } .balance-footer { height:58px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; color:#888e9b; font-size:8px; } .earn-card { padding:18px; } .earn-card h2 { margin:0 0 12px; color:var(--ink); font-size:13px; } .earn-row { height:43px; padding:0 10px; border:1px solid var(--line); border-radius:10px; display:flex; align-items:center; gap:9px; margin-top:7px; } .earn-icon { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:var(--violet); background:var(--violet-soft); } .earn-row strong { color:#4e5360; font-size:8px; } .earn-row span:last-child { margin-left:auto; color:var(--violet); font-size:8px; } .records { margin-top:16px; padding:18px; } .records-head { display:flex; align-items:center; justify-content:space-between; } .records h2 { margin:0; color:var(--ink); font-size:12px; } .record-list { margin-top:12px; } .record-row { height:44px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 120px 100px; align-items:center; color:#737987; font-size:8px; } .record-row strong { color:#4e5360; } .network-headline { display:flex; align-items:end; justify-content:space-between; } .sat-link { color:#959aa6; font:9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.16em; } .network-layout { display:grid; grid-template-columns:minmax(500px,1.4fr) minmax(280px,.6fr); gap:16px; } .network-stage { height:500px; position:relative; overflow:hidden; background:radial-gradient(circle at 50% 64%,#f4f1ff,#fff 62%); } .globe { position:absolute; width:510px; height:510px; border:1px solid rgba(115,92,255,.27); border-radius:50%; left:50%; top:65%; transform:translate(-50%,-50%); box-shadow:inset 0 0 80px rgba(102,87,242,.08); } .globe:before, .globe:after { content:""; position:absolute; border:1px solid rgba(115,92,255,.2); border-radius:50%; } .globe:before { inset:18% -2%; transform:rotate(7deg); } .globe:after { inset:-2% 18%; transform:rotate(-8deg); } .latitude { position:absolute; left:5%; right:5%; height:38%; border-top:1px solid rgba(115,92,255,.2); border-bottom:1px solid rgba(115,92,255,.2); border-radius:50%; top:31%; } .node { position:absolute; width:16px; height:16px; border:4px solid #fff; border-radius:50%; background:var(--violet); box-shadow:0 0 0 2px rgba(102,87,242,.32),0 5px 12px rgba(53,40,174,.25); animation:nodePulse 2.4s infinite; } .node.one { left:21%; top:35%; } .node.two { right:19%; top:28%; animation-delay:.4s; } .node.three { left:33%; bottom:18%; animation-delay:.8s; } .node.four { right:28%; bottom:22%; background:#ff9c36; animation-delay:1.2s; } .node.five { right:8%; top:52%; background:#fa5c92; animation-delay:1.6s; } .my-agent { position:absolute; right:18%; top:22%; padding:8px 11px; border-radius:18px; color:#fff; background:linear-gradient(145deg,#ff9151,#f5675b); box-shadow:0 9px 24px rgba(236,104,74,.25); font-size:8px; font-weight:750; } .agent-panel { padding:18px; } .agent-panel h2 { margin:0; color:var(--ink); font-size:13px; } .agent-summary { margin-top:14px; padding:15px; border-radius:13px; color:#fff; background:linear-gradient(145deg,#292b3a,#20222f); } .agent-avatar-large { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(145deg,#ff9151,#f5675b); font-size:11px; font-weight:800; } .agent-summary strong { display:block; margin-top:10px; font-size:11px; } .agent-summary p { margin:5px 0 0; color:#b4b6c1; font-size:7px; line-height:1.5; } .agent-list { margin-top:13px; } .agent-row { height:50px; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px; } .agent-dot { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:var(--violet); background:var(--violet-soft); font-size:8px; } .agent-row strong { display:block; color:#545966; font-size:8px; } .agent-row span { display:block; margin-top:2px; color:#9a9eaa; font-size:7px; } .agent-row em { margin-left:auto; color:var(--green); font-size:7px; font-style:normal; } @media(max-width:1100px) { .template-grid,.project-grid{ grid-template-columns:repeat(2,minmax(0,1fr))}.metric-grid{ grid-template-columns:repeat(2,minmax(0,1fr))}.wallet-grid,.network-layout,.marketing-bottom{ grid-template-columns:1fr}.network-stage{ height:430px}; } @media(max-width:720px) { .dashboard-main{ padding:20px 14px 36px}.page-heading{ flex-direction:column}.template-grid,.project-grid,.metric-grid{ grid-template-columns:1fr}.template-cover,.project-cover{ height:180px}.channel-row{ grid-template-columns:110px minmax(0,1fr) 45px}.balance-stats{ grid-template-columns:1fr}.network-stage{ height:360px}.globe{ width:390px; height:390px}.heading-actions{ width:100%}.heading-actions .btn{ flex:1}; } .channel-logo.x { background:#111; } .channel-logo.x img { display:block; width:15px; height:16px; } .channel-logo.telegram { overflow:visible; border-radius:50%; background:transparent; } .channel-logo.telegram img { display:block; width:32px; height:32px; } .channel-logo.direct { color:#6e7480; background:#eef0f3; } .channel-logo.direct svg { width:16px; height:16px; stroke-width:1.9; } /* ============ 2026-08-03 产品 Demo 新增:登录页(Authentication split layout,移植保真) ============ */ /* Authentication — reference-aligned split layout using the current Airvana identity. */ [hidden] { display: none !important; } /* 全局 body 是 overflow:hidden(SPA 工作台自带内部滚动容器),登录页复用同一个 body—— 若 .auth-body 只写 min-height 会被内容撑高、超出视口的部分被 body 直接裁掉且无法滚动(线上实证)。 锁定为视口高度,让 .auth-body 自己成为滚动容器。 */ .auth-body { min-width: 320px; height: 100vh; height: 100dvh; margin: 0; overflow-x: hidden; overflow-y: auto; background: #fff; } .auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.02fr) minmax(520px, .98fr); } .auth-story { min-height: 100vh; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(40px, 6.4vh, 72px) clamp(44px, 5vw, 88px) clamp(34px, 5vh, 54px); color: #fff; overflow: hidden; background: radial-gradient(circle at 82% 18%, rgba(255,255,255,.19), transparent 33%), radial-gradient(circle at 15% 84%, rgba(20,18,87,.24), transparent 40%), linear-gradient(145deg, #6d57ee 0%, #6a5be0 38%, #4b3aa9 100%); } .auth-story::after { content: ""; position: absolute; width: 520px; height: 520px; right: -270px; bottom: -235px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 72px rgba(255,255,255,.025), 0 0 0 144px rgba(255,255,255,.018); pointer-events: none; } .auth-brand { width: fit-content; display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; position: relative; z-index: 1; } .auth-brand .airvana-brand-symbol { width: 38px; height: 42px; flex-basis: 38px; } .auth-brand .airvana-dot-black { background: #fff; } .auth-brand .airvana-wordmark, .auth-brand .airvana-wordmark small { color: #fff !important; } .auth-brand .airvana-wordmark { font-size: 30px !important; } .auth-story-copy { max-width: 670px; position: relative; z-index: 1; padding: 70px 0; } .auth-kicker { display: block; color: inherit; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .auth-story-copy .auth-kicker { margin-bottom: 22px; color: rgba(255,255,255,.66); } .auth-story-copy h1 { max-width: 650px; margin: 0; font-size: clamp(43px, 4.3vw, 68px); font-weight: 800; line-height: 1.05; letter-spacing: -.048em; } .auth-story-copy > p { max-width: 620px; margin: 27px 0 0; color: rgba(255,255,255,.78); font-size: clamp(17px, 1.35vw, 21px); line-height: 1.65; } .auth-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; max-width: 610px; margin: 48px 0 0; } .auth-stats div { min-width: 0; } .auth-stats dt { font-size: clamp(27px, 2.5vw, 38px); font-weight: 800; line-height: 1; letter-spacing: -.04em; } .auth-stats dd { margin: 9px 0 0; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.35; } .auth-copyright { margin: 0; color: rgba(255,255,255,.56); font-size: 13px; position: relative; z-index: 1; } .auth-access { min-height: 100vh; display: grid; place-items: safe center; align-content: safe center; padding: 48px clamp(38px, 6vw, 104px); background: #fbfbfa; } .auth-panel { width: min(100%, 500px); } .auth-mobile-brand { display: none; } .auth-heading { margin-bottom: 32px; } .auth-heading .auth-kicker { margin-bottom: 14px; color: var(--red); } .auth-heading h2 { margin: 0; max-width: 460px; color: var(--ink); font-size: clamp(32px, 2.4vw, 42px); font-weight: 800; line-height: 1.12; letter-spacing: -.038em; } .auth-heading p { margin: 13px 0 0; color: #74777e; font-size: 16px; line-height: 1.5; } .auth-choice { display: grid; gap: 0; } .auth-google, .auth-email, .auth-submit { width: 100%; min-height: 58px; border-radius: 14px; border: 1px solid #dedbd5; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-size: 16px; font-weight: 750; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; } .auth-google { color: #191919; background: #fff; } .auth-google img { width: 21px; height: 21px; object-fit: contain; } .auth-google:hover { border-color: #bdb9b1; box-shadow: 0 8px 24px rgba(20,20,20,.07); transform: translateY(-1px); } .auth-email, .auth-submit { color: #fff; border-color: var(--red); background: linear-gradient(100deg, var(--red), var(--violet-2)); box-shadow: 0 12px 30px rgba(255,49,72,.18); } .auth-email:hover, .auth-submit:hover { box-shadow: 0 14px 34px rgba(255,49,72,.27); transform: translateY(-1px); } .auth-google:active, .auth-email:active, .auth-submit:active { transform: scale(.988); } .auth-google:disabled, .auth-resend:disabled { cursor: wait; } .auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: 22px 0; color: #999a9d; font-size: 13px; } .auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: #e5e2dc; } .auth-email-form { display: grid; gap: 20px; } .auth-back, .auth-resend, .auth-terms button { padding: 0; color: #676a72; border: 0; background: transparent; font-weight: 700; cursor: pointer; } .auth-back { width: fit-content; font-size: 13px; } .auth-back:hover, .auth-resend:hover, .auth-terms button:hover { color: var(--red); } .auth-form-step { display: grid; gap: 10px; } .auth-form-step label { color: #292a2e; font-size: 14px; font-weight: 750; } .auth-form-step input { width: 100%; height: 56px; box-sizing: border-box; padding: 0 16px; color: var(--ink); border: 1px solid #dedbd5; border-radius: 13px; outline: none; background: #fff; font-size: 16px; } .auth-form-step input:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(255,49,72,.1); } .auth-field-help, .auth-field-error, .auth-code-intro { margin: 0; color: #7a7c83; font-size: 13px; line-height: 1.5; } .auth-field-error { color: #d51f3a; } .auth-code-intro { margin-bottom: 4px; font-size: 14px; } .auth-code-intro strong { color: #26272b; } .auth-code-input { font-variant-numeric: tabular-nums; letter-spacing: .24em; font-weight: 800; } .auth-submit { margin-top: 9px; } .auth-resend { width: fit-content; margin: 3px auto 0; font-size: 13px; } .auth-status { min-height: 186px; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; } .auth-status-spinner { width: 35px; height: 35px; border: 3px solid #f0d8dc; border-top-color: var(--red); border-radius: 50%; animation: auth-spin .8s linear infinite; } .auth-status strong { color: var(--ink); font-size: 19px; } .auth-status small { color: #74777e; font-size: 13px; } @keyframes auth-spin { to { transform: rotate(360deg); } } .auth-terms { margin: 24px 0 0; color: #96979b; font-size: 12px; line-height: 1.6; text-align: center; } .auth-terms button { display: inline; font-size: inherit; } .auth-legal-dialog { width: min(90vw, 480px); padding: 0; border: 0; border-radius: 20px; background: transparent; box-shadow: 0 24px 80px rgba(0,0,0,.24); } .auth-legal-dialog::backdrop { background: rgba(10,10,10,.48); backdrop-filter: blur(4px); } .auth-legal-card { position: relative; padding: 34px; border: 1px solid #e3dfd7; border-radius: 20px; background: #fff; } .auth-legal-card h2 { margin: 0 40px 15px 0; font-size: 25px; letter-spacing: -.03em; } .auth-legal-card p { margin: 0; color: #666a72; font-size: 14px; line-height: 1.7; } .auth-legal-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #595c62; background: #f3f2ef; font-size: 24px; line-height: 1; cursor: pointer; } .auth-legal-done { width: 100%; height: 44px; margin-top: 24px; border: 0; border-radius: 11px; color: #fff; background: var(--red); font-weight: 750; cursor: pointer; } @media (max-width: 940px) { .auth-shell { grid-template-columns: 1fr; } .auth-story { min-height: 270px; padding: 30px 30px 34px; } .auth-story-copy { max-width: 680px; padding: 42px 0 0; } .auth-story-copy h1 { max-width: 650px; font-size: clamp(34px, 7vw, 49px); } .auth-story-copy > p { display: none; } .auth-stats { margin-top: 30px; } .auth-copyright { display: none; } .auth-access { min-height: auto; padding: 54px 28px 68px; } } @media (max-width: 600px) { .auth-story { min-height: 190px; padding: 24px 22px 28px; justify-content: flex-start; } .auth-story .auth-brand, .auth-story-copy .auth-kicker, .auth-stats { display: none; } .auth-story-copy { padding: 34px 0 0; } .auth-story-copy h1 { font-size: 31px; line-height: 1.08; } .auth-access { padding: 34px 22px 52px; place-items: start center; } .auth-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; } .auth-mobile-brand .airvana-brand-symbol { width: 31px; height: 34px; flex-basis: 31px; } .auth-mobile-brand .airvana-dot-red, .auth-mobile-brand .airvana-dot-black { width: 19px; height: 19px; } .auth-mobile-brand .airvana-dot-blue { width: 11px; height: 11px; } .auth-mobile-brand .airvana-wordmark { display: block !important; font-size: 23px !important; } .auth-heading { margin-bottom: 26px; } .auth-heading h2 { font-size: 30px; } .auth-heading p { font-size: 14px; } .auth-google, .auth-email, .auth-submit { min-height: 54px; } } /* Login visual update — 2026-08-06 产品新稿(airvana-login_6)就地对齐：暖色叙事栏 + 注册礼包卡 + 54px 按钮体系。 刻意保留(不随稿回退)：i18n 双语、真实登录接线、邀请码提示、条款弹层、940/600 两档断点。 */ .auth-body { /* 高度锁视口(不能只写 min-height,否则被内容撑高后由 body 的 overflow:hidden 裁掉,详见上方注释) */ height: 100vh; height: 100dvh; background: #fff; color: #050505; font-family: Inter, "Noto Sans SC", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .auth-sitebar { height: 88px; display: flex; align-items: center; padding: 0 clamp(30px, 5.8vw, 56px); border-bottom: 1px solid #eee; background: #fff; } .auth-site-logo { display: inline-flex; align-items: center; gap: 12px; color: #050505; text-decoration: none; } .auth-site-logo .airvana-brand-symbol { width: 34px; height: 38px; flex-basis: 34px; } .auth-site-logo .airvana-wordmark, .auth-site-logo .airvana-wordmark small { color: #050505 !important; } .auth-site-logo .airvana-wordmark { display: block !important; font-size: 29px !important; } .auth-shell { min-height: calc(100vh - 88px); align-items: stretch; grid-template-columns: minmax(560px, 3fr) minmax(440px, 2fr); } .auth-story { min-height: calc(100vh - 88px); justify-content: center; padding: clamp(48px, 8vh, 64px) clamp(40px, 4.8vw, 64px); background: linear-gradient(135deg, #e8506e 0%, #ef5a4e 45%, #f2793d 100%); } .auth-story::after { display: none; } .auth-story-copy { max-width: 610px; padding: 0; } .auth-kicker { font-size: 14px; font-weight: 700; letter-spacing: .18em; } .auth-story-copy .auth-kicker { margin-bottom: 36px; color: #fff; } .auth-story-copy h1 { max-width: 620px; color: #fff; font-size: clamp(40px, 4.8vw, 72px); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; } .auth-story-copy h1 strong { font-weight: 800; } .auth-story-copy > p { max-width: 560px; margin: 40px 0 0; color: #fff; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; opacity: .96; } .auth-stats { gap: 0; max-width: 620px; margin: 60px 0 0; } .auth-stats div { padding: 0 28px; border-left: 1px solid rgba(255,255,255,.46); } .auth-stats div:first-child { padding-left: 0; border-left: 0; } .auth-stats dt { color: #fff; font-size: clamp(28px, 2.55vw, 40px); font-weight: 800; } .auth-stats dd { margin-top: 7px; color: rgba(255,255,255,.88); font-size: 14px; } .auth-copyright { display: none; } .auth-access { min-height: calc(100vh - 88px); padding: 36px clamp(28px, 4.7vw, 72px) 48px; place-items: safe center; align-content: safe center; background: #fff; } .auth-panel { width: min(100%, 460px); } .auth-mobile-brand { display: none !important; } /* 注册礼包卡：礼盒图自带同色底(#fcf2e9),与卡底 #fcf3e8 同调无缝。 右侧 padding 按礼盒图实宽预留(图 204×174,卡高 170 时约 197 宽)——文案列宽由此结构性保证, 不靠百分比估算,中英文案长短不一也不会压到图上 */ .auth-promo { position: relative; display: flex; align-items: center; min-height: 170px; margin-bottom: 36px; padding: 24px 206px 24px 26px; border: 1px solid #f0e3d2; border-radius: 16px; background: #fcf3e8; overflow: hidden; } .auth-promo-text { position: relative; z-index: 1; line-height: 1.35; } .auth-promo-l1 { display: block; color: #2b2b2b; font-size: 17px; font-weight: 500; } .auth-promo-l2 { display: block; margin: 4px 0; color: #f07a1d; font-size: 26px; font-weight: 800; } .auth-promo-l3 { display: block; color: #2b2b2b; font-size: 15px; } .auth-promo-art { position: absolute; right: 0; top: 50%; height: 100%; width: auto; transform: translateY(-50%); } .auth-heading { margin-bottom: 28px; } .auth-heading .auth-kicker { display: none; } .auth-heading h2 { color: #111; font-size: clamp(28px, 2.2vw, 34px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; } .auth-heading p { margin-top: 10px; color: #555; font-size: 16px; } .auth-google, .auth-email, .auth-submit { min-height: 54px; border-radius: 10px; font-size: 16px; font-weight: 600; } .auth-google { border-color: #ddd; color: #222; background: #fff; } .auth-google:hover { border-color: #ccc; background: #f7f7f7; box-shadow: 0 6px 18px rgba(20,20,20,.06); transform: translateY(-1px); } .auth-email, .auth-submit { border-color: #111; background: #111; box-shadow: none; } .auth-email:hover, .auth-submit:hover { background: #2e2e2e; box-shadow: 0 10px 24px rgba(17,17,17,.18); transform: translateY(-1px); } .auth-divider { margin: 22px 0; color: #888; font-size: 14px; } .auth-divider::before, .auth-divider::after { background: #e5e5e5; } .auth-email-form { gap: 22px; } .auth-back, .auth-resend, .auth-terms button { color: #555; } .auth-back:hover, .auth-resend:hover, .auth-terms button:hover { color: #e8506e; } .auth-form-step label { color: #111; font-size: 15px; } .auth-form-step input { height: 54px; border-color: #ddd; border-radius: 10px; font-size: 16px; } .auth-form-step input:focus { border-color: #111; box-shadow: 0 0 0 4px rgba(232,80,110,.12); } .auth-status-spinner { border-color: #f3d9dc; border-top-color: #e8506e; } .auth-terms { margin-top: 26px; color: #444; font-size: 14px; line-height: 1.5; text-align: left; } .auth-terms button { color: #111; font-weight: 700; } .auth-terms button:hover { color: #111; text-decoration: underline; } .auth-legal-done { border-radius: 10px; background: #111; } @media (max-width: 940px) { .auth-sitebar { height: 72px; padding: 0 30px; } .auth-shell { min-height: calc(100vh - 72px); grid-template-columns: 1fr; } .auth-story { min-height: 360px; padding: 58px 42px; } .auth-story-copy .auth-kicker { margin-bottom: 25px; } .auth-story-copy > p { display: block; max-width: 670px; } .auth-stats { margin-top: 34px; } .auth-access { min-height: auto; padding: 60px 34px 76px; place-items: start center; } } @media (max-width: 600px) { .auth-sitebar { height: 68px; padding: 0 22px; } .auth-site-logo .airvana-brand-symbol { width: 29px; height: 33px; flex-basis: 29px; } .auth-site-logo .airvana-dot-red, .auth-site-logo .airvana-dot-black { width: 18px; height: 18px; } .auth-site-logo .airvana-dot-blue { width: 10px; height: 10px; } .auth-site-logo .airvana-wordmark { font-size: 24px !important; } .auth-shell { min-height: calc(100vh - 68px); } .auth-story { min-height: 382px; padding: 52px 24px 44px; } .auth-story-copy .auth-kicker { display: block; margin-bottom: 22px; font-size: 11px; } .auth-story-copy h1 { font-size: clamp(38px, 11vw, 48px); } .auth-story-copy > p { margin-top: 21px; font-size: 16px; } .auth-stats { display: none; } .auth-access { padding: 42px 24px 58px; } /* 窄屏把礼盒缩到 84%,腾出的宽度留给文案(否则「Get 1000 points」折两行) */ .auth-promo { min-height: 148px; margin-bottom: 28px; padding: 20px 150px 20px 22px; } .auth-promo-art { height: 84%; } .auth-promo-l1 { font-size: 16px; } .auth-promo-l2 { font-size: 21px; } .auth-promo-l3 { font-size: 14px; } .auth-heading { margin-bottom: 26px; } .auth-heading h2 { font-size: 30px; } .auth-heading p { font-size: 15px; } .auth-google, .auth-email, .auth-submit { min-height: 52px; border-radius: 10px; font-size: 16px; } .auth-terms { margin-top: 24px; font-size: 13px; } } /* ===== console/styles/workflow.css ===== */ /* Console 工坊时间线：基于 views.css 的浅表面底稿，再用状态 modifier 表达五态。 */ .console-workflow { flex: 0 0 auto; margin: 0 12px 10px; padding: 11px 12px; color: var(--text); background: color-mix(in srgb, var(--soft) 82%, var(--surface)); border: 1px solid var(--line); border-radius: var(--radius-sm); } .console-workflow-head { display: flex; align-items: center; gap: 7px; min-width: 0; } .console-workflow-head strong { color: var(--ink); font-size: var(--type-supporting); font-weight: 650; } .console-workflow-id { margin-left: auto; color: var(--faint); font: 500 9px/1 Inter, sans-serif; letter-spacing: .06em; } .console-workflow-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: 9px; font-weight: 600; } .console-workflow-badge i, .console-workflow-current > i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .console-workflow-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 11px 0 8px; padding: 0; list-style: none; } .console-workflow-stages li { position: relative; display: grid; justify-items: center; gap: 5px; min-width: 0; color: var(--faint); } .console-workflow-stages li::before { content: ''; position: absolute; z-index: 0; top: 8px; right: 50%; left: -50%; height: 1px; background: var(--line); } .console-workflow-stages li:first-child::before { display: none; } .console-workflow-stages li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid var(--line-strong, var(--line)); border-radius: 50%; background: var(--surface); font-size: 8px; font-weight: 650; } .console-workflow-stages small { max-width: 100%; overflow: hidden; font-size: 8px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .console-workflow-stages .is-done { color: var(--green); } .console-workflow-stages .is-done::before { background: color-mix(in srgb, var(--green) 45%, var(--line)); } .console-workflow-stages .is-done > span { color: #fff; border-color: var(--green); background: var(--green); } .console-workflow-stages .is-current { color: var(--violet); } .console-workflow-stages .is-current > span { color: #fff; border-color: var(--violet); background: var(--violet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 13%, transparent); } .console-workflow-stages .is-failed, .console-workflow-stages .is-cancelled { color: var(--amber); } .console-workflow-stages .is-failed > span, .console-workflow-stages .is-cancelled > span { color: var(--amber); border-color: currentColor; background: var(--amber-soft); } .console-workflow-current { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; line-height: 1.4; } .console-workflow-current > i { flex: 0 0 auto; color: var(--violet); animation: console-workflow-pulse 1.5s ease-in-out infinite; } .console-workflow-reasons { margin: 8px 0 0; padding: 7px 9px 7px 23px; color: var(--amber); background: var(--amber-soft); border-radius: 6px; font-size: 10px; line-height: 1.45; } .console-workflow-actions { display: flex; gap: 6px; margin-top: 9px; } .console-workflow-actions .btn { min-height: 28px; padding: 5px 9px; font-size: 10px; } .console-workflow-error { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--amber); font-size: 10px; } .console-workflow-error button { padding: 4px 7px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font: inherit; } .console-workflow-error button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } .console-workflow-empty { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--muted); font-size: 10px; } .console-workflow-empty i { width: 6px; height: 6px; border: 1px solid var(--faint); border-radius: 50%; } .console-workflow-skeleton { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 10px; } .console-workflow-skeleton span { height: 17px; border-radius: 5px; background: linear-gradient(90deg, var(--line), var(--surface), var(--line)); background-size: 220% 100%; animation: console-workflow-shimmer 1.5s linear infinite; } .console-workflow-skeleton small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; } @keyframes console-workflow-pulse { 50% { opacity: .25; transform: scale(.72); } } @keyframes console-workflow-shimmer { to { background-position: -220% 0; } } @media (prefers-reduced-motion: reduce) { .console-workflow-current > i, .console-workflow-skeleton span { animation: none; } } @media (max-width: 900px) { .console-workflow { margin-inline: 10px; } } /* 与上方 Campaign brief 卡拉开呼吸位(QA:贴太近) */ .console-workflow { margin-top: 10px; } /* 成功终态:停留展示后温和淡出,与 JS 3.5s 卸载衔接(3.05s 起 0.45s 完成) */ .console-workflow.is-done-fading { animation: cw-done-fade .45s ease 3.05s forwards; } @keyframes cw-done-fade { to { opacity: 0; transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .console-workflow.is-done-fading { animation: none; } } /* ===== console/styles/agents.css ===== */ /* Airvana Console · AI Agents 行卡/配置弹层/Marketing NPC 三步弹层 规则自新版产品 Demo shared-css 原样抽取(实际尺寸,254 条),尾部为我们补充的状态小件。 */ .agent-hub-icon > svg { width: 17px; height: 17px; display: block; margin: 0 !important; } .agent-hub { margin-bottom: 16px; overflow: hidden; border: 1px solid #ddd9d0; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px rgba(28,27,24,.04); } .agent-hub-toggle { width: 100%; min-height: 62px; padding: 10px 11px; display: flex; align-items: center; gap: 10px; border: 0; color: var(--ink); background: linear-gradient(135deg,#fff8f5,#faf9f6); text-align: left; } .agent-hub-toggle:hover { background: #fff6f3; } .agent-hub-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; color: #d91f3b; background: var(--violet-soft); } .agent-hub-copy { min-width: 0; flex: 1; } .agent-hub-copy strong { display: block; font-size: 11px; line-height: 1.2; } .agent-hub-copy small { display: block; margin-top: 4px; overflow: hidden; color: #858a86; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; } .agent-avatar-stack { display: flex; align-items: center; padding-left: 8px; } .agent-avatar-stack i { width: 24px; height: 24px; margin-left: -8px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #ff3148; font-style: normal; } .agent-avatar-stack i:nth-child(2) { background: #15936f; } .agent-avatar-stack i:nth-child(3) { background: #b47418; } .agent-avatar-stack i:nth-child(4) { background: #5d4bc4; } .agent-avatar-stack i:nth-child(5) { background: #d89017; } .agent-avatar-stack span { font-size: 5px; font-weight: 850; letter-spacing: -.02em; } .agent-hub-chevron { width: 15px; height: 15px; color: #919691; transition: transform .18s; } .agent-hub.open .agent-hub-chevron { transform: rotate(180deg); } .agent-hub-body { padding: 0 8px 8px; display: grid; gap: 6px; background: #faf9f7; } .agent-hub-body[hidden] { display: none !important; } .agent-row-card { min-width: 0; min-height: 57px; display: flex; align-items: center; gap: 7px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; } .agent-open { min-width: 0; flex: 1; min-height: 55px; padding: 8px 6px 8px 9px; display: flex; align-items: center; gap: 9px; border: 0; color: #656b67; background: transparent; text-align: left; } .agent-open:hover { background: #faf9f6; } .agent-row-icon { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border-radius: 9px; color: #d91f3b; background: var(--violet-soft); } .agent-row-twin .agent-row-icon { color: #ff3148; background: #fff0f1; } .agent-row-mood .agent-row-icon { color: #058f75; background: #e4f7f0; } .agent-row-coach .agent-row-icon { color: #3978d7; background: #eaf2ff; } .agent-row-smart-host .agent-row-icon { color: #a56a12; background: #fff3dc; } .agent-row-host .agent-row-icon { color: #0c8e69; background: #e4f7f0; } .agent-row-marketing .agent-row-icon { color: #a56a12; background: #fff3dc; } .agent-open > span:nth-child(2) { min-width: 0; flex: 1; } .agent-open strong { display: block; color: var(--ink); font-size: 9px; line-height: 1.25; } .agent-open small { display: block; margin-top: 3px; overflow: hidden; color: #929793; font-size: 7px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .agent-open em { flex: 0 0 auto; color: #d91f3b; font-size: 7px; font-style: normal; font-weight: 760; } .agent-open > svg:last-child { width: 13px; height: 13px; color: #a9ada9; } .agent-mini-switch { width: 34px; height: 20px; flex: 0 0 34px; margin-right: 9px; padding: 2px; display: flex; align-items: center; border: 0; border-radius: 12px; background: #dfe2df; transition: background .18s; } .agent-mini-switch i { width: 16px; height: 16px; display: block; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(27,31,28,.18); transition: transform .18s; } .agent-mini-switch.on { background: var(--violet); } .agent-mini-switch.on i { transform: translateX(14px); } .agent-hub.config-module { margin-bottom: 8px; border-color: #e2ded6; border-radius: var(--radius-md); box-shadow: 0 2px 7px rgba(28,27,24,.025); } .agent-hub.config-module .agent-hub-toggle { min-height: 56px; padding: 8px 10px; gap: 8px; background: #fff; } .agent-hub.config-module .agent-hub-toggle:hover { background: #faf9f6; } .agent-hub.config-module .agent-hub-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; color: #ff5062; background: #fff0f1; } .agent-hub.config-module .agent-hub-copy strong { font-size: 9.5px; } .agent-hub.config-module .agent-hub-copy small { font-size: 7px; } .agent-hub.config-module .agent-avatar-stack { display: none; } .agent-hub.config-module .agent-hub-body { padding: 8px; border-top: 1px solid #efede7; background: #fbfaf8; } .agent-hub.config-module .agent-row-card { min-height: 47px; border-color: #e4e1da; border-radius: 10px; box-shadow: none; } .agent-hub.config-module .agent-open { min-height: 45px; } body.agent-dialog-open { overflow: hidden; } .agent-layer { position: fixed; z-index: 140; inset: 0; padding: 24px; display: flex; align-items: center; justify-content: center; background: rgba(27,29,27,.46); opacity: 0; pointer-events: none; transition: opacity .18s; } .agent-layer[hidden] { display: none !important; } .agent-layer.show { opacity: 1; pointer-events: auto; } .agent-sheet, .marketing-sheet { width: min(560px,100%); max-height: min(820px,calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.75); border-radius: 24px; color: var(--ink); background: #fff; box-shadow: 0 32px 90px rgba(22,25,23,.28); transform: translateY(12px) scale(.985); transition: transform .2s ease; } .marketing-sheet { width: min(760px,calc(100vw - 40px)); height: min(720px,calc(100vh - 48px)); } .agent-layer.show .agent-sheet, .agent-layer.show .marketing-sheet { transform: none; } .agent-sheet-header { min-height: 82px; flex: 0 0 auto; padding: 15px 18px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); } .agent-sheet-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 13px; color: #d91f3b; background: var(--violet-soft); } .agent-sheet-icon.marketing { color: #a46a13; background: #fff1d7; } .agent-sheet-header > div { min-width: 0; flex: 1; } .agent-sheet-header h2 { margin: 0; color: var(--ink); font-size: 16px; letter-spacing: -.025em; } .agent-sheet-header p { margin: 4px 0 0; color: #858c87; font-size: 8.5px; line-height: 1.4; } .agent-close { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #59625d; background: #f0f3f0; } .agent-close:hover { color: var(--ink); background: #e7ebe7; } .agent-sheet-body { min-height: 0; overflow-y: auto; padding: 18px; background: #fafbf9; } .simple-agent-card { padding: 18px; border-radius: 18px; background: #fff0f1; } .simple-agent-card.host { background: #e5f7f1; } .simple-agent-card.agent-role-config.coach { background: #eef8f4; } .simple-agent-card.agent-role-config.smart-host { background: #fff6e8; } .agent-config-section { margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(97,88,149,.14); } .agent-config-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .agent-config-head > span { min-width: 0; } .agent-config-head strong { display: block; color: var(--ink); font-size: 13px; } .agent-config-head small { display: block; margin-top: 3px; color: #77807b; font-size: 11px; line-height: 1.35; } .agent-config-head em { flex: 0 0 auto; color: #ff3148; font-size: 11px; font-style: normal; font-weight: 720; } .agent-fixed-identity { min-height: 58px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(37,121,93,.15); border-radius: 13px; background: rgba(255,255,255,.8); } .agent-fixed-identity > span { width: 35px; height: 35px; flex: 0 0 35px; display: grid; place-items: center; border-radius: 10px; color: #087f5e; background: #e4f7f0; } .agent-fixed-identity > span svg { width: 17px; height: 17px; } .agent-fixed-identity > div { min-width: 0; flex: 1; } .agent-fixed-identity strong { display: block; color: var(--ink); font-size: 11px; } .agent-fixed-identity small { display: block; margin-top: 4px; color: #7c8580; font-size: 9px; } .agent-policy-pill { flex: 0 0 auto; padding: 5px 7px; border-radius: 7px; color: #087f5e; background: #e7f7f0; font-size: 7.5px; font-style: normal; font-weight: 760; } .agent-role-config.smart-host .agent-fixed-identity { border-color: rgba(165,106,18,.17); } .agent-role-config.smart-host .agent-fixed-identity > span { color: #a56a12; background: #fff0d5; } .agent-role-config.smart-host .agent-policy-pill { color: #8b5b12; background: #ffefd2; } .agent-role-config .agent-sample { margin-top: 15px; align-items: center; } .agent-role-config.twin .agent-policy-pill { color: #5d4bc4; background: #e9e4ff; } .agent-role-config.twin .agent-guardrail { color: #524395; } .agent-option-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; } .agent-option-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); } .agent-option-grid button.active { color: #d91f3b; border-color: var(--violet); background: #fff; } .agent-helper { margin: 12px 0; color: #737b76; font-size: 9px; line-height: 1.55; } .agent-sample { padding: 13px; display: flex; align-items: flex-start; gap: 9px; border-radius: 13px; background: #fff; } .agent-sample > svg { width: 24px; height: 24px; flex: 0 0 24px; padding: 5px; border-radius: 50%; color: #fff; background: var(--violet); } .agent-sample p { margin: 0; color: #525a55; font-size: 9px; line-height: 1.6; } .agent-sample p strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 8px; } .agent-sample small { display: block; margin-top: 5px; color: #8f9691; font-size: 7.5px; } .simple-agent-card.host .agent-sample > * { min-width: 0; } .simple-agent-card.host .agent-sample small { margin: 0; line-height: 1.4; } .agent-guardrail { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #352d7d; } .agent-guardrail > span { display: flex; align-items: center; gap: 8px; font-size: 8.5px; } .simple-agent-card.host .agent-guardrail { color: #087f5e; } .marketing-steps { min-height: 54px; flex: 0 0 54px; padding: 8px 18px; display: flex; align-items: center; justify-content: center; background: #fafbf9; border-bottom: 1px solid var(--line); } .marketing-steps > i { width: 46px; height: 1px; background: #dddeda; } .marketing-steps button { min-height: 34px; display: flex; align-items: center; gap: 7px; border: 0; color: #929792; background: transparent; font-size: 8.5px; font-weight: 740; } .marketing-steps button span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #8b918d; background: #e9ece9; } .marketing-steps button.active { color: var(--ink); } .marketing-steps button.active span { color: #fff; background: var(--violet); } .marketing-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d8dad6 transparent; } .marketing-step { min-height: 100%; padding: 20px; display: flex; flex-direction: column; } .marketing-step[hidden] { display: none !important; } .marketing-step.active { animation: agentStepIn .2s ease; } .marketing-callout { min-height: 48px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #e4b15c; border-radius: 12px; color: #76521b; background: #fff5df; font-size: 9px; line-height: 1.5; } .marketing-callout > svg { width: 18px; height: 18px; flex: 0 0 18px; } .marketing-lead { margin: 17px 0; color: #646d67; font-size: 10px; line-height: 1.65; } .marketing-lead strong { color: var(--ink); } .marketing-recommendations { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .marketing-recommendations article { min-height: 126px; padding: 14px; border: 1px solid #0b9a70; border-radius: 15px; background: #fcfffd; } .marketing-recommendations article > span { display: flex; align-items: center; gap: 5px; color: #078866; font-size: 8px; font-weight: 760; } .marketing-recommendations article > span svg { width: 13px; height: 13px; } .marketing-recommendations article strong { display: block; margin-top: 7px; color: #087f5e; font-size: 11px; } .marketing-recommendations article p { margin: 6px 0 0; color: #7c8580; font-size: 8.5px; line-height: 1.55; } .marketing-metrics { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 16px; color: #6f7772; font-size: 8.5px; } .marketing-metrics strong { margin-left: 4px; color: #087f5e; } .marketing-actions { margin-top: auto; padding-top: 18px; display: flex; gap: 9px; } .agent-tertiary { min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 9px; font-weight: 760; } .agent-primary { flex: 1.15; border: 0; color: #fff; background: linear-gradient(110deg,var(--violet),var(--violet-2)); box-shadow: 0 9px 22px rgba(255,49,72,.18); } .agent-secondary { flex: 1; border: 1px solid var(--line); color: var(--ink); background: #f0f3f0; } .agent-tertiary { flex: .9; border: 0; color: #5f6762; background: transparent; } .timing-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .timing-legend strong { font-size: 12px; } .timing-legend span { color: #929993; font-size: 8px; } .timing-zones { height: 150px; display: grid; grid-template-columns: 1fr .9fr 1.18fr .92fr 1fr; overflow: hidden; border-radius: 10px; } .timing-zones span { display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; color: #087f5e; background: #e7f5f0; font-size: 7.5px; } .timing-zones span.locked { color: #c54242; background: #fbe6e6; } /* #173 回归:S2 心流时间线(timing-map=zones 色带+曲线 SVG+广告时刻标记+相位标签,Demo 原文) */ .timing-map { min-height: 220px; margin-top: 12px; padding: 14px 14px 12px; position: relative; overflow: hidden; border-radius: 16px; background: #fafbf9; } .flow-curve { width: calc(100% - 28px); height: 150px; position: absolute; z-index: 2; left: 14px; top: 14px; overflow: visible; pointer-events: none; } .flow-axis { stroke: #dfe4e0; stroke-width: 1; vector-effect: non-scaling-stroke; } .flow-line { fill: none; stroke: #ff5f43; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .timing-marker { position: absolute; z-index: 3; top: 143px; display: grid; justify-items: center; gap: 3px; color: #078866; transform: translateX(-50%); } .timing-marker.marker-one { left: 41%; } .timing-marker.marker-two { left: 89%; } .timing-marker b { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #0b956e; box-shadow: 0 3px 9px rgba(11,149,110,.18); font-size: 8px; } .timing-marker small { font-size: 7px; white-space: nowrap; } .timing-phase-labels { margin-top: 25px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); color: #79817c; font-size: 7.5px; } .timing-phase-labels span:nth-child(2) { text-align: center; } .timing-phase-labels span:last-child { text-align: right; } .placement-list { margin-top: 13px; display: grid; gap: 8px; } /* #180:Choose asset 钮收敛进创意下拉(真素材选择器),行为 5 列:序号/标题/时刻/创意/删除 */ .placement-list article { min-width: 0; min-height: 58px; padding: 9px 10px; display: grid; grid-template-columns: 26px minmax(110px,.85fr) minmax(120px,1fr) minmax(145px,1.15fr) 32px; align-items: center; gap: 8px; border-radius: 12px; background: #fafbf9; } .placement-list article > b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0b956e; font-size: 8px; } .placement-list article > strong { font-size: 8.5px; } .placement-list select { min-width: 0; width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 9px; padding: 0 8px; color: #525a55; background: #fff; font-size: 8px; } .placement-list article > button:not(.placement-delete) { min-height: 32px; border: 0; color: #ff5f43; background: transparent; font-size: 8px; font-weight: 720; } .placement-delete { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #c84a43; background: transparent; } .placement-delete:hover { background: #fbeeec; } /* #180 回归:时刻固定 pill + 创意自定义选择器(替换原生 select) */ .moment-pill { min-width: 0; height: 34px; display: flex; align-items: center; padding: 0 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; color: #858d88; background: #f6f7f5; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; } .creative-picker { position: relative; min-width: 0; } .creative-picker > button { width: 100%; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: #3c433f; background: #fff; font-size: 8px; transition: border-color .15s; } .creative-picker > button:hover:not(:disabled) { border-color: #b9c4bd; } .creative-picker > button:focus-visible { outline: none; border-color: #0b956e; box-shadow: 0 0 0 3px rgba(11,149,110,.13); } .creative-picker > button:disabled { color: #a2a8a3; background: #f6f7f5; } .creative-picker > button > span { flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .creative-picker > button > svg { flex: none; color: #858d88; transition: transform .15s; } .creative-picker.open > button > svg { transform: rotate(180deg); } .creative-picker ul { position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; right: 0; max-height: 216px; margin: 0; padding: 5px; overflow: auto; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 16px 44px rgba(22,25,23,.16); } .creative-picker li button { width: 100%; display: flex; align-items: center; gap: 7px; padding: 7px 8px; border: 0; border-radius: 8px; color: #3c433f; background: transparent; font-size: 8px; text-align: left; } .creative-picker li button:hover { background: #f2f5f1; } .creative-picker li button[aria-selected="true"] { color: #0b956e; font-weight: 720; } .creative-picker li button i { width: 13px; flex: none; display: grid; place-items: center; font-style: normal; } .creative-picker li button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* #173 回归:S2 底部三统计卡(Demo 原文) */ .marketing-stat-grid { margin-top: 13px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; } .marketing-stat-grid article { min-height: 86px; padding: 13px; border-radius: 13px; background: #fafbf9; } .marketing-stat-grid span { display: block; color: #858d88; font-size: 8px; } .marketing-stat-grid strong { display: block; margin-top: 10px; color: var(--ink); font-size: 18px; } .player-preview-layout { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 26px; align-items: start; } .ad-phone { width: 310px; height: 500px; position: relative; overflow: hidden; border-radius: 30px; color: #fff; background: #08110d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .ad-phone-time { position: absolute; top: 20px; left: 20px; color: #c7b6ff; font-size: 9px; } .ad-gamepad { position: absolute; left: 50%; top: 42%; font-size: 34px; transform: translate(-50%,-50%); } .ad-card { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 14px; border: 1px solid #0c8d68; border-radius: 16px; background: #0c2c20; } .ad-card > em { position: absolute; right: 12px; top: -18px; padding: 5px 8px; border-radius: 7px 7px 0 0; color: #fff; background: #0b956e; font-size: 7px; font-style: normal; } .ad-card > div:first-of-type { display: flex; align-items: flex-start; gap: 8px; color: #e5eee9; font-size: 9px; line-height: 1.45; } .ad-card > div:first-of-type svg { width: 18px; height: 18px; flex: 0 0 18px; padding: 4px; border-radius: 50%; color: #fff; background: #0b956e; } .ad-reward { height: 34px; margin-top: 10px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.06); } .ad-card-actions { margin-top: 9px; display: grid; grid-template-columns: 1fr auto; gap: 7px; } .ad-card-actions button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; color: #c6d1ca; background: rgba(255,255,255,.08); font-size: 8.5px; } .ad-card-actions button.selected { color: #fff; background: #16a47b; } .preview-explainer h3 { margin: 5px 0 16px; font-size: 14px; } .preview-explainer > p { margin: 0 0 14px; display: flex; align-items: flex-start; gap: 10px; color: #59625d; font-size: 9.5px; line-height: 1.6; } .preview-explainer > p svg { width: 17px; height: 17px; flex: 0 0 17px; color: #0b956e; } /* #173 回归:S3 操作提示条(Demo 原文) */ .preview-tip { margin-top: 18px; padding: 12px; display: flex; align-items: center; gap: 8px; border-radius: 12px; color: #087f5e; background: #e3f7f0; font-size: 9px; } .preview-tip svg { width: 16px; height: 16px; } .submission-scope { margin: 16px 0 0; color: #7c847f; font-size: 8.5px; line-height: 1.5; } @media (max-width: 820px) { .agent-layer { padding: 10px; } .agent-sheet, .marketing-sheet { width: calc(100vw - 20px); height: calc(100vh - 20px); max-height: calc(100vh - 20px); border-radius: 18px; } .marketing-recommendations, .player-preview-layout { grid-template-columns: 1fr; } .ad-phone { width: min(310px,100%); margin: auto; } .placement-list article { grid-template-columns: 26px minmax(0,1fr) 32px; } .placement-list article > strong { grid-column: 2; } .placement-list select, .placement-list article > button:not(.placement-delete) { grid-column: 2 / -1; } .placement-delete { grid-column: 3; grid-row: 1; } } /* #173:以下窄屏规则此前被抽取剥壳成顶层(副标题消失/按钮竖排/推荐卡单列),按 Demo 原文归位 ≤540 */ @media (max-width: 540px) { .agent-sheet-header { padding: 12px; } .agent-sheet-header h2 { font-size: 14px; } .agent-sheet-header p { display: none; } .marketing-steps { padding: 7px 10px; } .marketing-steps > i { width: 14px; } .marketing-steps button { font-size: 7px; } .marketing-step { padding: 14px; } .marketing-actions { flex-direction: column; } .marketing-stat-grid { grid-template-columns: 1fr; } .agent-option-grid.three { grid-template-columns: 1fr; } .simple-agent-card.host .agent-sample { grid-template-columns: auto minmax(0,1fr); } .simple-agent-card.host .agent-sample small { grid-column: 2; } .agent-avatar-stack { display: none; } } .agent-row strong { font-size: 13px !important; } .agent-row em { font-size: 11px !important; } .agent-hub.config-module .agent-hub-toggle { min-height: 72px; padding: 10px 12px; gap: 11px; } .agent-hub.config-module .agent-hub-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; } .agent-hub.config-module .agent-hub-copy strong { font-size: 14px !important; } .agent-hub.config-module .agent-hub-copy small { font-size: 12px !important; line-height: 1.35; } .agent-hub.config-module .agent-hub-toggle { min-height: 60px; } .agent-hub.config-module .agent-row-card { min-height: 56px; } .agent-hub.config-module .agent-open { min-height: 54px; } .agent-sheet-header h2 { font-size: 18px !important; line-height: 1.25; } .agent-sheet-header p { font-size: 13px !important; line-height: 1.45; } .agent-helper { font-size: 13px !important; line-height: 1.55; } .agent-sample p { font-size: 13px !important; line-height: 1.55; } .agent-sample p strong { font-size: 12px !important; } .agent-sample small { font-size: 11px !important; line-height: 1.45; } .agent-guardrail > span { font-size: 12px !important; line-height: 1.4; } .marketing-steps button { font-size: 12px !important; } .marketing-callout { font-size: 13px !important; line-height: 1.5; } .marketing-lead { font-size: 14px !important; line-height: 1.6; } .marketing-recommendations article > span { font-size: 11px !important; } .marketing-recommendations article strong { font-size: 14px !important; } .marketing-recommendations article p { font-size: 12px !important; line-height: 1.5; } .marketing-metrics { font-size: 12px !important; } .agent-tertiary { min-height: 44px; font-size: 13px !important; } .timing-legend strong { font-size: 15px !important; } .timing-legend span { font-size: 12px !important; } .timing-zones span { font-size: 11px !important; } .placement-list article > b { font-size: 11px !important; } .placement-list article > strong { font-size: 13px !important; } .placement-list select { min-height: 40px; height: 40px; font-size: 13px !important; } .placement-list article > button:not(.placement-delete) { min-height: 40px; font-size: 12px !important; } .timing-marker b { font-size: 11px !important; } .timing-marker small { font-size: 10px !important; } .timing-phase-labels { font-size: 11px !important; } .marketing-stat-grid span { font-size: 12px !important; } .marketing-stat-grid strong { font-size: 24px !important; } .preview-tip { font-size: 13px !important; line-height: 1.45; } .ad-phone-time { font-size: 11px !important; } .ad-card > em { font-size: 11px !important; } .ad-card > div:first-of-type { font-size: 12px !important; } .ad-card-actions button { min-height: 40px; font-size: 12px !important; } .preview-explainer h3 { font-size: 17px !important; } .preview-explainer > p { font-size: 13px !important; line-height: 1.55; } .submission-scope { font-size: 12px !important; line-height: 1.5; } /* #173:此三条为 Demo ≤620 窄屏放大档,剥壳顶层化会在桌面盖掉 13px/22px 基准,归位 */ @media (max-width: 620px) { .agent-sheet-header p { font-size: 12px !important; } .marketing-steps button { font-size: 11px !important; } .marketing-steps > i { width: 22px; } } html[data-theme="dark"] .agent-hub.config-module .agent-hub-toggle:hover { background: #242841; } html[data-theme="dark"] .agent-hub.config-module .agent-hub-icon { color: #ff8a94; background: #3a2226; } html[data-theme="dark"] .agent-hub-copy strong { color: #fff2f0; } html[data-theme="dark"] .agent-hub-copy small { color: #a7a8b7; } html[data-theme="dark"] .agent-open { color: #aeb8b3; } html[data-theme="dark"] .agent-open:hover { background: #151e19; } html[data-theme="dark"] .agent-open strong { color: var(--ink); } html[data-theme="dark"] .agent-open small { color: var(--muted); } html[data-theme="dark"] .agent-open em { color: #ff8a94; } html[data-theme="dark"] .agent-mini-switch { background: #35413b; } html[data-theme="dark"] .agent-mini-switch.on { background: var(--violet); } html[data-theme="dark"] .agent-layer { background: rgba(3,7,5,.72); } html[data-theme="dark"] .agent-sheet-header h2 { color: var(--ink); } html[data-theme="dark"] .agent-sheet-header p { color: var(--muted); } html[data-theme="dark"] .agent-sheet-icon { color: #ff8a94; background: #3a2226; } html[data-theme="dark"] .agent-close { color: #aab4af; background: #18211c; } html[data-theme="dark"] .agent-close:hover { color: #fff; background: #232e28; } html[data-theme="dark"] .agent-sheet-body { background: #0c1410; } html[data-theme="dark"] .simple-agent-card { background: #1d2135; } html[data-theme="dark"] .simple-agent-card.host { background: #17251f; } html[data-theme="dark"] .simple-agent-card.agent-role-config.coach { background: #17251f; } html[data-theme="dark"] .simple-agent-card.agent-role-config.smart-host { background: #252116; } html[data-theme="dark"] .agent-helper { color: #b1bcb6; } html[data-theme="dark"] .agent-config-section { border-color: #303c35; } html[data-theme="dark"] .agent-config-head strong { color: var(--ink); } html[data-theme="dark"] .agent-config-head small { color: #89948e; } html[data-theme="dark"] .agent-config-head em { color: #ff9d94; } html[data-theme="dark"] .agent-fixed-identity > span { color: #75e4bd; background: #18372b; } html[data-theme="dark"] .agent-fixed-identity strong { color: #f3f7f4; } html[data-theme="dark"] .agent-fixed-identity small { color: #9da8a2; } html[data-theme="dark"] .agent-policy-pill { color: #75e4bd; background: #18372b; } html[data-theme="dark"] .agent-role-config.smart-host .agent-fixed-identity { border-color: #4a4028; } html[data-theme="dark"] .agent-role-config.smart-host .agent-policy-pill { color: #f2c56b; background: #3b301b; } html[data-theme="dark"] .agent-role-config.twin .agent-policy-pill { color: #ffb3bc; background: #2b2851; } html[data-theme="dark"] .agent-sample p { color: #d4dcd8; } html[data-theme="dark"] .agent-sample p strong { color: var(--ink); } html[data-theme="dark"] .agent-sample small { color: #8e9993; } html[data-theme="dark"] .agent-guardrail { color: #ffb3a6; } html[data-theme="dark"] .simple-agent-card.host .agent-guardrail { color: #75e4bd; } /* ---- 我们补充:行卡状态小药丸与广告位状态(Demo 无对应真实态) ---- */ .agent-state-pill { flex: 0 0 auto; margin-left: auto; padding: 3px 8px; border-radius: 999px; color: #a46a13; background: #fff1d7; font-size: 10px; font-weight: 700; white-space: nowrap; } .placement-list article .placement-meta { color: var(--muted); font-size: 11px; } .placement-state { margin-left: auto; padding: 3px 8px; border-radius: 999px; color: var(--muted); background: var(--line); font-size: 10px; font-weight: 700; font-style: normal; } .placement-state.live { color: #168653; background: #e4f7f0; } .marketing-scroll > .marketing-step > .agent-secondary[disabled] { opacity: .55; } html[data-theme="dark"] .agent-hub, html[data-theme="dark"] .agent-row-card, html[data-theme="dark"] .agent-sheet, html[data-theme="dark"] .marketing-sheet { background: #101713; border-color: var(--line); } /* xp-stack(flex 列)会收缩子项:hub 曾被压成 2px、内容被"压进"容器致 overflow-y:auto 永不触发(#163 回归"不能下滑"). 全部直接子项不收缩=内容真实溢出→滚动条正常出现 */ .xp-stack > * { flex: 0 0 auto; } /* ===== console/styles/feedback.css ===== */ /* Airvana Console · Feedback(产品反馈提交页) 来源:产品新版 Demo(Airvana-Console-Offline)feedback 提交侧原样结构;字号按 console 真实标尺放大 (Demo 为 8-9px 缩小底稿,本页无既有放大层,故在此直接落真实字号),配色沿 Demo 红系并补深色变体。 */ .feedback-heading { margin-bottom: 24px; } .feedback-eyebrow { display: flex; align-items: center; gap: 7px; color: #c22736; font-size: 11px; font-weight: 800; letter-spacing: .13em; } .feedback-eyebrow svg { width: 15px; height: 15px; } .feedback-heading h1 { margin-top: 8px; } .feedback-layout { display: grid; grid-template-columns: minmax(520px,1.35fr) minmax(280px,.65fr); gap: 18px; max-width: 1060px; } .feedback-form { padding: 26px; } .feedback-form-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .feedback-form-heading > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #c22736; background: #fff0f1; } .feedback-form-heading svg { width: 21px; height: 21px; } .feedback-form h2, .feedback-info-card h2 { margin: 0; color: var(--ink); font-size: 18px; } .feedback-form-heading p { margin: 4px 0 0; color: #929aa4; font-size: 12px; } .feedback-form-heading b, .feedback-form > label > b, .feedback-form fieldset b { color: #dc3e43; } .feedback-form > label { display: block; margin-bottom: 16px; font-size: 12.5px; font-weight: 700; color: var(--ink); } .feedback-form > label > em { margin-left: 5px; color: #9a9fab; font-size: 11px; font-style: normal; font-weight: 500; } .feedback-form > label > input, .feedback-form textarea { width: 100%; margin-top: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; font: inherit; font-size: 14px; font-weight: 500; } .feedback-form > label > input { height: 40px; } .feedback-form textarea { height: 150px; padding: 11px 12px; resize: vertical; line-height: 1.55; font-size: 13.5px; } .feedback-form > label > input:focus-visible, .feedback-form textarea:focus-visible { outline: none; border-color: #e0554d; box-shadow: 0 0 0 3px rgba(224,85,77,.12); } .feedback-form > label > small { display: block; margin-top: 5px; color: #a0a5b0; text-align: right; font-size: 11px; font-weight: 500; } .feedback-form fieldset { padding: 0; border: 0; margin: 0 0 16px; } .feedback-form legend { padding: 0; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); } .feedback-category-options { display: flex; gap: 10px; } .feedback-category-options label { position: relative; flex: 1 1 0; } .feedback-category-options input { position: absolute; opacity: 0; pointer-events: none; } .feedback-category-options span { height: 46px; border: 1px solid var(--line); border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #747a88; background: #fff; font-size: 13px; font-weight: 700; transition: .18s; cursor: pointer; } .feedback-category-options svg { width: 16px; height: 16px; } .feedback-category-options input:checked + span { border-color: #ff8c7b; color: #c22736; background: #fff5f4; box-shadow: inset 0 0 0 1px rgba(255,73,89,.1); } .feedback-category-options input:focus-visible + span { outline: 2px solid rgba(224,85,77,.35); outline-offset: 2px; } .feedback-upload { height: 110px; margin-top: 7px; border: 1px dashed #f4a99e; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6b7180; background: #fffafa; position: relative; text-align: center; } .feedback-upload input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; } .feedback-upload svg { width: 23px; height: 23px; margin-bottom: 6px; color: #dc5a52; } .feedback-upload strong { font-size: 13px; } .feedback-upload small { margin-top: 4px; color: #a0a4ae; font-size: 11px; font-weight: 500; } .feedback-file-name { display: block; margin-top: 7px; min-height: 16px; color: #9a9faa; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; } .feedback-context { margin: 3px 0 16px; padding: 11px 12px; border-radius: 10px; display: flex; align-items: flex-start; gap: 8px; color: #737986; background: #f7f8fa; font-size: 12px; font-weight: 570; line-height: 1.5; } .feedback-context svg { width: 15px; height: 15px; flex: 0 0 15px; color: #7b8290; } .feedback-submit { width: 100%; height: 44px; justify-content: center; } .feedback-success { margin: -4px 0 14px; padding: 11px 12px; border: 1px solid #bde9d7; border-radius: 10px; display: flex; align-items: center; gap: 8px; color: #16875f; background: #edfaf4; font-size: 13px; font-weight: 700; } .feedback-success svg { width: 17px; height: 17px; } .feedback-error { margin: -4px 0 14px; padding: 11px 12px; border: 1px solid #f3c1c4; border-radius: 10px; display: flex; align-items: center; gap: 8px; color: #c22736; background: #fff2f3; font-size: 13px; font-weight: 700; } .feedback-side { display: grid; align-content: start; gap: 14px; } .feedback-info-card { padding: 22px; } .feedback-info-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #c25c22; background: #fff1e4; } .feedback-info-icon svg { width: 19px; height: 19px; } .feedback-info-card h2 { margin-top: 15px; font-size: 15px; } .feedback-info-card > p { margin: 8px 0 16px; color: #7f8592; font-size: 12.5px; line-height: 1.65; } .feedback-info-card > div { display: grid; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); } .feedback-info-card > div span { display: flex; align-items: center; gap: 7px; color: #626875; font-size: 12px; } .feedback-info-card > div svg { width: 14px; height: 14px; color: #16875f; } .feedback-meta-card { padding: 18px 20px; } .feedback-meta-card > span { color: #8f94a0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .feedback-meta-card dl { display: grid; gap: 11px; margin: 13px 0 0; } .feedback-meta-card dl div { display: flex; justify-content: space-between; gap: 12px; } .feedback-meta-card dt { color: #9a9fab; font-size: 12px; } .feedback-meta-card dd { margin: 0; color: #555b68; font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; text-align: right; } @media (max-width: 980px) { .feedback-layout { display: block; } .feedback-side { grid-template-columns: 1fr 1fr; margin-top: 14px; } } @media (max-width: 620px) { .feedback-side { grid-template-columns: 1fr; } .feedback-form { padding: 18px; } } /* ---- 深色变体:卡体走 dashboard-card 全局深色,这里补硬编码浅色的控件面 ---- */ html[data-theme="dark"] .feedback-form-heading > span { background: #3a1f22; } html[data-theme="dark"] .feedback-form > label > input, html[data-theme="dark"] .feedback-form textarea { background: #161d18; border-color: var(--line); } html[data-theme="dark"] .feedback-category-options span { background: #161d18; color: #9aa39c; } html[data-theme="dark"] .feedback-category-options input:checked + span { background: #33201f; color: #ff8c7b; border-color: #a04a42; } html[data-theme="dark"] .feedback-upload { background: #1d1716; border-color: #6e4038; color: #9aa39c; } html[data-theme="dark"] .feedback-context { background: #1a211c; color: #8d968f; } html[data-theme="dark"] .feedback-success { background: #12241c; border-color: #245b45; } html[data-theme="dark"] .feedback-error { background: #2a1518; border-color: #6e3038; } html[data-theme="dark"] .feedback-info-icon { background: #33261a; } html[data-theme="dark"] .feedback-info-card > p, html[data-theme="dark"] .feedback-info-card > div span, html[data-theme="dark"] .feedback-meta-card dt { color: #8d968f; } html[data-theme="dark"] .feedback-meta-card dd { color: #c9d0c9; } /* ===== console/styles/redemption.css ===== */ /* Airvana Console · Brand Rewards（品牌核销中心） 数值取自产品原型 brand-hub-*（2026-08-06 standalone Brand Redemption workspace）， 颜色改走 console 设计令牌（--ink/--muted/--faint/--line/--surface/--soft/--red/--green）， 暗色统一 html[data-theme="dark"]，与 console 其余页面同一套主题机制。 */ .brand-hub-view { max-width: 1500px; } .brand-hub-heading { align-items: center; } .brand-hub-heading h1 { letter-spacing: -.035em; } /* ---- 顶部两项汇总 ---- */ .brand-hub-metrics { display: flex; gap: 10px; } .brand-hub-metrics article { min-width: 132px; min-height: 64px; padding: 12px 16px; display: grid; align-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 5px 18px rgba(26,23,19,.04); } .brand-hub-metrics small { color: var(--faint); font-size: 10px; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; } .brand-hub-metrics strong { color: var(--red); font-size: 19px; line-height: 1; } .brand-hub-metrics .earned strong { color: var(--green); } /* ---- 左列表 / 右详情 ---- */ .brand-hub-layout { display: grid; grid-template-columns: 292px minmax(0,1fr); align-items: start; gap: 18px; } .brand-hub-list-panel { min-height: 530px; max-height: calc(100vh - 174px); padding: 14px; overflow: hidden; display: flex; flex-direction: column; } .brand-hub-search { height: 42px; padding: 0 12px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); } .brand-hub-search:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 10%, transparent); } .brand-hub-search svg { color: var(--muted); flex: 0 0 auto; } .brand-hub-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: 13px; } .brand-hub-list { min-height: 0; margin-top: 12px; overflow: auto; scrollbar-width: thin; } .brand-hub-list section + section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .brand-hub-list h3 { margin: 0 8px 6px; display: flex; align-items: center; justify-content: space-between; color: var(--faint); font-size: 10px; font-weight: 780; letter-spacing: .11em; text-transform: uppercase; } .brand-hub-list h3 span { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; color: var(--muted); background: var(--soft); font-size: 9px; letter-spacing: 0; } .brand-hub-option { width: 100%; min-height: 58px; padding: 7px 9px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 12px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease; } .brand-hub-option:hover { background: var(--soft); } .brand-hub-option:active { transform: scale(.99); } .brand-hub-option.selected { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); background: color-mix(in srgb, var(--red) 7%, var(--surface)); } .brand-hub-option:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; } .brand-hub-option > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; } .brand-hub-option strong { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; } .brand-hub-option small { color: var(--muted); font-size: 11px; } .brand-hub-option em { color: var(--red); font-size: 11px; font-style: normal; font-weight: 760; white-space: nowrap; } .brand-hub-option > svg { color: var(--green); flex: 0 0 auto; } /* 品牌标识：有图用图，无图用首字母（新品牌未配 logo 也不塌） */ .brand-hub-option-logo, .brand-hub-logo { display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); } .brand-hub-option-logo { width: 38px; height: 38px; } .brand-hub-logo { width: 50px; height: 50px; border-radius: 14px; } .brand-hub-option-logo img, .brand-hub-logo img { width: 76%; height: 76%; display: block; object-fit: contain; } .brand-hub-initial { color: var(--muted); font-size: 14px; font-weight: 800; } .brand-hub-logo .brand-hub-initial { font-size: 18px; } .brand-hub-empty { min-height: 160px; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted); text-align: center; } .brand-hub-empty strong { color: var(--ink); font-size: 13px; } .brand-hub-empty span { font-size: 11px; } /* ---- 详情 ---- */ .brand-hub-detail { min-height: 350px; padding: 24px 26px; } .brand-hub-detail-head { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 13px; } .brand-hub-title { min-width: 0; } .brand-hub-title > div { display: flex; align-items: center; gap: 9px; } .brand-hub-title h2 { margin: 0; color: var(--ink); font-size: 20px; letter-spacing: -.025em; } .brand-hub-title em { min-height: 26px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--surface)); font-size: 11px; font-style: normal; font-weight: 760; white-space: nowrap; } .brand-hub-detail.redeemed .brand-hub-title em { color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--surface)); } .brand-hub-title p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .brand-hub-status { min-height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; color: var(--amber, #9a6a16); background: var(--amber-soft, #fff7e8); font-size: 11px; font-weight: 740; white-space: nowrap; } .brand-hub-status.verified { color: var(--green); background: var(--green-soft); } /* ---- 三步进度 ---- */ .brand-hub-steps { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; } .brand-hub-steps article { min-height: 64px; padding: 11px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); } .brand-hub-steps article > span { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: var(--surface-2); font-size: 11px; font-weight: 780; } .brand-hub-steps article.done > span { color: var(--green); background: var(--green-soft); } .brand-hub-steps article.active { border-color: color-mix(in srgb, var(--red) 30%, var(--line)); background: color-mix(in srgb, var(--red) 5%, var(--surface)); } .brand-hub-steps article.active > span { color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--surface)); } .brand-hub-steps small { display: block; color: var(--faint); font-size: 9px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; } .brand-hub-steps strong { display: block; margin-top: 3px; color: var(--ink); font-size: 12px; line-height: 1.35; } /* ---- 兑换前：UID 表单 ---- */ .brand-hub-action { margin-top: 20px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 14px; } .brand-hub-action form, .brand-hub-accept { min-width: 0; } .brand-hub-action label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 780; letter-spacing: .1em; text-transform: uppercase; } .brand-hub-action form > label > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; } .brand-hub-action input { width: 100%; min-width: 0; height: 44px; border: 1px solid var(--line-strong, var(--line)); border-radius: 11px; padding: 0 13px; color: var(--ink); background: var(--surface); font: inherit; font-size: 13px; } .brand-hub-action input:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 10%, transparent); } .brand-hub-action .btn { min-width: 112px; height: 44px; } .brand-hub-rules { min-height: 42px; padding: 0 6px; display: inline-flex; align-items: center; gap: 7px; border: 0; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; } .brand-hub-rules:hover { color: var(--red); } /* ---- 兑换后：回执 + 下一个任务 ---- */ .brand-hub-receipt { margin-top: 20px; padding: 10px 12px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto auto; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--green) 7%, var(--surface)); } .brand-hub-receipt > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--green); background: var(--surface); } .brand-hub-receipt > div { min-width: 0; display: grid; gap: 3px; } .brand-hub-receipt strong { color: var(--ink); font-size: 13px; } .brand-hub-receipt small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .brand-hub-receipt .btn { min-width: 82px; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .brand-hub-next { margin-top: 12px; min-height: 42px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 11px; color: var(--muted); background: var(--soft); font-size: 11px; } .brand-hub-next > span { display: inline-flex; align-items: center; gap: 6px; } .brand-hub-next button { border: 0; display: inline-flex; align-items: center; gap: 5px; color: var(--red); background: transparent; font-size: 11px; font-weight: 760; cursor: pointer; } .brand-hub-msg { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } /* ---- 响应式：窄屏列表转到详情之上 ---- */ @media (max-width: 1080px) { .brand-hub-layout { grid-template-columns: 1fr; } .brand-hub-list-panel { min-height: 0; max-height: none; } .brand-hub-list { max-height: 300px; } } @media (max-width: 700px) { .brand-hub-heading { flex-direction: column; align-items: flex-start; gap: 12px; } .brand-hub-metrics { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .brand-hub-metrics article { min-width: 0; } .brand-hub-detail { padding: 18px; } .brand-hub-detail-head { grid-template-columns: 44px minmax(0,1fr); row-gap: 10px; } .brand-hub-status { grid-column: 1 / -1; justify-self: start; } .brand-hub-steps { grid-template-columns: 1fr; } .brand-hub-action { grid-template-columns: 1fr; align-items: stretch; } .brand-hub-action form > label > div { grid-template-columns: 1fr; } .brand-hub-receipt { grid-template-columns: 38px minmax(0,1fr); } .brand-hub-receipt .btn { grid-column: span 1; width: 100%; } } /* ---- 暗色 ---- */ html[data-theme="dark"] .brand-hub-metrics article { box-shadow: none; } html[data-theme="dark"] .brand-hub-search, html[data-theme="dark"] .brand-hub-steps article, html[data-theme="dark"] .brand-hub-next { background: var(--surface-2); } html[data-theme="dark"] .brand-hub-option:hover { background: var(--surface-2); } /* 过期态：琥珀色状态胶囊（不是错误，只是需要重新领取） */ .brand-hub-status.expired { color: var(--amber, #9a6a16); background: var(--amber-soft, #fff7e8); } /* ===== console/styles/help.css ===== */ /* Airvana Console · Help Center(教程 + FAQ,产品新需求 2026-08-11) 底稿=产品英文版 UI mock 原样口径(含 mock 自带暗色段);截图资源 assets/help/*.webp; guide 浮层复用 .prototype-layer 壳,加 help-guide-open 修饰类。 */ /* ---- Help Center: tutorials and FAQ ---- */ .help-center-view { max-width: 1440px; } .help-center-heading { align-items: center; margin-bottom: 18px; } .help-center-heading > div { min-width: 0; } .help-eyebrow { margin-bottom: 7px; display: inline-flex; align-items: center; gap: 7px; color: #d92c3f; font-size: 11px; font-weight: 800; letter-spacing: .12em; } .help-eyebrow svg { width: 15px; height: 15px; } .help-center-heading h1 { margin-top: 0; } .help-search-panel { min-height: 116px; padding: 22px 24px; display: grid; grid-template-columns: 50px minmax(220px,1fr) minmax(360px,520px); align-items: center; gap: 16px; border-radius: 20px; background: linear-gradient(115deg,#fff 0%,#fff9f7 100%); } .help-search-icon { width: 50px; height: 50px; display: grid; place-items: center; color: #df2f42; border-radius: 15px; background: #fff0f2; } .help-search-icon svg { width: 22px; height: 22px; } .help-search-panel h2 { margin: 0; color: #111; font-size: 20px; letter-spacing: -.02em; } .help-search-panel p { margin: 5px 0 0; color: #747873; font-size: 13px; line-height: 1.45; } .help-search-panel label { height: 46px; padding: 0 10px 0 14px; display: flex; align-items: center; gap: 10px; border: 1px solid #e3ded6; border-radius: 13px; background: #fff; transition: border-color .18s,box-shadow .18s; } .help-search-panel label:focus-within { border-color: #f2a4ac; box-shadow: 0 0 0 4px rgba(255,49,72,.08); } .help-search-panel label > svg { width: 17px; height: 17px; flex: 0 0 auto; color: #8d908a; } .help-search-panel input { min-width: 0; flex: 1; border: 0; outline: 0; color: #171817; background: transparent; font: inherit; font-size: 13px; } .help-search-panel kbd { padding: 3px 7px; color: #8e918b; border: 1px solid #e3ded6; border-radius: 6px; background: #faf9f6; font: 600 10px/1.2 inherit; white-space: nowrap; } .help-section { margin-top: 28px; } .help-section-heading { margin-bottom: 13px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } .help-section-heading > div > span { display: block; margin-bottom: 5px; color: #989b95; font-size: 10px; font-weight: 800; letter-spacing: .13em; } .help-section-heading h2 { margin: 0; color: #111; font-size: 20px; letter-spacing: -.02em; } .help-section-heading > p { max-width: 460px; margin: 0; color: #81847e; font-size: 12px; line-height: 1.5; text-align: right; } .help-tutorial-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; } .help-tutorial-card { min-height: 186px; padding: 14px; display: grid; grid-template-columns: minmax(190px,220px) minmax(0,1fr); gap: 17px; transition: transform .18s,border-color .18s,box-shadow .18s; } .help-tutorial-card:hover { transform: translateY(-2px); border-color: #f1c7c3; box-shadow: 0 16px 34px rgba(33,25,23,.08); } .help-tutorial-card[hidden] { display: none !important; } .help-tutorial-card.completed { border-color: #cfe5d8; } .help-tutorial-art { min-height: 156px; padding: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; overflow: hidden; color: #d92c3f; border-radius: 14px; background: linear-gradient(145deg,#fff0f2,#fff8f5); } .help-tutorial-art > span { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(216,44,63,.14); border-radius: 17px; background: rgba(255,255,255,.78); } .help-tutorial-art > span svg { width: 25px; height: 25px; } .help-tutorial-art.agents { color: #6b50d8; background: linear-gradient(145deg,#f1eeff,#f8f6ff); } .help-tutorial-art.publish { color: #2572d5; background: linear-gradient(145deg,#eaf3ff,#f5f9ff); } .help-tutorial-art.rewards { color: #168653; background: linear-gradient(145deg,#eaf8f1,#f5fbf8); } .help-tutorial-art.screenshot { min-height: 156px; position: relative; padding: 0; display: block; border: 1px solid #e8e3dc; background: #f2f0ec; } .help-tutorial-art.screenshot > img { width: 100%; height: 100%; min-height: 156px; display: block; object-fit: cover; object-position: top center; transition: transform .25s ease; } .help-tutorial-card:hover .help-tutorial-art.screenshot > img { transform: scale(1.025); } .help-tutorial-art.screenshot > .help-shot-label { width: auto; height: 24px; position: absolute; left: 9px; bottom: 9px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; background: rgba(13,16,14,.74); box-shadow: 0 3px 12px rgba(0,0,0,.16); backdrop-filter: blur(8px); font-size: 8px; font-weight: 800; letter-spacing: .08em; } .help-tutorial-art.screenshot > .help-shot-label svg { width: 12px; height: 12px; } .help-mini-flow { width: 100%; display: flex; align-items: center; } .help-mini-flow i { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 22px; color: #a5a8a2; border: 1px solid #e1ddd6; border-radius: 50%; background: #fff; font-size: 9px; font-style: normal; font-weight: 800; } .help-mini-flow i.active { color: #fff; border-color: #e63145; background: #e63145; } .help-mini-flow b { height: 1px; flex: 1; background: #e1ddd6; } .help-tutorial-copy { min-width: 0; display: flex; flex-direction: column; padding: 5px 3px 2px 0; } .help-tutorial-label { color: #d92c3f; font-size: 10px; font-weight: 800; letter-spacing: .09em; } .help-tutorial-card.completed .help-tutorial-label { color: #168653; } .help-tutorial-copy h3 { margin: 8px 0 0; color: #111; font-size: 17px; letter-spacing: -.02em; } .help-tutorial-copy p { margin: 8px 0 14px; color: #737771; font-size: 12.5px; line-height: 1.55; } .help-tutorial-copy footer { margin-top: auto; padding-top: 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #eeeae4; } .help-tutorial-copy footer > span { display: inline-flex; align-items: center; gap: 6px; color: #8b8e88; font-size: 11px; font-weight: 650; } .help-tutorial-copy footer > span svg { width: 14px; height: 14px; } .help-tutorial-copy footer button { padding: 0; display: inline-flex; align-items: center; gap: 5px; color: #d92c3f; border: 0; background: transparent; font: 750 12px/1 inherit; cursor: pointer; } .help-tutorial-copy footer button svg { width: 14px; height: 14px; transition: transform .18s; } .help-tutorial-copy footer button:hover svg { transform: translateX(2px); } .help-faq-section { padding-bottom: 12px; } .help-faq-shell { padding: 15px 20px 4px; border-radius: 20px; } .help-faq-filters { padding: 0 0 14px; display: flex; align-items: center; gap: 7px; overflow-x: auto; border-bottom: 1px solid #ece8e1; scrollbar-width: none; } .help-faq-filters::-webkit-scrollbar { display: none; } .help-faq-filters button { height: 34px; padding: 0 13px; flex: 0 0 auto; color: #70746e; border: 1px solid transparent; border-radius: 18px; background: #f5f3ef; font: 700 11.5px/1 inherit; cursor: pointer; } .help-faq-filters button:hover { color: #222; } .help-faq-filters button.active { color: #fff; border-color: #181918; background: #181918; } .help-faq-list { display: grid; } .help-faq-item { border-bottom: 1px solid #ece8e1; } .help-faq-item:last-child { border-bottom: 0; } .help-faq-item[hidden] { display: none !important; } .help-faq-item > button { width: 100%; min-height: 62px; padding: 11px 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #171817; border: 0; background: transparent; text-align: left; cursor: pointer; } .help-faq-item > button > span { min-width: 0; display: flex; align-items: center; gap: 12px; } .help-faq-item > button > span > svg { width: 18px; height: 18px; flex: 0 0 18px; color: #d92c3f; } .help-faq-item > button b { font-size: 13.5px; font-weight: 750; } .help-faq-item > button > svg { width: 17px; height: 17px; flex: 0 0 17px; color: #969992; transition: transform .18s; } .help-faq-item.open > button > svg { transform: rotate(180deg); color: #d92c3f; } .help-faq-item > div { padding: 0 36px 17px 34px; } .help-faq-item > div[hidden] { display: none !important; } .help-faq-item > div p { max-width: 920px; margin: 0; color: #6f736d; font-size: 12.5px; line-height: 1.65; } .help-faq-item > div button { margin-top: 10px; padding: 0; display: inline-flex; align-items: center; gap: 6px; color: #d92c3f; border: 0; background: transparent; font: 750 11.5px/1 inherit; cursor: pointer; } .help-faq-item > div button svg { width: 14px; height: 14px; } .help-no-results { min-height: 130px; padding: 24px; place-items: center; align-content: center; gap: 6px; color: #8c9089; text-align: center; } .help-no-results:not([hidden]) { display: grid; } .help-no-results[hidden] { display: none !important; } .help-no-results > svg { width: 23px; height: 23px; color: #d92c3f; } .help-no-results strong { color: #2c2e2b; font-size: 13px; } .help-no-results span { font-size: 11.5px; } .help-no-results button { margin-top: 6px; color: #d92c3f; border: 0; background: transparent; font: 750 11.5px/1 inherit; cursor: pointer; } .help-faq-shell > .help-no-results { min-height: 190px; } .prototype-layer.help-guide-open { padding: 8px; background: rgba(8,12,10,.52); backdrop-filter: blur(5px); } .prototype-layer.help-guide-open .prototype-dialog { width: min(1100px,calc(100vw - 16px)); max-height: calc(100vh - 16px); border-color: rgba(238,234,226,.9); border-radius: 18px; background: #fff; } .prototype-layer.help-guide-open .prototype-dialog > header { display: none; } .prototype-layer.help-guide-open .prototype-dialog-body { max-height: calc(100vh - 16px); padding: 0; overflow: auto; } .help-guide-dialog { display: grid; gap: 0; background: #fff; } .help-guide-stage { width: 100%; aspect-ratio: 1.925 / 1; overflow: hidden; background: #d2d2cf; } .help-guide-stage img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; } .help-guide-footer { min-height: 132px; padding: 20px 24px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: start; gap: 16px; border-top: 1px solid #ece8e1; background: #fff; } .help-guide-step-no { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #eb432f; font-size: 13px; font-weight: 800; } .help-guide-copy { min-width: 0; } .help-guide-copy small { display: block; color: #eb432f; font-size: 10px; font-weight: 850; letter-spacing: .12em; } .help-guide-copy h3 { margin: 8px 0 0; color: #171817; font-size: 19px; line-height: 1.2; letter-spacing: -.02em; } .help-guide-copy p { max-width: 780px; margin: 8px 0 0; color: #676b66; font-size: 12.5px; line-height: 1.55; } .help-guide-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; } .help-guide-actions .btn { min-height: 38px; margin: 0; } .help-guide-actions .btn.secondary { width: 38px; min-width: 38px; padding: 0; } .help-guide-actions .btn.primary { min-width: 112px; } .help-guide-actions .btn:disabled { opacity: .36; pointer-events: none; } .help-guide-actions .btn svg { width: 15px; height: 15px; } html[data-theme="dark"] .help-eyebrow, html[data-theme="dark"] .help-tutorial-copy footer button, html[data-theme="dark"] .help-faq-item > div button, html[data-theme="dark"] .help-no-results button { color: #ff7b88; } html[data-theme="dark"] .help-search-panel { border-color: #2d3931; background: linear-gradient(115deg,#171d18,#1b211c); } html[data-theme="dark"] .help-search-panel h2, html[data-theme="dark"] .help-section-heading h2, html[data-theme="dark"] .help-tutorial-copy h3, html[data-theme="dark"] .help-faq-item > button, html[data-theme="dark"] .help-no-results strong, html[data-theme="dark"] .help-guide-copy h3 { color: #f7f6f2; } html[data-theme="dark"] .help-search-panel p, html[data-theme="dark"] .help-section-heading > p, html[data-theme="dark"] .help-tutorial-copy p, html[data-theme="dark"] .help-faq-item > div p, html[data-theme="dark"] .help-guide-copy p { color: #adb6af; } html[data-theme="dark"] .help-search-panel label, html[data-theme="dark"] .help-search-panel kbd { color: #c9cec9; border-color: #344038; background: #111711; } html[data-theme="dark"] .help-search-panel input { color: #f7f6f2; } html[data-theme="dark"] .help-search-icon { color: #ff7180; background: rgba(255,49,72,.14); } html[data-theme="dark"] .help-tutorial-card { border-color: #2d3931; background: #171d18; } html[data-theme="dark"] .help-tutorial-card:hover { border-color: #57343a; } html[data-theme="dark"] .help-tutorial-art { background: #251b1d; } html[data-theme="dark"] .help-tutorial-art.agents { background: #211e2b; } html[data-theme="dark"] .help-tutorial-art.publish { background: #182431; } html[data-theme="dark"] .help-tutorial-art.rewards { background: #172820; } html[data-theme="dark"] .help-tutorial-art > span { border-color: #364039; background: #131915; } html[data-theme="dark"] .help-tutorial-art.screenshot { border-color: #364039; background: #111711; } html[data-theme="dark"] .help-tutorial-art.screenshot > .help-shot-label { color: #fff; border-color: rgba(255,255,255,.16); background: rgba(7,10,8,.78); } html[data-theme="dark"] .help-tutorial-copy footer, html[data-theme="dark"] .help-faq-filters, html[data-theme="dark"] .help-faq-item { border-color: #303a33; } html[data-theme="dark"] .help-faq-shell { border-color: #2d3931; background: #171d18; } html[data-theme="dark"] .help-faq-filters button { color: #b5bbb6; background: #252c27; } html[data-theme="dark"] .help-faq-filters button.active { color: #151815; background: #f5f3ed; } html[data-theme="dark"] .prototype-layer.help-guide-open .prototype-dialog, html[data-theme="dark"] .help-guide-dialog, html[data-theme="dark"] .help-guide-footer { border-color: #303a33; background: #171d18; } /* ---- 响应式(mock @media 原样) ---- */ @media (max-width: 1080px) { .help-search-panel { grid-template-columns: 50px 1fr; } .help-search-panel label { grid-column: 1 / -1; } .help-tutorial-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .help-center-heading { align-items: flex-start; } .help-center-heading .btn { width: 100%; } .help-search-panel { padding: 18px; grid-template-columns: 42px 1fr; gap: 12px; } .help-search-icon { width: 42px; height: 42px; border-radius: 13px; } .help-search-panel h2 { font-size: 17px; } .help-search-panel kbd { display: none; } .help-section-heading { align-items: flex-start; flex-direction: column; gap: 6px; } .help-section-heading > p { text-align: left; } .help-tutorial-card { grid-template-columns: 160px minmax(0,1fr); gap: 13px; } .help-tutorial-art { min-height: 148px; } .help-tutorial-copy footer { align-items: flex-start; flex-direction: column; } .help-faq-shell { padding: 12px 15px 3px; } .help-faq-item > div { padding-left: 30px; padding-right: 22px; } .help-guide-footer { padding: 17px 18px; grid-template-columns: 34px minmax(0,1fr); gap: 13px; } .help-guide-actions { grid-column: 2; justify-content: flex-start; } } @media (max-width: 480px) { .help-tutorial-card { grid-template-columns: 1fr; } .help-tutorial-art { min-height: 104px; } .help-faq-item > button b { font-size: 12.5px; } .help-guide-footer { padding: 15px; grid-template-columns: 30px minmax(0,1fr); gap: 11px; } .help-guide-step-no { width: 30px; height: 30px; } .help-guide-copy h3 { font-size: 16px; } .help-guide-copy p { font-size: 11.5px; } .help-guide-actions .btn.primary { min-width: 102px; } } /* ===== console/styles/shell-extras.css ===== */ /* 壳层自有小件（不在产品 Demo 设计系统内的补充：快捷设置浮层/图标缺失占位）。 只用 tokens.css 变量表达，不引入新颜色；加载顺序在 views.css 之后。 */ .settings-pop { position: absolute; top: 58px; right: 20px; z-index: 60; min-width: 240px; padding: 14px 16px 12px; background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg, var(--shadow)); display: grid; gap: 10px; } .settings-pop .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--ink); } .settings-pop .settings-row > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); } .settings-pop select { height: var(--control-height-sm, 30px); padding: 0 8px; border: 1px solid var(--line); border-radius: var(--control-radius, 10px); background: transparent; color: var(--ink); font: inherit; font-size: 13px; } .settings-pop .settings-close { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; } .settings-pop .settings-close:hover { color: var(--ink); background: var(--line); } .icon-missing { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--line); } /* 模板封面缺图兜底(真数据里存在无封面模板;Demo 全有图无此态) */ .template-cover-fallback { width: 100%; height: 100%; min-height: 150px; display: flex; align-items: center; justify-content: center; color: var(--faint); background: linear-gradient(135deg, var(--line) 0%, transparent 60%); } /* Configure 面板补充小件(设计系统未含的两个工具类) */ .checkbox-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .checkbox-row input[type="checkbox"] { accent-color: var(--green); } .text-muted { color: var(--muted); } /* ============ 移动端导航抽屉 ============ Demo 的 920px 断点把 .sidebar 整个 display:none（views.css），移动端将没有任何导航入口。 此处补：桌面隐藏汉堡；窄屏汉堡唤出抽屉式侧边栏 + 遮罩，点击任一导航项或遮罩即收起。 */ /* 0-2-0:必须压过 shell.css 按钮体系 :is(...) 因含 .theme-segment button 抬出的 0-1-1 display:inline-flex(#152 桌面端 × 与汉堡常显的根因) */ .top-left .nav-toggle, .brand .nav-close-btn { display: none; } .nav-scrim { display: none; } @media (max-width: 920px) { .top-left .nav-toggle { display: inline-flex; } .app.nav-open .sidebar { display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: min(272px, 82vw); height: 100vh; z-index: 95; box-shadow: 0 24px 70px rgba(8, 12, 10, .4); } .app.nav-open .nav-close-btn { display: inline-flex; margin-left: auto; color: inherit; } .app.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 94; background: rgba(8, 12, 10, .42); backdrop-filter: blur(2px); } } /* 通知未读小红点 */ .notify-btn { position: relative; } .notify-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--panel, #fff); } /* 命令面板结果项:布局用 shell.css 的 Demo 三列 grid 底稿(图标/文字/kbd),此处只补键盘选中态 (#153 教训:此前一条 flex+space-between 覆盖把文字块推到右端造成整列错位) */ .workspace-command-results button.active { background: var(--line); } /* ============ 登录页真实接线薄层(视觉=views.css 移植的产品 Demo auth 段) ============ Demo 是原型(假 Google/假验证码),此层只补真实登录所需:GSI 官方按钮透明覆盖在 Demo 样式按钮上(官方按钮不可换肤,覆盖=点击走真 OAuth、视觉走设计稿)、重发倒计时态。 */ .auth-google-wrap { position: relative; } .auth-google-wrap .auth-google { width: 100%; } .auth-google-real { position: absolute; inset: 0; opacity: .001; overflow: hidden; display: flex; justify-content: center; } .auth-resend:disabled { opacity: .5; cursor: default; } .link-btn { border: none; background: none; padding: 0; color: var(--green); font: inherit; cursor: pointer; } .auth-legal-scroll { max-height: 46vh; overflow-y: auto; margin: 10px 0 4px; padding-right: 8px; scrollbar-width: thin; } .auth-legal-scroll h3 { margin: 14px 0 4px; font-size: 13px; } .auth-legal-scroll p { margin: 4px 0; font-size: 12.5px; line-height: 1.65; color: var(--text, #434754); } /* 分发面板（作品卡 → Distribute） */ .dist-modal { position: fixed; z-index: 201; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px)); max-height: min(84vh, 760px); overflow: auto; padding: 18px 20px 20px; } .dist-modal .panel-top { align-items: center; } .dist-modal .auth-wallets .btn.active { border-color: var(--green); color: var(--green); } .dist-modal input[readonly] { background: transparent; } /* ============ 账号中心（设置页：左侧分区导航 + 右侧内容） ============ */ .settings-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--gap, 16px); align-items: start; } .settings-nav { display: grid; gap: 2px; align-content: start; } .settings-nav-item { display: block; width: 100%; padding: 9px 12px; border: none; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; } .settings-nav-item:hover { color: var(--ink); background: var(--line); } .settings-nav-item.active { color: var(--ink); background: var(--line); font-weight: 600; } .settings-identity { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 6px; font-size: 12.5px; } .settings-content { padding: 6px 18px 18px; } .settings-pane { display: grid; } .settings-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); } .settings-item:last-child { border-bottom: none; } .settings-item > div:first-child { display: grid; gap: 3px; min-width: 0; } .settings-item strong { font-size: 13.5px; } .settings-item small { font-size: 12px; } .settings-item .device-ua { max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .7; } .settings-item-action { flex: 0 0 auto; } .settings-sub { display: grid; gap: 8px; padding: 0 0 14px; border-bottom: 1px solid var(--line); } .inline-field { display: flex; gap: 8px; align-items: center; } .inline-field input { min-width: 0; flex: 1; } .totp-secret { display: block; padding: 8px 10px; border-radius: 8px; background: var(--line); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; word-break: break-all; } .faq-item { padding: 12px 0; border-bottom: 1px solid var(--line); } .faq-item summary { cursor: pointer; font-size: 13.5px; font-weight: 600; } .faq-item p { margin-top: 8px; font-size: 13px; line-height: 1.65; color: var(--muted); } .danger-box { padding: 16px; border: 1px solid color-mix(in srgb, var(--orange) 40%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--orange) 6%, transparent); display: grid; gap: 6px; } .danger-btn { background: var(--orange); color: #fff; border: none; justify-self: start; } .legal-body { font-size: 13.5px; line-height: 1.85; color: var(--muted); } /* 侧边栏「最近会话」列表 */ .recent-list { display: grid; gap: 1px; } .recent-item { display: flex; align-items: center; gap: 2px; border-radius: 8px; } .recent-item:hover { background: rgba(255, 255, 255, .06); } .recent-open { flex: 1; min-width: 0; padding: 6px 8px; border: none; background: none; color: inherit; font: inherit; font-size: 12.5px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .78; cursor: pointer; } .recent-open:hover { opacity: 1; } .recent-act { flex: 0 0 auto; width: 20px; height: 20px; border: none; border-radius: 5px; background: none; color: inherit; opacity: 0; cursor: pointer; font-size: 12px; } .recent-item:hover .recent-act { opacity: .6; } .recent-act:hover { opacity: 1; background: rgba(255, 255, 255, .1); } .recent-item input { width: 100%; height: 28px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; background: rgba(0, 0, 0, .2); color: inherit; font: inherit; font-size: 12.5px; } /* 设置页断点与应用壳对齐(壳在 920 塌陷;原 780 会让 781–920 区间双栏挤压、行内条目左右分排) 注:generating-card 的窄屏兜底 views.css:5049 已有无条件 min() 规则,无需重复覆盖 */ @media (max-width: 920px) { .settings-layout { grid-template-columns: 1fr; } .settings-nav { grid-auto-flow: column; overflow-x: auto; gap: 6px; } .settings-nav-item { white-space: nowrap; } .settings-item { flex-direction: column; align-items: flex-start; gap: 8px; } } /* 【拆分事故找回】.deck-arrow 基础规则在设计系统分桶时丢失(views.css 只剩 :hover 与 .left/.right), 导致箭头无定位被主卡(z-index:3)盖住——不可见也不可点。以下为 shared-css.txt 原规则逐字找回+cursor: */ .deck-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; background: #fff; color: #737987; box-shadow: var(--shadow); z-index: 5; cursor: pointer; } /* prev/next 卡可点切换:给出手型与轻微提亮反馈(设计系统内变量) */ .template-card.prev, .template-card.next { cursor: pointer; } .template-card.prev:hover, .template-card.next:hover { opacity: .92; } /* 牌堆卡内容区避开底部 absolute footer(37px):描述贴着 Recommended 条的间距修复 */ /* (主卡两行描述已退役=副行统一一行短分类,原 47px 底垫与 clamp 一并撤除) */ .create-page .template-card p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 牌堆回绕帧:瞬移落位不播过渡(见 view-create.jsx DeckCard 注释) */ .template-card.snap { transition: none !important; } /* ============ 控制台自有表单容器的输入基线 ============ 设计系统的 .field input 基线是 Demo 紧凑面板上下文(8px 字号),不适用于 settings/弹窗/登录这些常规密度表面;而 .inline-field 等自有容器此前完全未样式化(浏览器默认)。 configure 右栏(Demo 紧凑面板)不在此列,维持原设计。 */ .settings-content input:not([type="checkbox"]):not([type="file"]):not([type="range"]), .settings-content select, .settings-content textarea, .dist-modal input:not([type="checkbox"]), .dist-modal select, .settings-pop input:not([type="checkbox"]), .settings-pop .field input, .insight-list input, [data-route="review"] .field input { height: var(--control-height-sm, 38px); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--control-radius, 10px); background: var(--panel, #fff); color: var(--ink); font: inherit; font-size: 13.5px; outline: none; transition: border-color .15s, box-shadow .15s; } .settings-content textarea { height: auto; padding: 10px 12px; line-height: 1.6; } .settings-content input:focus-visible, .settings-content select:focus-visible, .settings-content textarea:focus-visible, .dist-modal input:focus-visible, .dist-modal select:focus-visible, .settings-pop input:focus-visible, .insight-list input:focus-visible, [data-route="review"] .field input:focus-visible { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent); } /* 行内"输入+保存"组合:输入占满、按钮不换行 */ .inline-field { width: min(360px, 100%); } .inline-field .filter-chip { white-space: nowrap; } /* 品牌区:真 logo 替换渐变占位方块(保留容器形状,盖掉伪元素图形) */ .brand-mark { background: transparent; overflow: hidden; } .brand-mark::before, .brand-mark::after { display: none; } .brand-mark img { width: 100%; height: 100%; display: block; border-radius: inherit; } /* (旧自研 Recent 样式已随 Demo recent-sessions 形态退役) */ /* ============ Configure 工作台对齐 Demo page-review(2026-08-03) ============ */ /* -- 预览机身:views.css 的 Demo 保真层用 clamp(320px,46vh,470px)+!important 把机身 推到近满屏(用户实证"游戏非常大"),此处以更高特异性交还给 JSX 的机型/缩放双控—— 具体尺寸由 phone-wrap 行内 CSS 变量下发,规则只消费变量 -- */ .configure-workspace .phone-stage { padding: 14px 8px 20px !important; } .configure-workspace .phone-wrap { width: auto !important; max-width: none !important; aspect-ratio: auto !important; height: var(--pv-wrap-h, auto) !important; margin: 2px auto 10px; } .configure-workspace .phone-wrap .phone { width: var(--pv-w, 350px) !important; height: var(--pv-h, 700px) !important; transform: scale(var(--pv-zoom, .68)); transform-origin: top center; } /* -- 工具条 pill:内嵌原生 select 去 chrome,继承 preview-controlbar .tool 底座 -- */ .pv-pill { gap: 7px; } .pv-pill select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding: 0; outline: none; cursor: pointer; } /* -- 底部状态条:Demo 的 8.5px 真机不可读,提级;右侧真实缩放控制(驱动 --pv-zoom) -- */ .configure-workspace .preview-status { min-height: 44px !important; height: 44px !important; } /* T05(font-audit):容器回 Demo 8.5px 底稿,可见子项按 Demo 1904-1907 原规则 11px */ .preview-status .status-live, .preview-status .pv-zoom em { font-size: 11px !important; } .configure-workspace .status-live { font-weight: 650; } .pv-zoom { display: inline-flex; align-items: center; gap: 8px; } .pv-zoom .tool { height: 26px; min-width: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; } .pv-zoom input[type="range"] { width: 96px; accent-color: var(--violet); } .pv-zoom em { min-width: 34px; text-align: right; font-style: normal; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; } /* -- 活动标题行 Draft 徽标(Demo campaign-title-row .status-pill 同型;草稿态用琥珀) -- */ .draft-chip { height: 21px; padding: 0 8px; margin-left: 8px; display: inline-flex; align-items: center; gap: 5px; vertical-align: 3px; border-radius: 7px; color: var(--amber, #b7791f); background: var(--amber-soft, #fdf3e2); font-size: 11px; /* Demo campaign-title-row .status-pill(shared-css:1818) */ font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .draft-chip i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* -- Copilot 组合器(Demo review-style-composer 形态,#157 字号/#158 结构对齐): 外层贴底通栏 + 内衬圆角 shell 卡;textarea 两行 + 工具行(+/图片/引擎标签/渐变发送)。 .chat-composer button 基线(0,1,1)较高,故全部用后代选择器压制 -- */ .chat-composer.review-style-composer { flex: 0 0 auto; display: block; margin: 0; padding: 10px 12px 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: #fff; } .configure-composer-shell { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; transition: border-color .18s, box-shadow .18s; } .configure-composer-shell:focus-within { border-color: #ff9aa6; box-shadow: 0 0 0 3px rgba(255, 49, 72, .08); } .review-style-composer textarea { width: 100%; min-height: 52px; max-height: 120px; padding: 12px 12px 4px; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: 14px; /* #157:对齐 Demo 参考字号(原 12.5px 偏小) */ line-height: 1.4; } .review-style-composer textarea::placeholder { color: #a3a7b3; } .review-style-composer textarea:disabled { opacity: .55; } .configure-composer-tools { display: flex; align-items: center; gap: 4px; padding: 0 8px 8px 8px; } .configure-composer-tools > span { margin-left: 4px; color: #969aa6; font-size: 11px; font-weight: 650; letter-spacing: .02em; } .review-style-composer .configure-composer-tool { width: 32px; min-width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; color: #828795; /* !important:对抗 views.css:727 `.chat-composer button` 的紫渐变 !important */ background: transparent !important; } .review-style-composer .configure-composer-tool:hover:not(:disabled) { color: var(--ink); background: #f3f3f6 !important; } .review-style-composer .configure-send { width: 36px; min-width: 36px; height: 36px; margin-left: auto; padding: 0; display: grid; place-items: center; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(145deg, var(--red), var(--orange)) !important; box-shadow: 0 6px 14px rgba(255, 49, 72, .22); cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s; } .review-style-composer .configure-send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(255, 49, 72, .3); } .review-style-composer .configure-send:disabled { opacity: .45; cursor: default; box-shadow: none; } html[data-theme="dark"] .configure-composer-shell { background: #101713; border-color: var(--line); } html[data-theme="dark"] .review-style-composer .configure-composer-tool:hover:not(:disabled) { background: #1a231e !important; } /* -- 右栏 · Demo 式手风琴卡(page-review 的卡样式是该页自包含内联,未随设计系统移植, 此处按 Demo 视觉重建;数据行/开关全部接真实 cast/editableFields) -- */ .xp-col { display: flex; flex-direction: column; min-height: 0; } .xp-stack { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; } /* -- 智能体行:图标芯片 + 名称/维度副标 + 红开关;可展开细控(出场形态/互动面板) -- */ .xp-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--soft, #fafaf8); } .xp-row.static { grid-template-columns: 1fr; background: transparent; } .xp-row-main { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; } .xp-row-main:disabled { cursor: default; } .xp-row.static { display: flex; align-items: flex-start; gap: 9px; padding: 7px 4px; border: 0; } .xp-row-ic { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; color: var(--violet); background: #fff; border: 1px solid var(--line); } .xp-row.static .xp-row-ic { border: 0; background: var(--violet-soft); } .xp-row-copy { min-width: 0; display: grid; line-height: 1.3; } .xp-row-copy strong { font-size: 12px; font-weight: 650; color: var(--ink); } .xp-row-copy small { font-size: 10.5px; color: var(--muted, #8b8f9a); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .xp-row-detail { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--line); } /* -- 开关(Demo 红 toggle;checked 用 --violet=品牌红,主题切换自动跟随) -- */ .switch { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; } .switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .switch i { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #d8d8de; transition: background .18s; pointer-events: none; } .switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; } .switch input:checked + i { background: var(--violet); } .switch input:checked + i::after { transform: translateX(14px); } .switch input:focus-visible + i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 22%, transparent); } /* -- Game settings 卡内分组 + 表单可读密度(旧 8px 紧凑基线随 tabs UI 一并退役) -- */ .xp-group { display: grid; gap: 8px; } .config-module-body .field input, .config-module-body .field select { height: 34px; border-radius: 9px; } .config-module-body input[type="range"] { accent-color: var(--violet); } /* -- 视口锁定:Demo 的 .page flex 链(.main 100vh → .page flex:1 → workspace flex:1) 在壳的滚动容器 .dashboard-main 里断掉,导致三列被内容撑开、组合器/状态条沉到折叠线下。 configure 路由重新绑定视口高,三列改为各自内滚;≤920px 断点是纵向堆叠布局,不锁 -- */ @media (min-width: 921px) { /* #155 回归:configure/review 是同一 studio 骨架的两步,视口锁定必须两路由同规, 否则切步瞬间 .page padding 与外层留白跳变(顶部高度不一致) */ .dashboard-view.active[data-route="configure"], .dashboard-view.active[data-route="review"] { height: 100%; min-height: 560px; display: flex; flex-direction: column; } .dashboard-view[data-route="configure"] .page, .dashboard-view[data-route="review"] .page { flex: 1; min-height: 0; padding: 0 0 2px; } /* 视口锁定后外层留白过厚(28/30/44 是常规滚动页口径),收紧;:has 不支持时仅多些留白,无害 */ .dashboard-main:has(.dashboard-view.active[data-route="configure"]), .dashboard-main:has(.dashboard-view.active[data-route="review"]) { padding: 18px 24px 20px; } } /* -- 右栏底部动线(Demo inspector footer 形态:Back 定宽 + Review & launch 撑满) -- */ .xp-footer { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: #fff; } .xp-footer .btn.secondary { flex: 0 0 auto; } .xp-footer .btn.primary { flex: 1; justify-content: center; } /* -- 活动元信息行:9px 真机不可读,提到辅助字级 -- */ .campaign-bar .campaign-meta { font-size: 11px; } /* ============ Rewards Wallet 对齐 Demo wallet-v2(2026-08-03) ============ 结构类(overview/records/earn/brand-task)全部来自移植的设计系统;此处只补 Demo 里没有的真实动线部件:品牌任务 UID 提交组(用户实证旧版=裸 input 全宽简陋) */ .wallet-uid-form { display: flex; align-items: center; gap: 8px; margin-top: 10px; max-width: 420px; } .wallet-uid-form input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 12.5px; outline: none; transition: border-color .15s, box-shadow .15s; } .wallet-uid-form input:focus-visible { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent); } .wallet-uid-form .btn { flex: 0 0 auto; min-height: 38px; } .brand-bonus { margin-left: 8px; font-style: normal; font-weight: 780; font-size: 12px; color: var(--green); } .brand-msg { margin-top: 8px !important; color: var(--muted, #8b8f9a) !important; font-size: 11px !important; } /* 提现记录三源切换后行高一致;earn 卡头图标着色对齐 Demo */ .wallet-earn-card > header > svg { color: #d82e41; } /* -- 登录页小屏溢出修正:Demo 原型在 ≤420px 时 h1 单行(br 分行)把 grid 撑过视口, 原版实测同样右缘裁切(原型自带瑕疵,非移植失真);此处保真之上修正 -- */ .auth-shell > * { min-width: 0; } /* -- 登录页钱包组(用户点名保留的通路;2026-08-06 产品新稿含此块,按稿对齐尺寸与色片) -- */ .auth-wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .auth-wallet-btn { min-height: 52px; padding: 0 18px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid #ddd; border-radius: 10px; background: #fff; color: #222; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s ease; } .auth-wallet-btn:hover:not(:disabled) { background: #f7f7f7; } .auth-wallet-btn:disabled { opacity: .55; cursor: default; } .auth-wallet-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; } .auth-wallet-dot.is-round { border-radius: 50%; } /* -- 侧栏 Recent 的展开全部(32 条会话不再只露 6 条) -- */ .recent-more { width: 100%; margin-top: 4px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted, #8b8f9a); font-size: 11.5px; font-weight: 650; text-align: left; cursor: pointer; } .recent-more:hover { color: var(--ink); background: var(--soft, #f5f4f1); } /* -- KOL 三步流补丁:被驳回提示(Demo 无 rejected 变体)与表单错误行 -- */ .kol-intro.rejected { border-color: #f3cdc9; background: #fdf1ef; } .kol-intro.rejected svg { color: #d5382c; } .kol-field-error { margin: 2px 0 0; color: #d5382c; font-size: 12px; } .kol-field input.invalid { border-color: #e2a39c; } /* kol-actions 里占位 span(仅主按钮时保持右对齐) */ .kol-actions > span:first-child { flex: 1; } /* ============ Review studio 底稿(page-review.pretty.html:247-330 内联 style 移植) ============ 背景:仓库此前只移植了 `.studio .check-*|.inspector-*|.detail-*|.warning-note` 的**覆盖层** (views.css:1513-1551,4804-4847 / components.css:450-468),底稿从未移植,故这些选择器一直零使用。 本文件补齐底稿,选择器保持 Demo 原名,尺寸沿用 Demo 原值——放大到真机字级由既有覆盖层负责 (`.studio .check-copy strong{14px}` 等),两层叠加后才是最终形态,勿在本文件重复放大。 容器约定:Review 页容器 class = "configure-workspace studio"。 · `.configure-workspace` 出三栏 grid / 边框 / ≤920px 纵向堆叠 / 暗色底 —— 与 Configure 同一套,不重复定义 · `.studio` 只用于命中上述覆盖层;`.studio > .resizer{display:none!important}` 已在 views.css, 故本次不渲染 resizer 元素(列间分隔由 `.configure-col + .configure-col` 的 border-left 承担) 合入位置:shell-extras.css 末尾(加载顺序最后,可安全覆盖 views.css 基线)。 */ /* -- 活动标题行右侧:步骤条容器(views.css:875 只定义了 position/margin,缺 display 基线) -- */ .campaign-right { display: flex; align-items: center; gap: 10px; min-width: 0; } /* tokens.css:77 让步骤条 `width:100%`,但 ≤600px 时 .campaign-bar 变 column + align-items:flex-start, .campaign-right 退化成 shrink-to-fit,100% 解析回内容宽 → 步骤条 418px 撑破 390px 视口(实测 812px 横向溢出)。 给容器一个确定的 100% 宽度,百分比才有可解析的包含块。 */ /* ⚠️ views.css:867-868 无条件把活动条钉死成 `min-height:58px!important; flex:0 0 58px!important`。 Configure 页的条里只有标题+元信息,58px 够用;Review 把 workflow-segmented 步骤条收进 .campaign-right 之后,窄屏下子块实测要 152px —— 高度不涨,子块直接压到下面的工作区上 (实测 .campaign-left 到 y=104、.campaign-right 到 y=168,而工作区 y=88 起)。 这里只在窄屏放开高度,桌面端不动;要 !important 才压得住上面那条。 */ @media (max-width: 980px) { .campaign-bar { flex: 0 0 auto !important; height: auto !important; } } @media (max-width: 620px) { .campaign-right { width: 100%; flex-wrap: wrap; margin-left: 0; } /* 另一处叠加坑:≤980 给活动条加了 `flex-wrap:wrap`(按行方向设计),≤600 又把它翻成 `flex-direction:column` —— 列方向 + wrap + 定高,子块换到"第二列"而不是上下堆叠, 整页横向溢出到 744px(实测)。这里把方向/换行/高度一次说清。 */ .campaign-bar { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; min-height: 0 !important; gap: 10px; } /* 三段步骤在 350px 里平分,标签超出走省略号而不是被 `overflow:auto` 裁掉半个字 */ .campaign-right .workflow-segmented .step { min-width: 0; } .campaign-right .workflow-segmented .step > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* -- 检查器双页签 -- */ .inspector-tabs { display: flex; align-items: center; height: 100%; gap: 17px; } .inspector-tab { height: 100%; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #9297a4; font-size: 9px; font-weight: 680; padding: 0 1px; cursor: pointer; } .inspector-tab:hover { color: var(--ink); } .inspector-tab:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 4px; } .inspector-tab.active { color: var(--ink); border-bottom-color: var(--violet); } .inspector-scroll { flex: 1; min-height: 0; overflow: auto; padding: 14px; scrollbar-width: thin; scrollbar-color: #dedfe5 transparent; } /* -- 分区标题(左标题 / 右计数) -- */ .section-title { margin: 17px 2px 8px; display: flex; align-items: center; justify-content: space-between; color: #747a89; font-size: 8px; font-weight: 720; text-transform: uppercase; letter-spacing: .08em; } .section-title:first-child { margin-top: 2px; } .section-title span:last-child { color: #a3a7b2; font-weight: 600; text-transform: none; letter-spacing: 0; } /* -- 可展开检查项 -- */ .check-list { display: grid; gap: 7px; } .check-item { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; transition: border-color .18s, box-shadow .18s; } .check-item:hover { border-color: #d6d2ff; box-shadow: 0 6px 17px rgba(29,31,43,.05); } .check-main { width: 100%; min-height: 52px; border: 0; padding: 9px 10px; display: flex; align-items: center; gap: 9px; background: transparent; text-align: left; cursor: pointer; } .check-main:disabled { cursor: default; } .check-main:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; } .check-state { width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%; display: grid; place-items: center; font-size: 8px; } .check-item.complete .check-state { color: #fff; background: var(--violet); box-shadow: 0 5px 12px rgba(102,87,242,.18); } .check-item.warning .check-state { color: var(--amber, #a96515); background: var(--amber-soft, #fff5df); } .check-item.pending .check-state { color: #888e9c; background: #eff0f3; } .check-copy { min-width: 0; flex: 1; } .check-copy strong { display: block; color: var(--ink); font-size: 9px; } .check-copy span { display: block; margin-top: 3px; color: #8b909d; font-size: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .check-chevron { display: inline-flex; color: #a0a4af; font-size: 9px; transition: transform .18s; } .check-item.open .check-chevron { transform: rotate(180deg); } .check-detail { display: none; padding: 0 10px 10px 42px; color: #777d8b; font-size: 7px; line-height: 1.5; } .check-item.open .check-detail { display: block; } .inline-action { margin-top: 7px; height: 24px; border: 1px solid #d8d4ff; border-radius: 7px; padding: 0 8px; color: #6253df; background: #f8f7ff; font-size: 7px; font-weight: 700; cursor: pointer; } .inline-action:hover { border-color: var(--violet); } /* -- 检查项内联表单。⚠️ Demo 的 `.field` 是 input 本身,我们既有 `.field` 是 configure 的字段 **容器 div**(views.css),裸写 `.field` 会把 configure 的字段行压成 36px 输入框外观。 故限定为 `.studio input.field`——只命中本页 input,configure 不在 .studio 作用域内。 -- */ /* #184 回归:字号按产品口径对齐其他输入框(brief 输入 14px 基准),不再沿用 Demo 8px 缩小底稿 */ .field-label { display: block; color: #666c79; font-size: 12px; font-weight: 700; margin-bottom: 6px; } .studio input.field { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; color: var(--ink); background: #fff; font-size: 14px; } .studio input.field:focus { border-color: #bcb5ff; box-shadow: 0 0 0 3px rgba(102,87,242,.07); outline: 0; } /* -- 提示条 -- */ .warning-note { margin-top: 10px; padding: 10px; border: 1px solid #f0dfba; border-radius: 11px; display: flex; gap: 8px; color: #8a641f; background: var(--amber-soft, #fff5df); font-size: 7px; line-height: 1.5; } .warning-note > span:first-child { flex: 0 0 auto; display: inline-flex; align-items: center; } /* -- 信息卡两列(Build info / 费用) -- */ .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .detail-card { border: 1px solid var(--line); border-radius: 10px; padding: 9px; background: #fff; } .detail-card span { display: block; color: #9a9eaa; font-size: 7px; } .detail-card strong { display: block; color: #4f5563; font-size: 8px; margin-top: 4px; line-height: 1.35; } /* -- 检查器底栏(← 返回 / 提交审核 →) -- */ .inspector-footer { min-height: 64px; flex: 0 0 64px; padding: 10px 14px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.96); } .inspector-footer .btn.secondary { flex: 0 0 auto; } .inspector-footer .btn.primary { flex: 1; justify-content: center; } /* -- 预览工具条:Review 页按 Demo 居中排布(Configure 是两端对齐) -- 工具条内容(版本/机型/刷新/分享)在 921-1399px 档里比预览列还宽(列宽 340-400,内容约 450), 居中排布下会**向两侧溢出到相邻面板**——实测 1000px 时 Share preview 压在右栏 Review|Details 页签上。所以换行不能只在窄屏开:这里让它在任何宽度都可换行、高度自适应,64px 作为下限, 放得下时仍是单行 64px,与另外两个面板头齐平(components.css:727 的统一头高设计不变)。 */ .studio .preview-controlbar { justify-content: center; flex-wrap: wrap; gap: 8px; } .studio .preview-panel > .panel-head.preview-controlbar { height: auto !important; flex-basis: auto !important; min-height: 64px !important; padding-block: 9px; /* #155 回归:字号放大批后两工具组总宽可超中栏,换行会把头高撑到两行破坏 Step2/3 全等—— 禁换行,配合下方左组收缩+版本药丸省略(#155-nowrap 组) */ flex-wrap: nowrap; } /* views.css:910 给工具组写死 `height:100%`;高度改回内容高。#155 回归修正:组内也禁换行—— 字号放大批后件宽可超组宽,换行会把头高撑破 Step2/3 全等;超宽由版本药丸收缩省略消化 */ .studio .preview-controlbar .preview-tools { min-width: 0; height: auto; flex-wrap: nowrap; align-items: center; justify-content: center; } .studio .preview-controlbar .pv-pill { min-width: 0; } /* 分享按钮带文案,不能吃 components.css:758 给 icon-only 的 42px 定宽(实测文字溢出按钮外) */ .studio .preview-controlbar .preview-share-btn { width: auto; min-width: 0; gap: 6px; padding: 0 12px; white-space: nowrap; } /* 窄屏:两组工具(版本+机型 / 刷新+分享)横排合计约 450px,放不下 390px 视口需换行, .panel-head 的定高 57px 同步放开,否则第二行被裁 */ /* 换行后两组工具之间的竖分隔线会错位到行首,窄屏直接撤掉 */ @media (max-width: 1180px) { .studio .preview-controlbar .preview-tools + .preview-tools { padding-left: 0; } .studio .preview-controlbar .preview-tools + .preview-tools::before { display: none; } } /* -- 左栏 Copilot:只读标记不折行;回第 2 步的入口文案较长,窄列里允许折行而不是被裁 (components.css:675 把 .btn 钉成 42px 定高,要 !important 才让得开) -- */ .studio .copilot-panel .panel-head .pv-pill { white-space: nowrap; } .studio .copilot-panel .xp-footer .btn { min-width: 0; height: auto !important; min-height: 42px !important; padding-block: 8px; white-space: normal; line-height: 1.3; text-align: center; } /* ============ 遮罩弹层(提交二次确认 / 提交成功) ============ `.dialog h2`(components.css:793)、`.dialog > p`(797)、`.dialog-icon svg`(668)、 `.summary-row`(views.css:5043)的**放大覆盖层**已在仓库,此处只补底稿。 */ .overlay { position: fixed; inset: 0; z-index: 210; padding: 10vh 18px 18px; display: flex; align-items: flex-start; justify-content: center; background: rgba(18,20,29,.34); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .overlay.show { opacity: 1; pointer-events: auto; } .dialog { width: min(430px,100%); border-radius: 19px; padding: 22px; background: #fff; box-shadow: 0 32px 90px rgba(20,22,33,.28); transform: translateY(12px) scale(.98); transition: transform .2s ease; } .overlay.show .dialog { transform: translateY(0) scale(1); } .dialog-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,var(--violet),var(--violet-2,#ff6a35)); box-shadow: 0 10px 24px rgba(255,49,72,.24); font-size: 18px; } .dialog h2 { margin: 16px 0 0; color: var(--ink); letter-spacing: -.025em; } .dialog > p { margin: 7px 0 16px; color: #7c8190; line-height: 1.6; } .submit-summary { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 8px; background: #fafafd; } .summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #777c89; } .summary-row strong { min-width: 0; color: #4f5563; font-weight: 680; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dialog-actions { margin-top: 16px; display: flex; justify-content: flex-end; gap: 7px; } .success-dialog { text-align: center; } .success-dialog .dialog-icon { margin: auto; background: linear-gradient(145deg,#31ba83,#16845e); box-shadow: 0 10px 24px rgba(22,132,94,.24); } .success-dialog .btn.primary { width: 100%; justify-content: center; } @media (prefers-reduced-motion: reduce) { .overlay, .overlay.show .dialog, .check-chevron { transition: none; } } /* ============ 暗色主题 ============ */ /* 两条既有缺口(Configure 页同样存在,这里只按 .studio 收口,不改动 Configure 的渲染): ① views.css:940 的 `.phone-stage{background:…!important}` 压过 8777 行的暗色渐变(那条没带 !important),暗色下预览台仍是浅色;② `.xp-footer{background:#fff}` 无暗色覆盖。 两处都只需一行,建议主会话评估是否去掉 .studio 限定、连 Configure 一起修。 */ html[data-theme="dark"] .studio .phone-stage { background: radial-gradient(circle at 50% 44%,#1a211d 0,#0c120f 68%,#080d0b 100%) !important; } html[data-theme="dark"] .studio .xp-footer { background: var(--surface, #101713); border-color: var(--line); } html[data-theme="dark"] .check-item, html[data-theme="dark"] .detail-card { background: #111915; border-color: var(--line); } html[data-theme="dark"] .check-item:hover { border-color: #35403a; box-shadow: 0 6px 17px rgba(0,0,0,.24); } html[data-theme="dark"] .check-item.pending .check-state { color: #9aa39e; background: #202724; } html[data-theme="dark"] .check-copy span, html[data-theme="dark"] .check-detail, html[data-theme="dark"] .detail-card strong { color: #aab3ae; } html[data-theme="dark"] .detail-card span, html[data-theme="dark"] .section-title { color: #8b948f; } html[data-theme="dark"] .studio input.field { color: var(--ink); background: #0d1511; border-color: var(--line); } html[data-theme="dark"] .inline-action { color: #ff8f9c; border-color: #4a2b30; background: #1c1214; } html[data-theme="dark"] .warning-note { color: #e6cf9f; border-color: #4a3d22; background: #1e1a11; } html[data-theme="dark"] .inspector-footer { background: rgba(16,23,19,.96); border-color: var(--line); } html[data-theme="dark"] .inspector-tab { color: #8b948f; } html[data-theme="dark"] .dialog { background: #161d19; box-shadow: 0 32px 90px rgba(0,0,0,.5); } html[data-theme="dark"] .dialog > p { color: #a7b0ab; } html[data-theme="dark"] .submit-summary { background: #101713; border-color: var(--line); } html[data-theme="dark"] .summary-row { color: #98a19c; } html[data-theme="dark"] .summary-row strong { color: #dfe5e2; } /* -- Codex NOTES §2d 的推广:暗色预览台/底部动线在 Configure 同样中招(同类同定高), 放宽选择器让两页一起修(.studio 版保留,此处覆盖 .configure-workspace 全域) -- */ html[data-theme="dark"] .configure-workspace .phone-stage { background: radial-gradient(ellipse at 50% 42%, rgba(30,36,32,.92) 0, rgba(18,23,20,.94) 48%, rgba(12,16,14,.96) 100%) !important; } html[data-theme="dark"] .configure-workspace .xp-footer, html[data-theme="dark"] .configure-workspace .preview-status { background: var(--surface, #101713) !important; border-color: var(--line) !important; color: var(--muted) !important; } /* -- 模板沙盒(prototype 弹层内):真 iframe 替代 Demo 假分数动画 -- */ /* #205:playable 全部竖屏移动优先,底稿 360px 横向台把游戏挤成窄条且顶部被裁。 台高抬到视口感知高度,iframe 给真 9:16 竖屏视口居中(两侧留台底黑=有意的手机式取景); 宽受限的小屏由 max-width 收窄,游戏内部自适应接管。无 playUrl 空态不受影响(仅 iframe 选择器)。 */ .template-sandbox-stage { height: min(62vh, 560px); } .template-sandbox-stage iframe { height: 100%; aspect-ratio: 9 / 16; width: auto; max-width: 100%; margin-inline: auto; border: 0; display: block; } /* 占位模板的预览是一张 9:16 竖屏截图：整张装进台内（contain）， 盖掉 views.css 里 Demo 遗留的 `.template-sandbox-stage > img`（cover 裁切 + 压暗滤镜） */ .template-sandbox-stage > img.template-sandbox-shot { height: 100%; width: auto; max-width: 100%; aspect-ratio: 9 / 16; object-fit: contain; margin-inline: auto; display: block; filter: none; transform: none; } /* -- 钱包数字页码当前页态 -- */ .wallet-page-controls button.active { border-color: var(--violet); color: var(--violet); background: color-mix(in srgb, var(--violet) 8%, #fff); } /* -- 营销右栏作品行按钮化后的悬停 -- */ .marketing-bottom .agent-row:hover { background: var(--soft, #f6f6f4); border-radius: 10px; } /* -- 模板网格:Demo 的 repeat(2)+max-width:980 是为它仅有的 2 张模板调的, 真数据 60 张会变窄两列长滚动(清单 §2.1);放开为自适应三列 -- */ .dashboard-view[data-route="templates"] .template-grid { max-width: none !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; } /* ============ Settings sheet 底稿补齐（并进 console/styles/shell-extras.css 末尾） ============ views.css:3847-4460 已有 Demo 全套 settings-layer / settings-sheet / settings-row / settings-detail / detail-* 移植版，本文件只补它没有的部分： 1) 我们比 Demo 多出来的形态（行右侧只读值、行内 segment、UA 第二行、勾选行、承载既有面板的白卡）； 2) 既有规则跟 shell.css 按钮系统打架的两处（.settings-back 尺寸、header 固定 84px 高）； 3) 上述新增件的暗色态。 Demo 原样有的一律不重写（.settings-group/.settings-row/.detail-list/.detail-form/.detail-about …）。 */ /* ---- 1. 头部：按钮系统把 .settings-back 的 min-width 顶成 42px，与 views.css 的 36px 打架 ---- */ .settings-back { min-width: 36px; } /* 二级面板副标题（法务文档的生效日期等）会换行，固定 84px 高会裁字 */ .settings-sheet-header { flex: 0 0 auto; } /* ---- 2. 一级列表：Demo 没有的行形态 ---- */ /* 行右侧只读值：实名状态 / 创作者身份 */ .settings-row-value { flex: 0 0 auto; color: #6f7873; font-size: 13px; font-style: normal; font-weight: 700; white-space: nowrap; } /* 语言 / 外观是行内直切，不进二级；.settings-row > span{flex:1} 只命中文案块， 控件用 div.theme-segment 承载，避免被拉伸 */ .settings-row > .theme-segment { flex: 0 0 auto; margin-left: auto; } /* 二级退场的 180ms 里它只是透明，仍会吃掉落在一级列表上的点击 */ .settings-detail:not(.show) { pointer-events: none; } /* ---- 3. 二级面板：块之间的统一节奏 ---- */ .settings-detail-body > * + * { margin-top: 14px; } .settings-scroll { padding-bottom: max(26px, env(safe-area-inset-bottom, 0px)); } /* 二级面板里的说明句（扫码提示、加载中、空态、法务示例注记） */ .detail-hint { margin: 0; color: #7d8581; font-size: 13px; line-height: 1.55; } .detail-hint-center { text-align: center; } /* 承载既有面板与列表的白卡：KYC 状态面板（.settings-item/.settings-sub 结构）、FAQ 折叠列表。 注意别叫 .detail-card —— 那个名字已被 Review 页的「标签 + 数值」小卡占用 （shell-extras.css:1349，里面 `.detail-card strong{font-size:8px}` 会把嵌进来的面板标题压成 8px）。 */ .settings-embed-card { padding: 2px 16px; border: 1px solid var(--line); border-radius: 17px; background: #fff; } .settings-embed-card .settings-item:last-child, .settings-embed-card .settings-sub:last-child, .settings-embed-card .faq-item:last-child { border-bottom: 0; } /* 嵌进来的面板用的是

排版，默认外边距在这张卡里太散 */ .settings-embed-card .settings-sub p { margin: 0; } /* ---- 4. 资料页：头像块右侧的身份信息（Demo 只有头像 + 换头像链接） ---- */ .detail-profile-id { min-width: 0; flex: 1; } .detail-profile-id strong { display: block; color: var(--ink); font-size: 14px; line-height: 1.35; } .detail-profile-id small { display: block; margin-top: 4px; color: #88918d; font-size: 12px; word-break: break-all; } img.account-avatar-large { object-fit: cover; } /* ---- 5. detail-link：颜色语义、作为 用（mailto）、禁用态 ---- 移植稿里 .detail-link 是 #c91d36，与 .danger-text 的 #e54834 几乎同色 —— 一屏里 「修改 / 启用」和「关闭 / 下线」长得一样，危险信号就废了。本类此前全仓零使用 （首个消费方就是本页），所以把常规态改回中性，红只留给 .danger-text。 */ .detail-link { color: #4d5551; } .detail-link:hover { color: var(--ink); background: var(--soft); } a.detail-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .detail-link.danger-text:hover { background: color-mix(in srgb, #e54834 8%, transparent); } .detail-link:disabled { cursor: not-allowed; opacity: .45; } /* ---- 6. 设备行的 UA 第二行：真实 UA 串很长，限两行免撑破卡片 （.detail-list-row small 的 display:block 特异性更高，这里要连着一起写才压得住） ---- */ .detail-list-row small.detail-list-ua { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #9aa29e; word-break: break-all; } /* .detail-list-row em 是绿色状态字（Enabled / 已连接）；纯数值（提现阈值）不该染成状态色 */ .detail-list-row em.detail-list-value { color: #6f7873; } html[data-theme="dark"] .detail-list-row em.detail-list-value { color: var(--text); } /* ---- 7. 表单里的勾选行：.detail-form label 是 grid（标签在上、控件在下），勾选要横排 ---- */ .detail-form label.detail-check { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 13px !important; font-weight: 500; } .detail-check input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--violet); } .detail-form input[readonly] { color: #7d8581; background: var(--soft); } /* 密钥串在二级面板里也要跟着放大到可读字号（.totp-secret 基线是 12.5px，够用，这里只收边距） */ .settings-detail-body .totp-secret { margin: 0; } /* ---- 8. 暗色态 ---- */ html[data-theme="dark"] .settings-embed-card { color: var(--text); background: #181b19; border-color: var(--line); } /* 移植稿的暗色块（views.css:4450-4458）只覆盖了 profile-head/form/stats/note/list/about/document， 剩下这几个在暗色下还是「白底白字」——sheet 此前零使用，从没在暗色里跑过。 */ html[data-theme="dark"] .detail-link, html[data-theme="dark"] .detail-secondary { color: var(--text); background: #252a27; border-color: var(--line); } html[data-theme="dark"] .detail-link:hover, html[data-theme="dark"] .detail-secondary:hover { color: var(--ink); background: #2d332f; } html[data-theme="dark"] .detail-link.danger-text { color: #ff7a68; } html[data-theme="dark"] .detail-danger { color: #ff8b7a; background: #241816; border-color: rgba(229,72,52,.32); } html[data-theme="dark"] .detail-danger strong { color: #ff8b7a; } html[data-theme="dark"] .detail-danger p { color: #c09189; } html[data-theme="dark"] .settings-row-value { color: var(--text); } html[data-theme="dark"] .detail-hint, html[data-theme="dark"] .detail-profile-id small { color: var(--muted); } html[data-theme="dark"] .detail-profile-id strong { color: var(--ink); } html[data-theme="dark"] .detail-check { color: var(--ink); } html[data-theme="dark"] .detail-form input[readonly] { background: #141715; } /* ---- 9. ≤620px ---- ⚠️ tokens.css:79-80 里那两条「手机上 sheet 变全屏」的规则是**失效的**：它写在 tokens.css （加载序第一），而 views.css:3847/3870 的 `.settings-layer{padding:14px}` / `.settings-sheet{border-radius:24px;border:1px}` 同特异性、加载序更靠后，直接把它盖掉了 （媒体查询不加特异性）。sheet 此前零使用所以没人踩到。本文件并进 shell-extras.css（加载序最后）， 在这里重申一遍才真正生效——实测 500px 视口下 padding 仍是 14px、圆角仍是 24px。 */ @media (max-width: 620px) { .settings-layer { padding: 0; } .settings-sheet { width: 100%; border: 0; border-radius: 0; } .settings-back { width: 42px; height: 42px; min-width: 42px; flex-basis: 42px; } .settings-sheet-header { min-height: 76px; padding: 13px 14px; } .detail-stats { grid-template-columns: 1fr; } } /* -- 侧栏 Recent 对齐 Demo recent-sessions(2026-08-03 用户实证字级/粗细/色阶不符): 移植 CSS 全套接活;末尾那条 .recent-sessions{display:none} 击杀规则在此压回 -- */ .recent-sessions { display: block; } .recent-sessions-list.expanded { max-height: none; } .recent-session-row.active { background: var(--soft, #f5f4f1); } .recent-session-row.active > button:first-child strong { font-weight: 750; } .recent-rename-input { grid-column: 1 / -1; min-width: 0; height: 36px; margin: 5px 3px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; outline: none; } .recent-rename-input:focus-visible { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent); } html[data-theme="dark"] .recent-session-menu { background: var(--surface, #101713); } /* #159:邀请链接落地提示(登录卡标题下小字条) */ .auth-invite-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px; border: 1px solid rgba(255, 49, 72, .18); border-radius: 999px; color: var(--red); background: rgba(255, 49, 72, .06); font-size: 12px; font-weight: 600; } /* #151:顶栏头像 KOL 角标定位基准(.kol-avatar-badge 底稿在 views.css:5397) */ .top-right .avatar { position: relative; overflow: visible; } /* ============ 新手引导(新版 Demo installFirstRunTour 原样式,实际尺寸) ============ */ .first-run-layer { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(18, 16, 15, .44); backdrop-filter: blur(7px); opacity: 0; pointer-events: none; transition: .22s; } .first-run-layer.show { opacity: 1; pointer-events: auto; } .first-run-card { width: min(470px, 100%); border: 1px solid var(--line); border-radius: 24px; padding: 26px; background: var(--surface, #fff); box-shadow: 0 30px 80px rgba(24, 18, 14, .28); transform: translateY(10px); transition: .22s; } .first-run-layer.show .first-run-card { transform: none; } .first-run-card h2 { margin: 0; color: var(--ink); font-size: 24px; letter-spacing: -.02em; } .first-run-card > p { margin: 8px 0 18px; color: var(--muted); font-size: 14px; line-height: 1.55; } .first-run-step { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--violet-pale, #fff6f2); } .first-run-step + .first-run-step { margin-top: 8px; } .first-run-step i { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--violet); background: var(--violet-soft); font-size: 13px; font-weight: 800; font-style: normal; } .first-run-step strong { display: block; color: var(--ink); font-size: 14px; } .first-run-step span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.5; } .first-run-actions { display: flex; gap: 8px; margin-top: 20px; } .first-run-actions .tour-start { flex: 1; height: 42px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--violet), var(--violet-2)); font-size: 14px; font-weight: 700; cursor: pointer; } .first-run-actions .tour-skip { height: 42px; border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 650; cursor: pointer; } .first-run-actions .tour-start:hover { filter: brightness(1.05); } .first-run-actions .tour-skip:hover { color: var(--ink); } /* ============ 指标卡涨跌色(新版:涨=绿,基础色仍为品牌红系;海外习惯) ============ */ .metric-card small.up { color: var(--green) !important; } html[data-theme="dark"] .metric-card small.up { color: var(--green) !important; } /* #155 回归:step2 右栏(xp-col)与另两栏统一 64px 头高(components.css:727 组只列了 step3 的 review-panel) */ .studio .xp-col > .panel-head { min-height: 64px !important; height: 64px !important; flex-basis: 64px !important; padding-inline: 16px !important; } /* #160:预览机型双段切换(iOS/Android),替代原生 select 下拉 */ .pv-device-seg { gap: 4px; } .pv-device-seg button { height: 22px; padding: 0 9px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 13px; /* Demo configure-tool-button 字级(shared-css:1890-1895) */ font-weight: 650; cursor: pointer; } .pv-device-seg button.active { color: #fff; background: var(--ink); } html[data-theme="dark"] .pv-device-seg button.active { color: var(--ink); background: #fff; } /* #161:预览版本历史浮层(pv-pill 下方,自定义菜单不走原生 select) */ .pv-version-wrap { position: relative; display: inline-flex; } .pv-version-scrim { position: fixed; inset: 0; z-index: 140; } .pv-version-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 141; min-width: 230px; max-height: 280px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); box-shadow: 0 18px 48px rgba(24, 18, 14, .18); display: grid; gap: 2px; } .pv-version-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; font-size: 12px; text-align: left; cursor: pointer; } .pv-version-menu button:hover { background: var(--soft, #f6f6f8); } .pv-version-menu button.active { background: var(--violet-soft); color: #c22736; font-weight: 700; } .pv-version-menu button small { margin-left: auto; color: var(--muted); font-size: 10.5px; } .pv-version-empty { padding: 14px; color: var(--muted); font-size: 12px; text-align: center; } html[data-theme="dark"] .pv-version-menu { background: #101713; } /* ============ #167 AIP→AIT 兑换弹窗(原型形态小件,复用 wallet-dialog 壳) ============ */ .convert-balance-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft, #f8f8fb); } .convert-balance-card > span { display: grid; gap: 3px; flex: 1; } .convert-balance-card small { color: var(--muted); font-size: 11px; } .convert-balance-card strong { font-size: 15px; } .convert-rate-note { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 14px; padding: 6px 12px; border: 1px solid rgba(22, 134, 83, .25); border-radius: 999px; color: #168653; background: #e9f7f0; font-size: 12px; font-weight: 600; } .convert-amount-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 14px; border: 1px solid var(--line-strong); border-radius: 12px; } .convert-amount-row input { flex: 1; height: 40px; border: 0; outline: 0; background: transparent; font-size: 16px; font-weight: 700; } .convert-amount-row > span { color: var(--muted); font-size: 12px; font-weight: 700; } .convert-max { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; color: var(--red); background: var(--violet-soft); font-size: 11px; font-weight: 700; cursor: pointer; } .convert-help { margin: 6px 0 10px; color: var(--muted); font-size: 11.5px; } .convert-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } .convert-quick button { height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 12.5px; font-weight: 650; cursor: pointer; } .convert-quick button:hover:not(:disabled) { border-color: var(--red); color: var(--red); } .convert-quick button:disabled { opacity: .45; cursor: default; } .convert-summary { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; } .convert-summary > div { display: flex; justify-content: space-between; font-size: 12.5px; } .convert-summary > div:last-child { padding-top: 8px; border-top: 1px solid var(--line); font-weight: 700; } .convert-agree { margin-bottom: 12px; font-size: 12.5px; justify-content: flex-start; gap: 8px; } .convert-error { margin: 0 0 10px; color: var(--orange); font-size: 12px; } .convert-submit { width: 100%; height: 44px; justify-content: center; } html[data-theme="dark"] .convert-quick button { background: transparent; } /* ============ Demo ≤620 响应式字号校正段(shared-css:2028-2034 原文,必须在全部放大层之后加载, 否则被后载 22/12/28 覆盖——font-audit T08/T09/T10) ============ */ @media (max-width: 620px) { .page-heading h1 { font-size: 24px !important; } .campaign-bar h1, .campaign-title-row h1 { font-size: 19px !important; } .workflow-segmented .step { padding-inline: 9px; font-size: 11px; } } /* #168 回归修:卡片实际高度远超底稿 354px 滚动区,260px 像素兜底只在小卡近似居中、 高卡片里仍居顶。改为卡片 flex 列+滚动区撑满剩余高度,loading/空态走 100% 链全卡垂直居中 */ .wallet-records-card { display: flex; flex-direction: column; } .wallet-records-card > header { flex: none; } /* #168 二轮回归教训:height:auto 会打断 min-height:100% 的百分比解析链(百分比要求父级 definite height), 上一版 flex 方案因此坍缩回居顶——整链改 flex 传递,不再依赖任何百分比高度 */ .wallet-record-scroll { flex: 1; height: auto; min-height: 354px; display: flex; flex-direction: column; } .wallet-record-scroll > .wallet-record-list { flex: 1; display: flex; flex-direction: column; min-height: 0; } .wallet-record-pagination { flex: none; } .wallet-record-empty { flex: 1; min-height: 260px; } /* #172:渠道 icon 贴左上根因——.channel-name span(Demo 底稿,specificity 0,1,1)把 span.channel-logo 的 display:grid 盖成 block,place-items 失效;更高优先级恢复,并加 flex 收缩保护(实测被压到 30px) */ .channel-name span.channel-logo { display: grid; margin-top: 0; } .channel-name .channel-logo { flex: 0 0 auto; } /* #172 回归:作品表现榜严格走 Demo .agent-row 原生形态——50px 定高+border-top 行分隔(此前 button 复位 inline border:0 把分隔线杀了,行界模糊+行高可变=「icon 不对齐」观感);标题超长单行省略 */ .insight-list .agent-row.perf-row { width: 100%; height: 50px; padding: 0; border: 0; border-top: 1px solid var(--line); background: transparent; cursor: pointer; text-align: left; font: inherit; } .insight-list .agent-dot { flex: 0 0 auto; } /* #172 回归②:.agent-row span(Demo 底稿)把 span.agent-dot 盖成 block+margin-top,内部 svg 贴左上—— 与渠道 icon 同款 specificity 病,恢复 grid 居中(全局:营销榜/网络页 agent 列表同修) */ .agent-row span.agent-dot { display: grid; margin-top: 0; place-items: center; } /* #155-nowrap 组:工具条禁换行(nowrap 本体在上方两条里),这里管收缩分配—— 右组(Share)保完整,左组可收缩,超宽由版本药丸文本省略消化(有版本号时是 v1.0 短文本无感) */ .configure-preview-toolbar .preview-tools:last-child { flex: 0 0 auto; } .configure-preview-toolbar .pv-version-wrap { min-width: 0; max-width: 168px; } .configure-preview-toolbar .pv-version-wrap .configure-tool-button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; } /* #184:提审就绪度卡(Demo page-review readiness 原文,字号按产品截图直标——本卡为新增块无双层底稿) */ .readiness { border-radius: 14px; padding: 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 14px; color: #fff; background: linear-gradient(135deg,#241b16,#33221a); box-shadow: 0 10px 25px rgba(41,28,26,.18); position: relative; overflow: hidden; } .readiness::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; right: -55px; top: -65px; background: rgba(255,110,64,.22); } .readiness-copy { position: relative; z-index: 1; min-width: 0; } .readiness-copy strong { display: block; font-size: 17px; letter-spacing: -.01em; } .readiness-copy span { display: block; margin-top: 4px; color: #b8bac6; font-size: 12px; line-height: 1.4; } .readiness-copy em { display: inline-block; margin-top: 6px; color: #ffb59e; font-size: 12px; font-style: normal; font-weight: 700; } .score { width: 62px; height: 62px; flex: 0 0 62px; border-radius: 50%; display: grid; place-items: center; position: relative; } .score::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #282a3a; } .score strong { position: relative; font-size: 15px; } /* #184:分享钮 icon 化后恢复方钮(盖掉此前给文字版写的 width:auto 修正) */ .studio .preview-controlbar .preview-share-btn.icon-only { width: 42px; min-width: 42px; padding: 0; gap: 0; } /* #185:就绪度卡审核态变体(过审绿/驳回红)+审核中时钟脉冲 */ .readiness.approved { background: linear-gradient(135deg,#12281d,#1a3a29); } .readiness.approved::after { background: rgba(62,207,142,.20); } .readiness.approved .readiness-copy em { color: #8fe6bd; } .readiness.rejected { background: linear-gradient(135deg,#2b1516,#3a1d1e); } .readiness.rejected::after { background: rgba(226,87,76,.20); } .score.score-spin { background: conic-gradient(#ffb59e 0 25%, rgba(255,255,255,.13) 25%); animation: score-spin 2.4s linear infinite; } .score.score-spin strong { animation: score-unspin 2.4s linear infinite; } @keyframes score-spin { to { transform: rotate(360deg); } } @keyframes score-unspin { to { transform: rotate(-360deg); } } /* #151:账户菜单 KOL 行认证态(Demo [data-kol-state] 属性驱动,此前漏抽)——过审红/审核中琥珀 */ .account-menu-item[data-kol-state="approved"] > svg:first-child { color: #d91f3b; } .account-menu-item[data-kol-state="approved"] small { color: #c91d36; } .account-menu-item[data-kol-state="pending"] > svg:first-child { color: #b47418; } /* ============ #189 深色主题适配补批:硬编码浅色组件逐组补 dark 变体 ============ */ /* 1. 预览 iOS/Android 切换——原 dark 规则 active 用 var(--ink)(dark=白)配白底=白底白字 */ html[data-theme="dark"] .pv-device-seg button.active { color: #10140f; background: #edf0ec; } /* 2. 营销弹窗步骤条:整条白横幅→融入弹窗深底 */ html[data-theme="dark"] .marketing-steps { background: #131a15; } html[data-theme="dark"] .marketing-steps > i { background: #2b342d; } html[data-theme="dark"] .marketing-steps button { color: #79837b; } html[data-theme="dark"] .marketing-steps button span { color: #9aa39c; background: #222a24; } html[data-theme="dark"] .marketing-steps button.active { color: var(--ink); } html[data-theme="dark"] .marketing-steps button.active span { color: #fff; background: var(--violet); } /* 3. 弹窗次要/三级按钮:白底白字不可读 */ html[data-theme="dark"] .agent-secondary { color: var(--ink); background: #1c231e; border-color: var(--line); } html[data-theme="dark"] .agent-secondary:hover { background: #232b25; } html[data-theme="dark"] .agent-tertiary { color: #8d968f; } /* 4. S2 三统计卡:白卡白字 */ html[data-theme="dark"] .marketing-stat-grid article { background: #161d18; } html[data-theme="dark"] .marketing-stat-grid span { color: #79837b; } html[data-theme="dark"] .marketing-stat-grid strong { color: var(--ink); } /* 5. 邀请弹窗:白底卡/邀请码虚线卡/统计卡 */ html[data-theme="dark"] .invite-dialog { background: #121813; color: var(--ink); } html[data-theme="dark"] .invite-code-card { background: #171e19; border-color: #2f3831; } html[data-theme="dark"] .invite-code-card small { color: #79837b; } html[data-theme="dark"] .invite-code-card strong { color: var(--ink); } html[data-theme="dark"] .invite-code-card button { color: var(--ink); background: #1c231e; border-color: var(--line); } html[data-theme="dark"] .invite-stats article { border-color: var(--line); background: #161d18; } /* 6. 分段 tab(My Projects Agentic/Templates)与筛选 chip(Live·18/Verify/Disconnect 等) */ html[data-theme="dark"] .seg-tabs { background: #1a211c; } html[data-theme="dark"] .seg-tab { color: #79837b; } html[data-theme="dark"] .seg-tab.active { color: #10140f; background: #edf0ec; } html[data-theme="dark"] .filter-chip { color: #9aa39c; background: #161d18; border-color: var(--line); } html[data-theme="dark"] .filter-chip.active { color: #10140f !important; background: #edf0ec !important; border-color: #edf0ec !important; } /* 7. Smart Marketing AI 建议卡:浅粉底在深色页面刺眼→深底同语义 */ html[data-theme="dark"] .insight { background: #1b1714 !important; } /* ============ #194 Network 可交互地球(canvas 引擎替换静态 .globe 装饰) ============ */ .globe-stage { position: absolute; inset: 0; cursor: grab; } .globe-stage canvas { position: absolute; inset: 0; touch-action: pan-y; } /* 药丸跟随针尖:清掉 .my-agent 的 right/top 预设,位置由 JS 每帧写 left/top */ .globe-stage .my-agent.globe-me { right: auto; top: auto; left: 0; display: none; transform: translate(-50%, -130%); white-space: nowrap; pointer-events: none; } html[data-theme="dark"] .network-stage { background: radial-gradient(circle at 50% 64%, #1a1830, #12141f 62%); } /* #181 三轮:Live sample 头像=当前形象立绘(替换固定 icon);四轮回归:放大到 44px 且与文案上下居中(原型口径) */ .agent-sample { align-items: center; } .agent-sample-avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; object-fit: cover; object-position: top; background: #eef1ee; } html[data-theme="dark"] .agent-sample-avatar { background: #232b25; } /* #199:深色下模板卡沿用浅色卡体设计语言(footer 同款),标题/副行不能跟 --ink/--muted 变白——钉回卡上深色 */ html[data-theme="dark"] .create-page .template-card h3 { color: #1b1f2a; } html[data-theme="dark"] .create-page .template-card p { color: #6b7280; } /* ============ #195: Console 手机端信息架构与溢出收口 ============ 1180px 的桌面 rail 会隐藏导航文案；手机抽屉打开后必须显式撤销 rail，而不是继承纯图标态。 Configure / Review 在窄屏改成真正的页面流：活动头、Copilot、预览、设置/检查器各自占位， 不再依赖桌面三栏的固定最小高度互相挤压。其余路由只处理已确认的窄屏硬宽与长文本。 */ @media (max-width: 920px) { .app.nav-open .sidebar .airvana-wordmark, .app.nav-open .sidebar .nav-label, .app.nav-open .sidebar .nav-text, .app.nav-open .sidebar .workspace-copy { display: block !important; } .app.nav-open .sidebar .nav-badge { display: inline-flex !important; } .app.nav-open .sidebar :is(.brand,.nav-item,.workspace-switch) { justify-content: flex-start; } .app.nav-open .sidebar .brand { padding-inline: 7px; } .app.nav-open .sidebar .nav-item { padding-inline: 10px; } .app.nav-open .sidebar .workspace-switch { padding-inline: 8px; } .app.nav-open .sidebar .nav-close-btn { margin-left: auto; } .dashboard-view[data-route="configure"] .page, .dashboard-view[data-route="review"] .page { padding: 0; gap: 14px; } .dashboard-view[data-route="configure"] .campaign-bar, .dashboard-view[data-route="review"] .campaign-bar { width: 100%; min-height: 0 !important; height: auto !important; flex: 0 0 auto !important; align-items: flex-start; gap: 10px; padding-block: 4px; } .dashboard-view[data-route="configure"] .campaign-left, .dashboard-view[data-route="review"] .campaign-left, .dashboard-view[data-route="configure"] .campaign-left > div, .dashboard-view[data-route="review"] .campaign-left > div { min-width: 0; } .dashboard-view[data-route="configure"] .campaign-right, .dashboard-view[data-route="review"] .campaign-right { width: 100%; min-width: 0; margin-left: 0; overflow-x: auto; scrollbar-width: thin; } .dashboard-view[data-route="configure"] .workflow-segmented, .dashboard-view[data-route="review"] .workflow-segmented { width: max-content; min-width: 100%; margin-left: 0; } .dashboard-view[data-route="configure"] .workflow-segmented .step, .dashboard-view[data-route="review"] .workflow-segmented .step { flex: 1 0 auto; } .configure-workspace.studio { width: 100%; min-width: 0; overflow: hidden; } .configure-workspace.studio > .configure-col { width: 100%; min-width: 0; min-height: 0; height: auto; } .configure-workspace.studio > .copilot-panel { height: clamp(480px,72dvh,620px); min-height: 480px; } .configure-workspace.studio > .preview-panel { min-height: 0; } .configure-workspace.studio > .preview-panel .phone-stage { height: clamp(540px,74dvh,630px); min-height: 0; flex: 0 0 auto; } .configure-workspace.studio > .xp-col .xp-stack { flex: 0 0 auto; min-height: 0; overflow: visible; } .configure-workspace.studio > .review-panel { height: clamp(590px,82dvh,760px); min-height: 590px; } } @media (max-width: 720px) { .tabs-row { align-items: stretch; flex-direction: column; } .tabs-row .seg-tabs { width: 100%; } .tabs-row .seg-tab { min-width: 0; flex: 1; } .tabs-row > .filter-row { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .tabs-row > .filter-row .filter-chip { flex: 0 0 auto; } .network-headline { align-items: flex-start; } .network-headline .sat-link { max-width: 100%; overflow-wrap: anywhere; } .agent-panel .agent-row { height: auto; min-height: 64px; flex-wrap: wrap; padding-block: 8px; } .agent-panel .agent-row > div:nth-child(2) { min-width: 0; } .agent-panel .agent-row > div:last-child { width: calc(100% - 35px); margin-left: 35px !important; } .agent-panel .agent-row > div:last-child .filter-chip { flex: 1; } .agent-panel input { min-width: 0; } .wallet-record-row { grid-template-columns: 38px minmax(0,1fr) auto; gap: 4px 8px; } .wallet-record-row > .wallet-record-icon { grid-column: 1; grid-row: 1 / 3; } .wallet-record-row > span:nth-child(2) { grid-column: 2; grid-row: 1; } .wallet-record-row > time { grid-column: 2; grid-row: 2; } .wallet-record-row > em { grid-column: 3; grid-row: 1 / 3; min-width: 0; max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 430px) { .studio .preview-panel > .panel-head.preview-controlbar { min-height: 112px !important; height: auto !important; flex-basis: auto !important; flex-wrap: wrap; align-content: center; padding: 8px !important; } .studio .preview-controlbar .preview-tools:first-child { width: 100%; justify-content: center; } .wallet-records-card, .wallet-brand-task, .wallet-billing-card { padding: 16px !important; } .marketing-panel, .insight-list, .agent-panel { padding-inline: 16px; } .channel-row { grid-template-columns: 94px minmax(0,1fr) 40px; gap: 10px; } } /* #180 四轮:S2 手动添加广告位(老中文版显式动作补齐)——按钮态与三选一行 */ .placement-add-btn { margin-top: 10px; width: auto; padding-inline: 16px; flex: none; } .placement-add-row { min-width: 0; margin-top: 10px; padding: 9px 10px; display: grid; grid-template-columns: minmax(105px,.9fr) minmax(115px,1fr) minmax(140px,1.15fr) auto auto; align-items: center; gap: 8px; border-radius: 12px; background: #fafbf9; } .placement-add-row select { min-width: 0; width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 9px; padding: 0 8px; color: #525a55; background: #fff; font-size: 8px; } .placement-add-row .agent-primary, .placement-add-row .agent-tertiary { height: 34px; min-height: 34px; padding-inline: 12px; white-space: nowrap; } html[data-theme="dark"] .placement-add-row { background: #161d18; } html[data-theme="dark"] .placement-add-row select { background: #1c231e; color: #c9d0c9; border-color: var(--line); } /* #180 五轮:绿色安全区可点添加(老版 cursor:copy 同款),hover 提亮示意可点 */ .timing-zones .zone-clickable { cursor: copy; transition: filter .15s; } .timing-zones .zone-clickable:hover { filter: brightness(.96) saturate(1.15); } .timing-zones .zone-clickable:focus-visible { outline: 2px solid rgba(11,149,110,.5); outline-offset: -2px; } /* 配置数超每局上限:琥珀软提示(合法状态,运行时择优,不报红不锁) */ .marketing-stat-grid article.stat-over strong { color: #b45309; } .marketing-stat-grid article.stat-over em { display: block; margin-top: 6px; font-style: normal; font-size: 10px; line-height: 1.5; color: #b45309; opacity: .85; } /* 乐观临时行:保存往返期间只读(视觉几乎无感,毫秒级) */ .placement-list article.anchor-pending { pointer-events: none; } /* ===== #119 品牌任务核销卡 · console 版(对齐产品原型 brandq 两状态) ===== */ /* margin-top 与页面既有区块节奏一致(实测 wallet 相邻区块间距=14px;父容器是 block 布局无 gap, 间距靠各自 margin——空态卡 .wallet-brand-task-inline 同样是 14px) */ .dashboard-card.brandq { position: relative; margin-top: 14px; min-height: 154px; padding: 20px; display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,430px); align-items: stretch; gap: 18px; overflow: hidden; } .dashboard-card.brandq.redeemed { border-color: color-mix(in srgb, #21c075 32%, var(--line)); } .brandq-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; } .brandq-heading { display: grid; grid-template-columns: 44px minmax(0,auto) auto; align-items: center; justify-content: start; gap: 12px; } .brandq-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #d72b3d; background: #fff0f1; } .brandq.redeemed .brandq-mark { color: #168653; background: #e9f8f0; } .brandq-title { min-width: 0; } .brandq-kicker { display: block; color: var(--faint); font-size: 10.5px; font-weight: 820; letter-spacing: .12em; line-height: 1; text-transform: uppercase; } .brandq-title h2 { margin: 6px 0 0; font-size: 19px; line-height: 1.05; letter-spacing: -.03em; } .brandq-reward { display: inline-flex; align-items: center; gap: 6px; height: 31px; padding: 0 11px; border: 1px solid #ffd6cd; border-radius: 999px; color: #bd2434; background: #fff5f2; font-size: 13px; font-style: normal; font-weight: 820; line-height: 1; white-space: nowrap; } .brandq.redeemed .brandq-reward { color: #168653; border-color: #cfe9dc; background: #eef8f3; } .brandq-main > p { max-width: 650px; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; } .brandq-flow { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 8px; } .brandq-flow span { min-height: 28px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 11.5px; font-weight: 760; } .brandq-flow .done { color: #168653; border-color: #cfe9dc; background: #f3fbf6; } .brandq-flow .active { color: #bd2434; border-color: #ffd6cd; background: #fff3f4; } .brandq-claim { min-width: 0; padding: 12px; display: grid; align-content: center; gap: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--soft); } .brandq.redeemed .brandq-claim { border-color: #dbeee4; background: color-mix(in srgb, #21c075 6%, var(--soft)); } .brandq-form { display: grid; gap: 8px; text-align: left; } .brandq-form label { margin: 0; color: var(--muted); font-size: 11px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; } .brandq-input-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; } .brandq-input-row input { width: 100%; min-width: 0; height: 43px; border: 1px solid var(--line); border-radius: 13px; padding: 0 13px; color: var(--ink); background: var(--surface); font-size: 13px; font-weight: 700; } .brandq-input-row input:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 14%, transparent); } .brandq-input-row .btn, .brandq-form > .btn { min-height: 43px; border-radius: 13px; } .brandq-link { width: fit-content; min-height: 26px; display: inline-flex; align-items: center; border: 0; padding: 0; color: var(--muted); background: transparent; font-size: 12px; font-weight: 760; cursor: pointer; } .brandq-link:hover { color: var(--red); } .brandq-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .brandq-receipt { display: grid; gap: 10px; } .brandq-receipt-main { min-width: 0; padding: 12px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 11px; border: 1px solid #dceee4; border-radius: 15px; background: var(--surface); } .brandq-receipt-badge { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: #168653; background: #eaf8f0; } .brandq-receipt-main strong { display: block; font-size: 14px; line-height: 1.2; } .brandq-receipt-main small { display: block; max-width: 100%; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .brandq-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .brandq-actions .btn { width: 100%; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .brandq-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .brandq-proof-grid article { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); } .brandq-proof-grid small { display: block; color: var(--faint); font-size: 11px; } .brandq-proof-grid strong { display: block; margin-top: 5px; font-size: 14px; } .brandq-proof-foot { display: flex; align-items: center; gap: 7px; margin: 12px 0; color: var(--muted); font-size: 12px; } @media (max-width: 920px) { .dashboard-card.brandq { grid-template-columns: 1fr; } } /* 暗色：胶囊与徽章用半透明底，跟随 console 主题变量 */ html[data-theme="dark"] .brandq-mark { color: #ff7482; background: rgba(255,49,72,.14); } html[data-theme="dark"] .brandq.redeemed .brandq-mark { color: #73dfad; background: rgba(33,192,117,.14); } html[data-theme="dark"] .brandq-reward { color: #ff9aa4; border-color: rgba(255,112,126,.28); background: rgba(255,49,72,.1); } html[data-theme="dark"] .brandq.redeemed .brandq-reward { color: #77d6a8; border-color: #31513e; background: rgba(33,192,117,.12); } html[data-theme="dark"] .brandq-flow .done { color: #77d6a8; border-color: #31513e; background: rgba(33,192,117,.1); } html[data-theme="dark"] .brandq-flow .active { color: #ff8f9b; border-color: #5a3338; background: rgba(255,49,72,.12); } html[data-theme="dark"] .brandq-receipt-main { border-color: #31513e; } html[data-theme="dark"] .brandq-receipt-badge { color: #73dfad; background: rgba(33,192,117,.14); }